/* APP NAMESPACE: Strict overrides to prevent Astra Theme interference */
#signal-test-app {
  --bg: #3B5F98;
  --bg-card: #2F4F85;
  --bg-secondary: #5E7FB0;
  --border: #4A6BA6;
  --text-primary: #FFFFFF;
  --text-secondary: #E6E6E6;
  --text-tertiary: #D0D0D0;
  --accent: #D4AF37;
  --accent-dim: #C9A23A;
  --accent-bg: #1E3A5F;
  --green: #059669;
  --green-bg: #ecfdf5;
  --yellow: #E5C158;
  --yellow-bg: #2A2A2A;
  --red: #dc2626;
  --red-bg: #fef2f2;
  --purple: #7c3aed;
  --teal: #0d9488;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --font-sans: var(--fh);
  --font-display: var(--fdisplay);

  font-family: var(--font-sans) !important;
  background-color: var(--bg) !important;
  color: var(--text-primary) !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 20px 16px 80px !important;
  box-sizing: border-box !important;
  -webkit-font-smoothing: antialiased !important;
  line-height: 1.5 !important;
}

#signal-test-app *, #signal-test-app *::before, #signal-test-app *::after { box-sizing: border-box !important; }
#signal-test-app p, #signal-test-app h1, #signal-test-app h2, #signal-test-app h3, #signal-test-app ul, #signal-test-app li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
#signal-test-app a { text-decoration: none !important; }
#signal-test-app button { appearance: none !important; outline: none !important; border: none !important; font-family: inherit !important; }
#signal-test-app i { line-height: 1 !important; display: inline-flex !important; align-items: center !important; }

#signal-test-app .topbar { width: 100% !important; max-width: 680px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 24px 0 0 !important; margin-bottom: 24px !important; }
#signal-test-app .topbar-brand { font-weight: 700 !important; font-size: 14px !important; color: var(--text-primary) !important; display: flex !important; align-items: center !important; gap: 6px !important; }

#signal-test-app .hud { display: none; width: 100% !important; max-width: 680px !important; background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-sm) !important; padding: 16px !important; margin-bottom: 32px !important; grid-template-columns: repeat(4, 1fr) !important; gap: 12px !important; animation: slideDown 0.4s ease !important; }
#signal-test-app .hud.active { display: grid !important; }
#signal-test-app .hud-stat { display: flex !important; flex-direction: column !important; gap: 4px !important; padding-right: 12px !important; border-right: 1px solid var(--border) !important; }
#signal-test-app .hud-stat:last-child { border-right: none !important; padding-right: 0 !important; }
#signal-test-app .hud-stat-label { font-size: 10px !important; font-weight: 700 !important; color: var(--text-tertiary) !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; display: flex !important; align-items: center !important; gap: 4px !important; }
#signal-test-app .hud-stat-value { font-weight: 800 !important; font-size: 18px !important; color: var(--text-primary) !important; display: flex !important; align-items: center !important; gap: 4px !important; }
#signal-test-app .stat-bar-container { width: 100% !important; height: 6px !important; background: var(--bg-secondary) !important; border-radius: 3px !important; overflow: hidden !important; margin-top: 4px !important;}
#signal-test-app .stat-bar-fill { height: 100% !important; transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.6s !important; width: 0% !important; }

#signal-test-app .game-wrap { width: 100% !important; max-width: 680px !important; position: relative !important; text-align: left !important; }
#signal-test-app .screen { display: none; }
#signal-test-app .screen.active { display: block !important; animation: fadeUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) both !important; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-15px); } to { opacity: 1; transform: translateY(0); } }

#signal-test-app .badge { display: inline-flex !important; align-items: center !important; gap: 4px !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; border-radius: 99px !important; padding: 6px 12px !important; }
#signal-test-app .badge-accent { background: var(--accent-bg) !important; color: var(--accent) !important; border: 1px solid rgba(212, 175, 55, 0.3) !important; }
#signal-test-app .badge-neutral { background: var(--bg-secondary) !important; color: var(--text-secondary) !important; border: 1px solid var(--border) !important; }

