:root { color-scheme: dark; --ink:#f5f8ff; --muted:#91a6c9; --line:rgba(88,160,255,.28); --panel:rgba(7,24,58,.82); }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:#020817; }
body { min-height:100vh; overflow-x:hidden; color:var(--ink); font-family:"Arial Narrow",Impact,system-ui,sans-serif; background:radial-gradient(circle at 50% 15%,#133d80 0,transparent 34%),linear-gradient(135deg,#020612,#071834 48%,#020817); }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.28; background:linear-gradient(90deg,transparent 49.8%,rgba(93,157,255,.25) 50%,transparent 50.2%),linear-gradient(0deg,transparent 49.8%,rgba(93,157,255,.12) 50%,transparent 50.2%); background-size:70px 70px; mask-image:linear-gradient(to bottom,black,transparent 70%); }
.game-shell { width:min(1800px,100%); margin:auto; padding:18px clamp(12px,2vw,36px) 28px; position:relative; }
.brand { text-align:center; margin-bottom:14px; }
.brand__eyebrow,.screen__kicker { color:#72bcff; font-size:11px; letter-spacing:.32em; font-weight:800; }
.brand h1 { display:flex; justify-content:center; margin:0; font-size:clamp(44px,7vw,90px); line-height:.9; font-style:italic; letter-spacing:-.08em; filter:drop-shadow(0 6px 0 #041534) drop-shadow(0 0 18px rgba(43,150,255,.45)); }
.brand h1 span { -webkit-text-stroke:1px rgba(255,255,255,.38); text-shadow:inset 0 4px white; }
.c-red{color:#ff3046}.c-orange{color:#ff7b12}.c-yellow{color:#ffc81d}.c-green{color:#55d23e}.c-cyan{color:#12c8ef}.c-purple{color:#cb32d6}
.brand p { margin:10px 0 0; color:var(--muted); font:600 11px system-ui; letter-spacing:.18em; text-transform:uppercase; }
.game-layout { display:grid; grid-template-columns:minmax(170px,220px) minmax(700px,1050px) minmax(170px,220px); gap:clamp(12px,1.5vw,24px); justify-content:center; align-items:start; }
.panel { border:1px solid var(--line); border-radius:8px; padding:18px; background:linear-gradient(145deg,rgba(11,38,81,.84),rgba(3,15,38,.9)); box-shadow:inset 0 0 30px rgba(15,104,214,.08),0 16px 40px rgba(0,0,0,.25); }
.panel--left { display:grid; gap:12px; }.panel--right{display:grid;gap:11px}
.stat { display:flex; flex-direction:column; gap:5px; }.stat span,.mini-card>span,.controls-title { font-size:10px; letter-spacing:.18em; color:#7593bf; font-weight:800; }
.stat strong { font-family:"Courier New",monospace; font-size:clamp(20px,2.2vw,30px); color:#f2f8ff; text-shadow:0 0 12px rgba(85,178,255,.4); }.stat-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mini-card { border-top:1px solid var(--line); padding-top:14px; }.mini-card canvas{width:100%;height:auto;margin-top:8px;background:rgba(0,8,26,.45);border-radius:4px}
.board-wrap { position:relative; border:2px solid #267ccf; border-radius:6px; padding:6px; background:#020a19; box-shadow:0 0 0 1px #69b5ff,0 0 34px rgba(18,125,255,.36),inset 0 0 24px #000; }
#game { display:block; width:100%; height:min(78vh,840px); background:linear-gradient(rgba(5,22,52,.8),rgba(1,9,25,.96)); }
.board-wrap::after { content:"";position:absolute;inset:6px;pointer-events:none;background:linear-gradient(110deg,rgba(255,255,255,.04),transparent 28%); }
.screen { position:absolute; z-index:2; inset:6px; display:grid; place-items:center; background:rgba(1,8,23,.76); backdrop-filter:blur(5px); transition:.2s; }.screen.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.screen__card { width:min(340px,86%); padding:30px; text-align:center; border:1px solid #237ed4; border-radius:8px; background:linear-gradient(145deg,rgba(10,46,99,.96),rgba(3,18,48,.98)); box-shadow:0 0 0 5px rgba(9,65,128,.28),0 20px 60px #000; }
.screen__card.compact{padding:28px}.screen h2{font-size:clamp(30px,4vw,48px);font-style:italic;line-height:.94;margin:12px 0 22px}.screen label{display:block;color:#a6bad8;font:600 11px system-ui;text-transform:uppercase;letter-spacing:.12em}.screen p{color:#9fb1cc;font:13px system-ui;margin:-10px 0 22px}
.level-picker{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;margin:10px 0}.level-picker button{height:40px}.level-picker output{font:bold 34px "Courier New";color:#ffc526}.screen input{width:100%;accent-color:#15a7ee;margin-bottom:22px}
button{color:white;border:1px solid rgba(87,163,255,.42);background:#0a2859;border-radius:4px;font:800 12px system-ui;letter-spacing:.08em;cursor:pointer;transition:transform .12s,filter .12s,background .12s}button:hover{filter:brightness(1.25)}button:active{transform:translateY(2px)}
.primary{width:100%;padding:14px;background:linear-gradient(#14b9ed,#0871d6);border-color:#70d8ff;box-shadow:0 5px 0 #054082,0 0 22px rgba(16,175,255,.32)}.secondary{width:100%;padding:11px;margin-top:12px;background:transparent}.screen small{display:block;margin-top:14px;color:#617b9f;font:10px system-ui}
.key-row{display:grid;grid-template-columns:30px 30px 1fr;align-items:center;gap:5px;min-height:28px}.key-row span{grid-column:3;color:#a9b9d0;font:12px system-ui}.key-row:nth-of-type(n+3) span{grid-column:2/4}.key-row kbd{display:grid;place-items:center;height:26px;min-width:27px;padding:0 6px;border:1px solid #2c75bd;border-bottom-width:3px;border-radius:4px;background:#092451;color:#bde5ff;font:11px system-ui}.sound-controls{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:14px;margin-top:4px}.sound-controls button{height:38px;text-align:left;padding:0 10px}.sound-controls b{float:right;color:#6df1a4;font-size:10px}.sound-controls button[aria-pressed="false"] b{color:#8390a6}
.touch-controls{display:none;grid-template-columns:repeat(5,1fr);gap:8px;width:min(500px,100%);margin:12px auto 0}.touch-controls button{height:48px;font-size:20px;touch-action:manipulation}
@media(max-width:900px){.game-layout{grid-template-columns:150px minmax(350px,1fr)}.panel--right{display:none}.touch-controls{display:grid}.brand h1{font-size:54px}#game{height:min(65vh,650px)}}
@media(max-width:620px){.game-shell{padding:10px}.brand{margin-bottom:8px}.brand__eyebrow,.brand p{display:none}.brand h1{font-size:42px}.game-layout{display:flex;flex-direction:column}.board-wrap{width:100%;order:1}.panel--left{order:2;width:100%;grid-template-columns:1fr 1fr 1fr;padding:12px}.mini-card{border:0;padding:0}.mini-card canvas{height:62px;object-fit:contain}#game{height:62vh}.touch-controls{position:sticky;bottom:8px;z-index:5}.screen__card{padding:22px}}