:root{--bg:#05080a;--panel:#091115;--grid:#19323a;--green:#56ff9b;--cyan:#42e8ff;--pink:#ff3b91;--text:#d7f7eb;--muted:#6d9188;--line:#244b4f}
*{box-sizing:border-box}
html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}
body{background:var(--bg);color:var(--text);font-family:"Courier New",ui-monospace,monospace;touch-action:none;-webkit-user-select:none;user-select:none}
button{font:inherit;color:inherit}
.screen{position:relative;width:100%;height:100%;min-height:100%;background:radial-gradient(circle at 76% 18%,#0c2a27 0,transparent 34%),linear-gradient(135deg,#030607,#081014)}
.hidden{display:none!important}
.scanlines{position:absolute;inset:0;pointer-events:none;opacity:.14;background:repeating-linear-gradient(0deg,transparent 0 3px,#6fffb61a 3px 4px)}
.lobby{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:max(24px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));isolation:isolate}
.lobby:before,.lobby:after{content:"";position:absolute;border:1px solid #56ff9b22;z-index:-1;transform:rotate(-12deg)}
.lobby:before{width:52vmin;height:52vmin;right:-14vmin;top:-20vmin}.lobby:after{width:34vmin;height:70vmin;left:-16vmin;bottom:-24vmin}
.boot{width:min(560px,100%);margin:0 0 20px;color:var(--green);font-size:.75rem;letter-spacing:.12em}
h1{width:min(560px,100%);font-size:clamp(2.5rem,10vw,5.5rem);line-height:.8;letter-spacing:-.09em;margin:0;text-shadow:0 0 25px #42e8ff44}
h1 span{color:var(--cyan)}
.subtitle{width:min(560px,100%);color:var(--muted);font-size:clamp(.69rem,2vw,.9rem);letter-spacing:.08em;margin:18px 0 36px}
.mode-list{display:grid;gap:12px;width:min(560px,100%)}
.mode-button{display:grid;grid-template-columns:46px 1fr 24px;align-items:center;text-align:left;min-height:78px;padding:10px 14px;border:1px solid var(--line);border-radius:0;background:#091217d9;cursor:pointer;transition:transform .12s,background .12s,border-color .12s}
.mode-button:hover,.mode-button:focus-visible{outline:none;transform:translateX(5px);border-color:var(--cyan);background:#0b1b20}
.mode-button.primary{border-left:3px solid var(--green)}
.mode-button .key{color:var(--green);font-weight:bold}.mode-button b{display:block;font-size:1rem;letter-spacing:.08em}.mode-button small{display:block;color:var(--muted);margin-top:6px;font-size:.72rem}.arrow{font-size:2rem;color:var(--cyan)}
.hint{margin:32px 0 0;color:#496a64;text-align:center;font-size:.66rem;letter-spacing:.06em}
.game{display:grid;grid-template-rows:auto 1fr auto;background:#030708}
.hud,.coords{z-index:2;display:flex;align-items:center;border-color:var(--line);background:#071013e8;backdrop-filter:blur(8px)}
.hud{height:64px;padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 8px max(10px,env(safe-area-inset-left));border-bottom:1px solid var(--line);gap:12px}
.brand{font-size:.9rem;letter-spacing:-.05em;color:var(--cyan);flex:1}.brand b{color:var(--green)}
.icon-button{width:42px;height:42px;padding:0;border:1px solid var(--line);background:#091519;color:var(--green);font-size:1.8rem;cursor:pointer}.restart{font-size:1.25rem}
.turn{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.7rem}.turn b{display:grid;place-items:center;width:32px;height:32px;color:var(--cyan);border:1px solid currentColor;font-size:1.35rem;text-shadow:0 0 10px currentColor}
#board{display:block;width:100%;height:100%;cursor:crosshair;touch-action:none}
.coords{height:32px;justify-content:space-between;padding:4px max(12px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));border-top:1px solid var(--line);color:var(--muted);font-size:.65rem}
.status{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%) scale(.96);width:min(420px,calc(100% - 32px));padding:24px;border:1px solid var(--green);background:#050b0df2;box-shadow:0 0 50px #000,0 0 28px #56ff9b1c;text-align:center;font-size:1.1rem;line-height:1.7;opacity:0;pointer-events:none;transition:.18s}
.status.show{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}.status b{display:block;color:var(--green);font-size:1.8rem}.status button{margin-top:16px;padding:12px 22px;border:1px solid var(--cyan);background:#092129;cursor:pointer}
@media(max-height:570px){.boot{margin-bottom:10px}.subtitle{margin:12px 0 18px}.mode-list{grid-template-columns:1fr 1fr}.mode-button{min-height:68px}.hint{margin-top:14px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}