/*
 * site.css
 * Master stylesheet for the Songs Guessing Game ("מי שר?").
 * Contains design tokens, global styles, shared components,
 * and styles for all 8 game screens.
 *
 * Design system: "Hot Pink Professional"
 *   - Background: #fafafa
 *   - Primary: #e91e63 (hot pink)
 *   - Font: Rubik (Hebrew + Latin)
 *   - RTL layout
 */

/* ═══════════════════════════════════════════════════
   Design tokens
   ═══════════════════════════════════════════════════ */

:root {
  /* Primary colors */
  --color-primary: #e91e63;
  --color-primary-dark: #c2185b;
  --color-primary-light: rgba(233, 30, 99, 0.15);
  --color-primary-bg: #fce4ec;
  --color-primary-border: #f8bbd0;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #e91e63, #c2185b);
  --gradient-primary-shadow: rgba(233, 30, 99, 0.3);

  /* Background / surface */
  --color-bg: #fafafa;
  --color-card: #fff;
  --color-card-border: #f0f0f0;
  --color-input-bg: #f8f8f8;

  /* Text */
  --color-text-primary: #222;
  --color-text-secondary: #555;
  --color-text-muted: #999;

  /* Semantic colors */
  --color-success: #2e7d32;
  --color-success-bg: #e8f5e9;
  --color-error: #c62828;
  --color-error-bg: #ffebee;
  --color-info: #1565c0;
  --color-info-bg: #e3f2fd;

  /* Accent colors */
  --color-purple-dark: #6a1b9a;
  --color-purple-bg: #f3e5f5;
  --color-green-dark: #2e7d32;
  --color-green-bg: #e8f5e9;

  /* Border radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 6px 30px rgba(0, 0, 0, 0.08);
}

/* ═══════════════════════════════════════════════════
   Global reset & body
   ═══════════════════════════════════════════════════ */

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  font-size: 16px;
  min-height: 100%;
}

body {
  font-family: 'Rubik', sans-serif;
  background: var(--color-bg);
  color: var(--color-text-primary);
  margin: 0;
  padding: 0;
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════════════════
   Screen container (shared across all screens)
   ═══════════════════════════════════════════════════ */

.screen {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
}

.screen-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 2rem 1.5rem;
}

/* ═══════════════════════════════════════════════════
   Decorative circles (pink background decorations)
   ═══════════════════════════════════════════════════ */

.deco {
  display: none;
}

.deco-1 { width: 160px; height: 160px; background: rgba(233,30,99,0.05); top: -40px; right: -40px; }
.deco-2 { width: 100px; height: 100px; background: rgba(233,30,99,0.04); top: 50px; right: 50px; }
.deco-3 { width: 200px; height: 200px; border: 2px solid rgba(233,30,99,0.05); bottom: -50px; left: -70px; }
.deco-4 { width: 80px; height: 80px; background: rgba(233,30,99,0.03); bottom: 120px; right: 20px; }

/* ═══════════════════════════════════════════════════
   Shared button styles
   ═══════════════════════════════════════════════════ */

.btn-primary {
  width: 100%;
  max-width: 20rem;
  padding: 0.875rem 1.5rem;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--gradient-primary);
  color: #fff;
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 4px 16px var(--gradient-primary-shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px var(--gradient-primary-shadow);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-primary svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: #fff;
}

.btn-outline {
  width: 100%;
  max-width: 20rem;
  padding: 0.875rem 1.5rem;
  border: 2px solid #e0e0e0;
  border-radius: var(--radius-pill);
  background: var(--color-card);
  color: var(--color-text-primary);
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.15s ease;
}

.btn-outline:hover {
  border-color: #ccc;
  background: #f9f9f9;
}

.btn-outline svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: var(--color-text-secondary);
}

/* ═══════════════════════════════════════════════════
   Quit button (X in top-left)
   ═══════════════════════════════════════════════════ */

