/* Layout: Spielbrett auf Kartenpapier – dicke Konturen, harte Schatten, jede Spielkarte in eigener Farbe */
:root{
  --bg:#f7f7fb; --dot:#e6e6ef; --surface:#ffffff; --surface-2:#f1f1f7; --line:rgba(22,23,44,.09); --sh:rgba(22,23,44,.12);
  --ink:#16172c; --ink-2:#4b4f6c; --ink-3:#7d819e; --edge:#16172c; --on:#16172c;
  --sea:#b9d3ff; --land:#ffffff; --land-mute:#dfe6f5; --land-line:#16172c;
  --c-spur:#ff7a4c; --c-grenz:#38cc84; --c-duell:#6d8cff; --c-ziel:#ffcb2e; --c-nach:#ff7cb6; --c-quiz:#a88bff;
  --good:#2fca72; --near:#ffcb2e; --bad:#ff5c5c;
  --f-display:"Gabarito",ui-rounded,"Arial Rounded MT Bold",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:22px; --bw:2px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#202020; --dot:#2d2d2d; --surface:#2b2b2d; --surface-2:#353537; --line:rgba(255,255,255,.07); --sh:rgba(0,0,0,.42);
  --ink:#f1f2ff; --ink-2:#bcc0de; --ink-3:#8a8fb2; --edge:#05060f;
  --sea:#243042; --land:#5e6576; --land-mute:#2b2e36; --land-line:#05060f; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#202020; --dot:#2d2d2d; --surface:#2b2b2d; --surface-2:#353537; --line:rgba(255,255,255,.07); --sh:rgba(0,0,0,.42);
  --ink:#f1f2ff; --ink-2:#bcc0de; --ink-3:#8a8fb2; --edge:#05060f;
  --sea:#243042; --land:#5e6576; --land-mute:#2b2e36; --land-line:#05060f; color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{background:var(--bg);overscroll-behavior-y:none}
body{color:var(--ink);font:16px/1.5 var(--f-body);-webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--c-duell);outline-offset:2px}
.wrap{max-width:1080px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:14px 64px}
.num{font-variant-numeric:tabular-nums}

/* Knöpfe & Flächen */
.box{background:var(--surface);border:var(--bw) solid var(--line);border-radius:var(--r);box-shadow:0 4px 0 var(--sh)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 20px;border-radius:14px;border:var(--bw) solid var(--line);background:var(--gc,var(--c-duell));color:var(--on);font-weight:800;font-size:1rem;box-shadow:0 4px 0 var(--sh);transition:transform .08s,box-shadow .08s;white-space:nowrap;text-decoration:none}
.btn:hover{transform:translate(-1px,-1px);box-shadow:0 4px 0 var(--sh)}
.btn:active{transform:translate(2px,2px);box-shadow:0 2px 0 var(--sh)}
.btn.plain{background:var(--surface);color:var(--ink)}
.btn.small{min-height:40px;padding:0 14px;font-size:.92rem;border-radius:12px}
.btn:disabled{opacity:.5;cursor:default;transform:none}

/* Kopf */
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding-block:6px 10px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand svg{height:38px;width:auto;aspect-ratio:304/404;flex:none}
.brand b{font-family:var(--f-display);font-weight:900;font-size:1.65rem;letter-spacing:-.03em}
.top-r{display:flex;gap:8px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 13px;border-radius:999px;border:var(--bw) solid var(--line);background:var(--surface);font-weight:800;font-size:.92rem;box-shadow:0 3px 0 var(--sh);color:var(--ink);text-decoration:none}
.pill svg{width:18px;height:18px}
button.pill:active{transform:translate(1px,1px);box-shadow:0 2px 0 var(--sh)}