#signal-test-app .game-title { font-size: 52px !important; font-weight: 800 !important; line-height: 1.1 !important; color: var(--text-primary) !important; margin: 16px 0 16px !important; letter-spacing: -0.04em !important; font-family: var(--font-display) !important; }
#signal-test-app .game-subtitle { font-size: 18px !important; color: var(--text-secondary) !important; line-height: 1.5 !important; margin-bottom: 32px !important; max-width: 580px !important; font-weight: 500 !important; }
#signal-test-app .scene-title { font-size: 32px !important; font-weight: 800 !important; color: var(--text-primary) !important; margin-bottom: 24px !important; line-height: 1.2 !important; letter-spacing: -0.02em !important; font-family: var(--font-display) !important; }

#signal-test-app .base-card { background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-md) !important; padding: 32px !important; margin-bottom: 32px !important; }
#signal-test-app .intro-card { border-left: 5px solid var(--accent) !important; }
#signal-test-app .situation-list { display: flex !important; flex-direction: column !important; gap: 16px !important; }
#signal-test-app .situation-item { display: flex !important; gap: 12px !important; align-items: flex-start !important; }
#signal-test-app .sit-icon { background: var(--accent-bg) !important; color: var(--accent) !important; width: 32px !important; height: 32px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; font-size: 18px !important; }
#signal-test-app .sit-text { font-size: 15px !important; line-height: 1.6 !important; color: var(--text-secondary) !important; font-weight: 400 !important; }
#signal-test-app .sit-text strong { color: var(--text-primary) !important; font-weight: 700 !important; }

#signal-test-app .btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: 100% !important; font-size: 18px !important; font-weight: 700 !important; border-radius: var(--radius-md) !important; padding: 20px !important; cursor: pointer !important; touch-action: manipulation !important; transition: all 0.2s ease !important; text-decoration: none !important; }
#signal-test-app .start-btn { background: var(--accent) !important; color: #2A2A2A !important; box-shadow: 0 4px 12px rgba(212, 175, 55, 0.35) !important; }
#signal-test-app .start-btn:hover { background: var(--accent-dim) !important; transform: translateY(-2px) !important; box-shadow: 0 6px 16px rgba(212, 175, 55, 0.45) !important; }
#signal-test-app .continue-btn { background: var(--text-primary) !important; color: var(--bg) !important; font-size: 16px !important; box-shadow: var(--shadow-md) !important; }
#signal-test-app .continue-btn:hover { background: var(--accent) !important; transform: translateY(-2px) !important; }
#signal-test-app .replay-btn { background: var(--bg-card) !important; border: 1px solid var(--border) !important; color: var(--text-primary) !important; margin-top: 32px !important; font-size: 15px !important; padding: 14px 28px !important; }
#signal-test-app .replay-btn:hover { background: var(--bg-secondary) !important; transform: translateY(-2px) !important; }

#signal-test-app .choice-btn { display: flex !important; align-items: center !important; gap: 16px !important; width: 100% !important; text-align: left !important; background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important; padding: 20px !important; margin-bottom: 12px !important; cursor: pointer !important; touch-action: manipulation !important; transition: all 0.2s ease !important; box-shadow: var(--shadow-sm) !important; }
#signal-test-app .choice-btn:hover { border-color: var(--accent) !important; background: var(--accent-bg) !important; transform: translateY(-2px) !important; box-shadow: var(--shadow-md) !important; }
#signal-test-app .choice-icon-wrap { flex-shrink: 0 !important; width: 40px !important; height: 40px !important; border-radius: 10px !important; background: var(--bg-secondary) !important; border: 1px solid var(--border) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 20px !important; color: var(--text-secondary) !important; transition: all 0.2s !important; }
#signal-test-app .choice-btn:hover .choice-icon-wrap { background: var(--accent) !important; color: #ffffff !important; border-color: var(--accent) !important; }
#signal-test-app .choice-text { font-size: 15px !important; font-weight: 600 !important; line-height: 1.5 !important; color: var(--text-primary) !important; display: block !important; }
#signal-test-app .choice-subtext { font-size: 13px !important; font-weight: 400 !important; color: var(--text-secondary) !important; margin-top: 4px !important; display: block !important; }

