/* PULSE - Figma Design System ported to vanilla CSS
   Tokens from Design AR Glasses Prediction Game /src/app/App.tsx + TokenSheet
   Goal: smooth AR glasses UX, minimal distraction, 600x600 WebView, 480x480 safe zone
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --pulse-bg-900: #0A0A0A;
  --pulse-bg-800: #141414;
  --pulse-bg-700: #1E1E1E;
  --pulse-text-100: #FFFFFF;
  --pulse-text-400: #8A8A8A;
  --pulse-text-300: #AAAAAA;
  --pulse-lime: #C6FF00;
  --pulse-lime-dim: rgba(198,255,0,0.12);
  --pulse-lime-border: rgba(198,255,0,0.30);
  --pulse-lime-glow: rgba(198,255,0,0.35);
  --pulse-cyan: #00F5FF;
  --pulse-cyan-dim: rgba(0,245,255,0.12);
  --pulse-cyan-border: rgba(0,245,255,0.25);
  --pulse-success: #00E676;
  --pulse-danger: #FF4D4D;
  --pulse-danger-dim: rgba(255,77,77,0.12);
  --pulse-yellow: #FFD600;
  --pulse-yellow-dim: rgba(255,214,0,0.15);
  --pulse-border: #222222;
  --pulse-border-light: rgba(255,255,255,0.06);
  --pulse-radius-card: 16px;
  --pulse-radius-pill: 999px;
  --pulse-font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --pulse-font-mono: 'JetBrains Mono', monospace;
  --pulse-min-tap: 56px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--pulse-font-sans);
  background: #080808;
  color: var(--pulse-text-100);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  padding: 24px;
  -webkit-font-smoothing: antialiased;
}

/* 600x600 AR HUD frame - from Figma Frame component */
.app-600 {
  width: 600px;
  height: 600px;
  background: var(--pulse-bg-900);
  border-radius: 28px;
  border: 2px solid var(--pulse-lime);
  box-shadow: 0 0 0 1px rgba(198,255,0,0.1), 0 24px 64px rgba(0,0,0,0.8), 0 0 120px rgba(198,255,0,0.03);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  font-family: var(--pulse-font-sans);
}

/* Safe zone indicator - 480x480 centered dashed, from Figma Frame */
.app-600::before {
  content: '';
  position: absolute;
  top: 60px;
  left: 60px;
  width: 480px;
  height: 480px;
  border: 1px dashed rgba(198,255,0,0.08);
  border-radius: 16px;
  pointer-events: none;
  z-index: 0;
}

/* Header - matches Figma ScreenPicker header */
.hud-header {
  padding: 14px 16px 12px;
  background: rgba(10,10,10,0.95);
  border-bottom: 1px solid var(--pulse-border);
  position: relative;
  z-index: 2;
}
.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.title {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--pulse-text-100);
  line-height: 1;
}
.subtitle {
  display: none; /* Figma hides subtitle for minimal */
}
.header-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}
.connection-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--pulse-radius-pill);
  font-size: 11px;
  font-weight: 600;
  font-family: var(--pulse-font-mono);
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}
.connection-status.mock {
  background: rgba(0,245,255,0.10);
  color: var(--pulse-cyan);
  border-color: rgba(0,245,255,0.20);
}
.connection-status.live {
  background: rgba(0,230,118,0.12);
  color: var(--pulse-success);
  border-color: rgba(0,230,118,0.25);
}
.connection-status.replay {
  background: rgba(0,245,255,0.10);
  color: var(--pulse-cyan);
  border-color: rgba(0,245,255,0.20);
}
.connection-status.polling { background: rgba(255,214,0,0.10); color: var(--pulse-yellow); border-color: rgba(255,214,0,0.20); }
.connection-status.connecting { background: rgba(255,214,0,0.10); color: var(--pulse-yellow); border-color: rgba(255,214,0,0.20); }
.connection-status.disconnected { background: var(--pulse-danger-dim); color: var(--pulse-danger); border-color: rgba(255,77,77,0.2); }

.balance-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--pulse-radius-pill);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--pulse-font-mono);
  background: var(--pulse-lime-dim);
  color: var(--pulse-lime);
  border: 1px solid var(--pulse-lime-border);
}
.balance-chip #header-balance { font-weight: 800; }

/* Screens */
.screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  z-index: 1;
  padding: 0;
}
.screen.hidden { display: none !important; }
.screen-header {
  padding: 0 0 10px 0;
  border-bottom: none;
}
.screen-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--pulse-text-400);
  font-family: var(--pulse-font-mono);
}
.screen-hint {
  font-size: 11px;
  color: var(--pulse-text-400);
  margin-top: 4px;
  font-family: var(--pulse-font-mono);
}

/* Picker - Figma card style */
.picker-screen-inner { padding: 0 16px 12px; display: flex; flex-direction: column; height: 100%; }
#picker-screen .screen-header { padding: 10px 16px 8px; }

/* Debug D-pad for localhost testing — simulates wristband swipe */
#dpad-debug {
  position: fixed;
  bottom: 12px;
  right: 12px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: rgba(10,10,10,0.92);
  border: 1px solid rgba(198,255,0,0.25);
  border-radius: 14px;
  padding: 8px;
  backdrop-filter: blur(8px);
}
#dpad-debug .dpad-row { display: flex; gap: 4px; }
#dpad-debug button {
  width: 44px; height: 36px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--pulse-text-100);
  border-radius: 10px;
  font-size: 16px; font-weight: 700;
  cursor: pointer;
}
#dpad-debug button:hover { background: rgba(198,255,0,0.15); border-color: rgba(198,255,0,0.35); }
#dpad-debug button:active { transform: scale(0.95); }
#dpad-debug .dpad-label {
  font-size: 9px; color: var(--pulse-text-400); font-family: var(--pulse-font-mono);
  letter-spacing: 0.08em; margin-bottom: 2px;
}
.sport-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--pulse-radius-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--pulse-cyan-dim);
  color: var(--pulse-cyan);
  border: 1px solid var(--pulse-cyan-border);
  font-family: var(--pulse-font-mono);
  width: fit-content;
}
.sport-tag .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--pulse-cyan); display: inline-block;
}
.picker-hint {
  font-size: 11px;
  color: var(--pulse-text-400);
  font-family: var(--pulse-font-mono);
}
.picker-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  gap: 14px;
}
.picker-state.hidden { display: none; }
.skeleton-row {
  width: 100%; height: 92px;
  background: linear-gradient(90deg, #1A1A1A 25%, #222 50%, #1A1A1A 75%);
  background-size: 200% 100%; animation: shimmer 1.2s infinite;
  border-radius: 16px;
}
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.empty-icon { font-size: 28px; color: var(--pulse-text-400); opacity: 0.5; }
.empty-text { font-size: 13px; color: var(--pulse-text-400); text-align: center; }
.error-text { font-size: 13px; color: var(--pulse-danger); }

/* Overlay header row (identify) and shared icon button - Figma style */
.duel-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--pulse-border);
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(20,20,20,0.6);
  backdrop-filter: blur(8px);
}
.icon-button {
  background: transparent;
  border: 1px solid var(--pulse-border);
  color: var(--pulse-text-400);
  width: 32px; height: 32px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s, color 0.15s;
}
.icon-button:hover { border-color: var(--pulse-text-400); color: var(--pulse-text-100); }
.duel-title-wrap { flex: 1; min-width: 0; }
.duel-market-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--pulse-text-100); }

.section-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--pulse-text-400);
  margin-bottom: 10px;
  font-family: var(--pulse-font-mono);
}

.key-hint { font-size: 9px; opacity: 0.5; display: none; } /* hide for minimal */
.stake-button {
  min-width: 40px; padding: 6px 12px;
  background: rgba(255,255,255,0.07); color: var(--pulse-text-400);
  border: 1px solid var(--pulse-border); border-radius: var(--pulse-radius-pill);
  font-size: 13px; font-weight: 700; font-family: var(--pulse-font-mono);
  cursor: pointer; transition: all 0.2s;
}
.stake-button.active {
  background: var(--pulse-lime); color: var(--pulse-bg-900);
  border: 2px solid var(--pulse-lime); transform: scale(1.04);
}
.lock-button {
  width: 100%; min-height: var(--pulse-min-tap);
  padding: 14px; background: var(--pulse-lime); color: var(--pulse-bg-900);
  border: none; border-radius: var(--pulse-radius-pill);
  font-weight: 800; font-size: 13px; letter-spacing: 0.04em;
  cursor: pointer; transition: transform 0.15s, opacity 0.15s;
}
.lock-button:disabled { opacity: 0.35; cursor: not-allowed; background: rgba(198,255,0,0.25); color: rgba(10,10,10,0.5); }
.lock-button:active { transform: scale(0.98); }

