:root {
  --bg: #0a0014;
  --nav-h: calc(63px + env(safe-area-inset-bottom));
  --bg2: #150024;
  --neon-pink: #ff2079;
  --neon-cyan: #05d9e8;
  --neon-purple: #c13cff;
  --neon-yellow: #ffe45e;
  --neon-green: #39ff88;
  --text: #f4f0ff;
  --text-dim: #9a8bb8;
  /* One notch up from --text-dim, for secondary text that has to stay
     readable on a card the board is deliberately recessing. */
  --text-meta: #b4a7cd;
  --card-bg: rgba(21, 0, 36, 0.75);
  --card-border: rgba(193, 60, 255, 0.35);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Orbitron', system-ui, sans-serif;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  /* iOS Safari inflates small text in wide blocks unless told not to;
     the recap's second line was coming out at nearly twice its size. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* The one and only scroll container. Fixed to the viewport so iOS never
   scrolls the document itself; the bottom nav (a sibling, outside this)
   therefore stays pinned no matter what the page does. */
.app-scroll {
  position: fixed;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  z-index: 2;
}

.synth-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(193, 60, 255, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(193, 60, 255, 0.18) 1px, transparent 1px);
  background-size: 40px 40px;
  transform: perspective(500px) rotateX(60deg) scale(2);
  transform-origin: bottom;
  opacity: 0.35;
  pointer-events: none;
}

.scanlines {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0.15) 1px,
    rgba(0, 0, 0, 0) 2px
  );
  pointer-events: none;
}

.screen {
  position: relative;
  z-index: 2;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px 96px;
}

.hidden { display: none !important; }

.home-header {
  position: sticky;
  top: 0;
  z-index: 3;
  display: block;
  /* The page is viewport-fit=cover, so it runs under the status bar and
     the Dynamic Island, and this strip is what keeps the header clear of
     them. max() leaves the old padding where there is no inset to reserve,
     on a desktop or an older phone. The chips inside are positioned
     against .head-row rather than this element: absolute positioning
     resolves against the padding box, so anchored here they centred inside
     the inset and climbed into the status bar instead of clearing it. */
  padding: max(8px, env(safe-area-inset-top)) 12px 8px;
  transition: padding .18s ease;
  background: rgba(10, 0, 20, 0.98);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(193, 60, 255, 0.45);
  box-shadow: 0 6px 18px rgba(10, 0, 20, 0.9);
}

.home-logo-btn {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
}

.home-logo-img {
  display: block;
  height: 46px;
  width: auto;
  filter: drop-shadow(0 0 6px rgba(255, 32, 121, 0.4));
  transition: filter .15s ease, height .18s ease;
}

/* The wordmark is the best thing on the page at rest and dead weight once
   you are reading a list, so it shrinks out of the way on the way down and
   comes back the moment you return to the top. */
.home-header.compact { padding: max(3px, env(safe-area-inset-top)) 12px 3px; }
.head-row { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; }

/* The standalone app has no browser chrome, so this is the only reload
   there is. It sits under the header rather than in it: the left slot is
   already shared by the countdown chip and the score chip, and this is a
   message about the app rather than about the week. Sticky just beneath
   the header so it stays reachable on a long board. */
.update-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 34px;
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid rgba(5, 217, 232, .45);
  background: rgba(5, 217, 232, .12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: 'Press Start 2P', monospace;
  font-size: 7.5px;
  letter-spacing: .1em;
  color: var(--neon-cyan);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.update-bar.hidden { display: none; }
.update-bar .ub-mark { color: var(--neon-yellow); font-size: 8px; }
.update-bar .ub-text { text-align: center; }
@media (max-width: 360px) {
  .update-bar { font-size: 6.5px; gap: 7px; }
}
.home-header.compact .home-logo-btn { padding: 2px; }
.home-header.compact .home-logo-img { height: 26px; }
@media (prefers-reduced-motion: reduce) {
  .home-header, .home-logo-img { transition: none; }
}

.home-logo-btn:hover .home-logo-img {
  filter: drop-shadow(0 0 10px rgba(255, 32, 121, 0.7));
}

.home-logo-fallback {
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  color: var(--neon-pink);
  text-shadow: 0 0 6px var(--neon-pink);
}

/* Bottom nav — same dark-gradient-fade language as the top header, just
   mirrored, fixed (not sticky) so it's always reachable regardless of
   scroll position, with room for the iOS home-indicator safe area. */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: rgba(10, 0, 20, 0.98);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(193, 60, 255, 0.45);
  box-shadow: 0 -6px 18px rgba(10, 0, 20, 0.9);
}

.nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 84px;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 6px 4px;
  cursor: pointer;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.15s ease, transform 0.15s ease;
}

.nav-btn-icon {
  width: 22px;
  height: 22px;
  display: block;
  color: var(--text-dim);
  transition: color 0.15s ease, filter 0.15s ease;
}

.nav-btn-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.nav-btn:hover {
  color: var(--text);
  transform: translateY(-2px);
}

.nav-btn.active {
  color: var(--neon-cyan);
  text-shadow: 0 0 6px var(--neon-cyan);
}

.nav-btn.active .nav-btn-icon {
  color: var(--neon-cyan);
  filter: drop-shadow(0 0 5px var(--neon-cyan));
}

.nav-btn:hover .nav-btn-icon { color: var(--text); }

.wrap {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.wrap.wide { max-width: 720px; }

.brand {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}

.brand-mark {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(22px, 6vw, 36px);
  color: var(--neon-cyan);
  text-shadow: 0 0 8px var(--neon-cyan), 0 0 24px rgba(5, 217, 232, 0.6);
  letter-spacing: 2px;
}

.brand-sub {
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 1px;
}

.manager-picker {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.manager-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 22px 8px 0;
  background:
    linear-gradient(165deg,
      color-mix(in srgb, var(--accent, var(--neon-purple)) 55%, var(--bg2)) 0%,
      color-mix(in srgb, var(--accent, var(--neon-purple)) 18%, var(--bg2)) 45%,
      var(--bg) 100%);
  border: 3px solid var(--accent, var(--card-border));
  border-radius: 6px;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  color: var(--text);
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  cursor: pointer;
  overflow: hidden;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25), 0 4px 0 rgba(0, 0, 0, 0.5);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

/* Corner brackets — the "selection cursor" flashing in on hover/focus,
   like locking onto a fighter on the roster screen. */
.manager-card::after {
  content: "";
  position: absolute;
  inset: -3px;
  opacity: 0;
  background:
    linear-gradient(var(--neon-yellow), var(--neon-yellow)) top left / 16px 4px no-repeat,
    linear-gradient(var(--neon-yellow), var(--neon-yellow)) top left / 4px 16px no-repeat,
    linear-gradient(var(--neon-yellow), var(--neon-yellow)) top right / 16px 4px no-repeat,
    linear-gradient(var(--neon-yellow), var(--neon-yellow)) top right / 4px 16px no-repeat,
    linear-gradient(var(--neon-yellow), var(--neon-yellow)) bottom left / 16px 4px no-repeat,
    linear-gradient(var(--neon-yellow), var(--neon-yellow)) bottom left / 4px 16px no-repeat,
    linear-gradient(var(--neon-yellow), var(--neon-yellow)) bottom right / 16px 4px no-repeat,
    linear-gradient(var(--neon-yellow), var(--neon-yellow)) bottom right / 4px 16px no-repeat;
  filter: drop-shadow(0 0 5px var(--neon-yellow));
  animation: bracket-flash 0.6s steps(2, end) infinite;
  transition: opacity 0.1s ease;
  pointer-events: none;
}

.manager-card:hover::after,
.manager-card:focus-visible::after {
  opacity: 1;
}

@keyframes bracket-flash {
  50% { opacity: 0.4; }
}

.player-tag {
  position: absolute;
  top: 6px;
  left: 8px;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: #0a0014;
  background: var(--accent, var(--neon-purple));
  padding: 2px 5px;
  border-radius: 3px;
}

/* The card this device is locked to — cyan instead of the accent so it
   reads as "you" at a glance among the roster. */
.manager-card.is-me {
  border-color: var(--neon-cyan);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25), 0 4px 0 rgba(0, 0, 0, 0.5), 0 0 18px rgba(5, 217, 232, 0.45);
}

.manager-card.is-me .player-tag {
  background: var(--neon-cyan);
}

.manager-card.defending-champ {
  border-color: var(--neon-yellow);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25), 0 4px 0 rgba(0, 0, 0, 0.5), 0 0 16px rgba(255, 228, 94, 0.4);
}

/* Reserved on every card, champion or not, so a badge on one card
   never makes its whole grid row taller than the rest — every tile
   ends up the same height regardless of which row it lands in. */
.badge-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 16px;
  margin-top: 4px;
}

.champ-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--neon-yellow);
  text-shadow: 0 0 6px var(--neon-yellow);
  white-space: nowrap;
}

.manager-card:hover, .manager-card:focus-visible {
  transform: translateY(-3px) scale(1.04);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3), 0 6px 0 rgba(0, 0, 0, 0.5), 0 0 22px color-mix(in srgb, var(--accent, var(--neon-pink)) 65%, transparent);
}

.manager-avatar-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-top: 4px;
}

.manager-avatar {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Press Start 2P', monospace;
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent, var(--neon-purple)) 70%, white), var(--accent, var(--neon-purple)));
  border: 3px solid #0a0014;
  color: #0a0014;
  box-shadow: 0 0 0 2px var(--accent, var(--neon-purple)), 0 3px 0 rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.manager-name-plate {
  width: 100%;
  margin-top: 8px;
  padding: 6px 4px 8px;
  background: rgba(0, 0, 0, 0.4);
  border-top: 2px solid color-mix(in srgb, var(--accent, var(--neon-purple)) 70%, transparent);
  text-align: center;
}

.manager-name {
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.manager-pick-status {
  display: block;
  font-size: 9px;
  letter-spacing: 0.5px;
  min-height: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}

.manager-card.has-picks .manager-pick-status {
  color: var(--neon-green);
  text-shadow: 0 0 6px var(--neon-green);
}

.manager-card.partial-picks {
  border-color: var(--neon-yellow);
}

.manager-card.partial-picks .manager-pick-status {
  color: var(--neon-yellow);
  text-shadow: 0 0 6px var(--neon-yellow);
}

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.insert-coin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  margin: 10px 0 2px;
  padding: 8px 10px;
  background: rgba(255, 228, 94, 0.06);
  border: 2px dashed var(--neon-yellow);
  border-radius: 8px;
  cursor: pointer;
  color: var(--text);
}

.coin-blink {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: var(--neon-yellow);
  text-shadow: 0 0 6px var(--neon-yellow);
  animation: hint-blink 1s steps(1, end) infinite;
}

.coin-sub {
  font-family: 'Orbitron', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--neon-cyan);
}

.topbar.centered {
  justify-content: center;
  text-align: center;
}

.link-btn {
  background: none;
  border: none;
  color: var(--neon-cyan);
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
  cursor: pointer;
  padding: 10px 4px;
  white-space: nowrap;
}

.manager-badge {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  color: var(--neon-yellow);
  text-shadow: 0 0 6px var(--neon-yellow);
}

.locked-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px;
  border-radius: 10px;
  background: rgba(57, 255, 136, 0.1);
  border: 2px solid var(--neon-green);
  text-align: center;
}

.locked-banner-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 13px;
  color: var(--neon-green);
  text-shadow: 0 0 8px var(--neon-green);
}

.locked-banner-sub {
  font-size: 11px;
  color: var(--text-dim);
}

.games-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.game-card {
  position: relative;
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  border-radius: 14px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.game-card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: linear-gradient(120deg, var(--neon-pink), var(--neon-purple), var(--neon-cyan), var(--neon-pink));
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  animation: card-edge-shift 6s linear infinite;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.game-card:hover::before {
  opacity: 0.9;
}

.game-card.game-submitted::before {
  opacity: 0.55;
}

@keyframes card-edge-shift {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

.game-card.game-locked {
  opacity: 0.6;
  border-color: rgba(255, 32, 121, 0.4);
}

.game-card.game-locked::before {
  display: none;
}

.game-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 0.5px;
}

.game-status {
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 9px;
  letter-spacing: 1px;
}

.game-status.open {
  color: var(--neon-green);
  border: 1px solid var(--neon-green);
}

.game-status.locked {
  color: var(--neon-pink);
  border: 1px solid var(--neon-pink);
}

.matchup-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: stretch;
}

.team-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 2px solid var(--card-border);
  border-radius: 10px;
  color: var(--text);
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 12px;
  padding: 12px 6px;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
  line-height: 1.3;
}

.team-logo {
  width: 46px;
  height: 46px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(5, 217, 232, 0.35));
  transition: filter 0.15s ease, transform 0.15s ease;
}

.team-btn .team-name {
  display: block;
}

.team-btn .team-spread {
  display: block;
  font-size: 9px;
  color: var(--text-dim);
  margin-top: 2px;
  font-weight: 500;
}

.team-btn:hover:not(:disabled) {
  border-color: var(--neon-cyan);
  transform: translateY(-2px);
}

.team-btn:hover:not(:disabled) .team-logo {
  filter: drop-shadow(0 0 10px rgba(5, 217, 232, 0.7));
  transform: scale(1.06);
}

.team-btn.selected {
  border-color: var(--neon-purple);
  background: rgba(193, 60, 255, 0.22);
  box-shadow: 0 0 16px rgba(193, 60, 255, 0.55);
}

.team-btn.selected .team-logo {
  filter: drop-shadow(0 0 12px rgba(193, 60, 255, 0.8));
  transform: scale(1.08);
}

.team-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.vs-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: var(--neon-yellow);
}

.vs-bolt {
  font-size: 16px;
  filter: drop-shadow(0 0 6px var(--neon-yellow));
  animation: vs-pulse 1.6s ease-in-out infinite;
}

@keyframes vs-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.7; }
}

.tiebreaker-card {
  background: var(--card-bg);
  border: 2px dashed var(--card-border);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tiebreaker-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 6.5px;
  line-height: 1.7;
  color: var(--neon-yellow);
  letter-spacing: .07em;
}
/* The game and the guess share a line: marks and short names on the
   left, the box you type into on the right. */
.tb-game { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto; overflow: hidden; }
.tb-logo { width: 22px; height: 22px; object-fit: contain; flex: none; }
.tb-tm { min-width: 0; font-family: 'Orbitron', system-ui, sans-serif; font-weight: 700; font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-at { font-size: 9px; color: var(--text-dim); flex: none; }

.tiebreaker-input {
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid var(--card-border);
  border-radius: 8px;
  color: var(--text);
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 16px;
  text-align: center;
  padding: 9px 6px;
  width: 68px;
  flex: none;
  font-variant-numeric: tabular-nums;
}
.tiebreaker-input:focus { outline: none; border-color: var(--neon-cyan); }

.tiebreaker-input:disabled { opacity: 0.6; }

.submit-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.picks-progress {
  font-size: 11px;
  color: var(--text-dim);
  display: block;
  text-align: center;
  margin-top: 6px;
}

/* Countdown to the week's opener, above the cards on the picks page. One
   tight bar: label and arcade clock on a line, the matchup under it. */
.picks-countdown {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 2px 8px;
  margin: 8px auto 0;
  padding: 5px 10px;
  width: fit-content;
  max-width: 100%;
  border: 2px solid var(--neon-cyan);
  border-radius: 8px;
  background: rgba(5, 217, 232, 0.07);
  text-align: center;
}

.picks-countdown .cd-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 6.5px;
  letter-spacing: 0.1em;
  color: var(--neon-cyan);
}

.picks-countdown .cd-clock {
  font-family: 'Press Start 2P', monospace;
  font-size: 13px;
  line-height: 1.1;
  color: var(--neon-yellow);
  text-shadow: 0 0 6px rgba(255, 228, 94, 0.5);
  font-variant-numeric: tabular-nums;
}

.picks-countdown .cd-game {
  flex-basis: 100%;
  font-size: 9px;
  line-height: 1.3;
  color: var(--text-dim);
}

/* Under an hour out: everything is about to lock. */
.picks-countdown.soon {
  border-color: var(--neon-pink);
  background: rgba(255, 32, 121, 0.09);
}

.picks-countdown.soon .cd-label { color: var(--neon-pink); }

.picks-countdown.soon .cd-clock {
  color: var(--neon-pink);
  text-shadow: 0 0 8px rgba(255, 32, 121, 0.6);
  animation: cd-pulse 1s steps(2, end) infinite;
}

@keyframes cd-pulse { 50% { opacity: 0.55; } }

@media (prefers-reduced-motion: reduce) {
  .picks-countdown.soon .cd-clock { animation: none; }
}

.primary-btn {
  background: linear-gradient(135deg, var(--neon-pink), var(--neon-purple));
  border: none;
  border-radius: 10px;
  color: #fff;
  font-family: 'Press Start 2P', monospace;
  font-size: 13px;
  padding: 16px 24px;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(255, 32, 121, 0.5);
  transition: transform 0.15s ease, opacity 0.15s ease;
  width: 100%;
}

.primary-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

.primary-btn:not(:disabled):hover {
  transform: translateY(-2px);
}

.scoreboard-note {
  font-size: 11px;
  color: var(--text-dim);
  text-align: center;
  margin: 0;
}

/* --- Live scores (ESPN, proxied through the Worker) ------------------- */

.live-scores-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* --- Scorebugs: 2-up grid of compact ESPN-style bugs ------------------- */
.bug-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: start;
}

@media (min-width: 700px) {
  .bug-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Two cards across stops working around 340px: the head cannot hold a
   clock, a channel and a stake pill, and something gets cut. One card
   across costs scrolling and keeps every card readable, which is the
   better trade on a screen that small. */
@media (max-width: 340px) {
  .bug-grid { grid-template-columns: minmax(0, 1fr); }
}

.scorebug {
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  border-radius: 10px;
  padding: 6px 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  min-width: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* The lit card, not a losing one. Red is already this app's word for a
   miss, on the ✗ and on a struck stake pill, so a red ring around a live
   game read as "you are down in this one" rather than "this one is being
   played". White says now and nothing about the outcome, which the stake
   pill and the scores are there to say. */
.scorebug.is-live {
  /* On a Saturday most of the board is live at once, and a bright ring on
     six of ten cards marks nothing: everything shouts, so nothing carries.
     Quiet enough to read as "this one is being played", not so loud that
     it competes with the scores inside it. The glow is gone for the same
     reason the score's glow went. */
  border-color: rgba(255, 255, 255, .42);
}

.scorebug.is-final { opacity: 1; }
/* expanded bugs grow downward and stay in their grid cell */
.scorebug.expanded { align-self: start; }

.bug-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 8px;
  color: var(--text-meta);
  margin-bottom: 2px;
}

/* Which channel a game is on, so the board answers "where do I watch
   that" without opening the card. Stays through the live period and
   recedes so the clock keeps the emphasis. */
.bug-tv {
  flex: none;
  padding: 1px 4px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, .3);
  font-family: 'Press Start 2P', monospace;
  font-size: 5.5px;
  letter-spacing: .04em;
  color: var(--text-meta);
  white-space: nowrap;
  max-width: 62px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bug-gnum {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: var(--neon-cyan);
}

.bug-status {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scorebug.is-live .bug-status,
.scorebug.is-final .bug-status {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  letter-spacing: 0.5px;
}
/* The running clock was red for the same reason and reads the same wrong
   way. It is the freshest thing on the card, so it goes brightest. */
.scorebug.is-live .bug-status { color: #fff; }
.scorebug.is-final .bug-status { color: var(--neon-yellow); }

/* Arcade score pop: a number that just changed flashes and scales */
.bug-score.pop {
  animation: score-pop 0.9s ease-out;
}

@keyframes score-pop {
  0% { transform: scale(1.7); color: #fff; text-shadow: 0 0 14px var(--neon-yellow), 0 0 28px var(--neon-pink); }
  100% { transform: scale(1); }
}

.bug-caret { color: var(--neon-purple); font-family: 'Orbitron', system-ui, sans-serif; font-size: 13px; line-height: 1; font-weight: 900; }

@keyframes live-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

.bug-row {
  display: grid;
  /* The spread and the score size themselves. Both are set in Press Start
     2P, which is one em per character, so -27.5 is 32.5px at 6.5px and a
     two-digit score is 24px at 12px. Hard pixel widths here were guesses
     against whatever font happened to be measuring, and when they came up
     short the two numbers overlapped, right-aligned text spilling left out
     of its own column into its neighbour. max-content asks the browser for
     the real width in the real font on the real device, so they cannot
     collide whatever the type is doing. The name takes what is left and
     ellipsises, which is the right thing to give up. */
  grid-template-columns: 20px minmax(0, 1fr) max-content max-content;
  align-items: center;
  gap: 2px;
  padding: 2px 0 2px 4px;
  border-left: 2px solid transparent;
}

.bug-logo { width: 16px; height: 16px; object-fit: contain; }

.bug-team {
  display: flex;
  align-items: baseline;
  gap: 1px;
  min-width: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: -.02em;
  white-space: nowrap;
  overflow: hidden;
}
/* The name is the part that gives way when the row runs out of room; the
   rank and the ball are one glyph each and always fit. */
.tm-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Between 341 and 380 the grid is still two across but the cards are at
   their narrowest, and the longest short names run into an ellipsis at
   full size. Half a point buys them back. Below 341 the grid drops to one
   column and the room is there already. */
@media (min-width: 341px) and (max-width: 380px) {
  .bug-team { font-size: 9.5px; }
}

/* On a scorebug the rank rides the corner of the logo instead of sitting
   in the name. The name cell is about 82px on a two-across card and the
   longest short names need 84px of it, so an 18px badge inline was the
   difference between Alabama and Alabam…. On the corner it costs nothing.
   This is also where broadcast graphics put it. */
/* AP poll position on a scorebug. In front of the name is where a rank is
   written and read, and it is where this started, but the name cell on a
   two-across card cannot hold a rank, a name and a football at once:
   measured with every team ranked, #12 in front of the name truncated
   Ohio State, Georgia and Penn State at 390px. So the rank sits on the
   badge instead, which costs the name nothing.
   The version that shipped before was an accident, not this design: an
   edit aborted part-way and left the number unstyled, grey, and hanging
   three pixels off the logo with nothing behind it. It is a badge now:
   tucked into the logo's corner, on its own ground, in the yellow this
   app uses for standings. */
.bug-mark { position: relative; display: block; width: 20px; height: 20px; }
.bug-mark .bug-logo { width: 100%; height: 100%; }
/* Just the number, over the logo. No pill, no fill, no notch cut out of
   the mark: a filled bubble at this size reads as a button and fights the
   logo it sits on. It is carried by a dark outline instead, so it stays
   legible over whatever colour a team's crest happens to be. White,
   because yellow is the standings colour on this board and a poll rank is
   not a standing. */
.bug-mark .tm-rank {
  position: absolute;
  left: -3px;
  bottom: -1px;
  font-size: 7.5px;
  font-weight: 700;
  line-height: 1;
  /* Secondary information, so it recedes rather than competing with the
     crest it sits on. Bold white at full strength covered half of
     Tennessee's T. */
  color: rgba(255, 255, 255, .78);
  text-shadow:
    0 0 2px #0a0014, 0 0 2px #0a0014,
    1px 0 0 #0a0014, -1px 0 0 #0a0014,
    0 1px 0 #0a0014, 0 -1px 0 #0a0014;
}
.bug-mark .tm-rank::before { content: none; }

.tm-rank {
  flex: none;
  align-self: baseline;
  font-family: 'Orbitron', system-ui, sans-serif;
  font-style: normal;
  font-weight: 800;
  font-size: 9px;
  color: #fff;
  letter-spacing: 0;
}
.tm-rank::before { content: "#"; opacity: .55; font-weight: 600; }

.bug-fav {
  font-family: 'Press Start 2P', monospace;
  font-size: 6.5px;
  color: var(--text-meta);
  text-align: right;
  /* Gutters on both sides, and they are part of the column because it
     sizes to max-content, so neither can be squeezed away. Without the
     left one the name column, being 1fr, grows until the name or the
     football is two pixels off the line. */
  padding-left: 10px;
  padding-right: 8px;
}

.bug-score {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  color: var(--text-meta);
  text-align: right;
}

.scorebug.upcoming .bug-score { opacity: 0.3; }

/* Scores are one family, not two colours: the leader is bright and the
   other recedes, so the eye reads the margin instead of decoding a
   palette. Colour on this card means something specific: cyan is the
   side you took, and the stake pill is the only green or pink. */
/* A 6px glow around a 12px pixel digit does not make it glow, it fills the
   counters and softens the edges, so the leading score was the blurriest
   number on the board and the one bleeding into the spread beside it. Two
   pixels reads as a lit number and leaves the glyph square. */
.bug-row.leading .bug-score { color: #fff; text-shadow: 0 0 2px rgba(255, 255, 255, .45); }
.scorebug.is-final .bug-row.leading .bug-score { color: var(--neon-green); text-shadow: 0 0 2px rgba(0, 255, 143, .5); }

.bug-detail {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--card-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bug-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
}

.bug-col-head {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: var(--neon-cyan);
  text-align: center;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(5, 217, 232, 0.3);
}

.bug-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  text-align: center;
}

.bug-col-title {
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 4px;
}

.bug-col-title em {
  font-style: normal;
  color: var(--neon-pink);
}

.bug-name-line {
  font-size: 11px;
  color: var(--text);
}

.bug-name-line.none { color: var(--text-dim); opacity: 0.5; }

.bug-hidden-note {
  font-size: 9px;
  color: var(--text-dim);
  text-align: center;
}

.live-scores-heading {
  display: block;
  text-align: center;
}

.live-scores-empty {
  font-size: 11px;
  color: var(--text-dim);
  text-align: center;
  margin: 0;
}

.live-score-card {
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.live-score-card.in-progress {
  border-color: var(--neon-green);
  box-shadow: 0 0 10px rgba(57, 255, 136, 0.25);
}

.live-score-card.final {
  opacity: 0.75;
}

.live-score-card.upcoming .live-score-number {
  opacity: 0.35;
}

.live-score-spread {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--neon-pink);
  text-shadow: 0 0 4px var(--neon-pink);
}

.live-score-spread.dog {
  color: var(--text-dim);
  text-shadow: none;
  opacity: 0.7;
}

.live-score-gnum {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: var(--neon-cyan);
  opacity: 0.8;
}

.live-score-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 8px;
}

.live-score-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
  text-align: center;
}

.live-score-col.leading .live-score-team-name,
.live-score-col.leading .live-score-number {
  color: var(--neon-green);
  text-shadow: 0 0 4px var(--neon-green);
}

.live-score-team-name {
  font-size: 10px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.live-score-logo {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.live-score-number {
  font-family: 'Press Start 2P', monospace;
  font-size: 16px;
  color: var(--neon-yellow);
  text-shadow: 0 0 4px var(--neon-yellow);
}

.live-score-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-top: 10px;
}

.live-score-status {
  font-size: 8px;
  color: var(--text-dim);
  text-align: center;
  white-space: normal;
  max-width: 78px;
  line-height: 1.4;
}

.live-score-vs {
  font-size: 9px;
  color: var(--text-dim);
  opacity: 0.6;
}

.live-score-pickers {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 2px;
}

.picker-line {
  font-size: 8px;
  line-height: 1.4;
  color: var(--text-dim);
}

.picker-line strong {
  color: var(--neon-cyan);
  margin-right: 3px;
}

.picker-line.none {
  opacity: 0.4;
}

.win-prob-bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}

.win-prob-fill.away {
  background: var(--neon-cyan);
}

.win-prob-fill.home {
  background: var(--neon-pink);
}

.win-prob-labels {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--text-dim);
}

.rankings-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ranking-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  border-radius: 8px;
  padding: 8px 12px;
}

.ranking-row.rank-1 {
  border-color: var(--neon-yellow);
  box-shadow: 0 0 12px rgba(255, 228, 94, 0.35);
}

.ranking-place {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: var(--neon-yellow);
  width: 28px;
  flex-shrink: 0;
}

.ranking-name {
  flex: 1;
  font-weight: 700;
  font-size: 13px;
}

.ranking-score {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: var(--neon-green);
  text-shadow: 0 0 5px var(--neon-green);
}

.ranking-lock {
  font-size: 10px;
  color: var(--text-dim);
}

.scoreboard-table-wrap {
  overflow-x: auto;
  border: 2px solid var(--card-border);
  border-radius: 10px;
}

.scoreboard-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 11px;
  min-width: 470px;
}

.scoreboard-table th,
.scoreboard-table td {
  padding: 6px 3px;
  text-align: center;
  border-bottom: 1px solid var(--card-border);
  white-space: nowrap;
}

.scoreboard-table th {
  background: rgba(193, 60, 255, 0.12);
  color: var(--neon-cyan);
  font-size: 9px;
  letter-spacing: 0.3px;
  position: sticky;
  top: 0;
}

/* Name column stays put while the games scroll sideways */
.scoreboard-table th.manager-col,
.scoreboard-table td.manager-col {
  position: sticky;
  left: 0;
  z-index: 1;
  text-align: left;
  font-weight: 700;
  padding-left: 8px;
  background: #140026;
  box-shadow: 2px 0 0 rgba(193, 60, 255, 0.25);
}
.scoreboard-table th.manager-col { z-index: 2; background: #1c0733; }
.scoreboard-table tr.is-me td.manager-col { background: #0f1a2a; }

.scoreboard-table .ranking-lock { display: block; font-size: 8px; margin-top: 1px; }
/* The place, in the leaderboard's own type and colour, so the grid reads
   as the same list rather than as a coincidentally similar one. */
/* Set like a poll rank on a team: after the name, small, quiet, in the
   same Orbitron the college ranks use rather than the pixel face, so it
   reads as a rank rather than as another score. */
/* How far off the tiebreaker was. Neutral, because being nearest only
   matters when two managers are level on points, and an exact hit is the
   one worth looking up for. */
.scoreboard-table .tb-off { font-variant-numeric: tabular-nums; }
.scoreboard-table .tb-off.none { color: var(--text-dim); opacity: .6; }
.scoreboard-table .tb-off.exact { color: var(--neon-green); }

.scoreboard-table .ap-place {
  margin-left: 4px;
  font-family: 'Orbitron', system-ui, sans-serif;
  font-weight: 800;
  font-size: 8px;
  color: rgba(255, 255, 255, .78);
  letter-spacing: 0;
  vertical-align: 2px;
}
.scoreboard-table tr.is-me .ap-who { color: var(--neon-cyan); }

.pick-cell-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  vertical-align: middle;
  display: block;
  margin: 0 auto;
}

.pick-cell { text-align: center; }

.pick-cell-spread {
  display: block;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: var(--neon-yellow);
  text-shadow: 0 0 4px rgba(255, 228, 94, 0.6);
  margin-top: 3px;
}

.pick-cell-pts {
  display: block;
  font-size: 9px;
  font-weight: 700;
  margin-top: 1px;
}

.pick-cell.correct { color: var(--neon-green); }
.pick-cell.incorrect { color: var(--neon-pink); }
.pick-cell.pending { color: var(--text-dim); }
.pick-cell.hidden-pick { color: var(--text-dim); font-style: italic; }

/* --- Logo / splash screen ------------------------------------------- */

.logo-screen {
  cursor: pointer;
  position: relative;
  overflow: hidden;
  /* no bottom-nav on the splash, so no 96px bottom pad; respect the iOS notch/home bar */
  padding: calc(24px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
  background: radial-gradient(ellipse at center 32%, #2a0045 0%, var(--bg) 68%);
}

/* Everything on the splash flows through this column so the sun, the
   wordmark and the copyright keep the same relationship at every size */
.splash-stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.arcade-sun-wrap {
  position: relative;
  width: min(78vw, 440px);
  height: min(78vw, 440px);
  flex: 0 0 auto;
  /* lets the wordmark size itself from the sun's width (cqw units) */
  container-type: inline-size;
}

/* Synthwave striped sun, Miami-Vice sunset palette */
.arcade-sun {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffd23f 0%, var(--neon-pink) 45%, var(--neon-purple) 100%);
  box-shadow: 0 0 90px 24px rgba(255, 32, 121, 0.4);
  -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0px, #000 6px, transparent 6px, transparent 12px);
  mask-image: repeating-linear-gradient(to bottom, #000 0px, #000 6px, transparent 6px, transparent 12px);
  animation: sun-pulse 4s ease-in-out infinite;
  z-index: 0;
}

@keyframes sun-pulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

/* Animated cyan horizon grid, scrolling toward the viewer (outrun style) */
.arcade-horizon-grid {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  background-image:
    linear-gradient(rgba(5, 217, 232, 0.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5, 217, 232, 0.55) 1px, transparent 1px);
  background-size: 46px 46px;
  transform: perspective(280px) rotateX(65deg);
  transform-origin: bottom;
  -webkit-mask-image: linear-gradient(to top, black 0%, transparent 92%);
  mask-image: linear-gradient(to top, black 0%, transparent 92%);
  animation: grid-scroll 1.2s linear infinite;
  z-index: 0;
}

@keyframes grid-scroll {
  from { background-position: 0 0; }
  to { background-position: 0 46px; }
}

/* Wordmark block anchored to the sun itself, not the viewport */
.logo-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 4px;
  box-sizing: border-box;
}

.arcade-tag {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(7px, 2.3vw, 9px);
  font-size: clamp(7px, 2.2cqw, 10px);
  letter-spacing: 1.5px;
  color: var(--neon-yellow);
  text-shadow: 0 0 6px var(--neon-yellow), 0 0 2px #000, 0 1px 3px rgba(0, 0, 0, 0.9);
  text-align: center;
  line-height: 1.6;
  white-space: nowrap;
}

.logo-text {
  position: relative;
  margin: 0;
  max-width: 100%;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: clamp(30px, 10vw, 68px);
  /* ~9 Orbitron-900 glyphs at 0.75em each: 12.5cqw keeps the word inside the sun */
  font-size: clamp(28px, 12.5cqw, 56px);
  letter-spacing: 0.03em;
  white-space: nowrap;
  color: var(--neon-cyan);
  text-shadow:
    0 0 6px var(--neon-cyan),
    0 0 16px var(--neon-cyan),
    0 0 34px var(--neon-purple);
  animation:
    neon-color-cycle 3.2s ease-in-out infinite,
    neon-buzz 2.6s linear infinite;
}

/* Chromatic-aberration glitch layers, like a mistuned CRT/VHS attract screen */
.logo-text::before,
.logo-text::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  overflow: hidden;
  opacity: 0.65;
  pointer-events: none;
}

.logo-text::before {
  color: var(--neon-cyan);
  mix-blend-mode: screen;
  animation: glitch-shift-1 5s infinite linear;
}

.logo-text::after {
  color: var(--neon-pink);
  mix-blend-mode: screen;
  animation: glitch-shift-2 5s infinite linear;
}

@keyframes glitch-shift-1 {
  0%, 90%, 100% { transform: translate(-2px, 0); }
  92% { transform: translate(-7px, 1px); }
  94% { transform: translate(-1px, -1px); }
  96% { transform: translate(-4px, 0); }
}

@keyframes glitch-shift-2 {
  0%, 90%, 100% { transform: translate(2px, 0); }
  92% { transform: translate(7px, -1px); }
  94% { transform: translate(1px, 1px); }
  96% { transform: translate(4px, 0); }
}

.logo-hint {
  font-size: 11px;
  font-size: clamp(10px, 2.8cqw, 13px);
  letter-spacing: 2px;
  color: var(--neon-cyan);
  text-shadow: 0 0 6px var(--neon-cyan), 0 0 2px #000, 0 1px 3px rgba(0, 0, 0, 0.9);
  animation: neon-buzz 1.4s steps(2, end) infinite;
}

.logo-hint.blink {
  animation:
    neon-buzz 1.4s steps(2, end) infinite,
    hint-blink 1s steps(1, end) infinite;
}

@keyframes hint-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.4; }
}

/* Sits just below the sun, in flow, so it never lands on top of it */
.arcade-copyright {
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--text-dim);
  text-align: center;
  white-space: nowrap;
}

@keyframes neon-color-cycle {
  0%, 100% {
    color: var(--neon-cyan);
    text-shadow:
      0 0 6px var(--neon-cyan),
      0 0 16px var(--neon-cyan),
      0 0 34px var(--neon-purple);
  }
  50% {
    color: var(--neon-pink);
    text-shadow:
      0 0 6px var(--neon-pink),
      0 0 16px var(--neon-pink),
      0 0 34px var(--neon-purple);
  }
}

/* Mimics a flickering neon tube: mostly steady, with a couple of quick
   dropouts and one longer buzz per cycle. */
@keyframes neon-buzz {
  0%, 3%, 6%, 100% { opacity: 1; }
  4% { opacity: 0.4; }
  5% { opacity: 0.85; }
  42% { opacity: 1; }
  43% { opacity: 0.3; }
  44% { opacity: 0.9; }
  45% { opacity: 0.5; }
  46% { opacity: 1; }
}

/* --- Picks screen: per-game submit flow ------------------------------ */

.picks-hint {
  font-size: 11px;
  color: var(--text-dim);
  text-align: center;
  margin: 0;
}

.ghost-btn {
  background: transparent;
  border: 2px solid var(--card-border);
  border-radius: 8px;
  color: var(--neon-cyan);
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 11px;
  padding: 10px 16px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ghost-btn:hover:not(:disabled) {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 10px rgba(5, 217, 232, 0.4);
}

.ghost-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.game-card.game-submitted {
  border-color: var(--neon-green);
}
/* Green on a card means "your pick is in", which is worth saying while
   the slate is open and misleading once it is not: a green frame around a
   finished card reads as a green tick on the result. Once a game locks,
   the frame steps back and lets the card say how it went. */
.game-card.game-locked.game-submitted {
  border-color: var(--card-border);
}

.game-status.submitted {
  color: var(--neon-green);
  border: 1px solid var(--neon-green);
  transform-origin: right center;
}
.game-status.bet { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; padding-left: 5px; }
.game-status.bet .gs-logo { width: 16px; height: 16px; object-fit: contain; }
.game-status.bet .gs-bet { color: var(--neon-cyan); letter-spacing: .5px; }
.game-status.bet b { color: var(--neon-yellow); font-weight: 800; }
.game-status.bet b i { font-style: normal; font-size: 6.5px; margin-left: 1px; color: var(--text-dim); }

/* Brief pulse on the SAVED badge of the card you just tapped — the
   feedback that replaces the old Submit button. */
.game-card.just-saved .game-status.submitted {
  animation: saved-pulse 0.9s ease-out;
}

.game-status.submitted.updated {
  color: var(--neon-cyan);
  border-color: var(--neon-cyan);
}

.game-card.just-saved .game-status.submitted.updated {
  animation: updated-pulse 0.9s ease-out;
}

@keyframes updated-pulse {
  0% { transform: scale(1.4); box-shadow: 0 0 16px var(--neon-cyan); }
  100% { transform: scale(1); box-shadow: none; }
}

@keyframes saved-pulse {
  0% { transform: scale(1.4); box-shadow: 0 0 16px var(--neon-green); }
  100% { transform: scale(1); box-shadow: none; }
}

.game-submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.game-submit-note {
  font-size: 10px;
  color: var(--neon-green);
}

.picks-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 2px 0 10px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 228, 94, .45);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 228, 94, .07), rgba(255, 228, 94, .02));
  font-family: 'Press Start 2P', monospace;
  font-size: 7.5px;
  letter-spacing: .06em;
  color: var(--text-dim);
  white-space: nowrap;
}
.picks-total.hidden { display: none; }
.picks-total b { color: var(--neon-yellow); font-size: 11px; }
.picks-total i { font-style: normal; font-size: 6px; margin-left: 2px; color: var(--text-dim); }
.picks-total em { font-style: normal; color: var(--neon-pink); }
.picks-total .pt-val { color: var(--text); }
.picks-total .pt-val b { font-size: 14px; text-shadow: 0 0 8px rgba(255, 228, 94, .5); }

.tiebreaker-row {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.tiebreaker-status {
  font-size: 10px;
  color: var(--neon-green);
}
.tiebreaker-status.warn { color: var(--neon-pink, #ff2079); }
.tiebreaker-status.busy { color: var(--text-dim); }
.tiebreaker-save {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  padding: 10px 12px;
  border: 2px solid var(--neon-yellow);
  border-radius: 8px;
  background: rgba(255, 228, 94, .12);
  color: var(--neon-yellow);
  cursor: pointer;
  flex: none;
}
.tiebreaker-save:active { background: var(--neon-yellow); color: #190122; }
.tiebreaker-save.hidden { display: none; }

/* --- Matchup hero cards: team vs team, 2 pick buttons each ----------- */

.matchup-cards-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* A team is a row, not a boxed panel. Identity on the left, the two bets
   as chips on the right, one line each. */
.tm-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 8px;
  border-left: 3px solid transparent;
  background: rgba(255, 255, 255, .02);
}
.tm-row.picked { border-left-color: var(--neon-cyan); background: rgba(5, 217, 232, .07); }

.tm-id { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; }
.tm-logo { width: 22px; height: 22px; object-fit: contain; filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, .55)); }
.tm-name {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  letter-spacing: .04em;
  color: var(--text);
  overflow: hidden;
  white-space: nowrap;
}
.tm-name .tm-rank { font-size: 7.5px; }
.tm-name .tm-at { font-style: normal; font-size: 7.5px; color: var(--text-dim); margin-right: 1px; }
.tm-spread { flex: none; font-family: 'Orbitron', system-ui, sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 0; font-variant-numeric: tabular-nums; margin-left: 2px; color: var(--text-dim); opacity: .8; }
.tm-row.picked .tm-name { color: var(--neon-cyan); }
.tm-line {
  font-family: 'Orbitron', system-ui, sans-serif;
  font-weight: 800;
  font-size: 13px;
  color: var(--text-meta);
  font-variant-numeric: tabular-nums;
}

.tm-chips { display: flex; gap: 5px; }

.pick-mini-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .04);
  color: var(--text-meta);
  font-family: 'Press Start 2P', monospace;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.pk-label { font-size: 6.5px; letter-spacing: .06em; }
/* The number you are taking, on the chip that takes it. Signed, which
   points never are, so the two numbers on a chip cannot be confused. */
.pk-line { font-family: 'Orbitron', system-ui, sans-serif; font-weight: 800; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text); }
.pick-mini-btn.selected .pk-line { color: #fff; }
/* Both signs occupy the same width, so the two spread chips in a card are
   the same size and line up with each other and with the WIN chips. */
.pk-sign { font-style: normal; display: inline-block; width: .58em; text-align: center; }
/* What a chip pays. The unit is spelled out so the number cannot be read
   as another line, and set small so the digit carries. */
.pk-pts { display: inline-flex; align-items: baseline; font-size: 9px; color: var(--neon-yellow); }
.pk-pts i { font-style: normal; font-size: 6px; opacity: .75; margin-left: 1px; }

/* One filled chip is the whole selected state: no extra glow, no
   underline, no check. */
.pick-mini-btn.selected { border-color: var(--neon-cyan); background: rgba(5, 217, 232, .2); color: #fff; }
/* The point colour is what the point value means: yellow pays 2, green
   pays 1, pink pays 3. Selection must not wash that out, or the one chip
   you want to double-check is the one chip that stopped telling you what
   it pays. Filled and bordered says selected; the colour keeps saying
   what it is worth. */
.pick-mini-btn.selected .pk-pts { font-weight: 700; }
.pick-mini-btn:disabled { opacity: .4; cursor: default; }

.pick-mini-btn:hover:not(:disabled) { border-color: rgba(5, 217, 232, .6); }

/* The spelled-out unit costs about fourteen pixels a chip, which a narrow
   phone cannot pay out of the team name. Tighten the chips there instead
   of letting Mississippi St turn into Mississi… */
@media (max-width: 380px) {
  .pick-mini-btn { padding: 0 6px; gap: 3px; }
  .pk-label { font-size: 6px; }
  .pk-pts { font-size: 8.5px; }
  .pk-pts i { font-size: 5.5px; }
  .tm-chips { gap: 4px; }
  .tm-id { gap: 6px; }
}
@media (max-width: 340px) {
  .tm-name { font-size: 8px; }
  .tm-line { font-size: 12px; }
}
.pick-mini-btn.chalk .pk-pts { color: var(--neon-green); }
/* A lift off --neon-pink. The 3PT digit is 9px, and the selected chip's
   cyan fill raises the ground under it: the full-saturation pink measures
   3.37:1 there, the lift 4.73:1, so the value stays readable on the chip
   you took. */
.pick-mini-btn.upset .pk-pts { color: #ff6fa3; }


.ghost-btn.small {
  padding: 6px 10px;
  font-size: 10px;
}

/* --- Rules modal -------------------------------------------------- */

.rules-link {
  display: block;
  margin: 4px auto 0;
  text-align: center;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(5, 0, 12, 0.82);
  backdrop-filter: blur(2px);
}

.modal-card {
  width: 100%;
  max-width: 440px;
  max-height: 88vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--bg2);
  border: 2px solid var(--neon-purple);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 0 30px rgba(193, 60, 255, 0.45);
}

.modal-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 15px;
  color: var(--neon-cyan);
  text-shadow: 0 0 8px var(--neon-cyan);
  text-align: center;
}

.modal-subtext {
  font-size: 11px;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.5;
}

.avatar-hint {
  display: block;
  text-align: center;
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 0.5px;
  margin-top: -8px;
}

.avatar-edit-preview {
  align-self: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent, var(--neon-purple)) 70%, white), var(--accent, var(--neon-purple)));
  border: 3px solid #0a0014;
  box-shadow: 0 0 0 2px var(--accent, var(--neon-purple)), 0 3px 0 rgba(0, 0, 0, 0.5);
  color: #0a0014;
  font-family: 'Press Start 2P', monospace;
}

.avatar-emoji-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid var(--card-border);
  border-radius: 8px;
  color: var(--text);
  font-family: 'Orbitron', sans-serif;
  font-size: 20px;
  text-align: center;
  padding: 10px;
}

.modal-actions {
  display: flex;
  gap: 10px;
}

.modal-actions .ghost-btn,
.modal-actions .primary-btn {
  flex: 1;
}

.rules-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px dashed var(--card-border);
}

.rules-heading {
  font-size: 12px;
  font-weight: 700;
  color: var(--neon-yellow);
  text-shadow: 0 0 6px var(--neon-yellow);
}

.section-heading {
  display: block;
  text-align: center;
  margin-top: 6px;
}

.rules-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}

.rules-list strong {
  color: var(--neon-green);
}

.rules-example {
  font-size: 10px;
  color: var(--text-dim);
  line-height: 1.5;
}

.rules-max {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--neon-pink);
  text-shadow: 0 0 6px var(--neon-pink);
  padding-top: 6px;
  border-top: 1px dashed var(--card-border);
}

.pick-cell-short { display: block; font-size: 9px; font-weight: 700; }

/* Quick claim picker: grid of names for a device with no saved identity */
.claim-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  margin: 6px 0 2px;
}
.claim-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 2px solid var(--card-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  text-align: left;
}
.claim-btn:hover { border-color: var(--neon-cyan); color: var(--neon-cyan); }
.claim-avatar {
  width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
  background: var(--accent, var(--neon-purple)); color: #0a0014; font-size: 13px; flex: none;
}
.claim-skip { margin-top: 10px; font-size: 10px; opacity: 0.7; }

/* Identity pill: who this device is, on every screen, top right */
/* Sits in the header's left slot, same geometry as the countdown chip it
   replaces on scroll. Only ever rendered in the compact header, so it is
   sized for that. */
.head-score {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 8px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--text);
  cursor: pointer;
  z-index: 4;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.head-score.hidden { display: none; }
.head-score .ms-score { font-size: 8px; gap: 4px; }
.head-score .ms-live { padding: 1px 5px; font-size: 6.5px; gap: 3px; }
/* A full week banked and a full week in flight is the widest this can get,
   and at 320px that ran into the wordmark. The wordmark yields, since the
   score is the thing you scrolled down reading. */
.home-header.compact.has-score .home-logo-img { height: 20px; }

.me-pill {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 4px;
  border: 1px solid rgba(5, 217, 232, 0.55);
  border-radius: 999px;
  background: rgba(5, 217, 232, 0.08);
  color: var(--neon-cyan);
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.04em;
  cursor: pointer;
  z-index: 4;
  transition: padding .18s ease, font-size .18s ease, gap .18s ease;
}
/* Follows the wordmark down, but only part way: the pill is a tap target
   and the logo is not, so it keeps enough of itself to hit. */
.home-header.compact .me-pill { gap: 5px; padding: 3px 7px 3px 3px; font-size: 9px; }
.home-header.compact .me-pill-avatar { width: 16px; height: 16px; font-size: 8px; }
.me-pill-avatar { transition: width .18s ease, height .18s ease, font-size .18s ease; }
@media (prefers-reduced-motion: reduce) {
  .me-pill, .me-pill-avatar { transition: none; }
}
.me-pill.hidden { display: none; }

/* The picks page carries the full countdown strip above the slate. Every
   other page gets this instead: the clock alone, mirroring the name pill
   on the opposite side of the header. */
.head-cd {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid rgba(255, 228, 94, 0.5);
  border-radius: 999px;
  background: rgba(255, 228, 94, 0.08);
  color: var(--neon-yellow);
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  letter-spacing: 0.04em;
  cursor: pointer;
  z-index: 4;
  transition: padding .18s ease, font-size .18s ease;
}
.head-cd.hidden { display: none; }
.head-cd.soon { border-color: rgba(255, 92, 138, 0.7); background: rgba(255, 92, 138, 0.12); color: var(--neon-pink); }
/* Games in progress, which outranks any countdown. */
.head-cd.live .hcd-dot { animation: hcd-pulse 1.1s ease-in-out infinite; }
.head-cd .hcd-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.head-cd.soon .hcd-dot { animation: hcd-pulse 1.1s ease-in-out infinite; }
@keyframes hcd-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.home-header.compact .head-cd { padding: 3px 7px; font-size: 7px; }
@media (max-width: 360px) { .head-cd { font-size: 7px; padding: 3px 7px; } }
@media (prefers-reduced-motion: reduce) {
  .head-cd { transition: none; }
  .head-cd.soon .hcd-dot { animation: none; }
}
.me-pill-avatar {
  width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--accent, var(--neon-purple)); color: #0a0014; font-size: 11px; font-weight: 700; flex: none;
}
@media (max-width: 360px) { .me-pill-name { display: none; } .me-pill { padding-right: 4px; } }

/* "You" markers: your name in pick lists, rankings and the picks table */
.bug-name-line.me { color: var(--neon-cyan); font-weight: 700; text-shadow: 0 0 5px rgba(5, 217, 232, 0.6); }
.bug-name-line.me::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--neon-cyan); box-shadow: 0 0 5px var(--neon-cyan); margin-right: 5px; vertical-align: middle; }
.ranking-row.is-me { border-color: var(--neon-cyan); box-shadow: 0 0 10px rgba(5, 217, 232, 0.25); }
.ranking-row.is-me .ranking-name { color: var(--neon-cyan); }
.ranking-row.is-me .ranking-name::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--neon-cyan); box-shadow: 0 0 5px var(--neon-cyan); margin-right: 6px; vertical-align: middle; }
.scoreboard-table tr.is-me td { background: rgba(5, 217, 232, 0.07); }
.scoreboard-table tr.is-me td.manager-col { color: var(--neon-cyan); }

.claim-btn.current { border-color: var(--neon-cyan); color: var(--neon-cyan); box-shadow: 0 0 8px rgba(5, 217, 232, 0.3); }
.claim-you { margin-left: auto; font-family: 'Press Start 2P', monospace; font-size: 6px; color: var(--neon-cyan); }

/* Stacked pick breakdown inside an expanded scorebug */
.bug-side { display: flex; flex-direction: column; gap: 3px; }
.bug-side + .bug-side { margin-top: 6px; }
.bug-side-head { font-family: 'Press Start 2P', monospace; font-size: 7px; color: var(--neon-cyan); padding-bottom: 2px; border-bottom: 1px solid rgba(5, 217, 232, 0.3); }
.bug-pick-line { display: flex; align-items: baseline; gap: 6px; font-size: 10px; line-height: 1.4; }
.bug-pick-label { flex: none; min-width: 52px; font-size: 8px; letter-spacing: .5px; text-transform: uppercase; color: var(--text-dim); }
.bug-pick-label em { font-style: normal; color: var(--neon-pink); }
.bug-names { min-width: 0; overflow-wrap: anywhere; color: var(--text); }
.bug-names.none { color: var(--text-dim); opacity: .5; }
.bug-sep { color: var(--text-dim); }
.bug-counts { font-family: 'Press Start 2P', monospace; font-size: 7px; color: var(--text-dim); flex: none; }

/* --- Scorebug breakdown v2: chips, header lines, count bars --- */
.bug-side-head { display: flex; align-items: baseline; gap: 6px; }
.bug-side-line { font-family: 'Press Start 2P', monospace; font-size: 7px; }
.bug-side-line.fav { color: var(--neon-pink); text-shadow: 0 0 4px var(--neon-pink); }
.bug-side-line.dog { color: var(--text-dim); }
.bug-pick-row { display: flex; align-items: flex-start; gap: 6px; }
.bug-pick-row.none { font-size: 9px; color: var(--text-dim); opacity: .6; }
.bug-pick-tag { flex: none; margin-top: 3px; padding: 1px 4px; border-radius: 3px; font-family: 'Press Start 2P', monospace; font-size: 6px; letter-spacing: .04em; }
.bug-pick-tag.ats { color: var(--neon-yellow); border: 1px solid rgba(255, 228, 94, .5); }
.bug-pick-tag.su { color: var(--neon-purple); border: 1px solid rgba(193, 60, 255, .5); }
.pick-chips { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.pick-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px 2px 2px; border: 1px solid var(--card-border); border-radius: 999px; background: rgba(255, 255, 255, .04); font-size: 10px; font-weight: 700; color: var(--text); white-space: nowrap; }
.pick-chip-av { width: 14px; height: 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent, var(--neon-purple)); color: #0a0014; font-size: 8px; font-weight: 700; flex: none; }
.pick-chip.me { border-color: var(--neon-cyan); background: rgba(5, 217, 232, .16); color: var(--neon-cyan); box-shadow: 0 0 6px rgba(5, 217, 232, .35); }
.bug-count-bars { display: inline-flex; width: 34px; height: 5px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, .08); flex: none; margin-right: 4px; }
.bug-count-bar { display: block; height: 100%; }
.bug-count-bar.away { background: var(--neon-cyan); }
.bug-count-bar.home { background: var(--neon-pink); }
.bug-prob-strip { display: flex; height: 3px; border-radius: 2px; overflow: hidden; margin-top: 4px; background: rgba(255, 255, 255, .08); }
.bug-prob-strip span { display: block; height: 100%; }
.bug-prob-strip .away { background: var(--neon-cyan); }
.bug-prob-strip .home { background: var(--neon-pink); }

/* v2.1: pick type on its own line, chips flow full width beneath */
.bug-pick-group { display: flex; flex-direction: column; gap: 4px; }
.bug-pick-group + .bug-pick-group { margin-top: 4px; }
.bug-pick-group.none { font-size: 9px; color: var(--text-dim); opacity: .6; }
.bug-pick-tag { align-self: flex-start; margin-top: 0; }
.bug-side-head { padding-bottom: 3px; }
.bug-side + .bug-side { margin-top: 10px; }
.pick-chip { font-size: 9px; padding: 2px 6px 2px 2px; }
.pick-chip-av { width: 13px; height: 13px; font-size: 7px; }

/* Finished games in the picks table: badge on the logo, dimmed misses */
.pick-mark { position: relative; display: block; width: 22px; margin: 0 auto; }
.pick-cell.incorrect .pick-cell-logo { opacity: .35; filter: grayscale(.6); }
.pick-cell.incorrect .pick-cell-spread { opacity: .5; }
.pick-cell.correct .pick-cell-spread { color: var(--neon-green); text-shadow: 0 0 4px rgba(57, 255, 136, .5); }
.scoreboard-table th.final::after { content: ""; display: block; width: 14px; height: 2px; margin: 3px auto 0; background: var(--neon-green); box-shadow: 0 0 4px var(--neon-green); }
.scoreboard-table th.live::after { content: ""; display: block; width: 6px; height: 6px; margin: 2px auto 0; border-radius: 50%; background: #fff; box-shadow: 0 0 5px rgba(255, 255, 255, .8); }
.pick-cell-pts { display: none; }

.updated-stamp { display: block; margin: 4px auto 10px; background: none; border: 0; color: var(--text-dim); font-family: 'Orbitron', sans-serif; font-size: 9px; letter-spacing: .04em; cursor: pointer; }
.updated-stamp.busy { color: var(--neon-cyan); }

.pick-cell.correct .pick-mark { filter: drop-shadow(0 0 4px rgba(57, 255, 136, .6)); }
.pick-cell.incorrect .pick-cell-logo { opacity: .28; filter: grayscale(.8); }
/* Live lean: soft ring around the logo while the game is in progress */
.pick-cell.lean-hit .pick-mark::after, .pick-cell.lean-miss .pick-mark::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px dashed; pointer-events: none; }
.pick-cell.lean-hit .pick-mark::after { border-color: rgba(57, 255, 136, .8); }
.pick-cell.lean-miss .pick-mark::after { border-color: rgba(255, 32, 121, .7); }
.pick-cell.lean-miss .pick-cell-logo { opacity: .6; }
.scoreboard-table th.final { color: var(--neon-green); }
.scoreboard-table th.live { color: #fff; }

/* Badge tiers: +1 quiet green, +2 bright cyan, +3 gold pulse */
/* Live lean: a small dot at the logo's corner instead of a ring */
.pick-cell.lean-hit .pick-mark::after, .pick-cell.lean-miss .pick-mark::after { inset: auto -3px -3px auto; width: 7px; height: 7px; border: 0; border-radius: 50%; }
.pick-cell.lean-hit .pick-mark::after { background: var(--neon-green); box-shadow: 0 0 5px var(--neon-green); }
.pick-cell.lean-miss .pick-mark::after { background: var(--neon-pink); box-shadow: 0 0 5px var(--neon-pink); }
.pick-cell.lean-miss .pick-cell-logo { opacity: 1; }

/* Every collapsed bug reserves the strip row so rows stay level */
.bug-prob-strip.empty { background: transparent; }

/* Result pills under the logo (replaces the corner badges) */
.pick-pill { display: inline-block; margin-top: 3px; min-width: 22px; padding: 1px 5px; border-radius: 4px; font-family: 'Press Start 2P', monospace; font-size: 7px; line-height: 12px; text-align: center; }
.pick-pill.hit { background: rgba(57, 255, 136, .22); color: var(--neon-green); border: 1px solid rgba(57, 255, 136, .5); }
.pick-pill.miss { background: rgba(255, 32, 121, .18); color: var(--neon-pink); border: 1px solid rgba(255, 32, 121, .5); font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 9px; }
.pick-cell.correct .pick-mark { filter: none; }
.pick-cell.incorrect .pick-cell-logo { opacity: .4; filter: grayscale(.6); }
.pick-cell.correct .pick-cell-spread { display: none; }

/* Sticky name column always stacks above cell contents while scrolling */
.scoreboard-table td.manager-col { z-index: 3; }
.scoreboard-table th.manager-col { z-index: 4; }
.scoreboard-table th { z-index: 2; }
.pick-mark, .pick-pill, .pick-cell-spread { position: relative; z-index: 0; }

/* Rankings: tap a row to see that player's game-by-game picks */
.ranking-row { flex-direction: column; align-items: stretch; gap: 0; padding: 0; cursor: pointer; }
.ranking-main { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.ranking-caret { color: var(--neon-purple); font-size: 10px; margin-left: 2px; }
.ranking-row.open { border-color: var(--neon-purple); }
/* --- Rankings breakdown v3: GAME / PICK / PTS, arcade tags, readable body text --- */
.rank-detail { border-top: 1px solid var(--card-border); padding: 8px 10px 12px; display: flex; flex-direction: column; background: rgba(0, 0, 0, .28); font-family: 'Orbitron', system-ui, sans-serif; }
.rd-head, .rd-row { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr) 44px; column-gap: 8px; align-items: center; }
.rd-head { font-family: 'Press Start 2P', monospace; font-size: 6px; color: var(--neon-cyan); letter-spacing: .08em; padding: 0 0 6px; border-bottom: 1px solid rgba(5, 217, 232, .35); margin-bottom: 2px; }
.rd-head span:last-child { text-align: center; }
.rd-row { padding: 5px 0; border-bottom: 1px dashed rgba(193, 60, 255, .2); }
.rd-row:last-of-type { border-bottom: 0; }
.rd-game { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rd-gline { display: flex; align-items: center; gap: 6px; font-family: 'Press Start 2P', monospace; font-size: 6px; color: var(--text-dim); }
.rd-row.live .rd-gline { color: #fff; }
.rd-row.final .rd-gline { color: var(--neon-green); }
.rd-tag { font-family: 'Press Start 2P', monospace; font-size: 5.5px; padding: 2px 4px; border-radius: 3px; letter-spacing: .04em; white-space: nowrap; }
/* Brightness is the scale: white is happening now, green is done, dim is
   waiting. Red is not on it, because red is a miss. */
.rd-tag.final { color: var(--neon-green); border: 1px solid rgba(57, 255, 136, .5); }
.rd-tag.live { color: #fff; border: 1px solid rgba(255, 255, 255, .55); }
.rd-tag.wait, .rd-tag.time { color: var(--text-dim); border: 1px solid var(--card-border); }
.rd-matchup { display: grid; grid-template-columns: minmax(0, max-content) auto; justify-content: start; column-gap: 10px; row-gap: 1px; font-size: 11px; font-weight: 700; color: var(--text); line-height: 1.25; }
.rd-matchup .rd-tm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-matchup .rd-tm.home::before { content: "@ "; color: var(--text-dim); font-weight: 500; }
.rd-matchup .rd-sc { min-width: 20px; font-variant-numeric: tabular-nums; color: var(--text); text-align: right; }
.rd-matchup .rd-sc.win { color: var(--neon-green); }
.rd-matchup .rd-tm.picked { color: var(--neon-cyan); }
.rd-pick { min-width: 0; display: flex; }
.rd-pickcard { display: flex; flex-direction: column; gap: 3px; min-width: 0; max-width: 100%; padding: 5px 8px 5px 6px; border: 1px solid var(--card-border); border-radius: 8px; background: rgba(255, 255, 255, .04); }
.rd-pickcard.hidden-pick, .rd-pickcard.nopick { justify-content: center; color: var(--text-dim); font-family: 'Press Start 2P', monospace; font-size: 7px; padding: 8px; border-style: dashed; }
/* On a game that is over, no pick is a loss, not a pending state. */
.rd-pickcard.nopick.lost { color: var(--neon-pink); border-color: rgba(255, 92, 138, .45); }
.rd-pickteam { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 11px; font-weight: 700; }
.rd-logo { width: 18px; height: 18px; object-fit: contain; flex: none; }
.rd-team { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-pickmeta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rd-mode { font-family: 'Press Start 2P', monospace; font-size: 6px; padding: 2px 4px; border-radius: 3px; white-space: nowrap; }
.rd-mode.ats { color: var(--neon-yellow); border: 1px solid rgba(255, 228, 94, .5); }
.rd-mode.su { color: var(--neon-purple); border: 1px solid rgba(193, 60, 255, .5); }
.rd-mode-pt { margin-left: 5px; font-size: 7px; opacity: .75; }
.rd-result { text-align: center; }
.rd-pts { display: inline-block; min-width: 40px; padding: 5px 0; border-radius: 6px; font-family: 'Press Start 2P', monospace; font-size: 8px; text-align: center; }
.rd-pts.none { color: var(--text-dim); opacity: .5; }
.rd-pts.hit { background: rgba(57, 255, 136, .18); color: var(--neon-green); border: 1px solid rgba(57, 255, 136, .5); }
/* Only here. On the breakdown you are reading one manager's ten picks at
   once and what each was worth is the point, so the chip carries it. */
.rd-pts.hit2 { background: rgba(5, 217, 232, .18); color: var(--neon-cyan); border: 1px solid rgba(5, 217, 232, .6); }
.rd-pts.upset { background: rgba(255, 228, 94, .25); color: var(--neon-yellow); border: 1px solid var(--neon-yellow); }
.rd-pts.miss { background: rgba(255, 32, 121, .14); color: var(--neon-pink); border: 1px solid rgba(255, 32, 121, .5); }
/* Same idea on the breakdown: the tier gives the colour, .lean says the
   game has not finished. */
.rd-pts.lean { background: none; border-style: dashed; }
.rd-summary { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: flex-start; margin-top: 6px; padding-top: 7px; border-top: 1px solid rgba(5, 217, 232, .35); font-family: 'Press Start 2P', monospace; font-size: 6.5px; line-height: 1.6; color: var(--text-dim); }
.rd-summary b { color: var(--neon-green); font-weight: 400; }
.rd-summary .live { color: var(--text-meta); }

/* --- Picks: locked cards become scorebugs --- */
/* Live is said by the colour and the clock inside it. A blinking pill on
   every locked card was noise on a screen full of them. The saving pill
   below still blinks, because that one is a transient state you want to
   notice. */
.game-status.live { color: #fff; border: 1px solid rgba(255, 255, 255, .7); }
/* Finished, not won. Green here said "correct" on a card whose own
   sentence underneath said the pick lost. Yellow is what the board already
   uses for a final, so the two screens agree. */
.game-status.final { color: var(--neon-yellow); border: 1px solid rgba(255, 228, 94, .6); }
.locked-result { display: flex; flex-direction: column; gap: 4px; padding: 6px 2px 2px; }
.lr-team { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; align-items: center; column-gap: 8px; padding: 6px 8px; border-radius: 8px; border: 1px solid transparent; }
.lr-team.picked { border-color: rgba(5, 217, 232, .55); background: rgba(5, 217, 232, .1); box-shadow: inset 3px 0 0 var(--neon-cyan); }
.lr-logo { width: 26px; height: 26px; object-fit: contain; }
.lr-name { display: flex; align-items: baseline; gap: 5px; font-size: 13px; font-weight: 700; min-width: 0; overflow: hidden; white-space: nowrap; }
.lr-name .tm-rank { font-size: 9px; }
.lr-team.picked .lr-name { color: var(--neon-cyan); }
/* The bet itself, on the row it belongs to: which side, what number,
   what it pays. */
.lr-bet { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 999px; border: 1px solid rgba(5, 217, 232, .6); background: rgba(5, 217, 232, .12); font-family: 'Orbitron', system-ui, sans-serif; font-weight: 800; font-size: 12px; color: var(--neon-cyan); white-space: nowrap; }
/* What the pick is worth, not how it went, so it stays quiet. Yellow made
   it a third coloured thing on a card that already colours the result
   sentence and the points pill. */
.lr-bet-pts { font-family: 'Press Start 2P', monospace; font-size: 6px; color: var(--text-meta); letter-spacing: .04em; }
.lr-score { font-family: 'Press Start 2P', monospace; font-size: 15px; color: var(--text); min-width: 34px; text-align: right; }
.locked-result.live .lr-score { color: var(--neon-yellow); text-shadow: 0 0 6px rgba(255, 228, 94, .5); }
.lr-score.win { color: var(--neon-green); text-shadow: 0 0 6px rgba(57, 255, 136, .6); }
.lr-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 8px 3px; margin-top: 3px; border-top: 1px dashed rgba(193, 60, 255, .25); }
.lr-lines { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lr-outcome { font-size: 11px; font-weight: 700; color: var(--text); }
.lr-outcome.hit { color: var(--neon-green); }
.lr-outcome.miss { color: var(--neon-pink); }
.lr-foot .rd-pts { flex: none; min-width: 56px; }
.lr-foot.none { justify-content: center; font-family: 'Press Start 2P', monospace; font-size: 7px; color: var(--text-dim); padding-top: 8px; }
.lr-mode-unused { font-family: 'Press Start 2P', monospace; font-size: 6.5px; color: var(--neon-yellow); border: 1px solid rgba(255, 228, 94, .5); border-radius: 3px; padding: 3px 5px; }
.locked-result .rd-pts { min-width: 44px; }

/* --- Scores: All Picks toggle --- */
.all-picks-toggle { background: none; border: 0; cursor: pointer; padding: 6px 0; width: 100%; font-family: inherit; }
.all-picks-caret { display: inline-block; margin-left: 4px; transition: transform .2s; }
.all-picks-toggle.open .all-picks-caret { transform: rotate(180deg); }

/* --- Leaderboard: arcade high score table --- */
.rankings-list { gap: 0; background: rgba(0, 0, 0, .35); border: 2px solid var(--card-border); border-radius: 10px; padding: 6px 4px; }
.rankings-list::before { content: "RANK · PLAYER · SCORE"; display: block; text-align: center; font-family: 'Press Start 2P', monospace; font-size: 6.5px; color: var(--neon-pink); letter-spacing: .12em; padding: 4px 0 8px; border-bottom: 1px dashed rgba(255, 32, 121, .35); margin-bottom: 4px; }
.ranking-row { background: transparent; border: 2px solid transparent; border-radius: 8px; }
.ranking-row + .ranking-row { margin-top: 2px; }
.ranking-row.rank-1 { border-color: rgba(255, 228, 94, .55); background: rgba(255, 228, 94, .06); box-shadow: none; }
.ranking-row.is-me { border-color: rgba(5, 217, 232, .5); box-shadow: none; background: rgba(5, 217, 232, .06); }
.ranking-row.open { border-color: var(--neon-purple); background: rgba(193, 60, 255, .06); }
.ranking-main { padding: 9px 10px; gap: 8px; }
.ranking-place { width: 34px; font-size: 9px; color: var(--neon-yellow); }
.ranking-row:nth-child(n+5) .ranking-place { color: var(--text-dim); }
.ranking-name { flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-family: 'Press Start 2P', monospace; font-size: 9px; font-weight: 400; color: var(--text); letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Name and its trophies share a line inside the (column) name cell; the
   name is the part that ellipsizes, the trophies never shrink. */
.rank-nameline { display: flex; align-items: center; gap: 4px; min-width: 0; }
.rank-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-trophies { flex: none; font-size: 10px; line-height: 1; letter-spacing: -1px; }
.rank-trophy-x { font-family: 'Press Start 2P', monospace; font-size: 7px; color: var(--neon-yellow); letter-spacing: 0; margin-left: 1px; }

.ranking-name .ranking-lock { font-family: 'Orbitron', system-ui, sans-serif; font-size: 8px; font-weight: 700; color: var(--text-dim); letter-spacing: .06em; }
.ranking-row.is-me .ranking-name::before { display: none; }
.ranking-row.is-me .ranking-name { color: var(--neon-cyan); }
.ranking-dots { flex: 1; height: 0; margin: 0 2px; border-bottom: 2px dotted rgba(244, 240, 255, .22); align-self: center; transform: translateY(-4px); }
.ranking-score { font-size: 13px; color: var(--neon-green); text-shadow: 0 0 6px var(--neon-green); min-width: 34px; text-align: right; }
.ranking-row.rank-1 .ranking-score { color: var(--neon-yellow); text-shadow: 0 0 8px var(--neon-yellow); }
.ranking-caret { width: 10px; text-align: right; }

/* --- Sync status on the pick pill --- */
.game-status.submitted.saving { color: var(--neon-yellow); border-color: var(--neon-yellow); animation: live-blink 1s ease-in-out infinite; }
.game-status.submitted.failed { color: var(--neon-pink); border-color: var(--neon-pink); }

/* --- Phone vs cloud mismatch repair --- */
.picks-mismatch { display: flex; flex-direction: column; gap: 6px; width: 100%; margin: 10px 0 4px; padding: 10px 12px; text-align: left; font-family: 'Orbitron', system-ui, sans-serif; font-size: 11px; color: var(--text); background: rgba(255, 32, 121, .08); border: 2px solid var(--neon-pink); border-radius: 8px; cursor: pointer; }
.picks-mismatch b { color: var(--neon-pink); }
.picks-mismatch span { color: var(--text-dim); line-height: 1.5; }
.picks-mismatch-cta { color: var(--neon-cyan) !important; font-weight: 700; }

.lr-when { font-size: 9px; color: var(--text-dim); font-weight: 500; }
.rd-when { font-size: 8px; color: var(--text-dim); letter-spacing: .04em; }

/* --- Four tabs --- */
.nav-btn { width: auto; flex: 1 1 0; min-width: 0; padding: 6px 2px; }
.nav-btn-label { font-size: 9px; }

/* --- Breakdown tiebreaker row --- */
.rd-tb { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding: 7px 0 6px; border-top: 1px solid rgba(255, 228, 94, .35); }
.rd-tb-label { font-family: 'Press Start 2P', monospace; font-size: 6px; line-height: 1.6; color: var(--neon-yellow); letter-spacing: .06em; }
.rd-tb-line { font-size: 11.5px; line-height: 1.4; color: var(--text-meta); }
.rd-tb-line b { font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.rd-tb-line b.exact { color: var(--neon-green); }
.rd-tb-line em { font-style: normal; color: rgba(255, 32, 121, .85); }
/* The unit rides small so the number carries the pill. */
.stake-u { font-size: 6px; font-weight: 700; opacity: .7; margin-left: 1px; }
/* The side you took, marked on the row rather than repeated in the pill. */
.bug-row.mine { border-left-color: var(--neon-cyan); }
.bug-row.mine .bug-team { color: var(--neon-cyan); }
.stake-dot { width: 5px; height: 5px; border-radius: 50%; flex: none; background: currentColor; }

/* No dot and no pulse. The card's ring already says the game is live, so
   the pill only has to say whether you are covering, which its colour
   does. Two live markers on one card, one of them blinking, was most of
   what made the board feel busy. */
/* Green paid, pink did not, and the number says how much. */
.stake.hit { border-color: rgba(0, 255, 143, .75); background: rgba(0, 255, 143, .16); color: var(--neon-green); }
/* Push pays nobody, so it cannot be gold now that gold means three
   points. Neutral and dashed, like the push pill everywhere else. */
.stake.push { border: 1px dashed rgba(244, 240, 255, .4); background: rgba(244, 240, 255, .08); color: var(--text-dim); }
/* No strikethrough. A line across Orbitron at 10px does not read as
   "crossed out", it reads as a broken glyph, and the pill says 0 now
   anyway. */
.stake.miss { border-color: rgba(255, 92, 138, .5); background: rgba(255, 92, 138, .1); color: var(--neon-pink); }
/* Still being played: same colour, dashed edge, no fill. Comes last so it
   overrides the tier's solid border without touching its colour. */
.stake.lean { background: none; border-style: dashed; }

/* Points still in flight, beside the banked total in the score strip. */
.ms-live { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px; border: 1px solid rgba(0, 255, 143, .6); background: rgba(0, 255, 143, .1); font-family: 'Press Start 2P', monospace; font-size: 7px; color: var(--neon-green); letter-spacing: .04em; }
/* The dot stays as the marker for points still in flight; the pulse does
   not. Nothing on this board blinks now. */

/* A board running on the last copy the Worker actually served. */
.updated-stamp.stale { color: var(--neon-pink); }

/* A game that kicked off with nothing submitted is a settled zero. */
.pick-cell.miss-none { opacity: .85; }
.scorebug.is-live .bug-tv { opacity: .6; }

.bug-head .stake + .bug-caret { margin-left: 4px; }

/* --- 1UP score strip --- */
.my-score { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 6px auto 12px; padding: 8px 14px; width: fit-content; max-width: 100%; border: 2px solid var(--neon-cyan); border-radius: 8px; background: rgba(5, 217, 232, .06); box-shadow: 0 0 12px rgba(5, 217, 232, .25); font-family: 'Press Start 2P', monospace; font-size: 9px; color: var(--text); cursor: pointer; white-space: nowrap; }
.my-score.hidden { display: none; }
.ms-name { color: var(--neon-cyan); }
.ms-score, .ms-rank { display: inline-flex; align-items: baseline; gap: 6px; }
.ms-label { font-size: 6px; color: var(--text-dim); letter-spacing: .08em; }
.ms-score { color: var(--neon-green); text-shadow: 0 0 6px var(--neon-green); }
.ms-rank { color: var(--neon-yellow); }

/* One line of standings on the picks screen. Same grammar as the board's
   score strip, so the two read as the same object at two sizes. */
.picks-standing {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  background: rgba(255, 255, 255, .035);
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.picks-standing.hidden { display: none; }
.ps-rank { color: var(--neon-yellow); }
.ps-score { color: var(--neon-green); text-shadow: 0 0 6px var(--neon-green); }
/* The gap to whoever matters sits at the right edge, away from your own
   numbers, so the two do not read as one figure. */
.ps-label { margin-left: auto; font-size: 6.5px; letter-spacing: .08em; color: var(--text-dim); }
.ps-who { color: var(--neon-cyan); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ps-gap { flex: none; padding: 2px 6px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); font-size: 8px; color: var(--text-meta); }
@media (max-width: 340px) {
  .picks-standing { font-size: 8px; gap: 6px; }
  .ps-label { font-size: 6px; }
}

/* --- Scoreboard top: tighter stack --- */
#scoreboard-screen .wrap { gap: 8px; }
/* The board starts at the top of the screen. The header is right above
   it, so 24px of nothing in between read as a mistake rather than as
   air. */
#scoreboard-screen { padding-top: 10px; }
#scoreboard-screen .updated-stamp { margin: 0 auto 2px; }
#scoreboard-screen .my-score { margin: 2px auto 4px; }
#scoreboard-screen .updated-stamp.hidden { display: none; }
#scoreboard-screen .section-heading { margin-top: 22px; }
#scoreboard-screen .all-picks-toggle { margin-top: 16px; }

/* Games that have not kicked off sit back at 45% fade */
.scorebug.upcoming { opacity: .78; }
.scorebug.upcoming .bug-score { opacity: 1; }

/* While anything is live, only live games sit at full brightness */
.bug-grid.has-live .scorebug:not(.is-live) { opacity: .78; }

/* --- Week high score readout --- */
.week-champ { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 2px auto 6px; padding: 10px 12px 12px; width: 100%; box-sizing: border-box; border: 2px solid rgba(255, 228, 94, .75); border-radius: 12px; background: linear-gradient(180deg, rgba(255, 228, 94, .12), rgba(255, 228, 94, .03) 70%); box-shadow: 0 0 14px rgba(255, 228, 94, .28), inset 0 0 18px rgba(255, 228, 94, .07); font-family: 'Press Start 2P', monospace; text-align: center; animation: wc-frame 2.8s ease-in-out infinite; }
.week-champ.hidden { display: none; }
.wc-label { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; font-size: 6.5px; color: var(--neon-yellow); opacity: .85; letter-spacing: .18em; }
.wc-rule { flex: 1; max-width: 72px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 228, 94, .6)); }
.wc-rule:last-child { background: linear-gradient(90deg, rgba(255, 228, 94, .6), transparent); }
.wc-line { display: flex; align-items: center; gap: 14px; }
.wc-trophy { width: 16px; height: 16px; fill: var(--neon-yellow); filter: drop-shadow(0 0 4px rgba(255, 228, 94, .8)); animation: wc-breathe-fill 2.8s ease-in-out infinite; }
.wc-name { font-size: 16px; color: var(--neon-yellow); text-shadow: 0 0 8px rgba(255, 228, 94, .55); animation: wc-breathe 2.8s ease-in-out infinite; }
.wc-pts { font-size: 16px; color: var(--neon-green); text-shadow: 0 0 8px rgba(57, 255, 136, .5); }
.wc-pts small { font-size: 7px; margin-left: 6px; color: var(--text-dim); letter-spacing: .1em; }
@keyframes wc-frame { 0%, 100% { box-shadow: 0 0 10px rgba(255, 228, 94, .22), inset 0 0 18px rgba(255, 228, 94, .06); border-color: rgba(255, 228, 94, .6); } 50% { box-shadow: 0 0 22px rgba(255, 228, 94, .5), inset 0 0 22px rgba(255, 228, 94, .12); border-color: rgba(255, 228, 94, 1); } }
@keyframes wc-breathe-fill { 0%, 100% { filter: drop-shadow(0 0 2px rgba(255, 228, 94, .5)); } 50% { filter: drop-shadow(0 0 7px rgba(255, 228, 94, 1)); } }
@media (prefers-reduced-motion: reduce) { .week-champ, .wc-trophy, .wc-name { animation: none; } }
@keyframes wc-breathe { 0%, 100% { text-shadow: 0 0 6px rgba(255, 228, 94, .4); } 50% { text-shadow: 0 0 14px rgba(255, 228, 94, .9), 0 0 24px rgba(255, 228, 94, .35); } }

/* --- Your strip caps a cyan panel around the week's scores --- */
#scoreboard-screen .my-score { width: 100%; margin: 2px 0 0; border: 1px solid rgba(255, 255, 255, .12); border-bottom: 1px solid rgba(255, 255, 255, .08); border-radius: 10px 10px 0 0; background: rgba(255, 255, 255, .035); box-shadow: none; }
/* One status row instead of three centred lines. Your standing reads from
   the left, the board's own state from the right, and the row finally
   uses the width the grid below it uses. */
#scoreboard-screen .my-score { justify-content: flex-start; gap: 10px; padding: 7px 10px; }
.ms-state { margin-left: auto; font-size: 7px; letter-spacing: .08em; color: var(--neon-yellow); }
.ms-state.kick { color: var(--text-dim); }
.ms-state.kick .ms-kick { font-weight: 400; color: var(--neon-cyan); }
.ms-refresh {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  /* The row is 33px and the clock is 10px type, so the button stretches
     back over the row's own padding to take the whole height as its tap
     target rather than offering a 17px one. */
  margin-block: -7px;
  padding: 7px 2px 7px 10px;
  border: 0;
  background: none;
  color: var(--text-meta);
  font-family: 'Orbitron', system-ui, sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .02em;
  cursor: pointer;
}
.ms-state + .ms-refresh { margin-left: 0; }
.ms-cyc { font-size: 11px; line-height: 1; opacity: .75; }
.ms-refresh.stale { color: var(--neon-yellow); }
.ms-refresh.busy .ms-cyc { animation: ms-spin .8s linear infinite; }
@keyframes ms-spin { to { transform: rotate(360deg); } }
/* The frame around the board is structure, so it stays a hairline. Cyan
   here fought the red on a live card, which is the one thing that should
   win, and diluted the cyan that means "the side you took". */
#scoreboard-screen .my-score + .live-scores-list { margin-top: 0; padding: 6px; border: 1px solid rgba(255, 255, 255, .12); border-top: 0; border-radius: 0 0 10px 10px; background: rgba(255, 255, 255, .015); }
#scoreboard-screen .my-score.hidden + .live-scores-list { padding: 0; border: 0; border-radius: 0; box-shadow: none; }
#scoreboard-screen .wrap > .my-score + .live-scores-list { margin-top: -8px; }
#scoreboard-screen .my-score + .live-scores-list .bug-grid { gap: 6px; }

/* Push on the spread: nobody scores */
.pick-pill.push, .rd-pts.push { background: rgba(244, 240, 255, .08); color: var(--text-dim); border: 1px dashed rgba(244, 240, 255, .4); }

/* --- Category pills in the expanded scorebug --- */
.bug-pick-tagline { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; margin-top: 3px; }
.bug-pick-tagline .bug-pick-tag { margin-top: 0; }
.bug-pick-tagline .pick-pill { flex: none; margin: 0; min-width: 26px; padding: 0 5px; font-size: 6px; line-height: 13px; height: 15px; box-sizing: border-box; text-align: center; }
.bug-pick-tagline .pick-pill.miss { font-size: 8px; line-height: 13px; }
.bug-pick-tagline .bug-pick-worth { flex: none; }
.bug-pick-worth { font-family: 'Orbitron', system-ui, sans-serif; font-size: 7px; font-weight: 700; color: var(--text-dim); letter-spacing: .06em; }

/* --- Commissioner slate editor (#admin) --- */
.admin-intro { color: var(--text-dim); font-size: 12px; line-height: 1.6; margin: 0 0 4px; }
.admin-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.admin-field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 130px; min-width: 0; font-family: 'Press Start 2P', monospace; font-size: 6.5px; color: var(--neon-cyan); letter-spacing: .08em; }
.admin-field.small { flex: 0 0 88px; }
.admin-field input { padding: 9px 10px; border-radius: 8px; border: 2px solid var(--card-border); background: rgba(0, 0, 0, .4); color: var(--text); font-family: 'Orbitron', system-ui, sans-serif; font-size: 16px; }
.admin-btn { -webkit-tap-highlight-color: transparent; touch-action: manipulation; min-height: 44px; padding: 10px 14px; border-radius: 8px; border: 2px solid var(--neon-cyan); background: rgba(5, 217, 232, .08); color: var(--neon-cyan); font-family: 'Press Start 2P', monospace; font-size: 8px; cursor: pointer; }
.admin-btn:disabled { opacity: .35; cursor: not-allowed; }
.admin-btn.primary { border-color: var(--neon-green); color: var(--neon-green); background: rgba(57, 255, 136, .1); }
.admin-status { min-height: 16px; font-family: 'Orbitron', system-ui, sans-serif; font-size: 11px; color: var(--text-dim); }
.admin-status.ok { color: var(--neon-green); }
.admin-status.bad { color: var(--neon-pink); }
.admin-when { font-family: 'Press Start 2P', monospace; font-size: 6.5px; line-height: 1.7; color: var(--neon-pink); letter-spacing: .06em; }
.admin-when:empty { display: none; }
.admin-week { display: flex; align-items: flex-end; gap: 8px; }
.admin-week .admin-field { flex: 1 1 auto; }
.admin-btn.icon { flex: none; width: 44px; padding: 0; font-size: 14px; line-height: 1; }
.admin-btn.wide { width: 100%; justify-content: center; margin-top: 4px; }
.admin-btn.link { border: 0; background: none; padding: 8px 6px; min-height: 36px; font-size: 7px; color: var(--neon-purple); }
.admin-season-note { font-family: 'Press Start 2P', monospace; font-size: 6px; color: var(--neon-yellow); letter-spacing: .06em; }
.admin-season-note:empty { display: none; }
.admin-filter-row { display: flex; align-items: center; gap: 6px; }
.admin-filter-row .admin-search { flex: 1 1 auto; }
.admin-search { display: block; }
.admin-search input { -webkit-appearance: none; appearance: none; width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 8px; border: 2px solid var(--card-border); background: rgba(0, 0, 0, .4); color: var(--text); font-family: 'Orbitron', system-ui, sans-serif; font-size: 16px; }
.admin-search input:focus { outline: none; border-color: var(--neon-cyan); }
.admin-search input::-webkit-search-cancel-button { -webkit-appearance: none; width: 18px; height: 18px; background: var(--text-dim); border-radius: 50%; -webkit-mask: linear-gradient(45deg, transparent 44%, #000 44%, #000 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, #000 44%, #000 56%, transparent 56%); cursor: pointer; }
.admin-listhead { display: flex; justify-content: space-between; font-family: 'Press Start 2P', monospace; font-size: 6.5px; color: var(--text-dim); letter-spacing: .08em; padding-bottom: 4px; border-bottom: 1px solid var(--card-border); }
.admin-games { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; align-content: start; gap: 6px; padding: 4px 0 12px; }
.admin-games .admin-day, .admin-games .admin-empty { grid-column: 1 / -1; }
@media (max-width: 359px) { .admin-games { grid-template-columns: minmax(0, 1fr); } }
/* The whole week is on the page, so the save controls ride along at the
   bottom rather than sitting past 86 games. */
.admin-foot .admin-status { order: -1; flex-basis: 100%; margin: 0; }
.admin-foot .admin-status:empty { display: none; }
.admin-foot { position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); margin-top: 6px; border-top: 2px solid var(--card-border); background: rgba(10, 3, 24, .96); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.admin-foot .admin-count { margin-left: auto; font-family: 'Press Start 2P', monospace; font-size: 7px; color: var(--neon-cyan); }
.admin-empty { color: var(--text-dim); font-size: 11px; padding: 12px 0; text-align: center; }
.admin-game { border: 2px solid var(--card-border); border-radius: 8px; background: rgba(0, 0, 0, .25); }
.admin-game.on { border-color: var(--neon-cyan); background: rgba(5, 217, 232, .07); }
.admin-game.on .admin-check { border-color: var(--neon-green); background: rgba(0, 255, 143, .12); }
.admin-pick { -webkit-tap-highlight-color: transparent; touch-action: manipulation; -webkit-user-select: none; user-select: none; min-height: 48px; height: 100%; align-content: start; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'logos chk' 'teams teams' 'odds odds' 'time time'; align-items: center; column-gap: 8px; row-gap: 3px; width: 100%; padding: 9px 10px; background: none; border: 0; color: var(--text); text-align: left; cursor: pointer; }
.admin-check { grid-area: chk; justify-self: end; width: 18px; height: 18px; display: grid; place-items: center; border: 2px solid var(--card-border); border-radius: 5px; font-family: 'Press Start 2P', monospace; font-size: 8px; color: var(--neon-green); }
.admin-logos { grid-area: logos; display: flex; align-items: center; gap: 2px; }
.admin-logos img, .admin-logos i { width: 19px; height: 19px; object-fit: contain; }
.admin-game:not(.on) .admin-logos { filter: grayscale(.35); opacity: .85; }
.admin-teams { grid-area: teams; font-family: 'Orbitron', system-ui, sans-serif; font-weight: 700; font-size: 12px; line-height: 1.25; overflow-wrap: anywhere; }
.admin-time { grid-area: time; font-size: 8.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-line input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--neon-cyan); flex: none; }
.admin-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 8px 8px; }
.admin-odds { grid-area: odds; justify-self: start; font-family: 'Orbitron', system-ui, sans-serif; font-weight: 700; font-size: 11px; color: var(--neon-yellow); letter-spacing: .04em; white-space: nowrap; }
.admin-odds.none { color: var(--text-dim); font-weight: 400; }
.admin-game.noline .admin-pick { opacity: .45; }
.admin-tb { -webkit-tap-highlight-color: transparent; touch-action: manipulation; min-height: 40px; padding-right: 6px; flex-direction: row !important; font-size: 8px !important; align-items: center; gap: 6px !important; color: var(--neon-purple) !important; }
.admin-check-row input { width: 22px; height: 22px; accent-color: var(--neon-cyan); }
.admin-check-row { -webkit-tap-highlight-color: transparent; touch-action: manipulation; min-height: 44px; display: flex; align-items: center; gap: 8px; font-family: 'Orbitron', system-ui, sans-serif; font-size: 12px; color: var(--text-dim); }
.admin-field select { -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--neon-cyan) 50%), linear-gradient(135deg, var(--neon-cyan) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding: 9px 34px 9px 10px; border-radius: 8px; border: 2px solid var(--card-border); background: rgba(0, 0, 0, .4); color: var(--text); font-family: 'Orbitron', system-ui, sans-serif; font-size: 16px; }
.admin-day { position: sticky; top: 0; z-index: 1; padding: 6px 2px 4px; background: #0a0014; font-family: 'Press Start 2P', monospace; font-size: 6.5px; color: var(--neon-pink); letter-spacing: .1em; }

/* Recommended-games pop up. Full height on a phone with the action bar
   pinned, so the list scrolls under it instead of past the thumb. */
.sg-scrim { position: fixed; inset: 0; height: 100vh; height: 100dvh; z-index: 80; display: flex; align-items: flex-end; justify-content: center; background: rgba(4, 1, 12, .82); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sg-card { display: flex; flex-direction: column; width: min(560px, 100%); min-height: 0; max-height: 92vh; max-height: 92dvh; border: 2px solid var(--neon-cyan); border-radius: 14px 14px 0 0; background: #0a0316; box-shadow: 0 -8px 40px rgba(5, 217, 232, .18); }
.sg-head { padding: 14px 14px 8px; font-family: 'Press Start 2P', monospace; font-size: 10px; color: var(--neon-yellow); letter-spacing: .08em; text-align: center; }
.sg-intro { margin: 0 14px 10px; font-size: 11px; line-height: 1.55; color: var(--text-dim); }
.sg-list { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 14px 8px; display: flex; flex-direction: column; gap: 6px; }
.sg-row { -webkit-tap-highlight-color: transparent; touch-action: manipulation; -webkit-user-select: none; user-select: none; width: 100%; text-align: left; color: var(--text); cursor: pointer; display: grid; grid-template-columns: 24px minmax(0, 1fr) 22px; gap: 8px; align-items: start; padding: 8px 10px; border: 2px solid var(--card-border); border-radius: 8px; background: rgba(255, 255, 255, .02); }
.sg-row.on { border-color: var(--neon-cyan); background: rgba(5, 217, 232, .08); }
.sg-row:not(.on) { opacity: .5; }
.sg-check { grid-column: 3; grid-row: 1; justify-self: end; width: 20px; height: 20px; display: grid; place-items: center; border: 2px solid var(--card-border); border-radius: 5px; font-family: 'Press Start 2P', monospace; font-size: 8px; color: transparent; }
.sg-row.on .sg-check { border-color: var(--neon-green); background: rgba(0, 255, 143, .12); color: var(--neon-green); }
.sg-body { grid-column: 2; }
.sg-num { font-family: 'Press Start 2P', monospace; font-size: 9px; color: var(--neon-cyan); padding-top: 3px; }
.sg-teams { font-family: 'Orbitron', system-ui, sans-serif; font-weight: 700; font-size: 13px; }
.sg-meta { font-size: 10px; color: var(--neon-yellow); margin-top: 2px; }
.sg-why { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.sg-why span { padding: 2px 6px; border-radius: 999px; border: 1px solid rgba(185, 103, 255, .5); font-family: 'Press Start 2P', monospace; font-size: 5.5px; color: var(--neon-purple); letter-spacing: .06em; }
.ov-scrim { z-index: 90; }
.ov-card { border-color: var(--neon-yellow); }
.ov-body { padding: 0 14px 10px; }
.ov-lead { margin: 8px 0; font-size: 12px; line-height: 1.5; color: var(--text); }
.ov-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ov-col { padding: 8px; border-radius: 8px; border: 2px solid var(--card-border); font-family: 'Orbitron', system-ui, sans-serif; font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
.ov-col.out { border-color: rgba(255, 92, 138, .55); color: var(--neon-pink); }
.ov-col.in { border-color: rgba(0, 255, 143, .5); color: var(--neon-green); }
.ov-head { font-family: 'Press Start 2P', monospace; font-size: 6.5px; letter-spacing: .08em; margin-bottom: 6px; color: var(--text-dim); }
.sg-foot { display: flex; gap: 10px; align-items: center; padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); border-top: 2px solid var(--card-border); background: #0a0316; }

/* The slate editor rides over the app rather than living on a page of its
   own. The app locks the document and scrolls #app-scroll, so the overlay
   has to be its own scroll container — that is what the standalone page
   used to get from the document. */
.admin-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: var(--nav-h); z-index: 40; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: var(--bg); padding-top: calc(14px + env(safe-area-inset-top)); }
/* The app owner's console: tabs over a scrolling body, in the same
   overlay shell as the slate editor. */
.console-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 0 4px; }
.console-tab { -webkit-tap-highlight-color: transparent; touch-action: manipulation; min-height: 34px; padding: 6px 9px; border: 2px solid var(--card-border); border-radius: 8px; background: rgba(0, 0, 0, .3); color: var(--text-dim); font-family: 'Press Start 2P', monospace; font-size: 6.5px; letter-spacing: .06em; cursor: pointer; }
.console-tab.active { border-color: var(--neon-cyan); color: var(--neon-cyan); background: rgba(5, 217, 232, .1); }
.console-body { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 12px; }

.con-summary { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 6px 0; font-family: 'Press Start 2P', monospace; font-size: 6.5px; color: var(--text-dim); letter-spacing: .06em; }
.con-summary .bad { color: var(--neon-pink); }
.con-summary .warn { color: #ffb347; }
.con-ok { font-size: 11px; color: var(--neon-green); padding: 2px 0 6px; }

.con-group { border: 1px solid var(--card-border); border-left-width: 3px; border-radius: 10px; background: rgba(0, 0, 0, .2); overflow: hidden; }
.con-group.bad { border-left-color: var(--neon-pink); }
.con-group-head {
  display: grid; grid-template-columns: minmax(0, 1fr) 14px; align-items: center; gap: 2px 10px;
  min-height: 44px; padding: 8px 10px; cursor: pointer; list-style: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.con-group-head::-webkit-details-marker { display: none; }
.con-group-head::after { content: "▸"; grid-column: 2; grid-row: 1 / span 3; justify-self: end; color: var(--neon-cyan); font-size: 11px; transition: transform .15s ease; }
.con-group[open] .con-group-head::after { transform: rotate(90deg); }
.con-group[open] .con-group-head { border-bottom: 1px solid var(--card-border); }
.cg-name { grid-column: 1; grid-row: 1; font-family: 'Press Start 2P', monospace; font-size: 9px; color: var(--neon-yellow); letter-spacing: .06em; }
.cg-counts { grid-column: 1; grid-row: 2; font-size: 10px; color: var(--text-dim); }
.cg-counts .bad { color: var(--neon-pink); }
.cg-counts .warn { color: #ffb347; }
.cg-last { grid-column: 1; grid-row: 3; font-size: 9px; color: var(--text-dim); opacity: .7; }
.con-group .con-row { border: 0; border-radius: 0; background: none; border-top: 1px solid rgba(255, 255, 255, .05); }
.con-group .con-row:first-of-type { border-top: 0; }
.con-group .con-row.bad { background: rgba(255, 92, 138, .07); }
@media (prefers-reduced-motion: reduce) { .con-group-head::after { transition: none; } }

.con-row { border: 1px solid var(--card-border); border-left-width: 3px; border-radius: 8px; padding: 7px 9px; background: rgba(0, 0, 0, .25); }
.con-row.bad { border-left-color: var(--neon-pink); }
.con-row.warn { border-left-color: #ffb347; }
.con-row-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 11px; }
.con-row-head b { font-family: 'Orbitron', system-ui, sans-serif; color: var(--neon-yellow); }
.con-row-head span { color: var(--text-dim); font-size: 10px; }
.con-line { font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.con-line.dim { color: var(--text-dim); font-size: 10px; }

/* One ledger row: outcome, game, the pick, what it paid. Fixed columns so
   ten managers' worth of rows read down rather than zig-zagging. */
.con-line.led {
  display: grid;
  grid-template-columns: 14px minmax(0, 1.35fr) minmax(0, 1fr) 22px;
  gap: 6px;
  align-items: baseline;
  padding: 2px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.led-mark { font-weight: 700; text-align: center; }
.led-game { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.led-pick { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.led-pts { text-align: right; font-variant-numeric: tabular-nums; }
.con-line.led.hit .led-mark, .con-line.led.hit .led-pts { color: var(--neon-green); }
.con-line.led.miss .led-mark { color: #ff6fa3; }
.con-line.led.miss .led-pick { color: var(--text-dim); }
.con-line.led.push .led-mark { color: var(--neon-yellow); }
.con-line.led.nopick { color: var(--text-dim); }
.con-line.led.nopick .led-mark { color: #ff6fa3; }
.con-tag { font-family: 'Press Start 2P', monospace; font-size: 6px; padding: 2px 4px; border-radius: 3px; border: 1px solid currentColor; }
.con-tag.bad { color: var(--neon-pink); }
.con-tag.warn { color: #ffb347; }
.con-tag.adm { color: var(--neon-cyan); }

.con-diag { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; font-size: 10px; color: var(--text-dim); line-height: 1.5; overflow-wrap: anywhere; }
.con-diag b { color: var(--neon-cyan); font-weight: 700; }
.con-actions { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; }

.con-modes { display: flex; flex-direction: column; gap: 6px; }
.con-mode { -webkit-tap-highlight-color: transparent; text-align: left; display: flex; flex-direction: column; gap: 3px; padding: 9px 11px; border: 2px solid var(--card-border); border-radius: 8px; background: rgba(0, 0, 0, .25); color: var(--text); cursor: pointer; }
.con-mode.on { border-color: var(--neon-green); background: rgba(57, 255, 136, .07); }
.con-mode-label { font-family: 'Press Start 2P', monospace; font-size: 8px; color: var(--neon-cyan); letter-spacing: .06em; }
.con-mode.on .con-mode-label { color: var(--neon-green); }
.con-mode-note { font-size: 10px; color: var(--text-dim); line-height: 1.45; }

/* Lineup preview: ten compact rows, logos + names + line, read-only. */
/* Only the preview's header carries a count, so only it goes to flex —
   the Suggest 10 header keeps its centred title. */
#admin-preview .sg-head { display: flex; align-items: center; gap: 8px; }
.lp-count { margin-left: auto; font-size: 7px; color: var(--neon-cyan); }
.lp-list { padding-top: 8px; gap: 4px; }
.lp-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'logos teams line' 'logos when line'; column-gap: 8px; row-gap: 1px; align-items: center; padding: 6px 9px; border: 2px solid var(--card-border); border-radius: 8px; background: rgba(255, 255, 255, .02); }
.lp-row.noline { border-color: rgba(255, 32, 121, .5); }
.lp-logos { grid-area: logos; display: flex; align-items: center; gap: 2px; }
.lp-logos img, .lp-logos i { width: 20px; height: 20px; object-fit: contain; }
.lp-teams { grid-area: teams; font-family: 'Orbitron', system-ui, sans-serif; font-weight: 700; font-size: 12px; line-height: 1.2; overflow-wrap: anywhere; }
.lp-at { color: var(--text-dim); font-weight: 500; font-size: 10px; }
.lp-tb { font-family: 'Press Start 2P', monospace; font-size: 6px; color: var(--neon-yellow); border: 1px solid var(--neon-yellow); border-radius: 3px; padding: 1px 3px; vertical-align: middle; }
.lp-line { grid-area: line; justify-self: end; font-family: 'Press Start 2P', monospace; font-size: 8px; color: var(--neon-yellow); white-space: nowrap; }
.lp-line.none { color: var(--neon-pink); }
.lp-when { grid-area: when; font-size: 8.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Owner logins, in the slate editor. */
.admin-owners { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; }
.admin-owners-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 359px) { .admin-owners-list { grid-template-columns: minmax(0, 1fr); } }
.admin-owner { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 2px solid var(--card-border); border-radius: 8px; background: rgba(0, 0, 0, .25); }
.admin-owner.on { border-color: var(--neon-green); background: rgba(57, 255, 136, .07); }
.ao-name { font-family: 'Orbitron', system-ui, sans-serif; font-weight: 700; font-size: 12px; }
.ao-state { font-size: 9px; color: var(--text-dim); margin-right: auto; }
.admin-owner.on .ao-state { color: var(--neon-green); }
.ao-reset { min-height: 30px; padding: 4px 8px; font-size: 7px; }

/* Owner code: claim a name, then sign in with it. */
.code-owner {
  align-self: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 13px;
  color: var(--neon-cyan);
  text-shadow: 0 0 8px var(--neon-cyan);
}

.code-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 2px solid var(--card-border);
  background: rgba(0, 0, 0, 0.4);
  color: var(--text);
  font-family: 'Orbitron', system-ui, sans-serif;
  font-size: 16px;
  text-align: center;
  letter-spacing: 0.08em;
}

.code-input:focus { outline: none; border-color: var(--neon-cyan); }

.code-status {
  min-height: 14px;
  font-size: 10px;
  text-align: center;
  color: var(--text-dim);
}

.code-status.bad { color: var(--neon-pink); }

/* The key gate rides above the editor overlay, not below it. */
.admin-gate { z-index: 45; }
.admin-gate-input { width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px; border-radius: 8px; border: 2px solid var(--card-border); background: rgba(0, 0, 0, .4); color: var(--text); font-family: 'Orbitron', system-ui, sans-serif; font-size: 16px; text-align: center; letter-spacing: .08em; }
.admin-gate-input:focus { outline: none; border-color: var(--neon-cyan); }
.admin-gate .admin-status { text-align: center; }

/* The nav stays reachable over the editor: any tab out of it is also the
   way out of it, so the Exit button at the foot is not the only door. */
body.admin-open .bottom-nav { z-index: 41; }
body.sheet-open .bottom-nav { display: none; }
body.sheet-open #admin-overlay { overflow: hidden; }
.admin-overlay .screen { display: block; min-height: 0; padding: 0 14px 24px; }
.admin-overlay .admin-game { display: flex; flex-direction: column; }

/* Unsynced picks are the one failure that can cost someone points, so it
   gets a banner that stays until the queue clears, not a badge that fades
   with the tap that caused it. */
.tb-required {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 0 8px; padding: 6px 2px 6px 10px;
  border-left: 2px solid rgba(255, 228, 94, .65);
  color: var(--text-meta); font-size: 11.5px; line-height: 1.4;
}
.tb-required.hidden { display: none; }
.tb-jump {
  flex: none; min-height: 32px; padding: 6px 10px; border-radius: 6px;
  border: 1px solid rgba(255, 228, 94, .6); background: transparent;
  color: var(--neon-yellow); font-family: 'Press Start 2P', monospace; font-size: 7px;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}

.sync-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 8px;
  padding: 10px 12px;
  border: 2px solid rgba(255, 92, 138, .7);
  border-radius: 10px;
  background: rgba(255, 92, 138, .1);
  color: var(--neon-pink);
  font-size: 12px;
  line-height: 1.45;
}
.sync-banner.hidden { display: none; }
.sync-banner b { color: #fff; }
.sync-banner .sb-text { flex: 1 1 180px; min-width: 0; }
.sync-banner .sb-retry {
  flex: none; min-height: 40px; padding: 8px 14px; border-radius: 8px;
  border: 2px solid var(--neon-pink); background: rgba(255, 92, 138, .16);
  color: #fff; font-family: 'Press Start 2P', monospace; font-size: 8px;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.sync-banner .sb-retry[disabled] { opacity: .5; cursor: default; }

/* The pot. Money is the one thing nobody should have to squint at, so the
   figures are plain numerals rather than the pixel font. */
.payouts-panel { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.payouts-panel.hidden { display: none; }
.pot-head { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pot-stat { display: flex; flex-direction: column; gap: 3px; padding: 8px 6px; border: 2px solid var(--card-border); border-radius: 8px; background: rgba(0, 255, 143, .05); text-align: center; }
.pot-stat b { font-family: 'Orbitron', system-ui, sans-serif; font-size: 15px; color: var(--neon-green); }
.pot-stat span { font-family: 'Press Start 2P', monospace; font-size: 5.5px; line-height: 1.6; color: var(--text-dim); letter-spacing: .05em; }
.pot-note { font-family: 'Press Start 2P', monospace; font-size: 6px; line-height: 1.8; color: var(--text-dim); letter-spacing: .05em; }
.pot-live { align-self: flex-start; padding: 3px 8px; border: 1px solid rgba(255, 228, 94, .5); border-radius: 999px; background: rgba(255, 228, 94, .08); color: var(--neon-yellow); font-family: 'Press Start 2P', monospace; font-size: 6.5px; letter-spacing: .06em; }
.pot-pts { display: flex; align-items: baseline; justify-content: flex-end; gap: 2px; }
.pot-pts b { font-weight: 700; }
/* The live marker keeps a slot on every row, so a column of numbers does
   not shuffle sideways depending on which rows have one. */
.pot-livemark { flex: none; width: 6px; font-style: normal; color: var(--neon-yellow); font-size: 13px; line-height: 0; }
.pot-warn { padding: 8px 10px; border: 2px solid rgba(255, 92, 138, .6); border-radius: 8px; background: rgba(255, 92, 138, .08); color: var(--neon-pink); font-size: 11px; line-height: 1.5; }
.pot-table { display: flex; flex-direction: column; border: 2px solid var(--card-border); border-radius: 10px; overflow: hidden; }
.pot-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 42px 52px 62px; align-items: center; gap: 6px; padding: 8px 8px; border-top: 1px solid rgba(255, 255, 255, .05); font-size: 12px; }
.pot-row:first-child { border-top: 0; }
.pot-row.head { font-family: 'Press Start 2P', monospace; font-size: 5.5px; color: var(--text-dim); letter-spacing: .06em; background: rgba(255, 255, 255, .03); }
/* The labels have to sit over their own numbers: PTS and EARNED are
   right aligned like their values, WON is centred like its trophies. */
.pot-row.head > :nth-child(3), .pot-row.head > :nth-child(5) { text-align: right; }
/* PTS values reserve a slot for the live marker, so its label carries the
   same trailing space and the two right edges line up. */
.pot-row.head > :nth-child(3) { padding-right: 8px; }
.pot-row.head > :nth-child(4) { text-align: center; }
.pot-row.me { background: rgba(5, 217, 232, .1); box-shadow: inset 3px 0 0 var(--neon-cyan); }
.pot-row.inmoney .pot-name { color: var(--neon-yellow); }
.pot-place { font-family: 'Press Start 2P', monospace; font-size: 7px; white-space: nowrap; color: var(--text-dim); }
.pot-name { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-family: 'Orbitron', system-ui, sans-serif; font-weight: 700; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pot-proj { font-family: 'Press Start 2P', monospace; font-size: 5.5px; color: var(--neon-purple); flex: none; }
.pot-pts { font-family: 'Orbitron', system-ui, sans-serif; font-weight: 700; text-align: right; }
.pot-won { font-size: 10px; text-align: center; white-space: nowrap; }
.pot-earned { font-family: 'Orbitron', system-ui, sans-serif; font-weight: 700; color: var(--neon-green); text-align: right; }
.pot-empty { font-size: 11px; color: var(--text-dim); text-align: center; padding: 4px 0; }
@media (max-width: 360px) { .pot-row { grid-template-columns: 20px minmax(0, 1fr) 38px 44px 56px; font-size: 11px; } }

/* Week recap: five cards, each with a logo, the people on it, and one
   big number. They deal in one at a time when the panel opens. */
.recap-panel { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.recap-panel.hidden { display: none; }
.recap-card { --c: var(--neon-cyan); display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px 10px 10px; border: 1px solid var(--card-border); border-radius: 10px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 10%, transparent), rgba(0, 0, 0, .25) 45%); box-shadow: inset 3px 0 0 var(--c);
  animation: recap-deal .45s cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: calc(var(--i, 0) * 110ms); }
.recap-card.hit { --c: var(--neon-green); }
.recap-card.miss { --c: var(--neon-pink); }
.recap-card.move { --c: var(--neon-cyan); }
.recap-card.split { --c: var(--neon-purple); }
.recap-card.tb { --c: var(--neon-yellow); }
.recap-card.me { border-color: color-mix(in srgb, var(--c) 55%, var(--card-border)); box-shadow: inset 3px 0 0 var(--c), 0 0 14px color-mix(in srgb, var(--c) 28%, transparent); }
@keyframes recap-deal { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .recap-card { animation: none; } }
.recap-art { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; }
.recap-logo { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(0, 0, 0, .6)); }
.recap-logo.blank { width: 44px; height: 44px; }
.recap-logo.arrow { display: flex; align-items: center; justify-content: center; font-family: 'Orbitron', sans-serif; font-size: 30px; color: var(--c); text-shadow: 0 0 10px var(--c); }
.recap-vs { display: flex; align-items: center; }
.recap-vs .recap-logo { width: 32px; height: 32px; }
.recap-vs .recap-logo + .recap-logo { margin-left: -12px; }
.recap-body { min-width: 0; }
.recap-head { display: flex; align-items: center; gap: 8px; font-family: 'Press Start 2P', monospace; font-size: 6.5px; letter-spacing: .12em; color: var(--c); margin-bottom: 5px; }
.recap-icon { width: 12px; height: 12px; fill: var(--c); flex: none; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--c) 60%, transparent)); }
/* Tighter above the recap: the heading was carrying the section margin
   and its own padding under a band that already has a bottom margin. */
#scoreboard-screen #recap-toggle { margin-top: 4px; padding-top: 2px; }
#scoreboard-screen .week-champ:not(.hidden) + #recap-toggle { margin-top: 0; }
.recap-you { padding: 2px 5px; border-radius: 999px; background: var(--c); color: #12002b; font-size: 5.5px; letter-spacing: .1em; }
.recap-main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13px; line-height: 1.25; }
.recap-main .pick-chip { font-size: 12px; }
.recap-pick { font-weight: 700; color: #fff; }
.recap-sub { font-size: 11px; line-height: 1.35; color: var(--text-meta); margin-top: 3px; }
.recap-stat { display: flex; flex-direction: column; align-items: center; min-width: 46px; padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, .08); }
.recap-stat b { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 22px; line-height: 1; color: var(--c); text-shadow: 0 0 10px color-mix(in srgb, var(--c) 60%, transparent); }
.recap-stat span { font-family: 'Press Start 2P', monospace; font-size: 5.5px; letter-spacing: .12em; color: var(--text-dim); margin-top: 5px; }
@media (max-width: 360px) { .recap-card { grid-template-columns: 44px minmax(0, 1fr) auto; } .recap-logo { width: 38px; height: 38px; } .recap-stat b { font-size: 19px; } }

/* Season stats: five small boards. */
.season-panel { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.season-panel.hidden { display: none; }
.ss-note { font-family: 'Press Start 2P', monospace; font-size: 6.5px; letter-spacing: .1em; color: var(--text-dim); text-align: center; padding: 2px 0 4px; }
.ss-card { --c: var(--neon-cyan); padding: 8px 10px 6px; border: 1px solid var(--card-border); border-radius: 10px; background: rgba(0, 0, 0, .25); box-shadow: inset 3px 0 0 var(--c); }
.ss-card.hit { --c: var(--neon-green); } .ss-card.upset { --c: var(--neon-pink); } .ss-card.split { --c: var(--neon-purple); } .ss-card.tb { --c: var(--neon-yellow); } .ss-card.move { --c: var(--neon-cyan); }
.ss-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-family: 'Press Start 2P', monospace; font-size: 6.5px; letter-spacing: .12em; color: var(--c); }
.ss-head small { font-family: 'Orbitron', sans-serif; font-size: 9px; letter-spacing: 0; color: var(--text-dim); text-align: right; }
.ss-row { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto 44px; align-items: center; gap: 8px; padding: 4px 0; font-size: 11px; border-top: 1px solid rgba(255, 255, 255, .05); }
.ss-row:first-of-type { border-top: 0; }
.ss-row.me .ss-name { color: var(--neon-cyan); }
.ss-row.lead .ss-name { color: #fff; }
.ss-row.lead .ss-rank { color: var(--c); }
.ss-gap { font-size: 10px; letter-spacing: .3em; color: var(--text-dim); text-align: center; padding: 1px 0; }
.ss-card.miss { --c: var(--neon-pink); }
.ss-row.none { display: block; color: var(--text-dim); font-size: 10.5px; }
.ss-rank { font-family: 'Press Start 2P', monospace; font-size: 6.5px; color: var(--text-dim); }
.ss-name { font-family: 'Press Start 2P', monospace; font-size: 7px; letter-spacing: .04em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-sub { font-size: 9.5px; color: var(--text-dim); white-space: nowrap; }
.ss-val { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 14px; color: var(--c); text-align: right; }

/* The standing rule, one quiet line at the top of the board. */
.rule-note { font-family: 'Press Start 2P', monospace; font-size: 6px; letter-spacing: .14em; color: var(--text-dim); text-align: center; padding: 2px 0 8px; }

/* The Boner Amendment: pinball skull, flames, one tap. */
.boner-modal { z-index: 14; background: rgba(5, 0, 12, .9); cursor: pointer; }
.boner-card { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 26px 22px 22px; width: 100%; max-width: 360px; border: 2px solid var(--neon-pink); border-radius: 14px; background: #190122; box-shadow: 0 0 40px rgba(255, 32, 121, .55), inset 0 0 30px rgba(255, 32, 121, .12); animation: boner-in .5s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes boner-in { from { opacity: 0; transform: scale(.6) rotate(-6deg); } to { opacity: 1; transform: none; } }
/* The GIF carries its own motion, so nothing else moves. Its background
   is baked in, so the card is painted the same colour and the art gets a
   soft mask so no rectangle shows. */
.boner-art { width: 280px; max-width: 100%; height: auto; -webkit-mask-image: radial-gradient(ellipse 48% 50% at 50% 52%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 48% 50% at 50% 52%, #000 62%, transparent 100%); }
.boner-art img { display: block; width: 100%; height: auto; }
.boner-title { font-family: 'Press Start 2P', monospace; font-size: 11px; line-height: 1.8; text-align: center; color: var(--neon-pink); text-shadow: 0 0 10px rgba(255, 32, 121, .8); }
.boner-luck { font-family: 'Press Start 2P', monospace; font-size: 16px; color: var(--neon-yellow); text-shadow: 0 0 12px rgba(255, 228, 94, .8); animation: boner-blink 1s steps(1) infinite; }
@keyframes boner-blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .25; } }
.boner-tap { font-family: 'Press Start 2P', monospace; font-size: 6.5px; letter-spacing: .14em; color: var(--text-dim); margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .boner-card, .boner-luck { animation: none; } }

/* In-flight points on a leaderboard row while games are live. */
.rank-inflight { color: var(--neon-green); text-shadow: 0 0 6px rgba(57, 255, 136, .5); }

/* A section heading that no longer folds. */
.all-picks-toggle.static { cursor: default; }
.all-picks-toggle.static .all-picks-caret { display: none; }
.all-picks-toggle.static:disabled { opacity: 1; }

/* The ceiling on a live row: yellow like the rank, with the number lit. */
.rank-max { color: rgba(255, 228, 94, .7); }
.rank-max b { font-weight: 400; color: var(--neon-yellow); text-shadow: 0 0 6px rgba(255, 228, 94, .6); }

/* Leaderboard heading with the H2H button beside it. */
.lb-head { position: relative; }
.h2h-btn.hidden { display: none; }
.h2h-btn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); padding: 5px 8px; border-radius: 6px; border: 1px solid rgba(5, 217, 232, .6); background: rgba(5, 217, 232, .08); color: var(--neon-cyan); font-family: 'Press Start 2P', monospace; font-size: 7px; letter-spacing: .08em; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* Head to head. The overlay itself scrolls, one sheet, which is the only
   arrangement iOS scrolls reliably inside a fixed layer. */
.h2h-modal { z-index: 13; align-items: flex-start; padding: max(16px, env(safe-area-inset-top)) 12px 90px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.h2h-card { max-width: 460px; max-height: none; overflow: visible; gap: 8px; padding: 14px 12px 12px; border-color: var(--neon-cyan); box-shadow: 0 0 30px rgba(5, 217, 232, .35); }
.h2h-top { display: flex; align-items: center; justify-content: center; position: relative; }
.h2h-top .modal-title { font-size: 11px; }
.h2h-x { position: absolute; right: 0; top: -6px; width: 32px; height: 32px; border: 0; background: none; color: var(--text-dim); font-size: 16px; cursor: pointer; }
.h2h-pickers { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; }
.h2h-select { width: 100%; min-height: 36px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--neon-cyan); background: rgba(5, 217, 232, .08); color: #fff; font-family: 'Press Start 2P', monospace; font-size: 7px; letter-spacing: .04em; -webkit-appearance: none; appearance: none; text-align: center; }
.h2h-select.b { border-color: var(--neon-pink); background: rgba(255, 32, 121, .1); }
.h2h-vs, .h2h-grid { width: 100%; }
.h2h-tr { display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); align-items: center; min-height: 32px; border-top: 1px solid rgba(255, 255, 255, .07); }
.h2h-tr.h2h-head { border-top: 0; align-items: end; padding: 2px 0 6px; }
.h2h-th { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.h2h-th.b { align-items: flex-end; }
.h2h-th-mid { font-family: 'Press Start 2P', monospace; font-size: 6.5px; color: var(--text-dim); text-align: center; align-self: center; }
.h2h-name { font-family: 'Press Start 2P', monospace; font-size: 7px; color: var(--neon-cyan); }
.h2h-th.b .h2h-name { color: var(--neon-pink); }
.h2h-score { font-family: 'Press Start 2P', monospace; font-size: 18px; line-height: 1; color: var(--neon-green); text-shadow: 0 0 8px rgba(57, 255, 136, .45); }
.h2h-meta { font-family: 'Press Start 2P', monospace; font-size: 5.5px; color: var(--text-dim); white-space: nowrap; }
.h2h-meta em { font-style: normal; color: var(--neon-green); }
.h2h-tr.diff .h2h-mid > span { color: var(--neon-yellow); text-shadow: 0 0 6px rgba(255, 228, 94, .6); }
.h2h-mid { position: relative; }
.h2h-arr { position: absolute; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 12px; line-height: 1; color: var(--neon-yellow); text-shadow: 0 0 8px rgba(255, 228, 94, .9), 0 0 2px var(--neon-yellow); }
.h2h-arr.l { left: 2px; }
.h2h-arr.r { right: 2px; }
.h2h-tr.is-live { background: linear-gradient(90deg, rgba(5, 217, 232, .16), rgba(5, 217, 232, .04) 30%, rgba(5, 217, 232, .04) 70%, rgba(5, 217, 232, .16)); box-shadow: inset 2px 0 0 var(--neon-cyan), inset -2px 0 0 var(--neon-cyan); }
.h2h-tr.is-live .h2h-mid > span { color: var(--neon-cyan); }
.h2h-mid > i.live u { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--neon-cyan); box-shadow: 0 0 6px var(--neon-cyan); margin-right: 4px; vertical-align: middle; animation: h2h-blink 1s steps(1) infinite; }
@keyframes h2h-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .25; } }
.h2h-td { display: grid; grid-template-columns: minmax(0, 1fr) auto 22px; align-items: center; column-gap: 5px; min-height: 32px; font-size: 11px; line-height: 1; color: var(--text); }
.h2h-td.b { grid-template-columns: 22px auto minmax(0, 1fr); }
.h2h-team { display: flex; align-items: center; gap: 5px; min-width: 0; }
.h2h-td.b .h2h-team { flex-direction: row-reverse; }
.h2h-nm { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h2h-logo { width: 17px; height: 17px; object-fit: contain; flex: none; }
.h2h-line { font-size: 9px; line-height: 1; color: var(--text-dim); }
.h2h-td b { font-family: 'Press Start 2P', monospace; font-size: 7.5px; line-height: 1; text-align: center; color: var(--text-dim); }
.h2h-td.hit b, .h2h-td.live-hit b { color: var(--neon-green); }
.h2h-td.miss b, .h2h-td.live-miss b { color: var(--neon-pink); }
.h2h-td.live-hit b, .h2h-td.live-miss b { text-shadow: 0 0 6px currentColor; }
.h2h-td em { font-style: normal; color: var(--text-dim); font-size: 10px; }
.h2h-mid { text-align: center; align-self: center; }
.h2h-mid { line-height: 1; }
.h2h-mid > span { display: block; font-family: 'Press Start 2P', monospace; font-size: 5.5px; color: var(--text-dim); line-height: 1; }
.h2h-mid > i { display: block; font-style: normal; font-size: 9.5px; color: var(--text); line-height: 1; margin-top: 4px; }
.h2h-mid > i.live { color: var(--neon-cyan); }
.h2h-mid > i.soon { color: var(--text-dim); font-size: 8.5px; }
.h2h-verdict { font-size: 10.5px; line-height: 1.35; text-align: center; color: var(--text-meta); padding: 8px 0 0; border-top: 1px solid rgba(255, 255, 255, .07); margin-top: 2px; }

/* Tiebreaker result beside the name once its game is final. */
.sub-tb.exact { color: var(--neon-green); }
.sub-tb.none { color: rgba(255, 32, 121, .85); }

/* --- Grid check: pre-race status card ------------------------------- */
.grid-modal { z-index: 13; background: rgba(5, 0, 12, .9); }
.grid-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 340px; padding: 0 0 12px; border: 2px solid #fff; border-radius: 14px; overflow: hidden; background: #12001b; box-shadow: 0 0 34px rgba(255, 32, 121, .45), 0 0 0 4px #e0102a, 0 0 0 6px #fff; animation: boner-in .45s cubic-bezier(.2, .9, .3, 1.3) both; font-family: 'Press Start 2P', monospace; text-align: center; }
.grid-flag { width: 100%; height: 18px; flex: none; background: repeating-conic-gradient(#fff 0 25%, #0a0010 0 50%) 0 0 / 18px 18px; }
.grid-flag.bottom { margin-top: 4px; }
.grid-title { margin-top: 8px; font-size: 18px; letter-spacing: .06em; color: #fff; text-shadow: 2px 2px 0 #e0102a, 0 0 14px rgba(224, 16, 42, .6); transform: skewX(-8deg); }
.grid-sub { font-size: 6.5px; letter-spacing: .14em; color: var(--text-dim); padding: 0 14px; }
.grid-verdict { margin-top: 4px; padding: 6px 14px; border-radius: 6px; font-size: 11px; letter-spacing: .12em; color: #fff; transform: skewX(-6deg); }
.grid-verdict.ok { background: var(--neon-green); color: #052010; box-shadow: 0 0 14px rgba(57, 255, 136, .5); }
.grid-verdict.part { background: var(--neon-yellow); color: #2a1e00; box-shadow: 0 0 14px rgba(255, 228, 94, .5); }
.grid-verdict.none { background: #e0102a; box-shadow: 0 0 14px rgba(224, 16, 42, .6); }
.grid-lights { display: flex; gap: 8px; margin-top: 4px; padding: 6px 10px; border-radius: 20px; background: #000; border: 1px solid #333; }
.grid-lights i { width: 14px; height: 14px; border-radius: 50%; background: #3a0810; border: 1px solid #5a1020; transition: background .3s, box-shadow .3s; }
.grid-lights i.on { background: #ff2a3a; box-shadow: 0 0 8px #ff2a3a, 0 0 16px rgba(255, 42, 58, .6); }
.grid-clock-label { font-size: 6.5px; letter-spacing: .2em; color: var(--neon-yellow); margin-top: 2px; }
.grid-clock { font-family: 'Orbitron', system-ui, sans-serif; font-weight: 900; font-size: 34px; line-height: 1; letter-spacing: .02em; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 0 10px rgba(255, 255, 255, .5), 0 0 22px rgba(5, 217, 232, .5); font-style: italic; }
.grid-clock small { font-size: 14px; margin-right: 2px; color: var(--neon-yellow); }
.grid-rows { display: flex; flex-direction: column; gap: 6px; width: calc(100% - 40px); margin-top: 6px; }
.grid-row { display: grid; grid-template-columns: 1fr auto 18px; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, .05); border-left: 4px solid transparent; font-size: 8px; letter-spacing: .06em; text-align: left; }
.grid-row .gr-k { color: var(--text-dim); }
.grid-row .gr-v { font-family: 'Orbitron', system-ui, sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0; color: #fff; }
.grid-row .gr-s { text-align: center; font-size: 10px; }
.grid-row.ok { border-left-color: var(--neon-green); }
.grid-row.ok .gr-s { color: var(--neon-green); }
.grid-row.warn { border-left-color: #e0102a; background: rgba(224, 16, 42, .12); }
.grid-row.warn .gr-v, .grid-row.warn .gr-s { color: #ff5a6a; }
.grid-go { margin-top: 8px; padding: 12px 22px; border: 2px solid #fff; border-radius: 8px; background: #e0102a; color: #fff; font-family: 'Press Start 2P', monospace; font-size: 9px; letter-spacing: .08em; cursor: pointer; box-shadow: 0 4px 0 #7a0616; transform: skewX(-6deg); }
.grid-go.ready { background: var(--neon-green); color: #052010; box-shadow: 0 4px 0 #1a7a3a; }
.grid-go:active { transform: skewX(-6deg) translateY(3px); box-shadow: none; }
.grid-tap { font-size: 6px; letter-spacing: .14em; color: var(--text-dim); }
@media (prefers-reduced-motion: reduce) { .grid-card { animation: none; } }

/* --- Game insights sheet ------------------------------------------- */
.game-meta-right { display: inline-flex; align-items: center; gap: 6px; }
.insights-btn { font-family: 'Press Start 2P', monospace; font-size: 6.5px; letter-spacing: .08em; padding: 5px 7px; border-radius: 20px; border: 1px solid rgba(255, 228, 94, .55); background: rgba(255, 228, 94, .08); color: var(--neon-yellow); cursor: pointer; line-height: 1; }
.insights-btn:active { background: var(--neon-yellow); color: #190122; }
.insights-card { border-color: var(--neon-yellow); box-shadow: 0 0 30px rgba(255, 228, 94, .3); }
.ins-sub { font-size: 10px; color: var(--text-dim); text-align: center; margin-top: -2px; }
.ins-body { display: flex; flex-direction: column; gap: 6px; }
.ins-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 10px; padding-bottom: 4px; border-bottom: 1px solid rgba(255, 228, 94, .3); font-family: 'Press Start 2P', monospace; font-size: 7px; letter-spacing: .12em; color: var(--neon-yellow); }
.ins-stamp { font-size: 5.5px; color: var(--text-dim); letter-spacing: .08em; text-align: right; }
.ins-brief { margin: 0; padding-left: 16px; font-size: 12.5px; line-height: 1.45; color: var(--text); }
.ins-brief li { margin: 3px 0; }
.ins-empty { font-size: 11px; color: var(--text-dim); padding: 4px 0; }
.ins-empty.small { font-size: 10px; padding: 2px 0 4px; }
.ins-loading { font-size: 11px; color: var(--text-dim); padding: 8px 0; }
.ins-line { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 10px; align-items: center; }
.ins-line-nums { display: flex; flex-direction: column; gap: 3px; font-family: 'Press Start 2P', monospace; font-size: 6.5px; letter-spacing: .06em; color: var(--text-dim); }
.ins-line-nums b { font-family: 'Orbitron', system-ui, sans-serif; font-weight: 800; font-size: 12px; letter-spacing: 0; color: #fff; margin-left: 2px; }
.ins-move { color: var(--neon-cyan); }
.ins-flat { color: var(--text-dim); }
.ins-spark { width: 120px; height: 28px; color: var(--neon-cyan); }
.ins-team { font-family: 'Press Start 2P', monospace; font-size: 7px; color: var(--text); margin-top: 4px; }
.ins-inj, .ins-news { margin: 2px 0 0; padding: 0; list-style: none; }
.ins-inj li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; padding: 4px 0; border-bottom: 1px dashed rgba(255, 255, 255, .08); font-size: 11.5px; color: var(--text); }
.ins-inj li i { font-style: normal; color: var(--text-dim); font-size: 10px; }
.ins-inj li b { font-family: 'Press Start 2P', monospace; font-size: 6px; letter-spacing: .06em; padding: 3px 5px; border-radius: 4px; background: rgba(255, 255, 255, .08); color: var(--text); }
.ins-inj li b.st-out, .ins-inj li b.st-outforseason, .ins-inj li b.st-injuredreserve { background: rgba(255, 32, 121, .2); color: var(--neon-pink); }
.ins-inj li b.st-questionable, .ins-inj li b.st-doubtful, .ins-inj li b.st-daytoday { background: rgba(255, 228, 94, .18); color: var(--neon-yellow); }
.ins-inj li b.st-probable, .ins-inj li b.st-active { background: rgba(57, 255, 136, .16); color: var(--neon-green); }
.ins-det { flex-basis: 100%; font-size: 10px; color: var(--text-dim); }
.ins-news li { display: flex; flex-direction: column; gap: 2px; padding: 5px 0; border-bottom: 1px dashed rgba(255, 255, 255, .08); font-size: 11.5px; line-height: 1.35; }
.ins-news a { color: var(--neon-cyan); text-decoration: none; }
.ins-links { display: flex; flex-direction: column; gap: 5px; }
.ins-link { display: grid; grid-template-columns: minmax(0, 1fr) auto 14px; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 8px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); text-decoration: none; color: var(--text); }
.ins-link:active { background: rgba(255, 228, 94, .12); }
.ins-link-l { font-family: 'Press Start 2P', monospace; font-size: 7px; letter-spacing: .04em; }
.ins-link-s { font-size: 9.5px; color: var(--text-dim); }
.ins-link-a { color: var(--neon-yellow); font-size: 16px; text-align: right; }
.ins-foot { margin-top: 8px; font-size: 9px; color: var(--text-dim); text-align: center; letter-spacing: .04em; }
.con-ok { color: var(--neon-green); }
.con-bad { color: var(--neon-pink); }
.con-brief { border: 1px solid var(--card-border); border-radius: 8px; padding: 8px 10px; font-size: 11px; }
.con-brief summary { cursor: pointer; color: var(--text); }
.con-brief-body { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.con-kv { font-size: 10px; color: var(--text-dim); }
.con-line { font-size: 11.5px; line-height: 1.4; }
.con-raw { max-height: 240px; overflow: auto; font-size: 9px; line-height: 1.3; color: var(--text-dim); background: rgba(0, 0, 0, .3); padding: 8px; border-radius: 6px; white-space: pre-wrap; }
.ins-glance { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.ins-g { display: grid; grid-template-columns: 74px 1fr 1fr; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 6px; background: rgba(255, 255, 255, .04); }
.ins-g.head { background: none; padding: 0 8px; font-family: 'Press Start 2P', monospace; font-size: 6.5px; color: var(--neon-cyan); letter-spacing: .06em; text-align: center; }
.ins-gk { font-family: 'Press Start 2P', monospace; font-size: 6.5px; letter-spacing: .06em; color: var(--text-dim); }
.ins-gv { font-family: 'Orbitron', system-ui, sans-serif; font-weight: 800; font-size: 13px; text-align: center; color: #fff; font-variant-numeric: tabular-nums; }
.ins-gv.lead { color: var(--neon-green); }
.ins-wx { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 10.5px; color: var(--text-dim); }
.ins-leads { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.ins-lead { display: flex; flex-direction: column; gap: 2px; font-size: 10px; color: var(--text-dim); min-width: 0; }
.ins-lead b { font-family: 'Press Start 2P', monospace; font-size: 6.5px; color: var(--text); margin-bottom: 2px; }
.ins-lead span { display: flex; flex-direction: column; line-height: 1.25; margin-bottom: 3px; }
.ins-lead i { font-style: normal; color: var(--text); font-size: 10.5px; }
.ins-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ins-col { min-width: 0; }
.ins-cols .ins-inj li { flex-direction: column; align-items: flex-start; gap: 2px; }
.ins-who { font-size: 11px; color: var(--text); }
.ins-cols .ins-det { flex-basis: auto; }
.ins-timeline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin-top: 4px; }
.ins-step { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; }
.ins-step-l { font-family: 'Press Start 2P', monospace; font-size: 6px; letter-spacing: .06em; color: var(--text-dim); }
.ins-step-v { font-family: 'Orbitron', system-ui, sans-serif; font-weight: 800; font-size: 12px; color: #fff; padding: 4px 7px; border-radius: 6px; background: rgba(255, 255, 255, .06); white-space: nowrap; }
.ins-step.seal .ins-step-v { border: 1px solid rgba(255, 228, 94, .5); color: var(--neon-yellow); }
.ins-step.now .ins-step-v { border: 1px solid rgba(5, 217, 232, .6); color: var(--neon-cyan); box-shadow: 0 0 8px rgba(5, 217, 232, .3); }
.ins-step-arrow { font-size: 10px; color: var(--text-dim); margin: 12px 5px 0; }
.ins-step-arrow.up { color: var(--neon-yellow); }
.ins-step-arrow.down { color: var(--neon-cyan); }
.ins-verdict { margin-top: 6px; font-size: 11.5px; color: var(--text); }
.ins-verdict b { color: var(--neon-cyan); }
.ins-ou { margin-left: 8px; font-family: 'Press Start 2P', monospace; font-size: 6.5px; color: var(--text-dim); }
.ins-logo { width: 18px; height: 18px; object-fit: contain; vertical-align: middle; margin-right: 5px; flex: none; }
.ins-logo.hd { width: 30px; height: 30px; margin: 0 8px; }
.ins-logo.sm { width: 16px; height: 16px; margin-right: 3px; }
#insights-title { display: inline-flex; align-items: center; justify-content: center; gap: 2px; }
#insights-title i { font-style: normal; font-size: 8px; color: var(--text-dim); margin: 0 6px; }
.ins-team { display: flex; align-items: center; }
.ins-g.head span { display: inline-flex; align-items: center; justify-content: center; }
.ins-lead b { display: flex; align-items: center; }
.ins-step-v { display: inline-flex; align-items: center; }
.ins-err { font-style: normal; font-size: 9px; color: rgba(255, 32, 121, .8); word-break: break-word; }
.ins-sub-h { margin-top: 10px; font-family: 'Press Start 2P', monospace; font-size: 6.5px; letter-spacing: .12em; color: var(--neon-cyan); }
.ins-pv-h { font-size: 13px; font-weight: 700; color: #fff; line-height: 1.3; margin-top: 2px; }
.ins-pv p, .ins-more p { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--text); }
.ins-more summary { margin-top: 6px; cursor: pointer; font-family: 'Press Start 2P', monospace; font-size: 6.5px; letter-spacing: .1em; color: var(--neon-yellow); list-style: none; }
.ins-more summary::-webkit-details-marker { display: none; }
.ins-form { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 8px; margin-top: 5px; }
.ins-form-t { display: flex; align-items: center; font-family: 'Press Start 2P', monospace; font-size: 6.5px; color: var(--text); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ins-form-r { display: flex; gap: 4px; flex-wrap: wrap; }
.ins-fchip { display: inline-flex; flex-direction: column; align-items: center; min-width: 40px; padding: 3px 4px; border-radius: 6px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); }
.ins-fchip b { font-family: 'Press Start 2P', monospace; font-size: 8px; }
.ins-fchip i { font-style: normal; font-size: 8.5px; color: var(--text-dim); white-space: nowrap; }
.ins-fchip.w { border-color: rgba(57, 255, 136, .45); } .ins-fchip.w b { color: var(--neon-green); }
.ins-fchip.l { border-color: rgba(255, 32, 121, .45); } .ins-fchip.l b { color: var(--neon-pink); }
.ins-nh { font-weight: 700; color: #fff; font-size: 12px; }
.ins-blurb { font-size: 11px; color: var(--text); opacity: .85; }
.ins-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ins-chip { padding: 6px 9px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); color: var(--text-dim); font-size: 10.5px; text-decoration: none; }
.ins-chip:active { background: rgba(255, 228, 94, .12); color: var(--neon-yellow); }
.ins-nh a { color: #fff; text-decoration: none; }
.ins-nh a:active { color: var(--neon-cyan); }
.ins-src { font-style: normal; color: var(--neon-yellow); margin-right: 6px; }
.ins-src:empty { display: none; }

/* --- Game simulation on a Game Box ---------------------------------- */
.ins-sim { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; margin: 6px 0 4px; padding: 10px 12px; border-radius: 10px; border: 3px solid #0f380f; background: #9bbc0f; color: #0f380f; cursor: pointer; overflow: hidden; box-shadow: 0 5px 0 #306230, 0 0 18px rgba(155, 188, 15, .35); text-align: left; transition: transform .06s, box-shadow .06s; }
.ins-sim::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(15, 56, 15, .12) 0 1px, transparent 1px 3px); }
.ins-sim:active { transform: translateY(4px); box-shadow: 0 1px 0 #306230, 0 0 10px rgba(155, 188, 15, .3); }
.ins-sim-gb { flex: none; position: relative; width: 26px; height: 36px; border-radius: 3px 3px 9px 3px; background: #d8d5d0; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2), 0 0 0 2px #0f380f; }
.ins-sim-gb i { position: absolute; left: 4px; right: 4px; top: 4px; height: 14px; border-radius: 1px; background: #8bac0f; box-shadow: 0 0 0 2px #7a7c86; }
.ins-sim-gb::before, .ins-sim-gb::after { content: ""; position: absolute; bottom: 7px; width: 5px; height: 5px; border-radius: 50%; background: #8c1d5c; }
.ins-sim-gb::before { right: 4px; } .ins-sim-gb::after { right: 11px; bottom: 5px; }
.ins-sim-txt { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; font-family: 'Press Start 2P', monospace; }
.ins-sim-txt b { font-weight: normal; font-size: 11px; letter-spacing: .08em; }
.ins-sim-txt em { font-style: normal; font-size: 7px; letter-spacing: .14em; color: #306230; animation: sim-blink-txt 1.1s steps(1) infinite; }
@keyframes sim-blink-txt { 50% { opacity: 0; } }
.ins-sim-vs { flex: none; display: flex; align-items: center; gap: 3px; font-family: 'Press Start 2P', monospace; font-size: 6px; color: #306230; }
.ins-sim-vs img { width: 20px; height: 20px; filter: grayscale(1) contrast(1.3) brightness(.45) sepia(1) hue-rotate(45deg) saturate(2.5); margin: 0; }
@media (prefers-reduced-motion: reduce) { .ins-sim-txt em { animation: none; } }
.sim-modal { position: fixed; inset: 0; z-index: 16; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 14px; background: rgba(5, 0, 12, .92); overflow-y: auto; }
.sim-modal.hidden { display: none; }
.gb { --gb-body: #d8d5d0; --g0: #9bbc0f; --g1: #8bac0f; --g2: #306230; --g3: #0f380f;
  position: relative; width: min(360px, 94vw); padding: 18px 18px 56px; border-radius: 12px 12px 64px 12px; background: linear-gradient(180deg, #e2dfda, var(--gb-body)); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .12), inset 0 2px 0 rgba(255, 255, 255, .6), 0 18px 40px rgba(0, 0, 0, .6); font-family: 'Press Start 2P', monospace; animation: boner-in .4s cubic-bezier(.2, .9, .3, 1.3) both; }
.gb-bezel { position: relative; padding: 12px 18px 16px 36px; border-radius: 10px 10px 44px 10px; background: #7a7c86; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35); }
.gb-bezel-top { display: flex; align-items: center; gap: 6px; margin: -2px -8px 8px -22px; }
.gb-bezel-top span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.gb-bezel-top span i { height: 2px; background: #a0205a; }
.gb-bezel-top span i + i { background: #2a2f8a; }
.gb-bezel-top em { font-style: normal; font-family: system-ui, sans-serif; font-weight: 600; font-size: 7px; letter-spacing: .08em; color: #d8d8e0; white-space: nowrap; }
.gb-led { position: absolute; left: 8px; top: 52px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: system-ui, sans-serif; font-size: 5.5px; color: #d0d0d8; letter-spacing: .06em; }
.gb-led i { width: 7px; height: 7px; border-radius: 50%; background: #ff2a3a; box-shadow: 0 0 6px #ff2a3a; }
.gb-screen { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 6px; background: var(--g0); border-radius: 2px; box-shadow: inset 0 0 0 2px var(--g1), inset 0 0 18px rgba(15, 56, 15, .25); color: var(--g3); image-rendering: pixelated; min-height: 250px; }
.gb-brand { margin: 12px 0 0 2px; color: #2a2f8a; font-family: system-ui, sans-serif; font-size: 13px; letter-spacing: .01em; }
.gb-brand b { font-weight: 800; }
.gb-brand i { font-weight: 700; font-size: 17px; letter-spacing: .02em; }
.gb-brand sup { font-size: 7px; }
.gb-controls { position: relative; display: flex; justify-content: space-between; align-items: center; margin-top: 22px; height: 86px; }
.gb-dpad { pointer-events: none; position: relative; width: 74px; height: 74px; margin-left: 6px; }
.gb-dpad i { position: absolute; background: #1c1c22; border-radius: 3px; box-shadow: 0 3px 0 #000; }
.gb-dpad i.h { left: 0; right: 0; top: 26px; height: 22px; }
.gb-dpad i.v { top: 0; bottom: 0; left: 26px; width: 22px; }
.gb-dpad b { position: absolute; left: 32px; top: 32px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #444, #111); }
.gb-ab { z-index: 1; position: relative; width: 132px; height: 86px; transform: rotate(-25deg); }
.gb-btn-wrap { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.gb-btn-wrap.b { left: 0; top: 22px; }
.gb-btn-wrap.a { right: 0; top: 4px; }
.gb-round { width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; background: radial-gradient(circle at 38% 32%, #b8307a, #8c1d5c 70%); box-shadow: 0 4px 0 #5a0f3a, inset 0 -2px 4px rgba(0, 0, 0, .25); cursor: pointer; }
.gb-round:active { transform: translateY(3px); box-shadow: 0 1px 0 #5a0f3a; }
.gb-btn-wrap span { font-size: 6.5px; color: #2a2f8a; letter-spacing: .08em; white-space: nowrap; }
.gb-pills { pointer-events: none; width: max-content; display: flex; gap: 14px; margin: 14px 0 0 76px; transform: rotate(-25deg); transform-origin: left center; }
.gb-pills div { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.gb-pills i { width: 36px; height: 10px; border-radius: 6px; background: #8a8c94; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25); }
.gb-pills span { font-size: 5.5px; color: #2a2f8a; letter-spacing: .1em; }
.gb-grille { pointer-events: none; position: absolute; right: 22px; bottom: 18px; display: flex; gap: 7px; transform: rotate(-30deg); }
.gb-grille i { width: 5px; height: 42px; border-radius: 3px; background: #a9a6a2; box-shadow: inset 0 2px 2px rgba(0, 0, 0, .35); }
/* Screen contents in four greens. */
.sim-board { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4px; }
.sim-tm { display: flex; align-items: center; gap: 4px; font-size: 7px; color: var(--g3); }
.sim-tm.r { justify-content: flex-end; }
.sim-tm img { width: 16px; height: 16px; object-fit: contain; filter: grayscale(1) contrast(1.4) brightness(.55) sepia(1) hue-rotate(45deg) saturate(2.5); }
.sim-tm b { font-size: 13px; color: var(--g3); }
.sim-tm.poss span::after { content: " ◂"; color: var(--g2); }
.sim-tm.r.poss span::after { content: ""; }
.sim-tm.r.poss span::before { content: "▸ "; color: var(--g2); }
.sim-mid { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 5.5px; color: var(--g2); }
.sim-mid b { font-size: 8px; color: var(--g3); }
.sim-field { position: relative; height: 62px; background: repeating-linear-gradient(90deg, var(--g1) 0 10%, var(--g0) 10% 20%); border: 2px solid var(--g3); }
.sim-ez { position: absolute; top: 0; bottom: 0; width: 8%; display: flex; align-items: center; justify-content: center; background: var(--g2) !important; }
.sim-ez.l { left: -8%; } .sim-ez.r { right: -8%; }
.sim-field { margin: 0 8%; }
.sim-ez img { width: 80%; filter: grayscale(1) contrast(1.6) brightness(1.6) sepia(1) hue-rotate(45deg) saturate(2); opacity: .9; }
.sim-lines i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--g2); }
.sim-lines b { position: absolute; bottom: 1px; left: 2px; font-size: 5px; color: var(--g2); font-weight: normal; }
.sim-ball { position: absolute; top: 50%; width: 9px; height: 6px; margin: -3px 0 0 -4px; border-radius: 50%; background: var(--g3); box-shadow: 0 0 0 1px var(--g0); transition: left .28s steps(6); }
.sim-flash { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--g0); background: var(--g3); opacity: 0; pointer-events: none; letter-spacing: .06em; text-align: center; }
.sim-flash.on { animation: sim-flash 1.1s steps(4) both; }
@keyframes sim-flash { 0% { opacity: 0; } 15%, 75% { opacity: 1; } 100% { opacity: 0; } }
.sim-log { display: flex; flex-direction: column; gap: 3px; min-height: 96px; }
.sim-line { font-size: 6.5px; line-height: 1.5; color: var(--g3); letter-spacing: .02em; }
.sim-line:last-child { animation: sim-in .2s steps(3); }
.sim-line:not(:last-child) { color: var(--g2); }
.sim-line.dim { opacity: .75; }
.sim-line.td, .sim-line.final { background: var(--g3); color: var(--g0) !important; padding: 2px 4px; }
.sim-line.to { text-decoration: underline; }
.sim-line.banner { text-align: center; }
@keyframes sim-in { from { opacity: 0; transform: translateX(-4px); } }
.sim-note { font-family: 'Press Start 2P', monospace; font-size: 6px; letter-spacing: .12em; color: var(--text-dim); }
.ins-stats .ins-g { grid-template-columns: minmax(0, 1.3fr) 1fr 1fr; padding: 5px 8px; }
.ins-gk.plain { font-family: system-ui, sans-serif; font-size: 10.5px; letter-spacing: 0; color: var(--text-dim); line-height: 1.2; }
.ins-stats .ins-gv { font-size: 12px; }
.ins-form { grid-template-columns: 64px minmax(0, 1fr); }
.ins-cat { font-style: normal; font-family: 'Press Start 2P', monospace; font-size: 6px; color: var(--neon-cyan); margin-right: 5px; letter-spacing: .06em; }
.sim-panel { margin-top: auto; padding-top: 5px; border-top: 2px dashed var(--g2); display: flex; flex-direction: column; gap: 5px; }
.sim-ls { width: 100%; border-collapse: collapse; font-size: 6.5px; color: var(--g3); }
.sim-ls th { text-align: left; font-weight: normal; padding: 1px 2px; }
.sim-ls td { text-align: center; padding: 2px 0; color: var(--g2); }
.sim-ls tr:not(:first-child) td { color: var(--g3); }
.sim-ls td.t { font-size: 8px; color: var(--g3); background: var(--g1); }
.sim-ls tr:first-child td { font-size: 5.5px; }
.sim-ts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-size: 5.5px; color: var(--g2); }
.sim-ts div { display: flex; flex-direction: column; gap: 2px; }
.sim-ts b { color: var(--g3); font-weight: normal; font-size: 6.5px; }
.sim-bx { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 5.5px; color: var(--g2); }
.sim-bx b { color: var(--g3); font-weight: normal; width: 100%; font-size: 6.5px; }
.sim-pog { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px; background: var(--g3); color: var(--g0); animation: sim-blink 1s steps(2) infinite; }
.sim-pog em { font-style: normal; font-size: 5.5px; letter-spacing: .1em; }
.sim-pog b { font-weight: normal; font-size: 8px; }
.sim-pog span { font-size: 6px; }
@keyframes sim-blink { 50% { background: var(--g2); } }
.sim-ticker { display: flex; gap: 8px; align-items: baseline; min-height: 9px; font-size: 5.5px; color: var(--g2); letter-spacing: .04em; white-space: nowrap; overflow: hidden; }
.sim-ticker b { font-weight: normal; font-size: 6.5px; color: var(--g3); }
/* Fixed-size screen: the play-by-play scrolls, nothing else moves. */
.gb-screen { height: min(440px, 54vh); min-height: 0; overflow: hidden; }
.sim-board, .sim-ticker, .sim-field { flex: none; }
.sim-log { flex: 1 1 auto; min-height: 0 !important; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-right: 2px; }
.sim-log::-webkit-scrollbar { display: none; }
.sim-panel { flex: none; height: 138px; overflow: hidden; margin-top: 0; }
.sim-pog { padding: 3px 4px; gap: 2px; }
.sim-bx { gap: 1px 8px; }
/* True Game Boy proportions: the screen is 160x144, and the body keeps
   its shape at any phone height. Only the play-by-play scrolls. */
.gb { width: min(340px, 92vw); }
.gb-screen { height: auto !important; aspect-ratio: 160 / 144; min-height: 0 !important; gap: 3px; padding: 5px; }
.sim-field { height: 44px; }
.sim-board .sim-tm b { font-size: 11px; }
.sim-panel { height: 58px !important; padding-top: 3px; gap: 3px; }
.sim-ls { font-size: 6px; }
.sim-ls td { padding: 1px 0; }
.sim-ls td.t { font-size: 7px; }
.sim-ts { display: none; }
.sim-bx { display: none; }
.sim-pog { flex-direction: row; justify-content: center; gap: 6px; padding: 2px 4px; }
.sim-pog em { font-size: 5px; }
.sim-pog b { font-size: 6.5px; }
.sim-pog span { font-size: 5px; }
.sim-line { font-size: 6px; }
/* Keep the tab bar tappable above sheets and popups. */
.bottom-nav { z-index: 20; }
.sim-panel { height: 72px !important; }
.sim-drv { font-size: 5.5px; color: var(--g2); letter-spacing: .04em; white-space: nowrap; }
.sim-drv b { font-weight: normal; color: var(--g3); }
.sim-wp { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 4px; font-size: 5.5px; color: var(--g3); }
.sim-wp-bar { position: relative; height: 6px; background: var(--g3); border: 1px solid var(--g3); }
.sim-wp-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--g0); transition: width .3s steps(5); }
.sim-wp em { font-style: normal; color: var(--g2); margin-left: 2px; white-space: nowrap; }
/* Team logos in the bottom panel, crushed to Game Box greens. */
.sim-plogo { width: 12px; height: 12px; object-fit: contain; vertical-align: middle; margin-right: 4px; image-rendering: pixelated; filter: grayscale(1) contrast(1.6) brightness(.5) sepia(1) hue-rotate(45deg) saturate(2.6); }
.sim-ls th { white-space: nowrap; }
.sim-wp span { display: inline-flex; align-items: center; }
.sim-wp .sim-plogo { width: 14px; height: 14px; margin: 0; }
.ins-pv .pv-wait { font-size: 11px; color: var(--text-dim); animation: sim-blink-txt 1.2s steps(1) infinite; }
/* Line tracker: OPENED -> SEALED -> NOW */
.ln-track { display: flex; align-items: stretch; gap: 4px; margin-top: 4px; }
.ln-step { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 4px; border-radius: 8px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); min-width: 0; }
.ln-step em { font-style: normal; font-family: 'Press Start 2P', monospace; font-size: 6px; letter-spacing: .1em; color: var(--text-dim); }
.ln-step b { display: inline-flex; align-items: center; gap: 4px; font-family: 'Orbitron', system-ui, sans-serif; font-weight: 800; font-size: 15px; color: #fff; }
.ln-step b .ins-logo { width: 18px; height: 18px; margin: 0; }
.ln-step.seal { border-color: rgba(255, 228, 94, .55); } .ln-step.seal b { color: var(--neon-yellow); }
.ln-step.now { border-color: rgba(5, 217, 232, .6); box-shadow: 0 0 10px rgba(5, 217, 232, .2); } .ln-step.now b { color: var(--neon-cyan); }
.ln-move { flex: 0 0 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center; }
.ln-move i { font-style: normal; font-size: 10px; color: var(--text-dim); }
.ln-move span { font-size: 9px; line-height: 1.2; color: var(--text-dim); }
.ln-move.fav i, .ln-move.fav span { color: var(--neon-yellow); }
.ln-move.dog i, .ln-move.dog span { color: var(--neon-cyan); }
.ln-say { margin-top: 7px; font-size: 12px; color: var(--text); line-height: 1.4; }
/* Line trend chart */
.ln-chart { display: block; width: 100%; height: auto; margin-top: 4px; overflow: visible; }
.ln-base { stroke: rgba(255, 255, 255, .14); stroke-width: 1; }
.ln-zero { stroke: rgba(255, 255, 255, .28); stroke-width: 1; stroke-dasharray: 3 3; }
.ln-zl, .ln-x, .ln-ax { font-family: 'Press Start 2P', monospace; font-size: 5.5px; fill: var(--text-dim); letter-spacing: .06em; }
.ln-path { fill: none; stroke: var(--neon-cyan); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ln-pt rect { fill: #120018; stroke: var(--neon-cyan); stroke-width: 2; }
.ln-pt.seal rect { stroke: var(--neon-yellow); fill: var(--neon-yellow); }
.ln-pt.now rect { fill: var(--neon-cyan); }
.ln-pt.open rect { stroke: var(--text-dim); }
.ln-v { font-family: 'Orbitron', system-ui, sans-serif; font-weight: 800; font-size: 9px; fill: #fff; }
.ln-pt.seal .ln-v { fill: var(--neon-yellow); }
.ln-pt.now .ln-v { fill: var(--neon-cyan); }
.ln-pt.seal .ln-x { fill: var(--neon-yellow); }
.ln-pt.now .ln-x { fill: var(--neon-cyan); }
.ln-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.ln-chip { display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 8px; border-radius: 6px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12); font-family: 'Orbitron', system-ui, sans-serif; font-weight: 800; font-size: 12px; color: #fff; }
.ln-chip em { font-style: normal; font-family: 'Press Start 2P', monospace; font-size: 5.5px; letter-spacing: .08em; color: var(--text-dim); }
.ln-chip.seal { border-color: rgba(255, 228, 94, .55); color: var(--neon-yellow); }
.ln-chip.now { border-color: rgba(5, 217, 232, .6); color: var(--neon-cyan); }
.ln-arrow { font-style: normal; color: var(--text-dim); }
.ln-more { margin-top: 8px; }
.ln-more summary { list-style: none; cursor: pointer; font-family: 'Press Start 2P', monospace; font-size: 6.5px; letter-spacing: .1em; color: var(--neon-cyan); }
.ln-more summary::-webkit-details-marker { display: none; }
.ln-more summary span { display: inline-block; transition: transform .15s; }
.ln-more[open] summary span { transform: rotate(90deg); }
.ln-crt { margin-top: 8px; padding: 8px 6px 4px; border-radius: 8px; border: 2px solid rgba(5, 217, 232, .45); background:
  repeating-linear-gradient(0deg, rgba(5, 217, 232, .06) 0 1px, transparent 1px 12px),
  repeating-linear-gradient(90deg, rgba(5, 217, 232, .06) 0 1px, transparent 1px 12px), #07000f;
  box-shadow: inset 0 0 18px rgba(5, 217, 232, .12), 0 0 12px rgba(5, 217, 232, .15); }
.ln-glow { fill: none; stroke: var(--neon-cyan); stroke-width: 6; opacity: .22; filter: blur(2px); }
.ln-chart { shape-rendering: crispEdges; }
.ln-chart text { shape-rendering: auto; }
/* Tighter sheet */
.ins-h { margin-top: 12px; padding-bottom: 3px; }
.ins-sub { margin-bottom: 2px; }
.ins-sim { margin: 4px 0 0; padding: 7px 10px; }
.ins-sim-gb { width: 22px; height: 30px; }
.ins-sim-txt { gap: 4px; }
.ins-sim-txt b { font-size: 10px; }
.ln-chips { flex-wrap: nowrap; gap: 4px; }
.ln-chip { flex: 0 1 auto; min-width: 0; padding: 4px 6px; font-size: 11px; white-space: nowrap; }
.ln-chip.ou { margin-left: auto; font-size: 10px; color: var(--text-dim); }
.ln-arrow { flex: none; font-size: 11px; }
.ln-arrow.mv { display: inline-flex; flex-direction: column; align-items: center; font-family: 'Orbitron', system-ui, sans-serif; font-weight: 700; font-size: 8.5px; line-height: 1; }
.ln-arrow.mv b { font-size: 7px; }
.ln-arrow.fav { color: var(--neon-yellow); } .ln-arrow.dog { color: var(--neon-cyan); }
.ln-more { margin-top: 6px; }
.ins-pv-h { font-size: 12.5px; }
.ins-pv p { margin: 4px 0 0; font-size: 12px; line-height: 1.45; }
.ins-glance { gap: 3px; }
.ins-g { padding: 5px 8px; }
.ins-gv { font-size: 12px; }
.ins-wx { margin-top: 3px; font-size: 10px; }
.ins-leads { margin-top: 8px; }
.sim-flash.hold { opacity: 1; animation: sim-hold 1s steps(1) infinite; }
@keyframes sim-hold { 50% { opacity: .25; } }
.sim-pog { display: flex !important; flex-direction: row !important; align-items: baseline; justify-content: center; gap: 6px !important; padding: 4px 6px !important; white-space: nowrap; overflow: hidden; }
.sim-pog em, .sim-pog b, .sim-pog span { font-size: 6px !important; line-height: 1.2; font-weight: normal; letter-spacing: .04em; }
.sim-pog b { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sim-pog span { flex: 0 0 auto; }
.sim-pog em::after, .sim-pog b::after { content: " ·"; opacity: .7; }
/* Even quarter columns in the Game Box line score. */
.sim-ls { table-layout: fixed; }
.sim-ls th { width: 34%; }
.sim-ls td { width: auto; }
.sim-ls td.t { width: 16%; }
/* Game over: the score replaces the field, only the text blinks. */
.sim-flash.hold { opacity: 1 !important; animation: none !important; font-size: 14px; }
.sim-field.over .sim-flash.hold { animation: sim-hold-text 1s steps(1) infinite !important; }
@keyframes sim-hold-text { 50% { color: var(--g2); } }
.sim-field.over .sim-ball, .sim-field.over .sim-lines { visibility: hidden; }
/* Player of the game: blinking title bar, then the name and line. */
.sim-pog2 { display: flex; flex-direction: column; gap: 3px; }
.sim-pog2 em { display: block; padding: 3px 4px; font-style: normal; font-size: 6px; letter-spacing: .12em; text-align: center; background: var(--g3); color: var(--g0); animation: sim-blink 1s steps(2) infinite; }
.sim-pog2 div { display: flex; justify-content: center; align-items: baseline; gap: 8px; white-space: nowrap; overflow: hidden; }
.sim-pog2 b { font-weight: normal; font-size: 7px; color: var(--g3); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sim-pog2 span { flex: none; font-size: 6px; color: var(--g2); }
/* One matchup table, one header */
.ins-g.divider { display: block; background: none; padding: 8px 8px 2px; }
.ins-g.divider span { font-family: 'Press Start 2P', monospace; font-size: 6.5px; letter-spacing: .12em; color: var(--neon-cyan); }
.ins-lead b { margin-bottom: 4px; }
.ins-lead b .ins-logo { width: 20px; height: 20px; margin: 0; }
/* Last five with opponent logos */
.ins-form { grid-template-columns: 30px minmax(0, 1fr); }
.ins-form-t .ins-logo { width: 22px; height: 22px; margin: 0; }
.ins-fchip { position: relative; min-width: 46px; gap: 2px; padding: 4px 4px 3px; }
.ins-fchip img { width: 20px; height: 20px; object-fit: contain; }
.ins-fchip b { font-size: 7px; }
.ins-fchip i { font-size: 9px; }
.ins-fchip u { position: absolute; top: 1px; left: 3px; text-decoration: none; font-size: 8px; color: var(--text-dim); }
/* Slimmer simulate bar */
.ins-sim { padding: 5px 10px; gap: 10px; border-width: 2px; box-shadow: 0 3px 0 #306230, 0 0 12px rgba(155, 188, 15, .3); }
.ins-sim-gb { width: 16px; height: 22px; border-radius: 2px 2px 6px 2px; }
.ins-sim-gb i { left: 3px; right: 3px; top: 3px; height: 8px; }
.ins-sim-gb::before, .ins-sim-gb::after { width: 3px; height: 3px; bottom: 4px; }
.ins-sim-gb::before { right: 3px; } .ins-sim-gb::after { right: 7px; bottom: 3px; }
.ins-sim-txt { flex-direction: row; align-items: baseline; gap: 10px; }
.ins-sim-txt b { font-size: 9px; }
.ins-sim-txt em { font-size: 6px; }
.ins-sim-vs img { width: 16px; height: 16px; }
.insights-card { will-change: transform; }
/* Line row that fits a phone: three equal chips, arrows between, total below-right */
.ln-chips { display: flex; flex-wrap: wrap; align-items: stretch; gap: 3px; }
.ln-chip { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 3px; white-space: nowrap; }
.ln-chip em { font-size: 5.5px; }
.ln-chip b { display: inline-flex; align-items: center; gap: 3px; font-family: 'Orbitron', system-ui, sans-serif; font-weight: 800; font-size: 13px; }
.ln-chip b .ins-logo { width: 16px; height: 16px; margin: 0; }
.ln-arrow { align-self: center; min-width: 14px; text-align: center; }
.ln-ou { flex-basis: 100%; text-align: right; font-family: 'Orbitron', system-ui, sans-serif; font-size: 10px; color: var(--text-dim); margin-top: 2px; }
.ln-ou em { font-style: normal; font-family: 'Press Start 2P', monospace; font-size: 5.5px; margin-right: 4px; letter-spacing: .08em; }
/* Live chance to win the week */
.wp-note { display: flex; align-items: center; gap: 6px; margin: 2px 4px 6px; font-family: 'Press Start 2P', monospace; font-size: 6px; letter-spacing: .1em; color: var(--neon-cyan); }
.wp-note i { width: 6px; height: 6px; border-radius: 50%; background: var(--neon-cyan); box-shadow: 0 0 6px var(--neon-cyan); animation: h2h-blink 1s steps(1) infinite; }
.rank-wp { position: relative; display: block; margin-top: 4px; height: 9px; border-radius: 2px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.rank-wp i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(5, 217, 232, .55), var(--neon-cyan)); transition: width .6s steps(8); }
.rank-wp.hot i { background: linear-gradient(90deg, rgba(57, 255, 136, .55), var(--neon-green)); }
.rank-wp b { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: 'Press Start 2P', monospace; font-weight: normal; font-size: 6px; color: #fff; text-shadow: 0 0 3px #000, 0 0 2px #000; }
/* Recap reactions */
.recap-react { grid-column: 1 / -1; display: flex; gap: 5px; margin-top: 2px; padding-top: 6px; border-top: 1px dashed rgba(255, 255, 255, .08); }
.rx { display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .03); font-size: 12px; line-height: 1; cursor: pointer; filter: grayscale(.8); opacity: .7; }
.rx.on { filter: none; opacity: 1; }
.rx.mine { border-color: var(--neon-cyan); background: rgba(5, 217, 232, .12); }
.rx b { font-family: 'Orbitron', system-ui, sans-serif; font-size: 10px; color: var(--text); }
.rx:active { transform: scale(1.15); }
/* Win chance sits in line, where the dotted leader runs. */
.ranking-main .rank-wp { flex: 1 1 auto; min-width: 60px; display: flex; align-items: center; gap: 6px; height: auto; margin: 0; background: none; overflow: visible; }
.rank-wp-bar { position: relative; flex: 1; height: 8px; border-radius: 2px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.rank-wp-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(5, 217, 232, .5), var(--neon-cyan)); transition: width .6s steps(8); }
.rank-wp.hot .rank-wp-bar i { background: linear-gradient(90deg, rgba(57, 255, 136, .5), var(--neon-green)); }
.ranking-main .rank-wp b { position: static; transform: none; flex: none; min-width: 28px; text-align: right; font-family: 'Press Start 2P', monospace; font-weight: normal; font-size: 6.5px; color: var(--neon-cyan); text-shadow: none; }
.ranking-main .rank-wp.hot b { color: var(--neon-green); }
.wp-live .ranking-name { flex: 0 0 78px; min-width: 0; }
.wp-live .rank-who { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Picks header: pay chips, then the lock clock with your card status */
.picks-pay { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 6px 0 12px; }
.picks-pay span { display: inline-flex; align-items: baseline; gap: 5px; padding: 6px 9px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); font-family: 'Orbitron', system-ui, sans-serif; font-size: 10.5px; color: var(--text); white-space: nowrap; }
.picks-pay em { font-style: normal; font-family: 'Press Start 2P', monospace; font-size: 6px; letter-spacing: .08em; color: var(--text-dim); }
.picks-pay b { font-family: 'Press Start 2P', monospace; font-size: 9px; color: var(--neon-yellow); }
.picks-q { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(5, 217, 232, .5); background: rgba(5, 217, 232, .08); color: var(--neon-cyan); font-family: 'Press Start 2P', monospace; font-size: 9px; cursor: pointer; flex: none; }
.picks-countdown { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; }
.picks-countdown .cd-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; }
.picks-countdown .cd-left { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.picks-countdown .cd-status { display: flex; gap: 5px; flex: none; }
.cd-chip { padding: 6px 8px; border-radius: 6px; font-family: 'Press Start 2P', monospace; font-size: 7.5px; letter-spacing: .04em; }
.cd-chip.ok { color: var(--neon-green); border: 1px solid rgba(57, 255, 136, .5); background: rgba(57, 255, 136, .08); }
.cd-chip.miss { color: var(--neon-pink); border: 1px solid rgba(255, 32, 121, .6); background: rgba(255, 32, 121, .1); animation: sim-blink-txt 1.2s steps(1) infinite; }
.picks-countdown .cd-game { align-self: flex-start; }
.picks-countdown { width: 100%; box-sizing: border-box; align-items: stretch; text-align: left; margin-top: 0; }
.picks-countdown .cd-clock { font-size: 16px; }
.picks-countdown .cd-game { font-size: 10px; }
/* Picks header spacing: the screen's own padding plus the wrap's 20px
   gap doubled every space here; pull the top block together. */
#picks-screen { padding-top: 10px; }
#picks-screen .wrap { padding-top: 0; }
.picks-pay { margin: 0 0 -10px; }
/* Card status chips stacked in a column on the right of the clock. */
.picks-countdown .cd-status { flex-direction: column; align-items: stretch; gap: 4px; }
.picks-countdown .cd-chip { text-align: center; min-width: 58px; }
.cd-chip.miss { animation: cd-pulse 1.2s steps(1) infinite; }
@keyframes cd-pulse { 50% { opacity: .5; } }
/* Chalk line: a golf-style cut line across the leaderboard */
.chalk-line { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 2px; padding: 5px 10px; border-top: 2px dashed rgba(255, 228, 94, .7); border-bottom: 2px dashed rgba(255, 228, 94, .7); background: repeating-linear-gradient(135deg, rgba(255, 228, 94, .06) 0 6px, transparent 6px 12px); }
.chalk-line span { font-family: 'Press Start 2P', monospace; font-size: 7px; letter-spacing: .12em; color: var(--neon-yellow); }
.chalk-line b { font-weight: normal; font-size: 9px; margin-left: 4px; text-shadow: 0 0 6px rgba(255, 228, 94, .5); }
.chalk-line em { font-style: normal; font-family: 'Press Start 2P', monospace; font-size: 5.5px; letter-spacing: .08em; color: var(--text-dim); }
/* Tighter picks header */
#picks-screen .wrap { gap: 12px; }
.picks-pay { margin: 0 0 -4px; gap: 5px; }
.picks-pay span { padding: 4px 8px; }
.picks-q { width: 22px; height: 22px; font-size: 8px; }
.picks-countdown { padding: 8px 12px; gap: 3px; }
.picks-countdown .cd-left { gap: 3px; }
.picks-countdown .cd-clock { font-size: 15px; }
.picks-countdown .cd-game { font-size: 9.5px; }
.picks-countdown .cd-status { gap: 3px; }
.picks-countdown .cd-chip { padding: 4px 6px; min-width: 50px; font-size: 7px; }
/* Lock clock as an arcade scoreboard */
.picks-countdown { position: relative; overflow: hidden; background:
    repeating-linear-gradient(0deg, rgba(5, 217, 232, .05) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 20% 0%, rgba(5, 217, 232, .16), transparent 60%),
    linear-gradient(180deg, #0a0820, #06040f);
  box-shadow: 0 0 16px rgba(5, 217, 232, .25), inset 0 0 20px rgba(5, 217, 232, .08);
  animation: cd-glow 2.6s ease-in-out infinite; }
@keyframes cd-glow { 50% { box-shadow: 0 0 26px rgba(5, 217, 232, .45), inset 0 0 22px rgba(5, 217, 232, .14); } }
.picks-countdown .cd-label { display: inline-flex; align-items: center; gap: 6px; }
.picks-countdown .cd-label u { width: 6px; height: 6px; border-radius: 50%; background: var(--neon-cyan); box-shadow: 0 0 6px var(--neon-cyan); animation: h2h-blink 1s steps(1) infinite; }
.cd-cells { display: flex; align-items: flex-start; gap: 3px; margin-top: 2px; }
.cd-cell { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.cd-cell b { display: block; min-width: 30px; padding: 4px 4px 3px; border-radius: 4px; background: #000; border: 1px solid rgba(255, 228, 94, .35); box-shadow: inset 0 -8px 0 rgba(255, 255, 255, .03); font-family: 'Press Start 2P', monospace; font-weight: normal; font-size: 15px; line-height: 1; color: var(--neon-yellow); text-align: center; text-shadow: 0 0 8px rgba(255, 228, 94, .65); font-variant-numeric: tabular-nums; }
.cd-cell em { font-style: normal; font-family: 'Press Start 2P', monospace; font-size: 5px; letter-spacing: .1em; color: var(--text-dim); }
.cd-colon { font-style: normal; font-family: 'Press Start 2P', monospace; font-size: 12px; color: rgba(255, 228, 94, .6); padding-top: 5px; animation: h2h-blink 1s steps(1) infinite; }
.picks-countdown .cd-game { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 10.5px; color: var(--text); }
.picks-countdown .cd-game i { font-style: normal; color: var(--text-dim); font-size: 9px; }
.cd-logo { width: 20px; height: 20px; object-fit: contain; }
.cd-when { margin-left: auto; font-size: 9.5px; color: var(--text-dim); }
.picks-countdown.soon .cd-cell b { color: var(--neon-pink); border-color: rgba(255, 32, 121, .5); text-shadow: 0 0 8px rgba(255, 32, 121, .7); }
@media (prefers-reduced-motion: reduce) { .picks-countdown, .cd-colon, .picks-countdown .cd-label u { animation: none; } }
/* Points table */
.picks-pay { gap: 6px; align-items: stretch; }
.picks-pay .pp { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 6px 8px; border-radius: 8px; border: 1px solid; background: rgba(0, 0, 0, .35); white-space: normal; }
.picks-pay .pp b { font-family: 'Press Start 2P', monospace; font-size: 17px; line-height: 1; }
.picks-pay .pp em { font-style: normal; font-family: 'Press Start 2P', monospace; font-size: 5.5px; line-height: 1.5; letter-spacing: .08em; color: var(--text); text-align: left; }
.picks-pay .pp.dog { border-color: rgba(255, 32, 121, .55); box-shadow: inset 0 0 12px rgba(255, 32, 121, .15); }
.picks-pay .pp.dog b { color: var(--neon-pink); text-shadow: 0 0 8px rgba(255, 32, 121, .7); }
.picks-pay .pp.ats { border-color: rgba(5, 217, 232, .55); box-shadow: inset 0 0 12px rgba(5, 217, 232, .15); }
.picks-pay .pp.ats b { color: var(--neon-cyan); text-shadow: 0 0 8px rgba(5, 217, 232, .7); }
.picks-pay .pp.fav { border-color: rgba(57, 255, 136, .55); box-shadow: inset 0 0 12px rgba(57, 255, 136, .15); }
.picks-pay .pp.fav b { color: var(--neon-green); text-shadow: 0 0 8px rgba(57, 255, 136, .7); }
.picks-pay .picks-q { align-self: center; }
/* Your card panel inside the clock */
.cd-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-left: 10px; border-left: 1px dashed rgba(5, 217, 232, .3); }
.cd-card > em { font-style: normal; font-family: 'Press Start 2P', monospace; font-size: 5.5px; letter-spacing: .1em; color: var(--text-dim); }
.cd-riding { display: flex; align-items: center; gap: 4px; }
.cd-riding b { font-family: 'Press Start 2P', monospace; font-weight: normal; font-size: 18px; color: #fff; text-shadow: 0 0 8px rgba(255, 255, 255, .4); }
.cd-riding i { font-style: normal; font-family: 'Press Start 2P', monospace; font-size: 5px; line-height: 1.5; color: var(--text-dim); }
.picks-countdown .cd-card .cd-status { flex-direction: row; gap: 3px; }
.picks-countdown .cd-card .cd-chip { min-width: 0; padding: 3px 5px; font-size: 6.5px; }
/* First-up strip and fuse */
.picks-countdown .cd-game { padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .06); }
.cd-first { font-style: normal; font-family: 'Press Start 2P', monospace; font-size: 5.5px; letter-spacing: .1em; color: var(--neon-cyan); margin-right: 2px; }
.cd-logo { width: 22px; height: 22px; }
.cd-fuse { display: block; position: relative; height: 4px; margin: 4px -12px -8px; background: rgba(255, 255, 255, .05); }
.cd-fuse i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #7a4a00, var(--neon-yellow)); }
.cd-fuse u { position: absolute; right: -3px; top: -3px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle, #fff 0 20%, var(--neon-yellow) 35%, rgba(255, 120, 0, .6) 60%, transparent 70%); animation: cd-spark .35s steps(2) infinite; }
@keyframes cd-spark { 50% { transform: scale(1.4); opacity: .7; } }
.picks-countdown.soon .cd-fuse i { background: linear-gradient(90deg, #5a0020, var(--neon-pink)); }
/* Cards match the header's rhythm: less air in rows, between rows and
   between cards. */
.games-list { gap: 8px; }
.game-card { padding: 8px 9px; gap: 5px; }
.tm-row { padding: 3px 6px; }
.matchup-cards-row { gap: 3px; }
.pick-mini-btn { min-height: 28px; }
.game-submit-row { margin-top: -2px; }
.game-submit-note { font-size: 9.5px; }
/* Three equal point tiles */
.picks-pay .pp { flex: 1 1 0; min-width: 0; justify-content: center; }
.picks-pay .pp em { white-space: nowrap; }
/* Dog WIN is the biggest swing on the card: a warmer resting state so the
   eye finds it before the tap. Picked state still wins. */
.pick-mini-btn.upset:not(.selected) { border-color: rgba(255, 32, 121, .45); background: rgba(255, 32, 121, .07); box-shadow: inset 0 0 10px rgba(255, 32, 121, .08); }
.pick-mini-btn.upset:not(.selected) .pk-label { color: #ffd6e6; }
/* Kickoff time as a right-aligned tag on the FIRST UP strip */
.cd-when { margin-left: auto; display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 7px; border-radius: 5px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(0, 0, 0, .3); font-size: 9.5px; color: var(--text); white-space: nowrap; }
.cd-when i { font-style: normal; font-family: 'Press Start 2P', monospace; font-size: 5px; letter-spacing: .1em; color: var(--text-dim); }
/* Rank badge seated beside the name: same baseline, a little more air */
.tm-name .tm-rank { font-size: 8px; align-self: center; margin-right: 1px; padding: 1px 3px; border-radius: 3px; background: rgba(255, 255, 255, .08); color: var(--text); }
.tm-rank::before { opacity: .5; }
/* Prize board: pixel icon, inset score digit, glass tile, attract sweep */
.picks-pay { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr 52px; gap: 5px; padding: 4px; border-radius: 10px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .08); overflow: hidden; }
.picks-pay::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .09), transparent); animation: pp-sweep 5.5s ease-in-out infinite; pointer-events: none; }
@keyframes pp-sweep { 0%, 60% { left: -40%; } 100% { left: 120%; } }
.picks-pay .pp { display: grid; grid-template-columns: auto auto 1fr; align-items: center; justify-items: start; gap: 6px; padding: 6px 7px; border-radius: 7px; border: 1px solid; background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .25)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -8px 14px rgba(0, 0, 0, .35); min-width: 0; }
.picks-pay .pp-ico { width: 16px; height: 16px; flex: none; }
.picks-pay .pp b { display: inline-block; min-width: 24px; padding: 3px 3px 2px; border-radius: 4px; background: #000; text-align: center; font-family: 'Press Start 2P', monospace; font-size: 15px; line-height: 1; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 0 10px currentColor; }
.picks-pay .pp em { font-style: normal; font-family: 'Press Start 2P', monospace; font-size: 5.5px; line-height: 1.5; letter-spacing: .08em; color: var(--text); text-align: left; }
.picks-pay .pp.dog { border-color: rgba(255, 32, 121, .55); color: var(--neon-pink); }
.picks-pay .pp.ats { border-color: rgba(5, 217, 232, .55); color: var(--neon-cyan); }
.picks-pay .pp.fav { border-color: rgba(57, 255, 136, .55); color: var(--neon-green); }
.picks-pay .pp.dog b, .picks-pay .pp.ats b, .picks-pay .pp.fav b { text-shadow: none; }
.picks-pay .pp.q { grid-template-columns: 1fr; justify-items: center; gap: 3px; padding: 5px 4px; border-color: rgba(255, 228, 94, .5); color: var(--neon-yellow); background: linear-gradient(180deg, rgba(255, 228, 94, .08), rgba(0, 0, 0, .25)); cursor: pointer; }
.picks-pay .pp.q b { min-width: 20px; font-size: 11px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 0 8px currentColor; }
.picks-pay .pp.q em { font-size: 5px; }
.picks-pay .pp:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { .picks-pay::after { animation: none; } }
/* Rank badge takes less room so ranked and unranked names stay close to aligned. */
.tm-name .tm-rank { font-size: 7px; padding: 1px 2px; margin-right: 0; letter-spacing: 0; }
.tm-name { gap: 3px; }
/* Rank rides on the logo's corner, so ranked and unranked names align. */
.tm-logo-wrap { position: relative; width: 22px; height: 22px; flex: none; }
.tm-logo-wrap .tm-logo { display: block; }
.tm-logo-wrap .tm-rank { position: absolute; right: -7px; bottom: -4px; padding: 1px 2px; border-radius: 3px; background: #0b0014; border: 1px solid rgba(255, 255, 255, .25); font-size: 6px; line-height: 1; color: #fff; align-self: auto; margin: 0; }
.tm-logo-wrap .tm-rank::before { opacity: .55; }
/* Rank tag: readable on the logo corner */
.tm-logo-wrap .tm-rank { right: -9px; bottom: -6px; padding: 2px 3px; font-size: 7.5px; font-weight: 800; color: #fff; border-color: rgba(255, 255, 255, .22); background: #12001c; box-shadow: 0 0 6px rgba(0, 0, 0, .8); }
.tm-logo-wrap .tm-rank::before { opacity: .65; }
.tm-id { gap: 12px; }
/* FIRST UP strip: no hole before the kickoff tag */
.picks-countdown .cd-game { justify-content: flex-start; gap: 8px; }
.cd-when { margin-left: 4px; }
/* Countdown alignment: two columns share top and bottom edges; the strip
   below is label | centered matchup | kickoff tag. */
.picks-countdown .cd-top { display: grid; grid-template-columns: 1fr auto; align-items: stretch; gap: 12px; }
.picks-countdown .cd-left { display: flex; flex-direction: column; justify-content: flex-start; gap: 5px; }
.cd-card { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 5px; padding-left: 12px; border-left: 1px dashed rgba(5, 217, 232, .3); }
.cd-riding b { font-size: 16px; }
.cd-cells { margin-top: 0; }
.picks-countdown .cd-game { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; }
.cd-match { display: inline-flex; align-items: center; gap: 6px; justify-self: center; white-space: nowrap; }
.picks-countdown .cd-game .cd-logo { display: inline-block; }
.cd-when { margin-left: 0; justify-self: end; }
.picks-countdown .cd-game { align-self: stretch; width: 100%; }

/* Prize board, arcade cabinet tiles: hatched face, big score + PTS, corner tier tag, coloured underline */
.picks-pay { grid-template-columns: 1fr 1fr 1fr 44px; gap: 6px; padding: 0; background: none; border: 0; overflow: visible; border-radius: 0; }
.picks-pay::after { display: none; }
.picks-pay .pp { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 6px; padding: 7px 8px 7px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .1); border-bottom: 3px solid currentColor; background: #0b0614 repeating-linear-gradient(135deg, rgba(255, 255, 255, .045) 0 2px, transparent 2px 7px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 2px 0 rgba(0, 0, 0, .5), 0 0 12px -6px currentColor; overflow: hidden; }
.picks-pay .pp::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .4)); pointer-events: none; }
.picks-pay .pp > * { position: relative; }
.picks-pay .pp-tag { position: absolute; top: 5px; right: 6px; font-style: normal; font-family: 'Press Start 2P', monospace; font-size: 5px; letter-spacing: .1em; color: currentColor; opacity: .85; }
.picks-pay .pp-num { display: flex; align-items: baseline; gap: 4px; }
.picks-pay .pp b { min-width: 0; padding: 0; background: none; box-shadow: none; text-shadow: 0 0 10px rgba(255, 255, 255, .25); font-family: 'Press Start 2P', monospace; font-size: 22px; line-height: 1; color: #fff; }
.picks-pay .pp small { font-family: 'Press Start 2P', monospace; font-size: 6px; color: var(--text-dim); letter-spacing: .06em; }
.picks-pay .pp em { display: flex; align-items: center; gap: 5px; font-style: normal; font-family: 'Press Start 2P', monospace; font-size: 5.5px; letter-spacing: .08em; color: var(--text); white-space: nowrap; line-height: 1; }
.picks-pay .pp em u { text-decoration: none; font-family: system-ui, sans-serif; font-size: 10px; line-height: 1; color: currentColor; }
.picks-pay .pp.dog, .picks-pay .pp.ats, .picks-pay .pp.fav { color: var(--neon-pink); }
.picks-pay .pp.ats { color: var(--neon-cyan); }
.picks-pay .pp.fav { color: var(--neon-green); }
.picks-pay .pp.q { align-items: center; justify-content: center; gap: 5px; padding: 6px 4px; color: var(--neon-yellow); background: #0b0614 repeating-linear-gradient(135deg, rgba(255, 228, 94, .07) 0 2px, transparent 2px 7px); cursor: pointer; }
.picks-pay .pp.q b { font-size: 18px; color: var(--neon-yellow); text-shadow: 0 0 10px rgba(255, 228, 94, .55); }
.picks-pay .pp.q em { font-size: 5px; }
.picks-pay .pp:active { transform: translateY(2px); border-bottom-width: 1px; }
.picks-pay .pp-num { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.picks-pay .pp.dog b, .picks-pay .pp.ats b, .picks-pay .pp.fav b { color: #fff; text-shadow: 0 0 10px rgba(255, 255, 255, .25); }
.picks-pay .pp.q b { min-width: 0; padding: 0; background: none; box-shadow: none; }
/* Prize tiles need room once the pixel font loads: taller face, bigger digit, clearer tag */
.picks-pay { gap: 7px; margin-bottom: 2px; }
.picks-pay .pp { min-height: 68px; padding: 9px 9px 8px; gap: 9px; justify-content: space-between; }
.picks-pay .pp b, .picks-pay .pp.dog b, .picks-pay .pp.ats b, .picks-pay .pp.fav b { font-size: 26px; }
.picks-pay .pp small { font-size: 7px; }
.picks-pay .pp-tag { top: 6px; right: 7px; font-size: 6px; opacity: 1; text-shadow: 0 0 6px currentColor; }
.picks-pay .pp em { font-size: 6px; gap: 6px; }
.picks-pay .pp em u { font-size: 12px; }
.picks-pay .pp.q { min-height: 68px; padding: 8px 4px; }
.picks-pay .pp.q b { font-size: 22px; }
.picks-pay .pp.q em { font-size: 5.5px; }

/* Prize strip v3: slim skewed arcade tiles, neon digit, label beside it */
.picks-pay { grid-template-columns: 1fr 1fr 1fr 34px; gap: 6px; margin: 0 4px 2px; }
.picks-pay .pp, .picks-pay .pp.q { position: relative; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 7px; min-height: 0; height: 34px; padding: 0 6px; border: 1px solid currentColor; border-bottom-width: 1px; border-radius: 3px; background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .55)), #07030d; box-shadow: 0 0 10px -3px currentColor, inset 0 0 8px -4px currentColor, inset 0 1px 0 rgba(255, 255, 255, .1); transform: skewX(-8deg); overflow: visible; }
.picks-pay .pp::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, .25) 2px 3px); pointer-events: none; }
.picks-pay .pp > * { position: relative; transform: skewX(8deg); }
.picks-pay .pp b, .picks-pay .pp.dog b, .picks-pay .pp.ats b, .picks-pay .pp.fav b, .picks-pay .pp.q b { font-family: 'Press Start 2P', monospace; font-size: 16px; line-height: 1; color: currentColor; text-shadow: 0 0 6px currentColor, 0 0 14px currentColor; padding: 0; background: none; box-shadow: none; }
.picks-pay .pp em { display: flex; flex-direction: row; align-items: center; gap: 4px; font-size: 5.5px; letter-spacing: .06em; color: #fff; text-shadow: 0 0 4px rgba(255, 255, 255, .35); line-height: 1; }
.picks-pay .pp em u { font-size: 9px; color: currentColor; }
.picks-pay .pp.q { padding: 0; gap: 0; }
.picks-pay .pp.q b { font-size: 14px; }
.picks-pay .pp:active { transform: skewX(-8deg) translateY(1px); }
/* Game Box board: pixel possession marker instead of a font glyph; ticker never overflows */
.sim-tm.poss span::after, .sim-tm.r.poss span::before { content: ""; display: inline-block; width: 0; height: 0; margin: 0 0 0 3px; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-left: 4px solid var(--g3); vertical-align: middle; }
.sim-tm.r.poss span::before { margin: 0 3px 0 0; border-left: 0; border-right: 4px solid var(--g3); }
.sim-tm span { white-space: nowrap; }
.sim-tm { min-width: 0; }
.sim-ticker { gap: 6px; }
.sim-ticker b { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sim-ticker span { flex: none; }
/* Game Box logos: dark ink on the green screen (multiply), so the mark's shape reads instead of a blob */
.sim-tm img, .sim-plogo, .sim-ez img { filter: grayscale(1) contrast(2.4) brightness(1.05); mix-blend-mode: multiply; opacity: .92; image-rendering: auto; }
.sim-tm img { width: 20px; height: 20px; }
.sim-plogo { width: 14px; height: 14px; }
.sim-ez img { width: 78%; opacity: .55; }
.sim-tm.r.poss span::after { display: none; }

/* Prize board retired: payouts already sit on every pick button. Rules live on a small ? in the countdown label. */
.cd-q { margin-left: 8px; width: 16px; height: 16px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 228, 94, .6); background: rgba(255, 228, 94, .1); color: var(--neon-yellow); font-family: 'Press Start 2P', monospace; font-size: 7px; line-height: 1; cursor: pointer; vertical-align: middle; }
.cd-q:active { transform: translateY(1px); }

/* Picks card, scoreboard layout: away on the left, home on the right, the
   four chips face to face in the middle. */
.hz-row { display: grid !important; grid-template-columns: 1fr auto auto auto 1fr; align-items: center; gap: 6px; }
.hz-tm { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.hz-tm .tm-logo { width: 38px; height: 38px; object-fit: contain; }
.hz-nm { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-family: 'Orbitron', system-ui, sans-serif; font-weight: 800; font-size: 12px; letter-spacing: .02em; color: var(--text); white-space: nowrap; text-transform: uppercase; }
.hz-tm.picked .hz-nm { color: var(--neon-cyan); }
.hz-rec { min-height: 9px; font-family: 'Press Start 2P', monospace; font-size: 6.5px; color: var(--text-dim); white-space: nowrap; }
.hz-rec b { font-weight: normal; color: var(--neon-yellow); margin-left: 4px; }
.hz-col { display: flex; flex-direction: column; gap: 5px; }
.hz-col .pick-mini-btn { justify-content: center; min-height: 29px; padding: 0 6px; width: 84px; }
.hz-at { font-family: 'Press Start 2P', monospace; font-size: 6.5px; color: var(--text-dim); padding: 5px 4px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 5px; background: rgba(255, 255, 255, .03); }
@media (max-width: 360px) { .hz-col .pick-mini-btn { width: 76px; padding: 0 4px; } .hz-tm .tm-logo { width: 32px; height: 32px; } .hz-nm { font-size: 11px; } }
.hz-nm { white-space: normal; overflow: visible; text-overflow: clip; text-align: center; line-height: 1.1; font-size: 11px; word-break: break-word; }
.hz-col .pick-mini-btn { width: 78px; padding: 0 5px; }
.hz-row { gap: 5px; }
.hz-col .pick-mini-btn { width: 86px; }
.hz-nm { font-size: 12px; }
.hz-tm .tm-logo { width: 42px; height: 42px; }

/* Saved stamp: one small centred line instead of a full row */
.game-stamp { margin-top: 5px; text-align: center; font-family: 'Press Start 2P', monospace; font-size: 5.5px; letter-spacing: .1em; color: var(--neon-green); opacity: .75; text-transform: uppercase; }
/* Locked scorebug in the same scoreboard shape as the pick card */
.lr-hz { grid-template-columns: 1fr auto auto auto 1fr; gap: 4px; padding: 4px 0 2px; }
.lr-hz .hz-nm { font-size: 11px; }
.lr-sc { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 44px; }
.lr-sc .lr-score { min-width: 0; text-align: center; font-size: 18px; }
.lr-sc.picked .lr-score { color: var(--neon-cyan); text-shadow: 0 0 6px rgba(5, 217, 232, .5); }
.lr-sc.picked .lr-score.win { color: var(--neon-green); text-shadow: 0 0 6px rgba(57, 255, 136, .6); }
.lr-sc .lr-bet { font-size: 9px; padding: 2px 5px; gap: 3px; }
.lr-sc .lr-bet-pts { font-size: 5px; }
.lr-mid { font-family: 'Press Start 2P', monospace; font-size: 6px; color: var(--text-dim); padding: 5px 5px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 5px; background: rgba(255, 255, 255, .03); text-align: center; line-height: 1.4; max-width: 62px; }
.locked-result.live .lr-mid { color: var(--neon-yellow); border-color: rgba(255, 228, 94, .4); }
.locked-result.final .lr-mid { color: var(--text); }
.lr-hz-tm.picked .hz-nm { color: var(--neon-cyan); }
.lr-foot { padding-top: 6px; }
.hz-nm { font-size: 11px; word-break: normal; overflow-wrap: normal; letter-spacing: 0; }
.hz-col .pick-mini-btn { width: 82px; }
.lr-sc { justify-content: flex-start; min-height: 50px; }
.hz-nm.lg { font-size: 9.5px; }
.hz-nm.xl { font-size: 8px; letter-spacing: -.01em; }

/* Saved stamp rides under the game line in the header, inside the height the buttons already take */
.game-meta-left { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.game-meta-left .game-stamp { margin: 0; text-align: left; }

/* Line meter: replaces the chips and the trend chart */
.lm { padding: 8px 10px 8px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 8px; background: rgba(0, 0, 0, .35); }
.lm-axis { position: relative; height: 6px; margin: 30px 44px 34px; border-radius: 3px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .16) 0 1px, transparent 1px calc(100% / var(--ticks, 8))), rgba(255, 255, 255, .08); }
.lm-band { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: linear-gradient(90deg, var(--neon-yellow), var(--neon-cyan)); opacity: .85; }
.lm-zero { position: absolute; top: -5px; bottom: -5px; width: 1px; background: rgba(255, 255, 255, .3); transform: translateX(-50%); }
.lm-pt { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; border: 2px solid; border-radius: 2px; background: #07030d; }
.lm-pt.open { border-color: var(--text-dim); width: 8px; height: 8px; }
.lm-pt.seal { border-color: var(--neon-yellow); background: var(--neon-yellow); box-shadow: 0 0 8px rgba(255, 228, 94, .7); }
.lm-pt.now { border-color: var(--neon-cyan); background: var(--neon-cyan); border-radius: 50%; box-shadow: 0 0 8px rgba(5, 217, 232, .7); }
.lm-lab { position: absolute; transform: translateX(-50%); font-family: 'Press Start 2P', monospace; font-size: 5.5px; letter-spacing: .06em; white-space: nowrap; text-align: center; line-height: 1.6; }
.lm-lab.up { bottom: 13px; } .lm-lab.dn { top: 13px; }
.lm-lab b { display: block; font-family: 'Orbitron', system-ui, sans-serif; font-weight: 800; font-size: 11px; letter-spacing: 0; }
.lm-lab.open { color: var(--text-dim); } .lm-lab.seal { color: var(--neon-yellow); } .lm-lab.now { color: var(--neon-cyan); }
.lm-end { position: absolute; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 3px; font-family: 'Press Start 2P', monospace; font-size: 5px; color: var(--text-dim); }
.lm-end img { width: 22px; height: 22px; object-fit: contain; }
.lm-end.l { left: -40px; } .lm-end.r { right: -40px; }
.lm-read { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px dashed rgba(255, 255, 255, .1); font-family: 'Press Start 2P', monospace; font-size: 6px; line-height: 1.7; color: var(--text); }
.lm-read em { font-style: normal; color: var(--neon-green); }
.lm-ou { flex: none; color: var(--text-dim); } .lm-ou em { font-style: normal; color: var(--text-dim); margin-right: 4px; }
.lm-end em { font-style: normal; }
/* One name size on every card; long names wrap at the space, never shrink */
.hz-nm, .hz-nm.lg, .hz-nm.xl { font-size: 10px; letter-spacing: 0; }
/* Countdown block centred in its half of the board */
.picks-countdown .cd-left { align-items: center; text-align: center; }
.cd-cells { justify-content: center; }
.cd-label { justify-content: center; }
.picks-countdown .cd-left { justify-content: center; align-self: stretch; }
.picks-countdown .cd-card { justify-content: center; align-self: stretch; }
/* NORTHWESTERN is the longest one-word name on the slate: chips give up 6px so it fits at one uniform size */
.hz-col .pick-mini-btn { width: 76px; padding: 0 4px; }
.hz-nm, .hz-nm.lg, .hz-nm.xl { font-size: 9px; letter-spacing: -.01em; }
.hz-tm { overflow: visible; }
/* Fluid card: chips, logos, names and the AT pill scale with the card's width
   (cqw = 1% of the card), clamped so tiny and huge phones both stay sane. */
.game-card { container-type: inline-size; }
.hz-row { gap: clamp(3px, 1.4cqw, 6px); }
.hz-col .pick-mini-btn { width: clamp(68px, 22cqw, 90px); min-height: clamp(26px, 8cqw, 31px); }
.hz-col .pick-mini-btn .pk-line { font-size: clamp(10px, 3.4cqw, 13px); }
.hz-col .pick-mini-btn .pk-pts { font-size: clamp(7px, 2.4cqw, 9.5px); }
.hz-tm .tm-logo { width: clamp(30px, 11cqw, 44px); height: clamp(30px, 11cqw, 44px); }
.hz-nm, .hz-nm.lg, .hz-nm.xl { font-size: clamp(8px, 2.7cqw, 11px); }
.hz-rec { font-size: clamp(5.5px, 1.8cqw, 7px); }
.hz-at { font-size: clamp(5.5px, 1.8cqw, 7px); padding: clamp(3px, 1.2cqw, 5px) clamp(2px, 1cqw, 4px); }
.lr-sc .lr-score { font-size: clamp(14px, 4.8cqw, 19px); }
.picks-countdown .cd-top { align-items: center !important; }
.picks-countdown .cd-left, .picks-countdown .cd-card { display: flex !important; flex-direction: column; justify-content: center !important; align-items: center; align-self: center !important; margin: 0; }
.picks-countdown .cd-card { align-self: stretch !important; }
/* Equal air above and below the clock row; the FIRST UP strip sits closer under it */
.picks-countdown .cd-top { padding: 6px 0 4px; }
.picks-countdown .cd-game { margin-top: 2px; padding-top: 6px; }
.picks-countdown .cd-left { gap: 4px; }
.picks-countdown .cd-cells { margin-top: 0; }
/* Name scale trimmed so the longest one-word name still fits */
.hz-nm, .hz-nm.lg, .hz-nm.xl { font-size: clamp(8px, 2.45cqw, 10.5px); }
.hz-col .pick-mini-btn { width: clamp(66px, 21cqw, 88px); }

/* Countdown digits: a flip-style tick when a number changes, and a slow breathing glow on the seconds cell */
.cd-cell b.tick { animation: cd-tick .22s steps(3) both; }
@keyframes cd-tick { 0% { transform: translateY(-5px); opacity: .2; } 60% { transform: translateY(1px); opacity: 1; } 100% { transform: none; } }
.cd-cell b { position: relative; overflow: hidden; }
.cd-cell b::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .6); pointer-events: none; }
.cd-cells .cd-cell:last-child b { animation: cd-breathe 1s ease-in-out infinite alternate; }
@keyframes cd-breathe { from { text-shadow: 0 0 4px rgba(255, 228, 94, .35); } to { text-shadow: 0 0 10px rgba(255, 228, 94, .85); } }
.cd-cells .cd-cell:last-child b.tick { animation: cd-tick .22s steps(3) both, cd-breathe 1s ease-in-out infinite alternate; }
.cd-colon { animation: cd-blink 1s steps(2) infinite; }
@keyframes cd-blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .cd-cell b, .cd-cell b.tick, .cd-colon { animation: none !important; } }

/* Line meter: the band carries an arrowhead at the NOW end, so direction reads without the labels */
.lm-band::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; transform: translateY(-50%); }
.lm-band.r::after { right: -7px; border-left: 8px solid var(--neon-cyan); }
.lm-band.l::after { left: -7px; border-right: 8px solid var(--neon-cyan); }
.lm-band { overflow: visible; }
.lm-pt.now { z-index: 1; }
.lm-read em { letter-spacing: .04em; }
/* Direction: a big arrowhead just past the NOW dot, nudging in the direction of the move, and chevrons along the band */
.lm-band::after { border-top-width: 8px; border-bottom-width: 8px; z-index: 2; filter: drop-shadow(0 0 4px rgba(5, 217, 232, .8)); animation: lm-nudge .9s ease-in-out infinite alternate; }
.lm-band.r::after { right: -22px; border-left-width: 11px; }
.lm-band.l::after { left: -22px; border-right-width: 11px; }
.lm-band.r { background: linear-gradient(90deg, var(--neon-yellow), var(--neon-cyan)), repeating-linear-gradient(90deg, transparent 0 4px, rgba(0, 0, 0, .35) 4px 6px); background-blend-mode: multiply; }
.lm-band.l { background: linear-gradient(270deg, var(--neon-yellow), var(--neon-cyan)), repeating-linear-gradient(90deg, transparent 0 4px, rgba(0, 0, 0, .35) 4px 6px); background-blend-mode: multiply; }
@keyframes lm-nudge { from { transform: translateY(-50%) translateX(0); } to { transform: translateY(-50%) translateX(3px); } }
.lm-band.l::after { animation-name: lm-nudge-l; }
@keyframes lm-nudge-l { from { transform: translateY(-50%) translateX(0); } to { transform: translateY(-50%) translateX(-3px); } }
.lm-lab.now { z-index: 3; }
@media (prefers-reduced-motion: reduce) { .lm-band::after { animation: none; } }

/* Move indicator beneath the axis: a thin arrow from SEALED to NOW carrying the size of the move */
.lm-axis { margin-bottom: 50px; }
.lm-move { position: absolute; top: 40px; height: 1px; min-width: 14px; background: var(--neon-cyan); opacity: .9; }
.lm-move::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.lm-move.r::after { right: -5px; border-left: 6px solid var(--neon-cyan); }
.lm-move.l::after { left: -5px; border-right: 6px solid var(--neon-cyan); }
.lm-move b { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); font-family: 'Press Start 2P', monospace; font-size: 6px; color: var(--neon-cyan); font-weight: normal; white-space: nowrap; }
.lm-move b::before { content: "+"; }
/* A selected chip is unmistakable: solid cyan, dark text, glow, check. */
.hz-col .pick-mini-btn.selected, .hz-col .pick-mini-btn.selected.upset, .hz-col .pick-mini-btn.selected.chalk { background: var(--neon-cyan); border-color: #fff; color: #06121a; box-shadow: 0 0 0 2px rgba(5, 217, 232, .35), 0 0 16px rgba(5, 217, 232, .75); }
.hz-col .pick-mini-btn.selected .pk-line, .hz-col .pick-mini-btn.selected .pk-label, .hz-col .pick-mini-btn.selected .pk-pts, .hz-col .pick-mini-btn.selected .pk-pts i { color: #06121a; text-shadow: none; }
.hz-col .pick-mini-btn.selected::before { content: "✓"; position: absolute; top: -6px; right: -6px; width: 14px; height: 14px; border-radius: 50%; background: #fff; color: #06121a; font-size: 9px; line-height: 14px; text-align: center; font-family: system-ui, sans-serif; font-weight: 700; box-shadow: 0 0 6px rgba(5, 217, 232, .8); }
.hz-tm.picked .tm-logo { filter: drop-shadow(0 0 8px rgba(5, 217, 232, .8)); }
.hz-tm.picked .hz-nm { text-shadow: 0 0 8px rgba(5, 217, 232, .6); }
/* Middle ground: translucent cyan fill, firm border, white text, the check badge stays */
.hz-col .pick-mini-btn.selected, .hz-col .pick-mini-btn.selected.upset, .hz-col .pick-mini-btn.selected.chalk { background: rgba(5, 217, 232, .22); border: 2px solid var(--neon-cyan); color: #fff; box-shadow: 0 0 10px rgba(5, 217, 232, .35); }
.hz-col .pick-mini-btn.selected .pk-line, .hz-col .pick-mini-btn.selected .pk-label { color: #fff; text-shadow: none; }
.hz-col .pick-mini-btn.selected .pk-pts, .hz-col .pick-mini-btn.selected .pk-pts i { color: var(--neon-yellow); }
.hz-col .pick-mini-btn.selected.upset .pk-pts, .hz-col .pick-mini-btn.selected.upset .pk-pts i { color: #ff6fa3; }
.hz-col .pick-mini-btn.selected::before { background: var(--neon-cyan); color: #06121a; box-shadow: 0 0 5px rgba(5, 217, 232, .7); }
.hz-tm.picked .tm-logo { filter: none; }
.hz-tm.picked .hz-nm { text-shadow: none; }

/* Line meter v2: one wedge from SEALED to NOW carrying the move, coloured by your pick; no arrowheads, no extra row */
.lm-axis { margin-bottom: 36px; }
.lm-band::after { display: none; }
.lm-band { height: auto; top: -3px; bottom: -3px; border-radius: 2px; background: var(--neon-cyan); opacity: .9; background-blend-mode: normal; }
.lm-band.r { clip-path: polygon(0 35%, 100% 0, 100% 100%, 0 65%); }
.lm-band.l { clip-path: polygon(0 0, 100% 35%, 100% 65%, 0 100%); }
.lm-band.good { background: var(--neon-green); }
.lm-band.bad { background: var(--neon-pink); }
.lm-band b { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); font-family: 'Press Start 2P', monospace; font-size: 6px; font-weight: normal; color: inherit; white-space: nowrap; clip-path: none; }
.lm-band.r b, .lm-band.l b { color: #fff; }
.lm-band.good b { color: var(--neon-green); } .lm-band.bad b { color: var(--neon-pink); }
.lm-band b::before { content: "+"; }
.lm-read em.good { color: var(--neon-green); } .lm-read em.bad { color: var(--neon-pink); }
.lm-pt.seal { z-index: 2; }

.lm-band.r, .lm-band.l { background: var(--neon-cyan); background-blend-mode: normal; }
.lm-band.r.good, .lm-band.l.good { background: var(--neon-green); }
.lm-band.r.bad, .lm-band.l.bad { background: var(--neon-pink); }
.lm-mv { position: absolute; top: -16px; text-align: center; font-family: 'Press Start 2P', monospace; font-size: 6px; font-weight: normal; color: var(--neon-cyan); white-space: nowrap; pointer-events: none; }
.lm-mv.good { color: var(--neon-green); } .lm-mv.bad { color: var(--neon-pink); }
.lm-mv::before { content: "+"; }

/* Line meter v3: flat band with a small head, never a blob; number lives in the text */
.lm-band, .lm-band.r, .lm-band.l { top: 0; bottom: 0; height: auto; clip-path: none; border-radius: 3px; min-width: 6px; }
.lm-band::after { display: block; content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; filter: none; animation: none; z-index: 1; }
.lm-band.r::after { right: -9px; left: auto; border-left: 8px solid var(--neon-cyan); border-right: 0; }
.lm-band.l::after { left: -9px; right: auto; border-right: 8px solid var(--neon-cyan); border-left: 0; }
.lm-band.good::after { border-left-color: var(--neon-green); border-right-color: var(--neon-green); }
.lm-band.bad::after { border-left-color: var(--neon-pink); border-right-color: var(--neon-pink); }
.lm-band.r.good::after, .lm-band.l.good::after { border-left-color: var(--neon-green); border-right-color: var(--neon-green); }
.lm-band.r.bad::after, .lm-band.l.bad::after { border-left-color: var(--neon-pink); border-right-color: var(--neon-pink); }
.lm-band.r.good::after { border-right: 0; } .lm-band.l.good::after { border-left: 0; } .lm-band.r.bad::after { border-right: 0; } .lm-band.l.bad::after { border-left: 0; }
.lm-pt.now { z-index: 2; }
.lm-mv { display: none; }
.lm-axis { margin-bottom: 34px; }
.lm-read { font-size: 6.5px; line-height: 1.9; }

/* Upset siren on the final: two lines, inverted colours, faster blink */
.sim-upset { display: flex; flex-direction: column; align-items: center; gap: 4px; line-height: 1.4; }
.sim-upset b { font-weight: normal; font-size: 9px; letter-spacing: .08em; }
.sim-upset i { font-style: normal; font-size: 11px; }
.sim-field.over .sim-flash.hold.upset { animation: sim-upset .45s steps(1) infinite !important; font-size: 11px; }
@keyframes sim-upset { 0% { background: var(--g3); color: var(--g0); } 50% { background: var(--g0); color: var(--g3); box-shadow: inset 0 0 0 3px var(--g3); } }
@media (prefers-reduced-motion: reduce) { .sim-field.over .sim-flash.hold.upset { animation: none !important; } }

/* Grid check lights by card state: green steady, yellow flashing, red dark */
.grid-lights.go i.on { background: var(--neon-green); border-color: #9fffc6; box-shadow: 0 0 8px var(--neon-green), 0 0 16px rgba(57, 255, 136, .6); }
.grid-lights.warn i { background: #3a2f08; border-color: #6a5a10; }
.grid-lights.warn i.on { background: var(--neon-yellow); border-color: #fff4b0; box-shadow: 0 0 8px var(--neon-yellow), 0 0 16px rgba(255, 228, 94, .6); animation: grid-warn .6s steps(2) infinite; }
@keyframes grid-warn { 50% { background: #5a4a10; box-shadow: none; } }
.grid-lights.none i { background: #3a0810; border-color: #5a1020; animation: grid-none 1.4s ease-in-out infinite alternate; }
@keyframes grid-none { to { background: #6a0f1c; box-shadow: 0 0 6px rgba(224, 16, 42, .45); } }
.grid-verdict { font-size: 9px; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .grid-lights i { animation: none !important; } }

/* Grid sheet export: readable, wrapping, selectable */
.con-grid { white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.5; user-select: text; -webkit-user-select: text; }

/* Grid card modal */
.gridcard-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .85); }
.gridcard-modal.hidden { display: none; }
.gridcard-box { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 100%; }
.gridcard-box img { width: min(360px, 92vw); height: auto; border-radius: 8px; border: 2px solid var(--neon-yellow); box-shadow: 0 0 24px rgba(255, 228, 94, .35); }
.gridcard-row { display: flex; gap: 8px; }
.gridcard-hint { margin: 0; font-family: 'Press Start 2P', monospace; font-size: 6px; color: var(--text-dim); letter-spacing: .08em; }

/* Countdown animations live on the cell, never on the digit, so WebKit repaints the number */
.cd-cell b, .cd-cell b.tick, .cd-cells .cd-cell:last-child b, .cd-cells .cd-cell:last-child b.tick { animation: none !important; transform: none !important; }
.cd-cell.tick { animation: cd-cell-tick .22s steps(3) both; }
@keyframes cd-cell-tick { 0% { transform: translateY(-4px); } 60% { transform: translateY(1px); } 100% { transform: none; } }
.cd-cells .cd-cell:last-child { animation: cd-cell-breathe 1s ease-in-out infinite alternate; }
@keyframes cd-cell-breathe { from { filter: drop-shadow(0 0 2px rgba(255, 228, 94, .3)); } to { filter: drop-shadow(0 0 7px rgba(255, 228, 94, .8)); } }
.cd-cells .cd-cell:last-child.tick { animation: cd-cell-tick .22s steps(3) both, cd-cell-breathe 1s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .cd-cell, .cd-cell.tick { animation: none !important; } }
/* Countdown digits as amber LED tiles: ghost segments behind the number, bevelled bezel, hot glow */
.cd-cell { position: relative; }
.cd-cell b { position: relative; min-width: 36px; padding: 6px 5px 5px; border-radius: 5px; border: 2px solid #2a1f06; background: radial-gradient(120% 90% at 50% 0%, #1c1400, #050300 70%); box-shadow: inset 0 0 12px rgba(255, 170, 0, .22), inset 0 2px 0 rgba(255, 255, 255, .05), 0 0 16px rgba(255, 190, 0, .35), 0 2px 0 #000; font-size: 20px; color: #ffd23f; text-shadow: 0 0 5px #ffb000, 0 0 16px rgba(255, 150, 0, .9); }
.cd-cell b::before { content: "88"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-top: 1px; color: rgba(255, 200, 60, .09); text-shadow: none; pointer-events: none; }
.cd-cell b::after { background: rgba(0, 0, 0, .5); }
.cd-cell em { color: #b89a4a; letter-spacing: .14em; margin-top: 3px; }
.cd-colon { color: #ffd23f; text-shadow: 0 0 8px #ffb000; font-size: 16px; }
.picks-countdown.soon .cd-cell b { color: #ff5c7a; text-shadow: 0 0 5px #ff2a5a, 0 0 16px rgba(255, 40, 90, .9); box-shadow: inset 0 0 12px rgba(255, 40, 90, .25), 0 0 16px rgba(255, 40, 90, .45), 0 2px 0 #000; border-color: #3a0612; }
.picks-countdown.soon .cd-colon { color: #ff5c7a; text-shadow: 0 0 8px #ff2a5a; }
.picks-countdown .cd-label { text-shadow: 0 0 8px rgba(5, 217, 232, .6); }
.cd-cell b { isolation: isolate; background: radial-gradient(120% 90% at 50% 0%, #110c00, #020100 70%); color: #ffdc5a; font-size: 21px; }
.cd-cell b::before { z-index: -1; color: rgba(255, 200, 60, .06); }
.cd-cell b::after { z-index: 1; background: rgba(0, 0, 0, .35); }
.cd-cells .cd-cell:last-child { animation: none; }
@keyframes cd-cell-breathe { from { filter: none; } to { filter: none; } }
.cd-cells .cd-cell:last-child b { animation: cd-sec-glow 1s ease-in-out infinite alternate !important; }
@keyframes cd-sec-glow { from { box-shadow: inset 0 0 12px rgba(255, 170, 0, .22), 0 0 10px rgba(255, 190, 0, .3), 0 2px 0 #000; } to { box-shadow: inset 0 0 14px rgba(255, 170, 0, .35), 0 0 24px rgba(255, 190, 0, .7), 0 2px 0 #000; } }
.cd-cell b { text-shadow: 0 0 3px #ffb000, 0 0 10px rgba(255, 150, 0, .6); }
.cd-cell b::before { color: rgba(255, 200, 60, .045); }
.ins-injsrc { margin: 4px 0 2px; color: var(--text-dim); } .ins-injsrc a { color: var(--neon-cyan); text-decoration: none; }
/* Upset siren at Game Boy pace: a slow two-frame blink with a short pause, not a strobe */
.sim-field.over .sim-flash.hold.upset { animation: sim-upset 1.6s steps(1) infinite !important; }
@keyframes sim-upset { 0%, 44% { background: var(--g3); color: var(--g0); box-shadow: none; } 50%, 94% { background: var(--g0); color: var(--g3); box-shadow: inset 0 0 0 3px var(--g3); } 95%, 100% { background: var(--g1); color: var(--g3); box-shadow: inset 0 0 0 3px var(--g3); } }

/* Folded news */
.ins-more-news { margin: 2px 0 6px; }
.ins-more-news summary { list-style: none; cursor: pointer; font-family: 'Press Start 2P', monospace; font-size: 6.5px; letter-spacing: .1em; color: var(--neon-cyan); padding: 6px 0; }
.ins-more-news summary::-webkit-details-marker { display: none; }
.ins-more-news summary span { display: inline-block; transition: transform .15s; margin-right: 4px; }
.ins-more-news[open] summary span { transform: rotate(90deg); }
/* Last Five fills the row: five equal tiles that grow with the sheet, logos and scores scaling with them */
.ins-form-r { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(4px, 1.2vw, 10px); flex-wrap: nowrap; }
.ins-fchip { min-width: 0; width: auto; padding: clamp(4px, 1.4vw, 10px) 2px clamp(3px, 1vw, 8px); gap: clamp(2px, .6vw, 5px); border-radius: clamp(6px, 1.6vw, 10px); }
.ins-fchip img { width: clamp(20px, 7.5vw, 44px); height: clamp(20px, 7.5vw, 44px); }
.ins-fchip b { font-size: clamp(7px, 2.2vw, 12px); }
.ins-fchip i { font-size: clamp(8.5px, 2.6vw, 15px); }
.ins-fchip u { font-size: clamp(6px, 1.8vw, 10px); }
.ins-form-r .ins-det { grid-column: 1 / -1; }
/* Line meter ends and the simulate button badge: logos sized to the sheet, not a fixed 22px */
.lm-axis { margin-left: clamp(44px, 12vw, 64px); margin-right: clamp(44px, 12vw, 64px); }
.lm-end img { width: clamp(26px, 8vw, 44px); height: clamp(26px, 8vw, 44px); }
.lm-end { gap: 4px; }
.lm-end.l { left: clamp(-44px, -12vw, -64px); } .lm-end.r { right: clamp(-44px, -12vw, -64px); }
.ins-sim-vs img { width: clamp(22px, 6.5vw, 34px); height: clamp(22px, 6.5vw, 34px); }

/* Injury rows with a verified sentence from the article unfold on tap. */
.ins-inj li.ins-q { padding: 0; }
.ins-inj li.ins-q details { width: 100%; }
.ins-inj li.ins-q summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px; padding: 4px 0; cursor: pointer; list-style: none; position: relative; -webkit-tap-highlight-color: transparent; }
.ins-inj li.ins-q summary::-webkit-details-marker { display: none; }
.ins-cols .ins-inj li.ins-q summary { flex-direction: column; align-items: flex-start; gap: 2px; }
.ins-q-tap { position: absolute; right: 2px; top: 6px; font-size: 10px; color: var(--neon-cyan); opacity: .7; transition: transform .18s ease; }
.ins-inj li.ins-q details[open] .ins-q-tap { transform: rotate(180deg); }
.ins-quote { margin: 0 0 6px; padding: 6px 8px; border-left: 2px solid var(--neon-cyan); background: rgba(0, 229, 255, .06); font-size: 10.5px; line-height: 1.4; color: var(--text); }
.ins-note { font-style: normal; }
.ins-quote-txt { font-style: italic; color: var(--text-dim); font-size: 10px; margin-top: 4px; }
.ins-note + .ins-quote-txt { padding-top: 4px; border-top: 1px dashed rgba(255, 255, 255, .1); }
.ins-q-src { margin-top: 4px; font-style: normal; font-size: 9.5px; color: var(--text-dim); }
.ins-q-src a { color: var(--neon-cyan); text-decoration: none; }

/* Expert picks: one tile per outlet, rows always full, no dead space. */
.xp-sum { font-family: 'Press Start 2P', monospace; font-size: 7px; letter-spacing: .08em; color: var(--neon-yellow); margin: 2px 0 6px; }
.xp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 0 4px; }
.xp-tile { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 6px 5px 6px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); color: var(--text); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.xp-tile.away { border-color: rgba(0, 229, 255, .35); background: linear-gradient(180deg, rgba(0, 229, 255, .10), rgba(0, 229, 255, .04)); }
.xp-tile.home { border-color: rgba(255, 32, 121, .35); background: linear-gradient(180deg, rgba(255, 32, 121, .10), rgba(255, 32, 121, .04)); }
.xp-out { width: 100%; text-align: center; font-size: 8.5px; line-height: 1.15; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-main { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; max-width: 100%; }
.xp-main img.xp-logo { width: 26px; height: 26px; flex: 0 0 auto; }
.xp-main b { font-family: 'Press Start 2P', monospace; font-size: 11px; letter-spacing: .02em; white-space: nowrap; color: var(--text); text-shadow: 0 0 8px rgba(255, 255, 255, .25); }
.xp-tile.away .xp-main b { color: var(--neon-cyan); text-shadow: 0 0 8px rgba(0, 229, 255, .45); }
.xp-tile.home .xp-main b { color: var(--neon-pink); text-shadow: 0 0 8px rgba(255, 32, 121, .45); }
.xp-meta { font-family: 'Press Start 2P', monospace; font-size: 5.5px; letter-spacing: .06em; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.xp-bar { display: block; width: 70%; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .12); overflow: hidden; margin-top: 1px; }
.xp-bar i { display: block; height: 100%; background: currentColor; }
.xp-tile.away .xp-bar i { background: var(--neon-cyan); }
.xp-tile.home .xp-bar i { background: var(--neon-pink); }
.xp-more { margin-top: 4px; }
.xp-more .xp-grid { margin-top: 6px; }

/* Scorebug footer: kickoff and TV on the left, the INFO pill on the right. */
.bug-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.bug-foot .bug-hidden-note { text-align: left; flex: 1 1 auto; min-width: 0; }
.bug-foot-txt { font-size: 9px; color: var(--text-dim); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bug-foot .insights-btn { flex: 0 0 auto; }

/* Live gamecast at the top of the INFO sheet. */
.lv { margin: 2px 0 8px; padding: 8px 10px 9px; border-radius: 10px; border: 1px solid rgba(0, 229, 255, .35); background: linear-gradient(180deg, rgba(0, 229, 255, .08), rgba(0, 229, 255, .02)); box-shadow: 0 0 14px rgba(0, 229, 255, .12); }
.lv.fin { border-color: rgba(255, 228, 94, .4); background: linear-gradient(180deg, rgba(255, 228, 94, .07), rgba(255, 228, 94, .02)); box-shadow: none; }
.lv-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.lv-tag { display: inline-flex; align-items: center; gap: 5px; font-family: 'Press Start 2P', monospace; font-size: 7px; letter-spacing: .1em; color: var(--neon-cyan); }
.lv.fin .lv-tag { color: var(--neon-yellow); }
.lv-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--neon-cyan); box-shadow: 0 0 6px var(--neon-cyan); animation: lvblink 1.2s steps(2, start) infinite; }
@keyframes lvblink { to { visibility: hidden; } }
.lv-clock { font-family: 'Press Start 2P', monospace; font-size: 8px; color: #fff; letter-spacing: .06em; }
.lv-rz { margin-left: auto; font-family: 'Press Start 2P', monospace; font-size: 6px; letter-spacing: .08em; color: var(--neon-pink); border: 1px solid rgba(255, 32, 121, .5); border-radius: 4px; padding: 3px 5px; }
.lv-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.lv-row img.lv-logo { width: 22px; height: 22px; }
.lv-ab { font-family: 'Press Start 2P', monospace; font-size: 9px; letter-spacing: .04em; color: var(--text); }
.lv-row.lead .lv-ab, .lv-row.lead .lv-sc { color: #fff; }
.lv-poss { width: 7px; height: 7px; border-radius: 50%; background: var(--neon-yellow); box-shadow: 0 0 6px var(--neon-yellow); }
.lv-sc { margin-left: auto; font-family: 'Press Start 2P', monospace; font-size: 14px; color: var(--text-dim); }
.lv-row.lead .lv-sc { text-shadow: 0 0 8px rgba(255, 255, 255, .35); }
.lv-sit { margin-top: 5px; font-size: 10.5px; color: var(--text); }
.lv-sit em { font-style: normal; color: var(--text-dim); }
.lv-last { margin-top: 4px; font-size: 10px; line-height: 1.35; color: var(--text-dim); }
.lv-last b { font-family: 'Press Start 2P', monospace; font-size: 6px; letter-spacing: .08em; color: var(--neon-cyan); margin-right: 4px; }
.lv .win-prob-bar { margin-top: 7px; }
.lv-sph { margin-top: 8px; font-family: 'Press Start 2P', monospace; font-size: 6px; letter-spacing: .1em; color: var(--text-dim); }
.lv-sp { list-style: none; margin: 3px 0 0; padding: 0; }
.lv-sp li { display: flex; align-items: center; gap: 6px; padding: 3px 0; border-top: 1px dashed rgba(255, 255, 255, .08); font-size: 10px; color: var(--text); }
.lv-sp img.lv-splogo { width: 14px; height: 14px; flex: 0 0 auto; }
.lv-spq { flex: 0 0 auto; font-size: 9px; color: var(--text-dim); min-width: 52px; }
.lv-sptxt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-spsc { flex: 0 0 auto; font-family: 'Press Start 2P', monospace; font-size: 7px; color: var(--neon-yellow); }

/* Scorebug detail: one row per bet, a cashing light on each. */
.bp { display: flex; flex-direction: column; gap: 6px; }
.bp-head { display: flex; align-items: center; gap: 8px; }
.bp-count { font-family: 'Press Start 2P', monospace; font-size: 7px; letter-spacing: .04em; white-space: nowrap; }
.bp-count.away { color: var(--neon-cyan); }
.bp-count.home { color: var(--neon-pink); }
.bp-split { flex: 1 1 auto; display: flex; height: 4px; border-radius: 2px; overflow: hidden; background: rgba(255, 32, 121, .55); }
.bp-split i.away { display: block; height: 100%; background: var(--neon-cyan); }
.bp-row { border-radius: 8px; padding: 6px 7px 7px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .07); border-left: 3px solid rgba(0, 229, 255, .6); }
.bp-row.home { border-left-color: rgba(255, 32, 121, .6); }
.bp-bet { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.bp-bet b { font-family: 'Press Start 2P', monospace; font-size: 8px; letter-spacing: .03em; color: #fff; }
.bp-logo { width: 16px; height: 16px; }
.bp-terms { font-family: 'Press Start 2P', monospace; font-size: 7px; color: var(--neon-yellow); }
.bp-bet .bp-pts, .bp-bet .pick-pill { margin-left: auto; }
.bp-pts { font-family: 'Press Start 2P', monospace; font-size: 6.5px; color: var(--text-dim); }
.bp-light { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .18); flex: 0 0 auto; }
.bp-row.up .bp-light { background: var(--neon-green); box-shadow: 0 0 6px var(--neon-green); }
.bp-row.down .bp-light { background: var(--neon-pink); box-shadow: 0 0 6px var(--neon-pink); }
.bp-row.push .bp-light { background: var(--neon-yellow); }
.bp-row.live.up { background: rgba(57, 255, 136, .05); }
.bp-row.live.down { background: rgba(255, 32, 121, .04); }
.bp-row.down:not(.live) { opacity: .7; }
.bp-chips { gap: 4px; }
.bp-none { font-size: 9px; color: var(--text-dim); text-align: center; }
.win-prob-labels .wp-cap { font-family: 'Press Start 2P', monospace; font-size: 5.5px; letter-spacing: .1em; color: var(--text-dim); align-self: center; }

/* Compact chips inside the bet rows so a half-width card fits two or three per line. */
.bp-row { padding: 5px 6px 6px; }
.bp-bet { margin-bottom: 4px; gap: 5px; }
.bp-chips { display: flex; flex-wrap: wrap; gap: 3px; }
.bp-chips .pick-chip { font-size: 9px; padding: 1px 6px 1px 1px; gap: 3px; min-height: 0; line-height: 1.3; }
.bp-chips .pick-chip-av { width: 13px; height: 13px; font-size: 7px; }
.bp-chips .pick-chip.me { box-shadow: 0 0 0 1px var(--neon-cyan), 0 0 6px rgba(0, 229, 255, .45); }

/* Inside bet rows the chips drop their pill: initial + name, inline. */
.bug-detail .bp-chips { gap: 2px 8px; }
.bug-detail .bp-chips .pick-chip { border: 0; background: none; padding: 0; gap: 3px; font-size: 9.5px; box-shadow: none; }
.bug-detail .bp-chips .pick-chip.me { color: var(--neon-cyan); text-shadow: 0 0 6px rgba(0, 229, 255, .6); background: none; box-shadow: none; }
.bug-detail .bp-chips .pick-chip.me .pick-chip-av { box-shadow: 0 0 0 1.5px var(--neon-cyan); }

/* Live gamecast: takes over the INFO sheet while a game is on. */
.gc { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 8px; }
.gc-strip { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; padding: 8px 8px; border-radius: 10px; border: 1px solid rgba(0, 229, 255, .3); background: linear-gradient(180deg, rgba(0, 229, 255, .08), rgba(0, 229, 255, .02)); }
.gc-tm { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; }
.gc-tm.h { flex-direction: row-reverse; }
.gc-tm img.gc-logo { width: 26px; height: 26px; flex: 0 0 auto; }
.gc-tm b { font-family: 'Press Start 2P', monospace; font-size: 8px; color: var(--text); white-space: nowrap; }
.gc-sc { font-family: 'Press Start 2P', monospace; font-size: 18px; color: #fff; margin: 0 2px; }
.gc-tm.a .gc-sc { margin-left: auto; }
.gc-tm.h .gc-sc { margin-right: auto; }
.gc-pdot { position: absolute; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--neon-yellow); box-shadow: 0 0 6px var(--neon-yellow); }
.gc-tm.a .gc-pdot { left: 20px; }
.gc-tm.h .gc-pdot { right: 20px; }
.gc-clock { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.gc-live { display: inline-flex; align-items: center; gap: 4px; font-family: 'Press Start 2P', monospace; font-size: 6px; letter-spacing: .1em; color: var(--neon-cyan); }
.gc-clock b { font-family: 'Press Start 2P', monospace; font-size: 8px; color: #fff; white-space: nowrap; }
.gc-field { position: relative; height: 92px; border-radius: 8px; overflow: hidden; background: repeating-linear-gradient(90deg, #1d5a2a 0 8.4%, #1a5126 8.4% 16.8%); background-position: 8% 0; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55), inset 0 0 24px rgba(0, 0, 0, .45); }
.gc-ez { position: absolute; top: 0; bottom: 0; width: 8%; background: var(--tc); display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }
.gc-ez.l { left: 0; }
.gc-ez.r { right: 0; }
.gc-ez span { font-family: 'Press Start 2P', monospace; font-size: 6px; color: #fff; letter-spacing: .1em; writing-mode: vertical-rl; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.gc-ez.l span { transform: rotate(180deg); }
.gc-yl { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, .45); transform: translateX(-.5px); }
.gc-yl.mid { background: rgba(255, 255, 255, .75); }
.gc-num { position: absolute; bottom: 4px; transform: translateX(-50%); font-family: 'Press Start 2P', monospace; font-size: 6px; color: rgba(255, 255, 255, .6); }
.gc-los { position: absolute; top: 0; bottom: 0; width: 2px; background: #5ab4ff; transform: translateX(-1px); box-shadow: 0 0 6px #5ab4ff; }
.gc-first { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--neon-yellow); transform: translateX(-1.5px); box-shadow: 0 0 8px rgba(255, 228, 94, .8); }
.gc-drive { position: absolute; top: 44%; height: 12%; background: rgba(255, 228, 94, .18); }
.gc-spot { position: absolute; top: 14px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 3px; z-index: 2; }
.gc-off { width: 28px; height: 28px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); background: rgba(10, 0, 20, .55); border-radius: 50%; padding: 2px; }
.gc-ball { position: relative; width: 16px; height: 10px; border-radius: 50%; background: #8b4513; box-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.gc-ball::after { content: ""; position: absolute; left: 4px; right: 4px; top: 4.5px; height: 1px; background: #fff; }
.gc-ball.r::before, .gc-ball.l::before { content: ""; position: absolute; top: 2px; border: 3px solid transparent; }
.gc-ball.r::before { left: 18px; border-left: 5px solid var(--neon-yellow); }
.gc-ball.l::before { right: 18px; border-right: 5px solid var(--neon-yellow); }
.gc-dd { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 8px; padding: 2px 2px 0; }
.gc-dd b { font-family: 'Press Start 2P', monospace; font-size: 10px; color: var(--neon-yellow); letter-spacing: .02em; }
.gc-dd span { font-size: 11px; color: var(--text); }
.gc-dd em { margin-left: auto; font-style: normal; font-family: 'Press Start 2P', monospace; font-size: 6px; letter-spacing: .08em; color: var(--neon-pink); border: 1px solid rgba(255, 32, 121, .5); border-radius: 4px; padding: 3px 5px; }
.gc-h { margin-top: 2px; font-family: 'Press Start 2P', monospace; font-size: 6px; letter-spacing: .12em; color: var(--text-dim); }
.gc-plays { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.gc-plays li { display: flex; gap: 7px; align-items: flex-start; padding: 6px 7px; border-radius: 8px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .06); }
.gc-plays li.new { border-color: rgba(0, 229, 255, .35); background: rgba(0, 229, 255, .06); }
.gc-plays img.gc-plogo { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; }
.gc-plays div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gc-pmeta { font-family: 'Press Start 2P', monospace; font-size: 5.5px; letter-spacing: .06em; color: var(--text-dim); }
.gc-ptxt { font-size: 10.5px; line-height: 1.35; color: var(--text); }

/* ===== Gamecast, arcade cabinet ===== */
/* Header: fighting-game HUD */
.gc-cab { position: relative; padding: 8px 8px 9px; border-radius: 10px; border: 2px solid #2a1442; background: radial-gradient(120% 140% at 50% 0%, #1b0b33 0%, #0b0418 70%); box-shadow: inset 0 0 0 1px rgba(255, 228, 94, .18), 0 0 18px rgba(193, 60, 255, .18); overflow: hidden; }
.gc-cab::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px); }
.gc-hp { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; }
.gc-bar { height: 10px; border: 2px solid #ffe45e; background: #3a0010; box-shadow: 0 0 6px rgba(255, 228, 94, .35); display: flex; }
.gc-bar.a { justify-content: flex-end; }
.gc-bar i { display: block; height: 100%; background: linear-gradient(180deg, #fff59a 0 30%, #ffd400 30% 70%, #e0a800 70%); box-shadow: inset 0 0 0 1px var(--tc, transparent); transition: width .8s steps(12); }
.gc-ko { font-family: 'Press Start 2P', monospace; font-size: 6px; color: #ff3b3b; text-shadow: 0 0 6px rgba(255, 59, 59, .8); letter-spacing: .06em; }
.gc-hpn { display: flex; justify-content: space-between; margin: 3px 0 2px; font-family: 'Press Start 2P', monospace; font-size: 6px; color: #ffe45e; }
.gc-cab .gc-strip { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; padding: 4px 0 0; border: 0; background: none; }
.gc-f { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 7px; min-width: 0; }
.gc-f.h { grid-template-columns: 1fr auto; }
.gc-port { grid-row: 1 / span 2; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: #0a0414; border: 2px solid #c13cff; box-shadow: 3px 3px 0 #2a1442, 0 0 10px rgba(193, 60, 255, .4); image-rendering: pixelated; }
.gc-f.h .gc-port { grid-column: 2; border-color: #c13cff; }
.gc-f.poss .gc-port { border-color: #ffe45e; box-shadow: 3px 3px 0 #2a1442, 0 0 12px rgba(255, 228, 94, .7); }
.gc-port img.gc-logo { width: 28px; height: 28px; }
.gc-fid { display: flex; align-items: center; gap: 5px; min-width: 0; }
.gc-f.h .gc-fid { grid-column: 1; grid-row: 1; justify-content: flex-end; flex-direction: row-reverse; }
.gc-p { font-style: normal; font-family: 'Press Start 2P', monospace; font-size: 6px; color: #0a0414; background: #05d9e8; padding: 2px 3px; }
.gc-f.h .gc-p { background: #ff2079; }
.gc-fid b { font-family: 'Press Start 2P', monospace; font-size: 8px; color: #fff; white-space: nowrap; }
.gc-ballt { font-style: normal; font-family: 'Press Start 2P', monospace; font-size: 5px; color: #ffe45e; animation: lvblink 1s steps(2, start) infinite; }
.gc-f .gc-led.sc { grid-column: 2; grid-row: 2; font-size: 20px; }
.gc-f.h .gc-led.sc { grid-column: 1; justify-self: end; }
/* LED digits with ghost segments, same family as the countdown */
.gc-led { position: relative; display: inline-block; font-family: 'Press Start 2P', monospace; color: #ffb000; text-shadow: 0 0 6px rgba(255, 176, 0, .85), 0 0 14px rgba(255, 120, 0, .45); letter-spacing: .04em; line-height: 1; }
.gc-led::before { content: attr(data-ghost); position: absolute; inset: 0; color: rgba(255, 176, 0, .1); text-shadow: none; }
.gc-clock { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 6px; border: 2px solid #2a1442; background: #07020f; }
.gc-per { font-style: normal; font-family: 'Press Start 2P', monospace; font-size: 6px; color: #c13cff; }
.gc-led.clk { font-size: 11px; color: #ff4040; text-shadow: 0 0 6px rgba(255, 64, 64, .8); }
.gc-led.clk::before { color: rgba(255, 64, 64, .1); }
.gc-stat { font-family: 'Press Start 2P', monospace; font-size: 8px; color: #ff4040; }

/* Field: pixel turf with a CRT finish */
.gc-field.crt { height: 96px; border-radius: 6px; image-rendering: pixelated; background: repeating-linear-gradient(90deg, #1f7a32 0 4.2%, #1a6a2b 4.2% 8.4%); background-position: 8% 0; box-shadow: inset 0 0 0 3px #e8ffe8, 0 0 0 2px #0a0414, 0 0 16px rgba(57, 255, 136, .25); }
.gc-field.crt::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .2) 0 1px, transparent 1px 3px), radial-gradient(120% 140% at 50% 50%, transparent 55%, rgba(0, 0, 0, .55) 100%); }
.gc-field.crt .gc-ez { box-shadow: inset 0 0 0 3px #e8ffe8; }
.gc-field.crt .gc-ez span { font-size: 7px; }
.gc-field.crt .gc-yl { width: 2px; background: rgba(232, 255, 232, .55); }
.gc-field.crt .gc-num { font-size: 6px; color: rgba(232, 255, 232, .8); text-shadow: 1px 1px 0 #0a3a14; }
.gc-field.crt .gc-first { width: 3px; background: #ffe45e; box-shadow: 0 0 6px #ffe45e, 0 0 14px rgba(255, 228, 94, .8); animation: gclaser 1.4s ease-in-out infinite; }
@keyframes gclaser { 50% { box-shadow: 0 0 3px #ffe45e, 0 0 8px rgba(255, 228, 94, .5); } }
.gc-field.crt .gc-los { background: #4fc3ff; box-shadow: 0 0 6px #4fc3ff; }
.gc-field.crt .gc-off { border-radius: 0; background: #0a0414; border: 2px solid #ffe45e; box-shadow: 2px 2px 0 rgba(0, 0, 0, .6); width: 26px; height: 26px; }
.gc-field.crt .gc-ball { width: 14px; height: 8px; border-radius: 3px; background: #8b4513; box-shadow: 0 0 0 1px #3a1a05, 2px 2px 0 rgba(0, 0, 0, .5); }
.gc-chev { position: absolute; top: 62px; z-index: 2; font-family: 'Press Start 2P', monospace; font-size: 7px; color: #ffe45e; text-shadow: 0 0 6px rgba(255, 228, 94, .9); animation: lvblink .7s steps(2, start) infinite; }
.gc-chev.r { transform: translateX(8px); }
.gc-chev.l { transform: translateX(calc(-100% - 8px)); }

/* Play log: phosphor terminal */
.gc-log { padding: 7px 8px 6px; border-radius: 8px; border: 1px solid rgba(57, 255, 136, .3); background: #031007; box-shadow: inset 0 0 18px rgba(57, 255, 136, .08); position: relative; overflow: hidden; }
.gc-log::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .25) 0 1px, transparent 1px 3px); }
.gc-logh { font-family: 'Press Start 2P', monospace; font-size: 6px; letter-spacing: .14em; color: #39ff88; margin-bottom: 5px; }
.gc-log .gc-plays li { background: none; border: 0; border-radius: 0; padding: 4px 0; border-top: 1px dashed rgba(57, 255, 136, .15); gap: 6px; }
.gc-log .gc-plays li:first-child { border-top: 0; }
.gc-prompt { font-family: 'Press Start 2P', monospace; font-size: 8px; color: #39ff88; margin-top: 2px; }
.gc-log .gc-plays li.new .gc-prompt { animation: lvblink .8s steps(2, start) infinite; }
.gc-log .gc-pmeta { display: flex; align-items: center; gap: 5px; color: rgba(57, 255, 136, .7); }
.gc-log .gc-pmeta img.gc-plogo { width: 12px; height: 12px; margin: 0; }
.gc-log .gc-ptxt { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 10.5px; line-height: 1.4; color: #b8ffd2; text-shadow: 0 0 4px rgba(57, 255, 136, .45); }
.gc-log li.old1 .gc-ptxt { color: rgba(184, 255, 210, .6); text-shadow: none; }
.gc-log li.old2 .gc-ptxt { color: rgba(184, 255, 210, .4); text-shadow: none; }
.gc-log li.type .gc-ptxt { display: inline-block; animation: gctype 1.2s steps(36, end) both; clip-path: inset(0 100% 0 0); }
@keyframes gctype { to { clip-path: inset(0 0 0 0); } }
.gc-badge { margin-left: auto; font-family: 'Press Start 2P', monospace; font-size: 6px; padding: 2px 4px; color: #0a0414; background: #b8ffd2; }
.gc-badge.gain { background: #39ff88; }
.gc-badge.first { background: #ffe45e; }
.gc-badge.loss, .gc-badge.to { background: #ff2079; color: #fff; }
.gc-badge.td { background: #ffe45e; box-shadow: 0 0 8px rgba(255, 228, 94, .9); animation: lvblink .8s steps(2, start) 4; }
.gc-badge.flag { background: #ffb000; }
.gc-badge.dim { background: rgba(184, 255, 210, .35); color: #031007; }

/* Broadcast-camera tilt: the far sideline recedes, the near one is close,
   and the offence's logo and the ball stand up off the turf. */
.gc-stage { perspective: 420px; perspective-origin: 50% 0%; padding: 6px 4px 0; margin-bottom: -10px; }
.gc-stage .gc-field.crt { height: 118px; transform: rotateX(34deg); transform-origin: 50% 100%; transform-style: preserve-3d; border-radius: 4px; box-shadow: inset 0 0 0 3px #e8ffe8, 0 0 0 2px #0a0414, 0 14px 22px rgba(0, 0, 0, .65), 0 0 20px rgba(57, 255, 136, .22); background:
  linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 45%, rgba(255, 255, 255, .06) 100%),
  repeating-linear-gradient(90deg, #1f7a32 0 4.2%, #1a6a2b 4.2% 8.4%); background-position: 0 0, 8% 0; }
.gc-mid { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; transform: translate(-50%, -50%); opacity: .28; filter: saturate(.8); pointer-events: none; }
/* Hash marks along both sides of every five yards */
.gc-stage .gc-field.crt::before { content: ""; position: absolute; left: 8%; right: 8%; top: 30%; bottom: 30%; pointer-events: none; background: repeating-linear-gradient(90deg, rgba(232, 255, 232, .5) 0 2px, transparent 2px 4.2%); -webkit-mask: linear-gradient(180deg, #000 0 8%, transparent 8% 92%, #000 92%); mask: linear-gradient(180deg, #000 0 8%, transparent 8% 92%, #000 92%); }
.gc-stage .gc-spot { top: 22px; transform: translateX(-50%) rotateX(-34deg); transform-origin: 50% 100%; }
.gc-stage .gc-off { width: 30px; height: 30px; }
.gc-stage .gc-ball { box-shadow: 0 0 0 1px #3a1a05, 0 4px 3px rgba(0, 0, 0, .55); }
.gc-stage .gc-chev { top: 72px; }
.gc-stage .gc-num { bottom: 6px; font-size: 7px; }
.gc-stage { margin-top: -26px; margin-bottom: 4px; perspective-origin: 50% 20%; }

/* In flight: a soft solid pill, not a dashed box. Lighter fill and border
   than a settled pill, and a small raised "?" says it is not final. */
.stake.lean { border-style: solid !important; border-width: 1px; border-radius: 999px; opacity: .9; }
.stake.lean.hit { background: rgba(0, 255, 143, .08); border-color: rgba(0, 255, 143, .4); }
.stake.lean.miss { background: rgba(255, 92, 138, .07); border-color: rgba(255, 92, 138, .35); }
.stake-q { font-size: .7em; opacity: .7; margin-left: 1px; vertical-align: super; line-height: 0; }

/* The pill itself: room around the number so it reads as a pill. */
.bug-head .stake { display: inline-flex; align-items: center; gap: 1px; margin-left: auto; padding: 3px 7px 3px; border: 1px solid rgba(244, 240, 255, .3); border-radius: 999px; font-family: 'Press Start 2P', monospace; font-size: 8px; line-height: 1; letter-spacing: .02em; white-space: nowrap; }
.bug-head .stake.pending { color: var(--text-dim); background: rgba(244, 240, 255, .05); }

/* Possession: a small pixel football beside the team, not the word BALL. */
.gc-pball { position: relative; display: inline-block; width: 12px; height: 7px; border-radius: 50%; background: #8b4513; box-shadow: 0 0 0 1px #3a1a05, 0 0 6px rgba(255, 228, 94, .55); animation: gcbob 1s steps(2, start) infinite; }
.gc-pball::after { content: ""; position: absolute; left: 3px; right: 3px; top: 3px; height: 1px; background: #fff; }
@keyframes gcbob { 50% { transform: translateY(-1px); } }

/* Your pick under the HUD */
.gc-mine { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 8px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .03); }
.gc-mine.up { border-color: rgba(57, 255, 136, .55); background: rgba(57, 255, 136, .07); box-shadow: 0 0 10px rgba(57, 255, 136, .15); }
.gc-mine.down { border-color: rgba(255, 32, 121, .5); background: rgba(255, 32, 121, .06); }
.gc-mine.push { border-color: rgba(255, 228, 94, .5); }
.gc-mtag { font-family: 'Press Start 2P', monospace; font-size: 5.5px; letter-spacing: .1em; color: #0a0414; background: var(--neon-cyan); padding: 2px 4px; }
.gc-mine img.gc-mlogo { width: 18px; height: 18px; }
.gc-mine b { font-family: 'Press Start 2P', monospace; font-size: 8px; color: #fff; white-space: nowrap; }
.gc-mpts { font-family: 'Press Start 2P', monospace; font-size: 6px; color: var(--text-dim); }
.gc-msay { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-family: 'Press Start 2P', monospace; font-size: 6.5px; letter-spacing: .04em; white-space: nowrap; }
.gc-msay i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
.gc-mine.up .gc-msay { color: var(--neon-green); }
.gc-mine.down .gc-msay { color: var(--neon-pink); }
.gc-mine.push .gc-msay { color: var(--neon-yellow); }

/* HUD packed to the centre: portraits and scores hug the clock instead of
   stretching to the card edges on a wide screen. */
.gc-cab .gc-hp, .gc-cab .gc-hpn, .gc-cab .gc-strip { max-width: 440px; margin-left: auto; margin-right: auto; }
.gc-cab .gc-strip { grid-template-columns: auto auto auto; justify-content: center; column-gap: 12px; }
.gc-f { grid-template-columns: auto auto; column-gap: 8px; }
.gc-f.h { grid-template-columns: auto auto; }
.gc-f.a .gc-led.sc { justify-self: end; }
.gc-f.h .gc-led.sc { justify-self: start; }
.gc-f.a .gc-fid { justify-content: flex-end; }
.gc-f.h .gc-fid { justify-content: flex-start; flex-direction: row; }
.gc-f.h .gc-port { grid-column: 2; grid-row: 1 / span 2; }
.gc-f.h .gc-fid, .gc-f.h .gc-led.sc { grid-column: 1; }
.gc-f.h .gc-fid { grid-row: 1; }
.gc-f.h .gc-led.sc { grid-row: 2; }
.gc-cab > .gc-hp, .gc-cab > .gc-hpn { width: min(100%, 440px); max-width: none; margin-left: auto; margin-right: auto; }
.gc-cab { display: flex; flex-direction: column; align-items: stretch; }

/* The room: everyone's pick on this game, split by the live score. */
.gc-room { display: flex; flex-direction: column; gap: 6px; }
.gc-rcols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.gc-rcol { border-radius: 8px; padding: 6px 6px 7px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .02); min-width: 0; }
.gc-rcol.up { border-color: rgba(57, 255, 136, .45); background: linear-gradient(180deg, rgba(57, 255, 136, .09), rgba(57, 255, 136, .02)); }
.gc-rcol.down { border-color: rgba(255, 32, 121, .4); background: linear-gradient(180deg, rgba(255, 32, 121, .08), rgba(255, 32, 121, .02)); }
.gc-rcol.push { border-color: rgba(255, 228, 94, .4); }
.gc-rh { display: flex; align-items: center; gap: 5px; font-family: 'Press Start 2P', monospace; font-size: 6.5px; letter-spacing: .08em; margin-bottom: 5px; }
.gc-rh i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
.gc-rh span { margin-left: auto; font-size: 9px; }
.gc-rcol.up .gc-rh { color: var(--neon-green); }
.gc-rcol.down .gc-rh { color: var(--neon-pink); }
.gc-rcol.push .gc-rh { color: var(--neon-yellow); }
.gc-rcol ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.gc-rc { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 2px 0; }
.gc-rc .pick-chip-av { width: 14px; height: 14px; font-size: 7px; }
.gc-rc b { font-size: 10px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.gc-rc.me b { color: var(--neon-cyan); text-shadow: 0 0 6px rgba(0, 229, 255, .6); }
.gc-rt { display: inline-flex; align-items: center; gap: 3px; font-family: 'Press Start 2P', monospace; font-size: 5.5px; color: var(--text-dim); white-space: nowrap; }
.gc-rt img.gc-rlogo { width: 11px; height: 11px; }
.gc-rpts { margin-left: auto; font-style: normal; font-family: 'Press Start 2P', monospace; font-size: 6.5px; }
.gc-rc.up .gc-rpts { color: var(--neon-green); }
.gc-rc.down .gc-rpts { color: rgba(255, 32, 121, .7); }
.gc-rc.down b { color: var(--text-dim); }
.gc-rnone { font-size: 9px; color: var(--text-dim); }

.gc-log .gc-plays li.gc-mark { justify-content: center; padding: 3px 0; }
.gc-log .gc-plays li.gc-mark span { font-family: 'Press Start 2P', monospace; font-size: 6px; letter-spacing: .12em; color: rgba(57, 255, 136, .55); }
.gc-log .gc-plays li.gc-mark span::before, .gc-log .gc-plays li.gc-mark span::after { content: " ◆ "; }

/* ===== Scoreboard row (replaces the portrait HUD) ===== */
.gc-cab { padding: 10px 10px 8px; gap: 0; }
.gc-cab::after { z-index: 0; opacity: .55; }
.gc-cab > * { position: relative; z-index: 1; }
.gc-row { display: grid; grid-template-columns: 1fr auto auto auto 1fr; align-items: center; column-gap: 10px; max-width: 420px; width: 100%; margin: 0 auto; }
.gc-t { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.gc-t img.gc-tlogo { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--tc) 60%, transparent)); }
.gc-t b { font-family: 'Press Start 2P', monospace; font-size: 8px; color: var(--text); letter-spacing: .04em; white-space: nowrap; }
.gc-t.poss b { color: #fff; }
.gc-t .gc-pball.off { visibility: hidden; animation: none; }
.gc-row .gc-led.sc { font-size: 26px; min-width: 2ch; text-align: center; }
.gc-row .gc-clock { padding: 5px 8px; border: 2px solid #2a1442; background: #07020f; box-shadow: inset 0 0 8px rgba(0, 0, 0, .8); }
.gc-row .gc-led.clk { font-size: 12px; }
/* Win probability: one bar in team colours with the split marked */
.gc-wp { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; max-width: 420px; width: 100%; margin: 9px auto 0; }
.gc-wpbar { display: flex; height: 8px; border: 2px solid #ffe45e; background: #0a0414; box-shadow: 0 0 6px rgba(255, 228, 94, .3); }
.gc-wpbar i { display: block; height: 100%; background: var(--tc); transition: width .8s steps(12); }
.gc-wpbar i.a { box-shadow: 2px 0 0 #0a0414; }
.gc-wpbar i.h { flex: 1 1 auto; }
.gc-wpn { font-family: 'Press Start 2P', monospace; font-size: 7px; color: #ffe45e; min-width: 3ch; }
.gc-wpn.h { text-align: right; }
.gc-wpcap { text-align: center; margin-top: 4px; font-family: 'Press Start 2P', monospace; font-size: 5px; letter-spacing: .14em; color: var(--text-dim); }

/* Win probability: chunky pixel bar, readable on the dark cabinet. */
.gc-wp2 { max-width: 420px; width: 100%; margin: 10px auto 0; }
.gc-wpbar2 { position: relative; display: flex; height: 20px; border: 3px solid #ffe45e; background: #0a0414; box-shadow: 0 0 0 2px #0a0414, 0 0 10px rgba(255, 228, 94, .35); }
.gc-wpbar2 i { position: relative; display: flex; align-items: center; height: 100%; min-width: 0; overflow: hidden; background: color-mix(in srgb, var(--tc) 72%, #ffffff 28%); transition: width .8s steps(12); }
.gc-wpbar2 i.h { flex: 1 1 auto; justify-content: flex-end; }
.gc-wpbar2 i.a { border-right: 3px solid #0a0414; }
/* pixel segments and a bright top edge */
.gc-wpbar2 i::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .35) 0 3px, transparent 3px), repeating-linear-gradient(90deg, transparent 0 9px, rgba(10, 4, 20, .55) 9px 11px); pointer-events: none; }
.gc-wpbar2 span { position: relative; z-index: 1; padding: 0 6px; font-family: 'Press Start 2P', monospace; font-size: 7px; color: #fff; white-space: nowrap; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
.gc-wpout { display: flex; justify-content: space-between; margin-top: 4px; font-family: 'Press Start 2P', monospace; font-size: 7px; color: #ffe45e; }
.gc-wp2 .gc-wpcap { margin-top: 5px; }

/* Win probability v3: LED numbers, thin neon bar, notch at the split. */
.gc-wp3 { display: grid; grid-template-columns: 1fr 1fr; align-items: end; row-gap: 6px; max-width: 420px; width: 100%; margin: 12px auto 0; }
.gc-wpl { display: flex; align-items: center; gap: 6px; }
.gc-wpl.h { justify-content: flex-end; }
.gc-wpl img.gc-wplogo { width: 18px; height: 18px; object-fit: contain; }
.gc-led.wpn { font-size: 11px; }
.gc-wpl.a .gc-led.wpn { color: #05d9e8; text-shadow: 0 0 6px rgba(5, 217, 232, .85); }
.gc-wpl.a .gc-led.wpn::before { color: rgba(5, 217, 232, .1); }
.gc-wpl.h .gc-led.wpn { color: #ff2079; text-shadow: 0 0 6px rgba(255, 32, 121, .85); }
.gc-wpl.h .gc-led.wpn::before { color: rgba(255, 32, 121, .1); }
.gc-wpline { grid-column: 1 / -1; position: relative; display: flex; height: 6px; border-radius: 3px; background: #0a0414; }
.gc-wpline i { display: block; height: 100%; transition: width .8s ease; }
.gc-wpline i.a { background: #05d9e8; box-shadow: 0 0 8px rgba(5, 217, 232, .8); border-radius: 3px 0 0 3px; }
.gc-wpline i.h { flex: 1 1 auto; background: #ff2079; box-shadow: 0 0 8px rgba(255, 32, 121, .8); border-radius: 0 3px 3px 0; }
.gc-wpnotch { position: absolute; top: -4px; bottom: -4px; width: 3px; transform: translateX(-1.5px); background: #fff; box-shadow: 0 0 6px #fff, 0 0 12px rgba(255, 255, 255, .7); transition: left .8s ease; }
.gc-wp3 .gc-wpcap { grid-column: 1 / -1; margin-top: 2px; }

/* Win probability as an arcade power gauge: 20 lit pixel blocks. */
.gc-wpblocks { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; padding: 3px; background: #07020f; border: 2px solid #2a1442; box-shadow: inset 0 0 6px rgba(0, 0, 0, .9); }
.gc-wpblocks i { display: block; height: 12px; image-rendering: pixelated; }
.gc-wpblocks i.a { background: #05d9e8; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 rgba(0, 0, 0, .35), 0 0 6px rgba(5, 217, 232, .7); }
.gc-wpblocks i.h { background: #ff2079; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .4), inset 0 -3px 0 rgba(0, 0, 0, .35), 0 0 6px rgba(255, 32, 121, .7); }
.gc-wpblocks i.edge { animation: lvblink 1s steps(2, start) infinite; }

/* Win probability, sleek: one line under the scores. */
.gc-wp4 { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; max-width: 360px; width: 100%; margin: 10px auto 0; }
.gc-wp4 .gc-led.wpn { font-size: 9px; }
.gc-wp4 .gc-led.wpn.a { color: #05d9e8; text-shadow: 0 0 6px rgba(5, 217, 232, .8); }
.gc-wp4 .gc-led.wpn.a::before { color: rgba(5, 217, 232, .1); }
.gc-wp4 .gc-led.wpn.h { color: #ff2079; text-shadow: 0 0 6px rgba(255, 32, 121, .8); }
.gc-wp4 .gc-led.wpn.h::before { color: rgba(255, 32, 121, .1); }
.gc-seg { display: grid; grid-template-columns: repeat(40, 1fr); gap: 2px; height: 8px; }
.gc-seg i { display: block; height: 100%; }
.gc-seg i.a { background: #05d9e8; box-shadow: 0 0 4px rgba(5, 217, 232, .75); }
.gc-seg i.h { background: #ff2079; box-shadow: 0 0 4px rgba(255, 32, 121, .75); }
.gc-cab .gc-wpcap { margin-top: 5px; opacity: .7; }
.gc-seg2 { height: 8px; background: linear-gradient(90deg, #05d9e8 0 var(--wa), #ff2079 var(--wa) 100%); -webkit-mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 8px); mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 8px); filter: drop-shadow(0 0 3px rgba(255, 255, 255, .35)); }

/* Newest play: a CRT flicker-in instead of a clip-path type-on, which
   Safari never animated and left the text invisible. The text is always
   visible at rest; only opacity animates. */
.gc-log li.type .gc-ptxt { clip-path: none !important; animation: gcflick .6s steps(6, end) both; }
@keyframes gcflick { 0% { opacity: 0; } 20% { opacity: .9; } 35% { opacity: .2; } 55% { opacity: 1; } 70% { opacity: .5; } 100% { opacity: 1; } }

/* Type-on is done in script now; no CSS animation on the text. */
.gc-log li.type .gc-ptxt { clip-path: none !important; animation: none !important; opacity: 1 !important; }
.gc-ptxt.typing::after { content: "█"; margin-left: 1px; color: #39ff88; animation: lvblink .5s steps(2, start) infinite; }
/* While live, the scoreboard names the matchup; the sheet's title does not repeat it. */
#insights-modal.gc-mode #insights-title, #insights-modal.gc-mode #insights-sub { display: none; }

/* Play rows span the full log width so badges sit at the right edge. */
.gc-log .gc-plays li > div { flex: 1 1 auto; min-width: 0; }
.gc-log .gc-pmeta { width: 100%; }
/* Nothing in the gamecast may push the sheet sideways. */
#insights-body { overflow-x: hidden; }
.gc, .gc-stage { max-width: 100%; overflow-x: clip; }

/* ===== VS-screen scoreboard ===== */
.gc-cab.vs { position: relative; overflow: hidden; padding: 14px 12px; border: 0; border-radius: 12px;
  background:
    linear-gradient(105deg, color-mix(in srgb, var(--ac) 70%, #0a0414) 0%, color-mix(in srgb, var(--ac) 35%, #0a0414) 30%, #0a0414 44%, #0a0414 56%, color-mix(in srgb, var(--hc) 35%, #0a0414) 70%, color-mix(in srgb, var(--hc) 70%, #0a0414) 100%);
  box-shadow: 0 0 0 2px #0a0414, 0 0 0 4px transparent, 0 10px 24px rgba(0, 0, 0, .55); }
/* neon frame: pink to cyan, drawn as a masked gradient border */
.gc-cab.vs::before { content: ""; position: absolute; inset: 0; border-radius: 12px; padding: 2px; background: linear-gradient(90deg, #05d9e8, #c13cff 50%, #ff2079); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; filter: drop-shadow(0 0 6px rgba(193, 60, 255, .7)); pointer-events: none; z-index: 2; }
/* diagonal speed stripes on each team side, and soft scanlines */
.gc-cab.vs::after { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 1; pointer-events: none;
  background:
    repeating-linear-gradient(105deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 14px),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px);
  -webkit-mask: linear-gradient(90deg, #000 0 36%, transparent 46% 54%, #000 64%); mask: linear-gradient(90deg, #000 0 36%, transparent 46% 54%, #000 64%); }
/* a slow light sweep across the board */
.gc-sweep { position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; z-index: 1; pointer-events: none; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .09), transparent); animation: gcsweep 5.5s ease-in-out infinite; }
@keyframes gcsweep { 0% { left: -40%; } 55%, 100% { left: 120%; } }
.gc-cab.vs .gc-row { position: relative; z-index: 3; }
/* logos bigger, dropped onto their colour */
.gc-cab.vs .gc-t img.gc-tlogo { width: 50px; height: 50px; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .55)) drop-shadow(0 0 10px rgba(255, 255, 255, .18)); }
.gc-cab.vs .gc-t b { font-size: 8px; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .6); }
/* scores in dark LED plates, no blurry ghost digits */
.gc-cab.vs .gc-led.sc { font-size: 28px; padding: 8px 8px 6px; background: rgba(7, 2, 15, .85); border: 2px solid rgba(255, 176, 0, .35); border-radius: 6px; box-shadow: inset 0 0 12px rgba(0, 0, 0, .9), 0 0 12px rgba(255, 176, 0, .18); min-width: 2.6ch; }
.gc-cab.vs .gc-led.sc::before { content: none; }
/* clock as a lit marquee chip */
.gc-cab.vs .gc-clock { padding: 6px 10px; border: 2px solid #ff4040; border-radius: 6px; background: #12020a; box-shadow: 0 0 12px rgba(255, 64, 64, .45), inset 0 0 10px rgba(0, 0, 0, .9); }
.gc-cab.vs .gc-led.clk { font-size: 13px; }
.gc-cab.vs .gc-led.clk::before { content: none; }
.gc-cab.vs .gc-live { color: #fff; }
.gc-cab.vs .gc-per { color: #ffb000; }
@media (prefers-reduced-motion: reduce) { .gc-sweep { animation: none; display: none; } }
/* Possession football sits beside the name, on the side facing the score. */
.gc-tn { display: inline-flex; align-items: center; gap: 5px; }
.gc-tn .gc-pball { flex: 0 0 auto; }

/* VS scoreboard, tightened */
.gc-cab.vs { padding: 9px 10px; }
.gc-cab.vs .gc-row { column-gap: 8px; max-width: 380px; }
.gc-cab.vs .gc-t { gap: 3px; }
.gc-cab.vs .gc-t img.gc-tlogo { width: 40px; height: 40px; }
.gc-cab.vs .gc-t b { font-size: 7px; }
.gc-cab.vs .gc-led.sc { font-size: 22px; padding: 6px 6px 4px; min-width: 2.4ch; border-width: 1.5px; }
.gc-cab.vs .gc-clock { padding: 4px 8px; gap: 3px; }
.gc-cab.vs .gc-led.clk { font-size: 11px; }
.gc-cab.vs .gc-live { font-size: 5.5px; }
.gc-cab.vs .gc-per { font-size: 5.5px; }
#insights-modal.gc-mode #insights-body { padding-top: 14px; }
.gc-log li.old3 .gc-ptxt { color: rgba(184, 255, 210, .32); text-shadow: none; }
.gc-log li.old4 .gc-ptxt { color: rgba(184, 255, 210, .26); text-shadow: none; }
/* The scoring word in a play: gold, bold, underlined. */
.gc-log .gc-ptxt b.gc-score { color: #ffd23f; font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-shadow: 0 0 8px rgba(255, 210, 63, .7); }
.gc-log li.old1 .gc-ptxt b.gc-score, .gc-log li.old2 .gc-ptxt b.gc-score, .gc-log li.old3 .gc-ptxt b.gc-score, .gc-log li.old4 .gc-ptxt b.gc-score { color: rgba(255, 210, 63, .75); text-shadow: none; }

/* Live: no header row. The close button floats at the card's top right
   and the scoreboard starts at the top of the sheet. */
#insights-modal.gc-mode .insights-card { position: relative; padding-top: 10px; }
#insights-modal.gc-mode .h2h-top { position: absolute; top: 4px; right: 6px; height: 0; padding: 0; margin: 0; border: 0; z-index: 5; }
#insights-modal.gc-mode .h2h-top .h2h-x { position: absolute; top: 0; right: 0; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; border-radius: 50%; background: rgba(10, 4, 20, .85); border: 1px solid rgba(255, 255, 255, .25); color: #fff; }
#insights-modal.gc-mode #insights-body { padding-top: 0; margin-top: 0; }
#insights-modal.gc-mode .gc { margin-top: 0; }
/* Scoring word: gold only, no bold or underline. */
.gc-log .gc-ptxt b.gc-score { font-weight: inherit; text-decoration: none; }

/* Break in play: dim field under a banner. */
.gc-field.brk { filter: saturate(.45) brightness(.6); }
.gc-brk { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; filter: none; }
.gc-stage .gc-field.brk .gc-brk { transform: rotateX(-34deg); transform-origin: 50% 60%; }
.gc-brk span { font-family: 'Press Start 2P', monospace; font-size: 14px; letter-spacing: .14em; color: #ffe45e; padding: 8px 14px; background: rgba(10, 4, 20, .88); border: 2px solid #ffe45e; box-shadow: 0 0 14px rgba(255, 228, 94, .6); text-shadow: 0 0 8px rgba(255, 228, 94, .8); animation: lvblink 1.4s steps(2, start) infinite; }
/* Mini box score at a break */
.gc-bs { border-radius: 8px; border: 1px solid rgba(255, 228, 94, .3); background: rgba(255, 228, 94, .04); padding: 7px 10px; }
.gc-bs-h, .gc-bs-r { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.gc-bs-h { font-family: 'Press Start 2P', monospace; font-size: 6px; letter-spacing: .1em; color: #ffe45e; padding-bottom: 5px; border-bottom: 1px dashed rgba(255, 228, 94, .25); margin-bottom: 3px; }
.gc-bs-h span:first-child, .gc-bs-r b:first-child { text-align: left; }
.gc-bs-h span:last-child, .gc-bs-r b:last-child { text-align: right; }
.gc-bs-r { padding: 3px 0; }
.gc-bs-r span { font-family: 'Press Start 2P', monospace; font-size: 5.5px; letter-spacing: .08em; color: var(--text-dim); text-align: center; }
.gc-bs-r b { font-family: 'Press Start 2P', monospace; font-size: 9px; color: #fff; }

/* Your name in the room: cyan glow only, never a box. */
.gc-room .gc-rc.me b, .gc-room .gc-rc.down.me b, .gc-room .gc-rc.up.me b { color: var(--neon-cyan) !important; background: none !important; box-shadow: none !important; border: 0 !important; outline: 0; text-shadow: 0 0 6px rgba(0, 229, 255, .6); }

/* Scoring plays wrap instead of cutting off; scoring word gold. */
.gc .lv-sp li { align-items: flex-start; }
.gc .lv-sptxt { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }
.gc .lv-sptxt b.gc-score { font-weight: inherit; text-decoration: none; color: #ffd23f; text-shadow: 0 0 6px rgba(255, 210, 63, .6); }
.gc .lv-spq, .gc .lv-spsc { padding-top: 1px; }
.gc-stage { position: relative; }
.gc-stage > .gc-brk { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; pointer-events: none; transform: none; }
.gc-stage > .gc-brk span { animation: none; }

/* Markers glide to their new spot on each refresh. */
.gc-slide { transition: left 1.1s cubic-bezier(.33, .9, .3, 1); }
@media (prefers-reduced-motion: reduce) { .gc-slide { transition: none; } }
/* TD and FG badges hold steady; no flashing. */
.gc-badge.td { animation: none !important; }

/* Breakdown: the arithmetic behind the chance to win */
.rd-wp { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding: 7px 0 6px; border-top: 1px solid rgba(5, 217, 232, .35); }
.rd-wp-label { font-family: 'Press Start 2P', monospace; font-size: 6px; line-height: 1.6; color: var(--neon-cyan); letter-spacing: .06em; }
.rd-wp-label b { color: #fff; }
.rd-wp-line { font-size: 11.5px; line-height: 1.45; color: var(--text-meta); }
.rd-wp-line b { color: #fff; font-weight: 800; }
.rd-wp-line b.up { color: var(--neon-green); }
.rd-wp-line b.dn { color: var(--neon-pink); }

/* ===== FINAL takeover ===== */
.gc-fin .gc-cab.vs .gc-led.sc.lose { color: rgba(255, 176, 0, .45); text-shadow: none; }
.gc-fin .gc-cab.vs .gc-led.sc.win { color: #ffd23f; text-shadow: 0 0 10px rgba(255, 210, 63, .9); }
.gc-fin .gc-cab.vs .gc-clock { border-color: #ffe45e; box-shadow: 0 0 12px rgba(255, 228, 94, .45), inset 0 0 10px rgba(0, 0, 0, .9); }
.gc-final { font-family: 'Press Start 2P', monospace; font-size: 11px; color: #ffe45e; text-shadow: 0 0 8px rgba(255, 228, 94, .8); letter-spacing: .06em; }
.gc-fin .gc-t:not(.won) img.gc-tlogo { opacity: .55; filter: grayscale(.4); }
.gc-settle { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 7px 10px; border-radius: 8px; border: 1px solid rgba(255, 228, 94, .3); background: rgba(255, 228, 94, .04); }
.gc-settle-h { font-family: 'Press Start 2P', monospace; font-size: 5.5px; letter-spacing: .12em; color: var(--text-dim); }
.gc-settle b { font-family: 'Press Start 2P', monospace; font-size: 8px; color: #ffe45e; }
.gc-settle em { font-style: normal; font-family: 'Press Start 2P', monospace; font-size: 6px; color: #fff; background: #ff2079; padding: 3px 5px; box-shadow: 0 0 8px rgba(255, 32, 121, .6); }
/* Top performers: category, then each team's leader with a headshot */
.gc-perf { display: flex; flex-direction: column; gap: 6px; }
.gc-pfrow { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; position: relative; padding-top: 12px; }
.gc-pfcat { position: absolute; top: 0; left: 0; right: 0; text-align: center; font-family: 'Press Start 2P', monospace; font-size: 5.5px; letter-spacing: .12em; color: var(--text-dim); }
.gc-pf { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 6px 7px; border-radius: 8px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); }
.gc-pf.h { flex-direction: row-reverse; text-align: right; }
.gc-pf.none { justify-content: center; color: var(--text-dim); }
.gc-pf img.gc-pfshot { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: #0a0414; border: 1px solid rgba(255, 255, 255, .15); flex: 0 0 auto; }
.gc-pf > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gc-pf b { font-size: 11px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-pf span { font-size: 10px; line-height: 1.3; color: var(--text-meta); }
/* Recap */
.gc-recap { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .02); }
.gc-recap b { font-size: 13px; line-height: 1.3; color: #fff; }
.gc-recap p { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--text-meta); }
.gc-fin .lv-sptxt { white-space: normal; overflow: visible; }
.gc-fin .lv-sptxt b.gc-score { color: #ffd23f; font-weight: inherit; }
/* Line result on one line: the cover, then a small UPSET tag. */
.gc-settle { flex-wrap: nowrap; justify-content: center; gap: 8px; padding: 7px 8px; }
.gc-settle b { white-space: nowrap; font-size: 8px; }
.gc-settle em { flex: 0 0 auto; font-size: 6px; padding: 3px 5px; }

/* ===== Leaderboard, cleaner read ===== */
/* No header row; the layout says rank, player, score. */
.rankings-list::before { content: none; display: none; }
/* Rank: one compact token (1, T1, T5), never wrapping. */
.ranking-place { white-space: nowrap; font-size: 11px; letter-spacing: 0; min-width: 2.6ch; }
/* Only the leader glows; everyone else is plain with how far back. */
.ranking-row .ranking-score { position: relative; display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; color: #f4f0ff; text-shadow: none; }
.ranking-row.leads .ranking-score { color: #ffd23f; text-shadow: 0 0 10px rgba(255, 210, 63, .85), 0 0 2px rgba(255, 210, 63, .9); }
.rank-back { font-style: normal; font-family: 'Press Start 2P', monospace; font-size: 6.5px; color: var(--neon-pink); opacity: .85; letter-spacing: .04em; }
/* No row arrows; the whole row is the tap target. */
.ranking-caret { display: none; }
/* Tiers: a thin rule wherever the score changes. */
.ranking-row.tier-break { border-top: 1px solid rgba(193, 60, 255, .35); margin-top: 4px; padding-top: 4px; }
/* The line under a name wraps rather than cutting off. */
.ranking-name { min-width: 0; }
.ranking-name .ranking-lock { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.5; }

/* ===== Leaderboard: arcade high-score table ===== */
.rankings-list { position: relative; padding: 8px 6px; border: 0; border-radius: 12px; background: radial-gradient(120% 90% at 50% 0%, #170830 0%, #07020f 70%); box-shadow: 0 10px 26px rgba(0, 0, 0, .55); overflow: hidden; }
.rankings-list::after { content: ""; position: absolute; inset: 0; border-radius: 12px; padding: 2px; background: linear-gradient(90deg, #05d9e8, #c13cff 50%, #ff2079); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; filter: drop-shadow(0 0 6px rgba(193, 60, 255, .6)); pointer-events: none; z-index: 3; }
.rankings-list > * { position: relative; z-index: 1; }
.rankings-list > .ranking-row::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .14) 0 1px, transparent 1px 3px); border-radius: inherit; }
/* Each row a faint plate with a top highlight */
.ranking-row { margin: 3px 2px; border-radius: 8px; background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .01)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -1px 0 rgba(0, 0, 0, .4); }
.ranking-row.tier-break { border-top: 0; margin-top: 10px; padding-top: 0; }
.ranking-row.tier-break::after { content: ""; position: absolute; left: 10%; right: 10%; top: -6px; height: 1px; background: linear-gradient(90deg, transparent, rgba(193, 60, 255, .55), transparent); }
.ranking-row.leads { background: linear-gradient(180deg, rgba(255, 210, 63, .14), rgba(255, 210, 63, .03)); box-shadow: inset 0 1px 0 rgba(255, 228, 94, .25), 0 0 14px rgba(255, 210, 63, .12); }
/* Rank chips: gold, silver, bronze for the podium, dim for the rest */
.ranking-place { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 22px; padding: 0 5px; font-family: 'Press Start 2P', monospace; font-size: 8px; color: var(--text-dim); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 2px 2px 0 rgba(0, 0, 0, .5); }
.ranking-place.medal { color: #1a0f00; text-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
.ranking-place.m1 { background: linear-gradient(180deg, #fff3a8, #ffd23f 45%, #c9900a); border-color: #ffe45e; box-shadow: 2px 2px 0 rgba(0, 0, 0, .5), 0 0 10px rgba(255, 210, 63, .6); }
.ranking-place.m2 { background: linear-gradient(180deg, #ffffff, #cfd6e4 45%, #8b94a8); border-color: #e6ebf5; }
.ranking-place.m3 { background: linear-gradient(180deg, #ffd2a8, #d98a4a 45%, #8a4a1c); border-color: #f0a868; }
.ranking-row:nth-child(n+5) .ranking-place:not(.medal) { color: var(--text-dim); }
/* Scores in LED plates */
.ranking-row .ranking-score { font-family: 'Press Start 2P', monospace; font-size: 14px; color: rgba(255, 176, 0, .75); padding: 6px 7px 4px; min-width: 3.4ch; background: #07020f; border: 1px solid rgba(255, 176, 0, .22); border-radius: 5px; box-shadow: inset 0 0 8px rgba(0, 0, 0, .9); text-shadow: 0 0 5px rgba(255, 176, 0, .45); align-items: center; }
.ranking-row.leads .ranking-score, .ranking-row.rank-1 .ranking-score { color: #ffd23f; border-color: rgba(255, 210, 63, .6); text-shadow: 0 0 8px rgba(255, 210, 63, .9); box-shadow: inset 0 0 8px rgba(0, 0, 0, .9), 0 0 10px rgba(255, 210, 63, .3); }
.ranking-row .rank-back { margin-top: 2px; }
/* Names: pixel font, your own in cyan */
.ranking-row .rank-who { font-family: 'Press Start 2P', monospace; font-size: 9px; letter-spacing: .04em; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .6); }
.ranking-row.is-me .rank-who { color: var(--neon-cyan); text-shadow: 0 0 6px rgba(0, 229, 255, .6); }
/* Chance to win: the segmented neon meter from the gamecast */
.rank-wp-bar { height: 7px; border-radius: 0; background: rgba(255, 255, 255, .05); -webkit-mask: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 7px); mask: repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 7px); }
.rank-wp-bar i { background: #05d9e8; box-shadow: 0 0 6px rgba(5, 217, 232, .8); }
.rank-wp.hot .rank-wp-bar i { background: #ffd23f; box-shadow: 0 0 6px rgba(255, 210, 63, .8); }
.rank-wp b { font-family: 'Press Start 2P', monospace; font-size: 7px; color: var(--neon-cyan); }

/* ===== Leaderboard: denser rows and the pick strip ===== */
.ranking-row { margin: 2px 2px; }
.ranking-row .ranking-main { padding: 6px 8px; gap: 8px; min-height: 0; }
.ranking-row.tier-break { margin-top: 7px; }
.ranking-row.tier-break::after { top: -4px; }
.ranking-place { min-width: 26px; height: 18px; font-size: 7px; padding: 0 4px; }
.ranking-row .rank-who { font-size: 8.5px; }
.ranking-name .ranking-lock { font-size: 7.5px; line-height: 1.4; margin-top: 2px; }
.ranking-row .ranking-score { font-size: 12px; padding: 5px 6px 3px; min-width: 3.2ch; }
.ranking-row .rank-back { font-size: 6px; margin-top: 1px; }
.rank-strip { flex: 1 1 auto; display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; min-width: 96px; max-width: 190px; margin-left: auto; }
.rank-strip .sq { display: block; aspect-ratio: 1; border-radius: 2px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.rank-strip .sq.none { background: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.rank-strip .sq.wait { background: rgba(255, 255, 255, .12); }
.rank-strip .sq.hit { background: #39ff88; box-shadow: 0 0 5px rgba(57, 255, 136, .7), inset 0 1px 0 rgba(255, 255, 255, .5); }
.rank-strip .sq.miss { background: #ff2079; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); opacity: .8; }
.rank-strip .sq.push { background: #ffe45e; }
.rank-strip .sq.live { animation: sqpulse 1.2s ease-in-out infinite; }
.rank-strip .sq.live.up { background: #39ff88; box-shadow: 0 0 6px rgba(57, 255, 136, .8); }
.rank-strip .sq.live.dn { background: #ff2079; box-shadow: 0 0 6px rgba(255, 32, 121, .8); }
@keyframes sqpulse { 50% { opacity: .45; } }
.rank-strip .sq.big { outline: 1.5px solid #ffd23f; outline-offset: 1px; }
.rank-pct { flex: 0 0 auto; min-width: 4ch; text-align: right; font-family: 'Press Start 2P', monospace; font-size: 7.5px; color: var(--text-dim); }
.rank-pct.warm { color: var(--neon-cyan); text-shadow: 0 0 6px rgba(0, 229, 255, .5); }
.rank-pct.hot { color: #ffd23f; text-shadow: 0 0 6px rgba(255, 210, 63, .7); }
@media (prefers-reduced-motion: reduce) { .rank-strip .sq.live { animation: none; } }
/* One line under each name; rows only as tall as they need. */
.rankings-list .ranking-row { padding: 0; }
.rankings-list .ranking-row .ranking-main { padding: 5px 8px; }
.rankings-list .ranking-name { flex: 0 1 auto; min-width: 0; }
.rankings-list .ranking-name .ranking-lock { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rankings-list .rank-max { white-space: nowrap; }
.rankings-list .rank-strip { max-width: 150px; min-width: 90px; gap: 2px; }

/* Chance to win: one clear number with a label, in the middle column. */
.rank-pct2 { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 3px; margin-left: auto; padding-right: 4px; }
.rank-pct2.none { flex: 1 1 auto; }
.rank-pct2 b { font-family: 'Press Start 2P', monospace; font-size: 13px; color: var(--text-meta); letter-spacing: .02em; }
.rank-pct2 i { font-style: normal; font-family: 'Press Start 2P', monospace; font-size: 5px; letter-spacing: .14em; color: var(--text-dim); }
.rank-pct2.warm b { color: var(--neon-cyan); text-shadow: 0 0 8px rgba(0, 229, 255, .6); }
.rank-pct2.hot b { color: #ffd23f; text-shadow: 0 0 8px rgba(255, 210, 63, .75); }
.rank-pct2.out b { color: rgba(255, 255, 255, .3); }
/* Progress bar back as the chance to win, filling the middle column. */
.rankings-list .ranking-main .rank-wp { flex: 1 1 auto; min-width: 80px; }
.rankings-list .rank-wp-bar { height: 9px; }
.rankings-list .rank-wp b { min-width: 4ch; text-align: right; }
/* Fixed name column so every bar starts at the same x. */
.rankings-list .ranking-name { flex: 0 0 42%; max-width: 42%; }
/* No dead gap: names take what they need, the bar fills the rest. */
.rankings-list .ranking-name { flex: 0 0 clamp(110px, 30%, 190px); max-width: clamp(110px, 30%, 190px); }
.rankings-list .ranking-main .rank-wp { flex: 1 1 auto; min-width: 0; max-width: none; margin-left: 4px; gap: 8px; }
.rankings-list .rank-wp-bar { flex: 1 1 auto; max-width: none; width: auto; }
.rankings-list .ranking-name { flex: 0 0 clamp(96px, 26%, 136px); max-width: clamp(96px, 26%, 136px); }

/* Live points under each score: +6 green while cashing, +0 dim, a dash when nothing is live. */
.ranking-scorecol { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.rank-live { font-style: normal; font-family: 'Press Start 2P', monospace; font-size: 6.5px; letter-spacing: .04em; color: rgba(255, 255, 255, .28); }
.rank-live.zero { color: rgba(255, 255, 255, .4); }
.rank-live.on { color: var(--neon-green); text-shadow: 0 0 6px rgba(57, 255, 136, .7); }
/* Live points sit between the name and the chance bar. */
.rank-live.mid { flex: 0 0 auto; min-width: 26px; text-align: center; font-size: 8px; padding: 3px 4px; border-radius: 4px; }
.rank-live.mid.on { background: rgba(57, 255, 136, .1); border: 1px solid rgba(57, 255, 136, .4); }

/* ===== Chance-to-win explainer ===== */
.wp-note { cursor: pointer; }
.wp-note-q { display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; margin-left: 6px; border-radius: 50%; border: 1px solid var(--neon-cyan); font-size: 6px; color: var(--neon-cyan); }
.rankings-list .rank-wp { cursor: help; }
.wpx-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(4, 1, 10, .78); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.wpx-overlay.hidden { display: none; }
.wpx-card { position: relative; width: min(420px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 18px 16px 14px; border-radius: 14px; background: radial-gradient(120% 80% at 50% 0%, #1b0b36 0%, #07020f 70%); box-shadow: 0 18px 40px rgba(0, 0, 0, .6); animation: wpxin .22s steps(4, end); }
.wpx-card::before { content: ""; position: absolute; inset: 0; border-radius: 14px; padding: 2px; background: linear-gradient(90deg, #05d9e8, #c13cff 50%, #ff2079); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; filter: drop-shadow(0 0 8px rgba(193, 60, 255, .6)); pointer-events: none; }
.wpx-card::after { content: ""; position: absolute; inset: 0; border-radius: 14px; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px); }
@keyframes wpxin { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
.wpx-x { position: absolute; top: 8px; right: 8px; z-index: 2; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: rgba(10, 4, 20, .85); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; }
.wpx-title { font-family: 'Press Start 2P', monospace; font-size: 10px; letter-spacing: .08em; color: #ffe45e; text-shadow: 0 0 10px rgba(255, 228, 94, .7); text-align: center; margin: 2px 24px 12px; line-height: 1.6; }
.wpx-title span { color: var(--neon-cyan); text-shadow: 0 0 8px rgba(0, 229, 255, .6); }
.wpx-big { text-align: center; font-size: 13px; line-height: 1.5; color: var(--text); padding: 10px; border-radius: 8px; border: 1px solid rgba(0, 229, 255, .3); background: rgba(0, 229, 255, .06); margin-bottom: 12px; }
.wpx-big b { font-family: 'Press Start 2P', monospace; font-size: 11px; color: #ffd23f; text-shadow: 0 0 6px rgba(255, 210, 63, .6); }
.wpx-steps { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.wpx-steps li { display: flex; gap: 10px; align-items: flex-start; }
.wpx-steps li > i { flex: 0 0 auto; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-style: normal; font-family: 'Press Start 2P', monospace; font-size: 9px; color: #0a0414; background: linear-gradient(180deg, #7ff3ff, #05d9e8); box-shadow: 2px 2px 0 rgba(0, 0, 0, .5), 0 0 8px rgba(5, 217, 232, .5); }
.wpx-steps li > div { display: flex; flex-direction: column; gap: 3px; }
.wpx-steps b { font-family: 'Press Start 2P', monospace; font-size: 7.5px; letter-spacing: .06em; color: #fff; }
.wpx-steps span { font-size: 11.5px; line-height: 1.45; color: var(--text-meta); }
.wpx-h { font-family: 'Press Start 2P', monospace; font-size: 6.5px; letter-spacing: .12em; color: var(--neon-pink); margin: 4px 0 6px; }
.wpx-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.wpx-chips span { font-family: 'Press Start 2P', monospace; font-size: 6px; letter-spacing: .06em; padding: 5px 7px; color: var(--neon-cyan); border: 1px solid rgba(0, 229, 255, .4); background: rgba(0, 229, 255, .06); }
.wpx-ex { font-size: 11.5px; line-height: 1.5; color: var(--text); padding: 9px 10px; border-left: 3px solid #ffd23f; background: rgba(255, 210, 63, .06); margin-bottom: 10px; }
.wpx-ex b { font-family: 'Press Start 2P', monospace; font-size: 6.5px; color: #ffd23f; margin-right: 6px; }
.wpx-ex em { font-style: normal; color: #ffd23f; font-weight: 800; }
.wpx-foot { font-size: 11px; line-height: 1.45; color: var(--text-dim); text-align: center; }
.wpx-foot b { color: var(--neon-cyan); }
@media (prefers-reduced-motion: reduce) { .wpx-card { animation: none; } }
.rankings-list .rank-wp { cursor: pointer; }

.chalk-note{margin:10px 4px 2px;font-size:10px;line-height:1.4;opacity:.55;letter-spacing:.02em}

/* Column key: tiny dim labels, no plates or glow. */
.ranking-row.rank-hd { background: none !important; border: 0 !important; box-shadow: none !important; pointer-events: none; padding-top: 0; padding-bottom: 0; }
.ranking-row.rank-hd .ranking-main { padding-top: 2px; padding-bottom: 4px; min-height: 0; cursor: default; }
.ranking-row.rank-hd :is(.ranking-place, .ranking-name, .rank-live, .rank-wp b, .ranking-score) { background: none !important; border: 0 !important; box-shadow: none !important; text-shadow: none !important; font-family: 'Press Start 2P', monospace; font-size: 6px; letter-spacing: .1em; color: rgba(255, 255, 255, .32) !important; }
.ranking-row.rank-hd .ranking-place { height: auto; }
.ranking-row.rank-hd .rank-wp-bar { visibility: hidden; }
.ranking-row.rank-hd .ranking-score::before, .ranking-row.rank-hd .ranking-score::after { display: none !important; }

/* Scoreboard strip: flashing on-air tag beside the clock while games are live. */
.ms-onair { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; margin-right: 8px; font-family: 'Press Start 2P', monospace; font-size: 8px; letter-spacing: .08em; color: #ff3b5c; text-shadow: 0 0 6px rgba(255, 59, 92, .7); animation: onair 1.2s steps(1) infinite; }
.ms-onair i { width: 7px; height: 7px; border-radius: 50%; background: #ff3b5c; box-shadow: 0 0 8px #ff3b5c; }
.ms-onair + .ms-refresh { margin-left: 0; }
@keyframes onair { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .ms-onair { animation: none; } }
/* WIN% key opens the explainer. */
.ranking-row.rank-hd .rank-hd-wp { pointer-events: auto; cursor: pointer; }
.chalk-note { font-size: 8.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; margin: 8px 4px 2px; }
.ms-onair { margin-right: 6px; gap: 0; }
/* Live, not yet banked: dashed outline instead of a question mark. */
.stake.lean { border-style: dashed !important; border-width: 1.5px; background: none !important; }
.stake.lean.hit { border-color: rgba(0, 255, 143, .75); }
.stake.lean.miss { border-color: rgba(255, 92, 138, .65); }

/* Live dot sits inside the clock, right of the time. */
.ms-refresh .ms-onair { margin: 0 0 0 6px; vertical-align: middle; }
/* Leaderboard: tighter frame, key and rows. */
.rankings-list { padding: 4px 4px 6px; }
.ranking-row.rank-hd { margin: 0 2px; }
.ranking-row.rank-hd .ranking-main { padding-top: 4px; padding-bottom: 1px; }
.ranking-row.rank-hd :is(.ranking-place, .ranking-name, .rank-live) { height: auto; min-height: 0; padding-top: 0; padding-bottom: 0; }
.ranking-row.rank-hd .ranking-score { padding-top: 0; padding-bottom: 0; }
.rankings-list .ranking-row .ranking-main { padding-top: 4px; padding-bottom: 4px; }
.ranking-row { margin: 1px 2px; }
.chalk-note { margin: 4px 4px 0; }

/* H2H: same picks fade back and say SAME; splits stay bright with a neon edge. */
.h2h-tr.same .h2h-td { opacity: .38; }
.h2h-tr.same .h2h-mid > span { color: rgba(255, 255, 255, .45); text-shadow: none; letter-spacing: .08em; }
.h2h-tr.split { box-shadow: inset 2px 0 0 var(--neon-cyan), inset -2px 0 0 var(--neon-pink); }
.h2h-tr.is-live:not(.same) { background: rgba(5, 217, 232, .06); }
.h2h-tr.is-live.same { background: none; box-shadow: none; }
/* H2H live points: crisp, no glow. A dashed outline says not banked yet,
   same as the scoreboard pills. */
.h2h-td.live-hit b, .h2h-td.live-miss b { text-shadow: none; filter: none; border: 1.5px dashed currentColor; border-radius: 999px; padding: 1px 6px; line-height: 1.2; }
.rank-detail > .rd-wp:first-child { margin: 0 0 8px; padding: 2px 0 8px; border-top: 0; border-bottom: 1px solid rgba(5, 217, 232, .35); }
.h2h-td.live-hit b, .h2h-td.live-miss b { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 14px; min-width: 20px; padding: 0 4px; border-width: 1px; line-height: 1; justify-self: center; }
#me-pill { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
/* Avatar editor: background colour palette. */
.avatar-palette { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; width: 100%; max-width: 210px; margin: 10px auto 2px; }
.av-sw { aspect-ratio: 1; width: 100%; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .15); background: var(--c); padding: 0; cursor: pointer; }
.av-sw.on { border-color: #fff; box-shadow: 0 0 0 2px var(--c), 0 0 10px var(--c); }
.av-sw.def { background: repeating-linear-gradient(135deg, var(--c) 0 5px, rgba(0, 0, 0, .35) 5px 8px); }
.claim-hint { display: block; margin-top: 4px; font-size: 10px; opacity: .6; letter-spacing: .02em; }
.claim-btn { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* ===== Season stats: arcade high score cabinet ===== */
.season-panel { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 12px 8px 10px; border-radius: 12px; background: radial-gradient(120% 70% at 50% 0%, #1a0838 0%, #07020f 70%); box-shadow: 0 10px 26px rgba(0, 0, 0, .55); overflow: hidden; }
.season-panel::before { content: ""; position: absolute; inset: 0; border-radius: 12px; padding: 2px; background: linear-gradient(90deg, #05d9e8, #c13cff 50%, #ff2079); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.season-panel::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px); pointer-events: none; }
.ss-marquee { text-align: center; padding: 4px 0 2px; }
.ss-marquee span { display: block; font-family: 'Press Start 2P', monospace; font-size: 13px; letter-spacing: .12em; color: var(--neon-yellow); text-shadow: 2px 2px 0 #ff2079, 0 0 12px rgba(255, 228, 94, .45); animation: ss-blink 2.4s steps(1) infinite; }
.ss-marquee small { display: block; margin-top: 7px; font-family: 'Press Start 2P', monospace; font-size: 6.5px; letter-spacing: .14em; color: var(--neon-cyan); opacity: .75; }
@keyframes ss-blink { 92% { opacity: 1; } 96% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ss-marquee span { animation: none; } }
.ss-card { --c: var(--neon-cyan); position: relative; padding: 0 0 4px; border: 2px solid var(--c); border-radius: 8px; background: rgba(0, 0, 0, .45); box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 4px 4px 0 rgba(0, 0, 0, .55), inset 0 0 18px rgba(0, 0, 0, .7); }
.ss-head { display: flex; align-items: center; gap: 8px; margin: 0; padding: 7px 10px; background: var(--c); color: #0a0414; font-family: 'Press Start 2P', monospace; font-size: 8px; letter-spacing: .1em; border-radius: 5px 5px 0 0; text-shadow: none; }
.ss-ico { font-style: normal; font-size: 13px; line-height: 1; filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .35)); }
.ss-desc { padding: 5px 10px 2px; font-size: 9.5px; color: var(--text-dim); letter-spacing: .02em; }
.ss-table { padding: 0 8px; }
.ss-row { display: grid; grid-template-columns: 30px 22px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 6px 2px; border-top: 1px dashed rgba(255, 255, 255, .08); font-size: 11px; }
.ss-row:first-child { border-top: 0; }
.ss-rank { font-family: 'Press Start 2P', monospace; font-size: 7px; letter-spacing: .02em; color: var(--text-dim); }
.ss-rank.m1 { color: #ffd23f; text-shadow: 0 0 6px rgba(255, 210, 63, .6); }
.ss-rank.m2 { color: #cfd6e4; }
.ss-rank.m3 { color: #e09a5a; }
.ss-av { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; background: var(--accent); color: #0a0414; font-family: 'Press Start 2P', monospace; font-size: 9px; line-height: 1; box-shadow: 2px 2px 0 rgba(0, 0, 0, .5); }
.ss-name { font-family: 'Press Start 2P', monospace; font-size: 7.5px; letter-spacing: .05em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-row.lead .ss-name { color: #fff; }
.ss-row.me .ss-name { color: var(--neon-cyan); }
.ss-row.lead { background: linear-gradient(90deg, rgba(255, 210, 63, .1), transparent 70%); border-radius: 4px; }
.ss-sub { font-size: 9.5px; color: var(--text-dim); white-space: nowrap; }
.ss-val { min-width: 46px; padding: 5px 6px 4px; text-align: center; font-family: 'Press Start 2P', monospace; font-weight: normal; font-size: 10px; color: var(--c); background: #07020f; border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); border-radius: 4px; box-shadow: inset 0 0 8px rgba(0, 0, 0, .9); text-shadow: 0 0 5px color-mix(in srgb, var(--c) 55%, transparent); }
.ss-row.none { display: block; padding: 10px 2px; text-align: center; font-family: 'Press Start 2P', monospace; font-size: 6.5px; letter-spacing: .1em; color: var(--text-dim); }
.ss-note { display: none; }
.ss-head { justify-content: flex-start; }
.ss-row.lead .ss-rank.m1 { color: #ffd23f; }
.ss-row { padding: 5px 2px; }

/* Pregame INFO: who has which side. */
.rp { margin: 0 0 10px; padding: 8px; border: 1px solid rgba(193, 60, 255, .45); border-radius: 10px; background: rgba(0, 0, 0, .35); }
.rp-h { font-family: 'Press Start 2P', monospace; font-size: 7px; letter-spacing: .12em; color: var(--neon-cyan); margin: 2px 2px 8px; }
.rp-lock { font-size: 11px; color: var(--text-dim); padding: 2px; }
.rp-lock b { color: var(--neon-cyan); font-weight: 700; }
.rp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rp-col { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.rp-team { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 6px; background: rgba(255, 255, 255, .06); font-weight: 700; font-size: 12px; color: #fff; }
.rp-team span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-team b { font-family: 'Press Start 2P', monospace; font-size: 8px; color: var(--neon-yellow); }
.rp-logo { width: 20px; height: 20px; object-fit: contain; }
.rp-bet { padding: 0 2px; }
.rp-bh { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.rp-bh b { font-family: 'Press Start 2P', monospace; font-size: 7.5px; color: var(--neon-cyan); font-weight: normal; }
.rp-bh em { font-style: normal; font-size: 9.5px; color: var(--text-dim); }
.rp-bh i { margin-left: auto; font-style: normal; font-size: 10px; color: var(--text-dim); }
.rp-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.rp-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px 2px 2px; border-radius: 999px; background: rgba(255, 255, 255, .06); font-size: 11px; color: var(--text); }
.rp-chip.me { color: var(--neon-cyan); box-shadow: inset 0 0 0 1px rgba(5, 217, 232, .5); }
.rp-chip .pick-chip-av { width: 16px; height: 16px; font-size: 9px; }
.rp-none { font-size: 10.5px; color: var(--text-dim); padding: 0 2px; }
.rp-np { margin-top: 8px; font-size: 10px; color: var(--text-dim); }

/* ===== H2H cleanup: fighter cards, splits only, same-pick strip ===== */
.h2h-pickers { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; }
.h2h-fighter { --c: var(--neon-cyan); position: relative; display: flex; align-items: center; gap: 7px; min-width: 0; padding: 7px 8px; border: 2px solid var(--c); border-radius: 10px; background: color-mix(in srgb, var(--c) 10%, #07020f); box-shadow: 3px 3px 0 rgba(0, 0, 0, .5); cursor: pointer; }
.h2h-fighter.b { --c: var(--neon-pink); justify-content: flex-end; text-align: right; }
.h2h-fighter select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.h2h-f-av { flex: none; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; background: var(--accent); color: #0a0414; font-family: 'Press Start 2P', monospace; font-size: 12px; line-height: 1; box-shadow: 2px 2px 0 rgba(0, 0, 0, .5); }
.h2h-f-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.h2h-f-name { font-family: 'Press Start 2P', monospace; font-weight: normal; font-size: 8px; letter-spacing: .05em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h2h-f-name::after { content: " ▾"; color: var(--c); }
.h2h-f-meta { font-family: 'Press Start 2P', monospace; font-size: 5.5px; letter-spacing: .06em; color: var(--text-dim); white-space: nowrap; }
.h2h-f-meta em { font-style: normal; color: var(--neon-green); }
.h2h-f-score { flex: none; font-style: normal; font-family: 'Press Start 2P', monospace; font-size: 15px; color: rgba(255, 255, 255, .55); }
.h2h-fighter.ahead .h2h-f-score { color: var(--neon-green); }
.h2h-vs { font-family: 'Press Start 2P', monospace; font-size: 9px; color: var(--text-dim); }
.h2h-arr { display: none; }
.h2h-tr { min-height: 40px; }
.h2h-nm { font-size: 13px; }
.h2h-line { opacity: .6; font-size: 11px; }
.h2h-same { margin-top: 8px; padding: 7px 8px; border: 1px dashed rgba(255, 255, 255, .14); border-radius: 8px; }
.h2h-same-h { font-family: 'Press Start 2P', monospace; font-size: 6px; letter-spacing: .12em; color: var(--text-dim); margin-bottom: 6px; }
.h2h-same-l { display: flex; flex-wrap: wrap; gap: 5px; }
.h2h-same-c { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px 3px 4px; border-radius: 999px; background: rgba(255, 255, 255, .05); font-size: 11px; color: var(--text-dim); }
.h2h-same-c .h2h-logo { width: 14px; height: 14px; }
.h2h-same-c small { font-size: 9.5px; opacity: .7; }
.h2h-same-c b { font-family: 'Press Start 2P', monospace; font-weight: normal; font-size: 7px; margin-left: 2px; }
.h2h-same-c.hit b, .h2h-same-c.live-hit b { color: var(--neon-green); }
.h2h-same-c.miss b, .h2h-same-c.live-miss b { color: var(--neon-pink); }
.h2h-sec { font-family: 'Press Start 2P', monospace; font-size: 6px; letter-spacing: .12em; color: var(--neon-yellow); margin: 6px 2px 4px; }

/* Player chance popup */
.wpp { gap: 10px; }
.wpp-head { display: flex; align-items: center; gap: 10px; padding-right: 26px; }
.wpp-av { width: 38px; height: 38px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--accent); color: #0a0414; font-family: 'Press Start 2P', monospace; font-size: 14px; box-shadow: 3px 3px 0 rgba(0, 0, 0, .5); }
.wpp-head div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.wpp-head b { font-family: 'Press Start 2P', monospace; font-weight: normal; font-size: 10px; color: #fff; }
.wpp-head small { font-family: 'Press Start 2P', monospace; font-size: 6.5px; color: var(--text-dim); letter-spacing: .06em; }
.wpp-head i { font-style: normal; font-family: 'Press Start 2P', monospace; font-size: 18px; color: var(--neon-cyan); text-shadow: 0 0 8px rgba(5, 217, 232, .5); }
.wpp-stand { font-size: 13px; color: #fff; }
.wpp-why, .wpp-games { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wpp-why li { position: relative; padding-left: 14px; font-size: 12px; line-height: 1.4; color: var(--text); }
.wpp-why li::before { content: "▸"; position: absolute; left: 0; color: var(--neon-yellow); }
.wpp-why b { color: var(--neon-cyan); }
.wpp-games li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 6px; background: rgba(255, 255, 255, .05); font-size: 12px; }
.wpp-games em { font-style: normal; color: var(--text-dim); white-space: nowrap; }
.wpp-games .up { color: var(--neon-green); } .wpp-games .dn { color: var(--neon-pink); }
.wpp-foot { font-size: 10px; color: var(--text-dim); }
.wpp-math { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.wpp-math span { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; border-radius: 6px; background: rgba(255, 255, 255, .05); font-size: 9.5px; color: var(--text-dim); text-align: center; }
.wpp-math b { font-family: 'Press Start 2P', monospace; font-weight: normal; font-size: 10px; color: #fff; }
.wpp-fin { display: flex; flex-direction: column; gap: 4px; }
.wpp-fin-h, .wpp-gh { display: grid; font-family: 'Press Start 2P', monospace; font-size: 5.5px; letter-spacing: .08em; color: var(--text-dim); }
.wpp-fin-h { grid-template-columns: 34px 1fr 72px; gap: 8px; }
.wpp-fin-h span:last-child { text-align: right; }
.wpp-fin-r { display: grid; grid-template-columns: 34px 1fr 72px; gap: 8px; align-items: center; font-size: 12px; }
.wpp-fin-r > b { font-family: 'Press Start 2P', monospace; font-weight: normal; font-size: 10px; color: var(--neon-yellow); }
.wpp-bar { position: relative; height: 14px; border-radius: 3px; background: rgba(255, 255, 255, .05); overflow: hidden; }
.wpp-bar i { position: absolute; inset: 0 auto 0 0; background: rgba(5, 217, 232, .35); }
.wpp-bar em { position: relative; font-style: normal; font-size: 10px; padding-left: 5px; line-height: 14px; color: #fff; }
.wpp-fin-r strong { text-align: right; color: var(--text-dim); font-weight: 700; }
.wpp-fin-r.good strong { color: var(--neon-green); }
.wpp-gh { grid-template-columns: 1fr 44px 50px 50px; gap: 6px; padding: 0 8px; }
.wpp-gh span:not(:first-child) { text-align: right; }
.wpp-games li { display: grid; grid-template-columns: 1fr 44px 50px 50px; gap: 6px; align-items: center; }
.wpp-games li > em, .wpp-games li > b { text-align: right; }
.wpp-thr { display: flex; flex-wrap: wrap; gap: 6px; }
.wpp-th { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 3px; border-radius: 999px; background: rgba(255, 255, 255, .06); font-size: 12px; }
.wpp-th .pick-chip-av { width: 18px; height: 18px; font-size: 9px; }
.wpp-th b { color: var(--neon-pink); margin-left: 2px; }
.wpp { max-height: 86vh; overflow-y: auto; }
.wpp-fin-h span { white-space: nowrap; }
.wpp-fin-r.rest > b { font-family: inherit; font-size: 10px; color: var(--text-dim); }
.wpp-fin-r.rest .wpp-bar i { background: rgba(255, 255, 255, .12); }
.wpp-why em { font-style: normal; color: var(--neon-pink); }
.wpp-verdict { font-size: 14px; line-height: 1.45; color: #fff; padding: 9px 10px; border-left: 3px solid var(--neon-yellow); background: rgba(255, 228, 94, .07); border-radius: 0 6px 6px 0; }
.wpp-vs-h { display: grid; grid-template-columns: 1fr 1fr 74px; gap: 6px; padding: 0 8px; font-family: 'Press Start 2P', monospace; font-size: 5.5px; letter-spacing: .08em; color: var(--text-dim); }
.wpp-vs-h span:last-child { text-align: right; }
.wpp-vs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.wpp-vs li { display: grid; grid-template-columns: 1fr 1fr 74px; gap: 2px 6px; align-items: center; padding: 6px 8px; border-radius: 6px; background: rgba(255, 255, 255, .05); font-size: 12px; }
.wpp-vs li > b { text-align: right; font-family: 'Press Start 2P', monospace; font-weight: normal; font-size: 8px; color: var(--text-dim); }
.wpp-vs li > em { grid-column: 1 / -1; font-style: normal; font-size: 10px; color: var(--text-dim); }
.wpp-vs li > em:empty { display: none; }
.wpp-vs li.edge > b { color: var(--neon-green); }
.wpp-vs li.edge { box-shadow: inset 3px 0 0 var(--neon-green); }
.wpp-vs li.same { opacity: .45; }
.wpp-note { font-size: 10px; color: var(--text-dim); }
.wpp-more { border-top: 1px dashed rgba(255, 255, 255, .12); padding-top: 8px; }
.wpp-more summary { cursor: pointer; font-family: 'Press Start 2P', monospace; font-size: 7px; letter-spacing: .1em; color: var(--neon-cyan); list-style: none; }
.wpp-more summary::-webkit-details-marker { display: none; }
.wpp-more summary::before { content: "▸ "; }
.wpp-more[open] summary::before { content: "▾ "; }
.wpp-more[open] { display: flex; flex-direction: column; gap: 10px; }
.wpp-vh { display: block; font-family: 'Press Start 2P', monospace; font-weight: normal; font-size: 11px; color: var(--neon-yellow); margin-bottom: 6px; line-height: 1.4; }
.wpp-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wpp-lines li { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: 6px; background: rgba(255, 255, 255, .05); font-size: 12.5px; }
.wpp-lines li b { font-size: 11px; color: var(--text-dim); font-weight: 600; }
.wpp-lines .up { color: var(--neon-green); }
.wpp-lines .dn { color: var(--neon-pink); }
.wpp-bottom { font-size: 13px; color: #fff; padding: 2px 2px; }
.wpp-zero { font-size: 12px; color: var(--neon-pink); }
.wpp-same { font-size: 11px; color: var(--text-dim); }

/* ===== Week recap: arcade replay cabinet ===== */
.recap-panel:not(.hidden) { position: relative; gap: 10px; padding: 12px 8px 10px; border-radius: 12px; background: radial-gradient(120% 70% at 50% 0%, #1a0838 0%, #07020f 70%); box-shadow: 0 10px 26px rgba(0, 0, 0, .55); overflow: hidden; }
.recap-panel:not(.hidden)::before { content: ""; position: absolute; inset: 0; border-radius: 12px; padding: 2px; background: linear-gradient(90deg, #05d9e8, #c13cff 50%, #ff2079); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.recap-panel:not(.hidden)::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px); pointer-events: none; }
.recap-marquee { text-align: center; padding: 4px 0 2px; }
.recap-marquee span { display: block; font-family: 'Press Start 2P', monospace; font-size: 12px; letter-spacing: .1em; color: var(--neon-yellow); text-shadow: 2px 2px 0 #ff2079, 0 0 12px rgba(255, 228, 94, .45); animation: ss-blink 2.4s steps(1) infinite; }
.recap-marquee small { display: block; margin-top: 7px; font-family: 'Press Start 2P', monospace; font-size: 6.5px; letter-spacing: .14em; color: var(--neon-cyan); opacity: .75; }
.recap-card.arc { grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 8px 10px; padding: 0 10px 10px; border: 2px solid var(--c); border-radius: 8px; background: rgba(0, 0, 0, .45); box-shadow: 4px 4px 0 rgba(0, 0, 0, .55), inset 0 0 18px rgba(0, 0, 0, .7); }
.recap-card.arc.me { box-shadow: 4px 4px 0 rgba(0, 0, 0, .55), 0 0 14px color-mix(in srgb, var(--c) 40%, transparent); }
.recap-card.arc > .recap-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 0 -10px; padding: 7px 10px; background: var(--c); color: #0a0414; border-radius: 5px 5px 0 0; font-family: 'Press Start 2P', monospace; font-size: 8px; letter-spacing: .1em; text-shadow: none; }
.recap-card.arc > .recap-head .recap-icon { fill: #0a0414; filter: none; }
.recap-card.arc > .recap-head .recap-you { margin-left: auto; background: #0a0414; color: var(--c); }
.recap-card.arc .recap-art { align-self: center; }
.recap-card.arc .recap-main { font-size: 14px; }
.recap-card.arc .recap-sub { font-size: 11px; }
.recap-card.arc .recap-stat { align-self: center; min-width: 64px; padding: 8px 8px 6px; text-align: center; background: #07020f; border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); border-radius: 5px; box-shadow: inset 0 0 10px rgba(0, 0, 0, .9); border-left: 1px solid color-mix(in srgb, var(--c) 40%, transparent); }
.recap-card.arc .recap-stat b { font-family: 'Press Start 2P', monospace; font-weight: normal; font-size: 16px; color: var(--c); text-shadow: 0 0 6px color-mix(in srgb, var(--c) 60%, transparent); }
.recap-card.arc .recap-stat span { display: block; margin-top: 6px; font-family: 'Press Start 2P', monospace; font-size: 5.5px; letter-spacing: .1em; color: var(--text-dim); }
#recap-toggle { display: none !important; }
/* Week over: correct picks as logos with a points badge, centred. */
.week-done .rank-live.mid { display: none; }
.rank-hits { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 5px; }
.rank-hits.hd { font-family: 'Press Start 2P', monospace; font-size: 6px; letter-spacing: .1em; color: rgba(255, 255, 255, .32); }
.rank-hits em { font-style: normal; font-size: 10px; color: var(--text-dim); }
.rh { position: relative; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; }
.rh img { width: 22px; height: 22px; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
.rh b { position: absolute; right: -5px; bottom: -4px; min-width: 14px; padding: 1px 2px; border-radius: 4px; font-family: 'Press Start 2P', monospace; font-weight: normal; font-size: 5.5px; line-height: 1.2; text-align: center; color: #0a0414; background: var(--neon-cyan); box-shadow: 1px 1px 0 rgba(0, 0, 0, .6); }
.rh b.t1 { background: #9aa0b5; }
.rh b.t3 { background: var(--neon-yellow); }
/* One line, always: logos shrink to fit instead of wrapping. */
.rank-hits { flex-wrap: nowrap; gap: 4px; overflow: visible; }
.rh { flex: 0 1 22px; min-width: 12px; width: auto; height: 22px; }
.rh img { width: 100%; height: auto; max-height: 22px; }
.rh b { right: -3px; bottom: -5px; min-width: 0; padding: 1px 1.5px; font-size: 5px; }
.rh { aspect-ratio: 1; height: auto; max-height: 22px; }
.rh img { width: 100%; height: 100%; max-height: none; }
/* Week over: the live column is gone, so the logos start right after the name. */
.week-done .rank-hits:not(.hd) { justify-content: flex-start; gap: 5px; padding-left: 2px; }
.week-done .rank-hits.hd { justify-content: flex-start; padding-left: 2px; }
.week-done .rh { flex: 0 1 24px; max-height: 24px; }
.week-done .rank-hits:not(.hd) { gap: 4px; min-width: 0; }
.week-done .rh { min-width: 0; }
/* Even columns: every row has the same slots, every logo the same size. */
.week-done .rank-hits:not(.hd) { display: grid; grid-template-columns: repeat(var(--hits, 8), minmax(0, 1fr)); justify-items: center; gap: 0 3px; }
.week-done .rh { width: min(24px, 100%); max-height: none; flex: none; }
/* Week story: a magazine page inside the arcade frame. */
.story { position: relative; z-index: 1; padding: 14px 14px 12px; border-radius: 8px; background: #f4efe4; color: #15110c; box-shadow: 4px 4px 0 rgba(0, 0, 0, .55); }
.story-kicker { font-family: 'Press Start 2P', monospace; font-size: 6.5px; letter-spacing: .14em; color: #c8102e; padding-bottom: 6px; border-bottom: 2px solid #15110c; margin-bottom: 8px; }
.story h3 { margin: 0 0 4px; font-family: Georgia, 'Times New Roman', serif; font-size: 22px; line-height: 1.12; font-weight: 800; letter-spacing: -.01em; color: #15110c; }
.story-by { font-family: Georgia, serif; font-style: italic; font-size: 11px; color: #6b5f4f; margin-bottom: 8px; }
.story p { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: 14px; line-height: 1.5; color: #241d15; }
.story p::first-letter { float: left; font-size: 40px; line-height: .9; font-weight: 800; padding: 4px 6px 0 0; color: #c8102e; }
.story-body.loading { font-family: Georgia, serif; font-style: italic; font-size: 12px; color: #6b5f4f; }
.story-next { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(21, 17, 12, .25); font-size: 12px; font-weight: 700; color: #15110c; }
.story-next b { font-family: 'Press Start 2P', monospace; font-weight: normal; font-size: 6.5px; letter-spacing: .1em; color: #fff; background: #c8102e; padding: 4px 5px; border-radius: 3px; }
.story-next em { font-style: normal; font-weight: 500; color: #6b5f4f; }
.story-logo { width: 18px; height: 18px; object-fit: contain; }
.pot-row { grid-template-columns: 22px minmax(0, 1fr) 36px 44px 46px 56px; }
.pot-rec { text-align: center; font-variant-numeric: tabular-nums; color: var(--text-dim); font-size: 11px; }
.pot-row.head .pot-rec, .pot-row.head span:nth-child(4) { text-align: center; }
@media (max-width: 360px) { .pot-row { grid-template-columns: 20px minmax(0, 1fr) 32px 40px 40px 50px; } }

/* ===== Week over: recap, pot, leaderboard, scores, in that order ===== */
#scores-toggle { display: none; }
#scoreboard-screen.week-over #scores-toggle { display: flex; }

#scoreboard-screen.week-over #live-scores-list.folded { display: none; }
#scoreboard-screen.week-over > .wrap { display: flex; flex-direction: column; }
#scoreboard-screen.week-over > .wrap > * { order: 50; }
#scoreboard-screen.week-over #week-champ { order: 0; }
#scoreboard-screen.week-over #scoreboard-updated, #scoreboard-screen.week-over #insert-coin, #scoreboard-screen.week-over #my-score { order: 1; }
#scoreboard-screen.week-over #recap-toggle { order: 2; }
#scoreboard-screen.week-over #recap-panel { order: 3; }
#scoreboard-screen.week-over #payouts-toggle { order: 4; }
#scoreboard-screen.week-over #payouts-panel { order: 5; }
#scoreboard-screen.week-over .lb-head { order: 6; }
#scoreboard-screen.week-over #rankings-list { order: 7; }
#scoreboard-screen.week-over #scores-toggle { order: 8; }
#scoreboard-screen.week-over #live-scores-list { order: 9; }
#scoreboard-screen.week-over #all-picks-toggle { order: 10; }
#scoreboard-screen.week-over .scoreboard-table-wrap { order: 11; }
#scoreboard-screen.week-over #season-toggle { order: 12; }
#scoreboard-screen.week-over #season-panel { order: 13; }
.recap-marquee { cursor: pointer; }
.recap-panel.folded .recap-card { display: none; }
.recap-caret { font-style: normal; display: inline-block; margin-left: 4px; transition: transform .15s; }
.recap-panel.folded .recap-caret { transform: rotate(-90deg); }
/* Week over: the name column hugs the name, the logos take the rest. */
.week-done .rank-hits:not(.hd) { gap: 0 2px; }
.week-done .rh { width: min(28px, 100%); }
/* Same name width on every row so the logo columns still line up. */
.week-done .ranking-row .ranking-name { flex: 0 0 76px; width: 76px; max-width: 76px; }

/* ===== The Pot: jackpot, season bar, avatars ===== */
.pot-jackpot { position: relative; text-align: center; padding: 14px 10px 12px; border: 2px solid var(--neon-yellow); border-radius: 10px; background: radial-gradient(120% 90% at 50% 0%, #2a1a00 0%, #07020f 75%); box-shadow: 4px 4px 0 rgba(0, 0, 0, .55), 0 0 22px rgba(255, 210, 63, .25), inset 0 0 18px rgba(0, 0, 0, .7); overflow: hidden; }
.pot-jackpot::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px); pointer-events: none; }
.pj-label { font-family: 'Press Start 2P', monospace; font-size: 7px; letter-spacing: .14em; color: var(--neon-pink); animation: ss-blink 2.4s steps(1) infinite; }
.pj-amount { margin: 10px 0 8px; font-family: 'Press Start 2P', monospace; font-size: 30px; line-height: 1; color: #ffd23f; text-shadow: 3px 3px 0 #b5179e, 0 0 16px rgba(255, 210, 63, .6); }
.pj-sub { font-size: 10.5px; color: var(--text-dim); }
.pot-season { display: flex; flex-direction: column; gap: 6px; }
.ps-head { display: flex; justify-content: space-between; font-family: 'Press Start 2P', monospace; font-size: 7px; letter-spacing: .12em; color: var(--neon-cyan); }
.ps-head b { font-weight: normal; color: #fff; }
.ps-bar { display: grid; grid-template-columns: repeat(14, 1fr); gap: 3px; }
.ps-seg { position: relative; height: 22px; border-radius: 3px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); display: flex; align-items: center; justify-content: center; }
.ps-seg.won { background: linear-gradient(180deg, #ffe45e, #c9900a); border-color: #ffe45e; box-shadow: 0 0 6px rgba(255, 210, 63, .45); }
.ps-seg.live { border-color: var(--neon-cyan); background: rgba(5, 217, 232, .15); animation: h2h-blink 1s steps(1) infinite; }
.ps-av { width: 14px; height: 14px; border-radius: 3px; background: var(--accent); color: #0a0414; font-family: 'Press Start 2P', monospace; font-size: 6px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; box-shadow: 1px 1px 0 rgba(0, 0, 0, .5); }
.ps-av + .ps-av { margin-left: -6px; }
.pot-name { display: flex; align-items: center; gap: 7px; min-width: 0; }
.pot-av { flex: none; width: 20px; height: 20px; border-radius: 5px; background: var(--accent); color: #0a0414; font-family: 'Press Start 2P', monospace; font-size: 8px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; box-shadow: 2px 2px 0 rgba(0, 0, 0, .5); }
.pot-crown { font-style: normal; color: #ffd23f; text-shadow: 0 0 6px rgba(255, 210, 63, .7); margin-right: -3px; }
.pot-row.leader { background: linear-gradient(90deg, rgba(255, 210, 63, .14), transparent 75%); box-shadow: inset 3px 0 0 #ffd23f; }
.pot-row.leader .pot-name, .pot-row.leader .pot-pts b { color: #ffd23f; }
/* Trophies are buttons now. */
.pot-tro { background: none; border: 0; padding: 0 1px; font-size: inherit; cursor: pointer; line-height: 1; }
.pot-tro.exh { filter: grayscale(.6) brightness(.9); }
button.ps-seg { padding: 0; cursor: pointer; font: inherit; }
/* Week win card */
.ww { gap: 10px; }
.ww-kicker { font-family: 'Press Start 2P', monospace; font-size: 7px; letter-spacing: .12em; color: #ffd23f; padding-right: 28px; }
.ww-head { display: flex; align-items: center; gap: 10px; }
.ww-head > div { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.ww-head b { font-family: 'Press Start 2P', monospace; font-weight: normal; font-size: 11px; color: #fff; }
.ww-head small { font-family: 'Press Start 2P', monospace; font-size: 6.5px; color: var(--text-dim); }
.ww-prize { font-family: 'Press Start 2P', monospace; font-size: 14px; color: #ffd23f; text-shadow: 2px 2px 0 #b5179e; }
.ww-prize.exh { font-size: 7px; color: var(--text-dim); text-shadow: none; }
.ww-how { font-size: 13px; line-height: 1.45; color: #fff; }
.ww-how b { color: #ffd23f; }
.ww-dec { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 6px; background: rgba(255, 255, 255, .05); font-size: 12px; }
.ww-dec b { font-size: 11px; color: var(--text-dim); font-weight: 600; }
.ww-dec .dim { color: var(--text-dim); }
.ww-dec em { font-style: normal; font-family: 'Press Start 2P', monospace; font-size: 8px; margin-left: 4px; }
.ww-dec .up { color: var(--neon-green); } .ww-dec .dn { color: var(--neon-pink); }
.ww-hits { display: flex; flex-wrap: wrap; gap: 5px; }
.ww-hits span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: rgba(57, 255, 136, .08); border: 1px solid rgba(57, 255, 136, .3); font-size: 11px; }
.ww-hits small { color: var(--text-dim); }
.ww-hits b { font-family: 'Press Start 2P', monospace; font-weight: normal; font-size: 7px; color: var(--neon-green); }
.ww-top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; counter-reset: t; }
.ww-top li { display: flex; justify-content: space-between; padding: 5px 8px; border-radius: 5px; background: rgba(255, 255, 255, .04); font-size: 12px; counter-increment: t; }
.ww-top li span::before { content: counter(t) ". "; color: var(--text-dim); }
.ww-top li.me { background: rgba(255, 210, 63, .12); color: #ffd23f; }
.ww-top b { font-family: 'Press Start 2P', monospace; font-weight: normal; font-size: 9px; }
.ps-seg.won.exh { background: linear-gradient(180deg, #ffffff, #8b94a8); border-color: #e6ebf5; box-shadow: none; margin-right: 4px; }

/* ===== Section headings: left-aligned label on a neon rule, not floating centred text ===== */
#scoreboard-screen .all-picks-toggle.section-heading { display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin-top: 22px; padding: 4px 2px; text-align: left; font-size: 13px; letter-spacing: .06em; text-shadow: 0 0 8px rgba(255, 228, 94, .35); }
#scoreboard-screen .all-picks-toggle.section-heading::after { content: ""; order: 1; flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 228, 94, .7), rgba(193, 60, 255, .5) 55%, rgba(5, 217, 232, 0)); }
#scoreboard-screen .all-picks-toggle.section-heading .all-picks-caret { order: 2; margin-left: 0; font-size: 11px; opacity: .8; }
#scoreboard-screen .lb-head { margin-top: 22px; }
#scoreboard-screen .lb-head .all-picks-toggle.section-heading { margin-top: 0; padding-right: 58px; }
#scoreboard-screen .lb-head .h2h-btn { right: 2px; }
/* Final games: the loser steps back, just barely. */
.scorebug.is-final .bug-row:not(.leading) { opacity: .86; }
/* Tighter run between sections. */
#scoreboard-screen .all-picks-toggle.section-heading { margin-top: 14px; }
#scoreboard-screen .lb-head { margin-top: 14px; }
/* Header cells match the six columns under them: # · NAME · PTS · REC · WON · EARNED. */
.pot-row.head > :nth-child(3) { text-align: right; padding-right: 0; }
.pot-row.head > :nth-child(4), .pot-row.head > :nth-child(5) { text-align: center; }
.pot-row.head > :nth-child(6) { text-align: right; }
.pot-won { display: flex; justify-content: center; align-items: center; gap: 1px; text-align: center; }
.pot-row > .pot-pts { justify-content: flex-end; }
/* Question of the week */
#qotw-modal { z-index: 60; }
.qotw { gap: 12px; text-align: center; }
.qotw-kicker { font-family: 'Press Start 2P', monospace; font-size: 7px; letter-spacing: .12em; color: var(--neon-pink); animation: ss-blink 2.4s steps(1) infinite; }
.qotw-q { font-family: 'Press Start 2P', monospace; font-size: 13px; line-height: 1.6; color: var(--neon-yellow); text-shadow: 2px 2px 0 #b5179e; }
.qotw-in { width: 100%; box-sizing: border-box; min-height: 96px; resize: vertical; padding: 10px; border-radius: 8px; border: 2px solid var(--neon-cyan); background: #07020f; color: #fff; font: inherit; font-size: 16px; }
.qotw-err { font-size: 12px; color: var(--neon-pink); }
.qotw-btns { display: flex; gap: 8px; }
.qotw-btns button { flex: 1; padding: 11px 8px; border-radius: 8px; font-family: 'Press Start 2P', monospace; font-size: 7.5px; letter-spacing: .06em; cursor: pointer; }
.qotw-cop { background: none; border: 1px solid rgba(255, 255, 255, .25); color: var(--text-dim); }
.qotw-go { background: var(--neon-green); border: 0; color: #0a0414; box-shadow: 3px 3px 0 rgba(0, 0, 0, .5); }
.admin-qotw { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; padding: 10px; border: 1px solid rgba(255, 255, 255, .15); border-radius: 8px; background: rgba(0, 0, 0, .3); font-size: 12px; }
.admin-qotw.hidden { display: none; }
.aq-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.aq-head span { color: var(--text-dim); white-space: nowrap; }
.aq-row { display: grid; grid-template-columns: 70px 1fr; gap: 8px; padding: 5px 0; border-top: 1px solid rgba(255, 255, 255, .06); }
.aq-row span { white-space: pre-wrap; word-break: break-word; }
.aq-row.none span { color: var(--text-dim); font-style: italic; }
.qotw-pop { display: block; margin-top: 10px; font-size: 18px; line-height: 1.3; color: #39ff88; text-shadow: 2px 2px 0 #ff2079, 0 0 12px rgba(57, 255, 136, .55); animation: qotw-pop 1.6s ease-in-out infinite; }
@keyframes qotw-pop { 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .qotw-pop { animation: none; } }
.qotw-field { position: relative; }
.qotw-cop.at-corner { position: absolute; top: -12px; right: -8px; flex: none; padding: 7px 9px; font-size: 6px; background: #07020f; border-color: var(--neon-pink); color: var(--neon-pink); z-index: 2; box-shadow: 2px 2px 0 rgba(0, 0, 0, .5); }
.qotw-cop.at-right { flex: 0 1 auto; }
.qotw-cop { font-family: 'Press Start 2P', monospace; letter-spacing: .06em; border-radius: 8px; cursor: pointer; }
.qotw-cop { line-height: 1.6; }
#admin-gate-form { margin: 0; width: 100%; }
.admin-remember { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); cursor: pointer; margin-top: 2px; }
.admin-remember input { width: 16px; height: 16px; accent-color: var(--neon-cyan); }
.lm-mkt { margin-top: 8px; padding: 8px 10px; border-radius: 6px; background: rgba(5, 217, 232, .06); border-left: 3px solid var(--neon-cyan); font-size: 12px; line-height: 1.5; color: var(--text); }
.lm-mkt b { font-family: 'Press Start 2P', monospace; font-weight: normal; font-size: 6.5px; letter-spacing: .1em; color: var(--neon-cyan); margin-right: 4px; }
.lm-mkt em { font-style: normal; color: #fff; font-weight: 700; }
/* App console: fit the screen, no inner scroll box on the who's-in message. */
.admin-overlay { overflow-x: hidden; }
.admin-overlay .wrap, .admin-overlay .console-body { max-width: 100%; min-width: 0; box-sizing: border-box; }
.admin-overlay .admin-intro { overflow-wrap: anywhere; }
.con-raw.con-grid { max-height: none; overflow: visible; overflow-wrap: anywhere; font-size: clamp(11px, 3.4vw, 14px); }
.admin-overlay .admin-row { flex-wrap: wrap; }
/* Card preview fills the phone: as wide as the screen allows while the buttons still fit below. */
.gridcard-modal { padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)); }
.gridcard-box { gap: 8px; }
.gridcard-box img { width: min(100vw - 16px, (100dvh - 96px) * 2 / 3); max-width: none; border-width: 1px; }
/* Countdown: let the clock give a little so YOUR CARD's pills stay on screen. */
.picks-countdown .cd-top { gap: 6px; }
.picks-countdown .cd-top > :first-child { flex: 1 1 auto; min-width: 0; }
.picks-countdown .cd-card { flex: 0 0 auto; padding-left: 8px; margin-right: 2px; }
.picks-countdown .cd-riding b { font-size: 14px; }
.picks-countdown .cd-card .cd-chip { padding: 3px 4px; font-size: 6px; }
/* Balance: clock hugs the left edge, YOUR CARD the right, equal margins, the spare space sits between them. */
.picks-countdown .cd-top { justify-content: space-between !important; gap: 8px; }
.picks-countdown .cd-top > :first-child { flex: 0 1 auto; min-width: 0; }
.picks-countdown .cd-card { padding-left: 10px; margin-right: 0; }
/* Kick pill: small dim KICK label, centered against the time. */
.picks-countdown .cd-when { align-items: center !important; gap: 6px; padding: 4px 8px; }
.picks-countdown .cd-when i { font-size: 6px !important; line-height: 1; letter-spacing: .12em; color: var(--text-dim) !important; transform: translateY(.5px); }
/* One line, one centre: FIRST UP, the matchup and the KICK pill all on the same middle. */
.picks-countdown .cd-game { display: flex !important; align-items: center !important; }
.picks-countdown .cd-game > * { align-self: center !important; margin-top: 0 !important; margin-bottom: 0 !important; }
.picks-countdown .cd-when, .picks-countdown .cd-when i, .picks-countdown .cd-when { line-height: 1 !important; }
.picks-countdown .cd-when i { transform: none; display: inline-block; }
/* Spread across the full width again: FIRST UP left, matchup centre, KICK right. */
.picks-countdown .cd-game { justify-content: space-between !important; width: 100%; gap: 8px; }
.picks-countdown .cd-game .cd-match { flex: 1 1 auto; justify-content: center; min-width: 0; }
/* Clock scales with the screen so it never runs past the box edge (iOS draws the
   pixel font wider). Starts at the left padding, never clipped. */
.picks-countdown .cd-cells { justify-content: flex-start !important; gap: clamp(2px, .8vw, 5px); min-width: 0; }
.picks-countdown .cd-cell b { font-size: clamp(14px, 4.6vw, 21px) !important; min-width: 0 !important; padding: clamp(4px, 1.2vw, 6px) clamp(3px, 1vw, 5px) !important; }
.picks-countdown .cd-colon { font-size: clamp(10px, 3vw, 16px) !important; }
.picks-countdown .cd-top > :first-child { overflow: visible; }
/* Fitted by fitCountdown(): --cd-k shrinks the digits until the clock fits its column. */
.picks-countdown .cd-left { min-width: 0; max-width: 100%; overflow: hidden; align-items: center; }
.picks-countdown .cd-cells { --cd-k: 1; justify-content: center !important; }
.picks-countdown .cd-cell b { font-size: calc(21px * var(--cd-k)) !important; padding: calc(6px * var(--cd-k)) calc(5px * var(--cd-k)) !important; }
.picks-countdown .cd-colon { font-size: calc(16px * var(--cd-k)) !important; }

/* Now playing: a coming-attraction one-sheet between the splash and the app */
.np-screen { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom)); cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none;
  background: radial-gradient(ellipse at 50% 30%, #3a0d0d 0%, #170404 55%, #050101 100%); animation: npin .4s ease-out; }
/* Velvet curtain folds down both sides */
.np-screen::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 10px, rgba(255,60,60,.06) 10px 22px, rgba(0,0,0,.35) 22px 30px); -webkit-mask: linear-gradient(90deg, #000 0 12%, transparent 22% 78%, #000 88%); mask: linear-gradient(90deg, #000 0 12%, transparent 22% 78%, #000 88%); }
/* Film grain and flicker over everything */
.np-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px); animation: npflick 3s steps(1) infinite; }
.np-screen.out { opacity: 0; transition: opacity .25s; }
@keyframes npin { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
@keyframes npflick { 0%, 100% { opacity: 1; } 47% { opacity: .7; } 48% { opacity: 1; } 82% { opacity: .85; } }
.np-close { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 14px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 215, 120, .5); background: rgba(0, 0, 0, .5); color: #ffd778; font-size: 16px; cursor: pointer; }
/* Marquee sign with chasing bulbs */
.np-marquee { position: relative; z-index: 1; padding: 9px 18px; border-radius: 6px; background: #1a0a00; border: 2px solid #c9952b;
  box-shadow: 0 0 0 4px #1a0a00, 0 0 0 6px #c9952b, 0 0 24px rgba(255, 200, 80, .35); }
.np-marquee::before { content: ""; position: absolute; inset: -9px; border-radius: 10px; pointer-events: none;
  background: radial-gradient(circle, #fff6c8 0 2px, #ffcc4d 2.5px, transparent 3.5px) 0 0 / 12px 12px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 4px; animation: npchase .6s steps(2) infinite; filter: drop-shadow(0 0 3px #ffcc4d); }
@keyframes npchase { to { background-position: 6px 0; } }
.np-marquee span { font-family: "Press Start 2P", monospace; font-size: 11px; letter-spacing: 2px; color: #ffe9a8; text-shadow: 0 0 6px #ffb627, 0 0 14px rgba(255, 140, 0, .6); }
/* Gilt poster case */
.np-case { position: relative; z-index: 1; padding: 8px; border-radius: 4px; background: linear-gradient(135deg, #f6d27a, #9c6b17 40%, #f2cf74 60%, #7a4f0c); box-shadow: 0 14px 40px rgba(0, 0, 0, .8), inset 0 0 0 2px rgba(0, 0, 0, .4); }
.np-poster { display: block; max-width: calc(100vw - 52px); max-height: calc(100vh - 250px); max-height: calc(100dvh - 250px); object-fit: contain; pointer-events: none; filter: sepia(.25) contrast(1.05) saturate(.9); box-shadow: inset 0 0 40px rgba(0, 0, 0, .5); }
.np-bill { position: relative; z-index: 1; font-family: "Press Start 2P", monospace; font-size: 8px; letter-spacing: 1px; color: #e8cfa0; }
.np-bill b { font-weight: normal; color: #e50914; text-shadow: 0 0 8px rgba(229, 9, 20, .7); }
/* Ticket stub */
.np-go { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 26px; font-family: "Press Start 2P", monospace; font-size: 10px; color: #2a0505; text-decoration: none; background: #f2c14e;
  -webkit-mask: radial-gradient(circle 7px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 7px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat; }
.np-go span { font-size: 6px; letter-spacing: 2px; color: #8a1a1a; border-bottom: 1px dashed #8a1a1a; padding-bottom: 3px; }
.np-tap { position: relative; z-index: 1; font-family: "Press Start 2P", monospace; font-size: 7px; color: #b89a72; animation: npblink 1.2s steps(2, end) infinite; }
@keyframes npblink { 50% { opacity: 0; } }

/* Line meter, plain-language read: one sentence about your pick, small print under it */
.lm-read { font-family: system-ui, -apple-system, sans-serif; font-size: 13px; line-height: 1.45; align-items: flex-start; }
.lm-read > span:first-child { display: flex; flex-direction: column; gap: 4px; }
.lm-read b { color: #fff; font-weight: 700; }
.lm-read em { font-family: system-ui, -apple-system, sans-serif; font-weight: 700; letter-spacing: 0; color: var(--neon-cyan); }
.lm-small { font-size: 11px; color: var(--text-dim); }
.lm-ou { font-family: 'Press Start 2P', monospace; font-size: 6px; padding-top: 4px; }
/* Expert pick with no spread call (straight up, no score): dimmed, WIN ONLY */
.xp-tile.su-only { opacity: .6; border-style: dashed; }
.xp-pts { font-style: normal; font-family: 'Press Start 2P', monospace; font-size: 6px; color: var(--text-dim); margin-left: 4px; align-self: flex-end; padding-bottom: 4px; white-space: nowrap; }
.xp-tile.su-only { opacity: 1; border-style: solid; }
/* Expert tile: winner and margin, cover or straight up, predicted score */
.xp-tag { font-family: 'Press Start 2P', monospace; font-size: 6px; letter-spacing: .08em; padding: 3px 6px; border-radius: 4px; align-self: center; white-space: nowrap; }
.xp-tag.cov { color: #06140a; background: var(--neon-green); }
.xp-tag.up { color: #1a0410; background: var(--neon-yellow); }
.xp-tag.su { color: var(--text); border: 1px solid rgba(255, 255, 255, .3); }
.xp-score { font-family: 'Press Start 2P', monospace; font-size: 7px; color: #fff; letter-spacing: .04em; margin-top: 2px; }
.xp-pts { display: none; }

/* Game sheet header: the sealed line beside the favourite, same line, no extra height */
#insights-title .ins-ln { font-weight: inherit; font-size: .82em; color: var(--neon-yellow); text-shadow: 0 0 8px rgba(255, 228, 94, .55); margin-left: 2px; }

/* Line meter, v2: bigger logos, a glowing rail, chunkier markers */
.lm { padding: 12px 12px 10px; background: radial-gradient(120% 90% at 50% 0%, rgba(193, 60, 255, .10), rgba(0, 0, 0, .35) 60%); }
.lm-axis { height: 10px; margin: 42px 60px 48px; border-radius: 5px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 1px, transparent 1px calc(100% / var(--ticks, 8))), linear-gradient(180deg, #1b1230, #0c0716);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .06), 0 0 18px rgba(193, 60, 255, .15); }
.lm-end { gap: 4px; font-size: 6px; letter-spacing: .08em; }
.lm-end img, .lm-end img.ins-logo { width: 40px; height: 40px; margin: 0; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .7)); }
.lm-end.l { left: -56px; } .lm-end.r { right: -56px; }
.lm-band { border-radius: 5px; box-shadow: 0 0 12px currentColor; }
.lm-band.good { color: rgba(57, 255, 136, .6); } .lm-band.bad { color: rgba(255, 32, 121, .6); }
.lm-pt { width: 16px; height: 16px; border-width: 2px; }
.lm-pt.seal { border-radius: 4px; box-shadow: 0 0 0 3px rgba(255, 228, 94, .18), 0 0 14px rgba(255, 228, 94, .8); }
.lm-pt.now { box-shadow: 0 0 0 3px rgba(5, 217, 232, .18), 0 0 14px rgba(5, 217, 232, .9); animation: lm-ping 1.6s ease-out infinite; }
@keyframes lm-ping { 0% { box-shadow: 0 0 0 0 rgba(5, 217, 232, .55), 0 0 14px rgba(5, 217, 232, .9); } 100% { box-shadow: 0 0 0 10px rgba(5, 217, 232, 0), 0 0 14px rgba(5, 217, 232, .9); } }
.lm-lab { font-size: 6.5px; letter-spacing: .1em; }
.lm-lab b { font-size: 15px; margin: 1px 0; }
.lm-lab.up { bottom: 17px; } .lm-lab.dn { top: 17px; }
.lm-band::after { display: none; }

/* Line meter, tight: a quote strip (you, market, move), a slim rail, one verdict line.
   Terminal colours kept light: amber for your number, phosphor green for the market. */
.lm.lm-term { --ph: #39ff6a; --ph-dim: rgba(57, 255, 106, .3); --amb: #ffb000; --red: #ff3b5c;
  padding: 0 12px 8px; border: 1px solid rgba(57, 255, 106, .22); border-radius: 8px; overflow: hidden;
  background: linear-gradient(180deg, rgba(4, 23, 10, .9), rgba(1, 6, 3, .95)); box-shadow: inset 0 0 18px rgba(0, 0, 0, .7); }
.lm-tick { display: flex; align-items: center; gap: 6px; margin: 0 -12px; padding: 7px 12px; border-bottom: 1px solid rgba(57, 255, 106, .15); background: rgba(57, 255, 106, .05);
  font-family: 'VT323', monospace; font-size: 20px; line-height: 1; white-space: nowrap; }
.lm-tick .k { font-size: 13px; letter-spacing: .1em; color: rgba(233, 227, 245, .45); }
.lm-tick .k + b { margin-right: 8px; }
.lm-tick b { font-weight: normal; }
.lm-tick b.you { color: var(--amb); text-shadow: 0 0 6px rgba(255, 176, 0, .6); }
.lm-tick b.mkt { color: var(--ph); text-shadow: 0 0 6px rgba(57, 255, 106, .6); margin-right: 4px; }
.lm-tick i { font-style: normal; font-size: 15px; padding: 2px 5px 1px; border-radius: 3px; }
.lm-tick i.good { color: #04140a; background: var(--ph); } .lm-tick i.bad { color: #fff; background: var(--red); } .lm-tick i.flat { color: rgba(233, 227, 245, .5); border: 1px solid rgba(233, 227, 245, .2); }
.lm-tick .ou { margin-left: auto; font-size: 15px; color: rgba(233, 227, 245, .45); }
.lm-term .lm-axis { height: 6px; margin: 26px 46px 24px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, rgba(57, 255, 106, .25) 0 1px, transparent 1px calc(100% / var(--ticks, 8))), rgba(57, 255, 106, .07); box-shadow: none; }
.lm-term .lm-zero { background: rgba(57, 255, 106, .3); }
.lm-term .lm-end { font-family: 'VT323', monospace; font-size: 12px; gap: 1px; color: rgba(233, 227, 245, .55); }
.lm-term .lm-end img, .lm-term .lm-end img.ins-logo { width: 32px; height: 32px; }
.lm-term .lm-end.l { left: -44px; } .lm-term .lm-end.r { right: -44px; }
.lm-term .lm-band { border-radius: 3px; background: var(--ph) !important; color: var(--ph); box-shadow: 0 0 8px rgba(57, 255, 106, .7); }
.lm-term .lm-band.bad { background: var(--red) !important; color: var(--red); box-shadow: 0 0 8px rgba(255, 59, 92, .7); }
.lm-term .lm-band:not(.good):not(.bad) { background: var(--amb) !important; box-shadow: 0 0 8px rgba(255, 176, 0, .6); }
/* The arrow: a chevron at the market end of the move */
.lm-term .lm-band::after { display: block; border-top-width: 6px; border-bottom-width: 6px; animation: lm-nudge .9s ease-in-out infinite alternate; filter: none; }
.lm-term .lm-band.r::after { right: -15px; border-left: 9px solid var(--ph); }
.lm-term .lm-band.l::after { left: -15px; border-right: 9px solid var(--ph); animation-name: lm-nudge-l; }
.lm-term .lm-band.bad.r::after { border-left-color: var(--red); } .lm-term .lm-band.bad.l::after { border-right-color: var(--red); }
.lm-term .lm-band:not(.good):not(.bad).r::after { border-left-color: var(--amb); } .lm-term .lm-band:not(.good):not(.bad).l::after { border-right-color: var(--amb); }
.lm-term .lm-pt { width: 12px; height: 12px; border-width: 2px; animation: none; }
.lm-term .lm-pt.seal { border-radius: 2px; background: var(--amb); border-color: var(--amb); box-shadow: 0 0 8px rgba(255, 176, 0, .8); }
.lm-term .lm-pt.now { border-radius: 50%; background: #031006; border-color: var(--ph); box-shadow: 0 0 8px rgba(57, 255, 106, .9); z-index: 3; }
.lm-term .lm-lab { font-family: 'VT323', monospace; font-size: 13px; letter-spacing: .1em; }
.lm-term .lm-lab.seal { color: var(--amb); } .lm-term .lm-lab.now { color: var(--ph); }
.lm-term .lm-lab.up { bottom: 10px; } .lm-term .lm-lab.dn { top: 10px; }
.lm-term .lm-read { padding-top: 6px; border-top: 1px dashed rgba(57, 255, 106, .15); font-family: system-ui, -apple-system, sans-serif; font-size: 13px; line-height: 1.35; color: var(--text); }
.lm-term .lm-read > span:first-child { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; width: 100%; }
.lm-term .lm-read em { font-family: inherit; font-weight: 700; }
.lm-term .lm-read em.good { color: var(--ph); } .lm-term .lm-read em.bad { color: var(--red); }
.lm-term .lm-small { font-size: 11px; color: var(--text-dim); }

/* Simulate: a slim outlined button under the line, not the loudest thing on the sheet */
.ins-sim { margin: 8px 0 2px; padding: 6px 10px; gap: 8px; border: 1px solid rgba(155, 188, 15, .55); border-radius: 8px; background: rgba(155, 188, 15, .06); color: #b8d82a; box-shadow: none; }
.ins-sim::after { display: none; }
.ins-sim:active { transform: none; box-shadow: none; background: rgba(155, 188, 15, .14); }
.ins-sim-gb { width: 12px; height: 17px; box-shadow: 0 0 0 1px #0f380f; }
.ins-sim-gb i { height: 6px; top: 2px; left: 2px; right: 2px; }
.ins-sim-gb::before, .ins-sim-gb::after { display: none; }
.ins-sim-txt b { font-size: 8px; }
.ins-sim-txt em { font-size: 6px; color: rgba(184, 216, 42, .6); }
.ins-sim-vs { color: rgba(184, 216, 42, .6); }
.ins-sim-vs img { width: 18px; height: 18px; filter: none; }

/* Last five: one compact row per team, logo and score in each chip, win or loss by colour */
.ins-form { grid-template-columns: 26px minmax(0, 1fr); gap: 6px; margin-top: 4px; }
.ins-form-t .ins-logo { width: 20px; height: 20px; }
.ins-form-r { gap: 4px; }
.ins-fchip { flex-direction: row; justify-content: center; gap: 3px; padding: 3px 2px; border-radius: 6px; }
.ins-fchip img { width: 16px; height: 16px; }
.ins-fchip b { display: none; }
.ins-fchip i { font-size: 10px; color: var(--text); }
.ins-fchip.w { background: rgba(57, 255, 136, .08); } .ins-fchip.l { background: rgba(255, 32, 121, .1); }
.ins-fchip.l i { color: var(--neon-pink); }
.ins-fchip u { position: static; font-size: 8px; }

/* More stats fold sits flush under the four key rows */
.ins-more-stats { margin-top: 4px; }
.ins-more-stats .ins-glance { margin-top: 4px; }

/* Game sheet: tighter vertical rhythm */
.ins-body { gap: 4px; }
.ins-h { margin-top: 8px; padding-bottom: 3px; }
.rp { margin: 0; padding: 6px 8px; }
.rp-h { margin: 0 0 4px; }
.rp:has(> .rp-lock) { display: flex; align-items: baseline; gap: 10px; }
.rp:has(> .rp-lock) .rp-h { margin: 0; flex: none; }
.rp-lock { padding: 0; }
.ins-sim { margin: 0; }
.xp-sum { margin: 0 0 4px; }
.ins-pv-h { margin-top: 0; }
.ins-pv p { margin: 3px 0 0; line-height: 1.4; }
.ins-glance { gap: 2px; margin-top: 2px; }
.ins-g { padding: 3px 8px; }
.ins-g.divider { padding: 5px 8px 1px; }
.ins-sub-h { margin-top: 6px; }
.ins-leads { margin-top: 4px; gap: 6px; }
.ins-lead span { margin-bottom: 1px; line-height: 1.2; }
.ins-lead b { margin-bottom: 2px; }
.ins-more-news { margin: 0 0 2px; }
.ins-more-news summary { padding: 4px 0; }
.rp-lock { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* The room before kickoff: your own pick as a badge, easy to find */
.rp.rp-pre { display: flex; flex-direction: column; gap: 6px; }
.rp-top { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.rp-top .rp-h { margin: 0; flex: none; }
.rp-you { display: flex; align-items: center; gap: 8px; }
.rp-you-k { font-family: 'Press Start 2P', monospace; font-size: 6px; letter-spacing: .1em; color: var(--text-dim); flex: none; }
.rp-mine { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 999px; border: 1px solid var(--neon-cyan); background: rgba(5, 217, 232, .1); box-shadow: 0 0 10px rgba(5, 217, 232, .25); min-width: 0; }
.rp-mine .ins-logo { width: 20px; height: 20px; margin: 0; }
.rp-mine b { font-family: 'Press Start 2P', monospace; font-weight: normal; font-size: 9px; color: #fff; white-space: nowrap; }
.rp-mine i { font-style: normal; font-size: 10px; color: var(--neon-cyan); white-space: nowrap; }
.rp-mine.none { border-color: var(--neon-pink); background: rgba(255, 32, 121, .1); box-shadow: none; padding: 4px 10px; }
.rp-mine.none b { color: var(--neon-pink); }


/* Simulate as a Game Boy pill in the game sheet header, opposite the close button */
#insights-modal .h2h-top { padding: 0 34px; }
#insights-title { white-space: nowrap; min-width: 0; }
#insights-title > span { overflow: hidden; text-overflow: ellipsis; }
.ins-sim.ins-sim-pill { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 0; margin: 0; padding: 0; border-radius: 999px; border: 1px solid rgba(155, 188, 15, .6); background: rgba(155, 188, 15, .1); color: #b8d82a; box-shadow: 0 0 8px rgba(155, 188, 15, .25); }
.ins-sim.ins-sim-pill::after { display: none; }
.ins-sim.ins-sim-pill .ins-sim-gb { width: 12px; height: 17px; border-radius: 2px 2px 4px 2px; box-shadow: 0 0 0 1px #0f380f; }
.ins-sim.ins-sim-pill .ins-sim-gb i { left: 2px; right: 2px; top: 2px; height: 5px; box-shadow: none; }
.ins-sim.ins-sim-pill .ins-sim-gb::before, .ins-sim.ins-sim-pill .ins-sim-gb::after { display: none; }
.ins-sim.ins-sim-pill b { display: none; }
.ins-sim.ins-sim-pill { animation: sim-pill-glow 2.4s ease-in-out infinite; }
@keyframes sim-pill-glow { 50% { box-shadow: 0 0 14px rgba(155, 188, 15, .6); } }
.ins-sim.ins-sim-pill:active { transform: translateY(-50%) scale(.94); }
#insights-title .ins-logo.hd { width: 26px; height: 26px; margin: 0 4px; }

/* Room before kickoff: one balanced row. Left: THE ROOM over the count. Right: YOUR PICK over the badge. */
.rp.rp-pre { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; }
.rp.rp-pre .rp-top { flex-direction: column; align-items: flex-start; gap: 5px; flex: none; }
.rp.rp-pre .rp-lock { font-size: 11px; }
.rp.rp-pre .rp-you { flex-direction: column; align-items: flex-end; gap: 4px; min-width: 0; }
.rp.rp-pre .rp-you-k { display: block; font-size: 6px; }
.rp.rp-pre .rp-mine { max-width: 100%; }
.rp.rp-pre .rp-mine { border-radius: 10px; padding: 4px 10px 4px 5px; gap: 7px; }
.rp-mine-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rp.rp-pre .rp-mine b { font-size: 8.5px; overflow: hidden; text-overflow: ellipsis; }
.rp.rp-pre .rp-mine i { font-size: 9.5px; }
.rp.rp-pre .rp-mine .ins-logo { width: 24px; height: 24px; }

/* Before kickoff: your pick on one slim centered line under the header */
.ins-mypick { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(5, 217, 232, .5); background: rgba(5, 217, 232, .08); box-shadow: 0 0 10px rgba(5, 217, 232, .15); font: inherit; color: var(--text); white-space: nowrap; overflow: hidden; }
.ins-mypick .k { font-family: 'Press Start 2P', monospace; font-size: 6px; letter-spacing: .1em; color: var(--text-dim); }
.ins-mypick .ins-logo { width: 20px; height: 20px; margin: 0; }
.ins-mypick b { font-family: 'Press Start 2P', monospace; font-weight: normal; font-size: 8.5px; color: #fff; overflow: hidden; text-overflow: ellipsis; }
.ins-mypick i { font-style: normal; font-size: 10px; color: var(--neon-cyan); }
.ins-mypick.none { border-color: var(--neon-pink); background: rgba(255, 32, 121, .1); box-shadow: none; cursor: pointer; }
.ins-mypick.none b { color: var(--neon-pink); } .ins-mypick.none i { color: var(--text-dim); }

/* Your pick: a compact centered chip, not a full-width bar */
.ins-mypick { width: auto; align-self: center; gap: 6px; padding: 3px 10px 3px 8px; border-color: rgba(5, 217, 232, .35); box-shadow: none; }
.ins-mypick .ins-logo { width: 16px; height: 16px; }
.ins-mypick b { font-size: 7.5px; }
.ins-mypick i { font-size: 9.5px; }
.ins-mypick .k { font-size: 5.5px; }
/* Expert tiles: a few outlets stay tile-sized and centred */
.xp-grid { justify-content: center; }

/* Line, slim: no strip, smaller logos, the rail and one verdict line */
.lm.lm-slim { padding: 0 10px 6px; }
.lm-slim .lm-axis { margin: 24px 38px 22px; }
.lm-slim .lm-end img, .lm-slim .lm-end img.ins-logo { width: 24px; height: 24px; }
.lm-slim .lm-end { font-size: 11px; }
.lm-slim .lm-end.l { left: -34px; } .lm-slim .lm-end.r { right: -34px; }
.lm-slim .lm-lab.up { bottom: 9px; } .lm-slim .lm-lab.dn { top: 9px; }
.lm-slim .lm-read { padding-top: 5px; font-size: 12.5px; }

/* Line with no movement: a single terminal line, cursor blinking */
.lm.lm-still { padding: 9px 12px 8px; }
.lm-cmd { font-family: 'VT323', monospace; font-size: 19px; line-height: 1; color: var(--ph); text-shadow: 0 0 6px rgba(57, 255, 106, .6); letter-spacing: .04em; }
.lm-cmd .p { color: var(--amb); }
.lm-cmd .lm-cur { margin-left: 3px; font-size: 16px; animation: npblink 1s steps(2, end) infinite; }
.lm-still .lm-small { display: block; margin-top: 5px; font-family: system-ui, -apple-system, sans-serif; font-size: 11px; color: var(--text-dim); }
.lm-cmd { white-space: nowrap; overflow: hidden; }

/* Scores: tighter run from the status strip to the heading to the cards, and inside each card */
#scoreboard-screen #scores-toggle.section-heading { margin-top: 2px; padding: 0 2px; }
#scoreboard-screen #scores-toggle + .live-scores-list { margin-top: -4px; }
#scoreboard-screen .lb-head { margin-top: 10px; }
.scorebug { padding: 5px 8px 6px; gap: 2px; }
.bug-head { margin-bottom: 0; }
.bug-row { padding-top: 1px; padding-bottom: 1px; }

/* The scores heading shows all week now, so its fold has to work all week. */
#scoreboard-screen #live-scores-list.folded { display: none; }
.bug-status:has(.ampm) { align-items: baseline; }
.bug-status .ampm { font-size: .62em; letter-spacing: 0; margin: 0 1px 0 -2px; opacity: .75; }

/* Scoreboard: the header carries rank, points and the countdown; no strip, no SCORES title mid-week */
#scoreboard-screen:not(.week-over) #scores-toggle { display: none !important; }
#scoreboard-screen:not(.week-over) #scores-toggle + .live-scores-list { margin-top: 0; }
.head-score { gap: 6px; padding: 4px 9px; }
.head-score .ms-rank { color: var(--neon-yellow); font-size: 8px; }
.head-score .ms-state { margin-left: 0; font-size: 7.5px; }
.head-score .ms-state .ms-kick { color: var(--neon-cyan); }
.head-score .ms-warn { color: var(--neon-yellow); font-size: 8px; }

@media (max-width: 360px) {
  .head-score { left: 6px; padding: 3px 6px; gap: 4px; }
  .head-score .ms-rank, .head-score .ms-score { font-size: 6.5px; }
  .head-score .ms-state { font-size: 6.5px; }
}

/* Poll rank: bottom right of the logo, clear of the pick bar on the left */
.bug-mark .tm-rank { left: auto; right: -5px; bottom: -2px; }
.bug-team { padding-left: 4px; }
.home-logo-img { object-fit: contain; }

/* Picks countdown: smaller clock, slimmer box */
.picks-countdown .cd-cell b { font-size: calc(20px * var(--cd-k)) !important; padding: calc(2px * var(--cd-k)) calc(4px * var(--cd-k)) calc(1px * var(--cd-k)) !important; line-height: 1.05; }
.picks-countdown .cd-colon { font-size: calc(14px * var(--cd-k)) !important; }
.picks-countdown .cd-cell { gap: 2px; }
.picks-countdown .cd-cell em { font-size: 5.5px; }
.picks-countdown .cd-top { padding: 2px 0 1px; gap: 10px; }
.picks-countdown { padding: 6px 12px; gap: 2px; }
.picks-countdown .cd-label { font-size: 7px; }

/* iOS home-screen apps with a short viewport (fixStandaloneGap): the home bar sits in the strip
   below the viewport, so the nav loses its home-bar padding and the strip takes the nav's colour. */
html.vp-gap { background: rgb(10, 0, 20); }
html.vp-gap .bottom-nav { padding-bottom: 6px; }
html.vp-gap { --nav-h: 63px; }

/* Win % sheet, simplified: pick, if it hits, if it misses */
.wpp-gh.wpp-gh3, .wpp-games3 li { grid-template-columns: 1fr 64px 72px; }
.wpp-games3 li > b { font-size: 13px; }
.wpp-verdict b { color: var(--neon-cyan); }
.wpp-verdict.small { font-size: 12px; padding: 6px 8px; }
.wpp-cap { font-size: 11px; color: var(--text-dim); margin: -2px 0 4px; }

/* Play log milestones: quarter ends, halftime, two minute warning. An
   amber banner with rules either side, so they read as breaks, not plays. */
.gc-log .gc-plays li.gc-mark.ms { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.gc-log .gc-plays li.gc-mark.ms::before, .gc-log .gc-plays li.gc-mark.ms::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 210, 63, .55), transparent); }
.gc-log .gc-plays li.gc-mark.ms span { font-size: 7px; color: #ffd23f; text-shadow: 0 0 6px rgba(255, 210, 63, .45); white-space: nowrap; }
.gc-log .gc-plays li.gc-mark.ms span::before, .gc-log .gc-plays li.gc-mark.ms span::after { content: " ▸ "; color: rgba(255, 210, 63, .6); }
.gc-log .gc-plays li.gc-mark.ms span::after { content: " ◂ "; }
/* Possession football beside the team name, out of flow so the header
   stays symmetric. */
.gc-cab .gc-tn { position: relative; }
.gc-cab .gc-pball.gc-pfloat { position: absolute; top: 50%; margin-top: -3.5px; }
.gc-cab .gc-t.a .gc-pball.gc-pfloat { left: calc(100% + 5px); }
.gc-cab .gc-t.h .gc-pball.gc-pfloat { right: calc(100% + 5px); }

/* Arcade popups: the neon frame and scanlines are backgrounds of the card
   itself, not pseudo-elements, so they stay put while the card scrolls
   (an absolute ::before in a scroller scrolls away with the content). The
   close button sticks to the top so it is always one tap away. */
.wpx-card { border: 2px solid transparent; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px) padding-box, radial-gradient(120% 80% at 50% 0%, #1b0b36 0%, #07020f 70%) padding-box, linear-gradient(90deg, #05d9e8, #c13cff 50%, #ff2079) border-box; box-shadow: 0 18px 40px rgba(0, 0, 0, .6), 0 0 10px rgba(193, 60, 255, .45); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.wpx-card::before, .wpx-card::after { content: none; }
.wpx-card > .wpx-x { position: sticky; top: -8px; float: right; margin: -8px -6px -26px 0; }
.wpx-overlay { padding: max(16px, calc(env(safe-area-inset-top) + 8px)) 16px max(16px, calc(env(safe-area-inset-bottom) + 8px)); }
.wpx-card, .wpx-card.wpp { max-height: 100%; }
/* Finishes that come up in under 2% of runs: shown, but quieter. */
.wpp-fin-r.thin { opacity: .55; }

/* Possession on the live scoreboard cards: a small football after the
   team with the ball. In the red zone it glows red and an RZ tag rides
   with it; the card's ring stays as it is (red there means a miss). */
.bug-ball { flex: none; align-self: center; position: relative; display: inline-block; width: 10px; height: 6px; margin-left: 4px; border-radius: 50%; background: #8b4513; box-shadow: 0 0 0 1px #3a1a05, 0 0 5px rgba(255, 228, 94, .5); }
.bug-ball::after { content: ""; position: absolute; left: 3px; right: 3px; top: 2.5px; height: 1px; background: #fff; }
.bug-ball.rz { box-shadow: 0 0 0 1px #3a1a05, 0 0 6px rgba(255, 45, 85, .95); animation: bugrz 1.1s steps(2, start) infinite; }
.bug-rz { flex: none; align-self: center; margin-left: 3px; padding: 1px 2px 0; border-radius: 2px; background: rgba(255, 45, 85, .18); color: #ff5c7a; font-family: 'Press Start 2P', monospace; font-size: 5px; font-weight: normal; letter-spacing: .04em; line-height: 1.2; }
@keyframes bugrz { 50% { box-shadow: 0 0 0 1px #3a1a05, 0 0 2px rgba(255, 45, 85, .4); } }
@media (prefers-reduced-motion: reduce) { .bug-ball.rz { animation: none; } }

/* Play log grouped by possession: a header with the team's logo above
   each run of plays by one side. */
.gc-log .gc-plays li.gc-drv { display: flex; align-items: center; gap: 6px; padding: 8px 0 2px; border-top: 1px solid rgba(57, 255, 136, .28); }
.gc-log .gc-plays li.gc-drv:first-child { border-top: 0; padding-top: 2px; }
.gc-log .gc-plays li.gc-drv img.gc-dlogo { width: 14px; height: 14px; object-fit: contain; }
.gc-log .gc-plays li.gc-drv span { font-family: 'Press Start 2P', monospace; font-size: 6.5px; letter-spacing: .12em; color: #b8ffd2; }
.gc-log .gc-plays li.gc-drv + li { border-top: 0; }
.gc-psc { margin-left: 6px; font-style: normal; color: #ffe45e; }
.gc-pmeta:empty { display: none; }

/* Summary pills on each play: what happened in a word or three, right
   aligned on the meta line; a first down or a flag rides as a second. */
.gc-pills { margin-left: auto; display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 3px; }
.gc-pills .gc-badge { margin-left: 0; white-space: nowrap; line-height: 1.3; }
.gc-badge.gain { background: #39ff88; color: #031007; }
.gc-badge.loss { background: #ff2079; color: #fff; }
/* The side with the ball right now: lit, so it can't be mistaken for a
   past drive's header. */
.gc-log .gc-plays li.gc-drv.now span { color: #ffe45e; text-shadow: 0 0 6px rgba(255, 228, 94, .55); }
.gc-log .gc-plays li.gc-drv.now { border-top-color: rgba(255, 228, 94, .45); }
.gc-log .gc-plays li.gc-drv.now::before { content: "▶"; font-size: 8px; color: #ffe45e; animation: lvblink .8s steps(2, start) infinite; }
@media (prefers-reduced-motion: reduce) { .gc-log .gc-plays li.gc-drv.now::before { animation: none; } }
/* Flags read by who they help: green for the side with the ball, pink
   against it, an amber edge so they still read as flags. */
.gc-badge.flag.up { background: #39ff88; color: #031007; box-shadow: inset 3px 0 0 #ffb000; padding-left: 6px; }
.gc-badge.flag.dn { background: #ff2079; color: #fff; box-shadow: inset 3px 0 0 #ffb000; padding-left: 6px; }

/* ===== Admin: login visualization ===== */
.lvz { display: flex; flex-direction: column; gap: 8px; padding: 10px; margin-bottom: 10px; border: 1px solid var(--card-border); border-radius: 10px; background: rgba(0, 0, 0, .25); }
.lvz-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.lvz-tiles div { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 4px; border-radius: 8px; background: rgba(255, 255, 255, .04); }
.lvz-tiles b { font-family: 'Press Start 2P', monospace; font-weight: normal; font-size: 13px; color: #fff; }
.lvz-tiles b small { font-size: 7px; color: var(--text-dim); }
.lvz-tiles span { font-size: 9.5px; color: var(--text-dim); }
.lvz-h { margin-top: 4px; font-family: 'Press Start 2P', monospace; font-size: 6.5px; letter-spacing: .1em; color: var(--neon-cyan); }
.lvz-grid { display: grid; grid-template-columns: minmax(52px, 72px) repeat(7, minmax(0, 1fr)) 34px; gap: 2px; align-items: center; }
.lvz-dh { font-family: 'Press Start 2P', monospace; font-size: 5.5px; color: var(--text-dim); text-align: center; padding-bottom: 2px; }
.lvz-dh.today { color: #fff; }
.lvz-nm { font-size: 10.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 4px; }
.lvz-ago { font-size: 9px; color: var(--text-dim); text-align: right; white-space: nowrap; }
.lvz-ago.fresh { color: var(--text); }
.lvz-c { display: block; height: 18px; border-radius: 3px; cursor: pointer; }
.lvz-c.s0 { background: rgba(255, 255, 255, .05); }
.lvz-c.s1 { background: #13586a; }
.lvz-c.s2 { background: #168a9c; }
.lvz-c.s3 { background: #1ab8cc; }
.lvz-c.s4 { background: #7af3ff; }
.lvz-c.on { outline: 2px solid #fff; outline-offset: -1px; }
.lvz-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 9px; color: var(--text-dim); }
.lvz-key span { margin-right: 4px; font-family: 'Press Start 2P', monospace; font-size: 5.5px; letter-spacing: .08em; }
.lvz-key .lvz-c { width: 12px; height: 12px; margin-left: 6px; cursor: default; }
.lvz-hours { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; height: 64px; align-items: end; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.lvz-b { position: relative; height: 100%; display: flex; align-items: flex-end; cursor: pointer; }
.lvz-b i { display: block; width: 100%; border-radius: 4px 4px 0 0; background: #1ab8cc; }
.lvz-b.on i { background: #7af3ff; }
.lvz-b.on::after { content: ""; position: absolute; inset: 0 0 auto; height: 100%; background: rgba(255, 255, 255, .05); border-radius: 3px; pointer-events: none; }
.lvz-ax { display: flex; justify-content: space-between; font-family: 'Press Start 2P', monospace; font-size: 5.5px; color: var(--text-dim); }
.lvz-tip { min-height: 16px; padding: 5px 8px; border-radius: 6px; background: rgba(255, 255, 255, .05); font-size: 10.5px; color: var(--text); }
/* Login dashboard, deeper: insights, 48-hour strips, punchcard, profiles. */
.lvz-said { margin: 0; padding: 0 0 0 14px; display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; line-height: 1.4; color: var(--text); }
.lvz-said li::marker { color: var(--neon-cyan); }
.lvz-said b { color: #fff; }
.lvz-tiles.four { grid-template-columns: repeat(4, 1fr); }
.lvz-tiles.four b { font-size: 11px; }
.lvz-tiles.four span { font-size: 8.5px; text-align: center; }
.lvz-key-band { display: inline-block; width: 10px; height: 7px; margin: 0 2px; vertical-align: middle; background: rgba(255, 228, 94, .22); border: 1px solid rgba(255, 228, 94, .5); }
.lvz-tl { display: grid; grid-template-columns: minmax(52px, 72px) 1fr; gap: 3px 4px; align-items: center; }
.lvz-strip { position: relative; height: 16px; border-radius: 3px; background: rgba(255, 255, 255, .04); overflow: hidden; }
.lvz-band { position: absolute; top: 0; bottom: 0; background: rgba(255, 228, 94, .14); border-left: 1px solid rgba(255, 228, 94, .35); }
.lvz-mid { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, .14); }
.lvz-dot { position: absolute; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #1ab8cc; box-shadow: 0 0 0 2px #0b0618; cursor: pointer; }
.lvz-dot.live { background: #7af3ff; }
.lvz-dot.on { outline: 2px solid #fff; outline-offset: 1px; }
.lvz-tlax { display: flex; justify-content: space-between; font-family: 'Press Start 2P', monospace; font-size: 5px; color: var(--text-dim); }
.lvz-punch { display: grid; grid-template-columns: 22px repeat(24, minmax(0, 1fr)); gap: 2px; align-items: center; }
.lvz-pd { font-family: 'Press Start 2P', monospace; font-size: 5.5px; color: var(--text-dim); }
.lvz-p { display: block; height: 13px; border-radius: 2px; cursor: pointer; }
.lvz-p.s0 { background: rgba(255, 255, 255, .04); }
.lvz-p.s1 { background: #13586a; }
.lvz-p.s2 { background: #168a9c; }
.lvz-p.s3 { background: #1ab8cc; }
.lvz-p.s4 { background: #7af3ff; }
.lvz-p.on { outline: 2px solid #fff; outline-offset: -1px; }
.lvz-pax { grid-column: 2 / -1; display: flex; justify-content: space-between; font-family: 'Press Start 2P', monospace; font-size: 5px; color: var(--text-dim); }
.lvz-prof { display: flex; flex-direction: column; gap: 4px; }
.lvz-pr { padding: 6px 8px; border-radius: 8px; background: rgba(255, 255, 255, .035); cursor: pointer; }
.lvz-pr.on { background: rgba(26, 184, 204, .12); }
.lvz-pr1 { display: flex; align-items: center; gap: 8px; }
.lvz-pr1 b { flex: 0 0 64px; font-size: 11px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lvz-pr1 strong { flex: none; font-family: 'Press Start 2P', monospace; font-weight: normal; font-size: 9px; color: #fff; min-width: 22px; text-align: right; }
.lvz-spark { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; height: 18px; align-items: end; }
.lvz-spark i { display: block; border-radius: 2px 2px 0 0; background: #1ab8cc; }
.lvz-spark i.z { background: rgba(255, 255, 255, .08); }
.lvz-pr2 { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 4px; font-size: 9.5px; color: var(--text-dim); }
.lvz-pr2 em { font-style: normal; }
.lvz-pr2 em.ok { color: var(--neon-green); }
.lvz-pr2 em.short { color: #ffb347; }
/* Login dashboard, enriched: nudges, six tiles, range switch, sessions on
   the timeline, week by week, feature use, pick behaviour, scatter. */
.lvz-tiles.six { grid-template-columns: repeat(3, 1fr); }
.lvz-tiles.six b { font-size: 11px; }
.lvz-tiles.six span { font-size: 8.5px; text-align: center; }
.lvz-nudge { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 8px; border: 1px solid rgba(255, 179, 71, .35); background: rgba(255, 179, 71, .06); }
.lvz-nudge .lvz-h { margin-top: 0; color: #ffb347; }
.lvz-nr { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; }
.lvz-nr b { color: #fff; }
.lvz-nr span { color: var(--text-dim); }
.lvz-copy { align-self: flex-start; margin-top: 4px; }
.lvz-hrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-top: 4px; }
.lvz-hrow .lvz-h { margin-top: 0; }
.lvz-seg-btns { display: inline-flex; border: 1px solid rgba(255, 255, 255, .15); border-radius: 6px; overflow: hidden; }
.lvz-seg-btns button { padding: 4px 7px; border: 0; background: none; color: var(--text-dim); font-family: 'Press Start 2P', monospace; font-size: 5.5px; letter-spacing: .06em; cursor: pointer; }
.lvz-seg-btns button.on { background: rgba(26, 184, 204, .25); color: #fff; }
.lvz-key-seg { display: inline-block; width: 10px; height: 4px; margin: 0 2px; vertical-align: middle; background: rgba(122, 243, 255, .35); }
.lvz-seg { position: absolute; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: rgba(122, 243, 255, .35); pointer-events: none; }
.lvz-c.na { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 3px, transparent 3px 6px); }
.lvz-feat { display: flex; flex-direction: column; gap: 3px; }
.lvz-fb { display: grid; grid-template-columns: minmax(96px, 40%) 1fr 34px; align-items: center; gap: 6px; font-size: 10.5px; color: var(--text); cursor: pointer; }
.lvz-fb i { display: block; height: 10px; border-radius: 0 4px 4px 0; background: rgba(255, 255, 255, .04); }
.lvz-fb i b { display: block; height: 100%; border-radius: 0 4px 4px 0; background: #1ab8cc; }
.lvz-fb em { font-style: normal; text-align: right; color: var(--text-dim); font-size: 10px; }
.lvz-fb.on i b { background: #7af3ff; }
.lvz-empty { font-size: 10.5px; color: var(--text-dim); padding: 4px 0; }
.lvz-pkgrid { display: grid; grid-template-columns: minmax(52px, 72px) 1fr 44px; gap: 3px 4px; align-items: center; }
.lvz-strip.pk { overflow: visible; }
.lvz-lock { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: #ffe45e; }
.lvz-tick { position: absolute; top: 3px; bottom: 3px; width: 3px; margin-left: -1px; border-radius: 1px; background: #1ab8cc; cursor: pointer; }
.lvz-tick.edit { background: #7af3ff; }
.lvz-tick.late { background: #ff2079; }
.lvz-tick.on { outline: 2px solid #fff; }
.lvz-key .lvz-tick.k, .lvz-key .lvz-lock.k { position: static; display: inline-block; width: 3px; height: 10px; margin: 0 2px 0 8px; vertical-align: middle; }
.lvz-sc { position: relative; height: 170px; border-left: 1px solid rgba(255, 255, 255, .15); border-bottom: 1px solid rgba(255, 255, 255, .15); margin-left: 22px; }
.lvz-sc-y { position: absolute; left: -24px; top: 8%; font-size: 9px; color: var(--text-dim); }
.lvz-sc-y.lo { top: auto; bottom: 6%; }
.lvz-sd { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #1ab8cc; box-shadow: 0 0 0 2px #0b0618; cursor: pointer; }
.lvz-sd b { position: absolute; left: 12px; top: -3px; font-family: 'Press Start 2P', monospace; font-weight: normal; font-size: 5.5px; color: var(--text); white-space: nowrap; pointer-events: none; }
.lvz-sd.on { background: #7af3ff; }
.lvz-sc-x { display: flex; justify-content: space-between; margin-left: 22px; font-size: 9px; color: var(--text-dim); }
.lvz-cap { font-size: 10px; line-height: 1.4; color: var(--text-dim); }
.lvz-pr3 { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.lvz-pr3 span { padding: 2px 6px; border-radius: 10px; background: rgba(26, 184, 204, .14); font-size: 9px; color: #b8f6ff; }
.lvz-ver.ok { color: var(--neon-green); }
.lvz-ver.old { color: #ffb347; }
.lvz-grid.wk { grid-template-columns: minmax(52px, 72px) repeat(6, minmax(0, 1fr)) 34px; }

/* ===== League dashboard (admin Logins tab) ===== */
.ld { gap: 10px; }
.ld section { display: flex; flex-direction: column; gap: 8px; }
.ld section[hidden] { display: none; }
.ld-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; padding: 3px; border-radius: 9px; background: rgba(255, 255, 255, .05); position: sticky; top: 0; z-index: 2; backdrop-filter: blur(6px); }
.ld-tabs button { padding: 8px 2px; border: 0; border-radius: 6px; background: none; color: var(--text-dim); font-family: 'Press Start 2P', monospace; font-size: 6px; letter-spacing: .06em; cursor: pointer; }
.ld-tabs button.on { background: rgba(26, 184, 204, .22); color: #fff; box-shadow: inset 0 -2px 0 #1ab8cc; }
.ld-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.ld-kpis.three { grid-template-columns: repeat(3, 1fr); }
.ld-kpis > div { display: flex; flex-direction: column; gap: 4px; padding: 9px 10px; border-radius: 9px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06); cursor: default; }
.ld-kpis b { font-family: 'Press Start 2P', monospace; font-weight: normal; font-size: 15px; color: #fff; }
.ld-kpis.three b { font-size: 12px; }
.ld-kpis b small { font-size: 7px; color: var(--text-dim); }
.ld-kpis span { font-size: 10px; color: var(--text-dim); line-height: 1.3; }
.ld-d { align-self: flex-start; font-style: normal; font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 9px; white-space: nowrap; }
.ld-d.up { color: #39ff88; background: rgba(57, 255, 136, .12); }
.ld-d.dn { color: #ff5c8a; background: rgba(255, 32, 121, .12); }
.ld-d.flat { color: var(--text-dim); background: rgba(255, 255, 255, .05); }
.ld-d.new { color: var(--text-dim); background: rgba(255, 255, 255, .05); font-weight: normal; }
.ld-story { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ld-story li { display: grid; grid-template-columns: 54px 1fr; gap: 8px; align-items: baseline; font-size: 11.5px; line-height: 1.45; color: var(--text); }
.ld-story b { color: #fff; }
.ld-tag { font-style: normal; font-family: 'Press Start 2P', monospace; font-size: 5.5px; letter-spacing: .06em; padding: 3px 4px; border-radius: 3px; text-align: center; }
.ld-tag.act { color: #1a0f00; background: #ffb347; }
.ld-tag.trend { color: #031017; background: #7af3ff; }
.ld-tag.note { color: var(--text); background: rgba(255, 255, 255, .1); }
.ld-dau { display: flex; flex-direction: column; gap: 3px; }
.ld-dbars { display: grid; grid-template-columns: repeat(28, minmax(0, 1fr)); gap: 2px; height: 72px; align-items: end; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.ld-db { position: relative; height: 100%; display: flex; align-items: flex-end; cursor: pointer; }
.ld-db b { display: block; width: 100%; min-height: 2px; border-radius: 3px 3px 0 0; background: #168a9c; }
.ld-db.gd b { background: #1ab8cc; }
.ld-db.gd::after { content: ""; position: absolute; left: 15%; right: 15%; bottom: -5px; height: 3px; border-radius: 2px; background: #ffe45e; }
.ld-db.today b { background: #7af3ff; }
.ld-db.on b { outline: 2px solid #fff; }
.ld-key-gd { display: inline-block; width: 10px; height: 3px; margin: 0 2px; vertical-align: middle; border-radius: 2px; background: #ffe45e; }
.ld-conc { display: flex; flex-direction: column; gap: 3px; }
.ld-cbars { display: flex; align-items: flex-end; gap: 1px; height: 64px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.ld-cb { flex: 1; min-height: 1px; border-radius: 2px 2px 0 0; background: #168a9c; cursor: pointer; }
.ld-cb.pk { background: #7af3ff; }
.ld-cb.on { background: #fff; }
.ld-glanes { position: relative; height: 26px; }
.ld-gw { position: absolute; height: 8px; border-radius: 2px; background: rgba(255, 228, 94, .25); border-left: 2px solid #ffe45e; cursor: pointer; }
.ld-gw span { position: absolute; left: 3px; top: -1px; font-family: 'Press Start 2P', monospace; font-size: 4.5px; color: #ffe45e; white-space: nowrap; pointer-events: none; }
.ld-gw.on { background: rgba(255, 228, 94, .5); }
.ld-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ld-sort span { margin-right: 2px; font-family: 'Press Start 2P', monospace; font-size: 5.5px; color: var(--text-dim); }
.ld-sort button { padding: 5px 7px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 6px; background: none; color: var(--text-dim); font-family: 'Press Start 2P', monospace; font-size: 5.5px; cursor: pointer; }
.ld-sort button.on { border-color: #1ab8cc; color: #fff; background: rgba(26, 184, 204, .18); }
.ld-ph, .ld-pr { display: grid; grid-template-columns: minmax(54px, 1fr) 70px 46px 30px 34px 34px; gap: 6px; align-items: center; }
.ld-ph span { font-family: 'Press Start 2P', monospace; font-size: 4.5px; color: var(--text-dim); letter-spacing: .04em; }
.ld-ph span:nth-child(n+4) { text-align: right; }
.ld-people { display: flex; flex-direction: column; gap: 3px; }
.ld-pr { width: 100%; padding: 8px 8px; border: 1px solid rgba(255, 255, 255, .06); border-radius: 8px; background: rgba(255, 255, 255, .035); color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.ld-pr.open { border-color: rgba(26, 184, 204, .5); background: rgba(26, 184, 204, .08); }
.ld-pr > b { font-size: 11.5px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-l7 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ld-l7 i { height: 10px; border-radius: 2px; background: rgba(255, 255, 255, .07); }
.ld-l7 i.on { background: #1ab8cc; }
.ld-num, .ld-ago { font-size: 10px; text-align: right; color: var(--text); white-space: nowrap; }
.ld-ago { color: var(--text-dim); }
.ld-drill { padding: 8px 8px 10px; margin: -1px 0 4px; border: 1px solid rgba(26, 184, 204, .35); border-top: 0; border-radius: 0 0 8px 8px; background: rgba(26, 184, 204, .04); display: flex; flex-direction: column; gap: 6px; }
.ld-drill[hidden] { display: none; }
.ld-dgrid { display: grid; grid-template-columns: 72px 1fr; gap: 4px 8px; font-size: 10.5px; }
.ld-dgrid span { color: var(--text-dim); }
.ld-dgrid b { color: var(--text); font-weight: 600; }
.ld-cal { display: grid; grid-template-columns: repeat(14, 1fr); gap: 2px; }
.ld-cal .lvz-c { height: 14px; }
.lvz-c.gd { box-shadow: inset 0 -2px 0 #ffe45e; }
.ld-hours { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 1px; height: 36px; align-items: end; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.ld-hours i { height: 100%; display: flex; align-items: flex-end; cursor: pointer; }
.ld-hours i b { display: block; width: 100%; min-height: 1px; border-radius: 2px 2px 0 0; background: #1ab8cc; }
.lvz-pax.solo { grid-column: auto; }
.lvz-pr3 .dim { background: none; color: var(--text-dim); }
.ld-fh, .ld-fr { display: grid; grid-template-columns: minmax(90px, 1.2fr) 1fr 38px; gap: 8px; align-items: center; }
.ld-fh.four, .ld-fr.four { grid-template-columns: minmax(60px, 1fr) 62px 62px 76px; }
.ld-fh span { font-family: 'Press Start 2P', monospace; font-size: 4.5px; color: var(--text-dim); letter-spacing: .04em; }
.ld-fh span:last-child, .ld-fr em:last-child { text-align: right; }
.ld-fr { padding: 5px 0; border-top: 1px solid rgba(255, 255, 255, .05); font-size: 10.5px; color: var(--text); cursor: pointer; }
.ld-fr em { font-style: normal; color: var(--text-dim); font-size: 10px; }
.ld-fr.four em { text-align: left; }
.ld-fr.four em.ld-d { justify-self: end; }
.ld-fr.on { background: rgba(26, 184, 204, .08); }
.ld-ppl { display: grid; grid-template-columns: repeat(9, 1fr); gap: 2px; }
.ld-ppl i { height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.ld-ppl i.on { background: #1ab8cc; }
/* League dashboard, round two: health, releases, season trend, nudges. */
.ld-tabs { grid-template-columns: repeat(6, 1fr); }
.ld-tabs button { font-size: 5.5px; letter-spacing: .03em; }
.ld-dau { position: relative; }
.ld-rels { position: relative; height: 0; }
.ld-rel { position: absolute; bottom: 14px; width: 2px; height: 78px; margin-left: -1px; background: repeating-linear-gradient(0deg, rgba(193, 60, 255, .85) 0 3px, transparent 3px 6px); cursor: pointer; }
.ld-rel::after { content: "▲"; position: absolute; bottom: -9px; left: -4px; font-size: 7px; color: #c13cff; }
.ld-rel.on { background: #c13cff; }
.ld-key-rel { display: inline-block; width: 2px; height: 9px; margin: 0 3px; vertical-align: middle; background: #c13cff; }
.ld-trend { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; height: 84px; align-items: end; }
.ld-tw { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 3px; cursor: pointer; }
.ld-tw b { display: block; min-height: 2px; border-radius: 3px 3px 0 0; background: #168a9c; }
.ld-tw.live b { background: repeating-linear-gradient(135deg, #1ab8cc 0 4px, #13586a 4px 8px); }
.ld-tw.part b { opacity: .55; }
.ld-tw span { font-size: 8px; color: var(--text-dim); text-align: center; white-space: nowrap; }
.ld-tw.on b { outline: 2px solid #fff; }
.ld-fh.five, .ld-fr.five { grid-template-columns: minmax(64px, 1.3fr) repeat(3, minmax(34px, .7fr)) minmax(56px, 1fr); }
.ld-fr.five em { text-align: right; }
.ld-fr.five em:last-child { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-fh.five span:not(:first-child) { text-align: right; }
.ld-fr em i.ld-d { font-style: normal; padding: 0 4px; margin-left: 3px; font-size: 8.5px; }
.ld-ng { display: grid; grid-template-columns: 96px 1fr; gap: 8px; padding: 5px 0; border-top: 1px solid rgba(255, 255, 255, .05); font-size: 10px; color: var(--text-dim); }
.ld-ng div { display: flex; flex-wrap: wrap; gap: 4px; }
.ld-ng em { font-style: normal; padding: 2px 6px; border-radius: 9px; font-size: 9.5px; cursor: pointer; }
.ld-ng em.ok { color: #39ff88; background: rgba(57, 255, 136, .1); }
.ld-ng em.no { color: #ff5c8a; background: rgba(255, 32, 121, .1); }
.ld-dbars.fail .ld-fb2 { position: relative; height: 100%; display: flex; flex-direction: column-reverse; justify-content: flex-start; cursor: pointer; }
.ld-fb2 b { display: block; width: 100%; }
.ld-fb2 b.e { background: #ffb347; border-radius: 0; }
.ld-fb2 b.w { background: #ff5c8a; border-radius: 3px 3px 0 0; }
.ld-fb2.gd::after { content: ""; position: absolute; left: 15%; right: 15%; bottom: -5px; height: 3px; border-radius: 2px; background: #ffe45e; }
.ld-fb2.on { outline: 1px solid #fff; }
.ld-key-e, .ld-key-w { display: inline-block; width: 8px; height: 8px; margin: 0 2px; vertical-align: middle; border-radius: 2px; background: #ffb347; }
.ld-key-w { background: #ff5c8a; }
.ld-err { display: flex; flex-direction: column; gap: 2px; padding: 5px 0; border-top: 1px solid rgba(255, 255, 255, .05); cursor: pointer; }
.ld-err code { font-size: 10px; color: #ffb347; word-break: break-word; }
.ld-err em { font-style: normal; font-size: 9.5px; color: var(--text-dim); }
.ld-cur { font-style: normal; font-family: 'Press Start 2P', monospace; font-size: 4.5px; padding: 2px 3px; border-radius: 3px; color: #031007; background: #39ff88; vertical-align: middle; }
.lvz-fb.wide { grid-template-columns: minmax(96px, 38%) 1fr 70px; }
/* Admin heads-up before lock (only on a phone that remembers an admin key). */
.lock-alert { position: fixed; left: 10px; right: 10px; top: calc(env(safe-area-inset-top) + 8px); z-index: 900; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 10px; border: 1px solid rgba(255, 179, 71, .6); background: rgba(26, 14, 0, .95); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
.lock-alert > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lock-alert b { font-family: 'Press Start 2P', monospace; font-weight: normal; font-size: 7px; color: #ffb347; letter-spacing: .04em; }
.lock-alert span { font-size: 10.5px; color: var(--text); line-height: 1.35; }
.lock-alert .la-nudge { flex: none; padding: 7px 9px; border: 0; border-radius: 7px; background: #ffb347; color: #1a0f00; font-family: 'Press Start 2P', monospace; font-size: 6.5px; cursor: pointer; }
.lock-alert .la-x { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: none; color: #fff; cursor: pointer; }
.ld-rel { bottom: 0; height: 72px; }
/* Dashboard polish: solid tab bar, headline per chart, capped bar widths,
   build markers in their own row, a week-vs-week card until the season
   chart has three weeks. */
.ld-tabs { background: #140b26; border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 6px 14px rgba(7, 2, 15, .85); backdrop-filter: none; top: -1px; }
.ld-head { font-size: 11.5px; line-height: 1.45; color: var(--text); margin: -2px 0 2px; }
.ld-head b { color: #fff; }
.ld-db { justify-content: center; }
.ld-db b { max-width: 26px; margin: 0 auto; }
.ld-relrow { display: grid; gap: 2px; height: 12px; margin-top: 7px; }
.ld-relrow i { display: flex; justify-content: center; cursor: pointer; font-style: normal; }
.ld-relrow b { font-size: 8px; line-height: 1; color: #c13cff; font-weight: 700; }
.ld-relrow i.on b { color: #fff; }
.ld-rels, .ld-rel { display: none; }
.ld-wkcmp { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ld-wkcmp > div { display: flex; flex-direction: column; gap: 3px; padding: 9px 10px; border-radius: 9px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06); }
.ld-wkcmp > div.now { border-color: rgba(26, 184, 204, .4); }
.ld-wkcmp span { font-size: 9.5px; color: var(--text-dim); }
.ld-wkcmp b { font-family: 'Press Start 2P', monospace; font-weight: normal; font-size: 14px; color: #fff; }
.ld-wkcmp b small { font-size: 7px; color: var(--text-dim); }
.ld-wkcmp em { font-style: normal; font-size: 10px; color: var(--text-dim); }
.ld-tw { max-width: 56px; justify-self: center; width: 100%; }
/* The tab bar scrolls with the page: sticky inside the console left text
   showing above and behind it. */
.ld-tabs { position: static; box-shadow: none; }
.ld-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 9.5px; color: var(--text-dim); margin-top: -2px; }
.ld-legend span { display: inline-flex; align-items: center; gap: 4px; }
.ld-legend b { color: #c13cff; font-size: 8px; }

/* ===== Admin: Who's in (last 7 days, one strip per owner) ===== */
.wi { display: flex; flex-direction: column; gap: 10px; }
.wi-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.wi-tiles div { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); }
.wi-tiles div.hot { border-color: rgba(57, 255, 136, .5); background: rgba(57, 255, 136, .07); }
.wi-tiles b { font-family: 'Press Start 2P', monospace; font-weight: normal; font-size: 16px; color: #fff; }
.wi-tiles b small { font-size: 8px; color: var(--text-dim); }
.wi-tiles span { font-size: 10px; color: var(--text-dim); }
.wi-out { font-size: 11px; color: #ffb347; }
.wi-out b { color: #fff; }
.wi-out.ok { color: var(--neon-green); }
.wi-grid { display: flex; flex-direction: column; gap: 4px; }
.wi-axrow, .wi-row { display: grid; grid-template-columns: 92px 1fr 34px; gap: 8px; align-items: center; }
.wi-axis { display: grid; grid-template-columns: repeat(7, 1fr); }
.wi-axis span { text-align: center; font-family: 'Press Start 2P', monospace; font-size: 5.5px; color: var(--text-dim); }
.wi-axis span.t { color: #fff; }
.wi-axd { font-family: 'Press Start 2P', monospace; font-size: 5px; color: var(--text-dim); text-align: right; }
.wi-row { width: 100%; padding: 6px 6px; border: 1px solid rgba(255, 255, 255, .06); border-radius: 10px; background: rgba(255, 255, 255, .03); color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.wi-row.live { border-color: rgba(57, 255, 136, .45); }
.wi-row.open { border-color: rgba(26, 184, 204, .55); background: rgba(26, 184, 204, .07); }
.wi-who { display: flex; align-items: center; gap: 7px; min-width: 0; }
.wi-who > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.wi-who b { font-size: 11.5px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wi-who small { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; color: var(--text-dim); white-space: nowrap; }
.wi-av { flex: none; width: 24px; height: 24px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: #0a0414; font-family: 'Press Start 2P', monospace; font-size: 9px; }
.wi-pulse { width: 7px; height: 7px; border-radius: 50%; background: #39ff88; box-shadow: 0 0 6px #39ff88; animation: lvblink 1s steps(2, start) infinite; }
.wi-strip { position: relative; height: 30px; border-radius: 6px; background: rgba(255, 255, 255, .045); overflow: hidden; }
.wi-night { position: absolute; top: 0; bottom: 0; background: rgba(0, 0, 0, .35); }
.wi-game { position: absolute; top: 0; bottom: 0; background: rgba(255, 228, 94, .16); border-left: 1px solid rgba(255, 228, 94, .45); }
.wi-div { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, .14); }
.wi-now { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: rgba(122, 243, 255, .7); }
.wi-sess { position: absolute; bottom: 5px; height: 4px; border-radius: 2px; background: rgba(122, 243, 255, .55); }
.wi-dot { position: absolute; top: 9px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: #1ab8cc; box-shadow: 0 0 0 1.5px #0b0618; cursor: pointer; }
.wi-dot.g { background: #ffe45e; }
.wi-dot.on { outline: 2px solid #fff; outline-offset: 1px; }
.wi-count { text-align: right; font-size: 9px; color: var(--text-dim); }
.wi-count b { font-family: 'Press Start 2P', monospace; font-weight: normal; font-size: 11px; color: #fff; }
.wi-count.zero b { color: #ff5c8a; }
.wi-more { margin: -2px 0 4px; padding: 6px 10px 8px; border: 1px solid rgba(26, 184, 204, .35); border-top: 0; border-radius: 0 0 10px 10px; display: flex; flex-direction: column; gap: 6px; }
.wi-more[hidden] { display: none; }
.wi-day { display: flex; flex-direction: column; gap: 1px; font-size: 10.5px; }
.wi-day b { color: #fff; font-size: 10.5px; }
.wi-day span { color: var(--text-dim); }
.wi-day em { font-style: normal; color: #b8f6ff; font-size: 10px; line-height: 1.4; }
.wi-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 9.5px; color: var(--text-dim); }
.wi-legend span { display: inline-flex; align-items: center; gap: 5px; }
.wi-legend .wi-dot { position: static; margin: 0; }
.wi-legend .k { position: static; display: inline-block; width: 14px; height: 8px; border-radius: 2px; }
.wi-legend .wi-sess.k { height: 4px; }
.wi-tip { padding: 6px 9px; border-radius: 7px; background: rgba(255, 255, 255, .05); font-size: 10.5px; color: var(--text); }
/* Game day, round two: packed game lanes, round-hour axis, gold dots. */
.ld-gw { height: 9px; }
.ld-gw span { top: 0; font-size: 4.5px; line-height: 9px; }
.ld-hax { position: relative; height: 12px; }
.ld-hax span { position: absolute; top: 2px; transform: translateX(-50%); font-family: 'Press Start 2P', monospace; font-size: 5px; color: var(--text-dim); white-space: nowrap; }
.lvz-tl .ld-hax { grid-column: 2; }
.lvz-dot.gm { background: #ffe45e; }
.ld-key-dotg { display: inline-block; width: 8px; height: 8px; margin: 0 2px; vertical-align: middle; border-radius: 50%; background: #ffe45e; }

/* Dashboard: where each tab's numbers come from, and how fresh. */
.ld-asof { font-size: 9.5px; line-height: 1.4; color: var(--text-dim); margin: 0 0 8px; }

/* Dashboard: two weeks, person by day. One row per owner, Monday first;
   cells on the same cyan ramp as the hour grid, a dot for saved picks,
   gold under game days, hatching before tracking began. */
.ld-rl { margin: 0 0 8px; padding-left: 15px; font-size: 11.5px; line-height: 1.45; color: var(--text); }
.ld-rl li { margin: 2px 0; }
.ld-rl b { color: #fff; }
.ld-rg { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)) 3px repeat(7, minmax(0, 1fr)) 40px; gap: 3px 2px; align-items: center; }
.ld-rw { grid-column: span 7; font-family: 'Press Start 2P', monospace; font-size: 5px; letter-spacing: .05em; color: var(--text-dim); }
.ld-rw.r, .ld-rh.r { grid-column: auto; text-align: right; }
.ld-rh { position: relative; padding-bottom: 5px; font-family: 'Press Start 2P', monospace; font-size: 6px; text-align: center; color: var(--text-dim); cursor: pointer; }
.ld-rh.r { font-size: 5px; cursor: default; }
.ld-rh.today { color: #fff; }
.ld-rh.gd::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 0; height: 3px; border-radius: 2px; background: #ffe45e; }
.ld-rh b { position: absolute; left: 0; right: 0; top: -9px; font-size: 6px; font-weight: normal; color: #c58bff; }
.ld-rn { font-size: 10.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-rn.dim { font-size: 8.5px; color: var(--text-dim); }
.ld-rc { position: relative; display: block; height: 15px; border-radius: 3px; cursor: pointer; }
.ld-rc.s0 { background: rgba(255, 255, 255, .05); }
.ld-rc.s1 { background: #13586a; }
.ld-rc.s2 { background: #168a9c; }
.ld-rc.s3 { background: #1ab8cc; }
.ld-rc.s4 { background: #7af3ff; }
.ld-rc.fut { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); cursor: default; }
.ld-rc.nt { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px 4px); }
.ld-rc.pk::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px #0a0014; }
.ld-rc.on { outline: 1.5px solid #fff; outline-offset: 1px; }
.ld-rt { font-style: normal; font-size: 10px; text-align: right; color: var(--text); white-space: nowrap; }
.ld-rt small { color: var(--text-dim); }
.ld-rf { font-size: 9px; text-align: center; color: var(--text-dim); cursor: pointer; }
.ld-rf.all { color: #7af3ff; }
.ld-rkey { flex-wrap: wrap; }
.ld-rkey i.ld-rc { display: inline-block; width: 10px; height: 10px; margin-right: 2px; vertical-align: middle; border-radius: 2px; }
.ld-rkey i.ld-rc.pk::after { width: 4px; height: 4px; margin: -2px 0 0 -2px; box-shadow: none; }
.ld-rc.nr { background: repeating-linear-gradient(135deg, #168a9c 0 3px, #13586a 3px 6px); }
.ld-rkey { margin-top: 6px; }

/* Preview site only (brochiefs-preview.pages.dev): a fixed flag so a
   preview tab is never mistaken for the live app. */
.preview-flag { position: fixed; z-index: 9999; left: 50%; top: calc(env(safe-area-inset-top) + 4px); transform: translateX(-50%); padding: 3px 9px; border-radius: 999px; background: #ffe45e; color: #0a0014; font-family: 'Press Start 2P', monospace; font-size: 7px; letter-spacing: .04em; pointer-events: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.preview-flag.demo { pointer-events: auto; border: 0; cursor: pointer; top: auto; bottom: calc(var(--nav-h, 63px) + 8px); }
.preview-menu { position: fixed; z-index: 10000; left: 50%; bottom: calc(var(--nav-h, 63px) + 36px); transform: translateX(-50%); width: min(300px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 10px; background: #0a0014; border: 2px solid #ffe45e; box-shadow: 0 8px 24px rgba(0, 0, 0, .6); }
.preview-menu.hidden { display: none; }
.preview-menu > b { font-family: 'Press Start 2P', monospace; font-size: 7px; color: #ffe45e; text-align: center; padding: 2px 0 4px; }
.preview-menu button { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; padding: 9px 10px; border-radius: 7px; border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .05); color: #fff; font-family: 'Press Start 2P', monospace; font-size: 9px; text-align: left; cursor: pointer; }
.preview-menu button.on { border-color: #ffe45e; background: rgba(255, 228, 94, .12); }
.preview-menu button small { font-family: system-ui, sans-serif; font-size: 11px; color: #c9bde6; }

/* Who's in: readable on a wide screen, opens close together merged into
   one counted marker, a noon tick per day, and this week's picks. */
.wi { width: 100%; max-width: 920px; margin: 0 auto; }
.wi-tiles { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); }
.wi-tiles span { text-align: center; line-height: 1.3; }
.wi-tiles div.warn { border-color: rgba(255, 179, 71, .55); background: rgba(255, 179, 71, .08); }
.wi-axrow, .wi-row { grid-template-columns: 96px 1fr 58px; }
.wi-noon { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, .06); }
.wi-dot.n { width: auto; min-width: 15px; height: 13px; top: 7px; margin-left: -7.5px; padding: 0 3px; border-radius: 7px; font-family: 'Press Start 2P', monospace; font-size: 6.5px; line-height: 13px; text-align: center; color: #0a0414; font-style: normal; }
.wi-legend .wi-dot.n { position: static; margin: 0; display: inline-block; }
.wi-count { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.wi-pk { font-style: normal; font-size: 8.5px; white-space: nowrap; padding: 1px 4px; border-radius: 4px; }
.wi-pk.ok { color: #39ff88; }
.wi-pk.short { color: #ffb347; background: rgba(255, 179, 71, .12); }
.wi-pk.late { color: #ff5c8a; }
@media (min-width: 900px) {
  .wi-who b { font-size: 13px; }
  .wi-who small { font-size: 10px; }
  .wi-axis span { font-size: 6.5px; }
  .wi-strip { height: 34px; }
  .wi-dot:not(.n) { top: 11px; }
  .wi-dot.n { top: 9px; }
  .wi-tiles b { font-size: 18px; }
  .wi-tiles span, .wi-out, .wi-legend, .wi-tip { font-size: 11.5px; }
}