/* ROCKET PILOTS — visual de torre de cronometragem: painéis inclinados, âmbar de sinal + ciano de telemetria. */
:root {
  --ink: #07060f;
  --panel: rgba(16, 13, 30, 0.88);
  --panel-2: rgba(30, 25, 54, 0.9);
  --line: rgba(234, 230, 255, 0.12);
  --text: #eae6ff;
  --mute: #9a93bd;
  --amber: #ffb000;
  --amber-ink: #1a1000;
  --cyan: #3de0ff;
  --red: #ff3b5c;
  --green: #3ddc84;
  --display: 'Saira Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --body: 'Barlow', 'Segoe UI', system-ui, sans-serif;
  --skew: -12deg;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; overflow: hidden; background: var(--ink); color: var(--text);
  font: 15px/1.45 var(--body); -webkit-font-smoothing: antialiased; user-select: none;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
[hidden] { display: none !important; }
code, kbd { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.85em; }

#stage { position: fixed; inset: 0; }
#stage canvas { display: block; }

/* ---------- menus ---------- */
#ui {
  position: fixed; inset: 0; overflow-y: auto; padding: max(24px, env(safe-area-inset-top)) 16px 24px;
  background: linear-gradient(90deg, rgba(7, 6, 15, 0.92) 0%, rgba(7, 6, 15, 0.7) 38%, rgba(7, 6, 15, 0.1) 70%, rgba(7, 6, 15, 0) 100%);
}
body[data-screen="Solo"] #ui, body[data-screen="Garage"] #ui, body[data-screen="Shop"] #ui,
body[data-screen="Results"] #ui, body[data-screen="Options"] #ui { background: rgba(7, 6, 15, 0.72); }
body[data-screen="Pause"] #ui { background: rgba(7, 6, 15, 0.55); }
.screen { max-width: 1120px; margin: 0 auto; }
.panel { display: flex; flex-direction: column; gap: 18px; max-width: 460px; }
.panel.wide { max-width: none; background: var(--panel); border: 1px solid var(--line); padding: 20px; }
.panel.narrow { max-width: 360px; margin: 18vh auto 0; background: var(--panel); border: 1px solid var(--line); padding: 24px; }
#scrOptions .panel, #scrLobby .panel { background: var(--panel); border: 1px solid var(--line); padding: 22px; max-width: 620px; margin: 0 auto; }

.logo { margin: 12px 0 0; font-family: var(--display); font-weight: 800; line-height: 0.84; letter-spacing: 0.01em; display: flex; flex-direction: column; align-items: flex-start; gap: 0; transform: skewX(var(--skew)); }
.logo-a { font-size: clamp(50px, 8.5vw, 88px); text-transform: uppercase; }
.logo-b { text-transform: uppercase; margin-left: 0.35em; font-size: clamp(60px, 10.5vw, 112px); color: transparent; -webkit-text-stroke: 2px var(--amber); text-shadow: 0 0 28px rgba(255, 176, 0, 0.35); }
.tag { margin: 0; color: var(--mute); max-width: 38ch; font-size: 16px; }

