/* ─── RESETS ─── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: #070b20;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

/* ─── HIDE NAV — full-screen gameplay ─── */
.bottom-nav { display: none !important; }

/* ─── STARS / NEBULAS ─── */
.stars { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.star  { position: absolute; background: #fff; border-radius: 50%;
         animation: gpTw var(--d,3s) ease-in-out infinite; }
@keyframes gpTw { 0%,100%{opacity:.2;transform:scale(.7)} 50%{opacity:1;transform:scale(1.1)} }
.nebula { position: fixed; border-radius: 50%; filter: blur(70px);
          pointer-events: none; z-index: 0; animation: gpNb 18s ease-in-out infinite; }
.nb1 { width:360px;height:360px;background:radial-gradient(circle,rgba(124,58,237,.5),transparent 68%);top:-100px;left:-80px; }
.nb2 { width:300px;height:300px;background:radial-gradient(circle,rgba(244,114,182,.45),transparent 68%);top:40%;right:-90px;animation-delay:-6s; }
.nb3 { width:260px;height:260px;background:radial-gradient(circle,rgba(96,165,250,.35),transparent 68%);bottom:-40px;left:25%;animation-delay:-12s; }
@keyframes gpNb { 0%,100%{transform:translate(0,0)scale(1)} 50%{transform:translate(22px,-18px)scale(1.08)} }

/* ─── PAGE SHELL — safe-area aware, no nav gap ─── */
.gp-page {
  position: relative; z-index: 5;
  max-width: 430px; margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) 18px 28px;
  display: flex; flex-direction: column;
  gap: 10px;
  min-height: 100dvh;
  background: transparent; /* override gameplay-ui.css solid #070b20 — stars must show through */
}

/* ─── TOP BAR — override shared sticky for in-game ─── */
.gp-topbar {
  position: relative !important;         /* no sticky in-game */
  background: transparent !important;
  padding: 0 0 4px !important;
}

/* ─── ROUND COUNTER ─── */
.gp-round { padding: 0; }
.gp-round-label {
  font-size: 11px; font-weight: 900; letter-spacing: 0.18em;
  text-transform: uppercase; color: #fff;
  text-align: center; padding: 0; margin: 0; line-height: 1.2;
}
.gp-round-value { display: none; }