#signal-test-app .mechanics-grid { display: none !important; }
#signal-test-app .mechanic-item { background: var(--bg-secondary) !important; border-radius: var(--radius-md) !important; padding: 16px !important; display: flex !important; align-items: center !important; gap: 12px !important; }
#signal-test-app .mechanic-icon { font-size: 28px !important; }
#signal-test-app .mechanic-text h4 { font-size: 13px !important; font-weight: 700 !important; color: var(--text-primary) !important; margin-bottom: 2px !important; }
#signal-test-app .mechanic-text p { font-size: 11px !important; color: var(--text-secondary) !important; font-weight: 400 !important; line-height: 1.3 !important; }

#signal-test-app .quick-facts { display: flex !important; flex-direction: column !important; gap: 12px !important; margin-bottom: 24px !important; padding-bottom: 20px !important; border-bottom: 1px dashed var(--border) !important; }
#signal-test-app .fact-row { display: flex !important; align-items: center !important; gap: 10px !important; font-size: 15px !important; color: var(--text-secondary) !important; font-weight: 500 !important; }
#signal-test-app .fact-row i { color: var(--accent) !important; font-size: 18px !important; }

#signal-test-app .chat-container { display: flex !important; flex-direction: column !important; gap: 8px !important; }
#signal-test-app .chat-sender { font-size: 13px !important; font-weight: 700 !important; color: var(--text-primary) !important; display: flex !important; align-items: center !important; gap: 8px !important; }
#signal-test-app .sender-avatar { width: 24px !important; height: 24px !important; border-radius: 50% !important; background: var(--bg-secondary) !important; border: 1px solid var(--border) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 14px !important; color: var(--text-tertiary) !important; }
#signal-test-app .chat-bubble { background: var(--bg-secondary) !important; border: 1px solid var(--border) !important; border-radius: 4px 16px 16px 16px !important; padding: 16px 20px !important; font-size: 16px !important; color: var(--text-primary) !important; line-height: 1.5 !important; position: relative !important; display: inline-block !important; max-width: 95% !important; margin-left: 12px !important; border-left: 3px solid var(--accent) !important; font-weight: 500 !important; }

#signal-test-app .feedback-card { border: 2px solid !important; }
#signal-test-app .fb-good { border-color: var(--green) !important; }
#signal-test-app .fb-partial { border-color: var(--yellow) !important; }
#signal-test-app .fb-miss { border-color: var(--red) !important; }
#signal-test-app .fb-critical { border-color: #000000 !important; background: #fff1f2 !important; }

#signal-test-app .fb-icon { font-size: 32px !important; vertical-align: middle !important; margin-right: 6px !important; }
#signal-test-app .fb-good .fb-icon { color: var(--green) !important; }
#signal-test-app .fb-partial .fb-icon { color: var(--yellow) !important; }
#signal-test-app .fb-miss .fb-icon { color: var(--red) !important; }
#signal-test-app .fb-critical .fb-icon { color: #000000 !important; }
#signal-test-app .feedback-verdict { font-size: 24px !important; font-weight: 800 !important; color: var(--text-primary) !important; letter-spacing: -0.01em !important; margin-bottom: 16px !important; display: flex !important; align-items: center !important;}

#signal-test-app .fb-body { display: none !important; }

#signal-test-app .fb-impact-pill { font-size: 13px !important; font-weight: 700 !important; padding: 8px 12px !important; border-radius: 6px !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; border: 1px solid !important; margin-bottom: 6px !important; margin-right: 6px !important; }

