/* ═══════════════════════════════════════════════════════════════
   dreizehn — Das Hinterzimmer
   Bewusst nur dunkel: das Hinterzimmer ist nachts. Alle Farben sind
   explizit gesetzt, damit die App auf jedem Untergrund hält.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --bg:#12141B; --raised:#191C25; --sunken:#0C0E13; --hoch:#222634;
  --border:#2A2E3A; --border-stark:#3B4150;
  --text:#E9E5DB; --dim:#9B9CA9; --faint:#6A6C79;
  --accent:#A3C264; --accent-linie:#4E6630; --accent-weich:#1E2617;
  --gold:#E0AE4A; --gold-linie:#7A5A1E; --gold-weich:#241B0C;
  --rot:#D4796B; --rot-weich:#2A1714;
  --r:14px; --r-klein:9px;
  --kopf-h:56px; --tab-h:64px;
  --serif:"Fraunces","Iowan Old Style",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overscroll-behavior-y:none;
}
h1,h2,h3{font-family:var(--serif); font-variation-settings:"SOFT" 70,"WONK" 1;
  margin:0; line-height:1.15; font-weight:600; text-wrap:balance}
p{margin:0}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
input{font:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums}

/* ── Ladebildschirm ─────────────────────────────────────────── */
.lade{position:fixed; inset:0; display:grid; place-content:center; justify-items:center;
  gap:1rem; background:var(--bg); z-index:50; color:var(--faint); font-size:.9rem}
.lade-cat{font-size:2.5rem; animation:wippen 1.6s ease-in-out infinite alternate}
@keyframes wippen{from{transform:translateY(0) rotate(-4deg)} to{transform:translateY(-8px) rotate(4deg)}}

/* ── Onboarding ─────────────────────────────────────────────── */
.start{position:fixed; inset:0; overflow-y:auto; background:var(--bg); z-index:40;
  display:grid; place-items:center; padding:2rem 1.25rem}
.start-inner{max-width:26rem; width:100%; display:flex; flex-direction:column; align-items:center; gap:1.1rem; text-align:center}
.start-cat{width:min(46vw,170px)}
.start-cat svg{width:100%; height:auto; display:block}
.start h1{font-size:clamp(2rem,8vw,2.7rem); font-weight:700; font-variation-settings:"SOFT" 85,"WONK" 1}
.start-dek{color:var(--dim); font-size:.98rem; max-width:32ch}
.start-dek b{color:var(--text); font-weight:600}
.start-klein{color:var(--faint); font-size:.78rem}
.feld{width:100%; display:flex; flex-direction:column; gap:.4rem; text-align:left}
.feld span{font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); font-weight:600}
.feld input{width:100%; padding:.85rem 1rem; background:var(--sunken); color:var(--text);
  border:1px solid var(--border); border-radius:var(--r-klein)}
.feld input::placeholder{color:var(--faint)}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.7rem 1.15rem; background:var(--hoch); border:1px solid var(--border-stark);
  border-radius:99px; font-size:.9rem; font-weight:600; color:var(--text)}
