/* ================= Pixel Drift Rally UI ================= */
@font-face {
  font-family: 'Russo One';
  src: url('assets/fonts/russo-one.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Press Start 2P';
  src: url('assets/fonts/press-start-2p.woff2') format('woff2');
  font-display: swap;
}

:root {
  --font-hud: 'Russo One', 'Arial Black', sans-serif;
  --font-px: 'Press Start 2P', monospace;
  --yellow: #ffd23f;
  --pink: #ff4fd8;
  --cyan: #35c7ff;
  --green: #59d129;
  --panel: rgba(16, 21, 32, 0.86);
  --panel-lite: rgba(28, 35, 52, 0.9);
  --chip: rgba(12, 14, 20, 0.62);
  --stroke: rgba(255, 255, 255, 0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; background: #0d1220; }
body {
  font-family: var(--font-hud);
  color: #fff;
  touch-action: none;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}
#game-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui .screen { position: absolute; inset: 0; }
.hidden { display: none !important; }
button { font-family: var(--font-hud); border: none; cursor: pointer; color: #fff; }
.safe-top { padding-top: max(10px, env(safe-area-inset-top)); }
.safe-bottom { padding-bottom: max(10px, env(safe-area-inset-bottom)); }

.txt-outline { text-shadow: 0 2px 0 rgba(0,0,0,.55), 0 0 6px rgba(0,0,0,.4); }

/* ---------- icons ---------- */
.ico { display: inline-block; width: 15px; height: 15px; border-radius: 50%; vertical-align: -2px; margin-right: 6px; }
.ico-coin { background: radial-gradient(circle at 35% 30%, #ffe37a, #f5b81e 60%, #b97a0a); box-shadow: 0 0 4px rgba(245,184,30,.7); }
.ico-gem { border-radius: 3px; transform: rotate(45deg) scale(.85); background: linear-gradient(135deg, #9be8ff, #35c7ff 55%, #1470c9); box-shadow: 0 0 5px rgba(53,199,255,.8); }
.ico-trophy { border-radius: 3px 3px 6px 6px; background: linear-gradient(#ffe37a, #f5a51e); }

/* ================= SPLASH ================= */
#splash { display: flex; align-items: center; justify-content: center; pointer-events: auto;
  background: radial-gradient(120% 90% at 50% 20%, #1c2b52 0%, #0d1220 65%); }
.splash-inner { text-align: center; }
.splash-logo { display: flex; flex-direction: column; line-height: .95; margin-bottom: 18px; }
.logo-pixel { font-family: var(--font-px); font-size: clamp(22px, 7vw, 34px); color: var(--cyan); text-shadow: 0 4px 0 #0a3a55; letter-spacing: 2px; }
.logo-drift { font-size: clamp(52px, 17vw, 84px); font-style: italic; color: var(--yellow); text-shadow: 0 5px 0 #7a5a00, 0 10px 24px rgba(0,0,0,.6); letter-spacing: 1px; }
.logo-rally { font-size: clamp(30px, 10vw, 48px); font-style: italic; color: #fff; text-shadow: 0 4px 0 #8c1d1d; background: linear-gradient(90deg, transparent 0 8%, #d92b2b 8% 92%, transparent 92%); padding: 0 26px; margin-top: 4px; }
.splash-car { font-size: 44px; margin: 8px 0 26px; filter: drop-shadow(0 6px 8px rgba(0,0,0,.5)); animation: carSlide 2.4s ease-in-out infinite; }
@keyframes carSlide { 0%,100% { transform: translateX(-14px) } 50% { transform: translateX(14px) } }
.splash-tap { font-family: var(--font-px); font-size: 13px; color: #fff; margin-bottom: 20px; }
.blink { animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .25 } }
.splash-hint { font-family: var(--font-hud); font-size: 11px; color: #8fa2c7; line-height: 1.7; letter-spacing: .5px; }

/* ================= SHARED PILLS/BTNS ================= */
.pill { background: var(--chip); border: 1px solid var(--stroke); border-radius: 10px; padding: 6px 11px; font-size: 14px; display: flex; align-items: center; text-shadow: 0 2px 0 rgba(0,0,0,.5); }
.coin-pill span:last-child { color: var(--yellow); }
.gem-pill span:last-child { color: var(--cyan); }
.trophy-pill span:last-child { color: #ffe37a; }
.icon-btn { background: var(--chip); border: 1px solid var(--stroke); border-radius: 10px; width: 34px; height: 34px; font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; pointer-events: auto; }
.icon-btn:active { transform: scale(.92); }
.btn { border-radius: 12px; padding: 13px 18px; font-size: 16px; letter-spacing: 1px; text-shadow: 0 2px 0 rgba(0,0,0,.35); pointer-events: auto; }
.btn:active { transform: translateY(2px); }
.btn.primary { background: linear-gradient(#7ede3a, #43a81e); box-shadow: 0 4px 0 #2c6f12, 0 6px 14px rgba(0,0,0,.4); }
.btn.secondary { background: linear-gradient(#3a4763, #26304a); box-shadow: 0 4px 0 #161d30, 0 6px 14px rgba(0,0,0,.4); }
.btn.danger { background: linear-gradient(#e35050, #b02525); box-shadow: 0 4px 0 #6f1212; }

/* ================= GARAGE ================= */
#garage { display: flex; flex-direction: column; background: transparent; }
/* portrait-first: cap the UI to a centered column on wide screens */
.g-top, .g-name-row, .g-sheet, .g-bottom { width: 100%; max-width: 520px; margin-left: auto; margin-right: auto; }
.g-top { display: flex; gap: 8px; padding: 10px 12px 6px; align-items: center; }
.g-top .pill { flex: 0 0 auto; }
.g-top .coin-pill { margin-left: auto; }
.g-name-row { display: flex; align-items: center; padding: 4px 14px; }
#g-carname { font-size: clamp(22px, 6.4vw, 30px); font-style: italic; letter-spacing: 1px; text-shadow: 0 3px 0 rgba(0,0,0,.6); }
.g-name-tags { display: flex; gap: 8px; align-items: center; margin-top: 3px; }
.rarity { font-family: var(--font-px); font-size: 8px; padding: 4px 8px 3px; border-radius: 5px; letter-spacing: 1px; }
.rarity.common { background: #5a6575; }
.rarity.rare { background: #2563eb; }
.rarity.epic { background: #9333ea; }
.rarity.legendary { background: #d97706; }
.price-tag { font-size: 13px; color: var(--yellow); }
.g-arrows { margin-left: auto; display: flex; gap: 8px; }
.g-arrows .icon-btn { font-size: 22px; }
/* guaranteed car-view area; the sheet below scrolls internally when space is tight */
.g-spacer { flex: 1 1 auto; min-height: 32vh; pointer-events: auto; }
.g-sheet {
  flex: 0 1 auto; min-height: 0; max-height: 40vh;
  overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain;
  pointer-events: auto;
  background: rgba(13, 17, 28, .90);
  border-top: 1px solid var(--stroke);
  border-radius: 18px 18px 0 0;
  padding: 8px 12px 10px;
  display: flex; flex-direction: column; gap: 8px;
  scrollbar-width: none;
}
.g-sheet::-webkit-scrollbar { display: none; }
.g-sheet::before { content: ""; flex: 0 0 4px; width: 44px; border-radius: 2px; background: rgba(255,255,255,.2); margin: 2px auto 4px; }
.g-bottom { flex: 0 0 auto; padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(13, 17, 28, .97); }
.g-bottom .race-btn { width: 100%; }

.g-stats { display: flex; flex-direction: column; gap: 6px; }
.stat-row { display: flex; align-items: center; gap: 8px; background: var(--panel-lite); border: 1px solid var(--stroke); border-radius: 10px; padding: 5px 9px; }
.stat-name { width: 78px; font-size: 10px; letter-spacing: .5px; color: #cfd8ea; }
.stat-segs { flex: 1; display: flex; gap: 3px; height: 11px; }
.seg { flex: 1; background: #222a3d; border-radius: 2px; }
.seg.on { background: linear-gradient(#8af04e, #4db526); box-shadow: 0 0 4px rgba(120,230,70,.55); }
.seg.pop { animation: segPop .3s ease; }
@keyframes segPop { 0% { transform: scale(.2) } 70% { transform: scale(1.35) } 100% { transform: scale(1) } }
.stat-val { width: 34px; text-align: right; font-size: 11px; color: #cfd8ea; }
.stat-buy { min-width: 72px; background: linear-gradient(#7ede3a, #43a81e); border-radius: 8px; padding: 5px 7px; font-size: 11.5px; box-shadow: 0 3px 0 #2c6f12; pointer-events: auto; display: flex; align-items: center; justify-content: center; }
.stat-buy .ico { width: 12px; height: 12px; margin-right: 4px; }
.stat-buy.max { background: #2c3550; box-shadow: none; color: #8fa2c7; }
.stat-buy:active { transform: translateY(1px); }
.stat-buy.deny { animation: deny .35s ease; }
@keyframes deny { 0%,100% { transform: translateX(0) } 25% { transform: translateX(-5px); background:#b02525 } 75% { transform: translateX(5px); background:#b02525 } }

.g-paint-row { display: flex; align-items: center; gap: 10px; padding: 0 4px; }
.g-paint-label { font-size: 10.5px; color: #cfd8ea; letter-spacing: .6px; }
#g-paint { display: flex; gap: 8px; }
.paint-dot { width: 30px; height: 30px; border-radius: 9px; border: 2px solid rgba(255,255,255,.25); pointer-events: auto; position: relative; }
.paint-dot.sel { border-color: #8af04e; box-shadow: 0 0 8px rgba(138,240,78,.6); }
.paint-dot.locked::after { content: attr(data-cost); position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); font-size: 9px; color: var(--cyan); background: #0d1220; padding: 0 4px; border-radius: 4px; white-space: nowrap; }

.g-carousel { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px; scrollbar-width: none; pointer-events: auto; touch-action: pan-x pan-y; }
.g-carousel::-webkit-scrollbar { display: none; }
.car-card { flex: 0 0 92px; background: var(--panel-lite); border: 2px solid var(--stroke); border-radius: 12px; padding: 6px 6px 5px; text-align: center; pointer-events: auto; position: relative; }
.car-card.sel { border-color: #8af04e; box-shadow: 0 0 10px rgba(138,240,78,.45); }
.car-card img { width: 74px; height: 52px; object-fit: contain; image-rendering: pixelated; }
.car-card .cc-name { font-size: 8.5px; letter-spacing: .4px; color: #e8edf7; white-space: nowrap; overflow: hidden; }
.car-card .rarity { font-size: 6px; padding: 3px 5px 2px; margin-top: 3px; display: inline-block; }
.car-card.locked img { filter: brightness(.32) saturate(.6); }
.car-card .cc-price { position: absolute; top: 34%; left: 50%; transform: translate(-50%,-50%); font-size: 11px; color: var(--yellow); text-shadow: 0 2px 2px #000; }
.car-card .cc-lock { position: absolute; top: 6px; right: 7px; font-size: 11px; }

.g-tracks { display: flex; gap: 8px; }
.track-card { flex: 1; background: var(--panel-lite); border: 2px solid var(--stroke); border-radius: 12px; padding: 8px 6px 7px; text-align: center; pointer-events: auto; }
.track-card.sel { border-color: var(--cyan); box-shadow: 0 0 10px rgba(53,199,255,.4); }
.track-card .tc-ico { font-size: 20px; line-height: 1.15; }
.track-card .tc-name { font-size: 9px; letter-spacing: .4px; margin-top: 2px; }
.track-card .tc-best { font-size: 8.5px; color: #8fa2c7; margin-top: 2px; }
.track-card .tc-mult { font-size: 8.5px; color: var(--yellow); }
.track-card.locked { opacity: .55; }
.track-card .tc-lock { font-size: 8px; color: #ff9d5c; margin-top: 2px; }

.race-btn { background: linear-gradient(#7ede3a, #3f9e1c); border-radius: 14px; font-size: clamp(22px, 6.5vw, 28px); font-style: italic; letter-spacing: 3px; padding: 13px 10px; box-shadow: 0 5px 0 #2c6f12, 0 8px 18px rgba(0,0,0,.5); text-shadow: 0 2px 0 rgba(0,0,0,.35); pointer-events: auto; }
.race-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #2c6f12; }
.race-btn .flag { font-size: 20px; font-style: normal; }

/* ================= HUD ================= */
#hud { pointer-events: none; }
.hud-topleft { position: absolute; top: 0; left: 10px; display: flex; flex-direction: column; gap: 6px; }
.hud-chip { background: var(--chip); border: 1px solid var(--stroke); border-radius: 9px; padding: 4px 9px 5px; width: max-content; min-width: 74px; }
.chip-label { display: block; font-family: var(--font-px); font-size: 7px; color: var(--yellow); margin-bottom: 2px; letter-spacing: 1px; }
.chip-big { font-size: 22px; line-height: 1; }
.chip-small { font-size: 12px; color: #aab6cf; }
.chip-time { font-size: 15px; letter-spacing: .5px; font-variant-numeric: tabular-nums; }
.hud-chip.flash { animation: chipFlash .5s ease; }
@keyframes chipFlash { 0% { transform: scale(1.25); background: rgba(255,210,63,.55) } 100% { transform: scale(1) } }

.hud-topright { position: absolute; top: 0; right: 10px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pause-btn { font-size: 13px; letter-spacing: -1px; font-weight: bold; }
.minimap-wrap { background: var(--chip); border: 1px solid var(--stroke); border-radius: 12px; padding: 6px 6px 4px; text-align: center; }
#h-minimap { display: block; }
.bestlap { margin-top: 2px; }
.bestlap span { display: block; font-family: var(--font-px); font-size: 6px; color: var(--yellow); }
.bestlap b { font-size: 11px; font-variant-numeric: tabular-nums; }

.hud-drift { position: absolute; top: 16%; left: 0; right: 0; text-align: center; opacity: 0; transition: opacity .25s; }
.hud-drift.show { opacity: 1; }
.drift-label { font-family: var(--font-px); font-size: 9px; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.6); letter-spacing: 2px; }
.drift-score { font-size: clamp(34px, 11vw, 46px); font-style: italic; color: var(--yellow); line-height: 1.05; text-shadow: 0 3px 0 #7a5a00, 0 6px 12px rgba(0,0,0,.45); font-variant-numeric: tabular-nums; }
.drift-mult { font-size: clamp(20px, 6.4vw, 26px); font-style: italic; color: var(--pink); text-shadow: 0 2px 0 #7d1266, 0 4px 10px rgba(0,0,0,.4); }

#h-popups { position: absolute; top: 30%; left: 0; right: 0; text-align: center; pointer-events: none; }
.drift-pop { position: absolute; left: 0; right: 0; font-style: italic; letter-spacing: 1px; animation: popIn 1.5s ease forwards; text-shadow: 0 3px 0 rgba(0,0,0,.55); }
.drift-pop .dp-main { font-size: clamp(19px, 6vw, 26px); }
.drift-pop .dp-sub { font-size: clamp(15px, 4.6vw, 19px); color: var(--yellow); }
.drift-pop.t0 .dp-main { color: #9fe8ff; }
.drift-pop.t1 .dp-main { color: var(--yellow); }
.drift-pop.t2 .dp-main { color: #ffb340; }
.drift-pop.t3 .dp-main { color: #d9a0ff; text-shadow: 0 0 14px rgba(200,90,255,.9), 0 3px 0 rgba(0,0,0,.55); }
@keyframes popIn { 0% { transform: scale(.3); opacity: 0 } 12% { transform: scale(1.18); opacity: 1 } 22% { transform: scale(1) } 78% { opacity: 1; transform: translateY(0) } 100% { opacity: 0; transform: translateY(-34px) } }

.banner { position: absolute; top: 23%; left: 0; right: 0; text-align: center; font-size: clamp(30px, 10vw, 44px); font-style: italic; letter-spacing: 2px; color: #fff; padding: 8px 0; animation: bannerIn 1.4s ease forwards; text-shadow: 0 3px 0 rgba(0,0,0,.5); }
.banner.boost { color: #bfefff; background: linear-gradient(90deg, transparent, rgba(20,120,220,.55) 18% 82%, transparent); text-shadow: 0 0 18px #35c7ff, 0 3px 0 #0a3a6e; }
.banner.finallap { color: var(--yellow); background: linear-gradient(90deg, transparent, rgba(160,60,10,.5) 18% 82%, transparent); }
.banner.finish { color: #fff; background: linear-gradient(90deg, transparent, rgba(0,0,0,.6) 18% 82%, transparent); }
.banner.record { color: #8af04e; background: linear-gradient(90deg, transparent, rgba(20,90,10,.55) 18% 82%, transparent); }
@keyframes bannerIn { 0% { transform: scaleX(.2); opacity: 0 } 10% { transform: scaleX(1.05); opacity: 1 } 16% { transform: scaleX(1) } 80% { opacity: 1 } 100% { opacity: 0 } }

#h-countdown { position: absolute; top: 30%; left: 0; right: 0; text-align: center; font-size: clamp(80px, 30vw, 130px); font-style: italic; color: var(--yellow); text-shadow: 0 6px 0 #7a5a00, 0 10px 30px rgba(0,0,0,.6); }
#h-countdown.go { color: #8af04e; text-shadow: 0 6px 0 #2c6f12, 0 0 40px rgba(120,230,70,.8); }
#h-countdown.zoom { animation: cdZoom .9s ease forwards; }
@keyframes cdZoom { 0% { transform: scale(1.7); opacity: 0 } 22% { transform: scale(1); opacity: 1 } 85% { opacity: 1 } 100% { opacity: 0 } }

.wrongway { position: absolute; top: 40%; left: 0; right: 0; text-align: center; font-size: clamp(22px, 7vw, 30px); font-style: italic; color: #ff5a5a; text-shadow: 0 2px 0 #5c0808; animation: blink .7s steps(2) infinite; }

.hud-coach { position: absolute; left: 10px; bottom: calc(102px + env(safe-area-inset-bottom)); display: flex; align-items: flex-end; gap: 8px; opacity: 0; transform: translateY(10px); transition: all .3s; }
.hud-coach.show { opacity: 1; transform: none; }
#h-coach-img { width: 52px; height: 52px; border-radius: 10px; border: 2px solid rgba(255,255,255,.25); image-rendering: pixelated; background: #1c2436; }
.coach-bubble { background: rgba(250, 250, 252, .95); color: #12141c; font-size: 11px; letter-spacing: .3px; border-radius: 10px 10px 10px 3px; padding: 8px 10px; max-width: 200px; line-height: 1.45; box-shadow: 0 4px 10px rgba(0,0,0,.4); }

.hud-speed { position: absolute; right: 12px; bottom: calc(104px + env(safe-area-inset-bottom)); text-align: right; }
.hud-speed span { font-size: clamp(30px, 9vw, 40px); font-style: italic; text-shadow: 0 3px 0 rgba(0,0,0,.6); font-variant-numeric: tabular-nums; }
.hud-speed small { display: block; font-family: var(--font-px); font-size: 7px; color: #aab6cf; letter-spacing: 1px; margin-top: 1px; }

.hud-bottom { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 0 14px 16px; }
.steer-hint { font-size: 40px; line-height: 44px; color: rgba(255,255,255,.28); text-shadow: 0 2px 0 rgba(0,0,0,.4); transition: color .12s, transform .12s; }
.steer-hint.on { color: #fff; transform: scale(1.25); }
.boost-wrap { flex: 1; display: flex; align-items: center; gap: 7px; background: rgba(10, 14, 24, .68); border: 1px solid rgba(80, 160, 255, .35); border-radius: 12px; padding: 7px 10px; pointer-events: auto; cursor: pointer; }
.boost-wrap.ready { border-color: rgba(140, 220, 255, .8); }
.boost-wrap.ready .boost-bolt { animation: boltPulse .7s ease infinite; }
@keyframes boltPulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.45) } }
.boost-bar { flex: 1; display: flex; gap: 3px; height: 15px; }
.boost-seg { flex: 1; background: rgba(60, 90, 140, .35); border-radius: 2px; transform: skewX(-12deg); }
.boost-seg.on { background: linear-gradient(#9fe8ff, #2ba8ef); box-shadow: 0 0 6px rgba(60,190,255,.8); }
.boost-wrap.full { animation: boostFull .7s ease infinite; border-color: rgba(140, 220, 255, .9); }
@keyframes boostFull { 0%,100% { box-shadow: 0 0 4px rgba(60,190,255,.4) } 50% { box-shadow: 0 0 16px rgba(120,220,255,.95) } }
.boost-wrap.burn .boost-seg.on { background: linear-gradient(#ffe9b0, #ff9d2b); box-shadow: 0 0 8px rgba(255,170,50,.9); }
.boost-bolt { font-size: 16px; filter: drop-shadow(0 0 4px rgba(120,210,255,.9)); }

/* per-race controls guide */
.hud-guide { position: absolute; left: 0; right: 0; bottom: calc(116px + env(safe-area-inset-bottom)); display: flex; justify-content: center; pointer-events: none; }
.hg-card { background: rgba(10, 14, 24, .82); border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; padding: 10px 16px 11px; text-align: center; max-width: min(88vw, 340px); animation: guideIn .5s cubic-bezier(.2,1.4,.4,1); transition: opacity .4s, transform .4s; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.hud-guide.out .hg-card { opacity: 0; transform: translateY(16px); }
@keyframes guideIn { 0% { opacity: 0; transform: translateY(22px) scale(.92) } 100% { opacity: 1; transform: none } }
.hg-row { display: flex; align-items: center; justify-content: center; gap: 12px; }
.hg-main { font-size: 14px; font-style: italic; letter-spacing: .8px; line-height: 1.45; text-shadow: 0 2px 0 rgba(0,0,0,.5); }
.hg-sub { margin-top: 6px; font-size: 10.5px; letter-spacing: .5px; color: #9fb4d8; }
.hg-sub b { color: var(--cyan); }
.hg-chev { font-size: 34px; line-height: 1; color: var(--yellow); text-shadow: 0 2px 0 rgba(0,0,0,.5); }
.hg-chev.l { animation: chevL 1s ease-in-out infinite; }
.hg-chev.r { animation: chevR 1s ease-in-out infinite; }
@keyframes chevL { 0%,100% { transform: translateX(0) } 50% { transform: translateX(-6px) } }
@keyframes chevR { 0%,100% { transform: translateX(0) } 50% { transform: translateX(6px) } }
.kbd { display: inline-block; background: #2c3550; border: 1px solid rgba(255,255,255,.22); border-bottom-width: 3px; border-radius: 6px; padding: 2px 8px 3px; font-size: 11px; font-style: normal; margin: 0 2px; vertical-align: 1px; }

/* ================= RESULTS ================= */
#results { display: flex; align-items: center; justify-content: center; background: rgba(5, 8, 15, .55); pointer-events: auto; }
.res-panel { width: min(92vw, 400px); background: var(--panel); border: 1px solid var(--stroke); border-radius: 18px; padding: 18px 16px calc(14px + env(safe-area-inset-bottom)); position: relative; overflow: hidden; animation: panelUp .45s cubic-bezier(.2,1.4,.4,1); }
@keyframes panelUp { 0% { transform: translateY(60px) scale(.92); opacity: 0 } 100% { transform: none; opacity: 1 } }
.res-title { text-align: center; font-family: var(--font-px); font-size: 10px; color: #aab6cf; letter-spacing: 2px; }
.res-place { text-align: center; font-size: 56px; font-style: italic; color: var(--yellow); text-shadow: 0 4px 0 #7a5a00; line-height: 1.15; margin: 2px 0 8px; }
.res-place.p1 { color: var(--yellow); } .res-place.p2 { color: #d7e3f4; text-shadow: 0 4px 0 #5a6a80; }
.res-place.p3 { color: #f0a05a; text-shadow: 0 4px 0 #7a4a17; } .res-place.p4 { color: #98a5bd; text-shadow: 0 4px 0 #454f63; }
.res-rows { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.res-row { display: flex; align-items: center; gap: 9px; background: rgba(255,255,255,.05); border-radius: 9px; padding: 5px 9px; }
.res-row.you { background: rgba(53,124,255,.28); border: 1px solid rgba(90,150,255,.5); }
.res-row img { width: 30px; height: 30px; border-radius: 7px; image-rendering: pixelated; background: #1c2436; }
.res-row .rr-pos { font-size: 15px; width: 16px; color: #cfd8ea; }
.res-row .rr-name { flex: 1; font-size: 13px; letter-spacing: .5px; }
.res-row .rr-time { font-size: 12px; color: #aab6cf; font-variant-numeric: tabular-nums; }
.res-stats { display: flex; gap: 8px; margin-bottom: 10px; }
.res-stat { flex: 1; background: rgba(255,255,255,.05); border-radius: 9px; padding: 7px 9px; text-align: center; }
.res-stat span { display: block; font-family: var(--font-px); font-size: 6.5px; color: var(--yellow); margin-bottom: 3px; }
.res-stat b { font-size: 15px; }
.res-rewards { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; min-height: 20px; }
.rew-line { display: flex; justify-content: space-between; font-size: 12.5px; color: #cfd8ea; padding: 2px 6px; }
.rew-line b { color: var(--yellow); font-variant-numeric: tabular-nums; }
.rew-line.gem b { color: var(--cyan); }
.rew-line.total { border-top: 1px solid var(--stroke); padding-top: 6px; font-size: 14px; color: #fff; }
.res-btns { display: flex; gap: 9px; }
.res-btns .btn { flex: 1; }
#res-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.conf { position: absolute; width: 8px; height: 8px; top: -12px; animation: confFall linear forwards; }
@keyframes confFall { 0% { transform: translateY(0) rotate(0) } 100% { transform: translateY(560px) rotate(720deg); opacity: .2 } }

/* ================= PAUSE ================= */
#pause { display: flex; align-items: center; justify-content: center; background: rgba(5, 8, 15, .6); pointer-events: auto; }
.pause-panel { width: min(85vw, 320px); background: var(--panel); border: 1px solid var(--stroke); border-radius: 18px; padding: 22px 18px; display: flex; flex-direction: column; gap: 10px; }
.pause-title { text-align: center; font-size: 26px; font-style: italic; letter-spacing: 2px; margin-bottom: 6px; }

/* ================= MODAL ================= */
#modal-veil { position: fixed; inset: 0; background: rgba(5,8,15,.65); display: flex; align-items: center; justify-content: center; pointer-events: auto; z-index: 50; }
#modal-box { width: min(88vw, 350px); background: var(--panel); border: 1px solid var(--stroke); border-radius: 16px; padding: 18px 16px; animation: panelUp .3s cubic-bezier(.2,1.4,.4,1); }
.modal-title { font-size: 19px; font-style: italic; letter-spacing: 1px; text-align: center; margin-bottom: 12px; }
.modal-text { font-size: 13px; color: #cfd8ea; text-align: center; line-height: 1.55; margin-bottom: 14px; }
.modal-btns { display: flex; gap: 9px; }
.modal-btns .btn { flex: 1; font-size: 14px; }
.set-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 4px; border-bottom: 1px solid var(--stroke); }
.set-row span { font-size: 13.5px; color: #e8edf7; }
.tog { width: 52px; height: 28px; border-radius: 15px; background: #2c3550; position: relative; pointer-events: auto; transition: background .2s; }
.tog::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #8fa2c7; transition: all .2s; }
.tog.on { background: #3f9e1c; }
.tog.on::after { left: 27px; background: #fff; }

#toast { position: fixed; left: 50%; bottom: 18%; transform: translateX(-50%); background: rgba(12,14,20,.92); border: 1px solid var(--stroke); color: #fff; font-size: 13px; padding: 10px 18px; border-radius: 12px; z-index: 60; animation: toastIn 1.8s ease forwards; white-space: nowrap; }
@keyframes toastIn { 0% { opacity: 0; transform: translateX(-50%) translateY(12px) } 12% { opacity: 1; transform: translateX(-50%) } 80% { opacity: 1 } 100% { opacity: 0 } }

/* speed lines overlay */
#speedlines { position: fixed; inset: 0; pointer-events: none; z-index: 5; }