/* =====================================================================
   GAME.CSS – Welt (Tile-Map), Game-UI im Stil klassischer Mobile-Games,
   Belohnungs-Reveals. Wird NACH app.css geladen und überschreibt dort Buttons/Sheets.
   Motion-Familie: --feder (Overshoot), --ruhig (Ease-out), --bogen (Wurf).
   ===================================================================== */
:root{
  --cols:7;
  --ww:min(100vw,540px,100dvh * 7 / 12);   /* auf kurzen Bildschirmen (Desktop) mind. 12 Reihen sichtbar */
  --c:calc(var(--ww) / var(--cols));
  --ink:#3a1d0b;
  --creme:#fff8e8;--creme2:#f3e2c0;
  --gold1:#ffe36b;--gold2:#ffb300;--gold3:#b86a00;
  --gruen1:#8ee05a;--gruen2:#3fae2a;--gruen3:#1f6e17;
  --blau1:#7fd4ff;--blau2:#2b8fe0;--blau3:#16508f;
  --rot1:#ff7a6b;--rot2:#e0372b;--rot3:#8f1a12;
  --holz1:#6b4528;--holz2:#3a2414;
  --f-game:"Lilita One","Fredoka",system-ui,sans-serif;
  --f-text:"Fredoka","Geist",system-ui,sans-serif;
  --feder:cubic-bezier(.21,.12,.35,1.43);   /* back-out: Pop mit Overshoot */
  --ruhig:cubic-bezier(.35,.91,.3,.99);     /* ease-out: Einflüge */
  --zurueck:cubic-bezier(.38,-.37,.83,.23); /* back-in: Abgang mit Ausholen */
  --bogen:cubic-bezier(.75,0,.21,.99);      /* ease-in-out */
}
html,body{background:#143528}
body{font-family:var(--f-text)}
#home{position:fixed;inset:0;background:none}
#home::before{display:none}

/* ---------- Kamera & Welt ---------- */
#cam{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  background:radial-gradient(120% 60% at 50% 40%,#1f4a37,#0e271d)}
#cam::-webkit-scrollbar{display:none}
#welt{position:relative;margin:0 auto calc(110px + var(--sa-b));width:var(--ww);height:calc(var(--c) * var(--rows));
  background:url(../img/welt/b_schnee.webp) 0 0/calc(var(--c) * 2) calc(var(--c) * 2);
  box-shadow:0 0 0 3px rgba(0,0,0,.18),0 0 70px rgba(0,0,0,.55);overflow:hidden;contain:layout paint}
@keyframes eisglanz{0%,60%{transform:translateX(0) rotate(25deg)}100%{transform:translateX(480%) rotate(25deg)}}
@keyframes steinplopp{0%{transform:scale(.4) translateY(10px)}55%{transform:scale(1.12) translateY(-4px)}100%{transform:scale(1)}}

/* Objekte stehen mit der Unterkante auf ihrer Zelle; Tiefe = Unterkante */
.ding{position:absolute;left:calc(var(--x) * var(--c));top:calc((var(--y) + var(--h)) * var(--c) - var(--bh) * var(--c));
  width:calc(var(--w) * var(--c));height:calc(var(--bh) * var(--c));z-index:calc(var(--y) * 10 + var(--h) * 10);pointer-events:none}
.ding>img{width:100%;height:100%;object-fit:contain;object-position:50% 100%;filter:drop-shadow(3px 4px 0 rgba(40,60,80,.16));transform-origin:50% 100%}
.tippbar{pointer-events:auto;cursor:pointer}
.baum>img{transform-origin:50% 100%}   /* Bäume stehen still – sie wackeln nur beim Antippen */
@keyframes wiegen{0%{transform:rotate(-1.5deg)}100%{transform:rotate(1.5deg) scaleY(1.01)}}
.lichter .funke{position:absolute;width:9%;aspect-ratio:1;margin:-4.5% 0 0 -4.5%;border-radius:50%;background:#ffe27a;box-shadow:0 0 6px 2px rgba(255,214,90,.9);animation:funkeln 1.8s ease-in-out infinite;animation-delay:calc(var(--k) * -.27s);pointer-events:none}
@keyframes funkeln{0%,100%{opacity:.25;transform:scale(.6)}50%{opacity:1;transform:scale(1.2)}}
.lampe .schein{position:absolute;left:50%;top:22%;width:140%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,214,110,.55),rgba(255,214,110,0));opacity:.9;pointer-events:none}
@keyframes lampenruhe{0%,86%,100%{opacity:.9}89%{opacity:.55}91%{opacity:.95}93%{opacity:.7}}
@keyframes flackern{0%{opacity:1}7%{opacity:.86}9%{opacity:1}23%{opacity:.92}41%{opacity:1}58%{opacity:.8}60%{opacity:.97}100%{opacity:1}}
.lampe.flacker .schein{animation:flackerkurz .6s steps(6) 1}
@keyframes flackerkurz{0%,40%,80%{opacity:.2}20%,60%,100%{opacity:1}}
.flocke-fall{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(150,180,210,.5);pointer-events:none}
.gesperrt-deko>img{filter:grayscale(.6) brightness(1.04)}