.btn:active{transform:scale(.975)}
.btn:disabled{opacity:.45; cursor:default}
.btn-gross{width:100%; padding:.95rem; font-size:1rem;
  background:var(--accent); border-color:var(--accent); color:#12141B}
.btn-haupt{background:var(--accent); border-color:var(--accent); color:#12141B}
.btn-gold{background:var(--gold); border-color:var(--gold); color:#241B0C}
.btn-still{background:transparent; border-color:var(--border)}
.btn-klein{padding:.4rem .8rem; font-size:.8rem}

/* ── Gerüst ─────────────────────────────────────────────────── */
.app{min-height:100%; display:flex; flex-direction:column}
.fab[data-warten="1"]{background:var(--hoch); color:var(--dim); border:1px solid var(--border-stark)}
.fab[hidden]{display:none}
.tab.an{color:var(--accent)}

/* ── Bausteine ──────────────────────────────────────────────── */
.karte-box{background:var(--raised); border:1px solid var(--border); border-radius:var(--r);
  padding:1rem 1.1rem; margin-bottom:.8rem}
.karte-box.gold{border-color:var(--gold-linie); background:var(--gold-weich)}
.karte-box.gruen{border-color:var(--accent-linie); background:var(--accent-weich)}
.box-kopf{display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; margin-bottom:.7rem}
.box-kopf h2{font-size:1.15rem}
.etikett{font-size:.65rem; letter-spacing:.13em; text-transform:uppercase; color:var(--faint); font-weight:700}
.hinweis{font-size:.85rem; color:var(--dim)}
.leer{text-align:center; color:var(--faint); font-size:.85rem; padding:1.6rem 1rem}

/* ── Das Zimmer ─────────────────────────────────────────────── */
.zimmer{position:relative; border-radius:var(--r); overflow:hidden; margin-bottom:.8rem;
  background:
    radial-gradient(120% 80% at 50% 118%, #2A2418 0%, transparent 60%),
    linear-gradient(180deg, #171A22 0%, #101319 100%);
  border:1px solid var(--border); min-height:14rem;
  display:flex; flex-direction:column; justify-content:flex-end}
.zimmer-lampe{position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:76%; height:70%; pointer-events:none;
  background:radial-gradient(60% 100% at 50% 0%, rgba(224,174,74,.16), transparent 70%)}
.zimmer-gaeste{display:flex; align-items:flex-end; justify-content:center; gap:.2rem;
  padding:1rem .6rem 0; min-height:8.5rem}
.gast{width:min(30%,7.5rem); position:relative}
.gast svg{width:100%; height:auto; display:block}
.gast-name{text-align:center; font-family:var(--serif); font-size:.76rem; color:var(--dim); margin-top:-.4rem}
.zimmer-boden{display:flex; align-items:flex-end; justify-content:center; gap:.35rem;
  padding:.2rem .6rem .7rem; border-top:1px solid rgba(255,255,255,.045)}
.moebel{width:3.4rem; opacity:.95}
.moebel svg{width:100%; height:auto; display:block}
.zimmer-still{text-align:center; color:var(--faint); font-size:.85rem; padding:2.4rem 1.2rem 1.4rem; line-height:1.5}

/* ── Geschenk-Karte ─────────────────────────────────────────── */
.geschenk{background:linear-gradient(160deg, var(--gold-weich), var(--raised));
  border:1px solid var(--gold-linie)}
.geschenk h2{color:var(--gold)}

/* ── Regale (Snacks / Deko / Laden) ─────────────────────────── */
.regal{display:grid; grid-template-columns:repeat(auto-fill,minmax(4.6rem,1fr)); gap:.5rem}
.slot{background:var(--sunken); border:1px solid var(--border); border-radius:var(--r-klein);
  padding:.45rem .3rem .5rem; display:flex; flex-direction:column; align-items:center; gap:.2rem;
  position:relative; text-align:center}
.slot.aus{opacity:.42}
.slot.an{border-color:var(--accent-linie); background:var(--accent-weich)}
.slot svg{width:100%; height:auto; display:block}
.slot-name{font-size:.62rem; color:var(--dim); line-height:1.25}
.slot-preis{font-size:.62rem; color:var(--accent); font-weight:700; font-variant-numeric:tabular-nums}
.slot-anz{position:absolute; top:.2rem; right:.3rem; font-size:.6rem; font-weight:700;
  color:var(--gold); font-variant-numeric:tabular-nums}
.slot:disabled{cursor:default}

/* ── Album ──────────────────────────────────────────────────── */
.album{display:grid; grid-template-columns:repeat(auto-fill,minmax(6.6rem,1fr)); gap:.5rem}
.akarte{background:var(--raised); border:1px solid var(--border); border-radius:var(--r-klein);
  border-left:3px solid var(--border-stark); overflow:hidden; padding:.35rem .4rem .5rem; text-align:center}
.akarte.rare{border-left-color:var(--gold-linie)}
.akarte.legend{border-left-color:var(--gold); background:var(--gold-weich)}
.akarte.fehlt{opacity:.72}
.akarte svg{width:100%; height:auto; display:block}
.akarte-no{font-size:.58rem; color:var(--faint); font-variant-numeric:tabular-nums}
.akarte-name{font-family:var(--serif); font-size:.78rem; font-weight:600; line-height:1.2}
.akarte.legend .akarte-name{color:var(--gold)}
.akarte.fehlt .akarte-name{color:var(--faint); font-style:italic}

/* ── Stempelkarte ───────────────────────────────────────────── */
.slots{display:flex; flex-wrap:wrap; gap:.35rem; justify-content:center; margin:.3rem 0 .2rem}
.stempel{width:2.05rem; height:2.05rem; border-radius:50%; border:1px dashed var(--border-stark);
  display:grid; place-items:center; font-size:.66rem; color:var(--faint);
  font-variant-numeric:tabular-nums; font-family:ui-monospace,monospace}
.stempel.voll{border-style:solid; border-color:var(--accent-linie); background:var(--accent-weich); color:var(--accent)}
.stempel.letzter{border:1px solid var(--gold); background:var(--gold-weich); color:var(--gold)}

/* ── Ränge ──────────────────────────────────────────────────── */
.leiter{display:flex; flex-direction:column; gap:1px; margin-top:.5rem}
.stufe{display:grid; grid-template-columns:1.9rem 1fr auto; align-items:center; gap:.6rem;
  padding:.32rem .5rem; font-size:.82rem; color:var(--faint); border-radius:5px}
.stufe .n{font-family:ui-monospace,monospace; font-size:.7rem; font-variant-numeric:tabular-nums}
.stufe.hier{background:var(--accent-weich); color:var(--text)}
.stufe.hier .n{color:var(--accent)}
.stufe.erreicht{color:var(--dim)}

/* ── Belohnungen ────────────────────────────────────────────── */
.gutschein{display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  background:var(--sunken); border:1px dashed var(--gold-linie); border-radius:var(--r-klein);
  padding:.65rem .85rem; margin-bottom:.45rem}
.gutschein-t{font-size:.87rem; font-weight:600}
.gutschein-b{font-size:.68rem; color:var(--faint); margin-top:.1rem}
.gcode{font-family:ui-monospace,monospace; font-size:1.02rem; font-weight:700; color:var(--gold);
  letter-spacing:.08em; white-space:nowrap}

/* ── Aufgaben ───────────────────────────────────────────────── */
.aufgabe{display:flex; align-items:center; gap:.75rem; padding:.7rem .2rem;
  border-bottom:1px solid var(--border)}
.aufgabe:last-child{border-bottom:0}
.haken{width:1.35rem; height:1.35rem; flex:none; border-radius:50%;
  border:1.5px solid var(--border-stark); display:grid; place-items:center}
.haken.fertig{background:var(--accent); border-color:var(--accent)}
.haken svg{width:.8rem; height:.8rem; color:#12141B}
.aufgabe-t{flex:1; font-size:.9rem}
.aufgabe.erledigt .aufgabe-t{color:var(--dim); text-decoration:line-through}
.aufgabe-f{font-size:.75rem; color:var(--faint); font-variant-numeric:tabular-nums; white-space:nowrap}

/* ── Tafel ──────────────────────────────────────────────────── */
.tafel{display:flex; flex-direction:column; gap:1px}
.platz{display:grid; grid-template-columns:1.6rem 1fr auto; gap:.6rem; align-items:center;
  padding:.34rem .4rem; font-size:.85rem; border-radius:5px}
.platz .p{font-family:ui-monospace,monospace; font-size:.7rem; color:var(--faint); font-variant-numeric:tabular-nums}
.platz .t{font-size:.75rem; color:var(--dim); font-variant-numeric:tabular-nums}
.platz.ich{background:var(--accent-weich)}
.platz.eins .p{color:var(--gold)}

/* ── Modal ──────────────────────────────────────────────────── */
.modal{position:fixed; inset:0; z-index:60; background:rgba(6,7,10,.72);
  backdrop-filter:blur(6px); display:grid; place-items:end center; padding:1rem}
.modal-box{width:100%; max-width:26rem; background:var(--raised); border:1px solid var(--border-stark);
  border-radius:20px; padding:1.3rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom,0px));
  animation:rein .26s cubic-bezier(.2,.8,.3,1)}
@keyframes rein{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none}}
.modal h2{font-size:1.3rem; margin-bottom:.4rem}
.modal-dek{color:var(--dim); font-size:.88rem; margin-bottom:1rem}
.modal-btns{display:flex; gap:.5rem; margin-top:1rem}
.modal-btns .btn{flex:1}

/* Code-Eingabe */
.codefeld{display:flex; gap:.35rem; justify-content:center; margin:.4rem 0 .2rem}
.codefeld input{width:100%; text-align:center; letter-spacing:.42em; text-indent:.42em;
  font-family:ui-monospace,monospace; font-size:1.6rem; font-weight:600; text-transform:uppercase;
  padding:.7rem .4rem; background:var(--sunken); color:var(--text);
  border:1px solid var(--border-stark); border-radius:var(--r-klein)}
.tastatur{display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; margin-top:.7rem}
.tastatur button{padding:.75rem 0; background:var(--hoch); border:1px solid var(--border);
  border-radius:var(--r-klein); font-family:ui-monospace,monospace; font-size:1.05rem; font-weight:600}
.tastatur button:active{background:var(--border)}

/* Enthüllung */
.enthuellung{display:flex; gap:.4rem; justify-content:center; flex-wrap:wrap; margin:.6rem 0 .2rem}
.enth-cat{width:5.6rem; text-align:center; animation:pop .45s cubic-bezier(.2,.9,.3,1) both}
.enth-cat svg{width:100%; height:auto}
.enth-cat span{display:block; font-family:var(--serif); font-size:.75rem; color:var(--dim)}
.enth-cat b{display:block; font-size:.7rem; color:var(--accent); font-weight:700}
@keyframes pop{from{opacity:0; transform:scale(.7) translateY(14px)} to{opacity:1; transform:none}}
.neu-marke{display:inline-block; font-size:.58rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold); border:1px solid var(--gold-linie);
  border-radius:99px; padding:0 .3rem; margin-top:.1rem}

/* ── Code zum Vorzeigen ─────────────────────────────────────── */
.zeigcode{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-weight:700;
  font-size:clamp(3.4rem,20vw,5.5rem); line-height:1; letter-spacing:.14em; text-align:center;
  color:var(--gold); margin:.7rem 0 .4rem; font-variant-numeric:tabular-nums}
.zeig-name{text-align:center; font-size:.82rem; color:var(--dim)}

/* ── Toast ──────────────────────────────────────────────────── */
.toast{position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--tab-h) + env(safe-area-inset-bottom,0px) + 4.6rem); z-index:70;
  max-width:calc(100% - 2rem); padding:.6rem 1rem; border-radius:99px;
  background:var(--hoch); border:1px solid var(--border-stark); color:var(--text);
  font-size:.85rem; text-align:center; box-shadow:0 12px 30px -14px rgba(0,0,0,.9);
  animation:rein .22s ease both}
