:root{
  --ink:#1F2447; --muted:#5C6386; --bg:#EAF5FF; --bg2:#F7FBFF; --paper:#FFFFFF; --line:#D5E4F3;
  --meadow:#2FAE72; --meadow-dk:#1B7D50; --meadow-lt:#DDF5E8;
  --gold:#FFC23D; --gold-dk:#C98700; --gold-lt:#FFF1CC;
  --berry:#F0437A; --berry-lt:#FFE3EC;
  --marker:#FFE36E; --sky:#9DD3FF;
  --shadow:0 1px 0 rgba(31,36,71,.06), 0 8px 24px -12px rgba(31,36,71,.25);
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-io:cubic-bezier(.77,0,.175,1);
  --display:"Grandstander","Comic Sans MS","Chalkboard SE",system-ui,sans-serif;
  --body:"Lexend","Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#EEF1FF; --muted:#A9B0D6; --bg:#121731; --bg2:#171D3B; --paper:#1F2648; --line:#2E3764;
    --meadow:#3CC885; --meadow-dk:#7FE0B1; --meadow-lt:#173E33; --gold-lt:#40361A; --berry-lt:#4A1F33;
    --marker:#8A7417; --shadow:0 8px 24px -12px rgba(0,0,0,.6); color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --ink:#EEF1FF; --muted:#A9B0D6; --bg:#121731; --bg2:#171D3B; --paper:#1F2648; --line:#2E3764;
  --meadow:#3CC885; --meadow-dk:#7FE0B1; --meadow-lt:#173E33; --gold-lt:#40361A; --berry-lt:#4A1F33;
  --marker:#8A7417; --shadow:0 8px 24px -12px rgba(0,0,0,.6); color-scheme: dark;
}
:root{ box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); }
html{ scroll-padding-top:env(safe-area-inset-top,0px); height:100%; }
*,*::before,*::after{ box-sizing:inherit; }
body{ margin:0; height:100%; background:var(--bg); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.5;
  -webkit-tap-highlight-color:transparent; overscroll-behavior:none; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; touch-action:manipulation; }
button:focus-visible, [tabindex]:focus-visible{ outline:3px solid var(--sky); outline-offset:2px; }
img,svg{ max-width:100%; }
h1,h2,h3{ font-family:var(--display); font-weight:700; line-height:1.15; margin:0; letter-spacing:-.01em; }
#app{ height:100%; display:flex; flex-direction:column; }

/* ---------- Top bar ---------- */
.top{ display:flex; align-items:center; gap:12px; padding:10px 18px; background:var(--paper); border-bottom:2px solid var(--line); position:relative; z-index:5; }
.top .brand{ display:flex; align-items:center; gap:10px; font-family:var(--display); font-size:21px; font-weight:700; }
.top .spacer{ flex:1; }
.chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px 6px 8px; border-radius:999px; background:var(--bg2); border:2px solid var(--line); font-weight:600; font-size:16px; white-space:nowrap; }
.chip.gold{ background:var(--gold-lt); border-color:var(--gold); }
.chip.flame{ background:var(--berry-lt); border-color:var(--berry); }
.iconbtn{ width:42px; height:42px; border-radius:14px; display:grid; place-items:center; background:var(--bg2); border:2px solid var(--line); transition:transform .12s var(--ease-out); }
.iconbtn:active{ transform:scale(.94); }
.back{ display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px; background:var(--bg2); border:2px solid var(--line); font-weight:600; }
.back:active{ transform:scale(.97); }

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 22px; border-radius:18px; font-weight:700; font-size:18px;
  background:var(--meadow); color:#fff; box-shadow:0 4px 0 var(--meadow-dk); transition:transform .12s var(--ease-out), box-shadow .12s var(--ease-out), opacity .2s; }
