:root{color-scheme:dark;--bg:#07090f;--panel:#111827cc;--line:#263244;--text:#f8fafc;--muted:#a8b3c7;--accent:#facc15;--good:#34d399;--bad:#fb7185;--magic:#a78bfa;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 20% 10%,#2f1d63 0,transparent 30rem),radial-gradient(circle at 82% 20%,#14435a 0,transparent 28rem),linear-gradient(145deg,#07090f,#111827 55%,#05070b);color:var(--text);overflow-x:hidden}.topbar{width:min(1280px,calc(100% - 24px));margin:0 auto;padding:14px 0;display:flex;align-items:center;justify-content:space-between;gap:10px}.home,.small-btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #ffffff24;border-radius:999px;background:#ffffff12;color:var(--text);font-weight:800;text-decoration:none;padding:0 14px}.small-btn{cursor:pointer}.title{display:flex;align-items:center;gap:9px;font-size:clamp(1rem,3vw,1.35rem);font-weight:900}.shell{width:min(1280px,calc(100% - 24px));margin:0 auto 132px;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px}.game-card,.panel{border:1px solid #ffffff20;border-radius:24px;background:var(--panel);box-shadow:0 24px 80px #0007;backdrop-filter:blur(14px)}.game-card{overflow:hidden}canvas{display:block;width:100%;height:auto;image-rendering:pixelated;background:#030712}.hud{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;border-top:1px solid var(--line);background:var(--line)}.hud div{background:#0b1220;padding:12px}.hud span{display:block;color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.11em;font-weight:900}.hud strong{font-size:1.1rem}.side-panel{display:flex;flex-direction:column;gap:16px}.panel{padding:18px}h1,h2{margin:0 0 10px;line-height:1.05}h1{font-size:clamp(2rem,5vw,3.4rem);letter-spacing:-.06em}h2{font-size:1.1rem}p{color:var(--muted);line-height:1.55}.legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0;margin:16px 0 0;list-style:none;color:var(--muted)}.legend li{border:1px solid #ffffff18;border-radius:12px;padding:8px;background:#ffffff0a}.legend b{color:var(--accent);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.log{height:220px;overflow:auto;padding-right:4px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9rem;color:#dbeafe}.log p{margin:0 0 8px;color:#dbeafe}.log .bad{color:var(--bad)}.log .good{color:var(--good)}.log .magic{color:var(--magic)}.touch-controls{position:fixed;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(520px,calc(100% - 20px));display:none;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px;border:1px solid #ffffff24;border-radius:24px;background:#020617e6;box-shadow:0 18px 60px #000a;z-index:5;touch-action:none;user-select:none;-webkit-touch-callout:none}.touch-controls button{min-height:56px;border:1px solid #ffffff24;border-radius:16px;background:#172033;color:var(--text);font-size:1.2rem;font-weight:900}.touch-controls button:active,.touch-controls button.pressed{background:#334155}.touch-controls .wide{grid-column:span 3;font-size:1rem;background:#312e81}@media (pointer:coarse),(max-width:1100px){.touch-controls{display:grid}.shell{margin-bottom:330px}}@media (max-width:960px){.shell{grid-template-columns:1fr}.side-panel{order:-1}.hud{grid-template-columns:repeat(2,1fr)}.log{height:140px}.topbar{flex-wrap:wrap}.home,.small-btn{padding:0 12px}.legend{grid-template-columns:1fr 1fr}}