/* Astro student and overhead display styles extracted from templates.
   Keep this file in /static and load it through url_for with css_version for cache busting. */

.astro-student-page {
  --bg-blue: #1f6f8b;
  --panel-dark: #253746;
  --question-bg: #f7f7f7;
  --question-border: #c8c8c8;
  --purple: #8e44ad;
  --green: #27ae60;
  --gold: #f39c12;
  --red: #c0392b;
  --bottom: #2c3e50;
  --text-dark: #1a1a1a;
  --white: #ffffff;
  --shadow: rgba(0, 0, 0, 0.18);
  --selected: #1f2937;
  --soft-panel: rgba(0, 0, 0, 0.25);
  --soft-border: rgba(255, 255, 255, 0.35);
  --correct: #2ecc71;
  --correct-text: #0b3d2e;
  --incorrect: #e74c3c;
  --incorrect-text: #ffffff;
  --page-pad: clamp(0px, 1.2vw, 20px);
  }


body { background: #e9eef3; }
main.wrap.wrap-wide {
  max-width: none;
  width: 100%;
  padding: 0;
}
.astro-student-page {
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: stretch;
  padding: var(--page-pad);
}
.astro-student-shell {
  width: min(100%, 560px);
  min-height: calc(100dvh - (var(--page-pad) * 2));
  background: var(--bg-blue);
  box-shadow: 0 8px 28px var(--shadow);
  display: flex;
  flex-direction: column;
  border-radius: clamp(0px, 2vw, 18px);
  overflow: hidden;
}
.astro-logo-wrap {
  text-align: center;
  padding: clamp(6px, 1.2vh, 12px) clamp(12px, 2vw, 18px) clamp(2px, 0.5vh, 6px);
}
.astro-logo-image {
  max-width: clamp(46px, 14vw, 72px);
  max-height: clamp(28px, 8vh, 46px);
  width: auto;
  height: auto;
  display: inline-block;
}
.astro-timer-pill {
  margin: 0 clamp(10px, 2vw, 18px) clamp(8px, 1.5vh, 12px);
  background: rgba(255, 255, 255, 0.22);
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  text-align: center;
  font-weight: 800;
  padding: clamp(7px, 1.2vh, 10px) clamp(12px, 2vw, 16px);
  font-size: clamp(0.95rem, 2.6vw, 1.1rem);
  backdrop-filter: blur(2px);
  color: var(--white);
}
.astro-question-card {
  background: var(--question-bg);
  color: var(--text-dark);
  margin: 0 clamp(10px, 2vw, 18px) clamp(10px, 1.8vh, 14px);
  border: 3px solid var(--question-border);
  border-radius: 10px;
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.12);
  padding: clamp(12px, 2vh, 18px) clamp(12px, 2vw, 16px);
}
.astro-question-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(8px, 1.8vw, 12px);
  align-items: center;
}
.astro-question-q {
  font-size: clamp(1.6rem, 7vw, 2.4rem);
  font-weight: 900;
  line-height: 1;
  color: #5a5a5a;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-height: 100%;
}
.astro-question-text {
  font-size: clamp(1.15rem, 5.8vw, 1.95rem);
  font-weight: 800;
  line-height: 1.08;
  margin: 0;
  text-align: left;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  min-height: 100%;
}
.astro-screen { display: none; flex: 1; min-height: 0; flex-direction: column; }
.astro-screen.active { display: flex; }
.astro-content-wrap { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.astro-instruction-pill {
  margin: 0 clamp(10px, 2vw, 18px) clamp(10px, 1.8vh, 14px);
  background: var(--bottom);
  color: var(--white);
  border-radius: 10px;
  text-align: center;
  font-weight: 800;
  font-size: clamp(0.95rem, 2.8vw, 1.08rem);
  padding: clamp(10px, 1.6vh, 13px) clamp(12px, 2vw, 16px);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.18);
}
.astro-panel-card {
  margin: 0 clamp(10px, 2vw, 18px) clamp(12px, 2vh, 16px);
  background: var(--soft-panel);
  border: 2px solid var(--soft-border);
  border-radius: 16px;
  padding: clamp(12px, 1.8vh, 16px);
  color: var(--white);
}
.astro-input-label { display: block; font-weight: 800; font-size: clamp(0.95rem, 2.4vw, 1rem); margin-bottom: 6px; }
.astro-text-input, .astro-textarea {
  width: 100%;
  padding: clamp(12px, 1.8vh, 14px);
  border: none;
  border-radius: 10px;
  font-size: clamp(0.95rem, 2.8vw, 1rem);
  color: var(--text-dark);
  margin-bottom: 12px;
  font-family: inherit;
}
.astro-helper-text { font-size: clamp(0.9rem, 2.4vw, 0.98rem); font-weight: 700; line-height: 1.3; text-align: center; opacity: 0.95; }
.astro-answers {
  padding: 0 clamp(10px, 2vw, 18px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(8px, 1.3vh, 12px);
  flex: 0 0 auto;
}
.astro-answer-btn {
  width: 100%;
  border: none;
  border-radius: 10px;
  min-height: clamp(52px, 9vh, 72px);
  padding: clamp(10px, 1.6vh, 14px) clamp(12px, 2vw, 16px);
  color: var(--white);
  font-size: clamp(1rem, 4.4vw, 1.55rem);
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.18);
  transition: transform 0.12s ease, filter 0.12s ease, outline-color 0.12s ease, box-shadow 0.12s ease;
  outline: 4px solid transparent;
  overflow-wrap: anywhere;
}
.astro-answer-btn:hover { filter: brightness(1.04); }
.astro-answer-btn:active { transform: translateY(1px); }
.astro-answer-btn.selected {
  outline-color: rgba(255,255,255,0.98);
  filter: brightness(1.06);
  box-shadow: 0 0 0 3px rgba(31,41,55,0.35), 0 6px 0 rgba(0, 0, 0, 0.18);
}
.astro-answer-btn.correct-flash {
  animation: astroCorrectPulse 0.7s ease 2;
  box-shadow: 0 0 0 4px rgba(133,220,179,0.95), 0 6px 0 rgba(0, 0, 0, 0.18);
}
.astro-answer-btn.incorrect-flash {
  animation: astroIncorrectShake 0.55s ease 2;
  box-shadow: 0 0 0 4px rgba(207,59,109,0.95), 0 6px 0 rgba(0, 0, 0, 0.18);
}
.astro-answer-btn:disabled { opacity: 0.88; cursor: default; }
@keyframes astroCorrectPulse {
  0% { transform: scale(1); filter: brightness(1); }
  35% { transform: scale(1.03); filter: brightness(1.12); }
  70% { transform: scale(0.99); filter: brightness(1.04); }
  100% { transform: scale(1); filter: brightness(1); }
}
@keyframes astroIncorrectShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}
.astro-answer-1 { background: var(--purple); }
.astro-answer-2 { background: var(--green); }
.astro-answer-3 { background: var(--gold); }
.astro-answer-4 { background: var(--red); }
.astro-answer-inner { display: flex; align-items: center; justify-content: center; width: 100%; }
.astro-answer-letter { display: none !important; }
.astro-answer-text { flex: 1 1 auto; text-align: center; width: 100%; }
.astro-bottom-wrap {
  margin-top: auto;
  padding: clamp(10px, 1.2vh, 12px) clamp(10px, 2vw, 18px) clamp(12px, 1.8vh, 16px);
}
.astro-submit-btn {
  width: 100%;
  min-height: clamp(52px, 8vh, 64px);
  border: none;
  border-radius: 10px;
  background: var(--bottom);
  color: var(--white);
  font-size: clamp(1rem, 3.6vw, 1.24rem);
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.18);
  padding: clamp(11px, 1.6vh, 14px) clamp(12px, 2vw, 16px);
}
.astro-submit-btn:disabled { opacity: 0.8; cursor: default; }
.astro-status-box {
  margin: clamp(10px, 1.4vh, 12px) clamp(10px, 2vw, 18px) 0;
  border-radius: 10px;
  padding: clamp(10px, 1.6vh, 13px) clamp(12px, 2vw, 16px);
  text-align: center;
  font-size: clamp(0.95rem, 2.8vw, 1rem);
  font-weight: 800;
  display: none;
}
.astro-status-box.show { display: block; }
.astro-status-correct { background: var(--correct); color: var(--correct-text); }
.astro-status-incorrect { background: var(--incorrect); color: var(--incorrect-text); }
.astro-status-neutral { background: rgba(255,255,255,0.22); color: var(--white); border: 2px solid rgba(255,255,255,0.35); }
.astro-waiting-center { display: flex; flex: 1; min-height: 0; align-items: center; justify-content: center; padding: clamp(14px, 2vh, 20px) clamp(10px, 2vw, 18px) clamp(18px, 2.8vh, 26px); }
.astro-waiting-card, .astro-winner-card {
  width: 100%; background: rgba(255, 255, 255, 0.18); border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 18px; padding: clamp(22px, 3.6vh, 32px) clamp(16px, 3vw, 22px); text-align: center; box-shadow: 0 6px 0 rgba(0, 0, 0, 0.18);
  color: var(--white);
}
.astro-waiting-big { font-size: clamp(1.45rem, 7vw, 2.3rem); font-weight: 900; line-height: 1.08; margin-bottom: 12px; }
.astro-waiting-small { font-size: clamp(1rem, 4.2vw, 1.35rem); font-weight: 800; opacity: 0.95; }
.astro-winner-medal { font-size: clamp(3rem, 14vw, 4rem); line-height: 1; margin-bottom: 10px; }
.astro-winner-title { font-size: clamp(1.5rem, 6.8vw, 2rem); font-weight: 900; line-height: 1.08; margin-bottom: 10px; }
.astro-winner-place { font-size: clamp(1.05rem, 4.4vw, 1.4rem); font-weight: 800; margin-bottom: 8px; }
.astro-winner-message { font-size: clamp(0.95rem, 3.2vw, 1.08rem); font-weight: 700; line-height: 1.3; opacity: 0.98; }
.astro-hidden-choice { display: none; }

