:root {
  --player-nav-height: calc(64px + env(safe-area-inset-bottom,0px));
  --bw-dialog-border: #7699c868;
  --bw-dialog-text: #edf5ff;
  --bw-dialog-title-size: clamp(1.2rem,4.8vw,1.5rem);
}

@media (forced-colors: none) {
  :root { --scroll-thumb: #587699; --scroll-thumb-hover: #83a9cf; }
  * { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }

  @supports selector(::-webkit-scrollbar) {
    * { scrollbar-width: auto; scrollbar-color: auto; }
    ::-webkit-scrollbar { width: 8px; height: 8px; }
    ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
    ::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--scroll-thumb); }
    ::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background: var(--scroll-thumb-hover); }
    ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
  }
}

body.training-page {
  background: linear-gradient(180deg,#080e2495,#141c369e 63%,#0e1328ab),url("/assets/race-win-arena.webp") center / cover fixed;
}
body.player-page {
  background: linear-gradient(140deg,#1b0d36a6,#702f9477),url("/assets/bubbles-garden.webp") center / cover fixed;
}
.training-page .game-header, .training-page footer,
.player-page .game-header, .player-page footer { display: none; }
.training-page #app, .player-page #app {
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
}
.training-page #app { padding: 15px 14px 20px; text-align: center; }
.train-top, .player-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px clamp(14px,3vw,40px);
}
.train-top { position: absolute; inset: 0 0 auto; }
.train-top-actions { display: flex; align-items: center; gap: 5px; }
.train-top-actions #skip-training { min-height: 42px; padding-inline: 7px; font-size: .7rem; }
.train-top .player-brand img { display: block; width: min(34vw,155px); }
.player-brand {
  color: #9df4ff;
  font: 900 italic 1.8rem/1 Georgia,serif;
  text-shadow: 0 2px #6335bd, 0 4px 10px #17072c;
  text-decoration: none;
}
.train-top .ghost { background: #21133ccf; }
.train-hud {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 7px 12px;
  width: min(100%,420px);
  margin: 0 auto 14px;
  padding: 8px 11px;
  border: 1px solid #9bb9ff55;
  border-radius: 12px;
  background: linear-gradient(112deg,#d9ff54,#69f29c) left top / 3px 100% no-repeat,
    linear-gradient(110deg,#152441f5,#121b31f5);
  text-align: left;
}
.train-hud-copy span, .train-hud-score span {
  display: block;
  color: #a9bedc;
  font-size: .61rem;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.train-hud-copy strong { display: block; margin-top: 2px; color: #f1f6ff; font-size: .92rem; line-height: 1.2; }
.train-hud-score { text-align: right; }
.train-hud-score strong { color: #d9ff54; font-size: 1.24rem; line-height: 1; font-variant-numeric: tabular-nums; }
.train-steps {
  grid-column: 1 / -1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0,1fr);
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.train-steps li {
  display: grid;
  min-height: 21px;
  place-items: center;
  border: 1px solid #9bb9ff30;
  border-radius: 5px;
  background: #10192e;
  color: #a9bedc;
  font-size: .67rem;
  font-weight: 800;
}
.train-steps .is-complete { border-color: #69f29c66; background: #21443c; color: #b8ffab; }
.train-steps .is-current { border-color: #d9ff54; background: #d9ff54; color: #15252a; }
.train-highlight { border-color: #69f29c91; }
.train-stage { position: relative; width: clamp(220px, calc((100svh - 145px)*.6428), 460px); max-width: 100%; margin: 0 auto; }
#train-board {
  display: block;
  width: 100%;
  overflow: hidden;
  touch-action: none;
  cursor: crosshair;
  border: 1px solid #f0a8ff4a;
  border-radius: 21px;
  background: linear-gradient(180deg,#260d3fa0,#260e338f);
  box-shadow: 0 14px 50px #1c0a39aa;
}
.train-ring {
  fill: #b23cec66;
  stroke: #ffdf70;
  stroke-width: 2;
  filter: drop-shadow(0 0 5px #eb63ff);
  animation: halo 1.45s ease-in-out infinite alternate;
}
@keyframes halo { to { stroke-width: 4; opacity: .65; } }
.train-coach {
  position: absolute;
  left: calc(100% + 16px);
  top: 29%;
  width: min(270px,calc((100vw - 100%)/2 - 30px));
  display: grid;
  padding: 0 15px 14px;
  border: 1px solid #d18bff67;
  border-radius: 17px;
  color: #fff5ff;
  background: #21123bf0;
  box-shadow: 0 9px 28px #1b0a3d9e;
  text-align: left;
}
.train-coach img { justify-self: center; width: min(100%,124px); height: 100px; object-fit: contain; margin-top: -29px; filter: drop-shadow(0 0 14px #ab62ff80); pointer-events: none; }
.train-coach strong { color: #ffe179; font-size: 1rem; }
.train-coach p { margin: 5px 0; font-size: .84rem; line-height: 1.42; }
.train-coach p:empty { display: none; }
.train-coach .train-primary { margin-top: 8px; min-height: 40px; }
.train-audio { margin-top: 10px; font-size: .73rem; }
#train-error { margin-top: 8px; }
.train-dialog, .player-dialog {
  width: min(calc(100% - 26px),440px);
  max-height: calc(100svh - 24px);
  padding: 0;
  overflow: auto;
  border: 1px solid #9e5aff81;
  border-radius: 19px;
  color: #fff5ff;
  background: #1e143b;
  box-shadow: 0 23px 85px #100823b3;
}
.train-dialog::backdrop, .player-dialog::backdrop { background: #160a29a6; backdrop-filter: blur(2px); }
.train-banner, .player-banner {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: 155px;
  padding: 17px;
  background: linear-gradient(90deg,#18083db8,#26175a33),url("/assets/bubbles-garden.webp") center / cover;
}
.train-banner > div, .player-banner > div { position: relative; z-index: 1; width: 61%; text-align: left; }
.train-banner span, .player-banner span { color: #c8e4ff; font-size: .66rem; font-weight: 900; letter-spacing: .12em; }
.training-page .train-banner {
  background: linear-gradient(90deg,#101b3db8,#26175a33),url("/assets/race-win-arena.webp") center / cover;
}
.training-page .train-banner > div { width: 56%; }
.training-page .train-banner strong { color: #d4ff68; text-shadow: 0 2px #182c38, 0 0 15px #45f2e65c; font-size: clamp(1.08rem,4.5vw,1.75rem); }
.training-page .train-banner img { right: 0; bottom: -8%; width: 52%; height: 109%; }
.training-page .train-coach { border-color: #77dbf46b; background: #111b32f2; }
.training-page .train-coach strong { color: #b4ff8e; }
.train-banner strong {
  display: block;
  margin-top: 5px;
  color: #ffc83a;
  font-size: clamp(1.65rem,6vw,2.55rem);
  font-style: italic;
  font-weight: 1000;
  line-height: .99;
  text-transform: uppercase;
  text-shadow: 0 3px #a7441c, 0 0 17px #c82cff;
}
.train-banner img, .player-banner img { position: absolute; right: -4%; bottom: -13%; width: 57%; height: 124%; object-fit: contain; }
.train-dialog-body { display: grid; gap: 10px; padding: 19px 22px 23px; text-align: center; }
.train-dialog-body h1, .player-banner h1 { margin: 0; color: #fff6ff; font: 900 clamp(1.25rem,4.2vw,1.55rem)/1.15 system-ui,sans-serif; letter-spacing: -.025em; text-shadow: none; }
.train-dialog-body p { margin: 0 0 6px; color: #ded3f4; line-height: 1.45; }
.train-dialog-body p:empty { display: none; }
.train-result { color: #ffd143; font-size: clamp(1.2rem,6vw,2rem); }
.train-primary {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 49px;
  padding: 10px 12px;
  border: 1px solid #22fcb086;
  border-radius: 12px;
  background: linear-gradient(110deg,#0aff9f,#00db57);
  box-shadow: 0 6px 22px #00ed8d44;
  color: #052a1f;
  font-size: .9rem;
  font-weight: 900;
  letter-spacing: .035em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}
.train-primary:hover { background: linear-gradient(110deg,#54ffbd,#23ef73); }
.train-dialog-body > .ghost { min-height: 44px; border-radius: 12px; text-transform: uppercase; }
.listen-coach {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: center;
  min-height: 44px;
  padding: 6px 12px 6px 8px;
  border: 1px solid #7699c85c;
  border-radius: 10px;
  background: #142338;
  color: #e3efff;
  font: 650 .85rem/1.2 "Segoe UI", system-ui, sans-serif;
}
.listen-coach svg { box-sizing: content-box; width: 17px; height: 17px; padding: 5px; border-radius: 6px; background: #22374f; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.listen-coach:hover { background: #20334d; }
.listen-coach[aria-pressed="true"] { border-color: #a9ff947d; color: #caffb6; }
.listen-coach[aria-pressed="true"] svg { background: #25463e; }
.listen-coach:focus-visible { outline: 2px solid #a9ff94; outline-offset: 3px; }
.player-page { --player-nav-height: calc(84px + env(safe-area-inset-bottom,0px)); }
.player-page #app { min-height: 100svh; padding: 70px 16px calc(var(--player-nav-height) + 14px); }
.player-bar { position: absolute; inset: 0 0 auto; }
.player-bar-account { display: flex; align-items: center; gap: 10px; }
.player-balance {
  display: grid;
  gap: 2px;
  padding: 5px 9px;
  border: 1px solid #9bb9ff55;
  border-radius: 10px;
  background: #11192ef5;
  color: #dce7fa;
  text-align: right;
}
.player-balance span { font-size: .68rem; }
.player-balance strong { color: #a9ff94; font-size: .9rem; }
#open-withdrawal { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 44px; padding-inline: 9px; color: #bfff9f; background: #18352f; border-color: #a9ff9466; font-weight: 750; }
#open-withdrawal:hover { background: #25483d; border-color: #a9ff94; }
#open-withdrawal .player-icon { width: 16px; height: 16px; }
#withdrawal-dialog { max-width: 420px; background: linear-gradient(155deg,#172d40,#101a2a 65%); }
#withdrawal-status { color: #c2d4e9; font-size: .85rem; }
.withdrawal-rules { margin-top: 12px; border: 1px solid #7699c845; border-radius: 12px; background: #142339; }
.withdrawal-rules summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 8px 12px; border-radius: inherit; list-style: none; cursor: pointer; color: #edf5ff; font-size: .9rem; font-weight: 800; }
.withdrawal-rules summary::-webkit-details-marker { display: none; }
.withdrawal-rules summary:hover { background: #1c3048; }
.withdrawal-rules summary:focus-visible { outline: 2px solid #a9ff94; outline-offset: 2px; }
.withdrawal-rules summary .player-icon { width: 24px; height: 24px; flex: 0 0 24px; padding: 4px; border-radius: 6px; background: #223953; color: #b7ddf5; }
.withdrawal-rules[open] summary .player-icon { rotate: 90deg; }
.withdrawal-rules dl { margin: 0; padding-inline: 12px; }
.withdrawal-rules dl > div { padding: 9px 0; border-top: 1px solid #7699c833; }
.withdrawal-rules dt { color: #eef5ff; font-size: .8rem; font-weight: 800; }
.withdrawal-rules dd { margin: 3px 0 0; color: #bdcde3; font-size: .81rem; line-height: 1.45; }
.withdrawal-rules dd strong { color: #d4ffbe; }
#withdrawal-form { display: grid; gap: 10px; }
#withdrawal-dialog .deposit-balance-split dt { color: #c8d8eb; font-weight: 500; }
#withdrawal-dialog .deposit-balance-split dd { font-weight: 650; }
#withdrawal-available { color: #bfff9f; }
#withdrawal-status { line-height: 1.5; }
#withdrawal-pix > label { color: #dbe8f8; font-size: .84rem; font-weight: 600; }
#withdrawal-pix > label input { font: inherit; font-size: 1rem; font-weight: 500; }
#withdrawal-pix input[name="amount"] { color: #bfff9f; font-variant-numeric: tabular-nums; font-weight: 650; }
#withdrawal-pix { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
#withdrawal-pix legend { padding: 0; margin-bottom: 5px; font-size: 1rem; font-weight: 650; }
#withdrawal-pix p { margin: 0; color: #c2d4e9; font-size: .8rem; }
.withdrawal-key-types { display: flex; flex-wrap: wrap; gap: 6px; }
.withdrawal-key-types label { position: relative; color: #dbe8f8; font-size: .8rem; font-weight: 600; }
.withdrawal-key-types input { position: absolute; width: 1px; height: 1px; min-height: 0; opacity: 0; }
.withdrawal-key-types span { display: grid; place-items: center; min-height: 44px; padding: 4px 9px; border: 1px solid #7195bb66; border-radius: 9px; background: #101a2b; cursor: pointer; }
.withdrawal-key-types input:checked + span { border-color: #a9ff94; background: #233d3b; color: #d4ffbe; }
.withdrawal-key-types input:focus-visible + span { outline: 2px solid #a9ff94; outline-offset: 2px; }
#withdrawal-receipt { padding: 16px; text-align: center; border: 1px solid #8dff994d; border-radius: 16px; background: radial-gradient(ellipse at top,#234639,#101a2b 68%); }
#withdrawal-receipt h3 { margin: 10px 0 6px; }
#withdrawal-receipt h3:focus { outline: none; }
#withdrawal-receipt .withdrawal-test-label { margin: 12px 0 0; font-size: .74rem; font-weight: 700; }
#withdrawal-receipt p { color: #c2d4e9; font-size: .85rem; }
#withdrawal-receipt-amount { color: #bfff9f; font-size: clamp(1.65rem,7vw,2.35rem); }
.withdrawal-check { position: relative; display: grid; place-items: center; width: 54px; height: 54px; margin-inline: auto; border-radius: 50%; background: linear-gradient(135deg,#d9ff54,#69f29c); color: #13251b; }
.withdrawal-check svg { width: 25px; height: 25px; }
@media (prefers-reduced-motion: no-preference) {
  #withdrawal-receipt:not([hidden]) { animation: withdrawal-reveal 320ms ease-out both; }
  #withdrawal-receipt:not([hidden]) .withdrawal-check { animation: withdrawal-check-in 520ms cubic-bezier(.2,.75,.3,1) both; }
  #withdrawal-receipt:not([hidden]) .withdrawal-check::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid #a9ff94;
    border-radius: inherit;
    pointer-events: none;
    animation: withdrawal-ring 700ms 160ms ease-out both;
  }
  #withdrawal-receipt:not([hidden]) #withdrawal-receipt-amount { display: inline-block; animation: withdrawal-reveal 340ms 140ms ease-out both; }
}
@keyframes withdrawal-reveal {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes withdrawal-check-in {
  from { opacity: 0; transform: scale(.55); }
  65% { opacity: 1; transform: scale(1.12); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes withdrawal-ring {
  from { opacity: .65; transform: scale(1); }
  to { opacity: 0; transform: scale(1.6); }
}
.player-avatar {
  display: grid;
  flex: 0 0 39px;
  width: 39px;
  height: 39px;
  place-items: center;
  padding: 0;
  border: 1px solid #c29fff87;
  border-radius: 50%;
  color: white;
  background: linear-gradient(140deg,#8251ff,#00b7e6);
  font-weight: 900;
}
.player-card {
  width: min(100%,600px);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #89a7d459;
  border-radius: 22px;
  background: #121d32;
  box-shadow: 0 20px 70px #070b22ae;
}
.player-banner { min-height: clamp(120px,19svh,176px); padding: clamp(16px,3vw,27px); border-bottom: 1px solid #89a7d449; }
.player-banner img { right: -1%; bottom: -12%; width: 47%; height: 113%; object-position: center bottom; }
.player-banner h1 { margin-top: 7px; font-size: clamp(1.45rem,4.8vw,2.45rem); text-shadow: 0 3px 8px #070b22; text-transform: uppercase; }
.player-card-body { display: grid; gap: 13px; padding: clamp(13px,2.8vw,23px); }
.player-entry {
  grid-template-columns: minmax(0,1fr);
  gap: 11px;
  margin: 0;
}
.player-setup { display: grid; gap: 10px; min-width: 0; }
.player-setup-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.player-setup-heading h2 { margin: 0; color: #f1f7ff; font-size: clamp(.9rem,3.8vw,1.1rem); line-height: 1.2; }
.player-levels {
  min-inline-size: 0;
  margin: 0;
  padding: 14px;
  border: 1px solid #7c96c948;
  border-radius: 14px;
  background: linear-gradient(112deg,#172c3b,#101a2d 75%);
}
.player-level-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; }
.player-level-heading span { color: #b9cce1; font: 500 .8rem/1.35 system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.player-level-heading span:first-child { color: #e5f4ff; font-weight: 650; }
.player-level-selection { margin-top: 11px; }
.player-level-selection strong { color: #f1f7ff; font-size: 1.25rem; line-height: 1.2; }
.player-level-selection dl { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 5px; margin: 9px 0 0; }
.player-level-selection dl > div { padding: 7px 5px; border-radius: 7px; background: #0f1a2d; text-align: center; }
.player-level-selection dt { color: #bfd1e8; font-size: .72rem; line-height: 1.25; }
.player-level-selection dd { margin: 4px 0 0; color: #edf5ff; font-weight: 750; font-variant-numeric: tabular-nums; }
.player-level-options { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); margin: 5px -8px 2px; }
.player-level-options label { position: relative; display: grid; justify-items: center; align-content: start; gap: 5px; min-height: 54px; padding-top: 4px; cursor: pointer; }
.player-level-stop-name { color: #d2e0f1; font: 500 clamp(.69rem, 3vw, .8rem)/1.25 system-ui, sans-serif; text-align: center; }
.player-level-options input:checked ~ .player-level-stop-name { color: #bfff9f; font-weight: 650; }
.player-level-options label:not(:first-child)::before {
  position: absolute;
  top: 17px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: #354760;
  content: "";
  pointer-events: none;
}
.player-level-options label.is-reached::before { background: #6eba97; }
.player-level-options label.is-locked { cursor: default; }
.player-level-options input { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; }
.player-level-marker {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid #47617c;
  border-radius: 50%;
  background: #152237;
  color: #a6b7cf;
  font-size: .8rem;
  font-weight: 850;
}
.player-level-marker .player-icon { width: 14px; height: 14px; }
.is-reached .player-level-marker { background: #223c3b; color: #a9ff94; }
.player-level-options input:checked + span { color: #15281f; border-color: #bdffa5; background: #a9ff94; box-shadow: 0 0 0 3px #a9ff942b; }
.player-level-options input:focus-visible + span { outline: 2px solid #dce7fb; outline-offset: 4px; }
.player-level-progress { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid #7699c83b; color: #b9cce1; font-size: .8rem; line-height: 1.45; }
.player-level-progress strong { color: #e9f3ff; }
.player-race-action { position: relative; min-height: 51px; padding-inline: 33px; }
.player-race-action::after {
  position: absolute;
  inset: 0 13px 0 auto;
  display: grid;
  align-items: center;
  content: "→" / "";
  font-size: 1.12rem;
}
.player-shortcuts {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px solid #89a7d42b;
}
.player-shortcuts > * {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 4px clamp(4px,1.4vw,9px);
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #dbe9fb;
  text-align: left;
  text-decoration: none;
}
.player-shortcuts > *:hover { background: #1d2b42; color: #fff; }
.player-shortcuts > *:focus-visible { outline: 2px solid #a9ff94; outline-offset: 2px; }
.player-shortcuts .player-icon { width: 18px; height: 18px; flex: 0 0 18px; color: #a8e3e6; }
.player-shortcuts .player-level-trigger:is(:hover,:focus-visible,[aria-expanded="true"]) { background: #1b2b40; color: #fff; }
.player-level-trigger:is(:hover,:focus-visible) .player-icon { color: #c1f5ee; }
.player-shortcuts .player-missions .player-icon { color: #c2b5fb; }
.player-shortcuts strong, .player-shortcuts small { display: block; }
.player-shortcuts strong { font-size: .8rem; line-height: 1.2; }
.player-shortcuts small { margin-top: 2px; color: #b6c7e3; font-size: .68rem; line-height: 1.2; }
.player-deposit legend {
  color: #dce7fa;
  font-size: .8rem;
  font-weight: 750;
}
.player-amounts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.player-amounts button, .player-amounts label span {
  display: grid;
  min-height: 44px;
  place-items: center;
  padding: 5px;
  border: 1px solid #9bb9ff55;
  border-radius: 9px;
  background: #10192e;
  color: #eaf2ff;
  font-size: .82rem;
  font-weight: 750;
  cursor: pointer;
}
.player-amounts button[aria-pressed="true"], .player-amounts input:checked + span {
  border-color: #a9ff94;
  background: #233d3b;
  color: #c9ffb5;
}
.player-entry-input { position: relative; display: flex; flex: 0 1 106px; align-items: center; gap: 5px; padding-left: 9px; border: 1px solid #9bb9ff55; border-radius: 9px; background: #10192e; color: #c4d2e9; }
.player-entry-input input { min-width: 0; min-height: 42px; padding: 6px 7px 6px 0; border: 0; background: transparent; font-size: 1rem; }
.player-entry-input input[type="number"] { appearance: textfield; }
.player-entry-input input::-webkit-inner-spin-button,
.player-entry-input input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.player-entry-input input:focus-visible { outline: none; }
.player-entry-input:focus-within { border-color: #a9ff94; }
.deposit-content > p { margin: 0 0 12px; color: #b7c9df; font-size: .85rem; line-height: 1.45; }
.player-deposit fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.player-deposit legend { margin-bottom: 8px; }
.player-deposit .player-amounts button { font-size: clamp(.72rem,3vw,.85rem); }
.player-deposit .player-amounts button:focus-visible { outline-color: #a9ff94; }
.player-deposit .deposit-custom { margin: 13px 0 6px; color: #e6f0fd; font-size: .8rem; font-weight: 750; }
.player-deposit .player-entry-input:has([aria-invalid="true"]) { border-color: #ffadba; }
#deposit-limits { display: block; margin-top: 5px; color: #b7c9df; font-size: .72rem; }
.deposit-balance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding: 10px 12px;
  border: 1px solid #7cfdbe52;
  border-radius: 11px;
  background: #142c38;
  color: #dbe9fb;
  font-size: .8rem;
}
.deposit-balance .player-icon { width: 18px; height: 18px; color: #a8e3e6; }
.deposit-balance strong { margin-left: auto; color: #bfff9f; font-size: .95rem; font-variant-numeric: tabular-nums; }
.deposit-balance-split { display: grid; gap: 6px; margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: #152339; }
.deposit-balance-split div { display: flex; justify-content: space-between; gap: 8px; font-size: .8rem; }
.deposit-balance-split dd { margin: 0; font-weight: 750; font-variant-numeric: tabular-nums; }
#deposit-bonus-balance { color: #bfff9f; }
.deposit-alert {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid #ff6b8a52;
  border-radius: 11px;
  background: #3a1726;
  color: #ffd7e0;
  font-size: .82rem;
  line-height: 1.4;
}
.deposit-alert[hidden] { display: none; }
.deposit-alert .player-icon { flex: none; width: 18px; height: 18px; margin-top: 1px; color: #ff93ac; }
.deposit-alert p { margin: 0; }
.player-welcome { margin: 0; color: #eee4ff; font-size: .94rem; }
.player-resume-info { margin-bottom: 12px; padding: 12px 14px; border: 1px solid #7699c845; border-radius: 12px; background: #172a40; }
.player-resume-info h2 { margin: 0 0 4px; font-size: 1rem; }
.player-resume-info time { font-weight: 750; color: #b8e9fa; }
.player-mode { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 5px 12px; padding: 10px 12px; border: 1px solid #7cfdbe52; border-radius: 12px; background: #142c38; }
.player-mode span, .player-mode small { display: block; }
.player-mode strong { color: #a9ff94; font-size: clamp(1.05rem,4vw,1.35rem); font-variant-numeric: tabular-nums; white-space: nowrap; }
.player-mode span { color: #eef5ff; font-size: .8rem; font-weight: 750; }
.player-mode small { margin-top: 3px; color: #b9cce1; font-size: .7rem; }
.player-nav {
  position: fixed;
  z-index: 2;
  inset: auto 0 0;
  display: flex;
  justify-content: center;
  gap: clamp(4px,1.5vw,8px);
  height: var(--player-nav-height);
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom,0px));
  border-top: 1px solid #9bb9ff55;
  background: #11192ef5;
}
.player-nav > * { display: grid; place-content: center; justify-items: center; gap: 3px; flex: 0 1 85px; min-width: 0; padding: 4px; border: 1px solid transparent; border-radius: 9px; color: #dce7fa; background: transparent; text-align: center; text-decoration: none; font-size: .75rem; font-weight: 750; line-height: 1.1; }
.player-nav .player-icon { width: 20px; height: 20px; color: #a4c5f4; }
.player-nav :is(a,button):hover { background: #25334e; }
.player-nav [aria-current] { border-color: #a9ff9452; color: #c9ffb5; background: #233d3b; }
.player-nav [aria-current] .player-icon { color: inherit; }
.player-nav :is(a,button):focus-visible { outline: 2px solid #a9ff94; outline-offset: 2px; }
.player-dock {
  inset: auto 0 calc(10px + env(safe-area-inset-bottom,0px));
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 3px;
  width: min(calc(100% - 20px),490px);
  height: 68px;
  margin-inline: auto;
  padding: 4px;
  border: 1px solid #7291be61;
  border-radius: 18px;
  background: #101a2a;
  box-shadow: 0 8px 30px #060913a6;
}
.player-dock > * { gap: 4px; min-height: 44px; padding: 2px; border-radius: 12px; font-size: clamp(.65rem,2.9vw,.77rem); }
.match-page { --player-nav-height: calc(84px + env(safe-area-inset-bottom,0px)); }
.match-page .player-dock { z-index: 3; }
.player-dock .player-nav-practice[aria-current="page"] { border-color: transparent; color: #dce7fa; background: transparent; }
.player-dock .player-icon { width: 21px; height: 21px; color: #b3c7e0; }
.player-dock .player-nav-play {
  border-color: #b5ff7e4d;
  background: linear-gradient(180deg,#253e36,#172b29);
  color: #dcffca;
}
.player-dock a.player-nav-play:hover { border-color: #b5ff7ea6; background: #29483a; }
.player-dock .player-nav-play .player-icon {
  width: 29px;
  height: 29px;
  padding: 4px;
  border: 1px solid #d9ffae;
  border-radius: 50%;
  background: linear-gradient(135deg,#e5ff81,#76eca0);
  box-shadow: 0 2px 8px #8ff87735;
  color: #142c21;
  fill: currentColor;
  stroke-width: 1.25;
}
.player-nav button[aria-expanded="true"] { border-color: #8fb0d887; background: #253953; color: #fff; }
.player-nav button[aria-expanded="true"] .player-icon { color: inherit; }
#player-entry-title { scroll-margin-top: 16px; }
.player-dialog { inset: 0 0 var(--player-nav-height); width: min(calc(100% - 24px),560px); max-height: calc(100dvh - var(--player-nav-height) - 24px); padding: 17px; background: #141722; }
.player-dialog::backdrop { backdrop-filter: blur(5px); }
.player-page .deposit-confirmation {
  width: min(calc(100% - 28px), 360px);
  padding: clamp(18px, 5vw, 28px);
  border: 1px solid #7cfdbe66;
  background: radial-gradient(ellipse at top, #1c413c, #101a2a 70%);
  color: #eef5ff;
  text-align: center;
}
.deposit-confirmation-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: linear-gradient(135deg,#d9ff54,#69f29c);
  color: #13251b;
}
.deposit-confirmation-icon svg { width: 28px; height: 28px; }
.deposit-confirmation h2 { margin: 0; font-size: 1.25rem; }
#deposit-added { margin: 6px 0; color: #bfff9f; font-size: clamp(1.55rem, 8vw, 2.2rem); font-weight: 850; font-variant-numeric: tabular-nums; }
#deposit-new-balance { margin: 0 0 18px; color: #c0d2e7; }
.deposit-confirmation .train-primary { width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .deposit-confirmation[open] .deposit-confirmation-icon { animation: deposit-confirmed 350ms ease-out both; }
}
@keyframes deposit-confirmed {
  from { opacity: 0; transform: scale(.65); }
  65% { opacity: 1; transform: scale(1.1); }
  to { transform: scale(1); }
}
.player-level-dialog { width: min(calc(100% - 24px),450px); }
.player-level-dialog > form { margin-top: 12px; }
.player-level-dialog .train-primary { width: 100%; }
.profile-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.profile-top h2 { margin: 0; }
.profile-top form { margin: 0; }
.profile-top button { border: 0; background: #782137; color: white; font-size: 1.15rem; }
.player-account-dialog {
  width: min(calc(100% - 24px),500px);
  padding: clamp(14px,4vw,22px);
  border: 1px solid var(--bw-dialog-border);
  background: #101a2b;
  color: var(--bw-dialog-text);
}
#player-profile-dialog, #player-deposit-dialog {
  overflow: hidden;
}
#player-profile-dialog[open], #player-deposit-dialog[open] {
  display: grid;
  grid-template-rows: auto minmax(0,1fr);
}
.profile-content, .deposit-content {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-inline-end: 5px;
}
.deposit-content { padding: 3px 6px 3px 2px; }
[data-player-avatar] img, #profile-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
[data-player-avatar], #profile-photo-preview { overflow: hidden; }
.profile-bio { margin: 6px 0 0; color: #dbe8f8; font-size: .82rem; white-space: pre-wrap; }
.profile-photo-editor {
  display: grid;
  grid-template-columns: clamp(52px, 13vw, 76px) minmax(0, 1fr);
  gap: clamp(10px, 3vw, 18px);
  align-items: center;
  padding: clamp(12px, 3vw, 18px);
  border: 1px solid #70bed148;
  border-radius: 14px;
  background: linear-gradient(115deg, #1a3547, #142339 72%);
}
#profile-photo-preview {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border: 2px solid #83e7f29c;
  border-radius: 22%;
  box-shadow: 0 0 0 4px #6fd3eb17;
}
.profile-photo-details strong { color: #edf5ff; }
.profile-photo-editor small { display: block; margin-top: 4px; color: #b7c9df; font-size: .76rem; }
.profile-photo-actions { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 10px; }
.profile-photo-actions button {
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid #75c9dc64;
  border-radius: 9px;
  background: #0e2032;
  color: #c2f4ff;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
}
.profile-photo-actions button:hover { background: #21445a; }
.profile-photo-actions button:focus-visible { outline: 2px solid #a9ff94; outline-offset: 2px; }
#profile-photo-remove { border-color: transparent; background: transparent; color: #ffadba; }
#profile-photo-remove:hover { background: #482537; }
.profile-password-form textarea,
#deposit-pending textarea {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #7699c864;
  border-radius: 8px;
  background: #101a2b;
  color: #edf5ff;
  font: inherit;
  resize: vertical;
}
#deposit-pending { display: flex; flex-direction: column; gap: 12px; padding: 3px 2px 6px; }
#deposit-pending textarea { min-height: 52px; }
.deposit-pix-summary { padding: 14px; border: 1px solid #79f5bf62; border-radius: 14px; background: linear-gradient(115deg,#123a3f,#15233a 70%); text-align: center; }
.deposit-pix-summary > span { color: #8cf4f5; font-size: .64rem; font-weight: 850; letter-spacing: .14em; }
.deposit-pix-summary strong { display: block; margin: 4px 0 6px; color: #c8ff9e; font-size: clamp(1.45rem,7vw,2rem); font-variant-numeric: tabular-nums; }
.deposit-pix-summary p { margin: 0 auto; max-width: 340px; color: #c5d8e9; font-size: .78rem; line-height: 1.42; }
.deposit-qr-frame { display: grid; justify-items: center; gap: 8px; padding: 11px; border: 1px solid #70eaf04a; border-radius: 16px; background: linear-gradient(135deg,#0c1a30,#14243c); box-shadow: inset 0 1px #d4ffff0d; }
.deposit-qr-frame > span { color: #a7c9e8; font-size: .62rem; font-weight: 800; letter-spacing: .12em; }
.deposit-pix-qr {
  display: grid;
  place-items: center;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 12px;
  border: 3px solid #e8ffdb;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 0 0 3px #50e8c628,0 9px 18px #02091673;
}
.deposit-pix-qr svg { width: min(100%, 168px); height: auto; display: block; }
.deposit-pix-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0;
  color: #d4ffbe;
  font-size: .85rem;
  font-weight: 700;
  text-align: center;
}
.deposit-pix-status .player-icon { width: 16px; height: 16px; flex: none; }
.deposit-copy-field { display: grid; gap: 6px; }
.deposit-copy-field .deposit-custom { margin: 0; }
.deposit-copy-field textarea { border-color: #75b6d676; background: #0b172a; color: #e7f6ff; font-size: .73rem; line-height: 1.35; }
.deposit-copy-button { min-height: 46px; border: 1px solid #b8ff83; border-radius: 10px; background: linear-gradient(110deg,#d8ff5f,#71eea2); color: #0d291c; font: inherit; font-size: .86rem; font-weight: 850; }
.deposit-copy-button:hover { filter: brightness(1.06); }
.deposit-cancel-button { min-height: 42px; border-color: #7192bd77; background: transparent; color: #c5d8ee; font-size: .78rem; }
.player-account-dialog .profile-top { gap: 10px; margin-bottom: 14px; }
.player-account-dialog .profile-top h2 { flex: 1; min-width: 0; }
.player-account-dialog .profile-top h2,
.match-result-body h2,
.player-dialog > h2 {
  font-size: var(--bw-dialog-title-size);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -.025em;
}
.player-account-dialog, .match-result-body { font-family: "Segoe UI", system-ui, sans-serif; }
.player-account-dialog :is(.train-primary,.auth-submit), .match-result-body .train-primary {
  font-family: inherit;
  font-size: .94rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: none;
}
.player-account-dialog .profile-top form { display: block; flex: 0 0 auto; }
.player-account-dialog .profile-top button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  padding: 0;
  border: 1px solid #89a7d455;
  border-radius: 12px;
  background: #1b293e;
  color: #dbe8f8;
}
.player-account-dialog .profile-top button[hidden] { display: none; }
.player-account-dialog .profile-top button .player-icon { width: 20px; height: 20px; }
.player-account-dialog .profile-top button:hover { background: #293b55; }
.profile-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid #78a5d043;
  border-radius: 14px;
  background: linear-gradient(112deg,#1b3446,#17263c 75%);
}
.profile-identity .player-avatar {
  flex-basis: 48px;
  width: 48px;
  height: 48px;
  border: 1px solid #91e7e269;
  border-radius: 14px;
  background: #214654;
  color: #c6fff5;
  font-size: 1.05rem;
}
.profile-identity div { min-width: 0; overflow-wrap: anywhere; }
.profile-kicker { display: block; margin: 0; color: #a9dbe9; font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.profile-identity strong { display: block; margin: 2px 0; font-size: 1.1rem; }
.profile-identity small { display: block; color: #b7c9df; font-size: .8rem; }
.profile-performance { margin: 15px 0; }
.profile-performance h3 { margin-bottom: 7px; }
.profile-stats {
  overflow: hidden;
  border: 1px solid #7699c845;
  border-radius: 12px;
  background: #17253a;
  color: #c5d7ee;
}
.profile-stats p { margin: 0; padding: 12px; font-size: .8rem; }
.profile-stats dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 0; }
.profile-stats dl > div { min-width: 0; padding: 10px 12px; }
.profile-stats dl > div:nth-child(even) { border-left: 1px solid #7699c845; }
.profile-stats dl > div:nth-child(n+3) { border-top: 1px solid #7699c845; }
.profile-stats dt { color: #b7c9df; font-size: .73rem; }
.profile-stats dd { margin: 4px 0 0; color: #f0f7ff; font-size: clamp(.95rem,4vw,1.18rem); font-weight: 850; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.profile-stats dl > div:nth-child(n+3) dd { color: #bfff9f; }
.profile-actions { display: grid; gap: 8px; }
.profile-action {
  display: grid;
  grid-template-columns: 36px minmax(0,1fr) 16px;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 9px 11px;
  border: 1px solid #7699c84d;
  border-radius: 11px;
  background: #142339;
  color: #e2edfc;
  text-align: left;
  cursor: pointer;
}
.profile-action:hover { border-color: #80b8d6; background: #1b3049; }
.profile-action:focus-visible, .player-account-dialog .profile-top button:focus-visible { outline-color: #a9ff94; }
.profile-action strong, .profile-action small { display: block; }
.profile-action strong { font-size: .85rem; }
.profile-action small { margin-top: 3px; color: #b7c9df; font-size: .73rem; line-height: 1.35; }
.profile-action > .player-icon:first-child { width: 36px; height: 36px; padding: 8px; border-radius: 9px; background: #21414e; color: #b4f4eb; }
.profile-action > .player-icon:last-child { width: 16px; height: 16px; color: #a5c8ec; }
.profile-view-intro { margin: 0 0 12px; color: #c5d7ee; font-size: .85rem; line-height: 1.45; }
.profile-password-form { padding: 13px; margin: 0; border: 1px solid #7699c845; border-radius: 12px; background: #142339; }
.profile-password-form input { min-height: 44px; border-color: #7699c864; background: #101a2b; }
.profile-password-form input:focus-visible { outline-color: #a9ff94; }
.profile-edit-form { display: grid; gap: 16px; padding: 0; border: 0; background: transparent; }
.profile-edit-form > label { display: grid; gap: 6px; color: #edf5ff; font-weight: 700; }
.profile-edit-form :is(input, textarea) { font-size: max(16px, 1rem); font-weight: 400; }
.profile-edit-form textarea:focus-visible { outline: 2px solid #a9ff94; outline-offset: 2px; }
.profile-field-label { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.profile-field-label small { color: #b7c9df; font-weight: 400; }
.profile-rounds { color: #c5d7ee; font-size: .83rem; }
.profile-rounds p, .profile-rounds ol { margin: 0; padding: 0; }
.profile-rounds ol { display: grid; gap: 7px; list-style: none; }
.profile-rounds li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; padding: 10px; border: 1px solid #7699c842; border-radius: 9px; background: #142339; }
.profile-rounds li > div:last-child { margin-left: auto; text-align: right; }
.profile-rounds li strong { color: #edf5ff; }
.profile-rounds li small { display: block; margin-top: 3px; }
.profile-status { margin: 0; color: #e0c8ff; font-size: .82rem; }
.profile-status:empty { display: none; }
.profile-logout {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  margin-top: 9px;
  padding: 5px 7px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #ffadba;
  font-size: .8rem;
}
.profile-logout .player-icon { width: 18px; height: 18px; flex: 0 0 18px; }
.profile-logout:hover { background: #352439; }
#profile-error:not(:empty) { margin-top: 7px; }
@media (max-width: 850px) {
  .training-page #app { padding-top: calc(64px + env(safe-area-inset-top)); }
  .train-top { padding-top: calc(10px + env(safe-area-inset-top)); }
  .train-hud { width: min(100%,360px); margin-bottom: 9px; }
  .train-stage { width: min(100%,360px,calc((100svh - 300px)*.6428)); min-width: min(100%,220px); }
  .train-coach { position: relative; inset: auto; width: 100%; min-height: 78px; grid-template-columns: 54px 1fr; align-items: center; gap: 6px; margin-top: 7px; padding: 7px; }
  .train-coach img { width: 54px; height: 60px; margin: 0; }
  .train-coach p { font-size: .77rem; }
  .train-coach .train-primary { min-height: 33px; padding-block: 4px; font-size: .73rem; }
}
@media (prefers-reduced-motion: reduce) { .train-ring { animation: none; } }
.training-page #app.immersive-play .train-stage {
  width: min(100%,440px,max(220px,calc((100dvh - 275px)*.6428)));
}

body.player-page {
  background: linear-gradient(160deg,#080e2482,#15102355),#090e26 url("/assets/race-win-arena.webp") center / cover fixed no-repeat;
}
.player-bar .player-brand img { display: block; width: min(34vw,155px); }
.player-page .player-banner {
  background: linear-gradient(90deg,#111a35e6,#101b3c2e),url("/assets/race-win-arena.webp") center / cover;
}
.player-page .train-primary, .match-result-body .train-primary { background: linear-gradient(112deg,#d9ff54,#69f29c); }

@media (max-width: 620px) {
  .player-page #app { display: grid; grid-template-columns: minmax(0, 1fr); align-content: safe center; min-height: 100dvh; }
  .player-banner { min-height: clamp(120px,16svh,144px); }
  .player-banner img { right: -5%; width: 56%; }
  .player-levels { padding-block: 11px; }
  .player-level-selection { margin-top: 6px; }
}
@media (max-width: 360px) {
  .player-banner h1 { font-size: 1.3rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .player-page:not(.player-return) .player-card { animation: player-arrive 380ms cubic-bezier(.2,.7,.3,1) both; }
  .player-page:not(.player-return) .player-banner img { animation: player-driver-arrive 550ms 70ms cubic-bezier(.2,.7,.3,1) both; }
  .player-page:not(.player-return) .player-banner::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(108deg,transparent 34%,#68e8fa32 50%,transparent 66%);
    animation: player-lights 850ms 120ms ease-out both;
    content: "";
    pointer-events: none;
  }
  .player-page .player-level-marker,
  .player-page .player-amounts button,
  .player-page .player-amounts label span {
    transition: transform 150ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease;
  }
  .player-page .player-level-options input:enabled:active + span,
  .player-page .player-amounts button:active,
  .player-page .player-amounts label:active input:enabled + span { transform: scale(.94); }
  .player-page .player-level-options input:checked + span { transform: scale(1.08); }
  .player-page .player-race-action { transition: transform 160ms ease, box-shadow 180ms ease; }
  .player-page .player-race-action:active { transform: scale(.98); }
  .player-page .player-race-action::after { transition: transform 160ms ease; }
  .player-page .player-race-action:is(:hover,:focus-visible)::after { transform: translateX(3px); }
  .player-page .player-dialog[open] { animation: player-arrive 230ms ease-out both; }
  .player-shortcuts > * { transition: background-color 240ms ease, color 240ms ease; }
  .player-shortcuts .player-icon { transition: transform 240ms cubic-bezier(.2,.7,.3,1), color 240ms ease; }
  .player-shortcuts > :is(:hover,:focus-visible) .player-icon { transform: translate(1px,-2px); }
  .player-shortcuts > :active .player-icon { transform: translateY(0); }
  .player-page .player-level-dialog[open] { animation: player-level-reveal 280ms cubic-bezier(.2,.7,.25,1) both; }
  .player-level-dialog[open]::backdrop { animation: player-level-backdrop 240ms ease-out both; }
}

@keyframes player-level-reveal {
  from { opacity: 0; transform: translateY(6px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes player-level-backdrop {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes player-arrive {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes player-driver-arrive {
  from { opacity: .35; transform: translateX(22px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes player-lights {
  from { opacity: 0; transform: translateX(-64%); }
  25% { opacity: 1; }
  to { opacity: 0; transform: translateX(64%); }
}