:root {
  color-scheme: dark;
  --bg: #02040d;
  --panel: rgba(6, 15, 31, 0.92);
  --panel-2: rgba(11, 17, 40, 0.94);
  --cyan: #35e7ff;
  --purple: #cf48ff;
  --pink: #ff3b95;
  --orange: #ff9f2d;
  --green: #55f5a8;
  --text: #eafaff;
  --muted: #8fa9bd;
  --line: rgba(66, 216, 255, 0.4);
  --danger: #ff4f62;
  font-family: Inter, Rajdhani, "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); }
body { touch-action: none; user-select: none; }
button, input { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.app-shell { position: relative; width: 100%; height: 100%; overflow: hidden; background:
  radial-gradient(circle at 50% 45%, rgba(125, 33, 255, .22), transparent 36%),
  radial-gradient(circle at 15% 70%, rgba(0, 226, 255, .13), transparent 30%),
  linear-gradient(155deg, #05091a, #02040c 56%, #090314); }
.app-shell::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.22; background-image:
  linear-gradient(rgba(80, 224, 255, .12) 1px, transparent 1px),
  linear-gradient(90deg, rgba(80, 224, 255, .12) 1px, transparent 1px); background-size: 42px 42px; transform: perspective(500px) rotateX(55deg) scale(1.4) translateY(20%); transform-origin: center bottom; }
#game-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.topbar { position:absolute; z-index:20; left:0; right:0; top:0; min-height:68px; padding:12px 18px; display:flex; align-items:center; justify-content:space-between; background:linear-gradient(180deg, rgba(3,8,20,.96), rgba(3,8,20,.55), transparent); border-bottom:1px solid rgba(56,219,255,.18); pointer-events:none; }
.brand { display:flex; flex-direction:column; line-height:.9; text-shadow:0 0 18px rgba(53,231,255,.7); }
.brand-main { font-weight:900; letter-spacing:.14em; font-size:clamp(20px, 3vw, 34px); }
.brand-sub { margin-top:7px; color:var(--purple); letter-spacing:.35em; font-size:10px; }
.top-actions { display:flex; gap:8px; align-items:center; pointer-events:auto; }
.connection-status { color:var(--muted); font-size:10px; letter-spacing:.12em; }
.connection-status.online { color:var(--green); }
.connection-status.offline { color:var(--danger); }
.icon-btn, .panel-btn, .pause-btn { border:1px solid var(--line); background:rgba(4,13,29,.78); color:var(--text); padding:9px 12px; letter-spacing:.08em; font-size:11px; border-radius:0; box-shadow:inset 0 0 18px rgba(24,190,255,.05); }
.icon-btn:hover, .panel-btn:hover, .pause-btn:hover { border-color:var(--cyan); color:var(--cyan); }
.screen { position:absolute; z-index:15; inset:0; display:flex; align-items:center; justify-content:center; padding:90px 5vw 54px; }
.menu-screen { justify-content:space-between; gap:4vw; background:radial-gradient(circle at 30% 50%, rgba(91,29,185,.28), transparent 35%); }
.hero-panel { width:min(680px, 58vw); padding:clamp(24px,4vw,54px); background:linear-gradient(135deg, rgba(5,15,34,.92), rgba(15,8,38,.86)); border:1px solid rgba(62,220,255,.38); clip-path:polygon(0 0, 96% 0, 100% 8%, 100% 100%, 4% 100%, 0 92%); box-shadow:0 0 60px rgba(80,35,230,.22); }
.hero-kicker, .modal-kicker { color:var(--cyan); letter-spacing:.28em; font-size:11px; }
.hero-panel h1 { margin:8px 0 10px; font-size:clamp(48px,8vw,104px); line-height:.88; letter-spacing:.04em; background:linear-gradient(90deg,#fff,#47eaff 45%,#d14dff); color:transparent; background-clip:text; text-shadow:0 0 35px rgba(71,234,255,.24); }
.hero-panel p { max-width:620px; color:#b7cadd; line-height:1.55; }
.primary-btn, .secondary-btn, .link-btn { width:100%; min-height:50px; margin-top:12px; border-radius:0; font-weight:800; letter-spacing:.12em; }
.primary-btn { color:#03121b; border:1px solid #7af3ff; background:linear-gradient(90deg,#24dcff,#b73dff); box-shadow:0 0 25px rgba(45,221,255,.24); }
.primary-btn:hover { filter:brightness(1.16); }
.secondary-btn { border:1px solid var(--purple); color:#f5e8ff; background:rgba(95,23,128,.28); }
.link-btn { border:0; background:transparent; color:var(--cyan); min-height:auto; padding:12px; }
.menu-grid { margin-top:14px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.menu-stats { width:min(340px,30vw); display:grid; gap:12px; }
.menu-stats div { padding:18px; border-left:2px solid var(--purple); background:rgba(3,11,25,.78); }
.menu-stats span, .hud-left span, .hud-right span, .minigame-header span { display:block; color:var(--muted); font-size:10px; letter-spacing:.15em; }
.menu-stats strong { display:block; margin-top:5px; font-size:clamp(18px,2.5vw,30px); color:var(--cyan); overflow-wrap:anywhere; }
.auth-screen { background:radial-gradient(circle at 50% 50%,rgba(87,33,181,.36),rgba(1,3,10,.9) 55%); }
.modal { position:relative; background:linear-gradient(145deg,rgba(5,15,34,.98),rgba(19,8,42,.98)); border:1px solid rgba(64,226,255,.48); box-shadow:0 0 65px rgba(111,36,224,.3), inset 0 0 35px rgba(32,195,255,.04); clip-path:polygon(0 0, 96% 0, 100% 7%, 100% 100%, 4% 100%, 0 93%); }
.auth-card { width:min(560px,92vw); padding:40px; }
.auth-card h2, .pause-card h2 { margin:10px 0; font-size:clamp(28px,5vw,44px); }
.auth-card p { color:var(--muted); line-height:1.5; }
label { display:block; margin:18px 0 7px; color:var(--cyan); font-size:11px; letter-spacing:.15em; }
input { width:100%; height:54px; border:1px solid rgba(61,218,255,.5); border-radius:0; background:#030914; color:white; padding:0 16px; font-size:20px; outline:none; text-transform:uppercase; }
input:focus { border-color:var(--purple); box-shadow:0 0 18px rgba(194,53,255,.22); }
.field-hint { margin-top:7px; color:var(--muted); font-size:11px; }
.error-box { margin-top:14px; padding:12px; border:1px solid var(--danger); color:#ffdce2; background:rgba(255,45,81,.12); }
.game-hud { position:absolute; z-index:12; inset:76px 18px 48px; pointer-events:none; }
.hud-left, .hud-right { position:absolute; top:5%; display:grid; gap:8px; width:160px; }
.hud-left { left:1%; }
.hud-right { right:1%; }
.hud-left div, .hud-right div { padding:11px 12px; background:rgba(3,11,26,.78); border-left:2px solid var(--cyan); }
.hud-right div { border-left:0; border-right:2px solid var(--purple); text-align:right; }
.hud-left strong, .hud-right strong { font-size:22px; }
.anomaly-box { position:absolute; left:50%; top:1%; transform:translateX(-50%); min-width:250px; padding:10px 18px; text-align:center; border:1px solid var(--pink); background:rgba(70,3,55,.82); box-shadow:0 0 24px rgba(255,45,164,.25); animation:pulse .8s infinite alternate; }
.anomaly-box span { display:block; font-size:9px; letter-spacing:.2em; color:#ff90da; }
.anomaly-box strong { margin:0 8px; }
.anomaly-box em { color:#ffd4f1; font-style:normal; }
.pause-btn { position:absolute; right:1%; bottom:1%; pointer-events:auto; }
.toast-stack { position:absolute; z-index:40; top:84px; left:50%; transform:translateX(-50%); width:min(520px,90vw); display:grid; gap:8px; pointer-events:none; }
.toast { padding:12px 16px; text-align:center; border:1px solid var(--cyan); background:rgba(3,12,28,.92); color:#eaffff; animation:toast-in .22s ease-out; }
.toast.warn { border-color:var(--pink); color:#ffe6f5; }
.modal-layer, .pause-overlay { position:absolute; z-index:50; inset:0; display:flex; align-items:center; justify-content:center; padding:5vw; background:rgba(0,2,10,.8); backdrop-filter:blur(8px); }
.generic-modal { width:min(780px,94vw); max-height:82vh; overflow:auto; padding:34px; }
.modal-close { position:absolute; right:14px; top:10px; border:0; background:transparent; color:white; font-size:30px; }
.generic-modal h2 { color:var(--cyan); letter-spacing:.08em; }
.generic-modal table { width:100%; border-collapse:collapse; }
.generic-modal th, .generic-modal td { padding:10px; border-bottom:1px solid rgba(100,216,255,.15); text-align:left; }
.generic-modal th { color:var(--muted); font-size:10px; letter-spacing:.12em; }
.ranking-me { color:var(--orange); }
.pause-card { width:min(430px,90vw); padding:36px; text-align:center; }
.minigame-overlay { position:absolute; z-index:11; inset:76px 0 48px; pointer-events:none; }
.minigame-header { display:flex; justify-content:center; gap:4vw; padding:10px; background:linear-gradient(90deg,transparent,rgba(4,10,28,.85),transparent); }
.minigame-header div { min-width:120px; text-align:center; }
.minigame-header strong { font-size:18px; color:var(--cyan); }
.minigame-instruction { position:absolute; left:50%; bottom:4%; transform:translateX(-50%); padding:8px 16px; color:#c8dcec; background:rgba(2,8,20,.72); font-size:12px; }
.touch-controls { position:absolute; z-index:30; left:0; right:0; bottom:max(42px, env(safe-area-inset-bottom)); padding:8px 12px; display:none; justify-content:space-between; pointer-events:none; }
.touch-group { display:flex; gap:8px; pointer-events:auto; }
.touch-controls button { width:58px; height:52px; border:1px solid rgba(76,230,255,.52); border-radius:0; background:rgba(3,11,28,.78); color:white; font-weight:800; font-size:12px; backdrop-filter:blur(6px); }
.touch-controls button:active { background:rgba(107,31,170,.8); transform:scale(.96); }
.footer { position:absolute; z-index:10; left:0; right:0; bottom:0; height:34px; display:flex; align-items:center; justify-content:center; color:#587086; font-size:10px; letter-spacing:.08em; background:linear-gradient(0deg,rgba(2,4,13,.95),transparent); pointer-events:none; }
.recovery-code { display:block; margin:20px 0; padding:18px; text-align:center; color:var(--orange); border:1px dashed var(--orange); font-size:clamp(18px,4vw,30px); letter-spacing:.15em; user-select:text; }
.help-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.help-grid div { padding:12px; border:1px solid rgba(63,220,255,.18); }
.help-grid strong { color:var(--cyan); }
@keyframes pulse { from { box-shadow:0 0 10px rgba(255,45,164,.18); } to { box-shadow:0 0 34px rgba(255,45,164,.5); } }
@keyframes toast-in { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
@media (max-width: 850px) {
  .topbar { min-height:58px; padding:8px 10px; }
  .brand-sub { display:none; }
  .connection-status { display:none; }
  .icon-btn { padding:7px; font-size:9px; }
  .menu-screen { flex-direction:column; justify-content:center; padding:70px 12px 50px; }
  .hero-panel { width:min(620px,96vw); padding:24px; }
  .hero-panel h1 { font-size:52px; }
  .menu-stats { width:min(620px,96vw); grid-template-columns:1fr 1fr; gap:6px; }
  .menu-stats div { padding:8px 12px; }
  .menu-stats strong { font-size:16px; }
  .game-hud { inset:58px 8px 154px; }
  .hud-left, .hud-right { top:auto; bottom:0; width:46%; grid-template-columns:1fr 1fr; gap:3px; }
  .hud-left { left:1%; }
  .hud-right { right:1%; }
  .hud-left div, .hud-right div { padding:4px 6px; }
  .hud-left strong, .hud-right strong { font-size:14px; }
  .hud-left span, .hud-right span { font-size:7px; }
  .pause-btn { right:0; top:4px; bottom:auto; transform:none; padding:6px 8px; }
  .anomaly-box { top:0; min-width:190px; padding:5px 8px; font-size:11px; }
  .footer { font-size:8px; }
  .touch-controls { display:flex !important; }
}
@media (pointer: coarse) { .touch-controls:not(.hidden) { display:flex; } }
@media (max-height: 600px) and (orientation: landscape) {
  .topbar { min-height:48px; }
  .game-hud { inset:52px 8px 32px; }
  .footer { height:28px; }
  .touch-controls { bottom:28px; }
  .touch-controls button { width:50px; height:42px; }
  .minigame-overlay { inset:52px 0 30px; }
}