/* ─── MCQ BATTLE HEADER ─── */
.mcq-battle-header {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.mcq-player-card {
  height: 92px;
  min-width: 0;
  padding: 9px;
  border-radius: 24px;
  overflow: visible;
  background:
    linear-gradient(180deg, rgba(22,36,82,0.9), rgba(13,20,52,0.94)) padding-box,
    linear-gradient(135deg, #68b7ff 0%, #7d54ff 100%) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 0 28px rgba(100,183,255,0.15), 0 4px 24px rgba(0,0,0,.3);
}
.mcq-player-card.is-rival {
  background:
    linear-gradient(180deg, rgba(54,22,67,0.9), rgba(22,13,42,0.94)) padding-box,
    linear-gradient(135deg, #ff4fb8 0%, #8a5cff 100%) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 0 28px rgba(255,79,184,0.15), 0 4px 24px rgba(0,0,0,.3);
}

.mcq-player-inner {
  height: 100%;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.mcq-player-card.is-rival .mcq-player-inner {
  grid-template-columns: minmax(0, 1fr) 68px;
}

/* Avatar */
.mcq-avatar {
  width: 68px; height: 68px;
  position: relative; overflow: visible;
  flex-shrink: 0;
}
.mcq-avatar-ring {
  position: absolute; inset: 0;
  border-radius: 999px; overflow: hidden;
  border: 3px solid var(--avatar-ring, rgba(104,183,255,0.7));
}
.mcq-avatar-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  transform: scale(1.23) translateY(1px);
}
/* user avatar only — scaled + nudged down to fill ring */
.mcq-player-card:not(.is-rival) .mcq-avatar-img {
  transform: scale(1.50) translateY(2px);
}
.mcq-avatar-badge {
  position: absolute; right: -5px; bottom: -5px;
  width: 26px; height: 26px; border-radius: 999px;
  z-index: 5;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 900; color: #fff;
  background: linear-gradient(180deg, #9b5cff, #651cff);
  border: 2.5px solid #070b20;
  box-shadow: 0 0 10px rgba(145,80,255,0.7);
}

/* Player info column */
.mcq-player-info {
  min-width: 0;
  display: flex; flex-direction: column; gap: 3px;
}
.mcq-player-card.is-rival .mcq-player-info { align-items: flex-end; }

.mcq-player-name {
  font-size: 17px; font-weight: 900;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: rgba(255,255,255,0.88);
  min-width: 0;
}
.mcq-player-score {
  font-size: 42px; line-height: 0.95; font-weight: 950;
  letter-spacing: -0.02em;
  color: #68b7ff;
}
.mcq-player-card.is-rival .mcq-player-score { color: #ff4fb8; }

/* Progress bar inside card */
.mcq-player-card .progress-track {
  width: 100%; height: 5px; border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: none; overflow: hidden; margin-top: 1px;
}
.mcq-player-card .progress-track::before { height: 100%; border-radius: inherit; box-shadow: none; }
.mcq-player-card:not(.is-rival) .progress-track::before { background: linear-gradient(90deg, #5fa8ff, #7d54ff); }
.mcq-player-card.is-rival       .progress-track::before { background: linear-gradient(90deg, #ff4fb8, #8a5cff); }
.mcq-player-card .progress-track::after { display: none; }

/* ─── VS PILL ─── */
.mcq-vs-pill {
  width: 52px; height: 52px; border-radius: 18px;
  display: grid; place-items: center; justify-self: center;
  font-size: 22px; font-weight: 900; color: #d9c2ff;
  background: linear-gradient(180deg, rgba(76,38,130,0.85), rgba(27,18,64,0.95));
  border: 1px solid rgba(177,112,255,0.55);
  box-shadow: 0 0 20px rgba(150,70,255,0.45), inset 0 0 14px rgba(255,255,255,0.07);
}

/* ─── MATCH PROGRESS TRACK — premium thin ─── */
.gp-match-progress { padding: 2px 0; }
.gp-match-progress .progress-track {
  height: 8px;
}
/* smaller dot */
.gp-match-progress .progress-track::after {
  width: 13px; height: 13px;
  box-shadow: 0 0 12px rgba(180,90,255,1), 0 0 24px rgba(120,90,255,0.65);
}

/* ─── SYSTEM PANELS ─── */
#fatal-panel {
  display: none;
  border: 1px solid rgba(248,113,113,.5);
  background: rgba(127,29,29,.28); border-radius: 14px;
  padding: 12px; font-weight: 800; color: #fecaca; font-size: .85rem;
}
#error-panel {
  display: none;
  color: #fca5a5; font-weight: 700; font-size: .82rem; text-align: center;
}
#phase-label {
  font-size: .7rem; color: rgba(255,255,255,0.3);
  text-align: center; min-height: 0;
}

/* ─── PLAY SECTION ─── */
#play-section {
  display: none; flex-direction: column; gap: 10px;
  /* no extra padding — gp-page handles it */
}

/* ─── STATUS LABEL ─── */
#status-label {
  display: none; font-size: .8rem; font-weight: 800;
  color: rgba(255,255,255,0.5); text-align: center; padding: 2px 0;
}

/* ─── QUESTION CARD — premium glass ─── */
.gp-content-card {
  margin: 0;           /* override gameplay-ui.css side margins so width = answers grid */
  border-radius: 28px;
  padding: 20px 20px 18px;
  position: relative; overflow: hidden;
  background:
    linear-gradient(160deg, rgba(18,24,64,0.94) 0%, rgba(10,15,42,0.97) 100%) padding-box,
    linear-gradient(135deg, rgba(104,183,255,0.4), rgba(150,75,255,0.35), rgba(255,65,175,0.3)) border-box;
  border: 1.5px solid transparent;
  box-shadow:
    0 0 40px rgba(100,80,255,0.12),
    0 8px 32px rgba(0,0,0,.4),
    inset 0 0 40px rgba(100,120,255,0.04);
  backdrop-filter: blur(16px);
}
/* planet glow decoration */
.gp-content-card::after {
  content: '';
  position: absolute; right: -40px; bottom: -50px;
  width: 200px; height: 200px; border-radius: 999px;
  background: radial-gradient(circle, rgba(90,60,200,0.28) 0%, transparent 65%);
  pointer-events: none;
}

.q-cat-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px; border-radius: 999px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
  font-size: 13px; font-weight: 800; color: rgba(220,210,255,0.8);
  margin-bottom: 14px; position: relative; z-index: 1;
}

#question-text {
  font-size: 22px; font-weight: 800; line-height: 1.38;
  color: #fff; position: relative; z-index: 1;
}

/* ─── ANSWER GRID ─── */
#answers-container {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
#answers-container > * {
  min-width: 0;
}

/* JS creates .answer-btn + .ans-letter + .ans-txt — mapped here */
#answers-container .answer-btn {
  position: relative; min-height: 92px; border-radius: 22px;
  padding: 14px 12px;
  display: flex; align-items: center; gap: 12px;
  background: rgba(14,20,54,0.9);
  border: 1.5px solid rgba(120,95,255,0.38);
  color: #fff; font-size: 14px; font-weight: 800;
  cursor: pointer; text-align: left; width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  font-family: inherit;
  box-shadow: 0 2px 12px rgba(0,0,0,.3), inset 0 0 18px rgba(100,90,255,0.04);
  transition: border-color .15s, box-shadow .15s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
#answers-container .answer-btn:active:not(:disabled) { transform: scale(0.97); }
#answers-container .answer-btn:disabled { cursor: default; }

#answers-container .answer-btn .ans-letter {
  width: 48px; height: 48px; border-radius: 14px;
  display: grid; place-items: center;
  font-size: 19px; font-weight: 900; flex-shrink: 0; color: #fff;
  background: linear-gradient(160deg, #a47cff, #6830e0);
  box-shadow: 0 0 18px rgba(130,80,255,0.55), inset 0 1px 0 rgba(255,255,255,0.18);
  transition: background .15s;
}
#answers-container .answer-btn .ans-txt {
  flex: 1; line-height: 1.3; font-size: 14px; font-weight: 800;
  min-width: 0; overflow-wrap: anywhere; word-break: normal;
}