@media (min-width: 700px) {
  body { background: linear-gradient(180deg, #dae4ee, #edf2f7); }
  .astro-student-shell { width: min(100%, 640px); }
}

@media (orientation: landscape) and (max-height: 760px) {
  .astro-student-page { padding: 0; }
  .astro-student-shell {
    width: 100%;
    min-height: 100dvh;
    max-width: none;
    border-radius: 0;
  }
  .astro-logo-wrap { padding-top: 4px; padding-bottom: 2px; }
  .astro-logo-image { max-width: clamp(34px, 7vw, 56px); max-height: clamp(20px, 5vh, 34px); }
  .astro-timer-pill { margin-bottom: 6px; }
  .astro-question-card { margin-bottom: 8px; padding-top: 10px; padding-bottom: 10px; }
  .astro-question-text { font-size: clamp(1rem, 3.5vw, 1.5rem); }
  .astro-answers { grid-template-columns: 1fr; gap: 8px; }
  .astro-answer-btn { min-height: clamp(44px, 14vh, 60px); font-size: clamp(0.95rem, 2.8vw, 1.15rem); }
  .astro-bottom-wrap { padding-top: 8px; }
  .astro-submit-btn { min-height: clamp(46px, 12vh, 56px); }
  .astro-waiting-center { padding-top: 10px; padding-bottom: 12px; }
}

@media (max-width: 380px) {
  .astro-question-text { font-size: 1.08rem; }
  .astro-answer-btn { font-size: 0.95rem; }
}

/* ---------------- Overhead page styles ---------------- */

.astro-overhead {
  --bg-blue: #1f6f8b;
  --panel-dark: #253746;
  --question-bg: #f7f7f7;
  --question-border: #c8c8c8;
  --purple: #8e44ad;
  --green: #27ae60;
  --gold: #f39c12;
  --red: #c0392b;
  --bottom: #2c3e50;
  --text-dark: #1a1a1a;
  --white: #ffffff;
  --shadow: rgba(0, 0, 0, 0.18);
  --soft-panel: rgba(0, 0, 0, 0.25);
  --soft-border: rgba(255, 255, 255, 0.35);
  --correct: #2ecc71;
  --correct-text: #0b3d2e;
  --medal-gold-1: #ffd24a;
  --medal-gold-2: #d19a00;
  --medal-silver-1: #e8edf2;
  --medal-silver-2: #9aa6b2;
  --medal-bronze-1: #d08a59;
  --medal-bronze-2: #8a4f2a;
  --page-pad: clamp(6px, 1vw, 18px);
}
body.overhead-body {
  background: linear-gradient(180deg, #0a88c6, #0b9fe7);
  overflow: hidden;
}
main.wrap.wrap-wide {
  max-width: none;
  width: 100%;
  padding: 0;
}
.astro-overhead-page {
  min-height: 100dvh;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: stretch;
}
.astro-overhead-shell {
  width: 100%;
  min-height: 100dvh;
  background: var(--bg-blue);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.astro-overhead-top-strip { height: clamp(10px, 2vh, 28px); background: var(--panel-dark); flex-shrink: 0; }
.astro-overhead-join-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(360px, 30vw, 520px);
  gap: clamp(10px, 1.2vw, 18px);
  padding: clamp(8px, 1.6vh, 16px) clamp(10px, 1.5vw, 20px) clamp(6px, 1vh, 10px);
  align-items: stretch;
}
.astro-overhead-join-banner,
.astro-overhead-timer-panel {
  background: var(--soft-panel);
  border: 2px solid var(--soft-border);
  border-radius: 18px;
  min-height: clamp(76px, 13vh, 116px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(8px, 1vh, 14px);
}
.astro-overhead-join-banner {
  display: grid;
  grid-template-columns: minmax(100px, 180px) minmax(62px, 100px) 1fr;
  gap: clamp(6px, 0.8vw, 10px);
  align-items: center;
  padding: clamp(10px, 1.2vh, 14px) clamp(12px, 1.4vw, 18px);
}
.astro-overhead-logo-inline { display: flex; align-items: center; justify-content: center; padding-left: 25px; }
.astro-overhead-logo-inline img { max-width: clamp(110px, 17.6vw, 187px); max-height: clamp(55px, 11vh, 99px); width: auto; height: auto; display: block; }
.astro-overhead-qr-wrap {
  width: clamp(56px, 7vw, 90px);
  height: clamp(56px, 7vw, 90px);
  background: white;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.18);
}
.astro-overhead-qr-wrap img { width: 100%; height: 100%; display: block; object-fit: contain; }
.astro-overhead-join-copy { display: flex; flex-direction: column; justify-content: center; min-width: 0; color: var(--white); }
.astro-overhead-join-title {
  font-size: clamp(0.8rem, 1.15vw, 1rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
  opacity: 0.95;
}
.astro-overhead-join-url {
  font-size: clamp(1rem, 2.1vw, 1.85rem);
  font-weight: 900;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
}
.astro-overhead-timer-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: clamp(10px, 1.2vh, 14px) clamp(14px, 1vw, 18px);
  text-align: center;
  color: var(--white);
  min-width: 0;
}
.astro-overhead-timer-status {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}
.astro-overhead-timer-label {
  font-size: clamp(1rem, 1.9vw, 1.7rem);
  font-weight: 900;
  line-height: 1.02;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.astro-overhead-timer-value { font-size: clamp(1rem, 1.9vw, 1.7rem); font-weight: 900; line-height: 1.02; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.astro-overhead-main {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.9fr);
  gap: clamp(10px, 1.2vw, 18px);
  padding: clamp(6px, 0.8vh, 8px) clamp(10px, 1.5vw, 20px) clamp(10px, 1.6vh, 20px);
  min-height: 0;
}
.astro-overhead-main.polling { grid-template-columns: 1fr; }
.astro-overhead-main.polling .astro-overhead-left { flex: 1 1 auto; }
.astro-overhead-main.waiting { display: flex; }
.astro-overhead-left,
.astro-overhead-right { display: flex; flex-direction: column; gap: clamp(10px, 1.2vh, 16px); min-height: 0; }
.astro-overhead-right { height: 100%; }
.astro-overhead-right > .astro-overhead-section-panel:last-child { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.astro-overhead-question-card {
  background: var(--question-bg);
  color: var(--text-dark);
  border: 3px solid var(--question-border);
  border-radius: 16px;
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.12);
  padding: clamp(12px, 1.6vh, 18px) clamp(14px, 1.6vw, 22px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 0;
}
.astro-overhead-question-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.astro-overhead-question-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1vw, 16px);
  width: 100%;
  min-height: 0;
}
.astro-overhead-question-q {
  font-size: clamp(1.8rem, 3.5vw, 3.1rem);
  font-weight: 900;
  line-height: 1;
  color: #5a5a5a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  align-self: center;
  min-height: 0;
  margin: 0;
  padding: 0;
  position: relative;
  top: 0;
}
.astro-overhead-question-text {
  font-size: clamp(1.2rem, 2.6vw, 2.25rem);
  font-weight: 800;
  line-height: 1.08;
  margin: 0;
  padding: 0;
  text-align: center;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  min-height: 0;
  max-width: 100%;
}
.astro-overhead-answers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.2vw, 16px); flex: 1; min-height: 0; }
.astro-overhead-answer-box {
  min-height: clamp(82px, 14vh, 120px);
  border-radius: 16px;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.18);
  padding: clamp(12px, 1.8vh, 16px) clamp(12px, 1.4vw, 18px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  color: var(--white);
}
.astro-overhead-answer-a { background: var(--purple); }
.astro-overhead-answer-b { background: var(--green); }
.astro-overhead-answer-c { background: var(--gold); }
.astro-overhead-answer-d { background: var(--red); }
.astro-overhead-answer-text { font-size: clamp(1rem, 2vw, 1.8rem); font-weight: 800; line-height: 1.1; margin-bottom: 6px; overflow-wrap: anywhere; }
.astro-overhead-answer-count { font-size: clamp(0.85rem, 1.1vw, 1.1rem); font-weight: 700; color: rgba(255, 255, 255, 0.92); }
.astro-overhead-results-banner {
  margin-top: 2px;
  background: var(--bottom);
  color: var(--white);
  border-radius: 16px;
  padding: clamp(10px, 1.2vh, 14px) clamp(12px, 1.4vw, 18px);
  text-align: center;
  font-size: clamp(1rem, 1.55vw, 1.3rem);
  font-weight: 800;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.18);
}
.astro-overhead-correct-answer {
  background: var(--correct);
  color: var(--correct-text);
  border-radius: 14px;
  padding: clamp(10px, 1.2vh, 14px) clamp(12px, 1.4vw, 16px);
  text-align: center;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  font-weight: 900;
}
.astro-overhead-correct-answer.shake-correct {
  animation: astroOverheadCorrectShake 0.55s ease 2;
}
@keyframes astroOverheadCorrectShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}
.astro-overhead-section-panel {
  background: var(--soft-panel);
  border: 2px solid var(--soft-border);
  border-radius: 16px;
  padding: clamp(12px, 1.5vh, 16px);
  color: var(--white);
}
.astro-overhead-section-title { font-size: clamp(0.9rem, 1.2vw, 1.15rem); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 12px; }
.astro-overhead-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 1vw, 12px); }
.astro-overhead-stat-card { background: rgba(0, 0, 0, 0.35); border-radius: 14px; padding: clamp(10px, 1.3vh, 14px); text-align: center; }
.astro-overhead-stat-number { font-size: clamp(1.3rem, 2.2vw, 2rem); font-weight: 900; line-height: 1; margin-bottom: 6px; }
.astro-overhead-stat-label { font-size: clamp(0.75rem, 1vw, 0.95rem); font-weight: 700; opacity: 0.95; }
.astro-overhead-top3-list { display: flex; flex-direction: column; gap: clamp(8px, 1vh, 12px); flex: 1 1 auto; min-height: 0; }
.astro-overhead-top3-item {
  display: grid;
  grid-template-columns: clamp(56px, 6vw, 84px) 1fr clamp(76px, 8vw, 110px);
  gap: clamp(8px, 1vw, 12px);
  align-items: center;
  border-radius: 16px;
  padding: clamp(10px, 1.2vh, 14px);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.18);
}
.astro-overhead-top3-item:first-child {
  min-height: clamp(82px, 11vh, 108px);
}
.astro-overhead-top3-item:not(:first-child) {
  flex: 1 1 0;
  min-height: 0;
  padding-top: clamp(8px, 1vh, 10px);
  padding-bottom: clamp(8px, 1vh, 10px);
}
.astro-overhead-medal-gold { background: linear-gradient(135deg, var(--medal-gold-1), var(--medal-gold-2)); color: #4b3600; }
.astro-overhead-medal-silver { background: linear-gradient(135deg, var(--medal-silver-1), var(--medal-silver-2)); color: #28323b; }
.astro-overhead-medal-bronze { background: linear-gradient(135deg, var(--medal-bronze-1), var(--medal-bronze-2)); color: #2c1408; }
.astro-overhead-medal-fourth { background: linear-gradient(135deg, #d0c15c, #bca022); color: #473c0d; }
.astro-overhead-medal-fifth { background: linear-gradient(135deg, #90a9b7, #708a98); color: #15232c; }
.astro-overhead-top3-rank { font-size: clamp(1.25rem, 2vw, 2rem); font-weight: 900; text-align: center; background: rgba(255,255,255,0.34); border-radius: 14px; padding: clamp(8px, 1.2vh, 10px) 0; }
.astro-overhead-top3-name { font-size: clamp(0.95rem, 1.3vw, 1.2rem); font-weight: 900; line-height: 1.12; overflow-wrap: anywhere; }
.astro-overhead-top3-item:not(:first-child) .astro-overhead-top3-name { font-size: clamp(0.9rem, 1.05vw, 1.05rem); }
.astro-overhead-top3-item:not(:first-child) .astro-overhead-top3-rank { padding-top: clamp(6px, 0.8vh, 8px); padding-bottom: clamp(6px, 0.8vh, 8px); }
.astro-overhead-top3-item:not(:first-child) .astro-overhead-top3-time,
.astro-overhead-top3-item:not(:first-child) .astro-overhead-top3-score { font-size: clamp(0.95rem, 1.05vw, 1.05rem); }
.astro-overhead-top3-time { font-size: clamp(1rem, 1.45vw, 1.3rem); font-weight: 900; text-align: right; }
.astro-overhead-top3-score { font-size: clamp(1rem, 1.35vw, 1.2rem); font-weight: 900; text-align: right; }
.astro-overhead-round-badge { display:inline-flex; align-self:flex-start; margin-bottom: 10px; background: rgba(255,255,255,0.18); color: white; border-radius: 999px; padding: 6px 12px; font-size: clamp(0.85rem, 1.1vw, 1rem); font-weight: 800; }
.astro-overhead-waiting { flex: 1; display: flex; align-items: center; justify-content: center; padding: clamp(16px, 2vh, 24px); }
.astro-overhead-waiting-card {
  width: min(1200px, 100%);
  background: var(--soft-panel);
  border: 2px solid var(--soft-border);
  border-radius: 24px;
  padding: clamp(24px, 4vh, 36px) clamp(20px, 3vw, 30px);
  text-align: center;
  color: var(--white);
}
.astro-overhead-waiting-big { font-size: clamp(1.8rem, 4vw, 3.2rem); font-weight: 900; line-height: 1.05; margin-bottom: 16px; }
.astro-overhead-waiting-small { font-size: clamp(1rem, 1.8vw, 1.5rem); font-weight: 700; opacity: 0.95; }

@media (max-width: 1180px) {
  .astro-overhead-join-row { grid-template-columns: 1fr; }
  .astro-overhead-main { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  body.overhead-body { overflow: auto; }
  .astro-overhead-page { padding: 8px; }
  .astro-overhead-shell { min-height: calc(100dvh - 16px); }
  .astro-overhead-join-banner { grid-template-columns: 1fr; text-align: center; }
  .astro-overhead-answers-grid { grid-template-columns: 1fr; }
  .astro-overhead-stats-grid { grid-template-columns: 1fr; }
  .astro-overhead-top3-item { grid-template-columns: 1fr; text-align: center; }
  .astro-overhead-top3-time { text-align: center; }
}

@media (orientation: landscape) and (max-height: 900px) {
  .astro-overhead-page { padding: 6px; }
  .astro-overhead-shell { min-height: calc(100dvh - 12px); }
  .astro-overhead-top-strip { height: 10px; }
  .astro-overhead-join-row { padding-top: 8px; padding-bottom: 6px; }
  .astro-overhead-main { padding-top: 4px; padding-bottom: 10px; }
}

@media (orientation: landscape) and (max-height: 760px) {
  .astro-overhead-page { padding: 0; }
  .astro-overhead-shell {
    width: 100%;
    min-height: 100dvh;
    border-radius: 0;
    border-width: 0;
  }
  .astro-overhead-top-strip { display: none; }
  .astro-overhead-join-row {
    grid-template-columns: minmax(0, 1fr) clamp(300px, 28vw, 420px);
    gap: 8px;
    padding: 6px 10px 4px;
  }
  .astro-overhead-main {
    grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.85fr);
    gap: 8px;
    padding: 4px 10px 10px;
  }
  .astro-overhead-question-card,
  .astro-overhead-section-panel,
  .astro-overhead-answer-box,
  .astro-overhead-results-banner,
  .astro-overhead-correct-answer { border-radius: 12px; }
  .astro-overhead-stats-grid { gap: 6px; }
  .astro-overhead-top3-list { gap: 6px; }
}


/* ===== Contrast upgrade overrides ===== */
.astro-answer-3,
.astro-overhead-answer-c {
  color: #1a1a1a !important;
}

.astro-answer-btn {
  font-weight: 800;
  letter-spacing: 0.3px;
}

.astro-overhead-answer-text {
  font-weight: 900;
}

.astro-question-text,
.astro-overhead-question-text {
  font-weight: 900;
}

.astro-timer-pill,
.astro-overhead-join-banner,
.astro-overhead-timer-panel,
.astro-panel-card,
.astro-waiting-card,
.astro-winner-card,
.astro-overhead-section-panel,
.astro-overhead-waiting-card {
  color: var(--white);
}

.astro-status-correct,
.astro-overhead-correct-answer {
  color: var(--correct-text);
}

.astro-status-incorrect {
  color: var(--incorrect-text);
}



/* === FIX: DARK STAT PILLS USE WHITE TEXT === */
.astro-overhead-stat-card,
.astro-overhead-stat-card * {
  color: #ffffff !important;
}
/* === DARK TEAL PILLS → WHITE TEXT === */

/* Overhead panels (like Session Complete, Question Stats, Leaderboard) */
.astro-overhead-section-panel,
.astro-overhead-section-panel *,
.astro-overhead-timer-panel,
.astro-overhead-timer-panel *,
.astro-overhead-join-banner,
.astro-overhead-join-banner * {
  color: #ffffff !important;
}

/* Stat cards inside those panels */
.astro-overhead-stat-card,
.astro-overhead-stat-card * {
  color: #ffffff !important;
}

/* Bottom banners / status bars */
.astro-overhead-results-banner,
.astro-overhead-results-banner * {
  color: #ffffff !important;
}


/* === STUDENT COMBINED TOP PILL RESTORE === */
.astro-student-top-pill-combined {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 82px;
  margin: 10px 18px 12px 18px;
  padding: 14px 18px;
  border-radius: 20px;
  background: linear-gradient(135deg, #3a536c 0%, #2f455c 45%, #26394c 100%);
  border: 2px solid rgba(255,255,255,0.28);
  box-shadow:
    0 6px 0 rgba(0,0,0,0.20),
    0 0 16px rgba(255,255,255,0.08);
  color: #ffffff !important;
  font-size: clamp(1.3rem, 4vw, 2rem);
  font-weight: 900;
  letter-spacing: 0.4px;
  line-height: 1.1;
  text-align: center;
  text-shadow:
    0 2px 0 rgba(0,0,0,0.35),
    0 4px 8px rgba(0,0,0,0.35);
}

.astro-student-top-pill-combined span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.astro-top-pill-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.astro-top-pill-timer-label {
  min-width: 0;
}

.astro-top-pill-logo {
  height: 46px;
  width: auto;
  display: block;
  flex: 0 0 auto;
}

/* restore nice timer pill behavior when the combined pill contains the timer */
.astro-student-top-pill-combined span span,
.astro-student-top-pill-combined #astroTimerText {
  font-size: 1.18em;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-shadow:
    0 2px 0 rgba(0,0,0,0.38),
    0 4px 10px rgba(0,0,0,0.35);
}

.astro-student-top-pill-combined:has(#astroTimerText) {
  box-shadow:
    0 6px 0 rgba(0,0,0,0.20),
    0 0 18px rgba(255,255,255,0.10),
    0 0 22px rgba(47, 224, 214, 0.12);
}

@media (max-width: 760px) {
  .astro-student-top-pill-combined {
    gap: 10px;
    min-height: 74px;
    padding: 12px 14px;
    font-size: clamp(1.1rem, 4.6vw, 1.5rem);
  }

  .astro-top-pill-logo {
    height: 38px;
  }
}
/* === TIMER URGENCY EFFECTS === */
.astro-timer-urgent {
  animation: astroTimerUrgency 1s ease-in-out infinite;
}

.astro-timer-urgent-fast {
  animation: astroTimerUrgency 0.6s ease-in-out infinite;
}

@keyframes astroTimerUrgency {
  0% {
    transform: scale(1);
    box-shadow:
      0 6px 0 rgba(0,0,0,0.20),
      0 0 12px rgba(255,255,255,0.08);
  }
  50% {
    transform: scale(1.02);
    box-shadow:
      0 6px 0 rgba(0,0,0,0.20),
      0 0 22px rgba(255, 80, 80, 0.35);
  }
  100% {
    transform: scale(1);
    box-shadow:
      0 6px 0 rgba(0,0,0,0.20),
      0 0 12px rgba(255,255,255,0.08);
  }
}

/* === CORRECT REVEAL FLASH === */
@keyframes astroCorrectReveal {
  0% {
    transform: scale(1);
    box-shadow:
      0 4px 0 rgba(0,0,0,0.16),
      0 0 0 rgba(46, 204, 113, 0);
  }
  50% {
    transform: scale(1.03);
    box-shadow:
      0 6px 0 rgba(0,0,0,0.18),
      0 0 22px rgba(46, 204, 113, 0.45);
  }
  100% {
    transform: scale(1);
    box-shadow:
      0 4px 0 rgba(0,0,0,0.16),
      0 0 10px rgba(46, 204, 113, 0.22);
  }
}

.astro-correct-reveal {
  animation: astroCorrectReveal 0.9s ease;
}

@media (max-width: 760px) {
  .astro-student-top-pill-combined {
    gap: 10px;
    min-height: 74px;
    padding: 12px 18px;
    font-size: clamp(1.1rem, 4.6vw, 1.5rem);
  }

  .astro-top-pill-logo {
    height: 38px;
  }
}

/* === FORCE WHITE TEXT IN DARK GRAY STUDENT PILLS === */

/* Top combined pill (logo + timer / messages) */
.astro-student-top-pill-combined,
.astro-student-top-pill-combined * {
  color: #ffffff !important;
}

/* Bottom instruction / submit / waiting pills */
.astro-instruction-pill,
.astro-submit-btn,
.astro-status-neutral,
.astro-status-box {
  color: #ffffff !important;
}

/* Keep the text crisp like your overhead */
.astro-student-top-pill-combined,
.astro-instruction-pill,
.astro-submit-btn,
.astro-status-neutral {
  text-shadow: 0 2px 4px rgba(0,0,0,0.35);
}

/* Force middle waiting/winner card into the dark pill system */
.astro-waiting-card,
.astro-winner-card {
  background: linear-gradient(180deg, #31475d 0%, #2c3e50 100%) !important;
  border: 2px solid rgba(255,255,255,0.22) !important;
  color: #ffffff !important;
}

.astro-waiting-card *,
.astro-winner-card * {
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.35);
}

#astroTimerText {
  margin-left: 5px;
  display: inline-block;
}

.astro-instruction-pill {
  font-size: clamp(1.3rem, 3.8vw, 1.8rem);
  font-weight: 900;
  letter-spacing: 0.3px;
}

.astro-submit-btn {
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  font-weight: 900;
}

/* === STREAK HYPE FEEDBACK === */
.astro-streak-hype {
  margin-top: 14px;
  min-height: 1.5em;
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  font-size: clamp(1rem, 3.4vw, 1.35rem);
  font-weight: 900;
  letter-spacing: 0.4px;
  color: #8cffc1 !important;
  text-shadow:
    0 2px 0 rgba(0,0,0,0.35),
    0 0 12px rgba(46, 204, 113, 0.35);
  pointer-events: none;
}

.astro-streak-hype.show {
  animation: astroStreakPop 1.2s ease;
  opacity: 1;
  transform: translateY(0) scale(1);
}

@keyframes astroStreakPop {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.88);
  }
  22% {
    opacity: 1;
    transform: translateY(-4px) scale(1.08);
  }
  55% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


/* === MIDDLE WAITING PILL CENTER + COUNTDOWN ANIMATION PATCH === */
.astro-waiting-card,
.astro-winner-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: clamp(190px, 30vh, 260px);
}

.astro-waiting-big,
.astro-waiting-small,
.astro-winner-title,
.astro-winner-place,
.astro-winner-message {
  margin-left: 0;
  margin-right: 0;
  text-align: center;
}

.astro-waiting-big {
  margin-top: 0;
  margin-bottom: 14px;
}

.astro-waiting-small {
  margin-top: 0;
  margin-bottom: 0;
  display: inline-block;
  transform-origin: center;
  animation: astroCountdownPulse 1s steps(1, end) infinite;
}

@keyframes astroCountdownPulse {
  0% {
    transform: scale(1);
    text-shadow:
      0 2px 4px rgba(0,0,0,0.35),
      0 0 0 rgba(255,255,255,0);
  }
  15% {
    transform: scale(1.08);
    text-shadow:
      0 2px 4px rgba(0,0,0,0.35),
      0 0 16px rgba(255,255,255,0.28);
  }
  30% {
    transform: scale(1);
    text-shadow:
      0 2px 4px rgba(0,0,0,0.35),
      0 0 0 rgba(255,255,255,0);
  }
  100% {
    transform: scale(1);
    text-shadow:
      0 2px 4px rgba(0,0,0,0.35),
      0 0 0 rgba(255,255,255,0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .astro-waiting-small {
    animation: none;
  }
}


/* === STUDENT INPUT FIX: BLACK TEXT IN INPUT BOXES === */

input,
textarea,
select {
  color: #000 !important;
  background-color: #fff !important;
}

/* specifically for your name / ID pills if they have classes */
.astro-student input,
.astro-student-input,
.astro-input-pill {
  color: #000 !important;
  background-color: #fff !important;
}

/* placeholder text (optional but nice) */
input::placeholder {
  color: #666;
}


/* === STUDENT INPUT CLEANUP: KEEP NAME / ID TEXT BLACK === */
.astro-panel-card .astro-text-input,
.astro-panel-card .astro-textarea,
.astro-panel-card input,
.astro-panel-card textarea,
.astro-panel-card select {
  color: #000 !important;
  background: #fff !important;
  -webkit-text-fill-color: #000 !important;
  caret-color: #000 !important;
}

.astro-panel-card .astro-text-input::placeholder,
.astro-panel-card .astro-textarea::placeholder,
.astro-panel-card input::placeholder,
.astro-panel-card textarea::placeholder {
  color: #666 !important;
  -webkit-text-fill-color: #666 !important;
}

/* Preserve dark-theme text elsewhere inside the panel, but not form controls */
.astro-panel-card input *,
.astro-panel-card textarea *,
.astro-panel-card select * {
  color: #000 !important;
}


/* === LEVEL UP UI PATCHES === */

/* Student input validation */
.astro-text-input,
.astro-textarea,
.astro-panel-card input,
.astro-panel-card textarea,
.astro-panel-card select {
  transition:
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease,
    background-color 0.18s ease;
  border: 3px solid transparent;
}

.astro-text-input.astro-valid,
.astro-textarea.astro-valid,
.astro-panel-card input.astro-valid,
.astro-panel-card textarea.astro-valid,
.astro-panel-card select.astro-valid {
  border-color: rgba(46, 204, 113, 0.95) !important;
  box-shadow:
    0 0 0 4px rgba(46, 204, 113, 0.18),
    0 0 18px rgba(46, 204, 113, 0.22) !important;
}

.astro-text-input.astro-invalid,
.astro-textarea.astro-invalid,
.astro-panel-card input.astro-invalid,
.astro-panel-card textarea.astro-invalid,
.astro-panel-card select.astro-invalid {
  border-color: rgba(231, 76, 60, 0.98) !important;
  box-shadow:
    0 0 0 4px rgba(231, 76, 60, 0.16),
    0 0 18px rgba(231, 76, 60, 0.22) !important;
}

.astro-input-shake {
  animation: astroInputShake 0.42s ease;
}

@keyframes astroInputShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

/* Overhead top 3 / leaderboard animation */
.astro-overhead-top3-item {
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  animation: astroTop3SlideIn 0.55s ease forwards;
}

.astro-overhead-top3-item:nth-child(1) { animation-delay: 0.04s; }
.astro-overhead-top3-item:nth-child(2) { animation-delay: 0.12s; }
.astro-overhead-top3-item:nth-child(3) { animation-delay: 0.20s; }
.astro-overhead-top3-item:nth-child(4) { animation-delay: 0.28s; }
.astro-overhead-top3-item:nth-child(5) { animation-delay: 0.36s; }

@keyframes astroTop3SlideIn {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }
  65% {
    opacity: 1;
    transform: translateY(-2px) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.astro-overhead-top3-item.astro-first-bounce {
  animation:
    astroTop3SlideIn 0.55s ease forwards,
    astroFirstPlaceBounce 1.2s ease-in-out 0.62s 1;
}

@keyframes astroFirstPlaceBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  28% { transform: translateY(-4px) scale(1.03); }
  52% { transform: translateY(0) scale(1); }
  74% { transform: translateY(-2px) scale(1.015); }
}

.astro-overhead-top3-item.astro-new-leader-flash {
  position: relative;
  box-shadow:
    0 0 0 3px rgba(255,255,255,0.35),
    0 0 26px rgba(255, 247, 128, 0.55),
    0 6px 0 rgba(0, 0, 0, 0.18) !important;
  animation:
    astroTop3SlideIn 0.55s ease forwards,
    astroFirstPlaceBounce 1.2s ease-in-out 0.62s 1,
    astroNewLeaderGlow 1.4s ease-in-out 0.1s 2;
}

@keyframes astroNewLeaderGlow {
  0%, 100% {
    box-shadow:
      0 0 0 3px rgba(255,255,255,0.28),
      0 0 16px rgba(255, 247, 128, 0.30),
      0 6px 0 rgba(0, 0, 0, 0.18);
  }
  50% {
    box-shadow:
      0 0 0 4px rgba(255,255,255,0.42),
      0 0 34px rgba(255, 247, 128, 0.72),
      0 6px 0 rgba(0, 0, 0, 0.18);
  }
}

.astro-overhead-new-leader-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.38);
  color: #111 !important;
  font-size: clamp(0.72rem, 0.95vw, 0.88rem);
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  animation: astroBadgePop 0.45s ease;
  white-space: nowrap;
}

@keyframes astroBadgePop {
  0% { opacity: 0; transform: scale(0.84); }
  70% { opacity: 1; transform: scale(1.07); }
  100% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .astro-overhead-top3-item,
  .astro-overhead-top3-item.astro-first-bounce,
  .astro-overhead-top3-item.astro-new-leader-flash,
  .astro-input-shake {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .astro-overhead-new-leader-badge {
    animation: none !important;
  }
}


/* === TARGETED TEXT COLOR FIX === */
/* Colored answer pills on student + overhead should use black text */
.astro-answer-btn,
.astro-answer-btn .astro-answer-text,
.astro-answer-btn .astro-answer-inner,
.astro-overhead-answer-box,
.astro-overhead-answer-box .astro-overhead-answer-text,
.astro-overhead-answer-box .astro-overhead-answer-count {
  color: #000 !important;
}

/* The NEW LEADER badge can stay dark for contrast */
.astro-overhead-new-leader-badge {
  color: #111 !important;
}

/* === TOP 3 / LEADERBOARD TEXT COLORS (FULL ROW) === */

/* 🥇 Gold row */
.astro-overhead-medal-gold,
.astro-overhead-medal-gold * {
  color: #4b3600 !important;
}

/* 🥈 Silver row */
.astro-overhead-medal-silver,
.astro-overhead-medal-silver * {
  color: #28323b !important;
}

/* 🥉 Bronze row */
.astro-overhead-medal-bronze,
.astro-overhead-medal-bronze * {
  color: #2c1408 !important;
}

/* 4th row */
.astro-overhead-medal-fourth,
.astro-overhead-medal-fourth * {
  color: #473c0d !important;
}

/* 5th row */
.astro-overhead-medal-fifth,
.astro-overhead-medal-fifth * {
  color: #15232c !important;
}


/* === UNIFIED LEADERBOARD POLISH === */
.astro-overhead-medal-gold {
  position: relative;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.14),
    0 0 10px rgba(255, 215, 0, 0.18),
    0 0 18px rgba(255, 225, 120, 0.16);
  box-shadow:
    0 4px 0 rgba(0, 0, 0, 0.18),
    0 0 20px rgba(255, 215, 0, 0.22),
    inset 0 0 16px rgba(255, 244, 180, 0.12);
}

.astro-overhead-medal-gold::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    rgba(255,255,255,0) 18%,
    rgba(255,255,255,0.10) 34%,
    rgba(255,255,255,0.36) 49%,
    rgba(255,255,255,0.08) 62%,
    rgba(255,255,255,0) 76%
  );
  background-size: 220% 100%;
  animation: astroGoldShimmer 2.4s linear infinite;
  mix-blend-mode: screen;
  opacity: 0.78;
}

@keyframes astroGoldShimmer {
  0% { background-position: 130% 0; }
  100% { background-position: -40% 0; }
}

.astro-overhead-top3-name .astro-streak-fire {
  display: inline-block;
  margin-left: 8px;
  font-weight: 900;
  white-space: nowrap;
  filter:
    drop-shadow(0 0 6px rgba(255, 140, 0, 0.45))
    drop-shadow(0 0 10px rgba(255, 200, 0, 0.35));
  animation: astroFireFlicker 0.9s ease-in-out infinite alternate;
  transform-origin: center bottom;
}

@keyframes astroFireFlicker {
  0% {
    transform: translateY(0) scale(1) rotate(-3deg);
    filter:
      drop-shadow(0 0 5px rgba(255, 120, 0, 0.42))
      drop-shadow(0 0 8px rgba(255, 200, 0, 0.28));
  }
  50% {
    transform: translateY(-1px) scale(1.08) rotate(2deg);
    filter:
      drop-shadow(0 0 7px rgba(255, 110, 0, 0.55))
      drop-shadow(0 0 12px rgba(255, 210, 0, 0.36));
  }
  100% {
    transform: translateY(0) scale(0.98) rotate(-1deg);
    filter:
      drop-shadow(0 0 6px rgba(255, 130, 0, 0.48))
      drop-shadow(0 0 10px rgba(255, 215, 0, 0.32));
  }
}

@media (prefers-reduced-motion: reduce) {
  .astro-overhead-medal-gold::after,
  .astro-overhead-top3-name .astro-streak-fire {
    animation: none !important;
  }
}





/* ---------------- Inline sound toggle inside top pill ---------------- */
.astro-sound-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.22);
  background: radial-gradient(circle at 30% 30%, rgba(20, 43, 94, 0.98) 0%, rgba(9, 24, 57, 0.98) 72%);
  color: var(--white);
  border-radius: 999px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  transition:
    transform 0.14s ease,
    filter 0.14s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    opacity 0.18s ease;
}

