* {
  box-sizing: border-box;
}

:root {
  --gold: #f5cc72;
  --gold-soft: #ffe8a8;
  --navy: #06172f;
  --cream: #fff0c2;
  --paper-ink: #0b2a62;
  --red: #b72720;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #06101f;
  color: var(--cream);
  font-family: Georgia, "Times New Roman", serif;
}

body {
  overflow-x: hidden;
}

.app {
  min-height: 100vh;
  padding: 14px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at top, rgba(255, 214, 103, 0.16), transparent 34%),
    linear-gradient(180deg, #102d58, #040914);
}

.stage {
  position: relative;
  height: min(calc(100dvh - 16px), 75vw, 1125px);
  width: auto;
  max-width: min(100%, 1500px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 22px;
  background-image: url("assets/cannonquiz-bg-v6.png?v=30");
  background-size: cover;
  background-position: center;
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.68),
    0 0 0 2px rgba(245, 204, 114, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 25% 68%, rgba(255, 238, 154, 0.88) 0 1.1%, rgba(255, 133, 36, 0.52) 1.4% 3.6%, transparent 7.2%),
    radial-gradient(circle at 75% 68%, rgba(255, 238, 154, 0.88) 0 1.1%, rgba(255, 133, 36, 0.52) 1.4% 3.6%, transparent 7.2%);
  mix-blend-mode: screen;
  transition: opacity 0.35s ease, filter 0.35s ease;
}

.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 47%, rgba(255, 245, 194, 0.04), transparent 32%),
    linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.1));
}

.stage-cannon {
  position: absolute;
  z-index: 2;
  width: 45.5%;
  bottom: -0.55%;
  pointer-events: none;
  filter:
    drop-shadow(0 12px 15px rgba(0,0,0,0.52))
    drop-shadow(0 0 8px rgba(255,220,120,0.12));
  transform-origin: 50% 92%;
}

.stage-left-cannon {
  --cannon-angle: 0deg;
  left: -4.5%;
  transform: rotate(var(--cannon-angle));
}

.stage-right-cannon {
  --cannon-angle: 0deg;
  right: -4.5%;
  transform: rotate(var(--cannon-angle));
}

.stage.cannon-charge-mid::before {
  opacity: 0.33;
}

.stage.cannon-charge-high::before {
  opacity: 0.72;
  animation: cannonMuzzleChargePulse 0.82s infinite alternate ease-in-out;
}

.stage.cannon-charge-full::before {
  opacity: 1;
  filter: blur(0.5px) saturate(1.4);
  animation: cannonMuzzleChargePulse 0.36s infinite alternate ease-in-out;
}

.stage.cannon-charge-mid .stage-cannon {
  filter:
    drop-shadow(0 12px 15px rgba(0,0,0,0.52))
    drop-shadow(0 0 12px rgba(255,220,120,0.24));
}

.stage.cannon-charge-high .stage-cannon,
.stage.cannon-charge-full .stage-cannon {
  filter:
    drop-shadow(0 12px 15px rgba(0,0,0,0.52))
    drop-shadow(0 0 18px rgba(255,220,120,0.42))
    drop-shadow(0 0 28px rgba(255,112,36,0.18));
}

@keyframes cannonMuzzleChargePulse {
  from { transform: scale(0.985); filter: brightness(1) saturate(1); }
  to { transform: scale(1.01); filter: brightness(1.32) saturate(1.45); }
}

.stage.cannons-rumbling .stage-left-cannon {
  animation: stageCannonRumbleLeft 1.55s ease-in-out forwards;
}

.stage.cannons-rumbling .stage-right-cannon {
  animation: stageCannonRumbleRight 1.55s ease-in-out forwards;
}

.stage.cannons-fired .stage-left-cannon {
  animation: stageCannonRecoilLeft 1.15s ease-out forwards;
}

.stage.cannons-fired .stage-right-cannon {
  animation: stageCannonRecoilRight 1.15s ease-out forwards;
}

.mobile-game {
  display: none;
}

/* TOP TITLE */

.top-title {
  position: absolute;
  z-index: 3;
  left: 29.3%;
  top: 1.6%;
  width: 41.4%;
  height: 15%;
  text-align: center;
  pointer-events: none;
  text-shadow:
    0 3px 6px rgba(0, 0, 0, 0.88),
    0 0 18px rgba(0, 0, 0, 0.7);
}

.faith {
  display: inline-block;
  padding: 0.28vw 1.05vw;
  border-radius: 999px;
  background: rgba(3, 15, 32, 0.38);
  border: 1px solid rgba(245, 204, 114, 0.62);
  color: #ffe9a6;
  font-size: clamp(9px, 1.14vw, 20px);
  font-weight: 900;
  letter-spacing: 0.22em;
  box-shadow: 0 0 18px rgba(255, 228, 130, 0.18);
}

.top-title h1 {
  margin: 0.28vw 0 0;
  color: #fff4ca;
  font-size: clamp(26px, 4.6vw, 72px);
  line-height: 0.86;
  letter-spacing: 0.08em;
}

.top-title p {
  margin: 0.48vw 0 0;
  color: #ffe2a1;
  font-size: clamp(10px, 1.25vw, 21px);
  font-weight: 900;
  letter-spacing: 0.05em;
}

/* PRESIDENT AREA */

.president-area {
  position: absolute;
  z-index: 5;
  left: 1.8%;
  top: 2.2%;
  width: 16.3%;
  min-height: 24%;
  display: grid;
  justify-items: center;
  pointer-events: none;
}

.round-banner {
  width: 92%;
  padding: 0.43vw 0.25vw;
  border-radius: 999px;
  text-align: center;
  color: #fff4ca;
  font-size: clamp(11px, 1.15vw, 21px);
  font-weight: 900;
  letter-spacing: 0.08em;
  background:
    linear-gradient(180deg, rgba(16, 55, 110, 0.96), rgba(4, 19, 48, 0.96));
  border: 2px solid rgba(245, 204, 114, 0.85);
  box-shadow:
    0 5px 13px rgba(0,0,0,0.45),
    inset 0 0 12px rgba(255, 225, 145, 0.08);
  text-shadow: 0 2px 5px #000;
}

.president-frame {
  position: relative;
  width: 64%;
  aspect-ratio: 1;
  margin-top: 0.45vw;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle, rgba(255, 240, 184, 0.96), rgba(201, 145, 48, 0.9));
  border: 3px solid rgba(255, 231, 156, 0.95);
  box-shadow:
    inset 0 0 22px rgba(255,255,255,0.3),
    0 0 22px rgba(0,0,0,0.55);
}

.president-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 8%;
  display: none;
  transform: scale(1.08);
}

.president-frame.has-image img {
  display: block;
}

.president-frame.has-image .president-placeholder {
  display: none;
}

.president-placeholder {
  color: #061f4b;
  font-size: clamp(18px, 2.15vw, 38px);
  font-weight: 900;
  letter-spacing: 0.02em;
}

.president-label {
  width: 100%;
  margin-top: 0.42vw;
  text-align: center;
  color: #fff1bf;
  text-shadow:
    0 2px 5px rgba(0,0,0,0.92),
    0 0 9px rgba(0,0,0,0.55);
}

.president-label strong {
  display: block;
  font-size: clamp(11px, 1.08vw, 19px);
  line-height: 1.05;
}

.president-label small {
  display: block;
  margin-top: 0.2vw;
  font-size: clamp(9px, 0.96vw, 16px);
  color: #ffe4a3;
  font-weight: 900;
}

/* HUDS */

.hud-card {
  position: absolute;
  z-index: 4;
}

.left-hud {
  left: 3.5%;
  top: 28.7%;
  width: 12.4%;
}

.right-hud {
  right: 5.2%;
  top: 26.1%;
  width: 14.2%;
}

.hud-stars {
  text-align: center;
  color: var(--gold);
  font-size: clamp(12px, 1.95vw, 30px);
  text-shadow: 0 2px 5px rgba(0,0,0,0.85);
  margin-bottom: 0.4vw;
}

.hud-row {
  display: grid;
  grid-template-columns: 1fr 48%;
  align-items: center;
  gap: 0.45vw;
  margin: 0.45vw 0;
}

.hud-row.right {
  grid-template-columns: 1fr 56%;
}

.hud-row span {
  color: #ffe39a;
  font-size: clamp(8px, 0.98vw, 16px);
  font-weight: 900;
  text-shadow: 0 2px 5px rgba(0,0,0,0.9);
}

.hud-row strong {
  min-height: 1.65vw;
  display: grid;
  place-items: center;
  padding: 0 0.35vw;
  border-radius: 0.32vw;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid rgba(245, 204, 114, 0.38);
  color: #fff5d6;
  font-size: clamp(8px, 0.92vw, 15px);
  font-weight: 900;
}

/* QUIZ */

.quiz-panel {
  position: absolute;
  z-index: 4;
  left: 33.2%;
  top: 27.5%;
  width: 33.7%;
  height: 47.5%;
  padding: 1.7% 1.45% 1.2%;
  color: var(--paper-ink);
}

.quiz-panel.impact,
.mobile-question-card.impact {
  animation: quizImpact 1.08s ease-in-out;
}

.quiz-meta {
  display: flex;
  justify-content: space-between;
  gap: 1vw;
  margin-bottom: 1.15vw;
  color: rgba(75, 43, 10, 0.92);
  font-size: clamp(8px, 0.78vw, 13px);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.quiz-panel h2 {
  margin: 0;
  min-height: 33%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #082864;
  font-size: clamp(15px, 1.82vw, 31px);
  line-height: 1.2;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}

.answers {
  display: grid;
  gap: 0.55vw;
  margin-top: 0.9vw;
}

.answer-btn {
  min-height: 2.65vw;
  display: grid;
  grid-template-columns: 8.4% 1fr;
  align-items: center;
  gap: 0.54vw;
  border: 0;
  padding: 0;
  background: transparent;
  font-family: Georgia, "Times New Roman", serif;
  cursor: pointer;
}

.answer-btn span,
.mobile-answer-btn span {
  width: 2vw;
  height: 2vw;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(4, 24, 55, 0.95);
  border: 1px solid rgba(245, 204, 114, 0.8);
  color: #ffe29a;
  font-size: clamp(10px, 1.16vw, 20px);
  font-weight: 900;
  box-shadow: 0 2px 7px rgba(0,0,0,0.5);
}

.answer-btn em,
.mobile-answer-btn em {
  display: flex;
  align-items: center;
  min-height: 2.35vw;
  padding: 0 0.7vw;
  border-radius: 0.38vw;
  background: rgba(255, 246, 217, 0.88);
  border: 1px solid rgba(110, 66, 14, 0.25);
  color: #082864;
  font-size: clamp(9px, 1.05vw, 18px);
  font-style: normal;
  font-weight: 900;
  text-align: left;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.52),
    0 3px 8px rgba(80, 45, 5, 0.08);
}

.answer-btn.correct em,
.mobile-answer-btn.correct em {
  background: rgba(28, 142, 49, 0.95);
  color: #fff8df;
  border-color: rgba(255,255,255,0.55);
}

.answer-btn.wrong em,
.mobile-answer-btn.wrong em {
  background: rgba(175, 35, 35, 0.95);
  color: #fff8df;
  border-color: rgba(255,255,255,0.45);
}

.feedback {
  margin-top: 0.55vw;
  text-align: center;
  color: rgba(75, 43, 10, 0.92);
  font-size: clamp(8px, 0.82vw, 14px);
  font-weight: 900;
}

.feedback:empty {
  margin-top: 0;
  min-height: 0;
}

/* PLAYER CARD */

.player-card {
  position: absolute;
  z-index: 4;
  left: 3.5%;
  bottom: 3.6%;
  width: 13.4%;
  height: 5.5%;
}

.player-card label {
  display: block;
  margin-bottom: 0.25vw;
  color: #ffe39a;
  font-size: clamp(8px, 0.95vw, 15px);
  font-weight: 900;
  text-shadow: 0 2px 5px rgba(0,0,0,0.9);
}

.player-card input {
  width: 100%;
  height: 2.3vw;
  padding: 0 0.65vw;
  border-radius: 0.36vw;
  border: 1px solid rgba(245, 204, 114, 0.42);
  background: rgba(0, 0, 0, 0.72);
  color: #fff5d6;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(9px, 0.96vw, 16px);
  font-weight: 900;
}

/* CANNON FUSE */

.cannon-fuse {
  position: absolute;
  z-index: 5;
  left: 33.2%;
  bottom: 5.95%;
  width: 33.6%;
  height: 14.2%;
  text-align: center;
  pointer-events: none;
}

.perfect-rule {
  display: inline-block;
  margin-bottom: 0.34vw;
  padding: 0.38vw 0.95vw;
  border-radius: 999px;
  color: #fff9d9;
  font-size: clamp(9px, 1.02vw, 18px);
  font-weight: 900;
  letter-spacing: 0.08em;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 238, 162, 0.24), transparent 54%),
    linear-gradient(180deg, rgba(150, 29, 24, 0.96), rgba(55, 14, 18, 0.92));
  border: 2px solid rgba(255, 224, 134, 0.9);
  box-shadow:
    0 7px 14px rgba(0,0,0,0.42),
    0 0 20px rgba(255, 211, 77, 0.32),
    inset 0 0 14px rgba(255, 221, 121, 0.12);
  text-shadow:
    0 2px 4px #000,
    0 0 10px rgba(255, 217, 94, 0.42);
  animation: perfectRuleGlow 1.55s infinite alternate ease-in-out;
}

@keyframes perfectRuleGlow {
  from { transform: scale(1); box-shadow: 0 7px 14px rgba(0,0,0,0.42), 0 0 18px rgba(255, 211, 77, 0.28), inset 0 0 14px rgba(255, 221, 121, 0.10); }
  to { transform: scale(1.025); box-shadow: 0 8px 18px rgba(0,0,0,0.48), 0 0 28px rgba(255, 211, 77, 0.48), inset 0 0 20px rgba(255, 221, 121, 0.18); }
}

.fuse-title-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.65vw;
}

.fuse-icon {
  width: clamp(30px, 2.8vw, 52px);
  height: clamp(30px, 2.8vw, 52px);
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(255, 188, 69, 0.6));
}

.cannon-title {
  color: #ffe2a1;
  font-size: clamp(20px, 2.35vw, 42px);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-shadow:
    0 2px 5px rgba(0,0,0,0.92),
    0 0 12px rgba(0,0,0,0.8);
}

.cannon-percent {
  margin-top: 0.05vw;
  color: #fff3c8;
  font-size: clamp(12px, 1.28vw, 21px);
  font-weight: 900;
  text-shadow: 0 2px 5px rgba(0,0,0,0.9);
}

.fuse-bar {
  position: absolute;
  left: 6.8%;
  bottom: -1%;
  width: 86.4%;
  height: 27%;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0,0,0,0.66);
  border: 1px solid rgba(245, 204, 114, 0.24);
}

.fuse-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #b71915, #ff721e, #ffd229, #27c94c);
  box-shadow: 0 0 10px rgba(255, 205, 66, 0.45);
  transition: width 0.45s ease, filter 0.45s ease, box-shadow 0.45s ease;
}

.fuse-spark {
  position: absolute;
  left: 0%;
  top: 50%;
  width: 1.25vw;
  height: 1.25vw;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, #fff7bd, #ffc935, #ff6120);
  box-shadow:
    0 0 0.8vw rgba(255, 212, 67, 1),
    0 0 1.6vw rgba(255, 104, 30, 0.8);
  animation: sparkPulse 1s infinite alternate ease-in-out;
}

.cannon-fuse.charge-mid .fuse-fill,
.mobile-fuse.charge-mid .fuse-fill {
  filter: saturate(1.35) brightness(1.1);
  box-shadow: 0 0 16px rgba(255, 205, 66, 0.7);
}

.cannon-fuse.charge-high .fuse-fill,
.mobile-fuse.charge-high .fuse-fill {
  filter: saturate(1.7) brightness(1.18);
  box-shadow:
    0 0 20px rgba(255, 205, 66, 0.92),
    0 0 34px rgba(255, 100, 30, 0.45);
  animation: fusePulse 0.72s infinite alternate ease-in-out;
}

.cannon-fuse.charge-full .fuse-fill,
.mobile-fuse.charge-full .fuse-fill {
  filter: saturate(2) brightness(1.3);
  box-shadow:
    0 0 24px rgba(255, 226, 92, 1),
    0 0 48px rgba(255, 100, 30, 0.72);
  animation: fusePulse 0.35s infinite alternate ease-in-out;
}

.cannon-fuse.charge-full .fuse-spark,
.mobile-fuse.charge-full .fuse-spark {
  animation: sparkPulse 0.28s infinite alternate ease-in-out;
}


/* HISTORIC BACKGROUND HOVER LABELS */