/* ── correct ── */
#answers-container .answer-btn.correct {
  padding-right: clamp(52px, 14vw, 66px);
  min-height: clamp(92px, 20vw, 108px);
  border-color: #34ef8a;
  background: linear-gradient(160deg, rgba(8,44,26,0.95), rgba(5,24,15,0.98));
  box-shadow: 0 0 26px rgba(52,239,138,0.38), inset 0 0 24px rgba(52,239,138,0.07);
}
#answers-container .answer-btn.correct .ans-letter {
  background: linear-gradient(160deg, #2ecc71, #16a34a);
  box-shadow: 0 0 18px rgba(52,239,138,0.6);
}
#answers-container .answer-btn.correct::after {
  content: "✓";
  position: absolute;
  right: clamp(10px, 3vw, 14px);
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0;
  width: clamp(28px, 8vw, 36px); height: clamp(28px, 8vw, 36px); border-radius: 999px;
  display: grid; place-items: center;
  font-size: 18px; font-weight: 900; color: #34ef8a;
  border: 2px solid rgba(52,239,138,0.55);
  box-shadow: 0 0 14px rgba(52,239,138,0.65);
  pointer-events: none;
}

/* ── wrong ── */
#answers-container .answer-btn.wrong {
  padding-right: clamp(52px, 14vw, 66px);
  min-height: clamp(92px, 20vw, 108px);
  border-color: #ff4f6d;
  background: linear-gradient(160deg, rgba(44,8,16,0.95), rgba(24,5,10,0.98));
  box-shadow: 0 0 26px rgba(255,79,109,0.38), inset 0 0 24px rgba(255,79,109,0.07);
  animation: answerWrongShake .45s ease;
}
#answers-container .answer-btn.wrong .ans-letter {
  background: linear-gradient(160deg, #ff4f6d, #991b35);
  box-shadow: 0 0 18px rgba(255,79,109,0.6);
}
#answers-container .answer-btn.wrong::after {
  content: "×";
  position: absolute;
  right: clamp(10px, 3vw, 14px);
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0;
  width: clamp(28px, 8vw, 36px); height: clamp(28px, 8vw, 36px); border-radius: 999px;
  display: grid; place-items: center;
  font-size: 18px; font-weight: 900; color: #ff4f6d;
  border: 2px solid rgba(255,79,109,0.55);
  box-shadow: 0 0 14px rgba(255,79,109,0.65);
  pointer-events: none;
}