#signal-test-app .insight-box { background: var(--accent-bg) !important; border-radius: var(--radius-md) !important; padding: 24px !important; border-left: 4px solid var(--accent) !important; margin-top: 16px !important; }
#signal-test-app .insight-box p { font-size: 16px !important; font-weight: 600 !important; color: var(--text-primary) !important; line-height: 1.6 !important; }
#signal-test-app .insight-label { font-size: 11px !important; font-weight: 800 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; color: var(--accent-dim) !important; margin-bottom: 8px !important; display: flex !important; align-items: center !important; gap: 6px !important; }

#signal-test-app .report-header { text-align: center !important; margin-bottom: 32px !important; padding-bottom: 24px !important; border-bottom: 1px solid var(--border) !important; }
#signal-test-app .result-archetype { font-size: 36px !important; font-weight: 800 !important; color: var(--text-primary) !important; margin-bottom: 12px !important; letter-spacing: -0.02em !important; display: flex !important; flex-direction: column !important; align-items: center !important;}
#signal-test-app .result-desc { font-size: 16px !important; color: var(--text-secondary) !important; line-height: 1.6 !important; max-width: 500px !important; margin: 0 auto !important; font-weight: 500 !important; }

#signal-test-app .final-stats-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; margin-bottom: 32px !important; }
#signal-test-app .stat-card { background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important; padding: 20px !important; text-align: center !important; box-shadow: var(--shadow-sm) !important; }
#signal-test-app .stat-card-value { font-size: 36px !important; font-weight: 800 !important; margin-bottom: 4px !important; display: flex !important; justify-content: center !important; align-items: center !important; gap: 8px !important; color: var(--text-primary) !important; }
#signal-test-app .stat-card-label { font-size: 11px !important; color: var(--text-secondary) !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; font-weight: 700 !important; }

#signal-test-app .links-list { display: flex !important; flex-direction: column !important; gap: 8px !important; }
#signal-test-app .links-list li a { display: flex !important; align-items: center !important; gap: 12px !important; padding: 12px 16px !important; background: var(--bg-secondary) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important; font-size: 14px !important; font-weight: 600 !important; color: var(--text-primary) !important; transition: all 0.2s ease !important; }
#signal-test-app .links-list li a i { font-size: 18px !important; color: var(--accent) !important; }
#signal-test-app .links-list li a:hover { border-color: var(--accent) !important; background: var(--bg-card) !important; transform: translateX(4px) !important; }

@media (max-width: 640px) {
  #signal-test-app .hud { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
  #signal-test-app .hud-stat:nth-child(2) { border-right: none !important; padding-right: 0 !important; }
  #signal-test-app .hud-stat:nth-child(3) { border-right: 1px solid var(--border) !important; padding-right: 12px !important; }
  #signal-test-app .mechanics-grid { grid-template-columns: 1fr !important; }
  #signal-test-app .choice-btn { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
  #signal-test-app .stat-card-value { font-size: 28px !important; }
}

/* Username Input Screen */
#signal-test-app .username-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

#signal-test-app .username-input {
  width: 100% !important;
  padding: 12px 16px !important;
  font-size: 16px !important;
  border: 2px solid var(--border) !important;
  border-radius: 8px !important;
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  font-family: inherit !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

#signal-test-app .username-input:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15) !important;
}

#signal-test-app .username-input::placeholder {
  color: var(--text-tertiary) !important;
}

/* Share Section on Results Screen */
#signal-test-app .share-section {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
}

#signal-test-app .share-section h3 {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

#signal-test-app .share-buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

#signal-test-app .share-btn {
  padding: 12px 16px !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

#signal-test-app .share-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

#signal-test-app .share-btn-twitter {
  background: #1DA1F2 !important;
  color: white !important;
}

#signal-test-app .share-btn-twitter:hover {
  background: #1a8cd8 !important;
}

#signal-test-app .share-btn-linkedin {
  background: #0A66C2 !important;
  color: white !important;
}

#signal-test-app .share-btn-linkedin:hover {
  background: #084399 !important;
}

/* ============================================================
   WOW LAYER — animated meters, grade flash, momentum, card reveal
   ============================================================ */