.history-hotspots {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.history-hotspot {
  --tip-x: -50%;
  --tip-y: calc(-100% - 10px);
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.28vw;
  padding: 0.22vw 0.44vw 0.22vw 0.26vw;
  border-radius: 999px;
  border: 1px solid rgba(255, 231, 156, 0.72);
  background: linear-gradient(180deg, rgba(5, 22, 50, 0.86), rgba(2, 9, 22, 0.78));
  color: #fff0bd;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(7px, 0.72vw, 12px);
  font-weight: 900;
  letter-spacing: 0.03em;
  text-shadow: 0 2px 4px rgba(0,0,0,0.9);
  box-shadow:
    0 4px 10px rgba(0,0,0,0.38),
    0 0 10px rgba(245, 204, 114, 0.16);
  cursor: help;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.history-hotspot:hover,
.history-hotspot:focus-visible {
  outline: none;
  transform: translate(-50%, -50%) scale(1.06);
  background: linear-gradient(180deg, rgba(13, 50, 101, 0.95), rgba(4, 15, 35, 0.92));
  box-shadow:
    0 8px 16px rgba(0,0,0,0.44),
    0 0 18px rgba(245, 204, 114, 0.36);
}

.history-pin {
  width: clamp(7px, 0.56vw, 10px);
  height: clamp(7px, 0.56vw, 10px);
  border-radius: 50%;
  background: radial-gradient(circle, #fff9c8, #f5cc72 45%, #ad251d 74%);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow:
    0 0 8px rgba(255, 224, 130, 0.85),
    0 0 14px rgba(199, 51, 44, 0.35);
  flex: 0 0 auto;
}

.history-label {
  white-space: nowrap;
}

.history-tooltip {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 20;
  width: min(25vw, 300px);
  padding: 0.62vw 0.72vw;
  border-radius: 0.55vw;
  border: 2px solid rgba(245, 204, 114, 0.82);
  background:
    linear-gradient(180deg, rgba(255, 243, 202, 0.98), rgba(229, 195, 121, 0.98));
  color: #102b5d;
  font-size: clamp(9px, 0.88vw, 14px);
  line-height: 1.28;
  text-align: left;
  text-shadow: none;
  box-shadow:
    0 14px 28px rgba(0,0,0,0.48),
    inset 0 0 0 1px rgba(255,255,255,0.32);
  opacity: 0;
  pointer-events: none;
  transform: translate(var(--tip-x), var(--tip-y)) scale(0.96);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.history-hotspot:hover .history-tooltip,
.history-hotspot:focus-visible .history-tooltip {
  opacity: 1;
  transform: translate(var(--tip-x), var(--tip-y)) scale(1);
}

.hotspot-liberty-bell {
  left: 7.2%;
  top: 54%;
}

.hotspot-independence-hall {
  left: 22.2%;
  top: 29%;
}

.hotspot-betsy-ross {
  left: 23%;
  top: 47.5%;
}

.hotspot-presidential-seal {
  left: 50%;
  top: 23.5%;
}

.hotspot-lady-liberty {
  left: 72.6%;
  top: 31.5%;
}

.hotspot-american-flag {
  left: 88%;
  top: 18%;
  --tip-x: -78%;
}

.hotspot-mount-rushmore {
  left: 84%;
  top: 49%;
  --tip-x: -76%;
}

.hotspot-fireworks {
  left: 82%;
  top: 5.6%;
  --tip-x: -76%;
  --tip-y: 28px;
}

/* FRIENDLY FIRE */

.friendly-fire {
  position: absolute;
  z-index: 9;
  right: 2.2%;
  bottom: 5.1%;
  width: 21%;
  max-width: 320px;
  padding: 0.85vw;
  border-radius: 0.8vw;
  background:
    linear-gradient(180deg, rgba(7, 25, 50, 0.94), rgba(3, 12, 25, 0.9));
  border: 2px solid rgba(245, 204, 114, 0.62);
  box-shadow:
    0 12px 28px rgba(0,0,0,0.45),
    inset 0 0 18px rgba(255, 210, 105, 0.04);
}

.ff-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5vw;
}

.ff-header h3 {
  margin: 0;
  color: #ffe2a1;
  font-size: clamp(12px, 1.25vw, 20px);
  letter-spacing: 0.08em;
  text-shadow: 0 2px 5px #000;
}

.ff-header button {
  width: 1.45vw;
  height: 1.45vw;
  min-width: 24px;
  min-height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(245, 204, 114, 0.45);
  background: rgba(0,0,0,0.48);
  color: #ffe2a1;
  font-weight: 900;
  cursor: pointer;
}

.ff-target {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.45vw;
  align-items: center;
  margin-top: 0.65vw;
}

.ff-target span {
  color: #ffe2a1;
  font-weight: 900;
  font-size: clamp(8px, 0.9vw, 14px);
}

.ff-target select {
  min-width: 0;
  height: 1.9vw;
  min-height: 28px;
  border-radius: 0.35vw;
  border: 1px solid rgba(245, 204, 114, 0.38);
  background: rgba(0,0,0,0.62);
  color: #fff3ca;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 800;
}

.ff-emojis {
  display: flex;
  justify-content: space-between;
  gap: 0.25vw;
  margin-top: 0.65vw;
}

.ff-emojis button {
  flex: 1;
  aspect-ratio: 1;
  border: 1px solid rgba(245, 204, 114, 0.18);
  border-radius: 0.35vw;
  background: rgba(255,255,255,0.06);
  font-size: clamp(13px, 1.22vw, 21px);
  cursor: pointer;
}

.ff-phrases {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.42vw;
  margin-top: 0.65vw;
}

.ff-phrases button {
  min-height: 1.75vw;
  border-radius: 0.35vw;
  border: 1px solid rgba(245, 204, 114, 0.32);
  background: rgba(5, 20, 39, 0.86);
  color: #fff3ca;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(7px, 0.78vw, 13px);
  font-weight: 900;
  cursor: pointer;
}

.ff-log {
  height: 4.7vw;
  min-height: 58px;
  margin-top: 0.65vw;
  padding: 0.45vw;
  overflow: auto;
  border-radius: 0.35vw;
  border: 1px solid rgba(245, 204, 114, 0.25);
  background: rgba(0,0,0,0.55);
  color: #fff3ca;
  font-size: clamp(7px, 0.78vw, 12px);
  font-weight: 800;
}

.ff-log p {
  margin: 0 0 0.25vw;
}

.friendly-fire.hidden {
  display: none;
}

.chat-fab {
  position: absolute;
  z-index: 8;
  right: 2.4%;
  bottom: 2.2%;
  padding: 0.65vw 1vw;
  border-radius: 999px;
  border: 2px solid rgba(245, 204, 114, 0.7);
  background: rgba(5, 20, 39, 0.92);
  color: #ffe2a1;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  cursor: pointer;
}


.chat-fab.ff-notice {
  animation: friendlyFireNotice 6.5s ease-in-out infinite;
}

.maker-credit {
  position: absolute;
  right: 1.35%;
  bottom: 1.15%;
  z-index: 7;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  color: rgba(255, 240, 190, 0.82);
  background: rgba(4, 14, 32, 0.38);
  border: 1px solid rgba(245, 204, 114, 0.26);
  font-size: clamp(9px, 0.76vw, 13px);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.82);
  pointer-events: none;
}

.maker-credit-mobile {
  display: none;
}

.mobile-friendly.hidden {
  display: none !important;
}

.mobile-friendly.ff-notice h3 {
  animation: friendlyFireNoticeText 6.5s ease-in-out infinite;
}


@keyframes friendlyFireNotice {
  0%, 72%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(255, 214, 103, 0);
  }
  78% {
    transform: scale(1.055);
    box-shadow: 0 0 18px rgba(255, 214, 103, 0.85), 0 0 0 4px rgba(183, 39, 32, 0.22);
  }
  84% {
    transform: scale(1);
    box-shadow: 0 0 8px rgba(255, 214, 103, 0.45);
  }
  90% {
    transform: scale(1.04);
    box-shadow: 0 0 16px rgba(255, 214, 103, 0.75), 0 0 0 3px rgba(183, 39, 32, 0.18);
  }
}

@keyframes friendlyFireNoticeText {
  0%, 72%, 100% {
    color: #9d241d;
    text-shadow: none;
  }
  78%, 90% {
    color: #b72720;
    text-shadow: 0 0 12px rgba(255, 214, 103, 0.95);
  }
}


/* ACCOUNT / LOGIN ENTRY */

.account-screen {
  position: fixed;
  z-index: 1400;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(2, 8, 20, 0.42), rgba(1, 5, 13, 0.78)),
    radial-gradient(circle at 50% 20%, rgba(255, 220, 118, 0.22), transparent 36%),
    url("assets/cannonquiz-bg-v6.png?v=30");
  background-size: cover;
  background-position: center;
}

.account-screen.hidden {
  display: none;
}

.account-card {
  width: min(94vw, 920px);
  max-height: 92vh;
  overflow: auto;
  padding: clamp(20px, 2.2vw, 34px);
  border-radius: 24px;
  color: #102b5d;
  background:
    linear-gradient(180deg, rgba(255, 246, 215, 0.98), rgba(228, 196, 122, 0.97));
  border: 3px solid rgba(245, 204, 114, 0.98);
  box-shadow:
    0 28px 70px rgba(0,0,0,0.72),
    0 0 0 1px rgba(255,255,255,0.25) inset,
    0 0 60px rgba(255, 214, 103, 0.25);
  text-align: center;
}

.account-kicker {
  color: #ad251d;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.account-card h2 {
  margin: 8px 0 6px;
  font-size: clamp(36px, 4.8vw, 70px);
  line-height: 0.9;
  letter-spacing: 0.06em;
}

.account-subtitle {
  max-width: 760px;
  margin: 0 auto 18px;
  color: #173b78;
  font-weight: 900;
  line-height: 1.45;
  font-size: clamp(14px, 1.1vw, 19px);
}

.account-choice-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(240px, 0.9fr);
  gap: 16px;
  align-items: stretch;
  text-align: left;
}

.account-choice-panel {
  padding: 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.42);
  border: 2px solid rgba(16, 43, 93, 0.12);
  box-shadow: 0 12px 24px rgba(16, 43, 93, 0.12);
}

.account-choice-panel h3 {
  margin: 0 0 8px;
  color: #8d1a17;
  font-size: clamp(22px, 2vw, 32px);
}

.account-choice-panel p {
  margin: 0 0 14px;
  color: #173b78;
  font-weight: 800;
  line-height: 1.35;
}

.account-choice-panel label {
  display: block;
  margin: 10px 0 5px;
  color: #102b5d;
  font-weight: 900;
}

.account-choice-panel input {
  width: 100%;
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(16, 43, 93, 0.25);
  padding: 0 12px;
  color: #102b5d;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  background: rgba(255,255,255,0.82);
}

.account-button-row,
.account-mini-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.account-button-row button,
.account-guest-panel button,
.account-mini-actions button {
  padding: 0.72rem 1rem;
  border-radius: 999px;
  border: 2px solid #d6a84e;
  background: linear-gradient(180deg, #c7332c, #8d1a17);
  color: #fff4cf;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 16px rgba(0,0,0,0.24);
}

.account-button-row button:nth-child(2),
.account-guest-panel button {
  background: linear-gradient(180deg, #173b78, #071b41);
}

.account-status {
  min-height: 24px;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  color: #173b78;
  background: rgba(255,255,255,0.42);
  font-weight: 900;
  text-align: center;
}

.account-status.success {
  color: #0d5a2b;
}

.account-status.error {
  color: #8d1a17;
}

.account-mini-panel {
  max-width: 640px;
  margin: 0 auto 1vw;
  padding: 12px 14px;
  border-radius: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: #102b5d;
  background: rgba(255,255,255,0.42);
  border: 2px solid rgba(16, 43, 93, 0.12);
  text-align: left;
}

.account-mini-panel strong,
.account-mini-panel span {
  display: block;
}

.account-mini-panel strong {
  color: #8d1a17;
  font-weight: 900;
}

.account-mini-panel span {
  color: #173b78;
  font-weight: 800;
  font-size: 0.92rem;
}

.account-mini-actions {
  margin-top: 0;
  justify-content: flex-end;
  flex-shrink: 0;
}

.account-mini-actions button {
  padding: 0.48rem 0.85rem;
  font-size: 0.9rem;
}

.account-mini-actions .hidden {
  display: none;
}

/* MENU */

.menu-screen {
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 224, 130, 0.2), transparent 36%),
    rgba(0, 0, 0, 0.62);
}

.menu-screen.hidden {
  display: none;
}

.menu-card {
  width: min(76%, 820px);
  padding: 2vw;
  border-radius: 1.25vw;
  text-align: center;
  color: #102b5d;
  background:
    linear-gradient(180deg, rgba(255, 244, 206, 0.98), rgba(228, 196, 122, 0.97));
  border: 3px solid rgba(245, 204, 114, 0.98);
  box-shadow: 0 24px 55px rgba(0,0,0,0.6);
  max-height: 94vh;
  overflow: auto;
}

.menu-kicker {
  color: #ad251d;
  font-weight: 900;
  letter-spacing: 0.2em;
}

.menu-card h2 {
  margin: 0.45vw 0;
  font-size: clamp(28px, 3.1vw, 50px);
}

.menu-card p {
  max-width: 780px;
  margin: 0 auto 1vw;
  line-height: 1.42;
  font-size: clamp(14px, 1.08vw, 18px);
  font-weight: 800;
}

.sound-btn {
  margin: 0.2vw auto 1vw;
  padding: 0.72vw 1.45vw;
  border-radius: 999px;
  border: 2px solid #d6a84e;
  background: linear-gradient(180deg, #c7332c, #8d1a17);
  color: #fff4cf;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0,0,0,0.25);
}

.sound-btn.sound-on,
.sound-btn.sound-ready,
.mobile-actions .sound-on,
.mobile-actions .sound-ready {
  background: linear-gradient(180deg, #1f8f43, #0d5a2b) !important;
}

.sound-btn.sound-off,
.mobile-actions .sound-off {
  background: linear-gradient(180deg, #1d5fa8, #0b2d66) !important;
}

.quiz-setup-panel {
  position: relative;
  max-width: 720px;
  margin: 1vw auto 0;
  padding: 1vw;
  border-radius: 1vw;
  text-align: left;
  color: #102b5d;
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.75), transparent 28%),
    linear-gradient(180deg, rgba(255, 250, 226, 0.98), rgba(224, 186, 94, 0.94));
  border: 3px solid rgba(156, 36, 30, 0.72);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.28),
    inset 0 0 0 2px rgba(255, 240, 184, 0.72),
    inset 0 0 28px rgba(116, 70, 8, 0.12);
  overflow: hidden;
}

.quiz-setup-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.36) 45%, transparent 62%);
  transform: translateX(-120%);
  animation: setupSweep 4.6s ease-in-out infinite;
}

@keyframes setupSweep {
  0%, 45% { transform: translateX(-120%); }
  70%, 100% { transform: translateX(120%); }
}

.setup-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 0.85vw;
}

.setup-kicker {
  display: inline-block;
  margin-bottom: 0.2vw;
  color: #9d241d;
  font-size: clamp(11px, 0.85vw, 14px);
  font-weight: 900;
  letter-spacing: 0.14em;
}

.setup-header h3 {
  margin: 0;
  color: #102b5d;
  font-size: clamp(20px, 1.65vw, 30px);
  line-height: 1.05;
}

.setup-current {
  flex: 0 0 auto;
  min-width: min(280px, 44%);
  padding: 0.55vw 0.75vw;
  border-radius: 0.85vw;
  text-align: center;
  color: #fff6d7;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 232, 145, 0.26), transparent 64%),
    linear-gradient(180deg, #153d7a, #071b42);
  border: 2px solid rgba(245, 204, 114, 0.95);
  box-shadow:
    0 8px 18px rgba(0,0,0,0.28),
    inset 0 0 14px rgba(255, 229, 139, 0.12);
}

.setup-current span {
  display: block;
  margin-bottom: 0.2vw;
  color: rgba(255, 240, 190, 0.82);
  font-size: clamp(10px, 0.75vw, 13px);
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.setup-current strong {
  display: block;
  color: #fff8d6;
  font-size: clamp(15px, 1.08vw, 19px);
  line-height: 1.18;
  text-shadow: 0 2px 6px rgba(0,0,0,0.78);
}

.setup-quick-start {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 1.1fr 0.9fr;
  gap: 0.65vw;
  margin: 0.55vw 0 0.75vw;
  padding: 0.75vw;
  border-radius: 0.9vw;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 238, 164, 0.38), transparent 62%),
    linear-gradient(180deg, rgba(15, 45, 94, 0.95), rgba(7, 20, 51, 0.95));
  border: 2px solid rgba(245, 204, 114, 0.86);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.26),
    inset 0 0 18px rgba(255, 224, 128, 0.12);
}

.setup-quick-start .primary-start,
.setup-quick-start .setup-vault-btn {
  min-height: 58px;
  border-radius: 999px;
  border: 2px solid rgba(255, 224, 142, 0.94);
  font-size: clamp(13px, 1vw, 17px);
  box-shadow:
    0 8px 16px rgba(0,0,0,0.28),
    inset 0 0 12px rgba(255,255,255,0.18);
}

