/* Edge-to-edge TV arena with lobby tools below the field. */
.board-page .topbar { max-width:none; height:64px; padding:0 24px; }
.board-page #app { max-width:none; padding:0 0 12px; }
.board-page .board-heading { height:82px; margin:0; padding:12px 24px; }
.board-page .board-heading h1 { font-size:28px; }
.board-page .board-heading .eyebrow { margin-bottom:6px; }
.board-page .clock strong { font-size:52px; }
.board-page .board-grid { display:flex; flex-direction:column; gap:14px; }
.board-page .board-grid .arena { width:100%; height:calc(100dvh - 312px); min-height:240px; max-height:none; display:flex; flex-direction:column; border-radius:0; }
.board-page .arena-bar,.board-page .arena-footer { flex-shrink:0; height:30px; }
.board-page .board-grid .canvas-wrap { flex:1; min-height:0; aspect-ratio:auto; }
.board-page:not(.in-match) .board-sidebar { display:grid; grid-template-columns:290px minmax(0,1fr) 230px; gap:24px; margin:0 24px; align-items:start; align-self:stretch; }
.board-page:not(.in-match) .board-grid .board-sidebar > :is(.connect-card,.lobby-roster,.host-actions) { grid-area:auto; }
.board-page:not(.in-match) .connect-card { display:flex; align-items:center; gap:14px; padding:12px; text-align:left; }
.board-page .qr-button { flex-shrink:0; padding:0; border:0; border-radius:4px; background:#fff; cursor:zoom-in; }
.board-page:not(.in-match) .qr { width:90px; height:90px; margin:0; border-radius:4px; }
.board-page:not(.in-match) .connect-card .card-index { font-size:7px; letter-spacing:1px; margin:0 0 6px; }
.board-page:not(.in-match) .room-code { font-size:22px; letter-spacing:4px; margin:0; }
.board-page:not(.in-match) .join-address { font-size:8px; margin:6px 0 2px; }
.board-page .connect-info { min-width:0; }
.board-page .lobby-roster { min-width:0; }
.board-page:not(.in-match) .roster-title { margin:0 0 8px; }
.board-page:not(.in-match) .roster { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.board-page:not(.in-match) .player-row { padding:8px; gap:8px; }
.board-page:not(.in-match) .player-row .avatar { width:28px; height:28px; }
.board-page:not(.in-match) .player-row small { font-size:7px; }
.board-page:not(.in-match) .empty-players { grid-column:1/-1; padding:25px; }
.board-page .host-actions { grid-column:auto; }
.board-page .host-actions .small { margin:0 0 8px; font-size:10px!important; }
.board-page .host-actions .button { margin:0; }
.board-page .host-actions .connection { margin-bottom:0; }
.board-page.in-match .board-sidebar { display:none; }
.board-page.in-match .board-grid .arena { height:calc(100dvh - 266px); }
.board-page.in-match.end-screen .board-grid .arena { height:calc(100dvh - 334px); }
.board-page .battle-roster { margin:14px 24px 0; }
.board-page .battle-player { max-width:240px; }
.board-page .battle-note { margin:10px 24px 0; }
.board-page .board-controls { margin-top:12px; }

/* Native modal preserves focus, Escape and keyboard navigation. */
.qr-dialog { width:100vw; height:100dvh; max-width:none; max-height:none; inset:0; margin:0; border:0; padding:40px 20px; background:radial-gradient(ellipse at 50% 50%,#302047,#100a1d 75%); color:var(--text); }
.qr-dialog::backdrop { background:#100a1d; }
.qr-dialog-content { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; text-align:center; }
.qr-dialog-content .eyebrow,.qr-dialog-content .room-code,.qr-dialog-content .small { margin:0; }
.qr-full { width:min(66vmin,640px); height:min(66vmin,640px); border-radius:12px; background:white; box-shadow:0 0 50px #ff56b921; }
.qr-dialog .qr-dialog-content .room-code { font-size:36px; letter-spacing:8px; }
.qr-close { position:absolute; right:24px; top:20px; width:50px; height:50px; font-size:36px; border:1px solid #ffffff30; border-radius:6px; background:#24172d; }

/* Compact mobile controller: tank and angle beside a vertical power lever. */
.controller-page .topbar { height:56px; padding:0 max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left)); }
.controller-page #app { max-width:500px; padding:14px max(14px,env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left)); }
.controller-page .controller-top { margin-bottom:12px; }
.controller-page .controller-top .eyebrow { font-size:8px; letter-spacing:1px; }
.controller-page .controller-title h1 { font-size:26px; }
.controller-page .tank-label { margin-bottom:5px; }
.controller-main { display:grid; grid-template-columns:minmax(0,1fr) 68px; gap:12px; height:280px; margin:14px 0 10px; }
.aim-panel { min-width:0; }
.controller-page .personal-tank { margin:0; height:174px; border-radius:6px; }
.controller-page .personal-tank canvas { height:100%; width:100%; aspect-ratio:auto; object-fit:fill; }
.controller-page .tank-watermark { top:10px; left:10px; font-size:8px; letter-spacing:1px; }
.controller-page .tank-watermark.right { left:auto; right:10px; }
.controller-page .aim-control { margin:9px 0 0; }
.controller-page .aim-heading { margin:0 0 4px; }
.controller-page .aim-heading label { font-size:9px; letter-spacing:1px; }
.controller-page .aim-heading output { font-size:21px; }
.controller-page .range-row { gap:6px; }
.controller-page .adjust { width:38px; height:44px; border-color:color-mix(in srgb,var(--player),transparent 80%); }
.angle-slider { flex:1; min-width:0; position:relative; }
.controller-page .angle-slider input { display:block; width:100%; height:52px; margin:0; appearance:none; -webkit-appearance:none; background:transparent; touch-action:none; }
.angle-slider input::-webkit-slider-runnable-track { height:20px; background:color-mix(in srgb,var(--player),#130b24 78%); border:1px solid color-mix(in srgb,var(--player),transparent 58%); border-radius:10px; }
.angle-slider input::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:38px; height:38px; margin-top:-10px; border:3px solid #fff9; border-radius:50%; background:var(--player); box-shadow:0 0 14px color-mix(in srgb,var(--player),transparent 65%); }
.angle-slider input::-moz-range-track { height:20px; background:color-mix(in srgb,var(--player),#130b24 78%); border:1px solid color-mix(in srgb,var(--player),transparent 58%); border-radius:10px; }
.angle-slider input::-moz-range-thumb { width:32px; height:32px; border:3px solid #fff9; border-radius:50%; background:var(--player); }
.angle-track-markers { position:absolute; inset:14px 19px; pointer-events:none; }
.previous-angle { position:absolute; top:-11px; width:3px; height:8px; background:var(--player); opacity:.35; border-radius:2px; transform:translateX(-50%); }
.controller-page .range-labels { padding:0 44px; margin:1px 0 0; font-size:7px; }
.power-panel { display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 0; background:#1c1429; border:1px solid color-mix(in srgb,var(--player),transparent 85%); border-radius:6px; }
.power-panel .aim-heading { display:block; text-align:center; }
.power-panel output { display:block; margin-top:5px; }
.controller-page .power-panel .adjust { height:36px; }
.power-slider { flex:1; min-height:95px; width:52px; position:relative; }
.power-slider input { position:absolute; inset:0; writing-mode:vertical-lr; direction:rtl; width:52px; height:100%; min-height:95px; appearance:none; -webkit-appearance:none; margin:0; background:transparent; touch-action:none; cursor:pointer; }
.power-slider input::-webkit-slider-runnable-track { width:26px; background:color-mix(in srgb,var(--player),#130b24 78%); border:1px solid color-mix(in srgb,var(--player),transparent 58%); border-radius:13px; }
.power-slider input::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:44px; height:38px; margin-left:-10px; border:3px solid #fff9; border-radius:10px; background:var(--player); box-shadow:0 0 14px color-mix(in srgb,var(--player),transparent 65%); }
.power-slider input::-moz-range-track { width:26px; background:color-mix(in srgb,var(--player),#130b24 78%); border:1px solid color-mix(in srgb,var(--player),transparent 58%); border-radius:13px; }
.power-slider input::-moz-range-thumb { width:38px; height:32px; border:3px solid #fff9; border-radius:10px; background:var(--player); }
.controller-page .player-status { min-height:30px; font-size:11px; line-height:1.4; }
.controller-page .controller-clock { margin:5px 0 10px; padding-bottom:8px; }
.controller-page .controller-clock strong { font-size:32px; }
.fire-button { display:flex; width:100%; min-height:58px; align-items:center; justify-content:space-between; padding:12px 20px; background:var(--player); color:#100a1d; border:0; border-radius:6px; font:700 17px monospace; letter-spacing:3px; box-shadow:0 0 25px color-mix(in srgb,var(--player),transparent 88%); }
.fire-button:disabled { opacity:.5; }
.fire-symbol { font-size:28px; line-height:1; }
.controller-page .mobile-roster { margin-top:14px; }
.controller-page .mobile-result { margin-top:12px; padding:12px; }

@media(min-width:761px) and (max-width:1350px) {
  .board-page:not(.in-match) .board-sidebar { grid-template-columns:265px minmax(0,1fr) 190px; gap:14px; margin:0 18px; }
  .board-page:not(.in-match) .player-row { gap:6px; padding:7px; }
  .board-page:not(.in-match) .player-row strong { font-size:10px; }
  .board-page:not(.in-match) .player-row .avatar { width:24px; height:28px; font-size:10px; }
}
@media(max-width:760px) {
  .board-page .board-heading { padding:10px 14px; }
  .board-page .board-heading h1 { font-size:23px; }
  .board-page .clock strong { font-size:40px; min-width:60px; }
  .board-page .clock>span { max-width:85px; letter-spacing:1px; }
  .board-page .board-grid .arena { height:50dvh; min-height:240px; }
  .board-page:not(.in-match) .board-sidebar { grid-template-columns:1fr; gap:16px; margin:0 14px; }
  .board-page:not(.in-match) .roster { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .board-page.in-match .board-grid .arena { height:calc(100dvh - 310px); }
  .board-page .battle-roster { margin:12px 14px 0; }
}
@media(max-width:350px) {
  .controller-main { grid-template-columns:minmax(0,1fr) 60px; gap:8px; }
  .controller-page .adjust { width:32px; }
  .controller-page .controller-title h1 { font-size:23px; }
  .controller-page .tank-watermark { font-size:7px; }
}