/* ── selected (pending — applied instantly on tap before Firebase returns) ── */
#answers-container .answer-btn.selected:not(.correct):not(.wrong) {
  padding-right: clamp(52px, 14vw, 66px);
  min-height: clamp(92px, 20vw, 108px);
  border-color: #b855f7;
  background: linear-gradient(160deg, rgba(70,15,80,0.88), rgba(18,8,36,0.95));
  box-shadow: 0 0 26px rgba(184,85,247,0.4), inset 0 0 24px rgba(184,85,247,0.08);
  animation: mcqTapPop .2s cubic-bezier(.34,1.56,.64,1);
}
#answers-container .answer-btn.selected:not(.correct):not(.wrong) .ans-letter {
  background: linear-gradient(160deg, #c855f7, #7c1ccc);
  box-shadow: 0 0 18px rgba(184,85,247,0.55);
}
@keyframes mcqTapPop {
  0%   { transform: scale(1); }
  55%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

@media (max-width: 430px) {
  #answers-container:has(> .answer-btn.correct),
  #answers-container:has(> .answer-btn.wrong),
  #answers-container:has(> .answer-btn.selected) {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  #answers-container:has(> .answer-btn.correct) > *,
  #answers-container:has(> .answer-btn.wrong) > *,
  #answers-container:has(> .answer-btn.selected) > * {
    grid-column: 1 / -1;
  }

  #answers-container:has(> .answer-btn.correct) > .answer-btn:not(.correct):not(.wrong):not(.selected),
  #answers-container:has(> .answer-btn.wrong) > .answer-btn:not(.correct):not(.wrong):not(.selected),
  #answers-container:has(> .answer-btn.selected) > .answer-btn:not(.correct):not(.wrong):not(.selected) {
    min-height: clamp(45px, 12vw, 50px);
    padding: 6px 10px;
    gap: 6px;
  }

  #answers-container .answer-btn.wrong,
  #answers-container .answer-btn.selected:not(.correct):not(.wrong) {
    min-height: clamp(52px, 14vw, 60px);
    padding: 7px clamp(42px, 11vw, 50px) 7px 10px;
    gap: 7px;
  }

  #answers-container .answer-btn.correct {
    min-height: clamp(60px, 16vw, 68px);
    padding: 9px clamp(42px, 11vw, 50px) 9px 10px;
    gap: 8px;
  }

  #answers-container .answer-btn .ans-letter {
    width: clamp(38px, 9.6vw, 42px);
    height: clamp(38px, 9.6vw, 42px);
    border-radius: 12px;
    font-size: 16px;
  }

  #answers-container .answer-btn.correct::after,
  #answers-container .answer-btn.wrong::after {
    right: clamp(8px, 2.6vw, 10px);
    width: clamp(30px, 7.6vw, 32px);
    height: clamp(30px, 7.6vw, 32px);
    font-size: 17px;
  }

  #answers-container .answer-btn.wrong {
    box-shadow: 0 0 23px rgba(255,79,109,0.34), inset 0 0 22px rgba(255,79,109,0.063);
  }

  #answers-container .answer-btn.wrong .ans-letter {
    box-shadow: 0 0 16px rgba(255,79,109,0.54);
  }

  #answers-container .answer-btn.wrong::after {
    box-shadow: 0 0 13px rgba(255,79,109,0.59);
  }

  #answers-container .answer-btn.correct .ans-txt,
  #answers-container .answer-btn.wrong .ans-txt,
  #answers-container .answer-btn.selected .ans-txt,
  #answers-container:has(> .answer-btn.correct) > .answer-btn:not(.correct):not(.wrong):not(.selected) .ans-txt,
  #answers-container:has(> .answer-btn.wrong) > .answer-btn:not(.correct):not(.wrong):not(.selected) .ans-txt,
  #answers-container:has(> .answer-btn.selected) > .answer-btn:not(.correct):not(.wrong):not(.selected) .ans-txt {
    overflow-wrap: break-word;
    word-break: normal;
    line-height: 1.24;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  #play-section:has(#answers-container > .answer-btn.correct),
  #play-section:has(#answers-container > .answer-btn.wrong),
  #play-section:has(#answers-container > .answer-btn.selected) {
    gap: 6px;
  }

  #play-section:has(#answers-container > .answer-btn.correct) .gp-content-card,
  #play-section:has(#answers-container > .answer-btn.wrong) .gp-content-card,
  #play-section:has(#answers-container > .answer-btn.selected) .gp-content-card {
    padding: 12px 12px 10px;
    border-radius: 20px;
  }

  #play-section:has(#answers-container > .answer-btn.correct) #question-text,
  #play-section:has(#answers-container > .answer-btn.wrong) #question-text,
  #play-section:has(#answers-container > .answer-btn.selected) #question-text {
    font-size: clamp(17px, 5vw, 20px);
    line-height: 1.24;
  }

  #play-section:has(#answers-container > .answer-btn.correct) #factCard,
  #play-section:has(#answers-container > .answer-btn.wrong) #factCard,
  #play-section:has(#answers-container > .answer-btn.selected) #factCard {
    padding: 7px 9px;
    margin-top: 4px;
    border-radius: 15px;
    font-size: .74rem;
    line-height: 1.22;
  }

  #play-section:has(#answers-container > .answer-btn.correct) #factLabel,
  #play-section:has(#answers-container > .answer-btn.wrong) #factLabel,
  #play-section:has(#answers-container > .answer-btn.selected) #factLabel {
    margin-bottom: 2px;
    padding: 1px 7px;
    font-size: .54rem;
  }

  #play-section:has(#answers-container > .answer-btn.correct) #factCorrect,
  #play-section:has(#answers-container > .answer-btn.wrong) #factCorrect,
  #play-section:has(#answers-container > .answer-btn.selected) #factCorrect {
    margin-bottom: 2px;
    line-height: 1.18;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  #play-section:has(#answers-container > .answer-btn.correct) #factText,
  #play-section:has(#answers-container > .answer-btn.wrong) #factText,
  #play-section:has(#answers-container > .answer-btn.selected) #factText {
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .gp-page:has(#answers-container > .answer-btn.correct) .gp-rival-bar,
  .gp-page:has(#answers-container > .answer-btn.wrong) .gp-rival-bar,
  .gp-page:has(#answers-container > .answer-btn.selected) .gp-rival-bar {
    min-height: 50px;
    padding: 7px 10px;
    margin-top: 6px;
  }

  .gp-page:has(#answers-container > .answer-btn.correct) .gp-rival-bar .avatar-wrap,
  .gp-page:has(#answers-container > .answer-btn.wrong) .gp-rival-bar .avatar-wrap,
  .gp-page:has(#answers-container > .answer-btn.selected) .gp-rival-bar .avatar-wrap {
    width: 36px !important;
    height: 36px !important;
  }

  .mcq-player-card {
    height: 84px;
    padding: 7px;
  }

  .mcq-player-inner {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 7px;
  }

  .mcq-player-card.is-rival .mcq-player-inner {
    grid-template-columns: minmax(0, 1fr) 58px;
  }

  .mcq-avatar {
    width: 58px;
    height: 58px;
  }

  .mcq-avatar-ring {
    border-width: 2.5px;
  }

  .mcq-avatar-badge {
    width: 22px;
    height: 22px;
    right: -4px;
    bottom: -4px;
    font-size: 10px;
  }

  .mcq-player-score {
    font-size: 34px;
  }

  .mcq-vs-pill {
    width: 44px;
    height: 44px;
    border-radius: 15px;
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #answers-container .answer-btn.wrong {
    animation: none !important;
  }
}

/* ─── RIVAL STATUS BAR — compact ─── */
.gp-rival-bar {
  border-radius: 18px; padding: 10px 14px;
  display: flex; align-items: center; gap: 12px;
  background: rgba(10,14,36,0.85);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.gp-rival-bar .avatar-wrap { width: 40px !important; height: 40px !important; }
.gp-rival-bar .avatar-wrap img { border-color: rgba(255,79,184,0.55); box-shadow: 0 0 12px rgba(255,79,184,0.35); }
.gp-rival-text { flex: 1; font-size: 14px; font-weight: 800; color: #ff4fb8; }
.gp-rival-dots { display: flex; gap: 5px; align-items: center; }
.gp-rival-dots span {
  width: 6px; height: 6px; border-radius: 999px;
  background: rgba(255,79,184,0.6);
  animation: gpDotPulse 1.4s ease-in-out infinite;
}
.gp-rival-dots span:nth-child(2) { animation-delay: .2s; }
.gp-rival-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes gpDotPulse {
  0%,80%,100% { opacity:.25; transform:scale(.7); }
  40%          { opacity:1;   transform:scale(1.2); }
}

/* ─── RIVAL BAR STATES ─── */
/* default: checkmark hidden */
.gp-rival-check {
  display: none;
  width: 30px; height: 30px; border-radius: 999px; flex-shrink: 0;
  place-items: center;
  font-size: 16px; font-weight: 900; color: #34ef8a;
  background: rgba(52,239,138,0.12);
  border: 1.5px solid rgba(52,239,138,0.4);
  box-shadow: 0 0 12px rgba(52,239,138,0.35);
}
/* answered: dots→hidden, check→visible, text→green */
.gp-rival-bar.rival-answered .gp-rival-dots  { display: none; }
.gp-rival-bar.rival-answered .gp-rival-check { display: grid; }
.gp-rival-bar.rival-answered .gp-rival-text  { color: #34ef8a; }

/* ─── FACT CARD ─── */
#factCard {
  display: none; padding: 14px; border-radius: 18px;
  background: linear-gradient(135deg,rgba(14,165,233,.12),rgba(124,58,237,.1));
  border: 1px solid rgba(125,211,252,.28); font-size: .82rem; line-height: 1.45;
}
#factLabel {
  display: inline-flex; margin-bottom: 7px; padding: 3px 9px;
  border-radius: 999px; background: rgba(14,165,233,.16);
  color: #bae6fd; font-size: .6rem; font-weight: 900;
  letter-spacing: .08em; text-transform: uppercase;
}
#factCorrect { margin-bottom: 5px; color: #bbf7d0; font-weight: 900; }
#factText { color: rgba(255,255,255,0.82); font-weight: 600; }

/* ─── FINAL RESULTS ─── */
#final-results-container {
  display: none; padding: 14px; border-radius: 18px;
  background: linear-gradient(135deg,rgba(251,191,36,.1),rgba(124,58,237,.08));
  border: 1px solid rgba(251,191,36,.28); font-size: .8rem; line-height: 1.45;
}
#final-results-container table { width:100%;border-collapse:collapse;margin-top:8px;font-size:.76rem; }
#final-results-container th,
#final-results-container td { padding:6px 4px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left; }

/* ─── TOAST ─── */
#toast {
  display: none; position: fixed; left: 50%; bottom: 32px;
  transform: translateX(-50%); z-index: 300;
  padding: 9px 18px; border-radius: 999px;
  background: rgba(22,32,66,.96); border: 1px solid rgba(167,139,250,.3);
  color: #fff; font-size: .8rem; font-weight: 800;
  box-shadow: 0 4px 20px rgba(0,0,0,.5); white-space: nowrap;
}