/* Primary and secondary buttons */
.primary-button {
  flex: 1; min-height: var(--pulse-min-tap); padding: 12px;
  background: var(--pulse-lime); color: var(--pulse-bg-900);
  border: none; border-radius: var(--pulse-radius-pill);
  font-weight: 800; font-size: 13px; cursor: pointer; transition: transform 0.15s;
}
.primary-button:active { transform: scale(0.98); }
.secondary-button {
  padding: 10px 16px; min-height: 44px;
  background: transparent; color: var(--pulse-text-400);
  border: 1.5px solid var(--pulse-border); border-radius: var(--pulse-radius-pill);
  font-size: 12px; font-weight: 600; cursor: pointer; transition: border-color 0.15s, color 0.15s;
}
.secondary-button:hover { border-color: #3A3A3A; color: var(--pulse-text-100); }

/* Footer minimal */
.hud-footer {
  padding: 8px 12px; font-size: 8px; color: rgba(138,138,138,0.35);
  text-align: center; border-top: 1px solid rgba(34,34,34,0.6);
  line-height: 1.4; font-family: var(--pulse-font-mono);
  display: flex; justify-content: space-between;
}

/* Utilities */
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }

/* ==========================================================================
   Register screen — Contract 5 first-run dogfood registration
   ========================================================================== */
#register-screen { align-items: center; justify-content: center; display: flex; }
#register-screen.hidden { display: none !important; }
.register-inner { display: flex; flex-direction: column; align-items: center; gap: 26px; width: 100%; max-width: 380px; padding: 0 24px; }
.register-brand { text-align: center; }
.register-logo {
  font-size: 44px; font-weight: 900; letter-spacing: 0.28em; color: var(--pulse-lime);
  font-family: var(--pulse-font-mono); text-shadow: 0 0 24px var(--pulse-lime-glow);
}
.register-tag { font-size: 11px; color: var(--pulse-text-400); font-family: var(--pulse-font-mono); letter-spacing: 0.14em; margin-top: 8px; text-transform: uppercase; }
.register-card {
  width: 100%; display: flex; flex-direction: column; gap: 12px;
  background: var(--pulse-bg-800); border: 1px solid var(--pulse-lime-border); border-radius: 12px; padding: 20px;
}
.register-input {
  width: 100%; box-sizing: border-box; padding: 12px 14px; font-size: 15px;
  background: var(--pulse-bg-900); color: var(--pulse-text-100);
  border: 1px solid var(--pulse-bg-700); border-radius: 8px; outline: none;
  font-family: var(--pulse-font-mono);
}
.register-input:focus { border-color: var(--pulse-lime); box-shadow: 0 0 0 2px var(--pulse-lime-dim); }
.register-hint { font-size: 10px; color: var(--pulse-text-400); text-align: center; font-family: var(--pulse-font-mono); }
#register-error { font-size: 12px; text-align: center; }
.register-allowlist { display: flex; flex-direction: column; gap: 6px; max-height: 160px; overflow-y: auto; padding: 2px; }
.register-allowlist-state { font-size: 12px; color: var(--pulse-text-400); text-align: center; padding: 8px; font-family: var(--pulse-font-mono); }
.register-allowlist-list { display: flex; flex-direction: column; gap: 6px; }
.register-allowlist-list.hidden, .register-allowlist-state.hidden { display: none !important; }
.register-allowlist-item {
  width: 100%; text-align: left; padding: 10px 12px; font-size: 13px; font-weight: 600;
  font-family: var(--pulse-font-mono); color: var(--pulse-text-100);
  background: var(--pulse-bg-900); border: 1px solid var(--pulse-bg-700); border-radius: 8px; cursor: pointer;
}
.register-allowlist-item:hover { border-color: var(--pulse-text-400); }
.register-allowlist-item:focus { outline: none; border-color: var(--pulse-lime); box-shadow: 0 0 0 2px var(--pulse-lime-dim); background: #1E1E1E; }
.register-allowlist-item:active { transform: scale(0.98); }

/* Pairing-first Connect with iPhone (T287854991) — 600x600-safe, fits the
   480x480 safe zone. The code is the only large element; the token is never
   rendered anywhere in this block. */
.pairing-block { display: flex; flex-direction: column; gap: 10px; align-items: stretch; text-align: center; }
.pairing-block.hidden { display: none !important; }
#register-manual.hidden { display: none !important; }
#register-skip.hidden { display: none !important; }
.pairing-code-label { font-size: 11px; color: var(--pulse-text-400); font-family: var(--pulse-font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.pairing-code {
  font-size: 40px; font-weight: 900; letter-spacing: 0.18em; text-align: center;
  font-family: var(--pulse-font-mono); color: var(--pulse-lime);
  text-shadow: 0 0 24px var(--pulse-lime-glow);
  background: var(--pulse-bg-900); border: 1px solid var(--pulse-lime-border);
  border-radius: 12px; padding: 14px 8px 14px 16px; user-select: none;
}
.pairing-countdown { font-size: 12px; color: var(--pulse-text-100); font-family: var(--pulse-font-mono); min-height: 16px; }
.pairing-status { font-size: 12px; color: var(--pulse-text-400); font-family: var(--pulse-font-mono); min-height: 16px; line-height: 1.5; }
.pairing-identity { font-size: 12px; color: var(--pulse-text-100); font-family: var(--pulse-font-mono); }
.pairing-identity.hidden { display: none !important; }

/* ==========================================================================
   Picker tabs: Live Games (F4)
   ========================================================================== */
.picker-tabs { display: flex; gap: 8px; padding: 10px 16px 4px; }
.picker-tab {
  flex: 1; padding: 9px 0; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  font-family: var(--pulse-font-mono); color: var(--pulse-text-400);
  background: var(--pulse-bg-800); border: 1px solid var(--pulse-bg-700); border-radius: 8px; cursor: pointer;
}
.picker-tab:hover { border-color: var(--pulse-text-400); color: var(--pulse-text-100); }
.picker-tab.active { color: var(--pulse-lime); border-color: var(--pulse-lime-border); background: var(--pulse-lime-dim); }
#games-list.hidden { display: none !important; }
#games-list { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* ==========================================================================
   Live Games cards (F4)
   ========================================================================== */
.games-cards { flex: 1; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; padding: 8px 0; }
.game-card {
  background: var(--pulse-bg-800); border: 1px solid var(--pulse-bg-700); border-radius: 12px;
  padding: 14px; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.game-card:hover, .game-card:focus { border-color: var(--pulse-lime); box-shadow: 0 0 12px var(--pulse-lime-glow); outline: none; }
.game-card.pre, .game-card.ended { opacity: 0.45; cursor: default; }
.game-card.pre:hover, .game-card.pre:focus,
.game-card.ended:hover, .game-card.ended:focus { border-color: var(--pulse-bg-700); box-shadow: none; }
.game-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.game-card-league { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; color: var(--pulse-text-400); font-family: var(--pulse-font-mono); text-transform: uppercase; }
.game-card-badge { font-size: 10px; font-weight: 700; font-family: var(--pulse-font-mono); color: var(--pulse-lime); display: flex; align-items: center; gap: 5px; }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.game-card-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pulse-lime); animation: pulse-dot 1.6s ease-in-out infinite; }
.game-card-badge.pre { color: var(--pulse-text-400); }
.game-card-badge.pre .dot { background: var(--pulse-text-400); animation: none; }
.game-card-teams { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.game-card-team { display: flex; flex-direction: column; align-items: center; flex: 1; }
.game-card-abbr { font-size: 16px; font-weight: 800; color: var(--pulse-text-100); font-family: var(--pulse-font-mono); }
.game-card-score { font-size: 26px; font-weight: 900; color: var(--pulse-lime); font-family: var(--pulse-font-mono); line-height: 1.1; }
.game-card.pre .game-card-score { color: var(--pulse-text-400); font-size: 13px; font-weight: 600; }
.game-card-clock { font-size: 11px; color: var(--pulse-cyan); font-family: var(--pulse-font-mono); min-width: 64px; text-align: center; }
.game-card-date { font-size: 10px; color: var(--pulse-text-400); font-family: var(--pulse-font-mono); margin-top: 6px; text-align: center; }
/* Compact scoreboard status (T287855171) — small delayed text under the cards */
.games-status { font-size: 10px; color: var(--pulse-text-400); font-family: var(--pulse-font-mono); text-align: center; padding: 4px 0; }
.games-status.hidden { display: none !important; }
/* U1 compact Retry — the manual recovery for a delayed scoreboard with retained
   cards, alongside the bounded visible-only catalog poll (T287855109). Small,
   centered under the status text. */
.games-compact-retry { display: block; margin: 0 auto 6px; padding: 3px 16px; font-size: 10px; min-height: 0; }
.games-compact-retry.hidden { display: none !important; }
/* U2 game-entry error — small entry-specific message with a retry instruction.
   Separate from the scoreboard delayed status; cards stay usable beneath it. */
.games-entry-error { font-size: 10px; color: var(--pulse-danger); font-family: var(--pulse-font-mono); text-align: center; padding: 4px 0; }
.games-entry-error.hidden { display: none !important; }
/* U2 entry Retry — explicit same-game retry after a failed entry. Visible only
   while a failed join is pending; the only recovery for error.gameEntry. */
.games-entry-retry { display: block; margin: 0 auto 6px; padding: 3px 16px; font-size: 10px; min-height: 0; }
.games-entry-retry.hidden { display: none !important; }
/* Pick-not-sent recovery (T287855125) — explicit failure message with the
   same-error retry action below it. Optical-glass error presentation matching
   the entry-error convention; the retry reuses the secondary-button style. */
.prop-send-error { font-size: 11px; color: var(--pulse-danger); font-family: var(--pulse-font-mono); text-align: center; padding: 6px 0 2px; }
.prop-send-error.hidden { display: none !important; }
.prop-send-retry { display: block; margin: 2px auto 6px; }
.prop-send-retry.hidden { display: none !important; }
/* Picker-local joining overlay — rendered synchronously on live tap, before
   POST /api/session/start resolves. Picker-local: it never leaves the picker
   screen and never duplicates the watching connecting panel. */
.games-joining-overlay {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: linear-gradient(135deg, rgba(22, 34, 40, .62), rgba(7, 13, 17, .42));
  border: 1px solid var(--pulse-lime-border); border-radius: 12px;
  padding: 14px; margin: 8px 0; text-align: center;
}
.games-joining-overlay.hidden { display: none !important; }
.games-joining-title { font-size: 13px; font-weight: 800; color: var(--pulse-lime); font-family: var(--pulse-font-mono); }
.games-joining-detail { font-size: 11px; color: var(--pulse-text-400); font-family: var(--pulse-font-mono); }
/* Cancelling cleanup note — visible only while entry is locked during
   serialized session cleanup, so disabled cards are explained instead of
   unexplained. Never shown alongside the joining overlay or entry Retry. */
.games-cleanup-note { font-size: 10px; color: var(--pulse-text-400); font-family: var(--pulse-font-mono); text-align: center; padding: 4px 0; }
.games-cleanup-note.hidden { display: none !important; }
/* While joining or cancelling, every card is single-flight disabled: no repeated
   click, Enter, or D-pad activation may issue another startSession. */
.game-card[aria-disabled="true"] { opacity: 0.55; cursor: wait; }
/* Compact play-by-play status (T287855171) — small delayed text beneath the
   clock. The scoreboard keeps its three-column layout (1fr auto 1fr); the
   warning spans the full row below without altering the columns. */
.watching-pbp-status { grid-column: 1 / -1; grid-row: 2; font-size: 10px; color: var(--pulse-text-400); font-family: var(--pulse-font-mono); text-align: center; padding: 2px 0; }
.watching-pbp-status.hidden { display: none !important; }

/* ==========================================================================
   Recap overlay — session summary (Contract 6.8)
   ========================================================================== */
#recap-overlay {
  position: absolute; inset: 0; z-index: 40;
  background: rgba(10, 10, 10, 0.88);
  display: flex; align-items: center; justify-content: center;
}
#recap-overlay.hidden { display: none !important; }
.recap-card {
  width: 84%; max-width: 400px; display: flex; flex-direction: column; align-items: center; gap: 12px;
  background: var(--pulse-bg-800); border: 1px solid var(--pulse-lime-border); border-radius: 14px;
  padding: 26px 22px; box-shadow: 0 0 32px var(--pulse-lime-glow);
  animation: recap-in 0.25s ease-out;
}
@keyframes recap-in { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.recap-title { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--pulse-text-400); font-family: var(--pulse-font-mono); }
.recap-final { font-size: 26px; font-weight: 900; color: var(--pulse-text-100); font-family: var(--pulse-font-mono); }
.recap-record { font-size: 14px; font-weight: 700; color: var(--pulse-cyan); font-family: var(--pulse-font-mono); }
.recap-points { font-size: 30px; font-weight: 900; font-family: var(--pulse-font-mono); }
.recap-points.win { color: var(--pulse-success); }
.recap-points.loss { color: var(--pulse-danger); }
.recap-fadewins { font-size: 11px; color: var(--pulse-text-400); font-family: var(--pulse-font-mono); }
.recap-bestcall { font-size: 11px; color: var(--pulse-text-400); font-family: var(--pulse-font-mono); text-align: center; max-width: 100%; }
#recap-done { width: 100%; margin-top: 6px; }

/* ==========================================================================
   Handoff overlay — Point & Predict confirmed-game entry (Contract 5)
   ========================================================================== */
#handoff-overlay {
  position: absolute; inset: 0; z-index: 45;
  background: rgba(10, 10, 10, 0.85);
  display: flex; align-items: center; justify-content: center;
}
#handoff-overlay.hidden { display: none !important; }
.handoff-card {
  width: 80%; max-width: 360px; display: flex; flex-direction: column; align-items: center; gap: 12px;
  background: var(--pulse-bg-800); border: 1px solid var(--pulse-lime-border); border-radius: 14px;
  padding: 24px 20px; box-shadow: 0 0 28px var(--pulse-lime-glow); text-align: center;
}
.handoff-title { font-size: 17px; font-weight: 800; color: var(--pulse-text-100); }
.handoff-detail { font-size: 12px; color: var(--pulse-text-400); font-family: var(--pulse-font-mono); line-height: 1.4; }
.handoff-actions { display: flex; gap: 10px; width: 100%; margin-top: 6px; }
.handoff-actions .primary-button, .handoff-actions .secondary-button { flex: 1; }

/* Responsive */
@media (max-width: 650px) {
  body { padding: 0; }
  .app-600 { width: 100vw; height: 100vh; border-radius: 0; border: none; }
}

/* Compact left-aligned inline CTA; reusable on any picker surface */
.inline-cta {
  align-self: flex-start;
  margin: 6px 16px 0;
  padding: 6px 12px;
  font-size: 11px;
  width: auto;
}

/* Identify overlay - Point & Predict browser photo fallback (Contract 5) */
.support-btn {
  margin-top: 4px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--pulse-font-sans);
  color: var(--pulse-text-300);
  background: transparent;
  border: 1px solid var(--pulse-border);
  border-radius: var(--pulse-radius-pill);
  cursor: pointer;
  min-height: 28px;
}
.support-btn:hover { border-color: var(--pulse-lime-border); color: var(--pulse-text-100); }
.support-btn:focus { outline: 1px solid rgba(198,255,0,0.35); border-color: var(--pulse-lime); }
/* Persistent canonical entry (T287855227 F13/F15): a direct #app child, so
   the header-hidden Watching/Leaderboard states cannot hide it. Absolutely
   positioned (no layout impact). Layering (F15): the trigger sits above the
   recap (z 40) and handoff (z 45) overlays while Support is closed
   (z 46), and below its own modal, so it is never clickable above the open
   dialog. The modal sits above every app and local-testing surface
   (including the demo bar and D-pad) so no background control remains
   pointer-operable while the aria-modal dialog is open. The
   header reserves the corner via .header-meta margin. On Watching the
   top-right corner collides with the Ranks control and scoreboard, and the
   whole right edge is full-bleed content down to the footer, so the trigger
   docks in a reserved slot at the footer's right end (see
   .watching-footer padding reservation below), clear of the topbar, Ranks,
   scoreboard container, main prediction content, hintbar, and every footer
   control at 600x600. */