.toast.gut{background:var(--accent-weich); border-color:var(--accent-linie); color:var(--accent)}
.toast.schlecht{background:var(--rot-weich); border-color:var(--rot); color:var(--rot)}

/* ── Idle-Animation der Katzen ──────────────────────────────── */
@media (prefers-reduced-motion: no-preference){
  .cat .breathe{animation:atmen 4.2s ease-in-out infinite alternate; transform-origin:100px 205px}
  @keyframes atmen{from{transform:scaleY(1)} to{transform:scaleY(1.012)}}
  .cat .tail{animation:wedeln 3.6s ease-in-out infinite alternate}
  @keyframes wedeln{from{transform:rotate(-2.5deg)} to{transform:rotate(3deg)}}
  .cat .lids{animation:blinzeln 5.4s linear infinite}
  @keyframes blinzeln{0%,96.5%,100%{transform:scaleY(0)} 97.6%,98.8%{transform:scaleY(1)}}
}
[hidden]{display:none !important}

/* ═══════════════════════════════════════════════════════════════
   Die Straße vor dem dreizehn
   ═══════════════════════════════════════════════════════════════ */
.szene{position:fixed; inset:0; z-index:0; overflow:hidden; background:#0B0E16}
#kulisse{position:absolute; inset:0; width:100%; height:100%; display:block}

/* Läufer: Bewegung setzt die Web-Animations-API in JS.
   transform-box:view-box lässt px in SVG-Nutzereinheiten rechnen. */
.geher{transform-box:view-box; transform-origin:0 0}

/* Der Gang selbst: diagonale Beinpaare gegenläufig */
@keyframes schritt-a{ 0%,100%{transform:rotate(18deg)} 50%{transform:rotate(-18deg)} }
@keyframes schritt-b{ 0%,100%{transform:rotate(-18deg)} 50%{transform:rotate(18deg)} }
@keyframes wippe{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-1.8px)} }
@keyframes schwanzschlag{ from{transform:rotate(-7deg)} to{transform:rotate(9deg)} }

