/* 282racing Intro — port of AppIntroSequenceView (d8b4d46) */

:root {
  --bg: #050808;
  --surface: #0f1412;
  --surface-elevated: #171f1a;
  --border: #1f4730;
  --text-primary: #c7ffd1;
  --text-secondary: #599e6b;
  --accent: #e00500;
  --terminal: #33f273;
  --terminal-dim: #1f733d;
  --warning: #ffc733;
  --gta-yellow: #ffd60a;
  --cyan: #33d9ff;
  --font: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --pulse: 0;
  --progress: 0;
}

*,
*::before,
*::after { box-sizing: border-box; }

/* Shared chrome — do NOT lock homepage scroll here */
button { font-family: inherit; cursor: pointer; }
a { color: var(--terminal); text-decoration: none; }
a:hover { color: var(--text-primary); }

body.intro-standalone {
  margin: 0;
  height: 100%;
  background: #000;
  color: var(--text-primary);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.intro-root {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  background: #000;
  font-family: var(--font);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

/* Homepage overlay embed */
.intro-root.is-embed {
  position: fixed;
  inset: 0;
  z-index: 200;
  min-height: 100dvh;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s;
}

.intro-root.is-embed.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.intro-playing {
  overflow: hidden !important;
}

/* —— Gate —— */
.intro-gate {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  background:
    radial-gradient(ellipse at 50% 28%, rgba(51, 242, 115, 0.1), transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(255, 214, 10, 0.05), transparent 40%),
    #000;
  z-index: 20;
}

.intro-gate[hidden] { display: none !important; }

.intro-gate-panel {
  text-align: center;
  max-width: min(420px, 100%);
}

.intro-gate-brand {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--terminal);
}

.intro-gate-title {
  margin: 0 0 8px;
  font-size: clamp(22px, 5vw, 32px);
  font-weight: 800;
  letter-spacing: 0.06em;
}

.intro-gate-sub {
  margin: 0 0 28px;
  font-size: 11px;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
}

.intro-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--terminal);
  background: var(--terminal);
  color: #000;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 16px 32px;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 0 28px rgba(51, 242, 115, 0.3);
  animation: intro-play-pulse 2.4s ease-in-out infinite;
}

@keyframes intro-play-pulse {
  0%, 100% { box-shadow: 0 0 24px rgba(51, 242, 115, 0.28); }
  50% { box-shadow: 0 0 48px rgba(51, 242, 115, 0.5); }
}

.intro-play:hover {
  transform: scale(1.04);
  animation: none;
  box-shadow: 0 0 44px rgba(51, 242, 115, 0.5);
}

.intro-gate-back {
  display: block;
  margin-top: 22px;
  font-size: 11px;
  color: var(--text-secondary);
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: 0.04em;
}

.intro-gate-back:hover { color: var(--text-primary); }

/* —— Stage —— */
.intro-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #000;
  /* Desktop cinema letterbox sides */
  background-image:
    radial-gradient(ellipse at 50% 50%, rgba(51, 242, 115, 0.06), transparent 55%),
    linear-gradient(90deg, #000 0%, #050808 18%, #050808 82%, #000 100%);
}

.intro-stage[hidden] { display: none !important; }

.intro-skip {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  z-index: 30;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 8px 12px;
  border-radius: 999px;
  opacity: 0;
  transition: opacity 0.35s;
  backdrop-filter: blur(8px);
}

.intro-skip.is-visible { opacity: 1; }

/* Mobile: true edge-to-edge native viewport */
.intro-frame {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100dvh;
  overflow: hidden;
  background: #000;
}

/* Desktop / tablet landscape: cinematic 9:16 stage, fills height */
@media (min-width: 768px) {
  .intro-frame {
    width: min(430px, calc(92dvh * 9 / 16));
    height: min(92dvh, calc(100vw * 16 / 9 * 0.42));
    height: 92dvh;
    width: calc(92dvh * 9 / 16);
    max-width: min(480px, 92vw);
    border-radius: 28px;
    border: 1px solid rgba(31, 71, 48, 0.55);
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.85),
      0 30px 100px rgba(0, 0, 0, 0.75),
      0 0 80px rgba(51, 242, 115, 0.08);
  }

  .intro-root.is-fullscreen .intro-frame {
    width: min(520px, calc(96dvh * 9 / 16));
    height: 96dvh;
    max-width: 96vw;
    border-radius: 12px;
  }
}

