/* Puzelo — visual language: calm, friendly-geometric, premium. Self-contained (no webfonts): depth comes from color, spacing, motion. */ :root{ --bg:#f2f3fa; --bg-wash1:rgba(91,91,214,.07); --bg-wash2:rgba(240,167,46,.06); --card:#ffffff; --ink:#1e2033; --ink-soft:#686b86; --brand:#4F46C9; --brand2:#7a5bd6; --brand-deep:#3E36AF; --brand-soft:#e9e9fb; --accent:#f0a72e; --accent-soft:#fdf2df; --streak:#D9614C; --streak-soft:#fdeae4; --bin0:#3b82c4; --bin1:#d4823a; --line:#e4e4f0; --given:#23243a; --entry:#4a4ad0; --error:#d4453a; --conflict:#fdecea; --ok:#2e9e6b; --note:#8a8cb0; --shadow:0 5px 22px rgba(35,36,58,.07), 0 1px 3px rgba(35,36,58,.05); --shadow-pop:0 14px 38px rgba(60,60,150,.16); } :root[data-theme="dark"], :root[data-theme="auto"].sys-dark{ --bg:#13141d; --bg-wash1:rgba(124,124,236,.09); --bg-wash2:rgba(240,167,46,.05); --card:#1d1f2e; --ink:#eceef8; --ink-soft:#9fa3c0; --brand:#8f8bf2; --brand2:#a98cf0; --brand-deep:#7d78ec; --brand-soft:#2b2d48; --accent:#f0b356; --accent-soft:#332a1c; --streak:#FF8B73; --streak-soft:#37231f; --bin0:#6aa9e0; --bin1:#e8a35f; --line:#30324a; --given:#eceef8; --entry:#b3b3ff; --conflict:#3a2426; --note:#7d7fa8; --shadow:0 5px 22px rgba(0,0,0,.32), 0 1px 3px rgba(0,0,0,.3); --shadow-pop:0 14px 38px rgba(0,0,0,.5); } *{box-sizing:border-box; margin:0; -webkit-tap-highlight-color:transparent;} /* `hidden` muss gewinnen. Der Browser setzt dafuer nur eine UA-Regel ([hidden]{display:none}), und JEDE eigene Klassenregel mit `display:` ist spezifischer. Peer fand es am 17.09.2026 in Build 31: `.sprachwahl` setzt `display:inline-flex`, also blieb der Sprachknopf in der App sichtbar, obwohl app.js ihn ausdruecklich auf `hidden` gesetzt hatte. Der Code war richtig, das Stylesheet hat ihn ueberstimmt — lautlos, in beide Richtungen pruefbar nur am fertigen Bild. Deshalb einmal zentral und mit !important. */ [hidden]{display:none !important;} html{height:100%;} body{color:var(--ink); font-family:system-ui,-apple-system,'Segoe UI',sans-serif; min-height:100dvh; transition:background .25s,color .25s; background: radial-gradient(42rem 26rem at 110% -8%, var(--bg-wash1), transparent 60%), radial-gradient(34rem 22rem at -18% 32%, var(--bg-wash2), transparent 60%), var(--bg); background-attachment:fixed;} button{font:inherit; border:0; cursor:pointer; border-radius:.85rem; color:inherit; background:none;} /* Sichere Bereiche: Die Seite steht auf viewport-fit=cover, nutzt also den ganzen Bildschirm bis unter die Statusleiste und die Dynamic Island. Ohne env(safe-area-inset-*) landet der Inhalt DARUNTER — im Simulator lag die komplette Kopfzeile (Zurueck, Raetselart, Zeit) unlesbar hinter Uhrzeit und Insel. Im Desktop-Browser sind diese Werte 0, dort faellt es nie auf. Unten kommt der Abstand fuer den Home-Indikator dazu. */ .screen{max-width:27rem; margin:0 auto; display:none; animation:fadein .24s ease; padding:calc(1.15rem + env(safe-area-inset-top)) calc(1rem + env(safe-area-inset-right)) calc(3rem + env(safe-area-inset-bottom)) calc(1rem + env(safe-area-inset-left));} .screen.active{display:block;} @keyframes fadein{from{opacity:0; transform:translateY(7px);} to{opacity:1;}} /* Warum Puzelo: zwei leise Zeilen unter dem Tagesraetsel, in der Farbe der Nebentexte. */ .warum{display:flex; flex-direction:column; gap:.3rem; margin:.7rem .2rem 0; color:var(--ink-soft); font-size:.86rem;} .warum > span{display:flex; align-items:flex-start; gap:.45rem;} .warum .ic{flex:none; margin-top:.1rem; color:var(--ok);} .warum > span:nth-child(2) .ic{color:var(--brand);} /* App-Huelle (html.app wird von app.js gesetzt, sobald Capacitor nativ laeuft): Was eine Website ist, verraet sich auf dem Telefon an Kleinigkeiten - langes Druecken markiert Text oder oeffnet ein Kontextmenue, der Rand federt wie Safari, ein Doppeltipp zoomt. Jedes davon sagt dem Nutzer (und dem Pruefer): das ist ein Browser. Deshalb in der App aus; Eingabefelder bleiben markierbar. */ html.app body{-webkit-user-select:none; user-select:none; -webkit-touch-callout:none; overscroll-behavior:none;} html.app input, html.app textarea{-webkit-user-select:text; user-select:text;} html.app img, html.app svg{-webkit-user-drag:none; pointer-events:none;} /* Klick landet beim Knopf dahinter */ html.app{-webkit-text-size-adjust:100%;} /* Topbar & brand */ .topbar{display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.55rem;} .brand{display:flex; align-items:center; gap:.5rem; font-weight:800; font-size:1.45rem; letter-spacing:-.02em; font-family:ui-rounded,'SF Pro Rounded',system-ui,sans-serif;} .brand .o{color:var(--brand);} .logo{width:1.75rem; height:1.75rem; border-radius:.55rem; box-shadow:0 3px 10px rgba(79,70,201,.35); flex:none;} .iconbtn{font-size:1.05rem; padding:.48rem .58rem; border-radius:.75rem; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); transition:transform .1s;} .iconbtn:active{transform:scale(.92);} .streak{display:inline-flex; align-items:center; gap:.3rem; font-weight:800; font-size:.9rem; background:var(--streak-soft); color:var(--streak); border-radius:999px; padding:.3rem .7rem;} .streak svg{width:1.05rem; height:1.05rem;} /* Cards */ .card{background:var(--card); border:1px solid var(--line); border-radius:1.15rem; padding:1.05rem 1.15rem; margin-top:.9rem; box-shadow:var(--shadow);} .hero{position:relative; overflow:hidden; border:0; color:#fff; padding:1.2rem 1.15rem; background:linear-gradient(135deg,var(--brand-deep),var(--brand) 55%,var(--brand2)); box-shadow:0 10px 30px rgba(67,65,184,.28);} .hero .muted{color:rgba(255,255,255,.78);} .hero-art{position:absolute; right:-1.4rem; top:-1.6rem; width:9.5rem; opacity:.5; pointer-events:none;} .hero > *:not(.hero-art){position:relative;} .daylabel{display:inline-flex; align-items:center; gap:.4rem; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.85); background:rgba(255,255,255,.14); border-radius:999px; padding:.28rem .7rem; margin-bottom:.5rem;} /* Buttons */ .btn{display:block; width:100%; padding:.95rem; font-weight:700; font-size:1rem; color:#fff; background:linear-gradient(135deg,var(--brand),var(--brand2)); border-radius:.95rem; box-shadow:0 6px 16px rgba(79,70,201,.25); transition:transform .09s, box-shadow .09s;} .btn:active{transform:scale(.975); box-shadow:0 3px 8px rgba(79,70,201,.25);} .btn.light{background:rgba(255,255,255,.92); color:var(--brand-deep); box-shadow:0 6px 16px rgba(20,20,60,.18);} .btn.ghost{background:var(--brand-soft); color:var(--brand); box-shadow:none;} /* Der Regel-Knopf bleibt so zurueckhaltend wie der fruehere Textlink — Peers Startseiten-Minimalismus —, ist aber als Knopf zu erkennen und antwortet beim Tippen. */ .regelknopf{background:none; border:0; padding:.5rem .8rem; font:inherit; font-size:.8rem; color:var(--ink-soft); text-decoration:underline; text-underline-offset:.25em; cursor:pointer; border-radius:.6rem; touch-action:manipulation; transition:transform .09s, background .12s;} .regelknopf:active{transform:scale(.96); background:var(--brand-soft);} /* Weiterspielen-Karte. Bewusst ruhiger als die Tagesraetsel-Karte — sie ist eine Erinnerung, kein zweiter Hauptknopf, und soll die Startseite nicht in zwei gleich laute Angebote spalten. */ .weiterkarte{display:flex; align-items:center; gap:.8rem; width:100%; text-align:left; margin:.9rem 0 0; padding:.85rem .95rem; border-radius:1rem; cursor:pointer; background:var(--card); border:1px solid var(--brand-soft); touch-action:manipulation; transition:transform .09s, border-color .15s;} .weiterkarte:active{transform:scale(.985);} .weiterkarte .ai{width:1.5rem; height:1.5rem; flex:0 0 auto; color:var(--brand); stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;} .weiterkarte .wtext{flex:1; min-width:0;} .weiterkarte .wtitel{font-weight:700; font-size:.95rem;} .weiterkarte .wunter{color:var(--ink-soft); font-size:.82rem; margin-top:.1rem;} .weiterkarte .chev{color:var(--ink-soft);} /* Die beiden letzten Knopfarten ohne sichtbare Rueckmeldung. Gefunden am 05.09.2026 durch Abgleich aller :active-Regeln gegen die anklickbaren Klassen im HTML — auffallen tut so etwas beim Lesen nie, nur beim Zaehlen. */ .back{touch-action:manipulation; transition:transform .09s, opacity .12s;} .back:active{transform:scale(.94); opacity:.65;} .seg button{touch-action:manipulation; transition:transform .08s, background .12s;} .seg button:active{transform:scale(.93);} /* Die Regelliste kann laenger sein als das Fenster. */ .regelrolle{max-height:min(58vh, 26rem); overflow-y:auto; -webkit-overflow-scrolling:touch; text-align:left; padding-right:.2rem;} /* Die Markenzeichen heissen .ai und BRAUCHEN stroke/fill ausdruecklich — ohne sie rendert das SVG als schwarzes Kaestchen in voller Kastenhoehe. Erst am 05.09.2026 gesehen, weil ich .ic geschrieben hatte. */ .regelrolle .ai{width:1.15rem; height:1.15rem; flex:0 0 auto; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;} /* Wartezustand fuer Knoepfe, hinter denen etwas Langsames haengt (StoreKit braucht ein bis zwei Sekunden, bis Apples Kauffenster kommt). Ohne ihn endet die einzige Rueckmeldung — :active — beim Loslassen, also GENAU dann, wenn das Warten anfaengt, und man tippt ein zweites Mal. Peer-Fund 04.09.2026. */ .btn.wartet, .btn.wartet:active{opacity:.72; transform:none; cursor:default; box-shadow:none; pointer-events:none;} .btn .spinner{display:inline-block; width:.95em; height:.95em; margin-right:.5em; vertical-align:-.12em; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:dreht .7s linear infinite;} @keyframes dreht{to{transform:rotate(360deg);}} @media (prefers-reduced-motion: reduce){ /* Ohne Drehung bleibt der Ring stehen — sichtbar ist der Zustand trotzdem, weil der Knopf gedimmt und gesperrt ist. */ .btn .spinner{animation:none;} } .rowline{display:flex; justify-content:space-between; align-items:center; gap:.6rem;} .muted{color:var(--ink-soft); font-size:.85rem;} /* Level list */ h2.sect{font-size:1.02rem; margin-top:1.6rem; display:flex; align-items:center; gap:.45rem; font-family:ui-rounded,'SF Pro Rounded',system-ui,sans-serif;} .levelbtn{width:100%; text-align:left; padding:.9rem 1rem; background:var(--card); border:1px solid var(--line); border-radius:1rem; margin-top:.55rem; box-shadow:var(--shadow); transition:transform .1s, border-color .15s;} .levelbtn:active{transform:scale(.985);} .levelbtn .dots{display:inline-flex; gap:.22rem; margin-right:.5rem; vertical-align:1px;} .levelbtn .dots i{width:.42rem; height:.42rem; border-radius:99px; background:var(--brand-soft);} .levelbtn .dots i.f{background:var(--brand);} .levelbtn .chev{color:var(--ink-soft); font-size:1.05rem; margin-left:.4rem;} .levelbtn .bar{height:.32rem; background:var(--brand-soft); border-radius:99px; margin-top:.55rem; overflow:hidden;} .levelbtn .bar i{display:block; height:100%; border-radius:99px; transition:width .3s; background:linear-gradient(90deg,var(--brand),var(--brand2));} .levelbtn.complete .bar i{background:var(--ok);} .pill{font-size:.68rem; font-weight:800; letter-spacing:.04em; color:#fff; border-radius:999px; padding:.2rem .6rem; background:linear-gradient(135deg,var(--accent),#e8912a);} .lock{opacity:.62;} /* Board */ /* touch-action:manipulation nimmt dem Browser den DOPPELTIPP-ZOOM weg und sonst nichts. Beim Raetseln tippt man dieselbe Zelle schnell zweimal an, um zu korrigieren — fuer WebKit ist das ein Doppeltipp, und die ganze Seite sprang auf 2x, samt Kopfzeile und Werkzeugleiste, ohne Weg zurueck. Peer passierte das mitten in der Apple-Aufnahme und er konnte es nicht zuordnen. Zwei-Finger-Zoom bleibt ausdruecklich erlaubt (Barrierefreiheit); nur die Geste, die man versehentlich macht, ist weg. Nebeneffekt: die 300 ms, die WebKit sonst auf einen zweiten Tipp wartet, entfallen — Zellen reagieren spuerbar direkter. */ #board, #board .cell, #pad button, .tools button{touch-action:manipulation;} #board{display:grid; aspect-ratio:1; border:2px solid var(--ink); border-radius:.7rem; container-type:inline-size; overflow:hidden; margin-top:.9rem; background:var(--card); box-shadow:var(--shadow);} .cell{position:relative; border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-weight:600; color:var(--entry); user-select:none; transition:background .12s; font-variant-numeric:tabular-nums;} .cell.given{color:var(--given); font-weight:700;} .cell.blockR{border-right:2px solid var(--ink);} .cell.blockB{border-bottom:2px solid var(--ink);} .cell.sel{background:var(--brand-soft); box-shadow:inset 0 0 0 2px var(--brand);} .cell.same{background:color-mix(in srgb,var(--brand-soft) 60%,transparent);} .cell.conflict{background:var(--conflict);} .cell.err{color:var(--error) !important;} .cell.pop{animation:cellpop .18s ease;} @keyframes cellpop{40%{transform:scale(1.22);}} .cell .notes{position:absolute; inset:1px; display:grid; grid-template-columns:repeat(3,1fr); font-size:.48rem; font-weight:500; color:var(--note); line-height:1;} .cell .notes span{display:flex; align-items:center; justify-content:center;} .cell.b0{color:var(--bin0);} .cell.b1{color:var(--bin1);} :root[data-theme="dark"] .cell.b0, :root[data-theme="auto"].sys-dark .cell.b0{color:#6aa9e0;} :root[data-theme="dark"] .cell.b1, :root[data-theme="auto"].sys-dark .cell.b1{color:#e8a35f;} /* Pad */ #pad{display:grid; gap:.4rem; margin-top:.85rem;} #pad.n9{grid-template-columns:repeat(9,1fr);} #pad.n2{grid-template-columns:repeat(2,1fr);} #pad button{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.05rem; aspect-ratio:.82; font-size:1.35rem; font-weight:700; background:var(--card); border:1px solid var(--line); border-radius:.75rem; box-shadow:var(--shadow); transition:transform .08s; font-variant-numeric:tabular-nums; line-height:1;} #pad button:active{transform:scale(.9); background:var(--brand-soft);} #pad button small{font-size:.58rem; font-weight:600; color:var(--note);} #pad.n2 button{aspect-ratio:2.6; flex-direction:row; gap:.45rem;} #pad button.done{opacity:.22;} .tools{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:.45rem; margin-top:.55rem;} .tools button{padding:.62rem .2rem; background:var(--card); border:1px solid var(--line); border-radius:.75rem; font-weight:600; font-size:.8rem; transition:transform .08s;} .tools button:active{filter:brightness(.92);} /* kein transform: eine Geometrieaenderung zwischen touchstart und touchend laesst WebKit den Click verwerfen (Simulator: Notizen/Zurueck reagierten nie; echte Geraete: sporadisch am Rand) */ .tools button.on{background:var(--brand); color:#fff; border-color:var(--brand); box-shadow:0 4px 12px rgba(79,70,201,.3);} .tools button:disabled{opacity:.4;} .back{color:var(--ink-soft); font-size:.9rem; padding:.4rem .2rem;} /* Overlay */ #overlay{position:fixed; inset:0; background:rgba(16,16,30,.55); backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center; padding:1rem; z-index:9;} #overlay.active{display:flex;} #overlay .card{max-width:22.5rem; width:100%; text-align:center; margin:0; box-shadow:var(--shadow-pop); animation:pop .28s cubic-bezier(.2,1.4,.4,1);} @keyframes pop{from{transform:scale(.88); opacity:0;} to{transform:scale(1); opacity:1;}} .big{width:4.6rem; height:4.6rem; margin:0 auto .3rem; display:flex; align-items:center; justify-content:center; font-size:2.3rem; border-radius:50%; --ai-size:2.1rem; background:radial-gradient(circle at 32% 28%, var(--brand-soft), transparent 75%); box-shadow:inset 0 0 0 2px var(--brand-soft);} .chips{display:flex; justify-content:center; gap:.45rem; flex-wrap:wrap; margin-top:.7rem;} .chip{font-size:.78rem; font-weight:700; background:var(--brand-soft); color:var(--brand); border-radius:999px; padding:.34rem .75rem; font-variant-numeric:tabular-nums;} .chip.gold{background:var(--accent-soft); color:var(--accent);} /* Stats & Settings */ .statgrid{display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-top:.8rem;} .stat{background:var(--card); border:1px solid var(--line); border-radius:1rem; padding:.85rem .6rem; text-align:center; box-shadow:var(--shadow);} .stat b{font-size:1.55rem; display:block; font-variant-numeric:tabular-nums; font-family:ui-rounded,'SF Pro Rounded',system-ui,sans-serif;} .stat .ico{display:block; height:1.35rem; margin-bottom:.25rem;} .stat .ico svg{height:100%; width:auto;} .stat .ico svg.ln{stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; color:var(--brand);} table.stats{width:100%; border-collapse:collapse; font-size:.88rem; margin-top:.4rem;} table.stats td, table.stats th{padding:.45rem .3rem; border-top:1px solid var(--line); text-align:left;} table.stats td:last-child{text-align:right; font-variant-numeric:tabular-nums;} .setrow{display:flex; justify-content:space-between; align-items:center; padding:.7rem 0; border-top:1px solid var(--line); gap:.8rem;} .setrow:first-child{border-top:0;} .seg{display:flex; background:var(--brand-soft); border-radius:.75rem; padding:.16rem;} .seg button{padding:.38rem .72rem; border-radius:.6rem; font-size:.8rem; font-weight:600; color:var(--brand);} .seg button.on{background:var(--brand); color:#fff; box-shadow:0 2px 8px rgba(79,70,201,.35);} #binHint{display:none; margin-top:.5rem; text-align:left; background:var(--card); border:1px solid var(--line); border-radius:.8rem; padding:.6rem .75rem; font-size:.78rem; line-height:1.45;} #binHint.offen{display:block; animation:aufklappen .18s ease-out;} @keyframes aufklappen{from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:none;}} .regelzeile{display:flex; justify-content:flex-end; margin-top:.55rem;} .linkknopf{background:none; border:0; padding:0; color:var(--brand); font:inherit; text-decoration:underline; cursor:pointer;} .linkknopf.klein{display:block; margin-top:.35rem; font-size:.78rem;} #toast{position:fixed; left:50%; bottom:1.4rem; transform:translateX(-50%); background:var(--ink); color:var(--bg); padding:.55rem 1rem; border-radius:.75rem; font-size:.85rem; z-index:20; max-width:90vw; text-align:center; opacity:0; transition:opacity .25s;} /* Konfetti */ .confetti{position:fixed; top:-10px; z-index:15; font-size:1.1rem; animation:fall linear forwards; pointer-events:none;} @keyframes fall{to{transform:translateY(105vh) rotate(900deg); opacity:.85;}} /* Verified-Badge in der Hero-Karte */ .vbadge{display:flex; align-items:center; justify-content:center; gap:.4rem; margin-top:.7rem; font-size:.76rem; font-weight:600; color:rgba(255,255,255,.85);} .vbadge i{display:inline-flex; align-items:center; justify-content:center; width:1rem; height:1rem; border-radius:50%; background:rgba(255,255,255,.22); font-style:normal; font-size:.62rem;} /* Meilenstein-Abzeichen */ .badges{display:flex; gap:.5rem; margin-top:.8rem;} .badges .b{flex:1; text-align:center;} .badges svg{width:2.7rem; height:2.7rem;} .badges .b.locked svg{opacity:.32; filter:grayscale(1);} .badges .b span{display:block; font-size:.68rem; font-weight:600; color:var(--ink-soft); margin-top:.15rem;} /* Sieg-Grafik + Streak-Chip */ .winart{width:10.5rem; max-width:70%; margin:0 auto .2rem; display:block;} .chip.streakc{background:var(--streak-soft); color:var(--streak); display:inline-flex; align-items:center; gap:.3rem;} .chip.streakc svg{width:.95rem; height:.95rem;} /* Zeichen je Rätselart in den Abschnittsüberschriften */ h2.sect .ai{width:1.15rem; height:1.15rem; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; color:var(--brand);} /* Gitter mit Randzahlen: der Rahmen gehört zum selben Raster, damit nichts verrutschen kann. Der schwarze Außenrahmen entfällt dann. */ #board.rahmen{border:0; background:transparent; box-shadow:none; border-radius:0;} #board.rahmen .cell{border:1px solid var(--line);} /* Die Rahmen-Regel oben gewinnt per Spezifität gegen .blockR/.blockB und fraß die 5er-Hilfslinien im Nonogramm — hier ausdrücklich zurückholen. */ #board.rahmen .cell.blockR{border-right:2px solid var(--ink-soft);} #board.rahmen .cell.blockB{border-bottom:2px solid var(--ink-soft);} .clue{display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--ink-soft); font-variant-numeric:tabular-nums; user-select:none; font-size:.82em !important;} .clue.left{justify-content:flex-end; padding-right:.22rem;} .clue.right{justify-content:flex-start; padding-left:.22rem;} .clue.top{align-items:flex-end; padding-bottom:.18rem;} .clue.bottom{align-items:flex-start; padding-top:.18rem;} .clue.ecke{opacity:0;} /* Nonogramm-Felder */ .cell.voll{background:var(--brand); border-color:var(--brand);} .cell.kreuz{color:var(--ink-soft); font-weight:400; opacity:.55;} /* Laternen: acht Gebiete, jedes deutlich getoent — die Klassen feld0..feld7 gab es seit der Einfuehrung, aber KEINE Regel dazu, also waren alle Felder gleich. Peer, 05.09.2026: "die Farben der Felder sind kaum zu erkennen". Toene sind fuer helles und dunkles Design getrennt gewaehlt: im Dunkeln braucht es Saettigung, im Hellen Zurueckhaltung, sonst kippt eines davon. */ .art-lanterns .cell.feld0{background:#fde9d6;} .art-lanterns .cell.feld1{background:#dcecff;} .art-lanterns .cell.feld2{background:#e0f5e2;} .art-lanterns .cell.feld3{background:#f6dff1;} .art-lanterns .cell.feld4{background:#fff4c9;} .art-lanterns .cell.feld5{background:#e3e6ff;} .art-lanterns .cell.feld6{background:#d9f3f3;} .art-lanterns .cell.feld7{background:#ece4d8;} :root[data-theme="dark"] .art-lanterns .cell.feld0, :root[data-theme="auto"].sys-dark .art-lanterns .cell.feld0{background:#4a2f1e;} :root[data-theme="dark"] .art-lanterns .cell.feld1, :root[data-theme="auto"].sys-dark .art-lanterns .cell.feld1{background:#1f3550;} :root[data-theme="dark"] .art-lanterns .cell.feld2, :root[data-theme="auto"].sys-dark .art-lanterns .cell.feld2{background:#1f4530;} :root[data-theme="dark"] .art-lanterns .cell.feld3, :root[data-theme="auto"].sys-dark .art-lanterns .cell.feld3{background:#4a2446;} :root[data-theme="dark"] .art-lanterns .cell.feld4, :root[data-theme="auto"].sys-dark .art-lanterns .cell.feld4{background:#4d4218;} :root[data-theme="dark"] .art-lanterns .cell.feld5, :root[data-theme="auto"].sys-dark .art-lanterns .cell.feld5{background:#2c2f5e;} :root[data-theme="dark"] .art-lanterns .cell.feld6, :root[data-theme="auto"].sys-dark .art-lanterns .cell.feld6{background:#1c4646;} :root[data-theme="dark"] .art-lanterns .cell.feld7, :root[data-theme="auto"].sys-dark .art-lanterns .cell.feld7{background:#3d3630;} /* Gebietsgrenzen kraeftiger als Kaefiggrenzen — sie SIND das Raetsel. */ .art-lanterns .cell.cT{--kt:2.5px;} .art-lanterns .cell.cR{--kr:2.5px;} .art-lanterns .cell.cB{--kb:2.5px;} .art-lanterns .cell.cL{--kl:2.5px;} /* Gebietsgrenzen durchgezogen, nicht gestrichelt wie Kaefige: Kaefige sind Zusatzhinweise, Gebiete sind die Struktur des Bretts. */ .art-lanterns .cell.cT{border-top-style:solid; border-top-color:var(--ink);} .art-lanterns .cell.cB{border-bottom-style:solid; border-bottom-color:var(--ink);} .art-lanterns .cell.cL{border-left-style:solid; border-left-color:var(--ink);} .art-lanterns .cell.cR{border-right-style:solid; border-right-color:var(--ink);} .cell.laterne .lat{width:62%; height:62%; fill:var(--accent); stroke:var(--brand-deep); stroke-width:1.2; filter:drop-shadow(0 0 3px rgba(240,167,46,.55));} .art-lanterns .cell.kreuz{opacity:.7; font-size:.9em;} .art-lanterns .cell.laterne.err .lat{fill:var(--error); stroke:var(--error);} .cell.voll.err{background:var(--error); border-color:var(--error);} #pad.leer{display:none;} /* Ungleichungszeichen liegen als eigene Ebene über dem Gitter */ #board + .signs, .signs{position:absolute; pointer-events:none; z-index:2;} .signs span{position:absolute; transform:translate(-50%,-50%); font-weight:900; font-size:1.15rem; color:var(--accent); line-height:1; padding:0 .12rem; background:var(--card); border-radius:.25rem;} #game{position:relative;} /* Kakuro: dunkles Feld mit diagonal geteilten Summen. Der Kontrast zu den Eingabefeldern muss auf den ersten Blick sitzen — sonst sucht man beim Spielen dauernd, wo das Gitter eigentlich weitergeht. */ .wall{position:relative; background:#3a3d52; border:1px solid var(--line);} :root[data-theme="dark"] .wall, :root[data-theme="auto"].sys-dark .wall{background:#000208;} /* Die Trennlinie muss von oben links nach unten rechts laufen, damit die waagerechte Summe im Dreieck rechts oben und die senkrechte links unten liegt. Ein Verlauf "to bottom right" erzeugt die Linie SENKRECHT dazu, also genau falsch herum — dann sitzen beide Zahlen auf der Linie. */ .wall.hat::before{content:""; position:absolute; inset:0; background:linear-gradient(to top right, transparent calc(50% - 1px), rgba(255,255,255,.62) calc(50% - 1px), rgba(255,255,255,.62) calc(50% + 1px), transparent calc(50% + 1px));} .wall span{position:absolute; font-size:.66em; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; line-height:1;} .wall .sh{top:14%; right:11%;} /* waagerechte Summe: rechts oben */ .wall .sv{bottom:14%; left:11%;} /* senkrechte Summe: links unten */ /* Killer-Sudoku: gestrichelte Kaefiggrenzen + kleine Summe oben links. Die Grenzen liegen als eigene Ebene ueber der Zelle, damit sich alle vier Seiten frei kombinieren lassen — mit box-shadow ueberschreiben sie sich. */ .cell::after{content:""; position:absolute; inset:0; pointer-events:none; border-top:var(--kt,0) dashed var(--ink-soft); border-right:var(--kr,0) dashed var(--ink-soft); border-bottom:var(--kb,0) dashed var(--ink-soft); border-left:var(--kl,0) dashed var(--ink-soft);} .cell.cT{--kt:1.5px;} .cell.cR{--kr:1.5px;} .cell.cB{--kb:1.5px;} .cell.cL{--kl:1.5px;} .cell .cageSum{position:absolute; top:1px; left:2px; font-size:.5em; font-weight:800; color:var(--brand); line-height:1; pointer-events:none;} table.stats tr.grp td{font-weight:800; padding-top:.7rem; color:var(--brand);} table.stats td.ind{padding-left:.9rem; color:var(--ink-soft);} .big .ai{width:var(--ai-size); height:var(--ai-size); stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; color:var(--brand);} /* ---------- Tablet & grosse Bildschirme (iPad nativ, nicht Telefon-Spalte) — */ @media (min-width: 700px) { #home, #stats { max-width: 47rem; } #settings { max-width: 34rem; } /* Raetselarten zweispaltig; jede Art ist ein eigener Block */ #typeSections { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.4rem; align-items: start; } h2.sect { margin-top: 1.4rem; } .statgrid { grid-template-columns: repeat(4, 1fr); } .badges svg { width: 3.4rem; height: 3.4rem; } .hero { padding: 1.5rem 1.5rem; } .hero-art { width: 12rem; right: -1rem; top: -1.2rem; } .hero .btn { max-width: 22rem; } } /* Spielbildschirm ab iPad-Breite: Brett links, Eingaben rechts. Das Brett bleibt quadratisch — seine Breite wird deshalb an der verfuegbaren HOEHE gedeckelt, sonst schiebt es die Eingaben aus dem Bild. */ @media (min-width: 940px) { #game { max-width: 66rem; grid-template-columns: minmax(0, 1fr) minmax(17rem, 24rem); grid-template-areas: "top top" "board seite"; gap: 0 2rem; align-content: start; } /* display NUR im aktiven Zustand — die nackte #game-Regel würde per ID-Spezifität das .screen-Ausblenden überstimmen (Peer-Fund 30.08.). */ #game.active { display: grid; } #game .topbar { grid-area: top; } /* width statt max-width + justify-self: mit margin-inline:auto wuerde das Brett im Grid auf seine Minimalbreite kollabieren (auto-Raender heben das Stretching auf) — der Fehler zeigte sich als briefmarkengrosses Brett. */ #game #board { grid-area: board; margin-top: .4rem; width: min(100%, calc(100dvh - 8.5rem)); justify-self: center; } #game .seite { grid-area: seite; display: flex; flex-direction: column; gap: .9rem; margin-top: .4rem; } #game .seite #pad, #game .seite .tools, #game .seite #binHint { margin-top: 0; } #pad button { font-size: 1.5rem; } #pad.n9 { grid-template-columns: repeat(3, 1fr); } /* 3x3-Block wie am Tisch */ #pad.n9 button { aspect-ratio: 1.6; } } /* Code-Eingabe in der Plus-Ansicht */ .coderow{display:flex; gap:.45rem; margin-top:.7rem;} .coderow input{flex:1; min-width:0; padding:.7rem .8rem; font:inherit; border:1px solid var(--line); border-radius:.75rem; background:var(--bg); color:var(--ink); text-transform:uppercase; letter-spacing:.04em;} .coderow input:focus{outline:2px solid var(--brand); border-color:transparent;} /* Store-Leiste oben auf der Startseite */ .storebar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem; background:var(--card); border:1px solid var(--line); border-radius:1rem; padding:.7rem .9rem; margin-bottom:.8rem; box-shadow:var(--shadow);} .sb-text{font-size:.8rem; font-weight:600; color:var(--ink-soft); flex:1; min-width:11rem;} .sb-btns{display:flex; gap:.45rem;} .sbtn{display:inline-flex; align-items:center; gap:.45rem; background:var(--ink); color:var(--bg); border-radius:.65rem; padding:.4rem .7rem; text-decoration:none; line-height:1.05; transition:transform .08s;} .sbtn:active{transform:scale(.96);} .sbtn svg{width:1.15rem; height:1.15rem; fill:currentColor; flex:none;} .sbtn span{display:flex; flex-direction:column; font-weight:700; font-size:.8rem;} .sbtn small{font-size:.55rem; font-weight:600; opacity:.75; letter-spacing:.03em;} :root[data-theme="dark"] .sbtn, :root[data-theme="auto"].sys-dark .sbtn{background:#eceef8; color:#14151d;} @media (min-width: 700px){ .storebar{padding:.85rem 1.1rem;} } /* Einheitlicher Linien-Icon-Stil (Manus P0: keine System-Emoji im Produkt) */ .ic{width:1.15rem; height:1.15rem; flex:none; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;} .ic.xs{width:.9rem; height:.9rem; stroke-width:2;} .ic.sm{width:.95rem; height:.95rem;} .ic.lg{width:1.5rem; height:1.5rem; color:#fff;} .iconbtn{display:inline-flex; align-items:center; justify-content:center; color:var(--ink-soft);} .iconbtn .ic{width:1.1rem; height:1.1rem;} .tools button{display:inline-flex; align-items:center; justify-content:center; gap:.35rem;} .tools button .ic{width:1rem; height:1rem;} .daylabel .ic{margin-right:.1rem;} .chip{display:inline-flex; align-items:center; gap:.3rem;} .big .ic{width:2.1rem; height:2.1rem; color:var(--brand);} /* Gebündelte gesperrte Stufen (statt einer Wand aus Plus-Zeilen) */ .mehrbtn{width:100%; display:flex; align-items:center; gap:.5rem; margin-top:.55rem; padding:.7rem 1rem; background:transparent; border:1px dashed var(--line); border-radius:1rem; color:var(--ink-soft); font-weight:600; font-size:.88rem;} .mehrbtn span:first-child{flex:1; text-align:left;} .mehrbtn:active{background:var(--card);} /* Prüf-Kontingent: Restzahl am Knopf, ausgegraut wenn leer */ #btnCheck{position:relative;} #btnCheck #checkRest{font-size:.6rem; font-weight:800; color:var(--brand); background:var(--brand-soft); border-radius:999px; padding:.05rem .3rem; margin-left:.1rem;} #btnCheck.leer{opacity:.55;} #btnCheck.leer #checkRest{color:var(--ink-soft); background:var(--line);} /* Unbegrenzt freie Stufe: kein Balken, der nie voll wird, sondern eine Zusage */ .levelbtn .offen{margin-top:.5rem; font-size:.72rem; font-weight:600; color:var(--ok);} /* Kostproben-Stufe: kein Balken, sondern die Einladung */ .levelbtn .probe{margin-top:.5rem; font-size:.72rem; font-weight:600; color:var(--accent);} /* Fertige Reihe/Spalte/Block: eine Welle, kein Blinken. Der Puls geht von der Markenfarbe aus und klingt ab — sichtbar genug zum Freuen, ruhig genug, um beim naechsten Raetsel nicht zu stoeren. */ @keyframes fertigPuls { 0% { background: var(--brand); color: #fff; transform: scale(1); } 35% { background: var(--brand); color: #fff; transform: scale(1.14); } 100% { background: transparent; transform: scale(1); } } .cell.fertig { animation: fertigPuls .68s cubic-bezier(.25,.9,.35,1); z-index: 1; } .cell.fertig.given { font-weight: 800; } /* Sieg: das Konfetti bekommt etwas mehr Zeit und Streuung */ @keyframes fall { to { transform: translateY(105vh) rotate(720deg); opacity: .55; } } /* Hinweiszeichen für enge Raster: ein kleines, gedämpftes i neben der Stufe. Bewusst KEIN Kasten, kein farbiger Balken, kein Ausrufezeichen — die Oberfläche bleibt ruhig, die Information ist da, wenn man sie sucht. Peers Vorgabe: "mit kleinem i statt fettem disclaimer". */ .engzeichen{display:inline-flex; align-items:center; justify-content:center; width:1.05em; height:1.05em; margin-left:.4em; border-radius:99px; border:1px solid var(--ink-soft); color:var(--ink-soft); font-size:.68em; font-weight:600; font-style:normal; line-height:1; opacity:.55; vertical-align:middle; cursor:help; /* Optisch klein, zum Tippen gross: ein 17-px-Ziel trifft niemand - genau der Fehler, den dieses Zeichen erklaert. Der Rahmen wird per padding aufgeblasen und per margin wieder eingefangen, damit die Zeile nicht auseinanderfaellt. */ padding:12px; margin:-12px -12px -12px calc(.4em - 12px); box-sizing:content-box; background-clip:content-box;} .engzeichen:hover{opacity:.9;} /* ---- Tablets/Desktop: Schrift waechst mit der Zelle (Brettbreite / Spaltenzahl). Unterhalb 940px bleibt die iPhone-Regel aus buildBoard() (rem-Stufen). ---- */ @media (min-width: 940px) { .cell { font-size: min(3.2rem, calc(58cqw / var(--n, 9))) !important; } /* !important: buildBoard setzt die iPhone-Stufe inline */ .cell .notes { font-size: min(1.15rem, calc(21cqw / var(--n, 9))) !important; } } /* ---- Tablet HOCHFORMAT (iPad 11"/13" aufrecht): Brett in voller Breite, Ziffern und Werkzeuge darunter. Vorher galt hier die Seitenaufteilung mit 24rem Ziffernspalte — das Brett bekam ~580 pt und die Hoehe blieb ungenutzt (Peer 02.09.: "ein Viertel vom Bildschirm fuer das eigentliche Sudoku"). ---- */ @media (min-width: 940px) and (orientation: portrait) { #game { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "board" "seite"; gap: 0; } #game #board { width: min(100%, calc(100dvh - 21rem)); } #game .seite { width: min(100%, 46rem); justify-self: center; margin-top: 1rem; } #game .seite { align-items: stretch; } /* Kinder volle Breite, nicht inhaltsbreit zentriert */ #game .seite #pad, #game .seite .tools { width: 100%; } #pad.n9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } /* minmax(0,…): Spalten duerfen unter Inhaltsbreite schrumpfen */ #pad button { min-width: 0; } #pad button { font-size: 1.7rem; padding: .9rem 0; } } /* ── Laternen ───────────────────────────────────────────────────────────── Farbige Felder: sehr blasse Toenung, damit man die Form auf einen Blick erfasst, ohne dass die Seite bunt wird. Die Farbe ist Orientierung, nicht Information — die Regel haengt an der Feldzugehoerigkeit, und die zeigt die Linie. Kraeftige Toene wuerden ein Raetsel bauen, das Farbenblinde nicht loesen koennen. */ .feld0{background:rgba(79,70,201,.07);} .feld1{background:rgba(240,167,46,.09);} .feld2{background:rgba(46,158,107,.08);} .feld3{background:rgba(217,97,76,.08);} .feld4{background:rgba(122,91,214,.08);} .feld5{background:rgba(59,130,196,.08);} .feld6{background:rgba(212,130,58,.08);} .feld7{background:rgba(138,140,176,.10);} :root[data-theme="dark"] .feld0,:root[data-theme="auto"].sys-dark .feld0{background:rgba(143,139,242,.13);} :root[data-theme="dark"] .feld1,:root[data-theme="auto"].sys-dark .feld1{background:rgba(240,179,86,.11);} :root[data-theme="dark"] .feld2,:root[data-theme="auto"].sys-dark .feld2{background:rgba(46,158,107,.14);} :root[data-theme="dark"] .feld3,:root[data-theme="auto"].sys-dark .feld3{background:rgba(255,139,115,.11);} :root[data-theme="dark"] .feld4,:root[data-theme="auto"].sys-dark .feld4{background:rgba(169,140,240,.13);} :root[data-theme="dark"] .feld5,:root[data-theme="auto"].sys-dark .feld5{background:rgba(106,169,224,.12);} :root[data-theme="dark"] .feld6,:root[data-theme="auto"].sys-dark .feld6{background:rgba(232,163,95,.12);} :root[data-theme="dark"] .feld7,:root[data-theme="auto"].sys-dark .feld7{background:rgba(157,159,200,.14);} /* Gesetzte Laterne: warmer Schein statt harter Fuellung — sie soll leuchten, nicht stempeln. */ .cell.laterne{background:radial-gradient(circle at 50% 45%, var(--accent-soft), transparent 72%);} .cell.gesperrt{color:var(--note); font-weight:700;} /* ── Regeln des offenen Rätsels: kleines i in der Kopfzeile + antippbare Kurzkarte ── */ .iknopf{display:inline-flex; align-items:center; justify-content:center; width:1.45rem; height:1.45rem; flex:0 0 1.45rem; min-width:1.45rem; margin-left:.35rem; border-radius:50%; border:1.5px solid var(--brand); color:var(--brand); background:none; font:700 .85rem/1 Georgia, "Times New Roman", serif; font-style:italic; vertical-align:middle; cursor:pointer; padding:0;} .iknopf:active{transform:scale(.92); background:var(--brand-soft);} .regeldetail{text-align:left; max-height:min(70dvh, 34rem); overflow:auto; padding-right:.2rem;} .regeldetail .ai{width:1.5rem; height:1.5rem; flex:0 0 auto;} .regeldetail h3{margin:1rem 0 .3rem; font-size:.95rem;} .regeldetail ul{margin:0; padding-left:1.15rem; line-height:1.5;} .regeldetail p{margin:0; line-height:1.55;} /* Kopfzeile im Spiel auf schmalen Telefonen: Titel + Uhr + i in EINER Zeile. Ohne das brachen "← Start" und "Weiter →" in zwei Zeilen um, sobald das i dazukam (Prüfbild 375 px, 05.09.2026). */ .topbar .back{white-space:nowrap; flex:0 0 auto;} #game .topbar > .muted{min-width:0; display:flex; align-items:center; justify-content:center; gap:.3rem; white-space:nowrap;} @media (max-width: 420px){ #game .topbar > .muted{font-size:.82rem;} #game .topbar .back{font-size:.9rem; padding-left:.3rem; padding-right:.3rem;} } /* Gelöstes Brett bleibt eine Sekunde sichtbar, bevor die Erfolgskarte kommt (06.09.2026) */ #board.geschafft .cell{ box-shadow: inset 0 0 0 999px rgba(79,70,201,.10); transition: box-shadow .35s; } #board.geschafft .cell.err{ box-shadow: none; } /* Sieg: neben der Karte gedrückt halten → Brett sichtbar (06.09.2026) */ #overlay.blick{ background:rgba(16,16,30,.12); backdrop-filter:none; } #overlay.blick .card{ opacity:0; pointer-events:none; transition:opacity .15s; } #overlay .card{ transition:opacity .15s; } .peekhint{ margin:.9rem 0 0; font-size:.78rem; } /* ---------- Rätsel-Coach „Zelo" ---------- */ .card.coach{display:flex; align-items:flex-start; gap:.7rem; padding:.85rem .9rem; margin:.8rem 0 .2rem;} .coach-avatar{width:2.6rem; height:2.6rem; flex:0 0 2.6rem;} .coach-bubble{flex:1 1 auto; min-width:0; font-size:.9rem; line-height:1.45;} .coach-bubble b{display:block; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--brand); margin-bottom:.15rem;} /* Der Gruss ist ein und damit inline — endet der Text mitten in der Zeile, rutscht der Kennenlernen-Knopf DANEBEN statt darunter. Auf Englisch fiel das nie auf (Text fuellt die Zeile), auf Deutsch stand der Knopf hinter "…helfen kann." — so gesehen im Store-Screenshot vom 17.09.2026. Laenge des Textes darf das Layout nicht entscheiden, also beide ausdruecklich als Block. */ #coachText{display:block;} .coach-bubble > button{display:block;} .coach-tools{flex:0 0 auto; display:flex; align-items:center;} .coachbtn{border:1px solid var(--line); background:var(--bg); color:var(--ink); border-radius:999px; padding:.4rem .6rem; font:inherit; font-size:.85rem; cursor:pointer;} .coachbtn.primaer{background:var(--brand); color:#fff; border-color:transparent; font-weight:700; padding:.45rem .8rem;} .coachbtn:active{transform:scale(.95);} .coachzeile{display:flex; align-items:center; gap:.55rem; text-align:left; margin:.7rem 0 0; padding:.6rem .7rem; border-radius:.9rem; background:var(--brand-soft); font-size:.88rem; line-height:1.4;} .coachzeile .coach-avatar{width:1.9rem; height:1.9rem; flex:0 0 1.9rem;} .coachzeile.gross{font-size:.98rem; font-weight:600;} .coachinput{width:100%; box-sizing:border-box; margin-top:.4rem; padding:.8rem .9rem; border-radius:.8rem; border:1px solid var(--line); background:var(--bg); color:var(--ink); font:inherit; font-size:1rem;} #overlayCard .big .coach-avatar{width:3.6rem; height:3.6rem;} .duellzeile{margin:.6rem 0 0; padding:.55rem .7rem; border-radius:.8rem; background:var(--brand-soft); font-weight:700; font-size:.92rem;} /* Gelöst-Abzeichen auf der Stufenkarte (06.09.): Haken + Zahl statt „n/5000“ */ .levelbtn .gel{display:inline-flex; align-items:baseline; gap:.3rem; padding:.22rem .6rem .22rem .5rem; border-radius:999px; background:var(--brand-soft); color:var(--brand); font-variant-numeric:tabular-nums;} .levelbtn .gel i{font-style:normal; font-weight:800; font-size:.8rem; align-self:center;} .levelbtn .gel b{font-weight:800; font-size:1rem; letter-spacing:-.01em;} .levelbtn .gel small{font-size:.68rem; font-weight:600; color:var(--ink-soft);} .levelbtn .gel.leer{background:transparent; color:var(--ink-soft); padding-left:0;} .levelbtn .gel.leer b{font-weight:700;} /* Übergabe-Karte (07.09.): jüngerer Spielstand vom anderen Gerät — Angebot, kein Zwang */ .weiterkarte.uebergabe{cursor:default; border:1px solid var(--brand); background:var(--brand-soft);} .weiterkarte.uebergabe .wknoepfe{display:flex; gap:.5rem; margin-top:.5rem;} .btn.small{padding:.45rem .8rem; font-size:.85rem; width:auto;} .btn.ghost{background:transparent; color:var(--brand); border:1px solid var(--brand);} /* Sprachknopf oben rechts: zeigt das Kürzel der aktiven Sprache, nicht eine Weltkugel. */ .sprachknopf{font-weight:800; font-size:.78rem; letter-spacing:.04em; min-width:2.4rem;} /* Thai bricht Zeilen nicht an Leerzeichen — ohne diese Regel laufen lange Sätze aus dem Kasten. Und die thailändische Schrift braucht mehr Höhe, sonst kleben die Ober- und Unterzeichen aneinander. */ html[lang="th"]{ line-height:1.75; } html[lang="th"] body{ word-break:break-word; overflow-wrap:anywhere; } html[lang="th"] .aff-code, html[lang="th"] .mono{ word-break:normal; } /* Sprachwahl (08.09.): natives