@media (prefers-reduced-motion: no-preference){
  .laeufer .bein{transform-box:fill-box}
  .laeufer .bein.vv, .laeufer .bein.hb{animation:schritt-a .48s linear infinite}
  .laeufer .bein.hv, .laeufer .bein.vb{animation:schritt-b .48s linear infinite}
  .laeufer .rumpf{animation:wippe .24s ease-in-out infinite; transform-box:fill-box}
  .laeufer .schwanz{animation:schwanzschlag 1.2s ease-in-out infinite alternate; transform-box:fill-box}
  .sitzer{animation:sitzatmen 4s ease-in-out infinite alternate; transform-box:fill-box;
    animation-delay:var(--verzug, 0s)}
  @keyframes sitzatmen{from{opacity:.94} to{opacity:1}}
}

/* ── HUD über der Szene ──────────────────────────────────────── */
.hud{
  position:fixed; top:0; left:0; right:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:calc(env(safe-area-inset-top, 0px) + .7rem) .9rem .7rem;
  background:linear-gradient(180deg, rgba(11,14,22,.88) 0%, rgba(11,14,22,0) 100%);
  pointer-events:none;
}
.hud > *{pointer-events:auto}
.hud-links{display:flex; align-items:center; gap:.45rem; min-width:0}
.plakette{
  display:inline-flex; align-items:center; gap:.3rem; padding:.28rem .6rem;
  border-radius:99px; font-size:.76rem; font-weight:700; white-space:nowrap;
  background:rgba(18,21,30,.8); border:1px solid var(--border); color:var(--dim);
  backdrop-filter:blur(8px);
}
.plakette.rang{font-family:var(--serif); font-size:.85rem; color:var(--text); font-weight:600;
  overflow:hidden; text-overflow:ellipsis}