/* True mobile / narrow: no chrome, full bleed */
@media (max-width: 767px) {
  .intro-frame {
    width: 100vw;
    height: 100dvh;
    height: 100svh;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .intro-stage {
    background: #000;
  }
}

.intro-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* —— Shared chrome —— */
.hacker-bg {
  position: absolute;
  inset: 0;
  background: var(--bg);
  background-image:
    linear-gradient(rgba(51, 242, 115, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(51, 242, 115, 0.04) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 0%, rgba(51, 242, 115, 0.08), transparent 55%);
  background-size: 28px 28px, 28px 28px, 100% 100%;
  pointer-events: none;
}

.scene-frame {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: calc(72px + env(safe-area-inset-top, 0px)) 22px calc(64px + env(safe-area-inset-bottom, 0px));
  z-index: 2;
}

.scene-frame--center {
  justify-content: center;
  align-items: center;
  text-align: center;
}

.scene-frame--top {
  justify-content: flex-start;
}

.terminal-panel {
  border: 1px solid rgba(51, 242, 115, 0.45);
  background: rgba(15, 20, 18, 0.92);
  box-shadow: 0 0 18px rgba(51, 242, 115, 0.18);
  padding: 14px;
}

.tear-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  opacity: 0;
}

.tear-overlay.is-on { opacity: 1; }

.tear-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.05);
}

.glitch-text {
  position: relative;
  display: inline-block;
  font-weight: 700;
  color: var(--terminal);
  text-shadow: 0 0 4px rgba(51, 242, 115, 0.18);
}

.glitch-text .fringe {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.glitch-text.is-peak .fringe { opacity: 1; }

.glitch-text .fringe-c {
  color: rgba(51, 217, 255, 0.22);
  transform: translateX(var(--shift, 1px));
}

.glitch-text .fringe-m {
  color: rgba(224, 5, 0, 0.2);
  transform: translateX(calc(var(--shift, 1px) * -1));
}

.shake-x {
  transform: translateX(0);
}
.shake-x.is-shake {
  transform: translateX(var(--shake, 0px));
}

.caption {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.headline {
  font-size: 16px;
  font-weight: 700;
}

.body-text {
  font-size: 13px;
  font-weight: 500;
}

.chip {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid;
  font-size: 11px;
  font-weight: 600;
}

.chip.is-on {
  color: #000;
}

.chip.is-off {
  background: rgba(15, 20, 18, 0.92);
}

/* —— Cold open —— */
.cold-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 18px;
  gap: 12px;
}

.cold-lines {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  line-height: 1.35;
}

.cold-welcome { margin-top: 10px; }
.cold-welcome .w1 {
  font-size: 22px;
  font-weight: 700;
  color: var(--terminal);
}
.cold-welcome .w2 {
  font-size: 40px;
  font-weight: 900;
  color: var(--gta-yellow);
  text-shadow: 0 0 12px rgba(255, 214, 10, 0.45);
  line-height: 1.1;
}

.cold-cursor {
  color: var(--terminal);
  font-size: 12px;
  height: 1.2em;
}

.load-bar {
  margin-top: 18px;
  height: 8px;
  background: var(--surface-elevated);
  position: relative;
  overflow: hidden;
}

.load-bar > span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--terminal);
  box-shadow: 0 0 6px rgba(51, 242, 115, 0.45);
}

/* —— Truth or Dare —— */
.tod-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.tod-truth, .tod-dare {
  font-size: clamp(28px, 8vw, 36px);
  font-weight: 900;
  position: relative;
}

.tod-truth {
  color: var(--text-primary);
  transition: opacity 0.2s;
}

.tod-truth .strike {
  position: absolute;
  left: 0;
  top: 50%;
  height: 3px;
  width: 0%;
  background: var(--accent);
  transform: translateY(-50%);
  transform-origin: left center;
}

.tod-or {
  font-size: 11px;
  color: var(--terminal-dim);
}

.tod-dare {
  color: var(--gta-yellow);
  text-shadow: 0 0 3px rgba(255, 214, 10, 0.15);
  transition: transform 0.2s, text-shadow 0.2s;
}

