/* 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;}
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;}
.screen{max-width:27rem; margin:0 auto; padding:1.15rem 1rem 3rem; display:none; animation:fadein .24s ease;}
.screen.active{display:block;}
@keyframes fadein{from{opacity:0; transform:translateY(7px);} to{opacity:1;}}

/* 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;}
.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 */
#board{display:grid; aspect-ratio:1; border:2px solid var(--ink); border-radius:.7rem;
  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{transform:scale(.94);}
.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{background:var(--card); border:1px solid var(--line); border-radius:.8rem;
  padding:.6rem .75rem; font-size:.78rem; line-height:1.45;}
#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(720deg); opacity:.7;}}

/* 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;}
.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;} }