/* Slipstream: night purple with Team Violet and Team Lime, sharp italic type and slanted panels */
:root {
  --bg: #0b0618;
  --violet: #9d5cff;
  --violet-2: #c49cff;
  --lime: #b8ff3c;
  --lime-2: #d4ff6a;
  --amber: #ffb040;
  --text: #f3eeff;
  --muted: #a99bc8;
  --panel: rgba(20, 12, 40, .86);
  --line: rgba(255, 255, 255, .12);
  --font: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--font); user-select: none; -webkit-user-select: none; }
button, select { font: inherit; color: inherit; }
button { cursor: pointer; }
#cv { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.screen { position: fixed; inset: 0; display: none; }
.screen.on { display: flex; align-items: center; justify-content: center; animation: fade .25s ease both; }
@keyframes fade { from { opacity: 0; } }
body.playing { cursor: none; }

/* title */
#title.on { justify-content: flex-start; padding-left: 7vw; background: linear-gradient(90deg, rgba(11, 6, 24, .92) 0%, rgba(11, 6, 24, .6) 45%, transparent 75%); }
.title-box { width: min(420px, 86vw); }
.logo { margin: 0; font-size: clamp(48px, 8vw, 96px); font-weight: 900; font-style: italic; letter-spacing: -.02em; line-height: .95;
  color: var(--violet-2); text-shadow: 4px 4px 0 #3b1d7a; }
.logo span { color: var(--lime); text-shadow: 4px 4px 0 #4a6b0e; }
.tag { margin: 8px 0 26px; color: var(--muted); letter-spacing: 2px; text-transform: uppercase; font-size: 13px; }
.menu { display: flex; flex-direction: column; gap: 10px; }
.btn { border: 1px solid var(--line); background: var(--panel); border-radius: 0; padding: 13px 22px; font-size: 19px; font-weight: 800; font-style: italic;
  text-align: left; clip-path: polygon(0 0, 100% 0, 96% 100%, 0 100%); transition: transform .12s, background .12s; }
.btn:hover { transform: translateX(6px); background: rgba(60, 34, 110, .92); }
.btn.primary { background: linear-gradient(90deg, var(--violet), #6a2fe0); border-color: transparent; color: #fff; }
.btn.primary:hover { filter: brightness(1.12); }
.btn.small { font-size: 15px; padding: 10px 16px; flex: 1; }
.row2 { display: flex; gap: 10px; }
.seg { display: flex; gap: 4px; margin: -4px 0 4px; }
.seg button { flex: 1; border: 1px solid var(--line); background: rgba(255, 255, 255, .05); padding: 7px 0; font-weight: 700; font-size: 14px; }
.seg button.on { background: var(--lime); color: #1d2a05; border-color: var(--lime); }
.soon { color: var(--muted); font-size: 13px; margin: 8px 0 0; }

/* panels */
.panel { width: min(420px, 92vw); background: var(--panel); border: 1px solid var(--line); padding: 26px 28px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%); }
.panel.wide { width: min(640px, 94vw); max-height: 92vh; overflow-y: auto; }
.panel h2 { margin: 0 0 16px; font-size: 34px; font-style: italic; font-weight: 900; }
.keys { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 14px; }
.keys th { text-align: left; color: var(--lime); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; padding: 4px 6px; }
.keys td { padding: 7px 6px; border-top: 1px solid var(--line); }
.keys td:first-child { color: var(--muted); }
.tips { margin: 0 0 18px; padding-left: 18px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.tips b { color: var(--text); }
.set-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); gap: 12px; }
.set-row select { background: rgba(255, 255, 255, .07); border: 1px solid var(--line); padding: 6px 8px; }
.set-row select option { background: #1b1033; }
.range { display: flex; align-items: center; gap: 8px; }
.range input { width: 150px; accent-color: var(--violet); }
.range output { width: 44px; text-align: right; color: var(--muted); }
.toggle { width: 46px; height: 26px; border-radius: 13px; border: none; background: rgba(255, 255, 255, .18); position: relative; padding: 0; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .15s; }
.toggle.on { background: var(--violet); }
.toggle.on::after { left: 23px; }
#settings .btn, #controls .btn { margin-top: 16px; }
.small-btn { border: 1px solid var(--line); background: rgba(255, 255, 255, .07); padding: 6px 14px; font-weight: 700; }

/* HUD */
#hud.on { display: block; pointer-events: none; }
.scorebar { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); display: flex; align-items: stretch; font-weight: 900; font-style: italic; }
.scorebar .team { width: 74px; display: flex; align-items: center; justify-content: center; font-size: 34px; }
.scorebar .t0 { background: var(--violet); clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); }
.scorebar .t1 { background: var(--lime); color: #1d2a05; clip-path: polygon(0 0, 86% 0, 100% 100%, 0 100%); }
.clock { background: rgba(10, 6, 22, .9); padding: 6px 20px; font-size: 30px; min-width: 110px; text-align: center; font-variant-numeric: tabular-nums; }
.msg { position: absolute; top: 28%; left: 0; right: 0; text-align: center; font-size: clamp(40px, 8vw, 90px); font-weight: 900; font-style: italic;
  text-shadow: 0 4px 0 rgba(0, 0, 0, .5), 0 0 30px rgba(157, 92, 255, .7); }
.msg.pop { animation: pop .35s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes pop { from { transform: scale(1.8); opacity: 0; } }
.boost { --b: 33; position: absolute; right: 28px; bottom: 28px; width: 128px; height: 128px; border-radius: 50%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; background: radial-gradient(circle, rgba(10, 6, 22, .92) 58%, transparent 59%),
  conic-gradient(var(--amber) calc(var(--b) * 1%), rgba(255, 255, 255, .12) 0); }
.boost b { font-size: 44px; font-weight: 900; font-style: italic; line-height: 1; }
.boost small { font-size: 11px; letter-spacing: 2px; color: var(--muted); }
.speed { position: absolute; right: 40px; bottom: 166px; font-weight: 800; font-style: italic; color: var(--muted); font-variant-numeric: tabular-nums; }
.speed.super { color: var(--lime); text-shadow: 0 0 12px rgba(184, 255, 60, .7); }
.cam { position: absolute; left: 20px; bottom: 18px; font-size: 13px; color: var(--muted); }
.ball-arrow { position: absolute; left: 0; top: 0; margin: -16px 0 0 -16px; width: 32px; height: 32px; font-size: 30px; color: #ffb040; text-shadow: 0 0 10px rgba(255, 176, 64, .8); }
.fps { position: fixed; left: 8px; top: 8px; font-size: 12px; color: var(--lime); background: rgba(0, 0, 0, .4); padding: 2px 6px; z-index: 9; }

/* match over and pause */
#over.on { background: rgba(8, 4, 18, .55); }
#over-title.win { color: var(--lime); }
#over-title.lose { color: #ff6b8a; }
.over-score { font-size: 64px; font-weight: 900; font-style: italic; margin-bottom: 6px; }
#over-stats { color: var(--muted); margin: 0 0 18px; }
.overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(8, 4, 18, .55); z-index: 5; }
.overlay.on { display: flex; }

@media (max-width: 700px) {
  #title.on { padding: 0; justify-content: center; background: rgba(11, 6, 24, .75); }
  .boost { width: 96px; height: 96px; right: 14px; bottom: 14px; }
  .boost b { font-size: 32px; }
  .speed { right: 20px; bottom: 120px; }
}