.tod-dare.is-hot {
  transform: scale(1.06);
  text-shadow: 0 0 10px rgba(255, 214, 10, 0.45);
}

/* —— Live map —— */
.map-scene {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}

.map-hud-top, .map-hud-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}

.map-hud-top .badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 8px;
  color: #000;
}

.map-chip {
  font-size: 9px;
  font-weight: 700;
  padding: 5px 8px;
  border: 1px solid var(--border);
  background: rgba(15, 20, 18, 0.9);
  color: var(--terminal);
}

.map-chip.is-accent {
  background: var(--gta-yellow);
  color: #000;
}

.map-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  background:
    linear-gradient(135deg, #0a1f17 0%, #050d0a 45%, #000 100%);
}

.map-grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(51, 242, 115, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(51, 242, 115, 0.16) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.9;
}

.map-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.map-radar {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 85%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(0deg);
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 280deg,
    rgba(51, 242, 115, 0.35) 360deg
  );
  opacity: 0.7;
  mask-image: radial-gradient(circle, transparent 35%, #000 36%, #000 70%, transparent 71%);
  -webkit-mask-image: radial-gradient(circle, transparent 35%, #000 36%, #000 70%, transparent 71%);
}

.map-actor {
  position: absolute;
  transform: translate(-50%, -50%);
  text-align: center;
  transition: opacity 0.15s, transform 0.15s;
}

.map-watcher .eye {
  width: 36px;
  height: 36px;
  margin: 0 auto;
  border: 1px solid rgba(89, 158, 107, 0.25);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  color: rgba(89, 158, 107, 0.65);
}

.map-watcher .label {
  margin-top: 4px;
  font-size: 8px;
  color: var(--terminal-dim);
}

.map-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.map-links[hidden] {
  display: none !important;
}

.map-player .glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  background: rgba(255, 214, 10, 0.18);
}

.map-player .dot {
  width: 14px;
  height: 14px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--gta-yellow);
  box-shadow: 0 0 10px rgba(255, 214, 10, 0.7);
  position: relative;
  z-index: 1;
}

.map-player .stem {
  width: 2px;
  height: 10px;
  margin: 0 auto;
  background: rgba(255, 214, 10, 0.8);
}

.map-player .pname {
  display: inline-block;
  margin-top: 2px;
  font-size: 9px;
  font-weight: 700;
  color: var(--gta-yellow);
  background: rgba(0, 0, 0, 0.65);
  padding: 2px 5px;
}

.map-player .dollars {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  pointer-events: none;
  width: 80px;
  height: 80px;
}

.map-player .dollars span {
  position: absolute;
  left: 50%;
  top: 50%;
  font-weight: 900;
  color: rgba(255, 214, 10, 0.85);
}

.map-player .payout-local {
  position: absolute;
  left: 50%;
  top: -48px;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 700;
  color: var(--terminal);
  opacity: 0.8;
  white-space: nowrap;
}

.map-banner {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px;
  background: rgba(15, 20, 18, 0.88);
  border: 1px solid var(--border);
  font-size: 9px;
}

.map-banner .role {
  font-size: 10px;
  font-weight: 700;
}

.map-banner .payout-big {
  margin-left: auto;
  font-size: 18px;
  font-weight: 900;
  color: var(--gta-yellow);
  text-shadow: 0 0 8px rgba(255, 214, 10, 0.5);
}

.map-bottom {
  display: flex;
  justify-content: center;
}

.map-bottom .status-chip {
  font-size: 11px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
}

.map-bottom .status-chip.is-live {
  background: var(--gta-yellow);
  color: #000;
}

.map-bottom .status-chip.is-watch {
  background: rgba(15, 20, 18, 0.92);
  color: var(--terminal-dim);
}

.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* —— Watcher / Player —— */
.wop-label {
  font-size: 11px;
  color: var(--terminal-dim);
  letter-spacing: 0.3em;
  margin-bottom: 18px;
}

.wop-query {
  font-size: clamp(18px, 4.5vw, 24px);
  font-weight: 700;
  line-height: 1.3;
  max-width: 16em;
}

/* —— Profile —— */
.prof-tabs {
  display: flex;
  border: 1px solid var(--border);
  margin: 12px 0;
}

.prof-tabs span {
  flex: 1;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  padding: 8px 2px;
  background: var(--surface-elevated);
  color: var(--terminal);
}