.plakette.streak{border-color:var(--gold-linie); color:var(--gold); background:rgba(36,27,12,.8)}
.plakette.bohnen{border-color:var(--accent-linie); color:var(--accent); background:rgba(30,38,23,.82);
  font-size:.88rem; padding:.3rem .7rem .3rem .5rem}

/* ── Werkzeugleiste unten ────────────────────────────────────── */
.hud-unten{
  position:fixed; left:0; right:0; bottom:0; z-index:10;
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  padding:2.4rem .9rem calc(env(safe-area-inset-bottom, 0px) + .9rem);
  background:linear-gradient(0deg, rgba(11,14,22,.92) 22%, rgba(11,14,22,0) 100%);
  pointer-events:none;
}
.hud-unten > *{pointer-events:auto}
.tat{
  padding:.9rem 1.9rem; border-radius:99px; font-weight:700; font-size:1rem;
  background:var(--accent); color:#12141B; box-shadow:0 10px 30px -12px rgba(0,0,0,.9);
}
.tat:active{transform:scale(.97)}
.tat.gold{background:var(--gold); color:#241B0C}
.tat.ruhig{background:rgba(34,38,52,.9); color:var(--dim); border:1px solid var(--border-stark);
  backdrop-filter:blur(8px); font-weight:600; font-size:.9rem; padding:.7rem 1.4rem}
.tat[hidden]{display:none}

.werkzeuge{display:flex; gap:.5rem}
.wz{
  width:3.3rem; height:3.3rem; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.1rem;
  background:rgba(18,21,30,.82); border:1px solid var(--border-stark); color:var(--dim);
  backdrop-filter:blur(10px); position:relative;
}
.wz svg{width:19px; height:19px}
.wz span{font-size:.52rem; font-weight:700; letter-spacing:.03em}
.wz:active{transform:scale(.94)}
.wz .punkt{position:absolute; top:.28rem; right:.4rem; width:.5rem; height:.5rem;
  border-radius:50%; background:var(--gold); box-shadow:0 0 0 2px rgba(18,21,30,.9)}

/* ── Blatt: Panel über der Szene ─────────────────────────────── */
.blatt{
  position:fixed; inset:0; z-index:30; display:flex; flex-direction:column; justify-content:flex-end;
  background:rgba(6,8,12,.6); backdrop-filter:blur(3px);
}
.blatt-inhalt{
  background:var(--bg); border-top-left-radius:22px; border-top-right-radius:22px;
  border-top:1px solid var(--border-stark); max-height:86vh; overflow-y:auto;
  padding:0 1rem calc(env(safe-area-inset-bottom, 0px) + 1.4rem);
  animation:hochschieben .3s cubic-bezier(.2,.8,.3,1);
}
@keyframes hochschieben{from{transform:translateY(30px); opacity:0} to{transform:none; opacity:1}}
.blatt-griff{position:sticky; top:0; z-index:2; background:var(--bg);
  padding:.7rem 0 .6rem; display:flex; align-items:center; justify-content:space-between; gap:1rem}
.blatt-griff h2{font-size:1.3rem}
.blatt-zu{width:2.1rem; height:2.1rem; border-radius:50%; background:var(--hoch);
  border:1px solid var(--border); color:var(--dim); font-size:1.1rem; line-height:1; flex:none}
.blatt-inhalt::before{content:""; display:block; width:2.4rem; height:4px; border-radius:2px;
  background:var(--border-stark); margin:.55rem auto -.2rem}