.pilot { background: var(--panel); border: 1px solid var(--line); padding: 12px 14px; display: grid; gap: 6px; }
.lbl { font: 600 12px var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.pilot input { background: transparent; border: 0; border-bottom: 1px solid var(--line); font: 700 26px var(--display); padding: 0 0 2px; width: 100%; }
.pilot input:focus { outline: none; border-color: var(--amber); }
.pilot-row { display: flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; }
.lvl { font: 600 13px var(--display); letter-spacing: 0.1em; color: var(--mute); }
.lvl b { color: var(--text); font-size: 18px; }
.xpbar { flex: 1; height: 4px; background: var(--line); }
.xpbar i { display: block; height: 100%; background: var(--cyan); }
.cred { font: 700 20px var(--display); color: var(--amber); font-variant-numeric: tabular-nums; white-space: nowrap; }

.menu { display: grid; gap: 8px; }
.mbtn {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0; text-align: left;
  padding: 11px 22px; border: 1px solid var(--line); background: var(--panel-2);
  transform: skewX(var(--skew)); transition: transform 0.12s, background 0.12s, border-color 0.12s;
}
.mbtn > * { transform: skewX(calc(var(--skew) * -1)); }
.mbtn span { font: 700 22px/1.1 var(--display); text-transform: uppercase; letter-spacing: 0.03em; }
.mbtn small { color: var(--mute); font-size: 13px; }
.mbtn:hover:not(:disabled) { border-color: var(--amber); transform: skewX(var(--skew)) translateX(6px); }
.mbtn.primary { background: var(--amber); color: var(--amber-ink); border-color: var(--amber); }
.mbtn.primary small { color: rgba(26, 16, 0, 0.72); }
.mbtn.danger { border-color: rgba(255, 59, 92, 0.5); }
.mbtn.danger span { color: var(--red); }
.mbtn.ghost { opacity: 0.6; }
.mbtn:disabled { cursor: not-allowed; opacity: 0.55; }
.mbtn.primary:disabled { background: var(--panel-2); color: var(--text); border-color: var(--line); }
.mbtn.primary:disabled small { color: var(--mute); }

.career { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; border-top: 1px solid var(--line); padding-top: 12px; }
.career div { display: grid; }
.career dt { font: 600 11px var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.career dd { margin: 0; font: 700 26px var(--display); font-variant-numeric: tabular-nums; }

.phead { display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.phead h2 { margin: 0; flex: 1; font: 800 34px/1 var(--display); text-transform: uppercase; transform: skewX(var(--skew)); }
.panel.narrow h2 { margin: 0; font: 800 34px/1 var(--display); text-transform: uppercase; }
.back { background: none; border: 1px solid var(--line); padding: 6px 12px; font: 600 15px var(--display); letter-spacing: 0.06em; text-transform: uppercase; }
.back:hover { border-color: var(--amber); }
.muted { color: var(--mute); }
.empty { color: var(--mute); padding: 40px 0; }

/* pistas */
.tracks { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.tcard { display: flex; gap: 12px; align-items: center; text-align: left; padding: 10px; background: var(--panel-2); border: 1px solid var(--line); }
.tcard:hover { border-color: rgba(255, 176, 0, 0.6); }
.tcard.sel { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); }
.tthumb { width: 96px; height: 96px; flex: none; background: rgba(0, 0, 0, 0.3); }
.tthumb.rnd { display: grid; place-items: center; font: 800 54px var(--display); color: var(--amber); }
.tinfo { display: grid; gap: 3px; }
.tinfo b { font: 700 22px/1 var(--display); text-transform: uppercase; }
.tinfo span { color: var(--mute); font-size: 13.5px; }
.tinfo em { font-style: normal; font-size: 12px; color: var(--cyan); letter-spacing: 0.02em; }
.solo-foot { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.seg { display: flex; border: 1px solid var(--line); transform: skewX(var(--skew)); }
.seg button { background: none; border: 0; padding: 10px 18px; font: 700 17px var(--display); text-transform: uppercase; color: var(--mute); }
.seg button > * , .seg button { letter-spacing: 0.04em; }
.seg button.on { background: var(--text); color: var(--ink); }
.go { min-width: 260px; }

/* garagem e loja */
.split { display: grid; grid-template-columns: minmax(200px, 260px) 1fr; gap: 20px; }
.vlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; align-content: start; }
.vitem { width: 100%; display: grid; grid-template-columns: 14px 1fr auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; padding: 9px 12px; background: var(--panel-2); border: 1px solid var(--line); }
.vitem i { grid-row: 1 / 3; width: 14px; height: 34px; transform: skewX(var(--skew)); }
.vitem b { font: 700 20px/1 var(--display); text-transform: uppercase; }
.vitem small { grid-column: 2; color: var(--mute); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.vitem small.short { color: var(--red); }
.vitem em { grid-column: 3; grid-row: 1 / 3; font: 700 11px var(--display); letter-spacing: 0.12em; color: var(--amber); font-style: normal; }
.vitem.sel { display: grid; border-color: var(--amber); }
.vdetail { display: grid; gap: 14px; align-content: start; }
.pv-slot { height: 220px; background: radial-gradient(ellipse at 50% 70%, rgba(255, 176, 0, 0.12), transparent 60%); }
.pv { width: 100%; height: 100%; display: block; }
.vhead h3 { margin: 0; font: 800 40px/1 var(--display); text-transform: uppercase; transform: skewX(var(--skew)); }
.vhead p { margin: 4px 0 0; color: var(--mute); }
.paints { display: flex; flex-wrap: wrap; gap: 6px; }
.sw { width: 26px; height: 20px; border: 2px solid transparent; transform: skewX(var(--skew)); }
.sw.on { border-color: var(--text); box-shadow: 0 0 0 1px var(--ink); }
.stats { display: grid; gap: 7px; }
.srow { display: grid; grid-template-columns: 118px 1fr auto 118px; gap: 10px; align-items: center; }
#scrShop .srow { grid-template-columns: 118px 1fr auto; }
.sname { font: 600 14px var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.sbar { height: 10px; background: rgba(255, 255, 255, 0.07); display: flex; transform: skewX(var(--skew)); }
.sbar i { display: block; height: 100%; background: var(--text); }
.sbar i.add { background: var(--amber); }
.sbar.weight i { background: var(--cyan); }
.pips { display: flex; gap: 3px; min-width: 58px; font-size: 11px; }
.pips b, .pips s { width: 8px; height: 10px; transform: skewX(var(--skew)); }
.pips b { background: var(--amber); }
.pips s { background: rgba(255, 255, 255, 0.1); }
.upg { background: none; border: 1px solid rgba(255, 176, 0, 0.55); color: var(--amber); padding: 4px 8px; font: 700 14px var(--display); font-variant-numeric: tabular-nums; }
.upg:hover:not(:disabled) { background: var(--amber); color: var(--amber-ink); }
.upg:disabled { opacity: 0.4; cursor: not-allowed; border-color: var(--line); color: var(--mute); }
.specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 6px 0 0; }
.specs div { border-left: 2px solid var(--line); padding-left: 8px; }
.specs dt { font-size: 11.5px; color: var(--mute); }
.specs small { display: block; font-size: 11.5px; color: var(--mute); }
.specs.arms { margin-top: 0; }
.grid-note { margin: 0; max-width: 62ch; }
.g-easy { color: var(--green); } .g-norm { color: var(--amber); } .g-hard { color: var(--red); } .g-elite { color: #ff7ae0; }
.specs dd { margin: 0; font: 700 18px var(--display); font-variant-numeric: tabular-nums; }

/* opções */
.keys { border-collapse: collapse; width: 100%; font-size: 14px; }
.keys th { text-align: left; font: 600 14px var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); padding: 6px 12px 6px 0; white-space: nowrap; vertical-align: top; }
.keys td { padding: 6px 0; border-bottom: 1px solid var(--line); }
kbd { display: inline-block; min-width: 22px; text-align: center; padding: 1px 6px; border: 1px solid var(--line); border-bottom-width: 2px; background: var(--panel-2); }
.rules { margin: 0; color: var(--mute); max-width: 66ch; }
.rules b { color: #ff7ae0; }
.opts { display: grid; gap: 10px; }
.tog, .sel { display: flex; align-items: center; gap: 10px; }
.tog input { width: 18px; height: 18px; accent-color: var(--amber); }
.sel select { background: var(--panel-2); border: 1px solid var(--line); padding: 4px 8px; }

/* lobby */
.lobby { display: grid; gap: 10px; }
.lcount b { font: 800 88px/0.9 var(--display); color: var(--amber); font-variant-numeric: tabular-nums; }
.lcount small { font: 600 22px var(--display); color: var(--mute); }
.lobby p { margin: 0; }
.lbar { height: 6px; background: var(--line); }
.lbar i { display: block; height: 100%; width: 0; background: var(--amber); transition: width 0.3s; }
.lnames { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; max-height: 160px; overflow: auto; }
.lnames li { background: var(--panel-2); padding: 2px 10px; font: 600 15px var(--display); }

/* resultados */
.res-top { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-end; }
.res-pos { display: grid; transform: skewX(var(--skew)); }
.res-pos small { font: 700 18px var(--display); letter-spacing: 0.2em; color: var(--mute); }
.res-pos b { font: 800 clamp(96px, 16vw, 170px)/0.85 var(--display); color: var(--amber); font-variant-numeric: tabular-nums; }
.res-pos span { font: 600 20px var(--display); color: var(--mute); }
.res-reward { flex: 1; min-width: 260px; display: grid; gap: 6px; }
.res-reward table { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.res-reward th { text-align: left; font-weight: 500; color: var(--mute); padding: 3px 0; }
.res-reward td { text-align: right; font: 700 18px var(--display); color: var(--amber); }
.res-reward tr.tot th, .res-reward tr.tot td { border-top: 1px solid var(--line); padding-top: 6px; color: var(--text); font: 700 22px var(--display); }
.res-reward p { margin: 0; }
.up { color: var(--cyan); }
.standings { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 4px 16px; }
.standings li { display: grid; grid-template-columns: 36px 1fr auto; align-items: baseline; gap: 8px; padding: 4px 8px; border-bottom: 1px solid var(--line); }
.standings b { font: 700 20px var(--display); font-variant-numeric: tabular-nums; color: var(--mute); }
.standings span { font-weight: 600; }
.standings em { font-style: normal; font-size: 11px; color: var(--cyan); text-transform: uppercase; letter-spacing: 0.08em; }
.standings small { color: var(--mute); font-size: 12px; }
.standings li.me { background: rgba(255, 176, 0, 0.14); }
.standings li.me b { color: var(--amber); }
.res-foot { display: flex; flex-wrap: wrap; gap: 10px; }

#toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--amber); color: var(--amber-ink); padding: 8px 18px; font: 700 18px var(--display); text-transform: uppercase; transition: 0.2s;
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; font-family: var(--display); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.h-rank { position: absolute; left: 18px; top: max(14px, env(safe-area-inset-top)); }
.h-pos { font-weight: 800; font-size: 76px; line-height: 0.9; font-variant-numeric: tabular-nums; transform: skewX(var(--skew)); }
.h-pos small { font-size: 28px; color: var(--mute); font-weight: 600; }
.h-alive { font-size: 16px; color: var(--mute); letter-spacing: 0.06em; text-transform: uppercase; }
.h-alive b { color: var(--text); }
.h-cut { margin-top: 4px; font-size: 15px; font-weight: 600; letter-spacing: 0.04em; color: var(--cyan); text-transform: uppercase; }
.h-cut.danger { color: var(--red); animation: blink 0.6s steps(2) infinite; }
.h-board { position: absolute; left: 18px; top: 170px; list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; width: 190px; }
.h-board li { display: grid; grid-template-columns: 28px 1fr; background: rgba(7, 6, 15, 0.55); padding: 1px 8px; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.h-board li b { color: var(--mute); font-variant-numeric: tabular-nums; }
.h-board li span { overflow: hidden; text-overflow: ellipsis; }
.h-board li.me { background: rgba(255, 176, 0, 0.85); color: var(--amber-ink); text-shadow: none; }
.h-board li.me b { color: var(--amber-ink); }
.h-board li.dead { opacity: 0.45; }
.h-lap { position: absolute; right: 18px; top: max(14px, env(safe-area-inset-top)); text-align: right; }
.h-lapn { font-size: 20px; font-weight: 600; letter-spacing: 0.1em; color: var(--mute); }
.h-lapn b { color: var(--text); font-size: 40px; font-weight: 800; }
.h-time { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.h-last { font-size: 14px; color: var(--mute); font-variant-numeric: tabular-nums; }
.h-mini { position: absolute; right: 12px; top: 128px; width: 180px; height: 180px; }
.h-feed { position: absolute; right: 18px; top: 318px; list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; justify-items: end; font-size: 15px; }
.h-feed li { background: rgba(7, 6, 15, 0.6); padding: 1px 10px; transition: opacity 1s; }
.h-feed li i { color: var(--red); font-style: normal; padding: 0 4px; }
.h-feed li.mine { background: rgba(61, 224, 255, 0.85); color: var(--ink); text-shadow: none; }
.h-feed li.fade { opacity: 0; }
.h-dash { position: absolute; left: 18px; bottom: max(18px, env(safe-area-inset-bottom)); display: flex; align-items: flex-end; gap: 20px; }
.h-speed { font-weight: 800; font-size: 64px; line-height: 0.85; font-variant-numeric: tabular-nums; min-width: 150px; transform: skewX(var(--skew)); }
.h-speed small { font-size: 18px; color: var(--mute); margin-left: 4px; font-weight: 600; }
.h-energy { width: min(360px, 42vw); display: grid; gap: 4px; }
.h-elabel { display: flex; justify-content: space-between; font-size: 14px; letter-spacing: 0.14em; color: var(--mute); font-variant-numeric: tabular-nums; }
.h-ebar { position: relative; height: 16px; background: rgba(7, 6, 15, 0.6); border: 1px solid var(--line); transform: skewX(var(--skew)); overflow: hidden; }
.h-ebar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--green); transition: width 0.1s; }
.h-ebar i.mid { background: var(--amber); }
.h-ebar i.low { background: var(--red); }
.h-bbar { position: relative; height: 10px; background: rgba(7, 6, 15, 0.6); border: 1px solid var(--line); transform: skewX(var(--skew)); overflow: hidden; }
.h-bbar i { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(61, 224, 255, 0.45); }
.h-bbar i.ok { background: var(--cyan); }
.h-bbar b { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(7, 6, 15, 0.9); }
.h-bbar b:nth-of-type(1) { left: 25%; } .h-bbar b:nth-of-type(2) { left: 50%; } .h-bbar b:nth-of-type(3) { left: 75%; }
.h-respawn { position: absolute; left: 0; right: 0; top: 42%; text-align: center; font-size: 28px; font-weight: 700; color: var(--red); letter-spacing: 0.06em; }
.h-ebar em { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0 3px, transparent 3px 6px); }
.h-hints { display: flex; gap: 6px; }
.chip { font-size: 13px; letter-spacing: 0.08em; padding: 1px 8px; border: 1px solid var(--line); color: var(--mute); background: rgba(7, 6, 15, 0.5); }
.chip.ready { color: var(--amber-ink); background: var(--amber); border-color: var(--amber); text-shadow: none; }
.chip.active { background: #fff; color: var(--ink); border-color: #fff; text-shadow: none; }
.chip.draft { color: var(--ink); background: var(--cyan); border-color: var(--cyan); text-shadow: none; }
.chip.pit { color: #fff; background: #d62fa8; border-color: #ff7ae0; }
.h-od { position: absolute; right: 18px; bottom: max(22px, env(safe-area-inset-bottom)); width: min(260px, 30vw); text-align: right; }
.h-odbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; height: 12px; }
.h-odbar i { background: rgba(7, 6, 15, 0.6); border: 1px solid var(--line); transform: skewX(var(--skew)); }
.h-odbar i.on { background: #ff3bd4; border-color: #ff9ae8; }
.h-od.ready .h-odbar i.on { animation: rainbow 0.6s linear infinite; }
@keyframes rainbow { 0% { background: #ff3b5c; } 25% { background: #ffd21f; } 50% { background: #3ddc84; } 75% { background: #3de0ff; } 100% { background: #ff3bd4; } }
.h-odlabel { font-size: 14px; letter-spacing: 0.16em; color: var(--mute); margin-top: 3px; }
.h-od.ready .h-odlabel { color: #ff7ae0; animation: blink 0.8s steps(2) infinite; }
.h-big { position: absolute; left: 0; right: 0; top: 30%; text-align: center; font-weight: 800; font-size: clamp(48px, 10vw, 120px); line-height: 1; opacity: 0; transform: skewX(var(--skew)) scale(0.8); text-transform: uppercase; }
.h-big.pop { animation: pop 1.4s ease-out forwards; }
.h-big.count { color: var(--text); font-size: clamp(90px, 18vw, 200px); }
.h-big.go { color: var(--amber); }
.h-big.good { color: var(--cyan); }
.h-big.bad { color: var(--red); }
.h-big.info { color: var(--text); font-size: clamp(40px, 7vw, 80px); }
.h-warn { position: absolute; left: 0; right: 0; top: 18%; text-align: center; font-size: 22px; font-weight: 700; letter-spacing: 0.12em; color: var(--red); opacity: 0; }
.h-warn.on { opacity: 1; animation: blink 0.5s steps(2) infinite; }
.h-spec { position: absolute; left: 0; right: 0; bottom: 90px; text-align: center; font-size: 20px; font-weight: 600; color: var(--mute); }
/* armas */
.h-arms { position: absolute; right: 18px; bottom: calc(max(22px, env(safe-area-inset-bottom)) + 44px); display: grid; gap: 4px; justify-items: end; }
.h-arm { display: flex; align-items: center; gap: 8px; font-size: 15px; letter-spacing: 0.1em; }
.h-arm .k { border: 1px solid var(--line); padding: 0 6px; font-size: 13px; color: var(--mute); background: rgba(7, 6, 15, 0.5); }
.h-arm .pips { display: flex; gap: 3px; }
.h-arm .pips i { width: 10px; height: 14px; background: rgba(255, 255, 255, 0.12); transform: skewX(var(--skew)); }
.h-arm .pips i.on { background: var(--amber); }
.tier { color: var(--amber); }
.h-xhair { position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%); font: 700 34px var(--display); color: #fff; opacity: 0; text-shadow: 0 0 6px #ff3b5c; }
.h-xhair.on { animation: hitm 0.35s ease-out; }
.h-flash { position: absolute; inset: 0; box-shadow: inset 0 0 120px rgba(255, 40, 60, 0.55); opacity: 0; }
.h-flash.on { animation: flash 0.45s ease-out; }
.h-big.pick { color: var(--green); font-size: clamp(30px, 5vw, 54px); top: 58%; }
.h-big.tier-easy { color: var(--green); } .h-big.tier-hard { color: var(--red); } .h-big.tier-elite { color: #ff7ae0; }
@keyframes hitm { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1.4); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
@keyframes flash { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pop { 0% { opacity: 0; transform: skewX(var(--skew)) scale(1.4); } 12% { opacity: 1; transform: skewX(var(--skew)) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: skewX(var(--skew)) scale(0.96); } }
@keyframes blink { 50% { opacity: 0.35; } }

/* ---------- controles de toque (celular/tablet) ---------- */
#touch { position: fixed; inset: 0; pointer-events: none; z-index: 5; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#touch button { touch-action: none; -webkit-tap-highlight-color: transparent; }
.t-zone { position: absolute; left: 0; bottom: 0; width: 50vw; height: 72vh; pointer-events: auto; touch-action: none; }
.t-base {
  position: absolute; left: calc(env(safe-area-inset-left) + 26px); bottom: calc(env(safe-area-inset-bottom) + 26px);
  width: 136px; height: 136px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle, rgba(234, 230, 255, 0.06) 0 55%, rgba(234, 230, 255, 0.14) 56% 58%, rgba(7, 6, 15, 0.25) 59%);
  border: 2px solid rgba(234, 230, 255, 0.28); opacity: 0.6; transition: opacity 0.15s;
}
.t-base.live { left: 0; top: 0; bottom: auto; opacity: 1; transition: none; }
.t-knob { width: 58px; height: 58px; border-radius: 50%; background: rgba(234, 230, 255, 0.85); box-shadow: 0 0 0 4px rgba(61, 224, 255, 0.35), 0 4px 14px rgba(0, 0, 0, 0.5); }
.t-base::before, .t-base::after { content: ''; position: absolute; top: 50%; width: 0; height: 0; border: 7px solid transparent; transform: translateY(-50%); opacity: 0.55; }
.t-base::before { left: 8px; border-right-color: var(--text); }
.t-base::after { right: 8px; border-left-color: var(--text); }

.t-pad { position: absolute; right: calc(env(safe-area-inset-right) + 12px); bottom: calc(env(safe-area-inset-bottom) + 12px); width: 272px; height: 262px; transform-origin: 100% 100%; }
.t-btn {
  position: absolute; display: grid; place-items: center; align-content: center; gap: 1px; border-radius: 50%; pointer-events: auto;
  color: var(--text); background: rgba(10, 8, 22, 0.5); border: 2px solid var(--c, rgba(234, 230, 255, 0.4));
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.35); transition: transform 0.06s, background 0.1s;
}
.t-btn b { font: 800 13px/1 var(--display); letter-spacing: 0.06em; text-shadow: 0 1px 3px #000; }
.t-btn i { font: 700 12px/1 var(--display); font-style: normal; color: var(--c); }
.t-btn.on { transform: scale(0.92); background: var(--c); color: var(--ink); }
.t-btn.on b, .t-btn.on i { color: var(--ink); text-shadow: none; }
.t-btn.empty { opacity: 0.45; }
.t-boost { --c: var(--amber); right: 0; bottom: 0; width: 104px; height: 104px; }
.t-boost b { font-size: 17px; }
.t-boost.ready { background: rgba(255, 176, 0, 0.22); }
.t-ring { position: absolute; inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); transform: rotate(-90deg); pointer-events: none; }
.t-ring circle { fill: none; stroke: var(--amber); stroke-width: 6; stroke-dasharray: 289; stroke-dashoffset: 289; stroke-linecap: round; opacity: 0.9; }
.t-fire { --c: #ff4d6d; right: 118px; bottom: 6px; width: 80px; height: 80px; }
.t-drift { --c: var(--cyan); right: 10px; bottom: 118px; width: 76px; height: 76px; }
.t-mine { --c: #ff9a3d; right: 100px; bottom: 100px; width: 64px; height: 64px; }
.t-brake { --c: rgba(234, 230, 255, 0.55); right: 210px; bottom: 10px; width: 58px; height: 58px; }
.t-brake b { font-size: 11px; }
.t-od { --c: #ff3bd4; right: 24px; bottom: 204px; width: 58px; height: 58px; opacity: 0.4; }
.t-od.ready { opacity: 1; background: rgba(255, 59, 212, 0.3); animation: odpulse 0.8s ease-in-out infinite; }
@keyframes odpulse { 50% { box-shadow: 0 0 22px rgba(255, 59, 212, 0.9); } }
.t-pause { position: absolute; top: calc(env(safe-area-inset-top) + 10px); right: calc(env(safe-area-inset-right) + 10px); width: 44px; height: 44px; pointer-events: auto; display: flex; gap: 6px; align-items: center; justify-content: center; background: rgba(10, 8, 22, 0.55); border: 1px solid var(--line); border-radius: 10px; }
.t-pause i { width: 5px; height: 16px; background: var(--text); border-radius: 1px; }

/* HUD no modo toque: armas e overdrive ficam nos próprios botões; painel de velocidade vai para o topo */
body.touch .h-arms, body.touch .h-od, body.touch #hBoost, body.touch .h-board, body.touch .h-feed { display: none; }
body.touch .h-rank { left: calc(env(safe-area-inset-left) + 12px); top: calc(env(safe-area-inset-top) + 8px); }
body.touch .h-pos { font-size: 46px; }
body.touch .h-pos small { font-size: 20px; }
body.touch .h-alive { font-size: 12px; }
body.touch .h-lap { right: calc(env(safe-area-inset-right) + 64px); top: calc(env(safe-area-inset-top) + 8px); }
body.touch .h-lapn { font-size: 14px; } body.touch .h-lapn b { font-size: 26px; }
body.touch .h-time { font-size: 17px; }
body.touch .h-last { display: none; }
body.touch .h-mini { width: 104px; height: 104px; top: calc(env(safe-area-inset-top) + 60px); right: calc(env(safe-area-inset-right) + 8px); }
body.touch .h-dash { left: 50%; bottom: auto; top: calc(env(safe-area-inset-top) + 10px); transform: translateX(-50%); gap: 12px; align-items: center; }
body.touch .h-speed { font-size: 34px; min-width: 88px; text-align: right; }
body.touch .h-speed small { font-size: 12px; }
body.touch .h-energy { width: min(240px, 34vw); gap: 3px; }
body.touch .h-elabel { font-size: 11px; }
body.touch .h-ebar { height: 11px; } body.touch .h-bbar { height: 7px; }
body.touch .h-warn { top: 24%; font-size: 16px; }
body.touch .h-big { top: 26%; }
body.touch .h-spec { bottom: auto; top: 30%; font-size: 16px; }
body.touch.racing { touch-action: none; overscroll-behavior: none; }
/* retrato: controles um pouco menores, painel abaixo da posição/volta */
@media (orientation: portrait) {
  .t-pad { transform: scale(0.84); }
  .t-zone { width: 52vw; height: 48vh; }
  .t-base { width: 120px; height: 120px; }
  body.touch .h-dash { top: calc(env(safe-area-inset-top) + 74px); flex-direction: column; gap: 2px; }
  body.touch .h-speed { text-align: center; font-size: 30px; }
  body.touch .h-energy { width: min(260px, 64vw); }
  body.touch .h-mini { top: auto; bottom: calc(env(safe-area-inset-bottom) + 250px); width: 92px; height: 92px; }
}
/* paisagem em celular baixo */
@media (orientation: landscape) and (max-height: 430px) {
  .t-pad { transform: scale(0.8); }
  .t-base { width: 120px; height: 120px; }
  body.touch .h-mini { width: 86px; height: 86px; top: calc(env(safe-area-inset-top) + 52px); }
  body.touch .h-pos { font-size: 38px; }
}

@media (max-width: 760px) {
  .split { grid-template-columns: 1fr; }
  .srow, #scrShop .srow { grid-template-columns: 90px 1fr auto; }
  .srow .upg, .srow > span:last-child:empty { grid-column: 1 / -1; justify-self: start; }
  .specs { grid-template-columns: repeat(2, 1fr); }
  .tracks { grid-template-columns: 1fr; }
  .h-board, .h-feed { display: none; }
  body:not(.touch) .h-mini { width: 120px; height: 120px; top: 110px; }
  body:not(.touch) .h-pos { font-size: 54px; }
  body:not(.touch) .h-speed { font-size: 44px; min-width: 100px; }
  #ui { background: rgba(7, 6, 15, 0.78); }
}
@media (prefers-reduced-motion: reduce) {
  .h-cut.danger, .h-warn.on, .h-od.ready .h-odlabel { animation: none; }
  .mbtn { transition: none; }
}

/* ---------- transição LARGAR → pista ---------- */
#wipe { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
#wipe i {
  position: absolute; top: -20%; bottom: -20%; left: -30%; width: 160%;
  transform: translateX(110%) skewX(var(--skew));
  animation: wipeIn 0.55s cubic-bezier(.7, 0, .25, 1) forwards;
}
#wipe i:nth-child(1) { background: var(--amber); animation-delay: 0s; }
#wipe i:nth-child(2) { background: #ff5a8a; animation-delay: 0.06s; }
#wipe i:nth-child(3) { background: var(--cyan); animation-delay: 0.12s; }
#wipe i:nth-child(4) { background: #1c1638; animation-delay: 0.18s; }
#wipe i:nth-child(5) { background: var(--ink); animation-delay: 0.24s; }
#wipe .logo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) skewX(var(--skew)) scale(0.9);
  font: 800 clamp(44px, 9vw, 110px)/1 var(--display); letter-spacing: 0.02em; color: var(--text); opacity: 0;
  animation: wipeLogo 0.9s ease-out 0.45s forwards; white-space: nowrap;
}
#wipe .logo em { font-style: normal; color: var(--amber); margin-left: 0.2em; }
#wipe .logo span { font-size: 0.38em; color: var(--cyan); margin-left: 0.25em; vertical-align: 0.9em; }
#wipe.out i { animation: wipeOut 0.6s cubic-bezier(.7, 0, .25, 1) forwards; transform: translateX(0) skewX(var(--skew)); }
#wipe.out i:nth-child(1) { animation-delay: 0.24s; }
#wipe.out i:nth-child(2) { animation-delay: 0.18s; }
#wipe.out i:nth-child(3) { animation-delay: 0.12s; }
#wipe.out i:nth-child(4) { animation-delay: 0.06s; }
#wipe.out i:nth-child(5) { animation-delay: 0s; }
#wipe.out .logo { animation: wipeLogoOut 0.3s ease-in forwards; opacity: 1; }
@keyframes wipeIn { to { transform: translateX(0) skewX(var(--skew)); } }
@keyframes wipeOut { to { transform: translateX(-120%) skewX(var(--skew)); } }
@keyframes wipeLogo { 0% { opacity: 0; letter-spacing: 0.3em; } 40% { opacity: 1; } 100% { opacity: 1; letter-spacing: 0.02em; transform: translate(-50%, -50%) skewX(var(--skew)) scale(1); } }
@keyframes wipeLogoOut { to { opacity: 0; transform: translate(-50%, -50%) skewX(var(--skew)) scale(1.25); } }

/* ---------- apresentação cinematográfica ---------- */
#cine { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
#cine .bar { position: absolute; left: 0; right: 0; height: 11vh; background: #000; transition: transform 0.7s cubic-bezier(.6, 0, .3, 1); }
#cine .bar.top { top: 0; transform: translateY(-100%); }
#cine .bar.bot { bottom: 0; transform: translateY(100%); }
#cine.on .bar { transform: none; }
#cine .card {
  position: absolute; left: max(16px, 5vw); bottom: calc(11vh + 26px); max-width: calc(100% - 32px);
  opacity: 0; transform: translateX(-30px); transition: opacity 0.6s, transform 0.8s cubic-bezier(.2, .8, .2, 1);
}
#cine.card-on .card { opacity: 1; transform: none; }
#cine .kicker { display: flex; gap: 10px; font: 700 14px/1 var(--display); letter-spacing: 0.18em; text-transform: uppercase; }
#cine .kicker span { padding: 5px 10px; transform: skewX(var(--skew)); }
#cine .theme { background: var(--amber); color: var(--amber-ink); }
#cine .tier { background: rgba(7, 6, 15, 0.75); color: var(--cyan); }
#cine .tname {
  margin: 8px 0 4px; font: 800 clamp(40px, 8vw, 96px)/0.95 var(--display); text-transform: uppercase; letter-spacing: 0.01em;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
}
#cine .meta { font: 600 16px/1.3 var(--display); letter-spacing: 0.12em; color: var(--text); opacity: 0.85; text-shadow: 0 2px 10px #000; }
#cine .skip {
  position: absolute; right: max(16px, 4vw); bottom: calc(11vh - 34px); font: 600 13px/1 var(--display);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); opacity: 0; transition: opacity 0.5s 1.5s;
}
#cine.on .skip.can { opacity: 0.9; }
#cine .dip { position: absolute; inset: 0; background: #000; opacity: 0; }
#cine .dip.go { animation: dip 0.45s ease-out; }
@keyframes dip { 0% { opacity: 0.85; } 100% { opacity: 0; } }
@media (max-width: 600px) { #cine .bar { height: 8vh; } #cine .card { bottom: calc(8vh + 16px); } #cine .skip { display: none; } }
@media (prefers-reduced-motion: reduce) { #wipe i, #wipe .logo { animation-duration: 0.01s !important; } }

/* online: contagem da próxima corrida na tela de resultados */
.next-race { display: grid; align-content: center; padding: 8px 22px; min-width: 240px; background: var(--amber); color: var(--amber-ink); transform: skewX(var(--skew)); font: 700 20px/1.1 var(--display); text-transform: uppercase; }
.next-race b { font-size: 26px; }
.next-race small { font: 600 13px var(--body); text-transform: none; opacity: 0.75; }
/* "de 100" alinhado com o número (a inclinação era aplicada a partir do centro) */
.res-pos { transform-origin: 0 100%; }
.res-pos span { padding-left: 0.4em; }
.mbtn.soon small { color: var(--cyan); letter-spacing: 0.12em; text-transform: uppercase; font: 600 12px var(--display); }
.res-foot .mbtn { justify-content: center; }
/* menu principal: legenda ao lado do título (botões com altura igual) */
.menu .mbtn { flex-direction: row; align-items: baseline; gap: 12px; }
.menu .mbtn small { white-space: nowrap; }
/* overclock / ELITE */
.elite { font-size: 0.55em; letter-spacing: 0.14em; color: #ff7ae0; vertical-align: middle; text-shadow: 0 0 12px rgba(255, 59, 212, 0.55); }
.pips b.oc { background: #ff3bd4; box-shadow: 0 0 6px rgba(255, 59, 212, 0.7); }
.oc-btn { border-color: rgba(255, 59, 212, 0.6); flex-direction: row; align-items: baseline; gap: 12px; }
.oc-btn span { color: #ff7ae0; }
.oc-btn:hover:not(:disabled) { border-color: #ff3bd4; }
.oc-status { display: flex; gap: 12px; align-items: baseline; font: 700 18px var(--display); letter-spacing: 0.12em; }
.oc-status b { color: #ff7ae0; }
.oc-status span { color: var(--mute); font-variant-numeric: tabular-nums; }

/* ---------- interface: acabamento e celular ---------- */
#ui { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); padding-bottom: max(24px, env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; }
.screen:not([hidden]) > .panel { animation: panelIn 0.28s cubic-bezier(.2, .8, .2, 1); }
@keyframes panelIn { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
.menu .mbtn { animation: btnIn 0.35s cubic-bezier(.2, .8, .2, 1) backwards; }
.menu .mbtn:nth-child(1) { animation-delay: 0.04s; } .menu .mbtn:nth-child(2) { animation-delay: 0.08s; } .menu .mbtn:nth-child(3) { animation-delay: 0.12s; }
.menu .mbtn:nth-child(4) { animation-delay: 0.16s; } .menu .mbtn:nth-child(5) { animation-delay: 0.2s; } .menu .mbtn:nth-child(6) { animation-delay: 0.24s; }
@keyframes btnIn { from { opacity: 0; transform: skewX(var(--skew)) translateX(-24px); } }
.mbtn.primary:not(:disabled) { box-shadow: 0 6px 24px rgba(255, 176, 0, 0.25); }
.mbtn:active:not(:disabled) { transform: skewX(var(--skew)) scale(0.97); }
.pilot { position: relative; overflow: hidden; }
.pilot::after { content: ''; position: absolute; right: -30px; top: -30px; width: 120px; height: 120px; background: radial-gradient(circle, rgba(255, 176, 0, 0.12), transparent 70%); pointer-events: none; }
.tcard, .vitem { transition: border-color 0.12s, transform 0.12s; }
.tcard:active, .vitem:active { transform: scale(0.985); }
.upg { min-height: 30px; }

/* toque: alvos maiores, sem hover grudado */
body.touch .mbtn { min-height: 52px; justify-content: center; }
body.touch .mbtn:hover:not(:disabled) { transform: skewX(var(--skew)); border-color: var(--line); }
body.touch .mbtn.primary:hover:not(:disabled) { border-color: var(--amber); }
body.touch .back { padding: 10px 14px; }
body.touch .upg { min-height: 38px; padding: 6px 10px; }
body.touch .sw { width: 32px; height: 26px; }

/* celular em pé */
@media (max-width: 600px) {
  .logo { margin-top: 4px; }
  .logo-a { font-size: 46px; } .logo-b { font-size: 58px; }
  .phead h2 { font-size: 26px; }
  .panel.wide { padding: 14px; }
  .pv-slot { height: 170px; }
  .vhead h3 { font-size: 32px; }
  .res-pos b { font-size: 92px; }
  .res-top { gap: 14px; }
  .standings { grid-template-columns: 1fr 1fr; }
  .standings li { grid-template-columns: 26px 1fr; }
  .standings small { display: none; }
  .res-foot .mbtn, .res-foot .next-race { flex: 1 1 140px; }
  .career dd { font-size: 22px; }
  .tthumb { width: 72px; height: 72px; }
  .solo-foot .go { width: 100%; }
}
/* celular deitado (tela baixa): menu principal em duas colunas */
@media (orientation: landscape) and (max-height: 520px) {
  #ui { padding-top: max(12px, env(safe-area-inset-top)); }
  .main-panel { max-width: 860px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 22px; align-items: start; }
  .main-panel .logo { grid-column: 1; grid-row: 1; }
  .main-panel .pilot { grid-column: 1; grid-row: 2; }
  .main-panel .career { grid-column: 1; grid-row: 3; }
  .main-panel .menu { grid-column: 2; grid-row: 1 / 4; gap: 6px; }
  .logo-a { font-size: 40px; } .logo-b { font-size: 50px; }
  .menu .mbtn { padding: 8px 18px; min-height: 44px; }
  .mbtn span { font-size: 19px; }
  .panel.narrow { margin-top: 6vh; }
  .pv-slot { height: 150px; }
  .split { grid-template-columns: minmax(180px, 230px) 1fr; }
  .res-pos b { font-size: 84px; }
  #cine .bar { height: 7vh; } #cine .card { bottom: calc(7vh + 10px); } #cine .tname { font-size: 44px; }
}
#ui { z-index: 10; } #toast { z-index: 70; }
.back { white-space: nowrap; }
@media (max-width: 760px) {
  .srow, #scrShop .srow { grid-template-columns: minmax(0, 1fr) auto auto; row-gap: 4px; }
  .srow .sname { grid-column: 1 / -1; }
  .srow .upg, .srow > span:last-child:empty { grid-column: auto; justify-self: end; }
  .solo-foot { position: sticky; bottom: calc(-1 * max(24px, env(safe-area-inset-bottom))); margin: 0 -14px -14px; padding: 12px 14px max(14px, env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(7, 6, 15, 0.95) 30%); }
  .solo-foot > span:empty { display: none; }
}
/* controles simples (padrão): sem drift/freio, botões reagrupados em volta do BOOST */
#touch.simple .t-drift, #touch.simple .t-brake { display: none; }
#touch.simple .t-mine { right: 12px; bottom: 118px; width: 72px; height: 72px; }
#touch.simple .t-od { right: 104px; bottom: 100px; width: 62px; height: 62px; }
#touch.simple .t-fire { right: 116px; bottom: 4px; width: 84px; height: 84px; }
#touch.simple .t-pad { width: 210px; height: 200px; }

/* nada de selecionar texto, lupa ou menu de toque longo no jogo */
html, body, #hud, #touch, #stage, #cine, #wipe { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
input, textarea, select { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
#stage canvas { touch-action: none; }