@font-face{font-family:"Jakarta";src:url("../assets/Plus_Jakarta_Sans/static/PlusJakartaSans-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Jakarta";src:url("../assets/Plus_Jakarta_Sans/static/PlusJakartaSans-ExtraBold.ttf") format("truetype");font-weight:800;font-display:swap}
:root{--ink:#1d3340;--ink2:#4a6472;--card:#f7fcfd;--line:rgba(29,51,64,.14);--pri:#1b7c9c;--pri2:#156a87;--shadow:0 10px 28px rgba(30,90,110,.18)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#eaf6f7;font-family:Jakarta,system-ui,sans-serif;color:var(--ink);user-select:none;-webkit-user-select:none}
/* Hochformat-Bühne (Entwurf 400 × 820) – wird proportional auf jede Bildschirmgröße skaliert */
body{background:radial-gradient(120% 80% at 50% 0%,#f4fbfc,#dff1f3 60%,#d3ece6)}
.stage{position:fixed;left:50%;top:50%;width:var(--sw,400px);height:var(--sh,820px);transform:translate(-50%,-50%);overflow:hidden;background:#eaf6f7}
.stage.is-card{border-radius:24px;box-shadow:0 20px 60px rgba(30,90,110,.25)}
#scene{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;touch-action:none}
.ui{position:absolute;left:0;top:0;width:var(--uw,400px);height:var(--uh,820px);transform:scale(var(--k,1));transform-origin:0 0;pointer-events:none}
.ui > *{pointer-events:auto}
button{font:inherit;color:inherit;cursor:pointer}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.top{position:absolute;left:0;right:0;top:0;z-index:5;display:flex;align-items:center;padding:8px 10px}
.top > * + *{margin-left:8px}
.brand{display:flex;flex-direction:column;line-height:1.05;padding:7px 12px;border-radius:16px;background:rgba(255,250,246,.86);box-shadow:var(--shadow)}
.brand b{font-size:17px;font-weight:800;letter-spacing:.02em;color:var(--pri2)}
.brand span{font-size:12.5px;font-weight:700;color:var(--ink2)}
.top__gap{flex:1}
.ibtn{flex:0 0 auto;display:grid;place-items:center;width:46px;height:46px;border:0;border-radius:15px;background:rgba(255,250,246,.86);box-shadow:var(--shadow)}
.ibtn[aria-pressed="true"]{color:#fff;background:var(--pri)}

.helps{position:absolute;left:0;right:0;bottom:14px;z-index:5;display:flex;justify-content:center;padding:8px 10px 12px}
.helps > * + *{margin-left:10px}
.help{position:relative;flex:1;max-width:124px;display:flex;flex-direction:column;align-items:center;justify-content:center;height:58px;padding:0 6px;border:0;border-radius:18px;background:rgba(255,250,246,.92);box-shadow:var(--shadow);font-weight:800;font-size:12.5px;line-height:1.1;white-space:nowrap}
.help b{position:absolute;top:-6px;right:-6px;display:grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border-radius:11px;background:var(--pri);color:#fff;font-size:12.5px}
.help:disabled{opacity:.45;cursor:default}
.help:not(:disabled):active{transform:scale(.96)}
.help.is-hot{background:var(--pri);color:#fff}
.help.is-hot b{background:#fff;color:var(--pri2)}

/* Hinweise in Zuckerguss-Optik: glänzende Farbfläche mit 3D-Kante, Symbol im hellen Kreis; Farbe je Art (Schrift ≥ 4,5:1) */
.hint{position:absolute;left:50%;top:44%;z-index:6;display:flex;align-items:center;width:max-content;max-width:min(92%,440px);transform:translateX(-50%);padding:10px 16px 10px 10px;border-radius:20px;overflow:hidden;
  color:#fff;font-weight:800;font-size:15px;line-height:1.3;text-align:left;text-shadow:0 1px 1px rgba(0,0,0,.28);
  background:linear-gradient(180deg,var(--h1,#0f6d8c) 0%,var(--h2,#0b546e) 100%);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(0,0,0,.16),0 4px 0 var(--h3,#08425a),0 14px 28px rgba(20,50,70,.32);
  animation:hintpop .42s cubic-bezier(.2,1.4,.4,1) both}
.hint::before{content:"";position:absolute;left:12px;right:12px;top:2px;height:12px;border-radius:14px 14px 50% 50%/10px 10px 6px 6px;background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0));pointer-events:none}
.hint__icon{position:relative;flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;margin-right:10px;border-radius:50%;background:rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.14)}
.hint__icon svg{width:21px;height:21px}
.hint__txt{position:relative;text-wrap:balance}
/* Figur aus dem angetippten Blech auf heller Scheibe – wackelt kurz, als wollte sie in den Trichter */
.hint__icon.is-item{width:46px;height:46px;margin:-4px 10px -4px -2px;background:radial-gradient(circle at 50% 38%,#fff 0%,#f3f7f8 62%,#dfe9ec 100%);box-shadow:inset 0 -2px 0 rgba(0,0,0,.1),0 2px 5px rgba(0,0,0,.25)}
.hint__icon.is-item img{width:40px;height:40px;max-width:none;filter:drop-shadow(0 2px 1.5px rgba(40,30,20,.35));animation:wackel .9s ease-in-out .25s 2}
@keyframes wackel{0%,100%{transform:rotate(0)}25%{transform:rotate(-9deg) translateY(-1px)}75%{transform:rotate(9deg) translateY(-1px)}}
@media (prefers-reduced-motion:reduce){.hint,.hint__icon.is-item img{animation:none}}
.hint--info{--h1:#0f6d8c;--h2:#0b546e;--h3:#08425a}
.hint--warte{--h1:#097280;--h2:#065a63;--h3:#04474e}
.hint--gesperrt{--h1:#7232dd;--h2:#571fae;--h3:#461a8a}
.hint--aktion{--h1:#2157d3;--h2:#1a45bd;--h3:#1a327a}
.hint--nein{--h1:#c42127;--h2:#9f1a1f;--h3:#7f1519}
.hint--erfolg{--h1:#ffd965;--h2:#f4b63f;--h3:#c98a1d;color:#3d2600;text-shadow:0 1px 0 rgba(255,255,255,.45)}
.hint--erfolg .hint__icon{background:rgba(255,255,255,.45)}
@keyframes hintpop{0%{transform:translate(-50%,-10px) scale(.86);opacity:0}100%{transform:translate(-50%,0) scale(1);opacity:1}}
@keyframes pop{from{transform:translate(-50%,-8px);opacity:0}}

.dlg{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;display:grid;place-items:center;padding:16px;background:rgba(20,60,80,.4)}
.dlg__card{width:min(100%,380px);padding:24px 20px 18px;border-radius:26px;background:var(--card);box-shadow:0 30px 70px rgba(20,60,80,.35);text-align:center;animation:card .35s cubic-bezier(.2,.9,.3,1.25) both}
@keyframes card{from{transform:scale(.85);opacity:0}}
.dlg__icon{font-size:0;margin:0 auto 8px;width:74px;height:74px}
.dlg__icon svg{width:74px;height:74px;stroke-width:1.6}
.dlg h2{margin:0 0 6px;font-size:24px;font-weight:800}
.dlg p{margin:0 0 16px;color:var(--ink2);font-weight:700;line-height:1.45}
.dlg__btns{display:grid;gap:9px}
.dbtn{height:52px;border:0;border-radius:16px;font-weight:800;font-size:16px;background:#e3f1f4;color:var(--ink)}
.dbtn.pri{background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;box-shadow:0 8px 18px rgba(21,106,135,.35)}

.loading{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;display:grid;place-items:center;background:#eaf6f7;font-weight:800;font-size:18px;color:var(--pri2)}
.loading.is-gone{opacity:0;pointer-events:none;transition:opacity .4s}

.coins{flex:0 0 auto;display:flex;align-items:center;height:46px;padding:0 11px 0 9px;border-radius:16px;background:rgba(255,250,246,.86);box-shadow:var(--shadow);color:#b8692c}
.coins b{font-size:16px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.coins.is-bump{animation:bump .5s ease}
@keyframes bump{40%{transform:scale(1.18)}}
.help b.is-buy{background:#b8692c}

[hidden]{display:none!important}
/* Abstände ohne flex-gap (alte Android-Browser) */
.help svg{margin-bottom:2px}
.coins svg{margin-right:5px}
/* Rechtliches: dezent ganz unten (online); in der App nur auf dem Startbildschirm und im Menü */
.legal{position:absolute;left:0;right:0;bottom:0;z-index:5;height:16px;display:flex;justify-content:center;align-items:center}
.legal nav,.dlg__legal,.loading__legal{display:flex;justify-content:center;align-items:center;font-size:11px;font-weight:700;letter-spacing:.02em}
.legal a,.dlg__legal a,.loading__legal a{color:var(--ink2);text-decoration:none;padding:2px 6px}
.legal a:hover,.dlg__legal a:hover,.loading__legal a:hover{text-decoration:underline}
.legal span,.dlg__legal span,.loading__legal span{color:var(--ink2);opacity:.6}
.dlg__legal{margin-top:12px}
.loading{flex-direction:column}
.loading__legal{position:absolute;bottom:14px;left:0;right:0;font-size:12px}
.is-app .legal{display:none}
.is-app .helps{bottom:0}
/* Donut-Taler */
.taler{width:24px;height:24px;stroke:none;flex:0 0 auto}
.coins .taler{margin-right:6px;filter:drop-shadow(0 1px 1px rgba(120,80,0,.35))}
.help b.is-buy{background:linear-gradient(180deg,#f2c94c,#c9921f);color:#3d2600}
.fly-taler{position:fixed;z-index:40;left:0;top:0;width:30px;height:30px;pointer-events:none;transition:transform .7s cubic-bezier(.5,-0.2,.6,1),opacity .2s ease .62s;will-change:transform}
.fly-taler .taler{width:30px;height:30px}
.dlg__reward{display:flex;align-items:center;justify-content:center;gap:8px;margin:-4px 0 14px;font-weight:800;font-size:20px;color:#8a5c0c}
.dlg__reward .taler{width:30px;height:30px}
/* ===== 3D-Tasten: sichtbare Seitenwand (Dicke), gewölbte Oberfläche mit Lichtkante; beim Drücken sinkt die Taste ein ===== */
.help,.ibtn,.dbtn{
  --face1:#ffffff; --face2:#eef8fa; --face3:#d7eaf0;
  --s1:#c6dee5; --s2:#b6d2db; --s3:#a6c6d1; --drop:rgba(30,90,110,.3);
  background:linear-gradient(180deg,var(--face1) 0%,var(--face2) 48%,var(--face3) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.95),
    inset 0 -2px 3px rgba(27,124,156,.14),
    0 1px 0 var(--s1), 0 2px 0 var(--s1), 0 3px 0 var(--s2), 0 4px 0 var(--s2), 0 5px 0 var(--s3), 0 6px 0 var(--s3),
    0 9px 14px var(--drop);
  transform:translateY(-3px);
  transition:transform .07s ease, box-shadow .07s ease;
}
.help:not(:disabled):active,.ibtn:active,.dbtn:active{
  transform:translateY(2px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.9),
    inset 0 -1px 2px rgba(27,124,156,.12),
    0 1px 0 var(--s2), 0 2px 0 var(--s3),
    0 3px 5px var(--drop);
}
.help.is-hot,.ibtn[aria-pressed="true"],.dbtn.pri{
  --face1:#4fb3d1; --face2:#1f86a8; --face3:#166d8a;
  --s1:#11607a; --s2:#0d5269; --s3:#0a4457; --drop:rgba(10,60,80,.38);
  color:#fff;
}
.help.is-hot,.ibtn[aria-pressed="true"],.dbtn.pri{ text-shadow:0 1px 0 rgba(0,40,55,.45) }
.help:disabled{ transform:translateY(0); box-shadow:0 1px 0 var(--s1), 0 2px 0 var(--s2), 0 4px 8px rgba(30,90,110,.15); opacity:.5 }
/* Symbole wie eingeprägt */
.help svg,.ibtn svg{ filter:drop-shadow(0 1px 0 rgba(255,255,255,.85)) }
.help.is-hot svg,.ibtn[aria-pressed="true"] svg{ filter:drop-shadow(0 1px 0 rgba(0,40,55,.45)) }
/* Zähler-Plakette ebenfalls plastisch */
.help b{ background:linear-gradient(180deg,#3aa3c4,#1b7c9c); box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 2px 0 #11607a, 0 3px 5px rgba(0,40,55,.3) }
.help b.is-buy{ background:linear-gradient(180deg,#f7d56a,#d19a22); color:#3d2600; box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 2px 0 #9a6b12, 0 3px 5px rgba(80,50,0,.3) }
.help.is-hot b{ background:linear-gradient(180deg,#fff,#e8f4f7); color:var(--pri2); box-shadow:0 2px 0 #b6d2db }
.dbtn{ margin-bottom:4px }
/* Kiste wählen: alle Farben, die es im Level noch gibt */
.dlg__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;margin:0 0 16px}
.pickc{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px 8px;border:0;border-radius:16px;font-weight:800;font-size:13px;color:var(--ink)}
.pickc{height:auto;min-height:78px}
.pickc svg{width:54px;height:34px;stroke:none;flex:0 0 auto}
/* Abzeichen (App-Icon) */
.brand{flex-direction:row;align-items:center;padding:5px 12px 5px 6px}
.brand__icon{width:34px;height:34px;border-radius:9px;margin-right:8px;box-shadow:0 2px 6px rgba(30,90,110,.25)}
.brand__txt{display:flex;flex-direction:column;line-height:1.05}
.loading__icon{width:132px;height:132px;border-radius:30px;margin-bottom:16px;box-shadow:0 14px 34px rgba(30,90,110,.28)}
.hint.is-top{top:70px}
.loading{display:flex;flex-direction:column;align-items:center;justify-content:center}
/* App: Ton/Vibration schalten die nativen Knöpfe oben; Name steht in der App-Leiste */
.is-app #soundBtn{display:none}
.is-app .brand b{display:none}
/* Gewinn der Herausforderung im Dialog: Symbol des Extras */
.dlg__reward .xh{display:flex;align-items:center;margin:0 7px;font-size:19px;color:var(--pri2)}
.dlg__reward .xh svg{width:26px;height:26px;margin-right:3px}
/* Menü-Knopf: roter Punkt = heutige Herausforderung noch nicht angesehen */
#menuBtn{position:relative}
#menuBtn .dot{position:absolute;top:6px;right:6px;width:11px;height:11px;border-radius:50%;background:#e2233a;box-shadow:0 0 0 2px #fff}
/* Ladebildschirm auf Tablets mitwachsen lassen (--lk setzt test.html sofort beim Laden, Handys bleiben bei 1) */
.loading{font-size:calc(18px * var(--lk,1))}
.loading__icon{width:calc(132px * var(--lk,1));height:calc(132px * var(--lk,1));border-radius:calc(30px * var(--lk,1));margin-bottom:calc(16px * var(--lk,1))}
.loading__legal{bottom:calc(14px * var(--lk,1));font-size:calc(12px * var(--lk,1))}
.loading__legal a{padding:calc(2px * var(--lk,1)) calc(6px * var(--lk,1))}
#loadingText{padding:0 20px;text-align:center}