.setup-quick-start .primary-start {
  background: linear-gradient(180deg, #c7302a, #8a1715);
  color: #fff6d6;
  text-transform: uppercase;
  letter-spacing: 0.035em;
  animation: startPulse 2.2s ease-in-out infinite;
}

.setup-quick-start .multiplayer-start {
  background: linear-gradient(180deg, #224f97, #0d2b64);
}

.setup-quick-start .setup-vault-btn {
  background: linear-gradient(180deg, #d9a931, #966012);
  color: #102b5d;
  text-transform: uppercase;
}

@keyframes startPulse {
  0%, 100% { transform: translateY(0); filter: brightness(1); }
  50% { transform: translateY(-1px); filter: brightness(1.12); }
}

.setup-start-note {
  position: relative;
  z-index: 2;
  margin: -0.25vw 0 0.75vw;
  color: rgba(16, 43, 93, 0.88);
  font-size: clamp(12px, 0.82vw, 15px);
  font-weight: 900;
  text-align: center;
}

.menu-buttons-secondary {
  margin-top: 0.75vw;
  opacity: 0.92;
}

.setup-field {
  position: relative;
  padding: 0.72vw;
  border-radius: 0.85vw;
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(16, 43, 93, 0.16);
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.24);
}

.setup-field.important-choice {
  background:
    linear-gradient(180deg, rgba(255, 246, 207, 0.96), rgba(255, 230, 152, 0.92));
  border: 2px solid rgba(157, 36, 29, 0.62);
  box-shadow:
    0 6px 14px rgba(0,0,0,0.14),
    inset 0 0 18px rgba(255, 255, 255, 0.32);
}

.setup-field small {
  display: block;
  margin-top: 0.38vw;
  color: rgba(16, 43, 93, 0.78);
  font-size: clamp(11px, 0.78vw, 14px);
  font-weight: 800;
  line-height: 1.25;
}

.setup-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  margin-right: 0.35vw;
  padding: 0 0.45vw;
  border-radius: 999px;
  color: #fff7d0;
  background: linear-gradient(180deg, #b82822, #7b1515);
  border: 1px solid rgba(255, 231, 156, 0.72);
  box-shadow: 0 3px 8px rgba(0,0,0,0.18);
  font-size: clamp(11px, 0.78vw, 14px);
  letter-spacing: 0.03em;
}

.settings-grid .important-choice label {
  color: #8a1715;
  font-size: clamp(15px, 1.05vw, 20px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.settings-grid .important-choice select {
  min-height: 48px;
  border: 2px solid rgba(16, 43, 93, 0.4);
  border-radius: 0.75vw;
  color: #102b5d;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,247,218,0.98));
  box-shadow:
    0 4px 10px rgba(0,0,0,0.12),
    inset 0 0 0 1px rgba(255,255,255,0.88);
  cursor: pointer;
}

.settings-grid .important-choice select:focus,
.menu-name-input:focus {
  outline: none;
  border-color: rgba(172, 37, 29, 0.95);
  box-shadow:
    0 0 0 4px rgba(255, 211, 77, 0.35),
    0 6px 16px rgba(0,0,0,0.18);
}

.setup-reminder {
  position: relative;
  margin-top: 0.8vw;
  padding: 0.65vw 0.8vw;
  border-radius: 999px;
  text-align: center;
  color: #fff7d2;
  background: linear-gradient(180deg, #a6261f, #761414);
  border: 2px solid rgba(245, 204, 114, 0.88);
  box-shadow: 0 8px 16px rgba(0,0,0,0.18);
  font-size: clamp(12px, 0.88vw, 16px);
  font-weight: 800;
}

.setup-reminder strong {
  color: #ffe596;
}

.selection-start {
  position: relative;
  min-width: 210px;
}

.selection-start::after {
  content: none;
}

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1vw;
  margin: 1.1vw auto 0;
  max-width: 640px;
  text-align: left;
}

.settings-grid label {
  display: block;
  font-weight: 900;
  margin-bottom: 0.3vw;
}

.settings-grid select,
.menu-name-input {
  width: 100%;
  height: 2.4vw;
  min-height: 36px;
  border-radius: 0.45vw;
  border: 1px solid rgba(16, 43, 93, 0.25);
  padding: 0 0.65vw;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  color: #102b5d;
  background: rgba(255, 255, 255, 0.78);
}

.menu-name-input::placeholder {
  color: rgba(16, 43, 93, 0.58);
}

.settings-wide {
  grid-column: 1 / -1;
}

.menu-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75vw;
  margin-top: 1vw;
}

.menu-buttons button,
.verse-card button,
.mobile-actions button,
.vault-actions button {
  padding: 0.78vw 1.35vw;
  border-radius: 999px;
  border: 2px solid #d6a84e;
  background: linear-gradient(180deg, #c7332c, #8d1a17);
  color: #fff4cf;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(13px, 1vw, 18px);
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

.menu-note {
  margin-top: 1vw;
  color: #6b4516;
  font-size: clamp(11px, 0.92vw, 15px);
  font-weight: 800;
}

/* CELEBRATION */

.celebration-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  place-items: center;
  overflow: hidden;
  pointer-events: auto;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 225, 128, 0.16), rgba(0,0,0,0.32) 62%, rgba(0,0,0,0.62));
}

.celebration-screen.show {
  display: grid;
}

.celebration-screen.multiplayer-quick {
  z-index: 1290;
  pointer-events: none;
  background: transparent;
}

.celebration-screen.multiplayer-quick .verse-card,
.celebration-screen.multiplayer-quick .verse-comet,
.celebration-screen.multiplayer-quick .verse-firework {
  display: none !important;
}

.celebration-screen.multiplayer-quick .firework {
  filter: drop-shadow(0 0 12px rgba(255, 235, 150, 0.72));
}

.muzzle-flash,
.flying-ball,
.impact-burst,
.kaboom-burst {
  display: none;
}

.celebration-screen.perfect .muzzle-flash,
.celebration-screen.perfect .flying-ball,
.celebration-screen.perfect .impact-burst,
.celebration-screen.perfect .kaboom-burst {
  display: block;
}

.muzzle-flash {
  position: absolute;
  z-index: 5;
  width: 18vw;
  height: 18vw;
  border-radius: 50%;
  opacity: 0;
  background:
    radial-gradient(circle, #fff8c9 0 10%, #ffd24d 11% 25%, #ff6b22 26% 48%, transparent 60%);
  filter: blur(2px) drop-shadow(0 0 28px rgba(255, 150, 30, 0.95));
}

.flash-left {
  left: 24.6%;
  bottom: 35.4%;
}

.flash-right {
  right: 24.6%;
  bottom: 35.4%;
}

.celebration-screen.show.perfect .flash-left,
.celebration-screen.show.perfect .flash-right {
  animation: muzzleFlash 1.05s ease-out 1.65s forwards;
}

.smoke-layer,
.fireworks-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.smoke-puff {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,0.98), rgba(230,230,230,0.78) 38%, rgba(180,180,180,0.36) 65%, transparent 78%);
  filter: blur(12px);
  animation-name: smokeBillow;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

.flying-ball {
  position: absolute;
  z-index: 6;
  width: clamp(44px, 5.8vw, 102px);
  opacity: 0;
  filter:
    drop-shadow(0 0 12px rgba(255, 210, 110, 0.35))
    drop-shadow(0 14px 18px rgba(0,0,0,0.5));
}

.ball-left {
  left: 26.4%;
  bottom: 37.1%;
  transform: rotate(-14deg);
}

.ball-right {
  right: 26.4%;
  bottom: 37.1%;
  transform: scaleX(-1) rotate(-14deg);
}

.celebration-screen.show.perfect .ball-left {
  animation: ballLeft 1.28s cubic-bezier(.18,.8,.2,1) 1.95s forwards;
}

.celebration-screen.show.perfect .ball-right {
  animation: ballRight 1.28s cubic-bezier(.18,.8,.2,1) 2.08s forwards;
}

.impact-burst {
  position: absolute;
  left: 50%;
  top: 48%;
  z-index: 7;
  width: 34vw;
  height: 34vw;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.25);
  background:
    radial-gradient(circle, #fffdd2 0 7%, #ffd24d 8% 18%, #ff5c27 19% 32%, rgba(255, 40, 28, 0.45) 33% 50%, transparent 62%),
    repeating-conic-gradient(from 0deg, rgba(255,255,210,0.9) 0 4deg, transparent 4deg 9deg);
  filter: drop-shadow(0 0 30px rgba(255, 218, 92, 1));
}

.celebration-screen.show.perfect .impact-burst {
  animation: impactBurst 1.65s ease-out 3.1s forwards;
}

.kaboom-burst {
  position: absolute;
  left: 50%;
  top: 45.5%;
  z-index: 8;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.25) rotate(-6deg);
  color: #fff6bd;
  font-size: clamp(44px, 8vw, 132px);
  font-weight: 900;
  letter-spacing: 0.05em;
  text-shadow:
    0 0 5px #fff,
    0 0 16px #ffcf3f,
    0 0 30px #ff741f,
    0 0 52px #d71919,
    4px 5px 0 #811414,
    -3px -3px 0 #0b2a62;
  filter: drop-shadow(0 0 25px rgba(255, 210, 70, 0.9));
}

.celebration-screen.show.perfect .kaboom-burst {
  animation: kaboomPop 1.35s ease-out 3.05s forwards;
}

.firework {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  filter: drop-shadow(0 0 16px rgba(255, 235, 150, 0.8));
}

.firework.ring {
  background:
    radial-gradient(circle, #fff8c9 0 4%, transparent 5%),
    repeating-conic-gradient(from 0deg, rgba(255,255,255,0.95) 0 4deg, transparent 4deg 8deg, rgba(255,70,60,0.95) 8deg 12deg, transparent 12deg 16deg, rgba(70,130,255,0.95) 16deg 20deg, transparent 20deg 24deg, rgba(255,220,70,0.95) 24deg 28deg, transparent 28deg 32deg);
  animation-name: fireworkPop;
}

.firework.star {
  background:
    radial-gradient(circle, #fff9d4 0 5%, transparent 6%),
    repeating-conic-gradient(from 10deg, rgba(255,244,180,1) 0 3deg, transparent 3deg 10deg, rgba(255,70,45,0.9) 10deg 13deg, transparent 13deg 20deg);
  clip-path: polygon(50% 0%, 61% 34%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 34%);
  animation-name: fireworkSpin;
}

.firework.sparkle {
  background:
    radial-gradient(circle, #ffffff 0 3%, transparent 4%),
    repeating-conic-gradient(from 0deg, rgba(255,255,255,0.95) 0 2deg, transparent 2deg 12deg, rgba(255,215,80,0.85) 12deg 14deg, transparent 14deg 24deg);
  animation-name: fireworkPop;
}

.firework.blue {
  background:
    radial-gradient(circle, #ffffff 0 4%, transparent 5%),
    repeating-conic-gradient(from 0deg, rgba(80,145,255,0.95) 0 4deg, transparent 4deg 9deg, rgba(255,255,255,0.95) 9deg 12deg, transparent 12deg 18deg);
  animation-name: fireworkPop;
}

.firework.gold {
  background:
    radial-gradient(circle, #fffbd0 0 4%, transparent 5%),
    repeating-conic-gradient(from 0deg, rgba(255,231,90,0.95) 0 4deg, transparent 4deg 8deg, rgba(255,165,42,0.88) 8deg 11deg, transparent 11deg 18deg);
  animation-name: fireworkPop;
}

.firework.crackle {
  background:
    radial-gradient(circle, #fff 0 4%, transparent 5%),
    repeating-radial-gradient(circle, rgba(255,244,180,0.95) 0 2px, transparent 2px 9px),
    repeating-conic-gradient(from 0deg, rgba(255,70,45,0.9) 0 3deg, transparent 3deg 13deg);
  animation-name: fireworkCrackle;
}

.celebration-screen.show .firework {
  animation-duration: 1.15s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

.verse-comet {
  position: absolute;
  z-index: 8;
  left: -12%;
  top: 18%;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, #fffefa 0 18%, #ffe56e 19% 44%, #ff7a28 45% 70%, transparent 72%);
  box-shadow:
    0 0 20px rgba(255,255,255,0.95),
    0 0 42px rgba(255,211,69,0.85),
    0 0 70px rgba(255,75,35,0.65);
}

.verse-comet::after {
  content: "";
  position: absolute;
  right: 28px;
  top: 50%;
  width: 220px;
  height: 18px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), rgba(255,225,90,0.9));
  filter: blur(3px);
}

.verse-firework {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 45%;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.2);
  background:
    radial-gradient(circle, #ffffff 0 4%, transparent 5%),
    repeating-conic-gradient(
      from 0deg,
      rgba(255,255,255,1) 0 3deg,
      transparent 3deg 8deg,
      rgba(255,215,80,1) 8deg 12deg,
      transparent 12deg 18deg,
      rgba(255,65,44,0.95) 18deg 21deg,
      transparent 21deg 27deg,
      rgba(80,145,255,0.95) 27deg 31deg,
      transparent 31deg 36deg
    );
  filter:
    drop-shadow(0 0 20px rgba(255,255,255,0.9))
    drop-shadow(0 0 55px rgba(255,214,80,0.95));
}

.celebration-screen.show.normal .verse-comet {
  animation: verseComet 0.95s ease-in 4.75s forwards;
}

.celebration-screen.show.normal .verse-firework {
  animation: verseFirework 1.25s ease-out 5.35s forwards;
}

.celebration-screen.show.perfect .verse-comet {
  animation: verseComet 0.95s ease-in 7.05s forwards;
}

.celebration-screen.show.perfect .verse-firework {
  animation: verseFirework 1.25s ease-out 7.65s forwards;
}

.verse-card {
  position: relative;
  z-index: 10;
  width: min(84%, 880px);
  padding: 2vw;
  border-radius: 1.3vw;
  text-align: center;
  color: #102b5d;
  background:
    linear-gradient(180deg, rgba(255, 244, 206, 0.99), rgba(228, 196, 122, 0.98));
  border: 3px solid rgba(245, 204, 114, 0.98);
  box-shadow:
    0 24px 55px rgba(0,0,0,0.65),
    0 0 60px rgba(255, 214, 103, 0.25);
  opacity: 0;
  transform: translateY(18px) scale(0.94);
}

.celebration-screen.show.normal .verse-card {
  animation: verseArrive 0.95s ease-out 5.7s forwards;
}

.celebration-screen.show.perfect .verse-card {
  animation: verseArrive 0.95s ease-out 8.05s forwards;
}

.verse-card.gold {
  border: 6px solid #ffd54d;
  box-shadow:
    0 24px 55px rgba(0,0,0,0.65),
    0 0 28px rgba(255, 213, 77, 0.8),
    0 0 90px rgba(255, 168, 32, 0.42);
}

.verse-kicker {
  color: #ad251d;
  font-weight: 900;
  letter-spacing: 0.2em;
}

.verse-card h2 {
  margin: 0.45vw 0;
  font-size: clamp(28px, 3.4vw, 56px);
}

.verse-card p {
  font-size: clamp(16px, 1.35vw, 24px);
  line-height: 1.5;
  font-weight: 800;
}

.verse-tags {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5vw;
  margin: 1vw 0;
}

.verse-tags span {
  padding: 0.4vw 0.6vw;
  border-radius: 999px;
  background: rgba(16, 43, 93, 0.12);
  border: 1px solid rgba(16, 43, 93, 0.22);
  font-weight: 900;
}

.gold-seal {
  display: none;
  position: absolute;
  right: 1.1vw;
  top: 1.1vw;
  width: 106px;
  height: 106px;
  background-image: url("assets/gold-seal-cannonball.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  filter:
    drop-shadow(0 0 12px rgba(255, 213, 77, 0.95))
    drop-shadow(0 0 26px rgba(255, 118, 30, 0.6));
}

.verse-card.gold .gold-seal {
  display: block;
}


.verse-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75vw;
  margin-top: 1vw;
}

.verse-actions .hidden {
  display: none;
}

.retry-round-btn {
  background: linear-gradient(180deg, #173b78, #071b41) !important;
  border-color: #d6a84e !important;
}

/* VAULT */

.vault-screen {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 22%, rgba(255, 216, 112, 0.2), transparent 34%),
    rgba(0, 0, 0, 0.72);
}

.vault-screen.hidden {
  display: none;
}

.vault-card {
  width: min(94vw, 940px);
  max-height: 90vh;
  overflow: auto;
  border-radius: 22px;
  padding: 22px;
  color: #102b5d;
  background:
    linear-gradient(180deg, rgba(255, 244, 206, 0.99), rgba(228, 196, 122, 0.98));
  border: 3px solid rgba(245, 204, 114, 0.98);
  box-shadow:
    0 28px 70px rgba(0,0,0,0.7),
    0 0 55px rgba(255, 214, 103, 0.22);
}

.vault-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
}

.vault-kicker {
  color: #ad251d;
  font-weight: 900;
  letter-spacing: 0.2em;
  font-size: 0.9rem;
}

.vault-card h2 {
  margin: 4px 0 0;
  font-size: clamp(30px, 3.4vw, 54px);
}

.vault-close {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid rgba(16, 43, 93, 0.25);
  background: rgba(255,255,255,0.55);
  color: #102b5d;
  font-size: 1.7rem;
  font-weight: 900;
  cursor: pointer;
}

.vault-subtitle {
  margin: 10px 0 16px;
  font-weight: 800;
  color: rgba(16,43,93,0.78);
}

.vault-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.vault-stats span {
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(16, 43, 93, 0.12);
  border: 1px solid rgba(16, 43, 93, 0.18);
  font-weight: 900;
}

.vault-list {
  display: grid;
  gap: 12px;
}

.vault-item {
  position: relative;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(16, 43, 93, 0.16);
  box-shadow: 0 8px 18px rgba(68, 43, 9, 0.1);
}

.vault-item.gold {
  border: 3px solid #ffd54d;
  background:
    radial-gradient(circle at 92% 14%, rgba(255,213,77,0.28), transparent 24%),
    rgba(255,255,255,0.62);
}

.vault-item h3 {
  margin: 0 0 7px;
  font-size: clamp(21px, 2vw, 32px);
  color: #102b5d;
}

.vault-item p {
  margin: 0 0 10px;
  line-height: 1.45;
  font-weight: 800;
}

.vault-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.vault-badges span {
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(16,43,93,0.1);
  border: 1px solid rgba(16,43,93,0.14);
  font-size: 0.82rem;
  font-weight: 900;
}

.vault-badges .gold-badge {
  background: rgba(255,213,77,0.32);
  border-color: rgba(180, 125, 19, 0.4);
  color: #7a4100;
}

.empty-vault {
  padding: 24px;
  border-radius: 16px;
  text-align: center;
  font-weight: 900;
  background: rgba(255,255,255,0.45);
  border: 1px dashed rgba(16,43,93,0.3);
}

.vault-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.vault-actions #clearVaultBtn {
  background: linear-gradient(180deg, #5c6470, #2e3540);
}

/* ROUND INTRO */

.round-intro-screen {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: grid;
  place-items: center;
  padding: 20px;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 230, 145, 0.22), transparent 36%),
    rgba(0, 0, 0, 0.48);
}

.round-intro-screen.hidden {
  display: none;
}

.round-intro-card {
  width: min(82vw, 560px);
  padding: 26px 22px 24px;
  border-radius: 26px;
  text-align: center;
  color: #102b5d;
  background:
    linear-gradient(180deg, rgba(255, 244, 206, 0.99), rgba(228, 196, 122, 0.98));
  border: 4px solid rgba(245, 204, 114, 1);
  box-shadow:
    0 30px 70px rgba(0,0,0,0.72),
    0 0 50px rgba(255, 218, 92, 0.36);
  opacity: 0;
  transform: translateY(20px) scale(0.88);
}

.round-intro-screen.show .round-intro-card {
  animation: roundIntroShow 4.25s ease-in-out forwards;
}

.round-intro-banner {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  color: #fff4ca;
  font-size: clamp(18px, 3vw, 32px);
  font-weight: 900;
  letter-spacing: 0.12em;
  background:
    linear-gradient(180deg, rgba(16, 55, 110, 0.98), rgba(4, 19, 48, 0.98));
  border: 2px solid rgba(245, 204, 114, 0.9);
  text-shadow: 0 2px 5px #000;
}

.round-intro-portrait {
  position: relative;
  width: clamp(130px, 19vw, 210px);
  aspect-ratio: 1;
  margin: 16px auto 10px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle, rgba(255, 240, 184, 0.96), rgba(201, 145, 48, 0.9));
  border: 4px solid rgba(255, 231, 156, 0.96);
  box-shadow:
    inset 0 0 22px rgba(255,255,255,0.34),
    0 0 30px rgba(0,0,0,0.45);
}

.round-intro-portrait img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 8%;
  transform: scale(1.08);
  display: none;
}

.round-intro-portrait.has-image img {
  display: block;
}

.round-intro-portrait.has-image .round-intro-placeholder {
  display: none;
}

.round-intro-placeholder {
  font-size: clamp(34px, 6vw, 72px);
  color: #061f4b;
  font-weight: 900;
}

.round-intro-card h2 {
  margin: 6px 0 3px;
  font-size: clamp(30px, 4.8vw, 58px);
  line-height: 1;
}

.round-intro-card p {
  margin: 0;
  color: #7b4c12;
  font-size: clamp(17px, 2.4vw, 28px);
  font-weight: 900;
}

.round-intro-motto {
  margin-top: 14px;
  color: #ad251d;
  font-size: clamp(13px, 1.6vw, 20px);
  font-weight: 900;
  letter-spacing: 0.08em;
}

/* DESKTOP FIT / NO-SCROLL */

@media (min-width: 901px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  .app {
    height: 100dvh;
    min-height: 0;
    padding: 8px;
  }

  .stage {
    height: min(calc(100dvh - 16px), 75vw, 1125px);
    width: auto;
    max-width: min(100%, 1500px);
  }
}

/* MOBILE */

@media (max-width: 900px) {
  .app {
    display: block;
    padding: 0;
    background:
      linear-gradient(rgba(3, 11, 25, 0.04), rgba(3, 11, 25, 0.18)),
      url("assets/cannonquiz-mobile-bg-v1.png");
    background-size: cover;
    background-position: center top;
    background-attachment: scroll;
  }

  .stage {
    display: none;
  }

  .mobile-game {
    display: block;
    min-height: 100vh;
    padding: 12px 12px 185px;
    background:
      linear-gradient(rgba(3, 11, 25, 0.02), rgba(3, 11, 25, 0.16)),
      url("assets/cannonquiz-mobile-bg-v1.png");
    background-size: cover;
    background-position: center top;
    background-attachment: scroll;
  }

  .mobile-game::before,
  .mobile-game::after {
    content: "";
    position: fixed;
    bottom: -34px;
    width: 69vw;
    height: 42vw;
    z-index: 40;
    pointer-events: none;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
    filter:
      drop-shadow(0 8px 12px rgba(0,0,0,0.65))
      drop-shadow(0 0 8px rgba(255,220,120,0.18));
  }

  .mobile-game::before {
    left: -28vw;
    background-image: url("assets/left-cannon.png");
  }

  .mobile-game::after {
    right: -28vw;
    background-image: url("assets/right-cannon.png");
  }

  .mobile-game.cannon-charge-mid::before,
  .mobile-game.cannon-charge-mid::after {
    filter:
      drop-shadow(0 8px 12px rgba(0,0,0,0.65))
      drop-shadow(0 0 14px rgba(255,220,120,0.36));
  }

  .mobile-game.cannon-charge-high::before,
  .mobile-game.cannon-charge-high::after,
  .mobile-game.cannon-charge-full::before,
  .mobile-game.cannon-charge-full::after {
    filter:
      drop-shadow(0 8px 12px rgba(0,0,0,0.65))
      drop-shadow(0 0 20px rgba(255,220,120,0.55))
      drop-shadow(0 0 30px rgba(255,112,36,0.28));
  }

  .mobile-header {
    text-align: center;
    padding: 8px 0 12px;
    text-shadow: 0 2px 5px #000;
  }

  .mobile-header .faith {
    font-size: 0.78rem;
    letter-spacing: 0.17em;
  }

  .mobile-header h1 {
    margin: 10px 0 2px;
    font-size: clamp(2.2rem, 11vw, 4.4rem);
    line-height: 0.9;
    color: #fff4ca;
    letter-spacing: 0.08em;
  }

  .mobile-header p {
    margin: 8px 0 0;
    color: #ffe2a1;
    font-weight: 900;
  }

  .mobile-cannon-stage {
    position: relative;
    min-height: 285px;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 12px;
    background:
      linear-gradient(rgba(0,0,0,0.02), rgba(0,0,0,0.08)),
      url("assets/cannonquiz-mobile-bg-v1.png");
    background-size: cover;
    background-position: center 43%;
    border: 2px solid rgba(245, 204, 114, 0.72);
    box-shadow: 0 14px 28px rgba(0,0,0,0.42);
  }

  .mobile-stage-overlay {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(0,0,0,0.01), rgba(0,0,0,0.06)),
      radial-gradient(circle at 50% 40%, transparent, rgba(0,0,0,0.06));
  }

  .mobile-stage-cannon {
    display: none;
  }

  .mobile-president-card {
    position: absolute;
    z-index: 3;
    left: 12px;
    top: 12px;
    transform: none;
    width: 145px;
    display: grid;
    justify-items: center;
    color: #fff4ca;
    text-align: center;
    text-shadow: 0 2px 5px #000;
  }

  .mobile-president-card .round-banner {
    padding: 6px 12px;
    font-size: 0.95rem;
  }

  .mobile-president-frame {
    width: 82px;
    margin-top: 7px;
  }

  .mobile-president-card strong {
    display: block;
    margin-top: 6px;
    font-size: 0.95rem;
    line-height: 1.05;
  }

  .mobile-president-card span {
    display: block;
    margin-top: 2px;
    color: #ffe4a3;
    font-size: 0.82rem;
    font-weight: 900;
  }

  .mobile-stats,
  .mobile-player,
  .mobile-question-card,
  .mobile-fuse,
  .mobile-friendly {
    border-radius: 18px;
    background:
      linear-gradient(180deg, rgba(255, 244, 206, 0.82), rgba(228, 196, 122, 0.76));
    border: 2px solid rgba(245, 204, 114, 0.95);
    color: #102b5d;
    box-shadow: 0 12px 28px rgba(0,0,0,0.35);
    backdrop-filter: blur(1px);
  }

  .mobile-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 10px;
    margin-bottom: 12px;
  }

  .mobile-stats div {
    text-align: center;
    border-radius: 12px;
    background: rgba(16, 43, 93, 0.1);
    padding: 8px 4px;
  }

  .mobile-stats span {
    display: block;
    font-size: 0.75rem;
    color: #7b4c12;
    font-weight: 900;
  }

  .mobile-stats strong {
    display: block;
    margin-top: 4px;
    color: #102b5d;
    font-size: 1rem;
  }

  .mobile-player,
  .mobile-question-card,
  .mobile-friendly {
    padding: 14px;
    margin-bottom: 12px;
  }

  .mobile-fuse {
    padding: 10px 12px 12px;
    margin: 0;
  }

  .mobile-player label {
    display: block;
    color: #7b4c12;
    font-weight: 900;
    margin-bottom: 6px;
  }

  .mobile-player input {
    width: 100%;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(16, 43, 93, 0.2);
    padding: 0 12px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.1rem;
    font-weight: 900;
    color: #102b5d;
  }

  .mobile-question-card .quiz-meta {
    margin-bottom: 14px;
    font-size: 0.78rem;
  }

  .mobile-question-card h2 {
    margin: 0;
    text-align: center;
    color: #082864;
    font-size: clamp(1.35rem, 6.3vw, 2.2rem);
    line-height: 1.22;
  }

  .mobile-answers {
    margin-top: 18px;
    gap: 12px;
  }

  .mobile-answer-btn {
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    border: 0;
    background: transparent;
    font-family: Georgia, "Times New Roman", serif;
    cursor: pointer;
  }

  .mobile-answer-btn span {
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
  }

  .mobile-answer-btn em {
    min-height: 54px;
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 1.05rem;
    background: rgba(255, 246, 217, 0.95);
  }

  .mobile-question-card .feedback {
    margin-top: 10px;
    font-size: 1rem;
  }

  .mobile-question-card .feedback:empty {
    margin-top: 0;
  }

  .mobile-fuse {
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: 10px;
    z-index: 62;
    text-align: center;
    color: #102b5d;
    background:
      radial-gradient(circle at 50% 0%, rgba(255, 238, 162, 0.32), transparent 52%),
      linear-gradient(180deg, rgba(255, 244, 206, 0.96), rgba(224, 182, 93, 0.94));
    border: 3px solid rgba(245, 204, 114, 0.98);
    box-shadow:
      0 10px 24px rgba(0,0,0,0.42),
      0 0 22px rgba(255, 211, 77, 0.22);
    backdrop-filter: blur(2px);
  }

  .mobile-fuse .mobile-rule {
    margin-bottom: 6px;
    padding: 5px 9px;
    font-size: clamp(0.72rem, 3vw, 0.98rem);
    color: #fff7cf;
    letter-spacing: 0.045em;
  }

  .mobile-fuse-title-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }

  .mobile-fuse-icon {
    width: 32px;
    height: 32px;
  }

  .mobile-fuse .cannon-title {
    color: #9d241d;
    font-size: clamp(1.12rem, 5.1vw, 1.55rem);
    text-shadow: none;
  }

  .mobile-fuse .cannon-percent {
    color: #7b4c12;
    text-shadow: none;
    font-size: 1.02rem;
  }

  .mobile-fuse .fuse-bar {
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    height: 22px;
    margin-top: 7px;
  }

  .mobile-fuse .fuse-spark {
    width: 28px;
    height: 28px;
  }

  .mobile-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 12px;
  }

  .mobile-actions button {
    min-height: 46px;
    font-size: 1rem;
  }

  .mobile-friendly h3 {
    margin: 0 0 10px;
    color: #9d241d;
    text-align: center;
  }

  .menu-card {
    width: min(94vw, 520px);
    max-height: 92vh;
    overflow: auto;
    padding: 22px 16px;
    border-radius: 22px;
  }

  .menu-card h2 {
    font-size: clamp(2rem, 9vw, 3.2rem);
  }

  .menu-card p {
    font-size: 1rem;
  }

  .menu-buttons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .menu-buttons button {
    min-height: 48px;
    width: 100%;
  }

  .menu-name-input {
    height: 44px;
    font-size: 1rem;
  }

  .settings-grid {
    grid-template-columns: 1fr;
  }

  .quiz-setup-panel {
    margin-top: 14px;
    padding: 14px;
    border-radius: 18px;
  }

  .setup-header {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .setup-current {
    min-width: 0;
    width: 100%;
    padding: 10px;
    border-radius: 16px;
  }


  .setup-quick-start {
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 10px 0 12px;
    padding: 12px;
    border-radius: 18px;
  }

  .setup-quick-start .primary-start,
  .setup-quick-start .setup-vault-btn {
    min-height: 54px;
    font-size: 0.98rem;
  }

  .setup-start-note {
    margin: 0 0 12px;
    font-size: 0.92rem;
  }

  .setup-field {
    padding: 12px;
    border-radius: 16px;
  }

  .settings-grid .important-choice select,
  .settings-grid select,
  .menu-name-input {
    min-height: 50px;
    font-size: 1.04rem;
    border-radius: 14px;
  }

  .settings-grid .important-choice label {
    font-size: 1rem;
  }

  .setup-reminder {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 16px;
    font-size: 0.95rem;
  }

  .selection-start {
    min-width: 0;
    padding-bottom: 12px !important;
  }

  .selection-start::after {
    margin-top: 4px;
    font-size: 0.78rem;
  }

  .celebration-screen {
    padding: 12px;
  }

  .verse-card {
    width: min(94%, 640px);
    padding: 22px 16px 18px;
    border-radius: 20px;
  }

  .verse-card h2 {
    font-size: 2rem;
  }

  .verse-card p {
    font-size: 1.05rem;
  }

  .gold-seal {
    width: 72px;
    height: 72px;
    right: 10px;
    top: 10px;
  }

  .flying-ball {
    width: 58px;
  }

  .kaboom-burst {
    font-size: clamp(34px, 13vw, 70px);
  }

  .verse-firework {
    width: 300px;
    height: 300px;
  }

  .vault-card {
    padding: 18px;
  }

  .vault-actions button {
    width: 100%;
    min-height: 46px;
  }

  .round-intro-card {
    width: min(92vw, 420px);
    padding: 22px 16px 20px;
  }

  .round-intro-portrait {
    width: 132px;
  }

  .history-hotspots {
    display: none;
  }

  .footer {
    display: none;
  }
}