.astro-sound-toggle-inline {
  width: 44px;
  height: 44px;
  justify-self: end;
  align-self: center;
  font-size: 1.2rem;
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.22),
    0 0 0 2px rgba(255, 255, 255, 0.06) inset,
    0 0 12px rgba(70, 190, 255, 0.18);
}

.astro-sound-toggle-inline:hover {
  transform: scale(1.06);
  filter: brightness(1.08);
}

.astro-sound-toggle-inline:active {
  transform: scale(0.94);
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.22),
    0 0 0 2px rgba(255, 255, 255, 0.05) inset,
    0 0 8px rgba(70, 190, 255, 0.12);
}

.astro-sound-toggle:not(.is-muted) {
  box-shadow:
    0 3px 0 rgba(0, 0, 0, 0.22),
    0 0 0 2px rgba(255, 255, 255, 0.05) inset,
    0 0 10px rgba(70, 190, 255, 0.28),
    0 0 18px rgba(86, 223, 255, 0.14);
}

.astro-sound-toggle.is-muted {
  opacity: 0.85;
  background: radial-gradient(circle at 30% 30%, rgba(90, 101, 122, 0.96) 0%, rgba(55, 64, 81, 0.98) 74%);
}

.astro-sound-toggle-pop {
  animation: astroSoundTogglePop 0.22s ease;
}