#app > .support-float {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 46;
  margin-top: 0;
  background: rgba(10,10,10,0.85);
}
.hud-header .header-meta { margin-right: 84px; }
#app:has(#watching-screen:not(.hidden)) > .support-float { top: auto; bottom: 44px; }
.support-overlay {
  position: absolute;
  inset: 0;
  background: rgba(8,8,8,0.92);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 18px 16px;
  overflow-y: auto;
}
.support-card {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--pulse-bg-800);
  border: 1px solid var(--pulse-border);
  border-radius: var(--pulse-radius-card);
  padding: 14px 14px 12px;
}
.support-title { font-size: 14px; font-weight: 800; color: var(--pulse-text-100); }
.support-code {
  font-family: var(--pulse-font-mono);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--pulse-lime);
  background: var(--pulse-bg-900);
  border: 1px solid var(--pulse-lime-border);
  border-radius: 10px;
  padding: 8px 12px;
  text-align: center;
}
.support-bundle {
  width: 100%;
  min-height: 120px;
  font-family: var(--pulse-font-mono);
  font-size: 10px;
  line-height: 1.5;
  color: var(--pulse-text-300);
  background: var(--pulse-bg-900);
  border: 1px solid var(--pulse-border);
  border-radius: 10px;
  padding: 8px 10px;
  resize: vertical;
  box-sizing: border-box;
}
.support-status { font-size: 11px; color: var(--pulse-text-300); line-height: 1.4; min-height: 15px; }
.support-privacy { font-size: 10px; color: var(--pulse-text-400); line-height: 1.4; font-family: var(--pulse-font-mono); }
.support-actions { display: flex; gap: 8px; }
.support-actions .primary-button,
.support-actions .secondary-button { flex: 1; }
.identify-overlay {
  position: absolute;
  inset: 0;
  background: var(--pulse-bg-900);
  z-index: 20;
  display: flex;
  flex-direction: column;
}
.identify-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 16px 12px;
  overflow-y: auto;
  overflow-x: hidden;
}
.identify-panel { display: flex; flex-direction: column; gap: 10px; }
.identify-explainer { font-size: 12px; color: var(--pulse-text-300); line-height: 1.5; }
.identify-note { font-size: 10px; color: var(--pulse-text-400); line-height: 1.4; font-family: var(--pulse-font-mono); }
.identify-status { font-size: 13px; color: var(--pulse-text-100); text-align: center; font-weight: 600; }
.identify-error { font-size: 11px; color: var(--pulse-danger); min-height: 14px; }
.identify-file-input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}
.identify-cta { width: 100%; }
.identify-email {
  width: 100%; padding: 10px 12px; font-size: 13px;
  background: var(--pulse-bg-800); color: var(--pulse-text-100);
  border: 1px solid var(--pulse-border); border-radius: 10px;
  font-family: var(--pulse-font-sans); box-sizing: border-box;
}
.identify-email:focus { outline: 1px solid rgba(198,255,0,0.35); border-color: var(--pulse-lime); }
.identify-candidate-list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.identify-candidate {
  background: var(--pulse-bg-800);
  border: 1px solid var(--pulse-border);
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.identify-candidate:hover { border-color: var(--pulse-text-400); }
.identify-candidate.selected { border-color: var(--pulse-lime); background: rgba(198,255,0,0.06); }
.identify-candidate-title {
  font-size: 13px; font-weight: 700; color: var(--pulse-text-100);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.identify-candidate-meta {
  font-size: 10px; color: var(--pulse-text-400); font-family: var(--pulse-font-mono);
  margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.identify-evidence { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.identify-evidence-chip {
  font-size: 9px; font-family: var(--pulse-font-mono); color: var(--pulse-text-300);
  background: rgba(255,255,255,0.05); padding: 2px 6px; border-radius: 8px;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.identify-confirmed-icon { font-size: 28px; color: var(--pulse-lime); text-align: center; }
#identify-confirm:disabled { opacity: 0.35; cursor: not-allowed; }

/* ==========================================================================
   Optical-Glass Watching — Contract 6 integration (design-prototypes/pulse-glass-concept)
   Namespaced tokens so prototype names do not collide with old --pulse-* theme.
   Visual hierarchy: world primary, score restrained, ambient quiet, opportunity
   strongest glass, Ride lime, Fade cyan, Coral live attention, blur capped 12px.
   ========================================================================== */

:root {
  --optical-ink: #f7fbff;
  --optical-muted: rgba(229, 238, 244, 0.66);
  --optical-quiet: rgba(229, 238, 244, 0.42);
  --optical-lime: #caff37;
  --optical-lime-soft: rgba(202, 255, 55, 0.15);
  --optical-lime-strong: rgba(202, 255, 55, 0.28);
  --optical-cyan: #5df5ff;
  --optical-cyan-soft: rgba(93, 245, 255, 0.14);
  --optical-coral: #ff708b;
  --optical-panel: rgba(11, 19, 24, 0.58);
  --optical-panel-strong: rgba(8, 15, 19, 0.79);
  --optical-line: rgba(255, 255, 255, 0.16);
  --optical-line-hot: rgba(202, 255, 55, 0.52);
  --optical-shadow: 0 24px 90px rgba(0, 0, 0, 0.58);
  --optical-radius: 26px;
  --optical-radius-lg: 30px;
  --optical-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Watching screen root — remains 600x600 via parent .app-600, but now optical */
#watching-screen.optical-watching {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: #05090b;
  isolation: isolate;
  font-family: var(--pulse-font-sans);
}

/* Watching and leaderboard provide their own compact navigation. Avoid the
   duplicate global header so the glasses surface has one clear hierarchy. */
#app:has(#watching-screen:not(.hidden)) > .hud-header,
#app:has(#leaderboard-screen:not(.hidden)) > .hud-header {
  display: none;
}

#watching-screen.optical-watching::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 23% 14%, rgba(68, 113, 142, .28), transparent 26rem),
    radial-gradient(circle at 83% 78%, rgba(89, 101, 42, .20), transparent 28rem),
    linear-gradient(135deg, #070a0c, #10171a 55%, #07090a);
  opacity: 0.55;
}

/* Preview/debug world — colorful geometric background simulating world seen through optical display.
   Production default is black/transparent; preview class enables stronger simulation locally.
   Do not assume browser transparency == optical black; verify on Ray-Ban Display. */
.optical-world {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: #05090b;
}
body[data-optical-preview] #watching-screen .optical-world,
#watching-screen[data-optical-preview] .optical-world,
.optical-preview .optical-world {
  background:
    linear-gradient(180deg, rgba(4, 10, 13, .16), rgba(4, 9, 12, .5)),
    radial-gradient(ellipse at 20% 80%, rgba(85, 129, 66, .55), transparent 38%),
    radial-gradient(ellipse at 75% 30%, rgba(126, 80, 55, .45), transparent 36%),
    linear-gradient(110deg, #23323a 0 18%, #605748 18% 20%, #1c3338 20% 47%, #59664b 47% 70%, #1b2830 70%);
  opacity: 0.92;
}
.optical-world::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .38;
  background:
    repeating-linear-gradient(100deg, transparent 0 52px, rgba(255, 255, 255, .025) 53px 54px),
    linear-gradient(0deg, rgba(0, 0, 0, .35), transparent 42%);
  filter: saturate(.78);
}

/* Safe-zone guide — 480x480 centered dashed, preview/debug only */
.optical-safe-zone {
  position: absolute;
  inset: 60px;
  z-index: -1;
  border: 1px dashed rgba(255, 255, 255, .06);
  border-radius: 22px;
  pointer-events: none;
}

/* Glass material — functional, not everywhere */
.optical-glass {
  background: linear-gradient(135deg, rgba(22, 34, 40, .71), rgba(7, 13, 17, .48));
  border: 1px solid var(--optical-line);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .13),
    inset 0 -1px rgba(0, 0, 0, .18),
    0 12px 36px rgba(0, 0, 0, .22);
  -webkit-backdrop-filter: blur(12px) saturate(145%);
  backdrop-filter: blur(12px) saturate(145%);
}

/* Topbar */
.optical-topbar {
  position: absolute;
  z-index: 3;
  top: 18px;
  left: 20px;
  right: 20px;
  height: clamp(48px, 9vw, 54px);
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 20px;
}
.optical-back {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--optical-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 16px;
}
.optical-back:hover { color: var(--optical-ink); border-color: rgba(255,255,255,0.22); }
.optical-mark {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -.04em;
  color: var(--optical-ink);
}
.optical-live-chip,
.optical-points-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: var(--optical-muted);
  background: rgba(255,255,255,.055);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-family: var(--pulse-font-mono);
}
.optical-live-chip::before {
  width: 6px;
  height: 6px;
  content: "";
  border-radius: 50%;
  background: var(--optical-coral);
  box-shadow: 0 0 10px var(--optical-coral);
}
.optical-live-chip.replay::before,
.optical-live.replay .dot {
  background: var(--optical-cyan);
  box-shadow: 0 0 10px var(--optical-cyan);
}
.optical-points-chip {
  margin-left: auto;
  color: var(--optical-lime);
  border-color: rgba(202,255,55,.25);
  background: rgba(202,255,55,.08);
  letter-spacing: .03em;
  text-transform: none;
  gap: 8px;
}
.optical-points-chip b { color: var(--optical-lime); }
.optical-standings-btn {
  flex: none;
  min-height: 30px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  color: var(--optical-ink);
  background: rgba(255,255,255,.055);
  cursor: pointer;
  font: 750 9px/1 var(--pulse-font-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.optical-standings-btn > span:first-child { color: var(--optical-lime); }
.optical-standings-btn:hover {
  color: var(--optical-lime);
  border-color: rgba(202,255,55,.45);
  background: rgba(202,255,55,.08);
}

/* Scoreboard */
.optical-scoreboard {
  position: absolute;
  z-index: 2;
  top: 88px;
  left: 60px;
  right: 60px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  text-shadow: 0 2px 14px rgba(0,0,0,.7);
}
.optical-team { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.optical-team:last-child { justify-content: flex-end; }
.optical-abbr {
  color: var(--optical-muted);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .12em;
  font-family: var(--pulse-font-mono);
}
.optical-score {
  font-size: clamp(28px, 5.5vw, 34px);
  font-weight: 760;
  letter-spacing: -.05em;
  color: var(--optical-ink);
  font-family: var(--pulse-font-mono);
}
.optical-clock-wrap { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.optical-clock {
  font: 650 13px/1.2 var(--pulse-font-mono);
  color: var(--optical-ink);
}
.optical-live {
  color: var(--optical-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-family: var(--pulse-font-mono);
  display: flex;
  align-items: center;
  gap: 4px;
}
.optical-live .dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--optical-lime);
  animation: optical-pulse-dot 1.6s ease-in-out infinite;
}

/* Experience stack */
.optical-experience {
  position: absolute;
  z-index: 4;
  inset: 148px 46px 84px; /* increased bottom from 70 to 84 to prevent footer overlap measured at 537.8px */
  display: grid;
  overflow: hidden; /* prevent inner overflow from spilling into footer */
}
.optical-state {
  grid-area: 1 / 1;
  min-width: 0;
  min-height: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(9px) scale(.985);
  transition: opacity .38s var(--optical-ease), transform .42s var(--optical-ease), visibility .38s;
}
.optical-state:not(.hidden) {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.optical-state.hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(9px) scale(.985) !important;
  pointer-events: none !important;
}

/* Ambient */
.optical-ambient {
  display: grid;
  place-items: center;
  text-align: center;
}
.optical-orb-wrap {
  position: absolute;
  top: 24px;
  left: 50%;
  width: 138px;
  height: 138px;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 30px rgba(93,245,255,.15));
}
.optical-orb-halo {
  position: absolute;
  inset: 8px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(93,245,255,.14);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(93,245,255,.1), transparent 64%);
  box-shadow: inset 0 0 28px rgba(93,245,255,.06), 0 0 34px rgba(93,245,255,.08);
}
.optical-orb-halo::after {
  position: absolute;
  inset: 13px;
  content: "";
  pointer-events: none;
  border: 1px solid rgba(202,255,55,.1);
  border-radius: 50%;
}
.optical-orb-mount {
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  color: var(--optical-ink);
  /* Fallback orb visible even if canvas JS fails or not yet mounted — green breathing glow */
  background: radial-gradient(circle at 50% 50%, rgba(202,255,55,0.42) 0%, rgba(202,255,55,0.16) 42%, rgba(93,245,255,0.10) 68%, transparent 78%);
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(202,255,55,0.22), inset 0 0 18px rgba(202,255,55,0.18);
}
.optical-orb-mount.small { width: 32px; height: 32px; }
.optical-orb-mount canvas { display: block; width: 100%; height: 100%; }
.optical-ambient-copy { width: min(360px, 86%); margin-top: 188px; }
.optical-eyebrow {
  margin: 0 0 9px;
  color: var(--optical-cyan);
  font: 750 10px/1 var(--pulse-font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.optical-ambient-copy h1 {
  margin: 0;
  color: var(--optical-ink);
  font-size: clamp(20px, 3.8vw, 23px);
  line-height: 1.16;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.optical-ambient-copy p {
  margin: 10px auto 0;
  color: var(--optical-muted);
  font-size: 12px;
  line-height: 1.5;
}

/* Thinking */
.optical-thinking-lines {
  position: absolute;
  top: 160px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.optical-thinking-lines h1 { margin: 0; color: var(--optical-ink); font-size: clamp(19px, 3.5vw, 21px); letter-spacing: -.03em; }
.optical-thinking-lines p { margin: 9px 0 0; color: var(--optical-muted); font-size: 12px; }
.optical-signal {
  display: flex;
  width: 196px;
  height: 22px;
  margin: 22px auto 0;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.optical-signal i {
  display: block;
  width: 3px;
  height: 7px;
  border-radius: 99px;
  background: var(--optical-cyan);
  opacity: .72;
  animation: optical-wave .9s ease-in-out infinite alternate;
}
.optical-signal i:nth-child(2n) { animation-delay: -.35s; }
.optical-signal i:nth-child(3n) { animation-delay: -.6s; }
.optical-signal i:nth-child(4n) { animation-delay: -.15s; }

/* Opportunity */
.optical-opportunity {
  height: 100%;
  padding: 18px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  border-radius: var(--optical-radius-lg);
  border-color: var(--optical-line-hot);
  background:
    radial-gradient(circle at 83% 5%, rgba(202,255,55,.14), transparent 35%),
    linear-gradient(145deg, rgba(15, 26, 31, .84), rgba(6, 12, 15, .68));
  box-shadow: inset 0 1px rgba(255,255,255,.17), 0 0 44px rgba(202,255,55,.09), 0 20px 55px rgba(0,0,0,.32);
}
.optical-opportunity-top { display: flex; align-items: center; gap: 10px; }
.optical-muse-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 25px;
  padding: 0 9px;
  color: var(--optical-lime);
  border: 1px solid rgba(202,255,55,.28);
  border-radius: 999px;
  background: rgba(202,255,55,.08);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  font-family: var(--pulse-font-mono);
}
.optical-muse-chip::before { content: "✦"; font-size: 10px; }
.optical-timer {
  margin-left: auto;
  color: var(--optical-ink);
  font: 700 12px/1 var(--pulse-font-mono);
}
.optical-timer-ring { width: 30px; height: 30px; transform: rotate(-90deg); }
.optical-timer-ring circle { fill: none; stroke-width: 2; }
.optical-timer-ring .optical-track { stroke: rgba(255,255,255,.13); }
.optical-timer-ring .optical-progress {
  stroke: var(--optical-lime);
  stroke-linecap: round;
  stroke-dasharray: 75.4;
  stroke-dashoffset: 22;
  transition: stroke-dashoffset .12s linear;
}
.optical-question { align-self: center; padding: 2px 2px 10px; min-width: 0; }
.optical-question .optical-context { margin: 0 0 7px; color: var(--optical-muted); font-size: 13px; font-family: var(--pulse-font-mono); }
.optical-question .optical-q {
  margin: 0;
  max-width: 365px;
  color: var(--optical-ink);
  font-size: clamp(22px, 4.2vw, 27px);
  line-height: 1.08;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.optical-call-line { display: flex; align-items: end; gap: 9px; margin-top: 13px; flex-wrap: wrap; }
.optical-call {
  color: var(--optical-lime);
  font-size: clamp(22px, 4vw, 26px);
  font-weight: 880;
  line-height: 1;
  font-family: var(--pulse-font-mono);
}
.optical-confidence { color: var(--optical-muted); font: 650 13px/1.2 var(--pulse-font-mono); }
.optical-reason {
  margin-top: 10px;
  color: rgba(247,251,255,.78);
  font-size: 12px;
  line-height: 1.42;
}
.optical-reason.hidden { display: none !important; }

.optical-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.optical-choice {
  min-height: 72px;
  padding: 10px 14px;
  cursor: pointer;
  color: var(--optical-ink);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 21px;
  background: rgba(255,255,255,.045);
  transition: transform .16s var(--optical-ease), background .16s, border-color .16s, box-shadow .16s;
  font-family: var(--pulse-font-mono);
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.optical-choice:hover, .optical-choice:focus-visible {
  outline: none;
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.34);
  background: rgba(255,255,255,.095);
}
.optical-choice.selected {
  border-color: var(--optical-lime);
  background: var(--optical-lime-soft);
  box-shadow: inset 0 1px rgba(255,255,255,.13), 0 0 24px rgba(202,255,55,.1);
}
.optical-choice.fade.selected { border-color: var(--optical-cyan); background: var(--optical-cyan-soft); box-shadow: 0 0 24px rgba(93,245,255,.1); }
.optical-choice b { display: block; color: var(--optical-lime); font-size: 15px; letter-spacing: .02em; }
.optical-choice.fade b { color: var(--optical-cyan); }
.optical-choice small { display: block; color: var(--optical-muted); font-size: 13px; }

.optical-stake-row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.optical-stake {
  min-width: 44px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.07);
  color: var(--optical-muted);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--pulse-font-mono);
  cursor: pointer;
  transition: all .18s var(--optical-ease);
}
.optical-stake.active {
  background: var(--optical-lime);
  color: #0A0A0A;
  border-color: var(--optical-lime);
  transform: scale(1.04);
}
.optical-timer-bar-wrap {
  width: 100%;
  height: 4px;
  margin-top: 10px;
  background: rgba(255,255,255,0.08);
  border-radius: 99px;
  overflow: hidden;
}
.optical-timer-bar {
  height: 100%;
  width: 100%;
  background: var(--optical-lime);
  border-radius: 99px;
  transition: width .1s linear;
}

.optical-lock {
  width: 100%;
  min-height: 56px;
  margin-top: 12px;
  padding: 14px;
  background: var(--optical-lime);
  color: #0A0A0A;
  border: none;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .04em;
  cursor: pointer;
  transition: transform .15s, opacity .15s;
  font-family: var(--pulse-font-mono);
}
.optical-lock:disabled {
  opacity: .35;
  cursor: not-allowed;
  background: rgba(202,255,0,0.25);
  color: rgba(10,10,10,0.5);
}
.optical-lock:active { transform: scale(.98); }

/* Locked */
.optical-locked-card, .optical-result-card, .optical-expired-card {
  height: 100%;
  padding: 24px;
  display: grid;
  place-items: center;
  border-radius: var(--optical-radius-lg);
  text-align: center;
}
.optical-lock-mark {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(202,255,55,.35);
  border-radius: 50%;
  color: var(--optical-lime);
  background: var(--optical-lime-soft);
  box-shadow: 0 0 40px rgba(202,255,55,.09);
  font-size: 25px;
}
.optical-locked-card h1, .optical-result-card h1 {
  margin: 17px 0 0;
  color: var(--optical-ink);
  font-size: clamp(22px, 4vw, 25px);
  letter-spacing: -.04em;
}
.optical-locked-card p, .optical-result-card p {
  max-width: 340px;
  margin: 9px auto 0;
  color: var(--optical-muted);
  font-size: 13px;
  line-height: 1.45;
}
.optical-locked-card .optical-locked-q { color: var(--optical-ink); font-weight: 600; font-size: 13px; }
.optical-locked-action { color: var(--optical-lime) !important; font-weight: 700; font-family: var(--pulse-font-mono); font-size: 13px; }
.optical-lock-timer { display: flex; align-items: center; gap: 10px; margin-top: 14px; width: 100%; max-width: 260px; }
.optical-lock-timer-track {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.10);
  border-radius: 99px;
  overflow: hidden;
}
.optical-lock-timer-bar { height: 100%; background: var(--optical-cyan); transition: width .4s linear; }
.optical-locked-remaining { color: var(--optical-muted); font: 600 13px var(--pulse-font-mono); min-width: 54px; text-align: right; }
.optical-locked-hint { font-size: 13px; color: var(--optical-quiet); font-family: var(--pulse-font-mono); margin-top: 8px; text-transform: uppercase; letter-spacing: .08em; }

/* Result */
.optical-result-card { border-color: rgba(93,245,255,.4); }
.optical-result-mark {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font: 800 20px var(--pulse-font-mono);
}
.optical-result-mark.optical-win { color: var(--optical-lime); border: 1px solid rgba(202,255,55,.4); background: var(--optical-lime-soft); box-shadow: 0 0 40px rgba(202,255,55,.12); }
.optical-result-mark.optical-loss { color: var(--optical-cyan); border: 1px solid rgba(93,245,255,.4); background: var(--optical-cyan-soft); box-shadow: 0 0 40px rgba(93,245,255,.12); }
.optical-result-play { color: var(--optical-ink); font-size: 13px; line-height: 1.35; margin-top: 8px; max-width: 340px; }
.optical-gain { margin-top: 11px; color: var(--optical-lime); font: 800 18px/1 var(--pulse-font-mono); }
.optical-gain.negative { color: var(--optical-coral); }
.optical-result-balances { margin-top: 10px; color: var(--optical-muted); font: 600 11px var(--pulse-font-mono); }
.optical-result-balances b { color: var(--optical-ink); }

/* Expired */
.optical-expired-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  justify-content: center;
  background: rgba(11, 19, 24, 0.38);
  border-color: rgba(255,255,255,0.08);
}
.optical-expired-icon { font-size: 28px; color: var(--optical-quiet); }
.optical-expired-text { font-size: 14px; color: var(--optical-muted); font-family: var(--pulse-font-mono); }

/* Hintbar */
.optical-hintbar {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 88px; /* moved up from 22px to stay above footer that starts at ~537.8px, prevent overlap */
  display: flex;
  align-items: center;
  gap: 13px;
  transform: translateX(-50%);
  color: var(--optical-muted);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 2px 8px rgba(0,0,0,.8);
  font-family: var(--pulse-font-mono);
}
.optical-hintbar i { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.36); display: block; }

/* Footer retained but optical */
.optical-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
  margin: 0 !important;
  background: rgba(8, 15, 19, 0.72);
  border-top: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 0 0 28px 28px;
}
/* Reserved Support slot (T287855227 F15): the Watching-docked Support
   trigger (bottom:44px right:12px) sits over this footer's right end. The
   footer keeps 96px of right padding clear so its own controls (Back,
   record, last-prop) never flow under the trigger; the trigger overlaps
   only footer container background, never a footer control. */
.watching-footer.optical-footer { padding-right: 96px; }
/* NBA-07 correction (Codex F6): footer copy stays one bounded line so
   longer recent-history text can never grow the footer into the
   question/actions box above it. */
.watching-last-prop, .watching-record {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.watching-last-prop { flex: 1 1 auto; }
.watching-record, .watching-footer .secondary-button { flex: none; }

/* Recap restyled as strong glass card, preserving IDs */
#recap-overlay {
  position: absolute; inset: 0; z-index: 40;
  background: rgba(10, 10, 10, 0.88);
  display: flex; align-items: center; justify-content: center;
}
#recap-overlay.hidden { display: none !important; }
#recap-overlay .recap-card {
  width: 84%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(22, 34, 40, .86), rgba(7, 13, 17, .72));
  border: 1px solid var(--optical-line-hot);
  border-radius: var(--optical-radius-lg);
  padding: 26px 22px;
  box-shadow: var(--optical-shadow), 0 0 32px rgba(202,255,55,.14);
  -webkit-backdrop-filter: blur(12px) saturate(145%);
  backdrop-filter: blur(12px) saturate(145%);
}

