:root{color-scheme:dark;--bg: #07111c;--bg-2: #0b1728;--panel: rgba(16, 29, 48, .88);--panel-border: rgba(255, 255, 255, .08);--text: #eff5fb;--muted: #93a9bc;--accent: #f5c542;--accent-2: #32d4a4;--radius: 8px;--shadow: 0 24px 60px rgba(0, 0, 0, .38)}*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Arial,sans-serif;background:radial-gradient(circle at top left,rgba(50,212,164,.12),transparent 24%),radial-gradient(circle at top right,rgba(245,197,66,.1),transparent 22%),linear-gradient(180deg,var(--bg-2) 0%,var(--bg) 100%);color:var(--text)}#root{width:min(1440px,100%);margin:0 auto;padding:20px}.guard-shell{min-height:calc(100vh - 40px);display:grid;place-items:center}.guard-card{width:min(520px,100%);padding:28px;background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);box-shadow:var(--shadow)}.topbar,.layout{display:grid;gap:20px}.topbar{align-items:center;grid-template-columns:1fr auto;margin-bottom:20px}.layout{grid-template-columns:300px minmax(0,1fr) 280px}.eyebrow{margin:0 0 10px;color:var(--accent);font-size:12px;text-transform:uppercase;letter-spacing:.08em}h1,h2,h3,p{margin:0}h1{font-size:clamp(28px,4vw,42px);line-height:1.05}h2{font-size:20px;margin-bottom:10px}h3{font-size:16px;margin-bottom:8px}.muted{color:var(--muted);line-height:1.55}.panel,.canvas-frame,.overlay-card{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);box-shadow:var(--shadow)}.panel{padding:18px}.overview,.sidebar{display:flex;flex-direction:column;gap:20px}.stats-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.stats-list div,.result-card div,.overlay-stats div{padding:14px;border-radius:var(--radius);background:#050c14b3;border:1px solid rgba(255,255,255,.06)}.stats-list dt,.label,.overlay-stats span{display:block;margin-bottom:8px;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.05em}.stats-list dd,.result-card strong,.overlay-stats strong{margin:0;font-size:24px}.legend{display:grid;gap:10px;color:var(--muted);font-size:14px}.legend div{display:flex;align-items:center;gap:10px}.swatch{display:inline-flex;width:14px;height:14px;border-radius:999px}.swatch.gate{background:var(--accent)}.swatch.wind{background:#5fa8ffcc}.swatch.finish{background:var(--accent-2)}.status{padding:14px 16px;border-left:4px solid var(--accent-2);background:#32d4a414;line-height:1.55}.play-area{min-width:0}.canvas-frame{padding:14px}#game-canvas{display:block;width:100%;height:auto;border-radius:6px;background:#08101a}.result-card,.overlay-stats{display:grid;gap:10px}.touch-controls{display:grid;gap:14px}.dpad{display:grid;justify-items:center;gap:10px}.middle-row{display:flex;gap:12px}.touch-controls button,.button{border:0;border-radius:8px;background:#173253;color:var(--text);cursor:pointer;transition:transform .12s ease,background .12s ease}.touch-controls button{min-width:64px;min-height:52px;font-size:22px}.boost-button{min-height:56px;background:#f5c5422e!important;color:var(--accent);font-weight:700;letter-spacing:.08em}.button{padding:12px 18px;font-size:14px;font-weight:700}.button.secondary{background:#ffffff14}.overlay{position:fixed;inset:0;display:grid;place-items:center;padding:20px;background:#03080eb8;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.overlay.hidden{display:none}.overlay-card{width:min(420px,100%);padding:24px}.overlay-card h2{margin-bottom:10px;font-size:32px}.overlay-stats{margin:18px 0}@media(max-width:1180px){.layout{grid-template-columns:1fr}.touch-controls{grid-template-columns:1fr auto;align-items:center}.dpad{justify-items:start}}@media(max-width:640px){#root{padding:14px}.topbar,.touch-controls{grid-template-columns:1fr}}