/* ANIMATIONS */

@keyframes sparkPulse {
  from { transform: translate(-50%, -50%) scale(0.9); opacity: 0.75; }
  to { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}

@keyframes fusePulse {
  from { opacity: 0.86; }
  to { opacity: 1; }
}

@keyframes stageCannonRumbleLeft {
  0%, 100% { transform: translate(0,0) rotate(0deg); }
  8% { transform: translate(-6px,3px) rotate(0deg); }
  16% { transform: translate(6px,-3px) rotate(0deg); }
  24% { transform: translate(-7px,-2px) rotate(0deg); }
  32% { transform: translate(6px,4px) rotate(0deg); }
  42% { transform: translate(-5px,2px) rotate(0deg); }
  52% { transform: translate(5px,-2px) rotate(0deg); }
  64% { transform: translate(-4px,1px) rotate(0deg); }
  76% { transform: translate(3px,-1px) rotate(0deg); }
}

@keyframes stageCannonRumbleRight {
  0%, 100% { transform: translate(0,0) rotate(0deg); }
  8% { transform: translate(6px,3px) rotate(0deg); }
  16% { transform: translate(-6px,-3px) rotate(0deg); }
  24% { transform: translate(7px,-2px) rotate(0deg); }
  32% { transform: translate(-6px,4px) rotate(0deg); }
  42% { transform: translate(5px,2px) rotate(0deg); }
  52% { transform: translate(-5px,-2px) rotate(0deg); }
  64% { transform: translate(4px,1px) rotate(0deg); }
  76% { transform: translate(-3px,-1px) rotate(0deg); }
}

@keyframes stageCannonRecoilLeft {
  0% { transform: translate(0,0) rotate(0deg) scale(1); }
  15% { transform: translate(-44px,18px) rotate(0deg) scale(0.97); }
  38% { transform: translate(-16px,7px) rotate(0deg) scale(0.99); }
  100% { transform: translate(0,0) rotate(0deg) scale(1); }
}

@keyframes stageCannonRecoilRight {
  0% { transform: translate(0,0) rotate(0deg) scale(1); }
  15% { transform: translate(44px,18px) rotate(0deg) scale(0.97); }
  38% { transform: translate(16px,7px) rotate(0deg) scale(0.99); }
  100% { transform: translate(0,0) rotate(0deg) scale(1); }
}

@keyframes muzzleFlash {
  0% { opacity: 0; transform: scale(0.3); }
  16% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.95); }
}

@keyframes smokeBillow {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.35);
  }
  14% {
    opacity: 0.96;
  }
  100% {
    opacity: 0;
    transform: translate(var(--smoke-x), var(--smoke-y)) scale(var(--smoke-scale));
  }
}

@keyframes ballLeft {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.72) rotate(-14deg);
  }
  8% {
    opacity: 1;
  }
  78% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(23vw, -26vh) scale(0.25) rotate(10deg);
  }
}

@keyframes ballRight {
  0% {
    opacity: 0;
    transform: translate(0, 0) scaleX(-1) scale(0.72) rotate(-14deg);
  }
  8% {
    opacity: 1;
  }
  78% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-23vw, -26vh) scaleX(-1) scale(0.25) rotate(10deg);
  }
}

@keyframes impactBurst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.18); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.45); }
}

@keyframes kaboomPop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.18) rotate(-10deg); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.1) rotate(-4deg); }
  52% { opacity: 1; transform: translate(-50%, -50%) scale(1.18) rotate(2deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.55) rotate(6deg); }
}

@keyframes fireworkPop {
  0% { opacity: 0; transform: scale(0.16) rotate(0deg); }
  24% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.42) rotate(14deg); }
}

@keyframes fireworkSpin {
  0% { opacity: 0; transform: scale(0.15) rotate(0deg); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.25) rotate(95deg); }
}

@keyframes fireworkCrackle {
  0% { opacity: 0; transform: scale(0.2); filter: brightness(1); }
  22% { opacity: 1; filter: brightness(1.6); }
  55% { opacity: 0.9; filter: brightness(1.1); }
  100% { opacity: 0; transform: scale(1.5); filter: brightness(0.85); }
}

@keyframes verseComet {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.7);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(62vw, 28vh) scale(1.35);
  }
}

@keyframes verseFirework {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.12) rotate(0deg);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.75) rotate(25deg);
  }
}

@keyframes verseArrive {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes quizImpact {
  0%, 100% { transform: translate(0, 0); filter: brightness(1); }
  8% { transform: translate(-10px, 6px); filter: brightness(1.32); }
  16% { transform: translate(11px, -5px); }
  24% { transform: translate(-8px, -4px); }
  32% { transform: translate(8px, 5px); }
  42% { transform: translate(-5px, 2px); }
  54% { transform: translate(5px, -2px); }
  70% { transform: translate(-2px, 1px); }
}

@keyframes roundIntroShow {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.86);
  }
  10% {
    opacity: 1;
    transform: translateY(0) scale(1.02);
  }
  82% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-36vw, -31vh) scale(0.28);
  }
}

@media (max-width: 900px) {
  @keyframes roundIntroShow {
    0% {
      opacity: 0;
      transform: translateY(24px) scale(0.86);
    }
    10% {
      opacity: 1;
      transform: translateY(0) scale(1.02);
    }
    82% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    100% {
      opacity: 0;
      transform: translate(-28vw, -30vh) scale(0.32);
    }
  }
}
/* FIREBASE MULTIPLAYER V21 */

.multiplayer-timer,
.mobile-multiplayer-timer {
  position: absolute;
  z-index: 7;
  display: grid;
  place-items: center;
  padding: 0.42vw 0.9vw;
  border-radius: 999px;
  border: 2px solid rgba(245, 204, 114, 0.86);
  background: rgba(4, 17, 38, 0.88);
  color: #fff3ca;
  font-size: clamp(15px, 1.55vw, 26px);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 5px rgba(0,0,0,0.9);
  box-shadow:
    0 8px 18px rgba(0,0,0,0.42),
    0 0 18px rgba(255, 215, 100, 0.18);
}

.multiplayer-timer {
  right: 6.1%;
  top: 18.6%;
}

.multiplayer-timer.warning,
.mobile-multiplayer-timer.warning {
  animation: timerPulse 0.55s infinite alternate ease-in-out;
  border-color: rgba(255, 101, 68, 0.95);
}

.multiplayer-timer.hidden,
.mobile-multiplayer-timer.hidden {
  display: none;
}

.multiplayer-screen,
.sync-countdown-screen,
.multiplayer-waiting-screen,
.multiplayer-results-screen {
  position: fixed;
  z-index: 1300;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 224, 130, 0.2), transparent 36%),
    rgba(0, 0, 0, 0.72);
}

.multiplayer-screen.hidden,
.sync-countdown-screen.hidden,
.multiplayer-waiting-screen.hidden,
.multiplayer-results-screen.hidden {
  display: none;
}

.multiplayer-card,
.sync-countdown-card,
.multiplayer-waiting-card,
.multiplayer-results-card {
  width: min(92vw, 860px);
  max-height: 92vh;
  overflow: auto;
  padding: 26px;
  border-radius: 20px;
  color: #102b5d;
  background:
    linear-gradient(180deg, rgba(255, 244, 206, 0.99), rgba(228, 196, 122, 0.98));
  border: 3px solid rgba(245, 204, 114, 0.98);
  box-shadow: 0 24px 55px rgba(0,0,0,0.66);
}

.sync-countdown-card,
.multiplayer-waiting-card {
  width: min(90vw, 560px);
  text-align: center;
}

.multiplayer-results-card {
  width: min(94vw, 960px);
}

.multiplayer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.multiplayer-kicker,
.sync-kicker {
  color: #ad251d;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.multiplayer-header h2,
.sync-countdown-card h2,
.multiplayer-waiting-card h2,
.multiplayer-results-card h2 {
  margin: 6px 0 0;
  font-size: clamp(28px, 3.2vw, 52px);
  line-height: 1;
}

.sync-countdown-card h2 {
  margin: 16px 0;
  color: #b72720;
  font-size: clamp(74px, 12vw, 156px);
  text-shadow: 0 3px 0 rgba(255,255,255,0.55);
}

.multiplayer-close {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid #d6a84e;
  background: rgba(255,255,255,0.54);
  color: #102b5d;
  font-size: 24px;
  font-weight: 900;
  cursor: pointer;
}

.multiplayer-subtitle,
.room-rules-note,
.multiplayer-status,
.firebase-warning,
.next-round-countdown,
.multiplayer-waiting-card p,
.sync-countdown-card p {
  font-size: clamp(14px, 1.1vw, 18px);
  font-weight: 850;
  line-height: 1.42;
}

.firebase-warning {
  margin: 14px 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 2px solid rgba(183, 39, 32, 0.42);
  background: rgba(183, 39, 32, 0.08);
  color: #7d1d18;
}

.firebase-warning.hidden {
  display: none;
}

.multiplayer-status {
  margin: 14px 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.45);
  border: 1px solid rgba(16, 43, 93, 0.14);
}