.prof-tabs span.is-on {
  background: var(--terminal);
  color: #000;
}

.prof-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.prof-avatar {
  position: relative;
  width: 92px;
  height: 92px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}

.prof-avatar .ring {
  position: absolute;
  inset: 0;
  border: 2px solid;
  border-radius: 6px;
}

.prof-avatar .face {
  width: 78px;
  height: 78px;
  border-radius: 4px;
  background: var(--surface-elevated);
  border: 2px solid;
  display: grid;
  place-items: center;
  font-size: 26px;
  font-weight: 900;
}

.prof-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.prof-badges span {
  font-size: 9px;
  font-weight: 700;
  padding: 3px 6px;
  border: 1px solid var(--border);
  color: var(--terminal);
}

.swatches {
  display: flex;
  gap: 10px;
  margin: 8px 0 12px;
}

.swatches i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: block;
  border: 2px solid transparent;
}

.swatches i.is-on {
  border-color: #fff;
  box-shadow: 0 0 6px currentColor;
}

.sync-bar {
  height: 4px;
  background: var(--surface-elevated);
  margin: 10px 0 8px;
}
.sync-bar > span {
  display: block;
  height: 100%;
  width: 0;
}

.lvl-badge {
  font-size: 11px;
  color: var(--gta-yellow);
  padding: 4px 8px;
  background: var(--surface-elevated);
  border: 1px solid rgba(255, 214, 10, 0.5);
}

/* —— Crews —— */
.crew-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.crew-cols {
  display: flex;
  font-size: 9px;
  font-weight: 700;
  color: var(--terminal-dim);
  margin-bottom: 6px;
}

.crew-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 7px 10px;
  margin-bottom: 6px;
  background: rgba(15, 20, 18, 0.9);
  border: 1px solid var(--border);
  opacity: 0;
  transform: translateY(12px) scale(0.92);
  transition: opacity 0.15s, transform 0.15s;
}

.crew-row.is-on {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.crew-row.is-top {
  background: rgba(255, 214, 10, 0.08);
  border-color: rgba(255, 214, 10, 0.45);
}

.crew-rank { width: 28px; font-size: 11px; flex-shrink: 0; }
.crew-meta { flex: 1; min-width: 0; }
.crew-name { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.crew-name strong { font-size: 13px; font-weight: 600; }
.crew-tag {
  font-size: 8px;
  font-weight: 700;
  padding: 2px 4px;
  background: var(--surface-elevated);
  color: var(--terminal);
}
.crew-row.is-top .crew-tag {
  background: var(--gta-yellow);
  color: #000;
}
.crew-sub {
  font-size: 9px;
  color: var(--terminal-dim);
  margin: 3px 0;
}
.crew-bar {
  height: 5px;
  background: var(--surface-elevated);
}
.crew-bar > span {
  display: block;
  height: 100%;
  width: 0;
}
.crew-pwr {
  width: 48px;
  text-align: right;
  font-size: 11px;
  color: var(--gta-yellow);
  flex-shrink: 0;
}

/* —— Ghost —— */
.ghost-wash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255, 199, 51, 0.18), transparent 70%);
  opacity: 0;
  pointer-events: none;
}

.ghost-rings {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.ghost-rings span {
  position: absolute;
  border: 1.5px solid rgba(255, 199, 51, 0.35);
  border-radius: 50%;
}

.ghost-peers {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}

.ghost-peers i {
  position: absolute;
  width: 8px;
  height: 8px;
  margin: -4px;
  border-radius: 50%;
  background: rgba(255, 214, 10, 0.7);
}

.ghost-scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 199, 51, 0.45), transparent);
  top: 15%;
  pointer-events: none;
  z-index: 3;
}

.ghost-flip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 16px 0;
}

.ghost-banner {
  margin-top: 12px;
  padding: 14px;
  background: rgba(15, 20, 18, 0.96);
  border: 1.5px solid rgba(255, 199, 51, 0.75);
  border-radius: 4px;
  text-align: left;
  color: var(--warning);
}

.ghost-banner h3 {
  margin: 0 0 8px;
  font-size: 16px;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ghost-banner p {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--text-primary);
}

