:root {
  color-scheme: dark;
  --ink:#edf8ff;--muted:#a9c1d7;--panel:#10243a;--panel-2:#183550;--line:#3e6382;
  --accent:#f4c542;--red:#dd4f5d;--blue:#3f91cc;
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#071321;color:var(--ink);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
body{overscroll-behavior:none;touch-action:none}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}
#app{min-height:100vh;padding:10px;display:grid;place-items:center}#game-shell{width:min(100%,760px)}
.topbar{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:8px}.topbar strong{display:block;font-size:14px}.topbar span{color:var(--muted);font-size:11px}
.small-button,.pill,.round,.primary,.secondary{border:0;color:white;font-weight:800;cursor:pointer}.small-button{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:7px 9px;font-size:11px}
#screen-wrap{position:relative;width:100%;aspect-ratio:3/2;overflow:hidden;background:#000;border:4px solid #2c4a63;border-radius:14px;box-shadow:0 8px 28px #0008}canvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}
#toast{position:absolute;left:50%;top:12px;transform:translateX(-50%);min-width:130px;max-width:85%;padding:7px 10px;border-radius:8px;background:#071321e8;border:1px solid #8bb8d7;text-align:center;font-size:11px;opacity:0;transition:opacity .2s;pointer-events:none}#toast.show{opacity:1}
#mobile-controls{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:14px 8px 2px;user-select:none;touch-action:none}
.joystick{position:relative;width:156px;height:156px;border-radius:50%;background:radial-gradient(circle at 45% 40%,#3e5d78,#1d3044 72%);border:4px solid #64849f;box-shadow:inset 0 0 0 12px #0c182633,inset 0 -10px 18px #0007;touch-action:none;flex:0 0 auto}
.joystick-ring{position:absolute;inset:27px;border:2px solid #85a6bf55;border-radius:50%}.joystick-knob{position:absolute;left:50%;top:50%;width:70px;height:70px;margin:-35px;border-radius:50%;background:linear-gradient(#78a8cb,#355b7a);border:4px solid #9ec7e2;box-shadow:0 7px 0 #173044,inset 0 4px 7px #ffffff40;transition:transform .04s linear;pointer-events:none}
.action-cluster{display:flex;flex-direction:column;justify-content:center;gap:12px}.utility-row,.action-row{display:flex;justify-content:flex-end;align-items:center;gap:12px}.pill{border-radius:999px;background:#35475d;border:2px solid #607891;padding:7px 12px;font-size:11px}.round{width:70px;height:70px;border-radius:50%;font-size:24px;border:4px solid #ffffff55;box-shadow:inset 0 -7px 0 #0003}.round.a{background:var(--red)}.round.b{background:var(--blue);transform:translateY(12px)}.round:active,.round.active,.pill:active,.pill.active{filter:brightness(1.35)}
.help{margin:8px 4px 0;color:var(--muted);font-size:10px;text-align:center;line-height:1.5}
.overlay{position:fixed;inset:0;z-index:10;background:#020912e8;display:none;place-items:center;padding:16px;overflow:auto}.overlay.open{display:grid}.modal-card{width:min(100%,650px);background:var(--panel);border:2px solid var(--line);border-radius:16px;padding:20px;box-shadow:0 20px 60px #000b}.eyebrow{margin:0 0 3px;color:var(--accent);font-size:11px;font-weight:900;letter-spacing:1px}h1{font-size:22px;margin:0 0 7px}.modal-card>p{color:var(--muted)}label,legend{display:block;margin:12px 0 6px;font-size:12px;font-weight:800}input[type="text"],input:not([type]){width:100%;border:2px solid var(--line);border-radius:9px;background:#071321;color:white;padding:11px;text-transform:uppercase}fieldset{border:0;margin:16px 0 0;padding:0}.starter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.starter-card{margin:0;display:grid;gap:5px;justify-items:center;text-align:center;padding:12px 8px;border:2px solid var(--line);border-radius:12px;background:#0b1b2d;cursor:pointer}.starter-card:has(input:checked){border-color:var(--accent);background:#293124}.starter-card input{position:absolute;opacity:0}.starter-card small{color:var(--muted);font-size:9px;line-height:1.4}.starter-orb{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;color:white;border:3px solid #ffffff80;font-size:20px}.starter-orb.grass{background:#3e9b64}.starter-orb.fire{background:#e27642}.starter-orb.water{background:#3c85c5}.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}.primary,.secondary{border-radius:9px;padding:11px 14px}.primary{background:#d95361}.secondary{background:#27425b;border:1px solid var(--line)}.status{font-size:10px;margin:10px 0 0!important}
@media(max-width:520px){#app{padding:6px;align-content:start}.topbar span{display:none}#mobile-controls{gap:8px;padding-inline:0}.joystick{width:136px;height:136px}.joystick-knob{width:62px;height:62px;margin:-31px}.round{width:60px;height:60px}.starter-grid{grid-template-columns:1fr}.starter-card{grid-template-columns:auto 1fr;justify-items:start;text-align:left;align-items:center}.starter-card small{grid-column:2}}
/* v0.4 visual-stage polish */
#screen-wrap{border-color:#6c8394;background:#13283a;box-shadow:0 0 0 3px #17283a,0 12px 35px #000a,inset 0 0 0 2px #9eb2bf55}
#screen-wrap:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(#ffffff08 50%,#00000008 50%);background-size:100% 4px;mix-blend-mode:overlay}
canvas{filter:saturate(1.06) contrast(1.03)}
.topbar strong{letter-spacing:.04em}.joystick{box-shadow:inset 0 0 0 12px #0c182633,inset 0 -10px 18px #0007,0 8px 18px #0007}.round{box-shadow:inset 0 -7px 0 #0003,0 8px 16px #0007}