/* ---------- Weg: eine Linie durch die Kachelmitten (Raster), 1,4 Felder sichtbar, Mario-Kontur, feines Pflaster ---------- */
#wegsvg{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
#wegsvg path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.w-schatten{transform:translateY(.06px)}
.w-schatten path{stroke:rgba(60,85,110,.18);stroke-width:1.5}
.w-kontur path{stroke:#7a5434;stroke-width:1.42}
.w-rand path{stroke:#f1e2c6;stroke-width:1.28}
.w-stein path{stroke:url(#pflaster);stroke-width:1.06}
/* Gesperrt: durchgehende Schneedecke mit gestrichelter Spur (Mario-Punktweg) */
.w-schnee path{stroke:#fbfdff;stroke-width:1.3;opacity:0}
.w-schnee path.zu{opacity:.74}
.w-spur path{stroke:#b9c8d4;stroke-width:.1;stroke-dasharray:.18 .22;opacity:0}
.w-spur path.zu{opacity:1}
/* Treppe durch die Klippe */
.treppe{position:absolute;left:calc(var(--x) * var(--c) + var(--c) * .08);top:calc(var(--y) * var(--c) - var(--c) * .14);width:calc(var(--c) * .84);height:calc(var(--c) * .9);z-index:3;pointer-events:none;border-radius:calc(var(--c) * .06);
  background:url(../img/welt/props/p_treppe.webp) center/100% 100% no-repeat,repeating-linear-gradient(180deg,#f7f1e7 0 calc(var(--c) * .1),#b4a798 calc(var(--c) * .1) calc(var(--c) * .15),#d9cfc2 calc(var(--c) * .15) calc(var(--c) * .195));
  box-shadow:calc(var(--c) * -.05) 0 0 #7a5434,calc(var(--c) * .05) 0 0 #7a5434,0 calc(var(--c) * .06) 0 rgba(58,29,11,.2)}

/* Teich: ein organisches Element mit Schnee-Ufer */
.teich{width:calc(var(--tw, 1.84) * var(--c))!important;height:calc(var(--th, 1.7) * var(--c))!important}
/* Geländestufe: Plateau etwas heller, Klippen-Kacheln mit Blockkante (Minecraft-Anmutung), Schneekappe oben */
.plateau{position:absolute;left:0;right:0;top:0;height:calc(var(--y) * var(--c));z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,0) 60%,rgba(255,255,255,.28))}
.klippe{position:absolute;left:calc(var(--x) * var(--c));top:calc(var(--y) * var(--c) - var(--c) * .08);width:var(--c);height:calc(var(--c) * .72);z-index:2;pointer-events:none;
  background:url(../img/welt/props/b_klippe.webp) calc(var(--x) * var(--c) * -1) 0/calc(var(--c) * 2.88) 100% repeat-x,radial-gradient(ellipse at 50% 0,#fff 0 58%,transparent 61%) calc(var(--x) * var(--c) * -.37) 14%/calc(var(--c) * .37) calc(var(--c) * .2) repeat-x,
    linear-gradient(180deg,#fff 0 18%,#e2eaf0 18% 23%,transparent 23%),
    linear-gradient(90deg,transparent 0 47%,#857a6e 47% 50%,transparent 50%) 0 100%/100% 52% no-repeat,
    linear-gradient(90deg,transparent 0 22%,#857a6e 22% 25%,transparent 25% 72%,#857a6e 72% 75%,transparent 75%) 0 26%/100% 26% no-repeat,
    linear-gradient(180deg,transparent 0 51%,#857a6e 51% 55%,transparent 55%),
    linear-gradient(180deg,#cfc7bb,#ada296);
  box-shadow:0 calc(var(--c) * .07) 0 rgba(58,29,11,.18)}
.klippe.anfang{border-top-left-radius:calc(var(--c) * .12)}.klippe.ende{border-top-right-radius:calc(var(--c) * .12)}
.klippe::after{content:"";position:absolute;left:0;right:0;top:100%;height:calc(var(--c) * .38);background:linear-gradient(rgba(60,85,110,.2),rgba(60,85,110,0))}
/* Spuren/Decals flach am Boden */
.spur{position:absolute;left:calc(var(--x) * var(--c));top:calc(var(--y) * var(--c));width:calc(var(--w) * var(--c));height:calc(var(--h) * var(--c));z-index:1;pointer-events:none}
.spur img{width:100%;height:100%;object-fit:contain}
.teich{position:absolute;left:calc(var(--x) * var(--c));top:calc(var(--y) * var(--c));width:calc(1.7 * var(--c));height:calc(1.3 * var(--c));border-radius:46% 54% 50% 50%/55% 50% 50% 45%;overflow:hidden;z-index:1;
  background:url(../img/welt/b_eis.webp) center/calc(var(--c) * 1.4);box-shadow:inset 0 0 0 calc(var(--c) * .06) rgba(255,255,255,.85),0 calc(var(--c) * .04) 0 rgba(120,150,175,.25)}
.teich .eisglanz{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.teich .eisglanz::after{content:"";position:absolute;top:-50%;left:-60%;width:40%;height:200%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(0) rotate(25deg);animation:eisglanz 6s ease-in-out 2;will-change:transform}
.prop{pointer-events:auto;cursor:pointer}

/* ---------- Level-Knoten (UI-Schicht über der Welt) ----------
   Ruhezustand ohne Pulsieren: der aktuelle Knoten schwebt sanft (Münz-Float wie Mario Wonder, 2000 ms alternate),
   ein Kranz aus sechs Funken kreist langsam darum, der Schatten atmet mit. */
.level{--g:calc(var(--c) * .84);position:absolute;left:calc(var(--x) * var(--c) - var(--g) / 2);top:calc(var(--y) * var(--c) - var(--g) / 2);width:var(--g);height:var(--g);
  z-index:880;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.level::before{content:"";position:absolute;inset:-22%;}  /* größere Tippfläche */
.level .schatten{position:absolute;left:12%;right:12%;bottom:-9%;height:22%;border-radius:50%;background:rgba(40,60,80,.28)}
.level .schwebe{position:absolute;inset:0;display:block}
.level .knopf{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;border:calc(var(--g) * .085) solid var(--ink);
  background:radial-gradient(circle at 50% 32%,#ffe98a 0 22%,#ffc21a 58%,#e08a00 100%);box-shadow:inset 0 calc(var(--g) * -.08) 0 rgba(0,0,0,.18),inset 0 calc(var(--g) * .06) 0 rgba(255,255,255,.55),0 calc(var(--g) * .09) 0 var(--ink);transition:transform .2s var(--feder)}
.level .knopf b{font-family:var(--f-game);font-size:calc(var(--g) * .5);color:#fff;-webkit-text-stroke:calc(var(--g) * .05) var(--ink);paint-order:stroke fill;line-height:1;margin-top:-6%}
.level .knopf svg{width:46%;height:46%}
.level:active .knopf{transform:scale(.9,.84)}
.level.ok .knopf{background:radial-gradient(circle at 50% 32%,#9fe1ff 0 22%,#3fa9f5 60%,#1f6fbf 100%)}
.level.zu .knopf{background:radial-gradient(circle at 50% 32%,#c9c0b5 0 22%,#9c9186 60%,#6f665d 100%)}
.level.zu .knopf svg rect,.level.zu .knopf svg path{fill:#fff;stroke:#fff}
.level .stern{position:absolute;right:-18%;top:-20%;width:46%;height:46%;background:url(../img/main/e_stern.webp) center/contain no-repeat;opacity:0;transform:scale(.3) rotate(-30deg);transition:opacity .3s,transform .5s var(--feder)}
.level.ok .stern{opacity:1;transform:scale(1) rotate(0)}
.level .orbit{position:absolute;inset:-26%;display:none;animation:orbit 7s linear infinite}
.level .orbit i{position:absolute;left:50%;top:50%;width:13%;height:13%;margin:-6.5% 0 0 -6.5%;border-radius:50%;background:radial-gradient(circle,#fff 0 35%,#ffe27a 60%,rgba(255,226,122,0) 72%);
  transform:rotate(calc(var(--k) * 60deg)) translateY(calc(var(--g) * -.74))}
.level .orbit i:nth-child(1){--k:0}.level .orbit i:nth-child(2){--k:1}.level .orbit i:nth-child(3){--k:2}.level .orbit i:nth-child(4){--k:3}.level .orbit i:nth-child(5){--k:4}.level .orbit i:nth-child(6){--k:5}
.level.jetzt .orbit{display:block}
.level.jetzt .schwebe{animation:schweben 2s cubic-bezier(.45,0,.55,1) infinite alternate}
.level.jetzt .schatten{animation:schattenatmen 2s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes schweben{from{transform:translateY(0)}to{transform:translateY(calc(var(--g) * -.16))}}
@keyframes schattenatmen{from{transform:scaleX(1);opacity:1}to{transform:scaleX(.78);opacity:.6}}
@keyframes orbit{to{transform:rotate(360deg)}}
.level .titel{position:absolute;left:50%;top:calc(100% + var(--g) * .22);transform:translateX(-50%);white-space:nowrap;font-family:var(--f-game);font-size:calc(var(--c) * .24);color:#fff;
  -webkit-text-stroke:.09em var(--ink);paint-order:stroke fill;background:linear-gradient(var(--rot1),var(--rot2));border:.12em solid var(--ink);border-radius:999px;padding:.12em .7em .18em;box-shadow:0 .15em 0 var(--ink);display:none;pointer-events:none}
.level.jetzt .titel{display:block}
.level .hand-hinweis{left:50%;top:40%}
.hand-hinweis .sprech:empty{display:none}
@media (prefers-reduced-motion:reduce){.level .schwebe,.level .schatten,.level .orbit{animation:none}}

/* ---------- Häuser ---------- */
.haus{pointer-events:auto;cursor:pointer;-webkit-touch-callout:none}
.haus>img{transition:transform .2s var(--feder),filter .5s}
.haus:active>img{transform:scale(1.05,.93)}
.haus.gesperrt>img{filter:grayscale(.7) brightness(1.05) contrast(.92) drop-shadow(3px 4px 0 rgba(40,60,80,.12))}
.haus.jetzt>img{animation:none}
@keyframes atmen{0%,100%{transform:scale(1)}50%{transform:scale(1.025,1.035)}}
.haus .ring{position:absolute;left:4%;right:4%;bottom:-7%;height:30%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,230,120,.9),rgba(255,230,120,0));animation:ringpuls 1.6s ease-in-out infinite;z-index:-1;pointer-events:none}
@keyframes ringpuls{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.18);opacity:.5}}
.haus .fenster{position:absolute;inset:38% 6% 6%;border-radius:18%;background:radial-gradient(closest-side,rgba(255,206,80,.6),rgba(255,206,80,0));opacity:0;transition:opacity .8s;pointer-events:none}
.haus.geloest .fenster{opacity:1}
.haus.feiert .fenster{opacity:1;animation:feierlicht 1.3s ease-out}
@keyframes feierlicht{0%{opacity:0;transform:scale(.6)}30%{opacity:1;transform:scale(1.35)}100%{opacity:1;transform:scale(1)}}
.rauch{position:absolute;width:16%;height:45%;transform:translate(-50%,-100%);pointer-events:none;opacity:0;transition:opacity 1s}
.haus.geloest .rauch,.kalhaus .rauch-k{opacity:1}
.rauch i{position:absolute;bottom:0;left:25%;width:50%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.8);filter:blur(1.5px);animation:rauch 3.6s linear infinite;animation-delay:calc(var(--k) * -1.2s);opacity:0}
@keyframes rauch{0%{transform:translate(0,0) scale(.35);opacity:0}15%{opacity:.85}100%{transform:translate(55%,-240%) scale(1.7);opacity:0}}
.huette .sprech{position:absolute;right:-6%;top:6%;display:flex;gap:3px;padding:6px 8px;background:#fff;border:2.5px solid var(--ink);border-radius:12px 12px 12px 3px;box-shadow:0 3px 0 rgba(0,0,0,.2);animation:sprechhops 2.4s ease-in-out infinite}
.huette .sprech i{width:5px;height:5px;border-radius:50%;background:var(--ink);animation:tippt 1.2s ease-in-out infinite}
.huette .sprech i:nth-child(2){animation-delay:.15s}.huette .sprech i:nth-child(3){animation-delay:.3s}
@keyframes tippt{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-3px);opacity:1}}
@keyframes sprechhops{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* Schilder über Häusern */
.schild{position:absolute;left:50%;top:-2%;transform:translate(-50%,-100%);z-index:2;white-space:nowrap;pointer-events:none;
  font-family:var(--f-game);font-size:calc(var(--c) * .3);letter-spacing:.02em;color:#fff;padding:.22em .7em .3em;border-radius:999px;
  -webkit-text-stroke:.07em var(--ink);paint-order:stroke fill;border:.12em solid var(--ink);box-shadow:0 .18em 0 var(--ink)}
.schild.los{background:linear-gradient(var(--gruen1),var(--gruen2));animation:schildhops 1.15s var(--feder) infinite}
.schild.ok{background:linear-gradient(var(--blau1),var(--blau2))}
.schild.zu{background:linear-gradient(#c3b8ac,#8a7f74)}
.haus .schild{top:12%}
.schild svg{width:.85em;height:.85em;vertical-align:-.08em;margin-right:.2em}
@keyframes schildhops{0%,100%{transform:translate(-50%,-100%)}40%{transform:translate(-50%,-128%)}58%{transform:translate(-50%,-96%)}70%{transform:translate(-50%,-102%)}}
.startschild{position:absolute;left:calc(var(--x) * var(--c));top:calc(var(--y) * var(--c));width:var(--c);text-align:center;z-index:300;
  font-family:var(--f-game);font-size:calc(var(--c) * .27);color:#fff;-webkit-text-stroke:.08em var(--ink);paint-order:stroke fill;pointer-events:none}

/* Kalenderhaus & Tor */
.kalhaus .tuerlicht{position:absolute;width:10.5%;height:11.5%;transform:translate(-50%,-50%) scale(.4);border-radius:14%;background:radial-gradient(closest-side,#fff6c4 0%,#ffd54a 55%,rgba(255,190,40,.85) 100%);box-shadow:0 0 10px 4px rgba(255,200,60,.9),0 0 22px 8px rgba(255,170,30,.5);border:2px solid #7a4a10;opacity:0;transition:opacity .4s,transform .45s var(--feder);pointer-events:none}
.kalhaus .tuerlicht.an{opacity:1;transform:translate(-50%,-50%) scale(1.3);animation:flackern 2.4s ease-in-out infinite}
.kalhaus .tuerlicht.plopp{animation:tuerplopp .5s var(--feder),flackern 2.4s ease-in-out .5s infinite}
@keyframes tuerplopp{0%{transform:translate(-50%,-50%) scale(.2)}60%{transform:translate(-50%,-50%) scale(1.7)}100%{transform:translate(-50%,-50%) scale(1.3)}}
.kalhaus .rauch-k{position:absolute;left:82%;top:2%}
.tor{z-index:950!important}

/* Nebel */
#nebel{position:absolute;left:0;right:0;top:0;height:calc(var(--nebel, 9.5) * var(--c));z-index:900;pointer-events:none;transition:opacity 1.8s ease}
#nebel::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(236,242,248,.7) 0%,rgba(236,242,248,.55) 60%,rgba(236,242,248,0) 100%)}
#nebel i{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.85),rgba(255,255,255,0));animation:nebeldrift 16s ease-in-out infinite alternate}
#nebel .w1{left:-10%;top:20%;width:70%;height:30%}#nebel .w2{right:-15%;top:48%;width:75%;height:28%;animation-duration:19s;animation-direction:alternate-reverse}#nebel .w3{left:20%;top:2%;width:60%;height:25%;animation-duration:22s}
@keyframes nebeldrift{to{transform:translateX(12%)}}
#nebel .info{pointer-events:auto;position:absolute;left:50%;top:calc((var(--nebel, 9.5) - 2.4) * var(--c));transform:translateX(-50%);z-index:2;font-family:var(--f-game);font-size:calc(var(--c) * .32);color:#fff;-webkit-text-stroke:.07em var(--ink);paint-order:stroke fill;background:linear-gradient(#c3b8ac,#7d7268);border:.12em solid var(--ink);border-radius:999px;padding:.3em .9em;white-space:nowrap;box-shadow:0 .18em 0 var(--ink);cursor:pointer}
#nebel .info svg{width:.85em;height:.85em;vertical-align:-.08em;margin-right:.3em}
#welt.frei #nebel{opacity:0}#welt.frei #nebel .info{pointer-events:none}

/* Geschenke auf dem Weg */
.gabe{--gw:calc(var(--c) * .92);position:absolute;left:calc(var(--x) * var(--c) + var(--c) * .5 - var(--gw) / 2);top:calc(var(--y) * var(--c) + var(--c) * .62 - var(--gw) * .7);width:var(--gw);aspect-ratio:1;z-index:400;padding:0;border:0;background:none;transition:opacity .3s}
.gabe .gabe-bild{display:block;width:100%;height:100%}
.gabe img{width:100%;height:100%;object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 5px 3px rgba(0,0,0,.22))}
.gabe.zu{opacity:0;pointer-events:none}
.gabe.bereit{cursor:pointer}
.gabe.bereit .gabe-bild{animation:gabewackel 2s ease-in-out infinite;transform-origin:50% 100%}
.gabe.bereit::before{content:"";position:absolute;inset:-40%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,232,130,.95),rgba(255,232,130,0));animation:ringpuls 1.3s ease-in-out infinite;z-index:-1}
.gabe.offen{opacity:0;pointer-events:none}
.gabe.fliegt{opacity:1}
.gabe .wert{position:absolute;left:50%;bottom:-20%;transform:translateX(-50%);font-family:var(--f-game);font-size:calc(var(--c) * .25);color:#fff;-webkit-text-stroke:.08em var(--ink);paint-order:stroke fill;background:linear-gradient(var(--rot1),var(--rot2));border:.12em solid var(--ink);border-radius:999px;padding:.1em .55em;white-space:nowrap;box-shadow:0 .15em 0 var(--ink)}
.gabe .wert:empty{display:none}
@keyframes gabewackel{0%,58%,100%{transform:rotate(0) scale(1)}64%{transform:rotate(-8deg) scale(1.06,.95)}70%{transform:rotate(7deg) scale(1.04)}76%{transform:rotate(-4deg)}82%{transform:rotate(2deg)}}

/* Hinweis-Hand (erster Besuch) */
.hand-hinweis{position:absolute;left:50%;top:58%;z-index:5;pointer-events:none;display:flex;flex-direction:column;align-items:center}
.hand-hinweis .hand{width:calc(var(--c) * .62);height:auto;animation:handtipp 1.2s ease-in-out infinite;transform-origin:50% 100%}
@keyframes handtipp{0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(-8px) scale(1)}55%{transform:translateY(0) scale(.88,1.05)}}
.hand-hinweis .sprech{margin-top:4px;white-space:nowrap;font-family:var(--f-game);font-size:calc(var(--c) * .26);color:var(--ink);background:#fff;border:.1em solid var(--ink);border-radius:12px;padding:.25em .7em;box-shadow:0 .15em 0 var(--ink)}

/* Partikel */
.funkenstern{position:fixed;z-index:80;width:18px;height:18px;pointer-events:none;background:url(../img/main/e_stern.webp) center/contain no-repeat}
.funkenstern-alt{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5l2.6 7.4 7.9.2-6.3 4.8 2.3 7.6L12 17l-6.5 4.5 2.3-7.6L1.5 9.1l7.9-.2z' fill='%23ffd23f' stroke='%233a1d0b' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.feuerfunke{position:fixed;z-index:80;width:7px;height:7px;border-radius:50%;pointer-events:none;box-shadow:0 0 6px 2px rgba(255,255,255,.6)}
.flug{position:fixed;z-index:45;pointer-events:none;transform-origin:0 0;will-change:transform,opacity;contain:layout paint}
.flug img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;backface-visibility:hidden}
.flug .flugschatten{position:absolute;left:8%;right:8%;bottom:-6%;height:16%;border-radius:50%;background:rgba(30,45,60,.45);filter:blur(6px);opacity:0}
.flug img.karte{object-fit:cover;border-radius:10px;opacity:0}
body.im-flug #play{position:fixed;inset:0;opacity:0;pointer-events:none;z-index:40}
body.im-flug #home{display:block!important}
#play{transition:opacity .25s ease}

/* ---------- HUD & Dock ---------- */
#hud{position:fixed;left:50%;top:0;transform:translateX(-50%);width:var(--ww);z-index:30;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:calc(10px + var(--sa-t)) 12px 8px;pointer-events:none}
#hud[hidden]{display:none}
.pille{pointer-events:auto;display:flex;align-items:center;gap:8px;background:linear-gradient(var(--holz1),var(--holz2));border:3px solid var(--ink);border-radius:999px;padding:5px 14px 5px 8px;box-shadow:0 4px 0 rgba(0,0,0,.35),inset 0 2px 0 rgba(255,255,255,.18)}
.pille .tueren{display:flex;gap:3px}
.pille .tueren i{width:16px;height:20px;border-radius:5px 5px 2px 2px;background:#7a5a40;border:2px solid #24130a;box-shadow:inset 0 -3px 0 rgba(0,0,0,.25)}
.pille .tueren i.an{background:linear-gradient(var(--gold1),var(--gold2));box-shadow:inset 0 -3px 0 var(--gold3),0 0 8px rgba(255,210,80,.8)}
.pille .tueren i.frisch{animation:tuerfrisch .7s var(--feder)}
@keyframes tuerfrisch{0%{transform:scale(.2) rotate(-30deg)}60%{transform:scale(1.35) rotate(8deg)}100%{transform:scale(1)}}
.pille b{font-family:var(--f-game);font-weight:400;font-size:19px;color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.pille b.zaehlt{animation:zaehlt .45s var(--feder)}
@keyframes zaehlt{40%{transform:scale(1.3)}}
.rund{pointer-events:auto;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(var(--holz1),var(--holz2));border:3px solid var(--ink);box-shadow:0 4px 0 rgba(0,0,0,.35),inset 0 2px 0 rgba(255,255,255,.18);transition:transform .12s,box-shadow .12s;color:#fff}
.rund:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.35)}
.rund svg{width:24px;height:24px}
#dock{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:var(--ww);z-index:30;display:flex;align-items:flex-end;gap:10px;padding:14px 14px calc(14px + var(--sa-b));background:linear-gradient(180deg,rgba(14,39,29,0),rgba(14,39,29,.82) 55%);pointer-events:none}
#dock[hidden]{display:none}
#dock>*{pointer-events:auto}
#dock .gbtn.haupt{flex:1}
.codechip{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:86px;height:62px;padding:0 10px;border-radius:16px;border:3px solid var(--ink);background:linear-gradient(var(--creme),var(--creme2));box-shadow:0 5px 0 #b98d55,0 5px 0 3px var(--ink),0 10px 18px rgba(0,0,0,.25);line-height:1;transition:transform .12s}
.codechip:active{transform:translateY(4px)}
.codechip b{font-family:var(--f-game);font-weight:400;font-size:19px;color:var(--rot2);-webkit-text-stroke:0;}
.codechip small{margin-top:3px;font-weight:600;font-size:11px;color:var(--ink);opacity:.8}
.codechip.neu{animation:chipneu .7s var(--feder)}
@keyframes chipneu{0%{transform:scale(.3) rotate(-12deg)}60%{transform:scale(1.15) rotate(4deg)}100%{transform:scale(1)}}

/* ---------- Buttons (klassisches Mobile-Game) ---------- */
.gbtn,.btn{--a:var(--gold1);--b:var(--gold2);--s:var(--gold3);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.4em;
  min-height:58px;padding:0 22px;border-radius:18px;border:3px solid var(--ink);
  background:linear-gradient(180deg,var(--a) 0%,var(--b) 62%);box-shadow:0 6px 0 var(--s),0 6px 0 3px var(--ink),0 14px 22px rgba(0,0,0,.25),inset 0 3px 0 rgba(255,255,255,.55);
  font-family:var(--f-game);font-weight:400;font-size:21px;letter-spacing:.02em;color:#fff;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;text-decoration:none;white-space:nowrap;
  transition:transform .1s ease,box-shadow .1s ease,filter .2s;touch-action:manipulation;cursor:pointer;margin-bottom:6px;top:0}
.gbtn::after,.btn::after{content:"";position:absolute;left:10px;right:10px;top:5px;height:36%;border-radius:12px 12px 40% 40%;background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,0));pointer-events:none}
.gbtn:active,.btn:active,.gbtn.press{transform:translateY(5px);box-shadow:0 1px 0 var(--s),0 1px 0 3px var(--ink),0 4px 8px rgba(0,0,0,.25),inset 0 3px 0 rgba(255,255,255,.5)}
.gbtn:disabled,.btn:disabled{filter:grayscale(.8) brightness(.95);cursor:default}
.gbtn.gruen,.btn-los{--a:var(--gruen1);--b:var(--gruen2);--s:var(--gruen3);color:#fff}
.gbtn.blau,.btn-leise{--a:var(--blau1);--b:var(--blau2);--s:var(--blau3);color:#fff}
.gbtn.rot,.btn-tinte{--a:var(--rot1);--b:var(--rot2);--s:var(--rot3);color:#fff}
.gbtn.creme{--a:#fffdf5;--b:#efe0c2;--s:#b98d55;color:var(--ink);-webkit-text-stroke:0}
.gbtn.klein{min-height:46px;font-size:17px;padding:0 15px;-webkit-text-stroke:3px var(--ink);border-radius:15px}
.gbtn.voll{width:100%}
.gbtn svg,.btn svg{width:22px;height:22px;-webkit-text-stroke:0}
.gbtn .preis-zusatz{font-family:var(--f-text);font-weight:700;font-size:13px;-webkit-text-stroke:0;color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:999px;padding:1px 8px;margin-left:4px}

/* ---------- Sheets & Panels ---------- */
.sheet-bg{background:rgba(8,20,14,.6);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);align-items:center;padding:16px}
.sheet{border-radius:28px;border:4px solid var(--ink);background:linear-gradient(var(--creme),var(--creme2));box-shadow:0 10px 0 #b98d55,0 10px 0 4px var(--ink),0 30px 60px rgba(0,0,0,.45);animation:panelrein .45s var(--feder) both;max-height:calc(100% - 32px);padding:24px 20px 22px}
@keyframes panelrein{0%{transform:translateY(40px) scale(.7);opacity:0}100%{transform:none;opacity:1}}
.sheet h2{font-family:var(--f-game);font-weight:400;letter-spacing:.01em;font-size:27px;line-height:1.08;color:var(--ink)}
.sheet .eyebrow{font-family:var(--f-text);font-weight:700;letter-spacing:.06em;color:#8a6640}
.sheet-actions{gap:12px}
.gpanel-bg{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:16px;background:rgba(8,20,14,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .25s}
.gpanel-bg.an{opacity:1}
.gpanel{position:relative;width:min(100%,420px);max-height:calc(100dvh - 40px);overflow:visible;border-radius:28px;border:4px solid var(--ink);background:linear-gradient(var(--creme),var(--creme2));box-shadow:0 10px 0 #b98d55,0 10px 0 4px var(--ink),0 30px 60px rgba(0,0,0,.45);padding:30px 20px 22px;text-align:center;transform:translateY(30px) scale(.7);opacity:0;transition:transform .5s var(--feder),opacity .2s}
.gpanel-bg.an .gpanel{transform:none;opacity:1}
.gpanel-bg.geht .gpanel{transform:translateY(20px) scale(.9);opacity:0;transition:transform .2s ease-in,opacity .2s}
.gpanel .kopf{position:absolute;left:50%;top:0;transform:translate(-50%,-55%);white-space:nowrap;font-family:var(--f-game);font-size:25px;color:#fff;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;
  background:linear-gradient(var(--rot1),var(--rot2));border:4px solid var(--ink);border-radius:16px;padding:6px 22px 8px;box-shadow:0 5px 0 var(--rot3),0 5px 0 4px var(--ink)}
.gpanel .kopf.gruen{background:linear-gradient(var(--gruen1),var(--gruen2));box-shadow:0 5px 0 var(--gruen3),0 5px 0 4px var(--ink)}
.gpanel .kopf.gold{background:linear-gradient(var(--gold1),var(--gold2));box-shadow:0 5px 0 var(--gold3),0 5px 0 4px var(--ink)}
.gpanel .schliessen{position:absolute;right:-12px;top:-14px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(var(--rot1),var(--rot2));border:3px solid var(--ink);box-shadow:0 4px 0 var(--rot3),0 4px 0 3px var(--ink);color:#fff}
.gpanel .schliessen svg{width:18px;height:18px}
.gpanel .schliessen:active{transform:translateY(3px)}
.gpanel h3{margin:.2em 0 .3em;font-family:var(--f-game);font-weight:400;font-size:26px;line-height:1.1;color:var(--ink)}
.gpanel p{margin:.35em 0;font-size:16px;line-height:1.38;font-weight:500;color:#4a2e1b}
.gpanel .fein{font-size:12.5px;opacity:.75;font-weight:500}
.gpanel .reihe{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.gpanel .stapel{display:grid;gap:12px;margin-top:16px}

/* ---------- Geschenk-Reveal ---------- */
.buehne{position:relative;height:210px;display:grid;place-items:center;margin:2px 0 4px}
.strahlen{position:absolute;width:440px;height:440px;left:50%;top:50%;margin:-220px 0 0 -220px;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(255,206,70,.55) 0 10deg,rgba(255,206,70,0) 10deg 24deg);-webkit-mask:radial-gradient(circle,#000 0,rgba(0,0,0,.6) 30%,transparent 64%);mask:radial-gradient(circle,#000 0,rgba(0,0,0,.6) 30%,transparent 64%);opacity:0;transition:opacity .5s;animation:dreh 20s linear infinite}
.buehne.auf .strahlen{opacity:1}
@keyframes dreh{to{transform:rotate(360deg)}}
.paket{position:relative;width:150px;height:150px;cursor:pointer}
.paket img{position:absolute;left:0;width:100%;object-fit:contain}
.paket .ganz{top:0;height:100%;object-position:50% 100%}
.paket .koerper,.paket .deckel{display:none}
.paket.teile .ganz{display:none}
.paket.teile .koerper,.paket.teile .deckel{display:block}
.paket .koerper{bottom:0;height:auto}
.paket .deckel{bottom:var(--deckel-unten,58%);height:auto;transform-origin:50% 100%;z-index:2}
.paket .glanz{position:absolute;left:50%;bottom:40%;width:120%;aspect-ratio:1;transform:translate(-50%,0) scale(.2);border-radius:50%;background:radial-gradient(closest-side,rgba(255,240,170,1),rgba(255,200,60,0));opacity:0;pointer-events:none}
.paket.zittert{animation:zittern .42s ease-in-out infinite}
@keyframes zittern{0%,100%{transform:rotate(0) scale(1)}25%{transform:rotate(-6deg) scale(1.05,.97)}75%{transform:rotate(6deg) scale(1.05,.97)}}
.buehne .tipphin{position:absolute;bottom:-6px;font-family:var(--f-game);font-size:17px;color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;animation:schildhops2 1s ease-in-out infinite;pointer-events:none}
@keyframes schildhops2{50%{transform:translateY(-6px)}}
.buehne.auf .tipphin{display:none}
.ticket{position:absolute;left:50%;top:50%;width:min(300px,80vw);aspect-ratio:2/1;transform:translate(-50%,-50%) scale(.2) rotate(-14deg);opacity:0;pointer-events:none}
.ticket .ticket-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.ticket .ticket-css{position:absolute;inset:0;border-radius:16px;border:4px solid var(--ink);background:linear-gradient(135deg,#fff7d6,#ffe9a6);box-shadow:inset 0 0 0 6px #e7b84a,inset 0 0 0 8px var(--ink)}
.ticket .inhalt{position:absolute;inset:16% 10% 16% 22%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--ink)}
.ticket .wertzahl{font-family:var(--f-game);font-size:46px;line-height:.95;color:var(--rot2);-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;font-variant-numeric:tabular-nums}
.ticket .wertzahl.klein{font-size:30px}
.ticket .wofuer{font-weight:700;font-size:13px;margin-top:4px}
.ticket .fuername{font-family:var(--f-hand);font-size:17px;margin-top:2px;color:#7a1f14}
.buehne.auf .ticket{animation:ticketraus .7s var(--feder) forwards;pointer-events:auto}
@keyframes ticketraus{0%{transform:translate(-50%,-10%) scale(.2) rotate(-14deg);opacity:0}60%{opacity:1}100%{transform:translate(-50%,-50%) scale(1) rotate(-3deg);opacity:1}}
.leiter{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:14px 0 4px}
.leiter div{position:relative;height:36px;border-radius:11px;border:3px solid var(--ink);background:#dcc9a4;overflow:hidden;box-shadow:inset 0 3px 0 rgba(0,0,0,.12)}
.leiter div::before{content:"";position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:linear-gradient(var(--gruen1),var(--gruen2));transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.leiter div.an::before{transform:scaleX(1)}
.leiter div.neu.an::before{transition-delay:.05s}
.leiter span{position:relative;z-index:1;display:grid;place-items:center;height:100%;font-family:var(--f-game);font-size:14px;color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;white-space:nowrap}
.leiter div.ziel::after{content:"";position:absolute;inset:-3px;border-radius:11px;box-shadow:0 0 0 3px var(--gold2);animation:ringpuls 1.2s ease-in-out infinite}
.preisband{display:flex;align-items:center;justify-content:center;gap:10px;margin:10px 0 2px;font-weight:700}
.preisband .alt{font-size:15px;color:#7a6250}
.preisband .neu{font-family:var(--f-game);font-weight:400;font-size:28px;color:var(--gruen3)}
.restzeit{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13px;color:#7a1f14;background:#fff;border:2px solid var(--ink);border-radius:999px;padding:3px 10px;margin-top:6px}
.restzeit i{width:8px;height:8px;border-radius:50%;background:var(--rot2);animation:funkeln 1.4s ease-in-out infinite}
.einblenden-spaet{opacity:0;transform:translateY(8px);max-height:0;overflow:hidden;transition:opacity .35s .12s,transform .35s var(--ruhig) .12s,max-height .5s var(--ruhig)}
.einblenden-spaet.da{opacity:1;transform:none;max-height:420px;overflow:visible}
.codezeile{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px}
.codezeile code{font-family:var(--f-mono);font-weight:700;font-size:16px;letter-spacing:.06em;background:#fff;border:2px dashed var(--ink);border-radius:10px;padding:5px 10px}
.codezeile button{font-weight:700;font-size:13px;text-decoration:underline;color:var(--ink)}

/* Angebotskarten (Finale, Code-Sheet) */
.karte-a{border:3px solid var(--ink);border-radius:18px;padding:14px;background:#fff;box-shadow:0 5px 0 rgba(58,29,11,.25);text-align:left}
.karte-a.gross{background:linear-gradient(#fffbe9,#ffefb8)}
.karte-a h4{margin:0;font-family:var(--f-game);font-weight:400;font-size:21px;color:var(--ink)}
.karte-a .zeile{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:6px 0 10px;font-weight:600;font-size:14px}
.karte-a .zeile b{font-family:var(--f-game);font-weight:400;font-size:26px;color:var(--gruen3);white-space:nowrap}
.karte-a.klein h4{font-size:17px}
.karte-a.klein p{margin:2px 0 10px;font-size:13px;text-align:left}
.produktbild{display:block;width:100%;max-height:120px;object-fit:contain;margin:-4px 0 6px}

/* Toast */
.gtoast{position:fixed;left:50%;bottom:calc(100px + var(--sa-b));transform:translate(-50%,30px);z-index:65;width:max-content;opacity:0;transition:all .35s var(--feder);
  font-weight:700;font-size:15px;color:#fff;background:#2a160a;border:3px solid var(--ink);border-radius:14px;padding:10px 16px;box-shadow:0 5px 0 rgba(0,0,0,.4);max-width:min(90vw,420px);text-align:center;pointer-events:none}
.gtoast.an{opacity:1;transform:translate(-50%,0)}

/* ---------- Rätsel: neue Zustände ---------- */
#play .timer,#play .ttl .eyebrow .timer{display:none}
.cell.kandidat::after{content:"";position:absolute;inset:8%;border-radius:12%;box-shadow:0 0 0 3px var(--gold2),0 0 14px 4px rgba(255,190,40,.6);animation:ringpuls 1.1s ease-in-out infinite;pointer-events:none}
.cell.raus{background:rgba(58,29,11,.18)}
.cell.raus .dim{opacity:1}
.cell.regelbruch .tok{animation:regelwackel .5s ease-in-out 2;filter:drop-shadow(0 0 0 3px #e0372b)}
.cell.regelbruch::before{content:"";position:absolute;inset:4%;border-radius:50%;box-shadow:0 0 0 3px var(--rot2);pointer-events:none}
@keyframes regelwackel{0%,100%{transform:rotate(0)}25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}
.note.regelbruch{box-shadow:0 0 0 3px var(--rot2),0 6px 14px rgba(0,0,0,.18)!important}
.tok.gesetzt{animation:tokplopp .38s var(--feder)}
@keyframes tokplopp{0%{transform:scale(.3) translateY(-30%)}60%{transform:scale(1.15,.9)}100%{transform:scale(1)}}
.coach-hand{position:absolute;z-index:30;width:34px;height:auto;pointer-events:none;animation:handtipp 1.2s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}}

#home{z-index:1}

/* ---------- Rätselansicht im Game-Stil (Brett und Pinnwand bleiben wie freigegeben) ---------- */
#play{background:var(--papier)}
#play .bar{gap:8px;padding:calc(8px + var(--sa-t)) 10px 6px}
#play .bar .iconbtn{width:46px;height:46px;border-radius:14px;background:linear-gradient(var(--holz1),var(--holz2));border:3px solid var(--ink);box-shadow:0 4px 0 rgba(0,0,0,.3),inset 0 2px 0 rgba(255,255,255,.18);color:#fff}
#play .bar .iconbtn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.3)}
#play .bar .ttl b{font-family:var(--f-game);font-weight:400;letter-spacing:.01em;font-size:clamp(16px,4.6vw,20px)}
#play .bar .ttl .eyebrow{font-family:var(--f-text);font-weight:700;color:#8a6640}
#play .kbtn{height:44px;min-width:44px;border-radius:14px;border:3px solid var(--ink);background:linear-gradient(#fffdf5,#efe0c2);box-shadow:0 4px 0 #b98d55,0 4px 0 3px var(--ink);color:var(--ink)}
#play .kbtn:not(:disabled):active{transform:translateY(3px);box-shadow:0 1px 0 #b98d55,0 1px 0 3px var(--ink)}
#play .kbtn.tipp{background:linear-gradient(var(--gold1),var(--gold2));box-shadow:0 4px 0 var(--gold3),0 4px 0 3px var(--ink);font-family:var(--f-game);font-weight:400;font-size:17px;color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;padding:0 12px 0 9px}
#play .kbtn.tipp svg{color:var(--ink);-webkit-text-stroke:0}
#play .kbtn.tipp.pulsiert{animation:tipppuls 1.6s ease-in-out infinite}
@keyframes tipppuls{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.blase .holly{background:#fff}
.hand-hinweis{transform:translateX(-50%)}
.haus:has(.hand-hinweis){z-index:960!important}
.haus.rechts .hand-hinweis{left:auto;right:4%;transform:none;align-items:flex-end}.haus.links .hand-hinweis{left:4%;transform:none;align-items:flex-start}

/* Siegel auf dem Ticket, Lupe im Tipp-Knopf */
.ticket .siegel{position:absolute;right:4%;bottom:-8%;width:22%;opacity:0;transform:scale(2.2) rotate(-25deg);pointer-events:none;filter:drop-shadow(0 3px 2px rgba(0,0,0,.25))}
.ticket .siegel.da{animation:siegel .42s var(--feder) forwards}
@keyframes siegel{0%{opacity:0;transform:scale(2.2) rotate(-25deg)}60%{opacity:1;transform:scale(.88) rotate(6deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
#play .kbtn.tipp .lupe{width:22px;height:22px;object-fit:contain;transform:rotate(-12deg)}
#play .kbtn.tipp:active .lupe{transform:rotate(-30deg) scale(1.1)}
.gbtn:not(:active),.btn:not(:active){transition:transform .25s var(--feder),box-shadow .25s var(--feder),filter .2s}
.sternschnuppe{position:fixed;z-index:6;width:90px;height:3px;border-radius:3px;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,248,210,.95));box-shadow:0 0 8px 2px rgba(255,236,170,.7)}
.sternschnuppe::after{content:"";position:absolute;right:-4px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#fff;box-shadow:0 0 10px 4px rgba(255,240,180,.9)}
/* Panel-Inhalte folgen gestaffelt (100 ms) */
.gpanel-bg.an .gpanel>*:not(.kopf):not(.schliessen){animation:kindrein .55s var(--ruhig) both}
.gpanel-bg.an .gpanel>*:nth-child(3){animation-delay:.08s}.gpanel-bg.an .gpanel>*:nth-child(4){animation-delay:.16s}.gpanel-bg.an .gpanel>*:nth-child(5){animation-delay:.24s}.gpanel-bg.an .gpanel>*:nth-child(6){animation-delay:.32s}.gpanel-bg.an .gpanel>*:nth-child(n+7){animation-delay:.4s}
@keyframes kindrein{from{opacity:0;transform:translateY(18px)}}
.gpanel .kopf{animation:kopfrein .5s var(--feder) .05s both}
@keyframes kopfrein{from{transform:translate(-50%,-55%) scale(.4) rotate(-6deg);opacity:0}}
.gbtn.creme,.gbtn.creme.klein{-webkit-text-stroke:0;font-family:var(--f-text);font-weight:700;font-size:16px;letter-spacing:0;color:var(--ink)}
.gbtn.creme::after{opacity:.6}
.gpanel a{color:var(--ink);font-weight:600}
/* Performance: animierte Elemente als eigene Ebenen, damit Schatten/Filter nicht pro Frame neu gemalt werden */
.haus.jetzt>img,.gabe .gabe-bild,.schild.los,.lichter .funke,.lampe .schein,.rauch i,.haus .ring,.haus.geloest .fenster,#nebel i{will-change:transform,opacity}
#welt{transform:translateZ(0)}
.haus .fenster{background:radial-gradient(closest-side,rgba(255,214,90,.45),rgba(255,214,90,0))}

.haus:not(.geloest) .rauch i{animation:none}
/* Vorschau auf kommende Geschenke (Trophy-Road-Prinzip): grau, mit Schloss und Wert */
.gabe-vorschau{--gw:calc(var(--c) * .84);position:absolute;left:calc(var(--x) * var(--c) + var(--c) * .5 - var(--gw) / 2);top:calc(var(--y) * var(--c) + var(--c) * .62 - var(--gw) * .7);width:var(--gw);aspect-ratio:1;z-index:399;padding:0;border:0;background:none;cursor:pointer}
.gabe-vorschau[hidden]{display:none}
.gabe-vorschau img{width:100%;height:100%;object-fit:contain;object-position:50% 100%;filter:grayscale(.85) brightness(1.08) contrast(.85);opacity:.72}
.gabe-vorschau .schloss-wert{position:absolute;left:50%;bottom:-16%;transform:translateX(-50%);display:flex;align-items:center;gap:3px;font-family:var(--f-game);font-size:calc(var(--c) * .22);color:#fff;-webkit-text-stroke:.08em var(--ink);paint-order:stroke fill;background:linear-gradient(#c3b8ac,#8a7f74);border:.12em solid var(--ink);border-radius:999px;padding:.1em .5em;white-space:nowrap;box-shadow:0 .15em 0 var(--ink)}
.gabe-vorschau .schloss-wert svg{width:.8em;height:.8em}
/* Review-Fixes: Tippflächen ≥ 44 px, Panels auf kleinen Geräten, Doppeltipp-Schutz, HUD-Schatten */
.gpanel-bg.geht{pointer-events:none}
.codezeile button{min-height:44px;padding:0 10px}
.blase .zu{min-width:44px;min-height:44px}
.chat-kopf .skip{min-height:44px;padding:0 12px}
.gpanel [data-m="reset"]{min-height:44px}
#hud::before{content:"";position:absolute;inset:0 0 -26px;background:linear-gradient(rgba(14,39,29,.55),rgba(14,39,29,0));pointer-events:none;z-index:-1}
.kalhaus .tuerlicht.vor{opacity:.55;transform:translate(-50%,-50%) scale(1.05)}
@media (max-height:700px){
  .gpanel{padding-top:26px;max-height:calc(100dvh - 44px);overflow-y:auto;overflow-x:hidden}
  .gpanel .kopf{position:relative;left:auto;top:auto;transform:none;display:inline-block;margin:-8px 0 6px;font-size:21px}
  .gpanel .schliessen{right:8px;top:8px}
  .buehne{height:168px}.paket{width:118px;height:118px}.ticket{width:min(260px,74vw)}
  .ticket .wertzahl{font-size:38px}
}
.note.erfuellt .ok-dot{animation:okpop .4s var(--feder)}
@keyframes okpop{0%{transform:scale(0)}100%{transform:scale(1)}}

.tuerlicht-flug{position:fixed;left:0;top:0;z-index:85;width:22px;height:22px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,#fff 0 25%,#ffe27a 55%,rgba(255,200,60,0) 72%);box-shadow:0 0 14px 6px rgba(255,210,80,.75)}
.level .schloss-flug{position:absolute;left:50%;top:50%;width:40%;height:40%;pointer-events:none;z-index:2}
.level .schloss-flug svg{width:100%;height:100%}

/* ---------- Lebenszeichen an den Details vor den Häusern ---------- */
[class*="anim-"] .lz{position:absolute;pointer-events:none;animation-delay:calc(var(--k) * .6s + var(--versatz, 0s))}
/* Dampf über dem Plätzchenblech */
.anim-dampf .lz{left:calc(30% + var(--k) * 18%);top:8%;width:22%;height:22%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.9),rgba(255,255,255,0));opacity:0;animation:dampf 2.6s ease-out infinite}
@keyframes dampf{0%{transform:translate(0,30%) scale(.5);opacity:0}25%{opacity:.85}100%{transform:translate(-20%,-170%) scale(1.5);opacity:0}}
/* Mehlstaub, der ab und zu aus dem Sack pufft */
.anim-staub .lz{left:62%;top:58%;width:16%;height:16%;border-radius:50%;background:radial-gradient(closest-side,#fffdf6,rgba(255,253,246,0));opacity:0;animation:staub 5.2s ease-out infinite;animation-delay:calc(var(--k) * .12s + var(--versatz, 0s))}
.anim-staub .lz:nth-child(odd){left:72%;top:66%}
@keyframes staub{0%,78%{transform:translate(0,0) scale(.3);opacity:0}82%{opacity:.95}100%{transform:translate(calc(var(--k) * 12% - 10%),-120%) scale(1.6);opacity:0}}
/* Glut im Steinofen */
.anim-glut .lz{left:20%;top:38%;width:60%;height:42%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,170,60,.75),rgba(255,120,40,0));mix-blend-mode:normal;animation:glut 1.9s steps(6) infinite}
@keyframes glut{0%,100%{opacity:.45}30%{opacity:.85}55%{opacity:.6}80%{opacity:.95}}
/* Schaukelpferd wippt, Ski wiegen sich im Wind */
.anim-wippen>img{transform-origin:50% 95%;animation:wippen 2.6s cubic-bezier(.45,0,.55,1) infinite alternate;animation-delay:var(--versatz, 0s)}
@keyframes wippen{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
.anim-wiegen>img{transform-origin:50% 100%;animation:wiegen 3.8s cubic-bezier(.45,0,.55,1) infinite alternate;animation-delay:var(--versatz, 0s)}
@keyframes wiegen{from{transform:rotate(-2.5deg)}to{transform:rotate(2.5deg)}}
/* Funkeln (Glitzerspur) und Lichter am Vorgartenbaum */
.anim-funkeln .lz,.anim-lichter .lz{width:18%;height:18%;margin:-9% 0 0 -9%;background:url(../img/main/e_stern.webp) center/contain no-repeat;opacity:0;animation:funkeln 2.4s ease-in-out infinite}
.anim-lichter .lz{width:12%;height:12%;margin:-6% 0 0 -6%;background:radial-gradient(circle,#fff 0 25%,#ffd86b 50%,rgba(255,216,107,0) 70%);animation-duration:3.2s}
@keyframes funkeln{0%,100%{transform:scale(.2) rotate(0);opacity:0}45%{transform:scale(1) rotate(60deg);opacity:1}70%{transform:scale(.6) rotate(90deg);opacity:.6}}
/* Lichterkette im Schnee blinkt in Gruppen */
.anim-blinken .lz{width:16%;height:30%;margin:-15% 0 0 -8%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,240,170,.95),rgba(255,220,120,0));opacity:0;animation:blinken 1.6s steps(1) infinite;animation-delay:calc(var(--k) * .32s)}
@keyframes blinken{0%,49%{opacity:.9}50%,100%{opacity:.15}}
/* Glanz auf den Christbaumkugeln */
.anim-glanz{overflow:hidden}
.anim-glanz .lz{inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.7) 50%,transparent 65%);transform:translateX(-120%);animation:kugelglanz 12s ease-in-out infinite}
@keyframes kugelglanz{0%,88%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@media (prefers-reduced-motion:reduce){[class*="anim-"] .lz,[class*="anim-"]>img{animation:none!important}}

.rauch{display:none}.haus.raucht .rauch{display:block}
.gabe.bereit::before{animation:none!important;opacity:.85}

/* Dev-Schalter (nur im Dev-Modus) */
#devloesen{position:fixed;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:70;display:flex;align-items:center;gap:6px;padding:5px 6px 5px 10px;border-radius:999px;border:3px solid var(--ink);background:linear-gradient(#ffd0f0,#f08ad0);box-shadow:0 4px 0 var(--ink)}
#devloesen .dev-tag{font:700 11px/1 var(--f-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);opacity:.7}
#devloesen button{height:38px;padding:0 12px;border-radius:999px;border:2px solid var(--ink);background:#fff;color:var(--ink);font-family:var(--f-game);font-size:14px;cursor:pointer}
#devloesen button[data-dev="loesen"]{background:var(--ink);color:#fff}
#devloesen.laeuft{opacity:.55;pointer-events:none}

/* ---------- Hollys Druckerei (Finale) ---------- */
.druckerei{pointer-events:auto;cursor:pointer;z-index:80!important}
.druckerei .rauch{display:block;opacity:1;width:16%;height:30%;transform:translate(-50%,-100%)}
.druckerei .rauch i{animation-duration:3.4s;animation-delay:calc(var(--k) * 1.1s + var(--j) * .5s)}
.druckerei.volldampf .rauch i{animation-duration:1.7s}
.druckerei.gesperrt>img{filter:saturate(.75) brightness(1.02) drop-shadow(3px 4px 0 rgba(40,60,80,.16))}
.druckerei .druckschild{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none;font-family:var(--f-game);font-size:calc(var(--c) * .24);color:#fff;
  font-size:calc(var(--c) * .14);letter-spacing:-.01em;line-height:1;color:#7a1f14;-webkit-text-stroke:0;background:none;border:0;padding:0;box-shadow:none;text-shadow:0 1px 0 rgba(255,255,255,.55);max-width:39%;overflow:hidden}
.druckerei.wach .druckschild{color:#7a1f14}
.infoschild{pointer-events:auto;cursor:pointer}
.infoschild .info-i{display:none}
.infoschild.ersatz .info-i{display:grid;place-items:center;position:absolute;left:50%;top:18%;transform:translateX(-50%);width:44%;aspect-ratio:1;border-radius:50%;background:#3fa9f5;border:.14em solid var(--ink);color:#fff;font:700 calc(var(--c) * .28)/1 var(--f-game);box-shadow:0 .1em 0 var(--ink);pointer-events:none}
.gabe.wartet{opacity:0!important;pointer-events:none}

/* Nach der Landung baut sich die Rätsel-Oberfläche gestaffelt auf (Kopfzeile → Zettel) */
#play.eintritt .bar,#play.eintritt .pinwand{animation:eintritt .42s cubic-bezier(.2,.75,.12,1) both}
#play.eintritt .pinwand{animation-delay:.09s}
@keyframes eintritt{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- Chat zentral: Nachrichten wachsen von der Bildmitte nach oben ---------- */
.chat .chat-liste{justify-content:flex-end;width:100%;max-width:460px;margin:0 auto;padding-left:14px;padding-right:14px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18%);mask-image:linear-gradient(to bottom,transparent 0,#000 18%)}
.chat .chat-liste .zeit{margin-top:auto}
.chat .chat-fuss{width:100%;max-width:460px;margin:0 auto max(13vh, 28px);padding-left:12px;padding-right:12px}
.chat .chat-liste .msg{transform-origin:0 100%}
.chat .chat-liste .msg.out{transform-origin:100% 100%}

/* Rätsel hochkant: Brett + Zettel als Gruppe, mittig im freien Raum – nie ein Loch zwischen Brett und Zetteln */
#play:not(.breit):not(.eng) .play-body{justify-content:center}
#play:not(.breit):not(.eng) .board-col{flex:0 0 auto}
#play:not(.breit):not(.eng) .seite{margin-top:4px}
/* Ergebnis: Stempel sitzt unten auf dem Fell, nie über dem Gesicht */
.erg-bild .stamp{font-size:20px;left:auto;right:calc(50% - 132px);top:auto;bottom:4px;transform:rotate(-10deg);padding:0 7px;border-width:3px;box-shadow:0 2px 0 rgba(0,0,0,.08)}

/* Gutschein: Name „gedruckt“ (Schreibmaschine/Letterpress), leicht eingeprägt, minimal schief wie gestempelt */
.ticket .druckzeile{display:flex;flex-direction:column;align-items:center;margin:4px 17% 0 0;line-height:1.05;transform:rotate(-1.2deg)}
.ticket .druckzeile .fuer{font:600 9.5px/1 var(--f-text, sans-serif);letter-spacing:.14em;text-transform:uppercase;color:#8a6a45}
.ticket .druckname{font-family:"Special Elite","Courier New",monospace;font-weight:400;font-size:21px;letter-spacing:.06em;text-transform:uppercase;color:#3a1d0b;margin:2px 0 1px;
  text-shadow:.4px .4px 0 rgba(58,29,11,.35),-.3px 0 0 rgba(58,29,11,.2);opacity:.92;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ticket .druckvermerk{font-family:"Special Elite","Courier New",monospace;font-size:9.5px;letter-spacing:.06em;color:#5a3a1a;opacity:.95}

/* ---------- Fall-Titel am Level-Kreis: feine Karten-Beschriftung (Geist, eine Zeile, Schnee-Halo statt Kachel) ---------- */
.level .titel{display:block!important;top:calc(100% + var(--g) * .2);transform:translateX(-50%);width:auto;max-width:none;padding:0;background:none;border:0;border-radius:0;box-shadow:none;
  white-space:nowrap;text-align:center;font-family:var(--f-sans);-webkit-text-stroke:0;pointer-events:none;
  filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px rgba(255,255,255,.95)) drop-shadow(0 1px 1px rgba(40,60,80,.25))}
.level.schild-links .titel{left:-4%;transform:none;text-align:left}
.level.schild-rechts .titel{left:auto;right:-4%;transform:none;text-align:right}
.level .t-fall{display:none}
.level .t-name{display:block;font:600 calc(var(--c) * .2)/1.1 var(--f-sans);letter-spacing:-.005em;color:#3a1d0b}
.level.ok .t-name{color:#2c4f72}
.level.zu .t-name{color:#6a6158;font-weight:600}
/* Aktuelles Level: eine Spur größer, warmer Goldglanz wandert über den Titel */
.level.jetzt .titel{display:flex!important;align-items:center;gap:calc(var(--c) * .07)}
.level.schild-rechts.jetzt .titel{flex-direction:row}
.level.jetzt .titel::before{content:"";width:0;height:0;border-left:calc(var(--c) * .11) solid #e39a00;border-top:calc(var(--c) * .075) solid transparent;border-bottom:calc(var(--c) * .075) solid transparent;animation:spielstupser 1.6s cubic-bezier(.45,0,.55,1) infinite}
@keyframes spielstupser{0%,55%,100%{transform:translateX(0)}70%{transform:translateX(3px)}85%{transform:translateX(0)}}
.level.jetzt .t-name{font-size:calc(var(--c) * .24);font-weight:700;letter-spacing:-.01em;
  background:linear-gradient(105deg,#5a2a08 0 36%,#b86a00 43%,#ffcf3a 48%,#fff6cf 50%,#ffcf3a 52%,#b86a00 57%,#5a2a08 64% 100%);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:titelglanz 3.4s cubic-bezier(.45,0,.55,1) infinite}
@keyframes titelglanz{0%,35%{background-position:100% 0}100%{background-position:0 0}}
.level.jetzt .titel::after{content:none}
@media (prefers-reduced-motion:reduce){.level.jetzt .t-name{animation:none;background:none;color:#5a2a08}.level.jetzt .titel::before{animation:none}}

/* Lichter an der Druckerei: klein, auf der Girlande */
.druckerei.anim-lichter .lz{width:7%;height:7%;margin:-3.5% 0 0 -3.5%}