/* Farb-Tokens, Schrift, Grundlayout (Canvas füllt den Bildschirm) */
/* Layout: full-bleed diorama canvas; toy-block HUD floats on top, context panel docks right (bottom sheet on phones). */
:root{
  --sky-top:#bfe0ea; --sky-bot:#9fcfe0;
  --panel:#fbfcf6; --panel-2:#eef2e4; --ink:#1f2c29; --ink-2:#5a6a63; --line:#d3dbc8; --shadow:rgba(40,60,50,.18); --scrim:rgba(20,30,28,.45);
  --accent:#2f7d5b; --accent-deep:#1f5a40; --accent-ink:#ffffff; --accent-soft:#dcefe3; --danger:#b8443a; --gold:#d9a521;
  --fire:#ef6c35; --water:#2f86d6; --plant:#4ea843; --bolt:#d9a90f; --neutral:#8d948f;
  --display:'Lilita One','Trebuchet MS',system-ui,sans-serif;
  --body:'Rubik',system-ui,-apple-system,'Segoe UI',sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --sky-top:#15202c; --sky-bot:#1a3340;
  --panel:#18211f; --panel-2:#212c29; --ink:#e7efe9; --ink-2:#9db0a7; --line:#34433d; --shadow:rgba(0,0,0,.45); --scrim:rgba(0,0,0,.6);
  --accent:#58bd8c; --accent-deep:#2f7d5b; --accent-ink:#0d1a14; --accent-soft:#1f3a2e; --danger:#e07467; --gold:#e8bb3c;
  --fire:#ff8551; --water:#5aa6ef; --plant:#6cc35f; --bolt:#f0c531; --neutral:#a6ada8; color-scheme:dark}}
:root[data-theme="dark"]{
  --sky-top:#15202c; --sky-bot:#1a3340;
  --panel:#18211f; --panel-2:#212c29; --ink:#e7efe9; --ink-2:#9db0a7; --line:#34433d; --shadow:rgba(0,0,0,.45); --scrim:rgba(0,0,0,.6);
  --accent:#58bd8c; --accent-deep:#2f7d5b; --accent-ink:#0d1a14; --accent-soft:#1f3a2e; --danger:#e07467; --gold:#e8bb3c;
  --fire:#ff8551; --water:#5aa6ef; --plant:#6cc35f; --bolt:#f0c531; --neutral:#a6ada8; color-scheme:dark}

[hidden]{display:none!important}
html{color-scheme:light}
html,body{height:100%;margin:0}
img{max-width:100%}
body{background:linear-gradient(180deg,var(--sky-top),var(--sky-bot));color:var(--ink);font:14px var(--body);overflow:hidden;-webkit-tap-highlight-color:transparent}
#app{position:fixed;inset:0}
#stage{position:absolute;inset:0}
#stage::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 55%,rgba(20,30,40,.22) 100%)}
#stage canvas{display:block;touch-action:none}
.ei{display:inline-block;vertical-align:-2px;flex:none}
b,.num{font-family:var(--display);font-weight:400;letter-spacing:.02em}