@import url("https://fonts.googleapis.com/css2?family=Saira+Extra+Condensed:wght@500;600;700;800;900&family=Saira+Semi+Condensed:wght@400;500;600;700&display=swap");

:root {
  --bg: #06040a; --bg2: #0f0a17; --ink: #fff8fb; --mute: #b3a6bf; --faint: #5d5069;
  --hot: #ff1f5a; --hot2: #ff7a00; --violet: #8a2bff; --volt: #d6ff1f; --gold: #ffc21a; --ice: #3fe0ff;
  --line: rgba(255, 255, 255, .09); --line2: rgba(255, 255, 255, .2);
  --panel: rgba(13, 8, 20, .82);
  --speed: linear-gradient(100deg, var(--hot) 0%, var(--hot2) 100%);
  --sk: -12deg; --ease: cubic-bezier(.16, .9, .2, 1);
  --race: "Saira Extra Condensed", "Arial Narrow", sans-serif; --body: "Saira Semi Condensed", "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font: 15px/1.4 var(--body); -webkit-font-smoothing: antialiased; }
body { overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
input, textarea { -webkit-user-select: text; user-select: text; }
/* touch screens: no keyboard-key badges (ENTER, ESC...) anywhere; the buttons say what to tap */
@media (pointer: coarse) { html[data-input="kb"] .gl.key { display: none; } }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus { outline: none; }
::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-thumb { background: var(--hot); border-radius: 0; }

/* the night: violet haze, moving speed lines, scanline grain, vignette */
.night { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background: radial-gradient(80% 60% at 50% 110%, rgba(138,43,255,.35), transparent 70%), radial-gradient(50% 40% at 85% 0%, rgba(255,31,90,.18), transparent 70%), var(--bg); }
.night .streaks { position: absolute; inset: -20% -50%; transform: skewX(var(--sk)); opacity: .5;
  background: repeating-linear-gradient(90deg, transparent 0 140px, rgba(255,31,90,.12) 140px 141px, transparent 141px 300px, rgba(63,224,255,.08) 300px 301px, transparent 301px 520px);
  animation: streak 6s linear infinite; }
@keyframes streak { to { transform: skewX(var(--sk)) translateX(-520px); } }
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 80;
  background: radial-gradient(130% 100% at 50% 45%, transparent 55%, rgba(0,0,0,.7) 100%),
              repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px); }

/* type */
.race { font-family: var(--race); font-weight: 900; font-style: normal; text-transform: uppercase; line-height: .82; letter-spacing: .005em; }
.it { display: inline-block; transform: skewX(var(--sk)); }
.tag { font: 700 12px/1 var(--race); letter-spacing: .32em; text-transform: uppercase; color: var(--mute); }
.tag.hot { color: var(--hot); } .tag.volt { color: var(--volt); } .tag.gold { color: var(--gold); }
.hotfill { background: var(--speed); -webkit-background-clip: text; background-clip: text; color: transparent; }
.num { font-variant-numeric: tabular-nums; }
.chev::before { content: "»"; color: var(--hot); margin-right: 8px; }