/* Animations */
@keyframes optical-pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes optical-wave { 0% { height: 7px; opacity: .72; } 100% { height: 21px; opacity: 1; } }

/* Reduced motion / transparency */
@media (prefers-reduced-motion: reduce) {
  .optical-state { transition: none !important; }
  .optical-signal i, .optical-live .dot { animation: none !important; }
  .optical-orb-mount canvas { animation: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .optical-glass, #recap-overlay .recap-card, #watching-screen.optical-watching::before {
    background: #111a1f !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* Responsive — below 600 CSS pixels, scale spacing/type with clamp, not scroll */
@media (max-width: 650px) {
  #watching-screen.optical-watching {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }
  .optical-topbar { left: 10px; right: 10px; top: 10px; }
  .optical-scoreboard { left: 20px; right: 20px; top: 68px; }
  /* NBA-07 correction (Codex F6): bottom raised 58px to 70px — the measured
     61px footer (top edge 510.8) overlapped the question/actions box
     (bottom edge 513.8) by 3px at 600x600. */
  .optical-experience { inset: 118px 16px 70px; }
  .optical-safe-zone { inset: 24px; }
  .optical-footer { border-radius: 0; }
  .optical-choice { min-height: clamp(52px, 12vw, 72px); }
}


/* Focus ring for glasses/D-pad — high contrast */
.optical-choice:focus-visible, .optical-stake:focus-visible, .optical-lock:focus-visible, .optical-back:focus-visible,
.optical-standings-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(202,255,55,0.45), 0 0 0 5px rgba(202,255,55,0.18);
}

/* Ensure question uses textContent, not HTML, and stays in safe zone */
.optical-q, .optical-locked-q, .optical-result-play { word-break: break-word; overflow-wrap: anywhere; }

/* ==========================================================================
   Register / Picker / Handoff — restrained optical continuity, preserving functionality
   ========================================================================== */

#register-screen {
  background: radial-gradient(circle at 23% 14%, rgba(68, 113, 142, .22), transparent 24rem),
              radial-gradient(circle at 83% 78%, rgba(89, 101, 42, .18), transparent 28rem),
              linear-gradient(135deg, #070a0c, #10171a 55%, #07090a);
}
#register-screen .register-card {
  background: linear-gradient(135deg, rgba(22, 34, 40, .71), rgba(7, 13, 17, .48));
  border: 1px solid var(--optical-line);
  box-shadow: inset 0 1px rgba(255,255,255,.13), 0 12px 36px rgba(0,0,0,.22);
  -webkit-backdrop-filter: blur(12px) saturate(145%);
  backdrop-filter: blur(12px) saturate(145%);
  border-radius: var(--optical-radius);
}
#register-screen .register-logo { color: var(--optical-lime); text-shadow: 0 0 24px rgba(202,255,55,0.25); }

