:root {
  color-scheme: dark;
  --bg: #070b1c; --ink: #f2f6ff; --muted: #8fa0c8; --dim: #56638a;
  --cyan: #3ff0ff; --blue: #2f8bff; --orange: #ff8a1f; --amber: #ffc23f; --red: #ff3d5a;
  --panel: linear-gradient(135deg, rgba(16, 26, 62, .88), rgba(9, 14, 36, .82));
  --edge: rgba(111, 170, 255, .28);
  --skew: -12deg;
  --display: 'Exo 2', 'Rajdhani', system-ui, sans-serif;
  --body: 'Rajdhani', system-ui, sans-serif;
}
* { box-sizing: border-box }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden }
body { background: var(--bg); color: var(--ink); font: 600 16px/1.35 var(--body); letter-spacing: .02em; user-select: none; -webkit-font-smoothing: antialiased }
button, input { font: inherit; color: inherit }
[hidden] { display: none !important }
#arena { position: fixed; inset: 0; width: 100%; height: 100%; display: block }
.eyebrow { font: 700 12px var(--body); letter-spacing: .28em; color: var(--muted) }
kbd { display: inline-block; font: 700 11px var(--body); padding: 3px 7px 2px; border: 1px solid rgba(255,255,255,.35); border-bottom-width: 3px; border-radius: 5px; background: rgba(255,255,255,.08); color: #fff; letter-spacing: .08em }

/* ---------- Buttons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; border: 0; cursor: pointer;
  transform: skewX(var(--skew)); background: linear-gradient(180deg, rgba(40, 60, 120, .85), rgba(20, 30, 70, .9)); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--edge), 0 8px 24px rgba(0, 0, 0, .35); overflow: hidden; transition: transform .16s cubic-bezier(.3,1.6,.5,1), filter .16s, box-shadow .2s }
.btn > span { display: inline-block; transform: skewX(calc(var(--skew) * -1)); font: italic 800 17px var(--display); letter-spacing: .06em; text-transform: uppercase }
.btn::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--cyan); transition: width .2s; box-shadow: 0 0 16px var(--cyan) }
.btn::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); transform: translateX(0); opacity: 0 }
.btn:hover:not(:disabled) { transform: skewX(var(--skew)) translateX(6px) scale(1.02); filter: brightness(1.18); box-shadow: inset 0 0 0 1px rgba(111,240,255,.7), 0 0 26px rgba(63,240,255,.3), 0 10px 30px rgba(0,0,0,.4) }
.btn:hover:not(:disabled)::before { width: 9px }
.btn:hover:not(:disabled)::after { animation: shine .6s ease-out }
.btn:active:not(:disabled) { transform: skewX(var(--skew)) translateX(6px) scale(.96); filter: brightness(1.45); transition-duration: .05s }
.btn:disabled { opacity: .4; cursor: not-allowed; filter: grayscale(.6) }
.btn:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px }
@keyframes shine { from { opacity: 1; left: -60% } to { opacity: 1; left: 130% } }
.btn-xl { min-height: 74px; padding: 0 36px; justify-content: flex-start }
.btn-xl > span { display: flex; flex-direction: column; align-items: flex-start; gap: 2px }
.btn-xl b { font: italic 900 30px/1 var(--display); letter-spacing: .04em }
.btn-xl small { font: 600 14px var(--body); letter-spacing: .08em; text-transform: none; opacity: .75; font-style: normal }
.btn-primary { background: linear-gradient(100deg, #ff6a1f 0%, #ff9a2a 55%, #ffc23f 100%); color: #1a0b00; box-shadow: 0 0 0 1px rgba(255,210,120,.6) inset, 0 10px 40px rgba(255,120,30,.35) }
.btn-primary::before { background: #fff; box-shadow: 0 0 18px #fff }
.btn-primary:hover:not(:disabled) { box-shadow: 0 0 0 2px #ffe3a3 inset, 0 0 40px rgba(255,150,40,.65), 0 12px 40px rgba(0,0,0,.4) }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: rgba(255,255,255,.06); border-radius: 50%; cursor: pointer; color: var(--ink); transition: background .2s, transform .3s; box-shadow: inset 0 0 0 1px var(--edge) }
.icon-btn svg { width: 22px; height: 22px }
.icon-btn:hover { background: rgba(63,240,255,.18); transform: rotate(35deg) scale(1.08) }
.icon-btn:active { transform: scale(.9) }

/* ---------- Screens ---------- */
.screen { position: fixed; inset: 0; z-index: 5 }
.screen.enter { animation: screen-in .5s cubic-bezier(.2,.9,.3,1) both }
@keyframes screen-in { from { opacity: 0; transform: translateX(-30px) } }

/* Splash */
#splash { display: grid; place-items: center; align-content: center; gap: 30px; background: radial-gradient(ellipse at center, rgba(7,11,28,.2), rgba(7,11,28,.85) 75%); cursor: pointer }
.splash-logo { width: min(900px, 90vw) }
.logo { width: 100%; overflow: visible }
.logo-text { font: italic 900 104px var(--display); fill: #fff; letter-spacing: -.01em; paint-order: stroke; stroke: #0a1233; stroke-width: 6 }
.logo-text.small { font-size: 46px; stroke-width: 3 }
.logo-sub { font: 700 19px var(--body); fill: #a8b8e8; letter-spacing: .55em }
.logo-emblem { animation: emblem-in 1s cubic-bezier(.2,1.6,.4,1) .2s both; transform-box: fill-box; transform-origin: center }
.logo-emblem use { filter: drop-shadow(0 0 18px rgba(63,240,255,.7)) }
@keyframes emblem-in { from { transform: translate(190px, 120px) scale(0) rotate(-200deg); opacity: 0 } to { transform: translate(190px, 120px) scale(1) rotate(0) } }
.logo-word { animation: word-in .7s cubic-bezier(.2,1.2,.3,1) .75s both }
@keyframes word-in { from { translate: 120px 0; opacity: 0 } }
.logo-sub { animation: fade-up .6s ease 1.2s both }
.logo-speed { animation: speed-in .5s ease-out 1s both }
@keyframes speed-in { from { translate: -200px 0; opacity: 0 } }
.logo-word .logo-text { animation: glint 3.2s ease-in-out 1.6s infinite }
@keyframes glint { 0%, 70%, 100% { filter: none } 80% { filter: drop-shadow(0 0 14px #6ff7ff) brightness(1.5) } }
@keyframes fade-up { from { opacity: 0; transform: translateY(12px) } }
.press { animation: fade-up .6s ease 1.6s both }
.press span { display: inline-block; font: italic 800 22px var(--display); letter-spacing: .35em; color: #fff; padding: 12px 34px; background: linear-gradient(90deg, transparent, rgba(47,139,255,.35), transparent); animation: pulse 1.6s ease-in-out infinite }
@keyframes pulse { 50% { opacity: .35 } }
.splash-foot { position: absolute; bottom: 26px; left: 0; right: 0; text-align: center; font-size: 13px; letter-spacing: .2em; color: var(--dim); text-transform: uppercase }
#splash.leaving { animation: splash-out .7s ease-in forwards }
@keyframes splash-out { to { opacity: 0; transform: scale(1.15); filter: blur(6px) } }

/* Menu */
#menu { display: grid; grid-template-columns: minmax(360px, 460px) 1fr; grid-template-rows: auto 1fr auto; padding: 26px 40px 30px; gap: 20px 40px;
  background: linear-gradient(90deg, rgba(7,11,28,.9) 0%, rgba(7,11,28,.55) 32%, transparent 55%) }
.topbar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between }
.mini-logo { width: 250px; height: 54px }
.topbar-right { display: flex; gap: 14px; align-items: center }
.pill { font: 700 12px var(--body); letter-spacing: .2em; padding: 8px 14px; border-radius: 20px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--edge); color: var(--muted) }
.pill.ok { color: #6affb5 } .pill.ok::before { content: '●  '; }
.pill.bad { color: var(--red) }
.main-nav { display: flex; flex-direction: column; gap: 14px; align-self: center; animation: nav-in .6s cubic-bezier(.2,1,.3,1) both }
.main-nav > * { animation: nav-item .5s cubic-bezier(.2,1.2,.3,1) both }
.main-nav > :nth-child(2) { animation-delay: .06s } .main-nav > :nth-child(3) { animation-delay: .12s } .main-nav > :nth-child(4) { animation-delay: .18s }
@keyframes nav-item { from { opacity: 0; translate: -60px 0 } }
.driver-card label, .setting label { display: block; font: 700 12px var(--body); letter-spacing: .28em; color: var(--muted); margin-bottom: 8px }
.nameplate { display: flex; align-items: center; gap: 12px; padding: 0 16px; height: 56px; background: var(--panel); transform: skewX(var(--skew)); box-shadow: inset 0 0 0 1px var(--edge); transition: box-shadow .2s }
.nameplate:focus-within { box-shadow: inset 0 0 0 2px var(--cyan), 0 0 24px rgba(63,240,255,.25) }
.nameplate > * { transform: skewX(calc(var(--skew) * -1)) }
.nameplate-icon { width: 38px; height: 20px; color: var(--cyan); flex: none }
.nameplate input { flex: 1; min-width: 0; background: none; border: 0; outline: none; font: italic 800 24px var(--display); letter-spacing: .04em; text-transform: uppercase }
.join-row { display: flex; gap: 12px }
.join-row input { flex: 1; min-width: 0; height: 52px; padding: 0 18px; background: var(--panel); border: 0; outline: none; transform: skewX(var(--skew)); box-shadow: inset 0 0 0 1px var(--edge);
  font: italic 800 20px var(--display); letter-spacing: .3em; text-transform: uppercase; transition: box-shadow .2s }
.join-row input:focus { box-shadow: inset 0 0 0 2px var(--cyan) }
.join-row input::placeholder { color: var(--dim); letter-spacing: .2em }
#error { min-height: 22px; margin: 0; color: #ff8fa0; font-weight: 700 }
#error.shake { animation: shake .4s }
@keyframes shake { 20%, 60% { transform: translateX(-8px) } 40%, 80% { transform: translateX(8px) } }

.garage { grid-column: 2; grid-row: 2 / 4; justify-self: end; align-self: end; width: min(420px, 100%); padding: 20px 24px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--edge); clip-path: polygon(22px 0, 100% 0, 100% 100%, 0 100%, 0 22px); animation: fade-up .6s ease .2s both }
.garage-head { display: flex; justify-content: space-between; align-items: center }
.garage-count { font: italic 800 14px var(--display); color: var(--cyan) }
.garage-picker { display: flex; align-items: center; gap: 10px; margin: 8px 0 }
.garage-name { flex: 1; text-align: center }
.garage-name h2 { margin: 0; font: italic 900 46px/1 var(--display); letter-spacing: .03em; background: linear-gradient(180deg, #fff, #9fdcff); -webkit-background-clip: text; background-clip: text; color: transparent }
.garage-name h2.swap { animation: name-swap .35s cubic-bezier(.2,1.4,.4,1) }
@keyframes name-swap { from { opacity: 0; transform: translateY(14px) skewX(-18deg) } }
.garage-name p { margin: 4px 0 0; color: var(--muted); font-size: 15px }
.arrow-btn { width: 50px; height: 64px; border: 0; cursor: pointer; background: rgba(63,240,255,.08); color: var(--cyan); font: 800 40px/1 var(--display); transform: skewX(var(--skew)); box-shadow: inset 0 0 0 1px var(--edge); transition: background .15s, transform .15s }
.arrow-btn:hover { background: rgba(63,240,255,.25); transform: skewX(var(--skew)) scale(1.08) }
.arrow-btn:active { transform: skewX(var(--skew)) scale(.92) }
.car-dots { display: flex; justify-content: center; gap: 8px }
.car-dots i { width: 26px; height: 5px; background: rgba(255,255,255,.18); transform: skewX(var(--skew)); transition: background .2s, width .2s }
.car-dots i.on { background: var(--cyan); width: 40px; box-shadow: 0 0 10px var(--cyan) }
.garage-note { margin: 12px 0 0; font-size: 13px; color: var(--dim); text-align: center }
.how { grid-column: 1; grid-row: 3; display: grid; gap: 10px; animation: fade-up .6s ease .35s both }
.how-card { display: flex; gap: 14px; align-items: center; padding: 10px 14px; background: rgba(8,14,38,.6); box-shadow: inset 0 0 0 1px rgba(111,170,255,.14) }
.how-card svg { width: 38px; height: 38px; color: var(--cyan); flex: none }
.how-card b { display: block; font: italic 800 15px var(--display); letter-spacing: .08em }
.how-card span { font-size: 14px; color: var(--muted); font-weight: 500 }

/* Lobby */
#lobby { display: grid; grid-template-rows: auto 1fr auto; padding: 30px 40px; background: linear-gradient(180deg, rgba(7,11,28,.85), transparent 30%, transparent 60%, rgba(7,11,28,.9)) }
.lobby-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap }
.room-box { padding: 14px 24px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--edge); clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%, 0 18px) }
.room-code-row { display: flex; align-items: center; gap: 16px }
#code { font: italic 900 54px/1.1 var(--display); letter-spacing: .18em; color: #fff; text-shadow: 0 0 24px rgba(63,240,255,.5) }
.segmented { display: flex; transform: skewX(var(--skew)); box-shadow: inset 0 0 0 1px var(--edge); background: rgba(8,14,38,.7) }
.seg { border: 0; background: none; padding: 14px 24px; cursor: pointer; font: italic 800 15px var(--display); letter-spacing: .08em; color: var(--muted); transition: background .2s, color .2s }
.seg[aria-checked="true"] { background: linear-gradient(180deg, #2f8bff, #1d5fd0); color: #fff; box-shadow: 0 0 20px rgba(47,139,255,.45) }
.seg:hover:not(:disabled):not([aria-checked="true"]) { background: rgba(255,255,255,.08); color: #fff }
.seg:disabled { cursor: not-allowed }
.slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-self: end; margin-bottom: 20px }
.slot { position: relative; padding: 16px 18px 18px; min-height: 130px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--edge); transform: skewX(var(--skew)); overflow: hidden; animation: slot-in .5s cubic-bezier(.2,1.3,.3,1) both }
.slot > * { transform: skewX(calc(var(--skew) * -1)) }
.slot::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--c); box-shadow: 0 0 20px var(--c) }
.slot::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%); pointer-events: none }
@keyframes slot-in { from { opacity: 0; transform: skewX(var(--skew)) translateY(40px) } }
.slot .slot-n { font: italic 900 14px var(--display); color: var(--c); letter-spacing: .1em }
.slot .slot-name { font: italic 900 28px/1.1 var(--display); margin: 6px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase }
.slot .slot-car { font-size: 14px; color: var(--muted); letter-spacing: .12em }
.slot .badges { display: flex; gap: 6px; margin-top: 8px }
.badge { font: 700 11px var(--body); letter-spacing: .15em; padding: 3px 8px; background: rgba(255,255,255,.1) }
.badge.you { background: var(--c); color: #061022 }
.badge.host { background: var(--amber); color: #1a0b00 }
.slot.empty { opacity: .45 } .slot.empty .slot-name { color: var(--dim) }
.lobby-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px }
#lobby-hint { flex: 1; text-align: center; color: var(--muted); margin: 0 }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; z-index: 4; pointer-events: none }
.scoreboard { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); display: flex; align-items: stretch; gap: 8px }
.chips { display: flex; gap: 6px } .chips.left { flex-direction: row }
.chip { --c: #fff; position: relative; width: 132px; padding: 7px 12px 8px; background: var(--panel); transform: skewX(var(--skew)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transition: transform .3s, opacity .3s }
.chip > * { transform: skewX(calc(var(--skew) * -1)) }
.chip::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--c); box-shadow: 0 0 14px var(--c) }
.chip.me { box-shadow: inset 0 0 0 2px var(--c), 0 0 22px color-mix(in srgb, var(--c) 45%, transparent) }
.chip.dead { opacity: .35; filter: grayscale(1) }
.chip .chip-top { display: flex; justify-content: space-between; font: 700 12px var(--body); letter-spacing: .1em; color: #cfd9f5 }
.chip .chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 80px; text-transform: uppercase }
.chip .chip-rank { color: var(--c); display: flex; align-items: center; gap: 2px }
.chip .chip-rank svg { width: 13px; height: 13px }
.chip .chip-score { font: italic 900 26px/1 var(--display); color: #fff; margin-top: 2px; display: flex; justify-content: space-between; align-items: baseline }
.chip .pips { display: flex; gap: 3px }
.chip .pips i { width: 7px; height: 7px; background: var(--c); transform: rotate(45deg) } .chip .pips i.off { background: rgba(255,255,255,.15) }
.chip.bump { animation: bump .45s cubic-bezier(.2,2,.4,1) }
@keyframes bump { 40% { transform: skewX(var(--skew)) scale(1.14) } }
.timer-box { min-width: 150px; padding: 6px 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(180deg, #1c2a66, #0d143a); transform: skewX(var(--skew)); box-shadow: inset 0 0 0 1px rgba(111,170,255,.45), 0 8px 30px rgba(0,0,0,.4) }
.timer-box > * { transform: skewX(calc(var(--skew) * -1)) }
.timer-box span { font: 700 11px var(--body); letter-spacing: .25em; color: var(--muted) }
#timer { font: italic 900 42px/1 var(--display); font-variant-numeric: tabular-nums }
.timer-box.hot { background: linear-gradient(180deg, #7a1530, #3a0a1a); animation: hot 1s ease-in-out infinite }
@keyframes hot { 50% { box-shadow: inset 0 0 0 2px #ff6b8a, 0 0 30px rgba(255,61,90,.6) } }
.lives-box { position: absolute; top: 18px; left: 24px; padding: 12px 18px 14px; min-width: 190px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--edge); clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%, 0 16px) }
.life-icons { display: flex; gap: 8px; margin: 6px 0 8px }
.life-icons svg { width: 46px; height: 24px; color: var(--c, var(--cyan)); filter: drop-shadow(0 0 6px var(--c, var(--cyan))); transition: all .4s }
.life-icons svg.lost { color: rgba(255,255,255,.14); filter: none; transform: scale(.85) }
.life-icons svg.losing { animation: life-lose .8s ease-out }
@keyframes life-lose { 0% { transform: scale(1.6); color: #fff } 30% { transform: scale(1.3) rotate(-10deg); color: var(--red) } }
.kills-row { display: flex; align-items: center; gap: 8px; font: 700 13px var(--body); letter-spacing: .2em; color: var(--muted) }
.kills-row svg { width: 20px; height: 20px; color: var(--amber) }
.kills-row b { font: italic 900 28px/1 var(--display); color: #fff; letter-spacing: 0 }
.kills-row b.bump { animation: kill-bump .6s cubic-bezier(.2,2,.4,1) }
@keyframes kill-bump { 30% { transform: scale(1.8); color: var(--amber) } }
.status-tag { margin-top: 8px; font: italic 800 13px var(--display); letter-spacing: .12em; min-height: 18px }
.status-tag.safe { color: #6affb5 } .status-tag.exposed { color: var(--amber); animation: pulse .8s infinite } .status-tag.shield { color: var(--cyan) } .status-tag.danger { color: var(--red); animation: pulse .3s infinite } .status-tag.out { color: var(--dim) }
.leave-match { position: absolute; top: 20px; right: 24px; pointer-events: auto; border: 0; cursor: pointer; background: rgba(8,14,38,.7); color: var(--muted); font: 700 12px var(--body); letter-spacing: .2em; padding: 8px 14px; box-shadow: inset 0 0 0 1px var(--edge); transition: color .2s, background .2s }
.leave-match:hover { color: #fff; background: rgba(255,61,90,.35) }
.killfeed { position: absolute; top: 76px; right: 24px; display: flex; flex-direction: column; gap: 6px; align-items: flex-end }
.kf { display: flex; align-items: center; gap: 10px; padding: 7px 14px; background: rgba(8,12,32,.8); transform: skewX(var(--skew)); font: italic 800 15px var(--display); letter-spacing: .04em; animation: kf-in .4s cubic-bezier(.2,1.4,.3,1) both; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) }
.kf > * { transform: skewX(calc(var(--skew) * -1)) }
.kf svg { width: 18px; height: 18px; color: #fff }
.kf.mine { box-shadow: inset 0 0 0 2px var(--amber), 0 0 18px rgba(255,194,63,.35) }
.kf.out { animation: kf-out .4s ease-in forwards }
@keyframes kf-in { from { opacity: 0; transform: skewX(var(--skew)) translateX(80px) } }
@keyframes kf-out { to { opacity: 0; transform: skewX(var(--skew)) translateX(60px) } }
.announce { position: absolute; top: 22%; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 18px; pointer-events: none }
.banner { text-align: center; animation: banner-in .55s cubic-bezier(.15,1.6,.35,1) both }
.banner.out { animation: banner-out .35s ease-in forwards }
.banner .b-main { display: inline-block; font: italic 900 78px/1 var(--display); letter-spacing: .02em; color: #fff; text-shadow: 0 0 30px var(--c, #fff), 0 4px 0 rgba(0,0,0,.35); padding: 0 30px; position: relative }
.banner .b-main::before, .banner .b-main::after { content: ''; position: absolute; top: 50%; width: 120px; height: 5px; background: var(--c, #fff); box-shadow: 0 0 16px var(--c, #fff); transform: skewX(-30deg) }
.banner .b-main::before { right: 100%; animation: bar-l .5s ease-out both } .banner .b-main::after { left: 100%; animation: bar-r .5s ease-out both }
@keyframes bar-l { from { transform: translateX(-200px) skewX(-30deg); opacity: 0 } }
@keyframes bar-r { from { transform: translateX(200px) skewX(-30deg); opacity: 0 } }
.banner .b-sub { display: block; margin-top: 8px; font: italic 800 22px var(--display); letter-spacing: .14em; color: var(--c, #cfe); text-transform: uppercase }
.banner.small .b-main { font-size: 40px } .banner.small .b-main::before, .banner.small .b-main::after { width: 60px; height: 3px }
.banner.gold .b-main { background: linear-gradient(180deg, #fff6c8, #ffc23f 60%, #ff8a1f); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 22px rgba(255,170,40,.8)) }
.banner.bad .b-main { color: #ffd9df; text-shadow: 0 0 30px var(--red), 0 4px 0 rgba(0,0,0,.35) }
@keyframes banner-in { 0% { opacity: 0; transform: scale(2.6) skewX(-20deg); filter: blur(10px) } 60% { opacity: 1; transform: scale(.94) skewX(-8deg); filter: none } 100% { transform: scale(1) skewX(-8deg) } }
@keyframes banner-out { to { opacity: 0; transform: scale(.8) skewX(-8deg) translateY(-20px) } }
.countdown { position: absolute; inset: 0; display: grid; place-items: center; font: italic 900 220px/1 var(--display); color: #fff; text-shadow: 0 0 60px rgba(63,240,255,.9), 0 8px 0 rgba(0,0,0,.3) }
.countdown span { animation: count-in .9s cubic-bezier(.15,1.4,.3,1) both }
.countdown span.go { background: linear-gradient(180deg, #fff6c8, #ffc23f 55%, #ff6a1f); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 0 40px rgba(255,150,40,.9)); font-size: 260px }
@keyframes count-in { 0% { opacity: 0; transform: scale(3) } 25% { opacity: 1; transform: scale(1) } 75% { opacity: 1; transform: scale(.92) } 100% { opacity: 0; transform: scale(.6) } }
.minimap-box { position: absolute; left: 24px; bottom: 24px; width: 220px; height: 220px; border-radius: 50%; background: rgba(8,12,32,.55); box-shadow: 0 0 0 2px rgba(111,170,255,.35), 0 0 0 7px rgba(8,12,32,.55), 0 0 30px rgba(63,240,255,.25) }
.minimap-box canvas { width: 100%; height: 100%; border-radius: 50% }
.minimap-n { position: absolute; top: -4px; left: 50%; transform: translateX(-50%); font: italic 900 13px var(--display); color: var(--cyan); background: var(--bg); padding: 0 6px }
.boost-gauge { position: absolute; right: 28px; bottom: 24px; width: 200px; height: 200px }
.boost-gauge svg { width: 100%; height: 100%; transform: rotate(135deg) }
.gauge-bg { fill: rgba(8,12,32,.72); stroke: rgba(255,255,255,.1); stroke-width: 16; stroke-dasharray: 395.8 527.8 }
.gauge-fill { fill: none; stroke: url(#g-cyan); stroke-width: 16; stroke-dasharray: 0 100; transition: stroke-dasharray .12s linear; filter: url(#glow) }
.boost-gauge.active .gauge-fill { stroke: url(#g-fire) }
.boost-gauge.ready .gauge-fill { animation: gauge-ready 1s ease-in-out infinite }
@keyframes gauge-ready { 50% { stroke-width: 20 } }
.gauge-inner { fill: none; stroke: rgba(111,170,255,.25); stroke-width: 1.5 }
.gauge-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center }
.gauge-text b { font: italic 900 60px/1 var(--display); font-variant-numeric: tabular-nums }
.gauge-text span { font: 700 12px var(--body); letter-spacing: .3em; color: var(--muted) }
.boost-gauge.ready .gauge-text span { color: var(--cyan) } .boost-gauge.active .gauge-text b { color: var(--amber) }
.boost-gauge.fire { animation: gauge-fire .5s cubic-bezier(.2,2,.4,1) }
@keyframes gauge-fire { 30% { transform: scale(1.15) } }
.gauge-key { position: absolute; bottom: 6px; right: 12px }
.controls-hint { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; font: 700 13px var(--body); letter-spacing: .14em; color: #c8d4f5; padding: 8px 18px; background: rgba(8,12,32,.6); transition: opacity 1s; white-space: nowrap }
.controls-hint i { width: 1px; height: 16px; background: rgba(255,255,255,.2); margin: 0 6px }
.controls-hint.gone { opacity: 0 }

/* World labels & popups */
#labels { position: fixed; inset: 0; pointer-events: none; z-index: 3; overflow: hidden }
.tag { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 3px; will-change: transform }
.tag b { font: italic 800 14px var(--display); padding: 2px 10px; background: rgba(8,12,32,.75); border-bottom: 3px solid var(--c); white-space: nowrap; text-transform: uppercase }
.tag .pips { display: flex; gap: 3px } .tag .pips i { width: 6px; height: 6px; background: var(--c); transform: rotate(45deg) } .tag .pips i.off { background: rgba(255,255,255,.2) }
.tag.shielded b { box-shadow: 0 0 12px var(--c) }
.popup { position: absolute; left: 0; top: 0; font: italic 900 38px var(--display); color: #fff; text-shadow: 0 0 20px var(--c), 0 3px 0 rgba(0,0,0,.4); white-space: nowrap; will-change: transform, opacity }
.popup.big { font-size: 58px }
#screen-flash { position: fixed; inset: 0; pointer-events: none; z-index: 6; opacity: 0; mix-blend-mode: screen }
#danger-vignette { position: fixed; inset: 0; pointer-events: none; z-index: 2; opacity: 0; box-shadow: inset 0 0 160px 40px rgba(255,40,70,.75); transition: opacity .2s }

/* ---------- Results ---------- */
#results { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 40px; background: radial-gradient(ellipse at 50% 60%, transparent 20%, rgba(7,11,28,.88) 75%) }
.results-title { text-align: center }
#winner { margin: 6px 0 0; font: italic 900 120px/1 var(--display); letter-spacing: .02em; animation: banner-in .8s cubic-bezier(.15,1.6,.35,1) both }
#winner.win { background: linear-gradient(180deg, #fff6c8, #ffc23f 55%, #ff6a1f); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 40px rgba(255,150,40,.7)) }
#winner.lose { color: #dfe6ff; text-shadow: 0 0 40px rgba(47,139,255,.6) }
#winner-sub { margin: 8px 0 0; font: italic 800 22px var(--display); letter-spacing: .12em; color: var(--muted) }
.results-list { display: flex; flex-direction: column; gap: 10px; width: min(760px, 100%) }
.rrow { --c: #fff; display: grid; grid-template-columns: 70px 1fr 120px 90px 90px; align-items: center; gap: 12px; padding: 12px 22px; background: var(--panel); transform: skewX(var(--skew)); box-shadow: inset 5px 0 0 var(--c), inset 0 0 0 1px rgba(255,255,255,.07); animation: rrow-in .5s cubic-bezier(.2,1.3,.3,1) both }
.rrow > * { transform: skewX(calc(var(--skew) * -1)) }
.rrow.first { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 35%, #0d1638), rgba(9,14,36,.85)); box-shadow: inset 6px 0 0 var(--c), inset 0 0 0 2px color-mix(in srgb, var(--c) 70%, transparent), 0 0 40px color-mix(in srgb, var(--c) 30%, transparent) }
.rrow.me .r-name::after { content: 'YOU'; margin-left: 10px; font: 700 11px var(--body); letter-spacing: .15em; padding: 2px 7px; background: var(--c); color: #061022; vertical-align: middle }
@keyframes rrow-in { from { opacity: 0; transform: skewX(var(--skew)) translateX(-80px) } }
.r-rank { font: italic 900 38px var(--display); color: var(--c) }
.r-name { font: italic 900 26px var(--display); text-transform: uppercase; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.r-name .mvp { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; font: 800 12px var(--body); letter-spacing: .15em; color: #1a0b00; background: var(--amber); padding: 2px 8px; vertical-align: middle }
.r-name .mvp svg { width: 14px; height: 14px }
.r-stat { text-align: right } .r-stat b { display: block; font: italic 900 26px/1 var(--display); font-variant-numeric: tabular-nums } .r-stat span { font-size: 11px; letter-spacing: .2em; color: var(--muted) }
.results-actions { display: flex; gap: 14px; align-items: center }

/* ---------- Modal, toast, errors ---------- */
.modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(4,6,16,.7); backdrop-filter: blur(6px); animation: fade .2s }
@keyframes fade { from { opacity: 0 } }
.modal-card { width: min(460px, 92vw); padding: 24px 28px 28px; background: linear-gradient(135deg, #111c48, #0a1030); box-shadow: inset 0 0 0 1px var(--edge), 0 30px 80px rgba(0,0,0,.6); clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px); animation: pop .35s cubic-bezier(.2,1.5,.4,1) }
@keyframes pop { from { transform: scale(.85); opacity: 0 } }
.modal-card header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px }
.modal-card h2 { margin: 0; font: italic 900 32px var(--display) }
.setting { margin: 16px 0 } .setting.toggle { display: flex; justify-content: space-between; align-items: center } .setting.toggle label { margin: 0 }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; background: linear-gradient(90deg, var(--cyan) var(--v, 50%), rgba(255,255,255,.12) var(--v, 50%)); outline: none; transform: skewX(var(--skew)); cursor: pointer }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 26px; background: #fff; box-shadow: 0 0 12px var(--cyan); cursor: pointer }
input[type=range]::-moz-range-thumb { width: 18px; height: 26px; border: 0; border-radius: 0; background: #fff; box-shadow: 0 0 12px var(--cyan) }
input[type=checkbox] { -webkit-appearance: none; appearance: none; width: 54px; height: 26px; background: rgba(255,255,255,.12); position: relative; cursor: pointer; transform: skewX(var(--skew)); transition: background .2s }
input[type=checkbox]::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 20px; background: #fff; transition: left .2s cubic-bezier(.3,1.6,.5,1) }
input[type=checkbox]:checked { background: var(--blue); box-shadow: 0 0 14px rgba(47,139,255,.6) } input[type=checkbox]:checked::after { left: 29px }
#toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%) skewX(var(--skew)); z-index: 30; padding: 12px 26px; background: linear-gradient(90deg, #1d5fd0, #2f8bff); font: italic 800 16px var(--display); letter-spacing: .08em; box-shadow: 0 10px 40px rgba(0,0,0,.5); animation: pop .3s cubic-bezier(.2,1.5,.4,1) }
#loading-error { position: fixed; inset: 40% 15% auto; padding: 30px; background: #421c28; color: white; z-index: 40; font-size: 18px }

/* ---------- Responsive ---------- */
@media (max-height: 760px) {
  .btn-xl { min-height: 60px } .btn-xl b { font-size: 25px } .how-card span { display: none }
  .boost-gauge { width: 160px; height: 160px } .gauge-text b { font-size: 46px } .minimap-box { width: 180px; height: 180px }
  .banner .b-main { font-size: 60px } #winner { font-size: 90px }
}
@media (max-width: 1100px) {
  .chip { width: 104px } .chip .chip-score { font-size: 21px } .controls-hint { display: none }
  .slots { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 800px) {
  #menu { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; overflow: auto; padding: 18px 16px; background: rgba(7,11,28,.7) }
  .garage { grid-column: 1; grid-row: 3; justify-self: stretch } .how { grid-row: 4 }
  .mini-logo { width: 180px }
  .scoreboard { top: 8px; transform: translateX(-50%) scale(.72); transform-origin: top center }
  .lives-box { top: 86px; left: 10px; transform: scale(.8); transform-origin: top left } .killfeed { top: 90px; right: 10px }
  .minimap-box { width: 130px; height: 130px; left: 12px; bottom: 12px } .boost-gauge { width: 130px; height: 130px; right: 12px; bottom: 12px } .gauge-text b { font-size: 36px }
  .banner .b-main { font-size: 42px } .countdown { font-size: 140px } #winner { font-size: 64px }
  .rrow { grid-template-columns: 44px 1fr 80px 60px; padding: 10px 14px } .rrow .r-stat.lives { display: none } .r-name { font-size: 18px }
  #lobby { padding: 16px } #code { font-size: 36px } .results-actions { flex-wrap: wrap; justify-content: center }
}

/* ---------- Exit ---------- */
.quit-btn:hover { background: rgba(255,61,90,.35); color: #fff; transform: scale(1.08) }
.quit-card { text-align: center } .quit-card p { color: var(--muted); margin: 6px 0 22px }
.quit-actions { display: flex; gap: 14px; justify-content: center }
.quit-yes { background: linear-gradient(100deg, #ff3d5a, #ff6a3d); color: #fff }

/* ---------- Custom cursors ---------- */
:root {
  --cur: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M4 3 L27 13.5 L16.5 16.5 L12.5 28 Z' fill='%23070b1c' stroke='%233ff0ff' stroke-width='2.4' stroke-linejoin='round'/><path d='M8.5 8.5 L19.5 13.5 L14.5 15' fill='none' stroke='%232f8bff' stroke-width='1.6' stroke-linecap='round'/></svg>") 4 3, auto;
  --cur-hot: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><defs><linearGradient id='f' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23ffe066'/><stop offset='1' stop-color='%23ff6a1f'/></linearGradient></defs><path d='M4 3 L27 13.5 L16.5 16.5 L12.5 28 Z' fill='url(%23f)' stroke='%23ffffff' stroke-width='2.2' stroke-linejoin='round'/><circle cx='25' cy='25' r='3' fill='%23ffffff'/></svg>") 4 3, pointer;
}
html, body { cursor: var(--cur) }
.btn, .icon-btn, .arrow-btn, .seg, .leave-match, #splash, input[type=range], input[type=checkbox] { cursor: var(--cur-hot) }
.btn:disabled, .seg:disabled { cursor: var(--cur) }
body.driving:not(.mouse-active) { cursor: none }
.click-ring { position: fixed; z-index: 50; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 2px solid var(--cyan); border-radius: 50%; pointer-events: none; box-shadow: 0 0 14px var(--cyan); animation: click-ring .45s ease-out forwards }
.click-ring.hot { border-color: var(--amber); box-shadow: 0 0 16px var(--orange) }
@keyframes click-ring { from { transform: scale(.2); opacity: 1 } to { transform: scale(1.3); opacity: 0 } }

/* ---------- Appearance picker (menu garage) ---------- */
.garage { max-height: calc(100vh - 150px); overflow: auto }
.look-block { margin-top: 14px }
.look-block .eyebrow em { font-style: normal; letter-spacing: .08em; color: var(--dim); margin-left: 6px }
.swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin-top: 8px }
.swatch { aspect-ratio: 1; border: 0; padding: 0; background: var(--c); transform: skewX(var(--skew)); box-shadow: inset 0 0 0 2px rgba(0,0,0,.25); transition: transform .15s cubic-bezier(.3,1.8,.5,1), box-shadow .15s }
.swatch:hover { transform: skewX(var(--skew)) scale(1.15) }
.swatch.on { box-shadow: 0 0 0 3px #fff, 0 0 18px var(--c); transform: skewX(var(--skew)) scale(1.12) }
.avatars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 8px }
.avatar-btn { aspect-ratio: 1; border: 0; padding: 6px; background: rgba(8,14,38,.8); box-shadow: inset 0 0 0 1px var(--edge); transition: transform .15s cubic-bezier(.3,1.8,.5,1), background .15s, box-shadow .15s }
.avatar-btn img { width: 100%; height: 100%; display: block; opacity: .75; transition: opacity .15s }
.avatar-btn:hover { transform: scale(1.1) } .avatar-btn:hover img { opacity: 1 }
.avatar-btn.on { background: color-mix(in srgb, var(--c) 35%, #0a1233); box-shadow: inset 0 0 0 2px var(--c), 0 0 16px color-mix(in srgb, var(--c) 60%, transparent) }
.avatar-btn.on img { opacity: 1 }

/* ---------- Lobby: roster + rules ---------- */
#lobby { grid-template-rows: auto 1fr auto auto }
.lobby-body { display: grid; grid-template-columns: 1fr 360px; gap: 16px; max-height: 46vh; min-height: 0; margin-bottom: 14px }
.roster-panel, .rules-panel { background: rgba(8,12,32,.82); box-shadow: inset 0 0 0 1px var(--edge); padding: 14px 16px; min-height: 0; display: flex; flex-direction: column; backdrop-filter: blur(6px) }
.rules-panel { overflow: auto; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%) }
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px }
.roster-count { font: italic 800 16px var(--display); color: var(--cyan) }
.rules-lock { font: 700 11px var(--body); letter-spacing: .2em; padding: 3px 8px; background: rgba(255,255,255,.08); color: var(--muted) }
.rules-lock.mine { background: var(--amber); color: #1a0b00 }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; overflow: auto; align-content: start; margin: 0; padding-right: 4px }
.slot { position: relative; display: grid; grid-template-columns: 42px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; min-height: 0; padding: 8px 10px 8px 8px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 30%, #0b1438), rgba(11,20,56,.6)); box-shadow: inset 4px 0 0 var(--c); transform: none; animation: slot-in .4s cubic-bezier(.2,1.3,.3,1) both }
.slot > * { transform: none }
.slot::before, .slot::after { display: none }
.slot .slot-avatar { grid-row: 1 / 3; width: 42px; height: 42px; background: var(--c); padding: 5px; clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%) }
.slot .slot-avatar img { width: 100%; height: 100%; display: block }
.slot .slot-name { font: italic 900 17px/1.1 var(--display); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase }
.slot .slot-car { font-size: 12px; color: #c3cff0; letter-spacing: .1em; display: flex; gap: 6px; align-items: center }
.slot .badge { font-size: 10px; padding: 1px 6px }
.slot.bot-slot { opacity: .8; background: rgba(11,20,56,.55); box-shadow: inset 4px 0 0 rgba(255,255,255,.25) }
@keyframes slot-in { from { opacity: 0; transform: translateY(12px) } }
.rule { margin: 10px 0 12px }
.rule label, .rule .rule-label { display: flex; justify-content: space-between; font: 700 12px var(--body); letter-spacing: .22em; color: var(--muted); margin-bottom: 8px }
.rule label b { font: italic 900 16px var(--display); color: #fff; letter-spacing: .02em }
.chips-row { display: flex; flex-wrap: wrap; gap: 5px }
.chips-row button { border: 0; padding: 7px 10px; background: rgba(255,255,255,.06); color: var(--muted); font: italic 800 12px var(--display); letter-spacing: .06em; transform: skewX(var(--skew)); transition: background .15s, color .15s }
.chips-row button:hover:not(:disabled) { background: rgba(63,240,255,.18); color: #fff }
.chips-row button.on { background: linear-gradient(180deg, #2f8bff, #1d5fd0); color: #fff; box-shadow: 0 0 14px rgba(47,139,255,.45) }
.rules-panel.locked input, .rules-panel.locked .chips-row button { pointer-events: none }
.rules-panel.locked .chips-row button:not(.on) { opacity: .45 }
.rules-map { margin: 6px 0 0; font-size: 13px; color: var(--dim); letter-spacing: .06em }

/* ---------- HUD: leaderboard, killfeed, skill bar ---------- */
.leaderboard { position: absolute; top: 64px; right: 24px; width: 250px; padding: 10px 12px 12px; background: rgba(8,12,32,.72); box-shadow: inset 0 0 0 1px var(--edge); clip-path: polygon(0 0, 100% 0, 100% 100%, 14px 100%, 0 calc(100% - 14px)) }
.leaderboard .eyebrow span { color: var(--cyan); margin-left: 6px; letter-spacing: .1em }
#board { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px }
#board li { --c: #fff; display: grid; grid-template-columns: 22px 22px 1fr auto; gap: 8px; align-items: center; padding: 4px 8px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%); font: 700 14px var(--body); transition: background .3s }
#board li .rk { font: italic 900 14px var(--display); color: var(--c) }
#board li img { width: 22px; height: 22px; background: var(--c); padding: 2px; clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%) }
#board li .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase }
#board li .pc { font: italic 900 15px var(--display); font-variant-numeric: tabular-nums }
#board li.me { box-shadow: inset 0 0 0 2px var(--c); background: color-mix(in srgb, var(--c) 30%, rgba(8,12,32,.8)) }
#board li.dead { opacity: .4 }
#board li.gap { background: none; height: 6px; padding: 0; border-top: 1px dashed rgba(255,255,255,.18) }
#board li.bump { animation: board-bump .5s cubic-bezier(.2,2,.4,1) }
@keyframes board-bump { 40% { transform: scale(1.06) translateX(-6px) } }
.killfeed { top: 214px; left: 24px; right: auto; align-items: flex-start }
.kf { animation-name: kf-in-left }
@keyframes kf-in-left { from { opacity: 0; transform: skewX(var(--skew)) translateX(-80px) } }
.skillbar { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; gap: 14px }
.skill { --c: #3a4a7a; position: relative; width: 70px; height: 70px; display: grid; place-items: center; background: rgba(8,12,32,.78); box-shadow: inset 0 0 0 2px rgba(255,255,255,.12); transform: skewX(var(--skew)); transition: box-shadow .2s, background .2s }
.skill img { width: 44px; height: 44px; transform: skewX(calc(var(--skew) * -1)); opacity: 0; transition: opacity .2s, transform .3s cubic-bezier(.2,1.8,.4,1) }
.skill kbd { position: absolute; top: -9px; left: -6px; transform: skewX(calc(var(--skew) * -1)); z-index: 1 }
.skill.full { background: color-mix(in srgb, var(--c) 28%, rgba(8,12,32,.85)); box-shadow: inset 0 0 0 2px var(--c), 0 0 22px color-mix(in srgb, var(--c) 55%, transparent) }
.skill.full img { opacity: 1 }
.skill.pop img { animation: skill-pop .5s cubic-bezier(.2,2,.4,1) }
@keyframes skill-pop { 0% { transform: skewX(12deg) scale(.2) } 60% { transform: skewX(12deg) scale(1.35) } }
.skill.used { animation: skill-used .45s ease-out }
@keyframes skill-used { 0% { background: #fff } }
.skill-ring { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); transform: skewX(calc(var(--skew) * -1)) rotate(-90deg); pointer-events: none }
.skill-ring circle { fill: none; stroke: var(--c); stroke-width: 3; stroke-dasharray: 0 100; filter: drop-shadow(0 0 4px var(--c)) }
.skill-tip { position: absolute; bottom: calc(100% + 14px); left: 50%; transform: translateX(-50%); white-space: nowrap; font: italic 800 14px var(--display); letter-spacing: .08em; color: var(--c, #fff); text-shadow: 0 0 12px var(--c, #000); opacity: 0; transition: opacity .3s }
.skill-tip.show { opacity: 1 }
.controls-hint { bottom: 116px }
.boost-gauge { bottom: 20px }
@media (max-width: 1100px) { .lobby-body { grid-template-columns: 1fr } .leaderboard { width: 210px } }
@media (max-width: 800px) {
  .leaderboard { top: 70px; right: 8px; width: 170px; transform: scale(.85); transform-origin: top right }
  .killfeed { top: 180px; left: 10px }
  .skill { width: 54px; height: 54px } .skill img { width: 34px; height: 34px } .skillbar { bottom: 150px; gap: 10px }
}

@keyframes nudge { 20%, 60% { translate: -8px 0 } 40%, 80% { translate: 8px 0 } }

/* Lobby layout: header, open space for the 3D lineup, panels, footer. */
.lobby-body { grid-row: 3 }
.lobby-foot { grid-row: 4 }
.slots { align-self: stretch; margin-bottom: 0 }
@media (max-width: 1100px) { .lobby-body { overflow: auto } .rules-panel { overflow: visible; clip-path: none } }

/* Active power-up effects above the skill bar */
.effects { position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%); display: flex; gap: 8px }
.effect { --c: #fff; display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 8px; background: rgba(8,12,32,.85); box-shadow: inset 0 0 0 1px var(--c), 0 0 14px color-mix(in srgb, var(--c) 40%, transparent); transform: skewX(var(--skew)); animation: pop .3s cubic-bezier(.2,1.5,.4,1) }
.effect > * { transform: skewX(calc(var(--skew) * -1)) }
.effect img { width: 20px; height: 20px }
.effect b { font: italic 900 14px var(--display); color: var(--c); min-width: 34px; font-variant-numeric: tabular-nums }
.effect .bar { width: 64px; height: 4px; background: rgba(255,255,255,.15) }
.effect .bar i { display: block; height: 100%; background: var(--c); box-shadow: 0 0 8px var(--c) }
.skill-tip { bottom: calc(100% + 52px) }

/* ---------- Phase 2: profile, quick play, rewards, shop, leaderboard ---------- */
.profile-chip { --c: var(--cyan); display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px 0 6px; border: 0; background: var(--panel); box-shadow: inset 0 0 0 1px var(--edge); transform: skewX(var(--skew)); cursor: var(--cur-hot); transition: box-shadow .2s, transform .2s cubic-bezier(.3,1.8,.5,1) }
.profile-chip > * { transform: skewX(calc(var(--skew) * -1)) }
.profile-chip:hover { box-shadow: inset 0 0 0 2px var(--c), 0 0 24px color-mix(in srgb, var(--c) 35%, transparent); transform: skewX(var(--skew)) scale(1.03) }
.pc-avatar { position: relative; width: 40px; height: 40px; background: var(--c); padding: 4px; border-radius: 4px }
.pc-avatar img { width: 100%; height: 100%; display: block }
.lv-hex { position: absolute; right: -10px; bottom: -8px; min-width: 22px; height: 20px; padding: 0 4px; display: grid; place-items: center; font: 900 12px var(--display); color: #1a0b00; background: linear-gradient(180deg, #ffe066, #ff9a2a); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%) }
.lv-hex.big { position: static; min-width: 64px; height: 56px; font-size: 28px; flex: none }
.pc-main { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 120px }
.pc-main b { font: italic 900 16px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.pc-main small { font-size: 11px; color: var(--muted); letter-spacing: .08em; white-space: nowrap }
.pc-xp { width: 120px; height: 4px; background: rgba(255,255,255,.12) }
.pc-xp i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), #9dfcff); box-shadow: 0 0 8px var(--cyan); transition: width .8s cubic-bezier(.2,1,.3,1) }
.pc-stats { display: flex; flex-direction: column; gap: 2px; align-items: flex-start }
.pc-gold, .pc-streak { display: flex; align-items: center; gap: 5px; font: italic 900 14px/1 var(--display); font-variant-numeric: tabular-nums }
.pc-gold svg, .pc-streak svg { width: 15px; height: 15px }
.pc-gold b { color: var(--amber); display: inline-block }
.pc-streak { color: var(--dim) } .pc-streak.lit { color: #ff8a1f } .pc-streak.lit svg { filter: drop-shadow(0 0 5px #ff8a1f); animation: flicker 1.2s ease-in-out infinite }
@keyframes flicker { 50% { transform: scale(1.15) translateY(-1px) } }
.profile-chip.guest .pc-stats, .profile-chip.guest .pc-xp, .profile-chip.guest .lv-hex { display: none }
.profile-chip.guest { --c: var(--amber) }
.profile-chip.guest .pc-main b { color: var(--amber) }
.profile-chip.guest:not(.offline) { animation: chip-call 2.6s ease-in-out 1.2s 3 }
@keyframes chip-call { 50% { box-shadow: inset 0 0 0 2px var(--amber), 0 0 26px rgba(255,194,63,.45) } }
.profile-chip.offline { opacity: .6 }
.gold-pop { animation: gold-pop .5s cubic-bezier(.2,2,.4,1) }
@keyframes gold-pop { 40% { transform: scale(1.35); color: #fff } }

.btn-quick { position: relative; overflow: visible }
.btn-quick .live-dot { position: absolute; top: 10px; right: 18px; transform: skewX(calc(var(--skew) * -1)); font: 800 11px var(--body); font-style: normal; letter-spacing: .2em; color: #1a0b00; display: flex; align-items: center; gap: 6px }
.btn-quick .live-dot::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #e0002a; animation: live 1.4s ease-out infinite }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(224,0,42,.7) } 100% { box-shadow: 0 0 0 10px rgba(224,0,42,0) } }
.btn.busy { pointer-events: none; filter: saturate(.6) brightness(.9) }
.btn.busy small::after { content: ''; display: inline-block; width: 10px; height: 10px; margin-left: 8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -1px }
@keyframes spin { to { transform: rotate(360deg) } }

/* Locks in the garage */
.swatch, .avatar-btn { position: relative }
.swatch.locked, .avatar-btn.locked { filter: saturate(.45) brightness(.7) }
.swatch.locked::after, .avatar-btn.locked::after { content: ''; position: absolute; right: 2px; bottom: 2px; width: 12px; height: 12px; background: #fff; opacity: .9; -webkit-mask: var(--lock-mask); mask: var(--lock-mask) }
:root { --lock-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 10V7a5 5 0 0 1 10 0v3h1.5v11h-13V10H7Zm2.5 0h5V7a2.5 2.5 0 0 0-5 0v3Z'/></svg>") center / contain no-repeat }
.swatch.locked:hover, .avatar-btn.locked:hover { filter: none }
.car-lock { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0 2px; color: var(--muted); font: 700 13px var(--body); letter-spacing: .2em; animation: fade-up .3s ease both }
.car-lock > svg { width: 16px; height: 16px }
.buy-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; padding: 7px 14px; background: linear-gradient(100deg, #ff6a1f, #ffc23f); color: #1a0b00; font: italic 900 14px var(--display); letter-spacing: .06em; transform: skewX(var(--skew)); cursor: var(--cur-hot); transition: transform .15s cubic-bezier(.3,1.8,.5,1), filter .15s }
.buy-btn:hover { transform: skewX(var(--skew)) scale(1.07); filter: brightness(1.15) }
.buy-btn svg { width: 16px; height: 16px }

/* Reward panel (death screen + results) */
.reward { display: flex; align-items: center; gap: 18px; width: min(760px, 100%); padding: 14px 22px; background: linear-gradient(90deg, rgba(255,194,63,.16), rgba(9,14,36,.85) 45%); box-shadow: inset 0 0 0 1px rgba(255,194,63,.4); transform: skewX(var(--skew)); animation: rrow-in .5s cubic-bezier(.2,1.3,.3,1) .9s both }
.reward > * { transform: skewX(calc(var(--skew) * -1)) }
.rw-item { display: flex; flex-direction: column; align-items: center; min-width: 86px }
.rw-item b { font: italic 900 34px/1 var(--display); font-variant-numeric: tabular-nums }
.rw-item span { font-size: 11px; letter-spacing: .25em; color: var(--muted) }
.rw-item.xp b { color: #9dfcff; text-shadow: 0 0 16px rgba(63,240,255,.6) }
.rw-item.gold { flex-direction: row; gap: 8px } .rw-item.gold > div { display: flex; flex-direction: column; align-items: flex-start }
.rw-item.gold svg { width: 30px; height: 30px; filter: drop-shadow(0 0 8px rgba(255,194,63,.7)) }
.rw-item.gold b { color: var(--amber); text-shadow: 0 0 16px rgba(255,160,40,.6) }
.rw-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px }
.rw-level { display: flex; align-items: center; gap: 10px; font: italic 900 15px var(--display) }
.rw-bar { flex: 1; height: 8px; background: rgba(255,255,255,.12); overflow: hidden }
.rw-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #2f8bff, var(--cyan)); box-shadow: 0 0 10px var(--cyan); transition: width 1.2s cubic-bezier(.2,1,.3,1) }
.rw-level small { font: 700 12px var(--body); color: var(--muted); white-space: nowrap }
.rw-notes { display: flex; flex-wrap: wrap; gap: 6px }
.rw-note { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; font: 800 12px var(--body); letter-spacing: .12em; background: rgba(255,255,255,.08) }
.rw-note svg { width: 14px; height: 14px }
.rw-note.level { background: linear-gradient(90deg, #ffc23f, #ff8a1f); color: #1a0b00; animation: pop .5s cubic-bezier(.2,2,.4,1) 1.6s both }
.rw-note.streak { color: #ff9a3d; box-shadow: inset 0 0 0 1px rgba(255,138,31,.5) }
.rw-note.gift { color: #fff; background: linear-gradient(90deg, #7a3dff, #2f8bff) }
.reward.guest { background: linear-gradient(90deg, rgba(143,160,200,.14), rgba(9,14,36,.85) 45%); box-shadow: inset 0 0 0 1px var(--edge) }
.reward.guest .rw-item b { color: var(--muted); text-shadow: none }
.rw-guest { display: flex; align-items: center; gap: 12px; justify-content: space-between; font-size: 14px; color: var(--muted) }
.rw-guest b { color: #fff }
.reward.pending { justify-content: center; color: var(--muted); letter-spacing: .25em; font-weight: 800 }
.reward.pending span { animation: pulse 1.2s ease-in-out infinite }

/* Quick Play death screen */
.death { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: auto; background: radial-gradient(ellipse at center, rgba(40,4,14,.35) 0%, rgba(7,11,28,.86) 70%); animation: fade .4s ease both; z-index: 8 }
.death-card { display: flex; flex-direction: column; align-items: center; gap: 16px; width: min(780px, 94vw) }
#death-title { margin: 0; font: italic 900 110px/0.95 var(--display); color: #ff5f7a; text-shadow: 0 0 50px rgba(255,40,80,.6); animation: banner-in .7s cubic-bezier(.15,1.6,.35,1) both }
#death-cause { margin: 0; font: italic 800 20px var(--display); letter-spacing: .1em; color: var(--muted); text-transform: uppercase }
.death-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100% }
.death-stats > div { padding: 12px 10px; text-align: center; background: var(--panel); box-shadow: inset 0 0 0 1px var(--edge); transform: skewX(var(--skew)); animation: rrow-in .45s cubic-bezier(.2,1.3,.3,1) both }
.death-stats > div:nth-child(2) { animation-delay: .08s } .death-stats > div:nth-child(3) { animation-delay: .16s } .death-stats > div:nth-child(4) { animation-delay: .24s }
.death-stats b { display: block; font: italic 900 34px/1 var(--display); font-variant-numeric: tabular-nums; transform: skewX(calc(var(--skew) * -1)) }
.death-stats span { display: block; font-size: 11px; letter-spacing: .25em; color: var(--muted); transform: skewX(calc(var(--skew) * -1)) }
.death-actions { display: flex; gap: 14px; align-items: center; margin-top: 4px }
.death .reward { animation-delay: .3s }
#hud.endless .lives-box > .eyebrow, #hud.endless .life-icons { display: none }

/* Forms (auth) */
.auth-tabs { margin: 4px 0 10px } .auth-tabs .seg { flex: 1 }
.auth-note { margin: 8px 0 12px; color: var(--muted); font-size: 14px }
.auth-foot { margin: 14px 0 0; font-size: 12px; color: var(--dim); text-align: center }
.field { display: block; margin: 12px 0 } .field span { display: block; font: 700 12px var(--body); letter-spacing: .28em; color: var(--muted); margin-bottom: 6px }
.field input { width: 100%; height: 48px; padding: 0 16px; background: rgba(4,8,24,.7); border: 0; outline: none; box-shadow: inset 0 0 0 1px var(--edge); transform: skewX(var(--skew)); font: italic 800 19px var(--display); letter-spacing: .04em; user-select: text; transition: box-shadow .2s }
.field input:focus { box-shadow: inset 0 0 0 2px var(--cyan), 0 0 18px rgba(63,240,255,.2) }
.field input::placeholder { font: 600 14px var(--body); color: var(--dim); letter-spacing: .06em }
.form-error { min-height: 20px; margin: 4px 0 8px; color: #ff8fa0; font-weight: 700 } .form-error.shake { animation: shake .4s }
.auth-submit { width: 100% }
.auth-submit.busy span::after { content: ' …' }

/* Account card */
.acc-level { display: flex; align-items: center; gap: 16px; margin: 8px 0 16px }
.acc-xp { flex: 1 } .acc-xp .rw-bar { margin: 6px 0 4px } .acc-xp small { color: var(--muted); font-size: 13px }
.acc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px }
.acc-stats > div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(111,170,255,.16) }
.acc-stats svg { width: 22px; height: 22px; color: var(--cyan) } .acc-stats .flame svg { color: #ff8a1f }
.acc-stats b { font: italic 900 24px/1.1 var(--display) } .acc-stats span { font-size: 10px; letter-spacing: .2em; color: var(--muted) }
.acc-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin: 14px 0 6px }
.acc-days i { height: 30px; display: grid; place-items: center; font: 900 12px var(--display); background: rgba(255,255,255,.06); color: var(--dim); transform: skewX(var(--skew)) }
.acc-days i.on { background: linear-gradient(180deg, #ffb347, #ff6a1f); color: #1a0b00; box-shadow: 0 0 12px rgba(255,120,30,.5) }
.acc-days i.gift { box-shadow: inset 0 0 0 2px #b98cff }
.acc-note { color: var(--muted); font-size: 13px; margin: 6px 0 18px; text-align: center }

/* Leaderboard */
.ranks-card { width: min(560px, 94vw) } .ranks-card .segmented { margin-bottom: 12px } .ranks-card .seg { flex: 1 }
.ranks-list { list-style: none; margin: 0; padding: 0 4px 0 0; display: flex; flex-direction: column; gap: 4px; max-height: 56vh; overflow: auto }
.ranks-list li { --c: #fff; display: grid; grid-template-columns: 36px 34px 1fr auto auto; gap: 10px; align-items: center; padding: 6px 10px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 18%, transparent), transparent 70%); animation: slot-in .35s cubic-bezier(.2,1.3,.3,1) both }
.ranks-list .rk { font: italic 900 18px var(--display); color: var(--muted); text-align: center }
.ranks-list li:nth-child(1) .rk { color: #ffc23f } .ranks-list li:nth-child(2) .rk { color: #dfe6ff } .ranks-list li:nth-child(3) .rk { color: #ff9a5a }
.ranks-list img { width: 34px; height: 34px; background: var(--c); padding: 3px; clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%) }
.ranks-list .nm { font: italic 900 17px var(--display); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ranks-list .lv { font: 800 11px var(--body); letter-spacing: .15em; padding: 2px 7px; background: rgba(255,255,255,.08); color: var(--muted) }
.ranks-list .xp { font: italic 900 16px var(--display); color: #9dfcff; font-variant-numeric: tabular-nums; min-width: 80px; text-align: right }
.ranks-list li.me { box-shadow: inset 0 0 0 2px var(--c) }
.ranks-list li.empty { display: block; padding: 30px 10px; text-align: center; color: var(--muted); background: none; animation: none }

/* Buy card */
.buy-card { text-align: center }
.buy-preview { display: grid; place-items: center; height: 130px; margin: 4px 0 8px }
.buy-preview .big-swatch { width: 110px; height: 110px; background: var(--c); transform: skewX(var(--skew)); box-shadow: 0 0 40px var(--c) }
.buy-preview img { width: 110px; height: 110px; padding: 12px; background: var(--c); clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%); filter: drop-shadow(0 0 20px var(--c)) }
.buy-preview svg { width: 190px; height: 95px; color: var(--c); filter: drop-shadow(0 0 16px var(--c)) }
.buy-name { margin: 0; font: italic 900 24px var(--display); text-transform: uppercase }
.buy-price { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 8px 0 2px; font: italic 900 36px var(--display); color: var(--amber) }
.buy-price svg { width: 32px; height: 32px }
.buy-balance { margin: 0 0 6px; color: var(--muted); font-size: 14px }
.buy-card .quit-actions .btn:disabled { opacity: .55 }

@media (max-width: 800px) {
  .profile-chip .pc-main small, .profile-chip .pc-xp { display: none } .pc-main { min-width: 0 } .pc-main b { max-width: 90px; font-size: 14px }
  #connection { display: none }
  #death-title { font-size: 64px } .death-stats { grid-template-columns: repeat(2, 1fr) } .death-stats b { font-size: 26px }
  .reward { flex-wrap: wrap; gap: 10px } .rw-item b { font-size: 26px } .rw-side { flex-basis: 100% }
}