:root { color-scheme: dark; --bg:#030400; --panel:#070907; --panel2:#0c100d; --gold:#f1d91c; --gold-dark:#7d6910; --lime:#69ef19; --cyan:#18ccef; --red:#f0442e; --violet:#c061e6; --white:#e8ece5; --muted:#a5b1a1; --line:#586059; font-family:"Courier New", ui-monospace, monospace; }
* { box-sizing:border-box; }
html, body { min-width:320px; min-height:100%; margin:0; background:#010301; }
body { min-height:100vh; color:var(--white); letter-spacing:.045em; background:
  radial-gradient(ellipse at 15% 0%, rgba(18,120,84,.22), transparent 37%),
  radial-gradient(ellipse at 88% 100%, rgba(160,43,20,.16), transparent 42%),
  linear-gradient(rgba(95,238,55,.065) 1px, transparent 1px),
  linear-gradient(90deg, rgba(95,238,55,.055) 1px, transparent 1px),
  repeating-linear-gradient(135deg, #030804 0 2px, #010301 2px 7px);
  background-size:auto, auto, 54px 54px, 54px 54px, auto;
  background-position:center, center, center bottom, center bottom, center; }
body::before { content:""; position:fixed; z-index:10; inset:0; pointer-events:none; opacity:.3; background-image:
  radial-gradient(#ddffd1 .6px, transparent .8px),
  radial-gradient(#43dff4 .5px, transparent .75px),
  radial-gradient(#ff6d45 .5px, transparent .75px);
  background-size:71px 67px, 113px 97px, 149px 131px;
  background-position:9px 13px, 41px 24px, 72px 58px;
  mix-blend-mode:screen; }
body::after { content:""; position:fixed; z-index:11; inset:0; pointer-events:none; opacity:.22; background:
  radial-gradient(ellipse at center, transparent 42%, rgba(0,0,0,.48) 100%),
  repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.76) 2px 4px); }
button, input, select { font:inherit; } button { cursor:pointer; } a { color:inherit; } button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline:3px solid var(--cyan); outline-offset:3px; }
.screen-page { display:grid; place-items:center; padding:10px; }
.reference-frame { position:relative; width:min(1400px, calc(100vw - 20px)); min-height:min(900px, calc(100vh - 20px)); overflow:hidden; border:2px solid var(--gold); border-radius:9px; background:
  linear-gradient(90deg, rgba(0,0,0,.3), rgba(1,4,2,.18) 30%, rgba(1,4,2,.13) 70%, rgba(0,0,0,.32)),
  linear-gradient(180deg, rgba(0,0,0,.22), transparent 24%, rgba(0,0,0,.38)),
  url('/web/assets/arcade-battle-background-cartoon-v3.png') center / cover no-repeat,
  #030503; box-shadow:inset 0 0 0 1px #6e5b0b, 0 0 0 1px #141301, 0 0 35px rgba(79,239,34,.24), 0 0 85px rgba(241,217,28,.13); }
.reference-frame::before, .game-reference-shell::before { content:""; position:absolute; z-index:0; inset:0; pointer-events:none; opacity:.54; background:
  radial-gradient(ellipse at 50% 120%, rgba(103,239,35,.2), transparent 42%),
  radial-gradient(circle at 8% 8%, rgba(24,204,239,.14), transparent 18%),
  repeating-linear-gradient(90deg, transparent 0 31px, rgba(103,239,35,.16) 32px, transparent 33px),
  repeating-linear-gradient(0deg, transparent 0 31px, rgba(103,239,35,.13) 32px, transparent 33px),
  linear-gradient(180deg, rgba(9,32,14,.18), transparent 35%, rgba(40,10,5,.22)); }
.reference-frame > *, .game-reference-shell > * { position:relative; z-index:1; }
.eyebrow { margin:0; color:var(--lime); font-size:.66rem; font-weight:bold; }
.notice { min-height:1.2em; margin:8px 0 0; color:var(--cyan); font-size:.7rem; }.notice.error { color:#ff8e78; }

/* 1. Main menu */
.menu-frame { max-width:1080px; min-height:650px; }.menu-screen { position:relative; display:grid; place-items:center; min-height:650px; padding:38px 20px 30px; }
.corner-version { position:absolute; left:16px; bottom:12px; color:#9da69d; font-size:.58rem; line-height:1.5; }
.title-lockup { display:flex; align-items:center; justify-content:center; gap:clamp(12px,4vw,46px); text-align:center; }.title-lockup h1 { display:grid; margin:0; font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif; font-size:clamp(3rem,8vw,6rem); font-weight:900; line-height:.72; letter-spacing:.06em; }.title-lockup h1 span { color:transparent; background:repeating-linear-gradient(0deg,#ec4f2e 0 4px,#ff7950 4px 7px,#991f19 7px 9px), repeating-linear-gradient(90deg,transparent 0 10px,#571511 10px 12px); background-clip:text; -webkit-background-clip:text; text-shadow:3px 3px #45110e; }.title-lockup h1 b { margin-top:12px; color:var(--gold); font-size:.41em; letter-spacing:.16em; text-shadow:3px 3px #6d5909; }.title-lockup p { margin:13px 0 0; color:var(--gold); font-family:Impact,Haettenschweiler,sans-serif; font-size:clamp(1rem,2.5vw,1.65rem); letter-spacing:.15em; }
.menu-tank { position:relative; display:block; width:61px; height:34px; border:6px solid #302a02; background:var(--gold); box-shadow:inset 0 0 0 5px #d4aa18, 5px 5px 0 #070700; }.menu-tank::before { content:""; position:absolute; top:8px; left:42px; width:35px; height:7px; background:inherit; box-shadow:0 0 0 3px #302a02; }.menu-tank::after { content:"✦"; position:absolute; left:81px; top:-1px; color:#ff812c; font-size:23px; }.menu-tank.tank-cyan { background:var(--cyan); box-shadow:inset 0 0 0 5px #1684a1, 5px 5px #070700; }.menu-tank.tank-cyan::before { box-shadow:0 0 0 3px #0d3945; }.menu-tank.flip { transform:scaleX(-1); }
.menu-console { width:min(360px, 100%); margin-top:27px; padding:12px; border:1px solid rgba(105,239,25,.4); border-radius:6px; background:linear-gradient(135deg, rgba(1,7,3,.79), rgba(3,7,4,.93)); box-shadow:0 0 22px rgba(0,0,0,.5), inset 0 0 18px rgba(32,114,14,.12); }.menu-console .eyebrow { margin:0 0 8px; text-align:center; }.menu-callsign { display:grid; grid-template-columns:56px 1fr; align-items:center; gap:7px; margin:0 0 12px; color:#c8d0c7; font-size:.68rem; }.menu-callsign input { width:100%; padding:7px 9px; border:1px solid #575d58; color:var(--white); background:#090b09; }
.menu-stack { display:grid; gap:7px; }.menu-action { display:flex; align-items:center; gap:15px; min-height:35px; padding:7px 13px; border:1px solid currentColor; border-radius:4px; color:#e6e8e4; background:#080a08; box-shadow:inset 0 0 0 1px #1a1d19; font-size:.79rem; font-weight:bold; text-align:left; text-decoration:none; }.menu-action i { width:17px; color:currentColor; font-size:1rem; font-style:normal; text-align:center; }.menu-action:hover { color:#111; background:currentColor; }.menu-action.lime { color:var(--lime); }.menu-action.gold { color:var(--gold); }.menu-action.cyan { color:var(--cyan); }.menu-action.violet { color:var(--violet); }.menu-action.steel { color:#c9d0ce; }.menu-action:disabled { opacity:.55; cursor:wait; }
.menu-brief { position:absolute; right:23px; bottom:22px; width:170px; padding:12px; border:1px solid #414840; background:#070907; }.menu-brief h2 { margin:0 0 9px; color:var(--gold); font-size:.76rem; }.menu-brief p { margin:0 0 10px; color:#b7c0b5; font-size:.57rem; line-height:1.45; }.menu-brief dl { display:grid; gap:4px; margin:0; }.menu-brief dl div { display:flex; justify-content:space-between; gap:8px; font-size:.54rem; }.menu-brief dt { color:var(--lime); }.menu-brief dd { margin:0; color:#dfe3dc; }.menu-footer { position:absolute; right:16px; bottom:12px; margin:0; color:#a4b5a5; font-size:.54rem; }

/* 2. Room browser */
.rooms-frame { max-width:1080px; min-height:660px; padding:15px 32px 28px; }.rooms-title { display:grid; grid-template-columns:44px 1fr 110px; align-items:center; min-height:32px; }.rooms-title a { color:var(--lime); font-size:1.1rem; text-decoration:none; }.rooms-title h1 { margin:0; color:var(--lime); font-family:Impact,Haettenschweiler,sans-serif; font-size:1.6rem; letter-spacing:.12em; text-align:center; text-shadow:2px 2px #143d08; }.rooms-title > span { color:#8d978c; font-size:.56rem; text-align:right; }
.rooms-console { margin-top:12px; padding:13px; border:1px solid #4a504a; border-radius:4px; background:#090b09; }.room-table-wrap { overflow-x:auto; }.room-table-head, .room-item { display:grid; grid-template-columns:minmax(160px,1.5fr) 1.05fr .78fr .72fr .8fr .42fr 68px; align-items:center; min-width:780px; }.room-table-head { min-height:35px; padding:0 12px; color:#d5dad4; background:#161b18; font-size:.63rem; }.room-table-head span:not(:first-child), .room-item > span, .room-item > button { text-align:center; }.room-list { display:grid; padding:0; margin:0; list-style:none; }.room-item { min-height:36px; padding:0 12px; border-bottom:1px solid #303530; color:#e3e7e1; background:#050605; font-size:.69rem; }.room-item.live { background:linear-gradient(90deg,#063d0d,#0b6d20 52%,#094312); }.room-item strong { overflow:hidden; color:#f0f1e9; text-overflow:ellipsis; white-space:nowrap; }.room-item strong small { margin-left:7px; color:#bdc6b9; font-size:.55rem; font-weight:normal; }.room-item > span { color:#dfe5de; }.room-item .room-state { color:var(--lime); font-size:.58rem; font-weight:bold; }.room-item .room-state.live { color:var(--gold); }.row-join { border:1px solid #3d9db0; color:var(--cyan); background:#080b0b; font-size:.56rem; font-weight:bold; }.row-join:hover { color:#020909; background:var(--cyan); }.empty { display:grid; place-items:center; min-height:210px; color:#8e988e; font-size:.72rem; }
.directory-actions { display:grid; grid-template-columns:120px 1fr; align-items:center; gap:10px; margin-top:13px; }.refresh-button, .join-button { min-height:34px; border:1px solid #5c6460; color:#dce2dc; background:#101311; font-size:.66rem; font-weight:bold; }.refresh-button { color:var(--cyan); }.join-code { display:grid; grid-template-columns:1fr 135px; gap:9px; }.join-code input { min-width:0; padding:7px 9px; border:1px solid #575f59; color:var(--white); background:#050605; font-size:.67rem; text-transform:uppercase; }.join-button { border-color:#159fc4; color:#dffaff; background:#071216; }.join-button:hover { color:#031113; background:var(--cyan); }.directory-actions .notice { grid-column:1 / -1; margin:0; }
.create-terminal { margin-top:16px; border:1px solid #4b504a; background:#080a08; }.create-terminal summary { padding:12px 14px; color:var(--gold); cursor:pointer; font-size:.72rem; font-weight:bold; }.create-terminal form { padding:0 14px 15px; }.create-fields { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:12px; }.create-fields label { display:grid; gap:5px; color:#bfc8bd; font-size:.56rem; }.create-fields input, .create-fields select { min-width:0; padding:8px; border:1px solid #525851; color:#eff2ec; background:#060706; font-size:.68rem; }

/* 3. Room lobby */
.lobby-frame { max-width:1080px; min-height:700px; padding:18px; }.lobby-title { position:relative; min-height:40px; text-align:center; }.lobby-title a { position:absolute; left:0; top:2px; color:var(--lime); text-decoration:none; }.lobby-title h1 { margin:0; color:var(--lime); font-family:Impact,Haettenschweiler,sans-serif; font-size:1.2rem; letter-spacing:.11em; text-shadow:2px 2px #143c09; }.lobby-title p { margin:6px 0 0; color:#89958a; font-size:.57rem; }
.room-lobby-layout { display:grid; grid-template-columns:169px minmax(0,1fr); gap:13px; margin-top:16px; }.room-info-card { padding:11px; border:1px solid #535952; background:#090b09; }.room-info-card h2 { margin:0 0 9px; padding-bottom:7px; border-bottom:1px solid #4a5149; color:#e2e4d7; font-size:.63rem; text-align:center; }.room-info-card dl { display:grid; gap:7px; margin:0; }.room-info-card dl div { display:flex; justify-content:space-between; gap:6px; font-size:.56rem; }.room-info-card dt { color:#d2d7cd; }.room-info-card dd { margin:0; color:#f5f5e7; }.room-info-card dd:last-child { color:var(--lime); }.room-map-preview { display:grid; gap:7px; margin-top:14px; padding-top:10px; border-top:1px solid #4a5149; text-align:center; }.room-map-preview strong { color:#e9e7db; font-size:.68rem; }.room-map-preview output { color:var(--cyan); font-size:.66rem; font-weight:bold; letter-spacing:.1em; }.mini-maze { position:relative; aspect-ratio:1; overflow:hidden; border:2px solid #4da91e; background:#020302; }.mini-maze::before { content:""; position:absolute; inset:7px; background:repeating-linear-gradient(90deg,transparent 0 15px,#b93628 15px 25px,transparent 25px 38px), repeating-linear-gradient(0deg,transparent 0 19px,#a72a20 19px 27px,transparent 27px 43px); opacity:.9; }.mini-maze i { position:absolute; z-index:1; width:9px; height:9px; background:var(--cyan); }.mini-maze i:nth-child(1){left:14%;top:18%}.mini-maze i:nth-child(2){right:17%;top:33%}.mini-maze i:nth-child(3){left:21%;bottom:21%;background:var(--red)}.mini-maze i:nth-child(4){right:15%;bottom:16%;background:var(--lime)}.mini-maze b { position:absolute; z-index:1; left:47%; bottom:8%; width:11px; height:11px; background:var(--gold); }
.pilot-roster { min-width:0; border:1px solid #505650; background:#070907; }.pilot-head, .player-row { display:grid; grid-template-columns:38px minmax(130px,1fr) 70px 70px 70px 75px; align-items:center; }.pilot-head { min-height:33px; padding:0 10px; border-bottom:1px solid #505650; color:#d6dad4; background:#151917; font-size:.55rem; }.pilot-head span:not(:nth-child(2)), .player-row span:not(:nth-child(2)) { text-align:center; }.player-list { display:grid; padding:0; margin:0; list-style:none; }.player-row { min-height:31px; padding:0 10px; border-bottom:1px solid #252925; color:#e8ebe6; font-size:.64rem; }.player-row.you { background:#111d0b; }.player-row.ready { background:linear-gradient(90deg,#0b1907,#073510); }.player-row .rank { color:var(--gold); }.player-row .pilot-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.player-row.you .pilot-name { color:var(--gold); }.ready-state { color:var(--lime); font-size:.57rem; font-weight:bold; }.empty-slot { color:#8a9289; }.system-log { min-height:73px; padding:10px; margin:13px; border:1px solid #212722; background:#040604; }.system-log p { margin:0 0 5px; color:#9ec99e; font-size:.56rem; }.system-log p:first-child { color:#5eb75d; }
.lobby-footer { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:10px; padding:14px 0 0; }.lobby-footer .notice { width:100%; text-align:right; }.ready-control { display:flex; align-items:center; cursor:pointer; }.ready-control input { position:absolute; opacity:0; }.ready-control span, .launch-button, .leave-button { display:block; min-width:105px; padding:9px 12px; border:1px solid var(--lime); color:var(--lime); background:#082307; font-size:.67rem; font-weight:bold; text-align:center; text-decoration:none; }.ready-control input:checked + span { color:#031102; background:var(--lime); }.launch-button { border-color:#d7d7aa; color:#151400; background:var(--gold); }.leave-button { border-color:#f06444; color:#ffd8cd; background:#351008; }.lobby-footer p:not(.notice) { max-width:260px; margin:0 auto 0 0; color:#aebdad; font-size:.56rem; }

/* 4. Live arena */
.game-reference-shell { position:relative; width:min(1400px, calc(100vw - 20px)); min-height:calc(100vh - 20px); padding:12px 16px 13px; border:2px solid var(--gold); border-radius:8px; background:linear-gradient(145deg, rgba(13,31,10,.97), rgba(1,4,2,.98) 46%, rgba(24,7,4,.96)); box-shadow:inset 0 0 0 1px #6d5e0e, 0 0 35px rgba(79,239,34,.14), 0 0 65px rgba(241,217,28,.09); }.match-top { display:grid; grid-template-columns:94px 200px minmax(270px,1fr) 180px; align-items:start; gap:16px; min-height:104px; padding:5px 10px 8px; }.mini-brand { color:var(--gold); font-family:Impact,Haettenschweiler,sans-serif; font-size:1rem; line-height:.78; letter-spacing:.08em; text-decoration:none; text-shadow:2px 2px #9a3020; }.match-clock { display:grid; grid-template-columns:1fr; gap:3px; }.match-clock p { margin:0; color:#e2e3d6; font-size:.62rem; }.match-clock h2 { margin:0; color:var(--white); font-size:1rem; }.match-clock p:last-child { max-width:180px; color:var(--gold); font-size:.6rem; line-height:1.5; white-space:pre-line; }.top-scoreboard { justify-self:end; width:min(430px,100%); }.top-scoreboard h2 { margin:0 0 5px; color:var(--gold); font-size:.66rem; text-align:right; }.score-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:15px; }.score-row { display:grid; grid-template-columns:10px minmax(0,1fr) auto; gap:6px; align-items:center; min-height:20px; color:#e8ebe4; font-size:.62rem; }.score-row.self { color:var(--gold); }.score-swatch { width:9px; height:9px; border:1px solid #d9dacf; }.score-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.score-stat { color:var(--cyan); white-space:nowrap; }.game-status { justify-self:end; color:#a8b3a6; font-size:.56rem; text-align:right; }.game-status.error { color:#ff967e; }
.arena-stage { display:grid; place-items:center; min-height:0; border:8px solid #4bae1d; background:#020302; box-shadow:inset 0 0 0 4px #1d560d; }.arena-stage::before { content:""; position:absolute; pointer-events:none; }.arena-stage canvas { display:block; width:min(100%, 1100px); height:auto; max-height:calc(100vh - 180px); background:#000; image-rendering:pixelated; image-rendering:crisp-edges; touch-action:none; }.combat-strip { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:34px; padding:8px 6px 0; }.combat-strip .feed { display:flex; gap:14px; overflow:hidden; color:#b8c5b5; font-size:.55rem; }.feed .kill { color:var(--gold); }.feed .match { color:var(--lime); }.feed .respawn { color:var(--cyan); }.combat-strip > p { margin:0; color:#a0a99e; font-size:.55rem; text-align:right; }.mobile-controls { display:none; }

/* 5. Results */
.results-frame { max-width:1080px; min-height:520px; padding:14px 36px 22px; }.game-over-title { color:var(--gold); font-family:Impact,Haettenschweiler,sans-serif; font-size:1.45rem; letter-spacing:.13em; text-align:center; text-shadow:2px 2px #655709; }.results-layout { display:grid; grid-template-columns:164px minmax(0,1fr) 120px; gap:17px; align-items:stretch; margin-top:16px; }.winner-plaque, .reward-box, .results-table { border:1px solid #565b54; background:#080a08; }.winner-plaque { display:grid; align-content:start; justify-items:center; padding:13px; border-color:var(--gold); text-align:center; }.winner-plaque > p { margin:0; color:var(--gold); font-family:Impact,Haettenschweiler,sans-serif; font-size:1.15rem; }.winner-tank { position:relative; display:block; width:63px; height:40px; margin:18px 0 11px; border:7px solid #3c3400; background:var(--gold); box-shadow:inset 0 0 0 7px #d9ac18; }.winner-tank::before { content:"★"; position:absolute; left:14px; top:-29px; color:var(--gold); font-size:27px; }.winner-tank::after { content:""; position:absolute; left:43px; top:10px; width:31px; height:8px; background:var(--gold); box-shadow:0 0 0 4px #3c3400; }.winner-plaque h1 { margin:0; color:var(--gold); font-size:.85rem; line-height:1.4; }.winner-plaque small { margin-top:9px; color:#d9e0d7; font-size:.54rem; line-height:1.4; }.results-table { overflow:hidden; }.final-table-head, .final-list li { display:grid; grid-template-columns:65px minmax(130px,1fr) 80px 80px 85px; align-items:center; }.final-table-head { min-height:33px; padding:0 10px; border-bottom:1px solid #575d56; color:#dfe2dd; background:#151815; font-size:.57rem; }.final-table-head span:not(:nth-child(2)), .final-list li span, .final-list li em { text-align:center; }.final-list { display:grid; padding:0; margin:0; list-style:none; }.final-list li { min-height:31px; padding:0 10px; border-bottom:1px solid #323632; color:#e8e9e3; font-size:.67rem; }.final-list li.winner { color:var(--gold); background:#1a1a08; }.final-list li span { color:var(--gold); }.final-list li strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.final-list li em { color:var(--cyan); font-style:normal; }.reward-box { padding:12px; }.reward-box h2 { margin:0 0 16px; padding-bottom:10px; border-bottom:1px solid #575d56; font-size:.65rem; text-align:center; }.reward-box p { margin:24px 0; color:var(--lime); font-size:.75rem; font-weight:bold; }.reward-box p:last-child { color:var(--gold); }.results-actions { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:20px; margin-top:14px; }.back-button, .play-again { min-width:155px; padding:9px 13px; border:1px solid #555b55; color:#e4e7e1; background:#1d1f1d; font-size:.66rem; font-weight:bold; text-align:center; text-decoration:none; }.play-again { border-color:#65b734; color:#e6ffd1; background:#0b5010; }.results-actions .notice { width:100%; text-align:center; }

@media (max-width:800px) { .screen-page { place-items:start center; padding:5px; }.reference-frame, .game-reference-shell { width:100%; min-height:calc(100vh - 10px); }.menu-brief { display:none; }.menu-footer { display:none; }.rooms-frame { padding-inline:12px; }.room-lobby-layout { grid-template-columns:1fr; }.room-info-card { display:grid; grid-template-columns:1fr 140px; gap:13px; }.room-info-card h2 { grid-column:1/-1; }.room-map-preview { grid-column:2; grid-row:2; margin:0; padding:0; border:0; }.room-info-card dl { grid-column:1; grid-row:2; }.match-top { grid-template-columns:80px 180px minmax(0,1fr); }.game-status { display:none; }.results-frame { padding-inline:14px; }.results-layout { grid-template-columns:135px minmax(0,1fr); }.reward-box { grid-column:1/-1; display:flex; align-items:center; justify-content:center; gap:28px; }.reward-box h2, .reward-box p { margin:0; padding:0; border:0; } }
@media (max-width:560px) { .menu-screen { min-height:590px; padding-top:26px; }.title-lockup { gap:10px; }.menu-tank { width:40px; height:27px; border-width:5px; }.menu-tank::before { left:29px; width:23px; }.menu-tank::after { display:none; }.rooms-title { grid-template-columns:25px 1fr; }.rooms-title > span { display:none; }.directory-actions { grid-template-columns:1fr; }.join-code { grid-template-columns:1fr 115px; }.create-fields { grid-template-columns:repeat(2,1fr); }.pilot-head, .player-row { grid-template-columns:28px minmax(74px,1fr) 41px 45px 48px 52px; padding-inline:5px; }.pilot-head { font-size:.45rem; }.player-row { font-size:.55rem; }.room-info-card { grid-template-columns:1fr 110px; }.lobby-footer { justify-content:center; }.lobby-footer p:not(.notice) { width:100%; margin:0; text-align:center; }.match-top { grid-template-columns:64px 1fr; gap:9px; }.top-scoreboard { grid-column:1/-1; grid-row:2; justify-self:stretch; width:100%; }.top-scoreboard h2 { text-align:left; }.score-list { grid-template-columns:1fr 1fr; }.arena-stage canvas { max-height:none; }.combat-strip { align-items:flex-start; flex-direction:column; }.combat-strip > p { text-align:left; }.results-layout { grid-template-columns:1fr; }.winner-plaque { min-height:120px; }.winner-tank { margin:12px 0 4px; }.reward-box { grid-column:auto; }.final-table-head, .final-list li { grid-template-columns:45px minmax(80px,1fr) 55px 55px 55px; padding-inline:5px; }.final-table-head { font-size:.46rem; }.final-list li { font-size:.55rem; }.mobile-controls { display:grid; grid-template-columns:1fr auto; gap:15px; padding:14px 0 0; }.dpad { display:grid; grid-template-columns:repeat(3,38px); grid-template-rows:repeat(3,38px); gap:3px; }.control { border:2px solid #9bcf55; color:#edf4d6; background:#152609; font-weight:bold; }.control.fire { width:75px; border-color:#ffd95a; color:#211300; background:var(--gold); }.control-up{grid-column:2}.control-left{grid-column:1;grid-row:2}.control-down{grid-column:2;grid-row:2}.control-right{grid-column:3;grid-row:2} }

.final-list li span:not(.rank) { color:inherit; }

/* Match the supplied cabinet composition: one compact screen at a time. */
@media (min-width:801px) {
  .menu-frame { height:min(670px, calc(100vh - 20px)); min-height:0; }.menu-screen { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; min-height:100%; padding-top:52px; }.menu-console { width:282px; margin-top:22px; }.menu-brief { display:none; }.title-lockup h1 { font-size:clamp(3rem,7vw,5.4rem); }.menu-footer { right:50%; transform:translateX(50%); }
  .rooms-frame { height:min(690px, calc(100vh - 20px)); min-height:0; }.room-table-head, .room-item { min-height:32px; }.empty { min-height:180px; }
  .lobby-frame { display:flex; flex-direction:column; height:min(690px, calc(100vh - 20px)); min-height:0; }.room-lobby-layout { flex:1; min-height:0; }.player-row { min-height:27px; }.system-log { min-height:56px; margin:9px; }.lobby-footer { padding-top:9px; }.lobby-footer .notice { display:none; }
  .game-reference-shell { height:calc(100vh - 20px); min-height:0; }.match-top { min-height:92px; }.arena-stage { height:calc(100vh - 160px); }.arena-stage canvas { width:auto; height:min(640px, calc(100vh - 178px)); max-width:100%; max-height:none; }.combat-strip { min-height:26px; padding-top:5px; }
  .results-frame { height:min(560px, calc(100vh - 20px)); min-height:0; }.winner-plaque { padding:10px; }.winner-tank { margin:12px 0 7px; }.reward-box p { margin:17px 0; }
}

/* ---- shared site navigation (fixed top bar; screens shift down to clear it) ---- */
.site-nav { position:fixed; z-index:40; top:0; left:50%; transform:translateX(-50%); }
.site-nav .nav-menu { display:flex; gap:1px; padding:4px 8px; border:1px solid var(--gold-dark); border-top:0; border-radius:0 0 7px 7px; background:linear-gradient(180deg, rgba(7,9,7,.97), rgba(3,4,3,.93)); box-shadow:0 0 14px rgba(0,0,0,.55); }
.site-nav a { display:flex; align-items:center; gap:6px; padding:2px 10px; color:#a5b1a1; font-size:.6rem; font-weight:bold; letter-spacing:.09em; text-decoration:none; white-space:nowrap; }
.site-nav a + a { border-left:1px solid #232823; }
.site-nav a:hover { color:var(--lime); }
.site-nav a[aria-current="page"] { color:var(--gold); }
.site-nav .nav-icon { font-size:.68rem; }
.screen-page { padding-top:38px; }
.reference-frame { min-height:min(900px, calc(100vh - 48px)); }
.game-reference-shell { min-height:calc(100vh - 48px); }
@media (max-width:560px) { .site-nav .nav-label { display:none; }.site-nav a { padding:3px 9px; }.site-nav .nav-icon { font-size:.8rem; } }
@media (min-width:801px) {
  .menu-frame { height:min(670px, calc(100vh - 48px)); }
  .rooms-frame, .lobby-frame { height:min(690px, calc(100vh - 48px)); }
  .results-frame { height:min(560px, calc(100vh - 48px)); }
  .game-reference-shell { height:calc(100vh - 48px); }.arena-stage { height:calc(100vh - 188px); }.arena-stage canvas { height:min(640px, calc(100vh - 206px)); }
}
.menu-brief .brief-link { display:block; margin-top:10px; color:var(--cyan); font-size:.56rem; font-weight:bold; text-decoration:none; }.menu-brief .brief-link:hover { color:var(--lime); }

/* ---- leaderboard ---- */
.board-head, .board-row { display:grid; grid-template-columns:56px minmax(150px,1.6fr) repeat(5,minmax(62px,.72fr)); align-items:center; min-width:640px; }
.board-head { min-height:35px; padding:0 12px; color:#d5dad4; background:#161b18; font-size:.63rem; }
.board-head span:not(:nth-child(2)), .board-row > span, .board-row em { text-align:center; }
.board-list { display:grid; padding:0; margin:0; list-style:none; }
.board-row { min-height:33px; padding:0 12px; border-bottom:1px solid #303530; color:#e3e7e1; background:#050605; font-size:.67rem; }
.board-row .board-rank { color:var(--gold); }
.board-row .board-name { overflow:hidden; color:#f0f1e9; text-overflow:ellipsis; white-space:nowrap; }
.board-row em { color:var(--cyan); font-style:normal; }
.board-row.top { color:var(--gold); background:#151204; }

/* ---- pilot profile ---- */
.profile-frame, .rules-frame { max-width:1080px; min-height:560px; padding:15px 32px 28px; }
.profile-layout { display:grid; grid-template-columns:minmax(240px,340px) minmax(0,1fr); gap:14px; margin-top:14px; }
.profile-card { padding:14px; border:1px solid #4a504a; border-radius:4px; background:#090b09; }
.profile-card h2 { margin:0 0 12px; padding-bottom:8px; border-bottom:1px solid #4a5149; color:var(--gold); font-size:.7rem; }
.profile-card label { display:grid; gap:6px; margin-bottom:12px; color:#bfc8bd; font-size:.58rem; }
.profile-card input { padding:8px 9px; border:1px solid #575d58; color:var(--white); background:#060706; font-size:.7rem; }
.profile-hint { margin:12px 0 0; color:#8e988e; font-size:.55rem; line-height:1.6; }
.stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; margin:0; }
.stat-grid div { display:grid; gap:4px; align-content:center; padding:12px 10px; border:1px solid #2c312c; background:#060806; text-align:center; }
.stat-grid dt { color:#9aa697; font-size:.54rem; }
.stat-grid dd { margin:0; color:var(--lime); font-size:1rem; font-weight:bold; }
.stat-grid div.gold dd { color:var(--gold); }
@media (max-width:800px) { .profile-layout { grid-template-columns:1fr; } }
@media (max-width:560px) { .stat-grid { grid-template-columns:repeat(2,1fr); } }

/* ---- rules / field manual ---- */
.rules-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; margin-top:14px; }
.rules-card { padding:13px 15px; border:1px solid #4a504a; background:#090b09; }
.rules-card h2 { margin:0 0 9px; color:var(--lime); font-size:.7rem; }
.rules-card.gold { border-color:var(--gold-dark); }.rules-card.gold h2 { color:var(--gold); }
.rules-card p, .rules-card li { color:#c3ccc0; font-size:.62rem; line-height:1.65; }
.rules-card p { margin:0 0 8px; }.rules-card p:last-child { margin-bottom:0; }
.rules-card b { color:var(--gold); }
.rules-card ul { margin:0; padding-left:16px; }
.rules-card dl { display:grid; gap:6px; margin:0 0 8px; }
.rules-card dl div { display:flex; justify-content:space-between; gap:10px; font-size:.6rem; }
.rules-card dt { color:var(--lime); }
.rules-card dd { margin:0; color:#e6eae2; text-align:right; }
@media (max-width:800px) { .rules-grid { grid-template-columns:1fr; } }