/* Start */
.hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;padding-block:22px 26px}
.sticker{display:inline-block;background:var(--c-ziel);color:var(--on);border:var(--bw) solid var(--line);border-radius:10px;padding:4px 12px;font-weight:800;font-size:.9rem;transform:rotate(-2deg);box-shadow:0 3px 0 var(--sh)}
.hero h1{font-family:var(--f-display);font-weight:900;font-size:clamp(2.3rem,6.4vw,4.3rem);line-height:.95;letter-spacing:-.04em;margin:16px 0 12px;text-wrap:balance}
.hero h1 em{font-style:normal;background:var(--c-nach);color:var(--on);padding:0 .14em;border-radius:.18em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hero p{margin:0;color:var(--ink-2);font-size:1.08rem;max-width:44ch}
@media (max-width:640px){.hero>div>p{display:none}.today b:first-of-type+.sep{display:none}.today{margin-top:14px}}
.today{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px}
.dots6{display:flex;gap:6px}
.dots6 i{width:18px;height:18px;border-radius:50%;border:var(--bw) solid var(--line);background:var(--surface)}
.today b{font-family:var(--f-display);font-size:1.05rem}
.today .sep{color:var(--ink-3)}
.globe{width:clamp(170px,26vw,260px);aspect-ratio:1;max-width:100%;position:relative}
.globe canvas{width:100%;height:100%;display:block;border-radius:50%;box-shadow:0 8px 0 color-mix(in srgb,var(--sea) 62%,var(--ink) 14%)}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.tile{display:flex;flex-direction:column;border:var(--bw) solid var(--line);border-radius:var(--r);background:var(--gc);color:var(--on);text-decoration:none;box-shadow:0 5px 0 var(--sh);overflow:hidden;transition:transform .12s,box-shadow .12s;position:relative}
.tile:hover{transform:translate(-2px,-3px) rotate(-.4deg);box-shadow:0 6px 0 var(--sh)}
.tile:active{transform:translate(2px,2px);box-shadow:0 3px 0 var(--sh)}
.tile .art{height:150px;border-bottom:var(--bw) solid var(--line);display:block;width:100%;overflow:hidden;background:rgba(255,255,255,.3);background:color-mix(in srgb,var(--gc) 70%,#fff)}
.tile .art svg{display:block;width:100%;height:100%}
.tile .txt{padding:14px 16px 16px;display:grid;gap:4px;flex:1;align-content:start}
.tile h2{margin:0;font-family:var(--f-display);font-weight:900;font-size:1.55rem;letter-spacing:-.03em;line-height:1}
.tile p{margin:0;font-weight:500;font-size:.93rem;line-height:1.35;opacity:.85}
.tile .st{position:absolute;top:10px;right:10px;background:var(--surface);color:var(--ink);border:var(--bw) solid var(--line);border-radius:999px;padding:2px 10px;font-weight:800;font-size:.82rem}
.tile .st.done{background:var(--good);color:var(--on)}
.tile .new{position:absolute;top:10px;left:10px;background:var(--ink);color:var(--bg);border-radius:8px;padding:1px 8px;font-weight:800;font-size:.72rem;letter-spacing:.04em;transform:rotate(-4deg)}
.section-h{font-family:var(--f-display);font-weight:900;font-size:1.9rem;letter-spacing:-.03em;margin:44px 0 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* Rangliste */
.lb{padding:18px;display:grid;gap:14px}
.tabs{display:inline-flex;border:var(--bw) solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.tabs button{border:0;background:none;padding:8px 16px;font-weight:800;min-height:42px}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--bg)}
.lb-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center}
.lb ol{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.lb li{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;background:var(--surface-2);font-weight:700}
.lb li .rk{font-family:var(--f-display);font-weight:900;font-size:1.2rem;text-align:center}
.lb li .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb li .pt{font-variant-numeric:tabular-nums}
.lb-head .tabs:last-child{margin-left:auto}
.lb li .x{border:0;background:none;color:var(--ink-3);font-weight:900;width:32px;height:32px;border-radius:8px}
.lb li{grid-template-columns:40px minmax(0,1fr) auto auto}
.friends{display:grid;gap:10px;border-top:2px dashed var(--line,rgba(22,23,44,.18));padding-top:14px}
.mycode{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mycode span{font-weight:700;color:var(--ink-2)}
.mycode b{font-family:var(--f-display);font-weight:900;font-size:1.5rem;letter-spacing:.12em;background:var(--c-ziel);color:var(--on);border:var(--bw) solid var(--line);border-radius:10px;padding:0 10px}
.lb-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lb-foot .note{margin-right:auto!important}
.signin{display:grid;gap:12px;justify-items:start}
.signin p{margin:0;color:var(--ink-2);font-weight:600}
.gbtn{gap:10px}
.lb li.gap{background:none;display:block;text-align:center;padding:0;color:var(--ink-3)}
.lb li.me{background:var(--c-ziel);color:var(--on);border:var(--bw) solid var(--line)}
.lb li:nth-child(1) .rk{color:#e3a600}.lb li:nth-child(2) .rk{color:#8f98ad}.lb li:nth-child(3) .rk{color:#c27a3c}
.lb li.me .rk{color:var(--on)}
.lb .note{color:var(--ink-2);margin:0;font-size:.95rem}
.nick{display:flex;gap:8px;flex-wrap:wrap}
#mNickForm{margin:10px 0 4px}#mNickForm input{flex:1;min-width:0}
.nick input{flex:1;min-width:0;height:48px;border-radius:12px;border:var(--bw) solid var(--line);background:var(--surface);padding:0 14px;font-size:1rem;font-weight:600}

/* Spielseite */
.game{--gc:var(--c-duell);max-width:700px;margin:0 auto}
.band{background:var(--gc);color:var(--on);border:var(--bw) solid var(--line);border-radius:var(--r);box-shadow:0 4px 0 var(--sh);padding:12px 14px 16px;margin:10px 0 18px;position:relative;overflow:hidden}
.band-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.back{border:var(--bw) solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;min-height:40px;padding:0 14px;font-weight:800;display:inline-flex;align-items:center;gap:6px}
.qbtn{width:40px;height:40px;border-radius:50%;border:var(--bw) solid var(--line);background:var(--surface);color:var(--ink);font-weight:900;font-size:1.1rem}
.band h1{margin:12px 0 0;font-family:var(--f-display);font-weight:900;font-size:clamp(2.2rem,7vw,3rem);letter-spacing:-.04em;line-height:1}
.band .sub{font-weight:700;opacity:.8;margin-top:2px}
.band .deco{position:absolute;right:-10px;bottom:-24px;width:150px;opacity:.35;pointer-events:none}
.band .deco path{fill:var(--on)}

/* Eingabe */
.combo{position:relative}
.combo-row{display:flex;gap:8px}
.combo input{flex:1;min-width:0;height:54px;border-radius:14px;border:var(--bw) solid var(--line);background:var(--surface);padding:0 16px;font-size:1.05rem;font-weight:600;box-shadow:0 4px 0 var(--sh)}
.combo input:focus{outline:none;box-shadow:3px 3px 0 var(--gc)}
.combo .btn{min-height:54px}
.list{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:30;margin:0;padding:6px;list-style:none;background:var(--surface);border:var(--bw) solid var(--line);border-radius:14px;box-shadow:0 4px 0 var(--sh);max-height:290px;overflow:auto}
.list{border-width:2px;box-shadow:0 8px 24px rgba(0,0,0,.18),3px 3px 0 var(--edge)}
@media (max-width:640px){.combo .list{padding:4px}.combo .list li{padding:8px 10px}}
.list.strip{display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;max-height:none!important;padding:5px;scrollbar-width:none;overscroll-behavior-x:contain}
.list.strip::-webkit-scrollbar{display:none}
.list.strip li{flex:none;padding:7px 13px!important;border:1.5px solid var(--line);border-radius:999px;white-space:nowrap}
.list.strip li small{display:none}
.list.up{top:auto;bottom:calc(100% + 8px);box-shadow:4px -2px 0 var(--edge)}
.list li{padding:10px 12px;border-radius:9px;cursor:pointer;display:flex;justify-content:space-between;gap:10px;font-weight:700}
.list li small{color:var(--ink-3);font-weight:600}
.list li[aria-selected="true"],.list li:hover{background:var(--surface-2);background:color-mix(in srgb,var(--gc) 35%,var(--surface))}
.shake{animation:shake .35s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* Spurensuche */
.hints{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:16px}
.hint{min-height:96px;border:var(--bw) dashed var(--ink-3);border-radius:14px;display:grid;place-items:center;text-align:center;padding:8px;color:var(--ink-3);font-weight:700;font-size:.85rem;background:transparent}
.hint.open{border-style:solid;border-color:var(--line);background:var(--surface);color:var(--ink);box-shadow:0 4px 0 var(--sh)}
.hint .hl{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:800}
.hint .hv{font-family:var(--f-display);font-weight:900;font-size:2rem;line-height:1}
.hint svg.shape{width:100%;max-width:120px;height:62px}
.hint svg.shape path{fill:var(--ink)}
.hint img{width:64px;height:48px;border-radius:4px;border:1.5px solid var(--line)}
.tries{display:flex;justify-content:space-between;align-items:center;margin:14px 2px 10px;font-weight:700;color:var(--ink-2)}
.guesses{display:grid;gap:12px}
.gcard{padding:12px}
.gname{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:800;font-size:1.25rem;margin:0 2px 10px}
.gname img{border-radius:3px;border:1.5px solid var(--line)}
.gtiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.gt{border:var(--bw) solid var(--line);border-radius:12px;padding:8px 6px 9px;text-align:center;display:grid;gap:1px;align-content:center;min-height:74px;color:var(--on)}
.gt .l{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;opacity:.75}
.gt .v{font-weight:800;font-size:1.05rem;line-height:1.15;word-break:break-word}
.gt .a{font-size:1.05rem;font-weight:900;line-height:1}
.gt .a svg{width:20px;height:20px;vertical-align:middle;fill:var(--on)}
.gt.good{background:var(--good)}.gt.near{background:var(--near)}.gt.bad{background:var(--bad)}
.gcard.anim .gt{animation:pop .4s cubic-bezier(.3,1.6,.5,1) both}
.gcard.anim .gt:nth-child(2){animation-delay:.07s}.gcard.anim .gt:nth-child(3){animation-delay:.14s}.gcard.anim .gt:nth-child(4){animation-delay:.21s}.gcard.anim .gt:nth-child(5){animation-delay:.28s}.gcard.anim .gt:nth-child(6){animation-delay:.35s}
@keyframes pop{from{transform:scale(.4) rotate(-8deg);opacity:0}to{transform:none;opacity:1}}
.gcard.win{background:var(--good)}
.gcard.win .gname{color:var(--on)}

/* Karten */
.map{display:block;width:100%;height:auto}
.map .sea{fill:var(--sea)}
.map .grat{fill:none;stroke:var(--land-line);stroke-opacity:.12;stroke-width:.6}
.map .bg{fill:var(--land-mute);stroke:none}
.map .ld{fill:var(--land);stroke:var(--land-line);stroke-width:.7;stroke-linejoin:round}
.map .ld.mute{fill:var(--land-mute);stroke-opacity:.35}
.map .ld.tgt{fill:var(--gc)}
.map .ld.good{fill:var(--good)}.map .ld.near{fill:var(--near)}.map .ld.bad{fill:var(--bad)}
.map .ld.path{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-dasharray:4 3}
.map .ld.open{fill:var(--land);stroke-width:2}
.map .ld.guess{fill:var(--ink-3)}
.map .hit{fill:rgba(255,255,255,.02);stroke:var(--edge);stroke-width:calc(1.5px / var(--k,1));stroke-dasharray:3 2;opacity:.6;cursor:pointer;r:calc(11px / var(--k,1))}
@media (hover:hover){.map .hit:hover{opacity:1;stroke-dasharray:none;fill:rgba(255,255,255,.35)}}
.map .hit.good{fill:var(--good);opacity:.9;stroke-dasharray:none}.map .hit.bad{fill:var(--bad);opacity:.9;stroke-dasharray:none}
.map .ld.miss,.map .hit.miss{fill:#ffb8b8}
.map .ld.reveal,.map .hit.reveal{fill:var(--c-ziel);animation:rvl .45s ease-in-out 4 alternate}
@keyframes rvl{to{opacity:.45}}
.map .lbl.fl{stroke:#fff;fill:#16172c;font-size:calc(15px / var(--k,1))}.map .lbl.fl.miss{stroke:#ffd6d6}
.map .lbl{font:800 13px var(--f-body);fill:var(--on);paint-order:stroke;stroke:var(--good);stroke-width:3px;text-anchor:middle;pointer-events:none}
.mapbox{overflow:hidden;padding:0}
.mapbox svg{border-radius:calc(var(--r) - 3px)}

/* Grenzgänger */
.route{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:14px}
.endp{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:12px;background:var(--gc);color:var(--on);border:var(--bw) solid var(--line);font-weight:800;box-shadow:0 3px 0 var(--sh)}
.endp img{width:24px;height:18px;border-radius:2px;border:1.5px solid var(--line)}
.route .ar{font-weight:900;font-size:1.3rem}
.route-sub{text-align:center;font-weight:700;color:var(--ink-2);padding:0 14px 12px;margin:0}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-weight:800;font-size:.92rem;border:var(--bw) solid var(--line);color:var(--on)}
.chip.good{background:var(--good)}.chip.near{background:var(--near)}.chip.bad{background:var(--bad)}.chip.plain{background:var(--surface);color:var(--ink)}
.chip img{width:20px;height:15px;border-radius:2px}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:.84rem;font-weight:700;color:var(--ink-2)}
.legend i{width:12px;height:12px;border-radius:4px;display:inline-block;border:1.5px solid var(--line);vertical-align:-1px;margin-right:4px}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0}

/* Duell & Quiz */
.prog{display:flex;gap:5px;flex:1}
.prog i{flex:1;height:12px;border-radius:6px;border:1.5px solid var(--line);background:var(--surface);max-width:40px}
.prog i.good{background:var(--good)}.prog i.bad{background:var(--bad)}.prog i.cur{background:var(--gc)}
.q{font-family:var(--f-display);font-weight:900;font-size:clamp(1.55rem,5vw,2.1rem);letter-spacing:-.03em;text-align:center;margin:18px 0 16px;text-wrap:balance;line-height:1.1}
.duel{display:grid;grid-template-columns:1fr 1fr;gap:14px;position:relative}
.vs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-8deg);width:52px;height:52px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-family:var(--f-display);font-weight:900;font-size:1.2rem;z-index:2;border:3px solid var(--bg);pointer-events:none}
.opt{display:grid;gap:8px;justify-items:center;align-content:start;padding:16px 12px 14px;border-radius:var(--r);background:var(--surface);border:var(--bw) solid var(--line);box-shadow:0 4px 0 var(--sh);text-align:center;transition:transform .1s,box-shadow .1s}
.opt:not(:disabled):hover{transform:translate(-2px,-2px);box-shadow:0 5px 0 var(--sh)}
.opt:not(:disabled):active{transform:translate(2px,2px);box-shadow:0 2px 0 var(--sh)}
.opt:disabled{cursor:default;color:var(--ink)}
.opt img{border-radius:4px;border:1.5px solid var(--line)}
.opt .nm{font-family:var(--f-display);font-weight:800;font-size:1.2rem;line-height:1.1}
.opt svg.shape{width:100%;max-width:200px;height:auto}
.opt svg.shape path{fill:var(--ink)}
.opt .val{font-weight:800;min-height:1.4em;font-variant-numeric:tabular-nums}
.opt.good{background:var(--good);color:var(--on)}.opt.bad{background:var(--bad);color:var(--on)}
.opt.good svg.shape path,.opt.bad svg.shape path{fill:var(--on)}
.note{text-align:center;font-weight:700;color:var(--ink-2);min-height:1.4em;margin:10px 0 0}
.center{display:flex;justify-content:center;margin-top:14px}
.prompt{display:grid;place-items:center;padding:22px;min-height:210px}
.prompt img.big{width:min(290px,100%);height:auto;aspect-ratio:4/3;border-radius:8px;border:var(--bw) solid var(--line);box-shadow:0 4px 0 var(--sh)}
.prompt .bt{font-family:var(--f-display);font-weight:900;font-size:clamp(2rem,7vw,2.8rem);letter-spacing:-.03em;text-align:center;line-height:1.05}
.prompt svg.shape{width:100%;max-width:300px}
.prompt svg.shape path{fill:var(--ink)}
.answers{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.ans{min-height:60px;padding:10px 14px;border-radius:14px;border:var(--bw) solid var(--line);background:var(--surface);font-weight:800;font-size:1.02rem;text-align:left;box-shadow:0 4px 0 var(--sh);transition:transform .08s,box-shadow .08s}
.ans:not(:disabled):hover{background:var(--surface-2);box-shadow:0 4px 0 var(--sh)}
.ans:not(:disabled):active{transform:translate(2px,2px);box-shadow:0 2px 0 var(--sh)}
.ans:disabled{cursor:default;color:var(--ink)}
.ans.good{background:var(--good);color:var(--on)}.ans.bad{background:var(--bad);color:var(--on)}
.clock{font-family:var(--f-display);font-weight:900;font-size:1.15rem;min-width:62px;text-align:right;font-variant-numeric:tabular-nums}

/* Zielwurf */
.ziel-q{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;margin-bottom:12px}
.ziel-q .tl{font-weight:700;color:var(--ink-2);font-size:.9rem}
.ziel-q .cn{font-family:var(--f-display);font-weight:900;font-size:clamp(1.5rem,5vw,2rem);letter-spacing:-.03em;line-height:1.05;display:flex;align-items:center;gap:10px}
.ziel-q .cn img{border-radius:3px;border:1.5px solid var(--line)}
.ziel-map{cursor:crosshair;touch-action:manipulation}
.ziel-map .pin{fill:var(--surface);stroke:var(--edge);stroke-width:2.5}
.ziel-map .pin-c{fill:var(--edge)}
.ziel-map .line{fill:none;stroke:var(--edge);stroke-width:2.2;stroke-dasharray:5 4}
.ziel-res{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px}
.bigpts{font-family:var(--f-display);font-weight:900;font-size:1.8rem;letter-spacing:-.03em}

.swipe{display:none}
@media (max-width:640px){.zscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}.zscroll svg{width:860px;max-width:none}.swipe{display:block;margin:8px 0 0}}
/* Grenz-Umschalter */
.seg{display:flex;border:var(--bw) solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:14px;background:var(--surface);box-shadow:0 4px 0 var(--sh)}
.seg a{flex:1;text-align:center;padding:10px;font-weight:800;color:var(--ink);text-decoration:none}
.seg a[aria-selected="true"]{background:var(--gc);color:var(--on)}
.seg a+a{border-left:var(--bw) solid var(--line)}
.map .ld.nob{stroke:none}
/* Flaggenmaler */
.canvas{padding:14px;display:grid;place-items:center;margin-bottom:14px}
.canvas svg{width:100%;max-width:520px;height:auto;display:block;border-radius:6px;box-shadow:0 0 0 var(--bw) var(--edge);touch-action:manipulation}
.palette{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;margin-bottom:14px}
.sw{border:0;background:none;padding:0;display:grid;justify-items:center;gap:4px;font-weight:700;font-size:.75rem;color:var(--ink-2)}
.sw i{width:100%;max-width:56px;aspect-ratio:1;border-radius:50%;background:var(--sw);border:var(--bw) solid var(--line);box-shadow:0 3px 0 var(--sh);transition:transform .1s}
.sw[aria-pressed="true"] i{transform:scale(1.12) translateY(-3px);box-shadow:0 0 0 4px var(--surface),0 0 0 7px var(--edge)}
.sw[aria-pressed="true"] span{color:var(--ink);font-weight:900}
.paint-actions{display:flex;gap:10px;justify-content:space-between}
.paint-actions .btn{flex:1}
.compare{display:grid;gap:14px;margin-top:4px}
.compare div{display:grid;gap:6px;justify-items:center;font-weight:800;color:var(--ink-2)}
.compare svg,.compare img{width:100%;max-width:220px;height:auto;border-radius:6px;box-shadow:0 0 0 var(--bw) var(--edge)}
@media (max-width:640px){.palette{grid-template-columns:repeat(4,minmax(0,1fr))}.sw i{max-width:48px}}
/* Flaggenmaler (Regler) */
.game.fmal{max-width:540px}
.fgame .ziel-q{padding:8px 14px;margin-bottom:10px;box-shadow:0 3px 0 var(--sh)!important;border-width:2px}
.fgame .ziel-q .cn{font-size:1.45rem}
.fgame .mixdot{width:36px;height:36px;border-width:2px;box-shadow:none}
.fgame .canvas{padding:8px;margin:0 auto 12px;border-width:2px;box-shadow:0 3px 0 var(--sh)!important}
.fgame .canvas svg{box-shadow:0 0 0 1.5px var(--edge);border-radius:4px;width:min(440px,calc(100vw - 56px),max(190px,calc((100svh - 500px)*4/3)))}
.fgame .sliders{gap:9px;margin-bottom:12px}
.fgame .sl{grid-template-columns:86px 1fr;gap:10px;font-size:.88rem}
.fgame .sl input{height:36px;border-width:2px;box-shadow:0 3px 0 var(--sh)}
.fgame .sl input::-webkit-slider-thumb{width:28px;height:42px;border-radius:9px;border-width:2px;box-shadow:0 2px 0 var(--sh)}
.fgame .sl input::-moz-range-thumb{width:26px;height:40px;border-radius:9px;border-width:2px;box-shadow:0 2px 0 var(--sh)}
.fgame .center{justify-content:stretch}.fgame .center .btn{flex:1}.fgame .center .btn,.fgame .fctl .btn{min-height:46px}
.mixdot{width:46px;height:46px;border-radius:50%;border:var(--bw) solid var(--line);background:repeating-linear-gradient(45deg,#f3f4f8 0 5px,#dfe2ec 5px 9px);flex:none;box-shadow:0 3px 0 var(--sh)}
.paint [data-g]{cursor:default}
.paint [data-g].target{stroke:none}
.sliders{display:grid;gap:14px;margin-bottom:14px}
.sl{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:10px;font-weight:800}
.sl input{-webkit-appearance:none;appearance:none;width:100%;height:46px;border-radius:999px;border:var(--bw) solid var(--line);margin:0;box-shadow:0 4px 0 var(--sh);touch-action:pan-y}
#hue{background:linear-gradient(to right,#ff1f1f,#ff9b1a,#ffe51a,#3ad15c,#1ad3e5,#1f6bff,#9b2bff,#ff1fa5,#ff1f1f)}
.sl input::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:52px;border-radius:12px;background:var(--surface);border:var(--bw) solid var(--line);box-shadow:0 3px 0 var(--sh);cursor:grab}
.sl input::-moz-range-thumb{width:40px;height:48px;border-radius:12px;background:var(--surface);border:var(--bw) solid var(--line);box-shadow:0 3px 0 var(--sh);cursor:grab}
.sl input:disabled{opacity:.6}
.sl input::-webkit-slider-runnable-track{background:transparent;border:0}
.sl input::-moz-range-track{background:transparent;border:0}
.mixres{display:flex;align-items:center;gap:16px;padding:12px 14px;flex-wrap:nowrap;margin-top:0;margin-bottom:10px}
.mixres>div:not(.pair){flex:1;min-width:0}
.mixres .pair{display:flex}
.hc{display:block;width:44px;height:44px;border:var(--bw) solid var(--line)}
.hc.big{width:64px;height:64px}
.pair .hc:first-child{border-radius:14px 0 0 14px;border-right:0}.pair .hc:last-child{border-radius:0 14px 14px 0}
.mixres .realflag{margin-left:auto;border-radius:6px;border:var(--bw) solid var(--line)}
.hits{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:10px;text-align:center}
.hit{display:grid;justify-items:center;gap:0}
.hit .hn{font-weight:800;color:var(--ink-3);font-size:.85rem;margin-bottom:4px}
.hit .hc{width:100%;max-width:64px;height:40px}
.hit .hc:nth-of-type(2){border-radius:12px 12px 0 0;border-bottom-width:1px}.hit .hc:nth-of-type(3){border-radius:0 0 12px 12px;border-top-width:1px}
.hit b{font-family:var(--f-display);font-size:1.15rem;margin-top:4px}
.hit small{font-size:.7rem;color:var(--ink-3);font-weight:700;line-height:1.1;overflow:hidden;text-overflow:ellipsis;max-width:100%;white-space:nowrap}
/* Auswertung */
.rank2{display:grid;grid-template-columns:1fr 1fr;text-align:center;background:var(--surface-2);border-radius:16px;padding:14px 8px}
.rank2>div{display:grid;gap:0}.rank2>div+div{border-left:2px solid var(--line,rgba(22,23,44,.12))}
.rank2 span{font-weight:800;color:var(--ink-2);font-size:.9rem}
.rank2 b{font-family:var(--f-display);font-weight:900;font-size:clamp(2rem,7vw,2.8rem);line-height:1.05;letter-spacing:-.03em}
.rank2 small{color:var(--ink-2);font-weight:600}
.dist{display:grid;gap:8px;margin-top:14px}
.hist{display:flex;gap:4px;height:170px;align-items:stretch;border-bottom:var(--bw) solid var(--line);padding-top:4px}
.col{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;border:0;background:none;padding:0;cursor:pointer;position:relative}
.col .ct{height:20px;font-weight:900;font-size:.82rem;color:var(--ink)}
.col .bw{flex:1;width:100%;display:flex;align-items:flex-end}
.col .bar{width:100%;background:var(--gc);border:1.5px solid var(--line);border-bottom:0;border-radius:6px 6px 0 0;display:block}
.col.me .bar{background:var(--ink)}
.col.sel .bar{outline:3px solid var(--gc);outline-offset:2px}
.col .cl{position:absolute;top:100%;margin-top:5px;font-size:.74rem;font-weight:800;color:var(--ink-2);white-space:nowrap}
.col.me .cl{color:var(--ink)}
.xcap{margin-top:22px;text-align:center;font-size:.8rem;font-weight:700;color:var(--ink-3)}
.readout{margin:0;color:var(--ink-2);font-weight:600;font-size:.95rem}
.mystats summary{cursor:pointer;font-weight:800;color:var(--ink-2);padding:4px 0}
.mystats[open] summary{margin-bottom:8px}
@media (max-width:640px){.hits small{display:none}.hist{height:140px;gap:3px}.col .cl{font-size:.66rem}}
/* Fußzeile & Rechtliches */
.foot{display:flex;gap:18px;justify-content:center;margin-top:56px;font-weight:700;padding-top:14px;border-top:2px solid var(--dot)}
.wrap{min-height:100svh;display:flex;flex-direction:column}.wrap>main{flex:1}
.foot a{color:var(--ink-2)}
.foot{flex-wrap:wrap;align-items:center;row-gap:8px}
.foot.big{display:block;margin-top:110px;padding-top:0;border-top:0}
.foot.big::before{content:"";display:block;width:72px;height:5px;border-radius:5px;background:color-mix(in srgb,var(--ink) 16%,transparent);margin:0 auto 44px}
@media (max-width:640px){.foot.big{margin-top:72px}.foot.big::before{margin-bottom:24px}}
.fabout{text-align:center;max-width:720px;margin:0 auto;padding:0 4px 40px}
.fabout h2{font-family:var(--f-display);font-weight:900;font-size:clamp(1.7rem,4.6vw,2.4rem);letter-spacing:-.03em;line-height:1.05;margin:0 0 14px;text-wrap:balance}
.fabout p{margin:0 auto 10px;color:var(--ink-2);font-weight:500;line-height:1.6;max-width:62ch}
.ftcols{display:grid;grid-template-columns:1fr 1fr 1fr 1.2fr;gap:28px;padding:28px 22px 22px;border:var(--bw) solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:0 4px 0 var(--sh)}
.ftcol{display:grid;gap:9px;align-content:start;justify-items:start}
.ftcol h3{font-family:var(--f-display);font-weight:900;font-size:1.15rem;margin:0 0 4px}
.ftcol a{color:var(--ink-2);text-decoration:none;font-weight:700}
.ftcol a:hover{color:var(--ink);text-decoration:underline}
.fgl{display:inline-flex;align-items:center;gap:9px}
.fgi{width:26px;height:26px;border-radius:8px;border:1.5px solid var(--line);display:grid;place-items:center;flex:none}.fgi svg{width:18px;height:18px}
.fregs{display:grid;grid-template-columns:1fr 1fr;gap:9px 18px}
.fcopy{text-align:center;color:var(--ink-3);font-weight:700;font-size:.85rem;margin:18px 0 0}
@media (max-width:900px){.ftcols{grid-template-columns:1fr 1fr;gap:24px}}
@media (max-width:420px){.ftcols{grid-template-columns:1fr;padding:22px 18px}}
@media (max-width:640px){.foot.big .fabout{display:none}
  .foot.big .ftcols{display:block;padding:12px 14px;border-width:2px;box-shadow:0 3px 0 var(--sh);border-radius:16px}
  .foot.big .ftcol:not(:first-child){display:none}
  .foot.big .ftcol:first-child{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;justify-content:center;font-size:.88rem}
  .foot.big .ftcol:first-child h3{display:none}
  .foot.big .langbtn{padding:3px 12px;font-size:.85rem;border-width:2px}
  .foot.big .fcopy{font-size:.74rem;margin-top:10px}}
.langbtn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-weight:700;color:var(--ink-2);background:var(--surface);border:1.5px solid var(--line);border-radius:999px;padding:4px 12px;cursor:pointer}
.langbtn:hover{color:var(--ink)}
.langlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.langlist .btn{justify-content:center}
.langlist .btn.on{background:var(--c-ziel);color:#16172c}
.langsel select{font:inherit;font-weight:700;color:var(--ink);background:var(--surface-2);border:1.5px solid var(--line);border-radius:12px;padding:6px 10px;max-width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.legalnote{text-align:left;margin-top:0}
.legal .band{background:var(--surface)}
.legal-body{padding:6px 20px 20px;line-height:1.6}
.legal-body h2{font-family:var(--f-display);font-size:1.15rem;margin:20px 0 4px}
.legal-body p{margin:0 0 8px;color:var(--ink-2);max-width:70ch}
/* Üben */
.train{padding:16px;display:grid;gap:14px}
.regions{display:flex;flex-wrap:wrap;gap:8px}
.regions button{border:var(--bw) solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:7px 14px;font-weight:800;min-height:40px}
.regions button[aria-checked="true"]{background:var(--ink);color:var(--bg)}
.modes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.mode{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:14px;background:var(--surface-2);color:var(--ink);text-decoration:none;border:2px solid transparent}
.mode:hover{border-color:var(--line)}
.mode .mi{width:44px;height:44px;flex:none;border-radius:12px;background:var(--c-duell);color:var(--on);display:grid;place-items:center;border:var(--bw) solid var(--line)}
.mode .mi svg{width:26px;height:26px}
.mode b{display:block;font-family:var(--f-display);font-size:1.1rem}
.mode small{display:block;color:var(--ink-2);font-weight:600;font-size:.82rem;line-height:1.3}
.mode small.best{color:var(--ink-3);margin-top:4px}
.zscroll.fit svg{width:100%!important;max-width:100%!important}
.map .ld[data-id]{cursor:pointer}
.map .ld[data-id]:not(.mute):hover{fill:var(--c-ziel)}
.plainin{flex:1;min-width:0;height:54px;border-radius:14px;border:var(--bw) solid var(--line);background:var(--surface);padding:0 16px;font-size:1.05rem;font-weight:600;box-shadow:0 4px 0 var(--sh)}
.hearts{color:var(--bad);font-size:1.4rem;letter-spacing:2px}.hearts i{font-style:normal;color:var(--ink-3);opacity:.4}
.set{display:grid;gap:14px;margin:6px 0 10px}
.setrow{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
@media (max-width:900px){.modes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.modes{grid-template-columns:1fr}}
/* Live-Duell */
.livebanner{display:flex;align-items:center;gap:16px;margin-top:18px;padding:16px 18px;border:var(--bw) solid var(--line);border-radius:var(--r);background:var(--c-spur);color:var(--on);text-decoration:none;box-shadow:0 5px 0 var(--sh);transition:transform .12s,box-shadow .12s}
.livebanner:hover{transform:translate(-2px,-2px);box-shadow:0 6px 0 var(--sh)}
.livebanner b{display:block;font-family:var(--f-display);font-weight:900;font-size:1.5rem;letter-spacing:-.02em}
.livebanner small{display:block;font-weight:600;opacity:.85}
.lvb-ic{width:56px;height:56px;flex:none;border-radius:14px;background:rgba(255,255,255,.35);display:grid;place-items:center;border:var(--bw) solid var(--line)}
.lvb-ic svg{width:40px;height:40px}
.go-arr{margin-left:auto;font-weight:900;font-size:1.6rem}
.lv-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lv-h{font-family:var(--f-display);font-weight:900;margin:0;font-size:1.4rem}
.lvcode{font-family:var(--f-display);font-weight:900;font-size:3rem;letter-spacing:.14em;background:var(--c-ziel);color:var(--on);border:var(--bw) solid var(--line);border-radius:14px;padding:0 16px;box-shadow:0 4px 0 var(--sh)}
.lvcount{font-family:var(--f-display);font-weight:900;font-size:5rem;line-height:1}
.tl{font-weight:700;color:var(--ink-2);font-size:.9rem}
.board{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:6px;width:100%}
.board li{text-align:left;display:grid;grid-template-columns:28px minmax(0,1fr) 30% 34px;gap:10px;align-items:center;padding:7px 12px;border-radius:12px;background:var(--surface-2);font-weight:700}
.board li.me{background:var(--c-ziel);color:var(--on);border:var(--bw) solid var(--line)}
.board .rk{font-family:var(--f-display);font-weight:900;text-align:center}
.board .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board .bar{height:10px;border-radius:5px;background:var(--surface);border:1.5px solid var(--line);overflow:hidden}
.board .bar i{display:block;height:100%;background:var(--good)}
.board b{text-align:right}
@media (max-width:640px){.lv-grid{grid-template-columns:1fr}.livebanner b{font-size:1.25rem}.lvb-ic{width:46px;height:46px}.pill{padding:0 10px}.top{flex-wrap:nowrap}.brand b{font-size:1.3rem}}
.savehint{display:block;padding:10px 14px;border-radius:12px;border:2px dashed var(--ink-3);color:var(--ink-2);text-decoration:none;font-weight:600}
.savehint b{color:var(--ink)}
/* Farbschemata (Geheimnisse) */
:root[data-skin="polar"]{--bg:#e2faf2;--dot:#bdebdc;--sea:#a6e3d8;--surface-2:#eefcf7}
:root[data-skin="sand"]{--bg:#fff1dc;--dot:#f0d9b2;--sea:#bcdcff;--surface-2:#fff8ec}
:root[data-skin="night"]{--bg:#eee8ff;--dot:#d9cffa;--sea:#c7c2ff;--surface-2:#f6f2ff}
@media (prefers-color-scheme: dark){
  :root[data-skin="polar"]:not([data-theme="light"]){--bg:#071c1a;--dot:#10302c;--sea:#123f3b;--surface:#0f2a27;--surface-2:#163934;--land:#3e6d66;--land-mute:#1d3f3a}
  :root[data-skin="sand"]:not([data-theme="light"]){--bg:#1d1408;--dot:#33240f;--sea:#22314f;--surface:#2a1e0f;--surface-2:#382914;--land:#7a5f3a;--land-mute:#3f2f18}
  :root[data-skin="night"]:not([data-theme="light"]){--bg:#120a2a;--dot:#21164a;--sea:#251c5e;--surface:#1c1340;--surface-2:#271c55;--land:#5747a3;--land-mute:#2c2160}}
:root[data-theme="dark"][data-skin="polar"]{--bg:#071c1a;--dot:#10302c;--sea:#123f3b;--surface:#0f2a27;--surface-2:#163934;--land:#3e6d66;--land-mute:#1d3f3a}
:root[data-theme="dark"][data-skin="sand"]{--bg:#1d1408;--dot:#33240f;--sea:#22314f;--surface:#2a1e0f;--surface-2:#382914;--land:#7a5f3a;--land-mute:#3f2f18}
:root[data-theme="dark"][data-skin="night"]{--bg:#120a2a;--dot:#21164a;--sea:#251c5e;--surface:#1c1340;--surface-2:#271c55;--land:#5747a3;--land-mute:#2c2160}

/* Flamme & Serie */
.flame{display:block;overflow:visible}
.flame .fo{fill:var(--c-spur);stroke:var(--edge);stroke-width:3.5;stroke-linejoin:round}
.flame .fi{fill:var(--c-ziel);stroke:var(--edge);stroke-width:2.5;stroke-linejoin:round}
.flame.off .fo{fill:var(--land-mute)}.flame.off .fi{fill:var(--surface)}
.flame:not(.off){transform-origin:50% 90%;animation:flick 1.6s ease-in-out infinite}
@keyframes flick{0%,100%{transform:scale(1) rotate(0)}30%{transform:scale(1.04,.96) rotate(-2deg)}60%{transform:scale(.97,1.05) rotate(1.5deg)}}
.flame.tiny{width:18px;height:22px}
.flame.big{width:96px;height:120px}
.flame.pop{animation:popin .7s cubic-bezier(.3,1.7,.5,1) both,flick 1.6s ease-in-out .7s infinite}
@keyframes popin{from{transform:scale(.2) rotate(-20deg);opacity:0}to{transform:none;opacity:1}}
.streakpill b{font-family:var(--f-display);font-size:1rem}
.streakpill.lit{background:var(--c-ziel);color:var(--on)}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:12px 0}
.wd{display:grid;justify-items:center;gap:3px;font-weight:700;color:var(--ink-3);font-size:.72rem}
.wd i{width:32px;height:32px;border-radius:50%;border:var(--bw) solid var(--line);background:var(--surface);display:grid;place-items:center;font-style:normal;font-weight:900;color:var(--on);font-size:.95rem}
.wd.on i{background:var(--c-spur)}
.wd.ice i{background:#bfe3ff}
.wd.now i{box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--c-ziel)}
.wd.now small{color:var(--ink);font-weight:900}
.nextm{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--surface-2);font-weight:600;color:var(--ink-2)}
.nextm b{color:var(--ink)}
.ricon{width:28px;height:28px;flex:none}
.medal{width:16px;height:16px;flex:none;vertical-align:-2px;margin-left:5px}
.medal path{stroke:var(--edge);stroke-width:1.2;fill:#e0242c}
.medal circle{stroke:var(--edge);stroke-width:1.4}
.medal.m1 circle{fill:#d08a4e}.medal.m2 circle{fill:#c4ccd6}.medal.m3 circle{fill:#f2b705}.medal.m4 circle{fill:#a88bff}.medal.m4 path{fill:#f2b705}
.nextm .medal,.miles .medal,.unlock .medal{width:28px;height:28px;margin:0}

/* Feier-Overlay & Panels */
.celebrate{z-index:85}
.cbox{max-width:400px;width:100%;padding:24px 20px;display:grid;justify-items:center;gap:6px;text-align:center;background:var(--surface);animation:rise .45s cubic-bezier(.3,1.4,.5,1) both}
@keyframes rise{from{transform:translateY(30px) scale(.95);opacity:0}to{transform:none;opacity:1}}
.cnum{font-family:var(--f-display);font-weight:900;font-size:4.2rem;line-height:.9;letter-spacing:-.04em}
.cnum.bump{animation:bump .25s ease-out}
@keyframes bump{50%{transform:scale(1.25)}}
.clab{font-weight:800;color:var(--ink-2);font-size:1.05rem}
.cbox .week{width:100%}
.unlock{display:grid;gap:8px;width:100%;padding:12px;border-radius:14px;background:var(--c-ziel);color:var(--on);border:var(--bw) solid var(--line);text-align:left}
.unlock>span{display:flex;gap:10px;align-items:center}
.unlock small{display:block;font-weight:600;opacity:.85}
.cbox .btn{width:100%;margin-top:6px}
.sheet{position:relative;max-width:480px;background:var(--surface)}
.xclose{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;border:var(--bw) solid var(--line);background:var(--surface);color:var(--ink);font-weight:900;cursor:pointer}
.streakhead{display:flex;align-items:center;gap:16px;padding-right:40px;text-align:left}
.streakhead .shn{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.streakhead .cnum{font-size:3.6rem}
.streakhead .note{text-align:left}.streakhead .note span{white-space:nowrap}
.streakhead .flame.big{width:72px;height:90px}
.mh2{font-family:var(--f-display);font-weight:900;font-size:1.15rem;margin:18px 0 8px}
.miles{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.miles li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:var(--surface-2);opacity:.6}
.miles li.ok{opacity:1}
.miles li>span{flex:1;min-width:0}
.miles small{display:block;color:var(--ink-2);font-weight:600;font-size:.8rem}
.miles em{font-style:normal;font-weight:900;font-family:var(--f-display)}
.skins{display:flex;flex-wrap:wrap;gap:8px}
.skin{display:inline-flex;align-items:center;gap:6px;border:var(--bw) solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);padding:5px 12px 5px 6px;font-weight:800;font-size:.85rem;min-height:38px;cursor:pointer}
.skin i{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line)}
.skin[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.skin:disabled{opacity:.5;cursor:default}
.sk-standard i{background:linear-gradient(135deg,#f7f7fb 50%,#6d8cff 50%)}
.sk-polar i{background:linear-gradient(135deg,#3ad1a6 50%,#2b6cff 50%)}
.sk-sand i{background:linear-gradient(135deg,#f2b45a 50%,#e0703a 50%)}
.sk-night i{background:linear-gradient(135deg,#7b5cff 50%,#1b1446 50%)}
.gbtn svg{flex:none}

/* Anmelde-Hinweis */
.loginban{display:flex;align-items:center;gap:12px;padding:10px 12px;margin:0 0 18px;flex-wrap:wrap}
.loginban>span{flex:1;min-width:180px;font-weight:600;color:var(--ink-2)}
.loginban b{color:var(--ink)}
.loginban .xclose{position:static;width:32px;height:32px}

/* Menü */
.menu,.practice{max-width:1080px;margin:0 auto}
.menu-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:10px 0 18px}
.menu-head h1{font-family:var(--f-display);font-weight:900;font-size:clamp(2rem,6vw,2.8rem);letter-spacing:-.04em;margin:0;line-height:1;width:100%}
.eyebrow2{font-weight:800;color:var(--ink-2)}
a.back{text-decoration:none}
.menu-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
.mcol{display:grid;gap:14px;min-width:0}
.mcard{padding:16px;display:grid;gap:10px}
.acc{display:flex;align-items:center;gap:12px}
.acc b{font-family:var(--f-display);font-size:1.3rem}
.acc small{display:block;color:var(--ink-2);font-weight:600}
.avatar{width:48px;height:48px;border-radius:50%;border:var(--bw) solid var(--line);background:var(--c-nach);color:var(--on);display:grid;place-items:center;font-family:var(--f-display);font-weight:900;font-size:1.4rem;flex:none}
.avatar.guest{background:var(--surface-2);color:var(--ink-3)}.avatar{position:relative}.avatar .abadge{top:-4px;right:-4px}
.streakcard{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:var(--bw) solid var(--line);border-radius:14px;background:var(--surface-2);padding:10px 14px;color:var(--ink);cursor:pointer;font-weight:700}
.streakcard .flame{width:34px;height:42px;flex:none}
.streakcard b{font-family:var(--f-display);font-size:1.6rem}
.streakcard small{display:block;color:var(--ink-2);font-weight:600}
.streakcard>span:nth-child(2){flex:1}
.mh{font-family:var(--f-display);font-weight:900;font-size:1.35rem;margin:8px 0 0;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.mh small{font-family:var(--f-body);font-size:.85rem;color:var(--ink-2);font-weight:700}
.mh3{font-family:var(--f-display);font-weight:900;font-size:1.15rem}
.mcard p{margin:0;color:var(--ink-2);font-weight:500}
.mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.minit{position:relative;display:flex;flex-direction:column;border:var(--bw) solid var(--line);border-radius:14px;background:var(--gc);color:var(--on);text-decoration:none;overflow:hidden;box-shadow:0 4px 0 var(--sh)}
.minit .ma{height:64px;display:block;border-bottom:var(--bw) solid var(--line);background:rgba(255,255,255,.3)}
.minit .ma svg{width:100%;height:100%;display:block}
.minit b{padding:6px 8px 8px;font-family:var(--f-display);font-weight:800;font-size:.92rem;line-height:1.1}
.mchk{position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:50%;background:var(--good);border:1.5px solid var(--line);display:grid;place-items:center;font-weight:900;font-size:.8rem}
.mrow{display:flex;align-items:center;gap:12px;padding:12px 14px;border:var(--bw) solid var(--line);border-radius:14px;background:var(--gc);color:var(--on);text-decoration:none;box-shadow:0 4px 0 var(--sh)}
.mrow b{display:block;font-family:var(--f-display);font-size:1.15rem}
.mrow small{display:block;font-weight:600;opacity:.85}
.mi2{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.4);border:1.5px solid var(--line);display:grid;place-items:center;flex:none}
.mi2 svg{width:30px;height:30px}
.regs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.reg{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:14px;background:var(--surface);border:var(--bw) solid var(--line);color:var(--ink);text-decoration:none;font-weight:800;box-shadow:0 3px 0 var(--sh)}
.reg.cur{background:var(--c-duell);color:var(--on)}
.rshape{width:54px;height:36px;flex:none}
.rshape path{fill:var(--c-grenz);stroke:var(--edge);stroke-width:.8}
.regs.big .reg{background:var(--gc,var(--c-duell));color:#16172c;padding:12px 14px;font-size:1.05rem;transition:transform .12s,box-shadow .12s}
@media (hover:hover){.regs.big .reg:hover{transform:translate(-2px,-2px);box-shadow:0 4px 0 var(--sh)}}
.regs.big .rshape path{fill:#fff}
.reg{min-width:0;overflow-wrap:anywhere}
@media (max-width:520px){.reg{gap:7px;padding:8px 9px}.rshape{width:40px;height:30px}.regs.big .reg{font-size:.92rem;padding:10px 9px}.regs.big .rshape{width:32px;height:24px}.regs.big .reg span{overflow-wrap:normal;hyphens:auto}}
.set2 .setrow{padding:4px 0}.setcol{display:grid;justify-items:end;gap:3px;text-align:right}.setcol small{color:var(--ink-3);font-size:.75rem;font-weight:600;max-width:30ch}
.invite{background:var(--surface)}

/* Üben: Regionsseite */
.pbig{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.psmall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
.pcard .part.sart{height:128px;display:grid;place-items:center}
.pcard .sart .pmap{position:absolute;inset:0;width:100%;height:100%}
.pcard .pmap .ld.nbn{fill:var(--c-ziel)}
.pcard .pmap.faded{opacity:.55}
.pcard .fart{background:repeating-linear-gradient(-45deg,rgba(255,255,255,.18) 0 10px,transparent 10px 20px),var(--sea)}
.pchip.sm{top:8px;font-size:.88rem;padding:3px 10px;border-radius:10px;gap:6px;box-shadow:0 3px 0 var(--sh);border-width:2px}
.pcard.s .ptx b{font-size:1.2rem}
.practice .mh{margin-top:26px;margin-bottom:12px}
.pcard{min-width:0;position:relative;display:flex;flex-direction:column;border:var(--bw) solid var(--line);border-radius:var(--r);background:var(--gc);color:var(--on);text-decoration:none;overflow:hidden;box-shadow:0 5px 0 var(--sh);transition:transform .12s,box-shadow .12s}
.pcard:hover{transform:translate(-2px,-2px);box-shadow:0 6px 0 var(--sh)}
.pcard .part{position:relative;display:block;overflow:hidden;border-bottom:var(--bw) solid var(--line);background:var(--sea)}
.pcard .pmap{display:block;width:100%;height:auto}
.pcard .pmap .ld{fill:#fff;stroke:#16172c;stroke-width:.6}
.pcard .pmap .ld.tgt,.pcard .pmap .ld.good{fill:var(--c-grenz)}
.pcard .pmap .bg{fill:#fff;opacity:.6}
.pchip{position:absolute;top:12px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;background:#fff;color:#16172c;border:var(--bw) solid var(--line);border-radius:14px;padding:6px 14px;font-family:var(--f-display);font-weight:800;font-size:1.15rem;box-shadow:0 4px 0 var(--sh);white-space:nowrap}
.pchip img{border-radius:3px;border:1.5px solid #16172c}
.pchip.wide{left:12px;right:12px;transform:none;justify-content:flex-start}
.pchip .ghost{flex:1;color:#7d819e}
.hand{position:absolute;width:44px;height:44px;left:48%;top:46%;animation:tap 2.2s ease-in-out infinite}
@keyframes tap{0%,100%{transform:translate(0,0)}50%{transform:translate(10px,-6px) scale(.92)}}
.ptx{display:flex;flex-direction:column;padding:12px 16px 14px;padding-right:40px}
.ptx b{font-family:var(--f-display);font-weight:900;font-size:1.35rem;letter-spacing:-.02em}
.ptx small{font-weight:600;opacity:.85}
.pcard .go-arr{position:absolute;right:14px;bottom:14px;font-size:1.6rem}
.flagstack{position:relative;width:120px;height:84px;flex:none}
.flagstack img{position:absolute;width:62px;height:46px;border:2.5px solid #16172c;border-radius:5px;box-shadow:0 3px 0 var(--sh);left:calc(var(--i)*26px);top:calc(var(--i)*12px + 4px);transform:rotate(calc(var(--i)*7deg - 7deg));background:#fff}
.pins{position:relative;display:grid;gap:5px;justify-items:center}
.pins span{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#16172c;border:2px solid #16172c;border-radius:8px;padding:2px 9px;font-weight:800;font-size:.82rem;transform:rotate(calc(var(--i)*2deg - 2deg));max-width:170px;overflow:hidden;white-space:nowrap;box-shadow:0 3px 0 var(--sh)}
.pins i{width:9px;height:9px;border-radius:50% 50% 50% 0;background:#ff5c5c;transform:rotate(-45deg);flex:none}

@media (max-width:820px){.menu-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .pbig,.psmall{grid-template-columns:minmax(0,1fr)}
  .pcard.s{flex-direction:row;min-height:104px}.pcard.s .part.sart{width:44%;height:auto;min-height:104px;flex:none;border-bottom:0;border-right:var(--bw) solid var(--line)}.pcard.s .ptx{justify-content:center;padding-left:14px}
  .pcard.s .flagstack{transform:scale(.8)}.pcard.s .pins span{font-size:.74rem;padding:1px 7px;max-width:130px}.pcard.s .pchip.sm{font-size:.78rem;padding:2px 8px;max-width:92%;overflow:hidden}
  .mini{gap:8px}.minit .ma{height:52px}.minit b{font-size:.8rem}
  .pchip{font-size:1rem}
}
@media (max-width:380px){.regs{grid-template-columns:1fr}}

/* Nachbarn */
.nb-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;margin-bottom:12px}
.nb-top .cn{font-family:var(--f-display);font-weight:900;font-size:clamp(1.5rem,5vw,2rem);letter-spacing:-.03em;line-height:1.05}
.nb-top .cnt{font-weight:700;color:var(--ink-2)}
.timer{width:70px;height:70px;flex:none;position:relative}
.timer svg{width:100%;height:100%;transform:rotate(-90deg)}
.timer .tb{fill:none;stroke:var(--surface-2);stroke-width:9}
.timer .tf{fill:none;stroke:var(--gc);stroke-width:9;stroke-linecap:round;transition:stroke-dashoffset .3s linear}
.timer span{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-display);font-weight:900;font-size:1.35rem}
.start{padding:26px 20px;text-align:center;display:grid;gap:14px;justify-items:center}
.start p{margin:0;color:var(--ink-2);max-width:46ch}
.float{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);font-family:var(--f-display);font-weight:900;font-size:2.6rem;pointer-events:none;z-index:70;animation:float .9s ease-out forwards;color:var(--ink);text-shadow:0 2px 0 var(--bg)}
@keyframes float{from{opacity:1;transform:translate(-50%,-50%) scale(.7)}to{opacity:0;transform:translate(-50%,-120%) scale(1.15)}}

/* Ergebnis */
.result{margin-top:18px;padding:20px;display:grid;gap:16px;background:var(--surface)}
.res-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.burst{width:110px;height:110px;flex:none;display:grid;place-items:center;position:relative}
.burst svg{position:absolute;inset:0;width:100%;height:100%}
.burst svg path{fill:var(--gc);stroke:var(--edge);stroke-width:2.5}
.burst b{position:relative;font-family:var(--f-display);font-weight:900;font-size:2rem;line-height:.9;text-align:center;color:var(--on)}
.burst b small{display:block;font-size:.75rem;letter-spacing:.06em}
.result h2{font-family:var(--f-display);font-weight:900;font-size:1.7rem;letter-spacing:-.03em;margin:0;line-height:1.05}
.result .sub{margin:4px 0 0;color:var(--ink-2);font-weight:600}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center}
.stats div{background:var(--surface-2);border-radius:12px;padding:8px 4px}
.stats b{display:block;font-family:var(--f-display);font-size:1.5rem;font-weight:900;font-variant-numeric:tabular-nums}
.stats span{font-size:.75rem;color:var(--ink-2);font-weight:700}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.next{color:var(--ink-2);font-weight:700;font-size:.92rem}
.facts{display:grid;gap:4px;font-weight:600}
.facts div{display:flex;gap:10px;align-items:center}
.facts .k{color:var(--ink-3);min-width:92px;font-weight:700}
.rankline{font-weight:800;background:var(--c-ziel);color:var(--on);border:var(--bw) solid var(--line);border-radius:12px;padding:8px 12px}

/* Overlay */
.overlay{position:fixed;inset:0;background:rgba(10,12,30,.55);display:grid;place-items:center;z-index:80;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.dialog{max-width:470px;width:100%;padding:22px;max-height:86vh;overflow:auto;background:var(--surface)}
.dialog h2{font-family:var(--f-display);font-weight:900;margin:0 0 8px;font-size:1.6rem;letter-spacing:-.03em}
.dialog p,.dialog li{color:var(--ink-2);font-weight:500}
.dialog ul{padding-left:20px;display:grid;gap:6px}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:12px;font-weight:800;z-index:90;max-width:calc(100% - 32px);text-align:center}
.err{padding:30px;text-align:center}

@media (max-width:900px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .hero{grid-template-columns:1fr;padding-block:14px 20px}
  .tiles{gap:12px}
  .tile .art{height:96px}
  .tile .txt{padding:10px 12px 12px}
  .tile h2{font-size:1.25rem}
  .tile p{font-size:.82rem}
  .tile .st{font-size:.72rem;padding:1px 8px;top:7px;right:7px}
  .gtiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gt{min-height:64px}
  .hints{gap:7px}.hint{min-height:84px}
  .duel{gap:10px}.opt{padding:12px 8px}.opt .nm{font-size:1.02rem}
  .stats b{font-size:1.25rem}
  .brand b{font-size:1.4rem}.brand svg{height:30px}
  .pill .lbl{display:none}
}
@media (max-width:370px){.tile p{display:none}}


/* ===== Spiele: alles auf einen Blick, ohne Scrollen ===== */
.band.cmp{display:flex;align-items:center;gap:12px;padding:10px 12px;margin:6px 0 12px}
.band.cmp .bt2{flex:1;min-width:0}
.band.cmp h1{margin:0;font-size:clamp(1.4rem,4.4vw,2.1rem);line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.band.cmp .sub{font-size:.85rem;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.band.cmp .back{flex:none;font-size:1rem}
.band.cmp .back .bl{margin-left:2px}
.band.cmp .qbtn{flex:none}
.game .row-between{margin:8px 0}
.game .q{margin:8px 0 10px}
.ziel-q{padding:8px 14px;margin-bottom:10px}
.canvas{padding:8px;margin:0 auto 10px;width:fit-content;max-width:100%}
.canvas svg{width:min(520px,calc(100vw - 56px),max(200px,calc((100svh - 520px)*4/3)))}
@media (max-width:640px){.canvas svg{width:min(calc(100vw - 56px),max(170px,calc((100svh - 475px)*4/3)))}}
.prompt{padding:12px;min-height:0}
.prompt img.big{width:min(290px,100%,calc((100svh - 450px)*4/3));min-width:150px}
.prompt svg.shape{max-height:max(130px,calc(100svh - 450px))}
.answers{margin-top:12px;gap:10px}
.ans{min-height:52px;padding:8px 12px}
.route{padding:10px 12px 6px;gap:8px}
.route-sub{padding:0 12px 8px}
.seg{margin-bottom:10px}.seg a{padding:8px}
.nb-top{padding:8px 14px;margin-bottom:10px}
@media (max-width:640px){
  .wrap{padding-block:8px 48px}
  .top{padding-block:2px 6px}
  .band.cmp{gap:8px;padding:8px 10px;margin:4px 0 10px;box-shadow:0 4px 0 var(--sh)}
  .band.cmp .bl,.band.cmp .dl{display:none}
  .band.cmp .back{min-height:38px;padding:0 12px}
  .band.cmp .qbtn{width:38px;height:38px}
  .band.cmp .sub{font-size:.78rem}
  .game .q{font-size:clamp(1.15rem,5.2vw,1.5rem)}
  .answers{grid-template-columns:1fr 1fr}
  .ans{text-align:center;font-size:.95rem;min-height:50px;line-height:1.15;padding:6px 8px;display:grid;place-items:center}
  .ziel-q .cn,.nb-top .cn{font-size:1.35rem}
  .sliders{gap:10px;margin-bottom:10px}
  .sl{grid-template-columns:74px 1fr;align-items:center;gap:8px;font-size:.9rem}
  .sl input{height:40px}
  .sl input::-webkit-slider-thumb{width:40px;height:46px}
  .sl input::-moz-range-thumb{width:36px;height:42px}
  .endp{padding:5px 9px;font-size:.95rem}
  .route .ar{font-size:1.1rem}
  .route-sub{font-size:.88rem}
  .opt{padding:10px 6px}
  .opt svg.shape{max-height:max(90px,calc(100svh - 520px))}
  .mixres{padding:8px 10px;gap:10px}
  .mixres .hc.big{width:44px;height:44px}
  .mixres .bigpts{font-size:1.45rem}
  .mixres .next{font-size:.8rem;line-height:1.25}
  .mixres .realflag{width:64px;height:auto}
}
/* ===== kompakter auf iPad und PC ===== */
.game #mapHost:not(.zhost) svg{display:block;margin:0 auto;width:min(100%,max(280px,calc((100svh - 470px)*1.6)))}
@media (min-width:641px){
  .q{font-size:clamp(1.3rem,3.2vw,1.85rem)}
  .ziel-q .cn,.nb-top .cn{font-size:clamp(1.35rem,3.4vw,1.75rem)}
  .prompt img.big{width:min(260px,100%,max(150px,calc((100svh - 470px)*4/3)))}
  .prompt svg.shape{max-width:260px;max-height:clamp(120px,calc(100svh - 470px),220px)}
  .prompt .bt{font-size:clamp(1.8rem,5vw,2.4rem)}
  .opt svg.shape{max-height:clamp(80px,calc(100svh - 520px),150px)}
  .opt{padding:12px 10px}
  .hint{min-height:80px}
}
@media (min-width:700px){
  .game.wide{max-width:920px}
}

/* ===== E-Mail-Anmeldung ===== */
.linkbtn{display:block;margin:8px auto 0;background:none;border:0;padding:6px 4px;font:inherit;font-weight:700;font-size:.92rem;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer;text-align:center}
.linkbtn:hover{color:var(--ink)}
.linkbtn.done{text-decoration:none;cursor:default;font-weight:600}
.emtabs{display:flex;margin-bottom:14px}.emtabs button{flex:1}
.emform{display:grid;gap:12px}
.emform label{display:grid;gap:5px;font-weight:800;font-size:.92rem}
.emform input{font:inherit;font-size:1rem;font-weight:600;padding:12px 14px;border-radius:12px;border:var(--bw) solid var(--line);background:var(--surface-2);color:var(--ink);width:100%}
.emform input:focus{outline:3px solid var(--c-duell);outline-offset:1px}
.emerr{margin:0;min-height:0;color:var(--bad);font-weight:700;font-size:.9rem}
.emerr:empty{display:none}
.emhint{margin:-4px 0 0;text-align:left}
.emform .btn{justify-content:center}
.emor{display:flex;align-items:center;gap:10px;margin:14px 0 10px;color:var(--ink-3);font-weight:700;font-size:.85rem}
.emor::before,.emor::after{content:"";flex:1;height:2px;background:var(--surface-2)}
.sheet .gbtn{width:100%;justify-content:center}

/* ===== Tagesquiz: neue Fragetypen ===== */
.prompt.slim{min-height:0;padding:10px}
.qicon svg{width:72px;height:72px;display:block}
.prompt svg.qmap{width:min(100%,max(220px,calc((100svh - 470px)*1.52)));height:auto;border-radius:10px;border:1.5px solid var(--line)}
.lvk svg.qmap{width:min(100%,max(240px,calc((100svh - 400px)*1.52)))}
.answers.flags .ans{display:grid;justify-items:center;gap:4px;padding:8px;min-height:0}
.answers.flags .ans img{width:min(100%,132px);aspect-ratio:4/3;height:auto;border-radius:5px;border:1.5px solid var(--line);display:block}
.answers.flags .ans small{font-size:.78rem;font-weight:800;line-height:1.1}
@media (max-width:640px){.answers.flags .ans img{width:min(100%,calc((100svh - 330px)/2*4/3*.55),112px)}.qicon svg{width:56px;height:56px}}

/* ===== Größenregler ===== */
.game{zoom:var(--gz,.8)}
.szpop{display:flex;align-items:center;gap:12px;padding:8px 12px;margin:-4px 0 12px;position:relative;padding-right:52px}
.szpop>b{font-size:.92rem}
.szpop .xclose{position:absolute;right:8px;top:50%;transform:translateY(-50%)}
.szctl{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.szctl input{flex:1;min-width:80px;accent-color:var(--c-duell)}
.szstep{border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;min-width:38px;height:34px;font-weight:800;cursor:pointer}
.szctl output{min-width:3.4em;text-align:right;font-weight:800;font-size:.9rem}
.set2 .szctl{flex:1 1 240px;max-width:340px;min-width:0}
.set2 .szctl input{min-width:0}
@media (max-width:400px){.szctl output{display:none}.szstep{min-width:34px}}


/* ===== Konto-Knopf und Anmelde-Hinweis ===== */
.accpill .ini{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--c-nach);color:#16172c;border:1.5px solid var(--line);font-family:var(--f-display);font-weight:900;font-size:.85rem}
.accpill:not(.in){background:var(--c-ziel);color:#16172c}
#loginBanner{display:none}
.accpill{position:relative}.top-r{position:relative}#menuBtn{position:relative}
.abubble{position:absolute;top:calc(100% + 10px);right:0;z-index:50;width:max-content;max-width:min(260px,calc(100vw - 32px));background:var(--ink);color:var(--bg);font-weight:800;font-size:.86rem;line-height:1.3;padding:9px 13px;border-radius:12px;text-decoration:none;box-shadow:3px 3px 0 rgba(0,0,0,.18);animation:abIn .35s cubic-bezier(.3,1.5,.5,1) both;transition:opacity .35s,transform .35s}
.abubble::before{content:"";position:absolute;top:-6px;right:62px;width:12px;height:12px;background:inherit;transform:rotate(45deg);border-radius:2px}
@media (max-width:640px){.abubble::before{right:56px}}
.abubble.out{opacity:0;transform:translateY(-4px)}
@keyframes abIn{from{opacity:0;transform:translateY(-6px) scale(.96)}to{opacity:1;transform:none}}.abadge{position:absolute;top:-6px;right:-6px;width:19px;height:19px;border-radius:50%;background:#ff4b4b;color:#fff;border:1.5px solid var(--line);font:900 .72rem/1 var(--f-display);display:grid;place-items:center;animation:abPulse 2.4s ease-in-out infinite}
@keyframes abPulse{0%,70%,100%{transform:scale(1)}80%{transform:scale(1.22)}}
@media (prefers-reduced-motion:reduce){.abadge{animation:none}}
.loginlink{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:7px 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font-weight:800;font-size:.92rem;text-decoration:none;box-shadow:0 3px 0 var(--sh)}
.loginlink:hover{transform:translate(-1px,-1px);box-shadow:0 4px 0 var(--sh)}
.pvnote{margin:12px 0 10px;padding:10px 12px;border-radius:12px;background:var(--surface-2);font-size:.88rem;color:var(--ink-2);line-height:1.35}
.pvnote b{display:inline-block;background:var(--c-ziel);color:#16172c;border-radius:6px;padding:0 6px;margin-right:4px;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}
@media (max-width:640px){.accpill .lbl3{display:none}.accpill{padding:0 9px}}
@media (max-width:430px){.top-r .lbl2{display:none}#menuBtn{padding:0 10px}}
@media (max-width:370px){.top-r{gap:5px}.brand b{font-size:1.15rem}}

/* ===== Spielkopf (schlicht) ===== */
.ghead{display:flex;align-items:center;gap:10px;margin:4px 0 12px;min-height:46px}
.ghead .gbk{width:40px;height:40px;border-radius:50%;border:var(--bw) solid var(--line);background:var(--surface);display:grid;place-items:center;flex:none;font-weight:900;font-size:1.1rem;color:var(--ink);box-shadow:0 3px 0 var(--sh);text-decoration:none;cursor:pointer;padding:0}
.ghead .gico{width:42px;height:42px;border-radius:12px;background:var(--gc);border:var(--bw) solid var(--line);display:grid;place-items:center;flex:none;box-shadow:0 3px 0 var(--sh)}
.ghead .gico svg{width:28px;height:28px;display:block}
.ghead .gico .micon{display:grid;place-items:center;color:#16172c}.ghead .gico .micon svg{width:24px;height:24px}
.ghead .gtt{flex:1;min-width:0}
.ghead h1{margin:0;font-family:var(--f-display);font-weight:900;font-size:clamp(1.25rem,3.2vw,1.6rem);letter-spacing:-.03em;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ghead .sub{font-size:.8rem;font-weight:700;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.ghead .gact{display:flex;gap:6px;flex:none;align-items:center}
.ghead .qbtn{width:38px;height:38px;display:grid;place-items:center;padding:0;box-shadow:0 3px 0 var(--sh)}
.ghead+.szpop{margin-top:-4px}
@media (max-width:640px){.ghead{gap:8px;margin:2px 0 10px}.ghead .gico{width:38px;height:38px}.ghead .gico svg{width:24px;height:24px}.ghead .dl{display:none}.ghead .gbk,.ghead .qbtn{width:36px;height:36px}}
@media (max-width:360px){.ghead .gico{display:none}}

/* ===== Karten mit Zoom ===== */
.mapwrap{position:relative;border-radius:14px;border:var(--bw) solid var(--line);overflow:hidden;box-shadow:0 4px 0 var(--sh);background:var(--sea);margin-bottom:10px}
.mapwrap svg.map{display:block;width:100%;height:auto;cursor:grab;touch-action:pan-y}.mapwrap.zoomed svg.map{touch-action:none}
.mapwrap.zoomed svg.map:active{cursor:grabbing}
.zg path{vector-effect:non-scaling-stroke}
.zg text.lbl{font-size:calc(13px / var(--k,1))}
.zbtns{position:absolute;right:8px;bottom:8px;display:flex;flex-direction:column;gap:6px}
.zbtns button{width:34px;height:34px;border-radius:10px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font-weight:900;font-size:1.1rem;line-height:1;box-shadow:0 3px 0 var(--sh);cursor:pointer;padding:0}
.mleg{position:absolute;left:8px;bottom:8px;display:flex;gap:8px;flex-wrap:wrap;max-width:calc(100% - 60px);background:color-mix(in srgb,var(--surface) 88%,transparent);border:1.5px solid var(--line);border-radius:10px;padding:3px 8px;font-size:.74rem;font-weight:800;color:var(--ink-2);pointer-events:none}
.mleg i{width:10px;height:10px;border-radius:3px;display:inline-block;border:1.5px solid var(--line);vertical-align:-1px;margin-right:4px}
.rline{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 6px}
.rroute{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.rroute .endp{padding:5px 11px;font-size:1rem;box-shadow:0 3px 0 var(--sh)}
.rroute .ar{font-weight:900;font-size:1.15rem}
.mtog{display:flex;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;background:var(--surface);flex:none}
.mtog a{padding:5px 12px;font-weight:800;font-size:.85rem;color:var(--ink);text-decoration:none}
.mtog a[aria-selected="true"]{background:var(--gc);color:var(--on)}
.mtog a+a{border-left:2px solid var(--line)}
.rinfo{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 8px;font-weight:700;color:var(--ink-2);font-size:.88rem}
.rinfo-r{display:flex;align-items:center;gap:10px}
.rinfo-r b{color:var(--ink)}
.tipbtn{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:var(--c-ziel);color:#16172c;border-radius:999px;padding:4px 11px;font-weight:800;font-size:.85rem;box-shadow:0 3px 0 var(--sh);cursor:pointer}
.tipbtn small{display:inline-grid;place-items:center;min-width:18px;height:18px;border-radius:9px;background:#16172c;color:#fff;font-weight:800;font-size:.7rem;padding:0 5px}
.tipbtn:disabled{opacity:.5;cursor:default}
.game #chips:not(:empty){margin-bottom:10px}
@media (max-width:640px){.rroute .endp{font-size:.92rem;padding:4px 9px}.mleg{font-size:.68rem;gap:6px}.rinfo{font-size:.8rem}}

.mtop{position:absolute;left:8px;top:8px;max-width:calc(100% - 16px);background:color-mix(in srgb,var(--surface) 90%,transparent);border:1.5px solid var(--line);border-radius:10px;padding:2px 9px;font-size:.78rem;font-weight:800;color:var(--ink-2);pointer-events:none}
.rline{margin-bottom:8px}
.rinfo-r{flex-wrap:wrap;justify-content:flex-end}
@media (max-width:640px){.rline{gap:8px}.rinfo-r{width:100%;justify-content:space-between;flex-wrap:nowrap;gap:6px}.rinfo-r .mtog{order:-1}.mtog a{padding:4px 9px}.mtop{font-size:.7rem}.tipbtn{padding:4px 9px}}

.nbbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}
.nbbar .cn{font-family:var(--f-display);font-weight:900;font-size:clamp(1.3rem,4vw,1.7rem);letter-spacing:-.03em;line-height:1.05;display:flex;align-items:center;gap:8px}
.nbbar .cn img{border-radius:3px;border:1.5px solid var(--line)}
.nbbar .cnt{font-weight:700;color:var(--ink-2);font-size:.88rem;margin-top:2px}
.nbbar .timer{width:58px;height:58px}.nbbar .timer span{font-size:1.15rem}

/* ===== aufgeräumt: weniger Kästen ===== */
.prompt.plainp{background:transparent;border:0;box-shadow:none;padding:4px 0 2px}
.prompt.plainp .bt{padding:6px 0}
.hint{min-height:58px;font-size:.78rem;padding:6px}
.hint.open{padding:6px}
.hint svg.shape{height:54px}
.hints{margin-bottom:12px;gap:8px}
.tries{margin:10px 2px 8px}
.ziel-q{box-shadow:0 3px 0 var(--sh)}
.duel .opt{box-shadow:0 4px 0 var(--sh)}

/* ===== Serie: Stufen, Kalender, perfekter Tag ===== */
.flame.t2 .fo{fill:#ff4d2e}.flame.t2 .fi{fill:#ffd23f}
.flame.t3 .fo{fill:#3b7bff}.flame.t3 .fi{fill:#9fe8ff}
.flame.t4 .fo{fill:#a64dff}.flame.t4 .fi{fill:#ffb3f5}
.flame.t2:not(.off),.flame.t3:not(.off),.flame.t4:not(.off){filter:drop-shadow(0 0 4px rgba(255,160,40,.55))}
.flame.t3:not(.off){filter:drop-shadow(0 0 5px rgba(80,150,255,.6))}.flame.t4:not(.off){filter:drop-shadow(0 0 6px rgba(190,90,255,.7))}
.flame.off{filter:none}
.wd.perf i{background:var(--c-ziel);color:#16172c}
.tierline{display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--ink-2);margin:8px 0 0}
.tierline b{color:var(--ink)}
.tierdot{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--line);background:#ff7a4c;flex:none}
.tierline.t2 .tierdot{background:#ff4d2e}.tierline.t3 .tierdot{background:#3b7bff}.tierline.t4 .tierdot{background:#a64dff}
.sstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0 4px}
.sstats div{background:var(--surface-2);border-radius:12px;padding:8px;text-align:center;display:grid}
.sstats b{font-family:var(--f-display);font-size:1.35rem;font-weight:900}
.sstats span{font-size:.74rem;font-weight:700;color:var(--ink-3)}
.cal{background:var(--surface-2);border-radius:14px;padding:10px}
.calh{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.calh b{text-transform:capitalize}
.calnav{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);font-weight:900;cursor:pointer;color:var(--ink)}
.calnav:disabled{opacity:.35;cursor:default}
.calg{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center}
.calg i{font-style:normal;font-size:.7rem;font-weight:800;color:var(--ink-3);text-transform:uppercase}
.cd2{aspect-ratio:1;display:grid;place-items:center;border-radius:9px;font-size:.78rem;font-weight:800;color:var(--ink-2);background:var(--surface)}
.cd2.on{background:var(--c-spur);color:#16172c}
.cd2.perf{background:var(--c-ziel);color:#16172c;box-shadow:inset 0 0 0 2px var(--edge)}
.cd2.ice{background:#bfe3ff;color:#16172c}
.cd2.now{box-shadow:inset 0 0 0 2.5px var(--edge);color:var(--ink)}
.cd2.fut{opacity:.45}
.calleg{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;font-size:.74rem;font-weight:700;color:var(--ink-3)}
.calleg i{display:inline-grid;place-items:center;width:14px;height:14px;border-radius:4px;margin-right:4px;vertical-align:-2px;font-style:normal;font-size:.6rem;color:#16172c}
.calleg i.on{background:var(--c-spur)}.calleg i.perf{background:var(--c-ziel)}.calleg i.ice{background:#bfe3ff}
.danger{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:7px 12px;border-radius:12px;background:#fff1e6;border:2px solid var(--c-spur);color:#16172c;font-weight:800;font-size:.9rem}
:root[data-theme="dark"] .danger{background:#3a2216;color:#ffe9dc}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .danger{background:#3a2216;color:#ffe9dc}}

/* ===== Bonus-Spiele ===== */
.bonus{display:grid;gap:8px;margin-bottom:18px}
.bcard{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;border:var(--bw) solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none;box-shadow:0 4px 0 var(--sh)}
.bcard .bico{width:40px;height:40px;border-radius:11px;background:var(--gc);border:1.5px solid var(--line);display:grid;place-items:center;flex:none}
.bcard .bico svg{width:26px;height:26px}
.bcard>span:nth-child(2){flex:1;min-width:0;display:grid}
.bcard small{color:var(--ink-3);font-weight:700;font-size:.8rem}
.bcard.locked{opacity:.75}.bcard.locked .bico{filter:grayscale(1)}
.bigico{width:72px;height:72px;border-radius:20px;border:var(--bw) solid var(--line);display:grid;place-items:center;box-shadow:0 4px 0 var(--sh)}
.bigico svg{width:46px;height:46px}
.bonuslock .lockico{font-size:2.4rem}
.lockbar,.tbar{height:12px;border-radius:6px;border:1.5px solid var(--line);background:var(--surface);overflow:hidden;width:100%;max-width:320px}
.lockbar i,.tbar i{display:block;height:100%;background:var(--gc);transition:width .1s linear}
.tbar{flex:1;max-width:none;margin:0 10px}
.hilo{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin-bottom:4px}
.hcard{display:grid;justify-items:center;gap:6px;padding:12px 8px;border-radius:var(--r);border:var(--bw) solid var(--line);background:var(--surface);box-shadow:0 4px 0 var(--sh);text-align:center}
.hcard img{border-radius:4px;border:1.5px solid var(--line)}
.hcard b{font-family:var(--f-display);font-size:1.1rem;line-height:1.1}
.hcard .hpop{font-family:var(--f-display);font-weight:900;font-size:1.5rem}
.hcard small{color:var(--ink-3);font-weight:700;font-size:.75rem}
.hilo .vs{position:static;transform:none}
.memo{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.mc{aspect-ratio:4/3;border-radius:12px;border:var(--bw) solid var(--line);background:var(--gc);box-shadow:0 3px 0 var(--sh);padding:0;position:relative;cursor:pointer;overflow:hidden}
.mc .mb{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-display);font-weight:900;font-size:1.6rem;color:#16172c}
.mc .mf{position:absolute;inset:0;display:none;place-items:center;background:var(--surface);padding:4px}
.mc .mf img{width:86%;height:auto;border-radius:4px;border:1.5px solid var(--line)}
.mc .mf b{font-size:.82rem;line-height:1.1;color:var(--ink)}
.mc.up .mf,.mc.done .mf{display:grid}.mc.up .mb,.mc.done .mb{display:none}
.mc.done{background:var(--good);opacity:.8}.mc.done .mf{background:color-mix(in srgb,var(--good) 25%,var(--surface))}
@media (max-width:640px){.memo{grid-template-columns:repeat(3,minmax(0,1fr))}.hcard .hpop{font-size:1.2rem}.hcard b{font-size:.95rem}}

/* ===== Rangliste übersichtlich ===== */
.lb{padding:14px;gap:12px}
.lbtop{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.seg3{display:inline-flex;background:var(--surface-2);border-radius:999px;padding:3px;gap:2px}
.seg3 button{border:0;background:none;border-radius:999px;padding:6px 14px;font-weight:800;font-size:.9rem;color:var(--ink-2);cursor:pointer;min-height:34px}
.seg3 button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 0 0 2px var(--edge)}
.seg3.sm button{padding:6px 11px;font-size:.84rem}
.lbrows{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.lb .lbrows li{display:grid;grid-template-columns:34px minmax(0,1fr) 34px auto auto;align-items:center;gap:10px;padding:6px 10px;border-radius:12px;background:transparent;font-weight:700;border:0}
.lb .lbrows li:nth-child(odd):not(.me):not(.gap){background:var(--surface-2)}
.lb .lbrows .rk{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-display);font-weight:900;font-size:.95rem;color:var(--ink-2)}
.lb .lbrows li.p1 .rk{background:#ffd23f;color:#16172c;border:1.5px solid var(--line)}
.lb .lbrows li.p2 .rk{background:#d9dee8;color:#16172c;border:1.5px solid var(--line)}
.lb .lbrows li.p3 .rk{background:#f0b07a;color:#16172c;border:1.5px solid var(--line)}
.lb .lbrows .nm em{font-style:normal;font-size:.72rem;font-weight:800;background:var(--ink);color:var(--bg);border-radius:6px;padding:1px 6px;margin-left:4px;vertical-align:1px}
.lb .lbrows .pt{display:flex;align-items:baseline;gap:4px}
.lb .lbrows .pt b{font-family:var(--f-display);font-weight:900;font-size:1.05rem}
.lb .lbrows .pt small{font-size:.72rem;color:var(--ink-3);font-weight:700}
.lb .lbrows li.me{background:var(--c-ziel);color:#16172c;box-shadow:0 0 0 2px var(--edge)}
.lb .lbrows li.me .rk,.lb .lbrows li.me .pt small{color:#16172c}
.lb .lbrows li.gap{display:block;text-align:center;padding:0;color:var(--ink-3);background:none;line-height:1}
.lbmeta{margin:0;font-size:.8rem;font-weight:700;color:var(--ink-3)}
.lbmore{border-top:2px solid var(--surface-2);padding-top:10px}
.lbmore summary{cursor:pointer;font-weight:800;color:var(--ink-2);font-size:.92rem;list-style:none;display:flex;align-items:center;gap:6px}
.lbmore summary::-webkit-details-marker{display:none}
.lbmore summary::before{content:"›";display:inline-block;transition:transform .15s;font-size:1.1rem}
.lbmore[open] summary::before{transform:rotate(90deg)}
.lbmore .friends{border-top:0;padding-top:10px}
.lbmore .lb-foot{margin-top:10px}
.hcard.good{background:var(--good);color:var(--on)}.hcard.bad{background:var(--bad);color:var(--on)}.hcard.good small,.hcard.bad small{color:var(--on);opacity:.8}
.hilo{margin-top:4px}

/* ===== Globus mit Land des Tages ===== */
.globewrap{display:grid;justify-items:center;gap:10px}
.globe canvas{cursor:grab;touch-action:none}
.globe canvas:active{cursor:grabbing}
.ldt{display:grid;justify-items:center;text-align:center;gap:1px;max-width:260px;font-size:.84rem;color:var(--ink-2);font-weight:600;line-height:1.3}
.ldt small{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.ldt b{display:flex;align-items:center;gap:7px;font-family:var(--f-display);font-weight:900;font-size:1.15rem;color:var(--ink)}
.ldt b img{border-radius:3px;border:1.5px solid var(--line)}
.ldt .linkbtn{margin-top:2px;padding:2px;font-size:.8rem}
@media (max-width:640px){.globewrap{display:flex;align-items:center;gap:16px;justify-content:flex-start}.globewrap .globe{width:130px;flex:none}.globewrap .ldt{justify-items:start;text-align:left;max-width:none}}
@media (max-width:640px) and (max-height:960px){.globewrap{display:none}}

/* ===== Tagesquiz: weitere Fragearten ===== */
.clues{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:520px}
.clues span{padding:8px 13px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);font-weight:800;box-shadow:0 3px 0 var(--sh);animation:pop .4s cubic-bezier(.3,1.6,.5,1) both;animation-delay:var(--d)}
.bt.native{font-size:clamp(2rem,7vw,3rem);font-family:var(--f-display),"Noto Sans",system-ui,sans-serif}
.map .ld.q1{fill:var(--c-spur)}.map .ld.q2{fill:var(--c-duell)}.map .ld.q3{fill:var(--c-ziel)}.map .ld.q4{fill:var(--c-nach)}
.qmk circle{fill:var(--surface);stroke:var(--edge);stroke-width:1.8}.qmk path{fill:var(--edge)}.qmk text{font:900 10px var(--f-display);text-anchor:middle;fill:var(--ink)}
.abcd{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line);font-family:var(--f-display);font-weight:900;font-size:1.05rem;color:#16172c}
.abcd.q1{background:var(--c-spur)}.abcd.q2{background:var(--c-duell)}.abcd.q3{background:var(--c-ziel)}.abcd.q4{background:var(--c-nach)}
.answers.abcdans{grid-template-columns:repeat(4,minmax(0,1fr))}.answers.abcdans .ans{display:grid;place-items:center;min-height:52px}
.answers.pairs .ans{font-size:.92rem}

/* ===== Höher oder tiefer v2 ===== */
.hl-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}
.hl-top .hearts{font-size:1.3rem}
.hl-theme{font-weight:800;font-size:.95rem;padding:4px 12px;border-radius:999px;background:var(--surface);border:1.5px solid var(--line);box-shadow:0 3px 0 var(--sh)}
.hstack{display:grid;gap:8px;max-width:440px;margin:0 auto}
.hrow{display:flex;align-items:center;gap:14px;padding:10px 14px;border-radius:var(--r);border:var(--bw) solid var(--line);background:var(--surface);box-shadow:0 4px 0 var(--sh)}
.hrow img{width:96px;height:72px;border-radius:6px;border:1.5px solid var(--line);flex:none;object-fit:cover}
.hrow b{display:block;font-family:var(--f-display);font-size:1.25rem;line-height:1.1}
.hrow .hval{font-family:var(--f-display);font-weight:900;font-size:1.6rem}
.hrow.good{background:var(--good)}.hrow.bad{background:var(--bad)}
.hvs{display:flex;align-items:center;gap:10px;justify-content:center}
.hvs span{width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-family:var(--f-display);font-weight:900;font-size:.9rem;flex:none}
.hvs p{margin:0;font-weight:800;font-family:var(--f-display);font-size:1.1rem}
.hbtns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.hbtns .ans{text-align:center;min-height:54px;font-size:1.05rem}
@media (max-width:640px){.hrow img{width:76px;height:57px}.hrow b{font-size:1.1rem}.hrow .hval{font-size:1.35rem}.hvs p{font-size:1rem}}

/* ===== Live-Modi ===== */
.newb{font-style:normal;font-size:.62rem;font-weight:900;letter-spacing:.05em;background:var(--c-spur);color:#16172c;border:1.5px solid var(--line);border-radius:999px;padding:1px 6px;vertical-align:3px;margin-left:4px}
.lvneed{padding:16px 18px;display:grid;gap:12px;justify-items:start;margin-bottom:14px}.lvneed p{margin:0;color:var(--ink-2);font-weight:600}.lvneed b{color:var(--ink)}
.lvsign{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.lvmodes.off .lvmode{opacity:.85}
.lvmodes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}
.lvmode{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;border:var(--bw) solid var(--line);background:var(--surface);color:var(--ink);text-align:left;box-shadow:0 4px 0 var(--sh);cursor:pointer}
.lvmode:hover{transform:translate(-1px,-1px);box-shadow:0 4px 0 var(--sh)}
.lvmode .bico{width:44px;height:44px;border-radius:12px;background:var(--gc);border:1.5px solid var(--line);display:grid;place-items:center;flex:none}
.lvmode .bico svg{width:28px;height:28px}
.lvmode>span:nth-child(2){flex:1;min-width:0;display:grid}
.lvmode small{color:var(--ink-3);font-weight:700;font-size:.8rem;line-height:1.25}
.lvjoin{margin-bottom:10px}
.lvmt{font-family:var(--f-display);font-size:1.3rem}
.qbar{flex:1;max-width:none;margin:0 10px;height:10px}
.qbar i{background:var(--c-spur)}
.abn{display:block;font-size:.72rem;font-weight:800;margin-top:4px}
.podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:8px;margin:6px 0 4px}
.pd{display:grid;justify-items:center;gap:2px;border:var(--bw) solid var(--line);border-radius:14px 14px 4px 4px;background:var(--surface-2);padding:10px 4px;position:relative}
.pd.p1{min-height:132px;background:#ffe78a}.pd.p2{min-height:104px;background:#e6eaf2}.pd.p3{min-height:86px;background:#f6cfae}
.pd i{font-style:normal;font-size:1.6rem}.pd b{font-family:var(--f-display);font-size:1.2rem;color:#16172c}.pdn{font-weight:800;font-size:.85rem;color:#16172c;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:80;overflow:hidden}
.confetti i{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;animation:conf 2.6s cubic-bezier(.2,.6,.4,1) forwards}
@keyframes conf{to{top:105%;transform:rotate(720deg) translateX(40px)}}
@media (max-width:640px){.lvmodes{grid-template-columns:1fr}}

/* ===== Sticker-Album ===== */
.stkwin{display:flex;align-items:center;gap:12px;background:var(--surface-2);border-radius:14px;padding:10px 12px;margin:10px 0;text-align:left;width:100%}
.stkwin .stk img{border-radius:5px;border:1.5px solid var(--line);transform:rotate(-6deg);box-shadow:0 4px 0 var(--sh);animation:popin .6s cubic-bezier(.3,1.7,.5,1) both .5s}
.stkwin b{display:block}.stkwin small{color:var(--ink-2);font-weight:700}
.albumcard{display:grid;gap:8px;text-decoration:none;color:var(--ink);margin-bottom:18px}
.albumlast{display:flex;gap:6px;min-height:27px;align-items:center}.albumlast img{border-radius:3px;border:1.5px solid var(--line)}
.album{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;margin-bottom:10px}
.stkc{display:grid;justify-items:center;gap:3px;text-align:center}
.stkc img{width:100%;aspect-ratio:4/3;border-radius:6px;border:1.5px solid var(--line);box-shadow:0 3px 0 var(--sh);object-fit:cover}
.stkc small{font-size:.7rem;font-weight:700;color:var(--ink-2);line-height:1.15}
.stkc.miss span{width:100%;aspect-ratio:4/3;border-radius:6px;border:2px dashed var(--ink-3);display:grid;place-items:center;color:var(--ink-3);font-family:var(--f-display);font-weight:900}
.tomorrow{margin-top:12px;display:inline-block;padding:7px 12px;border-radius:12px;background:var(--surface);border:1.5px solid var(--line);font-weight:800;font-size:.9rem;box-shadow:0 3px 0 var(--sh)}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* ===== Startbildschirm pro Spiel ===== */
.intro{position:relative;min-height:calc(100svh - 170px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:56px 18px 28px;margin:4px 0 0;border:var(--bw) solid var(--line);border-radius:28px;background:var(--gc);box-shadow:0 5px 0 var(--sh);color:#16172c}
.intro .ibk{position:absolute;left:14px;top:14px;width:42px;height:42px;border-radius:50%;border:var(--bw) solid var(--line);background:#fff;color:#16172c;display:grid;place-items:center;font-weight:900;font-size:1.1rem;box-shadow:0 3px 0 var(--sh);cursor:pointer;padding:0}
.icard{width:min(320px,64vw);aspect-ratio:2/1;background:color-mix(in srgb,var(--gc) 45%,#fff);border:var(--bw) solid var(--line);border-radius:20px;box-shadow:0 5px 0 var(--sh);overflow:hidden;transform:rotate(-3deg);margin-bottom:10px;animation:popin .5s cubic-bezier(.3,1.6,.5,1) both}
.icard svg{width:100%;height:100%;display:block}
.intro h1{font-family:var(--f-display);font-weight:900;font-size:clamp(2.3rem,5.5vw,3.8rem);line-height:1;letter-spacing:-.03em;margin:4px 0 0}
.idesc{max-width:38ch;margin:0;font-weight:600;font-size:1.05rem;line-height:1.4;color:#16172c;opacity:.86}
.ifact{margin:0;font-weight:800;font-size:.92rem;background:rgba(255,255,255,.6);border:1.5px solid var(--line);border-radius:999px;padding:5px 14px}
.ibtns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px;width:100%;max-width:520px}
.intro .ibtn{min-width:230px;min-height:58px;font-size:1.25rem;background:#fff;color:#16172c;border-radius:16px;box-shadow:0 4px 0 var(--sh)}
.intro .ibtn small{font-weight:800;font-size:.85rem;opacity:.75}
.ihelp{background:none;border:0;font:inherit;font-weight:800;text-decoration:underline;text-underline-offset:3px;color:#16172c;cursor:pointer;font-size:.98rem;padding:4px}
.idate{margin-top:6px;line-height:1.3}.idate b{display:block;font-family:var(--f-display);font-size:1.2rem}.idate span{opacity:.72;font-weight:700}
@media (max-width:640px){.intro{min-height:calc(100svh - 130px);padding:54px 14px 22px;gap:10px;border-radius:22px}.icard{width:min(270px,70vw)}.intro .ibtn{min-width:200px;min-height:54px;font-size:1.15rem}.idesc{font-size:.98rem}}
@media (max-height:640px){.intro{gap:7px;padding:46px 14px 16px}.icard{width:min(210px,46vw);margin-bottom:2px}.intro h1{font-size:2.2rem}.idesc{font-size:.95rem}.idate{margin-top:0}.intro .ibtn{min-height:50px}}
@media (max-width:640px){.ibtns .ibtn+.ibtn,.ibtns .ibtn:has(+.ibtn){min-width:0;flex:1 1 130px}}

/* Große PC-Bildschirme: ganze Seite etwas größer (Spiele zusätzlich über --gz) */
@media (pointer:fine) and (min-width:1800px) and (min-height:900px){:root{--hz:1.12}}
@media (pointer:fine) and (min-width:2300px) and (min-height:1200px){:root{--hz:1.28}}
.wrap{max-width:calc(1080px * var(--hz,1))}
.top,.foot,#view>:not(.game){zoom:var(--hz,1)}
.intro{min-height:calc((100svh - 170px) / var(--hz,1))}

/* Kopf-Knöpfe bewegen sich wie die Kacheln */
.pill{transition:transform .12s,box-shadow .12s}
@media (hover:hover){.pill:hover{transform:translate(-2px,-2px);box-shadow:0 4px 0 var(--sh)}}
.pill:active{transform:translate(1px,1px);box-shadow:0 2px 0 var(--sh)}
/* Land des Tages */
.ldt .fun{margin:4px 0 0;font-size:.86rem;line-height:1.35;color:var(--ink);font-weight:600;text-wrap:balance}
.ldt dt{color:var(--ink-3);font-weight:700}.ldt dd{margin:0;color:var(--ink);font-weight:800}
/* ===== Menü neu ===== */
.menu2{max-width:640px;margin:0 auto}
.menu2 .menu-head h1{margin:0 0 4px}
.mgroup{margin-top:20px}
.mgroup>h2{font-family:var(--f-display);font-weight:900;font-size:1.1rem;margin:0 0 8px;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.mgroup>h2 small{font-family:var(--f-body);font-weight:700;font-size:.8rem;color:var(--ink-3)}
.mlist{background:var(--surface);border:var(--bw) solid var(--line);border-radius:18px;box-shadow:0 4px 0 var(--sh);overflow:hidden}
.mli{display:flex;align-items:center;gap:12px;padding:11px 14px;text-decoration:none;color:var(--ink);border:0;background:none;width:100%;font:inherit;text-align:left;cursor:pointer;transition:background .12s}
.mli+.mli{border-top:2px solid var(--surface-2)}
@media (hover:hover){.mli:hover{background:var(--surface-2)}.mli:hover .mic{transform:rotate(-6deg) scale(1.06)}}
.mic{width:40px;height:40px;border-radius:12px;background:var(--gc,var(--c-duell));border:1.5px solid var(--line);display:grid;place-items:center;flex:none;transition:transform .15s;color:#16172c}
.mic svg{width:23px;height:23px}
.mtx{flex:1;min-width:0}.mtx b{display:block;font-weight:800;line-height:1.25}.mtx small{display:block;color:var(--ink-2);font-weight:600;font-size:.84rem;line-height:1.3}
.mli .mval{font-weight:900;font-family:var(--f-display);color:var(--ink-2)}
.mli.locked .mic{filter:grayscale(1);opacity:.55}.mli.locked .mtx b{color:var(--ink-2)}
.maccount{background:var(--surface);border:var(--bw) solid var(--line);border-radius:18px;box-shadow:0 4px 0 var(--sh);padding:14px;display:grid;gap:12px}
.maccount .streakcard{margin:0}
/* ===== Üben ohne Limit ===== */
.practice2{margin-top:34px}
.practice2 .ph{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.practice2 .ph h2{margin:0}.practice2 .ph p{margin:2px 0 0;color:var(--ink-2);font-weight:600}
.sprint{display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:22px;border:var(--bw) solid var(--line);box-shadow:0 5px 0 var(--sh);background:var(--c-spur);color:#16172c;text-decoration:none;margin-bottom:14px;transition:transform .12s,box-shadow .12s;position:relative;overflow:hidden}
@media (hover:hover){.sprint:hover{transform:translate(-2px,-3px);box-shadow:0 6px 0 var(--sh)}.sprint:hover .swatch{transform:rotate(12deg)}}
.swatch{width:64px;height:64px;flex:none;transition:transform .2s}
.sprint .stx{flex:1;min-width:0}.sprint b{display:block;font-family:var(--f-display);font-weight:900;font-size:1.45rem;line-height:1.1}
.sprint small{display:block;font-weight:700;font-size:.95rem;opacity:.85;margin-top:2px}
.sprint .srec{display:inline-block;margin-top:6px;background:rgba(255,255,255,.65);border:1.5px solid var(--line);border-radius:999px;padding:2px 10px;font-weight:800;font-size:.8rem}
.sprint .sgo{flex:none;background:#fff;border:var(--bw) solid var(--line);border-radius:14px;box-shadow:0 4px 0 var(--sh);padding:10px 18px;font-weight:900;font-size:1.05rem}
.rgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.rcard{display:flex;flex-direction:column;border-radius:20px;border:var(--bw) solid var(--line);box-shadow:0 4px 0 var(--sh);background:var(--gc);color:#16172c;text-decoration:none;overflow:hidden;transition:transform .12s,box-shadow .12s}
@media (hover:hover){.rcard:hover{transform:translate(-2px,-3px) rotate(-.4deg);box-shadow:0 6px 0 var(--sh)}}
.rcard.wide{grid-column:span 2}
.rcard .rart{height:110px;display:grid;place-items:center;padding:10px}
.rcard .rart{background-image:radial-gradient(rgba(255,255,255,.45) 1.2px,transparent 1.5px);background-size:14px 14px}
.rcard .rart{position:relative;overflow:hidden}.rcard .rart svg{position:absolute;left:12px;top:10px;width:calc(100% - 24px);height:calc(100% - 20px);overflow:visible;transform:rotate(-2deg);transition:transform .25s cubic-bezier(.3,1.5,.5,1)}
@media (hover:hover){.rcard:hover .rart svg{transform:rotate(1deg) scale(1.06)}}
.regs .rsil{width:54px;height:36px;flex:none;overflow:visible}.regs .rsil .ol{stroke-width:2.4}.regs .rsil .sh{transform:translate(2px,2px)}
.rsil .sh{fill:#16172c}.rsil .ol{fill:none;stroke:#16172c;stroke-width:3.2;stroke-linejoin:round}.rsil .fl{fill:#fff}
.rcard .rlab{background:rgba(255,255,255,.55);border-top:var(--bw) solid var(--line);padding:8px 12px}
.rcard .rlab b{display:block;font-family:var(--f-display);font-weight:900;font-size:1.15rem}
.rcard .rlab small{display:block;font-weight:700;font-size:.78rem;opacity:.8}
@media (max-width:900px){.rgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.rcard .rart{height:84px}.sprint{padding:13px 14px;gap:12px}.swatch{width:50px;height:50px}.sprint b{font-size:1.2rem}.sprint small{font-size:.86rem}.sprint .sgo{display:none}}
/* Sprint im Spiel */
.sprq .spr-r{display:flex;align-items:center;gap:14px}
.spr-sc{font-family:var(--f-display);font-size:2rem;line-height:1}
.spr-t{min-width:52px;text-align:center;font-family:var(--f-display);font-weight:900;font-size:1.25rem;background:var(--surface-2);border:1.5px solid var(--line);border-radius:12px;padding:4px 8px}
.spr-t.low{background:var(--c-spur);animation:bump .5s infinite}
.spbar{height:10px;margin:0 0 10px}.spbar i{transition:width .1s linear}

/* Spurensuche: Tippzeilen */
.scols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:0 0 6px;padding:0 10px}
.scols span{display:grid;justify-items:center;font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-3);text-align:center;line-height:1.15}
.scols i{font-style:normal;font-size:1rem}
.sg{background:var(--surface);border:var(--bw) solid var(--line);border-radius:16px;box-shadow:0 4px 0 var(--sh);padding:9px 10px 10px;margin-bottom:9px}
.sgh{display:flex;align-items:center;gap:9px;margin:0 2px 8px}.sgh img{border-radius:3px;border:1.5px solid var(--line)}
.sgh b{font-family:var(--f-display);font-weight:800;font-size:1.12rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sgb{flex:none;font-size:.78rem;font-weight:800;background:var(--near);color:#16172c;border:1.5px solid var(--line);border-radius:999px;padding:2px 9px}.sgb.good{background:#fff}
.sgv{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.sv{border:1.5px solid var(--line);border-radius:10px;min-height:60px;display:grid;align-content:center;justify-items:center;gap:1px;padding:4px 3px;color:#16172c;text-align:center}
.sv small{font-size:.56rem;font-weight:800;text-transform:uppercase;letter-spacing:.02em;opacity:.72;line-height:1.1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sv b{font-weight:800;font-size:.92rem;line-height:1.1;overflow-wrap:anywhere}.sv i{font-style:normal;font-size:.8rem;line-height:1;margin-top:2px}
.sv.good{background:var(--good)}.sv.near{background:var(--near)}.sv.bad{background:var(--bad)}
.sg.win{background:var(--good)}.sg.win .sgh b{color:#16172c}
.sg.anim .sv{animation:pop .4s cubic-bezier(.3,1.6,.5,1) both}.sg.anim .sv:nth-child(2){animation-delay:.07s}.sg.anim .sv:nth-child(3){animation-delay:.14s}.sg.anim .sv:nth-child(4){animation-delay:.21s}.sg.anim .sv:nth-child(5){animation-delay:.28s}
@media (max-width:420px){.sv b{font-size:.8rem}.sgv{gap:4px}.sv{min-height:56px;border-radius:8px;padding:4px 2px}.sv small{font-size:.5rem;letter-spacing:0}}
.guhost{display:flex;justify-content:flex-end;margin:8px 2px 6px}.guhost:empty{display:none}
.tries .guhost{margin:0}.tries{min-height:28px}
.lgb{justify-content:center;margin:2px 0 10px;font-size:.78rem}.guesses:empty+.lgb{display:none}
.giveup{background:none;border:2px solid var(--ink-3);color:var(--ink-2);border-radius:999px;padding:4px 12px;font:inherit;font-size:.82rem;font-weight:800;cursor:pointer}
.giveup:hover{border-color:var(--line);color:var(--ink)}.giveup.armed{background:var(--bad);color:#16172c;border-color:var(--line)}

.tapbar{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--surface);border:var(--bw) solid var(--line);border-radius:14px;box-shadow:0 4px 0 var(--sh);padding:7px 8px 7px 12px;margin:0 0 8px}
.tapbar span{display:flex;align-items:center;gap:8px;min-width:0}.tapbar b{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tapbar img{border-radius:3px;border:1.5px solid var(--line)}
.tapbar[hidden]{display:none}
.map .sel{fill:var(--c-ziel)!important;stroke:var(--edge);stroke-width:2.2}

.hdots{display:flex;gap:4px;align-items:center}.hdots i{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface)}
.hdots i.y{background:var(--good)}.hdots i.n{background:var(--bad)}.hdots i.cur{background:var(--c-ziel);transform:scale(1.25)}
@media (max-width:420px){.hdots{gap:3px}.hdots i{width:9px;height:9px}}

.bigpts small{font-size:.55em;opacity:.6}

.nbact{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:8px}.nbact .giveup:disabled{opacity:.45;cursor:default}

.vsq{display:flex;align-items:center;gap:16px}.vsq img{border:2px solid var(--line);border-radius:6px;box-shadow:0 4px 0 var(--sh)}.vsq b{font-family:var(--f-display);font-weight:900;background:var(--edge);color:#fff;border-radius:50%;width:38px;height:38px;display:grid;place-items:center;font-size:.9rem}
.oddq svg{width:220px;height:130px}.oddq path{fill:var(--c-quiz);stroke:var(--edge);stroke-width:1.2}

/* ===== Tagesmedaillen ===== */
.dmed{flex:none;vertical-align:middle}.dmed .hx{stroke:var(--edge);stroke-width:1.8;stroke-linejoin:round;fill:var(--surface-2)}.dmed .st{fill:#fff;stroke:var(--edge);stroke-width:1.2;stroke-linejoin:round}
.dmed.d0 .hx{fill:none;stroke:var(--ink-3);stroke-dasharray:2.5 2}.dmed.d0 .st{fill:none;stroke:var(--ink-3)}
.dmed.d1 .hx{fill:#d08a4e}.dmed.d2 .hx{fill:#c9d2dd}.dmed.d3 .hx{fill:#f7c21b}.dmed.d4 .hx{fill:#86e0cf}.dmed.d5 .hx{fill:url(#dmGem) #8ec5ff;fill:#8ec5ff}
.dmed.d5 .sp{stroke:#fff;stroke-width:1.6;stroke-linecap:round}.dmed.d3 .st,.dmed.d5 .st{fill:#fffbe6}
.medchip{display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:4px 12px 4px 6px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);font:inherit;font-weight:800;font-size:.86rem;color:var(--ink);cursor:pointer;box-shadow:0 3px 0 var(--sh);transition:transform .12s,box-shadow .12s}
@media (hover:hover){.medchip:hover{transform:translate(-1px,-1px);box-shadow:0 4px 0 var(--sh)}}
.medtiers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:8px 0}
.mt{display:grid;justify-items:center;gap:1px;text-align:center;background:var(--surface-2);border-radius:12px;padding:8px 4px}.mt b{font-size:.8rem}.mt small{font-size:.68rem;color:var(--ink-3);font-weight:700}.mt span{font-weight:900;font-size:.9rem}
.mt.none{opacity:.55}
.med7{display:flex;justify-content:space-between;gap:4px;margin:6px 0}.med7 span{display:grid;justify-items:center;gap:2px}.med7 small{font-size:.66rem;font-weight:700;color:var(--ink-3)}
.med0{width:22px;height:22px;border-radius:6px;border:2px dashed var(--ink-3);opacity:.5;margin:2px}
.medprog{margin:6px 0 4px}.medprog small{display:block;font-weight:700;color:var(--ink-2);font-size:.8rem;margin-top:5px}
.mpbar{position:relative;height:12px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface-2);overflow:visible}
.mpbar i{position:absolute;inset:0 auto 0 0;border-radius:999px;background:var(--c-ziel)}
.mpbar b{position:absolute;top:-4px;width:4px;height:16px;margin-left:-2px;border-radius:2px;background:var(--ink-3)}.mpbar b.on{background:var(--edge)}
.medwin{text-align:center;display:grid;justify-items:center;gap:6px}.medwin svg{animation:popin .6s cubic-bezier(.3,1.7,.5,1) both}.medwin p{margin:0 0 6px;color:var(--ink-2);font-weight:700}
.lbmed{display:flex;align-items:center;gap:2px;justify-content:center}.lbmed small{font-weight:900;font-size:.72rem;color:var(--ink-2)}
.medside{position:fixed;top:110px;left:calc(50% + 540px * var(--hz,1) + 26px);width:212px;background:var(--surface);border:var(--bw) solid var(--line);border-radius:18px;box-shadow:0 4px 0 var(--sh);padding:14px;display:grid;gap:8px;z-index:5}
.medside .mh3{margin:0}.msgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px}.msgrid span{display:grid;justify-items:center;font-size:.8rem}.msgrid span.none{opacity:.45}
.medside .med7{gap:0}.medside .med7 .dmed{width:20px;height:20px}.medside .med0{width:16px;height:16px;margin:2px 0}.medside .med7 small{font-size:.6rem}.medside .linkbtn{justify-self:start;padding:0;font-size:.82rem}
@media (max-width:420px){.medtiers{gap:4px}.mt{padding:6px 2px}.mt b{font-size:.7rem}.mt small{font-size:.6rem}.mt svg{width:28px;height:28px}}

.kchain{display:flex;gap:6px;overflow-x:auto;padding:4px 2px 8px;margin:6px 0;scrollbar-width:thin}
.kc{flex:none;display:inline-flex;align-items:center;gap:5px;background:var(--surface);border:1.5px solid var(--line);border-radius:999px;padding:3px 10px 3px 5px;font-weight:800;font-size:.85rem;animation:pop .35s cubic-bezier(.3,1.6,.5,1) both}
.kc img{border-radius:3px;border:1px solid var(--line)}
.know{display:flex;align-items:center;justify-content:center;gap:12px;margin:10px 0 14px;flex-wrap:wrap}.know>span:first-child{display:flex;align-items:center;gap:8px;font-family:var(--f-display);font-size:1.3rem}
.know img{border-radius:4px;border:1.5px solid var(--line)}.karrow{font-weight:900;font-size:1.3rem;color:var(--ink-3)}
.kneed{width:56px;height:56px;display:grid;place-items:center;border-radius:16px;background:var(--gc);border:var(--bw) solid var(--line);box-shadow:0 4px 0 var(--sh);font-family:var(--f-display);font-weight:900;font-size:1.9rem;color:#16172c;animation:pop .35s both}

.sdisc{--sz:64px;width:var(--sz);height:var(--sz);flex:none;display:grid;place-items:center;border-radius:50%;background:var(--sc);border:calc(var(--sz) * .07) solid #fff;outline:2.5px solid var(--line);box-shadow:0 4px 0 var(--sh);font-size:calc(var(--sz) * .5);line-height:1;transform:rotate(var(--r))}
.sdisc.off{background:var(--surface-2);border-color:var(--surface);outline:2.5px dashed var(--ink-3);box-shadow:none;color:var(--ink-3);font-family:var(--f-display);font-weight:900;font-size:calc(var(--sz) * .38);transform:none}
.album2{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.stk2{display:grid;justify-items:center;text-align:center;gap:6px;padding:14px 10px 12px;border-radius:18px;background:var(--surface);border:var(--bw) solid var(--line);box-shadow:0 4px 0 var(--sh)}
.stk2 b{font-weight:900;font-family:var(--f-display);font-size:1rem;line-height:1.15}.stk2 small{font-size:.78rem;color:var(--ink-2);font-weight:600;line-height:1.3}
.stk2:not(.got){background:var(--surface-2);box-shadow:none}.stk2:not(.got) b{color:var(--ink-2)}
@media (hover:hover){.stk2.got:hover .sdisc{transform:rotate(0) scale(1.08)}}.stk2 .sdisc{transition:transform .2s}
@media (max-width:420px){.album2{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.stk2 .sdisc{--sz:54px}}
.stkpop{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:12px;background:var(--surface);color:var(--ink);border:var(--bw) solid var(--line);border-radius:18px;box-shadow:0 5px 0 var(--sh);padding:10px 18px 10px 12px;font:inherit;cursor:pointer;animation:stkIn .5s cubic-bezier(.3,1.5,.5,1) both}
.stkpop span:last-child{display:grid;text-align:left;white-space:nowrap}.stkpop{max-width:calc(100vw - 32px)}body:has(#toast:not([hidden])) .stkpop{bottom:calc(max(18px,env(safe-area-inset-bottom,0px)) + 64px)}.stkpop small{font-weight:800;color:var(--ink-3);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}.stkpop b{font-family:var(--f-display);font-weight:900;font-size:1.15rem}
.stkpop.out{animation:stkOut .35s ease-in both}
@keyframes stkIn{from{opacity:0;transform:translate(-50%,40px) scale(.9)}}@keyframes stkOut{to{opacity:0;transform:translate(-50%,30px)}}

/* ===== Bewegung ===== */
.ans,.opt,.minit,.mode,.pcard,.lvmode,.bcard,.hrow,.endp,.chip,.sg,.stk2,.giveup,.linkbtn,.ihelp,.medchip{transition:transform .14s ease,box-shadow .14s ease,background-color .15s,border-color .15s}
@media (hover:hover){
  .lvmode:hover{transform:translate(-2px,-2px);box-shadow:0 5px 0 var(--sh)}
  .ans:not(:disabled):hover{box-shadow:0 5px 0 var(--sh)}
  .opt:not(:disabled):hover{transform:translate(-2px,-3px) rotate(-.5deg);box-shadow:0 6px 0 var(--sh)}
  .minit:hover,.pcard:hover,.bcard:hover{transform:translate(-2px,-3px) rotate(-.4deg);box-shadow:0 6px 0 var(--sh)}
  .stk2.got:hover{transform:translateY(-3px)}
  .giveup:hover{transform:translateY(-1px)}
  .intro .ibtn:hover{transform:translate(-2px,-3px) scale(1.02);box-shadow:0 6px 0 var(--sh)}
}
.ans:not(:disabled):active,.opt:not(:disabled):active{transform:translate(2px,2px);box-shadow:0 2px 0 var(--sh)}
.ans.good,.opt.good{animation:okPop .35s cubic-bezier(.3,1.6,.5,1)}.ans.bad,.opt.bad{animation:shake .35s}
@keyframes okPop{40%{transform:scale(1.05)}}
#chips .chip:last-child{animation:pop .3s cubic-bezier(.3,1.6,.5,1) both}
.vin>*{animation:viewIn .32s cubic-bezier(.2,.8,.3,1) both}.vin>*:nth-child(2){animation-delay:.04s}.vin>*:nth-child(3){animation-delay:.08s}
@keyframes viewIn{from{opacity:0;transform:translateY(8px)}}
.icard{transition:transform .25s}@media (hover:hover){.intro:hover .icard{transform:rotate(-1deg) scale(1.02)}}

.kchain.wrap{flex-wrap:wrap;overflow:visible}.lvchain{margin:10px 0 0}.lvchain summary{cursor:pointer;font-weight:800}.kc.st{background:var(--surface-2);border-style:dashed}
.kneed.two{width:auto;min-width:56px;height:auto;min-height:56px;padding:4px 14px;display:flex;flex-direction:column;line-height:1;gap:3px}.kneed.two small{font:800 .68rem var(--f-body);opacity:.75;white-space:nowrap}
.kneed.v2{width:auto;height:auto;background:none;border:0;box-shadow:none;display:flex;align-items:center;gap:10px}
.kn1{display:flex;flex-direction:column;align-items:center;justify-content:center;width:64px;height:64px;border-radius:17px;background:var(--gc);border:var(--bw) solid var(--line);box-shadow:0 4px 0 var(--sh);font:900 2rem/1 var(--f-display);color:#16172c}
.kn2{display:flex;flex-direction:column;align-items:center;justify-content:center;width:50px;height:50px;border-radius:14px;background:var(--surface);border:2px dashed color-mix(in srgb,var(--ink) 25%,transparent);font:900 1.4rem/1 var(--f-display);color:var(--ink-2)}
.kn1 small,.kn2 small{font:800 .64rem/1 var(--f-body);margin-top:3px;letter-spacing:.02em}.kn2 small{color:var(--ink-3)}
.kor{font-weight:700;font-size:.85rem;color:var(--ink-3)}
.kneed.bump{animation:pop .35s cubic-bezier(.3,1.6,.5,1)}

.qtools{display:flex;align-items:center;gap:8px}
.sticker .nw{white-space:nowrap}.sticker .ds{display:none}
@media (max-width:420px){.sticker .dl{display:none}.sticker .ds{display:inline}}
.hint{overflow-wrap:anywhere}@media (max-width:420px){.hint{font-size:.76rem;padding:6px}}
.fcols{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;padding:4px 0}.fcols i{width:26px;height:26px;border-radius:50%;border:2.5px solid #16172c;box-shadow:0 3px 0 var(--sh)}
.stars{color:var(--c-ziel);-webkit-text-stroke:1.5px var(--edge);letter-spacing:2px;margin-right:4px}.stars i{font-style:normal;color:transparent;opacity:.5}
.ghostrec{color:var(--ink-3);font-weight:700}
.ziel-q .streakc{margin-left:auto;margin-right:10px;font-size:1.05rem}
.guhost.qgu{margin:0}.qgu .giveup{padding:3px 10px;font-size:.78rem;white-space:nowrap}
.qtrow{position:relative;margin:8px 0 0}.qtbar{margin:0 10px 0 0;height:10px}.qtbar i{transition:width .1s linear,background .3s}.qtbar.low i{background:var(--bad);animation:lowp .6s ease-in-out infinite alternate}
@keyframes lowp{to{opacity:.55}}
.qsec{min-width:2.2em;text-align:right;font-size:1.1rem}.qspd{font-weight:800;color:var(--c-spur);font-size:.78rem;margin-right:2px;white-space:nowrap}
.tdelta{position:absolute;right:2.8em;top:-4px;font-weight:900;font-size:.95rem;opacity:0;pointer-events:none}
.tdelta.up{color:var(--good)}.tdelta.dn{color:var(--bad)}
.tdelta.go{animation:tdel 1s ease-out}
@keyframes tdel{0%{opacity:0;transform:translateY(6px)}20%{opacity:1;transform:translateY(-6px)}100%{opacity:0;transform:translateY(-22px)}}
.joker{font:inherit;font-weight:900;font-size:.8rem;padding:3px 10px;border-radius:999px;border:1.5px solid var(--line);background:var(--c-ziel);color:#16172c;box-shadow:0 3px 0 var(--sh);cursor:pointer;transition:transform .12s,box-shadow .12s}
@media (hover:hover){.joker:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:0 4px 0 var(--sh)}}.joker:disabled{opacity:.4;cursor:default}.joker[hidden]{display:none}
.streakc{font-weight:900;font-size:.9rem;color:var(--c-spur)}.streakc.bump{animation:pop .35s cubic-bezier(.3,1.6,.5,1)}
.ans.gone{opacity:.25;transform:scale(.96);box-shadow:none}
.ans small.rv{display:block;font-size:.78rem;font-weight:800;opacity:.75;margin-top:2px}
.finale{display:block;width:max-content;margin:0 auto 4px;font-weight:900;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;background:var(--c-spur);color:#16172c;border:1.5px solid var(--line);border-radius:999px;padding:2px 10px;animation:pop .4s both}

.medbar{display:grid;gap:6px;width:min(100%,430px);margin-top:12px;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.mbtrack{position:relative;display:block;height:10px;border-radius:999px;background:var(--surface);border:1.5px solid var(--line);margin:8px 9px 0}
.mbtrack i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--c-ziel);transition:width .6s cubic-bezier(.2,.8,.3,1)}
.mbm{position:absolute;top:50%;transform:translate(-50%,-50%);display:grid;transition:transform .15s}.mbm .dmed{filter:drop-shadow(1px 1px 0 var(--edge))}
.mbm:not(.on) .dmed .hx{fill:var(--surface);stroke:var(--edge);stroke-dasharray:none}.mbm:not(.on) .dmed .st{fill:var(--surface-2);stroke:var(--ink-3)}
@media (hover:hover){.medbar:hover .mbm{transform:translate(-50%,-50%) scale(1.15)}}
.mbpts{display:none}
.mblab{display:flex;align-items:center;gap:6px;font-weight:800;font-size:.84rem;color:var(--ink-2)}
/* ===== Spiel-Modus: nur das Spiel, eine schmale Leiste oben ===== */
.gbar{display:none}
body.ingame .top,body.ingame #foot{display:none}
body.nofoot #foot{display:none}
html.ingame{height:100%;overflow:hidden;overscroll-behavior:none}
body.ingame.skbd #view{padding-bottom:75vh}
/* Grenzgänger beim Tippen: bisherige Länder unter dem Eingabefeld, damit man sie sieht */
body.skbd section.grenzg:not(.done){display:flex;flex-direction:column}body.skbd section.grenzg>#inputHost{order:1}body.skbd section.grenzg>#chips{order:2;margin:8px 0 0}body.skbd section.grenzg>#guHost{order:3}body.skbd section.grenzg>#resHost{order:4}
/* iPad/iPhone zoomen rein, wenn die Schrift im Eingabefeld unter 16 px liegt – deshalb mindestens 16,5 px nach dem Verkleinern */
.game input:not([type=range]):not([type=checkbox]):not([type=radio]),.game select,.game textarea{font-size:max(1.05rem,calc(16.5px / var(--gz,.8)))}
#view>:not(.game) input:not([type=range]):not([type=checkbox]):not([type=radio]),#view>:not(.game) select{font-size:max(1rem,calc(16.5px / var(--hz,1)))}
.overlay input:not([type=range]):not([type=checkbox]),.overlay select,.sheet input{font-size:max(1rem,16.5px)}
body.ingame{position:fixed;inset:0;top:var(--vvt,0px);bottom:auto;height:var(--vvh,100%);margin:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:none;-webkit-overflow-scrolling:touch;touch-action:manipulation}
body.ingame .wrap{padding-block:0 20px;min-height:100dvh}
body.ingame .gbar{display:block;position:sticky;top:0;z-index:40;margin:0 calc(50% - 50vw);padding:0 max(16px,env(safe-area-inset-left,0px),calc(50vw - 50%));background:var(--bg);border-bottom:2px solid color-mix(in srgb,var(--edge) 14%,transparent)}
.gbin{max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:58px;zoom:var(--hz,1)}
.gbin>.ghead{flex:1;min-width:0;margin:0;min-height:58px;display:grid;grid-template-columns:minmax(max-content,1fr) auto minmax(0,auto) auto minmax(max-content,1fr);gap:0 10px;align-items:center}
.gbin .ghead .gleft{grid-column:1;justify-self:start;display:flex;align-items:center;gap:10px}
.gbin .ghead .ghelp{grid-column:4;width:28px!important;height:28px!important;font-size:.85rem!important;border-width:2px}
.gbin .ghead .gstreak{height:36px;padding:0 11px;box-shadow:none;border-width:2px}
.gbin .ghead #helpBtn:not(.ghelp){display:none}
.gbin>.ghead{flex:1 1 100%}.gbin>.szpop{flex:1 1 100%;max-width:560px;margin:0 auto 10px!important;flex-wrap:wrap;row-gap:4px}.szpop .szhelp{margin:0;white-space:nowrap}
@media (max-width:640px){.gbin>.szpop .szhelp{flex-basis:100%;text-align:left;padding:2px 0}}
.gbin>.szpop{flex-basis:100%;margin:0 0 10px}
.gbin .ghead .gbk{width:38px;height:38px;box-shadow:none;border-width:2px}
.gbin .ghead .gico{grid-column:2;width:34px;height:34px;border-radius:10px;border-width:2px;box-shadow:none}
.gbin .ghead .gico svg{width:22px;height:22px}
.gbin .ghead .gtt{grid-column:3;text-align:left;min-width:0}.gbin .ghead .gtt h1,.gbin .ghead .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gbin .ghead h1{font-size:1.15rem}
.gbin .ghead .sub{font-size:.74rem;margin-top:0}
.gbin .ghead .gact{grid-column:5;justify-self:end;gap:6px}
.gbin .ghead .qbtn{width:36px;height:36px;box-shadow:none;border-width:2px;font-size:1rem}
.gbin .ghead .qbtn svg{width:18px;height:18px}
.gbrand{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink)}
.gbrand svg{height:28px;width:auto;aspect-ratio:1120/740}.gbrand b{font-family:var(--f-display);font-weight:900;font-size:1.2rem;letter-spacing:-.03em}
@media (max-width:640px){.gbrand b{display:none}}
@media (max-width:640px){.gbin .ghead .gstreak .lbl{display:none}.gbin .ghead .gstreak{height:34px;padding:0 9px}.gbrand svg{height:26px}.gbin .ghead .ghelp{width:26px!important;height:26px!important}}
@media (max-width:640px){.gbin{gap:8px;min-height:54px}.gbin>.ghead{min-height:54px;gap:0 8px}.gbin .ghead h1{font-size:1.05rem}.gbin .ghead .gico{width:30px;height:30px}.gbin .ghead .gico svg{width:19px;height:19px}}
@media (max-width:360px){.gbin .ghead .gico{display:none}}
.gmenu{text-decoration:none;color:var(--ink)}
/* Spielfläche: ruhiger, dünnere Linien, oben mit etwas Luft */
body.ingame #view>section.game,body.ingame #view>.intro{--bw:2px;padding-top:clamp(10px,2.6vh,28px)}
@media (min-height:760px){body.ingame #view>section.game:not(:has(.mapwrap)):not(.spurg){padding-top:clamp(16px,7vh,90px)}}
body.ingame #view>section.game .box,body.ingame #view>section.game .ans,body.ingame #view>section.game .opt,body.ingame #view>section.game .hrow{box-shadow:0 4px 0 var(--sh)}
body.ingame #view>section.game .btn{box-shadow:0 3px 0 var(--sh)}
/* Nach dem Spiel: nur das Ergebnis */
section.game.done:not(.sol)>:not(#resHost):not(.ghead):not(.szpop){display:none!important}
section.game.done.sol #resHost .res2{display:none}
#resHost .rsol{display:none}
section.game.done.sol #resHost .rsol{display:grid}
.res2{display:grid;justify-items:center;text-align:center;gap:6px;padding:clamp(6px,3vh,40px) 4px 8px;max-width:560px;margin:0 auto;animation:rise .35s cubic-bezier(.3,1.4,.5,1) both}
.res2 .rtitle{font-family:var(--f-display);font-weight:900;font-size:clamp(1.5rem,4.6vw,2rem);letter-spacing:-.03em;margin:0;line-height:1.1;text-wrap:balance}
.res2 .rsub{margin:0;color:var(--ink-2);font-weight:600;font-size:.95rem;text-wrap:balance}
.res2 #rankHost{width:100%;margin-top:10px}
.rk2{display:grid;grid-template-columns:1fr 2px 1fr;align-items:center;max-width:420px;margin:0 auto}
.rk2>i{align-self:stretch;background:color-mix(in srgb,var(--edge) 18%,transparent);border-radius:2px}
.rk2>div{display:grid;gap:0;justify-items:center}
.rk2 span{font-weight:800;color:var(--ink-2);font-size:.88rem}
.rk2 b{font-family:var(--f-display);font-weight:900;font-size:clamp(2.2rem,8vw,3rem);line-height:1.05;letter-spacing:-.03em}
.rk2 small{color:var(--ink-2);font-weight:600;font-size:.82rem}
.better{font-family:var(--f-display);font-weight:900;font-size:1.2rem;margin:14px 0 2px}
.hist2{display:flex;align-items:flex-end;gap:3px;height:96px;max-width:400px;margin:14px auto 0;padding:0 2px;position:relative}
.hist2 .c{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;border:0;background:none;padding:0;cursor:pointer;position:relative}
.hist2 .c i{display:block;width:100%;border-radius:4px 4px 2px 2px;background:color-mix(in srgb,var(--ink) 18%,transparent);min-height:3px;transition:background .15s}
.hist2 .c.me i{background:var(--gc);box-shadow:0 0 0 2px var(--edge)}
.hist2 .c.sel i{background:color-mix(in srgb,var(--ink) 40%,transparent)}.hist2 .c.me.sel i{background:var(--gc)}
.hist2 .c em{position:absolute;bottom:calc(var(--h) + 4px);font-style:normal;font-weight:900;font-size:.72rem;white-space:nowrap}
.hx{display:flex;justify-content:space-between;max-width:400px;margin:4px auto 0;font-weight:800;font-size:.74rem;color:var(--ink-3)}
.res2 .readout{font-size:.86rem;min-height:1.3em;margin:6px 0 0;color:var(--ink-2);text-align:center}
.ract{display:flex;gap:10px;justify-content:center;width:100%;max-width:420px;margin-top:16px}
.ract .btn{flex:1;min-height:52px;font-size:1.05rem}
.ract .btn.sq{flex:none;width:56px;padding:0}
.ract .btn svg{flex:none}
.ract2{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:420px;margin-top:10px}
.ract2 .btn{min-height:46px;font-size:.95rem}
.rnext{display:inline-flex;align-items:center;gap:10px;margin-top:16px;font-family:var(--f-display);font-weight:900;font-size:1.1rem;color:var(--ink);text-decoration:none;padding:6px 10px;border-radius:12px}
.rnext .ni{width:30px;height:30px;border-radius:9px;border:1.5px solid var(--line);background:var(--ngc);display:grid;place-items:center}.rnext .ni svg{width:20px;height:20px}
@media (hover:hover){.rnext:hover{background:var(--surface)}}
.res2 .rlogin{font-size:.86rem;font-weight:700;color:var(--ink-2);margin-top:12px}.res2 .rlogin a{color:var(--ink)}
.res2 .rcd{font-size:.8rem;font-weight:700;color:var(--ink-3);margin:8px 0 0}
.rsol{gap:14px;margin-top:16px;padding:16px;background:var(--surface);border:1.5px solid var(--line);border-radius:18px;box-shadow:0 4px 0 var(--sh)}
.rsol .rback{justify-self:start}
@media (max-width:640px){.res2{padding-top:8px}.hist2{height:80px}.better{font-size:1.1rem;margin-top:10px}.ract{margin-top:12px}.rnext{margin-top:10px}}
@media (max-height:700px){.hist2{height:64px}.res2{gap:4px}}

/* ===== Startbildschirm der Spiele ===== */
.intro{min-height:calc((100dvh - 80px) / var(--hz,1));justify-content:center;border:0;border-radius:0;background:none;box-shadow:none;color:var(--ink);padding:12px 16px 28px;gap:10px;margin:0 auto;max-width:560px}
.intro .ititle{font-family:var(--f-display);font-weight:900;font-size:clamp(2.1rem,5vw,3rem);line-height:1;letter-spacing:-.03em;margin:10px 0 0}
.intro .idesc{color:var(--ink-2);opacity:1;font-size:1rem}
.intro .ifact{background:var(--surface);border:1.5px solid var(--line);font-size:.86rem}
.intro .ibtn{background:var(--gc);color:#16172c;border-width:2px;box-shadow:0 4px 0 var(--sh);min-height:56px}
.intro .ihelp{color:var(--ink-2)}
.intro .idate b{font-size:1.05rem}.intro .idate span{font-size:.9rem}
.ghead.gmini .gico,.ghead.gmini .gtt{visibility:hidden}
.idemo{width:min(320px,82vw);aspect-ratio:300/170;border-radius:20px;border:1.5px solid var(--line);background:color-mix(in srgb,var(--gc) 32%,var(--surface));box-shadow:0 4px 0 var(--sh);position:relative;overflow:hidden;animation:popin .45s cubic-bezier(.3,1.6,.5,1) both}
.idemo.sm{width:min(280px,100%);margin:0 auto 14px;box-shadow:0 4px 0 var(--sh)}
.dm{position:absolute;inset:0;--T:5s}
.dm *{animation-iteration-count:infinite;animation-duration:var(--T);animation-fill-mode:backwards;animation-delay:var(--d,0s)}
@media (prefers-reduced-motion:reduce){.dm *{animation:none!important}}
/* Spurensuche */
.dm-spur{display:grid;align-content:center;justify-items:center;gap:9px}
.dm-spur .dr{display:flex;gap:7px}
.dm-spur .t{width:40px;height:30px;border-radius:7px;border:1.5px solid var(--line);display:grid;place-items:center;font-style:normal;font-weight:900;font-size:.8rem;color:#16172c;animation-name:dmFlip}
.dm-spur .t.good{background:var(--good)}.dm-spur .t.near{background:var(--near)}.dm-spur .t.bad{background:var(--bad)}
.dm-spur .ok{position:absolute;right:14px;bottom:12px;width:30px;height:30px;border-radius:50%;background:var(--good);border:1.5px solid var(--line);display:grid;place-items:center;font-weight:900;color:#16172c;animation-name:dmPop}
@keyframes dmFlip{0%{transform:rotateX(90deg);opacity:0}5%{transform:none;opacity:1}86%{opacity:1}94%,100%{opacity:0}}
@keyframes dmPop{0%{transform:scale(0)}6%{transform:scale(1.2)}10%{transform:scale(1)}80%{opacity:1}90%,100%{opacity:0;transform:scale(1)}}
/* Grenzgänger */
.dm-grenz svg{width:100%;height:100%}
.dm-grenz path{fill:var(--surface);stroke:var(--edge);stroke-width:2.2;stroke-linejoin:round}
.dm-grenz path.a{fill:var(--c-ziel)}.dm-grenz path.b{fill:var(--c-nach)}
.dm-grenz path[class^="p"]{animation-name:dmFillG}
.dm-grenz .droute{fill:none;stroke:var(--edge);stroke-width:2.5;stroke-dasharray:6 5;stroke-dashoffset:0;animation:dmDash var(--T) linear infinite}
.dm-grenz .pin{fill:var(--edge)}
@keyframes dmFillG{0%,4%{fill:var(--surface)}10%,86%{fill:var(--good)}96%,100%{fill:var(--surface)}}
@keyframes dmDash{0%{stroke-dasharray:0 400}55%,86%{stroke-dasharray:6 5}96%,100%{stroke-dasharray:0 400}}
/* Höher oder tiefer */
.dm-hilo{display:grid;align-content:center;justify-items:center;gap:5px;padding:16px 66px 16px 22px}
.dm-hilo .dhc{display:flex;align-items:center;gap:9px;width:100%;background:var(--surface);border:1.5px solid var(--line);border-radius:11px;padding:4px 10px;box-shadow:0 3px 0 var(--sh)}
.dm-hilo .dhc img{border-radius:4px;border:1.5px solid var(--line)}
.dm-hilo .dhc span{display:grid;text-align:left;line-height:1.15;position:relative}
.dm-hilo .dhc b{font-size:.78rem}.dm-hilo .dhc em{font-style:normal;font-weight:900;font-family:var(--f-display);font-size:.9rem}
.dm-hilo .hcb{animation-name:dmGood}
.dm-hilo .q{animation-name:dmOut}.dm-hilo .dhc em.q,.dm-hilo .dhc em.v{grid-area:2/1;white-space:nowrap}.dm-hilo .v{animation-name:dmIn}
.dm-hilo .dvs{font-weight:900;font-size:.66rem;background:var(--ink);color:var(--bg);border-radius:999px;padding:1px 8px}
.dm-hilo .hb2{position:absolute;right:16px;top:50%;transform:translateY(-50%);display:grid;gap:6px}
.dm-hilo .hb2 i{font-style:normal;width:34px;height:30px;border-radius:9px;border:1.5px solid var(--line);background:var(--surface);display:grid;place-items:center;font-weight:900;font-size:.8rem}
.dm-hilo .hb2 .dn{animation-name:dmPress}
@keyframes dmPress{0%,28%{transform:none;background:var(--surface)}32%{transform:scale(.86);background:var(--c-ziel)}38%,86%{transform:none;background:var(--c-ziel)}96%,100%{background:var(--surface)}}
@keyframes dmOut{0%,34%{opacity:1}40%,90%{opacity:0}100%{opacity:1}}
@keyframes dmIn{0%,34%{opacity:0}42%,88%{opacity:1}96%,100%{opacity:0}}
@keyframes dmGood{0%,38%{background:var(--surface)}44%,86%{background:var(--good)}96%,100%{background:var(--surface)}}
/* Flaggenmaler */
.dm-flag{display:grid;align-content:center;justify-items:center;gap:16px}
.dm-flag .fl{width:150px;height:90px;display:grid;grid-template-rows:1fr 1fr 1fr;border:1.5px solid var(--line);border-radius:6px;overflow:hidden;box-shadow:0 4px 0 var(--sh)}
.dm-flag .fl i{display:block}
.dm-flag .mid{background:repeating-linear-gradient(45deg,#f3f4f8 0 5px,#dfe2ec 5px 9px);animation-name:dmHue}
.dm-flag .dsl{width:190px;height:16px;border-radius:999px;border:1.5px solid var(--line);background:linear-gradient(90deg,#ff1f1f,#ff9b1a,#ffe51a,#3ad15c,#1ad3e5,#1f6bff,#9b2bff,#ff1fa5,#ff1f1f);position:relative}
.dm-flag .th{position:absolute;top:50%;left:0;width:18px;height:24px;border-radius:7px;background:var(--surface);border:1.5px solid var(--line);transform:translate(-50%,-50%);animation-name:dmSlide}
.dm-flag .ok{position:absolute;right:16px;top:14px;width:30px;height:30px;border-radius:50%;background:var(--good);border:1.5px solid var(--line);display:grid;place-items:center;font-weight:900;color:#16172c;animation-name:dmPop;--d:2.8s}
@keyframes dmSlide{0%,8%{left:62%}30%{left:40%}52%,86%{left:3%}100%{left:62%}}
@keyframes dmHue{0%,8%{background:#1f6bff}30%{background:#3ad15c}52%,86%{background:#dd0000}96%,100%{background:repeating-linear-gradient(45deg,#f3f4f8 0 5px,#dfe2ec 5px 9px)}}
/* Länderkette */
.dm-kette{display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:6px 6px;padding:14px}
.dm-kette .kc{display:inline-flex;align-items:center;gap:5px;background:var(--surface);border:1.5px solid var(--line);border-radius:999px;padding:3px 10px 3px 5px;font-size:.82rem;box-shadow:0 3px 0 var(--sh);animation-name:dmChip}
.dm-kette .kc img{border-radius:3px}
.dm-kette .ar{font-weight:900;font-size:.9rem;color:var(--ink);align-self:center;animation-name:dmChip}
.dm-kette u{text-decoration:none;background:#ffd23f;color:#151515;border-radius:4px;padding:0 2px;margin:0 1px}
@keyframes dmChip{0%{opacity:0;transform:translateY(8px) scale(.8)}5%{opacity:1;transform:none}80%{opacity:1}90%,100%{opacity:0}}
/* Tagesquiz */
.dm-quiz{display:grid;align-content:center;justify-items:center;gap:8px;padding:18px 26px}
.dm-quiz .tb{width:100%;height:7px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);overflow:hidden}
.dm-quiz .tb i{display:block;height:100%;background:var(--gc);animation:dmBar var(--T) linear infinite}
.dm-quiz .qf img{border-radius:4px;border:1.5px solid var(--line);display:block;width:50px;height:auto}
.dm-quiz .qa{display:grid;grid-template-columns:1fr 1fr;gap:5px;width:100%}
.dm-quiz .qa span{background:var(--surface);border:1.5px solid var(--line);border-radius:9px;font-weight:800;font-size:.7rem;line-height:1.25;padding:3px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.dm-quiz .qa .ok{animation-name:dmGood}
.dm-quiz .plus{position:absolute;right:16px;top:20px;font-weight:900;color:var(--good);font-size:.9rem;-webkit-text-stroke:.4px var(--edge);animation-name:dmPlus}
@keyframes dmBar{0%{width:100%}40%{width:62%}46%,52%{width:76%}100%{width:50%}}
@keyframes dmPlus{0%,40%{opacity:0;transform:translateY(6px)}46%{opacity:1;transform:none}60%,100%{opacity:0;transform:translateY(-10px)}}

/* Ergebnis-Kästen in Üben, Bonus und Live: ruhiger, mittig */
body.ingame .result{text-align:center;justify-items:center;gap:12px;padding:20px 18px;box-shadow:0 4px 0 var(--sh)}
body.ingame .result .res-top{justify-content:center}
body.ingame .result h2{font-family:var(--f-display);font-weight:900;font-size:1.6rem;letter-spacing:-.03em;margin:0}
body.ingame .result .actions{justify-content:center}
/* ===== Menü und Startseite: aufgeräumter ===== */
.mlegal{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin:26px 0 8px;font-weight:700;font-size:.88rem}
.mlegal a{color:var(--ink-2)}
.menu2 .mgroup h2 small{font-family:var(--f-body);font-size:.85rem;color:var(--ink-3);font-weight:800;margin-left:6px}
@media (max-width:640px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .tile{border-radius:18px;box-shadow:0 4px 0 var(--sh)}
  .tile .art{height:100px;border-bottom-width:2px}
  .tile .txt{padding:9px 12px 11px;gap:0}
  .tile h2{font-size:1.12rem;line-height:1.1;letter-spacing:-.02em}
  .tile p{display:none}
  .tile .st{top:7px;right:7px;font-size:.68rem;padding:1px 7px;border-width:2px}
  .tile .new{top:7px;left:7px;font-size:.62rem;padding:0 6px}
  .hero .today{display:none}
  .medbar{display:flex;align-items:center;gap:12px;width:100%;margin-top:14px}.medbar .mblab{display:none}
  .medbar .mbtrack{flex:1;margin:0 9px}
  .mbpts{display:block;white-space:nowrap;font-size:.86rem;font-weight:700;color:var(--ink-2)}.mbpts b{font-family:var(--f-display);font-weight:900;font-size:1.05rem;color:var(--ink)}
  .hero h1{margin:12px 0 4px}
  #heroLogin .loginlink{margin-top:14px;padding:5px 12px;font-size:.84rem;box-shadow:0 3px 0 var(--sh)}
  .hero h1{font-size:2.1rem;margin:12px 0 8px}
  .livebanner{padding:12px 14px;gap:12px;margin-top:14px}.livebanner small{font-size:.82rem}
  .section-h{font-size:1.5rem;margin:32px 0 10px}
}

@media (max-width:360px){.seg3 button{padding:6px 10px}.lb .nick{min-width:0}.lb .nick input{min-width:0;width:100%}.tile h2{font-size:.95rem;hyphens:auto}.tile .art{height:84px}.tile .txt{padding:8px 9px 10px}.top .brand b{font-size:1.05rem}.top .brand svg{height:24px}.top .pill{padding:0 8px;min-width:0}.dots6 i{width:15px;height:15px}}
.dots6 i:not([style*="background"]){border-color:color-mix(in srgb,var(--ink) 45%,transparent)}
@media (max-height:700px){.idemo{width:min(250px,70vw)}.idemo .dm:not(.dm-grenz){zoom:.8}.intro{gap:7px}.intro .ititle{font-size:2rem;margin-top:4px}}

/* ===== Handy-Startseite: eine Kachel pro Reihe, oben nur das Nötigste ===== */
.phead{display:none}
@media (max-width:640px){
  .hero{padding-block:4px 12px;gap:0}
  .hero h1,.hero>div>.sticker{display:none}
  .phead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:6px}
  .phead>b{font-family:var(--f-display);font-weight:900;font-size:1.65rem;letter-spacing:-.03em;line-height:1}
  .phead>span{font-size:.8rem;font-weight:700;color:var(--ink-2);text-align:right;line-height:1.2}
  .phead>span b{display:block;font-family:var(--f-display);font-weight:900;font-size:1.15rem;color:var(--ink)}
  .medbar{margin-top:12px}
  .tiles{grid-template-columns:1fr;gap:12px}
  .tile{border-radius:20px;box-shadow:0 4px 0 var(--sh)}
  .tile .art{height:140px;border-bottom-width:var(--bw);display:flex;align-items:center;overflow:hidden}
  .tile .art svg{width:100%;height:auto;flex:none}
  .tile .txt{padding:11px 16px 13px;gap:2px}
  .tile h2{font-size:1.3rem}
  .tile p{display:block;font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tile .st{top:10px;right:10px;font-size:.75rem;padding:1px 9px;border-width:1.5px}
  .tile .new{top:10px;left:10px;font-size:.68rem}
}

/* ===== Medaillen-Leiste: aktuelle Medaille, Balken bis zur nächsten, Punkte ===== */
.medbar.m2{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;width:min(100%,440px);margin-top:14px;padding:10px 14px;background:var(--surface);border-radius:18px;box-shadow:0 4px 0 var(--sh);color:var(--ink)}
.mb2ic{display:grid}.mb2mid{display:grid;gap:7px;min-width:0}
.mb2lab{display:flex;align-items:center;gap:5px;font-weight:800;font-size:.86rem;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mb2bar{position:relative;display:block;height:10px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.mb2bar i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--c-ziel);transition:width .6s cubic-bezier(.2,.8,.3,1)}
.mb2bar.t1 i{background:#d08a4e}.mb2bar.t2 i{background:#9fabbb}.mb2bar.t3 i{background:#f2b705}.mb2bar.t4 i{background:#3fc4ac}.mb2bar.t5 i{background:#6aa8ff}
.mb2pts{display:grid;justify-items:end;line-height:1.05}.mb2pts b{font-family:var(--f-display);font-weight:900;font-size:1.25rem}.mb2pts small{font-size:.72rem;font-weight:700;color:var(--ink-3)}
@media (hover:hover){.medbar.m2:hover{transform:translateY(-1px)}}

/* ===== Weich & verspielt ===== */
.tile,.minit,.btn,.band,.endp,.mrow,.regs.big .reg,.pcard,.intro,.rcard,.mc,.intro .ibtn{--sh:color-mix(in srgb,var(--gc,var(--c-duell)) 68%,#000)}
.btn.plain,.btn.ghost{--sh:rgba(22,23,44,.12)}
:root[data-theme="dark"] .btn.plain,:root[data-theme="dark"] .btn.ghost{--sh:rgba(0,0,0,.42)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn.plain,:root:not([data-theme="light"]) .btn.ghost{--sh:rgba(0,0,0,.42)}}
.tile,.minit{border-color:transparent!important}
.tile .art,.minit .ma{background:transparent!important;border-bottom:0!important}
.tile .txt{background:transparent!important}
.tile h2,.minit b{color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.16)}
.tile p{color:rgba(255,255,255,.92)}
.tile[style*="c-ziel"] h2,.minit[style*="c-ziel"] b{color:#16172c;text-shadow:none}
.tile[style*="c-ziel"] p{color:rgba(22,23,44,.78)}
.tile svg rect[fill="#16172c"],.minit svg rect[fill="#16172c"]{fill:#fff}
.tile .st{background:rgba(255,255,255,.94);color:#16172c;border:0!important;box-shadow:none}
.tile .st.done{background:#fff}
.tile .new{background:#fff;color:#16172c}
.tile:hover{box-shadow:0 8px 0 var(--sh)}.tile:active,.minit:active,.btn:active{transform:translateY(4px)!important;box-shadow:0 1px 0 var(--sh)!important}
.pill{border-color:transparent}
.box,.maccount,.lb{border-color:transparent}
input,select,textarea{border-color:var(--line)}
/* Fortschritts-Punkte (welche Spiele heute fertig sind) gut sichtbar */
.dots6 i{border:2.5px solid color-mix(in srgb,var(--ink) 22%,transparent)!important;background:transparent}
.dots6 i[style*="background"]{border-color:transparent!important}

/* ===== Üben ohne Limit: bewegte Vorschau-Karten, Regionen, Spielarten ===== */
.pfeats{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.pfeat{position:relative;display:grid;grid-template-rows:auto auto;border-radius:24px;background:var(--gc);color:#fff;text-decoration:none;overflow:hidden;box-shadow:0 6px 0 color-mix(in srgb,var(--gc) 68%,#000);transition:transform .12s,box-shadow .12s}
@media (hover:hover){.pfeat:hover{transform:translateY(-2px);box-shadow:0 8px 0 color-mix(in srgb,var(--gc) 68%,#000)}}
.pfeat:active{transform:translateY(4px);box-shadow:0 2px 0 color-mix(in srgb,var(--gc) 68%,#000)}
.pfa{position:relative;display:block;height:176px}
.pfl{display:grid;padding:2px 20px 16px}.pfl small{font-weight:800;font-size:.86rem;opacity:.9}.pfl b{font-family:var(--f-display);font-weight:900;font-size:1.5rem;line-height:1.1;text-shadow:0 2px 0 rgba(0,0,0,.14)}
.pgo{position:absolute;right:18px;bottom:16px;font:900 1.7rem/1 var(--f-display);opacity:.9}
.pff{position:absolute;inset:18px 18px 6px;display:grid;grid-template-columns:1.05fr 1fr;gap:14px;align-items:center;opacity:0;animation:pfSlot 12s linear infinite;animation-delay:calc(var(--i)*3s)}
.pflg{display:block;border-radius:8px;overflow:hidden;box-shadow:0 4px 0 rgba(0,0,0,.18);background:#fff;padding:3px}.pflg img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:5px}
.popts{display:grid;gap:8px}
.popt{position:relative;display:block;background:#fff;color:#16172c;border-radius:12px;padding:7px 8px;text-align:center;font-weight:800;font-size:.92rem;box-shadow:0 3px 0 rgba(0,0,0,.14);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.popt.ok{animation:pfOk 12s linear infinite;animation-delay:calc(var(--i,0)*3s)}
.pff .popt.ok{--i:inherit}
.ptap{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:rgba(255,255,255,.8);border:2px solid #16172c;opacity:0;animation:pfTap 12s linear infinite;animation-delay:inherit}
.pfmap{position:absolute;inset:10px 10px 0;width:calc(100% - 20px);height:calc(100% - 10px)}
.pfmap .land{fill:#fff;stroke:color-mix(in srgb,var(--gc) 60%,#000);stroke-width:.5}
.pmh{fill:var(--good);stroke:#16172c;stroke-width:.8;opacity:0;animation:pmHl 12s linear infinite;animation-delay:calc(var(--i)*3s)}
.prip{fill:none;stroke:#16172c;stroke-width:2.4;opacity:0;transform-box:fill-box;transform-origin:center;animation:pfTap 12s linear infinite;animation-delay:calc(var(--i)*3s)}
.pmq{position:absolute;left:50%;top:12px;display:flex;align-items:center;gap:7px;background:#fff;color:#16172c;border-radius:999px;padding:6px 14px;font-weight:800;font-size:.95rem;box-shadow:0 3px 0 rgba(0,0,0,.16);white-space:nowrap;opacity:0;transform:translateX(-50%);animation:pmQ 12s linear infinite;animation-delay:calc(var(--i)*3s)}
@keyframes pfSlot{0%{opacity:0;transform:translateY(8px)}3%,22%{opacity:1;transform:none}25%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes pmQ{0%{opacity:0;transform:translate(-50%,8px)}3%,22%{opacity:1;transform:translate(-50%,0)}25%,100%{opacity:0;transform:translate(-50%,-6px)}}
@keyframes pfOk{0%,11%{background:#fff;color:#16172c}13%,25%{background:var(--good);color:#fff}26%,100%{background:#fff;color:#16172c}}
@keyframes pfTap{0%,9%{opacity:0;transform:scale(.4)}10%{opacity:1;transform:scale(.7)}15%{opacity:0;transform:scale(1.7)}100%{opacity:0;transform:scale(1.7)}}
@keyframes pmHl{0%,11%{opacity:0}13%,22%{opacity:1}25%,100%{opacity:0}}
.pchips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 8px;margin:0 0 10px}.pchips::-webkit-scrollbar{display:none}
.pchips button{flex:none;display:flex;align-items:center;gap:8px;font:inherit;font-weight:800;font-size:.95rem;color:var(--ink);background:var(--surface);border:0;border-radius:999px;padding:8px 16px 8px 12px;box-shadow:0 3px 0 var(--sh);cursor:pointer}
.pchips button .rshape{width:30px;height:20px}.pchips button .rshape path{fill:var(--c-grenz)}
.pchips button[aria-checked="true"]{background:var(--ink);color:var(--bg)}.pchips button[aria-checked="true"] .rshape path{fill:var(--bg)}
.pmgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.pmt{display:grid;grid-template-rows:auto auto auto;justify-items:center;text-align:center;border-radius:20px;background:var(--gc);color:#fff;text-decoration:none;padding:12px 8px 12px;box-shadow:0 5px 0 color-mix(in srgb,var(--gc) 68%,#000);transition:transform .12s,box-shadow .12s;min-width:0}
.pmt[style*="c-ziel"]{color:#16172c}
@media (hover:hover){.pmt:hover{transform:translateY(-2px)}}
.pmt:active{transform:translateY(4px);box-shadow:0 1px 0 color-mix(in srgb,var(--gc) 68%,#000)}
.pmt b{font-family:var(--f-display);font-weight:900;font-size:1.08rem;line-height:1.1;margin-top:8px;text-shadow:0 2px 0 rgba(0,0,0,.12)}
.pmt[style*="c-ziel"] b{text-shadow:none}
.pmt small{font-weight:700;font-size:.72rem;opacity:.9;line-height:1.2;margin-top:2px}
.pmart{display:grid;place-items:center;width:100%;height:78px;position:relative}
.pa-map{position:relative;display:grid;place-items:center;width:100%;height:100%}.pa-map .rsil{width:92%;height:100%}
.pa-pin{position:absolute;width:20px;height:25px;left:50%;top:6px;margin-left:-10px;animation:pBob 1.8s ease-in-out infinite}
.pa-flags{position:relative;width:100%;height:100%}.pa-flags img{position:absolute;width:42%;aspect-ratio:3/2;object-fit:cover;border-radius:5px;border:2.5px solid #fff;box-shadow:0 3px 0 rgba(0,0,0,.16);left:calc(6% + var(--i)*23%);top:calc(14% + (var(--i) - 1)*(var(--i) - 1)*-4% + 8%);transform:rotate(calc((var(--i) - 1)*9deg));animation:pFloat 3s ease-in-out infinite;animation-delay:calc(var(--i)*-.8s)}
.pa-caps,.pa-list{display:grid;gap:5px;width:100%;justify-items:center}
.pa-caps span,.pa-list span{display:flex;align-items:center;gap:5px;background:#fff;color:#16172c;border-radius:999px;padding:2px 9px;font-weight:800;font-size:.72rem;box-shadow:0 2px 0 rgba(0,0,0,.14);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:pFloat 3s ease-in-out infinite;animation-delay:calc(var(--i)*-.9s)}
.pa-caps i{flex:none;width:8px;height:8px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#ff5c5c}
.pa-list b{color:var(--good);opacity:0;animation:pCheck 4.5s linear infinite;animation-delay:calc(var(--i)*.9s)}
.pa-nb{width:100%;height:100%;display:grid;place-items:center}.pa-nb svg{width:100%;height:100%}
.pa-sw .swatch{width:64px;height:64px}.pa-sw .swatch path[stroke="#f25c54"]{transform-origin:32px 36px;animation:pSpin 4s linear infinite}
@keyframes pBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes pFloat{0%,100%{translate:0 0}50%{translate:0 -4px}}
@keyframes pCheck{0%,15%{opacity:0;transform:scale(.4)}22%,85%{opacity:1;transform:none}100%{opacity:0}}
@keyframes pSpin{to{transform:rotate(360deg)}}
@media (max-width:900px){.pmgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.pfeats{grid-template-columns:1fr}}
@media (max-width:640px){.pfa{height:160px}.pfl b{font-size:1.3rem}.pmgrid{gap:10px}.pmart{height:70px}.pmt b{font-size:.98rem}}
@media (max-width:380px){.popt{font-size:.82rem}}
@media (prefers-reduced-motion:reduce){.pff,.pmq,.pmh,.prip,.ptap,.popt.ok,.pa-pin,.pa-flags img,.pa-caps span,.pa-list span,.pa-list b,.pa-sw .swatch path{animation:none!important}.pff:first-child,.pmq:first-of-type,.pa-list b{opacity:1}}

.pmart{overflow:hidden}
.pa-list{gap:3px}.pa-list span{font-size:.68rem;padding:1px 8px}
.pa-nb .nbx{fill:rgba(255,255,255,.45);stroke:#16172c;stroke-width:.9;stroke-linejoin:round;animation:pNb 4s ease-in-out infinite;animation-delay:calc(var(--i)*.45s)}
.pa-nb .nbme{fill:#fff;stroke:#16172c;stroke-width:2;stroke-linejoin:round}
@keyframes pNb{0%,100%{fill:rgba(255,255,255,.45)}20%{fill:#ffcb2e}40%{fill:rgba(255,255,255,.45)}}
@media (prefers-reduced-motion:reduce){.pa-nb .nbx{animation:none!important}}

.pa-caps,.pa-list{gap:4px;align-content:center;height:100%}.pa-caps span,.pa-list span{font-size:.66rem;line-height:1.35;padding:1px 8px}
.pa-list b{font-size:.7rem;line-height:1}.pa-list span{gap:4px}

/* Vorschau-Karten v2: eigener Aufbau (Leben + Serie, Flagge mittig, Antworten in einer Reihe; Karte mit fallender Nadel) */
.pff{inset:44px 16px 4px;grid-template-columns:1fr;grid-template-rows:auto auto;justify-items:center;gap:12px;align-content:center;animation-name:pfIn}
.pflg{width:min(124px,42%);transform:rotate(-3deg)}.pf-flag .pfa,.pf-map .pfa{height:184px}@media (max-width:640px){.pf-flag .pfa,.pf-map .pfa{height:180px}}
.popts{grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:7px}
.popt{font-size:.84rem;padding:7px 4px}
.popt.ok::after{content:"✓";margin-left:4px;opacity:0;animation:pfOkT 12s linear infinite;animation-delay:calc(var(--i,0)*3s)}
.pfhud{position:absolute;left:16px;right:16px;top:12px;display:flex;justify-content:space-between;align-items:center;font-weight:900;font-size:.95rem}
.pflives{font-size:.82rem;letter-spacing:1px}
.pfstreak{display:flex;align-items:center;gap:4px;background:rgba(255,255,255,.95);color:#16172c;border-radius:999px;padding:2px 10px 2px 8px;box-shadow:0 2px 0 rgba(0,0,0,.14)}
.pfstreak b{position:relative;display:inline-block;width:.8em;height:1.2em}.pfstreak b i{position:absolute;inset:0;font-style:normal;text-align:center;opacity:0;animation:pfNum 12s linear infinite;animation-delay:calc(var(--i)*3s + .4s)}
.ptap{display:none}
@keyframes pfIn{0%{opacity:0;transform:translateX(30px) rotate(2deg)}4%,22%{opacity:1;transform:none}25%,100%{opacity:0;transform:translateX(-30px)}}
@keyframes pfOkT{0%,11%{opacity:0}13%,25%{opacity:1}26%,100%{opacity:0}}
@keyframes pfNum{0%,12%{opacity:0;transform:translateY(5px)}14%,36%{opacity:1;transform:none}38%,100%{opacity:0}}
.pfmap{inset:0;width:100%;height:100%}
.pfmap .cin{fill:#fff;stroke:color-mix(in srgb,var(--gc) 55%,#000);stroke-width:.5;stroke-linejoin:round}
.pfmap .cout{fill:rgba(255,255,255,.38);stroke:none}
.pmq{left:14px;top:12px;transform:none;font-size:.88rem;padding:5px 12px;animation-name:pmQ2}
@keyframes pmQ2{0%{opacity:0;transform:translateY(-8px)}3%,22%{opacity:1;transform:none}25%,100%{opacity:0;transform:translateY(-4px)}}
.ppin .ppd{opacity:0;animation:ppDrop 12s cubic-bezier(.3,1.6,.5,1) infinite;animation-delay:calc(var(--i)*3s)}
.ppin .pplus{font:900 13px var(--f-display);fill:#fff;stroke:#16172c;stroke-width:3;paint-order:stroke;opacity:0;animation:ppPlus 12s linear infinite;animation-delay:calc(var(--i)*3s)}
@keyframes ppDrop{0%,9%{opacity:0;transform:translateY(-40px)}12%{opacity:1;transform:translateY(0)}22%{opacity:1;transform:none}25%,100%{opacity:0}}
@keyframes ppPlus{0%,13%{opacity:0;transform:translateY(4px)}15%{opacity:1}21%{opacity:0;transform:translateY(-10px)}100%{opacity:0}}
.prip{display:none}
@media (prefers-reduced-motion:reduce){.ppin .ppd,.pfstreak b i{animation:none!important}.ppin:first-of-type .ppd,.pfstreak b i:first-child{opacity:1}}

/* ===== Karten-Übungen im Vollbild: Karte unter der Leiste bis ganz unten, Aufgabe ploppt oben auf ===== */
.game.fullmap{zoom:1}
.game.fullmap>.ghead,.game.fullmap>.band{display:none}
.fullmap .mapwrap{position:fixed;left:0;right:0;top:var(--fmTop,60px);bottom:0;margin:0;border:0;border-radius:0;box-shadow:none;z-index:5}
.fullmap .mapwrap .zhost,.fullmap .mapwrap .zhost svg.map{display:block;width:100%;height:100%}
.fullmap .mapwrap .zhost svg.map{touch-action:none}
.fullmap .ziel-q{position:fixed;z-index:8;top:calc(var(--fmTop,60px) + 12px);left:50%;width:min(calc(100vw - 24px),520px);transform:translateX(-50%);margin:0;padding:10px 14px;border-radius:18px;background:var(--surface);box-shadow:0 5px 0 var(--sh),0 10px 30px rgba(0,0,0,.18)}
.fullmap .ziel-q .cn{font-size:1.35rem}
.fullmap .ziel-q.pop{animation:fmPop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes fmPop{0%{transform:translateX(-50%) scale(.85);opacity:.4}100%{transform:translateX(-50%) scale(1);opacity:1}}
.fullmap .tbar.spbar{position:fixed;z-index:7;left:0;right:0;top:var(--fmTop,60px);height:6px;margin:0;border-radius:0;border:0}
.fullmap .nbact{position:fixed;z-index:8;left:12px;bottom:calc(14px + env(safe-area-inset-bottom,0px));margin:0}
.fullmap .nbact .note{display:none}
.fullmap #tnote{position:fixed;z-index:8;left:12px;right:84px;bottom:calc(14px + env(safe-area-inset-bottom,0px));margin:0;background:var(--surface);color:var(--ink-2);border-radius:12px;padding:6px 10px;font-size:.78rem;box-shadow:0 3px 0 var(--sh);animation:fmNote 6s forwards;pointer-events:none}
@keyframes fmNote{0%,80%{opacity:1}100%{opacity:0}}
.fullmap .zbtns{bottom:calc(14px + env(safe-area-inset-bottom,0px));right:12px}
.fullmap #tend:not(:empty){position:fixed;z-index:9;left:0;right:0;bottom:0;padding:12px 12px calc(14px + env(safe-area-inset-bottom,0px));max-height:75vh;overflow:auto}
.fullmap #tend .result{max-width:560px;margin:0 auto;box-shadow:0 -6px 30px rgba(0,0,0,.25)}

/* ===== Spielbilder auf der Startseite: dezente Bewegung ===== */
.tile .ta-bob{transform-box:fill-box;transform-origin:center;animation:taBob 3.2s ease-in-out infinite}
.tile .ta-lens{animation:taLens 5s ease-in-out infinite}
.tile .ta-dash{animation:taDash 1.8s linear infinite}
.tile .ta-pulse{transform-box:fill-box;transform-origin:center;animation:taPulse 2.2s ease-in-out infinite}
.tile .ta-up{animation:taUp 2.6s ease-in-out infinite}.tile .ta-dn{animation:taDn 2.6s ease-in-out infinite}
.tile .ta-pip{transform-box:fill-box;transform-origin:50% 0%;animation:taPip 3.2s ease-in-out infinite}
.tile .ta-drop{transform-box:fill-box;transform-origin:50% 0%;animation:taDrop 3.2s ease-in infinite}
.tile .ta-pop{transform-box:fill-box;transform-origin:center;animation:taPop 3s ease-in-out infinite;animation-delay:calc(var(--i)*.5s)}
.tile .ta-wob{transform-box:fill-box;transform-origin:center;animation:taWob 4s ease-in-out infinite}
.tile .ta-hand{transform-box:fill-box;transform-origin:0% 71.4%;animation:pSpin 8s linear infinite}
@keyframes taBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes taLens{0%,100%{transform:translate(0,0)}25%{transform:translate(-6px,-3px)}50%{transform:translate(-2px,3px)}75%{transform:translate(3px,-1px)}}
@keyframes taDash{to{stroke-dashoffset:-22}}
@keyframes taPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
@keyframes taUp{0%,100%{transform:translateY(0)}25%{transform:translateY(-4px)}50%{transform:translateY(0)}}
@keyframes taDn{0%,50%,100%{transform:translateY(0)}75%{transform:translateY(4px)}}
@keyframes taPip{0%,100%{transform:rotate(0)}50%{transform:rotate(-6deg)}}
@keyframes taDrop{0%,45%{opacity:0;transform:translateY(-6px) scale(.5)}55%{opacity:1;transform:none}85%{opacity:1;transform:translateY(5px)}100%{opacity:0;transform:translateY(7px)}}
@keyframes taPop{0%,30%,100%{transform:scale(1)}12%{transform:scale(1.18)}}
@keyframes taWob{0%,100%{transform:rotate(0)}50%{transform:rotate(2.5deg)}}
@media (prefers-reduced-motion:reduce){.tile [class^="ta-"]{animation:none!important}}
/* Übungs-Kacheln: nichts wird abgeschnitten */
.pmart{overflow:visible;padding:4px 0}
.pa-caps span,.pa-list span{animation-name:pFloat2}
@keyframes pFloat2{0%,100%{translate:0 0}50%{translate:0 -2px}}
.pa-flags img{top:calc(18% + (var(--i) - 1)*(var(--i) - 1)*-4% + 6%)}
.pmart{height:84px}@media (max-width:640px){.pmart{height:80px}}.pa-list b{font-size:.62rem}.pa-list span,.pa-caps span{line-height:1.3}.pmt b{margin-top:6px}

/* ===== Vollbild-Karte: Leiste versteckt, Griff zum Herunterholen ===== */
body.fmode .gbar{position:fixed;left:0;right:0;top:0;margin:0;transform:translateY(-105%);transition:transform .25s ease;box-shadow:0 6px 20px rgba(0,0,0,.15)}
body.fmode.fmbar .gbar{transform:none}
.fmhandle{display:none}
body.fmode .fmhandle{display:grid;place-items:center;position:fixed;z-index:42;top:0;left:50%;width:58px;height:24px;margin-left:-29px;padding:0;border:0;border-radius:0 0 14px 14px;background:var(--surface);color:var(--ink);box-shadow:0 3px 0 var(--sh);cursor:pointer;transition:top .25s ease}
body.fmode .fmhandle svg{width:20px;height:20px;transition:transform .25s}
body.fmode.fmbar .fmhandle{top:var(--gbh,58px)}body.fmode.fmbar .fmhandle svg{transform:rotate(180deg)}
.fullmap .ziel-q{top:calc(env(safe-area-inset-top,0px) + 32px);flex-wrap:wrap;row-gap:6px}
.fullmap .ziel-q .cn img{flex:none;border-radius:4px;box-shadow:0 0 0 1.5px var(--line)}
.ziel-q .cn img{flex:none;border-radius:4px}
.kmode{flex-basis:100%;display:flex;gap:6px}
.kmode button{flex:1;font:inherit;font-weight:800;font-size:.8rem;border:0;border-radius:999px;padding:5px 8px;background:var(--surface-2);color:var(--ink-2);cursor:pointer}
.kmode button[aria-selected="true"]{background:var(--ink);color:var(--bg)}
.fullmap .tbar.spbar{top:0}
.fullmap .ziel-q{transition:top .25s ease}body.fmode.fmbar .fullmap .ziel-q{top:calc(var(--gbh,58px) + 32px)}

/* Regions-Seite: Bildbereich in der Kartenfarbe statt dunklem Meer */
.pcard .part{background:color-mix(in srgb,var(--gc) 55%,#fff)}
/* Übungs-Kacheln: Bilder bleiben in ihrem Bereich, auch bei breiten Kacheln */
.pmart{overflow:hidden;padding:5px 0}
.pmart>span{max-width:170px;margin:0 auto}
.pa-map .rsil{width:100%;height:100%;max-height:70px}
.pa-flags{max-width:150px;height:70px;margin:0 auto}
.pa-nb svg{max-height:72px}
.pa-sw .swatch{max-height:66px}
.pcard .pmap .sea{fill:color-mix(in srgb,var(--gc) 45%,#fff)}.pcard .pmap .grat{stroke:rgba(255,255,255,.35)}.pcard .pmap .bg{fill:#fff;opacity:.45}
.pa-caps span.sm,.pa-list span.sm{font-size:.58rem}

/* ===== Live-Duell v3: Warteraum, Countdown, Rennen, Siegerehrung ===== */
.lvroom,.lvcd,.lvend{display:grid;justify-items:center;text-align:center;gap:12px;background:var(--surface);border-radius:24px;padding:22px 18px;box-shadow:0 5px 0 var(--sh)}
.lvroom .bigico{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;box-shadow:0 4px 0 rgba(0,0,0,.15)}.lvroom .bigico svg{width:38px;height:38px}
.lvmt{font-family:var(--f-display);font-weight:900;font-size:1.7rem;line-height:1.05}.lvmd{color:var(--ink-2);font-weight:600;max-width:34ch}
.lvcodebox{display:grid;justify-items:center;gap:6px;background:var(--surface-2);border-radius:18px;padding:12px 18px;width:min(100%,340px)}
.lvcodebox .lvcode{font-size:2.6rem;padding:2px 14px;border:0;border-radius:14px;box-shadow:0 4px 0 color-mix(in srgb,var(--c-ziel) 65%,#000)}
.lvplayers{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:100%}
.lvchip{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border-radius:999px;padding:5px 12px 5px 5px;box-shadow:0 3px 0 var(--sh),0 0 0 1.5px var(--line);font-weight:800;animation:lvChip .35s cubic-bezier(.3,1.6,.5,1) both}
.lvchip i{flex:none;width:30px;height:30px;border-radius:50%;background:var(--ac);color:#fff;display:grid;place-items:center;font-style:normal;font-weight:900;font-family:var(--f-display);text-shadow:0 1px 0 rgba(0,0,0,.2)}
.lvchip b{max-width:12ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lvchip small{color:var(--ink-3);font-weight:800}
.lvchip.me{box-shadow:0 3px 0 var(--sh),0 0 0 2.5px var(--ink)}.lvchip.done small{color:var(--good)}
@keyframes lvChip{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.lvgo{min-width:220px;font-size:1.1rem}
.lvwaith{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--ink-2);margin:4px 0}
.lvdots{display:inline-flex;gap:4px}.lvdots i{width:8px;height:8px;border-radius:50%;background:var(--gc,var(--c-spur));animation:lvDot 1.1s ease-in-out infinite}.lvdots i:nth-child(2){animation-delay:.15s}.lvdots i:nth-child(3){animation-delay:.3s}
@keyframes lvDot{0%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-6px);opacity:1}}
.lvcd{padding:34px 18px}.lvcd .lvcount{font-size:6.5rem;line-height:1;color:var(--ink)}
.lvcount.pop{animation:lvCnt .9s cubic-bezier(.2,1.4,.4,1)}.lvcount.go{color:var(--good)}
@keyframes lvCnt{0%{transform:scale(2.2);opacity:0}25%{transform:scale(1);opacity:1}100%{transform:scale(.92);opacity:.85}}
.lvrace{font-weight:800;font-size:.85rem;color:var(--ink-2)}
.lvhud{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;background:var(--surface);border-radius:20px;padding:10px 14px;box-shadow:0 4px 0 var(--sh)}
.lvtime,.lvsc{display:grid;justify-items:center;line-height:1}.lvtime b,.lvsc b{font-family:var(--f-display);font-weight:900;font-size:1.9rem}.lvtime small,.lvsc small{font-size:.7rem;font-weight:800;color:var(--ink-3);margin-top:2px}
.lvbar{height:12px;border-radius:999px;background:var(--surface-2);overflow:hidden}.lvbar i{display:block;height:100%;border-radius:999px;background:var(--gc,var(--c-spur));transition:width .1s linear}
.lvhud.low .lvtime b{color:var(--bad);animation:lvLow .8s ease-in-out infinite}.lvhud.low .lvbar i{background:var(--bad)}
@keyframes lvLow{50%{transform:scale(1.12)}}
.lvsub{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:8px 4px 4px;min-height:24px}
.lvstreak{font-weight:900;font-size:.95rem}
.lvqin{animation:lvIn .22s ease-out}
@keyframes lvIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.lvq .answers{margin-top:10px}
.lvend{padding:26px 18px}.lvbig{font-family:var(--f-display);font-weight:900;font-size:2.4rem;line-height:1;animation:lvCnt .9s cubic-bezier(.2,1.4,.4,1)}
.lvmine{display:grid;justify-items:center;gap:2px;background:var(--surface-2);border-radius:18px;padding:12px 26px}.lvmine span{font-weight:800;font-size:.8rem;color:var(--ink-3)}.lvmine b{font-family:var(--f-display);font-weight:900;font-size:2.2rem;line-height:1.05}.lvmine small{font-weight:700;color:var(--ink-2)}
/* Siegerehrung */
.lvrev{display:grid;gap:14px;background:var(--surface);border-radius:26px;padding:20px 16px 18px;box-shadow:0 5px 0 var(--sh);overflow:hidden;position:relative}
.lvdrum{margin:0;text-align:center;font-family:var(--f-display);font-weight:900;font-size:1.5rem}
.lvpodium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:10px;min-height:250px;padding-top:8px}
.lvpd{display:grid;justify-items:center;gap:4px;min-width:0}
.lvpav{position:relative;width:58px;height:58px;border-radius:50%;background:var(--ac);color:#fff;display:grid;place-items:center;font:900 1.6rem/1 var(--f-display);box-shadow:0 4px 0 rgba(0,0,0,.18),0 0 0 3px var(--surface);text-shadow:0 1px 0 rgba(0,0,0,.2)}
.lvpd.p1 .lvpav{width:72px;height:72px;font-size:2rem}
.lvcrown{position:absolute;top:-26px;left:50%;transform:translateX(-50%) rotate(-8deg);font-style:normal;font-size:1.6rem}
.lvpn{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:900;font-size:.95rem}
.lvps{font-family:var(--f-display);font-weight:900;font-size:1.15rem}
.lvblock{width:100%;display:grid;place-items:start center;padding-top:8px;border-radius:14px 14px 6px 6px;color:#fff;font:900 1.8rem/1 var(--f-display);text-shadow:0 2px 0 rgba(0,0,0,.18)}
.lvblock i{font-style:normal}
.lvpd.p1 .lvblock{height:120px;background:#f2b705;box-shadow:0 5px 0 #b48700}.lvpd.p2 .lvblock{height:86px;background:#a8b3c2;box-shadow:0 5px 0 #7d8796}.lvpd.p3 .lvblock{height:62px;background:#d08a4e;box-shadow:0 5px 0 #9c6232}
.lvpd.me .lvpn{color:var(--c-spur)}
.lvwin{margin:0;text-align:center;font-family:var(--f-display);font-weight:900;font-size:1.6rem}
.lvranks{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.lvranks li{display:grid;grid-template-columns:22px 30px minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:7px 12px;border-radius:14px;background:var(--surface-2);font-weight:800}
.lvranks li.me{background:color-mix(in srgb,var(--c-ziel) 45%,var(--surface))}
.lvranks .rk{font-family:var(--f-display);font-weight:900;text-align:center}
.lvranks .av{width:28px;height:28px;border-radius:50%;background:var(--ac);color:#fff;display:grid;place-items:center;font-style:normal;font-weight:900;font-size:.85rem}
.lvranks .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lvranks .nm small{color:var(--ink-3)}.lvranks .cr{color:var(--ink-3);font-size:.78rem;font-weight:700}
.lvmystat{margin:0 0 6px;text-align:center;font-weight:800;color:var(--ink-2)}
.lvrev.anim .lvdrum{animation:lvDrum .5s ease-in-out 4 alternate,lvFade .4s ease calc(var(--d) + .2s) both}
.lvrev.anim .lvpd:not(.empty){animation:lvRise .7s cubic-bezier(.25,1.4,.45,1) var(--d) both}
.lvrev.anim .lvranks li{animation:lvRow .45s ease-out var(--d) both}
.lvrev.anim .lvwin{animation:lvWin .7s cubic-bezier(.25,1.6,.45,1) var(--d) both}
.lvrev.anim .lvafter{animation:lvRow .5s ease-out var(--d) both}
.lvrev.anim .lvpd.p1 .lvpav{animation:lvGlow 1.6s ease-in-out calc(var(--d) + .7s) infinite}
@keyframes lvDrum{from{transform:scale(1) rotate(-1deg)}to{transform:scale(1.06) rotate(1deg)}}
@keyframes lvFade{to{opacity:.35}}
@keyframes lvRise{0%{opacity:0;transform:translateY(60px) scale(.9)}100%{opacity:1;transform:none}}
@keyframes lvRow{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
@keyframes lvWin{0%{opacity:0;transform:scale(.4)}100%{opacity:1;transform:none}}
@keyframes lvGlow{0%,100%{box-shadow:0 4px 0 rgba(0,0,0,.18),0 0 0 3px var(--surface),0 0 0 0 rgba(242,183,5,.6)}50%{box-shadow:0 4px 0 rgba(0,0,0,.18),0 0 0 3px var(--surface),0 0 0 12px rgba(242,183,5,0)}}
@media (max-width:640px){.lvpodium{min-height:220px;gap:7px}.lvpd.p1 .lvblock{height:100px}.lvpd.p2 .lvblock{height:72px}.lvpd.p3 .lvblock{height:52px}.lvpav{width:48px;height:48px;font-size:1.3rem}.lvpd.p1 .lvpav{width:60px;height:60px}.lvcd .lvcount{font-size:5.5rem}.lvtime b,.lvsc b{font-size:1.6rem}}
@media (prefers-reduced-motion:reduce){.lvrev.anim *,.lvcount.pop,.lvchip,.lvqin,.lvbig{animation:none!important}}
.lvrev.anim .lvpd:not(.empty){animation:lvRow .5s ease-out .2s both}
.lvrev.anim .lvpd:not(.empty)>:not(.lvblock){animation:lvRise .7s cubic-bezier(.25,1.4,.45,1) var(--d) both}
.lvrev.anim .lvpd:not(.empty) .lvblock i{animation:lvWin .5s cubic-bezier(.25,1.6,.45,1) var(--d) both}
.lvrev.anim .lvpd.p1 .lvpav{animation:lvRise .7s cubic-bezier(.25,1.4,.45,1) var(--d) both,lvGlow 1.6s ease-in-out calc(var(--d) + .7s) infinite}
.lvdrum{font-size:1.6rem}
/* Live: Spielauswahl in kräftigen Farben */
.lvmodes:not(.off) .lvmode{background:var(--gc);color:#fff;border-color:transparent;box-shadow:0 5px 0 color-mix(in srgb,var(--gc) 68%,#000)}
.lvmodes:not(.off) .lvmode small{color:rgba(255,255,255,.9)}
.lvmodes:not(.off) .lvmode b{text-shadow:0 1px 0 rgba(0,0,0,.15)}
.lvmodes:not(.off) .lvmode .bico{background:#fff;box-shadow:none}
.lvmodes:not(.off) .lvmode[style*="c-ziel"]{color:#16172c}.lvmodes:not(.off) .lvmode[style*="c-ziel"] small{color:rgba(22,23,44,.78)}.lvmodes:not(.off) .lvmode[style*="c-ziel"] b{text-shadow:none}
.lvmodes:not(.off) .lvmode .newb{background:#fff;color:#16172c}

/* Karte zum Antippen ("Wo liegt …?") */
.qpick .ld.cand{fill:#ffe08a;stroke:#16172c;stroke-width:1.3;cursor:pointer;transition:fill .15s}
@media (hover:hover){.qpick .ld.cand:hover{fill:#ffc93d}}
.qpick .ld.cand.good{fill:var(--good)}.qpick .ld.cand.bad{fill:var(--bad)}.qpick .ld.cand.gone{fill:var(--land-mute);pointer-events:none}
.qpick .qpnames{display:none}.qpick.shown .qpnames{display:inline}
.qpick .qpn{font:800 10px var(--f-body);fill:#16172c;text-anchor:middle;paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round;pointer-events:none}
.answers.pickhide{display:none}
.pknote{margin:6px 0 0;text-align:center}
/* Flaggen-Puzzle */
.pzwrap{position:relative;width:min(300px,82vw);aspect-ratio:3/2;margin:6px auto 4px;border-radius:12px;overflow:hidden;box-shadow:0 4px 0 var(--sh),0 0 0 1.5px var(--line);background:var(--surface-2)}
.pzwrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pzgrid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(4,1fr)}
.pzgrid i{background:var(--surface-2);border:1px solid color-mix(in srgb,var(--ink) 8%,transparent);animation:pzOff .35s ease-out forwards;animation-delay:calc(var(--o)*290ms)}
.pzwrap.open .pzgrid i{animation:pzOff .25s ease-out forwards!important}
@keyframes pzOff{to{opacity:0;transform:scale(.6)}}
.pzlock{position:absolute;inset:auto 8px 8px auto;background:var(--bad);color:#fff;border-radius:999px;padding:3px 10px;font-weight:900;font-size:.85rem}
.ta-cell{transform-box:fill-box;transform-origin:center;animation:taCell 6s ease-in-out infinite;animation-delay:calc(var(--i)*.35s)}
@keyframes taCell{0%,6%{opacity:0;transform:scale(.4)}14%{opacity:1;transform:scale(1.14)}20%,84%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(.6)}}
.ta-time{transform-box:fill-box;transform-origin:0 50%;animation:taTime 6s linear infinite}
@keyframes taTime{0%{transform:scaleX(1)}55%,100%{transform:scaleX(.35)}}
.ta-ok{animation:taOk 6s ease-in-out infinite}
@keyframes taOk{0%,55%{fill:#fff}60%,92%{fill:#2fca72}100%{fill:#fff}}
.ta-okc{animation:taOkc 6s ease-in-out infinite}
@keyframes taOkc{0%,55%{opacity:0}60%,92%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.tile .ta-ok{fill:#2fca72}}
.ta-fan{transform-box:view-box;transform-origin:128px 205px;animation:taFan 4.8s ease-in-out infinite}
@keyframes taFan{0%,100%{transform:rotate(0deg)}50%{transform:rotate(calc(var(--a)*-.22deg))}}
.ta-paint{animation:taFade 5.6s linear infinite}
@keyframes taFade{0%,88%{opacity:1}95%,100%{opacity:0}}
.ta-st{animation-duration:5.6s;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes taSt0{0%,8.0%{stroke-dashoffset:1}19.0%,100%{stroke-dashoffset:0}}
@keyframes taSt1{0%,21.4%{stroke-dashoffset:1}32.4%,100%{stroke-dashoffset:0}}
@keyframes taSt2{0%,34.8%{stroke-dashoffset:1}45.8%,100%{stroke-dashoffset:0}}
@keyframes taSt3{0%,48.2%{stroke-dashoffset:1}59.2%,100%{stroke-dashoffset:0}}
@keyframes taSt4{0%,61.6%{stroke-dashoffset:1}72.6%,100%{stroke-dashoffset:0}}
.ta-brush{animation:taBrush 5.6s ease-in-out infinite}
@keyframes taBrush{0%,8%{transform:translate(102px,10px)}8.0%{transform:translate(102px,10px)}19.0%{transform:translate(148px,10px)}21.4%{transform:translate(148px,27px)}32.4%{transform:translate(102px,27px)}34.8%{transform:translate(102px,44px)}45.8%{transform:translate(148px,44px)}48.2%{transform:translate(148px,61px)}59.2%{transform:translate(102px,61px)}61.6%{transform:translate(102px,78px)}72.6%{transform:translate(148px,78px)}77.6%,88%{transform:translate(160px,56px)}100%{transform:translate(102px,10px)}}}
@media (prefers-reduced-motion:reduce){.tile .ta-st{stroke-dashoffset:0}.tile .ta-brush{transform:translate(160px,56px)}}

.ta-k{transform-box:fill-box;transform-origin:center;animation-duration:6.4s;animation-timing-function:ease-out;animation-iteration-count:infinite}
@keyframes taK0{0%,4%{opacity:0;transform:translateX(16px) scale(.9)}11%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
@keyframes taK1{0%,16%{opacity:0;transform:scale(.2)}20%{opacity:1;transform:scale(1.25)}24%,88%{opacity:1;transform:scale(1)}95%,100%{opacity:0;transform:scale(1)}}
@keyframes taK2{0%,24%{opacity:0;transform:translateX(16px) scale(.9)}31%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
@keyframes taK3{0%,36%{opacity:0;transform:scale(.2)}40%{opacity:1;transform:scale(1.25)}44%,88%{opacity:1;transform:scale(1)}95%,100%{opacity:0;transform:scale(1)}}
@keyframes taK4{0%,44%{opacity:0;transform:translateX(16px) scale(.9)}51%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
.ta-q{animation:taQ 5s ease-in-out infinite}
@keyframes taQ{0%,44%{opacity:1}48%,90%{opacity:0}95%,100%{opacity:1}}
.ta-v{transform-box:fill-box;transform-origin:center;animation:taV 5s ease-in-out infinite}
@keyframes taV{0%,46%{opacity:0;transform:scale(.6)}53%{opacity:1;transform:scale(1.12)}58%,90%{opacity:1;transform:scale(1)}95%,100%{opacity:0;transform:scale(1)}}
.ta-upb{transform-box:fill-box;transform-origin:center;animation:taUpb 5s ease-in-out infinite}
.ta-upb rect,.ta-upb circle{animation:taUpbF 5s ease-in-out infinite}
.ta-col{animation:taRise 5s cubic-bezier(.3,1.3,.5,1) infinite,taWin 5s ease-in-out infinite}
.ta-rise{animation:taRise 5s cubic-bezier(.3,1.3,.5,1) infinite}
@keyframes taRise{0%,42%{transform:translateY(48px)}54%,90%{transform:none}97%,100%{transform:translateY(48px)}}
.ta-rise2{animation:taRise2 5.6s infinite}
@keyframes taRise2{0%,34%{transform:translateY(38px);animation-timing-function:cubic-bezier(.3,1.6,.55,1)}52%,88%{transform:none;animation-timing-function:cubic-bezier(.5,0,.75,0)}97%,100%{transform:translateY(38px)}}
.ta-col2{animation:taCol2 5.6s ease-in-out infinite}
@keyframes taCol2{0%,44%{fill:#fff}54%,88%{fill:#d9f7e6}97%,100%{fill:#fff}}
.ta-q2{animation:taQ2 5.6s ease-in-out infinite}@keyframes taQ2{0%,38%{opacity:1}44%,92%{opacity:0}98%,100%{opacity:1}}
.ta-v2{transform-box:fill-box;transform-origin:center;animation:taV2 5.6s ease-out infinite}
@keyframes taV2{0%,46%{opacity:0;transform:scale(.6)}53%{opacity:1;transform:scale(1.15)}58%,88%{opacity:1;transform:none}94%,100%{opacity:0}}
.ta-btn2{transform-box:fill-box;transform-origin:center;animation:taBtn2 5.6s ease-in-out infinite}.ta-btn2 circle{animation:taBtnF 5.6s ease-in-out infinite}
@keyframes taBtn2{0%,10%{transform:scale(1)}16%{transform:scale(1.08)}22%{transform:scale(1)}28%{transform:scale(1.08)}33%{transform:scale(.82)}38%,100%{transform:scale(1)}}
@keyframes taBtnF{0%,32%{fill:#fff}34%,88%{fill:#2fca72}96%,100%{fill:#fff}}
.ta-lvl{animation:taLvl 5.6s ease-in-out infinite}@keyframes taLvl{0%,40%{opacity:.55}54%,88%{opacity:.3}100%{opacity:.55}}
.ta-sp2 path{transform-box:fill-box;transform-origin:center;opacity:0;animation:taSp2 5.6s ease-out infinite}.ta-sp2 path:nth-child(2){animation-delay:.12s}.ta-sp2 path:nth-child(3){animation-delay:.24s}
@keyframes taSp2{0%,50%{opacity:0;transform:scale(.2) rotate(0)}56%{opacity:1;transform:scale(1.25) rotate(20deg)}66%{opacity:1;transform:scale(1) rotate(30deg)}80%,100%{opacity:0;transform:scale(.6) rotate(45deg)}}
.ta-ok2{transform-box:fill-box;transform-origin:center;animation:taOk2 5.6s ease-out infinite}
@keyframes taOk2{0%,54%{opacity:0;transform:scale(.3)}60%{opacity:1;transform:scale(1.2)}65%,88%{opacity:1;transform:scale(1)}94%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.tile .ta-rise2,.tile .ta-col2,.tile .ta-q2,.tile .ta-v2,.tile .ta-btn2,.tile .ta-btn2 circle,.tile .ta-ok2,.tile .ta-sp2 path,.tile .ta-lvl{animation:none}.tile .ta-q2{opacity:0}.tile .ta-col2{fill:#d9f7e6}.tile .ta-btn2 circle{fill:#2fca72}}
.ta-beam{transform-box:view-box;transform-origin:150px 38px;animation:taBeam 5s cubic-bezier(.4,1.5,.5,1) infinite}
@keyframes taBeam{0%,28%{transform:rotate(0)}44%,86%{transform:rotate(7deg)}96%,100%{transform:rotate(0)}}
.ta-panl{animation:taPanL 5s cubic-bezier(.4,1.5,.5,1) infinite}.ta-panr{animation:taPanR 5s cubic-bezier(.4,1.5,.5,1) infinite}
@keyframes taPanL{0%,28%{transform:none}44%,86%{transform:translate(1px,-10.7px)}96%,100%{transform:none}}
@keyframes taPanR{0%,28%{transform:none}44%,86%{transform:translate(-1px,10.7px)}96%,100%{transform:none}}
.ta-ok{transform-box:fill-box;transform-origin:center;animation:taOk 5s ease-in-out infinite}
@keyframes taOk{0%,54%{opacity:0;transform:scale(.3)}60%{opacity:1;transform:scale(1.2)}64%,88%{opacity:1;transform:scale(1)}93%,100%{opacity:0}}
@keyframes taUpb{0%,30%{transform:scale(1)}36%{transform:scale(.86)}42%,100%{transform:scale(1)}}
@keyframes taUpbF{0%,34%{fill:#fff}38%,90%{fill:#2fca72}96%,100%{fill:#fff}}
.ta-win{animation:taWin 5s ease-in-out infinite}
@keyframes taWin{0%,48%{stroke:#16172c;fill:#fff}54%,90%{stroke:#16172c;fill:#d9f7e6}96%,100%{stroke:#16172c;fill:#fff}}
@media (prefers-reduced-motion:reduce){.tile .ta-q{opacity:0}.tile .ta-upb rect,.tile .ta-upb circle{fill:#2fca72}.tile .ta-win,.tile .ta-col{fill:#d9f7e6}.tile .ta-col,.tile .ta-rise{animation:none}.tile .ta-beam{animation:none;transform:rotate(7deg)}.tile .ta-panl{animation:none;transform:translate(1px,-10.7px)}.tile .ta-panr{animation:none;transform:translate(-1px,10.7px)}}
@media (min-width:641px) and (max-height:900px){
  .hero{padding-block:8px 14px}
  .hero h1{font-size:clamp(2.2rem,min(5vw,7vh),4.3rem);margin:10px 0 10px}
  .globe{width:clamp(140px,24vh,230px)}
  .tile .art{height:clamp(110px,17vh,150px)}
}
.invlad{list-style:none;margin:12px 0 6px;padding:0;display:grid;gap:8px}
.invlad li{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px;padding:9px 12px;border-radius:14px;background:var(--surface-2);font-weight:700}
.invlad li b{display:grid;place-items:center;height:32px;border-radius:10px;background:var(--surface);font-family:var(--f-display);font-weight:900;box-shadow:0 0 0 2px var(--line)}
.invlad li.ok{background:color-mix(in srgb,var(--good) 18%,var(--surface))}.invlad li.ok b{background:var(--good);color:#fff;box-shadow:none}.invlad li i{font-style:normal;color:var(--good);font-weight:900}
.invn{margin:4px 0 0;text-align:center;color:var(--ink-2);font-weight:700;font-size:.9rem}
.ract2.r1{grid-template-columns:1fr;display:grid}

/* Üben: Karte im Stil einer echten Karte (Meer, helles Land, dünne Grenzen) */
.pf-map .pfa{position:static}
.pf-map .pfmap{position:absolute;inset:0;width:100%;height:100%;-webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,#000 45%,transparent 80%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,#000 45%,transparent 80%);mask-composite:intersect}
.pf-map .pfmap.pfw{-webkit-mask-image:linear-gradient(to bottom,#000 66%,transparent 90%);mask-image:linear-gradient(to bottom,#000 66%,transparent 90%)}
.pf-map .pfl,.pf-map .pgo{position:relative;z-index:2}.pf-map .pfl b{text-shadow:0 2px 6px rgba(10,40,90,.35)}.pf-map .pfl{margin-top:auto}
.pf-map{grid-template-rows:184px auto}@media (max-width:640px){.pf-map.pfwc{grid-template-rows:128px auto}.pf-map.pfwc .pfa{height:128px}}
.pfmap .cin{fill:#fff;stroke:rgba(22,23,44,.32);stroke-width:.35;stroke-linejoin:round}
.pfmap .cout{fill:#e9e6df;stroke:rgba(22,23,44,.12);stroke-width:.3}
.pfmap .pmh{fill:#7be0a0;stroke:#1d7a43;stroke-width:.6;stroke-linejoin:round;opacity:0;animation-duration:12s;animation-timing-function:linear;animation-iteration-count:infinite;animation-delay:0s}
@keyframes pmHl0{0%,10%{opacity:0}13%,94%{opacity:1}100%{opacity:0}}
@keyframes pmHl1{0%,35%{opacity:0}38%,94%{opacity:1}100%{opacity:0}}
@keyframes pmHl2{0%,60%{opacity:0}63%,94%{opacity:1}100%{opacity:0}}
@keyframes pmHl3{0%,85%{opacity:0}88%,94%{opacity:1}100%{opacity:0}}
.ppin .ppd{opacity:0;animation:ppTap 12s ease-out infinite;animation-delay:calc(var(--i)*3s)}
.ppin .prip2{fill:none;stroke:#fff;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;animation:ppRip 12s ease-out infinite;animation-delay:calc(var(--i)*3s)}
@keyframes ppTap{0%,3%{opacity:0;transform:translate(16px,20px)}8%{opacity:1;transform:translate(0,0) scale(1)}10%{transform:scale(.86)}12%{transform:scale(1)}20%{opacity:1;transform:none}24%,100%{opacity:0;transform:translate(10px,12px)}}
@keyframes ppRip{0%,9.5%{opacity:0;transform:scale(.3)}10.5%{opacity:1}16%,100%{opacity:0;transform:scale(1.8)}}
.pf-map .pmq{left:50%;top:12px;transform:translateX(-50%);gap:8px;padding:6px 14px 6px 8px;font-size:.95rem;border:2px solid rgba(22,23,44,.08);box-shadow:0 4px 10px rgba(22,23,44,.18);animation-name:pmQ3;z-index:3}
.pf-map .pmq img{width:26px;height:18px;border-radius:3px;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
@keyframes pmQ3{0%{opacity:0;transform:translate(-50%,-8px)}3%,22%{opacity:1;transform:translateX(-50%)}25%,100%{opacity:0;transform:translate(-50%,-4px)}}
@media (prefers-reduced-motion:reduce){.pf-map .pmh,.pf-map .ppd,.pf-map .prip2{animation:none!important}.pf-map .pmh:first-of-type,.pf-map .ppin:first-of-type .ppd{opacity:1}}

.offs,.offs *{animation-play-state:paused!important}
.kban{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:14px;font-size:.84rem;color:var(--ink-2)}.kban b{margin-right:2px}.kban span{display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 4px;border-radius:999px;background:var(--surface-2);border:1.5px solid var(--line);font-weight:700;text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--bad) 70%,transparent);text-decoration-thickness:2px}.kban img{border-radius:2px;opacity:.8}
/* Bonus: Grenzen zeichnen */
.sladder{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:4px 0 12px}
.sladder span{display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 4px;border-radius:14px;background:var(--surface-2);border:2px solid var(--line);color:var(--ink-3)}
.sladder b{font-size:.75rem}.sladder i{font:900 1.35rem/1.1 var(--f-display);font-style:normal}.sladder small{font-size:.72rem;font-weight:700}
.sladder span.ok{color:var(--ink);background:color-mix(in srgb,#ffcb2e 22%,var(--surface))}.sladder span.cur{border-color:#ffcb2e;box-shadow:0 3px 0 #b48700}
.smult{display:flex;align-items:center;justify-content:center;gap:10px;margin:0}.smult b{padding:4px 12px;border-radius:12px;background:#16172c;color:#ffcb2e;font:900 1.5rem var(--f-display)}.smult span{font-weight:800;text-align:left}
.shr{display:flex;align-items:center;gap:10px}.smchip{padding:3px 10px;border-radius:999px;background:#16172c;color:#ffcb2e;font:900 .9rem var(--f-display)}
.strichcard{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:8px;margin-top:18px;padding:14px 22px 14px 8px;border-radius:calc(var(--r) + 4px);background:radial-gradient(120% 140% at 15% 20%,#2c2f5c 0%,#16172c 62%);color:#fff;text-decoration:none;border:2px solid #ffcb2e;box-shadow:0 6px 0 #b48700,0 18px 40px rgba(22,23,44,.25);overflow:hidden;transition:transform .12s,box-shadow .12s}
.strichcard::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,transparent 0 22px,rgba(255,255,255,.025) 22px 44px);pointer-events:none}
.strichcard:hover{transform:translateY(-2px);box-shadow:0 8px 0 #b48700,0 22px 44px rgba(22,23,44,.3)}
.strichcard:active{transform:translateY(4px);box-shadow:0 2px 0 #b48700}
.sc-art{display:block;position:relative}.sc-art svg{display:block;width:100%;height:auto;max-height:230px;overflow:hidden}
.sa-land{fill:#fff;stroke:#16172c;stroke-width:3;stroke-linejoin:round;filter:drop-shadow(0 5px 0 rgba(0,0,0,.35))}
.sa-oth{fill:rgba(255,255,255,.14);stroke:rgba(255,255,255,.25);stroke-width:1.5}
.sa-glow{fill:none;stroke:#ffcb2e;stroke-width:12;stroke-linecap:round;stroke-linejoin:round;opacity:.0;stroke-opacity:.6;animation:saGlow 4.2s ease-in-out infinite}
.sa-line{fill:none;stroke:#ff7a4c;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:saDraw 4.2s cubic-bezier(.6,.1,.4,.9) infinite}
.sa-pen{offset-rotate:0deg;offset-anchor:0 0;offset-distance:0%;animation:saPen 4.2s cubic-bezier(.6,.1,.4,.9) infinite}
.sa-sp path{fill:#ffcb2e;transform-box:fill-box;transform-origin:center;animation:saSp 2.4s ease-in-out infinite}.sa-sp path:nth-child(2){animation-delay:.8s}.sa-sp path:nth-child(3){animation-delay:1.6s}
@keyframes saDraw{0%{stroke-dashoffset:1}55%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
@keyframes saPen{0%{offset-distance:0%;opacity:1}55%{offset-distance:100%;opacity:1}70%,100%{offset-distance:100%;opacity:0}}
@keyframes saGlow{0%,50%{opacity:0}62%{opacity:.75}85%{opacity:.3}100%{opacity:0}}
@keyframes saSp{0%,100%{transform:scale(.4);opacity:.3}50%{transform:scale(1.15);opacity:1}}
.sc-txt{position:relative;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.sc-k{font:800 .74rem/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:#ffcb2e}
.sc-txt>b{font:900 clamp(1.7rem,3.6vw,2.5rem)/1 var(--f-display);letter-spacing:-.01em}
.sc-txt>small{font-size:.95rem;line-height:1.35;color:#c9cbe6;max-width:34ch}
.sc-st{margin-top:6px;display:inline-flex;padding:9px 16px;border-radius:999px;background:#ffcb2e;color:#16172c;font-weight:900;box-shadow:0 4px 0 #b48700}
.strichcard:not(.open) .sc-st{background:rgba(255,255,255,.12);color:#fff;box-shadow:none}
.slock{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.sreq{display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 6px;border-radius:999px;background:rgba(255,255,255,.1);font-size:.82rem;font-weight:700;color:#e3e4f5}
.sreq i{font-style:normal;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.14);font-size:.75rem}
.sreq.ok{background:rgba(47,202,114,.2);color:#b9f3d2}.sreq.ok i{background:#2fca72;color:#16172c;font-weight:900}
.slock.big{justify-content:center}.slock.big .sreq{background:var(--surface-2);color:var(--ink);font-size:.92rem;padding:8px 14px 8px 8px}.slock.big .sreq i{background:var(--surface);box-shadow:0 0 0 2px var(--line)}
.slock.big .sreq.ok{background:color-mix(in srgb,var(--good) 18%,var(--surface));}.slock.big .sreq.ok i{background:var(--good);color:#16172c}
.slockbox .sc-art,.sstart .sc-art{width:min(300px,80%);margin:0 auto;background:radial-gradient(120% 140% at 15% 20%,#2c2f5c,#16172c 62%);border-radius:20px;padding:6px}
.slockbox .lockart svg{filter:grayscale(.2)}
.sbtns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.shead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 10px}
.sdots{display:flex;gap:6px}.sdots i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:900 .85rem var(--f-display);font-style:normal;background:var(--surface-2);border:2px solid var(--line)}
.sdots i.c{border-color:#ffcb2e;box-shadow:0 0 0 3px color-mix(in srgb,#ffcb2e 35%,transparent)}.sdots i.d{background:#ffcb2e;color:#16172c;border-color:#b48700}
.sdots i.pop{animation:pp .5s cubic-bezier(.25,1.6,.45,1)}
.sbox{background:var(--surface);border:var(--bw) solid var(--line);border-radius:var(--r);box-shadow:0 4px 0 var(--sh);overflow:hidden}
.sstage{position:relative}
.smap{display:block;width:100%;height:auto;max-height:66vh;touch-action:none;user-select:none;-webkit-user-select:none;cursor:crosshair;background:var(--sea)}
.smap .ssea{fill:var(--sea)}.smap .sland{fill:var(--land-mute)}.smap .soth{fill:none;stroke:var(--ink-3);stroke-width:.8;opacity:.5}
.smap .spair{fill:var(--land);stroke:var(--land-line);stroke-width:2.2;stroke-linejoin:round}
.smap .suser{fill:none;stroke:#ff7a4c;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.smap .struth{fill:none;stroke:#2fca72;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.smap .struth.on{opacity:1;animation:sTruth .9s ease-out forwards}
@keyframes sTruth{to{stroke-dashoffset:0}}
.smap.rev .suser{stroke-opacity:.85}
.smap.mini .struth.on{animation:none;stroke-dashoffset:0}.smap.mini{cursor:default;max-height:none}
.slab rect{fill:var(--surface);stroke:var(--land-line);stroke-width:2;filter:drop-shadow(0 2px 0 rgba(22,23,44,.25))}
.slab text{font:800 14px var(--f-body);fill:var(--ink)}.slab{pointer-events:none}.slab .slk{stroke:var(--land-line);stroke-width:1.6;stroke-dasharray:3 3}.slab .sld{fill:var(--land-line)}
.shint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:#16172c;color:#fff;font-weight:800;font-size:.92rem;white-space:nowrap;max-width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis;pointer-events:none;box-shadow:0 4px 0 rgba(0,0,0,.25);transition:opacity .25s,transform .25s}
.shint.gone{opacity:0;transform:translate(-50%,10px)}
.sres{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:10px 18px 10px 10px;border-radius:18px;background:var(--surface);border:2px solid var(--land-line);box-shadow:0 5px 0 var(--sh);animation:pp .5s cubic-bezier(.25,1.6,.45,1) both;white-space:nowrap}
.sres>span{display:flex;flex-direction:column;line-height:1.2}.sres small{color:var(--ink-2);font-weight:700}
.spts{display:grid;place-items:center;min-width:54px;height:54px;border-radius:14px;font:900 1.6rem var(--f-display);color:#16172c}
.spts.pg{background:var(--good)}.spts.pm{background:#ffcb2e}.spts.pb{background:#ff9d8a}
.sbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;border-top:var(--bw) solid var(--line)}
.stot{font-weight:800;color:var(--ink-2)}
.sthumbs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.sthumb{border-radius:12px;overflow:hidden;border:2px solid var(--line);background:var(--surface-2)}
.sthumb>span{display:flex;align-items:center;justify-content:space-between;padding:4px 7px}.sthumb .sfl{display:flex;gap:3px}.sthumb img{border-radius:2px}
.sthumb .smap .suser{stroke-width:7}.sthumb .smap .struth{stroke-width:7}
@media (max-width:640px){.strichcard{grid-template-columns:1fr;padding:6px 16px 18px}.strichcard .sc-art svg{max-height:150px;margin:0 auto}.sthumbs{grid-template-columns:repeat(3,minmax(0,1fr))}.sbar .btn{padding:0 14px}.shint{font-size:.82rem}}