/* KRISHIV KART — menus (v3, SPEC §14.5–14.6): boot splash, lobby, player panels,
   select (+ the keyboard-mode picker), track / cup card, loading, results,
   standings, podium, pause overlay, help, QR / phone panel, toasts. Sizes use
   --u from game.css (1% of a 16:9 viewport height) so every screen scales from
   720p to 4K. */

:root {
  --font-body: 'Fredoka', 'Nunito', 'Trebuchet MS', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --panel: linear-gradient(180deg, rgba(48, 31, 104, 0.94) 0%, rgba(27, 16, 53, 0.94) 100%);
  --panel-edge: rgba(255, 255, 255, 0.16);
  --tk-gold: linear-gradient(180deg, #fffbe6 0%, #ffe680 30%, #ffc21a 55%, #f29100 100%);
  --tk-silver: linear-gradient(180deg, #ffffff 0%, #e6ecf3 35%, #aab7c6 70%, #8d9bad 100%);
  --tk-bronze: linear-gradient(180deg, #ffe9d2 0%, #f7b47a 35%, #c9773a 70%, #9c5427 100%);
}

#menus {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  font-family: var(--font-game);
  color: #fff;
}

.tk-menus { position: absolute; inset: 0; }

/* every interactive element opts back into pointer events */
.tk-btn, .tk-qr, .tk-help.is-open, .tk-corner, .tk-name-input, .tk-code, .tk-code-input { pointer-events: auto; }

/* ================================================================ shared bits */

.tk-btn {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.tk-key {
  display: inline-block;
  min-width: 1.9em;
  padding: 0.12em 0.45em 0.08em;
  margin: 0 0.12em;
  border-radius: 0.38em;
  background: #fff;
  color: var(--ink);
  font: 700 0.82em/1.15 var(--font-body);
  text-align: center;
  box-shadow: 0 0.16em 0 #b9b3d6, 0 0.22em 0.4em rgba(0, 0, 0, 0.25);
  vertical-align: 0.06em;
  white-space: nowrap;
}

.tk-h1 {
  font-size: calc(var(--u) * 5.4);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-shadow: var(--outline);
}

.tk-panel {
  background: var(--panel);
  border: calc(var(--u) * 0.32) solid var(--panel-edge);
  border-radius: calc(var(--u) * 2.6);
  box-shadow: 0 calc(var(--u) * 1.4) calc(var(--u) * 5) rgba(8, 4, 24, 0.55),
    inset 0 calc(var(--u) * 0.3) 0 rgba(255, 255, 255, 0.08);
}

/* chunky menu buttons */
.tk-btn--menu {
  --b1: #7cf08a; --b2: #22b84a; --b3: #137a33;
  position: relative;
  display: block;
  padding: calc(var(--u) * 1.3) calc(var(--u) * 4);
  border-radius: calc(var(--u) * 1.8);
  background: linear-gradient(180deg, var(--b1) 0%, var(--b2) 62%);
  box-shadow: 0 calc(var(--u) * 0.7) 0 var(--b3), 0 calc(var(--u) * 1.1) calc(var(--u) * 2) rgba(0, 0, 0, 0.35),
    inset 0 calc(var(--u) * 0.32) 0 rgba(255, 255, 255, 0.45);
  font-size: calc(var(--u) * 3.3);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-shadow: 0 calc(var(--u) * 0.28) 0 rgba(0, 0, 0, 0.35);
  transition: transform 0.14s cubic-bezier(.3, 1.6, .5, 1), filter 0.14s;
}
.tk-btn--menu.orange { --b1: #ffd27a; --b2: #ff8a1a; --b3: #b25300; }
.tk-btn--menu.red    { --b1: #ff8f9e; --b2: #ff3550; --b3: #a8122a; }
.tk-btn--menu.blue   { --b1: #8fe2ff; --b2: #2f8dff; --b3: #1a4fb0; }
.tk-btn--menu.is-focus {
  transform: scale(1.06);
  filter: brightness(1.08);
  box-shadow: 0 0 0 calc(var(--u) * 0.45) #fff, 0 0 calc(var(--u) * 2.6) calc(var(--u) * 0.6) rgba(255, 255, 255, 0.55),
    0 calc(var(--u) * 0.7) 0 var(--b3), inset 0 calc(var(--u) * 0.32) 0 rgba(255, 255, 255, 0.45);
}
.tk-btn--menu:active { transform: scale(0.97) translateY(calc(var(--u) * 0.4)); }
.tk-btn--menu.gray { --b1: #c9c3e6; --b2: #7b70ab; --b3: #4a3f7a; }
.tk-btn--menu.is-off { filter: grayscale(0.75) brightness(0.8); }

/* ================================================================ screens */

.tk-screen {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.tk-screen.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease, visibility 0s;
}
.tk-screen:not(.is-active) * { pointer-events: none !important; }

/* ================================================================ boot splash */

.tk-boot {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 3);
  background: radial-gradient(120% 90% at 50% 30%, #3b2780 0%, #1b1035 60%, #0b0a14 100%);
  transition: opacity 0.6s ease;
}
.tk-boot.is-gone { opacity: 0; }
.tk-boot-logo {
  font-family: var(--font-game);
  font-size: calc(var(--u) * 11);
  color: #ffd23a;
  letter-spacing: 0.03em;
  text-shadow: 0 calc(var(--u) * 0.6) 0 #b25300, 0 calc(var(--u) * 1.4) calc(var(--u) * 2) rgba(0, 0, 0, 0.45);
  animation: tk-bob 1.6s ease-in-out infinite;
}
.tk-boot-bar {
  width: calc(var(--u) * 36);
  height: calc(var(--u) * 1.4);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.tk-boot-bar i {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #38c8ff, #ff4f9a, #ffd23a);
  animation: tk-boot-slide 1.1s ease-in-out infinite;
}
.tk-boot-text { font: 600 calc(var(--u) * 2.2) var(--font-body); color: rgba(255, 255, 255, 0.75); }
@keyframes tk-boot-slide { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }

.tk-fatal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px;
  text-align: center;
  background: #1b1035;
  color: #fff;
  font-family: var(--font-body);
  pointer-events: auto;
}
.tk-fatal-title { font: 400 clamp(28px, 5vh, 56px) var(--font-game); color: #ffd23a; }
.tk-fatal-detail { max-width: 640px; font-size: clamp(15px, 2.2vh, 20px); line-height: 1.45; opacity: 0.85; white-space: pre-line; }

/* ================================================================ corner buttons */

.tk-corner {
  position: absolute;
  top: calc(var(--u) * 3);
  right: calc(var(--u) * 3);
  z-index: 30;
  display: flex;
  gap: calc(var(--u) * 1.2);
  transition: opacity 0.3s;
}
[data-screen='race'] > .tk-corner, [data-screen='boot'] > .tk-corner { opacity: 0; pointer-events: none; }
.tk-icon-btn {
  width: calc(var(--u) * 5.6);
  height: calc(var(--u) * 5.6);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(27, 16, 53, 0.72);
  border: calc(var(--u) * 0.3) solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 calc(var(--u) * 0.6) calc(var(--u) * 1.6) rgba(0, 0, 0, 0.3);
  font-size: calc(var(--u) * 2.7);
  transition: transform 0.15s cubic-bezier(.3, 1.6, .5, 1), background 0.15s;
}
.tk-icon-btn span { display: block; line-height: 1; }
.tk-icon-btn svg { display: block; width: 58%; height: 58%; color: #fff; }
.tk-icon-btn:hover { transform: scale(1.1); background: rgba(60, 40, 120, 0.85); }
.tk-icon-btn.is-muted { border-color: #ff6b81; }
.tk-icon-btn[data-action='help'] span { font-family: var(--font-game); font-size: calc(var(--u) * 3.2); }

/* sound settings popover (speaker button) */
.tk-sound {
  position: absolute;
  top: calc(var(--u) * 10.4);
  right: calc(var(--u) * 3);
  z-index: 31;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.2);
  width: calc(var(--u) * 42);
  padding: calc(var(--u) * 2.2) calc(var(--u) * 2.4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(var(--u) * -1)) scale(0.96);
  transform-origin: top right;
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(.2, 1.4, .4, 1), visibility 0s linear 0.18s;
}
.tk-sound.is-open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity 0.18s ease, transform 0.22s cubic-bezier(.2, 1.4, .4, 1), visibility 0s; }
[data-screen='race'] > .tk-sound, [data-screen='boot'] > .tk-sound { display: none; }
.tk-sound-title { font-size: calc(var(--u) * 3.4); color: #ffd23a; text-shadow: var(--outline); }
.tk-sound-row .tk-seg-btn { min-width: calc(var(--u) * 8); }
.tk-sound-muted { font: 600 calc(var(--u) * 1.7) var(--font-body); color: #ff8f9e; }
.tk-sound-muted[hidden] { display: none; }
.tk-sound-now {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: calc(var(--u) * 0.3) calc(var(--u) * 1.4);
  padding-top: calc(var(--u) * 1.2);
  border-top: calc(var(--u) * 0.2) solid rgba(255, 255, 255, 0.12);
  font-family: var(--font-body);
}
.tk-sound-now-label { grid-column: 1 / -1; font-size: calc(var(--u) * 1.5); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.55); }
.tk-sound-song { min-width: 0; font-size: calc(var(--u) * 2); font-weight: 600; line-height: 1.25; color: #fff; overflow-wrap: anywhere; }
.tk-sound-skip {
  padding: calc(var(--u) * 0.7) calc(var(--u) * 1.6);
  border-radius: calc(var(--u) * 1);
  background: rgba(255, 255, 255, 0.12);
  font: 700 calc(var(--u) * 1.9) var(--font-body);
  color: #fff;
  transition: background 0.15s, transform 0.15s;
}
.tk-sound-skip:hover:not(:disabled) { background: rgba(255, 255, 255, 0.22); transform: scale(1.04); }
.tk-sound-skip:disabled { opacity: 0.35; cursor: default; }

/* ================================================================ logo */

.tk-logo {
  position: absolute;
  left: 50%;
  top: calc(var(--u) * 7);
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: calc(var(--u) * 3.4);
  font-family: var(--font-game);
  font-size: calc(var(--u) * 17);
  line-height: 1;
  white-space: nowrap;
  animation: tk-logo-in 0.9s cubic-bezier(.2, 1.4, .4, 1) both;
}
.tk-logo-word { display: flex; position: relative; }
.tk-logo-word.w1 { transform: rotate(-5deg) translateY(calc(var(--u) * -0.6)); }
.tk-logo-word.w2 { transform: rotate(3deg) translateY(calc(var(--u) * 0.8)); }
.tk-logo-ch {
  position: relative;
  display: inline-block;
  margin: 0 -0.015em;
  animation: tk-letter 2.8s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.18s);
}
.tk-logo-ch .b, .tk-logo-ch .f { display: block; }
.tk-logo-ch .b {
  position: absolute;
  inset: 0;
  color: #1b1035;
  -webkit-text-stroke: 0.2em #1b1035;
  text-shadow: 0 0.05em 0 #1b1035, 0 0.09em 0 #1b1035, 0 0.13em 0 #1b1035,
    0 0.2em 0.12em rgba(0, 0, 0, 0.45);
}
.tk-logo-ch .f {
  position: relative;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  padding: 0 0.02em;
}
.w1 .tk-logo-ch .f { background-image: linear-gradient(180deg, #f6ffd0 0%, #c6f56a 34%, #63d43a 64%, #2a9c34 100%); }
.w2 .tk-logo-ch .f { background-image: linear-gradient(180deg, #fff6c2 0%, #ffd23a 36%, #ff9a1a 66%, #ff5a1f 100%); }

/* cartoon exhaust puffs drifting off the first word */
.tk-logo-puffs {
  position: absolute;
  left: -0.62em;
  top: 0.18em;
  width: 0.7em;
  height: 0.7em;
  pointer-events: none;
}
.tk-puff {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #e3ffd0 45%, #a9ec86 100%);
  box-shadow: 0 0 0 0.035em #1b1035, 0 0.06em 0 0.035em rgba(27, 16, 53, 0.6);
  animation: tk-puff 3.2s ease-in-out infinite;
}
.tk-puff.p0 { width: 0.34em; height: 0.34em; right: 0; top: 0.24em; }
.tk-puff.p1 { width: 0.24em; height: 0.24em; right: 0.3em; top: 0.06em; animation-delay: -0.8s; }
.tk-puff.p2 { width: 0.17em; height: 0.17em; right: 0.5em; top: 0.38em; animation-delay: -1.6s; }
.tk-puff.p3 { width: 0.11em; height: 0.11em; right: 0.66em; top: 0.18em; animation-delay: -2.4s; }

.tk-logo-sub {
  position: absolute;
  left: 50%;
  top: calc(var(--u) * 29);
  transform: translateX(-50%) rotate(-1.5deg);
  padding: calc(var(--u) * 0.7) calc(var(--u) * 2.6);
  border-radius: 99px;
  background: #ff4f9a;
  box-shadow: 0 calc(var(--u) * 0.5) 0 #a3195a, 0 calc(var(--u) * 1) calc(var(--u) * 2) rgba(0, 0, 0, 0.3);
  font-size: calc(var(--u) * 2.8);
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-shadow: 0 calc(var(--u) * 0.25) 0 rgba(0, 0, 0, 0.3);
  animation: tk-fade-up 0.6s 0.45s both;
}

/* ================================================================ QR panel */

.tk-qr {
  position: absolute;
  display: flex;
  gap: calc(var(--u) * 1.8);
  align-items: stretch;
  padding: calc(var(--u) * 1.6);
  border-radius: calc(var(--u) * 2.4);
  background: #fff;
  color: var(--ink);
  box-shadow: 0 calc(var(--u) * 0.8) 0 rgba(27, 16, 53, 0.35), 0 calc(var(--u) * 1.6) calc(var(--u) * 4) rgba(8, 4, 24, 0.45);
  font-family: var(--font-body);
  cursor: default;
  user-select: text;
  -webkit-user-select: text;
}
.tk-qr--title {
  right: calc(var(--u) * 3.2);
  bottom: calc(var(--u) * 3.2);
  width: calc(var(--u) * 62);
  animation: tk-fade-up 0.6s 0.6s both;
}
.tk-qr--compact {
  right: calc(var(--u) * 16);
  top: calc(var(--u) * 3);
  width: calc(var(--u) * 50);
  padding: calc(var(--u) * 1.1);
  gap: calc(var(--u) * 1.3);
  border-radius: calc(var(--u) * 2);
}
.tk-qr-code {
  position: relative;
  flex: none;
  width: calc(var(--u) * 21);
  height: calc(var(--u) * 21);
  border-radius: calc(var(--u) * 1.2);
  background: #f1eefb;
  overflow: hidden;
}
.tk-qr--compact .tk-qr-code { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
.tk-qr--compact .tk-qr-info { gap: calc(var(--u) * 0.4); }
.tk-tip-short { display: none; }
.tk-qr--compact .tk-tip-long { display: none; }
.tk-qr--compact .tk-tip-short { display: inline; }
.tk-qr-svg, .tk-qr-svg svg { display: block; width: 100%; height: 100%; }
.tk-qr-svg { opacity: 0; transition: opacity 0.3s; }
.tk-qr.is-online .tk-qr-svg { opacity: 1; }
.tk-qr.is-connecting .tk-qr-code::after {
  content: '';
  position: absolute;
  inset: 32%;
  border-radius: 50%;
  border: calc(var(--u) * 0.7) solid #d8d2f0;
  border-top-color: #8b5cff;
  animation: tk-spin 0.9s linear infinite;
}
.tk-qr-badge, .tk-qr-off {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s cubic-bezier(.3, 1.6, .5, 1);
  transform: scale(0.6);
}
.tk-qr-badge {
  inset: 26%;
  border-radius: 50%;
  background: #22c55e;
  color: #fff;
  font: 700 calc(var(--u) * 5) var(--font-body);
  box-shadow: 0 0 0 calc(var(--u) * 0.8) #fff, 0 calc(var(--u) * 0.6) calc(var(--u) * 2) rgba(0, 0, 0, 0.3);
}
.tk-qr--compact .tk-qr-badge { font-size: calc(var(--u) * 3.4); }
.tk-qr.is-connected .tk-qr-badge { opacity: 1; transform: scale(1); }
.tk-qr-off { font-size: calc(var(--u) * 8); filter: grayscale(0.3); }
.tk-qr--compact .tk-qr-off { font-size: calc(var(--u) * 5.5); }
.tk-qr.is-offline .tk-qr-off { opacity: 0.85; transform: scale(1); }

.tk-qr-info { display: flex; flex-direction: column; justify-content: center; min-width: 0; gap: calc(var(--u) * 0.6); }
.tk-qr-title { font: 400 calc(var(--u) * 3) / 1 var(--font-game); color: #2a1a5e; }
.tk-qr-scan { font-size: calc(var(--u) * 1.8); font-weight: 600; line-height: 1.25; }
.tk-qr-url {
  align-self: flex-start;
  max-width: 100%;
  padding: calc(var(--u) * 0.3) calc(var(--u) * 0.9);
  border-radius: calc(var(--u) * 0.7);
  background: #efeafc;
  color: #4b2fb0;
  font: 600 calc(var(--u) * 1.5) / 1.3 ui-monospace, 'SF Mono', Menlo, monospace;
  overflow-wrap: anywhere;
}
.tk-qr-url:empty { display: none; }
.tk-qr-status { display: flex; align-items: center; gap: calc(var(--u) * 0.8); font-size: calc(var(--u) * 1.75); font-weight: 700; line-height: 1.2; }
.tk-dot {
  flex: none;
  width: calc(var(--u) * 1.4);
  height: calc(var(--u) * 1.4);
  border-radius: 50%;
  background: #b4abd6;
}
.tk-qr.is-online .tk-dot { background: #ffb020; animation: tk-blink 1.2s ease-in-out infinite; }
.tk-qr.is-connected .tk-dot { background: #22c55e; animation: none; box-shadow: 0 0 0 calc(var(--u) * 0.4) rgba(34, 197, 94, 0.25); }
.tk-qr.is-connected .tk-qr-status { color: #138a3c; }
.tk-qr.is-offline .tk-dot { background: #ff5a6e; animation: none; }
.tk-qr.is-offline .tk-qr-status { color: #b0243a; font-weight: 600; }
.tk-qr-tip { font-size: calc(var(--u) * 1.4); line-height: 1.3; color: #6a5f8e; }
.tk-qr-tip b { color: #4a3d7a; }
.tk-qr--compact .tk-qr-title { font-size: calc(var(--u) * 2.3); }
.tk-qr--compact .tk-qr-scan { font-size: calc(var(--u) * 1.45); }
.tk-qr--compact .tk-qr-url { font-size: calc(var(--u) * 1.25); }
.tk-qr--compact .tk-qr-status { font-size: calc(var(--u) * 1.45); }
.tk-qr--compact .tk-qr-tip { font-size: calc(var(--u) * 1.18); }
.tk-qr.is-offline .tk-qr-tip, .tk-qr.is-offline .tk-qr-url { display: none; }

/* ================================================================ shared widgets */

/* stat bars (5 pips each; a fractional rating lights half a pip) */
.tk-stats { display: grid; gap: calc(var(--u) * 0.35) calc(var(--u) * 1); }
.tk-stat { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 0.5); }
.tk-stat-label {
  font: 700 calc(var(--u) * 1.05) / 1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.62);
}
.tk-stat-bar { display: flex; gap: calc(var(--u) * 0.22); }
.tk-stat-bar i {
  display: block;
  width: calc(var(--u) * 1.15);
  height: calc(var(--u) * 0.9);
  border-radius: calc(var(--u) * 0.25);
  background: rgba(255, 255, 255, 0.16);
}
.tk-stat-bar i.on { background: linear-gradient(180deg, #fff6c2, #ffd23a 60%, #ff9d2e); }
.tk-stat-bar i.half { background: linear-gradient(90deg, #ffd23a 0 50%, rgba(255, 255, 255, 0.16) 50% 100%); }
.tk-stats--big {
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * 0.7) calc(var(--u) * 3);
  padding: calc(var(--u) * 1.1) calc(var(--u) * 2);
  border-radius: calc(var(--u) * 1.6) calc(var(--u) * 1.6) 0 0;
  background: rgba(27, 16, 53, 0.78);
}
.tk-stats--big .tk-stat-label { font-size: calc(var(--u) * 1.5); color: rgba(255, 255, 255, 0.8); }
.tk-stats--big .tk-stat-bar i { width: calc(var(--u) * 2.4); height: calc(var(--u) * 1.4); border-radius: calc(var(--u) * 0.4); }
.tk-seg { display: flex; padding: calc(var(--u) * 0.4); gap: calc(var(--u) * 0.4); border-radius: calc(var(--u) * 1.3); background: rgba(0, 0, 0, 0.3); }
.tk-seg-btn {
  min-width: calc(var(--u) * 11);
  padding: calc(var(--u) * 0.7) calc(var(--u) * 1.4);
  border-radius: calc(var(--u) * 1);
  font-size: calc(var(--u) * 2.4);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.tk-seg-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.tk-seg-btn.is-on { color: var(--ink); box-shadow: 0 calc(var(--u) * 0.4) 0 rgba(0, 0, 0, 0.3); }
.tk-btn--go {
  position: relative;
  overflow: hidden;
  padding: calc(var(--u) * 1.3) calc(var(--u) * 6);
  border-radius: calc(var(--u) * 2.2);
  background: linear-gradient(180deg, #fff3a0 0%, #ffd23a 40%, #ff9d1a 100%);
  color: var(--ink);
  font-size: calc(var(--u) * 6);
  line-height: 1;
  letter-spacing: 0.04em;
  text-shadow: 0 calc(var(--u) * 0.3) 0 rgba(255, 255, 255, 0.6);
  box-shadow: 0 calc(var(--u) * 0.9) 0 #b25d00, 0 calc(var(--u) * 1.6) calc(var(--u) * 3) rgba(0, 0, 0, 0.4),
    inset 0 calc(var(--u) * 0.4) 0 rgba(255, 255, 255, 0.7);
  transition: transform 0.16s cubic-bezier(.3, 1.6, .5, 1), filter 0.16s;
}
.tk-btn--go::before {          /* moving shine */
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30%;
  left: -40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  animation: tk-shine 2.6s ease-in-out infinite;
}
.tk-btn--go:hover { transform: scale(1.04); filter: brightness(1.05); }
.tk-btn--go.is-focus {
  transform: scale(1.07);
  box-shadow: 0 0 0 calc(var(--u) * 0.5) #fff, 0 0 calc(var(--u) * 4) calc(var(--u) * 0.8) rgba(255, 210, 58, 0.75),
    0 calc(var(--u) * 0.9) 0 #b25d00, inset 0 calc(var(--u) * 0.4) 0 rgba(255, 255, 255, 0.7);
}
.tk-btn--go:active { transform: scale(0.97) translateY(calc(var(--u) * 0.4)); }
.tk-mod {
  padding: calc(var(--u) * 0.2) calc(var(--u) * 0.8);
  border-radius: 99px;
  font: 700 calc(var(--u) * 1.3) / 1.3 var(--font-body);
  letter-spacing: 0.03em;
}
.tk-mod.up { background: rgba(77, 255, 122, 0.18); color: #7dff9b; }
.tk-mod.down { background: rgba(255, 79, 109, 0.2); color: #ff8fa2; }
.tk-mod.even { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.7); }

/* ================================================================ pause */

.tk-pause {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
  background: rgba(12, 6, 30, 0.55);
  backdrop-filter: blur(3px) saturate(0.8);
  -webkit-backdrop-filter: blur(3px) saturate(0.8);
}
/* sandbox: the HUD draws the whole city beside the card (hud.js _ovLayout) — dimmed, never blurred */
.tk-pause.is-sandbox { backdrop-filter: none; -webkit-backdrop-filter: none; }
.tk-pause-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(var(--u) * 1.8);
  width: calc(var(--u) * 54);
  padding: calc(var(--u) * 3.6) calc(var(--u) * 4.4) calc(var(--u) * 3);
  text-align: center;
  transform: scale(0.92);
  transition: transform 0.3s cubic-bezier(.2, 1.4, .4, 1);
}
.tk-pause.is-active { opacity: 1; visibility: visible; transition: opacity 0.25s ease, visibility 0s; }
.tk-pause.is-active .tk-pause-panel { transform: none; pointer-events: auto; }
.tk-pause-by { font-size: calc(var(--u) * 3); text-shadow: var(--outline); }
.tk-pause-btns { display: flex; flex-direction: column; gap: calc(var(--u) * 1.6); }
.tk-pause-btns[hidden] { display: none; }
.tk-pause-title { font-size: calc(var(--u) * 7.4); margin-bottom: calc(var(--u) * 1); color: #ffd23a; }
.tk-pause-hint { margin-top: calc(var(--u) * 0.6); font: 600 calc(var(--u) * 1.7) / 1.9 var(--font-body); color: rgba(255, 255, 255, 0.72); }
.tk-pause-sound { display: flex; flex-direction: column; gap: calc(var(--u) * 0.6); margin-top: calc(var(--u) * 0.4); }
.tk-pause-sound .tk-seg-btn { min-width: calc(var(--u) * 8); }
/* sandbox: the spot "Respawn all" sends everyone to (‹ name ›), tucked under its button */
.tk-pause-spawn {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1);
  margin: calc(var(--u) * -0.8) calc(var(--u) * 1.6) 0;
  padding: calc(var(--u) * 0.5) calc(var(--u) * 0.6);
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.3);
  border: calc(var(--u) * 0.25) solid rgba(255, 255, 255, 0.14);
  font: 700 calc(var(--u) * 2) var(--font-body);
  color: rgba(255, 255, 255, 0.82);
}
.tk-pause-spawn[hidden] { display: none; }
.tk-pause-spawn.is-focus { border-color: #ffb648; color: #fff; box-shadow: 0 0 calc(var(--u) * 1.4) rgba(255, 160, 40, 0.35); }
.tk-pause-spawn-name { flex: 1; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-pause-spawn-arrow {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(var(--u) * 3.6);
  height: calc(var(--u) * 3.6);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  font: 800 calc(var(--u) * 2.8) / 1 var(--font-body);
  cursor: pointer;
  user-select: none;
  pointer-events: auto;
}
.tk-pause-spawn-arrow:hover { background: rgba(255, 255, 255, 0.24); }
.tk-pause-spawn.is-focus .tk-pause-spawn-arrow { background: #ff9d2e; color: #2b1300; }

/* ================================================================ results */

.tk-results {
  background: linear-gradient(90deg, rgba(12, 6, 30, 0) 30%, rgba(12, 6, 30, 0.55) 55%, rgba(12, 6, 30, 0.7) 100%);
}
.tk-res-panel {
  position: absolute;
  right: calc(var(--u) * 4);
  top: 50%;
  width: calc(var(--u) * 78);
  padding: calc(var(--u) * 3) calc(var(--u) * 3.4) calc(var(--u) * 3.2);
  transform: translateY(-50%) translateX(calc(var(--u) * 6));
  opacity: 0;
  transition: transform 0.5s cubic-bezier(.2, 1.2, .4, 1), opacity 0.4s;
}
.tk-results.is-active .tk-res-panel, .tk-standings.is-active .tk-res-panel { transform: translateY(-50%); opacity: 1; }
.tk-standings { background: linear-gradient(90deg, rgba(12, 6, 30, 0) 30%, rgba(12, 6, 30, 0.55) 55%, rgba(12, 6, 30, 0.7) 100%); }
.tk-res-title {
  font-size: calc(var(--u) * 6.4);
  line-height: 1;
  text-transform: uppercase;
  --ol: 0.06em;
  text-shadow: var(--outline);
}
.tk-res-title.p1 { color: #ffd23a; }
.tk-res-title.p2 { color: #e6ecf3; }
.tk-res-title.p3 { color: #f7b47a; }
.tk-res-sub { margin: calc(var(--u) * 0.8) 0 calc(var(--u) * 2); font: 600 calc(var(--u) * 1.9) var(--font-body); color: rgba(255, 255, 255, 0.72); }

.tk-res-table { display: flex; flex-direction: column; gap: calc(var(--u) * 0.55); }
.tk-res-row {
  --c: #888;
  display: grid;
  grid-template-columns: calc(var(--u) * 9) 1fr calc(var(--u) * 15) calc(var(--u) * 8);
  align-items: center;
  height: calc(var(--u) * 5);
  padding: 0 calc(var(--u) * 1.4);
  border-radius: calc(var(--u) * 1.3);
  background: rgba(255, 255, 255, 0.07);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: calc(var(--u) * 2.2);
}
.tk-res-table > .tk-res-row:not(.tk-res-headrow) { animation: tk-row-in 0.45s cubic-bezier(.2, 1.2, .4, 1) both; animation-delay: var(--d, 0s); }
.tk-res-headrow {
  height: calc(var(--u) * 2.6);
  background: none;
  font-size: calc(var(--u) * 1.45);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.tk-res-row.is-player {
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 55%, #2b1c5c) 0%, color-mix(in srgb, var(--c) 25%, #2b1c5c) 100%);
  box-shadow: 0 0 0 calc(var(--u) * 0.3) var(--slot, #fff), 0 0 calc(var(--u) * 2.4) color-mix(in srgb, var(--slot, var(--c)) 60%, transparent);
}
.tk-std-row { grid-template-columns: calc(var(--u) * 9) 1fr calc(var(--u) * 8) calc(var(--u) * 9); }
.tk-res-pts { text-align: right; font-family: var(--font-game); font-weight: 400; font-size: 1.15em; font-variant-numeric: tabular-nums; }
.tk-res-pts.plus { color: #7dff9b; font-size: 1em; }
.tk-res-headrow .tk-res-pts { font-family: var(--font-body); font-size: 1em; color: inherit; }
.tk-res-tm, .tk-res-bl { text-align: right; font-variant-numeric: tabular-nums; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-weight: 600; }
.tk-res-headrow .tk-res-tm, .tk-res-headrow .tk-res-bl { font-family: var(--font-body); }
.tk-res-bl { color: rgba(255, 255, 255, 0.7); font-size: 0.85em; }
.tk-res-tm.est { color: rgba(255, 255, 255, 0.6); font-style: italic; }
.tk-res-nm { display: flex; align-items: center; gap: calc(var(--u) * 1.1); min-width: 0; }
.tk-res-name { font-family: var(--font-game); font-weight: 400; font-size: 1.12em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-chip {
  flex: none;
  width: calc(var(--u) * 2.4);
  height: calc(var(--u) * 2.4);
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 calc(var(--u) * 0.3) rgba(255, 255, 255, 0.85);
}
.tk-you {
  padding: calc(var(--u) * 0.2) calc(var(--u) * 0.8);
  border-radius: calc(var(--u) * 0.7);
  background: var(--slot, #fff);
  color: #fff;
  text-shadow: 0 calc(var(--u) * 0.15) 0 rgba(0, 0, 0, 0.4);
  font: 400 calc(var(--u) * 1.5) var(--font-game);
  letter-spacing: 0.05em;
}
.tk-place {
  display: inline-block;
  min-width: calc(var(--u) * 6);
  padding: calc(var(--u) * 0.35) calc(var(--u) * 0.8);
  border-radius: calc(var(--u) * 1);
  background: rgba(255, 255, 255, 0.14);
  text-align: center;
  font: 400 calc(var(--u) * 2.3) / 1 var(--font-game);
}
.tk-place.p1 { background: var(--tk-gold); color: #5a3400; }
.tk-place.p2 { background: var(--tk-silver); color: #2c3644; }
.tk-place.p3 { background: var(--tk-bronze); color: #4a230a; }
.tk-res-btns { display: flex; gap: calc(var(--u) * 2); margin-top: calc(var(--u) * 2.6); }
.tk-res-btns .tk-btn--menu { flex: 1; padding-left: calc(var(--u) * 1.5); padding-right: calc(var(--u) * 1.5); font-size: calc(var(--u) * 2.9); }

/* ================================================================ help overlay */

.tk-help {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: rgba(12, 6, 30, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0s linear 0.25s;
}
.tk-help.is-open { opacity: 1; visibility: visible; transition: opacity 0.25s, visibility 0s; }
.tk-help-panel {
  width: min(calc(var(--u) * 112), 94vw);
  padding: calc(var(--u) * 3.2) calc(var(--u) * 4);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2.2);
  transform: scale(0.94);
  transition: transform 0.3s cubic-bezier(.2, 1.4, .4, 1);
}
.tk-help.is-open .tk-help-panel { transform: none; }
.tk-help-cols { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 4); }
.tk-help-h { font-size: calc(var(--u) * 3); margin-bottom: calc(var(--u) * 1.2); color: #ffd23a; }
.tk-keys {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: calc(var(--u) * 0.9) calc(var(--u) * 2);
  margin: 0;
  font: 600 calc(var(--u) * 2) / 1.3 var(--font-body);
}
.tk-keys dt { white-space: nowrap; color: #fff; }
.tk-keys dd { margin: 0; color: rgba(255, 255, 255, 0.8); }
.tk-help-note { margin-top: calc(var(--u) * 1.4); font: 500 calc(var(--u) * 1.6) / 1.35 var(--font-body); color: rgba(255, 255, 255, 0.65); }
.tk-help-tips {
  padding: calc(var(--u) * 1.3) calc(var(--u) * 1.8);
  border-radius: calc(var(--u) * 1.4);
  background: rgba(255, 255, 255, 0.07);
  font: 500 calc(var(--u) * 1.75) / 1.45 var(--font-body);
  color: rgba(255, 255, 255, 0.85);
}
.tk-help-tips b { color: #fff; }
.tk-help-close { align-self: center; min-width: calc(var(--u) * 24); }

/* ================================================================ toast / hints */

.tk-dip {
  position: absolute;
  inset: 0;
  z-index: 35;
  background: #0b0a14;
  opacity: 0;
  pointer-events: none;
}
.tk-dip.on { animation: tk-dip 0.6s ease-out both; }
@keyframes tk-dip { 0%, 20% { opacity: 1; } 100% { opacity: 0; } }

/* in-race feedback flash (Menus.screenFlash): zap = lightning white-out,
   hit = red edge vignette, star = rainbow edge glow */
.tk-fx {
  position: absolute;
  inset: 0;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
}
.tk-fx[data-kind="zap"] { background: radial-gradient(ellipse at 50% 40%, rgba(255, 255, 240, 0.92) 0%, rgba(255, 236, 80, 0.75) 45%, rgba(255, 200, 0, 0.55) 100%); }
.tk-fx[data-kind="hit"] { background: radial-gradient(ellipse at 50% 50%, rgba(255, 40, 40, 0) 52%, rgba(255, 40, 60, 0.55) 100%); }
.tk-fx[data-kind="star"] { background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0) 55%, rgba(255, 120, 230, 0.4) 80%, rgba(120, 220, 255, 0.55) 100%); }
.tk-fx.on { animation: tk-fx-hit 0.45s ease-out both; }
.tk-fx.on[data-kind="zap"] { animation: tk-fx-zap 0.7s linear both; }
.tk-fx.on[data-kind="star"] { animation: tk-fx-hit 0.8s ease-out both; }
@keyframes tk-fx-hit { 0% { opacity: 1; } 100% { opacity: 0; } }
/* double strobe like a lightning strike */
@keyframes tk-fx-zap {
  0% { opacity: 0.95; } 12% { opacity: 0.15; } 22% { opacity: 0.85; }
  40% { opacity: 0.35; } 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tk-fx.on, .tk-fx.on[data-kind="zap"], .tk-fx.on[data-kind="star"] { animation: tk-fx-hit 0.4s ease-out both; }
  .tk-fx[data-kind="zap"] { background: rgba(255, 236, 80, 0.35); }
}

.tk-toast {
  position: absolute;
  left: 50%;
  top: calc(var(--u) * 3);
  z-index: 45;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.2);
  max-width: 70vw;
  padding: calc(var(--u) * 1.1) calc(var(--u) * 2.6) calc(var(--u) * 1.1) calc(var(--u) * 1.8);
  border-radius: 99px;
  background: #fff;
  color: var(--ink);
  font-size: calc(var(--u) * 2.5);
  box-shadow: 0 calc(var(--u) * 0.6) 0 rgba(27, 16, 53, 0.35), 0 calc(var(--u) * 1.4) calc(var(--u) * 3) rgba(0, 0, 0, 0.35);
  border-left: calc(var(--u) * 0.9) solid #8b5cff;
  transform: translate(-50%, calc(var(--u) * -14));
  opacity: 0;
  transition: transform 0.35s cubic-bezier(.4, 0, .6, 1), opacity 0.3s;
  pointer-events: none;
}
.tk-toast.on { transform: translate(-50%, 0); opacity: 1; transition: transform 0.45s cubic-bezier(.2, 1.5, .4, 1), opacity 0.2s; }
.tk-toast[data-tone='good'] { border-left-color: #22c55e; }
.tk-toast[data-tone='warn'] { border-left-color: #ff8a1a; }
.tk-toast-icon { font-size: 1.2em; }
.tk-toast-icon[hidden] { display: none; }

.tk-sound-hint, .tk-intro-hint {
  position: absolute;
  left: 50%;
  bottom: calc(var(--u) * 2.6);
  z-index: 25;
  padding: calc(var(--u) * 0.7) calc(var(--u) * 2);
  border-radius: 99px;
  background: rgba(27, 16, 53, 0.78);
  border: calc(var(--u) * 0.25) solid rgba(255, 255, 255, 0.3);
  font: 600 calc(var(--u) * 1.7) var(--font-body);
  white-space: nowrap;
  transform: translate(-50%, calc(var(--u) * 2));
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}
.tk-sound-hint.on, .tk-intro-hint.on { opacity: 1; transform: translate(-50%, 0); }
.tk-sound-hint svg { display: inline-block; width: 1.25em; height: 1.25em; margin-right: 0.35em; vertical-align: -0.28em; color: #ffd23a; animation: tk-blink 1.4s ease-in-out infinite; }
/* lobby / select: the bottom bar holds the status lines: the sound hint goes up top */
[data-screen='lobby'] > .tk-sound-hint { left: auto; right: calc(var(--u) * 17); bottom: auto; top: calc(var(--u) * 4); transform: translateY(calc(var(--u) * -2)); }
[data-screen='lobby'] > .tk-sound-hint.on { transform: none; }
[data-screen='select'] > .tk-sound-hint { left: calc(var(--u) * 4); bottom: calc(var(--u) * 3.6); transform: translateY(calc(var(--u) * 2)); }
[data-screen='select'] > .tk-sound-hint.on { transform: none; }
[data-screen='podium'] > .tk-sound-hint { left: calc(var(--u) * 4); bottom: auto; top: calc(var(--u) * 3.6); transform: translateY(calc(var(--u) * -2)); }
[data-screen='podium'] > .tk-sound-hint.on { transform: none; }
/* lobby toasts sit under the logo; on the title between the logo line and the panels */
[data-screen='lobby'] > .tk-toast { top: calc(var(--u) * 23); }
[data-screen='title'] > .tk-toast { top: calc(var(--u) * 30.4); }
/* the online lobby has no room under the logo: toasts rise in the free part of the left column */
.tk-menus.net-on[data-screen='lobby'] > .tk-toast {
  left: calc(var(--u) * 4);
  top: auto;
  bottom: calc(var(--u) * 12);
  max-width: calc(var(--u) * 46);
  box-sizing: border-box;
  border-radius: calc(var(--u) * 2.4);
  transform: translate(0, calc(var(--u) * 4));
}
.tk-menus.net-on[data-screen='lobby'] > .tk-toast.on { transform: none; }
.tk-intro-hint { bottom: calc(var(--u) * 4); }
/* both hints at once (race started from the phone before any desktop gesture): stack them */
.tk-intro-hint.on ~ .tk-sound-hint { bottom: calc(var(--u) * 8.8); }

/* sandbox drop-in (Menus.setDropIn): "P3 is joining — picking a racer on the phone…" while they pick */
.tk-dropin {
  position: absolute;
  left: 50%;
  bottom: calc(var(--u) * 2.6);
  z-index: 25;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1);
  padding: calc(var(--u) * 0.8) calc(var(--u) * 2.4) calc(var(--u) * 0.8) calc(var(--u) * 1.6);
  border-radius: 99px;
  background: rgba(27, 16, 53, 0.88);
  border: calc(var(--u) * 0.3) solid #7fe3ff;
  box-shadow: 0 calc(var(--u) * 0.5) calc(var(--u) * 2) rgba(0, 0, 0, 0.35);
  font: 700 calc(var(--u) * 2) var(--font-body);
  white-space: nowrap;
  transform: translate(-50%, calc(var(--u) * 2));
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}
.tk-dropin.on { opacity: 1; transform: translate(-50%, 0); }
.tk-dropin-icon { animation: tk-blink 1.4s ease-in-out infinite; }
.tk-dropin.on ~ .tk-sound-hint { bottom: calc(var(--u) * 8.8); }
/* split screen (#hud holds one .hud--compact per view): the bottom centre is two views' corner widgets, so
   the pill sits on the divider — 2P between the shared map (≤ 60 % down) and the right view's map (33.6 view-u
   up; view-u = min(1vh, 0.375vw)); 3P / 4P mid top row, under its callouts and over the right view's map.
   The pause card covers that spot: hidden while paused. */
#hud:has(> .hud--compact) ~ #menus .tk-dropin { top: calc(80% - min(1vh, 0.375vw) * 16.8); bottom: auto; translate: 0 -50%; }
#hud:has(> .hud--compact ~ .hud--compact ~ .hud--compact) ~ #menus .tk-dropin { top: 26.5%; }
#hud:has(> .hud--compact) ~ #menus .tk-pause.is-active ~ .tk-dropin { opacity: 0; }
#hud:has(> .hud--compact) ~ #menus .tk-dropin.on ~ .tk-sound-hint { bottom: calc(var(--u) * 2.6); }

/* an opaque backdrop under every screen, over the 3D view (Menus.curtain): quitting a sandbox, the
   lobby shows on it at once while the race world is rebuilt behind; lifted, it fades away */
.tk-curtain {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 90% at 50% 30%, #3b2780 0%, #1b1035 60%, #0b0a14 100%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
  pointer-events: none;
}
.tk-curtain.on { opacity: 1; visibility: visible; transition: none; }

/* ================================================================ title (SPEC §17): LOCAL / ONLINE → HOST / JOIN */

.tk-title {
  background:
    linear-gradient(180deg, rgba(20, 10, 52, 0.5) 0%, rgba(20, 10, 52, 0) 32%),
    linear-gradient(0deg, rgba(20, 10, 52, 0.75) 0%, rgba(20, 10, 52, 0) 52%);
}
.tk-title .tk-logo { top: calc(var(--u) * 5.5); font-size: calc(var(--u) * 15); }
.tk-title .tk-logo-sub { top: calc(var(--u) * 25); }
.tk-tpanels { position: absolute; left: 50%; top: calc(var(--u) * 37.6); transform: translateX(-50%); }
.tk-tpanel { display: none; }
.tk-tpanels[data-panel='main'] .tk-tpanel--main,
.tk-tpanels[data-panel='online'] .tk-tpanel--online,
.tk-tpanels[data-panel='join'] .tk-tpanel--join { display: flex; animation: tk-pop 0.35s cubic-bezier(.2, 1.5, .4, 1) both; }
.tk-tpanel--main { gap: calc(var(--u) * 4); }
.tk-mode {
  --mc: #2f8dff; --mc2: #1a4fb0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 0.9);
  width: calc(var(--u) * 50);
  height: calc(var(--u) * 31);
  padding: calc(var(--u) * 2);
  border-radius: calc(var(--u) * 3.2);
  background: linear-gradient(180deg, color-mix(in srgb, var(--mc) 70%, #fff) 0%, var(--mc) 52%, var(--mc2) 100%);
  border: calc(var(--u) * 0.45) solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 calc(var(--u) * 1) 0 var(--mc2), 0 calc(var(--u) * 2) calc(var(--u) * 4) rgba(0, 0, 0, 0.45),
    inset 0 calc(var(--u) * 0.4) 0 rgba(255, 255, 255, 0.4);
  transition: transform 0.16s cubic-bezier(.3, 1.6, .5, 1), filter 0.16s;
}
.tk-mode--local { --mc: #22b84a; --mc2: #137a33; }
.tk-mode:hover { transform: scale(1.03); filter: brightness(1.06); }
.tk-mode.is-focus {
  transform: scale(1.06);
  filter: brightness(1.08);
  box-shadow: 0 0 0 calc(var(--u) * 0.6) #fff, 0 0 calc(var(--u) * 4) calc(var(--u) * 0.8) rgba(255, 255, 255, 0.5),
    0 calc(var(--u) * 1) 0 var(--mc2), inset 0 calc(var(--u) * 0.4) 0 rgba(255, 255, 255, 0.4);
}
.tk-mode:active { transform: scale(0.98) translateY(calc(var(--u) * 0.4)); }
.tk-mode-icon { font-size: calc(var(--u) * 7.5); line-height: 1; filter: drop-shadow(0 calc(var(--u) * 0.4) 0 rgba(0, 0, 0, 0.3)); }
.tk-mode-name { font-size: calc(var(--u) * 7.2); line-height: 1; text-transform: uppercase; letter-spacing: 0.04em; text-shadow: var(--outline); }
.tk-mode-desc { max-width: 92%; font: 700 calc(var(--u) * 2.15) / 1.25 var(--font-body); text-align: center; color: #fff; text-shadow: 0 calc(var(--u) * 0.2) calc(var(--u) * 0.5) rgba(0, 0, 0, 0.45); }
.tk-tpanel--online, .tk-tpanel--join {
  flex-direction: column;
  align-items: stretch;
  gap: calc(var(--u) * 1.6);
  width: calc(var(--u) * 78);
  padding: calc(var(--u) * 2.6) calc(var(--u) * 3.4) calc(var(--u) * 2.4);
}
.tk-tpanel-title { font-size: calc(var(--u) * 4.6); text-align: center; color: #7fe3ff; text-shadow: var(--outline); }
.tk-tpanel-sub { font: 600 calc(var(--u) * 1.9) / 1.3 var(--font-body); text-align: center; color: rgba(255, 255, 255, 0.82); }
.tk-tpanel-btns { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 2); }
.tk-tpanel-btns--row { grid-template-columns: 1fr auto; align-items: center; }
.tk-tbtn { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.5); padding: calc(var(--u) * 1.6) calc(var(--u) * 2); font-size: calc(var(--u) * 3.6); }
.tk-tbtn small { font: 700 calc(var(--u) * 1.6) / 1.2 var(--font-body); text-transform: none; letter-spacing: 0; opacity: 0.95; }
.tk-tback { --b1: #c9c3e6; --b2: #7b70ab; --b3: #4a3f7a; align-self: center; padding: calc(var(--u) * 0.9) calc(var(--u) * 3); font-size: calc(var(--u) * 2.4); }
.tk-tpanel-note { font: 600 calc(var(--u) * 1.6) / 1.35 var(--font-body); text-align: center; color: rgba(255, 255, 255, 0.72); }
.tk-tpanel-note.is-warn { color: #ffb4a8; }
.tk-name-row {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.4);
  padding: calc(var(--u) * 0.6) calc(var(--u) * 1.2);
  border-radius: calc(var(--u) * 1.4);
  border: calc(var(--u) * 0.3) solid transparent;
}
.tk-name-row.is-focus { border-color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.06); }
.tk-name-label { font-size: calc(var(--u) * 2.4); text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.82); white-space: nowrap; }
.tk-name-input {
  flex: 1;
  min-width: 0;
  padding: calc(var(--u) * 0.8) calc(var(--u) * 1.4);
  border-radius: calc(var(--u) * 1.1);
  border: calc(var(--u) * 0.3) solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font: 400 calc(var(--u) * 2.8) var(--font-game);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  outline: none;
}
.tk-name-input:focus { border-color: #ffd23a; box-shadow: 0 0 0 calc(var(--u) * 0.3) rgba(255, 210, 58, 0.35); }
.tk-name-input::placeholder { color: rgba(255, 255, 255, 0.35); }
.tk-code {
  position: relative;
  display: flex;
  justify-content: center;
  gap: calc(var(--u) * 1.6);
  padding: calc(var(--u) * 0.8);
  border-radius: calc(var(--u) * 1.8);
  border: calc(var(--u) * 0.3) solid transparent;
  cursor: text;
}
.tk-code.is-focus { border-color: rgba(255, 255, 255, 0.5); }
.tk-code-box {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 12);
  border-radius: calc(var(--u) * 1.4);
  background: rgba(0, 0, 0, 0.38);
  border: calc(var(--u) * 0.4) solid rgba(255, 255, 255, 0.3);
  font: 400 calc(var(--u) * 8) / 1 var(--font-game);
  color: #fff;
  text-shadow: var(--outline);
  transition: border-color 0.15s, background 0.15s;
}
.tk-code-box.is-on { border-color: rgba(127, 227, 255, 0.85); background: rgba(127, 227, 255, 0.12); }
.tk-code-box.is-cur { border-color: #ffd23a; box-shadow: 0 0 0 calc(var(--u) * 0.4) rgba(255, 210, 58, 0.35); }
/* the real field lies over the boxes (keyboard focus, clicks, paste), invisible */
.tk-code-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; font-size: 16px; color: transparent; background: none; cursor: text; }
.tk-join-msg { min-height: 1.35em; text-align: center; font: 700 calc(var(--u) * 2.1) / 1.35 var(--font-body); color: rgba(255, 255, 255, 0.65); }
.tk-join-msg.is-warn { color: #ffb4a8; }
.tk-join-msg.is-busy { color: #7fe3ff; }
.tk-title-hint {
  position: absolute;
  left: 50%;
  bottom: calc(var(--u) * 7.2);
  transform: translateX(-50%);
  font: 600 calc(var(--u) * 1.7) var(--font-body);
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
  text-shadow: 0 0 calc(var(--u) * 0.6) rgba(0, 0, 0, 0.6);
}
.tk-tpanels[data-panel='main'] ~ .tk-title-hint .tk-title-esc { display: none; }

/* ================================================================ lobby */

.tk-lobby {
  background:
    linear-gradient(180deg, rgba(20, 10, 52, 0.55) 0%, rgba(20, 10, 52, 0) 30%),
    linear-gradient(0deg, rgba(20, 10, 52, 0.7) 0%, rgba(20, 10, 52, 0) 45%);
}
.tk-logo--lobby { top: calc(var(--u) * 3.2); font-size: calc(var(--u) * 11); gap: calc(var(--u) * 2.4); }
.tk-lobby .tk-logo-sub { top: calc(var(--u) * 18.6); font-size: calc(var(--u) * 2.2); }
/* the left column: (online) room card, QR panel, keyboard prompt at the bottom — stacked, never overlapping */
.tk-lobby-left {
  position: absolute;
  left: calc(var(--u) * 4);
  top: calc(var(--u) * 27);
  bottom: calc(var(--u) * 4);
  width: calc(var(--u) * 46);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.6);
}
.tk-lobby-left > .tk-qr { position: relative; flex: none; }
.tk-qr--lobby {
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: calc(var(--u) * 2.2);
  animation: tk-fade-up 0.6s 0.3s both;
}
.tk-qr--lobby .tk-qr-code { width: calc(var(--u) * 30); height: calc(var(--u) * 30); }
.tk-qr--lobby .tk-qr-info { align-items: center; }
.tk-qr--lobby .tk-qr-url { align-self: center; font-size: calc(var(--u) * 1.7); }
.tk-qr--lobby .tk-qr-title { font-size: calc(var(--u) * 3.2); }
.tk-lobby-bar {
  position: absolute;
  left: calc(var(--u) * 54);
  right: calc(var(--u) * 4);
  bottom: calc(var(--u) * 3.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 1);
  text-align: center;
}
.tk-settings {
  padding: calc(var(--u) * 0.7) calc(var(--u) * 3);
  border-radius: 99px;
  background: rgba(27, 16, 53, 0.82);
  border: calc(var(--u) * 0.3) solid rgba(255, 255, 255, 0.35);
  color: #ffd23a;
  font-size: calc(var(--u) * 3.2);
  letter-spacing: 0.02em;
  text-shadow: 0 calc(var(--u) * 0.25) 0 rgba(0, 0, 0, 0.4);
}
.tk-settings:empty, .kb-mode .tk-settings { display: none; }
.tk-status {
  font: 600 calc(var(--u) * 2.2) / 1.3 var(--font-body);
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 calc(var(--u) * 0.2) calc(var(--u) * 0.6) rgba(0, 0, 0, 0.6);
}
.tk-status:empty { display: none; }
.tk-status--select { position: absolute; left: 50%; bottom: calc(var(--u) * 4); transform: translateX(-50%); white-space: nowrap; }
.kb-mode .tk-status--select { display: none; }
/* keyboard host: the controls panel has its own hints and reaches down to the status line */
.kb-mode .tk-lobby:has(.tk-kb-lobby.on) .tk-lobby-bar .tk-status { display: none; }
.tk-kb-prompt {
  position: relative;
  flex: none;
  margin-top: auto;
  padding: calc(var(--u) * 1) calc(var(--u) * 1.6);
  border-radius: calc(var(--u) * 1.6);
  background: rgba(27, 16, 53, 0.75);
  font: 600 calc(var(--u) * 1.75) / 1.4 var(--font-body);
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s;
}
.tk-kb-prompt.on { opacity: 1; animation: tk-pulse 1.8s ease-in-out infinite; }

/* lobby ← Back (top left): to the title (a host closes its online room, a guest leaves) */
.tk-back {
  position: absolute;
  left: calc(var(--u) * 3);
  top: calc(var(--u) * 3);
  z-index: 2;
  --b1: #c9c3e6; --b2: #7b70ab; --b3: #4a3f7a;
  padding: calc(var(--u) * 0.9) calc(var(--u) * 2.4);
  font-size: calc(var(--u) * 2.4);
}
.tk-lobby.is-guest .tk-back { --b1: #ff8f9e; --b2: #ff3550; --b3: #a8122a; }
/* an online guest's ← Leave on the screens past the lobby (bottom right: free on every one of them —
   the headers, the keyboard picker and the select screen's sound hint sit on the left) */
.tk-guest-leave { display: none; left: auto; right: calc(var(--u) * 3); top: auto; bottom: calc(var(--u) * 3); --b1: #ff8f9e; --b2: #ff3550; --b3: #a8122a; }
.tk-menus.net-guest:is([data-screen='select'], [data-screen='track'], [data-screen='loading'], [data-screen='results'],
  [data-screen='standings'], [data-screen='podium']) > .tk-guest-leave { display: block; }

/* online play (SPEC §17): the room card — the room code (the HOST's on every screen), whose game,
   the invite link + how else friends get in (host), joined / why not + Leave (guest), the name */
.tk-lobby.is-online .tk-lobby-left { top: calc(var(--u) * 23.5); gap: calc(var(--u) * 1.3); }
.tk-room {
  display: none;
  flex: none;
  flex-direction: column;
  gap: calc(var(--u) * 0.85);
  padding: calc(var(--u) * 1.5) calc(var(--u) * 1.8);
  border-color: rgba(127, 227, 255, 0.55);
  pointer-events: auto;
  animation: tk-fade-up 0.5s both;
}
.tk-room.on { display: flex; }
.tk-room-top { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 1.2); }
.tk-room-kick { display: flex; flex-direction: column; gap: calc(var(--u) * 0.4); min-width: 0; }
.tk-room-kicker { font: 700 calc(var(--u) * 1.55) / 1.2 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: #7fe3ff; white-space: nowrap; }
.tk-room-who { font-size: calc(var(--u) * 2.5); line-height: 1.1; text-shadow: var(--outline); overflow-wrap: anywhere; }
.tk-room-code {
  flex: none;
  padding: calc(var(--u) * 0.5) calc(var(--u) * 1.2) calc(var(--u) * 0.3);
  border-radius: calc(var(--u) * 1.4);
  background: #fff;
  color: #2a1a5e;
  font: 400 calc(var(--u) * 7) / 1 var(--font-game);
  letter-spacing: 0.08em;
  box-shadow: 0 calc(var(--u) * 0.6) 0 rgba(0, 0, 0, 0.3);
  user-select: all;
  -webkit-user-select: all;
}
.tk-room-state { font: 700 calc(var(--u) * 1.75) / 1.3 var(--font-body); color: #b6ffb9; }
.tk-room-state.is-warn { color: #ffb4a8; }
.tk-room-state[hidden], .tk-net-link[hidden] { display: none; }
.tk-net-link { display: flex; align-items: center; gap: calc(var(--u) * 1); }
.tk-net-url {
  flex: 1;
  min-width: 0;
  padding: calc(var(--u) * 0.5) calc(var(--u) * 1);
  border-radius: calc(var(--u) * 0.8);
  background: #efeafc;
  color: #4b2fb0;
  font: 600 calc(var(--u) * 1.4) / 1.3 ui-monospace, 'SF Mono', Menlo, monospace;
  overflow-wrap: anywhere;
  user-select: all;
  -webkit-user-select: all;
  pointer-events: auto;
}
.tk-net-url:empty { display: none; }
.tk-net-copy { flex: none; font-size: calc(var(--u) * 1.8); padding: calc(var(--u) * 0.7) calc(var(--u) * 1.5); }
.tk-net-copy[hidden], .tk-net-leave[hidden] { display: none; }
.tk-room-hints { display: flex; flex-direction: column; gap: calc(var(--u) * 0.35); }
.tk-room-hints:empty { display: none; }
.tk-room-hint { font: 600 calc(var(--u) * 1.45) / 1.35 var(--font-body); color: rgba(255, 255, 255, 0.78); overflow-wrap: anywhere; }
.tk-room-hint b { color: #fff3c4; font-weight: 700; }
.tk-room-hint.is-warn { color: #ffb4a8; }
.tk-name-row--room { padding: 0; gap: calc(var(--u) * 1); }
.tk-name-lab { display: flex; flex: 1; min-width: 0; align-items: center; gap: calc(var(--u) * 1); }
.tk-name-row--room .tk-name-label { font-size: calc(var(--u) * 1.7); }
.tk-name-row--room .tk-name-input { font-size: calc(var(--u) * 2.1); padding: calc(var(--u) * 0.45) calc(var(--u) * 1); }
.tk-net-leave { flex: none; font-size: calc(var(--u) * 1.7); padding: calc(var(--u) * 0.6) calc(var(--u) * 1.4); }
/* online: the QR panel becomes a row under the room card (a guest's QR = its phones' own code) */
.tk-lobby.is-online .tk-qr--lobby { flex-direction: row; align-items: center; text-align: left; padding: calc(var(--u) * 1.3); gap: calc(var(--u) * 1.3); }
.tk-lobby.is-online .tk-qr--lobby .tk-qr-code { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
.tk-lobby.is-online .tk-qr--lobby .tk-qr-info { align-items: flex-start; gap: calc(var(--u) * 0.45); }
.tk-lobby.is-online .tk-qr--lobby .tk-qr-title { font-size: calc(var(--u) * 2.3); }
.tk-lobby.is-online .tk-qr--lobby .tk-qr-scan { font-size: calc(var(--u) * 1.4); }
.tk-lobby.is-online .tk-qr--lobby .tk-qr-url { align-self: flex-start; font-size: calc(var(--u) * 1.2); }
.tk-lobby.is-online .tk-qr--lobby .tk-qr-status { font-size: calc(var(--u) * 1.55); }
.tk-lobby.is-online .tk-qr--lobby .tk-qr-tip { font-size: calc(var(--u) * 1.2); }
.tk-lobby.is-online .tk-qr--lobby .tk-tip-long { display: none; }
.tk-lobby.is-online .tk-qr--lobby .tk-tip-short { display: inline; }
.tk-qr.is-guest .tk-qr-status { color: #4b2fb0; }
/* online: every player of every screen — the count + the screens (right column, above the cards) */
.tk-players-head {
  position: absolute;
  left: calc(var(--u) * 54);
  right: calc(var(--u) * 4);
  top: calc(var(--u) * 23.5);
  display: none;
  align-items: center;
  gap: calc(var(--u) * 1.4);
}
.tk-players-head.on { display: flex; }
.tk-players-count {
  flex: none;
  padding: calc(var(--u) * 0.45) calc(var(--u) * 1.6);
  border-radius: 99px;
  background: rgba(27, 16, 53, 0.85);
  border: calc(var(--u) * 0.3) solid rgba(127, 227, 255, 0.6);
  font-size: calc(var(--u) * 2.6);
  white-space: nowrap;
  text-shadow: 0 calc(var(--u) * 0.2) 0 rgba(0, 0, 0, 0.4);
}
.tk-players-count b { font-weight: 400; }
.tk-players-max { font: 700 calc(var(--u) * 1.6) var(--font-body); color: rgba(255, 255, 255, 0.72); }
.tk-players-screens { display: flex; gap: calc(var(--u) * 0.7); min-width: 0; overflow: hidden; }
.tk-players-screens .tk-net-chip { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* (a near-opaque dark pill with the tint over it: readable over the 3D KRISHIV KART sign behind the lobby) */
.tk-net-chip {
  padding: calc(var(--u) * 0.3) calc(var(--u) * 1.1);
  border-radius: 99px;
  background: linear-gradient(rgba(127, 227, 255, 0.16), rgba(127, 227, 255, 0.16)), rgba(27, 16, 53, 0.88);
  border: calc(var(--u) * 0.2) solid rgba(127, 227, 255, 0.45);
  font: 600 calc(var(--u) * 1.5) / 1.3 var(--font-body);
  color: #dff7ff;
  white-space: nowrap;
  text-shadow: 0 calc(var(--u) * 0.15) calc(var(--u) * 0.4) rgba(0, 0, 0, 0.5);
}
.tk-net-chip.is-off { background: linear-gradient(rgba(255, 90, 110, 0.16), rgba(255, 90, 110, 0.16)), rgba(27, 16, 53, 0.88); border-color: rgba(255, 90, 110, 0.55); color: #ffd2d8; }
.tk-net-chip.is-you { background: linear-gradient(rgba(255, 210, 58, 0.18), rgba(255, 210, 58, 0.18)), rgba(27, 16, 53, 0.88); border-color: rgba(255, 210, 58, 0.6); color: #fff3c4; }
.tk-menus.net-on[data-screen='lobby'] > .tk-panels { top: calc(var(--u) * 29.5); }
/* online keyboard host: the host controls sit at the bottom of the column, the cards above them */
.tk-menus.net-on.kb-mode[data-screen='lobby']:has(.tk-kb-lobby.on) > .tk-panels { bottom: calc(var(--u) * 40.5); }
.tk-menus.net-on .tk-kb-lobby { top: auto; bottom: calc(var(--u) * 3.6); }
/* another screen's racer in the results / podium */
.tk-you--net { background: linear-gradient(180deg, #38c8ff, #2a7fd6); }
.tk-loading.is-waiting .tk-load-tip { color: #7fe3ff; font-weight: 700; }

/* keyboard-mode host controls (mode / class / items / START) */
.tk-kb-lobby {
  position: absolute;
  left: calc(var(--u) * 54);
  right: calc(var(--u) * 4);
  top: calc(var(--u) * 58);
  display: none;
  flex-direction: column;
  gap: calc(var(--u) * 1.2);
  padding: calc(var(--u) * 2) calc(var(--u) * 2.6);
  border-radius: calc(var(--u) * 2.6);
  background: var(--panel);
  border: calc(var(--u) * 0.32) solid var(--panel-edge);
  pointer-events: auto;
}
.tk-kb-lobby.on { display: flex; }
.tk-kbrow { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 2); padding: calc(var(--u) * 0.4) calc(var(--u) * 1); border-radius: calc(var(--u) * 1.4); border: calc(var(--u) * 0.3) solid transparent; }
.tk-kbrow.is-focus { border-color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.06); }
.tk-kbrow:has(.tk-kb-start) { justify-content: center; border: 0; background: none; }
.tk-kbrow-label { font-size: calc(var(--u) * 2.6); text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.8); }
.tk-seg-btn.is-on { background: linear-gradient(180deg, #fff2a8, #ffd23a); }
.tk-kb-start { font-size: calc(var(--u) * 4); padding: calc(var(--u) * 1) calc(var(--u) * 7); }
.tk-kb-hint { text-align: center; font: 600 calc(var(--u) * 1.5) / 1.8 var(--font-body); color: rgba(255, 255, 255, 0.72); }

/* ================================================================ player panels */

.tk-panels {
  position: absolute;
  display: grid;
  gap: calc(var(--u) * 2);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
[data-screen='lobby'] > .tk-panels, [data-screen='select'] > .tk-panels { opacity: 1; visibility: visible; transition: opacity 0.35s ease, visibility 0s; }
/* the grid follows the number of cards (menus.js _panelLayout: --cols × --rows + data-density) */
.tk-panels { grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows, 2), minmax(0, 1fr)); }
[data-screen='lobby'] > .tk-panels {
  left: calc(var(--u) * 54);
  right: calc(var(--u) * 4);
  top: calc(var(--u) * 27);
  bottom: calc(var(--u) * 16);
}
[data-screen='select'] > .tk-panels {
  left: calc(var(--u) * 4);
  right: calc(var(--u) * 4);
  top: calc(var(--u) * 21);
  bottom: calc(var(--u) * 11);
}
.tk-panels[data-density='mid'], .tk-panels[data-density='mini'] { gap: calc(var(--u) * 1.4); }
.tk-panels[data-density='line'] { gap: calc(var(--u) * 0.8); }
/* keyboard mode: P1's card (+ online, the other screens' players) beside the picker / above the host controls */
.kb-mode[data-screen='lobby']:has(.tk-kb-lobby.on) > .tk-panels { bottom: calc(var(--u) * 45); }
.kb-mode[data-screen='select'] > .tk-panels { left: calc(var(--u) * 126); }

.tk-pp {
  --slot: #fff;
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  padding: calc(var(--u) * 1.6);
  border-radius: calc(var(--u) * 2.4);
  background: linear-gradient(180deg, rgba(48, 31, 104, 0.92) 0%, rgba(27, 16, 53, 0.92) 100%);
  border: calc(var(--u) * 0.45) solid var(--slot);
  box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(8, 4, 24, 0.5), inset 0 0 calc(var(--u) * 3) color-mix(in srgb, var(--slot) 22%, transparent);
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(.2, 1.4, .4, 1), opacity 0.3s, border-color 0.3s;
}
[data-screen='lobby'] .tk-pp { grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; column-gap: calc(var(--u) * 1.8); }
[data-screen='lobby'] .tk-pp-head { grid-column: 1 / 3; }
[data-screen='select'] .tk-pp { grid-template-rows: auto auto 1fr; row-gap: calc(var(--u) * 1); }
.tk-pp.is-empty { border-style: dashed; border-color: color-mix(in srgb, var(--slot) 55%, transparent); background: rgba(27, 16, 53, 0.55); box-shadow: none; }
.tk-pp.is-empty > :not(.tk-pp-empty) { visibility: hidden; }
.tk-pp.is-offline { opacity: 0.6; filter: saturate(0.5); }
.tk-pp-head { display: flex; align-items: center; gap: calc(var(--u) * 1); min-height: calc(var(--u) * 4); }
.tk-pp-tag {
  padding: calc(var(--u) * 0.35) calc(var(--u) * 1.4);
  border-radius: calc(var(--u) * 1);
  background: var(--slot);
  font-size: calc(var(--u) * 2.8);
  text-shadow: 0 calc(var(--u) * 0.2) 0 rgba(0, 0, 0, 0.45);
}
.tk-pp-crown { display: none; width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); }
.tk-pp-crown svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 calc(var(--u) * 0.2) 0 rgba(0, 0, 0, 0.35)); }
.tk-pp.is-host .tk-pp-crown { display: block; animation: tk-bob 2.2s ease-in-out infinite; }
.tk-pp-state { margin-left: auto; font: 600 calc(var(--u) * 1.5) var(--font-body); color: rgba(255, 255, 255, 0.75); }
.tk-pp.is-offline .tk-pp-state { color: #ffb020; }
.tk-pp-pic {
  --c: #8890b5;
  position: relative;
  aspect-ratio: 1;
  border-radius: calc(var(--u) * 1.8);
  background: radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--c) 70%, #fff) 0%, var(--c) 45%, color-mix(in srgb, var(--c) 45%, #1b1035) 100%);
  overflow: hidden;
}
[data-screen='lobby'] .tk-pp-pic { height: calc(var(--u) * 18); align-self: center; }
[data-screen='select'] .tk-pp-pic { width: 100%; max-height: calc(var(--u) * 30); justify-self: center; }
.kb-mode[data-screen='select'] .tk-pp-pic { max-height: calc(var(--u) * 34); }
.tk-pp-img { position: absolute; inset: 4%; width: 92%; height: 92%; object-fit: contain; filter: drop-shadow(0 calc(var(--u) * 0.6) calc(var(--u) * 0.8) rgba(0, 0, 0, 0.35)); }
.tk-pp-pic.no-img .tk-pp-img { display: none; }
.tk-pp-initial { position: absolute; inset: 0; display: none; place-items: center; font-size: calc(var(--u) * 9); text-shadow: var(--outline); }
.tk-pp-pic.no-img .tk-pp-initial { display: grid; }
.tk-pp-ready {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%) rotate(-6deg) scale(0.4);
  padding: calc(var(--u) * 0.5) calc(var(--u) * 2);
  border-radius: calc(var(--u) * 1.2);
  background: linear-gradient(180deg, #b6ffb9, #22c55e);
  border: calc(var(--u) * 0.35) solid #fff;
  color: #0b3d1c;
  font-size: calc(var(--u) * 3);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(.2, 1.8, .4, 1), opacity 0.2s;
}
.tk-pp.is-ready .tk-pp-ready { opacity: 1; transform: translateX(-50%) rotate(-6deg) scale(1); }
.tk-pp-body { display: flex; flex-direction: column; gap: calc(var(--u) * 0.6); min-width: 0; justify-content: center; }
.tk-pp-name { font-size: calc(var(--u) * 3.1); line-height: 1.05; text-shadow: var(--outline); overflow-wrap: anywhere; }
.tk-pp-kart { font: 600 calc(var(--u) * 1.6) var(--font-body); color: rgba(255, 255, 255, 0.78); }
.tk-pp-kart:empty { display: none; }
.tk-pp.no-char .tk-pp-stats { visibility: hidden; }
.tk-pp-stats { grid-template-columns: 1fr 1fr; }
.tk-pp-stats .tk-stat-label { font-size: calc(var(--u) * 1.25); }
.tk-pp-stats .tk-stat-bar i { width: calc(var(--u) * 1.5); height: calc(var(--u) * 1.1); }
[data-screen='select'] .tk-pp-stats { grid-template-columns: 1fr; }
[data-screen='select'] .tk-pp-stats .tk-stat-bar i { width: calc(var(--u) * 2.2); height: calc(var(--u) * 1.3); }
[data-screen='select'] .tk-pp-stats .tk-stat-label { font-size: calc(var(--u) * 1.45); }
.tk-pp-step { font: 700 calc(var(--u) * 1.7) var(--font-body); color: color-mix(in srgb, var(--slot) 55%, #fff); }
.tk-pp-step:empty { display: none; }
.tk-pp.is-ready .tk-pp-step { color: #7dff9b; }
.tk-pp-empty { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 0.8); }
.tk-pp.is-empty .tk-pp-empty { display: flex; }
.tk-pp-empty-big { font-size: calc(var(--u) * 7); color: color-mix(in srgb, var(--slot) 70%, transparent); text-shadow: var(--outline); }
.tk-pp-empty-txt { font: 600 calc(var(--u) * 1.8) var(--font-body); color: rgba(255, 255, 255, 0.7); }
/* online (SPEC §17): another screen's player ("SAM · P1"), this screen's own ("YOU"), past the 8 racers */
.tk-pp-tag { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-pp.is-remote .tk-pp-tag::before { content: '🌍 '; }
.tk-pp-you {
  display: none;
  flex: none;
  padding: calc(var(--u) * 0.2) calc(var(--u) * 0.8);
  border-radius: calc(var(--u) * 0.7);
  background: #ffd23a;
  color: #3a2400;
  font-size: calc(var(--u) * 1.4);
  letter-spacing: 0.06em;
}
.tk-pp.is-mine .tk-pp-you { display: inline-block; }
.tk-pp-state { white-space: nowrap; }
.tk-pp.is-full { opacity: 0.72; }
.tk-pp.is-full .tk-pp-step { color: #ffb020; }

/* 5–8 cards: lobby 4 × 2 small upright cards; select 4 × 2 wide cards (portrait beside the stats) */
.tk-panels[data-density='mid'] .tk-pp { padding: calc(var(--u) * 1.1); border-radius: calc(var(--u) * 2); }
.tk-panels[data-density='mid'] .tk-pp-head { min-height: calc(var(--u) * 3); gap: calc(var(--u) * 0.6); }
.tk-panels[data-density='mid'] .tk-pp-tag { font-size: calc(var(--u) * 1.9); padding: calc(var(--u) * 0.25) calc(var(--u) * 0.9); }
.tk-panels[data-density='mid'] .tk-pp-crown { width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); }
.tk-panels[data-density='mid'] .tk-pp-state { font-size: calc(var(--u) * 1.25); }
.tk-panels[data-density='mid'] .tk-pp-ready { font-size: calc(var(--u) * 1.9); padding: calc(var(--u) * 0.3) calc(var(--u) * 1.1); }
.tk-panels[data-density='mid'] .tk-pp-initial { font-size: calc(var(--u) * 5.5); }
[data-screen='lobby'] > .tk-panels[data-density='mid'] .tk-pp { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; row-gap: calc(var(--u) * 0.5); }
[data-screen='lobby'] > .tk-panels[data-density='mid'] .tk-pp-head { grid-column: auto; }
[data-screen='lobby'] > .tk-panels[data-density='mid'] .tk-pp-pic { height: 100%; max-height: calc(var(--u) * 12); min-height: 0; justify-self: center; align-self: center; }
[data-screen='lobby'] > .tk-panels[data-density='mid'] .tk-pp-body { align-items: center; text-align: center; gap: calc(var(--u) * 0.3); }
[data-screen='lobby'] > .tk-panels[data-density='mid'] .tk-pp-stats,
[data-screen='lobby'] > .tk-panels[data-density='mid'] .tk-pp-kart { display: none; }
[data-screen='lobby'] > .tk-panels[data-density='mid'] .tk-pp-name { font-size: calc(var(--u) * 2.2); }
[data-screen='lobby'] > .tk-panels[data-density='mid'] .tk-pp-step { font-size: calc(var(--u) * 1.35); }
[data-screen='select'] > .tk-panels[data-density='mid'] .tk-pp { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); column-gap: calc(var(--u) * 1.3); row-gap: calc(var(--u) * 0.6); }
[data-screen='select'] > .tk-panels[data-density='mid'] .tk-pp-head { grid-column: 1 / 3; }
[data-screen='select'] > .tk-panels[data-density='mid'] .tk-pp-pic { width: auto; height: 100%; max-height: calc(var(--u) * 20); min-height: 0; align-self: center; }
[data-screen='select'] > .tk-panels[data-density='mid'] .tk-pp-name { font-size: calc(var(--u) * 2.4); }
[data-screen='select'] > .tk-panels[data-density='mid'] .tk-pp-kart { font-size: calc(var(--u) * 1.3); }
[data-screen='select'] > .tk-panels[data-density='mid'] .tk-pp-stats .tk-stat-bar i { width: calc(var(--u) * 1.4); height: calc(var(--u) * 1); }
[data-screen='select'] > .tk-panels[data-density='mid'] .tk-pp-stats .tk-stat-label { font-size: calc(var(--u) * 1.1); }
[data-screen='select'] > .tk-panels[data-density='mid'] .tk-pp-step { font-size: calc(var(--u) * 1.4); }
/* 9+ cards (or the keyboard picker's column): one-line rows — tag, a small portrait, the racer */
.tk-panels[data-density='mini'] .tk-pp { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); column-gap: calc(var(--u) * 1); row-gap: calc(var(--u) * 0.3); padding: calc(var(--u) * 0.7) calc(var(--u) * 1); border-width: calc(var(--u) * 0.35); border-radius: calc(var(--u) * 1.6); }
.tk-panels[data-density='mini'] .tk-pp-head { grid-column: 1 / 3; min-height: calc(var(--u) * 2.6); gap: calc(var(--u) * 0.6); }
.tk-panels[data-density='mini'] .tk-pp-tag { font-size: calc(var(--u) * 1.6); padding: calc(var(--u) * 0.15) calc(var(--u) * 0.7); }
.tk-panels[data-density='mini'] .tk-pp-crown { width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); }
.tk-panels[data-density='mini'] .tk-pp-you { font-size: calc(var(--u) * 1.1); }
.tk-panels[data-density='mini'] .tk-pp-state { font-size: calc(var(--u) * 1.15); }
.tk-panels[data-density='mini'] .tk-pp-pic { width: auto; height: 100%; max-height: calc(var(--u) * 7); min-height: 0; align-self: center; border-radius: calc(var(--u) * 1); }
.tk-panels[data-density='mini'] .tk-pp-stats, .tk-panels[data-density='mini'] .tk-pp-kart { display: none; }
.tk-panels[data-density='mini'] .tk-pp-body { gap: calc(var(--u) * 0.2); }
.tk-panels[data-density='mini'] .tk-pp-name { font-size: calc(var(--u) * 1.9); overflow-wrap: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-panels[data-density='mini'] .tk-pp-step { font-size: calc(var(--u) * 1.2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-panels[data-density='mini'] .tk-pp-ready { font-size: calc(var(--u) * 1.2); padding: calc(var(--u) * 0.15) calc(var(--u) * 0.5); border-width: calc(var(--u) * 0.2); }
.tk-panels[data-density='mini'] .tk-pp-initial { font-size: calc(var(--u) * 3.4); }
.tk-panels[data-density='mini'] .tk-pp-empty-big { font-size: calc(var(--u) * 3); }
.tk-panels[data-density='mini'] .tk-pp-empty-txt { font-size: calc(var(--u) * 1.2); }
/* 9–16 cards above the keyboard host's controls: a tag and a name per card */
.tk-panels[data-density='line'] .tk-pp { display: flex; align-items: center; gap: calc(var(--u) * 0.8); padding: calc(var(--u) * 0.3) calc(var(--u) * 0.9); border-width: calc(var(--u) * 0.3); border-radius: calc(var(--u) * 1.2); }
.tk-panels[data-density='line'] .tk-pp-pic, .tk-panels[data-density='line'] .tk-pp-kart,
.tk-panels[data-density='line'] .tk-pp-stats, .tk-panels[data-density='line'] .tk-pp-step, .tk-panels[data-density='line'] .tk-pp-state { display: none; }
.tk-panels[data-density='line'] .tk-pp-head { min-height: 0; gap: calc(var(--u) * 0.4); flex: none; max-width: 60%; }
.tk-panels[data-density='line'] .tk-pp-tag { font-size: calc(var(--u) * 1.35); padding: calc(var(--u) * 0.1) calc(var(--u) * 0.6); }
.tk-panels[data-density='line'] .tk-pp-crown { width: calc(var(--u) * 1.8); height: calc(var(--u) * 1.8); }
.tk-panels[data-density='line'] .tk-pp-you { font-size: calc(var(--u) * 1); }
.tk-panels[data-density='line'] .tk-pp-name { font-size: calc(var(--u) * 1.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-panels[data-density='line'] .tk-pp.is-ready .tk-pp-name { color: #7dff9b; }
.tk-panels[data-density='line'] .tk-pp-empty-big { font-size: calc(var(--u) * 2); }
.tk-panels[data-density='line'] .tk-pp-empty-txt { display: none; }

/* ================================================================ select */

.tk-select { background: linear-gradient(180deg, rgba(20, 10, 52, 0.62) 0%, rgba(20, 10, 52, 0.25) 40%, rgba(20, 10, 52, 0.7) 100%); }
.tk-sel-head { position: absolute; left: calc(var(--u) * 4); top: calc(var(--u) * 4); }
.tk-sel-head .tk-h1 { font-size: calc(var(--u) * 5.6); }
.tk-sel-sub { margin-top: calc(var(--u) * 1); font-size: calc(var(--u) * 2.8); color: #ffd23a; text-shadow: var(--outline); }
.tk-sel-count { margin-top: calc(var(--u) * 0.6); font: 700 calc(var(--u) * 2) var(--font-body); color: #7fe3ff; text-shadow: 0 calc(var(--u) * 0.2) calc(var(--u) * 0.6) rgba(0, 0, 0, 0.7); }
.tk-sel-count:empty { display: none; }
.kb-mode .tk-select .tk-qr--compact { display: none; }

/* keyboard-mode picker */
.tk-kb {
  position: absolute;
  left: calc(var(--u) * 4);
  width: calc(var(--u) * 118);
  top: calc(var(--u) * 18);
  bottom: calc(var(--u) * 4);
  display: none;
  flex-direction: column;
  gap: calc(var(--u) * 1.3);
  padding: calc(var(--u) * 2.2) calc(var(--u) * 2.8);
  pointer-events: auto;
}
.kb-mode .tk-kb { display: flex; }
.tk-kb-steps { display: flex; gap: calc(var(--u) * 1); }
.tk-kb-stepdot {
  flex: 1;
  padding: calc(var(--u) * 0.5) 0;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  text-align: center;
  font-size: calc(var(--u) * 1.9);
  color: rgba(255, 255, 255, 0.5);
}
.tk-kb-stepdot.is-done { background: rgba(77, 255, 122, 0.22); color: #b6ffb9; }
.tk-kb-stepdot.is-on { background: linear-gradient(180deg, #fff2a8, #ffd23a); color: var(--ink); }
.tk-kb-title { font-size: calc(var(--u) * 3.8); text-shadow: var(--outline); }
.tk-kb-chars { display: flex; flex-direction: column; gap: calc(var(--u) * 1); flex: 1; min-height: 0; }
.tk-kb-row { display: grid; grid-template-columns: calc(var(--u) * 10) repeat(4, 1fr); gap: calc(var(--u) * 1); align-items: stretch; }
.tk-kb-rowlabel { align-self: center; font-size: calc(var(--u) * 2); text-transform: uppercase; color: rgba(255, 255, 255, 0.65); }
.tk-kb-card, .tk-kb-part {
  --c: #8890b5;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1);
  min-width: 0;
  padding: calc(var(--u) * 0.6) calc(var(--u) * 1);
  border-radius: calc(var(--u) * 1.4);
  background: rgba(255, 255, 255, 0.07);
  border: calc(var(--u) * 0.3) solid transparent;
  text-align: left;
  transition: transform 0.14s cubic-bezier(.3, 1.6, .5, 1), background 0.14s;
}
.tk-kb-card:hover, .tk-kb-part:hover { background: rgba(255, 255, 255, 0.14); }
.tk-kb-card.is-picked, .tk-kb-part.is-picked { border-color: rgba(125, 255, 155, 0.7); }
.tk-kb-card.is-focus, .tk-kb-part.is-focus { border-color: #fff; background: rgba(255, 255, 255, 0.18); transform: scale(1.04); box-shadow: 0 0 calc(var(--u) * 2) rgba(255, 255, 255, 0.35); }
.tk-kb-cardpic {
  position: relative;
  flex: none;
  width: calc(var(--u) * 7.4);
  height: calc(var(--u) * 7.4);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--c) 60%, #fff), var(--c) 70%);
  overflow: hidden;
}
.tk-kb-cardpic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.tk-kb-cardinit { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--u) * 3.6); text-shadow: var(--outline); }
.tk-kb-cardname { font-size: calc(var(--u) * 2.2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: var(--outline); }
.tk-kb-parts { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 1.2); flex: 1; align-content: start; }
.tk-kb-part { flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 0.5); padding: calc(var(--u) * 1.2) calc(var(--u) * 1.4); }
.tk-kb-partname { font-size: calc(var(--u) * 2.6); text-shadow: var(--outline); }
.tk-kb-partdesc { font: 600 calc(var(--u) * 1.45) / 1.25 var(--font-body); color: rgba(255, 255, 255, 0.75); }
.tk-kb-mods { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 0.5); }
.tk-kb-ready { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 3); flex: 1; justify-content: center; }
.tk-kb-toggle {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: calc(var(--u) * 0.4) calc(var(--u) * 3);
  width: calc(var(--u) * 70);
  padding: calc(var(--u) * 1.6) calc(var(--u) * 2.4);
  border-radius: calc(var(--u) * 1.8);
  background: rgba(255, 255, 255, 0.08);
  border: calc(var(--u) * 0.35) solid transparent;
  text-align: left;
}
.tk-kb-toggle.is-focus { border-color: #fff; box-shadow: 0 0 calc(var(--u) * 2) rgba(255, 255, 255, 0.35); }
.tk-kb-toggle-label { font-size: calc(var(--u) * 3); }
.tk-kb-toggle-val { grid-row: 1 / 3; grid-column: 2; align-self: center; padding: calc(var(--u) * 0.6) calc(var(--u) * 2); border-radius: 99px; background: rgba(255, 79, 109, 0.85); font-size: calc(var(--u) * 2.6); }
.tk-kb-toggle.is-on .tk-kb-toggle-val { background: linear-gradient(180deg, #b6ffb9, #22c55e); color: #0b3d1c; }
.tk-kb-toggle-desc { font: 600 calc(var(--u) * 1.6) var(--font-body); color: rgba(255, 255, 255, 0.72); }
/* sandbox ready card: Steer Assist is simply off (a line, not a toggle) */
.tk-kb-static {
  width: calc(var(--u) * 70);
  padding: calc(var(--u) * 1.4) calc(var(--u) * 2.4);
  border-radius: calc(var(--u) * 1.8);
  background: rgba(255, 255, 255, 0.05);
  text-align: center;
  font: 700 calc(var(--u) * 2.2) var(--font-body);
  color: rgba(255, 255, 255, 0.62);
}
.tk-kb-detail {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  column-gap: calc(var(--u) * 3);
  align-items: center;
  padding: calc(var(--u) * 1.2) calc(var(--u) * 2);
  border-radius: calc(var(--u) * 1.8);
  background: rgba(0, 0, 0, 0.25);
}
.tk-kb-dname { font-size: calc(var(--u) * 3.4); text-shadow: var(--outline); }
.tk-kb-dtag { font: 600 calc(var(--u) * 1.7) var(--font-body); color: #ffd23a; }
.tk-kb-dparts { font: 600 calc(var(--u) * 1.6) var(--font-body); color: rgba(255, 255, 255, 0.75); }
.tk-kb-detail .tk-stats--big { grid-column: 2; grid-row: 1 / 4; border-radius: calc(var(--u) * 1.4); background: rgba(27, 16, 53, 0.6); }

/* ================================================================ track / cup */

.tk-trackscr { display: grid; place-items: center; background: rgba(12, 6, 30, 0.45); }
.tk-track-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 1.6);
  min-width: calc(var(--u) * 100);
  padding: calc(var(--u) * 3) calc(var(--u) * 4);
  transform: scale(0.94);
  transition: transform 0.35s cubic-bezier(.2, 1.4, .4, 1);
}
.tk-trackscr.is-active .tk-track-panel { transform: none; }
.tk-track-kicker { font: 700 calc(var(--u) * 2) var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: #ffd23a; }
.tk-track-title { font-size: calc(var(--u) * 7); }
.tk-tiles { display: flex; gap: calc(var(--u) * 2.4); justify-content: center; }
.tk-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 0.8);
  width: calc(var(--u) * 30);
  padding: calc(var(--u) * 1.6);
  border-radius: calc(var(--u) * 2.2);
  background: rgba(255, 255, 255, 0.07);
  border: calc(var(--u) * 0.4) solid transparent;
  opacity: 0.7;
  transition: transform 0.2s cubic-bezier(.3, 1.6, .5, 1), opacity 0.2s, border-color 0.2s;
}
.tk-tile.is-done { opacity: 0.45; filter: saturate(0.4); }
.tk-tile.is-on { opacity: 1; border-color: #fff; background: rgba(255, 255, 255, 0.14); transform: scale(1.05); box-shadow: 0 0 calc(var(--u) * 3) rgba(255, 210, 58, 0.45); }
.tk-tile-map { display: grid; place-items: center; width: calc(var(--u) * 22); height: calc(var(--u) * 22); border-radius: calc(var(--u) * 2); background: radial-gradient(120% 120% at 30% 20%, rgba(62, 44, 138, 0.86), rgba(18, 11, 48, 0.9)); }
.tk-tile-map svg { width: 100%; height: 100%; display: block; }
.tk-tile-road-o { fill: none; stroke: #1a1030; stroke-width: 7; stroke-linejoin: round; }
.tk-tile-road { fill: none; stroke: #f3f1ff; stroke-width: 4; stroke-linejoin: round; }
.tk-tile-q { font-size: calc(var(--u) * 12); color: #ffd23a; text-shadow: var(--outline); }
.tk-tile-num { font: 700 calc(var(--u) * 1.6) var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: #ffd23a; }
.tk-tile-name { font-size: calc(var(--u) * 3); text-shadow: var(--outline); }
.tk-track-sub { font: 600 calc(var(--u) * 2) var(--font-body); color: rgba(255, 255, 255, 0.78); }
/* 5–6 tiles (Krishiv Cup, VS with every track + Random): narrower tiles */
.tk-tiles[data-n="5"], .tk-tiles[data-n="6"] { gap: calc(var(--u) * 1.6); }
.tk-tiles[data-n="5"] .tk-tile { width: calc(var(--u) * 25); }
.tk-tiles[data-n="6"] .tk-tile { width: calc(var(--u) * 22); }
.tk-tiles[data-n="5"] .tk-tile-map { width: calc(var(--u) * 19); height: calc(var(--u) * 19); }
.tk-tiles[data-n="6"] .tk-tile-map { width: calc(var(--u) * 17); height: calc(var(--u) * 17); }
.tk-tiles[data-n="5"] .tk-tile-name, .tk-tiles[data-n="6"] .tk-tile-name { font-size: calc(var(--u) * 2.5); text-align: center; line-height: 1.1; }
.tk-tile-name { text-align: center; }
/* 7–8 tiles (v6: VS with all seven tracks + Random): narrower still, one row inside 16:9 */
.tk-tiles[data-n="7"], .tk-tiles[data-n="8"] { gap: calc(var(--u) * 1.2); }
.tk-tiles[data-n="7"] .tk-tile, .tk-tiles[data-n="8"] .tk-tile { width: calc(var(--u) * 18.5); padding: calc(var(--u) * 1.2); }
.tk-tiles[data-n="7"] .tk-tile-map, .tk-tiles[data-n="8"] .tk-tile-map { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }
.tk-tiles[data-n="7"] .tk-tile-name, .tk-tiles[data-n="8"] .tk-tile-name { font-size: calc(var(--u) * 2.2); line-height: 1.1; }
.tk-tiles[data-n="7"] .tk-tile-q, .tk-tiles[data-n="8"] .tk-tile-q { font-size: calc(var(--u) * 9); }

/* GP cup cards (SPEC §15.3): the host picks on the phone, the chosen one glows */
.tk-cups { display: flex; gap: calc(var(--u) * 2); justify-content: center; margin-bottom: calc(var(--u) * 0.4); }
.tk-cups[hidden] { display: none; }
.tk-cup {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.4);
  min-width: calc(var(--u) * 34);
  padding: calc(var(--u) * 1) calc(var(--u) * 2.2) calc(var(--u) * 1) calc(var(--u) * 1.2);
  border-radius: calc(var(--u) * 2);
  background: rgba(255, 255, 255, 0.07);
  border: calc(var(--u) * 0.35) solid transparent;
  opacity: 0.6;
  filter: saturate(0.6);
  transition: transform 0.2s cubic-bezier(.3, 1.6, .5, 1), opacity 0.2s, border-color 0.2s, filter 0.2s;
}
.tk-cup.is-on { opacity: 1; filter: none; border-color: #ffd23a; background: rgba(255, 210, 58, 0.14); transform: scale(1.04); box-shadow: 0 0 calc(var(--u) * 2.6) rgba(255, 210, 58, 0.4); }
.tk-cup.is-locked { cursor: default; }
.kb-mode .tk-cup[data-action] { cursor: pointer; }
.tk-cup-art { display: grid; place-items: center; width: calc(var(--u) * 7.4); height: calc(var(--u) * 7.4); border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(80, 58, 160, 0.95), rgba(20, 12, 52, 0.95)); flex: none; }
.tk-cup-art svg { width: 78%; height: 78%; display: block; }
.tk-cup-txt { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 0.2); }
.tk-cup-name { font-size: calc(var(--u) * 3.1); text-shadow: var(--outline); white-space: nowrap; }
.tk-cup-n { font: 700 calc(var(--u) * 1.6) var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: #ffd23a; }

/* Espresso Splash fallback flash (when the HUD has no splash overlay) */
.tk-fx[data-kind="coffee"] { background: radial-gradient(ellipse at 45% 45%, rgba(92, 54, 26, 0.92) 0%, rgba(70, 40, 18, 0.85) 45%, rgba(40, 22, 8, 0.6) 100%); }
.tk-fx.on[data-kind="coffee"] { animation: tk-fx-hit 2.6s ease-in both; }
.tk-end-btns { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: calc(var(--u) * 2); }
.tk-end-btns:empty { display: none; }
.tk-end-btns .tk-kb-hint { flex-basis: 100%; }
.tk-res-panel .tk-end-btns { margin-top: calc(var(--u) * 2); }
.tk-res-panel .tk-status { margin-top: calc(var(--u) * 1.6); text-align: center; }

/* ================================================================ loading */

.tk-loading { display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 30%, #3b2780 0%, #1b1035 60%, #0b0a14 100%); }
.tk-load-card { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2); }
.tk-load-kicker { font: 700 calc(var(--u) * 2.2) var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: #ffd23a; }
.tk-load-name { font-size: calc(var(--u) * 9); text-shadow: var(--outline); }
.tk-load-map { width: calc(var(--u) * 30); height: calc(var(--u) * 30); }
.tk-load-map svg { width: 100%; height: 100%; display: block; animation: tk-pop 0.6s cubic-bezier(.2, 1.5, .4, 1) both; }
.tk-load-tip { max-width: calc(var(--u) * 80); text-align: center; font: 600 calc(var(--u) * 2) / 1.4 var(--font-body); color: rgba(255, 255, 255, 0.8); }

/* ================================================================ podium */

.tk-podium { background: linear-gradient(180deg, rgba(20, 10, 52, 0.55) 0%, rgba(20, 10, 52, 0) 26%, rgba(20, 10, 52, 0) 70%, rgba(20, 10, 52, 0.7) 100%); }
.tk-pod-head { position: absolute; left: 0; right: 0; top: calc(var(--u) * 4); text-align: center; }
.tk-pod-kicker { font: 700 calc(var(--u) * 2.2) var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: #ffd23a; text-shadow: 0 0 calc(var(--u) * 1) rgba(0, 0, 0, 0.6); }
.tk-pod-winner { margin-top: calc(var(--u) * 1); font-size: calc(var(--u) * 7); color: #ffe680; text-shadow: var(--outline); animation: tk-pop 0.7s 0.3s cubic-bezier(.2, 1.5, .4, 1) both; }
.tk-pod-plates { position: absolute; left: 50%; bottom: calc(var(--u) * 10); transform: translateX(-50%); display: flex; align-items: flex-end; gap: calc(var(--u) * 3); }
.tk-pod-plate {
  --c: #8890b5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 0.6);
  width: calc(var(--u) * 36);
  padding: calc(var(--u) * 1.4);
  border-radius: calc(var(--u) * 2);
  background: rgba(27, 16, 53, 0.82);
  border-bottom: calc(var(--u) * 0.8) solid var(--c);
  animation: tk-fade-up 0.6s both;
}
.tk-pod-plate:empty { visibility: hidden; }
.tk-pod-plate.p1 { animation-delay: 0.9s; transform: translateY(calc(var(--u) * -3)); }
.tk-pod-plate.p2 { animation-delay: 0.6s; }
.tk-pod-plate.p3 { animation-delay: 0.3s; }
.tk-pod-name { font-size: calc(var(--u) * 3.2); text-shadow: var(--outline); text-align: center; }
.tk-pod-pts { font: 700 calc(var(--u) * 1.8) var(--font-body); color: rgba(255, 255, 255, 0.8); }
.tk-pod-foot { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 2.4); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.4); }

/* ================================================================ animations */

@keyframes tk-logo-in {
  0% { transform: translateX(-50%) scale(0.3) rotate(-8deg); opacity: 0; }
  100% { transform: translateX(-50%) scale(1) rotate(0); opacity: 1; }
}
@keyframes tk-letter {
  0%, 100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-0.045em) rotate(-2deg); }
  50% { transform: translateY(0.01em) rotate(0); }
  75% { transform: translateY(-0.02em) rotate(2deg); }
}
@keyframes tk-puff {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-0.04em, -0.05em) scale(1.12); }
}
@keyframes tk-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--u) * -1)); } }
@keyframes tk-pulse {
  0%, 100% { scale: 1; box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(255, 255, 255, 0.5); }
  50% { scale: 1.035; box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(0, 0, 0, 0.35), 0 0 0 calc(var(--u) * 1.2) rgba(255, 255, 255, 0); }
}
@keyframes tk-fade-up { 0% { opacity: 0; translate: 0 calc(var(--u) * 2); } 100% { opacity: 1; translate: 0 0; } }
@keyframes tk-pop { 0% { transform: scale(0.85); opacity: 0.4; } 100% { transform: scale(1); opacity: 1; } }
@keyframes tk-shine { 0%, 55% { left: -40%; } 100% { left: 130%; } }
@keyframes tk-spin { to { transform: rotate(360deg); } }
@keyframes tk-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes tk-row-in { 0% { opacity: 0; transform: translateX(calc(var(--u) * 5)); } 100% { opacity: 1; transform: none; } }
@keyframes tk-card-glow {
  0%, 100% { box-shadow: 0 0 0 calc(var(--u) * 0.3) #fff, 0 0 calc(var(--u) * 3) calc(var(--u) * 0.4) color-mix(in srgb, var(--c) 75%, transparent), 0 calc(var(--u) * 1.2) calc(var(--u) * 2.4) rgba(0, 0, 0, 0.45); }
  50% { box-shadow: 0 0 0 calc(var(--u) * 0.45) #fff, 0 0 calc(var(--u) * 4.4) calc(var(--u) * 1) color-mix(in srgb, var(--c) 85%, transparent), 0 calc(var(--u) * 1.2) calc(var(--u) * 2.4) rgba(0, 0, 0, 0.45); }
}

@media (prefers-reduced-motion: reduce) {
  .tk-logo-ch, .tk-puff, .tk-prompt, .tk-btn--go::before, .tk-boot-logo, .tk-card.is-selected.is-focus { animation: none !important; }
}

/* ================================================================ v7 sandbox (notes/sandbox-design.md §13) */

/* the map pick: one portrait tile per map (its real main roads, north up) */
.tk-tile--map { width: calc(var(--u) * 40); gap: calc(var(--u) * 0.9); }
.tk-tile--map .tk-tile-map { width: calc(var(--u) * 24); height: calc(var(--u) * 38); padding: calc(var(--u) * 1); }
.tk-tile--map .tk-tile-name { font-size: calc(var(--u) * 4); }
.tk-tile--map .tk-tile-num { text-align: center; letter-spacing: 0.06em; }
.tk-tiles[data-n="2"] .tk-tile--map, .tk-tiles[data-n="3"] .tk-tile--map { width: calc(var(--u) * 32); }
.tk-tiles[data-n="2"] .tk-tile--map .tk-tile-map, .tk-tiles[data-n="3"] .tk-tile--map .tk-tile-map { width: calc(var(--u) * 20); height: calc(var(--u) * 32); }
.tk-osm { display: none; font: 600 calc(var(--u) * 1.5) / 1.3 var(--font-body); color: rgba(255, 255, 255, 0.55); text-align: center; }
.tk-trackscr.is-sandbox .tk-osm, .tk-loading.is-sandbox .tk-osm { display: block; }

/* loading a sandbox map: the map, portrait, on a tile-like card */
.tk-loading.is-sandbox .tk-load-map {
  width: calc(var(--u) * 24);
  height: calc(var(--u) * 38);
  padding: calc(var(--u) * 1);
  border-radius: calc(var(--u) * 2);
  background: radial-gradient(120% 120% at 30% 20%, rgba(62, 44, 138, 0.86), rgba(18, 11, 48, 0.9));
  box-shadow: 0 calc(var(--u) * 1.2) calc(var(--u) * 4) rgba(8, 4, 24, 0.5);
}

/* help: the on-foot controls under the phone / keyboard columns */
.tk-help-foot { padding-top: calc(var(--u) * 1.6); border-top: calc(var(--u) * 0.2) solid rgba(255, 255, 255, 0.12); }
.tk-help-foot .tk-keys { font-size: calc(var(--u) * 1.8); gap: calc(var(--u) * 0.7) calc(var(--u) * 1.6); }
.tk-help-panel:has(.tk-help-foot) { gap: calc(var(--u) * 1.7); padding-top: calc(var(--u) * 2.6); padding-bottom: calc(var(--u) * 2.6); }
.tk-help-foot .tk-help-h { margin-bottom: calc(var(--u) * 0.8); }