/* Funkenhopp - UI. System fonts only (keine Webfonts). Palette per GDD 10.3. */
:root{--bg:#0E1426;--bg2:#1B2440;--panel:#1B2440;--panel2:#232d4a;--fg:#F4F1EA;--muted:#9AA6C4;--amb:#FFC93C;--amb-fg:#0E1426;--cy:#4CC9F0;--cu:#C77B3B;--red:#FF6B81;--ok:#6EE7A8;--line:#2A3556;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--font-h:"Arial Rounded MT Bold","Nunito","Segoe UI",system-ui,sans-serif;--u:1.5px;
  --wb-footer-color:var(--muted);--wb-footer-link:var(--muted);--wb-footer-size:11px;--wb-footer-pad:4px 8px;--wb-footer-opacity:.85}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font-family:var(--font);overscroll-behavior:none}
body{display:flex;flex-direction:column;height:100dvh;overflow:hidden;background:radial-gradient(120% 80% at 50% 0%,var(--bg2),var(--bg) 70%)}
#app{flex:1;min-height:0;position:relative;display:flex;padding-top:env(safe-area-inset-top)}
.screen{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:auto;-webkit-overflow-scrolling:touch}
body[data-screen=game] .wb-footer{display:none}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--cy);outline-offset:2px}
.btn{background:var(--panel);border:2px solid var(--line);border-radius:14px;padding:12px 18px;min-height:48px;font-weight:700;font-size:1.05rem;cursor:pointer;color:var(--fg)}
.btn:hover{border-color:var(--cy)}
.btn[disabled]{opacity:.45;cursor:default}
.btn.primary{background:var(--amb);color:var(--amb-fg);border-color:var(--amb)}
.btn.big{font-size:1.35rem;min-height:60px}
.btn.danger{border-color:var(--red);color:var(--red)}
.btn:active{transform:translateY(1px)}
.icon-btn{width:48px;height:48px;min-width:48px;border-radius:14px;background:var(--panel);border:2px solid var(--line);cursor:pointer;font-size:1.1rem;display:inline-flex;align-items:center;justify-content:center;color:var(--fg)}
.muted{color:var(--muted)}
small.muted{display:block;font-size:.8rem;font-weight:400}
.menu-wrap{margin:auto;width:min(92vw,420px);padding:18px 0;text-align:center}
.logo{margin:0 0 6px;font-family:var(--font-h);font-weight:900;letter-spacing:.03em;line-height:1;display:flex;align-items:center;justify-content:center;gap:2px;color:var(--amb);font-size:clamp(2rem,10.5vw,3.2rem)}
.logo .spark{width:.95em;height:.95em;fill:var(--amb);stroke:var(--amb);stroke-width:5;stroke-linecap:round}
.tag{color:var(--muted);margin:0 0 20px}
.menu{display:flex;flex-direction:column;gap:12px}
.menu-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.best{margin:14px 0 0;color:var(--muted);font-size:.95rem}
.bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;position:sticky;top:0;z-index:3;background:var(--bg)}
.bar h2{margin:0;font-family:var(--font-h);font-size:1.35rem;letter-spacing:.04em}
.bar-r{min-width:48px;text-align:right;color:var(--amb);font-weight:700;font-variant-numeric:tabular-nums}
.page{width:min(94vw,560px);margin:0 auto;padding:6px 0 24px}
.page h3{font-family:var(--font-h);margin:18px 0 8px;color:var(--amb)}
.page p,.page li{line-height:1.5}
.set label,.set .row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;border-bottom:1px solid var(--line)}
.set .row{flex-wrap:wrap;padding:6px 0}
.set input[type=checkbox]{width:28px;height:28px;accent-color:var(--amb);flex:none}
#lang-sw select,#lang-sw button{font:inherit;background:var(--panel);color:var(--fg);border:2px solid var(--line);border-radius:10px;padding:8px;min-height:44px}
/* lists */
.card{background:var(--panel);border:2px solid var(--line);border-radius:14px;padding:10px 12px;margin:0 0 10px}
.card.done{border-color:var(--ok)}
.card b{display:block}
.bar-prog{height:8px;border-radius:4px;background:var(--line);margin-top:6px;overflow:hidden}
.bar-prog i{display:block;height:100%;background:var(--amb)}
.card.done .bar-prog i{background:var(--ok)}
.skins{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.skin{background:var(--panel);border:2px solid var(--line);border-radius:14px;padding:10px;text-align:center;cursor:pointer;min-height:48px}
.skin.sel{border-color:var(--amb)}
.skin.lock{opacity:.6;cursor:default}
.skin canvas{width:64px;height:64px;display:block;margin:0 auto 4px}
.skin small{display:block;color:var(--muted);font-size:.78rem;line-height:1.3}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.cal .h{color:var(--muted);font-size:.75rem}
.cal .d{border:1px solid var(--line);border-radius:8px;min-height:40px;padding:2px;font-size:.8rem;color:var(--muted)}
.cal .d.won{border-color:var(--ok);color:var(--ok);font-weight:700}
.cal .d.tried{border-color:var(--cu)}
.cal .d.today{outline:2px solid var(--amb)}
.cal-head{display:flex;justify-content:space-between;align-items:center;margin:8px 0}
.tbl{display:grid;grid-template-columns:1fr auto;gap:4px 12px;text-align:left;font-variant-numeric:tabular-nums}
.tbl b{text-align:right}
svg.spl{width:100%;height:70px;display:block;margin-top:8px}
/* game */
#scr-game{overflow:hidden;align-items:center;justify-content:center}
#stage{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;background:var(--bg);box-shadow:0 0 0 1px var(--line),0 10px 40px rgba(0,0,0,.45);--u:1.5px;overflow:hidden}
#cv{display:block;width:100%;height:100%;touch-action:none}
.hud{position:absolute;left:0;right:0;top:0;height:calc(var(--u)*56);display:flex;align-items:flex-start;justify-content:space-between;padding:calc(var(--u)*6) calc(var(--u)*8);pointer-events:none}
.hud .icon-btn{pointer-events:auto;width:max(44px,calc(var(--u)*34));height:max(44px,calc(var(--u)*34));min-width:0;font-size:calc(var(--u)*12);background:rgba(27,36,64,.7)}
.hud-c{font-family:var(--font-h);font-weight:900;font-size:calc(var(--u)*34);font-variant-numeric:tabular-nums;display:flex;flex-direction:column;align-items:center;line-height:1;text-shadow:0 2px 6px rgba(0,0,0,.6)}
.hud-c .pts{font-size:calc(var(--u)*13);color:var(--cy);font-weight:700;min-height:calc(var(--u)*14);margin-top:2px}
.hud-r{min-width:max(44px,calc(var(--u)*34));text-align:right;font-size:calc(var(--u)*10);color:var(--muted);padding-top:4px}
.stagemsg{position:absolute;left:0;right:0;top:22%;text-align:center;font-family:var(--font-h);font-weight:900;font-size:calc(var(--u)*24);color:var(--amb);pointer-events:none;text-shadow:0 2px 8px rgba(0,0,0,.7)}
.hint{position:absolute;left:8%;right:8%;top:30%;text-align:center;font-weight:700;font-size:calc(var(--u)*14);pointer-events:none;color:var(--fg);text-shadow:0 1px 5px rgba(0,0,0,.8);background:rgba(14,20,38,.55);border-radius:14px;padding:8px 10px}
.count{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-h);font-weight:900;font-size:calc(var(--u)*90);color:var(--amb);pointer-events:none;text-shadow:0 2px 10px rgba(0,0,0,.7)}
.loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(14,20,38,.85);font-weight:700;z-index:15}
.ov{position:absolute;inset:0;background:rgba(7,10,22,.74);display:flex;align-items:center;justify-content:center;z-index:20;padding:12px}
#dlg{position:fixed;z-index:50}
.ov-box{background:var(--panel);color:var(--fg);border:2px solid var(--line);border-radius:18px;padding:18px;width:min(100%,360px);max-height:100%;overflow:auto;display:flex;flex-direction:column;gap:10px;text-align:center}
.ov-box h2{margin:0;font-family:var(--font-h);font-size:1.7rem;color:var(--amb)}
.ov-box h2.bad{color:var(--red)}
.ov-box h2.good{color:var(--ok)}
.ov-box p{margin:0;line-height:1.4}
.ov-box .big-n{font-family:var(--font-h);font-weight:900;font-size:3.2rem;line-height:1;color:var(--fg)}
.row-btns{display:flex;flex-direction:column;gap:8px}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--panel);border:2px solid var(--cy);border-radius:12px;padding:10px 16px;z-index:60;max-width:90vw;text-align:center}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
:root[data-motion=reduce] *{animation:none!important;transition:none!important}
@media (hover:none){.btn:hover{border-color:var(--line)}}
:root[data-contrast=high]{--line:#6A78A8;--muted:#C5CDE3;--panel:#101830}
/* v0.10 Karriere / Welten / Sterne */
.btn.small{min-height:40px;font-size:.95rem;padding:8px 14px;font-weight:600}
.menu-wrap{max-height:100%;overflow:auto}
.wcard{display:block;width:100%;text-align:left;cursor:pointer;color:var(--fg);font:inherit}
.wcard span{display:block;margin-top:2px;font-size:.9rem}
.wcard.lock{opacity:.65}
.stgs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0}
.stg{background:var(--panel);border:2px solid var(--line);border-radius:12px;min-height:64px;padding:6px 2px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--fg);font:inherit}
.stg b{font-family:var(--font-h);font-size:1.15rem}
.stg span{font-size:.72rem;color:var(--muted);line-height:1.1}
.stg.lock{opacity:.45;cursor:default}
.stg.done{border-color:var(--cy)}
.stg.done span{color:var(--cy);font-size:.85rem}
.stg.gold{border-color:var(--amb)}
.stg.gold span{color:var(--amb);font-size:.85rem}
.stg.soft{border-color:var(--ok)}
.stars{font-size:2.2rem;letter-spacing:.2em;color:var(--amb);line-height:1}
.card .btn{margin-top:8px}
.card.wcard b,.card.wcard span{pointer-events:none}