:root {
  --acc: #ff3d3d; --acc2: #29e7ff; --panel: rgba(10, 12, 20, .78); --line: rgba(255,255,255,.12);
  --txt: #f3f5fa; --mute: #98a2b8; color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #05060c; color: var(--txt);
  font: 500 15px/1.35 "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; -webkit-user-select: none; user-select: none; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }
.screen { position: fixed; inset: 0; z-index: 10; }
.screen.center { display: flex; align-items: center; justify-content: center; background: rgba(4,5,10,.55); backdrop-filter: blur(5px); padding: 16px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; backdrop-filter: blur(14px); padding: 18px; }

.brand { position: absolute; left: 40px; top: 30px; pointer-events: none; }
.brand h1 { margin: 0; font-size: clamp(44px, 7vw, 92px); font-weight: 900; font-style: italic; letter-spacing: -2px; line-height: .95; text-shadow: 0 4px 30px rgba(0,0,0,.6); }
.brand h1 span { color: var(--acc); margin-left: .12em; }
.brand p { margin: 8px 2px; color: #d6dbe8; font-size: 17px; }

.side { position: absolute; right: 28px; top: 28px; bottom: 28px; width: min(390px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 13px; overflow-y: auto; }
.keys { position: absolute; left: 40px; bottom: 28px; display: grid; gap: 5px; font-size: 13.5px; color: #d2d7e3; max-width: 400px; }
.keys b { color: #fff; }
kbd { background: rgba(255,255,255,.13); border-radius: 4px; padding: 0 6px; font: 600 12px/18px inherit; display: inline-block; }
.fld { display: grid; gap: 6px; color: var(--mute); font-size: 12.5px; font-weight: 600; letter-spacing: .3px; }
input, select { background: rgba(255,255,255,.08); color: var(--txt); border: 1px solid var(--line); border-radius: 7px; padding: 9px 11px; font: 600 15px inherit; outline: none; width: 100%; user-select: text; -webkit-user-select: text; }
input:focus, select:focus { border-color: var(--acc2); }
select option { background: #14161f; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.card { background: rgba(255,255,255,.06); border: 2px solid transparent; border-radius: 8px; padding: 8px; cursor: pointer; color: var(--txt); text-align: left; font: inherit; min-width: 0; }
.card:hover { background: rgba(255,255,255,.12); }
.card.sel { border-color: var(--acc); background: rgba(255,61,61,.13); }
.card b { display: block; font-size: 13.5px; white-space: nowrap; }
.card small { color: var(--mute); font-size: 11px; display: block; min-height: 2.6em; }
.stat { height: 4px; background: rgba(255,255,255,.12); margin-top: 4px; border-radius: 2px; overflow: hidden; }
.stat i { display: block; height: 100%; background: var(--acc2); }
.swatches { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255,255,255,.2); cursor: pointer; padding: 0; }
.swatch.sel { outline: 3px solid #fff; outline-offset: 1px; }
.swatches input[type=color] { width: 34px; height: 34px; padding: 1px; border-radius: 8px; cursor: pointer; }
.btn { background: rgba(255,255,255,.1); border: 1px solid var(--line); color: var(--txt); border-radius: 7px; padding: 10px 14px; font: 700 14px inherit; cursor: pointer; transition: background .12s, transform .08s; }
.btn:hover:not(:disabled) { background: rgba(255,255,255,.2); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--acc); border-color: transparent; font-size: 18px; font-style: italic; font-weight: 900; padding: 13px; letter-spacing: .5px; }
.btn.primary:hover:not(:disabled) { background: #ff5a5a; }
.btn.small { padding: 7px 11px; font-size: 13px; }
.btn.ghost { background: transparent; }
.row { display: flex; gap: 8px; }
.row > .btn { flex: 1; }
.join input { text-transform: uppercase; letter-spacing: 3px; text-align: center; flex: 1; min-width: 0; }
.join .btn { flex: 0 0 90px; }
.roomlist { display: grid; gap: 5px; max-height: 130px; overflow-y: auto; font-weight: 500; }
.roomitem { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: rgba(255,255,255,.06); border: 0; color: var(--txt); padding: 7px 10px; border-radius: 6px; cursor: pointer; font: inherit; font-size: 13.5px; text-align: left; }
.roomitem:hover { background: rgba(255,255,255,.14); }
.empty { color: var(--mute); font-size: 13px; }
.foot { align-items: center; justify-content: space-between; margin-top: auto; }
.mini { display: flex; align-items: center; gap: 8px; color: var(--mute); font-size: 13px; }
.mini select { padding: 4px 6px; font-size: 13px; width: auto; }
.conn { font-size: 13px; color: var(--mute); }
.conn.ok { color: #58e08f; }
.conn.bad { color: #ff7070; }

.lobbybox { position: absolute; inset: 24px; margin: auto; max-width: 1040px; max-height: 720px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.lobbyhead { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.lobbyhead small { color: var(--mute); font-size: 12px; }
.code { font-size: 38px; font-weight: 900; letter-spacing: 6px; line-height: 1; color: var(--acc2); user-select: text; -webkit-user-select: text; }
.invite { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 180px; align-items: flex-start; }
.invite small { user-select: text; -webkit-user-select: text; overflow-wrap: anywhere; }
.lobbygrid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 22px; flex: 1; min-height: 0; }
h3 { margin: 0 0 8px; font-size: 15px; }
.tracks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tcard { background: rgba(255,255,255,.06); border: 2px solid transparent; border-radius: 8px; padding: 8px; cursor: pointer; color: var(--txt); font: inherit; text-align: left; min-width: 0; }
.tcard.sel { border-color: var(--acc2); background: rgba(41,231,255,.1); }
.tcard:disabled { cursor: default; }
.tcard:not(.sel):disabled { opacity: .55; }
.tcard canvas { width: 100%; aspect-ratio: 1.25; display: block; }
.tcard b { display: block; font-size: 13.5px; margin-top: 3px; }
.tcard small { color: var(--mute); font-size: 11.5px; display: block; }
.settings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 12px; }
.settings label { display: grid; gap: 4px; color: var(--mute); font-size: 12.5px; font-weight: 600; }
.settings .check { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; color: var(--txt); font-size: 14px; }
.check input { width: 17px; height: 17px; }
.players { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.players li { display: flex; align-items: center; gap: 9px; background: rgba(255,255,255,.06); padding: 7px 10px; border-radius: 6px; }
.players .dot { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.players .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.players small { color: var(--mute); font-size: 12px; white-space: nowrap; }
.players .rdy { color: #58e08f; font-weight: 700; font-size: 12px; }
.chat { margin-top: 10px; display: grid; gap: 6px; }
.chatlog { height: 112px; overflow-y: auto; background: rgba(0,0,0,.28); border-radius: 6px; padding: 7px 9px; font-size: 13.5px; user-select: text; -webkit-user-select: text; }
.chatlog div { overflow-wrap: anywhere; }

/* HUD */
#hud { position: fixed; inset: 0; z-index: 5; pointer-events: none; font-style: italic; text-shadow: 0 1px 6px rgba(0,0,0,.75); }
.hud-tl { position: absolute; left: 22px; top: 18px; display: grid; gap: 2px; }
.pos { font-size: 66px; font-weight: 900; line-height: .95; }
.pos sup { font-size: 24px; font-weight: 700; color: #d6dbe8; vertical-align: top; margin-left: 3px; position: relative; top: 7px; }
.lap { font-size: 18px; color: #d6dbe8; font-weight: 700; }
.lap b { font-size: 25px; color: #fff; }
.time { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.splits { display: flex; gap: 13px; font-size: 13.5px; color: #cdd3e0; font-variant-numeric: tabular-nums; }
.splits b { color: #fff; }
.board { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; font-style: normal; font-size: 13.5px; width: 190px; }
.board li { display: flex; align-items: center; gap: 7px; background: rgba(5,6,12,.5); padding: 2px 8px; border-radius: 4px; }
.board li.me { background: rgba(255,61,61,.55); font-weight: 700; }
.board .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.board .nm { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#minimap { position: absolute; right: 18px; top: 16px; width: 220px; height: 220px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.7)); }
.hud-br { position: absolute; right: 24px; bottom: 20px; width: 200px; display: grid; gap: 9px; justify-items: center; }
.gauge { position: relative; width: 190px; height: 190px; }
.gauge svg { width: 100%; height: 100%; transform: rotate(135deg); }
.gauge circle { fill: none; stroke-width: 11; stroke-dasharray: 75 100; }
.g-bg { stroke: rgba(10,12,20,.62); }
.g-val { stroke: var(--acc2); stroke-linecap: round; filter: drop-shadow(0 0 6px currentColor); }
.g-val.hot { stroke: #ffb02e; }
.g-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.g-num b { font-size: 58px; font-weight: 900; line-height: .95; font-variant-numeric: tabular-nums; }
.g-num small { color: #cdd3e0; font-size: 14px; }
.g-gear { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; font-size: 22px; font-weight: 800; color: var(--acc2); }
.nitro { position: relative; width: 190px; height: 18px; background: rgba(10,12,20,.65); border-radius: 4px; overflow: hidden; border: 1px solid rgba(255,255,255,.2); transform: skewX(-14deg); }
.nitro i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #1e78ff, #29e7ff); }
.nitro.on i { background: linear-gradient(90deg, #ff9a2e, #fff27a); }
.nitro span { position: absolute; inset: 0; text-align: center; font-size: 11.5px; font-weight: 800; letter-spacing: 2px; line-height: 16px; }
.lights { position: absolute; left: 50%; top: 14%; transform: translateX(-50%); display: flex; gap: 14px; background: rgba(5,6,10,.85); padding: 14px 20px; border-radius: 16px; }
.lights i { width: 58px; height: 58px; border-radius: 50%; background: #2a0a0a; display: block; }
.lights i.on { background: #ff2020; box-shadow: 0 0 34px #ff2020; }
.lights.go i { background: #27e36a; box-shadow: 0 0 34px #27e36a; }
.banner { position: absolute; left: 0; right: 0; top: 30%; text-align: center; font-size: clamp(40px, 8vw, 96px); font-weight: 900; opacity: 0; transition: opacity .25s; padding: 0 16px; }
.banner.show { opacity: 1; }
.sub { position: absolute; left: 0; right: 0; bottom: 17%; text-align: center; font-size: 22px; font-weight: 800; color: var(--acc2); padding: 0 16px; }
.sub.warn { color: #ff5757; font-size: 34px; }
#tags .tag { position: absolute; left: 0; top: 0; font-style: normal; font-size: 12.5px; font-weight: 700; white-space: nowrap; will-change: transform; padding: 1px 7px; border-radius: 4px; background: rgba(5,6,12,.58); border-left: 3px solid #fff; }
.hud-info { position: absolute; left: 22px; bottom: 12px; font-size: 12px; color: #b4bccc; font-style: normal; }
.racechat { position: absolute; left: 22px; bottom: 34px; width: 340px; font-style: normal; font-size: 13.5px; display: grid; gap: 2px; }
.racechat div { background: rgba(5,6,12,.5); padding: 2px 8px; border-radius: 4px; overflow-wrap: anywhere; }
#raceChatInput { position: absolute; left: 22px; bottom: 34px; width: 340px; pointer-events: auto; font-style: normal; }
.touch { position: absolute; inset: auto 0 12px 0; display: flex; justify-content: space-between; padding: 0 14px; pointer-events: none; align-items: flex-end; }
.touch button { pointer-events: auto; touch-action: none; width: 76px; height: 76px; border-radius: 50%; background: rgba(255,255,255,.14); border: 2px solid rgba(255,255,255,.34); color: #fff; font: 800 15px inherit; margin: 3px; }
.touch button.down { background: rgba(255,255,255,.4); }
.t-left, .t-right { display: flex; }

.small-panel { display: grid; gap: 10px; width: min(380px, 100%); text-align: center; }
.small-panel h2 { margin: 2px 0 6px; font-size: 19px; }
.resultbox { display: grid; gap: 12px; width: min(640px, 100%); max-height: 100%; overflow: auto; }
.resultbox h2 { margin: 0; font-size: 32px; font-style: italic; font-weight: 900; }
.resultbox table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.resultbox th { text-align: left; color: var(--mute); font-size: 12.5px; padding: 5px 8px; }
.resultbox td { padding: 8px; border-top: 1px solid var(--line); }
.resultbox tr.me td { background: rgba(255,61,61,.2); }
.resultbox .pl { font-weight: 900; font-size: 19px; font-style: italic; }
.resultbox small { color: var(--mute); text-align: center; }
.loading { position: fixed; inset: 0; z-index: 30; background: #05060c; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.spin { width: 46px; height: 46px; border-radius: 50%; border: 4px solid rgba(255,255,255,.15); border-top-color: var(--acc); animation: sp 0.8s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }
.toast { position: fixed; left: 50%; bottom: 40px; transform: translate(-50%, 20px); background: rgba(10,12,20,.94); border: 1px solid var(--line); padding: 10px 18px; border-radius: 8px; opacity: 0; transition: .2s; z-index: 40; pointer-events: none; max-width: calc(100vw - 32px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 900px) {
  .keys { display: none; }
  .brand { left: 16px; top: 10px; }
  .brand p { display: none; }
  .brand h1 { font-size: 34px; }
  .side { left: 16px; right: 16px; width: auto; top: 56px; bottom: 12px; }
  .lobbybox { inset: 8px; max-height: none; }
  .lobbygrid { grid-template-columns: 1fr; }
  .pos { font-size: 44px; }
  .board { display: none; }
  #minimap { width: 120px; height: 120px; right: 10px; top: 10px; }
  .hud-br { right: 8px; bottom: auto; top: 136px; width: 120px; }
  .gauge { width: 112px; height: 112px; }
  .g-num b { font-size: 32px; }
  .g-gear { display: none; }
  .nitro { width: 112px; }
  .racechat { display: none; }
  .lights i { width: 38px; height: 38px; }
}