.picker-tabs .picker-tab {
  border-radius: 999px;
  font-family: var(--pulse-font-mono);
}
.picker-tab.active {
  color: var(--optical-lime);
  border-color: var(--optical-line-hot);
  background: var(--optical-lime-soft);
}
#games-list .game-card {
  background: linear-gradient(135deg, rgba(22, 34, 40, .62), rgba(7, 13, 17, .42));
  border: 1px solid var(--optical-line);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(8px) saturate(130%);
  backdrop-filter: blur(8px) saturate(130%);
}
#games-list .game-card:hover, #games-list .game-card:focus {
  border-color: var(--optical-line-hot);
  box-shadow: 0 0 0 1px rgba(202,255,55,.14), var(--optical-shadow);
}

#handoff-overlay .handoff-card {
  background: linear-gradient(135deg, rgba(22, 34, 40, .86), rgba(7, 13, 17, .72));
  border: 1px solid var(--optical-line-hot);
  border-radius: var(--optical-radius-lg);
  -webkit-backdrop-filter: blur(12px) saturate(145%);
  backdrop-filter: blur(12px) saturate(145%);
  box-shadow: var(--optical-shadow);
}
#handoff-overlay .handoff-title { color: var(--optical-ink); }

/* ==========================================================================
   Demo bottom control bar — only for demo accounts (DEMO | game | Q | mm:ss | Jump)
   Matches clipboard_image_2026-08-11: pill bar, lime Jump, neural band focus
   ========================================================================== */
