/* Paws Roller Derby: bright and bold, pink and gold on deep purple panels, big chunky buttons for thumbs. */
:root { --ink: #2b2160; --gold: #ffd166; --pink: #ff4d8d; --teal: #2ec4b6; --panel: rgba(36, 22, 84, 0.92); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #bfe3ff; color: #fff; font-family: Fredoka, system-ui, sans-serif; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; overscroll-behavior: none; }
canvas#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }
button { font: inherit; font-weight: 600; cursor: pointer; border: none; border-radius: 14px; padding: 10px 18px; background: var(--gold); color: var(--ink); touch-action: manipulation; }
button:disabled { opacity: 0.45; cursor: default; }
button.alt { background: rgba(255, 255, 255, 0.14); color: #fff; }
button.big { font-size: 22px; padding: 14px 26px; border-radius: 18px; box-shadow: 0 6px 0 rgba(0, 0, 0, 0.25); }

/* name tags over the skaters */
#tags { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.ntag { position: absolute; left: 0; top: 0; font-size: 13px; font-weight: 600; background: rgba(36, 22, 84, 0.75); border-radius: 9px; padding: 2px 8px; white-space: nowrap; transform-origin: 50% 100%; }
.ntag.me { background: rgba(255, 209, 102, 0.95); color: var(--ink); }
/* (while the big 3, 2, 1 is up it sits right where your own name is: your name steps aside for it) */
body:has(#big.show.count) .ntag.me { visibility: hidden; }
.ntag.npc span::after { content: ' 🤖'; font-size: 10px; }
.ntag .emo { position: absolute; left: 50%; bottom: 120%; translate: -50% 0; background: #fff; color: var(--ink); border-radius: 12px; padding: 3px 9px; font-size: 16px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); animation: pop 0.3s cubic-bezier(.2, 1.6, .4, 1); }

/* speed lines when boosting */
#speedlines { position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0; transition: opacity 0.3s;
  background: repeating-conic-gradient(from 0deg at 50% 55%, rgba(255, 255, 255, 0.0) 0deg 5deg, rgba(255, 255, 255, 0.22) 5deg 5.6deg);
  -webkit-mask: radial-gradient(circle at 50% 55%, transparent 0 34%, #000 70%); mask: radial-gradient(circle at 50% 55%, transparent 0 34%, #000 70%); animation: spin 1.2s linear infinite; }
body.fast #speedlines { opacity: 1; }
@keyframes spin { to { rotate: 3deg; } }

/* top bar */
#top { position: fixed; 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: 6; display: flex; align-items: flex-start; gap: 8px; pointer-events: none; }
#top > * { pointer-events: auto; }
.tb { display: flex; gap: 8px; flex: none; }
.round-btn { width: 44px; height: 44px; padding: 0; border-radius: 50%; background: var(--panel); color: #fff; font-size: 20px; border: 2px solid rgba(255, 255, 255, 0.2); }
#emotes { position: relative; } #emotes .list { position: absolute; top: 50px; left: 0; display: flex; flex-direction: column; gap: 4px; }
#emotes .list button { width: 44px; height: 44px; padding: 0; border-radius: 50%; font-size: 22px; background: var(--panel); border: 2px solid rgba(255, 255, 255, 0.2); }
/* Rosie Rollerpaws, the announcer */
#rosie { position: fixed; left: 50%; top: max(62px, calc(env(safe-area-inset-top) + 56px)); translate: -50% 0; max-width: min(520px, calc(100vw - 200px)); background: #fff; color: var(--ink); border: 3px solid var(--pink);
  border-radius: 18px; padding: 6px 14px; font-size: 16px; font-weight: 600; line-height: 1.25; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); display: flex; gap: 8px; align-items: center; transition: opacity 0.3s, translate 0.3s; pointer-events: none; z-index: 5; }
#rosie.off { opacity: 0; translate: -50% -10px; }
/* with the lobby (left) or the results (right) open, Rosie talks in the space next to it instead of behind it */
@media (min-width: 600px) {
  body:has(#lobby:not(.hidden)) #rosie { left: calc(50% + 196px); max-width: min(520px, calc(100vw - 416px)); }
  body:has(#over:not(.hidden)) #rosie { left: calc(50% - 196px); max-width: min(520px, calc(100vw - 416px)); }
}
#rosie .mic { font-size: 22px; }

/* the HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 4; }
#lapbox { position: fixed; left: 50%; top: max(8px, env(safe-area-inset-top)); translate: -50% 0; background: var(--panel); border: 2px solid rgba(255, 209, 102, 0.6); border-radius: 16px; padding: 4px 16px; text-align: center; }
#lap { font-size: 20px; font-weight: 700; color: var(--gold); } #time { font-size: 14px; opacity: 0.85; font-variant-numeric: tabular-nums; }
#placebox { position: fixed; right: max(8px, env(safe-area-inset-right)); top: max(8px, env(safe-area-inset-top)); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
#place { font-size: 46px; font-weight: 700; line-height: 1; color: #fff; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--pink); }
#place sup { font-size: 20px; } #place small { font-size: 20px; opacity: 0.9; }
#minimap { width: 150px; height: 115px; background: rgba(36, 22, 84, 0.55); border-radius: 14px; }
#speed { position: fixed; left: 50%; top: max(66px, calc(env(safe-area-inset-top) + 60px)); translate: -50% 0; width: 120px; height: 6px; border-radius: 4px; background: rgba(0, 0, 0, 0.2); overflow: hidden; display: none; }
#speed i { display: block; height: 100%; width: calc(var(--v, 0) * 100%); background: linear-gradient(90deg, var(--teal), var(--gold), var(--pink)); }
#hurry { position: fixed; left: 50%; top: max(70px, calc(env(safe-area-inset-top) + 64px)); translate: -50% 0; background: #ff4d6d; border-radius: 12px; padding: 3px 12px; font-size: 18px; font-weight: 700; animation: beat 0.5s ease-in-out infinite; }
@keyframes beat { 50% { scale: 1.1; } }
#big { position: fixed; left: 50%; top: 38%; translate: -50% -50%; z-index: 7; font-size: clamp(60px, 14vw, 140px); font-weight: 700; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill;
  text-shadow: 0 8px 0 var(--pink); pointer-events: none; opacity: 0; white-space: nowrap; }
#big.show { animation: bigpop 1.1s cubic-bezier(.2, 1.5, .4, 1) both; }
#big.go { color: #6dff8a; } #big.lap { color: var(--gold); font-size: clamp(44px, 9vw, 96px); } #big.win { color: var(--gold); }
#big.show.win, #big.show.lap { animation-duration: 2.2s; }
@keyframes bigpop { 0% { opacity: 0; scale: 0.3; } 15% { opacity: 1; scale: 1.1; } 25% { scale: 1; } 80% { opacity: 1; } 100% { opacity: 0; scale: 1.05; } }
#count { position: fixed; left: 50%; bottom: max(150px, calc(env(safe-area-inset-bottom) + 140px)); translate: -50% 0; z-index: 6; background: var(--panel); border-radius: 14px; padding: 8px 14px; font-size: 15px; text-align: center; width: max-content; max-width: calc(100vw - 24px); pointer-events: none; }
#wrong { position: fixed; left: 50%; top: 45%; translate: -50% -50%; z-index: 6; background: #ff4d6d; border: 3px solid #fff; border-radius: 18px; padding: 10px 18px; font-size: 24px; font-weight: 700; animation: beat 0.6s ease-in-out infinite; pointer-events: none; }
#netmsg { position: fixed; left: 50%; top: 45%; translate: -50% -50%; z-index: 9; background: var(--panel); border-radius: 14px; padding: 10px 16px; font-size: 18px; width: max-content; max-width: calc(100vw - 30px); text-align: center; }

/* touch controls: joystick zone on the left, move buttons on the right */
#controls { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
#joyzone { position: absolute; left: 0; bottom: 0; width: 55%; top: 120px; pointer-events: auto; touch-action: none; }
.joy-base { position: absolute; left: max(110px, calc(env(safe-area-inset-left) + 100px)); top: auto; bottom: max(30px, env(safe-area-inset-bottom)); width: 130px; height: 130px; margin: -65px 0 0 -65px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.22)); border: 3px solid rgba(255, 255, 255, 0.45); opacity: 0.45; pointer-events: none; transition: opacity 0.2s; }
.joy-base:not(.on) { bottom: max(30px, env(safe-area-inset-bottom)); margin: 0 0 0 -65px; }
.joy-base.on { opacity: 1; bottom: auto; transition: none; margin-top: var(--half, -65px) !important; }
.joy-knob { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #e6e0ff); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); }
#buttons { position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); width: 250px; height: 230px; pointer-events: none; }
.act { position: absolute; pointer-events: auto; border-radius: 50%; padding: 0; display: grid; place-items: center; align-content: center; color: #fff; font-size: 30px; line-height: 1; border: 4px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.25), 0 8px 20px rgba(0, 0, 0, 0.25); touch-action: none; transition: scale 0.08s; }
.act b { font-size: 12px; font-weight: 700; margin-top: 2px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.act.down { scale: 0.9; }
.act.jump { right: 0; bottom: 0; width: 100px; height: 100px; background: radial-gradient(circle at 35% 30%, #7dffb0, #1fb36b); font-size: 38px; }
.act.shove { right: 112px; bottom: 0; width: 80px; height: 80px; background: radial-gradient(circle at 35% 30%, #ff9ac0, #e63973); }
.act.shove::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; background: conic-gradient(transparent var(--cd, 360deg), rgba(20, 10, 50, 0.55) 0); pointer-events: none; }
.act.boost { right: 6px; bottom: 112px; width: 80px; height: 80px; background: radial-gradient(circle at 35% 30%, #9fefff, #2a9fd6); }
.act.off { filter: grayscale(0.7) brightness(0.8); }
#pips { position: absolute; bottom: -12px; left: 50%; translate: -50% 0; display: flex; gap: 4px; }
#pips i { width: 12px; height: 12px; border-radius: 50%; background: rgba(0, 0, 0, 0.35); border: 2px solid #fff; } #pips i.on { background: #7dfcff; box-shadow: 0 0 8px #7dfcff; }
.act.item { right: 110px; bottom: 98px; width: 76px; height: 76px; background: radial-gradient(circle at 35% 30%, #fff1a8, #ffb703); font-size: 36px; }
.act.item em { position: absolute; top: -26px; right: -10px; font-style: normal; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--panel); border-radius: 8px; padding: 2px 7px; }
.act.item em:empty { display: none; }
.act.item.empty { opacity: 0.55; filter: grayscale(0.6); }
.act.item.ready { animation: glow 0.9s ease-in-out infinite; }
.act.item.rolling span { animation: shake 0.1s linear infinite; }
@keyframes glow { 50% { box-shadow: 0 6px 0 rgba(0, 0, 0, 0.25), 0 0 26px 8px rgba(255, 209, 102, 0.9); scale: 1.06; } }
@keyframes shake { 50% { translate: 0 -3px; } }
@keyframes pop { from { scale: 0.6; opacity: 0; } }

/* windows: menu, lobby, results */
.panel { position: fixed; z-index: 8; background: var(--panel); border: 3px solid rgba(255, 209, 102, 0.6); border-radius: 24px; box-shadow: 0 16px 50px rgba(0, 0, 0, 0.45); }
#menu { left: 50%; top: 50%; translate: -50% -50%; width: min(480px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; padding: 22px; text-align: center; }
.logo { font-size: clamp(30px, 6.5vw, 50px); font-weight: 700; letter-spacing: 1px; margin: 0; line-height: 1.05;
  background: linear-gradient(180deg, #fff6c8, #ffd166 45%, #ff9f43); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 #e63973); }
.title { margin: 0; display: flex; align-items: center; justify-content: center; gap: 10px; }
.title .sk { font-size: clamp(30px, 6vw, 46px); display: inline-block; animation: roll 1.4s ease-in-out infinite; }
@keyframes roll { 50% { translate: 8px 0; rotate: 8deg; } }
.sub { margin: 8px 0 14px; opacity: 0.85; }
.levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 14px; }
.levels button { padding: 10px 4px; font-size: 28px; background: rgba(255, 255, 255, 0.12); color: #fff; border: 3px solid transparent; }
.levels button small { display: block; font-size: 13px; opacity: 0.9; font-weight: 600; }
.levels button.on { background: var(--gold); color: var(--ink); }
.levels.small button { font-size: 14px; padding: 7px 4px; margin: 0; }
.levels.small { margin: 4px 0; }
.note { font-size: 13px; opacity: 0.85; margin-top: 10px; line-height: 1.4; }
.msg { margin-top: 10px; font-size: 14px; color: var(--gold); min-height: 1em; }
a.home { color: rgba(255, 255, 255, 0.75); font-size: 14px; display: inline-block; margin-top: 12px; }
#lobby { left: max(12px, env(safe-area-inset-left)); top: 66px; bottom: 12px; width: min(380px, calc(100vw - 24px)); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
#lobby h2 { margin: 0; font-size: 22px; color: var(--gold); }
#lobby .scroll { overflow: auto; flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
#lobby h3 { margin: 4px 0 2px; font-size: 15px; opacity: 0.85; }
.seats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.seat { background: rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 4px 8px; font-size: 14px; display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 40px; }
.seat img { width: 30px; height: 30px; border-radius: 50%; background: #fff3c4; flex: none; } .seat .bi { width: 30px; text-align: center; font-size: 20px; }
.seat span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat.me { background: rgba(255, 209, 102, 0.25); } .seat.bot { opacity: 0.55; }
.pal { display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 6px 8px; }
.pal img { width: 34px; height: 34px; border-radius: 50%; background: #fff3c4; }
.pal .n { flex: 1; font-size: 14px; } .pal .n small { display: block; opacity: 0.7; font-size: 12px; }
.pal .dot { width: 10px; height: 10px; border-radius: 50%; background: #666; flex: none; } .pal .dot.on { background: #4cff7a; box-shadow: 0 0 8px #4cff7a; }
.pal button { padding: 6px 12px; font-size: 14px; }
.lobby-foot { display: flex; gap: 8px; } .lobby-foot button { flex: 1; }
#over { right: max(12px, env(safe-area-inset-right)); top: 50%; translate: 0 -50%; width: min(380px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; padding: 16px; animation: pop 0.4s cubic-bezier(.2, 1.5, .4, 1); }
#over h2 { margin: 0 0 8px; color: var(--gold); text-align: center; }
.results { display: flex; flex-direction: column; gap: 4px; }
.res { display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.08); border-radius: 10px; padding: 5px 10px; font-size: 15px; }
.res.me { background: rgba(255, 209, 102, 0.3); }
.res .pl { width: 34px; font-weight: 700; font-size: 18px; text-align: center; } .res .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .res .tm { font-variant-numeric: tabular-nums; opacity: 0.85; font-size: 13px; }
#over .row { display: flex; gap: 8px; margin-top: 12px; align-items: center; justify-content: center; flex-wrap: wrap; }
#over .big { font-size: 19px; padding: 11px 20px; }

#rotate { position: fixed; inset: auto 10px 10px 10px; z-index: 9; background: var(--panel); border-radius: 14px; padding: 8px 12px; font-size: 14px; text-align: center; display: none; }
@media (orientation: portrait) and (max-width: 600px) { body[data-phase='menu'] #rotate { display: block; } }

/* small screens (phones sideways): smaller HUD and buttons */
@media (max-height: 500px) {
  #place { font-size: 34px; } #minimap { width: 112px; height: 86px; } #lap { font-size: 16px; } #time { font-size: 12px; }
  #rosie { top: max(52px, calc(env(safe-area-inset-top) + 48px)); font-size: 13px; padding: 4px 10px; }
  #buttons { scale: 0.78; transform-origin: 100% 100%; }
  .joy-base { scale: 0.85; }
  #menu { padding: 12px 16px; } #menu .sub { margin: 4px 0 6px; font-size: 14px; } .levels { margin: 6px 0; } .levels button { padding: 6px 4px; font-size: 22px; }
  #menu .note { font-size: 12px; margin-top: 6px; } #menu .big { font-size: 18px; padding: 10px 22px; }
  #lobby { top: 58px; bottom: 8px; padding: 10px 12px; gap: 6px; } #lobby h2 { font-size: 18px; }
  /* (a phone held sideways: the lobby uses the width, in two columns, so the weather, laps and speed show too instead
     of hiding far down a small scroll box: Marcus's play-test, 2026-10-19) */
  @media (orientation: landscape) {
    #lobby { width: min(760px, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right))); }
    #lobby #lobby-body { display: grid; grid-template-columns: 1fr 1fr; align-content: start; column-gap: 14px; row-gap: 8px; }
    /* (the skaters list is further down: the bottom edge fades out, so a half-cut line reads as "scroll for more"
       instead of looking broken; the padding lets the last line come clear of the fade) */
    #lobby #lobby-body { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); padding-bottom: 24px; }
    body:has(#lobby:not(.hidden)) #rosie { display: none; }
    /* (still cut off on a phone, 2026-10-20's re-test: the second row of tracks, most of the weather, and laps and speed
       out of sight. So the tracks are one-line buttons, track and the computer skaters' speed go down the left, weather
       and laps down the right, and the track's about line and the empty message line take no room) */
    #lobby #lobby-body:has(.tracks) > div:has(> .tracks) { grid-area: 2 / 1; }
    #lobby #lobby-body:has(.tracks) > div:has(> .levels.small) { grid-area: 3 / 1; }
    #lobby #lobby-body > div:has(> .chiprow > [data-w]) { grid-area: 2 / 2; }
    #lobby #lobby-body > div:has(> .chiprow > [data-laps]) { grid-area: 3 / 2; }
    #lobby .gearbtn { margin: 0; padding: 5px 12px; font-size: 14px; }
    #lobby h3 { margin: 0 0 3px; font-size: 13px; }
    #lobby .tracks { gap: 4px; }
    #lobby .tracks button { flex-direction: row; justify-content: center; gap: 4px; padding: 3px 4px; }
    #lobby .tracks button span { font-size: 16px; } #lobby .tracks button small { font-size: 11.5px; }
    #lobby .tracks + .note { display: none; }
    #lobby .chiprow { gap: 4px; } #lobby .chiprow button { padding: 4px 7px; font-size: 12.5px; }
    #lobby .chiprow:has(> [data-w]) { display: grid; grid-template-columns: repeat(5, 1fr); } #lobby .chiprow > [data-w] { padding: 4px 2px; white-space: nowrap; }
    #lobby .levels.small { margin: 0; gap: 4px; } #lobby .levels.small button { padding: 4px; font-size: 13px; }
    #lobby-msg:empty { display: none; }
    /* (Safari sideways with its bars showing, about 340 tall: the panel starts at the top, its title beside the round buttons) */
    /* (bigger buttons for fingers, lane 4's report 2026-10-21: the tracks were 30 px tall and the laps 27. They grow to
       their neighbors' height for free (tracks beside the weather, laps beside the computer skaters' speed); on a
       390- to 440-tall phone the panel also starts at the top, its title beside the round buttons, and that room lets every
       choice be 44 px, the size a finger wants) */
    #lobby .tracks button { min-height: 33px; } #lobby .chiprow > [data-laps] { min-height: 35px; }
    @media (min-height: 361px) and (max-height: 440px) {
      #lobby .tracks button, #lobby .chiprow > [data-w], #lobby .chiprow > [data-laps], #lobby .levels.small button { min-height: 44px; }
    }
    @media (max-height: 440px) {
      #lobby { top: max(8px, env(safe-area-inset-top)); padding-top: 8px; }
      #lobby h2 { margin-left: 92px; min-height: 30px; display: flex; align-items: center; }
      body:has(#emotes:not(.hidden)) #lobby h2 { margin-left: 144px; }
      body:has(#lobby:not(.hidden)) #top { z-index: 9; } /* (the round buttons stay on top of the panel) */
    }
  }
  /* (one line of buttons, so the track and players above get the room) */
  .lobby-foot button { padding: 8px 10px; font-size: 16px; white-space: nowrap; }
  /* the countdown number and the race-info card would overlap on a short screen: number smaller and higher, card at
     the bottom between the joystick and the buttons */
  #big { top: 42%; font-size: min(24vh, 96px); } #big.lap { font-size: min(16vh, 64px); }
  #count { bottom: max(12px, env(safe-area-inset-bottom)); font-size: 13px; padding: 6px 12px; }
  /* race results on a phone: tighter rows, and Race again / Leave right under the title instead of below the fold */
  #over { padding: 10px 12px; display: flex; flex-direction: column; }
  #over h2 { order: -2; font-size: 20px; margin-bottom: 4px; } #over .row { order: -1; margin: 0 0 8px; }
  #over .big { font-size: 16px; padding: 8px 16px; } #over .note { font-size: 12px; margin-top: 6px; }
  .res { padding: 2px 10px; font-size: 13px; } .res .pl { font-size: 15px; }
}
/* phones upright: the buttons a bit smaller still */
@media (max-width: 500px) { #buttons { scale: 0.72; transform-origin: 100% 100%; } #rosie { max-width: calc(100vw - 24px); top: 120px; } #minimap { width: 100px; height: 78px; } }

/* ---- race settings (lobby), My racer (gear), graphics, wind, toast ---- */
.gearbtn { width: 100%; margin: 10px 0 2px; background: linear-gradient(90deg, #ff4d8d, #9b5de5); color: #fff; font-size: 17px; border-radius: 16px; padding: 11px 14px; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25); }
.tracks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tracks button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; background: rgba(255, 255, 255, 0.12); color: #fff; border: 3px solid transparent; font-size: 13px; line-height: 1.1; }
.tracks button small { font-size: 12px; } /* (the track names under each picture) */
.tracks button span { font-size: 26px; } .tracks button.on { background: var(--gold); color: var(--ink); }
.chiprow { display: flex; flex-wrap: wrap; gap: 5px; }
.chiprow button { padding: 6px 10px; font-size: 14px; background: rgba(255, 255, 255, 0.12); color: #fff; border: 2px solid transparent; border-radius: 12px; }
.chiprow button.on { background: var(--gold); color: var(--ink); }
/* (gear won by winning races, gear-wins.js: shown, but not yet yours) */
.chiprow button.locked { opacity: 0.7; border: 2px dashed rgba(255, 255, 255, 0.45); background: rgba(0, 0, 0, 0.18); }
.chiprow button.locked small { display: block; font-size: 11px; font-weight: 700; color: var(--gold); margin-top: 1px; }
.big-note { font-size: 16px; opacity: 1; background: rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 8px 10px; }
.gfx { margin-top: 10px; font-size: 13px; opacity: 0.9; display: flex; gap: 5px; justify-content: center; align-items: center; flex-wrap: wrap; }
.gfx button { padding: 4px 9px; font-size: 13px; background: rgba(255, 255, 255, 0.12); color: #fff; border-radius: 10px; } .gfx button.on { background: var(--gold); color: var(--ink); }
#gear { right: max(12px, env(safe-area-inset-right)); top: 66px; bottom: 12px; width: min(400px, calc(100vw - 24px)); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
#gear h2 { margin: 0; color: var(--gold); font-size: 22px; }
#gear .scroll { overflow: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; -webkit-overflow-scrolling: touch; }
.g-row b { display: block; font-size: 14px; opacity: 0.9; margin-bottom: 4px; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.swatches button { width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.35); }
.swatches button.on { border-color: #fff; box-shadow: 0 0 0 3px var(--gold); scale: 1.1; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; background: rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 8px 10px; font-size: 13px; }
.stats div { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .stats i { display: flex; gap: 3px; }
.stats em { width: 12px; height: 9px; border-radius: 3px; background: rgba(255, 255, 255, 0.18); } .stats em.on { background: #7dffb0; } .stats em.low { background: #ff6b8b; }
.num { display: flex; align-items: center; gap: 10px; } .num span { font-size: 24px; font-weight: 700; min-width: 40px; text-align: center; }
.num button { width: 40px; height: 40px; padding: 0; font-size: 22px; border-radius: 50%; }
.gear-foot { display: flex; gap: 8px; } .gear-foot .big { flex: 1; font-size: 19px; padding: 10px; }
#wind { position: fixed; left: 50%; top: max(8px, env(safe-area-inset-top)); translate: 72px 0; /* (beside the lap counter: under it, a long line from Rosie covered it. UAT, 2026-10-23) */ background: var(--panel); border-radius: 14px; padding: 4px 10px; display: flex; flex-direction: column; align-items: center; font-size: 11px; transition: background 0.3s; }
#wind small { font-size: 11px; }
#wind span { display: inline-block; font-size: 20px; color: #bfefff; transition: transform 0.3s; } #wind.gust { background: rgba(58, 134, 255, 0.85); }
#toast { position: fixed; left: 50%; bottom: max(140px, calc(env(safe-area-inset-bottom) + 130px)); translate: -50% 20px; z-index: 9; background: var(--panel); border: 2px solid var(--gold); border-radius: 14px; padding: 8px 14px; font-size: 15px; width: max-content; max-width: calc(100vw - 30px); text-align: center; opacity: 0; pointer-events: none; transition: opacity 0.3s, translate 0.3s; }
#toast.show { opacity: 1; translate: -50% 0; }
body[data-phase='race'] #gear { display: none; }
@media (max-height: 500px) { #gear { top: 56px; padding: 10px; } .tracks button span { font-size: 20px; } #wind { translate: 64px 0; padding: 2px 8px; } #wind span { font-size: 16px; } } /* (a phone held sideways: a little smaller, still beside the lap counter) */
@media (max-width: 700px) { #gear { top: auto; bottom: 8px; height: 58vh; } }

/* ---- the avatar customizer (the home page's, reused here: its own colors and buttons) ---- */
#av-modal { --ink: #1d3557; --muted: #6b7a90; --line: #e3eaf0; position: fixed; inset: 0; background: rgba(20,20,60,0.5); display: none; align-items: center; justify-content: center; padding: 12px; z-index: 20; color: var(--ink); }
#av-modal.open { display: flex; }
#av-modal .av-box { background: #fff; border-radius: 24px; width: min(940px, 100%); height: min(640px, calc(100vh - 24px)); display: grid; grid-template-columns: minmax(220px, 1fr) 1.25fr; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
#av-stage { background: radial-gradient(circle at 50% 38%, #fff6d8, #ffc2a0); min-height: 300px; position: relative; touch-action: none; cursor: grab; }
#av-stage .tip { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; color: #8a5a44; font-size: 13px; pointer-events: none; }
#av-stage canvas { position: absolute; inset: 0; }
#av-modal .av-side { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
#av-modal .av-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 18px 6px; -webkit-overflow-scrolling: touch; }
#av-modal .av-scroll h2 { margin: 0 0 6px; color: #e63946; }
#av-modal .av-row { margin: 10px 0; } #av-modal .av-row > b { display: block; font-size: 15px; margin-bottom: 5px; } #av-modal .muted { color: var(--muted); font-weight: 400; font-size: 12px; }
#av-modal .chips { display: flex; flex-wrap: wrap; gap: 6px; }
#av-modal .chip { font: inherit; font-size: 14px; font-weight: 600; border: 2px solid #e3eaf0; background: #fff; color: var(--ink); border-radius: 12px; padding: 5px 10px; cursor: pointer; }
#av-modal .chip.on { border-color: #2ec4b6; background: #e6f8f6; }
#av-modal .sw { width: 30px; height: 30px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px #d5dde6; cursor: pointer; padding: 0; }
#av-modal .sw.on { box-shadow: 0 0 0 3px #2ec4b6; transform: scale(1.12); }
#av-name { font: inherit; font-size: 18px; border: 2px solid #e3eaf0; border-radius: 12px; padding: 7px 12px; width: 100%; max-width: 280px; -webkit-user-select: text; user-select: text; }
#av-modal .av-foot { display: flex; gap: 8px; padding: 10px 18px 14px; border-top: 1px solid #eef2f6; flex-wrap: wrap; } #av-modal .grow { flex: 1; }
#av-modal .btn { font-weight: 700; font-size: 16px; border: 0; border-radius: 14px; padding: 9px 16px; cursor: pointer; background: #2ec4b6; color: #fff; box-shadow: none; }
#av-modal .btn.alt { background: #e3eaf0; color: var(--ink); } #av-modal .btn.pink { background: #ff5d8f; }
#av-modal .av-tabs { display: flex; gap: 6px; margin-bottom: 8px; } #av-modal .av-tabs button { flex: 1; font: inherit; font-weight: 700; font-size: 15px; border: 2px solid var(--line); background: #fff; color: var(--ink); border-radius: 12px; padding: 7px; cursor: pointer; }
#av-modal .av-tabs button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
#av-modal .chip.locked { opacity: .75; border-style: dashed; } #av-modal .chip i { font-style: normal; font-size: 11px; margin-left: 4px; } #av-modal .chip i.lock { color: #c0392b; }
#av-modal .sw.locked { opacity: .7; font-size: 11px; display: inline-grid; place-items: center; }
#av-modal .shop-head { background: linear-gradient(135deg, #fff6dc, #ffe1ef); border-radius: 14px; padding: 10px 12px; margin-bottom: 6px; }
#av-modal .shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
#av-modal .shop-item { font: inherit; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border: 2px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer; color: var(--ink); }
#av-modal .shop-item .nm { font-size: 13px; font-weight: 600; text-align: center; } #av-modal .shop-item .pr { font-size: 12px; color: #c2185b; font-weight: 700; }
#av-buy { display: flex; align-items: center; gap: 10px; padding: 8px 18px; background: #fff6dc; border-top: 1px solid #f3e2b0; flex-wrap: wrap; } #av-buy[hidden] { display: none; }
@media (max-width: 700px), (max-height: 520px) {
  #av-modal .av-box { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } #av-stage { min-height: 180px; height: 34vh; }
  @media (orientation: landscape) { #av-modal .av-box { grid-template-columns: 40% 1fr; grid-template-rows: none; } #av-stage { height: auto; } }
}