.btn:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--meadow-dk); }
.btn[disabled]{ opacity:.45; pointer-events:none; }
.btn.gold{ background:var(--gold); color:#3A2A00; box-shadow:0 4px 0 var(--gold-dk); }
.btn.gold:active{ box-shadow:0 1px 0 var(--gold-dk); }
.btn.ghost{ background:var(--bg2); color:var(--ink); box-shadow:0 4px 0 var(--line); border:2px solid var(--line); }
.btn.small{ padding:10px 16px; font-size:16px; border-radius:14px; }
.btn.wide{ width:100%; }

/* ---------- Hub ---------- */
.hub{ flex:1; overflow:auto; padding:18px; }
.hub-grid{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns: 1.55fr 1fr; gap:18px; }
@media (max-width:860px){ .hub-grid{ grid-template-columns:1fr; } }
.scene{ position:relative; border-radius:30px; overflow:hidden; min-height:300px; background:linear-gradient(#BFE6FF, #E9F7FF 62%); box-shadow:var(--shadow); }
.scene svg.land{ position:absolute; inset:auto 0 0 0; width:100%; height:auto; display:block; }
.scene .hello{ position:relative; z-index:2; padding:22px 24px; max-width:62%; color:#1F2447; }
.scene .hello h1{ font-size:clamp(28px,4vw,40px); }
.scene .hello p{ margin:8px 0 0; font-size:17px; color:#3A4170; }
.panel{ background:var(--paper); border-radius:26px; padding:20px; box-shadow:var(--shadow); border:2px solid var(--line); }
.panel h2{ font-size:22px; margin-bottom:10px; }
.mission-card .kicker{ font-size:14px; color:var(--muted); font-weight:600; }
.mission-card h3{ font-size:26px; margin:4px 0 6px; }
.mission-card p{ margin:0 0 16px; color:var(--muted); }
.fund{ margin-top:16px; }
.fund-row{ display:flex; justify-content:space-between; font-size:15px; font-weight:600; margin-bottom:6px; }
.bar{ height:16px; border-radius:999px; background:var(--bg2); border:2px solid var(--line); overflow:hidden; }
.bar > i{ display:block; height:100%; background:repeating-linear-gradient(-45deg,var(--gold) 0 12px,#FFD36B 12px 24px); border-radius:999px; transition:width .8s var(--ease-out); }
.fund small{ display:block; color:var(--muted); margin-top:6px; font-size:14px; }

.trail{ grid-column:1/-1; }
.trail-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; position:relative; }
@media (max-width:860px){ .trail-row{ grid-template-columns:1fr 1fr; } }
.case{ position:relative; text-align:left; padding:16px; border-radius:22px; background:var(--bg2); border:2px solid var(--line); min-height:150px; display:flex; flex-direction:column; gap:6px; transition:transform .15s var(--ease-out); }
.case:active{ transform:scale(.98); }
.case .num{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-family:var(--display); font-weight:700; background:var(--paper); border:2px solid var(--line); }
.case h3{ font-size:19px; }
.case .meta{ font-size:14px; color:var(--muted); margin-top:auto; }
.case.done{ background:var(--meadow-lt); border-color:var(--meadow); }
.case.done .num{ background:var(--meadow); color:#fff; border-color:var(--meadow); }
.case.open{ background:var(--gold-lt); border-color:var(--gold); box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 30%,transparent); }
.case.locked{ opacity:.6; }
.case .lockline{ font-size:14px; font-weight:600; color:var(--muted); }

.arcade-strip{ grid-column:1/-1; }
.games{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:860px){ .games{ grid-template-columns:1fr 1fr; } }
.game{ position:relative; border-radius:22px; padding:14px; text-align:left; border:2px solid var(--line); background:var(--bg2); display:flex; flex-direction:column; gap:8px; min-height:170px; transition:transform .15s var(--ease-out); }
.game:active{ transform:scale(.98); }
.game .art{ height:74px; border-radius:16px; display:grid; place-items:center; font-size:40px; }
.game h3{ font-size:18px; }
.game .cost{ display:flex; align-items:center; gap:6px; font-weight:700; font-size:15px; margin-top:auto; }
.game.locked .art{ filter:grayscale(1) opacity(.5); }
.game.locked .cost{ color:var(--muted); font-weight:600; }

/* ---------- Reader ---------- */
.reader{ flex:1; min-height:0; display:grid; grid-template-columns: minmax(0,1.35fr) minmax(340px,1fr); }
@media (max-width:900px){ .reader{ grid-template-columns:1fr; grid-template-rows: minmax(0,1fr) auto; } }
.textcol{ overflow:auto; padding:22px clamp(16px,4vw,48px) 60px; background:var(--paper); -webkit-overflow-scrolling:touch; }
.textcol .series{ font-size:14px; font-weight:600; color:var(--muted); }
.textcol h1{ font-size:clamp(28px,3.4vw,38px); margin:4px 0 18px; }
.para{ display:grid; grid-template-columns:34px 1fr; gap:6px; margin:0 0 18px; max-width:66ch; }
.para .pn{ font-family:var(--display); font-weight:700; color:var(--muted); font-size:15px; padding-top:4px; text-align:right; padding-right:8px; border-right:2px solid var(--line); }
.para p{ margin:0; font-size:19.5px; line-height:1.75; }
.s{ border-radius:6px; padding:1px 0; transition:background-color .15s ease; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.picking .s{ cursor:pointer; background-image:linear-gradient(transparent 92%, color-mix(in srgb,var(--sky) 55%,transparent) 92%); }
.picking .s:hover{ background-color:color-mix(in srgb,var(--sky) 22%,transparent); }
.s.sel{ background-color:var(--marker) !important; background-image:none; }
.s.given{ background-color:var(--berry-lt); box-shadow:inset 0 -3px 0 var(--berry); background-image:none; }
.s.ok{ background-color:color-mix(in srgb,var(--meadow) 28%,transparent) !important; background-image:none; }
.s.bad{ animation:shake .4s var(--ease-io); background-color:var(--berry-lt) !important; }
.s.flash{ animation:flash 1.6s ease; }
@keyframes shake{ 0%,100%{ transform:none } 25%{ transform:translateX(-4px) } 75%{ transform:translateX(4px) } }
@keyframes flash{ 0%,100%{ background-color:transparent } 20%,60%{ background-color:var(--marker) } }
.endmark{ display:flex; align-items:center; gap:10px; color:var(--muted); font-weight:600; margin:10px 0 0 40px; max-width:60ch; }

.side{ border-left:2px solid var(--line); background:var(--bg); overflow:auto; padding:20px; display:flex; flex-direction:column; gap:14px; }
@media (max-width:900px){ .side{ border-left:0; border-top:2px solid var(--line); max-height:46vh; box-shadow:0 -10px 24px -16px rgba(31,36,71,.4); } }
.kas{ display:flex; gap:12px; align-items:flex-start; }
.kas .bubble{ position:relative; background:var(--paper); border:2px solid var(--line); border-radius:18px; padding:12px 14px; font-size:16.5px; flex:1; }
.kas .bubble::before{ content:""; position:absolute; left:-9px; top:18px; width:14px; height:14px; background:var(--paper); border-left:2px solid var(--line); border-bottom:2px solid var(--line); transform:rotate(45deg); }
.qhead{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.dots{ display:flex; gap:6px; }
.dots i{ width:10px; height:10px; border-radius:50%; background:var(--line); }
.dots i.d{ background:var(--meadow); } .dots i.c{ background:var(--gold); }
.badge{ font-size:13.5px; font-weight:700; padding:4px 10px; border-radius:999px; }
.badge.w{ background:var(--meadow-lt); color:var(--meadow-dk); }
.badge.v{ background:var(--berry-lt); color:var(--berry); }
.qtext{ font-family:var(--display); font-size:23px; font-weight:700; line-height:1.25; }
.slots{ display:flex; flex-direction:column; gap:8px; }
.slot{ display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:16px; border:2px dashed var(--line); background:var(--paper); min-height:54px; text-align:left; font-size:15.5px; line-height:1.4; width:100%; }
.slot .tag{ flex:none; font-weight:700; font-size:13px; padding:3px 8px; border-radius:999px; background:var(--bg2); border:2px solid var(--line); }
.slot.filled{ border-style:solid; border-color:var(--gold); background:var(--gold-lt); }
.slot.given{ border-style:solid; border-color:var(--berry); background:var(--berry-lt); }
.slot.ok{ border-style:solid; border-color:var(--meadow); background:var(--meadow-lt); }
.slot .empty{ color:var(--muted); }
.plus{ text-align:center; font-family:var(--display); font-size:22px; font-weight:700; color:var(--muted); line-height:1; }
.opts{ display:flex; flex-direction:column; gap:10px; }
.opt{ text-align:left; padding:14px 16px; border-radius:16px; background:var(--paper); border:2px solid var(--line); font-size:17px; font-weight:500; box-shadow:0 3px 0 var(--line); transition:transform .12s var(--ease-out); }
.opt:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--line); }
.opt.bad{ border-color:var(--berry); background:var(--berry-lt); animation:shake .4s var(--ease-io); opacity:.7; }
.opt.ok{ border-color:var(--meadow); background:var(--meadow-lt); font-weight:700; }
.explain{ background:var(--paper); border:2px solid var(--meadow); border-radius:18px; padding:14px 16px; font-size:16px; }
.explain b{ font-family:var(--display); font-size:19px; display:block; margin-bottom:4px; color:var(--meadow-dk); }
.reward{ display:flex; align-items:center; gap:8px; font-family:var(--display); font-size:22px; font-weight:700; color:var(--gold-dk); }
.reward svg{ animation:pop .5s var(--ease-out) both; }
@keyframes pop{ from{ transform:scale(.4) rotate(-25deg); opacity:0 } to{ transform:none; opacity:1 } }
.row{ display:flex; gap:10px; flex-wrap:wrap; }

/* ---------- Done ---------- */
.done-wrap{ flex:1; overflow:auto; display:grid; place-items:center; padding:24px; }
.done-card{ max-width:620px; width:100%; text-align:center; background:var(--paper); border-radius:32px; padding:30px 26px; box-shadow:var(--shadow); border:2px solid var(--line); }
.done-card h1{ font-size:36px; margin:8px 0; }
.bigreward{ display:flex; justify-content:center; align-items:center; gap:10px; font-family:var(--display); font-size:44px; font-weight:700; color:var(--gold-dk); margin:10px 0; }
.cliff{ margin:18px 0; padding:18px; border-radius:22px; background:#1F2447; color:#EEF1FF; text-align:left; }
.cliff b{ font-family:var(--display); font-size:19px; display:block; margin-bottom:6px; color:var(--gold); }
.unlock{ margin:12px 0; padding:14px; border-radius:18px; background:var(--gold-lt); border:2px solid var(--gold); font-weight:600; }

/* ---------- Arcade & games ---------- */
.arcade{ flex:1; overflow:auto; padding:18px; }
.arcade-inner{ max-width:1100px; margin:0 auto; }
.arcade-head{ display:flex; align-items:end; justify-content:space-between; gap:12px; margin:6px 0 16px; flex-wrap:wrap; }
.arcade-head h1{ font-size:34px; }
.arcade-head p{ margin:4px 0 0; color:var(--muted); }
.stage{ flex:1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:14px; gap:12px; background:var(--bg); }
.stage canvas{ background:var(--paper); border-radius:24px; box-shadow:var(--shadow); touch-action:none; max-width:100%; }
.hud{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:center; }
.pad{ display:grid; grid-template-columns:repeat(3,64px); grid-template-rows:repeat(2,56px); gap:8px; }
.pad button{ border-radius:16px; background:var(--paper); border:2px solid var(--line); font-size:24px; box-shadow:0 3px 0 var(--line); }
.pad button:active{ transform:translateY(2px); box-shadow:none; }
.memory{ display:grid; grid-template-columns:repeat(4, minmax(64px,110px)); gap:10px; }
.card{ aspect-ratio:1; perspective:600px; }
.card .in{ position:relative; width:100%; height:100%; transition:transform .35s var(--ease-out); transform-style:preserve-3d; }
.card.up .in{ transform:rotateY(180deg); }
.card .f, .card .b{ position:absolute; inset:0; border-radius:18px; display:grid; place-items:center; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.card .f{ background:var(--meadow); border:3px solid var(--meadow-dk); }
.card .b{ background:var(--paper); border:3px solid var(--line); transform:rotateY(180deg); font-size:clamp(30px,6vw,48px); }
.card.gone .b{ border-color:var(--meadow); background:var(--meadow-lt); }
.c4{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; padding:10px; background:#2B5FD0; border-radius:22px; width:min(92vw,520px); }
.c4 button{ aspect-ratio:1; border-radius:50%; background:var(--bg); position:relative; overflow:hidden; }
.c4 button i{ position:absolute; inset:6%; border-radius:50%; }
.c4 button i.p1{ background:var(--berry); animation:drop .35s var(--ease-out); }
.c4 button i.p2{ background:var(--gold); animation:drop .35s var(--ease-out); }
.c4 button i.win{ box-shadow:0 0 0 4px #fff inset; }
@keyframes drop{ from{ transform:translateY(-300%) } to{ transform:none } }
.overlay{ position:fixed; inset:0; background:rgba(18,23,49,.55); display:grid; place-items:center; z-index:50; padding:20px; animation:fade .2s ease; }
@keyframes fade{ from{ opacity:0 } }
.modal{ background:var(--paper); border-radius:28px; padding:24px; max-width:460px; width:100%; box-shadow:var(--shadow); text-align:center; animation:rise .28s var(--ease-out); }
@keyframes rise{ from{ transform:translateY(12px) scale(.97); opacity:0 } }
.modal h2{ font-size:26px; margin:8px 0; }
.modal p{ color:var(--muted); margin:0 0 16px; }

/* ---------- Parent ---------- */
.parent{ flex:1; overflow:auto; padding:18px; }
.parent-inner{ max-width:980px; margin:0 auto; display:grid; gap:16px; }
.stats{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:700px){ .stats{ grid-template-columns:1fr; } }
.stat .big{ font-family:var(--display); font-size:44px; font-weight:700; }
.stat p{ margin:2px 0 0; color:var(--muted); font-size:15px; }
.table{ width:100%; border-collapse:collapse; font-size:15px; }
.table-wrap{ overflow-x:auto; }
.table th, .table td{ text-align:left; padding:9px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
.table th{ color:var(--muted); font-weight:600; }
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.field input, .field select, .field textarea{ font:inherit; font-size:16px; padding:10px 12px; border-radius:12px; border:2px solid var(--line); background:var(--bg2); color:var(--ink); }
.pinpad{ display:grid; grid-template-columns:repeat(3,72px); gap:10px; justify-content:center; margin-top:12px; }
.pinpad button{ height:64px; border-radius:18px; background:var(--bg2); border:2px solid var(--line); font-size:24px; font-weight:700; }
.pindots{ display:flex; gap:10px; justify-content:center; margin:10px 0; }
.pindots i{ width:16px; height:16px; border-radius:50%; border:2px solid var(--muted); }
.pindots i.f{ background:var(--ink); border-color:var(--ink); }
.toast{ position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:#1F2447; color:#fff; padding:12px 18px; border-radius:16px; font-weight:600; z-index:60; animation:rise .25s var(--ease-out); max-width:90vw; text-align:center; }
.fly{ position:fixed; z-index:70; pointer-events:none; animation:fly .9s var(--ease-io) forwards; }
@keyframes fly{ to{ transform:translate(var(--dx),var(--dy)) scale(.5); opacity:.2 } }
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* =================== v1.0 Ergänzungen =================== */
.top .rankchip{ background:linear-gradient(135deg,#2B2F66,#4B3F9E); color:#fff; border-color:transparent; }
.chip.star{ background:#EEF0FF; border-color:#AEB6FF; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .chip.star{ background:#262C5C; border-color:#4C57B8; } }
@media (max-width:640px){ .top .brand span.t{ display:none; } .chip.hide-sm{ display:none; } .top{ gap:8px; padding:10px 12px; } }

/* Login */
.login{ flex:1; display:grid; place-items:center; padding:24px; background:radial-gradient(120% 90% at 50% 0%, #CDEBFF 0%, var(--bg) 60%); }
.login-card{ width:100%; max-width:440px; background:var(--paper); border-radius:32px; padding:28px 24px; box-shadow:var(--shadow); border:2px solid var(--line); text-align:center; }
.login-card h1{ font-size:34px; margin:6px 0 4px; }
.login-card p{ color:var(--muted); margin:0 0 14px; }
.tabs{ display:flex; background:var(--bg2); border:2px solid var(--line); border-radius:16px; padding:4px; gap:4px; margin:14px 0; }
.tabs button{ flex:1; padding:10px; border-radius:12px; font-weight:700; color:var(--muted); }
.tabs button.on{ background:var(--paper); color:var(--ink); box-shadow:0 2px 0 var(--line); }
.codedots{ display:flex; gap:10px; justify-content:center; margin:8px 0 4px; }
.codedots i{ width:18px; height:18px; border-radius:50%; border:3px solid var(--line); transition:transform .15s var(--ease-out), background-color .15s; }
.codedots i.f{ background:var(--meadow); border-color:var(--meadow); transform:scale(1.1); }
.codedots.err{ animation:shake .4s var(--ease-io); }
.login .pinpad{ grid-template-columns:repeat(3,80px); }
.login .pinpad button{ height:70px; font-family:var(--display); font-size:28px; box-shadow:0 4px 0 var(--line); }
.login .pinpad button:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--line); }
.err-text{ color:var(--berry); font-weight:600; min-height:24px; margin-top:6px; }

/* Rang-Karte */
.rank-card{ display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center; }
.ring{ width:92px; height:92px; position:relative; }
.ring svg{ transform:rotate(-90deg); }
.ring .lvl{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--display); font-weight:700; font-size:30px; }
.rank-card h3{ font-size:22px; }
.rank-card p{ margin:4px 0 0; color:var(--muted); font-size:15px; }
.next-unlock{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.next-unlock span{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:12px; background:var(--bg2); border:2px dashed var(--line); font-size:14px; font-weight:600; color:var(--muted); }

/* Spiel-Kacheln neu */
.games{ grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); }
.gtile{ position:relative; border-radius:24px; overflow:hidden; text-align:left; display:flex; flex-direction:column; min-height:210px; background:var(--paper); border:2px solid var(--line); box-shadow:0 5px 0 var(--line); transition:transform .15s var(--ease-out), box-shadow .15s var(--ease-out); }
.gtile:active{ transform:translateY(4px); box-shadow:0 1px 0 var(--line); }
.gtile .gart{ height:112px; display:grid; place-items:center; font-size:56px; position:relative; }
.gtile .gart::after{ content:""; position:absolute; inset:0; background:radial-gradient(80% 60% at 30% 20%, rgba(255,255,255,.45), transparent 60%); }
.gtile .gbody{ padding:12px 14px 14px; display:flex; flex-direction:column; gap:4px; flex:1; }
.gtile h3{ font-size:18px; }
.gtile .gdesc{ font-size:14px; color:var(--muted); }
.gtile .gfoot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px; font-weight:700; font-size:15px; }
.gtile .rec{ font-size:13px; color:var(--muted); font-weight:600; }
.gtile.locked .gart{ filter:grayscale(1) blur(1.5px) opacity(.55); }
.gtile.locked .lockbadge{ position:absolute; top:12px; right:12px; z-index:2; background:rgba(31,36,71,.85); color:#fff; font-size:13px; font-weight:700; padding:5px 10px; border-radius:999px; }
.gtile .newbadge{ position:absolute; top:12px; left:12px; z-index:2; background:var(--berry); color:#fff; font-size:13px; font-weight:700; padding:5px 10px; border-radius:999px; }
.chip.ticket{ background:#E6FBF1; border-color:var(--meadow); }
#confetti{ position:fixed; inset:0; pointer-events:none; z-index:80; }
.rankup .badge-big{ width:120px; height:120px; margin:6px auto; border-radius:50%; display:grid; place-items:center; font-family:var(--display); font-size:52px; font-weight:700; color:#fff; background:conic-gradient(from 0deg,#FFC23D,#F0437A,#7C6CFF,#2FAE72,#FFC23D); box-shadow:0 0 0 8px var(--paper), 0 0 0 11px var(--gold); animation:pop .6s var(--ease-out) both; }
.rankup .unl{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:10px 0 16px; }
.rankup .unl div{ padding:10px 14px; border-radius:16px; background:var(--gold-lt); border:2px solid var(--gold); font-weight:700; }
.gamewrap{ width:100%; max-width:960px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.simon{ display:grid; grid-template-columns:repeat(2, minmax(120px,190px)); gap:14px; }
.simon button{ aspect-ratio:1; border-radius:32px; font-size:64px; box-shadow:0 6px 0 rgba(0,0,0,.18); transition:transform .1s, filter .1s; filter:saturate(.7) brightness(.9); }
.simon button.lit{ filter:saturate(1.25) brightness(1.18); transform:scale(1.05); }
.simon button:active{ transform:scale(.97); }
.whack{ display:grid; grid-template-columns:repeat(3, minmax(64px,150px)); gap:clamp(8px,3vw,14px); padding:clamp(10px,4vw,18px); border-radius:30px; background:#5BBE7B; }
.hole{ aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 50% 70%, #6B4A2B 0 55%, #8A6238 56% 100%); position:relative; overflow:hidden; box-shadow:inset 0 8px 0 rgba(0,0,0,.25); }
.hole span{ position:absolute; left:0; right:0; bottom:-80%; text-align:center; font-size:clamp(40px,8vw,64px); transition:bottom .16s var(--ease-out); pointer-events:none; }
.hole.up span{ bottom:8%; }
.g2048{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:12px; border-radius:24px; background:#C9B28A; width:min(92vw,440px); aspect-ratio:1; touch-action:none; }
.g2048 div{ border-radius:16px; background:rgba(255,255,255,.35); display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:clamp(26px,7vw,42px); line-height:1; }
.g2048 div small{ font-family:var(--display); font-size:13px; font-weight:700; color:#5A4520; margin-top:4px; }
.g2048 div.t{ background:#FFF6E0; box-shadow:0 3px 0 rgba(0,0,0,.12); }
.g2048 div.t.n{ animation:pop .2s var(--ease-out); }
.modes{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
[hidden]{ display:none !important; }

/* =================== v1.1 Motivation, Einführung, Geheimakte =================== */
.badge.h{ background:linear-gradient(135deg,#FFE7A3,#FFC23D); color:#6A4700; }
.coach{ position:fixed; left:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:65; display:flex; align-items:flex-end; gap:8px; max-width:min(420px,calc(100vw - 32px)); animation:coachIn .4s var(--ease-out); cursor:pointer; }
.coach .coach-b{ background:var(--paper); border:2px solid var(--gold); border-radius:18px 18px 18px 4px; padding:12px 14px; font-weight:600; font-size:16px; box-shadow:var(--shadow); }
.coach.out{ opacity:0; transform:translateY(8px); transition:opacity .25s, transform .25s; }
@keyframes coachIn{ from{ opacity:0; transform:translateY(16px) scale(.96); } }
.combo{ position:fixed; left:50%; top:30%; transform:translate(-50%,-50%); z-index:85; text-align:center; pointer-events:none; animation:comboIn 2.2s var(--ease-out) forwards; }
.combo b{ display:block; font-family:var(--display); font-size:clamp(48px,9vw,84px); color:#fff; -webkit-text-stroke:3px #F0437A; text-shadow:0 6px 0 #F0437A, 0 12px 30px rgba(240,67,122,.4); line-height:1; }
.combo span{ display:inline-block; margin-top:12px; background:#1F2447; color:#fff; padding:8px 14px; border-radius:999px; font-weight:700; }
@keyframes comboIn{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(.4) rotate(-8deg); } 15%{ opacity:1; transform:translate(-50%,-50%) scale(1.08) rotate(2deg); } 25%{ transform:translate(-50%,-50%) scale(1); } 85%{ opacity:1; } 100%{ opacity:0; transform:translate(-50%,-62%); } }
.kicker-pop{ font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--berry); }
.modal.greet h2{ margin-top:4px; } .modal.greet p{ color:var(--ink); }
.modal.tour{ max-width:560px; }
.tour-body{ text-align:left; color:var(--ink); font-size:17px; line-height:1.55; margin:8px 0 14px; }
.tour-steps{ display:grid; gap:10px; }
.tour-steps div{ display:grid; grid-template-columns:36px 1fr; column-gap:10px; align-items:start; background:var(--bg2); border:2px solid var(--line); border-radius:16px; padding:10px 12px; font-size:15.5px; }
.tour-steps span{ grid-row:span 2; width:34px; height:34px; border-radius:50%; background:var(--meadow); color:#fff; display:grid; place-items:center; font-family:var(--display); font-weight:700; }
.tour-steps b{ font-family:var(--display); font-size:18px; }
.tour-ex{ margin:12px 0 0; font-size:15.5px; line-height:2; text-align:center; }
.tour-rew{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.tour-rew div{ background:var(--bg2); border:2px solid var(--line); border-radius:16px; padding:10px 12px; font-size:14.5px; display:flex; flex-direction:column; gap:4px; }
.tour-rew b{ font-family:var(--display); font-size:17px; }
.combo-mini{ font-size:26px !important; color:#F0437A; line-height:1; }
.tour-dots{ display:flex; gap:6px; justify-content:center; margin-bottom:14px; }
.tour-dots i{ width:9px; height:9px; border-radius:50%; background:var(--line); transition:width .2s var(--ease-out); }
.tour-dots i.on{ width:26px; border-radius:999px; background:var(--meadow); }
.akte-teaser{ grid-column:1/-1; background:linear-gradient(135deg,#1F2447,#3A2F74); color:#EEF1FF; border-color:transparent; }
.akte-teaser p{ color:#C9CDF2 !important; }
.akte-teaser .btn.ghost{ background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.25); box-shadow:0 4px 0 rgba(0,0,0,.25); }
.akte{ flex:1; overflow:auto; padding:18px; }
.akte-inner{ max-width:1100px; margin:0 auto; display:grid; gap:16px; }
.akte-head{ display:flex; gap:18px; align-items:center; color:#fff; padding:22px 24px; border-radius:28px; background:linear-gradient(135deg,#1F2447 0%,#3A2F74 70%,#5B3F8F 100%); box-shadow:var(--shadow); }
.akte-head .bar{ background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.25); }
.akte-head h1{ font-size:clamp(28px,4vw,38px); }
.akte-head p{ color:#D6DAFF; margin:6px 0 10px; max-width:640px; }
.akte-head small{ color:#D6DAFF; }
.evgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.ev{ display:flex; flex-direction:column; gap:4px; padding:12px; border-radius:18px; background:var(--gold-lt); border:2px solid var(--gold); }
.ev b{ font-size:15px; } .ev small{ font-size:13px; color:var(--muted); line-height:1.35; }
.ev-card{ height:72px; border-radius:14px; background:var(--paper); display:grid; place-items:center; font-size:40px; box-shadow:inset 0 0 0 2px rgba(0,0,0,.05); }
.ev.locked{ background:var(--bg2); border:2px dashed var(--line); }
.ev.locked .ev-card{ font-family:var(--display); color:var(--muted); font-size:34px; background:repeating-linear-gradient(45deg,var(--bg2) 0 8px,var(--paper) 8px 16px); }
.suspects{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.sus{ display:flex; gap:12px; align-items:flex-start; padding:12px; border-radius:18px; border:2px solid var(--line); background:var(--bg2); }
.sus-i{ font-size:36px; line-height:1; }
.sus b{ display:block; font-size:16px; } .sus small{ display:block; color:var(--muted); font-size:13px; } .sus em{ display:block; font-style:normal; font-size:13.5px; margin-top:4px; font-weight:600; }
.sus.cleared{ opacity:.6; } .sus.cleared b{ text-decoration:line-through; } .sus.cleared em{ color:var(--meadow-dk); }
.sus.hot{ border-color:var(--berry); background:var(--berry-lt); } .sus.hot em{ color:var(--berry); }
.evidence-reveal{ display:flex; gap:12px; align-items:center; text-align:left; margin:14px auto 0; max-width:420px; padding:12px; border-radius:18px; background:linear-gradient(135deg,#1F2447,#3A2F74); color:#fff; }
.evidence-reveal .ev-card{ width:64px; height:64px; flex:none; animation:pop .6s var(--ease-out) both; animation-delay:.4s; }

/* =================== v1.2 Tabellen & Gemeinsam lesen =================== */
.tbl{ overflow-x:auto; max-width:66ch; }
.tbl table{ border-collapse:separate; border-spacing:0; width:100%; font-size:17px; line-height:1.45; border:2px solid var(--line); border-radius:14px; overflow:hidden; }
.tbl caption{ caption-side:top; text-align:left; font-family:var(--display); font-weight:700; font-size:18px; padding:0 0 8px; }
.tbl th{ background:var(--bg2); text-align:left; padding:10px 12px; font-weight:700; border-bottom:2px solid var(--line); }
.tbl td{ padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; transition:background-color .15s; }
.tbl tr:last-child td{ border-bottom:0; }
.picking .tbl tr.s{ cursor:pointer; } .picking .tbl tr.s:hover td{ background:color-mix(in srgb,var(--sky) 22%,transparent); }
.tbl tr.s.sel td{ background:var(--marker); } .tbl tr.s.given td{ background:var(--berry-lt); } .tbl tr.s.ok td{ background:color-mix(in srgb,var(--meadow) 28%,transparent); }
.tbl tr.s.flash td{ animation:flash 1.6s ease; } .tbl tr.s.bad td{ background:var(--berry-lt); }
.talk{ text-align:left; margin:14px 0; padding:16px 18px; border-radius:22px; background:var(--meadow-lt); border:2px solid var(--meadow); }
.talk b{ font-family:var(--display); font-size:19px; color:var(--meadow-dk); }
.talk p{ margin:6px 0; } .talk ul{ margin:6px 0 12px; padding-left:20px; } .talk li{ margin:4px 0; }

/* =================== v1.3 Burger-Bude, Pups-Pony, Styling =================== */
.floaty{ position:absolute; left:50%; top:22%; transform:translateX(-50%); background:#1F2447; color:#fff; font-weight:700; padding:8px 14px; border-radius:999px; z-index:5; animation:rise .25s var(--ease-out); pointer-events:none; white-space:nowrap; }
.stage{ position:relative; }
.bb{ width:100%; max-width:980px; display:grid; gap:12px; }
.bb-guests{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.bb-guest{ display:flex; flex-direction:column; gap:6px; text-align:left; padding:12px; border-radius:20px; background:var(--paper); border:2px solid var(--line); box-shadow:0 4px 0 var(--line); min-height:132px; transition:transform .12s var(--ease-out); }
.bb-guest:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--line); }
.bb-guest.empty{ display:grid; place-items:center; color:var(--muted); font-size:28px; box-shadow:none; border-style:dashed; }
.bb-guest.angry{ border-color:var(--berry); animation:shake .4s var(--ease-io); }
.bb-face{ font-size:34px; line-height:1; }
.bb-text{ font-size:15.5px; font-weight:600; line-height:1.35; }
.bb-icons{ display:flex; gap:3px; flex-wrap:wrap; } .bb-icons i{ width:18px; height:8px; border-radius:4px; }
.bb-pat{ margin-top:auto; height:8px; border-radius:99px; background:var(--bg2); overflow:hidden; } .bb-pat i{ display:block; height:100%; background:linear-gradient(90deg,#F0437A,#FFC23D,#2FAE72); transition:width 1s linear; }
.bb-plates{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.bb-plate{ position:relative; height:170px; border-radius:24px; background:radial-gradient(ellipse at 50% 88%, #fff 0 42%, var(--bg2) 43%); border:3px solid var(--line); display:flex; align-items:flex-end; justify-content:center; padding-bottom:22px; }
.bb-plate.on{ border-color:var(--gold); box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 35%,transparent); }
.bb-plab{ position:absolute; top:10px; left:14px; font-weight:700; font-size:14px; color:var(--muted); }
.bb-stack{ display:flex; flex-direction:column; align-items:center; width:130px; }
.bb-l{ width:118px; border-radius:6px; margin-top:-1px; }
.bb-l.salad{ width:128px; border-radius:40% 40% 30% 30%; } .bb-l.cheese{ width:124px; border-radius:2px; clip-path:polygon(0 0,100% 0,100% 100%,82% 60%,64% 100%,46% 60%,28% 100%,10% 60%,0 100%); height:12px !important; }
.bb-l.tomato{ width:112px; border-radius:40%; } .bb-l.onion{ width:108px; border-radius:999px; opacity:.9; } .bb-l.pickle{ width:100px; border-radius:999px; } .bb-l.sauce{ width:122px; border-radius:999px; }
.bb-bun{ width:126px; background:linear-gradient(#F2B35E,#D98E3A); }
.bb-bun.top{ height:30px; border-radius:60px 60px 8px 8px; background:radial-gradient(circle at 30% 40%, #fff6 0 2px, transparent 3px) 0 0/18px 12px, linear-gradient(#F4B862,#DD9440); }
.bb-bun.bottom{ height:16px; border-radius:6px 6px 14px 14px; }
.bb-ings{ display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:8px; }
.bb-ing{ display:flex; align-items:center; gap:8px; padding:12px; border-radius:16px; background:var(--paper); border:2px solid var(--line); box-shadow:0 3px 0 var(--line); font-weight:700; font-size:15px; }
.bb-ing:active{ transform:translateY(2px); box-shadow:none; }
.bb-ing i{ width:22px; height:12px; border-radius:6px; flex:none; }
.bb-ing.lid{ background:var(--gold-lt); border-color:var(--gold); } .bb-ing.trash{ background:var(--bg2); }
.bb-help{ margin:0; color:var(--muted); font-size:14px; text-align:center; }
@media (max-width:640px){ .bb-guest{ min-height:110px; padding:8px; } .bb-text{ font-size:13.5px; } .bb-plate{ height:150px; } }
.sty{ width:100%; max-width:1080px; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:16px; align-items:start; }
@media (max-width:900px){ .sty{ grid-template-columns:1fr; } }
.sty-view{ background:var(--paper); border-radius:26px; padding:10px; box-shadow:var(--shadow); position:sticky; top:0; }
.sty-ctrl{ display:grid; gap:10px; }
.sty-row{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; background:var(--paper); border:2px solid var(--line); border-radius:18px; padding:10px; }
.sty-row b{ width:100%; font-family:var(--display); font-size:16px; }
.sw{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:4px; border-radius:12px; border:2px solid transparent; font-size:11.5px; font-weight:600; color:var(--muted); }
.sw i{ width:34px; height:34px; border-radius:50%; border:2px solid rgba(0,0,0,.1); }
.sw.on{ border-color:var(--gold); color:var(--ink); }
.tg{ padding:8px 12px; border-radius:999px; border:2px solid var(--line); background:var(--bg2); font-weight:700; font-size:14px; }
.tg.on{ background:var(--gold-lt); border-color:var(--gold); }
.sty-row input{ flex:1; min-width:160px; font:inherit; font-size:16px; padding:10px 12px; border-radius:12px; border:2px solid var(--line); background:var(--bg2); color:var(--ink); }
.modal.wide{ max-width:760px; }
.album{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin:10px 0 16px; max-height:60vh; overflow:auto; }
.gamewrap{ position:relative; }
.stage{ overflow:auto; justify-content:flex-start; -webkit-overflow-scrolling:touch; }
.gamewrap{ margin-block:auto; }
.chip.testchip{ background:#F0437A; color:#fff; border-color:#C22A5C; letter-spacing:.05em; }

/* =================== v2.0 Premium-Feinschliff =================== */
:root{ --ease-drawer:cubic-bezier(.32,.72,0,1); }
/* Ansichtswechsel: kurz, von leicht unten, nie aus dem Nichts */
#app > main{ animation:viewIn .28s var(--ease-out) both; }
@keyframes viewIn{ from{ opacity:0; transform:translateY(10px); } }
/* Gestaffelte Einblendung von Karten */
.stagger > *{ animation:itemIn .42s var(--ease-out) both; animation-delay:calc(var(--i,0) * 45ms); }
@keyframes itemIn{ from{ opacity:0; transform:translateY(14px) scale(.98); } }
/* Tiefe & Materialität */
.panel, .scene, .gtile, .case{ box-shadow:0 1px 0 rgba(31,36,71,.04), 0 10px 28px -16px rgba(31,36,71,.28); }
.panel{ border-color:color-mix(in srgb,var(--line) 70%,transparent); }
@media (hover:hover){
  .gtile, .case, .btn, .opt{ transition:transform .16s var(--ease-out), box-shadow .16s var(--ease-out), filter .16s ease; }
  .gtile:not(.locked):hover{ transform:translateY(-3px); }
  .case.open:hover, .case.done:hover{ transform:translateY(-2px); }
  .btn:hover{ filter:brightness(1.05) saturate(1.05); }
  .opt:hover{ border-color:var(--sky); }
}
.btn:active, .opt:active, .iconbtn:active, .back:active{ transform:scale(.97); }
/* Glanz über freigeschalteten Spielkacheln */
.gtile .gart{ overflow:hidden; }
.gtile:not(.locked) .gart::before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%); transform:translateX(-120%); }
@media (hover:hover){ .gtile:not(.locked):hover .gart::before{ transform:translateX(120%); transition:transform .75s var(--ease-out); } }
.gtile .newbadge{ animation:badgePulse 2.4s ease-in-out infinite; }
@keyframes badgePulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } }
.gtile .gart span.em{ display:inline-block; transition:transform .3s var(--ease-out); }
@media (hover:hover){ .gtile:not(.locked):hover .gart span.em{ transform:scale(1.12) rotate(-4deg); } }
/* Offener Fall pulsiert sanft */
.case.open{ animation:openPulse 2.6s ease-out infinite; }
@keyframes openPulse{ 0%{ box-shadow:0 0 0 0 rgba(255,194,61,.55), 0 10px 28px -16px rgba(31,36,71,.28); } 70%,100%{ box-shadow:0 0 0 14px rgba(255,194,61,0), 0 10px 28px -16px rgba(31,36,71,.28); } }
.case.done .num{ animation:stamp .5s var(--ease-out) both; }
@keyframes stamp{ from{ transform:scale(1.6) rotate(-20deg); opacity:0; } }
/* Fortschrittsbalken und Ringe füllen sich beim Erscheinen */
.bar > i{ animation:barIn 1.1s var(--ease-out) both .15s; position:relative; overflow:hidden; }
@keyframes barIn{ from{ width:0; } }
.bar > i::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%); animation:shimmer 2.8s ease-in-out infinite 1.2s; transform:translateX(-100%); }
@keyframes shimmer{ to{ transform:translateX(100%); } }
.ring circle.prog{ animation:ringIn 1.2s var(--ease-out) both .2s; }
@keyframes ringIn{ from{ stroke-dashoffset:var(--c); } }
/* Zähler in der Kopfzeile hüpfen bei Änderung */
.chip.bump{ animation:bump .45s var(--ease-out); }
@keyframes bump{ 30%{ transform:scale(1.18); } }
/* Lebendige Hof-Szene */
.scene .cloud{ animation:drift 48s linear infinite; }
.scene .cloud.c2{ animation-duration:70s; animation-delay:-30s; }
@keyframes drift{ from{ transform:translateX(-160px); } to{ transform:translateX(900px); } }
.scene .sun-glow{ transform-origin:700px 60px; animation:sunPulse 5s ease-in-out infinite; }
@keyframes sunPulse{ 50%{ transform:scale(1.12); opacity:.4; } }
.scene .kas-bob{ animation:bob 3.2s ease-in-out infinite; transform-box:fill-box; }
@keyframes bob{ 50%{ transform:translateY(-5px) rotate(-2deg); } }
.scene .hello h1{ animation:itemIn .5s var(--ease-out) both .05s; }
.scene .hello p{ animation:itemIn .5s var(--ease-out) both .15s; }
/* Lesen: Rückmeldungen */
.opt.ok{ animation:okGlow .6s var(--ease-out); }
@keyframes okGlow{ 0%{ box-shadow:0 0 0 0 rgba(47,174,114,.5); } 100%{ box-shadow:0 0 0 14px rgba(47,174,114,0); } }
.explain{ animation:itemIn .35s var(--ease-out) both; }
.reward{ animation:itemIn .35s var(--ease-out) both .1s; }
.qtext{ animation:itemIn .3s var(--ease-out) both; }
/* Fertig-Bildschirm */
.done-card{ animation:cardIn .5s var(--ease-drawer) both; }
@keyframes cardIn{ from{ opacity:0; transform:translateY(24px) scale(.97); } }
.done-card > *{ animation:itemIn .45s var(--ease-out) both; animation-delay:calc(.15s + var(--i,0) * 70ms); }

/* =================== Spielhalle 2.0 =================== */
.arcade-hero{ position:relative; overflow:hidden; border-radius:30px; padding:24px; color:#fff; background:radial-gradient(120% 140% at 0% 0%, #5B3F8F 0%, #2B2F66 45%, #1F2447 100%); box-shadow:0 18px 40px -22px rgba(31,36,71,.7); display:grid; grid-template-columns:1fr auto; gap:18px; align-items:center; margin-bottom:18px; }
@media (max-width:760px){ .arcade-hero{ grid-template-columns:1fr; } }
.arcade-hero::before{ content:""; position:absolute; inset:-40%; background:conic-gradient(from 0deg, transparent 0 20%, rgba(255,194,61,.18) 25%, transparent 30% 55%, rgba(240,67,122,.16) 60%, transparent 65%); animation:spin 30s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.arcade-hero > *{ position:relative; }
.arcade-hero h1{ font-size:clamp(30px,4.4vw,44px); }
.arcade-hero p{ margin:6px 0 0; color:#D6DAFF; }
.ah-stats{ display:flex; gap:10px; flex-wrap:wrap; }
.ah-stat{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); border-radius:18px; padding:10px 14px; min-width:110px; backdrop-filter:blur(6px); }
.ah-stat b{ display:block; font-family:var(--display); font-size:26px; line-height:1.1; }
.ah-stat small{ color:#C9CDF2; font-size:12.5px; font-weight:600; }
.rounds-row{ display:flex; gap:4px; margin-top:4px; }
.rounds-row i{ width:16px; height:10px; border-radius:3px; background:#FFC23D; box-shadow:0 0 8px rgba(255,194,61,.6); }
.rounds-row i.used{ background:rgba(255,255,255,.2); box-shadow:none; }
.gotd{ display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center; padding:16px 18px; border-radius:26px; margin-bottom:22px; background:linear-gradient(135deg,var(--gold-lt),#FFE3EC); border:2px solid var(--gold); position:relative; overflow:hidden; }
.gotd .gart{ width:88px; height:88px; border-radius:22px; display:grid; place-items:center; font-size:48px; box-shadow:inset 0 0 0 3px rgba(255,255,255,.5); }
.gotd .kick{ font-size:12.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--berry); }
.gotd h2{ font-size:24px; margin:2px 0; }
.gotd p{ margin:0; color:var(--muted); font-size:15px; }
@media (max-width:640px){ .gotd{ grid-template-columns:auto 1fr; } .gotd .btn{ grid-column:1/-1; } }
.gsection{ margin-bottom:22px; }
.gsection-head{ display:flex; align-items:center; gap:10px; margin:0 2px 10px; }
.gsection-head .lvl{ width:34px; height:34px; border-radius:12px; display:grid; place-items:center; font-family:var(--display); font-weight:700; color:#fff; background:linear-gradient(135deg,#7C6CFF,#F0437A); }
.gsection-head h2{ font-size:20px; margin:0; }
.gsection-head small{ color:var(--muted); font-weight:600; margin-left:auto; }
.gsection.locked .gsection-head .lvl{ background:var(--line); color:var(--muted); }
.medals{ display:inline-flex; gap:3px; }
.medals i{ width:14px; height:14px; border-radius:50%; background:var(--line); box-shadow:inset 0 -2px 0 rgba(0,0,0,.08); }
.medals i.m1{ background:linear-gradient(135deg,#E3A76F,#B8743F); } .medals i.m2{ background:linear-gradient(135deg,#F1F3F7,#AEB6C4); } .medals i.m3{ background:linear-gradient(135deg,#FFE27A,#E0A000); }
.medal-big{ width:110px; height:110px; margin:4px auto 6px; border-radius:50%; display:grid; place-items:center; font-size:54px; animation:medalIn .7s var(--ease-drawer) both; box-shadow:0 12px 30px -10px rgba(0,0,0,.35), inset 0 -6px 0 rgba(0,0,0,.12); }
.medal-big.m1{ background:radial-gradient(circle at 35% 30%,#F3C08F,#B8743F); } .medal-big.m2{ background:radial-gradient(circle at 35% 30%,#FFFFFF,#AEB6C4); } .medal-big.m3{ background:radial-gradient(circle at 35% 30%,#FFF1A8,#E0A000); }
@keyframes medalIn{ from{ transform:translateY(-30px) rotate(-25deg) scale(.8); opacity:0; } }
.trophy-shelf{ display:flex; gap:10px; flex-wrap:wrap; }
/* Neue Spiele */
.m3{ position:relative; touch-action:none; border-radius:24px; background:linear-gradient(160deg,#FFF6E0,#FFE3EC); box-shadow:var(--shadow); padding:8px; }
.m3 .tile{ position:absolute; display:grid; place-items:center; border-radius:14px; transition:transform .22s var(--ease-in-out), opacity .2s ease; will-change:transform; user-select:none; }
.m3 .tile span{ display:grid; place-items:center; width:88%; height:88%; border-radius:14px; background:rgba(255,255,255,.75); box-shadow:0 3px 0 rgba(0,0,0,.08); font-size:clamp(22px,5vw,34px); transition:transform .16s var(--ease-out); }
.m3 .tile.sel span{ transform:scale(1.1); box-shadow:0 0 0 3px var(--gold), 0 6px 14px -4px rgba(0,0,0,.25); }
.m3 .tile.pop{ opacity:0; transform:var(--pos) scale(.5) !important; }
.combo-float{ position:absolute; left:50%; top:40%; transform:translate(-50%,-50%); font-family:var(--display); font-weight:700; font-size:34px; color:#fff; -webkit-text-stroke:2px #F0437A; text-shadow:0 4px 0 #F0437A; pointer-events:none; animation:comboFloat .9s var(--ease-out) forwards; z-index:3; }
@keyframes comboFloat{ from{ opacity:0; transform:translate(-50%,-30%) scale(.8); } 20%{ opacity:1; transform:translate(-50%,-50%) scale(1.05); } to{ opacity:0; transform:translate(-50%,-90%); } }
@media (prefers-reduced-motion: reduce){ .scene .cloud, .scene .kas-bob, .scene .sun-glow, .arcade-hero::before, .case.open, .bar > i::after, .gtile .newbadge{ animation:none !important; } }
.gsections{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,430px),1fr)); gap:4px 22px; }
.gsection .games{ grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); }

/* =================== v3.0 Zwei Kinder: Profile, Duell, Stationen, Quiz =================== */
.login-card.wide{ max-width:640px; }
.who{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:10px; }
.who-card{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:22px 14px; border-radius:26px; border:3px solid var(--line); background:var(--bg2); box-shadow:0 6px 0 var(--line); transition:transform .16s var(--ease-out), box-shadow .16s var(--ease-out); animation:itemIn .45s var(--ease-out) both; }
.who-card:nth-child(2){ animation-delay:.08s; }
.who-card b{ font-family:var(--display); font-size:28px; }
.who-card small{ color:var(--muted); font-weight:600; }
.who-card.lara{ background:linear-gradient(160deg,#FFF6DD,#DDF5E8); }
.who-card.tom{ background:linear-gradient(160deg,#E4E7FF,#CFE9FF); }
.who-card:active{ transform:translateY(4px) scale(.98); box-shadow:0 2px 0 var(--line); }
@media (hover:hover){ .who-card:hover{ transform:translateY(-3px); } }
.who-btn{ font-family:var(--display); font-weight:700; font-size:18px; background:linear-gradient(135deg,#7C6CFF,#F0437A); color:#fff; border-color:transparent; }
.scene.dark{ background:#1B1F4B; }
.scene.dark .hello{ color:#fff; } .scene.dark .hello p{ color:#D6DAFF; }
.scene .twinkle{ animation:twinkle 3s ease-in-out infinite; }
@keyframes twinkle{ 50%{ opacity:.25; } }
.duel-panel{ grid-column:1/-1; background:linear-gradient(135deg,var(--paper),color-mix(in srgb,var(--gold-lt) 50%,var(--paper))); }
.duel{ display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:stretch; margin-top:12px; }
.duel-side{ background:var(--paper); border:2px solid var(--line); border-radius:22px; padding:14px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px; }
.duel-side.me{ border-color:var(--gold); box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 25%,transparent); }
.duel-side b{ font-family:var(--display); font-size:22px; }
.duel-side small{ color:var(--muted); font-weight:600; font-size:13.5px; }
.duel-side ul{ list-style:none; padding:0; margin:10px 0 0; width:100%; display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.duel-side li{ background:var(--bg2); border-radius:12px; padding:6px 8px; display:flex; flex-direction:column; }
.duel-side li span{ font-size:12px; color:var(--muted); font-weight:600; } .duel-side li b{ font-size:20px; }
.duel-vs{ align-self:center; font-family:var(--display); font-weight:700; font-size:26px; color:#fff; width:54px; height:54px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,#F0437A,#FFC23D); box-shadow:0 6px 16px -6px rgba(240,67,122,.6); }
.duel-note{ margin:12px 0 0; text-align:center; font-weight:600; }
@media (max-width:600px){ .duel{ grid-template-columns:1fr; } .duel-vs{ justify-self:center; } }
.sibrec{ display:block; color:var(--berry); } .sibrec.lead{ color:var(--meadow-dk); }
.crown-note{ margin:8px auto; padding:10px 14px; border-radius:16px; background:var(--gold-lt); border:2px solid var(--gold); font-weight:700; animation:pop .5s var(--ease-out); }
.rec-table td{ font-size:16px; vertical-align:middle; } .rec-table td.lead{ font-weight:800; color:var(--meadow-dk); } .rec-table td.unit{ color:var(--muted); font-size:14px; }
.rec-art{ display:inline-grid; place-items:center; width:32px; height:32px; border-radius:10px; margin-right:6px; }
.st-mini{ display:flex; gap:6px; margin:0 0 14px; } .st-mini i{ width:34px; height:34px; border-radius:12px; display:grid; place-items:center; background:var(--bg2); border:2px dashed var(--line); font-style:normal; filter:grayscale(.8); opacity:.7; }
.st-mini i.d{ background:var(--meadow-lt); border:2px solid var(--meadow); filter:none; opacity:1; }
.st-mini.big i{ width:44px; height:44px; font-size:22px; }
.mission-hero{ display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center; padding:22px; border-radius:30px; margin-bottom:18px; background:linear-gradient(135deg,var(--gold-lt),var(--meadow-lt)); border:2px solid var(--line); }
.mission-hero.dark{ background:radial-gradient(120% 140% at 0% 0%,#3A3F8F,#1B1F4B); color:#fff; border-color:transparent; }
.mission-hero.dark p, .mission-hero.dark small{ color:#D6DAFF; }
.mission-hero h1{ font-size:clamp(26px,4vw,38px); margin:4px 0; } .mission-hero p{ margin:0 0 12px; }
.stations{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr)); gap:14px; }
.station{ display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; text-align:left; padding:14px; border-radius:24px; background:var(--paper); border:2px solid var(--line); box-shadow:0 5px 0 var(--line); transition:transform .16s var(--ease-out); animation:itemIn .4s var(--ease-out) both; }
.station:nth-child(2){ animation-delay:.05s; } .station:nth-child(3){ animation-delay:.1s; } .station:nth-child(4){ animation-delay:.15s; }
.station:active{ transform:translateY(3px); box-shadow:0 2px 0 var(--line); }
.station .st-art{ width:72px; height:72px; border-radius:20px; display:grid; place-items:center; font-size:36px; }
.station .kick{ font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.station h3{ font-size:22px; } .station small{ color:var(--muted); font-weight:600; }
.station.done{ border-color:var(--meadow); background:linear-gradient(135deg,var(--paper),var(--meadow-lt)); }
.st-state{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.st-check{ width:40px; height:40px; border-radius:50%; background:var(--meadow); color:#fff; display:grid; place-items:center; font-weight:800; font-size:20px; animation:stamp .5s var(--ease-out) both; }
.quizwrap{ flex:1; overflow:auto; padding:18px; display:grid; place-items:start center; }
.quiz{ width:100%; max-width:720px; display:grid; gap:14px; }
.q-head{ display:flex; justify-content:space-between; align-items:center; }
.q-sub{ padding:8px 14px; border-radius:999px; font-weight:800; }
.q-card{ background:var(--paper); border:2px solid var(--line); border-radius:28px; padding:22px; box-shadow:var(--shadow); display:grid; gap:18px; animation:itemIn .3s var(--ease-out) both; }
.q-q{ font-family:var(--display); font-size:clamp(22px,3.4vw,28px); font-weight:700; line-height:1.3; }
.q-opts{ display:grid; gap:10px; } .q-opts.short{ grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); }
.q-opt{ padding:16px; border-radius:18px; border:2px solid var(--line); background:var(--bg2); font-size:20px; font-weight:700; box-shadow:0 4px 0 var(--line); transition:transform .12s var(--ease-out); }
.q-opt:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--line); }
.q-opt.bad{ border-color:var(--berry); background:var(--berry-lt); animation:shake .4s var(--ease-io); opacity:.65; }
.q-opt.ok{ border-color:var(--meadow); background:var(--meadow-lt); animation:okGlow .6s var(--ease-out); }
.q-input{ font-family:var(--display); font-size:48px; font-weight:700; text-align:center; padding:10px; border-radius:20px; background:var(--bg2); border:3px solid var(--line); min-height:84px; }
.q-input span{ color:var(--muted); } .q-input.ok{ border-color:var(--meadow); background:var(--meadow-lt); animation:okGlow .6s var(--ease-out); }
.q-pad{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-width:360px; margin:0 auto; width:100%; }
.q-pad button{ height:64px; border-radius:18px; border:2px solid var(--line); background:var(--paper); font-family:var(--display); font-size:26px; font-weight:700; box-shadow:0 4px 0 var(--line); }
.q-pad button:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--line); }
.q-pad .okkey{ background:var(--meadow); color:#fff; border-color:var(--meadow-dk); box-shadow:0 4px 0 var(--meadow-dk); }
.q-match{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } .q-match > div{ display:grid; gap:10px; }
.q-m{ padding:14px; border-radius:16px; border:2px solid var(--line); background:var(--bg2); font-size:20px; font-weight:700; box-shadow:0 3px 0 var(--line); }
.q-m.pic{ font-size:34px; padding:8px; } .q-m.sel{ border-color:var(--gold); background:var(--gold-lt); transform:scale(1.03); }
.q-m.ok{ border-color:var(--meadow); background:var(--meadow-lt); opacity:.75; } .q-m.bad{ border-color:var(--berry); animation:shake .35s var(--ease-io); }
.q-fb{ display:flex; justify-content:center; gap:12px; align-items:center; font-family:var(--display); font-size:26px; color:var(--meadow-dk); animation:pop .4s var(--ease-out); }
.q-fb span{ display:inline-flex; gap:6px; align-items:center; color:var(--gold-dk); }
.chip.parentchip{ background:#1F2447; color:#fff; border-color:#1F2447; }
.tipbtn{ justify-self:center; padding:8px 16px; border-radius:999px; border:2px dashed var(--gold); background:var(--gold-lt); font-weight:700; font-size:15px; }
.tipbtn:active{ transform:scale(.97); }

/* =================== v3.2 Nachrichten =================== */
.msgbtn{ position:relative; }
.badge-dot{ position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 5px; border-radius:999px; background:var(--berry); color:#fff; font-size:12px; font-weight:800; display:grid; place-items:center; animation:pop .4s var(--ease-out); }
.chatwrap{ flex:1; min-height:0; display:grid; place-items:stretch center; padding:14px; }
.chat{ width:100%; max-width:760px; min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto; background:var(--paper); border:2px solid var(--line); border-radius:28px; box-shadow:var(--shadow); overflow:hidden; }
.chat-head{ display:flex; gap:12px; align-items:center; padding:12px 16px; border-bottom:2px solid var(--line); background:var(--bg2); }
.chat-head b{ font-family:var(--display); font-size:22px; display:block; } .chat-head small{ color:var(--muted); font-weight:600; }
.chat-list{ overflow:auto; padding:16px; display:flex; flex-direction:column; gap:10px; background:repeating-linear-gradient(0deg,transparent 0 30px,color-mix(in srgb,var(--line) 25%,transparent) 30px 31px); }
.bubble-row{ display:flex; } .bubble-row.me{ justify-content:flex-end; }
.bubble-msg{ max-width:78%; padding:10px 14px; border-radius:20px 20px 20px 6px; background:var(--bg2); border:2px solid var(--line); font-size:17px; line-height:1.4; animation:itemIn .3s var(--ease-out) both; }
.bubble-row.me .bubble-msg{ border-radius:20px 20px 6px 20px; background:var(--meadow-lt); border-color:var(--meadow); }
.bubble-msg small{ display:block; margin-top:4px; color:var(--muted); font-size:12px; font-weight:600; }
.chat-empty{ margin:auto; text-align:center; color:var(--muted); }
.chat-compose{ border-top:2px solid var(--line); padding:12px; display:grid; gap:8px; }
.chat-compose textarea{ font:inherit; font-size:18px; padding:12px; border-radius:16px; border:2px solid var(--line); background:var(--bg2); color:var(--ink); resize:none; }
.chat-compose textarea:focus{ outline:none; border-color:var(--sky); }
.emo{ display:flex; gap:4px; flex-wrap:wrap; } .emo button{ font-size:22px; padding:2px 6px; border-radius:10px; } .emo button:active{ transform:scale(.9); }
.check-box{ border:2px solid var(--berry); background:var(--berry-lt); border-radius:18px; padding:10px 14px; animation:itemIn .25s var(--ease-out) both; }
.check-head{ display:flex; gap:8px; align-items:center; }
.check-text{ font-size:18px; margin:8px 0; line-height:1.6; }
.check-text mark{ background:var(--marker); border-bottom:3px wavy var(--berry); padding:0 2px; border-radius:4px; }
.check-text mark.end{ background:transparent; color:var(--berry); font-weight:800; }
.check-box ul{ margin:4px 0 8px; padding-left:20px; } .check-box li{ margin:3px 0; }
.sugg{ background:var(--gold-lt); border:1px solid var(--gold); border-radius:8px; padding:0 6px; font-weight:700; }
.station.bonus{ border-color:#B5A6FF; background:linear-gradient(135deg,var(--paper),#EEEAFF); }
.station.locked{ opacity:.6; border-style:dashed; box-shadow:none; }
.bonus-cta{ background:linear-gradient(135deg,#EEEAFF,var(--gold-lt)); border-color:#B5A6FF; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .station.bonus, :root:not([data-theme="light"]) .bonus-cta{ background:var(--paper); } }

/* =================== v3.4 Login-Bonus =================== */
.login-box{ background:linear-gradient(135deg,var(--gold-lt),#FFF6DD); border:2px solid var(--gold); border-radius:20px; padding:12px; margin:8px 0 12px; animation:itemIn .35s var(--ease-out) both; }
.login-row{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-top:8px; }
.lday{ display:flex; flex-direction:column; align-items:center; gap:1px; padding:6px 2px; border-radius:14px; background:var(--paper); border:2px solid var(--line); font-size:12px; }
.lday span{ font-size:18px; line-height:1.2; } .lday b{ font-size:14px; } .lday small{ color:var(--muted); font-size:10.5px; font-weight:600; }
.lday.got{ background:var(--meadow-lt); border-color:var(--meadow); } .lday.got span{ color:var(--meadow-dk); font-weight:800; }
.lday.now{ border-color:var(--gold); background:var(--gold-lt); transform:scale(1.08); box-shadow:0 6px 14px -6px rgba(224,160,0,.6); animation:pop .5s var(--ease-out); }
.lday.big{ background:linear-gradient(135deg,#FFE3EC,var(--gold-lt)); }
.loss-box{ background:var(--berry-lt); border:2px solid var(--berry); border-radius:18px; padding:10px 12px; margin:8px 0; animation:shake .45s var(--ease-io); }
.safe-line{ margin-top:12px; font-weight:600; font-size:15px; }
.parent-box{ margin-top:14px; padding:12px; border-radius:16px; background:var(--bg2); border:2px dashed var(--line); }
.parent-box p{ margin:4px 0 8px; font-size:15px; }

/* =================== QA: kleine Bildschirme (iPhone SE & Co.) =================== */
/* Fenster nie höher als der Bildschirm – sonst sind Knöpfe unerreichbar */
.overlay{ overflow-y:auto; -webkit-overflow-scrolling:touch; padding:max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
.modal{ max-height:calc(100dvh - 24px); overflow-y:auto; overscroll-behavior:contain; }
@supports not (height:100dvh){ .modal{ max-height:calc(100vh - 24px); } }
@media (max-height:700px){
  .modal{ padding:18px 16px; }
  .modal svg[width="92"], .modal svg[width="96"], .modal svg[width="84"]{ width:64px; height:64px; }
  .tour-body{ font-size:15.5px; line-height:1.45; }
}
/* Kopfzeile auf Handys: nichts darf breiter werden als der Bildschirm */
.top{ min-width:0; } .top > *{ flex-shrink:0; } .top .spacer{ flex-shrink:1; min-width:0; }
.back{ white-space:nowrap; }
.iconbtn{ min-width:40px; }
.only-sm{ display:none !important; }
.side-handle{ display:none; }
/* Kompakte Kopfzeile für Tablets hochkant und Handys */
.top .back{ max-width:34vw; overflow:hidden; text-overflow:ellipsis; }
.top{ overflow:hidden; }
@media (max-width:900px){
  .iconbtn.hide-sm, .chip.hide-sm{ display:none; } .hide-sm-inline{ display:none; }
  .only-sm{ display:flex !important; }
  .back .bl{ display:none; } .back{ padding:8px 14px; font-size:20px; max-width:none; }
  .top .brand span.t{ display:none; }
}
@media (max-width:640px){
  .top{ gap:6px; padding:8px 10px; } .top .chip{ padding:6px 9px; font-size:14px; }
  .scene .hello h1{ font-size:26px; } .scene .hello p{ font-size:14px; line-height:1.4; max-width:62%; }
  .lday small{ font-size:11px; } .lday b{ font-size:13px; }
  .tour-rew > div, .tour-steps > div{ min-width:0; overflow-wrap:anywhere; }
}
@media (max-width:380px){ .scene .hello p{ display:none; } }
/* Lesen auf Handys: Aufgabenfeld einklappbar, damit der Text Platz hat */
@media (max-width:900px){
  .side-handle{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:6px; background:var(--bg); border-top:2px solid var(--line); font-weight:700; font-size:14px; color:var(--muted); }
  .side-handle i{ width:36px; height:5px; border-radius:99px; background:var(--line); }
  .side{ border-top:0; }
  .reader{ grid-template-rows:minmax(0,1fr) auto auto; }
  .reader.min .side{ max-height:0; padding-top:0; padding-bottom:0; overflow:hidden; }
}
.lday small{ font-size:11.5px; }
@media (max-width:400px){ .top .chip.flame{ display:none; } .top .brand svg{ width:34px; height:34px; } }
/* Raster dürfen auf schmalen Bildschirmen schrumpfen (keine erzwungene Mindestbreite) */
@media (max-width:860px){ .hub-grid{ grid-template-columns:minmax(0,1fr); } }
.hub-grid > *, .panel, .stations > *, .gsections > *, .games > * { min-width:0; }
@media (max-width:420px){ .trail-row{ grid-template-columns:repeat(2,minmax(0,1fr)); } .games{ grid-template-columns:repeat(2,minmax(0,1fr)); } .login-row{ gap:3px; } .lday{ padding:5px 0; } }
/* iPhone/iPad: kein grauer Tipp-Blitz, keine Lupe/Kopiermenü beim Gedrückthalten in Spielen */
html{ -webkit-tap-highlight-color:transparent; -webkit-text-size-adjust:100%; }
.stage, .stage *, .q-pad, .pinpad, .bb, .m3, .who{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.stage canvas{ touch-action:none; }
body{ overscroll-behavior-y:none; }
/* Burger-Bude auf kleinen Handys: alles auf einen Blick (Gäste, Teller, Zutaten) */
@media (max-width:640px) and (max-height:760px){
  .bb{ gap:8px; } .bb-help{ display:none; }
  .bb-guest{ min-height:88px; padding:6px; gap:4px; border-radius:16px; } .bb-face{ font-size:24px; } .bb-text{ font-size:12.5px; line-height:1.25; }
  .bb-plate{ height:112px; padding-bottom:12px; } .bb-plab{ top:6px; left:10px; font-size:12px; }
  .bb-stack{ transform:scale(.8); transform-origin:bottom center; }
  .bb-ings{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; } .bb-ing{ padding:8px 6px; font-size:13px; gap:5px; border-radius:12px; }
  .stage .hud{ margin-bottom:6px; }
}