.multiplayer-setup {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.multiplayer-setup button,
.room-actions button,
.join-room-row button {
  padding: 0.78rem 1.35rem;
  border-radius: 999px;
  border: 2px solid #d6a84e;
  background: linear-gradient(180deg, #c7332c, #8d1a17);
  color: #fff4cf;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(14px, 1vw, 18px);
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(0,0,0,0.25);
}

.multiplayer-setup .secondary-btn,
.room-actions .secondary-btn {
  background: linear-gradient(180deg, #173a73, #081b3e);
}

.join-room-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
}

.join-room-row input {
  min-width: 0;
  height: 48px;
  padding: 0 16px;
  border-radius: 999px;
  border: 2px solid rgba(16, 43, 93, 0.2);
  background: rgba(255,255,255,0.76);
  color: #102b5d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
}

.room-lobby.hidden {
  display: none;
}

.room-code-box {
  display: grid;
  place-items: center;
  margin: 16px auto;
  padding: 14px 20px;
  width: min(100%, 380px);
  border-radius: 18px;
  background: rgba(8, 31, 75, 0.92);
  color: #fff4cf;
  border: 3px solid rgba(245, 204, 114, 0.92);
  box-shadow: 0 14px 26px rgba(0,0,0,0.25);
}

.room-code-box span {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: #ffe2a1;
}

.room-code-box strong {
  margin-top: 4px;
  font-size: clamp(38px, 5vw, 62px);
  line-height: 1;
  letter-spacing: 0.12em;
}

.player-list {
  display: grid;
  gap: 10px;
  margin: 16px 0;
}

.player-row,
.result-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(16, 43, 93, 0.12);
  color: #102b5d;
  font-weight: 900;
}

.player-row .badge,
.result-row .rank {
  min-width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #102b5d;
  color: #ffe2a1;
  font-weight: 900;
}

.player-row small,
.result-row small {
  display: block;
  margin-top: 2px;
  color: rgba(16, 43, 93, 0.72);
  font-size: 13px;
}

.player-row .status-pill,
.result-row .score-pill {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(8, 31, 75, 0.92);
  color: #fff4cf;
  font-size: 13px;
  white-space: nowrap;
}

.room-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.room-actions button[disabled],
.multiplayer-setup button[disabled],
.join-room-row button[disabled] {
  opacity: 0.52;
  cursor: not-allowed;
}

.multiplayer-champion-line {
  margin: 16px 0 10px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(8, 31, 75, 0.92);
  color: #fff4cf;
  border: 2px solid rgba(245, 204, 114, 0.82);
  text-align: center;
  font-size: clamp(16px, 1.35vw, 23px);
  font-weight: 900;
  line-height: 1.35;
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}

.multiplayer-champion-line strong {
  color: #ffe2a1;
}

.results-list {
  display: grid;
  gap: 10px;
  margin: 18px 0;
}

.result-row.winner {
  border-color: rgba(183, 39, 32, 0.36);
  box-shadow: 0 0 0 2px rgba(245, 204, 114, 0.38);
}

.personal-verse-box {
  margin-top: 16px;
  padding: 18px;
  border-radius: 16px;
  background: rgba(8, 31, 75, 0.92);
  color: #fff4cf;
  border: 2px solid rgba(245, 204, 114, 0.86);
  text-align: center;
}

.personal-verse-box h3 {
  margin: 8px 0;
  color: #ffe2a1;
  font-size: clamp(24px, 2.2vw, 34px);
}

.personal-verse-box p {
  max-width: 760px;
  margin: 0 auto 10px;
  font-size: clamp(15px, 1.15vw, 19px);
  line-height: 1.42;
  font-weight: 850;
}

.next-round-countdown {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 999px;
  text-align: center;
  color: #7d1d18;
  background: rgba(255,255,255,0.54);
  border: 1px solid rgba(183, 39, 32, 0.18);
}

@keyframes timerPulse {
  from { transform: scale(1); box-shadow: 0 8px 18px rgba(0,0,0,0.42); }
  to { transform: scale(1.06); box-shadow: 0 8px 22px rgba(183, 39, 32, 0.52); }
}

@media (max-width: 760px) {
  .mobile-multiplayer-timer {
    position: relative;
    inset: auto;
    width: calc(100% - 28px);
    margin: 10px auto 0;
    padding: 10px 14px;
    font-size: 20px;
  }

  .multiplayer-card,
  .sync-countdown-card,
  .multiplayer-waiting-card,
  .multiplayer-results-card {
    padding: 18px;
    border-radius: 18px;
  }

  .join-room-row {
    grid-template-columns: 1fr;
  }

  .player-row,
  .result-row {
    grid-template-columns: auto 1fr;
  }

  .player-row .status-pill,
  .result-row .score-pill {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

.multiplayer-setup.hidden {
  display: none;
}

/* V25 WAITING / RESULTS CANNON MINI GAME */

.results-and-cannon-game {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(270px, 0.88fr);
  gap: 18px;
  align-items: start;
}

.results-column {
  min-width: 0;
}

.cannon-mini-game {
  margin-top: 16px;
  padding: 14px;
  border-radius: 18px;
  color: #fff4cf;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 226, 130, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(8, 31, 75, 0.96), rgba(4, 14, 33, 0.96));
  border: 2px solid rgba(245, 204, 114, 0.86);
  box-shadow:
    0 14px 28px rgba(0,0,0,0.28),
    inset 0 0 22px rgba(255, 220, 120, 0.06);
  text-align: center;
}

.multiplayer-results-card .cannon-mini-game {
  position: sticky;
  top: 0;
  margin-top: 18px;
}

.mini-game-heading {
  color: #ffe2a1;
  font-size: clamp(16px, 1.45vw, 25px);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 2px 5px rgba(0,0,0,0.72);
}

.mini-game-directions,
.mini-game-note {
  margin: 6px auto 10px;
  color: #fff1bf;
  font-size: clamp(12px, 0.95vw, 15px);
  font-weight: 850;
  line-height: 1.28;
}

.mini-game-note {
  margin: 8px auto 0;
  color: rgba(255, 241, 191, 0.82);
  font-size: 12px;
}

.mini-game-board {
  position: relative;
  height: clamp(205px, 29vh, 325px);
  overflow: hidden;
  border-radius: 18px;
  cursor: crosshair;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 226, 130, 0.15), transparent 34%),
    radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.12), transparent 18%),
    linear-gradient(180deg, rgba(15, 68, 126, 0.76), rgba(6, 23, 47, 0.96));
  border: 2px solid rgba(245, 204, 114, 0.46);
  box-shadow:
    inset 0 0 26px rgba(0,0,0,0.38),
    inset 0 0 0 1px rgba(255,255,255,0.08);
}

.mini-game-board::before,
.mini-game-board::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mini-game-board::before {
  background:
    linear-gradient(90deg, transparent 49.6%, rgba(255, 226, 130, 0.12) 49.8% 50.2%, transparent 50.4%),
    linear-gradient(180deg, transparent 49.6%, rgba(255, 226, 130, 0.12) 49.8% 50.2%, transparent 50.4%);
}

.mini-game-board::after {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 17%, rgba(255, 226, 130, 0.10) 17.3% 17.8%, transparent 18.1% 31%, rgba(255, 226, 130, 0.08) 31.3% 31.7%, transparent 32%);
  opacity: 0.78;
}

.mini-target {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: crosshair;
  transform: translate(-50%, -50%) scale(1);
  transition:
    left 0.55s cubic-bezier(.2,.82,.2,1),
    top 0.55s cubic-bezier(.2,.82,.2,1),
    opacity 0.24s ease,
    transform 0.22s ease,
    filter 0.22s ease;
  filter:
    drop-shadow(0 8px 10px rgba(0,0,0,0.5))
    drop-shadow(0 0 10px rgba(255, 207, 78, 0.45));
}

.mini-target img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
}

.mini-target.size-small {
  width: 48px;
  height: 48px;
}

.mini-target.size-large {
  width: 82px;
  height: 82px;
}

.mini-target.hidden-target {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.58) rotate(18deg);
}

.mini-target.paused {
  animation: miniTargetPulse 0.62s infinite alternate ease-in-out;
}

.mini-target.hit {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1.55) rotate(-18deg);
  filter: drop-shadow(0 0 22px rgba(255, 230, 120, 1));
}

.mini-target.reloading {
  cursor: wait;
}

.mini-hit-layer {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
}

.mini-burst {
  position: absolute;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  margin-top: -9px;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, #fff8c9 0 10%, #ffd24d 11% 28%, #ff6b22 29% 52%, transparent 66%);
  box-shadow:
    0 0 18px rgba(255, 222, 80, 0.96),
    0 0 34px rgba(255, 95, 32, 0.6);
  animation: miniBurst 0.7s ease-out forwards;
}

.mini-spark {
  position: absolute;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  margin-top: -3px;
  border-radius: 50%;
  opacity: 0;
  background: #fff4b8;
  box-shadow: 0 0 10px rgba(255, 227, 105, 0.92);
  animation: miniSpark 0.78s ease-out forwards;
}

.mini-game-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.mini-game-stats span {
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(0,0,0,0.36);
  border: 1px solid rgba(245, 204, 114, 0.38);
  color: #fff4cf;
  font-size: 13px;
  font-weight: 900;
}

.mini-game-stats strong {
  color: #ffe2a1;
}

.mini-game-stats strong.mini-reload-ready {
  color: #66ff8a;
  text-shadow: 0 0 10px rgba(92, 255, 130, 0.7);
}

.mini-game-stats strong.mini-reload-reloading {
  color: #ff5c45;
  text-shadow: 0 0 10px rgba(255, 78, 50, 0.72);
}

@keyframes miniTargetPulse {
  from { filter: drop-shadow(0 8px 10px rgba(0,0,0,0.5)) drop-shadow(0 0 8px rgba(255, 207, 78, 0.45)); }
  to { filter: drop-shadow(0 8px 10px rgba(0,0,0,0.5)) drop-shadow(0 0 22px rgba(255, 207, 78, 0.95)); }
}

@keyframes miniBurst {
  0% { opacity: 0; transform: scale(0.28); }
  18% { opacity: 1; transform: scale(1.35); }
  100% { opacity: 0; transform: scale(4.5); }
}

@keyframes miniSpark {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--spark-x), var(--spark-y)) scale(0.35); }
}

@media (max-width: 900px) {
  .results-and-cannon-game {
    grid-template-columns: 1fr;
  }

  .multiplayer-results-card .cannon-mini-game {
    position: static;
  }
}

@media (max-width: 760px) {
  .mini-game-board {
    height: 220px;
  }

  .mini-target {
    width: 58px;
    height: 58px;
  }

  .mini-target.size-small {
    width: 44px;
    height: 44px;
  }

  .mini-target.size-large {
    width: 74px;
    height: 74px;
  }
}

/* V28 MOBILE COMPACT FUSE: keep the fuse between the fixed bottom cannons instead of covering them. */
@media (max-width: 900px) {
  .mobile-game {
    padding-bottom: 118px;
  }

  .mobile-fuse {
    left: 50%;
    right: auto;
    bottom: 14px;
    width: min(58vw, 270px);
    transform: translateX(-50%);
    padding: 0;
    margin: 0;
    min-height: 0;
    border-radius: 999px;
    background: rgba(4, 17, 39, 0.94);
    border: 2px solid rgba(245, 204, 114, 0.98);
    color: #fff7cf;
    overflow: visible;
    box-shadow:
      0 8px 18px rgba(0,0,0,0.48),
      0 0 17px rgba(255, 211, 77, 0.28),
      inset 0 0 12px rgba(255, 226, 92, 0.08);
    backdrop-filter: blur(1px);
  }

  .mobile-fuse .mobile-rule,
  .mobile-fuse-title-row,
  .mobile-fuse .cannon-title,
  .mobile-fuse .cannon-percent,
  .mobile-fuse .mobile-fuse-icon {
    display: none !important;
  }

  .mobile-fuse .fuse-bar {
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    height: 34px;
    margin: 0;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(0,0,0,0.76);
    border: 2px solid rgba(245, 204, 114, 0.36);
  }

  .mobile-fuse .fuse-fill {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    height: 100%;
  }

  .mobile-fuse .fuse-bar::after {
    content: "Perfect 10/10 = KABOOM";
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    padding: 0 18px;
    color: #fff7cf;
    font-size: clamp(0.62rem, 2.72vw, 0.92rem);
    font-weight: 900;
    letter-spacing: 0.025em;
    text-align: center;
    white-space: nowrap;
    text-shadow:
      0 2px 4px rgba(0,0,0,0.95),
      0 0 8px rgba(0,0,0,0.78);
    pointer-events: none;
  }

  .mobile-fuse .fuse-spark {
    z-index: 4;
    width: 22px;
    height: 22px;
  }
}

