:root{color-scheme:dark;--ink:#fff5e6;--sub:#c6b7d8;--edge:#6d487b;--gold:#ffce69;--violet:#cfa0ff;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;background:#070d24;color:var(--ink)}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;min-height:100svh;background:linear-gradient(104deg,#050d25ed 8%,#08122cdf 47%,#160624e8 100%),url("/assets/race-win-arena.webp") center / cover fixed}
.game-header{display:flex;justify-content:space-between;align-items:center;padding:12px clamp(16px,5vw,64px);border-bottom:1px solid #5ae6ff36;background:#071127df;min-height:62px}
.mark{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:800;font-size:.71rem;letter-spacing:.15em}
.mark img{width:29px;height:29px}
#app{max-width:870px;margin:0 auto;padding:23px 22px 28px}
.app-loading .game-header,.app-loading footer{display:none}
.app-loading #app{position:fixed;inset:0;z-index:20;max-width:none;min-height:100svh;padding:0}
.app-loader{position:absolute;inset:0;display:grid;justify-items:center;gap:16px;min-height:100svh;place-content:center;overflow:hidden;text-align:center}
.app-loader::before{position:absolute;inset:0;z-index:-1;content:"";background:radial-gradient(circle at 50% 50%,#2d4d7666,transparent 37%),linear-gradient(180deg,#050b1cd9,#0a1230ab)}
.app-loader::after{position:absolute;z-index:-1;top:50%;left:50%;width:min(72vw,440px);aspect-ratio:1;border:1px solid #56e5f527;border-radius:50%;box-shadow:0 0 0 28px #56e5f50a,0 0 0 58px #ff579a0a;content:"";transform:translate(-50%,-50%)}
.app-loader-label{padding:6px 10px;border:1px solid #51def76b;border-radius:999px;background:#071630ca;color:#83efff;font-size:.61rem;font-weight:900;letter-spacing:.15em;box-shadow:0 0 22px #39d9ff30}
.app-loader img{width:min(68vw,270px);filter:drop-shadow(0 8px 18px #03061699);animation:loader-logo 1.8s ease-in-out infinite}
.app-loader-track{display:block;width:min(220px,62vw);height:7px;overflow:hidden;border:1px solid #82a5d86e;border-radius:999px;background:#071127dc;box-shadow:inset 0 1px 3px #01040b88,0 0 18px #4ce0ff26}
.app-loader-track i{display:block;width:46%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#53dfff,#caff58,#ff5f9b);box-shadow:0 0 12px #61eaff88;animation:loader-track 1.1s ease-in-out infinite}
.app-loader p{margin:0;color:#dceaff;font-size:.73rem;font-weight:850;letter-spacing:.13em;text-shadow:0 2px 8px #000;text-transform:uppercase}
@keyframes loader-logo{50%{transform:translateY(-5px) scale(1.025);filter:drop-shadow(0 13px 23px #38d9ff66)}}
@keyframes loader-track{from{transform:translateX(-110%)}to{transform:translateX(270%)}}
@media(prefers-reduced-motion:reduce){.app-loader img,.app-loader-track i{animation:none}}
.intro{text-align:center;margin-bottom:28px}
.eyebrow{color:#e6b9ff;font-size:.61rem;font-weight:800;letter-spacing:.3em;margin:0 0 2px}
.eyebrow span{display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--gold);vertical-align:middle;margin:0 5px}
h1{font:800 clamp(3.2rem,8vw,5.2rem)/.96 Georgia,serif;letter-spacing:-.06em;margin:0;color:var(--gold);text-shadow:0 3px #8c4828,0 8px 22px #ff9d4238}
.subtitle{color:var(--sub);font-size:.87rem;margin:10px 0 0;line-height:1.5}
.layout{display:grid;grid-template-columns:minmax(280px,370px) minmax(230px,290px);gap:clamp(20px,4vw,38px);justify-content:center;align-items:start}
.arena{position:relative;padding:5px;border-radius:29px;background:linear-gradient(152deg,#7149de,#df67d4 53%,#ffe294);box-shadow:0 0 0 1px #d994fd61,0 0 36px #a14df66d,0 16px 34px #08051dad}
.arena-tag{position:absolute;z-index:2;top:0;left:50%;transform:translate(-50%,-50%);white-space:nowrap;border:2px solid #ee7df6;border-radius:50px;background:linear-gradient(110deg,#160d2b,#41184d,#160d2b);color:#fff4fb;padding:8px 16px;font-weight:850;letter-spacing:.16em;font-size:.66rem;box-shadow:0 0 15px #f861df55}
.arena-tag i{display:inline-block;width:6px;height:6px;margin-right:4px;background:#ffdf79;border-radius:50%;box-shadow:0 0 8px #ffdf79}
.arena-inner{position:relative;overflow:hidden;border-radius:24px;background:linear-gradient(180deg,#20183a30,#170e2e60 49%,#160c27ac),url("/assets/bubbles-valley.png") center / cover;box-shadow:inset 0 0 0 1px #ffe4ff65}
.hud{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;text-align:center;gap:4px;padding:21px 8px 4px;background:linear-gradient(#26164d91,transparent);font-variant-numeric:tabular-nums;text-shadow:0 2px 4px #130923}
.hud span{display:block;font-size:.6rem;letter-spacing:.09em;font-weight:800;color:#fff1d7}
.hud strong{display:block;color:var(--gold);font-size:1.05rem}
.hud .hud-main strong{font-size:1.64rem;line-height:1;color:#c5ff82}
.board{display:block;width:100%;height:auto;aspect-ratio:360 / 560;background:linear-gradient(180deg,#20163155,#120d2833 54%,#150f2a70);touch-action:pan-y;cursor:crosshair}
.board:focus-visible{outline:2px solid #f2ce8a;outline-offset:-3px}
.board[tabindex="0"]{touch-action:none}
.danger{fill:none;stroke:#ff6897;stroke-width:1.5;stroke-dasharray:9 7;opacity:.82}
.aim{fill:none;stroke:#fff3cf;stroke-width:2.4;stroke-dasharray:1 8;stroke-linecap:round;opacity:.76}
.socket{fill:#21143160;stroke:#fff6d18a;stroke-width:1.2}
.next{text-anchor:middle;fill:#ffecd8;font-size:10px;font-weight:800;letter-spacing:.1em}
.board-message{position:absolute;top:49%;left:50%;transform:translate(-50%,-50%);width:min(84%,280px);padding:20px 13px;text-align:center;background:#1a102ce8;border:1px solid #ca8fef9e;border-radius:16px;box-shadow:0 14px 32px #1008208c;backdrop-filter:blur(5px)}
.board-message h2{margin:0;font-size:1.2rem}
.board-message p{margin:7px 0 13px;color:var(--sub);font-size:.84rem}
.board-message a.primary { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 7px 14px; border-radius: 999px; text-decoration: none; font-size: .85rem; font-weight: 800; }
aside{display:grid;gap:12px}
.panel{padding:16px 17px;border:1px solid #9965b455;border-radius:15px;background:#211431da;box-shadow:0 10px 26px #0b061f37}
.panel h2{margin:0;font-size:1rem}
.rules{margin:12px 0 0;padding-left:1.3rem;color:var(--sub);font-size:.82rem}
.rules li{padding-left:2px;margin-bottom:9px}
.rules li:last-child{margin-bottom:0}
.rules li::marker{color:var(--gold);font-weight:700}
.rules strong,.rules span{display:block}
.rules strong{color:var(--ink);margin-bottom:2px}
.round-list{list-style:none;padding:0;margin:8px 0 0;font-size:.78rem}
.round-list li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px;padding:7px 0;border-bottom:1px solid #9965b444}
.round-list li:last-child{border:0;padding-bottom:0}
.round-list time{color:var(--sub)}
form{display:grid;gap:9px;margin-top:12px}
form .subtitle{margin:0;font-size:.75rem}
label{display:grid;gap:5px;font-size:.78rem;color:var(--sub)}
input{width:100%;padding:9px 10px;border-radius:8px;border:1px solid #ad77cc64;background:#170e25;color:var(--ink);font:inherit;font-size:.94rem}
.actions{display:flex;gap:6px;flex-wrap:wrap}
button{font:inherit;font-weight:750;font-size:.8rem;cursor:pointer;border-radius:24px;padding:8px 13px}
button:disabled{opacity:.6;cursor:wait}
button:focus-visible,input:focus-visible,.mark:focus-visible{outline:2px solid #f3ca84;outline-offset:2px}
.primary{background:linear-gradient(140deg,#ffe599,#ffa63d);color:#2d1830;border:1px solid #ffde87;box-shadow:0 3px 12px #ffb44938}
.primary:hover{background:#ffdc84}
.ghost{color:var(--ink);background:#362449;border:1px solid #9866af74}
.ghost:hover{background:#513063}
.error{color:#ffb0bf;font-size:.8rem;margin:0}
.error:empty{display:none}
footer{text-align:center;color:#b9a6cc;font-size:.66rem;letter-spacing:.09em;padding:4px 12px 16px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:650px){#app{padding:18px 12px 18px}.intro{margin-bottom:22px}.layout{grid-template-columns:minmax(0,370px);gap:14px}.game-header{min-height:48px;padding:7px 13px}.auth .actions button{flex:1} .layout:has(.auth) aside{grid-row:1;margin-bottom:10px}.layout:has(.auth) aside>.panel:not(.auth){display:none}.subtitle{font-size:.82rem}}

.audio{position:absolute;right:10px;bottom:10px;display:grid;place-items:center;width:32px;height:32px;padding:5px;border:1px solid #fff3dc55;background:#180e29bd;color:#fff5df}
.audio svg{width:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.audio[aria-pressed="false"] .sound-waves,.audio[aria-pressed="true"] .sound-off{display:none}
@media(min-width:651px) and (max-height:850px){
  #app{display:grid;grid-template-columns:minmax(235px,min(360px,calc((100svh - 150px)*.64))) minmax(220px,290px);grid-template-rows:auto 1fr;column-gap:clamp(22px,4vw,38px);justify-content:center;align-items:start;padding-top:24px;padding-bottom:12px}
  .layout{display:contents}
  .arena{grid-column:1;grid-row:1 / span 2}
  .intro{grid-column:2;grid-row:1;text-align:left;margin-bottom:18px}
  aside{grid-column:2;grid-row:2}
  h1{font-size:clamp(3.1rem,6vw,4.2rem)}
}

body.auth-page {
  display: grid;
  min-height: 100svh;
  place-items: start center;
  background: linear-gradient(180deg,#080e2466,#090e26a6),
    #090e26 url("/assets/race-win-arena.webp") center / cover no-repeat;
}
.auth-page .game-header, .auth-page footer { display: none; }
.auth-page #app {
  display: block;
  width: min(100%, 468px);
  padding: max(24px,calc((100svh - 520px) / 2)) 24px 24px;
}
.auth-shell { display: grid; gap: 24px; }
.auth-brand {
  justify-self: center;
}
.auth-brand img {
  display: block;
  width: clamp(176px, 50vw, 236px);
  height: auto;
}
.auth-card {
  padding: 24px;
  border: 1px solid #9bb9ff63;
  border-radius: 20px;
  background: linear-gradient(112deg,#60e9ff,#a9ff94 55%,#ff4c88) top center / 48% 2px no-repeat,
    linear-gradient(145deg,#1b2944fa,#11182efc);
  box-shadow: 0 18px 48px #04091bb3;
}
.auth-card h1 {
  margin: 0;
  color: #faf4ff;
  font: 800 1.53rem/1.25 system-ui,sans-serif;
  letter-spacing: -.025em;
  text-shadow: none;
}
.auth-card > p { margin: 6px 0 0; color: #c4d2e9; font-size: .89rem; line-height: 1.5; }
.auth-card form { gap: 14px; margin-top: 22px; }
.auth-card input {
  min-height: 50px;
  padding: 10px 13px;
  border-color: #9bb9ff55;
  border-radius: 11px;
  background: #10192e;
  font-size: 1rem;
}
.auth-card input::placeholder { color: #a9b8d3; }
.password-field { position: relative; }
.password-field input { padding-right: 48px; }
#show-password {
  position: absolute;
  inset: 5px 5px 5px auto;
  display: grid;
  width: 36px;
  padding: 7px;
  place-items: center;
  border: 0;
  background: transparent;
  color: #c4d2e9;
}
#show-password svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.auth-submit {
  min-height: 48px;
  border: 1px solid #a9ff94;
  border-radius: 11px;
  background: linear-gradient(112deg,#d9ff54,#69f29c);
  box-shadow: 0 8px 23px #69f29c26;
  color: #0c2420;
  font-size: .88rem;
  font-weight: 850;
  letter-spacing: .025em;
  text-transform: uppercase;
}
.auth-submit:hover { background: linear-gradient(112deg,#e5ff85,#8cf7b3); }
.auth-switch {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 4px;
  margin-bottom: 22px;
  padding: 4px;
  border: 1px solid #9bb9ff35;
  border-radius: 13px;
  background: #10192e;
}
.auth-switch a {
  display: grid;
  min-height: 44px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #c4d2e9;
  font-size: .9rem;
  font-weight: 750;
  text-align: center;
  text-decoration: none;
}
.auth-switch a:hover { background: #25334e; color: #fff; }
.auth-switch a[aria-current] {
  border-color: #a9ff9466;
  background: #233d3b;
  color: #c9ffb5;
}
.auth-brand:focus-visible, .auth-switch a:focus-visible,
.auth-card input:focus-visible, .auth-card button:focus-visible {
  outline: 2px solid #a9ff94;
  outline-offset: 3px;
}
@media(max-width:460px){
  .auth-page #app { padding-inline: 16px; }
  .auth-card { padding: 20px; }
}

body.match-page {
  min-height: 100svh;
  background: linear-gradient(180deg,#080e2473,#0a0b1822 48%,#070b20a6),
    #090e26 url("/assets/race-win-arena.webp") center / cover fixed no-repeat;
}
.match-page .game-header, .match-page footer { display: none; }
.match-page #app { display: block; width: 100%; max-width: none; padding: 7px 10px calc(var(--player-nav-height) + 12px); }
.match-shell {
  --match-chrome: calc(243px + var(--player-nav-height));
  --match-ratio: .913;
  width: min(575px,100%,max(220px,calc((100dvh - var(--match-chrome))*var(--match-ratio))));
  margin-inline: auto;
  container-type: inline-size;
}
.match-shell.match-practice { --match-chrome: calc(192px + var(--player-nav-height)); }
.match-shell.match-classic { --match-ratio: .643; }
.match-top { display: flex; gap: 7px; align-items: center; min-height: 42px; margin-bottom: 5px; }
.match-mode-tag { color: #c4d2e9; white-space: nowrap; font-size: .68rem; font-weight: 750; }
.match-settings-button {
  flex: 0 0 42px; display: grid; place-items: center; width: 42px; height: 42px;
  padding: 0; border: 1px solid #9fb7ef44; border-radius: 10px; color: #ecf4ff; background: #101b31e8;
}
.match-settings-button:hover { background: #263b59; }
.match-settings-button svg { width: 20px; fill: #101b31; stroke: currentColor; stroke-width: 1.6; }
.match-fullscreen svg { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.match-fullscreen > span { margin-left: auto; color: #c7d5ec; font-size: .75rem; font-weight: 750; }
.match-fullscreen[aria-pressed="true"] { color: #dcffca; border-color: #b5ff7e80; background: #253e36; }
.match-fullscreen[aria-pressed="false"] .fullscreen-collapse,
.match-fullscreen[aria-pressed="true"] .fullscreen-expand { display: none; }
.match-stats {
  display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 0 0 5px;
  padding: 5px 2px; background: #0d172cef; border: 1px solid #9fb7ef35; border-radius: 10px;
  text-align: center; font-variant-numeric: tabular-nums;
}
.match-stats > div + div { border-left: 1px solid #9fb7ef2d; }
.match-stats dt { color: #bdcbe1; font-size: clamp(.56rem, 2.8cqw, .67rem); }
.match-stats dd { margin: 1px 0 0; font-size: clamp(.79rem, 4.2cqw, 1rem); font-weight: 850; white-space: nowrap; }
.match-glass {
  display: flex;
  min-height: 47px;
  justify-content: center;
  align-items: center;
  gap: .32em;
  padding: 7px 12px;
  border: 1px solid #b2c8ff54;
  border-radius: 14px;
  color: #f4f8ff;
  background: linear-gradient(150deg,#263450e8,#10182dec);
  font-size: clamp(.89rem,2.8vw,1.16rem);
  font-weight: 900;
  text-decoration: none;
}
.match-brand { flex: 1 1 auto; min-width: 0; margin: 0; }
.match-brand img { display: block; width: min(100%,142px); height: auto; }
.match-tools {
  display: flex; justify-content: space-between; gap: 4px; margin: 0 0 5px; padding: 0 clamp(5px,2cqw,10px);
  background: #0e182cde; border: 1px solid #9fb7ef30; border-radius: 8px;
}
.match-tool {
  display: flex;
  align-items: center;
  gap: clamp(3px,1cqw,6px);
  min-height: 33px;
  color: #d7e3f8;
  font-size: clamp(.64rem,3cqw,.83rem);
  font-weight: 650;
  white-space: nowrap;
}
.match-tool svg { flex: none; width: clamp(17px,5cqw,22px); height: auto; }
.match-tool strong { color: #fff; font-size: 1.12em; font-weight: 850; font-variant-numeric: tabular-nums; }
.match-ball-tool > span, .match-row-tool > span { display: grid; gap: 1px; line-height: 1.12; }
.match-ball-tool strong { text-transform: capitalize; }
.match-row-tool { text-align: right; }
#match-danger-notice {
  position: absolute;
  z-index: 2;
  inset: auto 4px 2px auto;
  padding: 3px 6px;
  border-radius: 5px;
  color: #ffdea2;
  background: #221730;
  font-size: .67rem;
  pointer-events: none;
}
#practice-hits { color: #a9ff94; }
.match-row-soon { color: #ffdb8a; }
.match-row-soon strong { color: #ffdb8a; }
#match-factor { color: #a9ff94; font-variant-numeric: tabular-nums; }
.match-stage {
  position: relative;
  overflow: hidden;
  border: 1px solid #9bb9ff69;
  border-radius: 15px;
  background:
    repeating-linear-gradient(0deg,#cad8ff0c 0 1px,transparent 1px 26px),
    repeating-linear-gradient(90deg,#cad8ff0c 0 1px,transparent 1px 26px),
    linear-gradient(164deg,#142146e8,#101a38ad 50%,#231733c9);
  box-shadow: inset 0 0 0 3px #748cff19, 0 0 24px #6790ff44, 0 18px 38px #01040bb0;
}
.match-stage .board { width: 100%; height: auto; aspect-ratio: 336 / 368; background: none; }
.match-classic .board { aspect-ratio: 360 / 560; }
.match-stage .board:focus-visible { outline-color: #fff5bb; }
.match-stage .socket { fill: #a9c5ff22; stroke: #9ff9ff8f; stroke-width: 1.4; }
.match-stage .aim { stroke: #83eeff; stroke-width: 2.6; stroke-dasharray: 95 1400; opacity: .59; }
.match-stage .aiming .aim { stroke: #fff; stroke-width: 2; stroke-dasharray: 5 6; stroke-linecap: round; opacity: .9; }
.match-aim-dot { fill: #fff; stroke: #b178b9; stroke-width: .55; }
.match-target { fill: #fff3; stroke: #fff; stroke-width: 1.6; }
.pop-ring {
  fill: #fff7bc44;
  stroke: #fff5cf;
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: bubble-pop .31s ease-out both;
}
.bomb-impact { pointer-events: none; }
.bomb-impact-core { fill: #fff3c0; animation: bomb-core .22s ease-out both; }
.bomb-impact-wave { fill: none; stroke: #ffbf6e; stroke-width: 2; animation: bomb-wave .38s ease-out both; }
.bomb-impact-echo { stroke: #ff7097; animation-delay: .08s; }
.bomb-impact-sparks {
  fill: none;
  stroke: #ffe7a7;
  stroke-width: 2;
  stroke-linecap: round;
  animation: bomb-sparks .4s ease-out both;
}
@keyframes bomb-core {
  from { opacity: .88; transform: scale(.55); }
  to { opacity: 0; transform: scale(1.6); }
}
@keyframes bomb-wave {
  from { opacity: .95; transform: scale(.7); }
  to { opacity: 0; transform: scale(2.8); }
}
@keyframes bomb-sparks {
  from { opacity: 1; transform: scale(.55); }
  to { opacity: 0; transform: scale(2); }
}
@media (prefers-reduced-motion: reduce) {
  .bomb-impact { display: none; }
}
@keyframes bubble-pop {
  from { transform: scale(.75); opacity: 1; }
  to { transform: scale(1.9); opacity: 0; }
}
.match-stage .danger { opacity: 0; }
.match-stage.near-danger .danger { opacity: .82; }
.match-actions { position: relative; display: grid; grid-template-columns: minmax(0,1fr); gap: 7px; margin-top: 18px; }
.match-actions > :is(a,button) { min-height: 45px; }
#match-gain {
  position: absolute;
  z-index: 2;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  width: max-content;
  max-width: calc(100% - 20px);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin: 0;
  padding: 6px 10px;
  border-radius: 8px;
  background: #12263deb;
  border: 1px solid #a9ff9466;
  color: #cfdeed;
  font-size: .74rem;
  font-weight: 750;
}
#match-gain strong { color: #bfff9f; font-size: .96rem; font-variant-numeric: tabular-nums; }
#match-clear-reward { margin: 0; color: #c2d4e9; text-align: center; font-size: .76rem; font-weight: 650; }
#match-clear-reward:empty { display: none; }
#record-score, #restart-practice {
  border: 1px solid #c8ff83;
  border-radius: 14px;
  color: #122006;
  background: linear-gradient(112deg,#d9ff54,#69f29c);
  box-shadow: 0 6px 26px #a8ff6550;
  font-size: clamp(.89rem,2.8vw,1.16rem);
  font-weight: 900;
}
#record-score:enabled:hover, #restart-practice:enabled:hover { background: linear-gradient(112deg,#f2ff94,#9fffc5); }
#record-score:disabled, #restart-practice:disabled { opacity: 1; cursor: default; color: #b9cbdf; border-color: #a2c0f647; background: #202d44eb; box-shadow: none; }
.match-shell .match-glass:hover:is(a) { background: #283b59; }
.match-shell a:focus-visible { outline: 2px solid #fff5bb; outline-offset: 2px; }
#match-row-notice { position: absolute; inset: auto 0 calc(100% + 2px); color: #f1fbff; font-size: .7rem; line-height: 14px; font-weight: 750; text-align: center; text-shadow: 0 1px 5px #060816; pointer-events: none; }
#match-row-notice:empty { display: none; }
.match-shell #game-error { margin-top: 8px; padding: 7px 11px; border-radius: 8px; background: #24143bdd; }
.match-shell #game-error:empty { display: none; }
.thumb-controls {
  display: none;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 5px 7px;
  border: 1px solid #9bb9ff55;
  border-radius: 10px;
  background: #10192ef5;
}
.thumb-controls label { display: grid; min-width: 0; color: #d7e3f8; font-size: .71rem; font-weight: 700; }
.thumb-controls input { min-height: 28px; margin: 0; padding: 0; accent-color: #a9ff94; touch-action: none; }
.thumb-controls button { min-height: 44px; border-color: #a9ff94; background: #233d3b; color: #c9ffb5; font-weight: 800; }
.immersive-toggle { min-height: 42px; padding: 5px 8px; font-size: .7rem; }
body:has(.immersive-play) { overflow: hidden; }
.match-shell.immersive-play, .training-page #app.immersive-play {
  position: fixed;
  z-index: 10;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: auto;
  overscroll-behavior: contain;
  background: #0c142b;
}
.match-shell.immersive-play {
  --immersive-board-width: min(575px,max(220px,calc((100dvh - 245px)*var(--match-ratio))));
  padding: max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
}
.match-shell.immersive-play > :not(dialog) { width: min(100%,var(--immersive-board-width)); margin-inline: auto; }
.immersive-play .thumb-controls { display: grid; }
.start-lights {
  position: absolute;
  z-index: 1;
  inset: 56% auto auto 50%;
  display: none;
  gap: 7px;
  padding: 8px;
  border: 1px solid #9bb9ff66;
  border-radius: 20px;
  background: #0b1428f5;
  transform: translateX(-50%);
  pointer-events: none;
}
.start-lights i { width: 13px; height: 13px; border-radius: 50%; }
.train-wall { stroke: #a9ff94; stroke-width: 4; stroke-dasharray: 8 8; visibility: hidden; }
.train-wall-hint .train-wall { visibility: visible; }
.combo-fall { pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .start-lights-on { display: flex; animation: launch-lights .72s both; }
  .start-lights-on i { animation: launch-color .72s both; }
  .combo-fall { animation: combo-drop .44s cubic-bezier(.4,.05,.84,.9) both; }
  g:nth-child(3n+2) > .combo-fall { animation-delay: .06s; }
  g:nth-child(3n) > .combo-fall { animation-delay: .12s; }
}
@keyframes launch-lights {
  0%, 78% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}
@keyframes launch-color {
  0%, 52% { background: #ff4c76; box-shadow: 0 0 10px #ff4c76; }
  53%, 100% { background: #a9ff94; box-shadow: 0 0 10px #a9ff94; }
}
@keyframes combo-drop {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(105px) rotate(28deg); opacity: 0; }
}
@media (max-width: 720px), (pointer: coarse) {
  .thumb-controls { display: grid; }
  .match-shell.match-practice { --match-chrome: calc(250px + var(--player-nav-height)); }
}
@media (max-width:480px) {
  body.match-page { background-position: center; background-attachment: scroll; background-image: linear-gradient(#070d24ad,#0a0b20ac),url("/assets/race-win-arena.webp"); }
}

#match-result, #match-exit, #match-settings, #match-redeem, #match-balance-dialog {
  width: min(412px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: 1px solid var(--bw-dialog-border,#7699c868);
  border-radius: 21px;
  color: var(--bw-dialog-text,#edf5ff);
  background: #141e34;
  box-shadow: 0 24px 70px #130822ad;
}
#match-result::backdrop, #match-exit::backdrop, #match-settings::backdrop, #match-redeem::backdrop, #match-balance-dialog::backdrop { background: #21113880; backdrop-filter: blur(3px); }
#match-balance-info { padding: 0 2px; border: 0; border-radius: 4px; background: transparent; color: inherit; font: inherit; }
#match-balance-info:hover, #match-balance-info span { color: #a9ff94; }
#match-balance-info::after { content: ""; position: absolute; inset: 0; }
.match-stats > div:first-child { position: relative; }
#match-wallet-total { color: #bfff9f; font-size: 1.5rem; }
#match-balance-breakdown:empty { display: none; }
#match-redeem { width: min(460px, calc(100% - 24px)); overflow: hidden; }
#match-redeem-form { padding: 0; gap: 0; text-align: left; grid-template-rows: auto minmax(0,1fr) auto; max-height: calc(100dvh - 26px); }
.redeem-header, .redeem-fields, .redeem-actions { padding: 14px clamp(12px, 4vw, 22px); }
.redeem-header { border-bottom: 1px solid #8ddcea42; background: linear-gradient(120deg,#173747,#1d2446); }
.redeem-header h2 { font-size: 1.25rem; }
.redeem-header p { color: #c2d4e9; font-size: .78rem; }
.redeem-fields { display: grid; gap: 12px; overflow-y: auto; overscroll-behavior: contain; }
.redeem-actions { display: grid; gap: 8px; background: #101a2b; border-top: 1px solid #9bb9ff3d; }
#match-redeem-amount { color: #bfff9f; font-size: 1.45rem; }
#match-redeem-form label { display: grid; gap: 4px; min-width: 0; color: #deebfb; font-size: .8rem; font-weight: 700; }
#match-redeem-form :is(input:not([type="radio"]), select) { width: 100%; min-width: 0; min-height: 44px; padding: 6px 9px; font-size: 1rem; color: #eff6ff; background: #101a2b; border: 1px solid #7195bb66; border-radius: 9px; }
#match-redeem-form fieldset { display: grid; gap: 8px; grid-template-columns: repeat(2,minmax(0,1fr)); min-width: 0; margin: 2px 0; padding: 10px; border: 1px solid #9bb9ff3d; border-radius: 10px; }
#match-redeem-form fieldset:not(.redeem-pix) label:nth-of-type(2) { grid-column: 1 / -1; }
#match-redeem-form .redeem-pix { display: flex; flex-wrap: wrap; border: 0; padding: 0; }
.redeem-pix legend { margin-bottom: 6px; font-size: .8rem; font-weight: 700; }
.redeem-pix label { position: relative; }
.redeem-pix input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.redeem-pix span { display: grid; place-items: center; min-height: 44px; padding: 4px 10px; border: 1px solid #7195bb66; border-radius: 9px; background: #101a2b; cursor: pointer; }
.redeem-pix input:checked + span { color: #d4ffbe; background: #233d3b; border-color: #a9ff94; }
.redeem-pix input:focus-visible + span { outline: 2px solid #a9ff94; outline-offset: 2px; }
#match-redeem-form .error { color: #ffadba; }
#match-redeem-error:empty { display: none; }
.match-result-banner {
  display: grid;
  place-items: center;
  min-height: 136px;
  padding: 15px;
  background: linear-gradient(90deg,#10152e4d,#1c164863),url("/assets/race-win-arena.webp") center / cover;
}
.match-result-banner img {
  width: min(100%,275px);
}
#match-result[data-outcome="lost"] .match-result-banner { background-color: #362353; background-blend-mode: normal, luminosity; }
#match-result[data-bomb-impact] .match-result-banner {
  background: #19162e url("/assets/race-win-vika-bomb.png") center 48% / cover no-repeat;
  border-bottom: 1px solid #ffab6966;
}
#match-result[data-shot-limit] .match-result-banner {
  background: #101c31 url("/assets/race-win-vika-shot-limit.png") center 45% / cover no-repeat;
  border-bottom: 1px solid #74dbed66;
}
#match-result[data-no-space] .match-result-banner {
  background: #171831 url("/assets/race-win-vika-no-space.png") center 46% / cover no-repeat;
  border-bottom: 1px solid #ba8cf066;
}
#match-result:is([data-bomb-impact], [data-shot-limit], [data-no-space]) .match-result-banner img { visibility: hidden; }
.match-result-body { display: grid; gap: 9px; padding: 17px 19px 19px; text-align: center; }
.match-result-body h2, .match-result-body p { margin: 0; }
#match-result-score { margin: 0 0 7px; color: #e8d5ff; font-weight: 700; }
.match-result-body > .ghost { border-radius: 12px; }
.match-result-body form { margin: 4px 0 0; }
.match-settings-body h2 { margin-bottom: 4px; }
.match-dropdown { display: grid; grid-template-columns: minmax(65px,1fr) minmax(0,1.55fr); gap: 10px; align-items: start; text-align: left; }
.match-dropdown > span { padding-top: 12px; color: #c7d5ec; font-size: .83rem; font-weight: 750; }
.match-dropdown-field { position: relative; min-width: 0; }
.match-dropdown-trigger, .match-dropdown-options button, .match-sound-control {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  min-height: 42px; padding: 8px 10px; border: 1px solid #9fb7ef52; border-radius: 9px;
  color: #ecf5ff; background: #0e192c; font-size: .83rem; text-align: left;
}
.match-dropdown-trigger svg { flex: 0 0 17px; width: 17px; fill: none; stroke: #c7d7f0; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.match-dropdown-trigger[aria-expanded="true"] { border-color: #a9ff94; }
.match-dropdown-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.match-dropdown-trigger:not([disabled]):hover { background: #1a2a46; }
.match-dropdown-options {
  position: absolute; z-index: 2; inset: calc(100% + 4px) 0 auto;
  display: grid; gap: 2px; max-height: min(145px, 36dvh); overflow: auto;
  padding: 3px; border: 1px solid #9fb7ef66; border-radius: 9px; background: #0b1426;
  box-shadow: 0 10px 22px #050a17b3;
}
.match-dropdown-options button { min-height: 36px; border-color: transparent; border-radius: 6px; }
.match-dropdown-options button:hover, .match-dropdown-options button:focus-visible { border-color: #7f9ccb; background: #1f304e; }
.match-dropdown-options button:focus-visible { outline: 1px solid #c9ddff; outline-offset: -2px; }
.match-dropdown-options button[aria-selected="true"] { background: #233a38; color: #c6ff99; }
.match-option-check { visibility: hidden; }
.match-dropdown-options button[aria-selected="true"] .match-option-check { visibility: visible; }
.match-sound-control { justify-content: flex-start; margin-top: 4px; }
.match-sound-control:hover { background: #1a2a46; }
.match-sound-control svg { flex: 0 0 19px; width: 19px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.match-sound-control[aria-pressed="true"] { border-color: #a9ff9499; color: #c6ff99; }
.match-sound-control[aria-pressed="true"] .match-sound-muted,
.match-sound-control[aria-pressed="false"] .match-sound-waves { display: none; }
#sound-action { margin-left: auto; color: #c7d5ec; font-size: .75rem; font-weight: 750; }
.match-exit-link { padding: 10px; text-decoration: none; font-size: .85rem; font-weight: 750; }
#match-exit { border-color: #79b9d16b; background: #111b30; }
.match-exit-body { gap: 12px; padding: 0 18px 18px; text-align: left; }
.match-exit-coach {
  position: relative;
  display: flex;
  align-items: end;
  height: clamp(104px, 25dvh, 172px);
  margin-inline: -18px;
  overflow: hidden;
  background: linear-gradient(90deg,#09172bb0,#13132925 60%,#20122a65),
    url("/assets/race-win-arena.webp") center 61% / cover;
}
.match-exit-pit-stop { position: absolute; right: 12%; bottom: 0; height: 100%; aspect-ratio: 1; }
.match-exit-pit-stop img { display: block; width: 100%; height: 100%; object-fit: contain; }
.match-exit-pit-sign {
  position: absolute;
  left: 89%;
  bottom: 62%;
  transform: translateX(-50%) skewX(-8deg);
  padding: 4px 7px;
  border: 1px solid #a9ff9480;
  border-radius: 5px;
  background: #0e2925;
  box-shadow: 0 0 12px #a9ff9460;
  color: #dcffca;
  font-size: .65rem;
  font-weight: 850;
  text-transform: uppercase;
  white-space: nowrap;
}
.match-exit-coach > span { z-index: 1; margin: 0 0 12px 18px; padding: 4px 10px; border: 1px solid #8ceaf566; border-radius: 6px; background: #101a2a; color: #8ceaf5; font-size: .8rem; font-weight: 800; }
#match-exit-title { font-size: clamp(1.25rem,5vw,1.6rem); }
.match-exit-body > p { color: #d4e0f3; line-height: 1.45; }
#match-exit-deadline { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid #a9ff9447; border-radius: 10px; background: #142c38; }
#match-exit-deadline span, #match-exit-deadline small { color: #c2d4e9; font-size: .77rem; }
#match-exit-deadline time { color: #c7ffab; font-weight: 800; }
.match-exit-body .match-exit-link { text-align: center; }
.match-summary { margin: 0 0 4px; padding: 8px 11px; border: 1px solid #9bb9ff3d; border-radius: 10px; background: #0d172b; }
.match-summary > div { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; font-size: .84rem; }
.match-summary > div:last-child { border-top: 1px solid #9bb9ff3d; padding-top: 7px; margin-top: 3px; }
.match-summary dd { margin: 0; font-weight: 850; }
#result-payout { display: inline-block; font-variant-numeric: tabular-nums; }
#match-result:is([data-outcome="won"], [data-outcome="ended"]) #result-payout { color: #bfff9f; }
#result-net[data-net="positive"] { color: #a9ff94; }
#result-net[data-net="negative"] { color: #ffafbf; }