@font-face { font-family: 'Baloo'; src: url('/fonts/baloo2-latin.woff2') format('woff2'); font-weight: 400 800; font-display: swap; }
:root {
  --ink: #24204a; --cream: #fff6e6; --sun: #ffcf2e; --tang: #ff8a2a; --berry: #ff5a8a; --sky: #5bc0f0; --leaf: #7ccb3a; --grape: #9b6bd8;
  --r: 18px; --edge: 3px;
  --sat: env(safe-area-inset-top); --sab: env(safe-area-inset-bottom); --sal: env(safe-area-inset-left); --sar: env(safe-area-inset-right);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--ink); color: var(--ink); font-family: 'Baloo', system-ui, sans-serif; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; overscroll-behavior: none; touch-action: none; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#ui { position: fixed; inset: 0; pointer-events: none; }
#topband { position: fixed; top: 0; left: 0; right: 0; height: 0; background: var(--ink); z-index: 50; }
@media (display-mode: standalone) and (orientation: portrait) { #topband { height: 12px; } }
.screen { position: absolute; inset: 0; display: none; pointer-events: auto; padding: calc(10px + var(--sat)) calc(14px + var(--sar)) calc(10px + var(--sab)) calc(14px + var(--sal)); }
.screen.show { display: flex; }
button { font-family: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
input, select { font-family: inherit; }

/* ---------- buttons: chunky pressable toy plastic ---------- */
.btn { pointer-events: auto; font-weight: 800; font-size: 19px; letter-spacing: 0.01em; padding: 10px 20px 8px; border-radius: 14px; background: var(--cream); border: var(--edge) solid var(--ink); box-shadow: 0 5px 0 var(--ink); transform: translateY(0); transition: transform .08s, box-shadow .08s, background .15s; line-height: 1.1; }
.btn:active, .btn.pressed { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.btn.big { font-size: 24px; padding: 14px 28px 11px; border-radius: 18px; background: var(--sun); }
.btn.go { background: var(--leaf); color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.btn.small { font-size: 15px; padding: 6px 12px 5px; border-radius: 11px; box-shadow: 0 4px 0 var(--ink); }
.btn.ghost { background: rgba(255,246,230,.82); }
.btn.focus, .card.focus, .tile.focus, .track-card.focus { outline: 4px solid #fff; outline-offset: 3px; }
.pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.06); } }

/* ---------- boot ---------- */
#boot { flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: radial-gradient(circle at 50% 40%, #3a3478, var(--ink)); color: var(--cream); }
.boot-logo { font-weight: 800; font-size: 54px; letter-spacing: .02em; transform: skewX(-8deg); }
.boot-logo .z { color: var(--sun); }
#boot .bar { width: min(320px, 70vw); height: 14px; border-radius: 10px; background: rgba(255,255,255,.12); overflow: hidden; border: 2px solid rgba(255,255,255,.25); }
#bootbar { display: block; height: 100%; width: 4%; background: linear-gradient(90deg, var(--sun), var(--tang)); border-radius: 10px; transition: width .25s; }
#bootmsg { margin: 0; opacity: .75; font-weight: 600; }

/* ---------- title ---------- */
#title { flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(180deg, rgba(36,32,74,0) 40%, rgba(36,32,74,.55)); }
.logo { margin: 0; display: flex; gap: .02em; font-weight: 800; font-size: clamp(64px, 17vmin, 150px); line-height: .9; transform: skewX(-9deg); filter: drop-shadow(0 8px 0 var(--ink)); }
.logo span { display: inline-block; color: var(--c); -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; animation: hop 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * .09s); }
@keyframes hop { 0%, 70%, 100% { transform: translateY(0) rotate(var(--rot)); } 80% { transform: translateY(-12%) rotate(var(--rot)); } }
.cup-line { margin: 4px 0 10px; color: #fff; font-weight: 700; font-size: 18px; text-shadow: 0 2px 0 var(--ink); }
.pad-line { margin: 8px 0 0; color: #fff; font-weight: 700; text-shadow: 0 2px 0 var(--ink); min-height: 1.3em; }

/* ---------- shared header ---------- */
.bar-top { position: absolute; top: calc(8px + var(--sat)); left: calc(14px + var(--sal)); right: calc(14px + var(--sar)); display: flex; align-items: center; justify-content: space-between; gap: 10px; z-index: 2; }
.bar-top h2 { margin: 0; color: #fff; font-size: 26px; font-weight: 800; text-shadow: 0 3px 0 var(--ink); }
.mini-logo { transform: skewX(-9deg); color: var(--sun) !important; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; font-size: 32px !important; }

/* ---------- main menu ---------- */
#menu { flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(36,32,74,.15), rgba(36,32,74,.55)); }
.menu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: min(900px, 100%); margin-top: 34px; }
.card { pointer-events: auto; text-align: left; border-radius: 22px; border: var(--edge) solid var(--ink); box-shadow: 0 7px 0 var(--ink); background: var(--cream); padding: 12px 14px 12px; display: flex; flex-direction: column; gap: 2px; transition: transform .1s, box-shadow .1s; }
.card:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--ink); }
.card b { font-size: 25px; font-weight: 800; line-height: 1.05; }
.card small { font-size: 14px; font-weight: 600; opacity: .75; }
.mode-art { height: clamp(70px, 22vh, 150px); border-radius: 14px; margin-bottom: 8px; border: 2px solid var(--ink); background-size: cover; background-position: center; position: relative; overflow: hidden; }
.gp-art { background: radial-gradient(circle at 70% 30%, #ffe27a, var(--sun) 35%, var(--tang)); }
.online-art { background: radial-gradient(circle at 30% 30%, #b8ecff, var(--sky) 40%, #3a7fd6); }
.single-art { background: radial-gradient(circle at 60% 40%, #d8ffb0, var(--leaf) 40%, #3f8f3a); }
.mode-art .stack { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; }
.mode-art .stack img { height: 104%; margin: 0 -9%; border-radius: 14px; filter: drop-shadow(0 4px 0 rgba(36,32,74,.35)); -webkit-mask-image: radial-gradient(ellipse 60% 62% at 50% 52%, #000 70%, transparent 72%); mask-image: radial-gradient(ellipse 60% 62% at 50% 52%, #000 70%, transparent 72%); }
.mode-art .stack img:nth-child(2) { height: 116%; z-index: 2; }
.mode-art .code-chip { position: absolute; right: 8px; top: 8px; background: var(--ink); color: #fff; font-weight: 800; font-size: 13px; border-radius: 9px; padding: 2px 8px; letter-spacing: .1em; z-index: 3; }
.pad-status { position: absolute; bottom: calc(10px + var(--sab)); color: #fff; font-weight: 700; text-shadow: 0 2px 0 var(--ink); margin: 0; }

/* ---------- character select ---------- */
#chars { align-items: center; justify-content: center; background: linear-gradient(90deg, rgba(36,32,74,.7) 0 52%, rgba(36,32,74,0) 75%); }
.chars-wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; width: min(980px, 100%); align-items: center; margin-top: 30px; }
.char-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tile { pointer-events: auto; aspect-ratio: 1; border-radius: 18px; border: var(--edge) solid var(--ink); background: var(--c); box-shadow: 0 5px 0 var(--ink); position: relative; overflow: hidden; padding: 0; transition: transform .12s; }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile span { position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; color: #fff; font-weight: 800; font-size: 15px; text-shadow: 0 2px 0 var(--ink), 0 0 6px rgba(0,0,0,.4); }
.tile.sel { transform: translateY(-4px) scale(1.04); outline: 4px solid #fff; outline-offset: 2px; }
.tile.taken::after { content: attr(data-taken); position: absolute; top: 4px; right: 4px; font-size: 11px; background: var(--ink); color: #fff; border-radius: 8px; padding: 1px 6px; }
.char-info { color: #fff; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; justify-self: end; text-shadow: 0 2px 0 var(--ink); }
.char-name { font-size: clamp(40px, 9vmin, 68px); font-weight: 800; line-height: .9; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; color: var(--c, #fff); transform: skewX(-8deg); }
.char-sub { font-weight: 700; font-size: 18px; opacity: .95; }
.char-blurb { margin: 0 0 6px; font-weight: 600; font-size: 16px; max-width: 280px; }
.stats { display: grid; grid-template-columns: auto 160px; gap: 4px 10px; font-weight: 700; font-size: 15px; align-items: center; }
.stats .meter { height: 12px; border-radius: 8px; background: rgba(255,255,255,.2); border: 2px solid var(--ink); overflow: hidden; }
.stats .meter i { display: block; height: 100%; background: var(--sun); border-radius: 6px; transition: width .25s; }

/* ---------- tracks ---------- */
#tracks { align-items: center; justify-content: center; background: rgba(36,32,74,.55); }
.track-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; width: min(1040px, 100%); margin-top: 34px; }
.track-card { pointer-events: auto; border-radius: 18px; border: var(--edge) solid var(--ink); background: var(--cream); box-shadow: 0 6px 0 var(--ink); overflow: hidden; padding: 0; text-align: left; }
.track-card .shot { aspect-ratio: 4/3; background: #8ac; background-size: cover; background-position: center; position: relative; }
.track-card .shot canvas { position: absolute; inset: 8%; width: 84%; height: 84%; }
.track-card b { display: block; font-size: 19px; font-weight: 800; padding: 6px 10px 0; }
.track-card small { display: block; font-size: 13px; font-weight: 600; opacity: .7; padding: 0 10px 8px; }

/* ---------- online + lobby ---------- */
#online { flex-direction: column; align-items: center; justify-content: center; background: rgba(36,32,74,.6); gap: 12px; }
.online-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: min(820px, 100%); margin-top: 28px; }
.panel { background: var(--cream); border: var(--edge) solid var(--ink); border-radius: 22px; box-shadow: 0 7px 0 var(--ink); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.panel h3 { margin: 0; font-size: 24px; } .panel p { margin: 0; font-weight: 600; opacity: .8; font-size: 15px; }
.code-row { display: flex; gap: 8px; }
#joinCode, #playerName, #setName { font-size: 26px; font-weight: 800; width: 150px; padding: 6px 12px; border-radius: 12px; border: var(--edge) solid var(--ink); background: #fff; text-transform: uppercase; letter-spacing: .18em; color: var(--ink); }
#playerName, #setName { text-transform: none; letter-spacing: 0; width: 200px; font-size: 20px; }
.name-row { display: flex; gap: 10px; align-items: center; color: #fff; font-weight: 700; text-shadow: 0 2px 0 var(--ink); }
.err { color: #d62f3a !important; opacity: 1 !important; min-height: 1.2em; }
#lobby { align-items: center; justify-content: center; background: rgba(36,32,74,.6); }
.code { background: var(--sun); color: var(--ink); padding: 0 12px; border-radius: 10px; border: var(--edge) solid var(--ink); letter-spacing: .12em; text-shadow: none; }
.lobby-wrap { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; width: min(940px, 100%); margin-top: 34px; align-items: start; }
.players { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.players li { display: flex; align-items: center; gap: 10px; background: var(--cream); border: var(--edge) solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--ink); padding: 6px 10px 6px 6px; font-weight: 800; font-size: 18px; }
.players li img { width: 46px; height: 46px; border-radius: 12px; border: 2px solid var(--ink); background: var(--c); }
.players li small { display: block; font-size: 12px; font-weight: 700; opacity: .6; }
.players li.off { opacity: .45; }
.players li.empty { background: rgba(255,246,230,.25); border-style: dashed; box-shadow: none; color: #fff; font-weight: 600; justify-content: center; min-height: 62px; }
.lobby-side { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.lobby-track { background: var(--cream); border: var(--edge) solid var(--ink); border-radius: 18px; padding: 8px 12px; font-weight: 800; font-size: 20px; box-shadow: 0 5px 0 var(--ink); }
.lobby-track small { display: block; font-size: 13px; opacity: .6; font-weight: 700; }
#hostControls { display: flex; flex-direction: column; gap: 10px; }
.toggle { color: #fff; font-weight: 700; text-shadow: 0 2px 0 var(--ink); display: flex; gap: 8px; align-items: center; }
.toggle input { width: 22px; height: 22px; }
.note { color: #fff; font-weight: 700; text-shadow: 0 2px 0 var(--ink); margin: 0; }
.net-status { color: #cfe; font-weight: 600; font-size: 13px; margin: 0; }

/* ---------- HUD ---------- */
.hud { pointer-events: none; display: none; }
.hud.show { display: block; }
.hud-tl { position: absolute; top: calc(10px + var(--sat)); left: calc(12px + var(--sal)); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.item-slot { width: 78px; height: 78px; border-radius: 22px; background: rgba(255,246,230,.92); border: 4px solid var(--ink); box-shadow: 0 5px 0 var(--ink); position: relative; display: grid; place-items: center; }
.item-slot.rolling .item-icon { animation: roll .09s steps(1) infinite; }
.item-icon { width: 58px; height: 58px; background-size: contain; background-repeat: no-repeat; background-position: center; }
.item-count { position: absolute; right: -8px; bottom: -8px; background: var(--berry); color: #fff; border: 3px solid var(--ink); border-radius: 12px; font-weight: 800; padding: 0 6px; font-size: 16px; display: none; }
.lap { color: #fff; font-weight: 800; font-size: 22px; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; letter-spacing: .02em; }
.lap b { font-size: 30px; }
.hud-tr { position: absolute; top: calc(10px + var(--sat)); right: calc(12px + var(--sar)); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.timer { color: #fff; font-weight: 800; font-size: 22px; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; font-variant-numeric: tabular-nums; }
#minimap { width: 128px; height: 128px; }
.hud-bl { position: absolute; left: calc(14px + var(--sal)); bottom: calc(10px + var(--sab)); }
.treats { display: flex; align-items: center; gap: 4px; color: #fff; font-weight: 800; font-size: 26px; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; }
.treat-ico { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe9a0, #ffc63a 45%, #c98a12); border: 3px solid var(--ink); display: inline-block; }
.treats.bump { animation: bump .25s; }
@keyframes bump { 50% { transform: scale(1.25); } }
.hud-br { position: absolute; right: calc(18px + var(--sar)); bottom: calc(6px + var(--sab)); }
.place { display: flex; align-items: flex-start; font-weight: 800; line-height: .8; transform: skewX(-9deg); }
.place b { font-size: 112px; -webkit-text-stroke: 9px var(--ink); paint-order: stroke fill; color: var(--pc, #fff); }
.place small { font-size: 40px; margin-top: 8px; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; color: var(--pc, #fff); }
.place.pop { animation: placepop .3s; }
@keyframes placepop { 40% { transform: skewX(-9deg) scale(1.2); } }
.center-msg { position: absolute; left: 0; right: 0; top: 28%; text-align: center; font-weight: 800; font-size: clamp(70px, 22vmin, 170px); color: #fff; -webkit-text-stroke: 10px var(--ink); paint-order: stroke fill; transform: skewX(-9deg); opacity: 0; }
.center-msg.show { animation: countpop .9s ease-out forwards; }
@keyframes countpop { 0% { opacity: 0; transform: skewX(-9deg) scale(2.2); } 15% { opacity: 1; transform: skewX(-9deg) scale(1); } 70% { opacity: 1; } 100% { opacity: 0; transform: skewX(-9deg) scale(.9); } }
.banner { position: absolute; left: 0; right: 0; top: 18%; text-align: center; font-weight: 800; font-size: clamp(34px, 9vmin, 64px); color: var(--bc, #fff); -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; transform: skewX(-9deg); opacity: 0; }
.banner.show { animation: banner 1.8s ease-out forwards; }
.banner.rainbow { background: linear-gradient(90deg, #ff5a5a, #ffcf2e, #7ccb3a, #5bc0f0, #9b6bd8); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes banner { 0% { opacity: 0; transform: skewX(-9deg) translateX(-40%); } 15% { opacity: 1; transform: skewX(-9deg) translateX(0); } 80% { opacity: 1; } 100% { opacity: 0; transform: skewX(-9deg) translateX(30%); } }
.speedlines { position: absolute; inset: 0; opacity: 0; transition: opacity .3s; background: repeating-conic-gradient(from 0deg at 50% 52%, rgba(255,255,255,0) 0deg 5deg, rgba(255,255,255,.22) 5.4deg 5.9deg, rgba(255,255,255,0) 6.3deg 11deg); -webkit-mask-image: radial-gradient(circle at 50% 52%, transparent 0 32%, #000 72%); mask-image: radial-gradient(circle at 50% 52%, transparent 0 32%, #000 72%); }
.speedlines.on { opacity: 1; animation: spin 0.5s linear infinite; }
@keyframes spin { to { transform: rotate(2deg); } }
.pause-btn { pointer-events: auto; position: absolute; top: calc(10px + var(--sat)); left: 50%; transform: translateX(-50%); width: 46px; height: 40px; border-radius: 12px; background: rgba(255,246,230,.85); border: 3px solid var(--ink); display: flex; gap: 6px; align-items: center; justify-content: center; }
.pause-btn i { width: 6px; height: 18px; background: var(--ink); border-radius: 3px; }
.touch { position: absolute; inset: 0; pointer-events: none; }
.hud.pad .touch { display: none; }
.steer-zone { pointer-events: auto; position: absolute; left: 0; top: 30%; bottom: 0; width: 50%; touch-action: none; }
.steer-knob { position: absolute; width: 88px; height: 88px; margin: -44px; border-radius: 50%; border: 4px solid rgba(255,255,255,.75); background: rgba(36,32,74,.25); display: none; }
.steer-knob::after { content: ''; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px; border-radius: 50%; background: rgba(255,255,255,.85); transform: translateX(var(--dx, 0px)); }
.steer-hint { position: absolute; left: calc(24px + var(--sal)); bottom: calc(96px + var(--sab)); color: rgba(255,255,255,.75); font-weight: 800; font-size: 15px; text-shadow: 0 2px 0 rgba(36,32,74,.6); }
.btn-zone { position: absolute; right: calc(14px + var(--sar)); bottom: calc(120px + var(--sab)); width: 230px; height: 190px; pointer-events: none; }
.tbtn { pointer-events: auto; position: absolute; border-radius: 50%; border: 4px solid var(--ink); box-shadow: 0 5px 0 var(--ink); font-weight: 800; color: #fff; text-shadow: 0 2px 0 var(--ink); touch-action: none; display: grid; place-items: center; font-size: 17px; }
.tbtn.drift { width: 112px; height: 112px; right: 0; bottom: 0; background: radial-gradient(circle at 35% 30%, #ffb0e8, var(--berry)); }
.tbtn.item { width: 84px; height: 84px; right: 120px; bottom: 62px; background: radial-gradient(circle at 35% 30%, #fff2a8, var(--sun)); color: var(--ink); text-shadow: none; }
.tbtn.brake { width: 66px; height: 66px; right: 128px; bottom: -6px; background: radial-gradient(circle at 35% 30%, #c8d4ff, #6a72b8); font-size: 13px; }
.tbtn.down { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }

/* first-race controls card */
.howto { position: absolute; left: 50%; bottom: calc(14px + var(--sab)); transform: translate(-50%, 140%); background: var(--cream); border: 4px solid var(--ink); border-radius: 20px; box-shadow: 0 6px 0 var(--ink); padding: 8px 16px; display: flex; gap: 14px; align-items: center; font-weight: 800; font-size: 15px; transition: transform .35s cubic-bezier(.2,1.4,.4,1); white-space: nowrap; }
.howto.show { transform: translate(-50%, 0); }
.howto span { display: flex; align-items: center; gap: 6px; }
.howto i { font-style: normal; display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 14px; background: var(--ink); color: #fff; font-size: 13px; }
.hud:not(.pad) .howto { bottom: auto; top: calc(96px + var(--sat)); }
@media (orientation: portrait) { .howto { flex-wrap: wrap; white-space: normal; width: 86vw; justify-content: center; gap: 8px 12px; } }

/* touch mode: the position badge moves up beside the item box, clear of the thumbs */
.hud:not(.pad) .hud-br { right: auto; bottom: auto; left: calc(104px + var(--sal)); top: calc(4px + var(--sat)); }
.hud:not(.pad) .place b { font-size: 76px; -webkit-text-stroke: 7px var(--ink); }
.hud:not(.pad) .place small { font-size: 30px; margin-top: 4px; -webkit-text-stroke: 5px var(--ink); }

/* ---------- modal / results ---------- */
.modal { align-items: center; justify-content: center; background: rgba(36,32,74,.55); }
.modal-card, .results-card, .podium-card { background: var(--cream); border: 4px solid var(--ink); border-radius: 26px; box-shadow: 0 9px 0 var(--ink); padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; align-items: stretch; min-width: 280px; }
.modal-card h2, .results-card h2, .podium-card h2 { margin: 0; font-size: 34px; text-align: center; transform: skewX(-8deg); }
#results, #podium { align-items: center; justify-content: center; background: rgba(36,32,74,.45); }
.results-card, .podium-card { width: min(640px, 100%); max-height: 100%; }
.results-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; overflow: auto; }
.results-list li { display: grid; grid-template-columns: 34px 40px 1fr auto auto; gap: 10px; align-items: center; background: #fff; border: 2px solid var(--ink); border-radius: 12px; padding: 2px 10px 2px 6px; font-weight: 800; font-size: 17px; opacity: 0; transform: translateX(-20px); animation: rowin .35s forwards; animation-delay: calc(var(--i) * .07s); }
.results-list li.me { background: var(--sun); }
.results-list li .pos { font-size: 22px; text-align: center; }
.results-list li img { width: 36px; height: 36px; border-radius: 9px; border: 2px solid var(--ink); background: var(--c); }
.results-list li .t { font-variant-numeric: tabular-nums; opacity: .7; font-size: 15px; }
.results-list li .pts { min-width: 46px; text-align: right; color: var(--berry); }
@keyframes rowin { to { opacity: 1; transform: none; } }
.results-actions { display: flex; justify-content: center; gap: 10px; }

/* ---------- settings ---------- */
#settings { align-items: center; justify-content: center; background: rgba(36,32,74,.7); }
.settings-list { width: min(720px, 100%); margin-top: 36px; background: var(--cream); border: 4px solid var(--ink); border-radius: 22px; box-shadow: 0 8px 0 var(--ink); padding: 10px 16px; display: flex; flex-direction: column; gap: 6px; max-height: calc(100% - 50px); overflow: auto; pointer-events: auto; touch-action: pan-y; }
.settings-list .row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 700; font-size: 17px; padding: 4px 0; border-bottom: 2px dashed rgba(36,32,74,.15); }
.settings-list input[type=range] { width: 180px; accent-color: var(--tang); }
.settings-list input[type=checkbox] { width: 24px; height: 24px; accent-color: var(--leaf); }
.settings-list select { font-size: 17px; font-weight: 700; border: 3px solid var(--ink); border-radius: 10px; padding: 2px 8px; background: #fff; color: var(--ink); }
.help h3 { margin: 8px 0 2px; } .help p { margin: 4px 0; font-weight: 600; font-size: 15px; line-height: 1.35; }

/* ---------- toast / calib / rotate ---------- */
#toast { position: absolute; left: 50%; bottom: calc(18px + var(--sab)); transform: translateX(-50%) translateY(240%); opacity: 0; background: var(--ink); color: #fff; font-weight: 800; padding: 8px 16px; border-radius: 14px; border: 3px solid #fff; transition: transform .25s; white-space: nowrap; z-index: 20; }
#toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
#toast { transition: transform .25s, opacity .25s; }
.modal-lite { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(36,32,74,.6); pointer-events: auto; z-index: 30; }
.modal-lite.show { display: flex; }
.key { display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--ink); color: #fff; }
#rotate { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; text-align: center; background: rgba(36,32,74,.82); color: #fff; z-index: 25; pointer-events: auto; }
#rotate div { display: flex; flex-direction: column; gap: 6px; font-weight: 800; font-size: 26px; } #rotate span { font-size: 16px; opacity: .8; font-weight: 600; }
body.racing.portrait #rotate.hint { display: flex; }

/* ---------- portrait / small screens ---------- */
@media (orientation: portrait) {
  .menu-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 60px; }
  .card { flex-direction: row; align-items: center; gap: 12px; }
  .mode-art { width: 90px; height: 90px; margin: 0; flex: none; }
  .chars-wrap { grid-template-columns: 1fr; margin-top: 56px; }
  .char-info { justify-self: stretch; align-items: center; text-align: center; }
  .track-grid { grid-template-columns: 1fr 1fr; margin-top: 60px; }
  .online-wrap, .lobby-wrap { grid-template-columns: 1fr; margin-top: 60px; }
  .players { grid-template-columns: 1fr; }
  #chars { background: rgba(36,32,74,.55); }
  .btn-zone { bottom: calc(40px + var(--sab)); }
  .steer-zone { top: 45%; }
  .place b { font-size: 86px; } .place small { font-size: 32px; }
}
@media (max-height: 520px) {
  .results-card, .podium-card { width: min(900px, 100%); padding: 10px 16px; gap: 8px; }
  .results-card h2, .podium-card h2 { font-size: 28px; }
  #podiumSub { margin: 0; }
  .results-list { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 8px; }
  .results-list li { grid-template-columns: 26px 32px 1fr auto auto; padding: 1px 8px 1px 4px; font-size: 15px; }
  .results-list li img { width: 30px; height: 30px; }
}
@media (max-height: 430px) {
  .menu-grid { margin-top: 44px; gap: 12px; }
  .mode-art { height: 96px; }
  .track-grid, .lobby-wrap, .online-wrap, .chars-wrap { margin-top: 42px; }
  .place b { font-size: 92px; }
  .btn-zone { bottom: calc(36px + var(--sab)); }
}