:root{color-scheme:dark;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;background:#070b16;color:#edf3ff}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 18% 18%,#10375677,transparent 46%),radial-gradient(ellipse at 88% 65%,#4a1d5170,transparent 50%),#070b16}button,input{font:inherit}button{cursor:pointer;color:#eaf5ff;border:1px solid #33455e;background:#1c2941;border-radius:8px;padding:10px 14px;font-weight:750;font-size:12px}button:disabled{opacity:.4;cursor:not-allowed}button.primary{background:linear-gradient(110deg,#25c7de,#9af3ee);border-color:#4fe7e9;color:#071525}.page{max-width:1440px;margin:auto;padding:12px 24px}.top{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #2a374c;padding:16px 0}.logo{font-size:34px;font-weight:950;text-decoration:none;letter-spacing:-3px;color:#fff}.logo span,.headline h1 span{color:#36e7ff}.eyebrow{font-size:10px;font-weight:800;letter-spacing:2px;color:#8da5c6}.top>a:last-child{color:#b2c3df;text-decoration:none;font-size:12px}.headline{margin:30px 0 24px}.headline>p:first-child,.panel-kicker{color:#5ee9fc;font-size:10px;font-weight:850;letter-spacing:1.7px}.headline h1{font-size:clamp(38px,5vw,67px);margin:8px 0;letter-spacing:-3px}.description{max-width:650px;line-height:1.55;color:#a5b6d0;font-size:14px}.notice{padding:10px 15px;border:1px solid #36536d;background:#102034;border-radius:8px;color:#bcdef9;font-size:12px;margin-bottom:18px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 318px;gap:20px}.arena,.panel{background:#0c1323;border:1px solid #2c3d54;border-radius:13px;overflow:hidden}.arena{align-self:start}.arena-heading,.scoreboard{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:15px 18px;font-size:11px;letter-spacing:.8px;color:#9eb4d0}.arena-heading strong{color:#61e4f5}.board-frame{position:relative;aspect-ratio:1000/560;background:#070e1c;touch-action:none}.board-frame canvas{display:block;width:100%;height:100%;touch-action:none}.shade{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-weight:950;letter-spacing:2px;font-size:clamp(15px,3vw,29px);color:#d9f9ff;text-shadow:0 0 20px #29abda;background:#050a17a9;pointer-events:none}.shade[hidden]{display:none}.scoreboard{border-top:1px solid #23334d}.scoreboard b{font-size:25px;color:#fff;margin:0 8px}.scoreboard span:nth-child(2){text-align:center;color:#7d96b9;font-size:9px}.instructions{font-size:11px;color:#9ab2c9;padding:0 18px 18px;line-height:1.5}.stack{display:grid;gap:14px;align-content:start}.panel{padding:20px}.panel h2{font-size:20px;letter-spacing:-.5px;margin:9px 0 14px}.panel label{display:block;font-weight:750;font-size:11px;color:#a6bed6;margin-top:12px}.panel input:not([type=color]){width:100%;border:1px solid #37445b;border-radius:7px;background:#090f1d;padding:11px;color:white;margin-top:7px}.panel input[type=color]{width:90px;height:40px;margin:9px 0;display:block;background:transparent;border:0}.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}.small{font-size:12px;line-height:1.6;color:#95a7c0}.list{display:grid;gap:5px;font-size:12px;margin-bottom:13px}.rank{display:flex;align-items:center;justify-content:space-between;padding:9px 10px;border-radius:6px;background:#121e31;gap:7px}.rank b{font-size:12px}.rank small{color:#8fa1c1}.color-chip{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:8px;vertical-align:middle}.list .empty{font-size:11px;color:#90a3b9}.panel button:hover:not(:disabled){filter:brightness(1.12)}footer{padding:27px 0;color:#90a3b9;font-size:10px;letter-spacing:1.1px}@media(max-width:960px){.layout{grid-template-columns:1fr}.stack{grid-template-columns:repeat(2,minmax(0,1fr))}.stack .panel:last-child{grid-column:1/-1}}@media(max-width:610px){.page{padding:8px 12px}.eyebrow{display:none}.headline{margin:22px 0}.stack{grid-template-columns:1fr}.stack .panel:last-child{grid-column:auto}.arena-heading,.scoreboard{padding:11px;font-size:9px}.scoreboard span:nth-child(2){font-size:8px}.instructions{font-size:10px}footer{font-size:9px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Audio is opt-in, and musical tempo tracks server-controlled ball speed. */
.online-audio-controls{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;flex-wrap:wrap}
.online-audio-controls button{white-space:nowrap;font-size:10px;padding:6px 8px}
#online-track{font-size:9px;white-space:nowrap;color:#91aac8;letter-spacing:0}
@media(max-width:610px){.arena-heading{flex-wrap:wrap}.online-audio-controls{order:3;width:100%;justify-content:center}}

#match-mode{display:block;width:100%;box-sizing:border-box;background:#0c1b2d;color:#d9eefc;border:1px solid #41637e;border-radius:8px;padding:10px 12px;margin-top:8px;font:inherit;}

/* Tournament controls and bracket visualization */
#tournament-list{margin-top:12px}
.tournament-option{display:block;width:100%;text-align:left;font-size:11px;font-weight:600;line-height:1.4}
.bracket-list{display:grid;gap:8px;margin-top:10px}
.bracket-match{display:flex;flex-direction:column;gap:5px;padding:10px;border:1px solid #324968;background:#121e31;border-radius:7px}
.bracket-match strong{color:#79e1ec;font-size:11px}
.bracket-match span{font-size:12px}
.bracket-match small{color:#91a4c3;font-size:10px}
#selected-tournament h3{font-size:14px;margin:16px 0 8px}

/* Read-only tournament spectator presentation */
.watch-button{align-self:flex-start;margin-top:5px;border-color:#4f99ae;color:#b5f7ff}
#spectator-status{min-height:1.5em;color:#c7d4ed}
#stop-spectating{border-color:#4f99ae}

/* v0.14 shop: comfortable touch targets, per-item actions */
.shop-wallet{font-weight:800;color:#74eeec;letter-spacing:.02em;margin:12px 0}
.shop-items{display:grid;gap:9px}.shop-item{background:#111f31;border:1px solid #2d5067;border-radius:9px;padding:11px}
.shop-item strong{display:block;color:#e5faff;font-size:12px;margin-bottom:5px}.shop-item p{margin:4px 0 10px;color:#a2b4cb;font-size:11px}
.shop-item .actions{margin-top:8px}.shop-subhead{font-size:14px;margin:18px 0 9px}
.shop-bundles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.shop-bundle{padding:9px;border:1px solid #344962;border-radius:7px;background:#101d2e;color:#b0c1d8;font-size:11px}
.shop-bundle b{display:block;color:#f4fbff;margin-bottom:4px}.shop-item button{min-height:42px}

/* v0.15 two-price catalog; planned cash checkout clearly disabled. */
.shop-cash-price{color:#85d2ed!important;font-weight:650}.shop-item button:disabled{opacity:.53}

/* v0.17.1 shop purchase clarity and local payment troubleshooting. */
.shop-checkout-status{font-size:12px;line-height:1.5;border:1px solid #36536d;border-radius:8px;padding:10px 12px;margin:10px 0;background:#102034;color:#cdefff;overflow-wrap:anywhere}
.shop-checkout-status[data-state="error"]{border-color:#a35f69;color:#ffd2d7;background:#371b29}
.shop-checkout-status[data-state="success"]{border-color:#347f75;color:#b9f9eb;background:#12332f}
.shop-button-hint{font-size:11px;color:#eac890;line-height:1.4;align-self:center}
.shop-action-feedback{font-size:11px;line-height:1.4;color:#ffd2d7;overflow-wrap:anywhere;align-self:center}

/* v0.17.6: visible, local feedback immediately below Refresh my purchases. */
.shop-restore-status{min-height:2.2em;font-size:12px;line-height:1.5;color:#b7d1ed;margin:9px 0 12px;overflow-wrap:anywhere}
.shop-restore-status[data-state="error"]{color:#ffd2d7}
.shop-restore-status[data-state="success"]{color:#b9f9eb}
#shop-restore[disabled]{cursor:progress;opacity:.7}

/* Ping! competitive minimalist GUI. Scoped presentation only. */
:root{--ping-bg:#0b0e13;--ping-surface:#151a21;--ping-elevated:#1b222c;--ping-line:#303947;--ping-ink:#f4f6fa;--ping-muted:#a6b1c2;--ping-accent:#f6ae54;color-scheme:dark}
body{background:var(--ping-bg);color:var(--ping-ink)}
.page{max-width:1500px;padding:12px clamp(12px,2.5vw,34px)}
.top{border-color:var(--ping-line)}.logo span,.headline h1 span{color:var(--ping-accent)}
.eyebrow,.panel-kicker,.headline>p:first-child{color:var(--ping-accent)}
.headline{margin:22px 0 18px}.headline h1{font-size:clamp(28px,3.3vw,48px);letter-spacing:-1.7px;margin:5px 0}.description{max-width:840px;color:var(--ping-muted)}
.game-navigation{display:flex;align-items:center;gap:7px;overflow-x:auto;padding:14px 0 8px;scrollbar-width:thin}
.game-navigation button,.game-nav-home{flex-shrink:0;border:1px solid var(--ping-line);border-radius:10px;background:var(--ping-surface);color:var(--ping-ink);font-size:13px;font-weight:750;min-height:44px;padding:11px 17px;text-decoration:none}
.game-navigation button.active{background:var(--ping-accent);color:#161b21;border-color:var(--ping-accent)}
.game-navigation .game-nav-home{font-size:17px;font-weight:900;letter-spacing:-1px}.game-nav-home span{color:var(--ping-accent)}
.game-navigation button:focus-visible,.game-nav-home:focus-visible{outline:3px solid var(--ping-accent);outline-offset:2px}
.layout{grid-template-columns:minmax(0,1fr) minmax(280px,350px);align-items:start}
.arena,.panel,.notice{background:var(--ping-surface);border-color:var(--ping-line);box-shadow:none}
.panel{border-radius:13px}.arena{border-radius:13px}.stack{min-width:0}
button.primary{background:var(--ping-accent);color:#14181e;border-color:var(--ping-accent)}
button:not(:disabled):focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid var(--ping-accent);outline-offset:2px}
button{min-height:44px}.board-frame{background:#06090d}.scoreboard{font-variant-numeric:tabular-nums}
#shop-items .shop-item,.shop-bundles .shop-bundle{background:var(--ping-elevated);border-color:var(--ping-line)}
body[data-ping-view="play"] #tournament-panel,body[data-ping-view="play"] #account-safety-panel,body[data-ping-view="play"] #store-panel{display:none!important}
body[data-ping-view="tournaments"] .arena,body[data-ping-view="tournaments"] #matchmaking-panel,body[data-ping-view="tournaments"] #standings-panel,body[data-ping-view="tournaments"] #auth-panel,body[data-ping-view="tournaments"] #account-safety-panel,body[data-ping-view="tournaments"] #store-panel{display:none!important}
body[data-ping-view="store"] .arena,body[data-ping-view="store"] #matchmaking-panel,body[data-ping-view="store"] #standings-panel,body[data-ping-view="store"] #tournament-panel,body[data-ping-view="store"] #account-safety-panel{display:none!important}
body[data-ping-view="loadout"] .arena,body[data-ping-view="loadout"] #matchmaking-panel,body[data-ping-view="loadout"] #standings-panel,body[data-ping-view="loadout"] #tournament-panel,body[data-ping-view="loadout"] #account-safety-panel{display:none!important}
body[data-ping-view="settings"] .arena,body[data-ping-view="settings"] #matchmaking-panel,body[data-ping-view="settings"] #standings-panel,body[data-ping-view="settings"] #tournament-panel,body[data-ping-view="settings"] #store-panel{display:none!important}
body:not([data-ping-view="play"]) .layout{display:block;max-width:950px;margin:auto}
body:not([data-ping-view="play"]) .stack{display:grid;gap:16px;grid-template-columns:1fr}
body[data-ping-view="store"] #store-panel,body[data-ping-view="loadout"] #store-panel,body[data-ping-view="settings"] #account-safety-panel,body[data-ping-view="tournaments"] #tournament-panel{max-width:950px}
/* Never force a server-disabled account-safety section visible. */
#account-safety-panel[hidden]{display:none!important}
@media(max-width:850px){.layout{grid-template-columns:1fr}.page{padding:8px 12px}.game-navigation{gap:5px}.game-navigation button{padding:10px 13px}.headline{margin:12px 0}.headline h1{font-size:31px}.description{font-size:13px}.stack{margin-top:12px}}
@media(prefers-reduced-motion:reduce){.game-navigation *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* Loadout is a focused view over the existing store inventory bindings. */
body[data-ping-view="loadout"] #store-panel > :not(.panel-kicker):not(#loadout-heading):not(#paddle-equipment-editor):not(#shop-equipped):not(.loadout-note){display:none!important}
body:not([data-ping-view="loadout"]) #paddle-equipment-editor{display:none}
body[data-ping-view="loadout"] #store-panel .panel-kicker{font-size:0}
body[data-ping-view="loadout"] #store-panel .panel-kicker::after{content:"CUSTOMIZE YOUR GAME";font-size:12px}
body[data-ping-view="loadout"] #loadout-heading{font-size:clamp(20px,2.6vw,28px);margin:8px 0 20px}
body[data-ping-view="loadout"] #shop-equipped{padding:20px;background:var(--ping-elevated);border:1px solid var(--ping-line);border-radius:12px;min-height:88px}
body[data-ping-view="loadout"] .loadout-note{line-height:1.6;margin-top:18px}
@media(max-width:600px){.game-navigation{padding-bottom:12px;scroll-snap-type:x proximity}.game-navigation button{scroll-snap-align:start;min-width:72px}.arena{overflow:hidden}.scoreboard{gap:7px;flex-wrap:wrap}.shop-bundles{grid-template-columns:1fr}#shop-items .actions{flex-wrap:wrap}}

/* QA polish: complete, discoverable phone navigation. */
@media (max-width:600px){
  .game-navigation{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;overflow:visible;padding-top:12px}
  .game-navigation .game-nav-home{display:none}
  .game-navigation button{min-width:0;width:100%;padding:10px 4px;font-size:12px;line-height:1.3;white-space:normal}
  .game-navigation button[data-ping-view="settings"]{grid-column:span 2}
}

/* Landscape-first menus. The online arena stays fully hidden until a live
   server match (or a confirmed spectator stream) actually exists. */
body:not([data-online-match="active"]) .arena{display:none!important}
.game-navigation{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible;gap:8px;max-width:1050px;margin:auto;padding:8px 0}
.game-navigation .game-nav-home{display:none}
.game-navigation button{min-width:0;width:100%;padding:9px 5px;text-align:center;min-height:44px}
body:not([data-online-match="active"]) .page{max-width:1100px;margin:auto;padding:8px clamp(12px,2vw,24px)}
body:not([data-online-match="active"]) .top{min-height:48px;padding-bottom:8px}
body:not([data-online-match="active"]) .headline{margin:8px 0 10px;text-align:center}
body:not([data-online-match="active"]) .headline h1{font-size:clamp(23px,3.5vw,35px);margin:2px 0}
body:not([data-online-match="active"]) .headline>p:first-child{display:none}
body:not([data-online-match="active"]) .description{font-size:12px;margin:3px auto}
body:not([data-online-match="active"])[data-ping-view="play"] .layout{display:block;max-width:1050px;margin:0 auto}
body:not([data-online-match="active"])[data-ping-view="play"] .stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:10px}
body:not([data-online-match="active"]) .panel{margin:0;min-width:0;padding:clamp(12px,2vw,19px)}
body:not([data-online-match="active"]) #matchmaking-panel{order:0}
body:not([data-online-match="active"]) #auth-panel{order:1}
body:not([data-online-match="active"]) #standings-panel{order:2;grid-column:span 2}
body:not([data-online-match="active"]) #standings-panel .list{max-height:140px;overflow:auto}
@media(max-width:660px){
  .game-navigation{gap:4px;padding:7px 0}
  .game-navigation button{font-size:clamp(9px,2.1vw,12px);padding:8px 2px}
  body:not([data-online-match="active"])[data-ping-view="play"] .stack{grid-template-columns:minmax(0,1fr)}
  body:not([data-online-match="active"]) #standings-panel{grid-column:auto}
  body:not([data-online-match="active"]) .top>.eyebrow{display:none}
}
@media (orientation:landscape) and (max-height:430px){
 body:not([data-online-match="active"]) .headline{margin:2px 0 5px}
 body:not([data-online-match="active"]) .headline .description{display:none}
 body:not([data-online-match="active"]) .top{min-height:38px}
 body:not([data-online-match="active"]) .panel{padding:9px 13px}
 body:not([data-online-match="active"]) .panel .small{line-height:1.3}
 body:not([data-online-match="active"]) #standings-panel{display:none}
}
/* Live court becomes the full match screen only when server confirms gameplay. */
body[data-online-match="active"]{overflow:hidden;overscroll-behavior:none}
body[data-online-match="active"] .arena{display:block!important;position:fixed!important;inset:0;z-index:11000;width:100vw;height:100vh;height:100dvh;margin:0!important;padding:0!important;background:#05080d;border:0;border-radius:0;overflow:hidden}
body[data-online-match="active"] .arena-heading,body[data-online-match="active"] .arena .instructions{display:none}
body[data-online-match="active"] .board-frame{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(100vw,178.5714vh);height:min(100vh,56vw);width:min(100vw,178.5714dvh);height:min(100dvh,56vw);aspect-ratio:1000/560;max-width:100%;max-height:100%;margin:0;border:0;overflow:hidden;background:#06080e}
body[data-online-match="active"] #online-court{width:100%;height:100%;display:block;touch-action:none}
body[data-online-match="active"] .scoreboard{position:fixed;z-index:11001;bottom:max(7px,env(safe-area-inset-bottom));left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));margin:0;padding:5px 8px;border:1px solid #65778b;border-radius:9px;background:#070c12c9;display:flex;align-items:center;justify-content:space-between;gap:10px;max-width:440px;width:calc(100% - 16px);font-size:clamp(11px,2.2vh,15px)}
body[data-online-match="active"] #rally-status{display:none}
.online-match-toggle[hidden],.online-match-options[hidden]{display:none!important}
body[data-online-match="active"] .online-match-toggle{display:grid;place-items:center;position:fixed;z-index:11005;top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));height:48px;width:48px;min-height:48px;min-width:48px;border:1px solid #b5c5d8;border-radius:12px;background:#182434e8;color:#fff;font-size:25px;line-height:1}
body[data-online-match="active"] .online-match-options:not([hidden]){position:fixed;z-index:11006;inset:0;display:grid;place-items:center;overflow:auto;padding:14px;background:#02050cde;color:#fff}
.online-match-sheet{width:min(100%,440px);max-height:92dvh;overflow:auto;border:1px solid #8999aa;background:#19232d;border-radius:16px;padding:clamp(18px,3vw,28px);box-shadow:0 20px 70px #000a}
.online-match-sheet h2{font-size:clamp(22px,4vw,31px);margin:5px 0 14px}
.online-match-sheet p{font-size:14px;line-height:1.6;color:#d0dbe6}
.online-match-sheet .actions{display:flex;gap:10px;flex-wrap:wrap}
.online-match-toggle:focus-visible,.online-match-options button:focus-visible{outline:3px solid #f6ae54;outline-offset:3px}
.ping-orientation-gate{display:none}
@media(orientation:portrait) and (max-width:850px){
 body:not([data-online-match="active"]):not(:has(#ping-portrait-override:checked)) .ping-orientation-gate{display:grid;position:fixed;inset:0;z-index:20000;place-items:center;background:#070b12f5;padding:24px;color:#f3f5fa}
 .ping-orientation-card{width:min(100%,420px);padding:32px 24px;border:1px solid #536177;border-radius:16px;background:#151a21;text-align:center}
 .ping-orientation-card strong{display:block;font-size:23px}
 .ping-orientation-card p{color:#c7d0dc;line-height:1.5}
 .ping-orientation-icon{font-size:40px;color:#f6ae54;margin-bottom:14px}
 .ping-portrait-fallback{display:inline-flex;gap:10px;align-items:center;justify-content:center;min-height:44px;padding:8px 12px;border:1px solid #8c9bae;border-radius:9px;margin-top:12px;cursor:pointer}
 .ping-portrait-fallback input{width:18px;height:18px;accent-color:#f6ae54}
}

/* Auth-first entry: the app, navigation and arena are not laid out before login. */
body:not([data-auth-stage="app"]) .page{display:none!important}
body[data-auth-stage="app"] .ping-entry{display:none!important}
body:not([data-online-match="active"]) .arena{display:none!important;visibility:hidden!important}
.ping-entry{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:clamp(14px,3vw,30px);background:#0b0e13}
.ping-entry-card{width:min(100%,440px);border:1px solid #536073;border-radius:18px;background:#171d26;padding:clamp(22px,4vw,34px);text-align:center;box-shadow:0 24px 60px #0008}
.ping-entry-logo{font-size:clamp(45px,8vw,70px);font-weight:950;letter-spacing:-5px;line-height:1;color:#fff}
.ping-entry-logo span{color:#f6ae54}
.ping-entry h1{font-size:clamp(21px,3vw,28px);margin:16px 0 6px}
.ping-entry p{color:#b7c4d6;font-size:13px;line-height:1.5}
.ping-entry-actions{display:flex;gap:10px;justify-content:center;margin:22px 0 10px}
.ping-entry-actions button{flex:1;min-height:48px;font-size:14px}
.ping-entry label{display:block;text-align:left;color:#c8d4e4;font-size:12px;font-weight:750;margin:12px 0 5px}
.ping-entry input{display:block;width:100%;padding:12px;background:#101722;border:1px solid #61738d;border-radius:9px;color:#fff}
.ping-entry [hidden]{display:none!important}
#ping-entry-status{min-height:40px}
#account-recovery-dialog{width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;box-sizing:border-box;padding:24px;background:#171d26;color:#e4edf8;border:1px solid #94a4ba;border-radius:14px}
#account-recovery-dialog::backdrop{background:#000b}
#account-recovery-dialog label{display:block;margin:12px 0}
#account-recovery-dialog input{display:block;box-sizing:border-box;width:100%;margin-top:5px}
#account-recovery-dialog button{min-height:44px}
.top .logo{border:0;background:transparent;padding:0;min-height:44px;font:inherit;font-size:34px;font-weight:950;letter-spacing:-3px;cursor:pointer}
.top .logo span{color:#f6ae54}
@media(orientation:landscape) and (max-height:430px){.ping-entry{padding:8px}.ping-entry-card{padding:10px 20px}.ping-entry-logo{font-size:40px}.ping-entry h1{margin:3px 0;font-size:19px}.ping-entry-actions{margin:9px 0}.ping-entry-actions button{min-height:44px}#ping-entry-status{min-height:0;font-size:11px}}
body[data-auth-stage="credentials"] #ping-entry-actions{display:none!important}

/* Dedicated backfields reserve finger and inventory space outside the arena. */
.match-backfield{display:none}
body[data-online-match="active"] .arena{--backfield-width:clamp(68px,12vw,126px);--court-width:calc(100vw - 2 * var(--backfield-width));--court-height:min(100dvh,calc(var(--court-width) * .56))}
body[data-online-match="active"] .arena .match-backfield{position:absolute;top:50%;transform:translateY(-50%);width:var(--backfield-width);height:var(--court-height);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:8px;color:#c6d5e6;background:#0e1928;border:1px solid #30465e;z-index:2;box-sizing:border-box}
body[data-online-match="active"] .arena .paddle-backfield{left:0;touch-action:none;user-select:none;-webkit-user-select:none;border-radius:0 12px 12px 0;background:linear-gradient(90deg,#102b3a,#0d1928)}
.paddle-backfield span:first-child{font:800 10px system-ui;letter-spacing:1px;text-align:center;line-height:1.5}
.paddle-backfield span:last-child{font:40px system-ui;color:#6fe5f3}
body[data-online-match="active"] .arena .inventory-backfield{right:0;border-radius:12px 0 0 12px;justify-content:flex-start;overflow:auto;touch-action:pan-y;padding-top:14px}
.inventory-backfield strong{font:800 10px system-ui;letter-spacing:.5px}
.inventory-backfield p{font:11px/1.4 system-ui;text-align:center;overflow-wrap:anywhere;margin:0}
#match-inventory-items{display:grid;gap:8px;width:100%}
#match-inventory-items button{width:100%;min-height:48px;padding:8px 3px;font:800 12px system-ui;white-space:normal;overflow-wrap:anywhere;border:1px solid #46cbdc;border-radius:9px;color:#eafaff;background:#164052;touch-action:manipulation}
#match-inventory-items button:disabled{opacity:.45}

body[data-online-match="active"] .arena .board-frame{width:min(var(--court-width),178.5714dvh);height:var(--court-height);aspect-ratio:1000/560}
body[data-online-match="active"] .arena .inventory-backfield{padding-top:58px}

#spectator-reactions{display:grid;gap:6px;width:100%}#spectator-reactions[hidden],#spectator-loadouts[hidden]{display:none}#spectator-reactions button{min-height:44px;padding:6px;font-size:11px}#engagement-hub{margin-top:14px}#engagement-hub summary{cursor:pointer;font-weight:750}#engagement-hub label,#practice-laboratory label{display:block;margin:10px 0}#engagement-hub input,#engagement-hub select{max-width:100%;min-height:44px}#engagement-result{border:1px solid #39717f;padding:10px;border-radius:10px;margin:12px 0}
/* Eligibility is shown only by the configured web pilot registration flow. */
#registration-eligibility{margin:0 0 1rem;padding:.8rem;border:1px solid #394764;border-radius:12px;text-align:left}
#registration-eligibility[hidden]{display:none}
#registration-eligibility legend{font-size:.9rem;padding:0 .3rem}
#registration-eligibility select{width:100%;min-height:40px;margin-bottom:.7rem}
#registration-eligibility .pilot-privacy-ack{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem;font-size:.85rem}
#registration-eligibility .pilot-privacy-ack input{width:auto;min-height:24px;margin:0}
.pilot-policy-links{font-size:.85rem;margin-top:1rem}