#demo-bar {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  padding: 4px 12px;
  z-index: 50;
}
#demo-bar.hidden { display: none !important; }

/* When demo bar is visible (not hidden), the watching screen is ~44px shorter.
   Compact the optical content so question + ride/fade + stake + lock all fit. */
#demo-bar:not(.hidden) ~ footer { display: none; }

/* --- Demo-active compaction: ~64px less vertical space --- */
#app:has(#demo-bar:not(.hidden)) .optical-topbar { padding: 2px 10px; min-height: 0; }
#app:has(#demo-bar:not(.hidden)) .optical-scoreboard { display: none; }
#app:has(#demo-bar:not(.hidden)) .optical-score { font-size: 24px; }
#app:has(#demo-bar:not(.hidden)) .optical-clock { font-size: 12px; }
#app:has(#demo-bar:not(.hidden)) .optical-experience { inset: 78px 24px 8px !important; }
#app:has(#demo-bar:not(.hidden)) .optical-opportunity { padding: 4px 10px; overflow: visible; grid-template-rows: auto auto auto; }
#app:has(#demo-bar:not(.hidden)) .optical-opportunity-top { gap: 6px; }
#app:has(#demo-bar:not(.hidden)) .optical-muse-chip { min-height: 20px; font-size: 8px; padding: 0 6px; }
#app:has(#demo-bar:not(.hidden)) .optical-q { font-size: 20px !important; line-height: 1.25; margin: 4px 0 2px; }
#app:has(#demo-bar:not(.hidden)) .optical-call-line { margin-top: 4px; gap: 6px; }
#app:has(#demo-bar:not(.hidden)) .optical-call { font-size: 15px; }
#app:has(#demo-bar:not(.hidden)) .optical-confidence { font-size: 11px; }
#app:has(#demo-bar:not(.hidden)) .optical-reason { margin-top: 2px; font-size: 11px; }
#app:has(#demo-bar:not(.hidden)) .optical-choices { gap: 8px !important; margin-top: 8px !important; }
#app:has(#demo-bar:not(.hidden)) .optical-choice { min-height: 44px !important; padding: 6px 8px !important; }
#app:has(#demo-bar:not(.hidden)) .optical-choice b { font-size: 13px !important; }
#app:has(#demo-bar:not(.hidden)) .optical-choice small { font-size: 9px !important; }
#app:has(#demo-bar:not(.hidden)) .optical-stake-row { margin-top: 2px !important; gap: 12px !important; }
#app:has(#demo-bar:not(.hidden)) .optical-stake { min-width: 32px !important; min-height: 0 !important; padding: 3px 10px !important; font-size: 11px !important; height: 26px !important; }
#app:has(#demo-bar:not(.hidden)) .optical-lock { min-height: 0 !important; margin-top: 1px !important; padding: 4px 8px !important; font-size: 11px !important; }
#app:has(#demo-bar:not(.hidden)) .optical-timer-bar-wrap { margin-top: 1px; height: 3px; }
#app:has(#demo-bar:not(.hidden)) .optical-timer-bar-wrap { margin-top: 2px; }
#app:has(#demo-bar:not(.hidden)) .optical-orb-wrap { width: 138px; height: 138px; top: 48px; left: 50%; transform: translateX(-50%); }
#app:has(#demo-bar:not(.hidden)) .optical-orb-halo { inset: 8px; }
#app:has(#demo-bar:not(.hidden)) .optical-orb-halo::after { inset: 13px; }
#app:has(#demo-bar:not(.hidden)) .optical-orb-mount { width: 64px; height: 64px; }
#app:has(#demo-bar:not(.hidden)) .optical-ambient-copy { margin-top: 196px; }
#app:has(#demo-bar:not(.hidden)) .optical-ambient-copy h2 { font-size: 18px; margin: 0; }
#app:has(#demo-bar:not(.hidden)) .optical-ambient-copy p { font-size: 12px; }
#app:has(#demo-bar:not(.hidden)) .optical-thinking-lines { top: 86px; }
#app:has(#demo-bar:not(.hidden)) .optical-locked-card,
#app:has(#demo-bar:not(.hidden)) .optical-result-card { padding: 14px 18px; }
#app:has(#demo-bar:not(.hidden)) .optical-lock-mark,
#app:has(#demo-bar:not(.hidden)) .optical-result-mark { width: 34px; height: 34px; }
#app:has(#demo-bar:not(.hidden)) .optical-footer { display: none !important; }
#app:has(#demo-bar:not(.hidden)) .optical-watching[data-visual-state="expired"] .optical-hintbar,
#app:has(#demo-bar:not(.hidden)) .optical-watching[data-visual-state="idle"] .optical-hintbar,
#app:has(#demo-bar:not(.hidden)) .optical-watching[data-visual-state="thinking"] .optical-hintbar,
#app:has(#demo-bar:not(.hidden)) .optical-watching[data-visual-state="locked"] .optical-hintbar,
#app:has(#demo-bar:not(.hidden)) .optical-watching[data-visual-state="result"] .optical-hintbar { display: none !important; }
#app:has(#demo-bar:not(.hidden)) .optical-question { padding: 0 2px 2px; }
#app:has(#demo-bar:not(.hidden)) .optical-question .optical-context { margin: 0 0 2px; font-size: 9px; }
#app:has(#demo-bar:not(.hidden)) .optical-timer-ring { width: 24px; height: 24px; }
#app:has(#demo-bar:not(.hidden)) .optical-expired-card { gap: 10px; padding: 20px 12px; min-height: 180px; justify-content: center; }
#app:has(#demo-bar:not(.hidden)) .optical-expired-icon { display: none !important; }
#app:has(#demo-bar:not(.hidden)) .optical-expired-text { font-size: 16px !important; margin-top: 8px; }
#app:has(#demo-bar:not(.hidden)) #optical-orb-expired { width: 56px !important; height: 56px !important; }
#app:has(#demo-bar:not(.hidden)) .optical-ambient-copy { margin-top: 196px; } /* keep ambient fix */