/* Legacy circle quit button — kept for Setup and Final Results screens */
.quit-btn {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 10;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.05);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.quit-btn:hover { background: rgba(0, 0, 0, 0.1); }
.quit-btn svg { width: 0.875rem; height: 0.875rem; fill: #999; }

/* ── Game top actions — two matching text pills (יציאה + משחק חדש) ── */
.game-top-actions {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.game-top-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(0, 0, 0, 0.05);
  border: none;
  border-radius: 999px;
  padding: 0.3rem 0.65rem;
  font-family: 'Rubik', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  color: #666;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.game-top-btn:hover { background: rgba(0, 0, 0, 0.1); }

.game-top-btn svg {
  width: 0.75rem;
  height: 0.75rem;
  fill: #888;
}

/* Restart pill gets primary color tint */
.game-restart-btn {
  background: rgba(233, 30, 99, 0.08);
  color: var(--color-primary);
}

.game-restart-btn:hover { background: rgba(233, 30, 99, 0.15); }
.game-restart-btn svg { fill: var(--color-primary); }

/* ═══════════════════════════════════════════════════
   Share button (V1 — solid pink circle, top-right corner)
   Visible on every screen via _Layout.
   position: absolute so it never affects document flow.
   ═══════════════════════════════════════════════════ */
/* The .screen card is max-width: 480px and centered (margin: 0 auto).
   On narrow viewports (mobile) the card fills the whole viewport, so right: 0.85rem
   sticks the button to the screen edge as expected.
   On wide viewports (desktop) the card is centered with empty space on either side,
   so we calc the right offset as half the viewport minus half the card width plus
   the inner padding. The max() ensures we never go negative on narrow viewports.
   position: absolute — the share button mirrors the יציאה / משחק חדש pills
   on the LEFT (.game-top-actions): anchored to the top-right of the screen
   card and scrolls together with the page content, just like the left-side
   pills do. */
.share-btn {
  position: absolute;
  /* Vertical center alignment with the .game-top-btn pills on the LEFT.
     Pills are at top: 0.85rem with height ~1.55rem; circle is 1.75rem tall.
     top = 0.85rem + (pill_height - circle_height)/2 = 0.85 + (1.55 - 1.75)/2 = 0.75rem. */
  top: 0.75rem;
  right: max(0.85rem, calc(50vw - 240px + 0.85rem));
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 15;
  background: var(--color-primary);
  box-shadow: 0 2px 6px rgba(233, 30, 99, 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.share-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 3px 8px rgba(233, 30, 99, 0.5);
}
.share-btn:active { transform: scale(0.96); }
.share-btn svg {
  width: 0.85rem;
  height: 0.85rem;
  fill: #fff;
}

/* ═══════════════════════════════════════════════════
   Share dialog overlay
   Bottom-sheet on mobile, centered card on desktop.
   ═══════════════════════════════════════════════════ */
.share-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 42, 68, 0.55);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: share-fade-in 0.2s ease;
}
.share-overlay.hidden { display: none; }
@keyframes share-fade-in { from { opacity: 0; } to { opacity: 1; } }

.share-dialog {
  width: 100%;
  max-width: 26rem;
  background: #fff;
  border-radius: 1.5rem 1.5rem 0 0;
  padding: 1rem 1.25rem 1.5rem;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.2);
  position: relative;
  animation: share-slide-up 0.25s ease;
}
@keyframes share-slide-up {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@media (min-width: 768px) {
  .share-overlay { align-items: center; }
  .share-dialog { border-radius: 1.5rem; max-width: 28rem; }
}

.share-close {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  width: 1.75rem;
  height: 1.75rem;
  border: none;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.share-close:hover { background: rgba(0, 0, 0, 0.1); }
.share-close svg { width: 0.875rem; height: 0.875rem; fill: #6b7280; }

.share-handle {
  width: 2.5rem;
  height: 0.25rem;
  background: #e5e7eb;
  border-radius: 0.25rem;
  margin: 0 auto 0.875rem;
}

.share-title {
  text-align: center;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--color-text);
  margin-bottom: 0.25rem;
}
.share-sub {
  text-align: center;
  font-size: 0.8rem;
  color: #6b7280;
  margin-bottom: 1.25rem;
}

.share-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.share-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.25rem;
  border-radius: 0.75rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
}
.share-tile:hover { background: #f9fafb; text-decoration: none; }
.share-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.share-icon svg { width: 1.4rem; height: 1.4rem; fill: #fff; }
.share-icon.whatsapp { background: #25D366; }
.share-icon.telegram { background: #229ED9; }
.share-icon.facebook { background: #1877F2; }
.share-icon.twitter  { background: #000; }
.share-icon.sms      { background: #34c759; }
.share-icon.email    { background: #6b7280; }
.share-icon.copy     { background: #f3f4f6; }
.share-icon.copy svg { fill: #6b7280; }
.share-icon.native   { background: var(--color-primary); }
.share-name {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text);
  text-align: center;
  line-height: 1.2;
}

.share-link-row {
  display: flex;
  gap: 0.5rem;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 0.625rem;
  padding: 0.4rem 0.6rem;
  align-items: center;
}
.share-link-url {
  flex: 1;
  font-size: 0.78rem;
  color: var(--color-text);
  font-family: monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: ltr;
}
.share-link-copy {
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  padding: 0.35rem 0.85rem;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Rubik', sans-serif;
  white-space: nowrap;
}
.share-link-copy:hover { background: var(--color-primary-dark); }

/* ═══════════════════════════════════════════════════
   Final Results inline platform strip
   ═══════════════════════════════════════════════════ */
.fr-share-strip {
  width: 100%;
  max-width: 22rem;
  background: #fff;
  border: 1px solid #f3e5ec;
  border-radius: 0.875rem;
  padding: 0.65rem 0.85rem 0.75rem;
  margin: 0.5rem 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.fr-share-strip-label {
  text-align: center;
  font-size: 0.78rem;
  color: var(--color-text);
  font-weight: 700;
  margin-bottom: 0.45rem;
}
.fr-share-strip-row {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 0.4rem;
}
.fr-share-strip-row .share-tile {
  padding: 0.25rem;
  flex: 1;
}
.fr-share-strip-row .share-icon {
  width: 2.25rem;
  height: 2.25rem;
}
.fr-share-strip-row .share-icon svg {
  width: 1.1rem;
  height: 1.1rem;
}

/* ═══════════════════════════════════════════════════
   Quit Confirmation Dialog (Friendly Style)
   ═══════════════════════════════════════════════════ */

.quit-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 1.5rem;
  animation: quit-fade-in 0.2s ease-out;
}

@keyframes quit-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes quit-slide-up {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.quit-dialog {
  background: #fff;
  border-radius: 20px;
  padding: 1.5rem 1.25rem;
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  animation: quit-slide-up 0.25s ease-out;
}

.quit-dialog-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: #fef0f4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quit-dialog-icon svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: var(--color-primary);
}

.quit-dialog-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-text-primary);
}

.quit-dialog-text {
  font-size: 0.875rem;
  color: #222;
  text-align: center;
  line-height: 1.6;
}

.quit-dialog-buttons {
  display: flex;
  gap: 0.625rem;
  width: 100%;
}

.quit-btn-stay,
.quit-btn-exit {
  flex: 1;
  padding: 0.625rem;
  border-radius: 12px;
  border: none;
  font-family: 'Rubik', sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: transform 0.1s ease, opacity 0.1s ease;
}

.quit-btn-stay:active,
.quit-btn-exit:active {
  transform: scale(0.97);
}

.quit-btn-stay {
  background: var(--gradient-primary);
  color: #fff;
}

.quit-btn-exit {
  background: #fff;
  color: #c0392b;
  border: 1.5px solid #c0392b;
}

/* Restart dialog buttons — smaller font + no-wrap so longer labels ("התחל משחק חדש") fit on one line */
#restart-dialog-overlay .quit-btn-stay,
#restart-dialog-overlay .quit-btn-exit {
  font-size: 0.75rem;
  padding: 0.5rem 0.4rem;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════
   Card component
   ═══════════════════════════════════════════════════ */

.card {
  background: var(--color-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-card-border);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem;
  width: 100%;
}

/* ═══════════════════════════════════════════════════
   Section label (icon + text)
   ═══════════════════════════════════════════════════ */

.section-label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-primary);
  align-self: flex-start;
  margin-bottom: -0.5rem;
}

.section-label svg {
  width: 1rem;
  height: 1rem;
  fill: var(--color-primary);
}

/* ═══════════════════════════════════════════════════
   Mini scoreboard (bottom of screens)
   ═══════════════════════════════════════════════════ */

.mini-scoreboard {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-card-border);
  box-shadow: var(--shadow-sm);
  padding: 0.875rem 1.125rem;
}

.mini-sb-team {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.mini-sb-name {
  font-size: 0.75rem;
  font-weight: 700;
  color: #555;
}

.mini-sb-score {
  font-size: 1.75rem;
  font-weight: 900;
  color: #333;
}

.mini-sb-active .mini-sb-name { color: var(--color-primary); }
.mini-sb-active .mini-sb-score { color: var(--color-primary); }

.mini-sb-divider {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #ccc;
  padding: 0 0.5rem;
}

/* ═══════════════════════════════════════════════════
   Top bar (round badge + team badge) — shared
   ═══════════════════════════════════════════════════ */

.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 0.5rem;
}

.round-badge {
  background: var(--color-card);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.3125rem 0.75rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid #eee;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.round-badge-text { color: var(--color-text-muted); }
.round-badge-num { color: var(--color-primary); font-weight: 800; }

.team-badge {
  background: var(--color-primary-bg);
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.3125rem 0.75rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-primary-border);
  display: flex;
  align-items: center;
  gap: 0.3125rem;
}

.team-badge svg {
  width: 0.875rem;
  height: 0.875rem;
  fill: var(--color-primary);
}

/* ═══════════════════════════════════════════════════
   Equalizer animation
   ═══════════════════════════════════════════════════ */

.equalizer {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 2rem;
}

.equalizer.eq-large {
  height: 3rem;
  gap: 4px;
}

.eq-bar {
  width: 4px;
  border-radius: 2px;
  background: var(--color-primary);
  animation: eq-bounce 0.8s ease-in-out infinite alternate;
}

.eq-large .eq-bar { width: 5px; border-radius: 3px; }

@keyframes eq-bounce {
  0% { transform: scaleY(0.3); }
  100% { transform: scaleY(1); }
}

/* Equalizer — mockup style (used on home + song playing) */
@keyframes eq { 0%,100%{transform:scaleY(.35)} 50%{transform:scaleY(1)} }
.eq { display: flex; align-items: flex-end; gap: 5px; height: 36px; }
.eq .b { width: 6px; border-radius: 4px; animation: eq 1.3s ease-in-out infinite; }
.eq .b:nth-child(odd) { background: #e91e63; }
.eq .b:nth-child(even) { background: #f48fb1; }

/* Larger equalizer for song playing */
.eq-large { height: 56px; gap: 6px; }
.eq-large .b { width: 8px; border-radius: 5px; }

/* ═══════════════════════════════════════════════════
   Animations
   ═══════════════════════════════════════════════════ */

@keyframes ring-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
  50% { transform: translate(-50%, -50%) scale(1.06); opacity: 1; }
}

@keyframes card-appear {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes trophy-pop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes name-pop {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════
   Screen 1 — Home
   ═══════════════════════════════════════════════════ */

.home-screen .screen-content {
  justify-content: center;
  gap: 2rem;
}

/* Vinyl record logo — spinning disc with title in the center label */
.home-vinyl {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    #444 0%, #222 30%, #333 31%, #1a1a1a 60%, #333 61%, #222 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 8px 30px rgba(0,0,0,0.35), inset 0 0 30px rgba(0,0,0,0.3);
}

/* Center label — pink disc */
.home-vinyl::before {
  content: '';
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(145deg, #e91e63, #c2185b);
  position: absolute;
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.3);
}

/* Center hole */
.home-vinyl::after {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #1a1a1a;
  position: absolute;
}

/* Title text on vinyl center */
.home-vinyl-text {
  position: absolute;
  font-size: 1.25rem;
  font-weight: 900;
  color: #fff;
  z-index: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  letter-spacing: 1px;
  /* Keep the brand on a single horizontal line, perfectly centred on the
     vinyl. EN brand "Guess the Song" is wider than the original HE "מי שר?"
     so per-language font-size lives in i18n-overrides.css under [dir="ltr"]. */
  white-space: nowrap;
  text-align: center;
}

/* Hebrew slogan below vinyl */
.home-logo-slogan {
  font-size: 0.8125rem;
  color: #ad1457;
  text-align: center;
  letter-spacing: 2px;
  font-weight: 700;
}

.home-subtitle {
  font-size: 0.9375rem;
  color: #888;
  text-align: center;
  font-weight: 400;
  margin-top: -0.5rem;
}

/* ═══════════════════════════════════════════════════
   Screen 2 — Game Setup
   Matches approved mockup: screen_02_game_setup.html
   ═══════════════════════════════════════════════════ */

/* Header */
.setup-header {
  padding: 3rem 1.5rem 0.5rem; /* top padding clears the absolute quit button */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 1;
}

.setup-header-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #222;
}

/* Header actions row — side-by-side reset buttons */
.setup-header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Reset defaults pill button */
.reset-defaults-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1.5px solid #e0e0e0;
  background: #fff;
  font-family: 'Rubik', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #999;
  cursor: pointer;
  transition: all 0.15s ease;
}
.reset-defaults-pill svg {
  width: 13px;
  height: 13px;
  fill: #999;
}
.reset-defaults-pill:hover,
.reset-defaults-pill:active {
  border-color: #f48fb1;
  color: #e91e63;
}
.reset-defaults-pill:hover svg,
.reset-defaults-pill:active svg {
  fill: #e91e63;
}

/* Reset memory pill button — clears played songs/artists cookies */
.reset-memory-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1.5px solid #e0e0e0;
  background: #fff;
  font-family: 'Rubik', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #999;
  cursor: pointer;
  transition: all 0.15s ease;
}
.reset-memory-pill svg {
  width: 13px;
  height: 13px;
  fill: #999;
}
.reset-memory-pill:hover,
.reset-memory-pill:active {
  border-color: #ffb74d;
  color: #ef6c00;
}
.reset-memory-pill:hover svg,
.reset-memory-pill:active svg {
  fill: #ef6c00;
}

/* Inline feedback text below reset buttons */
.reset-feedback {
  font-size: 0.75rem;
  font-weight: 600;
  color: #4caf50;
  min-height: 1rem;
  transition: opacity 0.3s ease;
}

/* Scrollable form area */
.setup-scroll-area {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  z-index: 1;
}

/* Input card (white card container for form sections) */
.input-card {
  background: #fff;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  border: 1px solid #f0f0f0;
}

/* Two-column side-by-side inputs */
.input-row { display: flex; gap: 10px; }
.input-col { flex: 1; }
.input-label-mini {
  font-size: 10px;
  font-weight: 600;
  color: #666;
  margin-bottom: 4px;
  display: block;
}

/* ═══════════════════════════════════════════════════
   Multi-group team-names list (added 2026-05-23)
   At N=2 mirrors .input-row exactly (two columns
   side-by-side). At N>=3 the .vertical modifier
   stacks rows; rows 3+ get a × remove button.
   Typography/colors intentionally inherit from
   .input-label-mini and .text-input so the look is
   identical to the pre-multi-group UI.
   ═══════════════════════════════════════════════════ */
.team-names-list { display: flex; gap: 10px; }
.team-name-row   { flex: 1; position: relative; }
.team-names-list.vertical { flex-direction: column; gap: 10px; }
.team-names-list.vertical .team-name-row { flex: none; }
.team-names-list.vertical .team-name-row.removable { padding-left: 24px; }
.remove-team-btn {
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 1.5px solid #e0e0e0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -4px;
  z-index: 10;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  padding: 0;
}
.remove-team-btn svg { width: 12px; height: 12px; fill: #999; }
.add-team-btn {
  /* Mirror .add-range-btn exactly so the two "add another" buttons in Setup
     look + size + position identically (per user 2026-05-23: must be
     consistent with הוסף טווח שנים). */
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px; border-radius: 12px;
  border: 1.5px dashed #e0e0e0;
  background: #fff; cursor: pointer;
  font-family: 'Rubik', sans-serif;
  font-size: 12px; font-weight: 600; color: #999;
  transition: all 0.15s; margin-top: 8px;
}
.add-team-btn svg { width: 16px; height: 16px; fill: #999; }

/* Text input matching mockup */
.text-input {
  width: 100%;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1.5px solid #e8e8e8;
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  color: #333;
  background: #fafafa;
  outline: none;
  direction: rtl;
}
.text-input::placeholder { color: #bbb; }
.text-input:focus { border-color: #f48fb1; background: #fff; }

/* Language chip group */
.chip-group { display: flex; gap: 8px; }
.chip {
  flex: 1;
  padding: 10px 8px;
  border-radius: 12px;
  border: 1.5px solid #e8e8e8;
  background: #fff;
  font-family: 'Rubik', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #888;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
}
.chip.active {
  background: linear-gradient(135deg, #e91e63, #c2185b);
  border-color: #e91e63;
  color: #fff;
  box-shadow: 0 3px 10px rgba(233,30,99,0.2);
}

/* Year range — Stacked rows with dual-handle slider (Option C — Bubble) */
.range-stack { display: flex; flex-direction: column; gap: 10px; }
.range-row {
  background: #fafafa;
  border-radius: 12px;
  padding: 14px 16px 10px 30px;
  border: 1px solid #f0f0f0;
  position: relative;
}
.range-row-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
}
.range-num {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #e91e63;
  color: #fff;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.range-row-spacer { flex: 1; }
.remove-range-btn {
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 1.5px solid #e0e0e0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  position: absolute;
  top: -10px;
  left: -10px;
  z-index: 10;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.remove-range-btn svg { width: 12px; height: 12px; fill: #999; }
.add-range-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px; border-radius: 12px;
  border: 1.5px dashed #e0e0e0;
  background: #fff; cursor: pointer;
  font-family: 'Rubik', sans-serif;
  font-size: 12px; font-weight: 600; color: #999;
  transition: all 0.15s; margin-top: 8px;
}
.add-range-btn svg { width: 16px; height: 16px; fill: #999; }

/* ═══════════════════════════════════════════════════
   Dual-handle year range slider (Option C — Bubbles)
   Two draggable thumbs with floating bubble labels,
   connected by a pink fill on the track.
   ═══════════════════════════════════════════════════ */

/* Slider container — enough top padding for bubbles, side padding for dots */
.year-slider-container {
  position: relative;
  padding: 52px 20px 0;
}

/* Track base */
.year-slider-track {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: #eee;
  cursor: pointer;
}

/* Pink fill between the two thumbs */
.year-slider-fill {
  position: absolute;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #f48fb1, #e91e63);
  pointer-events: none;
}

/* Thumb dot — small solid pink circle on the track */
.year-slider-thumb {
  position: absolute;
  top: 50%;
  transform: translate(50%, -50%);
  /* 44px hit area for easy touch/click, transparent padding around the 20px dot */
  width: 44px; height: 44px;
  cursor: grab;
  z-index: 3;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.year-slider-thumb-dot {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #e91e63;
  box-shadow: 0 2px 8px rgba(233, 30, 99, 0.4);
  transition: transform 0.1s;
}
.year-slider-thumb:active .year-slider-thumb-dot,
.year-slider-thumb.dragging .year-slider-thumb-dot {
  transform: scale(1.2);
}
/* When thumbs are close, "to" thumb sits above "from" by default.
   The active/dragging thumb always goes on top so it's grabbable. */
.year-slider-thumb-to { z-index: 4; }
.year-slider-thumb.dragging { z-index: 6; }

/* Bubble floating above each thumb */
.year-slider-bubble {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #e91e63, #c2185b);
  color: #fff;
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(233, 30, 99, 0.3);
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
  z-index: 4;
}
/* Bubble triangle pointer */
.year-slider-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #c2185b;
}
/* Label text inside bubble ("משנת" / "עד שנת") */
.year-slider-bubble-label {
  display: block;
  font-size: 9px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  line-height: 1;
  margin-bottom: 1px;
}

/* Merged bubble — shown when from/to thumbs are close together to prevent overlap */
.year-slider-merged-bubble {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #e91e63, #c2185b);
  color: #fff;
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(233, 30, 99, 0.3);
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 6px;
}
.year-slider-merged-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #c2185b;
}
.year-slider-merged-sep {
  font-size: 12px;
  font-weight: 400;
  opacity: 0.7;
}

/* Edge labels (1950 / current year) below track */
.year-slider-edges {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  padding: 0 2px;
}
.year-slider-edge-label {
  font-size: 11px;
  font-weight: 700;
  color: #666;
}

/* Error state — red border on the range row + shake */
.range-row.range-error {
  border-color: #d32f2f;
  animation: dropdown-shake 0.4s ease;
}

@keyframes dropdown-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* Validation error message shown below the range row */
.year-range-error {
  font-size: 12px;
  font-weight: 600;
  color: #d32f2f;
  text-align: center;
  padding: 4px 0;
  animation: dropdown-shake 0.4s ease;
}

/* Slider — Ringed Thumb (matches mockup Option C) */
.slider-wrap {
  display: flex; align-items: center; gap: 10px;
}
.slider-range-label {
  font-size: 12px; font-weight: 700; color: #666;
  min-width: 44px; text-align: center; flex-shrink: 0;
}
.slider-track {
  flex: 1; height: 6px; border-radius: 3px;
  background: #eee; position: relative; cursor: pointer;
}
.slider-fill {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #e91e63, #f48fb1);
  width: 33%; pointer-events: none;
}
.slider-thumb-wrap {
  position: absolute; top: 50%; right: 33%;
  transform: translate(50%, -50%);
  /* 48px hit area for easy touch/click on the circle */
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  cursor: grab;
  touch-action: none;
  z-index: 2;
  overflow: visible;
}
.slider-thumb-ring {
  position: absolute; width: 100%; height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(233,30,99,0.2);
}
.slider-thumb-inner {
  width: 28px; height: 28px; border-radius: 50%;
  background: #fff; border: 2.5px solid #e91e63;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #e91e63;
  z-index: 1;
}

/* Drag bubble — floats above the rounds thumb while dragging, hidden otherwise */
.slider-drag-bubble {
  display: none;
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #e91e63, #c2185b);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(233, 30, 99, 0.3);
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
}
/* Triangle pointer below the bubble */
.slider-drag-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #c2185b;
}
/* Show bubble only while actively dragging the thumb */
.slider-thumb-wrap.dragging .slider-drag-bubble {
  display: block;
}

/* Timer section */
.timer-row { display: flex; gap: 8px; align-items: center; }
/* Timer slider reuses the shared .slider-* classes from the rounds slider */
.timer-label { font-size: 13px; color: #666; }
.timer-toggle {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: #666; cursor: pointer;
}
.toggle-track {
  width: 36px; height: 20px; border-radius: 10px;
  background: #e91e63; position: relative; cursor: pointer;
}
.toggle-dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; position: absolute; top: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  left: 18px; transition: left 0.2s ease;
}

/* Advanced section toggle */
.advanced-toggle {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: #fff; border-radius: 14px;
  border: 1.5px dashed #e0e0e0; cursor: pointer;
}
.advanced-toggle-text { font-size: 13px; font-weight: 700; color: #e91e63; }
.advanced-toggle svg { width: 18px; height: 18px; fill: #e91e63; }
.advanced-toggle .advanced-chevron { transition: transform 0.2s ease; }

/* ═══════════════════════════════════════════════════
   Advanced Filter — Genre / Artist Section
   ═══════════════════════════════════════════════════ */

.advanced-section {
  background: #fff;
  border-radius: 14px;
  border: 1px solid #f0f0f0;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Filter mode tabs (genre / artist) ── */
.filter-mode-tabs {
  display: flex;
  gap: 8px;
}
.filter-mode-tab {
  flex: 1;
  padding: 10px 6px;
  border-radius: 12px;
  border: 1.5px solid #e8e8e8;
  background: #fff;
  font-family: 'Rubik', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #888;
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: all 0.15s ease;
}
.filter-mode-tab svg {
  width: 14px;
  height: 14px;
  fill: #888;
}
.filter-mode-tab.active {
  background: linear-gradient(135deg, #e91e63, #c2185b);
  border-color: #e91e63;
  color: #fff;
  box-shadow: 0 3px 10px rgba(233,30,99,0.2);
}
.filter-mode-tab.active svg {
  fill: #fff;
}

/* ── Genre chips grid ── */
.genre-chips-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.genre-chip {
  padding: 7px 12px;
  border-radius: 20px;
  border: 1.5px solid #e8e8e8;
  background: #fafafa;
  font-family: 'Rubik', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #888;
  cursor: pointer;
  transition: all 0.15s ease;
}
.genre-chip.selected {
  background: #fef0f4;
  border-color: #f48fb1;
  color: #e91e63;
}

/* ── Artist Search ── */
.artist-search-wrap {
  position: relative;
}

.artist-search-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  fill: #bbb;
  pointer-events: none;
}

.artist-search-input {
  width: 100%;
  padding: 10px 40px 10px 14px;
  border-radius: 12px;
  border: 1.5px solid #e0e0e0;
  background: #fafafa;
  font-family: 'Rubik', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #333;
  outline: none;
  transition: border-color 0.15s ease;
}

.artist-search-input:focus {
  border-color: var(--color-primary);
}

.artist-search-input::placeholder {
  color: #bbb;
}

/* Autocomplete dropdown */
.artist-autocomplete {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  margin-top: 6px;
  max-height: 240px;
  overflow-y: auto;
}

.artist-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background 0.1s ease;
  border-bottom: 1px solid #f5f5f5;
}

.artist-result:last-child {
  border-bottom: none;
}

.artist-result:hover {
  background: #fef0f4;
}

.artist-result-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.artist-result-img-placeholder {
  background: #eee;
}

.artist-result-info {
  flex: 1;
  min-width: 0;
}

.artist-result-name {
  font-size: 13px;
  font-weight: 700;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.artist-result-genres {
  font-size: 11px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.artist-result-add {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--color-primary);
  background: #fff;
  color: var(--color-primary);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.artist-result-add:hover {
  background: var(--color-primary);
  color: #fff;
}

/* Selected artist tags */
.artist-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.artist-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 20px;
  background: #fef0f4;
  border: 1px solid #f8d0dc;
}

.artist-tag-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary);
}

.artist-tag-remove {
  background: none;
  border: none;
  color: #c2185b;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.artist-tag-remove:hover {
  color: #880e4f;
}

/* Start button */
.start-btn {
  width: 100%; padding: 16px; border: none; border-radius: 50px;
  font-family: 'Rubik', sans-serif; font-size: 19px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #e91e63, #c2185b);
  box-shadow: 0 4px 16px rgba(233,30,99,0.3);
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 4px;
}
.start-btn svg { width: 24px; height: 24px; fill: #fff; }

/* ═══════════════════════════════════════════════════
   Screen 3 — Loading
   ═══════════════════════════════════════════════════ */

.loading-screen .screen-content {
  justify-content: center;
  gap: 1.5rem;
}

.loading-icon {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: var(--gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(233, 30, 99, 0.25);
  animation: icon-pulse 2s ease-in-out infinite;
  z-index: 1;
}

@keyframes icon-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.loading-icon svg { width: 2.5rem; height: 2.5rem; fill: #fff; }

.loading-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(233, 30, 99, 0.15);
  width: 5rem; height: 5rem;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(1);
  animation: ring-expand 2s ease-out infinite;
}

@keyframes ring-expand {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
}

.loading-icon-wrap {
  position: relative;
  width: 5rem;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-ring:nth-child(2) { animation-delay: 0.6s; }
.loading-ring:nth-child(3) { animation-delay: 1.2s; }

/* Stops all loading animations when an error occurs */
.loading-icon-wrap.loading-stopped .loading-ring { animation: none; opacity: 0; }
.loading-icon-wrap.loading-stopped .loading-icon { animation: none; }

.loading-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

.loading-progress-bar {
  width: 100%;
  max-width: 16rem;
  height: 0.5rem;
  background: #eee;
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.loading-progress-fill {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: var(--radius-pill);
  transition: width 0.3s ease;
}

.loading-progress-text {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* Loading steps */
.loading-steps {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  width: 100%;
  max-width: 18rem;
}

.loading-step {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius-md);
  background: var(--color-card);
  border: 1px solid var(--color-card-border);
}

.loading-step-active {
  border-color: var(--color-primary-border);
  background: #fff5f8;
}

.loading-step-done {
  border-color: #c8e6c9;
  background: var(--color-success-bg);
}

.loading-step-icon {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-step-done .loading-step-icon {
  background: var(--color-success);
}

/* Note: svg sizing/fill for step icons is handled via .loading-step-svg-check / .loading-step-svg-spinner */

.loading-step-active .loading-step-icon {
  background: var(--color-primary);
}

/* Spinner rotation for active step — counterclockwise to match the arrow direction */
@keyframes step-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

/* Show spinner in active state, check in done state, hide both in pending */
.loading-step-svg-check,
.loading-step-svg-spinner {
  width: 0.875rem;
  height: 0.875rem;
  fill: #fff;
}

/* By default hide both */
.loading-step-svg-check { display: none; }
.loading-step-svg-spinner { display: none; }

/* Active: show spinning arrows */
.loading-step-active .loading-step-svg-spinner {
  display: block;
  animation: step-spin 1.2s linear infinite;
}

/* Done: show checkmark (white on green bg), hide spinner */
.loading-step-done .loading-step-svg-check {
  display: block;
  fill: #fff;
}
.loading-step-done .loading-step-svg-spinner {
  display: none !important;
}

/* Pending: show checkmark (grey, via icon background) */
.loading-step-pending .loading-step-svg-check {
  display: block;
  fill: #ccc;
}
.loading-step-pending .loading-step-svg-spinner {
  display: none;
}

.loading-step-pending .loading-step-icon {
  background: #eee;
}

.loading-step-text {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

/* ═══════════════════════════════════════════════════
   Screen 4 — Round Start
   ═══════════════════════════════════════════════════ */

.round-start-screen .screen-content {
  justify-content: center;
  gap: 1.25rem;
}

.rs-round-badge {
  background: var(--color-card);
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 0.375rem 1rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid #eee;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.rs-round-badge-text { color: var(--color-text-muted); }
.rs-round-badge-num { color: var(--color-primary); font-weight: 800; }

.rs-team-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px var(--gradient-primary-shadow);
}

.rs-team-icon svg { width: 2rem; height: 2rem; fill: #fff; }

.rs-turn-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

.rs-team-name {
  font-size: 2.125rem;
  font-weight: 900;
  color: var(--color-primary);
  text-shadow: 0 2px 8px rgba(233, 30, 99, 0.15);
  text-align: center;
  word-break: break-word;
  animation: name-pop 0.5s ease-out;
}

@keyframes name-pop {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.rs-hint-badge {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.75rem;
  background: #fef0f4;
  border: 1px solid #f8d0dc;
  border-radius: var(--radius-pill);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-primary);
}

.rs-hint-badge svg {
  width: 0.75rem;
  height: 0.75rem;
  fill: var(--color-primary);
}

/* Progress dots */
.rs-progress-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  width: 100%;
}

.rs-progress-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.rs-progress-dots {
  display: flex;
  gap: 0.3125rem;
  flex-wrap: wrap;
  justify-content: center;
}

.rs-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: #e0e0e0;
}

.rs-dot-done { background: #e91e63; }
.rs-dot-done-b { background: #ff9800; }
.rs-dot-current {
  width: 0.75rem;
  height: 0.75rem;
  border: 2.5px solid var(--color-primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(233, 30, 99, 0.15);
}

/* ═══════════════════════════════════════════════════
   Screen 5 — Song Playing
   ═══════════════════════════════════════════════════ */

.song-playing-screen .screen-content {
  gap: 1rem;
  justify-content: center;
  padding-top: 3rem; /* clear the absolute quit button */
}

/* Timer circle */
.sp-timer-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp-timer-svg {
  transform: rotate(0);
}

.sp-timer-track { stroke: #eee; }
.sp-timer-progress {
  stroke: var(--color-primary);
  transition: stroke-dashoffset 1s linear;
}

.sp-timer-text {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sp-timer-number {
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--color-primary);
}

.sp-timer-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-top: -0.25rem;
}

.sp-listening-text {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-primary);
  text-align: center;
}

/* Tap-to-play overlay — shown when autoplay is blocked (iOS/Safari) */
.sp-tap-play-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(233,30,99,0.35);
  animation: sp-tap-pulse 1.5s ease-in-out infinite;
}
.sp-tap-play-text {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-primary);
}
@keyframes sp-tap-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 20px rgba(233,30,99,0.35); }
  50% { transform: scale(1.08); box-shadow: 0 6px 28px rgba(233,30,99,0.5); }
}

.sp-hint-text {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
  text-align: center;
}

/* Phase 2: plain text warning + reveal button */
.sp-reveal-warning-text {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
  text-align: center;
}

.sp-reveal-btn {
  width: 100%;
  max-width: 20rem;
  padding: 0.875rem 1.5rem;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--gradient-primary);
  color: #fff;
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 4px 16px var(--gradient-primary-shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.sp-reveal-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px var(--gradient-primary-shadow);
}

.sp-reveal-btn:active {
  transform: translateY(0);
}

/* Replay button — circular icon button next to timer (phase 2 only) */
.sp-timer-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.sp-replay-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sp-replay-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  padding: 0;
  box-shadow: 0 3px 10px var(--gradient-primary-shadow);
}

.sp-replay-btn:hover {
  background: var(--color-primary-dark);
}

.sp-replay-btn:active {
  transform: scale(0.92);
}

.sp-replay-btn svg {
  width: 20px;
  height: 20px;
  fill: #fff;
}

.sp-replay-label {
  font-size: 0.7rem;
  color: var(--color-primary);
  font-weight: 600;
  margin-top: 0.15rem;
  text-align: center;
}

/* Replace song button — circular icon button next to timer (orange accent) */
.sp-replace-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sp-replace-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: #ef6c00;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  padding: 0;
  box-shadow: 0 3px 10px rgba(239, 108, 0, 0.3);
}

.sp-replace-btn:hover {
  background: #e65100;
}

.sp-replace-btn:active {
  transform: scale(0.92);
}

.sp-replace-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.sp-replace-btn svg {
  width: 20px;
  height: 20px;
  fill: #fff;
  transition: transform 0.3s ease;
}

.sp-replace-btn.sp-replace-loading svg {
  animation: sp-replace-spin 0.8s linear infinite;
}

@keyframes sp-replace-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.sp-replace-label {
  font-size: 0.7rem;
  color: #ef6c00;
  font-weight: 600;
  margin-top: 0.15rem;
  text-align: center;
}

/* ── Invalid song report button (phase 2 only) — outlined pill above reveal ── */
.sp-invalid-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: #fff;
  border: 1.5px solid #ef5350;
  border-radius: 999px;
  color: #ef5350;
  font-family: 'Rubik', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.35rem 1rem;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.sp-invalid-btn:hover {
  background: #ffebee;
}

.sp-invalid-btn:active {
  transform: scale(0.97);
}

.sp-invalid-btn.sp-invalid-reported {
  background: #ef5350;
  border-color: #ef5350;
  color: #fff;
}

.sp-invalid-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.sp-invalid-btn svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
  flex-shrink: 0;
}

.sp-invalid-label {
  /* inline inside the pill button */
}

/* ═══════════════════════════════════════════════════
   Screen 6 — Answer Reveal
   ═══════════════════════════════════════════════════ */

.answer-reveal-screen .screen-content {
  gap: 0.6rem;
  padding-top: 1.25rem;
  justify-content: flex-start;
}

.ar-answer-card {
  padding: 1rem 1rem 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  animation: card-appear 0.4s ease-out;
}

/* Music note icon at top of card */
.ar-note-circle {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px var(--gradient-primary-shadow);
}

.ar-note-circle svg { width: 1.5rem; height: 1.5rem; fill: #fff; }

/* Answer rows */
.ar-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--color-input-bg);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-md);
}

/* Answer rows — vertical variant: label+icon on top, name in middle, buttons+pts at bottom.
   Prevents long song/artist names from squeezing the toggle buttons in a horizontal layout. */
.ar-row-v2 {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.625rem 0.75rem;
  background: var(--color-input-bg);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-md);
}

/* Top sub-row: icon circle + small label */
.ar-row-v2-top {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Bottom sub-row: toggle buttons on the right (RTL start), pts badge on the left (RTL end) */
.ar-row-v2-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* State colors for vertical rows — mirrors .ar-row-correct / .ar-row-wrong */
.ar-row-v2.ar-row-correct {
  background: var(--color-success-bg);
  border-color: #a5d6a7;
}
.ar-row-v2.ar-row-wrong {
  background: var(--color-error-bg);
  border-color: #ef9a9a;
}

.ar-row-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ar-row-icon svg { width: 13px; height: 13px; }

.ar-row-icon-song { background: #fce4ec; }
.ar-row-icon-song svg { fill: #e91e63; }

.ar-row-icon-artist { background: #f3e5f5; }
.ar-row-icon-artist svg { fill: #9c27b0; }

.ar-row-icon-year { background: #e8f5e9; }
.ar-row-icon-year svg { fill: #4caf50; }

.ar-row-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  min-width: 0;
}

.ar-row-label {
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

.ar-row-value {
  font-size: 15px;
  font-weight: 800;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: normal;
}

.ar-row-value-song { color: #e91e63; }
.ar-row-value-artist { color: #7b1fa2; }
.ar-row-value-album { color: #1565c0; }
.ar-row-value-year { color: #388e3c; }

.ar-row-icon-album { background: #e3f2fd; }
.ar-row-icon-album svg { fill: #1976d2; }

/* Toggle buttons */
.ar-toggles {
  display: flex;
  gap: 0.375rem;
}

.ar-toggle-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid #e0e0e0;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.ar-toggle-btn svg {
  width: 18px;
  height: 18px;
  fill: #ccc;
}

/* Check button default — light green border */
.ar-toggle-btn[data-value="true"] {
  border-color: #c8e6c9;
}
.ar-toggle-btn[data-value="true"] svg { fill: #a5d6a7; }

/* Check button selected — solid green fill */
.ar-toggle-btn.toggle-correct {
  background: #4caf50;
  border-color: #4caf50;
}
.ar-toggle-btn.toggle-correct svg { fill: #fff; }

/* X button selected — solid red fill */
.ar-toggle-btn.toggle-wrong {
  background: #ef5350;
  border-color: #ef5350;
}
.ar-toggle-btn.toggle-wrong svg { fill: #fff; }

/* Validation tooltip — floats above the button row without pushing content down */
.ar-tooltip {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  background: #333;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  text-align: center;
  animation: fade-in 0.2s ease-out;
  z-index: 20;
}

.ar-tooltip-arrow {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #333;
}

/* ── Back + Next button pair (Option C) ── */
.ar-btn-pair {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  max-width: 20rem;
  margin: 0 auto;
}

.ar-back-btn {
  flex: 0 0 auto;
  padding: 0.875rem 1.125rem;
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--color-primary);
  font-family: 'Rubik', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  transition: background 0.15s ease;
  white-space: nowrap;
}

.ar-back-btn:hover {
  background: #fce4ec;
}

.ar-back-btn:active {
  transform: translateY(0);
}

.ar-back-btn svg {
  width: 1rem;
  height: 1rem;
  fill: var(--color-primary);
}

/* Next button stretches to fill remaining space */
.ar-next-btn {
  flex: 1;
  width: auto;
  max-width: none;
}

/* Option C merged-screen additions — row color states and pts badge */

/* Row turns green when marked correct */
.ar-row.ar-row-correct {
  background: var(--color-success-bg);
  border-color: #a5d6a7;
  transition: background 0.2s, border-color 0.2s;
}

/* Row turns red when marked wrong */
.ar-row.ar-row-wrong {
  background: var(--color-error-bg);
  border-color: #ef9a9a;
  transition: background 0.2s, border-color 0.2s;
}

/* Time bonus row — always info-blue tinted */
.ar-row.ar-row-time {
  background: var(--color-info-bg);
  border-color: #90caf9;
}
.ar-row-icon-time            { background: var(--color-info-bg); }
.ar-row-icon-time svg        { fill: var(--color-info); }
.ar-row-value-time           { color: var(--color-info); font-size: 0.75rem; white-space: nowrap; }

/* Pts badge inside each row */
.ar-row-pts {
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 3rem;
  text-align: center;
}
.ar-row-pts.ar-pts-correct { color: var(--color-success); }
.ar-row-pts.ar-pts-zero    { color: var(--color-text-muted); }

/* Option A: total pill + proportional score bar on one combined row */
.ar-combined-row {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  width: 100%;
}

/* Total pill — compact card on the right (RTL) */
.ar-total-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fef0f4, #fce4ec);
  border-radius: var(--radius-md);
  padding: 0.4rem 0.65rem;
  min-width: 3.75rem;
  flex-shrink: 0;
  gap: 0.1rem;
}
.ar-total-pill-label { font-size: 0.6rem; font-weight: 500; color: var(--color-text-secondary); }
.ar-total-pill-score { font-size: 1rem; font-weight: 700; color: var(--color-primary); }

/* Score bar when inline — override the default 1rem side margins */
.ar-sb-bar-inline {
  flex: 1;
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════
   Screen 7 — Score Breakdown
   ═══════════════════════════════════════════════════ */

.score-breakdown-screen .screen-content {
  gap: 0.5rem;
  padding-top: 1rem;
  justify-content: flex-start;
}

.sb-breakdown-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.75rem 0.85rem;
  animation: card-appear 0.4s ease-out;
}

/* Score rows */
.sb-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.65rem;
  background: var(--color-input-bg);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-md);
}

.sb-row-icon {
  width: 1.6rem;
  height: 1.6rem;
  min-width: 1.6rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sb-row-icon svg { width: 1rem; height: 1rem; }

.sb-row-icon-song { background: #fce4ec; }
.sb-row-icon-song svg { fill: var(--color-primary); }

.sb-row-icon-artist { background: var(--color-purple-bg); }
.sb-row-icon-artist svg { fill: var(--color-purple-dark); }

.sb-row-icon-time { background: var(--color-info-bg); }
.sb-row-icon-time svg { fill: var(--color-info); }

.sb-row-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  min-width: 0;
}

.sb-row-label {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

.sb-row-name {
  font-size: 0.8125rem;
  font-weight: 600;
  word-break: break-word;
}

.sb-row-name-song { color: var(--color-primary); }
.sb-row-name-artist { color: var(--color-purple-dark); }
.sb-row-name-time { color: var(--color-info); }

/* Result badges */
.sb-result-badge {
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.1875rem 0.5rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.sb-badge-correct { background: var(--color-success-bg); color: var(--color-success); }
.sb-badge-wrong { background: var(--color-error-bg); color: var(--color-error); }

/* Points */
.sb-row-pts {
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
  min-width: 3rem;
  text-align: start;
}

.sb-pts-correct { color: var(--color-success); }
.sb-pts-wrong { color: var(--color-text-muted); }
.sb-pts-time { color: var(--color-info); }

/* Divider */
.sb-divider {
  width: 100%;
  height: 1px;
  background: var(--color-card-border);
  margin: 0.375rem 0;
}

/* Total row */
.sb-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #fef0f4, #fce4ec);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.85rem;
  margin-top: 0.2rem;
}

.sb-total-label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-primary);
}

.sb-total-score {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-primary);
}

/* Podium */
.sb-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-top: -0.25rem;
  gap: 1rem;
  width: 100%;
  padding: 0.5rem 0;
}

.sb-podium-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  flex: 1;
  max-width: 10rem;
}

.sb-podium-name {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-text-primary);
  text-align: center;
  word-break: break-word;
}

.sb-podium-block {
  width: 100%;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.sb-podium-leading {
  height: 4.5rem;
  background: linear-gradient(180deg, #fce4ec, #f8bbd0);
  border: 1.5px solid #f8d0dc;
}

.sb-podium-leading .sb-podium-score {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--color-primary);
}

.sb-podium-leading .sb-podium-rank,
.sb-podium-trailing .sb-podium-rank {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #bbb;
}

.sb-podium-trailing {
  height: 3rem;
  background: linear-gradient(180deg, #f5f5f5, #e0e0e0);
  border: 1.5px solid #e0e0e0;
}

.sb-podium-trailing .sb-podium-score {
  font-size: 1.25rem;
  font-weight: 900;
  color: #757575;
}

/* Horizontal bar scoreboard — proportionally split between leading and trailing teams */
.sb-bar {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0 1rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 2.5rem;
}

.sb-bar-team {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0 0.875rem;
  height: 100%;
  min-width: max-content;
}

.sb-bar-leading {
  background: linear-gradient(135deg, #f06292, #e91e63);
  color: #fff;
}

.sb-bar-trailing {
  background: #eee;
  color: #777;
}

.sb-bar-name {
  font-size: 0.625rem;
  font-weight: 600;
  opacity: 0.85;
  white-space: nowrap;
}

.sb-bar-score {
  font-size: 0.9375rem;
  font-weight: 800;
  white-space: nowrap;
}

.sb-bar-leading .sb-bar-score { font-size: 1rem; }

/* Secondary outline button — used for "back to fix answers" */
.btn-secondary-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 1rem;
  border-radius: 1.25rem;
  background: transparent;
  color: #666;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid #ddd;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.btn-secondary-outline:hover {
  background: #f5f5f5;
  color: #666;
}

/* ═══════════════════════════════════════════════════
   Screen 8 — Final Results
   ═══════════════════════════════════════════════════ */

.final-results-screen .screen-content {
  gap: 0.5rem;
  padding-top: 3.5rem;
  padding-bottom: 1rem;
  justify-content: flex-start;
}

/* Trophy */
.fr-trophy-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: 0.25rem;
}

.fr-trophy-circle {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  box-shadow: 0 0.25rem 1rem var(--gradient-primary-shadow);
  animation: trophy-pop 0.6s ease-out;
}

.fr-trophy-svg { width: 2rem; height: 2rem; fill: #fff; }

.fr-trophy-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 2px solid rgba(233, 30, 99, 0.15);
  transform: translate(-50%, -50%);
  animation: ring-pulse 2.4s ease-in-out infinite;
  z-index: 1;
  pointer-events: none;
}

.fr-trophy-ring:nth-child(2) { width: 6rem; height: 6rem; }
.fr-trophy-ring:nth-child(3) { width: 7.5rem; height: 7.5rem; }
.fr-trophy-ring:nth-child(4) { width: 9rem; height: 9rem; }

/* Winner announcement */
.fr-winner-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  text-align: center;
}

.fr-winner-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.fr-winner-name {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-primary);
  animation: name-pop 0.5s ease-out 0.3s both;
  word-break: break-word;
}

.fr-winner-subtitle {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-secondary);
}

/* Podium */
.fr-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1rem;
  width: 100%;
}

.fr-podium-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
}

.fr-podium-name {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-text-primary);
  text-align: center;
  word-break: break-word;
  max-width: 7.5rem;
}

.fr-podium-block {
  width: 7.5rem;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.fr-podium-winner {
  height: 4.5rem;
  background: linear-gradient(180deg, #fce4ec, #f8bbd0);
  border: 1.5px solid #f8d0dc;
  box-shadow: 0 0.25rem 1rem rgba(233, 30, 99, 0.15);
}

.fr-podium-winner .fr-podium-score {
  font-size: 2rem;
  font-weight: 900;
  color: var(--color-primary);
}

.fr-podium-winner .fr-podium-rank,
.fr-podium-loser .fr-podium-rank {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #bbb;
}

.fr-podium-loser {
  height: 3rem;
  background: linear-gradient(180deg, #f5f5f5, #e0e0e0);
  border: 1.5px solid #e0e0e0;
}

.fr-podium-loser .fr-podium-score {
  font-size: 1.375rem;
  font-weight: 900;
  color: #757575;
}

/* Stats row */
.fr-stats-row {
  display: flex;
  gap: 0.625rem;
  width: 100%;
}

.fr-stat-card {
  flex: 1;
  background: var(--color-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-card-border);
  box-shadow: var(--shadow-sm);
  padding: 0.5rem 0.375rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.fr-stat-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fr-stat-icon svg { width: 1rem; height: 1rem; }

.fr-stat-icon-rounds { background: var(--color-info-bg); }
.fr-stat-icon-rounds svg { fill: var(--color-info); }

.fr-stat-icon-avg { background: var(--color-green-bg); }
.fr-stat-icon-avg svg { fill: var(--color-green-dark); }

.fr-stat-icon-best { background: #fce4ec; }
.fr-stat-icon-best svg { fill: var(--color-primary); }

.fr-stat-value {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-text-primary);
}

.fr-stat-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-align: center;
}

/* Action buttons — side-by-side to avoid vertical scroll on Final Results */
.fr-actions {
  display: flex;
  flex-direction: row;
  gap: 0.625rem;
  width: 100%;
  align-items: center;
  justify-content: center;
  margin-top: 0.5rem;
}

.fr-actions .btn-primary,
.fr-actions .btn-outline {
  flex: 1 1 0;
  min-width: 0;
  max-width: 12rem;
  /* Keep label on a single line — narrow phones were wrapping
     "Keep playing" to two rows. Tighter horizontal padding gives
     the text more room without shrinking the touch target. */
  white-space: nowrap;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Extra rounds dialog */
.fr-dialog-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 1rem;
}

.fr-dialog {
  background: var(--color-card);
  border-radius: var(--radius-xl);
  padding: 1.75rem 1.5rem;
  width: 100%;
  max-width: 22rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.15);
  animation: card-appear 0.3s ease-out;
}

.fr-dialog-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-primary);
  text-align: center;
}

/* Pill stepper */
.fr-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  background: #f0f0f0;
  border-radius: var(--radius-pill);
  padding: 0.25rem;
}

.fr-stepper-btn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: none;
  background: var(--color-card);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: all 0.15s ease;
}

.fr-stepper-btn svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: var(--color-text-primary);
}

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

.fr-stepper-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-text-primary);
  min-width: 3.5rem;
  text-align: center;
}

.fr-dialog-note {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-align: center;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════
   Responsive — small screens
   ═══════════════════════════════════════════════════ */

/* Compact song playing screen for short viewports */
@media (max-height: 700px) {
  .sp-timer-wrapper { width: 120px; height: 120px; }
  .sp-timer-svg { width: 120px; height: 120px; }
  .sp-timer-number { font-size: 2rem; }
  .eq-large { height: 40px; }
  .song-playing-screen .screen-content { gap: 0.5rem; }
}

@media (max-width: 360px) {
  .home-vinyl {
    width: 150px;
    height: 150px;
  }
  .home-vinyl::before {
    width: 50px;
    height: 50px;
  }
  .home-vinyl-text {
    font-size: 1.1rem;
  }
  .rs-team-name { font-size: 1.75rem; }
  .fr-winner-name { font-size: 1.5rem; }

  .fr-podium-block { width: 6rem; }
  .fr-podium-winner { height: 5.5rem; }
  .fr-podium-loser { height: 3.75rem; }
  .fr-podium-winner .fr-podium-score { font-size: 1.5rem; }

  .sb-breakdown-card { padding: 0.75rem; }
  .sb-row { gap: 0.375rem; }
  .sb-row-pts { font-size: 0.75rem; min-width: 2.5rem; }
  .sb-result-badge { font-size: 0.5625rem; padding: 0.125rem 0.375rem; }
  .sb-total-score { font-size: 1.125rem; }

  .sb-podium-leading { height: 4rem; }
  .sb-podium-trailing { height: 3.5rem; }

  .fr-stat-card { padding: 0.5rem 0.375rem; }
  .fr-stat-value { font-size: 1rem; }
  .fr-stat-label { font-size: 0.625rem; }

  .fr-dialog { padding: 1.25rem 1rem; }
}

/* ═══════════════════════════════════════════════════
   Utility: hidden
   ═══════════════════════════════════════════════════ */

.hidden { display: none !important; }

/* ═══════════════════════════════════════════════════
   Debug panel — fixed at bottom of screen.
   Shows diagnostic info when setting-debug-mode-enable = 1.
   ═══════════════════════════════════════════════════ */

.debug-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #1a1a2e;
  color: #e0e0e0;
  font-family: 'Courier New', Consolas, monospace;
  font-size: 11px;
  line-height: 1.5;
  direction: ltr;
  text-align: left;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
  border-top: 2px solid #e91e63;
}

/* Push page content up so it's not hidden behind the fixed debug panel */
body.debug-active {
  padding-bottom: 220px;
}

/* Smaller padding when debug panel is collapsed (only header bar visible) */
body.debug-collapsed {
  padding-bottom: 32px;
}

.debug-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 10px;
  background: #16213e;
  cursor: pointer;
}

.debug-panel-title {
  font-weight: 700;
  color: #e91e63;
  font-size: 12px;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.debug-panel-icon {
  width: 16px;
  height: 16px;
  fill: #e91e63;
}

.debug-panel-toggle {
  background: none;
  border: none;
  color: #e91e63;
  font-size: 14px;
  cursor: pointer;
  padding: 0 4px;
}

.debug-panel-body {
  max-height: 180px;
  overflow-y: auto;
  padding: 6px 10px;
}

.debug-section {
  margin-bottom: 8px;
}

.debug-section-title {
  font-weight: 700;
  color: #4fc3f7;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
  border-bottom: 1px solid #333;
  padding-bottom: 2px;
}

.debug-row {
  display: flex;
  gap: 8px;
  padding: 1px 0;
}

.debug-label {
  color: #aaa;
  min-width: 160px;
  flex-shrink: 0;
}

.debug-value {
  color: #76ff03;
  word-break: break-all;
}

/* Debug panel — log entries (warnings & errors) */

.debug-log-row {
  display: flex;
  gap: 6px;
  padding: 2px 0;
  border-bottom: 1px solid #222;
  align-items: flex-start;
}

.debug-log-time {
  color: #888;
  flex-shrink: 0;
  min-width: 75px;
}

.debug-log-level {
  flex-shrink: 0;
  font-weight: 700;
  min-width: 36px;
}

.debug-log-msg {
  word-break: break-word;
}

.debug-log-warning .debug-log-level { color: #ffb74d; }
.debug-log-warning .debug-log-msg { color: #ffe0b2; }

.debug-log-error .debug-log-level { color: #ef5350; }
.debug-log-error .debug-log-msg { color: #ffcdd2; }

.debug-section-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #333;
  padding-bottom: 2px;
  margin-bottom: 2px;
}

.debug-toggle-arrow {
  font-size: 8px;
  color: #888;
  user-select: none;
  width: 10px;
  display: inline-block;
}

.debug-section-toggle:hover .debug-toggle-arrow {
  color: #4fc3f7;
}

.debug-clear-btn {
  background: #333;
  color: #ff8a80;
  border: 1px solid #555;
  border-radius: 4px;
  font-size: 10px;
  font-family: inherit;
  padding: 1px 8px;
  cursor: pointer;
}

.debug-clear-btn:hover {
  background: #ef5350;
  color: #fff;
  border-color: #ef5350;
}

/* Debug test search button */
.debug-test-search-btn {
  background: #1b5e20;
  color: #a5d6a7;
  border: 1px solid #388e3c;
  border-radius: 4px;
  font-size: 10px;
  font-family: inherit;
  padding: 1px 8px;
  cursor: pointer;
}
.debug-test-search-btn:hover {
  background: #2e7d32;
  color: #fff;
  border-color: #2e7d32;
}
.debug-test-search-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* Debug song results table */
.debug-song-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
  margin-top: 3px;
  direction: rtl;
}
.debug-song-table th {
  background: #333;
  color: #4fc3f7;
  padding: 2px 4px;
  text-align: right;
  border: 1px solid #444;
  font-weight: 600;
}
.debug-song-table td {
  padding: 2px 4px;
  border: 1px solid #333;
  color: #ccc;
  text-align: right;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================================
   SEO content section (Index.cshtml)
   Below-the-fold marketing copy + FAQ for crawlers and curious users.
   Renders BOTH Hebrew + English in source. Active language opens by default;
   the other language is collapsed but expandable. Styled as a subtle below-
   the-fold block that doesn't compete with the vinyl-disc CTA above.
   ========================================================================== */
.seo-content {
  max-width: 720px;
  margin: 3rem auto 2rem;
  padding: 0 1.25rem;
  color: #d0d0d0;
  font-size: 0.95rem;
  line-height: 1.6;
}
/* Phase 1.5(c) - 2026-05-30: SEO content is now monolingual per URL and
   always-visible (no <details> collapse). Card visuals previously on the
   <details> element moved directly onto .seo-article. */
.seo-article {
  margin-bottom: 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 0.75rem 1.25rem;
}
.seo-h2 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  margin: 0.25rem 0 0.75rem;
}
.seo-h3 {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  margin: 1.5rem 0 0.5rem;
}
.seo-p {
  margin: 0.75rem 0;
}
.seo-faq {
  margin: 0;
  padding: 0;
}
.seo-faq-q {
  font-weight: 600;
  color: #fff;
  margin-top: 1rem;
}
.seo-faq-a {
  margin: 0.25rem 0 0;
  padding-inline-start: 0;
  color: #b8b8b8;
}
.seo-article-he {
  text-align: right;
}
.seo-article-en {
  text-align: left;
}
@media (max-width: 600px) {
  .seo-content {
    font-size: 0.9rem;
    padding: 0 1rem;
  }
}

/* ═══════════════════════════════════════════════════
   SEO landing pages (Views/Landing/*.cshtml, added 2026-05-30)
   Used by Landing_controller actions. Same dark-theme palette as
   the rest of the app; readable typography, generous spacing, and a
   centered max-width column. The hero block places the H1 + intro +
   primary CTA above the fold; .landing-block sections render the
   value-props / how-to-play / FAQ below. .landing-cta-footer repeats
   the primary CTA at the bottom for scroll-through visitors.
   ═══════════════════════════════════════════════════ */
.landing-page {
  max-width: 760px;
  /* No top margin + no position: relative: the section flows from viewport
     top, and absolutely-positioned children inside (the .game-top-actions
     block) anchor to the viewport instead of to this section. This mirrors
     how .share-btn + .lang-toggle anchor in _Layout.cshtml — both at
     viewport-top with `right:` formulas referencing the 480px-centered
     in-game .screen container. Visual breathing room above the H1 is
     provided by padding-top instead. */
  margin: 0 auto 3rem;
  padding: 1.5rem 1.25rem 0;
  color: #d6d6d6;
  font-size: 1rem;
  line-height: 1.65;
}
/* Override the base .game-top-actions positioning so on landing pages the
   left-side pills anchor to the LEFT edge of the same 480px-centered box
   that .share-btn + .lang-toggle anchor against on the right. Without
   this, the base `left: 0.85rem` would put the pills at viewport-left,
   way further out than the right-side pills' anchor point. */
.landing-page ~ .game-top-actions,
section.landing-page .game-top-actions {
  left: max(0.85rem, calc(50vw - 240px + 0.85rem));
}
.landing-hero {
  text-align: center;
  padding: 2.5rem 0 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 2rem;
}
.landing-h1 {
  font-size: 1.85rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 1rem;
  line-height: 1.25;
}
.landing-intro {
  font-size: 1.05rem;
  margin: 0 0 1.5rem;
  color: #cccccc;
}
.landing-block {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}
.landing-h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.85rem;
}
.landing-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Logical padding (padding-inline-start) so the leading space for the
   check-mark flips correctly in RTL. Using shorthand padding-left would
   put the space on the LTR-left even in RTL, causing the ::before bullet
   (positioned at inset-inline-start: 0) to overlap the line's text. */
.landing-list li {
  padding-block: 0.4rem;
  padding-inline-start: 1.75rem;
  padding-inline-end: 0;
  position: relative;
  color: #d0d0d0;
}
.landing-list li::before {
  content: "✓";
  position: absolute;
  inset-inline-start: 0;
  color: #e91e63;
  font-weight: 700;
}
.landing-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: landing-step;
}
/* Same logical-padding fix as .landing-list — the numbered circle is
   positioned at inset-inline-start: 0 and would overlap the step title
   if the leading padding stayed on the LTR-left in RTL. */
.landing-steps li {
  padding-block: 0.6rem;
  padding-inline-start: 2.6rem;
  padding-inline-end: 0;
  position: relative;
  color: #d0d0d0;
}
.landing-steps li::before {
  counter-increment: landing-step;
  content: counter(landing-step);
  position: absolute;
  inset-inline-start: 0;
  top: 0.5rem;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: #e91e63;
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}
.landing-steps li strong {
  color: #fff;
  display: block;
  margin-bottom: 0.15rem;
}
.landing-steps li span {
  color: #b8b8b8;
  font-size: 0.95rem;
}
.landing-faq {
  margin: 0;
  padding: 0;
}
.landing-faq dt {
  font-weight: 700;
  color: #fff;
  margin-top: 0.85rem;
}
.landing-faq dt:first-child {
  margin-top: 0;
}
.landing-faq dd {
  margin: 0.2rem 0 0;
  padding-inline-start: 0;
  color: #b8b8b8;
}
.landing-cta {
  display: inline-block;
  padding: 0.8rem 2rem;
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 700;
}
.landing-cta-footer {
  text-align: center;
  margin-top: 2rem;
}
/* "Related topics" links section at the bottom of the homepage SEO content.
   Lives inside .seo-article so it inherits the article's card chrome. */
.seo-related {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.seo-related h3 {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 0.75rem;
}
.seo-related ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.seo-related li {
  margin: 0.4rem 0;
}
.seo-related a {
  color: #f06292;
  text-decoration: none;
  border-bottom: 1px dashed rgba(240, 98, 146, 0.4);
  padding-bottom: 1px;
}
.seo-related a:hover {
  color: #ff80ab;
  border-bottom-color: rgba(255, 128, 171, 0.7);
}
@media (max-width: 600px) {
  .landing-page {
    font-size: 0.95rem;
    padding: 0 1rem;
  }
  .landing-h1 {
    font-size: 1.55rem;
  }
  .landing-h2 {
    font-size: 1.15rem;
  }
}

/* ═══════════════════════════════════════════════════
   Multi-group game-screen components (added 2026-05-23)
   Used only when team count > 2. At N=2 the existing
   .mini-scoreboard / .sb-bar / .fr-podium layouts
   remain unchanged so the original 2-team experience
   is byte-for-byte identical.

   Pieces:
     .mg-big-active      → Round_start hero card for the team about to play.
     .mg-team-list       → flex-column compact list shown below the hero.
     .mg-team-row        → one row: dot marker + name + score, fits ≥8 rows
                            without scrolling on a 360px-wide phone.
     .mg-others-label    → small "שאר הקבוצות / Other Teams" caption.
     .mg-podium-multi    → Final_results top-3 podium (1st center, 2nd left,
                            3rd right), reused when N≥3.

   Typography/colors reuse existing CSS vars so the new UI matches the
   existing palette (per user 2026-05-23: "adjust the font and colors to
   what we have now in new places you add new ui elements").
   ═══════════════════════════════════════════════════ */

.mg-big-active {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-lg);
  background: var(--gradient-primary);
  box-shadow: 0 0.375rem 1.25rem var(--gradient-primary-shadow);
  color: #fff;
}
.mg-big-active-label {
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0.9;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.mg-big-active-name {
  font-size: 1.625rem;
  font-weight: 900;
  text-align: center;
  word-break: break-word;
  line-height: 1.1;
}
.mg-big-active-score {
  font-size: 1.125rem;
  font-weight: 800;
  opacity: 0.95;
  margin-top: 0.125rem;
}

.mg-others-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  align-self: flex-start;
  margin: 0.25rem 0 -0.125rem;
}

.mg-team-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.mg-team-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--color-card);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  min-height: 2.25rem;
}
.mg-team-row-rank {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--color-text-muted);
  width: 1.25rem;
  text-align: center;
  flex-shrink: 0;
}
.mg-team-row-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #ddd;
  flex-shrink: 0;
}
.mg-team-row.active .mg-team-row-dot { background: var(--color-primary); }
.mg-team-row-name {
  flex: 1;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mg-team-row.active .mg-team-row-name { color: var(--color-primary); }
.mg-team-row-score {
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--color-text-primary);
  flex-shrink: 0;
}
.mg-team-row.active .mg-team-row-score { color: var(--color-primary); }

/* Final_results winner row(s) at N>2 — gradient fill so the eye picks the
   top-score row(s) out instantly. Multiple rows can carry .winner when
   several groups tie the top score.
   Note: border:none (not border-color:transparent) — otherwise the 1px
   transparent border lets the page's dark bg show through at the rounded
   corners and the gradient looks visibly inset from the row edges. Same
   trick the .chip.active rule uses in theme-neon-stage.css. */
.mg-team-row.winner {
  background: var(--gradient-primary);
  border: none;
  /* +1px on each side to compensate for the removed 1px border so the
     winner row matches the non-winner rows' total width and height. */
  padding: calc(0.5rem + 1px) calc(0.75rem + 1px);
  box-shadow: 0 0.25rem 1rem var(--gradient-primary-shadow);
}
.mg-team-row.winner .mg-team-row-name,
.mg-team-row.winner .mg-team-row-score { color: #fff; }

/* Final-results podium for N≥3: 2nd | 1st | 3rd */
.mg-podium-multi {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.625rem;
  width: 100%;
}
.mg-podium-multi .fr-podium-column { flex: 0 0 auto; }
.mg-podium-multi .fr-podium-block { width: 5.5rem; }
.mg-podium-multi .fr-podium-winner { height: 4.5rem; }
.mg-podium-multi .fr-podium-loser  { height: 3rem; }
.mg-podium-third .fr-podium-block {
  height: 2.25rem;
  background: linear-gradient(180deg, #fff3e0, #ffe0b2);
  border: 1.5px solid #ffe0b2;
}
.mg-podium-third .fr-podium-score {
  font-size: 1.125rem;
  font-weight: 900;
  color: #ef6c00;
}
.mg-podium-third .fr-podium-rank {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #bbb;
}

/* ── In-game scoreboard strip (Answer_reveal + Score_breakdown for N≥3) ──
   Wrap-friendly compact pills sized so the MAX_TEAMS=5 cap fits in a single
   horizontal row without wrapping, in the same vertical slot the original
   .sb-bar occupies for the 2-team layout. */
.mg-team-strip {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  justify-content: center;
}
.mg-team-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-pill);
  background: #eee;
  color: #777;
  font-size: 0.75rem;
  font-weight: 700;
  min-width: max-content;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}
.mg-team-pill.leading {
  background: linear-gradient(135deg, #f06292, #e91e63);
  color: #fff;
}
.mg-team-pill.active {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}
.mg-team-pill-name { opacity: 0.95; }
.mg-team-pill-score {
  font-weight: 900;
  font-size: 0.8125rem;
}