/* Floating delta chips + stat flash on the HUD */
#signal-test-app .hud-stat { position: relative !important; }
#signal-test-app .hud-stat-flash { animation: statPulse 0.6s ease !important; }
@keyframes statPulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

#signal-test-app .delta-float {
  position: absolute !important;
  top: -4px !important;
  right: 0 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  padding: 2px 8px !important;
  border-radius: 99px !important;
  pointer-events: none !important;
  z-index: 30 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;
  animation: deltaFloat 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}
#signal-test-app .delta-good { background: var(--green) !important; color: #fff !important; }
#signal-test-app .delta-bad { background: var(--red) !important; color: #fff !important; }
@keyframes deltaFloat {
  0% { opacity: 0; transform: translateY(8px) scale(0.7); }
  20% { opacity: 1; transform: translateY(0) scale(1.1); }
  35% { transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-28px) scale(0.9); }
}

/* Grade flash overlay (A+ / C / F) */
#signal-test-app .grade-flash {
  position: fixed !important;
  inset: 0 !important;
  display: none !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  pointer-events: none !important;
  z-index: 9999 !important;
}
#signal-test-app .grade-flash.show { display: flex !important; }
#signal-test-app .grade-flash.fire {
  background: radial-gradient(circle at center, rgba(255,107,53,0.18), transparent 60%) !important;
}
#signal-test-app .grade-big {
  font-size: 180px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -0.04em !important;
  font-family: var(--font-display) !important;
  text-shadow: 0 10px 40px rgba(0,0,0,0.45) !important;
  animation: gradeSlam 1.05s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}
#signal-test-app .grade-a { color: #34d399 !important; }
#signal-test-app .grade-c { color: var(--accent) !important; }
#signal-test-app .grade-f { color: #f87171 !important; }
@keyframes gradeSlam {
  0% { opacity: 0; transform: scale(2.4) rotate(-8deg); }
  18% { opacity: 1; transform: scale(0.92) rotate(0deg); }
  30% { transform: scale(1.04); }
  42% { transform: scale(1); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.15); }
}
#signal-test-app .grade-streak {
  font-size: 22px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #fff !important;
  background: linear-gradient(135deg, #ff6b35, #ff3d3d) !important;
  padding: 10px 22px !important;
  border-radius: 99px !important;
  box-shadow: 0 8px 28px rgba(255,80,40,0.55) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  animation: streakPop 1.05s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}
#signal-test-app .grade-streak i { color: #ffe08a !important; }
@keyframes streakPop {
  0% { opacity: 0; transform: translateY(20px) scale(0.6); }
  30% { opacity: 1; transform: translateY(0) scale(1.12); }
  45% { transform: scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.05); }
}

@media (max-width: 640px) {
  #signal-test-app .grade-big { font-size: 120px !important; }
  #signal-test-app .grade-streak { font-size: 17px !important; }
}

