/* Splash Derby: sticker karts painting a tabletop at a pool party. Pool
   water round the table, 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: #0b6d99;
  --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 {
  /* The pool: sunlight on the water over the tiles on the bottom. */
  background:
    radial-gradient(ellipse at 50% 30%, rgb(255 255 255 / .18), transparent 62%),
    repeating-linear-gradient(0deg, rgb(255 255 255 / .08) 0 2px, transparent 2px 56px),
    repeating-linear-gradient(90deg, rgb(255 255 255 / .08) 0 2px, transparent 2px 56px),
    linear-gradient(180deg, #1aa6d2, #0b6d99);
  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; z-index: 3; 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; z-index: 3; 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); }
/* Invite: copies a link that joins this room, for the call chat. */
.kt-invite {
  margin-left: 4px; padding: 1px 9px; border: 0; border-radius: 99px; cursor: pointer; vertical-align: 1px;
  background: var(--sun); color: var(--ink); font: 700 .72rem var(--rtg-font); box-shadow: 0 0 0 1.5px var(--ink);
}
/* Came in on an invite link. */
.kt-invited { margin: 0 0 12px; padding: 8px 12px; border-radius: 12px; background: #fff3c4; color: var(--ink); font-size: .92rem; line-height: 1.35; }

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

/* Paint Boss: who runs the rounds, 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; }
}

/* ---------- Thumbs: touch strips beside the table (strips.js) ---------- */
.kt-stage { --strip-w: clamp(84px, 13vw, 128px); }
@media (orientation: portrait) { .kt-stage { --strip-w: clamp(58px, 16vw, 80px); } }
.kt-strip {
  --y: 50%; --ay: 50%; --gas: 0;
  position: absolute; top: 10px; bottom: 10px; width: var(--strip-w); z-index: 1; overflow: hidden;
  border-radius: 26px; background: rgb(255 255 255 / .07); box-shadow: inset 0 0 0 2px rgb(255 255 255 / .22);
  touch-action: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none;
}
.kt-strip.left { left: 4px; }
.kt-strip.right { right: 4px; }
.kt-strip.held { background: rgb(255 255 255 / .13); }
.kt-strip > b {
  position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; pointer-events: none;
  font: 400 .85rem var(--rtg-display); letter-spacing: .08em; color: rgb(255 255 255 / .7);
}
.kt-strip-knob, .kt-strip-anchor { position: absolute; left: 50%; pointer-events: none; opacity: 0; transition: opacity .15s; }
.kt-strip-knob {
  top: var(--y); width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%;
  background: var(--paper); box-shadow: 0 0 0 3px var(--ink), 0 4px 10px rgb(0 0 0 / .4);
}
.kt-strip-anchor { top: var(--ay); width: 34px; height: 4px; margin: -2px 0 0 -17px; border-radius: 2px; background: rgb(255 255 255 / .75); }
.kt-strip.held .kt-strip-knob, .kt-strip.held .kt-strip-anchor { opacity: 1; }
/* STEER: an arrow on the knob, which way up the screen you're heading */
.kt-strip.steer .kt-strip-knob::after {
  content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  border: 0 solid transparent; border-width: 0 10px;
}
.kt-strip.steer[data-dir="up"] .kt-strip-knob::after { border-bottom: 15px solid var(--ink); }
.kt-strip.steer[data-dir="down"] .kt-strip-knob::after { border-top: 15px solid var(--ink); }
.kt-strip.steer .kt-strip-fill { display: none; }
/* GO: the strip fills with gas; red when you're braking; a flash for boost */
.kt-strip-fill {
  position: absolute; left: 6px; right: 6px; bottom: 6px; height: calc(var(--gas) * (100% - 12px));
  border-radius: 20px; background: linear-gradient(0deg, var(--hot), var(--sun)); opacity: .6; pointer-events: none;
}
.kt-strip-charge {
  position: absolute; left: 50%; bottom: 38px; width: 58%; height: 8px; transform: translateX(-50%);
  border-radius: 99px; background: rgb(255 255 255 / .16); overflow: hidden; pointer-events: none;
}
.kt-strip-charge::after { content: ''; position: absolute; inset: 0 auto 0 0; width: calc(var(--charge, 1) * 100%); border-radius: 99px; background: rgb(255 255 255 / .5); }
.kt-strip.gas.ready { box-shadow: inset 0 0 0 2px var(--sun), 0 0 16px rgb(255 201 60 / .3); }
.kt-strip.gas.ready .kt-strip-charge::after { background: linear-gradient(90deg, var(--hot), var(--sun)); }
.kt-strip.gas.ready > b, .kt-strip.gas.firing > b { color: var(--sun); }
.kt-strip.gas.braking { background: rgb(224 50 43 / .3); box-shadow: inset 0 0 0 3px #e0322b; }
.kt-strip.gas.boost { animation: kt-strip-boost .5s ease-out; }
@keyframes kt-strip-boost { from { background: rgb(255 201 60 / .85); } }
.kt-strip-chip {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 1; cursor: pointer;
  font: 700 .58rem var(--rtg-font); letter-spacing: .03em; white-space: nowrap; padding: .35em .6em;
  border: 0; border-radius: 99px; background: var(--paper); color: var(--ink); box-shadow: 0 0 0 2px var(--ink);
}
.kt-strip-chip.off { opacity: .55; }
/* Held upright: side by side under the table, where your thumbs rest. */
.kt-stage[data-strips="below"] .kt-strip { top: auto; bottom: 8px; height: calc(var(--below) - 14px); width: calc(50% - 7px); }
.kt-stage[data-strips="below"] .kt-boost { bottom: calc(var(--below) + 10px); }
/* Dev: what the tilt is doing */
.kt-tilt-readout {
  position: absolute; left: calc(var(--pad, 0px) + 8px); top: 58px; z-index: 1; display: grid; gap: 4px;
  padding: 4px 8px; border-radius: 10px; background: rgb(29 27 47 / .78); color: #fff;
  font: 600 .62rem var(--rtg-font); pointer-events: none;
}
.kt-tilt-readout[hidden] { display: none; }
.kt-tilt-row { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.kt-tilt-row.small { opacity: .8; }
.kt-tilt-row em { font-style: normal; font-variant-numeric: tabular-nums; }
.kt-tilt-meter { position: relative; width: 54px; height: 8px; border-radius: 99px; background: rgb(255 255 255 / .2); }
.kt-tilt-meter i { position: absolute; top: -2px; left: calc(50% + var(--lean, 0) * 50% - 6px); width: 12px; height: 12px; border-radius: 50%; background: var(--sun); }
.kt-tilt-flag { padding: 1px 7px; border-radius: 99px; background: rgb(255 255 255 / .14); color: rgb(255 255 255 / .45); }
.kt-tilt-flag.on { background: var(--sun); color: var(--ink); }
.kt-tilt-flag.won.on { background: var(--hot); color: #fff; }
/* Touch screens: zoom in on your kart (or see the whole table), full screen. */
.kt-chips { position: absolute; right: calc(var(--pad, 0px) + 10px); top: 58px; z-index: 1; display: flex; gap: 8px; }
.kt-chips[hidden], .kt-chip[hidden] { display: none; }
.kt-chip {
  cursor: pointer; padding: 7px; border: 0; border-radius: 50%;
  background: var(--paper); box-shadow: 0 0 0 2px var(--ink), 0 4px 10px rgb(0 0 0 / .35);
}
.kt-chip svg { display: block; width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.kt-zoom.in .kt-plus { display: none; } /* zoomed in: the magnifier says minus */
.kt-stage:has(.kt-chips:not([hidden])) .kt-minimap { top: 98px; }
/* A touch style: no keys to show. With strips, the HUD keeps clear of them. */
.kt-game[data-touch="1"] .kt-hint, .kt-game[data-touch="1"] .kt-boost .kt-cap { display: none; }
.kt-game[data-steering="thumbs"] .kt-bar, .kt-game[data-steering="thumbs"] .kt-banner { max-width: calc(100% - 2 * var(--pad, 0px) - 12px); }
.kt-game[data-steering="thumbs"] .kt-minimap { right: calc(var(--pad, 0px) + 10px); }
/* The kit's build badge: out of the way at the bottom middle, and thumbs go
   through it (unless it's asking you to reload). */
body:has(.kt-game[data-touch="1"]) #rtg-build:not(.stale) {
  pointer-events: none; opacity: .45; right: auto; left: 50%; bottom: 2px; transform: translateX(-50%) scale(.85);
}
/* Phone screen (a touch steering style): just the table and what matters.
   A plain floor: the pool water, without the tiles. */
:root { --floor: #0f7fae; } /* scene.js FLOOR */
body:has(.kt-game[data-touch="1"]) { background: var(--floor); }
.kt-netline {
  position: absolute; left: calc(var(--pad, 0px) + 8px); top: 46px; z-index: 1;
  padding: 2px 7px; border-radius: 8px; background: rgb(29 27 47 / .75); color: #fff;
  font: 600 .6rem var(--rtg-font); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none;
}
.kt-netline[hidden] { display: none; }
/* The HUD on a phone: a short status pill, a slim score bar, small icon
   buttons; with Thumbs the boost meter is on GO, so the boost bar goes. */
.kt-game[data-touch="1"] .kt-banner { top: 10px; padding: .3em .9em .3em .7em; font-size: .85rem; }
.kt-game[data-touch="1"] .kt-banner::before {
  content: ''; display: inline-block; width: .7em; height: .7em; margin-right: .45em; vertical-align: .02em;
  border-radius: 50%; background: var(--c, var(--hot)); box-shadow: 0 0 0 1.5px var(--ink);
}
.kt-game[data-touch="1"] .kt-bar { top: 10px; height: 26px; }
.kt-game[data-touch="1"] .kt-bar-fill b { font-size: .82rem; left: 8px; }
.kt-game[data-touch="1"] .kt-bar-fill i:nth-child(2):last-child b { right: 8px; }
.kt-game[data-touch="1"] .kt-time { font-size: .88rem; }
.kt-game[data-touch="1"] .kt-chips { top: 46px; }
.kt-game[data-touch="1"] .kt-stage:has(.kt-chips:not([hidden])) .kt-minimap { top: 92px; }
.kt-game[data-touch="1"] .kt-tilt-readout { top: 70px; }
.kt-game[data-touch="1"] .kt-boost { display: none; } /* GO and BOOST show the boost themselves */
.kt-stage-act { position: absolute; left: 50%; bottom: calc(var(--below, 0px) + 14px); transform: translateX(-50%); z-index: 1; display: none; }
.kt-game[data-touch="1"] .kt-stage-act:not([hidden]) { display: block; }
.kt-stage-act .rtg-btn { white-space: nowrap; box-shadow: var(--sticker); }
/* On a phone the table takes the whole screen; the panels are below it. */
@media (max-width: 1000px), (max-height: 500px) {
  .kt-game[data-touch="1"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: 100dvh auto; height: auto; }
  .kt-game[data-touch="1"] .kt-side { overflow: visible; padding: 12px 12px 60px; }
}

/* ---------- the round ---------- */
.kt-count[hidden], .kt-results[hidden], .kt-minimap[hidden], .kt-bar[hidden] { display: none; }
/* The tug of war: each team's share of the table, bare table in between,
   with the clock on top. */
.kt-bar {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: min(560px, calc(100% - 28px));
  height: 34px; border-radius: 99px; background: var(--paper); box-shadow: var(--sticker); overflow: hidden; pointer-events: none;
}
.kt-bar-fill { position: absolute; inset: 0; display: flex; }
.kt-bar-fill i { display: block; width: var(--w); background: var(--c); position: relative; transition: width .25s; }
.kt-bar-fill i:nth-child(2) { margin-left: auto; } /* two teams: one from each end */
.kt-bar-fill:has(i:nth-child(3)) i:nth-child(2) { margin-left: 0; } /* more: side by side */
.kt-bar-fill b {
  position: absolute; top: 50%; transform: translateY(-50%); left: 10px;
  font: 400 1rem var(--rtg-display); color: #fff; -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; white-space: nowrap;
}
.kt-bar-fill i:nth-child(2):last-child b { left: auto; right: 10px; }
.kt-time {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: .1em .7em; border-radius: 99px; background: var(--ink); color: #fff;
  font: 400 1.1rem var(--rtg-display); letter-spacing: .05em; font-variant-numeric: tabular-nums;
}
.kt-time.hurry { background: var(--hot); animation: kt-hurry .5s ease-in-out infinite alternate; }
@keyframes kt-hurry { to { transform: translate(-50%, -50%) scale(1.12); } }
.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; white-space: nowrap;
}
.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 { position: absolute; top: 62px; right: 10px; width: min(300px, 36%); pointer-events: none; }
/* Cards over everything on the table (the touch strips and buttons are z-index 1). */
.kt-results, .kt-ask { position: absolute; inset: 0; z-index: 3; 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 { --c: var(--hot); font-size: 2.1rem; color: var(--c); -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; margin-bottom: .3em; }
.kt-results-card h3 { margin: 2px 0 6px; font: 400 1rem var(--rtg-display); letter-spacing: .04em; }
.kt-results-card ol { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 4px; max-height: 40vh; overflow-y: auto; }
.kt-results-card ol li { display: grid; grid-template-columns: 1.6em 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 ol 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-results-card .rtg-btn { width: 100%; }
.kt-team-bars { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.kt-team-bars li { display: grid; grid-template-columns: 6.5em minmax(0, 1fr) 3.6em; gap: 8px; align-items: center; font-weight: 700; }
.kt-team-bars b { font: 400 1.1rem var(--rtg-display); text-align: right; }
.kt-share { height: 16px; border-radius: 99px; background: #e6dccb; box-shadow: inset 0 0 0 2px var(--ink); overflow: hidden; }
.kt-share i { display: block; height: 100%; width: var(--w); background: var(--c); }
.kt-kicker { margin: 0; font: 600 .74rem var(--rtg-font); letter-spacing: .08em; text-transform: uppercase; color: var(--rtg-muted); }
.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; }

/* ---------- 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"] { display: none; }
.kt-scores small { display: block; font-size: .7rem; font-weight: 600; color: var(--rtg-muted); }

/* ---------- teams ---------- */
.kt-team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kt-team { border-radius: 12px; padding: 6px 8px 8px; background: color-mix(in srgb, var(--c) 16%, #fff); box-shadow: inset 0 0 0 2px var(--c); min-width: 0; }
.kt-team h3 { margin: 0 0 4px; display: flex; justify-content: space-between; align-items: baseline; font: 400 .98rem var(--rtg-display); letter-spacing: .03em; color: var(--ink); }
.kt-team h3 span { font: 700 .74rem var(--rtg-font); color: var(--rtg-muted); }
.kt-team ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.kt-team li { display: flex; align-items: center; gap: 4px; font-weight: 600; font-size: .84rem; min-height: 1.5em; }
.kt-team li.me { text-decoration: underline 2px var(--c); text-underline-offset: 3px; }
.kt-team li.bot { color: var(--rtg-muted); font-weight: 500; }
.kt-team .kt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kt-team em { font-style: normal; font-size: .68rem; color: var(--rtg-muted); }
.kt-move { display: flex; gap: 3px; flex: none; }
.kt-move button { width: 14px; height: 14px; padding: 0; border-radius: 50%; border: 2px solid #fff; background: var(--c); box-shadow: 0 0 0 1.5px var(--ink); cursor: pointer; }
.kt-move button:hover { transform: scale(1.25); }
.kt-team-tools { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.kt-team-tools .kt-seg { flex: 1; }
.kt-dummies { margin-top: 8px; }
.kt-act { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin-top: 10px; }
.kt-act:has(p) { grid-auto-flow: row; }
.kt-act p { margin: 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; }

/* ---------- touch stick ---------- */
/* Stick steering: the left half of the table is a thumbstick that appears
   wherever your thumb lands (and fades when you let go), with a round BOOST
   button bottom right. Only the controls block touch scrolling and
   long-press menus. */
.kt-stick-zone, .kt-stick-boost {
  touch-action: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.kt-stick-zone { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; }
.kt-stick {
  --r: 60px;
  position: absolute; left: 0; top: 0; width: calc(var(--r) * 2); height: calc(var(--r) * 2);
  margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1); border-radius: 50%; pointer-events: none;
  background: rgb(29 27 47 / .3); box-shadow: inset 0 0 0 3px rgb(255 255 255 / .8), 0 6px 16px rgb(0 0 0 / .3);
  opacity: 0; transition: opacity .4s;
}
.kt-stick.on { opacity: 1; transition-duration: .05s; }
.kt-stick i {
  position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #fff 55%, #e6dccb); box-shadow: 0 0 0 3px var(--ink), 0 4px 10px rgb(0 0 0 / .35);
}
.kt-stick:not(.on) i { transition: transform .15s; } /* springs back to the middle */
/* Until your first touch: where to put your thumb. */
.kt-stick-tip {
  position: absolute; left: 50%; bottom: max(16px, 12%); transform: translateX(-50%); pointer-events: none;
  display: grid; place-items: center; width: 124px; height: 124px; box-sizing: border-box; padding: 14px;
  border-radius: 50%; border: 3px dashed rgb(255 255 255 / .75); background: rgb(29 27 47 / .32);
  color: #fff; font: 600 .82rem/1.2 var(--rtg-font); text-align: center; text-shadow: 0 1px 2px rgb(0 0 0 / .6);
  transition: opacity .4s;
}
.kt-stick-zone.used .kt-stick-tip { opacity: 0; }
.kt-stick-boost {
  position: absolute; right: 16px; bottom: 16px; width: 88px; height: 88px; padding: 0; border: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, var(--sun), var(--hot) 72%); color: #fff; cursor: pointer;
  font: 400 1.1rem/1 var(--rtg-display); letter-spacing: .05em; text-transform: uppercase;
  -webkit-text-stroke: 1px var(--ink); paint-order: stroke fill; box-shadow: var(--sticker);
  transition: transform .06s;
}
.kt-stick-boost.down { transform: scale(.9); }
/* Grey while the boost recharges, bright while it fires (Stick.showBoost). */
.kt-stick-boost.wait { background: radial-gradient(circle at 50% 30%, #e6dccb, #b9ad98 72%); }
.kt-stick-boost.firing { background: radial-gradient(circle at 50% 30%, #fff3c4, var(--sun) 72%); }

/* ---------- a controller on a phone ---------- */
/* Pick up a game controller and the touch controls step aside: the table
   takes the whole screen and the boost bar sits small in a corner. Touch
   the screen to have them back (app.js setPadMode). */
.kt-game[data-touch="1"][data-pad="1"] .kt-stage { --pad: 0px !important; --below: 0px !important; }
.kt-game[data-pad="1"] .kt-strip, .kt-game[data-pad="1"] .kt-stick-zone, .kt-game[data-pad="1"] .kt-stick-boost { display: none; }
.kt-game[data-touch="1"][data-pad="1"] .kt-boost {
  display: flex; left: auto; right: 10px; bottom: 10px; transform: none; gap: 6px; padding: 4px 10px 4px 6px; font-size: .8rem;
}
.kt-game[data-touch="1"][data-pad="1"] .kt-boost-bar { width: 60px; height: 10px; }

/* ---------- the menu (phones) ---------- */
.kt-menu { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; background: rgb(11 60 90 / .45); }
.kt-menu[hidden] { display: none; }
.kt-menu-card {
  display: grid; gap: 10px; width: min(300px, calc(100% - 32px)); padding: 18px; box-sizing: border-box;
  background: var(--paper); border-radius: 22px; box-shadow: var(--sticker); transform: rotate(-.6deg);
}
.kt-menu-card .rtg-btn { width: 100%; }
.kt-menu-card p { margin: 0; text-align: center; font-size: .9rem; }