.cloak-bar {
  height: 5px;
  background: var(--surface-elevated);
  margin-bottom: 6px;
}
.cloak-bar > span {
  display: block;
  height: 100%;
  background: var(--warning);
  box-shadow: 0 0 6px rgba(255, 199, 51, 0.5);
  width: 0;
}

.stealth-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  text-align: left;
}

/* —— Black glitch —— */
.black-scene {
  background: #000;
}

.static-bars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.static-bars i {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.03);
}

.noise-col {
  position: absolute;
  top: 100px;
  left: 28px;
  right: 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  color: rgba(51, 242, 115, 0.4);
  z-index: 2;
  text-align: left;
}

.metrics {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 8px;
}

.metric {
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.metric .l {
  font-size: 9px;
  font-weight: 700;
  color: var(--terminal-dim);
}

.metric .v {
  font-size: 11px;
  color: var(--warning);
  margin-top: 4px;
}

.flash-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 9;
  mix-blend-mode: screen;
}

/* —— Sick / Chosen / Good luck —— */
.word-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 12px;
}

.word-row .word {
  opacity: 0;
  transform: translateY(14px) scale(0.75);
  transition: none;
}

.word-row .word.is-on {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.word-row .word.sick {
  font-size: clamp(32px, 10vw, 40px);
  font-weight: 900;
  color: var(--gta-yellow);
  text-shadow: 0 0 10px rgba(255, 214, 10, 0.45);
}

.word-row .word.normal {
  font-size: clamp(22px, 6vw, 26px);
  font-weight: 600;
}

.chosen-line {
  font-size: clamp(18px, 5vw, 22px);
  font-weight: 600;
  margin-bottom: 20px;
}

.chosen-player {
  font-size: clamp(40px, 12vw, 48px);
  font-weight: 900;
}

.brand-logo {
  display: flex;
  align-items: baseline;
  justify-content: center;
  position: relative;
  font-size: clamp(42px, 12vw, 56px);
  line-height: 1;
}

.brand-logo .n {
  font-weight: 900;
  color: var(--gta-yellow);
}

.brand-logo .r {
  font-weight: 200;
  color: var(--terminal);
}

.brand-logo .fringe-row {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}

.brand-logo.is-peak .fringe-row { opacity: 1; }

.luck-line {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.luck-line .lw {
  font-weight: 900;
  opacity: 0;
}

.luck-line .lw.is-player {
  font-size: clamp(28px, 9vw, 36px);
  color: var(--gta-yellow);
}

.luck-line .lw:not(.is-player) {
  font-size: clamp(22px, 7vw, 28px);
}

.luck-under {
  margin: 18px auto 0;
  height: 2px;
  width: 0;
  max-width: 180px;
  background: rgba(255, 214, 10, 0.7);
  box-shadow: 0 0 6px rgba(255, 214, 10, 0.5);
}

.luck-wash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255, 214, 10, 0.12), transparent 65%);
  pointer-events: none;
  opacity: 0;
}

/* —— Friend flyby —— */
.friends-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  mask-image: linear-gradient(transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(transparent, #000 8%, #000 92%, transparent);
}

.friends-track {
  display: flex;
  flex-direction: column;
  gap: 6px;
  will-change: transform;
}

.friend-card {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding: 0 10px;
  background: rgba(15, 20, 18, 0.94);
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.friend-av {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--surface-elevated);
  display: grid;
  place-items: center;
  font-size: 11px;
  color: var(--terminal);
  border: 1.5px solid;
  flex-shrink: 0;
}

.friend-info { flex: 1; min-width: 0; }
.friend-info .dn {
  font-size: 13px;
  display: flex;
  gap: 6px;
  align-items: baseline;
}
.friend-info .dn .lv {
  font-size: 9px;
  font-weight: 700;
  color: var(--gta-yellow);
}
.friend-info .hn {
  font-size: 10px;
  color: var(--terminal-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friend-km {
  width: 44px;
  text-align: right;
  font-size: 11px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.friend-st {
  width: 48px;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  padding: 4px 6px;
  flex-shrink: 0;
}

.friend-st.is-live {
  background: var(--terminal);
  color: #000;
}

.friend-st.is-ping {
  background: var(--surface-elevated);
  color: var(--gta-yellow);
}

.friend-st.is-ghost {
  background: var(--surface-elevated);
  color: var(--warning);
}