/* ===== Live Commentary Box — Broadcast Booth (EA-style) ===== */
.commentary-box {
  position: fixed !important;
  right: 20px !important;
  bottom: 20px !important;
  z-index: 40 !important;
  width: 360px !important;
  max-width: calc(100vw - 32px) !important;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(108,99,255,0.18), transparent 60%),
    linear-gradient(160deg, rgba(28,44,77,0.92), rgba(16,24,42,0.96)) !important;
  backdrop-filter: blur(14px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 16px !important;
  box-shadow:
    0 18px 50px rgba(0,0,0,0.55),
    0 0 0 1px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
  padding: 14px 16px 16px !important;
  display: none !important;
  flex-direction: column !important;
  gap: 10px !important;
  font-family: var(--font-sans) !important;
  pointer-events: none !important;
  overflow: hidden !important;
}
.commentary-box::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 16px !important;
  padding: 1px !important;
  background: linear-gradient(135deg, var(--accent), transparent 40%, transparent 60%, #6c63ff) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
          mask-composite: exclude !important;
  opacity: 0.7 !important;
  pointer-events: none !important;
}
.commentary-box.on {
  display: flex !important;
  animation: comm-pop 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
@keyframes comm-pop {
  from { transform: translateY(44px) scale(0.95); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* shine sweep across the booth on entry */
.commentary-box .comm-shine {
  position: absolute !important;
  top: 0 !important; left: -60% !important;
  width: 50% !important; height: 100% !important;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.14), transparent) !important;
  transform: skewX(-18deg) !important;
  pointer-events: none !important;
}
.commentary-box.on .comm-shine { animation: comm-shine 1.1s ease-out 0.15s 1 !important; }
@keyframes comm-shine { from { left: -60%; } to { left: 160%; } }

.commentary-box .comm-mute {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 26px !important;
  height: 26px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.06) !important;
  color: var(--text-tertiary) !important;
  font-size: 13px !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: 2 !important;
  transition: color 0.15s, background 0.15s !important;
}
.commentary-box .comm-mute:hover { color: #fff !important; background: rgba(255,255,255,0.16) !important; }
.commentary-box.muted .comm-mute { color: var(--red) !important; }

/* header: ON AIR + show name */
.commentary-box .comm-head {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.commentary-box .comm-onair {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.14em !important;
  color: #fff !important;
  background: linear-gradient(135deg, #ff3b3b, #c61f1f) !important;
  padding: 3px 9px !important;
  border-radius: 5px !important;
  text-transform: uppercase !important;
  box-shadow: 0 0 14px rgba(255,59,59,0.5) !important;
}
.commentary-box .comm-onair-dot {
  width: 7px !important; height: 7px !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 0 6px #fff !important;
  animation: comm-blink 1.1s ease-in-out infinite !important;
}
@keyframes comm-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.2; } }
.commentary-box .comm-show {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--text-tertiary) !important;
}

.commentary-box .comm-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 11px !important;
  opacity: 0;
  transform: translateX(26px);
  border-radius: 10px !important;
  padding: 4px 6px !important;
  transition: background 0.25s !important;
}
.commentary-box .comm-row.crawl {
  animation: comm-crawl 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}