/* V29 DESKTOP FIT + FUSE POLISH */
@media (min-width: 901px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  .app {
    min-height: 100dvh;
    padding: 8px;
    overflow: hidden;
  }

  .desktop-stage-shell {
    position: relative;
    display: block;
    margin: 0 auto;
  }

  .stage {
    width: min(calc(100vw - 16px), 1500px);
    height: auto;
    transform-origin: top center;
    will-change: transform;
  }

  .footer {
    display: none !important;
  }

  .stage-cannon {
    bottom: -1.8%;
    transform-origin: 50% 100%;
  }

  .stage-left-cannon,
  .stage-right-cannon {
    --cannon-angle: 0deg;
  }

  .cannon-fuse {
    left: 31.2%;
    bottom: 4.2%;
    width: 37.6%;
    height: 10.3%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .cannon-fuse .fuse-title-row,
  .cannon-fuse .fuse-icon,
  .cannon-fuse .cannon-title,
  .cannon-fuse .cannon-percent,
  .cannon-fuse .round-result {
    display: none !important;
  }

  .cannon-fuse .perfect-rule {
    width: 78%;
    max-width: 470px;
    margin: 0 auto 0.42vw;
    padding: 0.32vw 0.72vw;
    font-size: clamp(8px, 0.86vw, 15px);
    line-height: 1.05;
  }

  .cannon-fuse .fuse-bar {
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    height: clamp(32px, 3.4vw, 54px);
    margin: 0 auto;
    border-radius: 999px;
    border: 3px solid rgba(245, 204, 114, 0.72);
    background: rgba(0,0,0,0.82);
    box-shadow:
      0 8px 18px rgba(0,0,0,0.5),
      0 0 18px rgba(255, 211, 77, 0.26),
      inset 0 0 18px rgba(255, 226, 92, 0.08);
  }

  .cannon-fuse .fuse-bar::after {
    content: attr(data-label);
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    color: #fff7cf;
    font-size: clamp(15px, 1.72vw, 30px);
    font-weight: 900;
    letter-spacing: 0.08em;
    text-shadow:
      0 2px 5px rgba(0,0,0,0.96),
      0 0 10px rgba(0,0,0,0.84),
      0 0 15px rgba(255, 213, 77, 0.38);
    pointer-events: none;
  }

  .cannon-fuse .fuse-fill {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
  }

  .cannon-fuse .fuse-spark {
    z-index: 4;
    width: clamp(18px, 1.75vw, 30px);
    height: clamp(18px, 1.75vw, 30px);
  }
}

@media (max-width: 900px) {
  .desktop-stage-shell {
    display: none !important;
  }

  .gold-seal {
    right: -4px !important;
    top: 8px !important;
  }
}


/* V30 WIDESCREEN DESKTOP REBUILD */
@media (min-width: 901px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  .app {
    height: 100dvh;
    min-height: 0;
    padding: 8px;
    overflow: hidden;
  }

  .desktop-stage-shell {
    position: relative;
    display: block;
    margin: 0 auto;
  }

  .stage {
    width: min(calc(100vw - 16px), calc((100dvh - 16px) * 1.7777778), 1920px) !important;
    height: auto !important;
    max-width: none !important;
    aspect-ratio: 16 / 9 !important;
    transform: none !important;
    background-image: url("assets/cannonquiz-bg-v6.png?v=30");
    background-size: cover;
    background-position: center center;
  }

  .stage::before {
    background:
      radial-gradient(circle at 38.2% 70.5%, rgba(255, 238, 154, 0.88) 0 0.9%, rgba(255, 133, 36, 0.52) 1.1% 2.8%, transparent 5.8%),
      radial-gradient(circle at 61.8% 70.5%, rgba(255, 238, 154, 0.88) 0 0.9%, rgba(255, 133, 36, 0.52) 1.1% 2.8%, transparent 5.8%);
  }

  .top-title {
    left: 34.6%;
    top: 4.35%;
    width: 30.8%;
    height: 19%;
  }

  .top-title .faith {
    padding: 0.18vw 0.8vw;
    font-size: clamp(9px, 0.92vw, 18px);
    letter-spacing: 0.2em;
  }

  .top-title h1 {
    margin-top: 0.22vw;
    font-size: clamp(34px, 4.2vw, 78px);
    line-height: 0.78;
    letter-spacing: 0.07em;
  }

  .top-title p {
    margin-top: 0.25vw;
    font-size: clamp(10px, 1vw, 18px);
  }

  .president-area {
    left: 4.3%;
    top: 8.4%;
    width: 12.5%;
    min-height: 23%;
  }

  .president-frame {
    width: 58%;
  }

  .left-hud {
    left: 4.6%;
    top: 34.2%;
    width: 10.8%;
  }

  .right-hud {
    right: 5.8%;
    top: 36.4%;
    width: 12.3%;
  }

  .quiz-panel {
    left: 38.0%;
    top: 31.0%;
    width: 24.0%;
    height: 45.8%;
    padding: 1.35% 1.2% 1.0%;
  }

  .quiz-meta {
    margin-bottom: 0.72vw;
    font-size: clamp(8px, 0.72vw, 13px);
  }

  .quiz-panel h2 {
    min-height: 32%;
    font-size: clamp(17px, 1.65vw, 32px);
    line-height: 1.14;
  }

  .answers {
    gap: 0.46vw;
    margin-top: 0.66vw;
  }

  .answer-btn {
    min-height: 2.25vw;
    grid-template-columns: 8.5% 1fr;
  }

  .answer-btn span {
    width: 1.78vw;
    height: 1.78vw;
  }

  .answer-btn em {
    min-height: 2.08vw;
    font-size: clamp(10px, 0.92vw, 17px);
  }

  .feedback {
    display: none !important;
  }

  .stage-cannon {
    width: 34.5%;
    bottom: -1.2%;
    transform-origin: 50% 100%;
  }

  .stage-left-cannon {
    left: 10.9%;
    --cannon-angle: 0deg;
    transform: rotate(0deg) !important;
  }

  .stage-right-cannon {
    right: 10.9%;
    --cannon-angle: 0deg;
    transform: rotate(0deg) !important;
  }

  .stage.cannons-rumbling .stage-left-cannon,
  .stage.cannons-rumbling .stage-right-cannon,
  .stage.cannons-fired .stage-left-cannon,
  .stage.cannons-fired .stage-right-cannon {
    animation-name: none !important;
  }

  .player-card {
    left: 4.6%;
    bottom: 5.2%;
    width: 12.5%;
  }

  .player-card input {
    height: 2.0vw;
  }

  .cannon-fuse {
    left: 35.7%;
    bottom: 2.55%;
    width: 28.6%;
    height: 11.2%;
  }

  .cannon-fuse .perfect-rule {
    width: 92%;
    max-width: 520px;
    margin-bottom: 0.38vw;
    padding: 0.34vw 0.72vw;
    font-size: clamp(8px, 0.85vw, 16px);
  }

  .cannon-fuse .fuse-bar {
    height: clamp(34px, 3.1vw, 58px);
  }

  .cannon-fuse .fuse-bar::after {
    font-size: clamp(15px, 1.55vw, 30px);
  }

  .friendly-fire {
    right: 2.5%;
    bottom: 8.5%;
    width: 19%;
  }

  .chat-fab {
    right: 3.2%;
    bottom: 4.5%;
  }

  .hotspot-liberty-bell {
    left: 10.2%;
    top: 53.8%;
    --tip-x: -12%;
  }

  .hotspot-independence-hall {
    left: 25.2%;
    top: 32.0%;
  }

  .hotspot-betsy-ross {
    left: 25.1%;
    top: 45.0%;
  }

  .hotspot-presidential-seal {
    left: 50.0%;
    top: 24.2%;
  }

  .hotspot-lady-liberty {
    left: 73.8%;
    top: 26.2%;
  }

  .hotspot-american-flag {
    left: 86.2%;
    top: 20.5%;
    --tip-x: -82%;
  }

  .hotspot-mount-rushmore {
    left: 82.5%;
    top: 44.8%;
    --tip-x: -78%;
  }

  .hotspot-fireworks {
    left: 79.5%;
    top: 6.8%;
    --tip-x: -76%;
    --tip-y: 28px;
  }

  .footer {
    display: none !important;
  }
}


/* V31 DESKTOP POLISH: keep 16:9 rebuild, but pull cannons forward and move history labels off key landmarks. */
@media (min-width: 901px) {
  .top-title {
    top: 4.1%;
    height: 17.2%;
  }

  .top-title h1 {
    font-size: clamp(34px, 3.85vw, 72px);
    line-height: 0.75;
  }

  .top-title p {
    margin-top: 0.18vw;
    font-size: clamp(10px, 0.92vw, 17px);
  }

  .stage::before {
    background:
      radial-gradient(circle at 35.7% 70.8%, rgba(255, 238, 154, 0.88) 0 0.9%, rgba(255, 133, 36, 0.52) 1.1% 2.8%, transparent 5.8%),
      radial-gradient(circle at 64.3% 70.8%, rgba(255, 238, 154, 0.88) 0 0.9%, rgba(255, 133, 36, 0.52) 1.1% 2.8%, transparent 5.8%);
  }

  .stage-cannon {
    width: 39.4%;
    bottom: -7.2%;
    transform-origin: 50% 100%;
  }

  .stage-left-cannon {
    left: 4.7%;
    transform: rotate(0deg) !important;
  }

  .stage-right-cannon {
    right: 4.7%;
    transform: rotate(0deg) !important;
  }

  .cannon-fuse {
    left: 34.5%;
    bottom: 2.35%;
    width: 31%;
  }

  .history-tooltip {
    width: min(30vw, 400px);
    font-size: clamp(9px, 0.82vw, 14px);
  }

  .hotspot-liberty-bell {
    left: 9.3%;
    top: 53.4%;
    --tip-x: -10%;
  }

  .hotspot-independence-hall {
    left: 25.0%;
    top: 31.3%;
    --tip-x: -35%;
  }

  .hotspot-betsy-ross {
    left: 27.0%;
    top: 46.5%;
    --tip-x: -35%;
  }

  .hotspot-presidential-seal {
    left: 55.8%;
    top: 25.7%;
    --tip-x: -72%;
    --tip-y: 26px;
  }

  .hotspot-lady-liberty {
    left: 73.2%;
    top: 30.4%;
    --tip-x: -58%;
    --tip-y: 28px;
  }

  .hotspot-american-flag {
    left: 87.7%;
    top: 22.7%;
    --tip-x: -88%;
    --tip-y: 28px;
  }

  .hotspot-mount-rushmore {
    left: 84.7%;
    top: 57.6%;
    --tip-x: -82%;
    --tip-y: 28px;
  }

  .hotspot-fireworks {
    left: 80.2%;
    top: 7.0%;
    --tip-x: -82%;
    --tip-y: 30px;
  }
}


/* V32 CANNON POSITION + OPTIONS MENU POLISH */
@media (min-width: 901px) {
  .stage::before {
    background:
      radial-gradient(circle at 31.1% 50.4%, rgba(255, 238, 154, 0.78) 0 0.8%, rgba(255, 133, 36, 0.43) 1.1% 2.6%, transparent 5.2%),
      radial-gradient(circle at 68.9% 50.4%, rgba(255, 238, 154, 0.78) 0 0.8%, rgba(255, 133, 36, 0.43) 1.1% 2.6%, transparent 5.2%);
  }

  .stage-cannon {
    width: 45.5%;
    bottom: -15.4%;
    transform-origin: 50% 100%;
  }

  .stage-left-cannon {
    left: -0.4%;
    transform: rotate(0deg) !important;
  }

  .stage-right-cannon {
    right: -0.4%;
    transform: rotate(0deg) !important;
  }

  .cannon-fuse {
    bottom: 2.0%;
    z-index: 6;
  }

  .player-card {
    z-index: 6;
  }
}

.quick-menu-fab {
  position: fixed;
  z-index: 1300;
  right: 18px;
  top: 86px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 2px solid rgba(255, 230, 145, 0.96);
  background: linear-gradient(180deg, #d33a2f, #8d1714);
  color: #fff4cf;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 5px rgba(0,0,0,0.9);
  box-shadow:
    0 10px 25px rgba(0,0,0,0.42),
    0 0 18px rgba(255, 74, 50, 0.42),
    inset 0 0 12px rgba(255, 225, 130, 0.1);
  cursor: pointer;
  animation: quickMenuAttention 7.5s infinite ease-in-out;
}

.quick-menu-fab:hover,
.quick-menu-fab:focus-visible {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

@keyframes quickMenuAttention {
  0%, 72%, 100% {
    transform: scale(1);
    box-shadow:
      0 10px 25px rgba(0,0,0,0.42),
      0 0 18px rgba(255, 74, 50, 0.42),
      inset 0 0 12px rgba(255, 225, 130, 0.1);
  }
  76% {
    transform: scale(1.08);
    box-shadow:
      0 12px 28px rgba(0,0,0,0.48),
      0 0 28px rgba(255, 207, 88, 0.78),
      0 0 46px rgba(210, 42, 28, 0.58),
      inset 0 0 16px rgba(255, 238, 160, 0.22);
  }
  80% {
    transform: scale(0.99);
  }
  84% {
    transform: scale(1.055);
    box-shadow:
      0 12px 28px rgba(0,0,0,0.48),
      0 0 26px rgba(255, 207, 88, 0.7),
      0 0 42px rgba(210, 42, 28, 0.52),
      inset 0 0 16px rgba(255, 238, 160, 0.22);
  }
  90% {
    transform: scale(1);
  }
}

.quick-menu-fab.hidden,
.quick-menu-screen.hidden {
  display: none !important;
}

.quick-menu-screen {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.58);
}

.quick-menu-card {
  width: min(92vw, 560px);
  padding: 22px;
  border-radius: 22px;
  color: #102b5d;
  background: linear-gradient(180deg, rgba(255, 244, 206, 0.99), rgba(226, 194, 120, 0.98));
  border: 3px solid rgba(245, 204, 114, 0.98);
  box-shadow: 0 24px 55px rgba(0,0,0,0.62);
}

.quick-menu-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.quick-menu-kicker {
  color: #ad251d;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.quick-menu-card h2 {
  margin: 4px 0 14px;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1;
}

.quick-menu-close {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid rgba(16, 43, 93, 0.2);
  background: rgba(255,255,255,0.55);
  color: #102b5d;
  font-size: 26px;
  font-weight: 900;
  cursor: pointer;
}

.quick-menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.quick-menu-grid button {
  min-height: 48px;
  border-radius: 999px;
  border: 2px solid #d6a84e;
  background: linear-gradient(180deg, #c7332c, #8d1a17);
  color: #fff4cf;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(0,0,0,0.24);
}

.quick-menu-grid .sound-on,
.quick-menu-grid .sound-ready {
  background: linear-gradient(180deg, #1f8f43, #0d5a2b) !important;
}

.quick-menu-grid .sound-off {
  background: linear-gradient(180deg, #1d5fa8, #0b2d66) !important;
}

.quick-menu-note {
  margin: 15px 2px 0;
  color: #6b4516;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}

@media (max-width: 900px) {
  .quick-menu-fab {
    top: auto;
    right: 12px;
    bottom: 88px;
    padding: 9px 15px;
    font-size: 14px;
  }

  .quick-menu-card {
    padding: 18px;
  }

  .quick-menu-grid {
    grid-template-columns: 1fr;
  }
}

/* V35 MOBILE PERFECT-ROUND CANNON FIRE FIX */
@media (max-width: 900px) {
  .celebration-screen.perfect .muzzle-flash,
  .celebration-screen.perfect .flying-ball,
  .celebration-screen.perfect .impact-burst,
  .celebration-screen.perfect .kaboom-burst {
    display: block;
  }

  .muzzle-flash {
    width: 32vw;
    height: 32vw;
  }

  .flash-left {
    left: -5vw;
    bottom: 40px;
  }

  .flash-right {
    right: -5vw;
    bottom: 40px;
  }

  .flying-ball {
    width: clamp(42px, 13vw, 66px);
  }

  .ball-left {
    left: 8vw;
    bottom: 70px;
    transform: rotate(-10deg);
  }

  .ball-right {
    right: 8vw;
    bottom: 70px;
    transform: scaleX(-1) rotate(-10deg);
  }

  .celebration-screen.show.perfect .ball-left {
    animation: ballLeftMobile 1.28s cubic-bezier(.18,.8,.2,1) 1.95s forwards;
  }

  .celebration-screen.show.perfect .ball-right {
    animation: ballRightMobile 1.28s cubic-bezier(.18,.8,.2,1) 2.08s forwards;
  }

  .celebration-screen.show.perfect .flash-left,
  .celebration-screen.show.perfect .flash-right {
    animation: muzzleFlashMobile 1.05s ease-out 1.65s forwards;
  }

  .mobile-game.cannons-rumbling::before {
    animation: mobileCannonRumbleLeft 1.55s ease-in-out forwards;
  }

  .mobile-game.cannons-rumbling::after {
    animation: mobileCannonRumbleRight 1.55s ease-in-out forwards;
  }

  .mobile-game.cannons-fired::before {
    animation: mobileCannonRecoilLeft 1.15s ease-out forwards;
  }

  .mobile-game.cannons-fired::after {
    animation: mobileCannonRecoilRight 1.15s ease-out forwards;
  }

  @keyframes muzzleFlashMobile {
    0% { opacity: 0; transform: scale(0.28); }
    16% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.72); }
  }

  @keyframes ballLeftMobile {
    0% {
      opacity: 0;
      transform: translate(0, 0) scale(0.74) rotate(-10deg);
    }
    8% { opacity: 1; }
    78% { opacity: 1; }
    100% {
      opacity: 0;
      transform: translate(38vw, -48vh) scale(0.25) rotate(12deg);
    }
  }

  @keyframes ballRightMobile {
    0% {
      opacity: 0;
      transform: translate(0, 0) scaleX(-1) scale(0.74) rotate(-10deg);
    }
    8% { opacity: 1; }
    78% { opacity: 1; }
    100% {
      opacity: 0;
      transform: translate(-38vw, -48vh) scaleX(-1) scale(0.25) rotate(12deg);
    }
  }

  @keyframes mobileCannonRumbleLeft {
    0%, 100% { transform: translate(0, 0); }
    16% { transform: translate(-4px, 2px); }
    32% { transform: translate(3px, -1px); }
    48% { transform: translate(-3px, 1px); }
    64% { transform: translate(2px, 0); }
  }

  @keyframes mobileCannonRumbleRight {
    0%, 100% { transform: translate(0, 0); }
    16% { transform: translate(4px, 2px); }
    32% { transform: translate(-3px, -1px); }
    48% { transform: translate(3px, 1px); }
    64% { transform: translate(-2px, 0); }
  }

  @keyframes mobileCannonRecoilLeft {
    0% { transform: translate(0, 0) scale(1); }
    15% { transform: translate(-18px, 7px) scale(0.98); }
    38% { transform: translate(-6px, 2px) scale(0.995); }
    100% { transform: translate(0, 0) scale(1); }
  }

  @keyframes mobileCannonRecoilRight {
    0% { transform: translate(0, 0) scale(1); }
    15% { transform: translate(18px, 7px) scale(0.98); }
    38% { transform: translate(6px, 2px) scale(0.995); }
    100% { transform: translate(0, 0) scale(1); }
  }
}

/* V47 multiplayer results polish: winner blast + compact results mini-game */
.celebration-screen.winner-reveal {
  z-index: 1510;
  pointer-events: none;
  background: transparent;
}

.celebration-screen.winner-reveal .muzzle-flash,
.celebration-screen.winner-reveal .flying-ball,
.celebration-screen.winner-reveal .impact-burst {
  display: block;
}

.celebration-screen.winner-reveal .kaboom-burst {
  display: none !important;
}

.winner-blast-card {
  position: absolute;
  left: 50%;
  top: 44%;
  z-index: 10;
  display: none;
  width: min(86vw, 820px);
  transform: translate(-50%, -50%) scale(0.86);
  text-align: center;
  pointer-events: none;
}

.celebration-screen.winner-reveal .winner-blast-card {
  display: block;
}

.winner-blast-title {
  display: inline-block;
  padding: clamp(12px, 1.4vw, 22px) clamp(20px, 3.4vw, 56px);
  border-radius: 999px;
  color: #fff7cf;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,0.18), transparent 42%),
    linear-gradient(180deg, rgba(194, 42, 34, 0.98), rgba(104, 13, 17, 0.98));
  border: 3px solid rgba(245, 204, 114, 0.98);
  box-shadow:
    0 0 32px rgba(255, 218, 93, 0.9),
    0 18px 34px rgba(0,0,0,0.54),
    inset 0 0 18px rgba(255, 240, 170, 0.18);
  font-size: clamp(38px, 7vw, 118px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.05em;
  text-shadow:
    0 0 8px rgba(255, 248, 199, 0.95),
    0 0 22px rgba(255, 195, 58, 0.86),
    4px 5px 0 rgba(19, 38, 85, 0.82);
  animation: winnerBlastTitlePop 3.7s ease-out forwards;
}

.winner-blast-next {
  margin: clamp(12px, 1.5vw, 24px) auto 0;
  opacity: 0;
  color: #fff7cf;
  font-size: clamp(20px, 3.1vw, 54px);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-shadow:
    0 0 8px #000,
    0 0 24px rgba(255, 217, 94, 0.88),
    3px 4px 0 rgba(10, 30, 75, 0.76);
}

.celebration-screen.winner-next-visible .winner-blast-title {
  opacity: 0.1;
  transform: scale(0.84);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.celebration-screen.winner-next-visible .winner-blast-next {
  opacity: 1;
  animation: winnerNextPrompt 1.7s ease-out forwards;
}

.celebration-screen.winner-reveal.show .ball-left {
  animation: ballLeft 1.28s cubic-bezier(.18,.8,.2,1) 1.28s forwards;
}

.celebration-screen.winner-reveal.show .ball-right {
  animation: ballRight 1.28s cubic-bezier(.18,.8,.2,1) 1.42s forwards;
}

.celebration-screen.winner-reveal.show .flash-left,
.celebration-screen.winner-reveal.show .flash-right {
  animation: muzzleFlash 1.05s ease-out 1.05s forwards;
}

.celebration-screen.winner-reveal.show .impact-burst {
  animation: impactBurst 1.55s ease-out 2.45s forwards;
}

@keyframes winnerBlastTitlePop {
  0% { opacity: 0; transform: scale(0.42) rotate(-4deg); }
  16% { opacity: 1; transform: scale(1.12) rotate(2deg); }
  30% { transform: scale(1) rotate(-1deg); }
  70% { opacity: 1; transform: scale(1) rotate(0deg); }
  100% { opacity: 0.96; transform: scale(0.96); }
}

@keyframes winnerNextPrompt {
  0% { opacity: 0; transform: translateY(14px) scale(0.92); }
  28% { opacity: 1; transform: translateY(0) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.multiplayer-results-card {
  width: min(94vw, 1030px);
}

.results-and-cannon-game {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  gap: 14px;
}

.multiplayer-results-card .cannon-mini-game {
  max-width: 300px;
  padding: 10px;
  margin-top: 10px;
  align-self: start;
}

.multiplayer-results-card .mini-game-heading {
  font-size: clamp(12px, 1vw, 18px);
  letter-spacing: 0.05em;
}

.multiplayer-results-card .mini-game-directions,
.multiplayer-results-card .mini-game-note {
  font-size: 11px;
  margin: 4px auto 7px;
}

.multiplayer-results-card .mini-game-board {
  height: clamp(118px, 17vh, 175px);
  border-radius: 14px;
}

.multiplayer-results-card .mini-target {
  width: 48px;
  height: 48px;
}

.multiplayer-results-card .mini-target.size-small {
  width: 36px;
  height: 36px;
}

.multiplayer-results-card .mini-target.size-large {
  width: 62px;
  height: 62px;
}

.multiplayer-results-card .mini-game-stats {
  gap: 6px;
  margin-top: 7px;
}

.multiplayer-results-card .mini-game-stats span {
  padding: 5px 8px;
  font-size: 11px;
}

@media (max-width: 900px) {
  .results-and-cannon-game {
    grid-template-columns: 1fr;
  }

  .multiplayer-results-card .cannon-mini-game {
    max-width: 100%;
    width: 100%;
  }

  .multiplayer-results-card .mini-game-board {
    height: 150px;
  }
}

@media (max-width: 640px) {
  .winner-blast-card {
    top: 42%;
    width: 94vw;
  }

  .winner-blast-title {
    font-size: clamp(32px, 12vw, 68px);
    padding: 11px 18px;
  }

  .winner-blast-next {
    font-size: clamp(18px, 7vw, 34px);
  }
}


/* V48 multiplayer results hard fix: inline winner banner + smaller embedded mini-game */
.round-winner-pop {
  margin: 10px auto 12px;
  text-align: center;
  pointer-events: none;
}

.round-winner-pop.hidden {
  display: none;
}

.round-winner-pop.show {
  display: block;
}

.round-winner-title {
  display: inline-block;
  padding: clamp(9px, 1vw, 16px) clamp(20px, 2.5vw, 44px);
  border-radius: 999px;
  color: #fff7cf;
  background: linear-gradient(180deg, rgba(197, 39, 32, 0.98), rgba(108, 14, 18, 0.98));
  border: 3px solid rgba(245, 204, 114, 0.98);
  box-shadow:
    0 0 25px rgba(255, 218, 93, 0.85),
    0 12px 22px rgba(0,0,0,0.45),
    inset 0 0 16px rgba(255, 240, 170, 0.16);
  font-size: clamp(30px, 4.6vw, 74px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.04em;
  text-shadow:
    0 0 8px rgba(255, 248, 199, 0.9),
    0 0 20px rgba(255, 195, 58, 0.8),
    3px 4px 0 rgba(19, 38, 85, 0.75);
  animation: inlineWinnerPop 4.6s ease-out both;
}

.round-winner-pop.blast-hit .round-winner-title {
  animation: inlineWinnerHit 0.72s ease-out both;
}

.round-winner-next {
  margin-top: 8px;
  opacity: 0;
  color: #fff3c7;
  font-size: clamp(16px, 2.2vw, 34px);
  font-weight: 900;
  text-shadow: 0 3px 8px rgba(0,0,0,0.75);
}

.round-winner-pop.next-visible .round-winner-next {
  animation: inlineWinnerNext 0.75s ease-out forwards;
}

.celebration-screen.winner-inline-support {
  background: transparent !important;
  pointer-events: none !important;
}

.celebration-screen.winner-inline-support .winner-blast-card {
  display: none !important;
}

.multiplayer-results-card {
  max-height: min(92vh, 850px);
  overflow: auto;
}

.results-and-cannon-game {
  align-items: start;
}

.multiplayer-results-card .results-mini-game {
  max-width: 255px !important;
  padding: 8px !important;
  margin: 0 !important;
  border-radius: 15px !important;
}

.multiplayer-results-card .results-mini-game .mini-game-heading {
  font-size: 13px !important;
}

.multiplayer-results-card .results-mini-game .mini-game-directions {
  display: none !important;
}

.multiplayer-results-card .results-mini-game .mini-game-board {
  height: 112px !important;
}

.multiplayer-results-card .results-mini-game .mini-target {
  width: 42px !important;
  height: 42px !important;
}

.multiplayer-results-card .results-mini-game .mini-target.size-small {
  width: 32px !important;
  height: 32px !important;
}

.multiplayer-results-card .results-mini-game .mini-target.size-large {
  width: 54px !important;
  height: 54px !important;
}

.multiplayer-results-card .results-mini-game .mini-game-note {
  display: none !important;
}

.multiplayer-results-card .results-mini-game .mini-game-stats {
  margin-top: 5px !important;
}

.multiplayer-results-card .results-mini-game .mini-game-stats span {
  padding: 4px 7px !important;
  font-size: 10px !important;
}

@keyframes inlineWinnerPop {
  0% { opacity: 0; transform: translateY(-10px) scale(0.84); }
  18% { opacity: 1; transform: translateY(0) scale(1.08); }
  36% { transform: scale(0.98); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes inlineWinnerHit {
  0% { transform: scale(1); filter: brightness(1); }
  32% { transform: scale(1.16); filter: brightness(1.8); }
  100% { transform: scale(1); filter: brightness(1.08); }
}

@keyframes inlineWinnerNext {
  0% { opacity: 0; transform: translateY(8px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 900px) {
  .multiplayer-results-card .results-mini-game {
    max-width: 100% !important;
  }

  .multiplayer-results-card .results-mini-game .mini-game-board {
    height: 110px !important;
  }

  .round-winner-title {
    font-size: clamp(26px, 8vw, 48px);
  }
}


/* QUESTION REPORTING / REVIEW */
.flag-question-btn,
.review-round-btn,
.flag-review-question-btn {
  margin: 0.45vw auto 0;
  display: inline-grid;
  place-items: center;
  padding: 0.42vw 0.85vw;
  border-radius: 999px;
  border: 2px solid rgba(214, 168, 78, 0.92);
  background: linear-gradient(180deg, #c7332c, #8d1a17);
  color: #fff4cf;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(9px, 0.86vw, 14px);
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0,0,0,0.24);
}

.flag-question-btn.hidden,
.review-round-btn.hidden {
  display: none;
}

.mobile-flag-question-btn {
  margin-top: 10px;
  padding: 8px 14px;
  font-size: 13px;
}

.question-review-screen,
.question-report-screen {
  position: fixed;
  inset: 0;
  z-index: 2300;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.68);
}

.question-review-screen.hidden,
.question-report-screen.hidden {
  display: none;
}

.question-review-card,
.question-report-card {
  width: min(94vw, 920px);
  max-height: 88vh;
  overflow: auto;
  padding: 22px;
  border-radius: 20px;
  color: #102b5d;
  background: linear-gradient(180deg, rgba(255, 244, 206, 0.99), rgba(228, 196, 122, 0.98));
  border: 3px solid rgba(245, 204, 114, 0.98);
  box-shadow: 0 24px 55px rgba(0,0,0,0.66);
}

.question-report-card {
  width: min(94vw, 700px);
}

.question-review-header,
.question-report-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  margin-bottom: 10px;
}

.question-review-kicker,
.question-report-kicker {
  color: #ad251d;
  font-weight: 900;
  letter-spacing: 0.18em;
  font-size: 12px;
}

.question-review-header h2,
.question-report-header h2 {
  margin: 4px 0 0;
  font-size: clamp(26px, 3vw, 42px);
}

.question-review-close,
.question-report-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #d6a84e;
  background: #8d1a17;
  color: #fff4cf;
  font-size: 22px;
  font-weight: 900;
  cursor: pointer;
}

.question-review-subtitle {
  margin: 0 0 14px;
  font-weight: 800;
  line-height: 1.35;
}

.question-review-list {
  display: grid;
  gap: 14px;
}

.review-question-card {
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.6);
  border: 2px solid rgba(16, 43, 93, 0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

.review-question-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  color: #6b4516;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.review-question-card h3 {
  margin: 8px 0 10px;
  color: #082864;
  font-size: 19px;
}

.review-answer-list,
.question-report-summary ul {
  list-style: none;
  padding: 0;
  margin: 8px 0;
  display: grid;
  gap: 6px;
}

.review-answer-list li,
.question-report-summary li {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.54);
  border: 1px solid rgba(16,43,93,0.12);
}

.review-answer-list li span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #102b5d;
  color: #fff4cf;
  font-weight: 900;
}

.review-answer-list li em {
  font-style: normal;
  font-weight: 800;
}

.review-answer-list li strong {
  font-size: 11px;
  color: #6b4516;
}

.review-answer-list li.correct-choice {
  outline: 2px solid rgba(28, 142, 49, 0.5);
}

.review-answer-list li.chosen-choice:not(.correct-choice) {
  outline: 2px solid rgba(175, 35, 35, 0.45);
}

.review-result-pill {
  padding: 5px 9px;
  border-radius: 999px;
  color: #fff;
  white-space: nowrap;
}

.review-result-pill.correct { background: #1d7d3d; }
.review-result-pill.wrong { background: #9f2520; }
.review-result-pill.blank { background: #526071; }

.review-explanation {
  color: #5b390d;
  font-weight: 800;
}

.question-review-actions,
.question-report-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.question-review-actions button,
.question-report-actions button,
.question-report-card select,
.question-report-card textarea {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
}

.question-review-actions button,
.question-report-actions button {
  padding: 10px 18px;
  border-radius: 999px;
  border: 2px solid #d6a84e;
  background: linear-gradient(180deg, #c7332c, #8d1a17);
  color: #fff4cf;
  cursor: pointer;
}

.question-report-card label {
  display: block;
  margin: 12px 0 5px;
  color: #102b5d;
  font-weight: 900;
}

.question-report-card select,
.question-report-card textarea {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(16,43,93,0.28);
  padding: 10px;
  color: #102b5d;
  background: rgba(255,255,255,0.72);
}

.question-report-card textarea {
  min-height: 92px;
  resize: vertical;
  line-height: 1.35;
}

.question-report-summary {
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(16,43,93,0.14);
}

.report-summary-meta {
  color: #ad251d;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 12px;
}

.question-report-summary h3 {
  margin: 7px 0;
  color: #082864;
}

.question-report-status {
  min-height: 22px;
  margin-top: 10px;
  text-align: center;
  color: #6b4516;
  font-weight: 900;
}

.question-report-status.success { color: #1d7d3d; }
.question-report-status.error { color: #9f2520; }

@media (max-width: 900px) {
  .question-review-card,
  .question-report-card {
    padding: 16px;
    max-height: 86vh;
  }

  .review-answer-list li {
    grid-template-columns: 28px 1fr;
  }

  .review-answer-list li strong {
    grid-column: 2;
  }
}


/* V60 GOLD-SEALED ACHIEVEMENT CARD POLISH */
.verse-card {
  overflow: hidden;
  isolation: isolate;
}

.verse-card > * {
  position: relative;
  z-index: 3;
}

.gold-sealed-ribbon {
  display: none;
}

.verse-card.gold {
  color: #311d00;
  padding-right: min(22vw, 190px);
  border: 0;
  background:
    radial-gradient(circle at 84% 48%, rgba(255, 248, 186, 0.82), transparent 18%),
    radial-gradient(circle at 16% 8%, rgba(255, 255, 255, 0.88), transparent 19%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.13) 0 2px, rgba(132,78,0,0.04) 2px 6px),
    linear-gradient(145deg, #fff7ce 0%, #f7d36b 32%, #ba7417 67%, #ffe38b 100%);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.74),
    0 0 0 4px rgba(255, 243, 176, 0.98),
    0 0 0 9px rgba(153, 89, 8, 0.95),
    0 0 0 13px rgba(255, 211, 83, 0.96),
    0 0 42px rgba(255, 213, 77, 0.9),
    0 0 120px rgba(255, 138, 24, 0.52);
}

.verse-card.gold::before {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 1;
  border-radius: calc(1.3vw - 2px);
  border: 2px solid rgba(255, 255, 220, 0.74);
  box-shadow:
    inset 0 0 0 2px rgba(117, 65, 0, 0.34),
    inset 0 0 28px rgba(255, 255, 255, 0.42),
    0 0 18px rgba(255, 238, 146, 0.42);
  pointer-events: none;
}

.verse-card.gold::after {
  content: "";
  position: absolute;
  inset: -70% -42%;
  z-index: 2;
  background: linear-gradient(105deg,
    transparent 39%,
    rgba(255, 255, 255, 0.0) 44%,
    rgba(255, 255, 255, 0.72) 49%,
    rgba(255, 238, 151, 0.44) 52%,
    transparent 59%);
  transform: translateX(-68%) rotate(8deg);
  animation: goldCardSweep 4.8s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}

.verse-card.gold .verse-kicker {
  display: inline-block;
  margin-bottom: 0.25vw;
  padding: 0.42rem 0.95rem;
  border-radius: 999px;
  color: #3b2100;
  background:
    linear-gradient(180deg, #fff9c9, #ffd452 48%, #a75f08 100%);
  border: 2px solid rgba(92, 47, 0, 0.45);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.75),
    inset 0 -3px 0 rgba(96,49,0,0.22),
    0 6px 16px rgba(87, 46, 0, 0.28),
    0 0 22px rgba(255, 221, 87, 0.55);
  text-shadow: 0 1px 0 rgba(255,255,255,0.72);
}

.verse-card.gold h2 {
  color: #512e00;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.78),
    0 0 18px rgba(255, 247, 182, 0.65);
}

.verse-card.gold p {
  color: #231500;
  text-shadow: 0 1px 0 rgba(255,255,255,0.42);
}

.verse-card.gold .verse-tags span {
  background: rgba(255, 247, 205, 0.68);
  border-color: rgba(101, 56, 0, 0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.62);
  color: #402400;
}

.verse-card.gold #verseStatus {
  display: inline-block;
  padding: 0.42rem 0.9rem;
  border-radius: 999px;
  background: rgba(82, 45, 0, 0.12);
  border: 1px solid rgba(82, 45, 0, 0.18);
}

.verse-card.gold .gold-seal {
  display: block;
  right: clamp(14px, 2.2vw, 30px) !important;
  top: 50% !important;
  width: clamp(98px, 11vw, 156px);
  height: clamp(98px, 11vw, 156px);
  transform: translateY(-50%);
  background-color: transparent;
  background-image: url("assets/gold-seal-cannonball.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  filter:
    drop-shadow(0 10px 16px rgba(52, 26, 0, 0.55))
    drop-shadow(0 0 16px rgba(255, 240, 143, 0.95))
    drop-shadow(0 0 38px rgba(255, 145, 24, 0.78));
  animation: goldSealFloat 3.2s ease-in-out infinite;
}

.verse-card.gold .gold-seal::before {
  content: "";
  position: absolute;
  inset: -16%;
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 246, 173, 0.55), transparent 56%),
    conic-gradient(from 20deg, transparent, rgba(255, 237, 120, 0.62), transparent, rgba(255,255,255,0.6), transparent);
  animation: goldSealHalo 5.8s linear infinite;
}

.verse-card.gold .gold-sealed-ribbon {
  display: block;
  position: absolute;
  right: -46px;
  top: 28px;
  z-index: 6;
  width: 205px;
  transform: rotate(36deg);
  padding: 7px 0;
  text-align: center;
  color: #fff8d0;
  font-size: 0.78rem;
  font-weight: 1000;
  letter-spacing: 0.18em;
  background:
    linear-gradient(180deg, #8b170f, #c82317 48%, #711007 100%);
  border-top: 1px solid rgba(255, 238, 160, 0.75);
  border-bottom: 1px solid rgba(255, 238, 160, 0.75);
  box-shadow:
    0 5px 13px rgba(0,0,0,0.28),
    0 0 18px rgba(255, 215, 87, 0.35);
}

.vault-stats .vault-gold-stat {
  background: linear-gradient(180deg, rgba(255, 246, 184, 0.98), rgba(245, 191, 53, 0.86));
  border-color: rgba(134, 75, 0, 0.42);
  color: #563000;
  box-shadow: 0 0 18px rgba(255, 213, 77, 0.34);
}

.vault-item.gold {
  overflow: hidden;
  isolation: isolate;
  padding: 18px 160px 18px 18px;
  border: 0;
  background:
    radial-gradient(circle at 88% 48%, rgba(255, 248, 184, 0.86), transparent 22%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.11) 0 2px, rgba(132,78,0,0.045) 2px 6px),
    linear-gradient(145deg, rgba(255, 249, 215, 0.98), rgba(246, 207, 92, 0.93) 45%, rgba(193, 117, 18, 0.82) 100%);
  box-shadow:
    0 12px 28px rgba(68, 43, 9, 0.2),
    0 0 0 2px rgba(255, 245, 178, 0.92),
    0 0 0 5px rgba(151, 88, 8, 0.88),
    0 0 24px rgba(255, 213, 77, 0.42);
}

.vault-item.gold::before {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 0;
  border-radius: 12px;
  border: 1px solid rgba(255,255,225,0.68);
  box-shadow: inset 0 0 0 1px rgba(111, 60, 0, 0.18);
  pointer-events: none;
}

.vault-item.gold h3,
.vault-item.gold p,
.vault-item.gold .vault-badges {
  position: relative;
  z-index: 2;
}

.vault-gold-cannonball {
  position: absolute;
  right: 23px;
  top: 50%;
  z-index: 2;
  width: 108px;
  height: 108px;
  transform: translateY(-50%);
  background-color: transparent;
  background-image: url("assets/gold-seal-cannonball.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  filter:
    drop-shadow(0 8px 12px rgba(52, 26, 0, 0.42))
    drop-shadow(0 0 18px rgba(255, 240, 143, 0.78));
}

.vault-gold-cannonball::before {
  content: "";
  position: absolute;
  inset: -15%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 244, 159, 0.52), transparent 62%);
}

.vault-gold-ribbon {
  position: absolute;
  right: -42px;
  top: 17px;
  z-index: 3;
  width: 180px;
  transform: rotate(36deg);
  padding: 5px 0;
  text-align: center;
  color: #fff8d0;
  font-size: 0.68rem;
  font-weight: 1000;
  letter-spacing: 0.14em;
  background: linear-gradient(180deg, #8b170f, #c82317 48%, #711007 100%);
  border-top: 1px solid rgba(255, 238, 160, 0.75);
  border-bottom: 1px solid rgba(255, 238, 160, 0.75);
  box-shadow: 0 5px 13px rgba(0,0,0,0.24);
}

.vault-item.gold .gold-badge {
  background: linear-gradient(180deg, rgba(255, 248, 190, 0.96), rgba(245, 197, 53, 0.86));
  border-color: rgba(113, 63, 0, 0.36);
  color: #573000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}

@keyframes goldCardSweep {
  0%, 30% { transform: translateX(-68%) rotate(8deg); opacity: 0; }
  43% { opacity: 0.74; }
  58% { transform: translateX(68%) rotate(8deg); opacity: 0; }
  100% { transform: translateX(68%) rotate(8deg); opacity: 0; }
}

@keyframes goldSealFloat {
  0%, 100% { transform: translateY(-50%) scale(1); }
  50% { transform: translateY(-54%) scale(1.035); }
}

@keyframes goldSealHalo {
  to { transform: rotate(360deg); }
}

@media (max-width: 720px) {
  .verse-card.gold {
    width: min(94%, 640px);
    padding: 92px 18px 20px;
    border-radius: 20px;
  }

  .verse-card.gold::before {
    inset: 9px;
    border-radius: 15px;
  }

  .verse-card.gold .gold-seal {
    top: 14px !important;
    right: 50% !important;
    width: 72px;
    height: 72px;
    transform: translateX(50%);
    animation: none;
  }

  .verse-card.gold .gold-seal::before {
    animation: none;
  }

  .verse-card.gold .gold-sealed-ribbon {
    right: -58px;
    top: 13px;
    width: 190px;
    font-size: 0.68rem;
  }

  .vault-item.gold {
    padding: 88px 14px 16px;
  }

  .vault-gold-cannonball {
    top: 13px;
    right: 18px;
    width: 64px;
    height: 64px;
    transform: none;
  }

  .vault-gold-ribbon {
    right: -55px;
    top: 14px;
    width: 180px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .verse-card.gold::after,
  .verse-card.gold .gold-seal,
  .verse-card.gold .gold-seal::before {
    animation: none !important;
  }
}


@media (max-width: 760px) {
  .account-choice-grid {
    grid-template-columns: 1fr;
  }

  .account-card {
    padding: 18px;
  }

  .account-mini-panel {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .account-mini-actions {
    justify-content: center;
  }
}


/* V64 QUESTION HISTORY + BIBLE MASTERY */
.rank-up-card {
  position: relative;
  z-index: 11;
  width: min(88vw, 880px);
  padding: clamp(24px, 3vw, 46px);
  border-radius: 28px;
  text-align: center;
  color: #fff6cf;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 250, 185, 0.38), transparent 29%),
    radial-gradient(circle at 18% 16%, rgba(255,255,255,0.28), transparent 22%),
    linear-gradient(145deg, rgba(73, 21, 7, 0.98), rgba(126, 32, 13, 0.98) 42%, rgba(28, 47, 94, 0.98) 100%);
  border: 4px solid rgba(255, 218, 89, 0.96);
  box-shadow:
    0 30px 70px rgba(0,0,0,0.72),
    0 0 0 7px rgba(99, 36, 5, 0.7),
    0 0 70px rgba(255, 214, 90, 0.58),
    inset 0 0 34px rgba(255, 236, 158, 0.18);
  transform: translateY(18px) scale(0.92);
  opacity: 0;
  overflow: hidden;
  isolation: isolate;
}

.rank-up-card.hidden {
  display: none !important;
}

.celebration-screen.show.rank-up .rank-up-card {
  animation: rankUpArrive 1.05s cubic-bezier(.18,.9,.24,1) 1.15s forwards;
}

.celebration-screen.rank-up .verse-card {
  display: none !important;
}

.rank-up-card::before {
  content: "";
  position: absolute;
  inset: 14px;
  z-index: 0;
  border-radius: 20px;
  border: 2px solid rgba(255, 238, 145, 0.62);
  box-shadow: inset 0 0 26px rgba(255,255,255,0.18);
}

.rank-up-card::after {
  content: "";
  position: absolute;
  inset: -60% -35%;
  z-index: 1;
  background: linear-gradient(110deg, transparent 39%, rgba(255,255,255,0.55) 49%, rgba(255,229,107,0.28) 53%, transparent 61%);
  animation: goldCardSweep 4.2s ease-in-out infinite;
  pointer-events: none;
}

.rank-up-card > * {
  position: relative;
  z-index: 2;
}

.rank-up-kicker {
  display: inline-block;
  margin-bottom: 0.55rem;
  padding: 0.46rem 1rem;
  border-radius: 999px;
  color: #4b2600;
  font-weight: 1000;
  letter-spacing: 0.18em;
  background: linear-gradient(180deg, #fff8c8, #ffd957 52%, #ba7516 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.8), 0 0 26px rgba(255,220,88,0.58);
}

.rank-up-medal {
  width: clamp(92px, 10vw, 145px);
  height: clamp(92px, 10vw, 145px);
  display: grid;
  place-items: center;
  margin: 0.2rem auto 0.4rem;
  border-radius: 50%;
  color: #582e00;
  font-size: clamp(44px, 5vw, 82px);
  font-weight: 1000;
  background:
    radial-gradient(circle at 35% 24%, #fffce0, #ffd95a 36%, #b87213 70%, #5a2d00 100%);
  border: 5px solid rgba(255, 245, 185, 0.95);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.38),
    0 0 36px rgba(255, 218, 90, 0.85),
    inset 0 0 18px rgba(255,255,255,0.55);
  animation: rankMedalPulse 2.4s ease-in-out infinite;
}

.rank-up-card h2 {
  margin: 0.4rem 0;
  font-size: clamp(34px, 5vw, 78px);
  line-height: 0.98;
  color: #fff6c7;
  text-shadow:
    0 2px 0 #64190a,
    0 0 18px rgba(255, 231, 116, 0.82),
    0 0 38px rgba(255, 112, 42, 0.65);
}

.rank-up-card p {
  margin: 0.7rem auto;
  max-width: 720px;
  font-size: clamp(18px, 2vw, 30px);
  font-weight: 900;
}

.rank-up-card strong,
.rank-up-card small {
  display: block;
  margin: 0.45rem auto;
  font-weight: 900;
}

.rank-up-card small {
  color: rgba(255, 246, 210, 0.88);
  font-size: clamp(13px, 1.2vw, 18px);
}

.rank-up-card button {
  margin-top: 1.1rem;
  padding: 0.95rem 1.35rem;
  border: 2px solid rgba(255, 239, 168, 0.95);
  border-radius: 999px;
  color: #3b2100;
  font-size: 1rem;
  font-weight: 1000;
  cursor: pointer;
  background: linear-gradient(180deg, #fff8c9, #ffd34b 48%, #ad6812 100%);
  box-shadow: 0 8px 18px rgba(0,0,0,0.3), 0 0 24px rgba(255,218,86,0.42);
}

.bank-exhausted-screen {
  position: fixed;
  inset: 0;
  z-index: 1320;
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 220, 98, 0.22), transparent 38%),
    rgba(0, 0, 0, 0.72);
}

.bank-exhausted-screen.hidden {
  display: none;
}

.bank-exhausted-card {
  position: relative;
  width: min(92vw, 760px);
  padding: clamp(22px, 3vw, 38px);
  border-radius: 24px;
  color: #102b5d;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255, 247, 218, 0.99), rgba(230, 199, 128, 0.98));
  border: 4px solid rgba(255, 211, 83, 0.96);
  box-shadow:
    0 28px 70px rgba(0,0,0,0.72),
    0 0 60px rgba(255, 216, 102, 0.34);
}

.bank-exhausted-close {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(16,43,93,0.25);
  background: rgba(255,255,255,0.62);
  color: #102b5d;
  font-size: 1.5rem;
  font-weight: 1000;
  cursor: pointer;
}

.bank-exhausted-kicker {
  color: #ad251d;
  font-weight: 1000;
  letter-spacing: 0.18em;
}

.bank-exhausted-card h2 {
  margin: 0.35rem 0;
  font-size: clamp(30px, 4vw, 58px);
}

.bank-exhausted-card p {
  font-size: clamp(16px, 1.5vw, 21px);
  font-weight: 850;
}

.bank-exhausted-stats,
.bank-exhausted-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 1rem 0;
}

.bank-exhausted-stats span {
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(16,43,93,0.12);
  border: 1px solid rgba(16,43,93,0.18);
  font-weight: 1000;
}

.bank-exhausted-actions button {
  padding: 0.85rem 1rem;
  border-radius: 999px;
  border: 2px solid rgba(255, 226, 128, 0.95);
  color: #fff8dd;
  font-weight: 1000;
  cursor: pointer;
  background: linear-gradient(180deg, #12366d, #071b3f);
  box-shadow: 0 8px 18px rgba(0,0,0,0.22);
}

.bank-exhausted-actions button:first-child {
  color: #3b2100;
  background: linear-gradient(180deg, #fff8c9, #ffd34b 48%, #ad6812 100%);
}

.vault-mastery-stat,
.vault-mastery-panel {
  background: linear-gradient(180deg, rgba(255, 250, 209, 0.98), rgba(224, 185, 80, 0.9)) !important;
  color: #452500 !important;
  border-color: rgba(122, 65, 0, 0.34) !important;
}

.vault-mastery-panel {
  padding: 16px 18px;
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.68), 0 10px 24px rgba(68, 43, 9, 0.12);
}

.vault-mastery-panel strong {
  display: block;
  color: #7a160f;
  font-size: clamp(22px, 2.2vw, 34px);
  font-weight: 1000;
}

.vault-mastery-panel p,
.vault-mastery-panel small {
  display: block;
  margin: 4px 0 0;
  font-weight: 900;
}

@keyframes rankUpArrive {
  0% { opacity: 0; transform: translateY(26px) scale(0.86); }
  58% { opacity: 1; transform: translateY(-8px) scale(1.025); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes rankMedalPulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.045); filter: brightness(1.16); }
}

@media (max-width: 720px) {
  .rank-up-card {
    width: min(94vw, 560px);
    padding: 22px 16px;
  }

  .bank-exhausted-actions {
    display: grid;
  }

  .bank-exhausted-actions button {
    width: 100%;
  }
}


/* V66 CLEAN QUIZ SETUP OVERRIDES
   Goal: one clear flow: choose grade + subject, optional name, then start.
   Removes duplicate visual buttons and reduces noise while keeping the patriotic style. */
.menu-screen {
  padding: 14px;
}

.menu-card {
  width: min(92vw, 780px);
  padding: clamp(18px, 2vw, 28px);
  border-radius: 24px;
  max-height: 92vh;
  overflow: auto;
}

.menu-card > p {
  max-width: 650px;
  margin-bottom: 12px;
  font-size: clamp(13px, 0.95vw, 16px);
  line-height: 1.34;
}

.sound-btn {
  margin: 2px auto 10px;
  padding: 9px 22px;
}

.account-mini-panel {
  max-width: 700px;
  margin: 0 auto 12px;
  padding: 9px 13px;
  border-radius: 16px;
  background: rgba(255,255,255,0.5);
}

.account-mini-panel span {
  font-size: 0.85rem;
}

.account-mini-actions button {
  padding: 7px 12px;
  font-size: 0.86rem;
}

.quiz-setup-panel {
  max-width: 700px;
  margin: 0 auto;
  padding: 16px 18px 18px;
  border-radius: 22px;
  text-align: left;
  overflow: visible;
  background:
    linear-gradient(180deg, rgba(255, 250, 226, 0.99), rgba(234, 202, 122, 0.98));
  box-shadow:
    0 15px 34px rgba(0, 0, 0, 0.26),
    inset 0 0 0 2px rgba(255, 240, 184, 0.72);
}

.quiz-setup-panel::before {
  display: none;
}

.setup-header {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(16, 43, 93, 0.12);
}

.setup-kicker {
  margin-bottom: 2px;
  font-size: clamp(11px, 0.8vw, 13px);
}

.setup-header h3 {
  font-size: clamp(23px, 2vw, 32px);
}

.setup-current {
  min-width: 242px;
  max-width: 310px;
  padding: 9px 13px;
  border-radius: 16px;
}

.setup-current span {
  margin-bottom: 2px;
  font-size: 0.72rem;
}

.setup-current strong {
  font-size: clamp(15px, 1vw, 18px);
}

.settings-grid.clean-settings-grid {
  max-width: none;
  margin: 0;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.settings-grid.clean-settings-grid .setup-field-subject {
  grid-column: auto;
}

.setup-field {
  padding: 12px;
  border-radius: 16px;
}

.setup-field.important-choice {
  border-width: 2px;
  border-color: rgba(157, 36, 29, 0.68);
}

.settings-grid .important-choice label {
  font-size: clamp(15px, 1vw, 18px);
}

.setup-step {
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
}

.settings-grid .important-choice select,
.settings-grid select,
.menu-name-input {
  min-height: 48px;
  height: 48px;
  border-radius: 14px;
  font-size: clamp(15px, 1vw, 18px);
}

.setup-field small {
  margin-top: 6px;
  font-size: clamp(11px, 0.76vw, 13px);
  line-height: 1.2;
}

.setup-name-compact {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr);
  align-items: center;
  gap: 6px 14px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.32);
}

.setup-name-compact label {
  margin: 0;
  white-space: nowrap;
}

.setup-name-compact small {
  grid-column: 2;
  margin-top: -4px;
}

.setup-quick-start {
  margin: 14px 0 0;
  padding: 10px;
  grid-template-columns: 1fr 1fr 0.86fr;
  gap: 10px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(14, 42, 88, 0.96), rgba(7, 20, 51, 0.96));
}

.setup-quick-start .primary-start,
.setup-quick-start .setup-vault-btn {
  min-height: 56px;
  border-radius: 20px;
  font-size: clamp(12px, 0.95vw, 16px);
}

.setup-quick-start .primary-start {
  animation: none;
}

.selection-start {
  min-width: 0;
}

.selection-start::after {
  content: none;
}

.setup-start-note {
  margin: 9px 0 0;
  font-size: clamp(11px, 0.76vw, 13px);
  opacity: 0.82;
}

.setup-reminder,
.menu-buttons-secondary {
  display: none !important;
}

@media (max-width: 860px) {
  .menu-card {
    width: min(94vw, 560px);
    padding: 18px 15px;
  }

  .setup-header {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .setup-current {
    min-width: 0;
    max-width: none;
    width: 100%;
  }

  .settings-grid.clean-settings-grid {
    grid-template-columns: 1fr;
  }

  .setup-name-compact {
    grid-template-columns: 1fr;
  }

  .setup-name-compact small {
    grid-column: 1;
    margin-top: 0;
  }

  .setup-quick-start {
    grid-template-columns: 1fr;
  }

  .setup-quick-start .primary-start,
  .setup-quick-start .setup-vault-btn {
    min-height: 50px;
  }
}


/* V69: question-bank diagnostic label and stronger click feedback */
.question-debug-text {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin-top: 0.35rem;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  background: rgba(10, 29, 70, 0.74);
  color: rgba(255, 246, 210, 0.94);
  border: 1px solid rgba(242, 203, 119, 0.58);
  font-size: clamp(9px, 0.58vw, 11px);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.2;
  box-shadow: 0 3px 8px rgba(0,0,0,0.22);
}

button {
  transition: transform 0.13s ease, filter 0.13s ease, box-shadow 0.13s ease;
}

button:active,
button.ui-click-feedback {
  transform: translateY(1px) scale(0.975);
  filter: brightness(1.12) saturate(1.08);
}

select:focus,
input:focus {
  outline: 3px solid rgba(238, 196, 88, 0.65);
  outline-offset: 2px;
}

.setup-current.selection-flash,
.quiz-setup-panel.selection-flash {
  animation: selectionFlash 0.42s ease-out;
}

@keyframes selectionFlash {
  0% { filter: brightness(1.18); transform: scale(1.012); }
  100% { filter: brightness(1); transform: scale(1); }
}

.question-debug-line, .quiz-debug-line, .loaded-debug-line {
  display: inline-block;
  margin: 0 0 0.45rem;
  padding: 0.24rem 0.45rem;
  border-radius: 999px;
  background: rgba(10, 29, 66, 0.72);
  color: #fff7d1;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* V84 NEW 1920x1080 BACKGROUND + PARCHMENT LAYOUT POLISH
   Uses the new built-in parchment background, simplifies the category badge,
   improves long question/answer fitting, raises history tooltips, and adds
   president portrait fact hover styling. */
@media (min-width: 901px) {
  .stage {
    background-image: url("assets/cannonquiz-bg-v7.png?v=84newbackground") !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  .stage::after {
    background:
      radial-gradient(circle at 50% 50%, rgba(255, 248, 210, 0.035), transparent 34%),
      linear-gradient(180deg, rgba(0,0,0,0.015), rgba(0,0,0,0.08));
  }

  .top-title {
    left: 34.6% !important;
    top: 4.4% !important;
    width: 30.8% !important;
    height: 16.2% !important;
    display: grid;
    align-content: center;
  }

  .top-title .faith {
    padding: 0.14vw 0.78vw;
    font-size: clamp(8px, 0.72vw, 14px);
    letter-spacing: 0.19em;
    background: rgba(2, 11, 30, 0.28);
    border-color: rgba(245, 204, 114, 0.44);
  }

  .top-title h1 {
    margin-top: 0.08vw;
    font-size: clamp(29px, 3.15vw, 62px);
    line-height: 0.8;
    letter-spacing: 0.065em;
  }

  .top-title p {
    margin-top: 0.1vw;
    font-size: clamp(9px, 0.82vw, 16px);
  }

  .president-area {
    left: 3.1% !important;
    top: 12.0% !important;
    width: 13.0% !important;
    z-index: 72;
  }

  .president-frame {
    width: 56% !important;
    pointer-events: auto;
    cursor: help;
  }

  .president-frame:focus-visible {
    outline: 3px solid rgba(255, 232, 148, 0.88);
    outline-offset: 4px;
  }

  .president-fact-tooltip {
    position: absolute;
    left: 50%;
    top: 58%;
    z-index: 100;
    width: min(24vw, 360px);
    padding: 0.62vw 0.78vw;
    border-radius: 0.65vw;
    border: 2px solid rgba(245, 204, 114, 0.88);
    background: linear-gradient(180deg, rgba(255, 244, 205, 0.985), rgba(229, 193, 118, 0.985));
    color: #102b5d;
    font-size: clamp(9px, 0.82vw, 15px);
    line-height: 1.24;
    font-weight: 900;
    text-align: left;
    text-shadow: none;
    box-shadow:
      0 15px 34px rgba(0,0,0,0.52),
      inset 0 0 0 1px rgba(255,255,255,0.32);
    opacity: 0;
    pointer-events: none;
    transform: translate(-10%, 8%) scale(0.96);
    transition: opacity 0.16s ease, transform 0.16s ease;
  }

  .president-fact-tooltip.show {
    opacity: 1;
    transform: translate(-10%, 8%) scale(1);
  }

  .left-hud {
    left: 3.7% !important;
    top: 35.0% !important;
    width: 11.4% !important;
    z-index: 68;
  }

  .right-hud {
    right: 4.1% !important;
    top: 37.5% !important;
    width: 12.7% !important;
    z-index: 68;
  }

  .hud-row span {
    font-size: clamp(8px, 0.82vw, 15px);
  }

  .hud-row strong {
    min-height: clamp(22px, 1.55vw, 31px);
    font-size: clamp(8px, 0.84vw, 15px);
  }

  .quiz-panel {
    left: 31.25% !important;
    top: 27.15% !important;
    width: 37.55% !important;
    height: 54.35% !important;
    padding: 2.25% 2.65% 1.8% !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    color: var(--paper-ink);
    z-index: 60;
    overflow: visible;
  }

  .quiz-meta {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: space-between;
    gap: 0.7vw;
    width: 100%;
    margin: 0 0 0.58vw !important;
    font-size: clamp(9px, 0.74vw, 14px);
    line-height: 1.08;
  }

  .quiz-meta #subjectText {
    display: none !important;
  }

  #questionCounterText {
    color: rgba(71, 42, 10, 0.92);
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .question-debug-text {
    grid-column: auto !important;
    margin: 0 !important;
    padding: 0.36vw 0.72vw !important;
    max-width: 100%;
    border-radius: 999px;
    background: rgba(8, 27, 66, 0.82) !important;
    color: #fff2c6 !important;
    border: 1px solid rgba(245, 204, 114, 0.72) !important;
    box-shadow:
      0 5px 11px rgba(0,0,0,0.28),
      inset 0 0 10px rgba(255,220,120,0.08);
    font-size: clamp(9px, 0.72vw, 14px) !important;
    line-height: 1.05;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .quiz-panel h2 {
    flex: 0 0 auto;
    min-height: 28% !important;
    max-height: 38%;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-wrap: anywhere;
    color: #082864;
    font-size: clamp(21px, 1.85vw, 36px) !important;
    line-height: 1.13 !important;
    letter-spacing: -0.01em;
  }

  .answers {
    flex: 1 1 auto;
    display: grid;
    grid-template-rows: repeat(4, minmax(0, 1fr));
    align-content: center;
    gap: clamp(7px, 0.52vw, 12px) !important;
    margin-top: clamp(8px, 0.72vw, 14px) !important;
  }

  .answer-btn {
    width: 100%;
    min-height: 0 !important;
    grid-template-columns: clamp(28px, 2.05vw, 42px) 1fr !important;
    gap: clamp(7px, 0.52vw, 12px) !important;
  }

  .answer-btn span {
    width: clamp(28px, 1.95vw, 40px) !important;
    height: clamp(28px, 1.95vw, 40px) !important;
    font-size: clamp(13px, 1.02vw, 20px) !important;
  }

  .answer-btn em {
    min-height: clamp(38px, 3.05vw, 58px) !important;
    width: 100%;
    padding: 0.32vw 0.82vw !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    white-space: normal;
    overflow-wrap: anywhere;
    color: #082864;
    font-size: clamp(14px, 1.08vw, 21px) !important;
    line-height: 1.12 !important;
  }

  .quiz-panel.qa-answer-long .answer-btn em {
    font-size: clamp(13px, 1.0vw, 19px) !important;
    line-height: 1.08 !important;
  }

  .quiz-panel.qa-long h2 {
    min-height: 31% !important;
    font-size: clamp(18px, 1.48vw, 30px) !important;
    line-height: 1.1 !important;
  }

  .quiz-panel.qa-long .answers {
    gap: clamp(5px, 0.44vw, 10px) !important;
    margin-top: clamp(5px, 0.45vw, 10px) !important;
  }

  .quiz-panel.qa-long .answer-btn em {
    min-height: clamp(34px, 2.58vw, 50px) !important;
    font-size: clamp(12px, 0.94vw, 18px) !important;
  }

  .quiz-panel.qa-extra-long h2 {
    min-height: 34% !important;
    font-size: clamp(16px, 1.22vw, 25px) !important;
    line-height: 1.06 !important;
  }

  .quiz-panel.qa-extra-long .answers {
    gap: clamp(4px, 0.34vw, 8px) !important;
    margin-top: clamp(4px, 0.35vw, 8px) !important;
  }

  .quiz-panel.qa-extra-long .answer-btn em {
    min-height: clamp(31px, 2.18vw, 44px) !important;
    font-size: clamp(11px, 0.82vw, 16px) !important;
    line-height: 1.02 !important;
  }

  .feedback {
    display: none !important;
  }

  .player-card {
    left: 3.5% !important;
    bottom: 4.6% !important;
    width: 13.2% !important;
    z-index: 68;
  }

  .cannon-fuse {
    left: 35.0% !important;
    bottom: 2.2% !important;
    width: 30.0% !important;
    z-index: 65;
  }

  .cannon-fuse .perfect-rule {
    width: 96% !important;
    max-width: 560px;
  }

  .history-hotspots {
    z-index: 80 !important;
    overflow: visible;
  }

  .history-hotspot {
    z-index: 80;
    font-size: clamp(7px, 0.66vw, 12px);
  }

  .history-hotspot:hover,
  .history-hotspot:focus-visible {
    z-index: 120;
  }

  .history-tooltip {
    z-index: 140 !important;
    width: min(28vw, 430px) !important;
    font-size: clamp(9px, 0.78vw, 15px) !important;
    line-height: 1.22;
  }

  .hotspot-liberty-bell {
    left: 9.0% !important;
    top: 60.0% !important;
    --tip-x: 8%;
    --tip-y: -185%;
  }

  .hotspot-independence-hall {
    left: 19.3% !important;
    top: 36.2% !important;
    --tip-x: -30%;
    --tip-y: -128%;
  }

  .hotspot-betsy-ross {
    left: 20.9% !important;
    top: 49.5% !important;
    --tip-x: -24%;
    --tip-y: -128%;
  }

  .hotspot-presidential-seal {
    left: 50.0% !important;
    top: 22.4% !important;
    --tip-x: -50%;
    --tip-y: 32px;
  }

  .hotspot-lady-liberty {
    left: 76.1% !important;
    top: 29.3% !important;
    --tip-x: -60%;
    --tip-y: 32px;
  }

  .hotspot-american-flag {
    left: 89.5% !important;
    top: 22.0% !important;
    --tip-x: -86%;
    --tip-y: 30px;
  }

  .hotspot-mount-rushmore {
    left: 83.2% !important;
    top: 48.3% !important;
    --tip-x: -84%;
    --tip-y: 32px;
  }

  .hotspot-fireworks {
    left: 78.8% !important;
    top: 7.4% !important;
    --tip-x: -78%;
    --tip-y: 32px;
  }

  .quick-menu-fab {
    z-index: 1500;
  }
}

/* V87 MOBILE QUICK MENU POSITION FIX
   Moves the mobile Menu button to the top-right corner so it no longer sits on/near the cannon. */
@media (max-width: 900px) {
  .stage .maker-credit {
    display: none;
  }

  .maker-credit-mobile {
    position: static;
    display: block;
    width: fit-content;
    margin: 8px auto 2px;
    padding: 0.2rem 0.58rem;
    font-size: 10px;
    color: rgba(255, 234, 176, 0.72);
    background: rgba(4, 14, 32, 0.32);
  }

  .quick-menu-fab {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
    right: calc(env(safe-area-inset-right, 0px) + 12px) !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 1700 !important;
  }
}