:root {
  color-scheme: dark;
  --bg: #061b29;
  --panel: #0a2d3b;
  --line: #285563;
  --yellow: #ffcf32;
  --mint: #36e3b8;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: #edf8ef;
  font:
    15px "Courier New",
    monospace;
}
button,
input,
select {
  font: inherit;
}
button,
a,
input,
select {
  touch-action: manipulation;
}
button {
  cursor: pointer;
  border: 2px solid #488093;
  border-bottom: 5px solid #04141d;
  background: #123f55;
  color: #fff;
  padding: 12px 16px;
  font-weight: bold;
  border-radius: 3px;
}
button:hover {
  filter: brightness(1.2);
}
button:disabled {
  opacity: 0.5;
  cursor: wait;
}
button.primary {
  background: var(--yellow);
  color: #10262c;
  border-color: #ffe77d;
  border-bottom-color: #9b6e0c;
}
button.danger {
  background: #9f354a;
}
input,
select {
  width: 100%;
  background: #041e2c;
  color: #fff;
  border: 1px solid var(--line);
  padding: 12px;
  margin: 7px 0 14px;
}
input[type="color"] {
  height: 48px;
}
label {
  display: block;
  color: #b3d3d6;
  font-size: 13px;
}
header {
  min-height: 74px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 15px 4vw;
  border-bottom: 2px solid var(--line);
  background: #061b29;
  position: relative;
  z-index: 2;
}
header a {
  color: #f3f4de;
  text-decoration: none;
  font-weight: bold;
  letter-spacing: -1px;
  font-size: 19px;
}
header strong {
  color: var(--yellow);
}
#account {
  margin-left: auto;
  font-size: 12px;
  color: var(--mint);
}
main {
  max-width: 1440px;
  margin: auto;
  padding: 28px 4vw;
}
h1 {
  font-size: clamp(30px, 4vw, 62px);
  line-height: 1.05;
  letter-spacing: -2px;
  margin: 15px 0;
}
h2 {
  font-size: 22px;
}
h3 {
  margin: 10px 0;
}
p {
  color: #adccd0;
  line-height: 1.7;
}
.eyebrow {
  color: var(--mint);
  font-size: 12px;
  letter-spacing: 3px;
}
.hero {
  min-height: 480px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  align-items: center;
  gap: 25px;
  padding: 40px;
  background:
    linear-gradient(90deg, #052431 0%, #052431f5 45%, #05243130 100%),
    url("assets/menu-reference.png") center/cover;
  border: 2px solid #397180;
  box-shadow: 8px 8px #00111a;
}
.hero p {
  max-width: 500px;
}
.hero .actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 480px;
}
.hero .actions button:first-child {
  grid-column: span 2;
  font-size: 22px;
  padding: 20px;
}
.badge {
  color: var(--yellow);
  border: 1px solid #847b38;
  padding: 7px 10px;
  width: fit-content;
  font-size: 12px;
  background: #10272ae0;
}
.card {
  padding: 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 4px 4px #03121b;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 22px;
}
.row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.between {
  justify-content: space-between;
}
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 22px 0;
}
.stats .card {
  padding: 16px;
}
.stats strong {
  display: block;
  font-size: 25px;
  color: var(--yellow);
  margin-top: 8px;
}
nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
nav button.active {
  color: var(--yellow);
  border-color: var(--yellow);
}
.auth {
  max-width: 470px;
  margin: 30px auto;
}
.muted,
small {
  color: #99b9c4;
  font-size: 12px;
  line-height: 1.7;
}
.track {
  height: 120px;
  width: 100%;
  background: #133b3b;
  image-rendering: pixelated;
}
.car-preview {
  height: 140px;
  width: 100%;
  image-rendering: pixelated;
}
.tag {
  font-size: 11px;
  background: #234b59;
  padding: 5px 9px;
  color: var(--mint);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
th,
td {
  text-align: left;
  padding: 13px 9px;
  border-bottom: 1px solid var(--line);
}
.scroll {
  overflow: auto;
}
.error {
  color: #ff8291;
}
.progress {
  height: 8px;
  background: #031e2c;
  margin-top: 12px;
}
.progress i {
  display: block;
  height: 100%;
  background: var(--mint);
}
#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 14px 24px;
  z-index: 20;
  background: #f9cf4c;
  color: #10202a;
  box-shadow: 4px 4px #0009;
  max-width: 90vw;
  display: none;
}
#race {
  padding: 12px;
  max-width: 1500px;
  margin: auto;
}
#raceHud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  min-height: 45px;
}
#canvasWrap {
  position: relative;
  text-align: center;
  background: #04131b;
}
#game {
  display: block;
  width: 100%;
  max-height: calc(100dvh - 240px);
  object-fit: contain;
  image-rendering: pixelated;
}
#raceOverlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
#raceOverlay .card {
  pointer-events: auto;
  max-height: 90%;
  overflow: auto;
  max-width: 90%;
  min-width: 250px;
  background: #062534ef;
}
#raceOverlay h1 {
  color: var(--yellow);
  font-size: 45px;
}
#controls {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 0;
  user-select: none;
}
#controls > div {
  display: flex;
  gap: 8px;
}
#controls button {
  min-height: 56px;
  min-width: 65px;
  touch-action: none;
}
#controls button.held {
  background: var(--mint);
  color: #031924;
}
#controls [data-key="nitro"] {
  color: var(--yellow);
}
[hidden] {
  display: none !important;
}
.footer {
  padding: 30px 0;
  color: #789fa8;
  font-size: 12px;
}
.car-icon {
  width: 70px;
  height: 120px;
  margin: 12px auto;
  background: var(--mint);
  border: 9px solid #061c29;
  outline: 4px solid #09212b;
  position: relative;
  box-shadow:
    -12px 16px #020e16,
    12px 16px #020e16;
}
.car-icon:before {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: 15px;
  height: 25px;
  background: #104a6a;
  border-bottom: 10px solid #f8dd75;
}
.car-icon:after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 15px;
  height: 20px;
  background: #104a6a;
}
@media (max-width: 700px) {
  header {
    gap: 8px;
    padding: 12px;
  }
  header a {
    font-size: 15px;
  }
  #account {
    font-size: 10px;
  }
  main {
    padding: 18px 14px;
  }
  .hero {
    grid-template-columns: 1fr;
    padding: 25px 20px;
    min-height: 470px;
    background-position: 60% center;
  }
  .hero aside {
    display: none;
  }
  .hero .actions {
    max-width: none;
  }
  .stats {
    gap: 7px;
  }
  .stats .card {
    padding: 10px;
    font-size: 11px;
  }
  .stats strong {
    font-size: 19px;
  }
  .card {
    padding: 17px;
  }
  #controls {
    gap: 3px;
  }
  #controls > div {
    gap: 4px;
  }
  #controls button {
    padding: 9px 7px;
    min-width: 40px;
    font-size: 10px;
    min-height: 58px;
  }
  #raceHud {
    font-size: 11px;
  }
  #raceHud button {
    font-size: 10px;
    padding: 8px;
  }
  #game {
    max-height: calc(100dvh - 250px);
  }
  nav button {
    font-size: 12px;
    padding: 10px;
  }
  th,
  td {
    padding: 10px 6px;
  }
  .grid {
    grid-template-columns: 1fr;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  header {
    display: none;
  }
  #game {
    max-height: calc(100dvh - 148px);
  }
  #controls {
    padding: 4px 0;
  }
  #controls button {
    min-height: 42px;
  }
  #raceHud {
    min-height: 30px;
  }
  #race > small {
    display: none;
  }
}