/* Compact demo bar — same width as old, no scroll */
.demo-bar-inner {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  background: rgba(14, 14, 14, 0.96);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
  max-width: 560px;
  width: 100%;
  overflow: hidden;
  flex-wrap: nowrap;
  justify-content: center;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.demo-host-transition {
  position: fixed;
  left: 50%;
  bottom: 42px;
  z-index: 90;
  transform: translateX(-50%);
  max-width: 440px;
  padding: 8px 14px;
  border: 1px solid rgba(122, 240, 240, 0.35);
  border-radius: 999px;
  background: rgba(14, 14, 14, 0.94);
  color: #bffafa;
  font-family: var(--pulse-font-mono);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}

.demo-label {
  font-family: var(--pulse-font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.10em;
  color: #7AF0F0;
  padding: 0 2px;
  text-transform: uppercase;
  flex-shrink:0;
}

.demo-sep {
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,0.12);
  flex-shrink: 0;
}

.demo-pill {
  font-family: var(--pulse-font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--pulse-text-100);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: 3px 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  outline: none;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink:0;
}

.demo-pill:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.20);
}

.demo-pill.focused,
.demo-pill:focus {
  border-color: #C6FF00;
  box-shadow: 0 0 0 2px rgba(198,255,0,0.25), 0 0 12px rgba(198,255,0,0.15);
  background: rgba(255,255,255,0.12);
}

.demo-pill.game-pill {
  min-width: 80px;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size:9px;
}

.demo-pill.quarter-pill {
  width: 28px;
  min-width:28px;
  padding: 2px 0;
  background: rgba(255,255,255,0.04);
  border-radius: 50%;
  font-size:9px;
}

.demo-clock-group {
  display: flex;
  align-items: center;
  gap: 1px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: 1px;
}

.demo-clock-group .clock-pill {
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 2px 5px;
  min-height: 20px;
  min-width: 22px;
  font-size:9px;
}

.demo-clock-group .clock-pill:hover {
  background: rgba(255,255,255,0.10);
}

.demo-clock-group .clock-pill.focused {
  background: rgba(255,255,255,0.14);
}

.demo-colon {
  font-family: var(--pulse-font-mono);
  font-weight: 800;
  color: var(--pulse-text-400);
  padding: 0 1px;
  font-size:9px;
}

.demo-pill.jump-pill {
  background: #D6FF00;
  color: #0A0A0A;
  border-color: #D6FF00;
  font-weight: 900;
  padding: 3px 10px;
  font-size:9px;
  box-shadow: 0 0 8px rgba(214,255,0,0.25);
}

.demo-pill.jump-pill:hover {
  background: #deff33;
  transform: scale(1.02);
}

.demo-pill.jump-pill:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.demo-pill.jump-pill.focused {
  box-shadow: 0 0 0 2px rgba(214,255,0,0.45), 0 0 16px rgba(214,255,0,0.3);
}

.demo-dropdown {
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(14,14,14,0.98);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  padding: 8px;
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 280px;
  max-width: 90%;
  box-shadow: 0 12px 32px rgba(0,0,0,0.6);
  z-index: 60;
}

.demo-dropdown.hidden { display: none !important; }

.demo-game-option {
  font-family: var(--pulse-font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--pulse-text-100);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  transition: all 0.12s;
}

.demo-game-option:hover {
  border-color: rgba(198,255,0,0.3);
  background: rgba(255,255,255,0.08);
}

.demo-game-option.active {
  border-color: #C6FF00;
  background: rgba(198,255,0,0.12);
  color: #C6FF00;
}

/* Curated question jump mode */
.demo-time-group.hidden { display: none !important; }
/* Curated question mode — compact to fit same width as old bar, no scroll */
.demo-time-group { display: flex; align-items: center; gap: 2px; }
.demo-time-group.hidden { display: none !important; }
.demo-time-group.compact { gap:2px; }
.demo-time-group.compact .demo-pill.quarter-pill { width:28px; min-width:28px; font-size:9px; padding:2px 0; }
.demo-time-group.compact .demo-clock-group .clock-pill { min-width:22px; min-height:20px; padding:2px 5px; font-size:9px; }
.demo-time-group.compact .demo-pill.jump-pill { padding:3px 8px; font-size:9px; min-height:20px; }

.demo-pill.type-pill {
  background: rgba(0,245,255,0.08);
  border-color: rgba(0,245,255,0.25);
  color: var(--pulse-cyan);
  min-width: 40px;
  max-width:52px;
  font-size:9px;
  padding:3px 6px;
  min-height:20px;
}
.demo-pill.type-pill:hover { background: rgba(0,245,255,0.14); }

.demo-pill.prev-pill, .demo-pill.next-pill {
  background: rgba(198,255,0,0.08);
  border-color: rgba(198,255,0,0.25);
  color: var(--pulse-lime);
  font-weight:800;
  min-width:68px;
  max-width:76px;
  font-size:9px;
  padding:3px 6px;
  min-height:20px;
}
.demo-pill.prev-pill:hover, .demo-pill.next-pill:hover { background: rgba(198,255,0,0.14); }

.demo-question-info {
  font-family: var(--pulse-font-mono);
  font-size:9px;
  color: var(--pulse-text-100);
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:999px;
  padding:3px 8px;
  min-width:130px;
  max-width:180px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:center;
  flex-shrink:0;
}

