/* Intro screen, the giant X, screen shake, and the endgame panel. */

/* --- Intro / PLAY screen ------------------------------------------------ */

.intro {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: var(--gap-lg);
  text-align: center;
  background:
    radial-gradient(90% 70% at 50% 40%, #16205a 0%, var(--stage) 45%, var(--stage-deep) 100%);
  transition: opacity 420ms ease, transform 420ms ease;
}

.intro.is-off {
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
}

.intro__inner {
  max-width: 620px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
}

.intro__wordmark {
  font-family: var(--font-display);
  font-size: clamp(38px, 12vw, 76px);
  line-height: 0.92;
  letter-spacing: 0.02em;
  color: var(--gold);
  text-shadow: var(--glow-gold-strong);
  margin: 0;
}

.intro__daily {
  font-size: 13px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.intro__asked {
  font-size: clamp(11px, 2.8vw, 13px);
  letter-spacing: 0.28em;
  color: var(--green);
  text-shadow: var(--glow-green);
}

.intro__question {
  font-family: var(--font-display);
  font-size: clamp(19px, 5vw, 30px);
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
}

.intro__play {
  margin-top: var(--gap);
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.18em;
  padding: 14px 54px;
  color: var(--stage-deep);
  background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 100%);
  border: var(--border-chunky) solid var(--gold-deep);
  border-radius: 6px;
  cursor: pointer;
  box-shadow: var(--glow-gold-strong);
  animation: play-breathe 2.4s ease-in-out infinite;
}

@keyframes play-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}

.intro__note {
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
}

/* --- The X -------------------------------------------------------------- */

.x-overlay {
  position: fixed;
  inset: 0;
  z-index: 65;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
}

.x-overlay.is-on { opacity: 1; }

.x-mark {
  width: min(58vw, 44vh);
  height: min(58vw, 44vh);
  opacity: 0;
  transform: scale(2.6) rotate(-16deg);
  filter: drop-shadow(0 0 34px rgba(255, 46, 62, 0.85));
}

.x-mark.is-slamming {
  animation: x-slam var(--t-slam) var(--ease-slam) forwards;
}

.x-mark.is-clearing {
  animation: x-clear 240ms ease-in forwards;
}

@keyframes x-slam {
  0% { opacity: 0; transform: scale(2.6) rotate(-16deg); }
  70% { opacity: 1; transform: scale(0.92) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes x-clear {
  to { opacity: 0; transform: scale(1.25); }
}

/* Multi-X for strike three. */
.x-overlay--triple { gap: 0; }

.x-overlay--triple .x-mark {
  position: absolute;
  width: min(34vw, 30vh);
  height: min(34vw, 30vh);
}

.x-overlay--triple .x-mark:nth-child(1) { transform: translateX(-34%); }
.x-overlay--triple .x-mark:nth-child(3) { transform: translateX(34%); }

.stage-shake { animation: stage-shake var(--t-shake) ease-in-out; }
.stage-shake--hard { animation: stage-shake-hard 620ms ease-in-out; }

@keyframes stage-shake {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(-9px, 4px); }
  35% { transform: translate(8px, -5px); }
  55% { transform: translate(-6px, 3px); }
  75% { transform: translate(4px, -2px); }
}

@keyframes stage-shake-hard {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  12% { transform: translate(-16px, 7px) rotate(-0.5deg); }
  28% { transform: translate(14px, -9px) rotate(0.4deg); }
  44% { transform: translate(-12px, 6px) rotate(-0.3deg); }
  62% { transform: translate(9px, -4px) rotate(0.2deg); }
  80% { transform: translate(-5px, 2px) rotate(0deg); }
}

/* --- Final panel --------------------------------------------------------- */

.final-panel {
  margin-top: var(--gap-lg);
  padding: var(--gap-lg) var(--gap);
  text-align: center;
  border: var(--border-chunky) solid var(--gold-deep);
  border-radius: 6px;
  background: linear-gradient(180deg, #0b1230 0%, #05070f 100%);
  box-shadow: var(--glow-gold);
  transform: translateY(24px);
  opacity: 0;
  transition: transform 460ms var(--ease-overshoot), opacity 460ms ease;
}

.final-panel[hidden] { display: none; }
.final-panel.is-up { transform: none; opacity: 1; }

.final-panel__label {
  font-size: 11px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0;
}

.final-panel__score {
  font-family: var(--font-display);
  font-size: clamp(52px, 15vw, 88px);
  line-height: 1;
  color: var(--gold);
  text-shadow: var(--glow-gold-strong);
  font-variant-numeric: tabular-nums;
  margin: var(--gap-xs) 0;
}

.final-panel__answers {
  font-family: var(--font-display);
  font-size: clamp(16px, 4.4vw, 22px);
  color: var(--ink);
  letter-spacing: 0.06em;
}

.final-panel__total {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: var(--gap-xs);
}

.final-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm);
  justify-content: center;
  margin-top: var(--gap-lg);
}

.final-panel__actions .term-btn {
  font-size: 13px;
  padding: 10px 16px;
}

.final-panel.is-perfect {
  border-color: var(--gold);
  animation: perfect-pulse 1.6s ease-out;
}

@keyframes perfect-pulse {
  0% { box-shadow: 0 0 0 rgba(255, 181, 46, 0); }
  30% { box-shadow: 0 0 70px rgba(255, 181, 46, 0.85); }
  100% { box-shadow: var(--glow-gold); }
}

@media (prefers-reduced-motion: reduce) {
  .intro__play,
  .final-panel.is-perfect,
  .stage-shake,
  .stage-shake--hard { animation: none; }
  .x-mark.is-slamming { animation: x-fade-in 140ms ease-out forwards; }
  @keyframes x-fade-in { to { opacity: 1; transform: scale(1) rotate(0deg); } }
  .final-panel { transition: opacity 200ms ease; transform: none; }
}

/* --- Postgame cross-promotion ------------------------------------------- */
/* Below the primary actions and deliberately quieter than them: a mono link,
   not a gold block. The offer is "another board if you want it". */

.final-panel__cross {
  margin: var(--gap) 0 0;
}

.final-panel__cross[hidden] { display: none; }

.cross-promo {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-decoration: none;
  border-bottom: 1px dotted var(--stage-line);
  transition: color 140ms ease, border-color 140ms ease;
}

.cross-promo:hover {
  color: var(--green);
  border-bottom-color: var(--green);
}