/* Layout: one full-screen canvas stage, HTML panels float above it like carnival "Orden" cards */
:root{
  --ink:#1d0f24; --ink-2:#331a3d; --red:#e5243b; --red-dark:#9e1328;
  --gold:#ffcf3a; --gold-dark:#c99400; --paper:#fff8ee; --text:#2a1630; --muted:#7a6680;
  --display:"Lilita One","Arial Rounded MT Bold","Trebuchet MS",sans-serif;
  --body:"Nunito","Segoe UI",system-ui,sans-serif;
  --pixel:"Press Start 2P",ui-monospace,monospace;
  color-scheme:dark;
}
[hidden]{display:none!important}
html,body{height:100%;margin:0;background:var(--ink);overflow:hidden}
body{color:var(--paper);font-family:var(--body);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#app{position:relative;width:100%;height:100%;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(ellipse at 50% 120%,var(--ink-2),var(--ink) 70%)}
#game{display:block;image-rendering:pixelated;image-rendering:crisp-edges;box-shadow:0 0 0 2px rgba(255,255,255,.04)}

.screen{position:absolute;inset:0;display:flex;padding:max(12px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));overflow-y:auto;background:rgba(20,8,26,.38);touch-action:pan-y}
.screen.clear-bg{background:transparent}
.panel{margin:auto;background:var(--paper);color:var(--text);width:min(580px,100%);border-radius:14px;box-shadow:0 0 0 4px var(--red),0 10px 0 4px rgba(0,0,0,.28);overflow:hidden}
.rauten{height:14px;background:conic-gradient(from 45deg,var(--red) 25%,#fff 0 50%,var(--red) 0 75%,#fff 0) 0 0/14px 14px}
.pbody{padding:16px 20px 20px;display:flex;flex-direction:column;gap:12px}
.logo{font-family:var(--display);font-weight:400;font-size:clamp(30px,min(8vw,10vh),56px);line-height:.92;color:var(--red);margin:0;text-shadow:3px 3px 0 var(--gold);text-wrap:balance}
.logo small{display:block;font-size:.48em;color:var(--text);text-shadow:none;margin-top:6px;letter-spacing:.02em}
h2{font-family:var(--display);font-weight:400;font-size:clamp(24px,min(6vw,8vh),36px);margin:0;color:var(--red);line-height:1;text-wrap:balance}
p{margin:0;line-height:1.45;font-size:15px;font-weight:600}
.eyebrow{font-family:var(--pixel);font-size:9px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn{font-family:var(--display);font-size:20px;letter-spacing:.02em;border:0;border-radius:12px;padding:10px 20px;background:var(--red);color:#fff;box-shadow:0 4px 0 var(--red-dark);cursor:pointer;transition:transform .08s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--red-dark)}
.btn.gold{background:var(--gold);color:var(--text);box-shadow:0 4px 0 var(--gold-dark)}
.btn.ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 2px #d8c8d6}
.btn:focus-visible,.lvl:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.small{font-size:13px;color:var(--muted)}

.levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.lvl{display:flex;flex-direction:column;gap:6px;text-align:left;font-family:var(--body);background:#fff;border:2px solid #ead9e4;border-radius:12px;padding:10px 12px;color:var(--text);cursor:pointer;min-width:0}
.lvl b{font-family:var(--display);font-weight:400;font-size:19px;line-height:1.05}
.lvl .meta{display:flex;gap:8px;align-items:center;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.lvl .num{font-family:var(--pixel);font-size:9px;color:var(--muted)}
.lvl.finale{grid-column:1/-1;background:linear-gradient(90deg,#fff3c4,#fff);border-color:var(--gold)}
.lvl[disabled]{opacity:.5;cursor:not-allowed}
.dots{display:inline-flex;gap:3px}
.dots i{width:10px;height:10px;border-radius:50%;background:#e5dbe2;display:block}
.dots i.on{background:var(--gold);box-shadow:inset 0 0 0 2px var(--gold-dark)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:12px;font-weight:800;padding:3px 8px;border-radius:6px;background:#fff1c7;color:#6b4b00;border:1px solid #f0d27a}
.chip.off{background:#f3edf1;color:#b5a6b0;border-color:#e8dde4}
.tally{display:grid;grid-template-columns:1fr auto;gap:4px 16px;font-weight:800;font-variant-numeric:tabular-nums}
.tally span:nth-child(even){text-align:right;font-family:var(--pixel);font-size:12px;align-self:center}
.stars{font-size:44px;line-height:1;letter-spacing:4px;color:#e2d6dd}
.stars .on{color:var(--gold);text-shadow:0 3px 0 var(--gold-dark)}
.keys{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:14px;font-weight:600}
kbd{font-family:var(--pixel);font-size:9px;background:#efe4ec;border-radius:4px;padding:3px 5px;white-space:nowrap;box-shadow:0 2px 0 #d5c4d0}

.iconbtn{position:absolute;top:calc(env(safe-area-inset-top,0px) + 8px);right:calc(env(safe-area-inset-right,0px) + 8px);width:40px;height:40px;border-radius:10px;border:0;background:rgba(0,0,0,.35);color:#fff;font-family:var(--pixel);font-size:12px;cursor:pointer;z-index:5}
/* Touch: jede Bildschirmhälfte ist eine große Zone, die Knöpfe zeigen nur, wo der Daumen hingehört */
#touch{position:absolute;inset:0;pointer-events:none;z-index:4;--tb:clamp(40px,12vmin,64px);--pad:max(6px,1.5vmin)}
.tzone{position:absolute;top:0;bottom:0;width:50%;pointer-events:auto;touch-action:none}
#tMove{left:0}
#tAct{right:0}
#tDpad{position:absolute;left:calc(env(safe-area-inset-left,0px) + var(--pad));bottom:calc(env(safe-area-inset-bottom,0px) + var(--pad));display:flex;gap:8px}
#tJump{position:absolute;right:calc(env(safe-area-inset-right,0px) + var(--pad));bottom:calc(env(safe-area-inset-bottom,0px) + var(--pad))}
#tThrow{position:absolute;right:calc(env(safe-area-inset-right,0px) + var(--pad) + var(--tb)*1.1 + 8px);bottom:calc(env(safe-area-inset-bottom,0px) + var(--pad))}
#touch.finale #tAct{top:auto;left:auto;width:auto;height:auto;bottom:0;right:0}
#touch.finale #tThrow{position:relative;right:auto;bottom:auto;margin:0 calc(env(safe-area-inset-right,0px) + var(--pad)) calc(env(safe-area-inset-bottom,0px) + var(--pad)) 0}
.tbtn{width:var(--tb);height:var(--tb);border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.3);opacity:.7;color:#fff;font-family:var(--display);font-size:calc(var(--tb)*.24);text-shadow:0 1px 2px rgba(0,0,0,.6);box-sizing:border-box;transition:transform .06s,background-color .06s}
.tbtn.big{width:calc(var(--tb)*1.1);height:calc(var(--tb)*1.1);background:rgba(229,36,59,.3)}
#tThrow{background:rgba(255,207,58,.3)}
.tbtn.on{background:rgba(255,207,58,.6);opacity:1;transform:scale(.92)}
.tbtn svg{width:45%;height:45%;fill:#fff}
.hint{position:absolute;left:50%;top:calc(env(safe-area-inset-top,0px) + 10px);transform:translateX(-50%);font-size:12px;font-weight:800;background:rgba(0,0,0,.5);padding:4px 10px;border-radius:8px;color:#fff;white-space:nowrap;z-index:3}
@media (prefers-reduced-motion:reduce){.btn,.tbtn{transition:none}}