@keyframes astroSoundTogglePop {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@media (max-width: 560px) {
  .astro-sound-toggle-inline {
    width: 40px;
    height: 40px;
    font-size: 1.12rem;
  }
}

.astro-question-q,
.astro-overhead-question-q {
  color: inherit;
  font-weight: 900;
}

/* === BIGGER ANSWER TEXT (OVERHEAD) === */
.astro-overhead-answer-text {
  font-size: 1.8rem;
  font-weight: 900;
}

/* === BIGGER VOTE COUNT TEXT === */
.astro-overhead-answer-count {
  font-size: 1.4rem;
  font-weight: 700;
}





/* === OVERHEAD POLLING ANSWER CHASER === */
.astro-overhead-main.polling .astro-overhead-answer-box {
  transition: filter 0.18s ease, box-shadow 0.18s ease, outline-color 0.18s ease;
  outline: 4px solid transparent;
  outline-offset: -2px;
}

.astro-overhead-main.polling .astro-overhead-answer-box.astro-chase-active {
  filter: brightness(1.06);
  outline-color: rgba(255, 255, 255, 0.95);
  box-shadow:
    inset 0 0 0 4px rgba(255, 255, 255, 0.85),
    0 5px 0 rgba(0, 0, 0, 0.18);
}



/* === PULSING "ANSWERS ARE COMING IN" === */
/* === STRONGER, CLEAN PULSE === */
.astro-overhead-results-banner.astro-banner-pulse {
  animation: astroBannerPulse 0.9s ease;
}

@keyframes astroBannerPulse {
  0% {
    opacity: 1;
    transform: scale(1);
    box-shadow:
      0 5px 0 rgba(0, 0, 0, 0.18),
      0 0 0 rgba(255, 255, 255, 0);
  }

  50% {
    opacity: 1;
    transform: scale(1.06);
    box-shadow:
      0 5px 0 rgba(0, 0, 0, 0.18),
      0 0 28px rgba(255, 255, 255, 0.55),
      0 0 12px rgba(255, 255, 255, 0.35) inset;
  }

  100% {
    opacity: 1;
    transform: scale(1);
    box-shadow:
      0 5px 0 rgba(0, 0, 0, 0.18),
      0 0 0 rgba(255, 255, 255, 0);
  }
}

/* === PULSE THE WAITING SCREEN SUBTEXT === */

.astro-waiting-small {
  animation: none !important;
  display: block;
}

#astroWaitingScreen .astro-waiting-small {
  display: inline-block;
  transform-origin: center;
  animation: astroCountdownPulse 1s steps(1, end) infinite !important;
}

/* === FIX: GOOGLE SIGN-IN BUTTON FITS PORTRAIT PHONE WIDTH === */
.astro-google-signin-wrap {
  align-items: stretch !important;
}

#astroGoogleButton {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

#astroGoogleButton > div,
#astroGoogleButton iframe {
  max-width: 100% !important;
}