.commentary-box .comm-row.speaking { background: rgba(255,255,255,0.05) !important; }
@keyframes comm-crawl {
  from { transform: translateX(26px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* avatar with mic-level EQ overlay */
.commentary-box .comm-avatar {
  position: relative !important;
  flex: 0 0 auto !important;
  width: 32px !important; height: 32px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #fff !important;
  box-shadow: 0 0 0 0 rgba(255,255,255,0) !important;
  transition: box-shadow 0.25s !important;
}
.commentary-box .comm-av-buzz { background: linear-gradient(135deg, #ff8a4c, #cc5529) !important; }
.commentary-box .comm-av-vera { background: linear-gradient(135deg, #7b73ff, #5a4fcf) !important; }
.commentary-box .comm-row.speaking .comm-av-buzz { box-shadow: 0 0 0 3px rgba(255,138,76,0.35), 0 0 18px rgba(255,138,76,0.6) !important; }
.commentary-box .comm-row.speaking .comm-av-vera { box-shadow: 0 0 0 3px rgba(123,115,255,0.35), 0 0 18px rgba(123,115,255,0.6) !important; }
.commentary-box .comm-av-letter { transition: opacity 0.15s !important; }
.commentary-box .comm-row.speaking .comm-av-letter { opacity: 0 !important; }

.commentary-box .comm-eq {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  opacity: 0 !important;
  transition: opacity 0.15s !important;
}
.commentary-box .comm-row.speaking .comm-eq { opacity: 1 !important; }
.commentary-box .comm-eq i {
  display: block !important;
  width: 2.5px !important;
  height: 5px !important;
  border-radius: 2px !important;
  background: rgba(255,255,255,0.95) !important;
}
.commentary-box .comm-row.speaking .comm-eq i { animation: comm-eq 0.6s ease-in-out infinite !important; }
.commentary-box .comm-eq i:nth-child(1) { animation-delay: 0s !important; }
.commentary-box .comm-eq i:nth-child(2) { animation-delay: 0.15s !important; }
.commentary-box .comm-eq i:nth-child(3) { animation-delay: 0.3s !important; }
.commentary-box .comm-eq i:nth-child(4) { animation-delay: 0.45s !important; }
@keyframes comm-eq { 0%,100% { height: 4px; } 50% { height: 15px; } }

.commentary-box .comm-line {
  font-size: 13.5px !important;
  line-height: 1.45 !important;
  color: var(--text-primary) !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.commentary-box .comm-name {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  margin-bottom: 2px !important;
}
.commentary-box .comm-role {
  font-size: 8.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: var(--text-tertiary) !important;
  background: rgba(255,255,255,0.07) !important;
  padding: 1px 5px !important;
  border-radius: 3px !important;
}
.commentary-box .comm-text {
  display: block !important;
  font-weight: 500 !important;
  color: #eef1f7 !important;
}
.commentary-box .comm-text::after {
  content: "▌" !important;
  color: var(--accent) !important;
  opacity: 0 !important;
  margin-left: 1px !important;
}
.commentary-box .comm-row.speaking .comm-text::after {
  opacity: 1 !important;
  animation: comm-caret 0.7s steps(1) infinite !important;
}
@keyframes comm-caret { 50% { opacity: 0; } }

@media (max-width: 640px) {
  .commentary-box { right: 12px !important; left: 12px !important; bottom: 12px !important; width: auto !important; }
  /* fixed commentary box covers the bottom of the screen — give the active
     screen clearance so its action button (Continue) is never hidden behind it */
  #signal-test-app .commentary-box.on ~ .game-wrap { padding-bottom: 220px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .commentary-box .comm-eq i,
  .commentary-box.on .comm-shine,
  .commentary-box .comm-onair-dot { animation: none !important; }
}

/* ============================================================
   PALETTE SPICE LAYER — shared teal/coral/violet/amber accents
   layered over the navy + gold base for a livelier "game" feel.
   ============================================================ */
@keyframes air-shimmer { to { background-position: 220% center; } }
@keyframes air-cta-pulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(10, 182, 178, 0.38) !important; }
  50%      { box-shadow: 0 6px 30px rgba(124, 92, 252, 0.52) !important; }
}

/* hero / climax headings + key numbers -> shimmering multi-colour gradient */
#signal-test-app .game-title,
#signal-test-app #res-name,
#signal-test-app #res-score {
  background: linear-gradient(110deg, #0AB6B2 0%, #09C0A1 30%, #F4604B 68%, #7C5CFC 100%) !important;
  background-size: 220% auto !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #0AB6B2 !important;
  animation: air-shimmer 6s linear infinite !important;
}

/* primary CTA -> 3-colour gradient with a living glow */
#signal-test-app .start-btn {
  background: linear-gradient(120deg, #0AB6B2, #09C0A1 55%, #F4604B) !important;
  background-size: 180% auto !important;
  color: #fff !important;
  animation: air-cta-pulse 2.4s ease-in-out infinite !important;
  transition: transform 0.2s ease, background-position 0.4s ease, box-shadow 0.2s ease !important;
}
#signal-test-app .start-btn:hover {
  background: linear-gradient(120deg, #0AB6B2, #09C0A1 55%, #F4604B) !important;
  background-size: 180% auto !important;
  background-position: 100% center !important;
  transform: translateY(-2px) !important;
}

/* continue button -> violet -> teal sweep */
#signal-test-app .continue-btn {
  background: linear-gradient(120deg, #7C5CFC, #0AB6B2) !important;
  background-size: 180% auto !important;
  color: #fff !important;
  transition: transform 0.2s ease, background-position 0.4s ease !important;
}
#signal-test-app .continue-btn:hover {
  background: linear-gradient(120deg, #7C5CFC, #0AB6B2) !important;
  background-size: 180% auto !important;
  background-position: 100% center !important;
  transform: translateY(-2px) !important;
}

@media (prefers-reduced-motion: reduce) {
  #signal-test-app .game-title,
  #signal-test-app #res-name,
  #signal-test-app #res-score,
  #signal-test-app .start-btn { animation: none !important; }
}