/* ==========================================================================
   Shared Live — Contract 7 (SLP-S3) — participant, social, result, leaderboard
   Compact, readable in 600x600 safe area, focus-visible for glasses D-pad.
   ========================================================================== */
.room-count-indicator {
  margin-top: 10px;
  font-family: var(--pulse-font-mono);
  font-size: 13px;
  color: var(--pulse-text-400);
  text-align: center;
  min-height: 18px;
}
.room-count-indicator b { color: var(--pulse-text-100); font-weight: 800; }

.social-split {
  margin-top: 12px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  overflow: hidden;
}
.social-split.hidden { display: none !important; }
.social-split-row {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  font-family: var(--pulse-font-mono);
  font-size: 11px;
  line-height: 1;
}
.social-split-row .label {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.social-split-row.ride .label { color: var(--pulse-lime); }
.social-split-row.fade .label { color: var(--pulse-cyan); }
.social-split-row.pending .label { color: var(--pulse-text-400); }
.social-split-row.missed .label { color: var(--pulse-danger); }
.social-split-row .names {
  min-width: 0;
  max-width: 110px;
  color: var(--pulse-text-100);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.social-split-empty { color: var(--pulse-text-400); font-style: italic; font-size: 13px; }

.room-leaderboard-btn {
  margin-top: 12px;
  width: 100%;
  min-height: 44px;
  max-height: 44px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--pulse-font-mono);
  border-radius: 999px;
  flex-shrink: 0;
}
.room-leaderboard-btn:focus-visible {
  outline: none;
  border-color: var(--pulse-lime);
  box-shadow: 0 0 0 2px rgba(198,255,0,0.35), 0 0 18px rgba(198,255,0,0.18);
}

.pre-result-leaderboard,
#room-count-locked,
#room-count-expired {
  display: none !important;
}

/* Ensure locked/resolved/expired content fits inside 600x600 safe zone without footer overlap — measured fix: button ended 544.8px vs footer 537.8px */
#prop-locked, #prop-resolved, #prop-expired {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  overflow: hidden;
  gap: 0;
  padding-bottom: 4px;
}

/* NBA-07 correction (CI 38617004051 / local overlap): at 600x600 the
   resolved stack (result card + Full Leaderboard trigger) must end above
   the hint-bar band instead of sliding under it, where the hint bar
   intercepts the trigger's clicks. Capping the section 48px above the
   prop-area bottom keeps the trigger physically clickable while the card
   keeps its existing flex-shrink/overflow behavior. Placed after the base
   rule so equal specificity resolves here. */
@media (max-width: 650px) {
  #prop-resolved { max-height: calc(100% - 48px); }
}

/* Prediction states are deliberately non-scrolling on glasses. Details move
   to the dedicated leaderboard screen after resolution. */
.optical-locked-card, .optical-result-card, .optical-expired-card {
  max-height: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 18px;
  flex-shrink: 1;
}

.optical-lock-mark {
  width: 34px;
  height: 34px;
  font-size: 18px;
}
.optical-locked-card h1,
.optical-result-card h1 {
  margin-top: 8px;
  font-size: 20px;
}
.optical-locked-card .optical-locked-q,
.optical-result-play {
  max-width: 420px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.optical-lock-timer { margin-top: 10px; }
.optical-locked-hint { margin-top: 6px; }

/* Detailed stats and ranking belong on the full leaderboard, not the result
   card competing with the primary outcome. */
#prop-resolved .room-result-meta,
#prop-resolved .room-ranking-preview {
  display: none !important;
}
#open-leaderboard-resolved {
  min-height: 38px;
  max-height: 38px;
  margin-top: 8px;
}

.room-result-meta {
  margin-top: 12px;
  font-family: var(--pulse-font-mono);
  font-size: 13px;
  color: var(--pulse-text-400);
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}
.room-result-meta .result-line { display: flex; justify-content: space-between; font-size: 13px; }
.room-result-meta .result-line b { color: var(--pulse-text-100); }

.room-ranking-preview {
  margin-top: 12px;
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 12px;
  font-family: var(--pulse-font-mono);
  font-size: 13px;
  text-align: left;
  max-height: 110px;
  overflow-y: auto;
}
.room-ranking-preview .preview-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--pulse-text-400);
  margin-bottom: 6px;
}
.room-ranking-preview .mini-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  font-size: 13px;
}
.room-ranking-preview .mini-row.you { color: var(--pulse-lime); font-weight: 800; }

.room-idle-meta {
  margin-top: 12px;
  text-align: center;
  font-family: var(--pulse-font-mono);
  font-size: 13px;
  color: var(--pulse-text-400);
}
.room-idle-meta.hidden { display: none !important; }

/* Leaderboard screen — glasses-first podium view. Operational room identifiers,
   revisions, environment labels, and wallet language stay out of the UI. */
#leaderboard-screen {
  background:
    radial-gradient(circle at 78% 10%, rgba(0,245,255,0.055), transparent 240px),
    linear-gradient(135deg, #090b09, #111510);
}
.leaderboard-screen-inner {
  padding: 14px 18px 12px;
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 9px;
  overflow: hidden;
  max-width: 480px;
  margin: 0 auto;
}
.leaderboard-header {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.leaderboard-header .icon-button {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 10px;
}
.leaderboard-brand {
  color: var(--pulse-text-100);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -.04em;
}
.leaderboard-screen-label {
  color: var(--pulse-text-400);
  font: 700 9px/1 var(--pulse-font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.leaderboard-mode-chip {
  margin-left: auto;
  min-height: 25px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(0,245,255,.22);
  border-radius: 999px;
  color: var(--pulse-cyan);
  background: rgba(0,245,255,.07);
  font: 700 9px/1 var(--pulse-font-mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.leaderboard-mode-chip.live {
  color: var(--pulse-lime);
  border-color: rgba(198,255,0,.22);
  background: rgba(198,255,0,.07);
}
.leaderboard-mode-chip .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}
.leaderboard-room-meta {
  min-height: 12px;
  padding: 0 2px;
  text-align: right;
  color: var(--pulse-text-400);
  font: 600 9px/1 var(--pulse-font-mono);
  letter-spacing: .04em;
}
.leaderboard-hero {
  min-height: 78px;
  padding: 3px 2px 10px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.leaderboard-eyebrow {
  color: var(--pulse-lime);
  font: 750 9px/1 var(--pulse-font-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.leaderboard-hero h1 {
  margin: 7px 0 0;
  color: var(--pulse-text-100);
  font-size: 25px;
  line-height: 1;
  letter-spacing: -.04em;
}
.leaderboard-hero p {
  margin: 6px 0 0;
  color: var(--pulse-text-400);
  font-size: 11px;
}
.leaderboard-place {
  flex: none;
  text-align: right;
}
.leaderboard-place b {
  display: block;
  color: var(--pulse-lime);
  font: 800 38px/.9 var(--pulse-font-mono);
  letter-spacing: -.08em;
}
.leaderboard-place span {
  display: block;
  margin-top: 7px;
  color: var(--pulse-text-400);
  font: 650 8px/1 var(--pulse-font-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.leaderboard-muse-card {
  min-height: 34px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.055);
  font-family: var(--pulse-font-mono);
  font-size: 9px;
  color: var(--pulse-text-400);
}
.leaderboard-muse-card b { color: var(--pulse-lime); }
.leaderboard-muse-card .muse-title {
  color: var(--pulse-text-400);
  font-size: 9px;
  font-weight: 600;
}
.leaderboard-list-card {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0 2px;
  margin: 0;
}
.leaderboard-list { display: flex; flex-direction: column; gap: 8px; }
.leaderboard-row {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 10px 13px;
  background: rgba(255,255,255,.035);
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,.08);
  font-family: var(--pulse-font-mono);
}
.leaderboard-row.you {
  border-color: rgba(198,255,0,.38);
  background: rgba(198,255,0,.07);
  box-shadow: inset 3px 0 var(--pulse-lime);
}
.leaderboard-row:focus-visible {
  outline: none;
  border-color: var(--pulse-lime);
  box-shadow: 0 0 0 2px rgba(198,255,0,0.22);
}
.leaderboard-rank { color: var(--pulse-text-300); font-size: 14px; font-weight: 900; }
.leaderboard-row.you .leaderboard-rank { color: var(--pulse-lime); }
.leaderboard-name {
  min-width: 0;
  color: var(--pulse-text-100);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 750;
}
.leaderboard-name small {
  display: block;
  margin-top: 5px;
  color: var(--pulse-text-400);
  font-size: 9px;
  font-weight: 500;
}
.leaderboard-stats { text-align: right; }
.leaderboard-net {
  display: block;
  color: var(--pulse-text-100);
  font-size: 15px;
  font-weight: 800;
}
.leaderboard-net.positive { color: var(--pulse-lime); }
.leaderboard-net-label {
  display: block;
  margin-top: 5px;
  color: var(--pulse-text-400);
  font-size: 8px;
  font-weight: 500;
}
.leaderboard-empty {
  padding: 28px 18px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  color: var(--pulse-text-400);
  text-align: center;
  font-size: 12px;
}
.leaderboard-actions { flex-shrink: 0; }
.leaderboard-actions .secondary-button { min-height: 40px; }

@media (max-width: 650px) {
  .social-split-row { font-size: 13px; }
  .leaderboard-screen-inner { padding: 10px 14px 8px; }
  .leaderboard-row { min-height: 58px; padding: 9px 11px; }
}