/* Kartastrophe: sticker karts on a tabletop. Wood-floor room, white
   die-cut sticker panels, chunky ink outlines. */
@font-face { font-family: "Luckiest Guy"; src: url(fonts/luckiest-guy.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Fredoka; src: url(fonts/fredoka-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: Fredoka; src: url(fonts/fredoka-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: Fredoka; src: url(fonts/fredoka-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --ink: #1d1b2f;
  --paper: #fffaf0;
  --sun: #ffc93c;
  --hot: #ff5a36;
  --rtg-bg: #2b1b10;
  --rtg-panel: var(--paper);
  --rtg-ink: var(--ink);
  --rtg-muted: #7b6f63;
  --rtg-line: #e6dccb;
  --rtg-accent: var(--hot);
  --rtg-accent-dk: #b8341a;
  --rtg-edge: var(--ink);
  --rtg-title: var(--sun);
  --rtg-font: Fredoka, system-ui, -apple-system, "Segoe UI", sans-serif;
  --rtg-display: "Luckiest Guy", "Arial Black", system-ui, sans-serif;
  --rtg-radius: 18px;
  --sticker: 0 0 0 4px #fff, 0 7px 16px rgb(0 0 0 / .45);
}

html, body { height: 100%; }
body {
  background:
    radial-gradient(ellipse at 50% 35%, rgb(255 214 150 / .16), transparent 65%),
    repeating-linear-gradient(90deg, rgb(0 0 0 / .18) 0 2px, transparent 2px 160px),
    linear-gradient(180deg, #4a2f1b, #2b1b10);
  background-attachment: fixed;
}

/* ---------- home + lobby ---------- */
.rtg-hero h1 {
  font-size: clamp(2.6rem, 9vw, 3.8rem); letter-spacing: .02em; color: var(--sun);
  -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill;
  text-shadow: 0 3px 0 var(--ink), 0 0 0 #fff;
  filter: drop-shadow(0 0 0 #fff) drop-shadow(0 6px 10px rgb(0 0 0 / .45));
}
.rtg-logo { filter: drop-shadow(0 6px 10px rgb(0 0 0 / .35)); }
.rtg-panel { border: 0; box-shadow: var(--sticker); }
.rtg-join { transform: rotate(-.6deg); }
.rtg-btn { font-weight: 700; }
.kt-practice { display: grid; gap: .1em; background: var(--sun); }
.kt-practice small { font-weight: 500; font-size: .78rem; color: #5b4a24; }
.rtg-how { background: rgb(0 0 0 / .28); border-radius: 16px; padding: 14px 18px; }
.rtg-how h2 { font-size: 1.3rem; color: var(--sun); letter-spacing: .03em; }
.rtg-how p { margin: .4em 0; line-height: 2; }
.kt-fine { opacity: .8; font-size: .9rem; line-height: 1.4 !important; }
.kt-cap {
  display: inline-grid; place-items: center; min-width: 1.7em; height: 1.7em; padding: 0 .3em; margin: 0 .08em;
  box-sizing: border-box; border-radius: 6px; background: #fff; color: var(--ink);
  font: 700 .8rem/1 var(--rtg-font); box-shadow: 0 2px 0 #b9ad98, 0 0 0 1.5px var(--ink); vertical-align: 1px;
}
.kt-cap.wide { min-width: 4.2em; text-transform: uppercase; letter-spacing: .06em; font-size: .68rem; }
.rtg-big-code { -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--ink); }
.kt-setup { min-height: 100dvh; display: grid; place-items: center; color: #fff; font: 600 1.2rem var(--rtg-font); }

/* ---------- sandbox ---------- */
.kt-game {
  height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) 330px;
  user-select: none; -webkit-user-select: none;
}
.kt-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.kt-canvas { position: absolute; inset: 0; display: block; }

.kt-hint {
  position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%);
  display: flex; gap: 22px; align-items: center; white-space: nowrap;
  background: rgb(29 27 47 / .82); color: #fff; font-weight: 600; font-size: .95rem;
  padding: .55em 1.1em; border-radius: 99px; box-shadow: 0 6px 16px rgb(0 0 0 / .35);
  transition: opacity .6s .4s; pointer-events: none;
}
.kt-hint.gone { opacity: 0; }

.kt-boost {
  --fill: 1;
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 8px;
  background: var(--paper); color: var(--ink); border-radius: 99px; box-shadow: var(--sticker);
  font: 400 1rem var(--rtg-display); letter-spacing: .06em; pointer-events: none;
}
.kt-boost .kt-cap.wide { font-size: .62rem; }
.kt-boost-bar { width: 120px; height: 12px; border-radius: 99px; background: #e6dccb; overflow: hidden; box-shadow: inset 0 0 0 2px var(--ink); }
.kt-boost-bar i { display: block; height: 100%; width: calc(var(--fill) * 100%); background: #b9ad98; border-radius: 99px; }
.kt-boost.ready .kt-boost-bar i { background: linear-gradient(90deg, var(--hot), var(--sun)); }
.kt-boost b { font-weight: 400; min-width: 4.6em; color: #b9ad98; }
.kt-boost.ready b { color: var(--hot); }
.kt-boost.firing b { color: var(--sun); }

.kt-offline {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  background: var(--hot); color: #fff; font-weight: 700; padding: .45em 1em; border-radius: 99px; box-shadow: var(--sticker);
}
.kt-over { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(20 12 6 / .55); }
.kt-over[hidden], .kt-offline[hidden] { display: none; }
.kt-over-card { background: var(--paper); border-radius: 22px; box-shadow: var(--sticker); padding: 26px 30px; text-align: center; max-width: 360px; transform: rotate(-1deg); }
.kt-over-card h2 { font-size: 2.2rem; color: var(--hot); -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; }

/* ---------- side panel ---------- */
.kt-side {
  overflow-y: auto; overflow-x: hidden; padding: 14px 16px 56px 6px; display: grid; gap: 14px; align-content: start;
  grid-auto-rows: max-content; /* rows never squash, even when the panel scrolls */
  grid-template-columns: minmax(0, 1fr); /* …and nothing wide can push the column past the panel */
  scrollbar-width: thin;
}
.kt-brand { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; color: #fff; padding: 2px 4px 4px; }
.kt-brand h1 { margin: 0; font-size: 1.3rem; letter-spacing: .03em; color: var(--sun); -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; text-shadow: 0 2px 0 var(--ink); }
.kt-brand p { margin: 0; font-size: .82rem; opacity: .85; }
.kt-brand b { letter-spacing: .12em; }
.kt-brand .rtg-btn { color: #fff; border-color: rgb(255 255 255 / .45); }

.kt-card { background: var(--paper); border-radius: 16px; box-shadow: var(--sticker); padding: 12px 14px 14px; margin: 0 4px; }

/* Race Master: who holds the dials, for everyone. The checkered flag marks
   them here and on the scoreboard. */
.kt-flag {
  display: inline-block; width: 1em; height: .75em; flex: none; vertical-align: -.02em; border-radius: 2px;
  background: repeating-conic-gradient(var(--ink) 0 25%, #fff 0 50%) 0 0 / .5em .5em;
  box-shadow: 0 0 0 1.5px var(--ink); transform: rotate(-6deg);
}
.kt-flag.away { opacity: .35; }
.kt-master h2 { margin-bottom: .35em; }
.kt-master-who { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.05rem; min-width: 0; }
.kt-master-who b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-master-who em { font-style: normal; font-size: .7rem; font-weight: 600; color: var(--rtg-muted); }
.kt-away { flex: none; margin-left: auto; font-size: .72rem; font-weight: 700; color: #fff; background: var(--hot); border-radius: 99px; padding: .15em .65em; }
.kt-master-act { display: flex; align-items: center; gap: 10px; min-height: 40px; margin-top: 8px; }
.kt-master-act .kt-note { flex: 1; font-size: .78rem; }
.kt-master-act .rtg-btn { flex: none; }
.kt-hand { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; font-size: .84rem; font-weight: 600; color: var(--rtg-muted); }
.kt-hand select { flex: 1; min-width: 0; font: 600 .9rem var(--rtg-font); padding: .4em .5em; border-radius: 10px; border: 2px solid var(--rtg-line); background: #fff; color: var(--ink); }
.kt-card h2 { font: 400 1.15rem var(--rtg-display); letter-spacing: .04em; margin: 0 0 .5em; display: flex; align-items: baseline; gap: .5em; }
.kt-note { font: 600 .72rem var(--rtg-font); letter-spacing: 0; color: var(--rtg-muted); }
.kt-note[hidden] { display: none; }

.kt-scores { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.kt-scores li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; font-weight: 600; padding: 2px 6px; border-radius: 8px; }
.kt-scores li.me { background: #fff1c9; }
.kt-scores .kt-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-scores em { font-style: normal; font-size: .7rem; color: var(--rtg-muted); }
.kt-scores b { font: 400 1.1rem var(--rtg-display); min-width: 1.6em; text-align: right; }

.kt-sliders { display: grid; gap: 9px; }
.kt-slider { display: grid; gap: 2px; }
.kt-slider-top { display: flex; align-items: baseline; gap: 6px; font-size: .84rem; }
.kt-slider-top b { font-weight: 600; }
.kt-slider-top i { font-style: normal; font-size: .7rem; color: var(--rtg-muted); }
.kt-slider-top output { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.kt-slider input { width: 100%; margin: 0; accent-color: var(--hot); }
.kt-slider input:disabled { opacity: .55; }

.kt-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.kt-field { display: grid; gap: 6px; font-size: .84rem; font-weight: 600; margin-bottom: 10px; }
.kt-field > span { color: var(--rtg-muted); }
.kt-field select { min-width: 0; width: 100%; font: 600 .95rem var(--rtg-font); padding: .45em .6em; border-radius: 10px; border: 2px solid var(--rtg-line); background: #fff; color: var(--ink); }
.kt-stepper { display: flex; align-items: center; gap: 10px; }
.kt-stepper .rtg-btn { width: 2.4em; padding: .3em 0; font-size: 1.05rem; }
.kt-stepper b { font: 400 1.3rem var(--rtg-display); min-width: 1.4em; text-align: center; }
.kt-seg { display: flex; border: 2px solid var(--ink); border-radius: 10px; overflow: hidden; }
.kt-seg button { flex: 1; font: 600 .82rem var(--rtg-font); padding: .45em .3em; background: #fff; color: var(--ink); border: 0; border-left: 2px solid var(--ink); cursor: pointer; }
.kt-seg button:first-child { border-left: 0; }
.kt-seg button.on { background: var(--sun); }
.kt-seg button:disabled { cursor: not-allowed; opacity: .6; }

.kt-stats { display: flex; gap: 16px; font-size: .84rem; margin-bottom: 10px; }
.kt-stats b { font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .kt-game { grid-template-columns: minmax(0, 1fr); grid-template-rows: 68dvh auto; height: auto; }
  .kt-side { overflow: visible; padding: 12px 12px 60px; }
}

/* ---------- races ---------- */
.kt-race {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 16px; align-items: center; white-space: nowrap;
  background: var(--paper); color: var(--ink); border-radius: 99px; box-shadow: var(--sticker);
  padding: .35em 1.1em; font: 400 1.15rem var(--rtg-display); letter-spacing: .05em; pointer-events: none;
}
.kt-race[hidden], .kt-count[hidden], .kt-missed[hidden], .kt-results[hidden], .kt-minimap[hidden] { display: none; }
.kt-race span { min-width: 4.5em; text-align: center; font-variant-numeric: tabular-nums; }
.kt-race .kt-pos { color: var(--hot); }
.kt-race .kt-time { min-width: 6.5em; }
.kt-race.done .kt-time { color: #1f8a4c; }
.kt-race .kt-time.hurry { color: var(--hot); animation: kt-hurry .5s ease-in-out infinite alternate; }
@keyframes kt-hurry { to { transform: scale(1.12); } }
.kt-missed {
  position: absolute; top: 64px; left: 50%; transform: translateX(-50%);
  background: var(--sun); color: var(--ink); font-weight: 700; padding: .4em 1em; border-radius: 99px;
  box-shadow: var(--sticker); white-space: nowrap; pointer-events: none;
}
.kt-count {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  font: 400 clamp(5rem, 14vw, 10rem)/1 var(--rtg-display); color: var(--sun);
  -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill;
  text-shadow: 0 8px 0 var(--ink); filter: drop-shadow(0 0 10px rgb(255 255 255 / .8));
  pointer-events: none;
}
.kt-count.pop { animation: kt-pop .9s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes kt-pop {
  0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; }
  25% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  45%, 80% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: .85; }
}
.kt-minimap {
  /* floating over the track, top right under the race bar: the camera keeps
     you and the road ahead in the middle band of the screen */
  position: absolute; top: 70px; right: 10px; width: min(300px, 36%);
  pointer-events: none;
}
.kt-results, .kt-ask { position: absolute; inset: 0; display: grid; place-items: center; background: rgb(20 12 6 / .45); }
.kt-ask[hidden] { display: none; }
.kt-ask-card { transform: rotate(1deg); }
.kt-ask-card p { margin: 0 0 18px; font-weight: 600; }
.kt-ask-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kt-results-card { background: var(--paper); border-radius: 22px; box-shadow: var(--sticker); padding: 20px 26px; min-width: 300px; max-width: 420px; transform: rotate(-1deg); }
.kt-results-card h2 { font-size: 2.1rem; color: var(--hot); -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; margin-bottom: .3em; }
.kt-results-card ol { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 4px; max-height: 50vh; overflow-y: auto; }
.kt-results-card li { display: grid; grid-template-columns: 2.4em auto minmax(0, 1fr) auto; gap: 8px; align-items: center; font-weight: 600; padding: 3px 8px; border-radius: 8px; }
.kt-results-card li.me { background: #fff1c9; }
.kt-results-card li b { font: 400 1.1rem var(--rtg-display); }
.kt-results-card li > span:last-child { font-variant-numeric: tabular-nums; color: var(--rtg-muted); }
.kt-results-card .kt-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-level-blurb { color: var(--rtg-muted); font-weight: 500; }
.kt-field[hidden] { display: none; }
.kt-seg button[hidden] { display: none; }
.kt-steer-hint { margin: .5em 0 0; font-size: .8rem; color: var(--rtg-muted); min-height: 2.4em; }

/* ---------- Deflation Derby ---------- */
.kt-bal { display: inline-flex; gap: 3px; align-items: center; }
.kt-bal i {
  width: 11px; height: 13px; border-radius: 50%; background: var(--c);
  box-shadow: 0 0 0 2px #fff, 0 1px 3px rgb(0 0 0 / .35);
}
.kt-scores .kt-out { font: 400 .95rem var(--rtg-display); color: var(--rtg-muted); }

/* ---------- side panel: Stats | Tuning ---------- */
.kt-views { margin: 0 4px; background: #fff; }
.kt-views[hidden] { display: none; } /* release: no Tuning side */
.kt-side[data-view="stats"] [data-panel="tuning"],
.kt-side[data-view="tuning"] [data-panel="stats"],
.kt-laps[hidden] { display: none; }
.kt-scores small { display: block; font-size: .7rem; font-weight: 600; color: var(--rtg-muted); }
.kt-scores.race li { grid-template-columns: 1.3em auto minmax(0, 1fr) auto; }
.kt-scores .kt-pos-n { font: 400 1.05rem var(--rtg-display); min-width: 0; text-align: center; }
.kt-scores .kt-gap { font: 600 .82rem var(--rtg-font); font-variant-numeric: tabular-nums; color: var(--ink); }
.kt-lap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 9.5em; overflow-y: auto; }
.kt-lap-list li { display: flex; justify-content: space-between; padding: 2px 6px; border-radius: 8px; font-weight: 600; font-size: .86rem; }
.kt-lap-list li.now { background: #fff1c9; }
.kt-lap-list li.best b { color: #1f9d55; }
.kt-lap-list em { font-style: normal; font-size: .7rem; color: #1f9d55; }
.kt-lap-list b { font-variant-numeric: tabular-nums; }
.kt-lap-sum { display: flex; gap: 16px; margin: 8px 0 0; font-size: .84rem; }
.kt-lap-sum b { font-variant-numeric: tabular-nums; }

/* ---------- the Cup ---------- */
.kt-cup-lineup { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: .74rem; font-weight: 600; }
.kt-cup-lineup li { padding: 2px 9px; border-radius: 99px; background: #efe7d6; color: var(--rtg-muted); }
.kt-cup-lineup li.done { background: #d9f2e1; color: #1f8a4c; }
.kt-cup-lineup li.now { background: var(--sun); color: var(--ink); }
.kt-cup-mode { margin-bottom: 10px; }
.kt-cup-empty { font-size: .8rem; margin: 0 0 4px; }
.kt-cup-dummies { margin: 10px 0 8px; }
.kt-cup-act { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.kt-cup-act:has(p) { grid-auto-flow: row; }
.kt-cup-act p { margin: 8px 0 0; font-size: .82rem; }
.kt-banner {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 28px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
  background: var(--paper); color: var(--ink); border-radius: 99px; box-shadow: var(--sticker);
  padding: .35em 1.1em; font: 400 1.05rem var(--rtg-display); letter-spacing: .04em;
}
.kt-banner[hidden] { display: none; }
.kt-kicker { margin: 0; font: 600 .74rem var(--rtg-font); letter-spacing: .08em; text-transform: uppercase; color: var(--rtg-muted); }
.kt-cup-card h3 { margin: 2px 0 6px; font: 400 1rem var(--rtg-display); letter-spacing: .04em; }
.kt-cup-card .rtg-btn { width: 100%; }
.kt-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 8px; margin: 10px 0 14px; }
.kt-step { display: grid; justify-items: center; gap: 2px; min-width: 0; text-align: center; font-weight: 600; font-size: .82rem; }
.kt-step .kt-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.kt-step i {
  display: block; width: 100%; margin-top: 4px; padding-top: 6px; border-radius: 10px 10px 0 0; box-shadow: var(--sticker);
  font: 400 1.6rem var(--rtg-display); font-style: normal; color: #fff; -webkit-text-stroke: 1.2px var(--ink); paint-order: stroke fill;
}
.kt-step-1 i { height: 86px; background: var(--sun); }
.kt-step-2 i { height: 62px; background: #cfd3de; }
.kt-step-3 i { height: 46px; background: #e3a26a; }