/* button glyphs */
.gl { display: inline-grid; place-items: center; font: 800 12px/1 var(--race); font-style: normal; letter-spacing: .02em; vertical-align: middle; }
.gl.face { width: 24px; height: 24px; border-radius: 50%; background: var(--c); color: #0a0a0a; box-shadow: 0 0 12px color-mix(in srgb, var(--c) 60%, transparent); }
.gl.bump { min-width: 34px; height: 22px; padding: 0 6px; border-radius: 6px 6px 3px 3px; background: #e9e4ee; color: #111; }
.gl.key { min-width: 26px; height: 24px; padding: 0 7px; border: 1px solid var(--line2); border-bottom-width: 3px; border-radius: 4px; background: rgba(255,255,255,.07); color: var(--ink); font-size: 11px; letter-spacing: .08em; }

/* slanted plates: the base of every button / card */
.plate { position: relative; transform: skewX(var(--sk)); background: var(--panel); border: 1px solid var(--line); transition: transform .25s var(--ease), background .2s, border-color .2s, box-shadow .25s; }
.plate > .in { transform: skewX(calc(var(--sk) * -1)); }
.nav.focus, .nav:focus-visible { border-color: var(--hot) !important; box-shadow: 0 0 0 1px var(--hot), 0 0 34px rgba(255,31,90,.45), inset 0 0 40px rgba(255,31,90,.12); }
.plate.nav.focus { transform: skewX(var(--sk)) translateX(6px); }
.nav.press { filter: brightness(1.6); }
.plate::after { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 4px; background: transparent; transition: background .2s; }
.plate.nav.focus::after { background: var(--speed); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 28px; transform: skewX(var(--sk));
  background: rgba(255,255,255,.06); border: 1px solid var(--line2); font: 800 18px/1 var(--race); letter-spacing: .14em; text-transform: uppercase;
  transition: all .2s var(--ease); white-space: nowrap; }
.btn > * { transform: skewX(calc(var(--sk) * -1)); }
.btn.go { background: var(--speed); border-color: transparent; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.25); box-shadow: 0 10px 40px rgba(255,31,90,.35); }
.btn.go.focus { box-shadow: 0 0 0 2px #fff, 0 0 50px rgba(255,31,90,.7); }
.btn.big { padding: 20px 44px; font-size: 24px; }
.btn.sm { padding: 9px 16px; font-size: 14px; }
.btn.cash { color: var(--volt); border-color: rgba(214,255,31,.4); }
.btn[disabled] { opacity: .3; pointer-events: none; }

/* class badge (performance index) */
.pi { display: inline-flex; align-items: stretch; transform: skewX(var(--sk)); font: 900 18px/1 var(--race); border: 2px solid var(--c); box-shadow: 0 0 18px color-mix(in srgb, var(--c) 45%, transparent); }
.pi b { display: grid; place-items: center; min-width: 34px; padding: 4px 8px; background: var(--c); color: #0b0b0b; }
.pi span { display: grid; place-items: center; padding: 4px 10px; background: rgba(0,0,0,.6); color: var(--ink); min-width: 52px; }
.pi b, .pi span { transform: skewX(calc(var(--sk) * -1)); }
.pi.lg { font-size: 28px; } .pi.lg b { min-width: 52px; } .pi.lg span { min-width: 74px; }

/* stat bars (segmented, like a tach) */
.stat { display: grid; grid-template-columns: 96px 1fr 76px; gap: 12px; align-items: center; margin: 8px 0; }
.stat .k { font: 700 12px/1 var(--race); letter-spacing: .26em; text-transform: uppercase; color: var(--mute); }
.stat .v { text-align: right; font: 800 19px/1 var(--race); letter-spacing: .04em; }
.segs { position: relative; height: 10px; transform: skewX(var(--sk)); background: repeating-linear-gradient(90deg, rgba(255,255,255,.09) 0 calc(5% - 2px), transparent calc(5% - 2px) 5%); }
.segs i, .segs u { position: absolute; inset: 0 auto 0 0; transition: width .5s var(--ease);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(5% - 2px), transparent calc(5% - 2px) 5%); mask: repeating-linear-gradient(90deg, #000 0 calc(5% - 2px), transparent calc(5% - 2px) 5%); }
.segs i { background: var(--speed); box-shadow: 0 0 12px rgba(255,31,90,.6); }
.segs u { background: var(--volt); opacity: .85; }

/* screen wipe between pages / screens */
#wipe { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
#wipe i { position: absolute; top: -10%; bottom: -10%; width: 160%; left: -180%; transform: skewX(var(--sk)); background: var(--speed); }
#wipe i:nth-child(2) { background: var(--bg2); width: 150%; }
#wipe.run i { animation: wipe .9s var(--ease) forwards; }
#wipe.run i:nth-child(2) { animation-delay: .07s; }
@keyframes wipe { 0% { left: -180%; } 45% { left: -30%; } 55% { left: -30%; } 100% { left: 130%; } }
#wipe.cover i { left: -30%; animation: none; }

/* prompt bar (bottom) */
.prompts { display: flex; gap: 26px; justify-content: flex-end; align-items: center; flex-wrap: wrap; font: 700 14px/1 var(--race); letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }
.prompts span { display: inline-flex; gap: 9px; align-items: center; }

/* notice */
#note { position: fixed; left: 50%; top: 92px; z-index: 85; pointer-events: none; padding: 12px 26px; transform: translateX(-50%) skewX(var(--sk)) translateY(-14px); opacity: 0;
  background: var(--speed); font: 900 20px/1 var(--race); letter-spacing: .14em; text-transform: uppercase; transition: all .35s var(--ease); box-shadow: 0 10px 40px rgba(255,31,90,.4); }
#note.on { opacity: 1; transform: translateX(-50%) skewX(var(--sk)); }
#note.bad { background: #2a0b12; border: 1px solid var(--hot); }