.icon {
  width: 22px;
  height: 22px;
  vertical-align: middle;
  shape-rendering: crispEdges;
}
.hero .featured {
  align-self: end;
  justify-self: end;
  background: #062c3cf5;
  max-width: 350px;
  margin: 0 -22px -22px 0;
}
.hero .featured h2 {
  color: var(--yellow);
  margin-bottom: 8px;
}
.hero .featured p {
  margin-top: 0;
}
/* Caribe Turbo RD 1.2 — responsive paddock and top-down race viewport */
:root{--bg:#071c25;--panel:#0c303b;--line:#285763;--yellow:#ffd35c;--mint:#5ce5bc}
body{background:radial-gradient(ellipse at 90% 0,#16473c66,transparent 55%),var(--bg);padding-bottom:80px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}
button{min-height:44px;transition:transform .12s,filter .12s}button:active{transform:translateY(2px)}
main{max-width:1480px}nav{flex-wrap:nowrap;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:thin}nav button{flex-shrink:0;white-space:nowrap}
.hero{min-height:460px;border-color:#45806e;background:linear-gradient(90deg,#071f2bef,#071f2b96 60%,#071f2b22),url('assets/menu-reference.png') center/cover;gap:40px}
.hero h1{font-size:clamp(40px,5vw,76px);letter-spacing:-3px}.hero p{font-family:system-ui,sans-serif;font-size:17px}
.hero .featured{align-self:center;justify-self:end;margin:0;width:100%;text-align:center;border-color:#a58e48;background:#092733ed}
.champion h2{overflow-wrap:anywhere}.trophy-art{font-size:70px;margin:18px 0;filter:drop-shadow(4px 5px #031c24)}
.track{display:block;height:auto;aspect-ratio:33/23;width:100%;object-fit:contain;border:3px solid #173b46}
.grid>.card{min-width:0}.card{border-top:2px solid #42766e}.card>h3{color:#fff1ba}.tag{display:inline-block}
.auth-layout{display:grid;grid-template-columns:1.1fr .9fr;max-width:1120px;min-height:650px;margin:20px auto;border:1px solid var(--line);box-shadow:10px 10px #03131b;background:#0a2732}
.auth-scene{padding:46px 38px;background:linear-gradient(#07222a80,#07222add),url('assets/menu-reference.png') center/cover;overflow:hidden}
.auth-scene h1{font-size:clamp(42px,5vw,72px);margin:30px 0 20px}.auth-scene em{font-style:normal;color:var(--yellow)}
.auth-scene p{color:#d2e9e3}.auth-track{margin:24px 0;border:3px solid #408b77;background:#082c32;box-shadow:6px 6px #03151a}
.auth-track span{display:block;padding:10px;color:var(--yellow);font-size:11px;letter-spacing:2px}.auth-track canvas{display:block;width:100%;aspect-ratio:33/23;image-rendering:pixelated}
.auth{margin:0;max-width:none;padding:48px 34px;box-shadow:none;background:#0b2c37;border:0;align-content:center}.auth h2{font-size:30px;letter-spacing:-1px}.auth p{font-family:system-ui,sans-serif}.auth form>.primary,.auth>#authToggle{width:100%}.auth-divider{margin:24px 0 12px;text-align:center;color:#aac6c9;font-size:12px}.auth>small{display:block;margin-top:20px;text-align:center}
.password-field{position:relative}.password-field input{padding-right:88px}.password-field button{position:absolute;right:5px;top:12px;min-height:32px;padding:4px 8px;font-size:10px;border:0;background:#194a57}
.garage-layout{display:grid;grid-template-columns:minmax(290px,.8fr) 1.5fr;gap:24px;margin-top:28px}.garage-stage{align-self:start;position:sticky;top:14px;background:repeating-linear-gradient(90deg,#092631 0 39px,#0e313a 40px 41px)}
.car-preview{height:auto;aspect-ratio:12/7;background:radial-gradient(ellipse,#34605e99,transparent 70%);width:100%;object-fit:contain}
.parts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}.part{padding:18px}.part p{font-size:13px}.part button{width:100%;font-size:12px}.specs{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:24px 0}.specs span{font-size:11px}.specs b{float:right;color:var(--yellow)}.specs .progress{margin-top:7px}.paint-label{margin-top:22px}
#radioDock{position:fixed;bottom:12px;right:18px;z-index:22;width:min(390px,calc(100vw - 24px));background:#082632;border:2px solid #3c706c;box-shadow:4px 4px #0007}
#radioDock summary{cursor:pointer;padding:12px 16px;min-height:44px;list-style:none;font-weight:bold;color:var(--yellow)}#radioBadge{float:right;font-size:10px;color:var(--mint);padding-top:3px}.radio-panel{padding:4px 16px 14px;border-top:1px solid var(--line)}.radio-panel p{font-size:12px}.radio-panel a{color:var(--mint);font-size:12px}.radio-panel input[type=range]{padding:0;margin:12px 0;accent-color:var(--mint)}
body.racing{padding-bottom:0;overflow:hidden}body.racing>header{display:none}body.racing #radioDock{bottom:8px;right:8px;width:190px}body.racing #radioDock details[open]{width:min(350px,calc(100vw - 16px));position:absolute;right:0;bottom:0;background:#082632;border:2px solid var(--line)}body.racing #radioDock summary{font-size:11px;padding:8px;min-height:32px}body.racing #radioBadge{font-size:8px}
#race{max-width:none;height:100dvh;padding:8px max(8px,env(safe-area-inset-right)) max(44px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));grid-template-rows:auto auto minmax(0,1fr) auto auto;gap:6px;display:grid}
#raceHud{margin:0;min-height:36px;flex-wrap:wrap}#raceInfo{flex:1;font-size:12px;min-width:180px}#raceHud button{font-size:10px;padding:7px 10px;min-height:34px}
#canvasWrap{min-height:0;overflow:hidden;border:2px solid #3b6b60;box-shadow:0 0 0 2px #021922}#game{width:100%;height:100%;max-height:none;object-fit:fill}
#telemetry{display:flex;gap:16px;align-items:center;background:#0c303b;border:1px solid var(--line);padding:8px 12px;font-size:20px}#telemetry small{font-size:10px}#telemetry b{color:var(--yellow)}.nitro-meter{margin-left:auto;width:100px;position:relative;background:#10232f;height:24px}.nitro-meter small{position:absolute;left:6px;top:3px;color:white;z-index:1}.nitro-meter i{display:block;height:100%;max-width:100%;background:#236d9d}
#controls{padding:0;gap:12px}#controls>div{gap:8px}#controls button{min-height:60px;min-width:72px}#controls [data-key=throttle]{background:#247a63;border-color:#63ddb3;min-width:90px}#controls [data-key=brake]{background:#823a4c;border-color:#d97887}#controls [data-key=nitro]{background:#274e87;border-color:#6799d7}#race>small{font-size:10px;line-height:1.2}#raceOverlay .card{min-width:min(300px,90%)}
@media(min-width:701px) and (max-width:1100px){.auth-layout{grid-template-columns:1fr 1fr}.auth-scene{padding:32px 22px}.auth{padding:30px 24px}.garage-layout{grid-template-columns:320px 1fr}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){header{flex-wrap:wrap}header a{font-size:16px}#account{order:3;width:100%;margin:0}#logout{margin-left:auto;padding:7px 12px;min-height:34px}.hero{min-height:0;gap:22px;padding:26px 20px;grid-template-columns:1fr}.hero h1{font-size:46px}.hero aside{display:block!important}.hero .featured{max-width:none;text-align:left;position:relative;padding:18px 80px 18px 18px}.champion h2{font-size:20px;margin:12px 0 5px}.champion p{font-size:13px}.trophy-art{position:absolute;right:15px;top:10px;font-size:44px}.champion button{font-size:10px;padding:8px}.auth-layout{display:flex;flex-direction:column;margin:0;min-height:0}.auth-scene{padding:24px}.auth-scene h1{font-size:42px;margin:18px 0}.auth-track{display:none}.auth-scene .badge{font-size:9px}.auth{padding:28px 22px}.auth h2{font-size:26px}.garage-layout{grid-template-columns:1fr}.garage-stage{position:static}.parts-grid{grid-template-columns:1fr}.stats .card{overflow-wrap:anywhere}.grid{grid-template-columns:1fr}#raceInfo{font-size:10px;min-width:140px}#raceHud{gap:4px}#raceHud button{padding:6px;font-size:9px}#telemetry{font-size:18px;padding:7px;gap:10px}#telemetry small{font-size:8px}.nitro-meter{width:65px}#controls{gap:5px}#controls>div{gap:4px}#controls button{min-width:42px;min-height:66px;padding:8px 6px;font-size:9px}#controls [data-key=throttle]{min-width:55px}#race>small{font-size:8px}}
@media(orientation:landscape) and (max-height:600px){#race{grid-template-columns:120px minmax(0,1fr) 120px;grid-template-rows:auto minmax(0,1fr);padding:5px 5px 36px;gap:4px}#raceHud{grid-column:1/-1;min-height:28px}#telemetry{grid-column:1;grid-row:2;flex-direction:column;justify-content:center;padding:6px;gap:10px}#telemetry .nitro-meter{margin:0;width:90px}#canvasWrap{grid-column:2;grid-row:2}#controls{grid-column:3;grid-row:2;display:flex;flex-direction:column;justify-content:center;padding:0}#controls>div{display:grid;grid-template-columns:1fr 1fr;gap:4px}#controls button,#controls [data-key=throttle]{min-width:0;min-height:44px;font-size:8px;padding:5px}#race>small{display:none}}
@media(prefers-reduced-motion:reduce){button{transition:none}}
.auth-scene{background:radial-gradient(circle at 85% 12%,#f5ce6e25 0 12%,transparent 12.2%),linear-gradient(150deg,#175243,#0b343c 60%,#082632)}
.trophy-art svg{width:70px;height:70px;fill:var(--yellow);color:var(--yellow);shape-rendering:crispEdges}
@media(max-width:700px){.trophy-art svg{width:44px;height:44px}}
/* PixelMotorFest 1.3 · image-inspired working main menu */
body.menu-screen{padding-bottom:0;background:#062630}body.menu-screen>header{display:none}body.menu-screen main{max-width:none;padding:0}body.menu-screen .footer{display:none}
.festival-menu{position:relative;isolation:isolate;min-height:max(720px,100dvh);padding:20px;background:linear-gradient(90deg,#001f3455,transparent 60%),url('assets/pixelmotorfest-menu.png') center/cover;image-rendering:auto;overflow:hidden}
.festival-menu:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#001a2eaa,transparent 35%);z-index:-1}
.menu-top{display:flex;justify-content:space-between;gap:15px;position:relative;z-index:2}.pilot-panel{display:flex;gap:14px;align-items:center;text-align:left;max-width:350px;background:#061f2de8;border:3px solid #3f6a7b;border-radius:8px;box-shadow:4px 4px #0008;padding:12px}.pilot-panel>div:last-child{min-width:0}.pilot-panel b{display:block;font-size:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pilot-panel small{display:block;color:#d0e5e7}.pilot-panel .progress{width:180px;height:10px;border:1px solid #87a3a6}.pilot-panel .progress i{background:var(--yellow)}
.avatar-pixel{border:3px solid #b2e1ee;background:#247393;width:64px;height:64px;display:grid;place-items:center;box-shadow:3px 3px #011826}.avatar-pixel svg{width:42px;height:42px;color:#f7d564}.menu-balances{display:flex;align-items:start;gap:10px}.menu-balances button{display:flex;align-items:center;gap:12px;background:#052231e8;border:3px solid #3f6a7b;border-radius:8px;font-size:20px}.menu-balances button>span{display:grid;place-items:center;width:30px;height:30px;background:#29a350;border:2px solid #9ceba9}.menu-balances svg{color:#ffdc51}
.festival-brand{position:absolute;top:11%;left:36%;text-align:center;transform:rotate(-4deg);text-shadow:4px 5px #031b2e,7px 7px #031b2e}.festival-brand>span{font-weight:bold;font-size:11px;letter-spacing:3px;color:#fff9cb}.festival-brand h1{margin:10px 0;font-size:clamp(52px,5.3vw,90px);line-height:.85;letter-spacing:-5px;color:#ffd94d;font-style:italic;-webkit-text-stroke:1px #f4b139;filter:drop-shadow(3px 4px #081c29)}.festival-brand h1>span{display:block;color:#e5f9ff;-webkit-text-stroke:1px #98c5ef;font-size:.85em}.festival-brand .brand-red{color:#ff5156;-webkit-text-stroke:1px #ff9b84}.festival-brand p{font-size:11px;letter-spacing:4px;color:#fff3bb;font-weight:bold}
.festival-buttons{position:absolute;left:24px;bottom:90px;width:clamp(310px,32vw,510px);display:grid;gap:12px}.festival-buttons button{display:flex;align-items:center;gap:20px;min-height:74px;padding:12px 22px;text-align:left;border:3px solid #98c4c8;border-radius:8px;background:linear-gradient(110deg,#174777,#174777 70%,#276195 70%,#174777 75%,#174777 80%,#276195 80%,#276195 85%,#174777 85%);box-shadow:5px 5px #001424aa;text-shadow:2px 2px #031b2a;font-size:clamp(18px,1.8vw,29px);letter-spacing:1px}.festival-buttons button span{flex:1}.festival-buttons button b{font-size:36px}.festival-buttons .icon{width:34px;height:34px;flex-shrink:0}.festival-buttons .play{background:linear-gradient(110deg,#ffe66a,#ffbd18);color:#071c28;text-shadow:none;border-color:#fff3a3;font-size:clamp(28px,3vw,44px);min-height:90px}.festival-buttons .garage{background:linear-gradient(110deg,#a5222c,#ce3735 80%,#8b202c);border-color:#f08b82}.festival-buttons .maps{background:linear-gradient(110deg,#076844,#108756 80%,#064d39);border-color:#5de1a3}.festival-buttons .settings{background:linear-gradient(110deg,#26343e,#4c5c63);border-color:#a2adb3}
.festival-champion{position:absolute;bottom:100px;right:24px;width:clamp(260px,28vw,410px);padding:20px 24px;border:3px solid #7eafbd;box-shadow:5px 5px #001520;background:#052332ef;border-radius:8px}.festival-champion>span{font-size:12px;font-weight:bold;color:var(--yellow)}.festival-champion h2{font-size:26px;margin:10px 0;overflow-wrap:anywhere}.festival-champion p{margin:0 0 12px}.festival-champion button{font-size:12px}.festival-shortcuts{position:absolute;bottom:22px;right:24px;display:flex;gap:8px}.festival-shortcuts button{background:#06232de8;font-size:12px;border-color:#658e95}
#radioDock,body.racing #radioDock{width:54px;right:16px;bottom:16px;border:0;background:transparent;box-shadow:none}#radioDock summary,body.racing #radioDock summary{display:flex;align-items:center;justify-content:center;width:54px;height:50px;border:3px solid #83b7c5;border-radius:8px;background:#082632;box-shadow:3px 3px #0008;padding:8px;min-height:0}#radioDock summary svg{width:28px;height:28px}#radioDock .radio-label,#radioDock #radioBadge{display:none}#radioDock details[open],body.racing #radioDock details[open]{position:absolute;right:0;bottom:0;width:min(370px,calc(100vw - 32px));background:#082632;border:2px solid #83b7c5;border-radius:8px}#radioDock details[open] summary,body.racing #radioDock details[open] summary{border:0;width:100%;justify-content:start;gap:10px;box-shadow:none}#radioDock details[open] .radio-label,#radioDock details[open] #radioBadge{display:block}#radioDock details[open] #radioBadge{margin-left:auto;font-size:9px}
#presence{display:flex;gap:8px;flex-wrap:wrap;font-size:10px;pointer-events:none}.pilot-presence{display:inline-flex;align-items:center;gap:5px;padding:4px 7px;background:#061c29d9;color:#c1e6dc;border:1px solid #447772}.pilot-presence i{width:6px;height:6px;background:#58e4a4}.pilot-presence.offline{color:#ff9e9e;border-color:#b76266}.pilot-presence.offline i{background:#f16a78}
#race{grid-template-rows:auto auto auto minmax(0,1fr) auto auto}#recover{color:#ffdf65}#controls svg{fill:currentColor;shape-rendering:crispEdges;width:26px;height:26px}#controls button{display:flex;flex-direction:column;align-items:center;justify-content:center}#controls small{font-size:8px;color:inherit;line-height:1.2;margin-top:3px}#controls [data-key=drift] span{font-size:24px;line-height:1}
@media(max-width:1100px),(pointer:coarse){
 #race{position:relative;display:block;padding:0;height:100dvh;overflow:hidden;background:#082333}
 #canvasWrap{position:absolute;inset:0;border:0;box-shadow:none}
 #raceHud{position:absolute;top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));z-index:4;align-items:start;gap:5px;justify-content:end}
 #raceInfo{background:#051d2cdd;padding:7px;border:1px solid #608894;font-size:10px;flex:1;min-width:140px}#raceHud button{background:#071d2ee8;font-size:9px;min-height:30px}
 #telemetry{position:absolute;z-index:3;top:78px;left:10px;display:grid;grid-template-columns:auto auto;gap:8px 12px;max-width:240px;background:#041e2ccf;border:2px solid #5c8793;padding:10px;font-size:25px;border-radius:7px}#telemetry .nitro-meter{margin:0;width:75px}#telemetry small{font-size:9px}
 #presence{position:absolute;z-index:4;top:46px;left:10px;right:10px;font-size:9px}
 #controls{position:absolute;inset:auto 14px max(18px,env(safe-area-inset-bottom));height:180px;z-index:5;display:flex;align-items:end;justify-content:space-between;pointer-events:none;gap:8px;padding:0}
 #controls button{pointer-events:auto;user-select:none;-webkit-user-select:none;touch-action:none;background:#061a2fcb;border:3px solid #a4c4cc;border-bottom-width:5px;box-shadow:3px 4px #03142288;color:#e5eff4;min-width:0;font-size:10px;backdrop-filter:blur(2px)}
 #steerPad{display:flex!important;align-items:end;gap:8px!important}#steerPad button{width:78px;height:78px;border-radius:14px}#steerPad svg{width:38px;height:38px}
 #pedalPad{position:relative;width:230px;height:180px;display:block!important}
 #controls [data-key=throttle]{position:absolute;right:0;bottom:0;width:116px;height:116px;min-width:0;border-radius:50%;background:radial-gradient(circle,#1a273aeb,#071626ed);border-width:5px;color:#fff}#controls [data-key=throttle] svg{width:42px;height:42px}#controls [data-key=throttle] small{font-size:10px;font-weight:bold}
 #controls [data-key=brake]{position:absolute;right:124px;bottom:0;width:76px;height:76px;min-width:0;border-radius:50%;background:#131c2de6;border-color:#9bb2bd}
 #controls [data-key=nitro]{position:absolute;right:100px;bottom:88px;width:64px;height:64px;min-width:0;border-radius:50%;background:#073356e6;border-color:#69d9ff;color:#49d9ff}
 #controls [data-key=drift]{position:absolute;right:0;bottom:128px;width:70px;height:42px;min-width:0;border-radius:9px;background:#112f3ee6}
 #controls button.held{background:#279e86f0;color:#fff;border-color:#b3ffe1}#race>small{display:none}
 body.racing #radioDock{right:10px;bottom:205px;z-index:8}body.racing #radioDock summary{height:42px;width:44px}
}
@media(max-width:700px){
 .festival-menu{min-height:max(840px,100dvh);padding:12px;background-position:60% center}.menu-top{gap:6px}.pilot-panel{padding:7px;gap:7px;max-width:55%;border-width:2px}.avatar-pixel{width:38px;height:42px;flex-shrink:0}.avatar-pixel svg{width:27px;height:27px}.pilot-panel b{font-size:13px}.pilot-panel small{font-size:9px}.pilot-panel .progress{width:100px;height:7px;margin-top:4px}.menu-balances{gap:5px;flex-wrap:wrap;justify-content:end}.menu-balances button{padding:7px;font-size:12px;gap:6px;min-height:38px;border-width:2px}.menu-balances button>span{width:20px;height:20px}.menu-balances button:last-child{display:none}
 .festival-brand{top:115px;left:0;right:0;transform:rotate(-3deg)}.festival-brand h1{font-size:62px;letter-spacing:-4px}.festival-brand>span{font-size:9px;letter-spacing:2px}.festival-brand p{font-size:9px;letter-spacing:3px}
 .festival-buttons{top:280px;bottom:auto;left:18px;right:18px;width:auto;gap:10px}.festival-buttons button{min-height:55px;font-size:20px;padding:8px 14px;gap:14px}.festival-buttons .play{min-height:68px;font-size:30px}.festival-buttons button .icon{width:28px;height:28px}.festival-buttons button b{font-size:28px}
 .festival-champion{bottom:100px;right:18px;left:18px;width:auto;padding:14px 18px}.festival-champion h2{font-size:20px;margin:7px 0}.festival-champion p{font-size:12px;margin:0 0 8px}.festival-champion button{font-size:10px;min-height:32px;padding:5px 8px}.festival-champion>span{font-size:10px}
 .festival-shortcuts{right:78px;left:18px;bottom:22px;flex-wrap:wrap;gap:6px}.festival-shortcuts button{font-size:9px;padding:6px;min-height:34px}
 #telemetry{top:108px;font-size:19px;gap:5px;padding:7px;max-width:210px}#presence{top:80px}#raceHud{flex-wrap:wrap;left:8px;right:8px}#raceInfo{flex-basis:100%;padding:5px;min-width:0}#raceHud button{font-size:8px;padding:5px}
 #controls{left:10px;right:10px;height:155px;bottom:max(14px,env(safe-area-inset-bottom))}#steerPad button{width:64px;height:68px}#steerPad svg{width:30px;height:30px}#pedalPad{width:190px;height:155px}#controls [data-key=throttle]{width:92px;height:98px}#controls [data-key=throttle] svg{width:32px;height:32px}#controls [data-key=throttle] small{font-size:8px}#controls [data-key=brake]{right:98px;width:62px;height:65px}#controls [data-key=nitro]{right:88px;bottom:75px;width:53px;height:55px}#controls [data-key=drift]{width:62px;height:38px;bottom:108px}#controls small{font-size:7px}#controls [data-key=drift] span{font-size:17px}body.racing #radioDock{bottom:177px}
}
@media(orientation:landscape) and (max-height:600px){
 .festival-menu{min-height:max(470px,100dvh)}.pilot-panel{padding:5px}.pilot-panel b{font-size:14px}.avatar-pixel{height:40px;width:40px}.festival-brand{top:85px;left:38%;right:0}.festival-brand h1{font-size:48px}.festival-buttons{top:112px;left:16px;bottom:auto;width:33%;gap:7px}.festival-buttons button{min-height:45px;font-size:15px;padding:5px 10px;gap:10px}.festival-buttons .play{min-height:55px;font-size:24px}.festival-buttons .icon{width:23px;height:23px}.festival-champion{right:18px;left:auto;width:34%;bottom:65px;padding:10px}.festival-champion h2{font-size:18px}.festival-champion p{font-size:11px}.festival-champion>span{font-size:10px}.festival-champion button{font-size:9px;padding:5px;min-height:30px}.festival-shortcuts{bottom:12px}
 #raceHud{top:5px;left:8px;right:8px;flex-wrap:nowrap}#raceInfo{flex-basis:auto;font-size:9px;max-width:50%}#raceHud button{font-size:8px;padding:5px}#presence{top:42px;max-width:60%}#telemetry{top:75px;font-size:20px;grid-template-columns:1fr;gap:5px;padding:7px;max-width:115px}#telemetry>span:nth-child(2){display:none}#controls{bottom:12px;height:150px;left:16px;right:16px}#steerPad button{width:70px;height:70px}#pedalPad{width:210px;height:150px}#controls [data-key=throttle]{width:100px;height:100px}#controls [data-key=brake]{right:110px;width:65px;height:65px}#controls [data-key=nitro]{right:92px;bottom:77px;width:58px;height:58px}#controls [data-key=drift]{bottom:111px;width:65px;height:34px}body.racing #radioDock{right:8px;bottom:172px}
}
@media(max-width:360px){#controls{left:8px;right:8px;gap:5px}#steerPad{gap:5px!important}#steerPad button{width:54px;height:60px}#pedalPad{width:164px}#controls [data-key=throttle]{width:82px;height:90px}#controls [data-key=brake]{right:87px;width:55px;height:59px}#controls [data-key=nitro]{right:78px;bottom:69px;width:49px;height:51px}.menu-balances button{font-size:10px}.pilot-panel .progress{width:80px}.festival-brand h1{font-size:54px}}
.festival-brand>span,.festival-brand p{text-shadow:1px 2px #001521}.festival-shortcuts{right:90px}
@media(max-width:700px){.festival-champion{bottom:74px}.festival-champion h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.festival-shortcuts{right:78px;flex-wrap:nowrap;gap:5px}.festival-shortcuts button{font-size:8px;padding:5px;letter-spacing:-.2px}}
@media(orientation:landscape) and (max-height:600px){.festival-champion{bottom:65px}}
body:not(.racing):not(.menu-screen)>header{display:flex}
#presence{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;pointer-events:auto;max-width:100%}.pilot-presence{white-space:nowrap;flex-shrink:0}body.racing #toast{bottom:auto;top:8px}
@media(max-width:1100px),(pointer:coarse){#controls button{min-height:0}}