:host {
  /* ── Palette ─────────────────────────────────────── */
  --navy:    #0B2D71;
  --blue:    #0066B2;
  --sky:     #009DD9;
  --deep:    #003653;
  --teal:    #00708C;
  --cyan:    #00B2BD;
  --olive:   #444B0D;
  --green:   #769231;
  --lime:    #B2CC34;
  --brown:   #711B00;
  --orange:  #E5601F;
  --amber:   #FAAB18;
  --wine:    #58001C;
  --magenta: #97002E;
  --red:     #E21836;
  --plum:    #3A0D36;
  --purple:  #751269;
  --pink:    #BA3093;
  --slate:   #6B6D6F;
  --gray:    #8C8F93;
  --mist:    #DBDCDD;

  /* ── Uniform font scale ──────────────────────────── */
  --fs-xs:   11px;
  --fs-base: 14px;
  --fs-md:   20px;
  --fs-lg:   26px;

  display: block;
  min-height: 100vh;
  font-size: var(--fs-base);
}

.shell {
  min-height: 100vh;
  background: linear-gradient(145deg, #001f3d 0%, var(--deep) 35%, var(--navy) 65%, #001a2e 100%);
  background-attachment: fixed;
  overflow: hidden;
  position: relative;
  font-size: var(--fs-base);
}

.shell.in-game {
  height: 100vh;
  overflow: hidden;
}

.shell::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(0,178,189,0.13) 1px, transparent 0);
  background-size: 38px 38px;
  pointer-events: none;
  z-index: 0;
  animation: grid-breathe 6s ease-in-out infinite;
}

.sparkle-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.spark {
  position: absolute;
  animation: drift linear infinite;
  opacity: 0;
  user-select: none;
}

/* ── Additional spark positions ─────────────────────────────── */
.spark.s9  { left: 8%;  font-size: 10px; color: var(--lime);    animation-duration: 22s; animation-delay: 6s;   }
.spark.s10 { left: 19%; font-size: 13px; color: var(--pink);    animation-duration: 18s; animation-delay: 11s;  }
.spark.s11 { left: 32%; font-size: 8px;  color: var(--amber);   animation-duration: 24s; animation-delay: 2.5s; }
.spark.s12 { left: 47%; font-size: 15px; color: var(--sky);     animation-duration: 12s; animation-delay: 8s;   }
.spark.s13 { left: 61%; font-size: 9px;  color: var(--cyan);    animation-duration: 21s; animation-delay: 14s;  }
.spark.s14 { left: 73%; font-size: 11px; color: var(--lime);    animation-duration: 16s; animation-delay: 3.5s; }
.spark.s15 { left: 85%; font-size: 8px;  color: var(--pink);    animation-duration: 19s; animation-delay: 7.5s; }
.spark.s16 { left: 96%; font-size: 12px; color: var(--amber);   animation-duration: 14s; animation-delay: 10s;  }

/* ── Aurora orb field ────────────────────────────────────────── */

.aurora-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.aurora-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(80px);
  opacity: 0;
  will-change: transform, opacity;
  animation: aurora-drift ease-in-out infinite;
}

.orb-a {
  width: 520px;
  height: 320px;
  background: radial-gradient(ellipse, rgba(0,178,189,0.22) 0%, transparent 70%);
  top: -100px;
  left: -120px;
  animation-duration: 22s;
  animation-delay: 0s;
}

.orb-b {
  width: 440px;
  height: 380px;
  background: radial-gradient(ellipse, rgba(186,48,147,0.18) 0%, transparent 70%);
  bottom: -140px;
  right: -100px;
  animation-duration: 28s;
  animation-delay: 8s;
}

.orb-c {
  width: 360px;
  height: 280px;
  background: radial-gradient(ellipse, rgba(0,157,217,0.16) 0%, transparent 70%);
  top: 40%;
  left: 35%;
  animation-duration: 18s;
  animation-delay: 14s;
}

@keyframes aurora-drift {
  0%   { opacity: 0;    transform: translate(0, 0)       scale(1);    }
  12%  { opacity: 1; }
  50%  { opacity: 0.85; transform: translate(40px, 30px)  scale(1.12); }
  88%  { opacity: 1; }
  100% { opacity: 0;    transform: translate(0, 0)       scale(1);    }
}

/* ── Neon scan sweep ─────────────────────────────────────────── */

.scan-sweep-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.scan-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(0,178,189,0.55) 30%, rgba(178,204,52,0.45) 50%, rgba(0,178,189,0.55) 70%, transparent 100%);
  filter: blur(1px);
  top: -4px;
  animation: scan-sweep 10s ease-in-out infinite;
  animation-delay: 3s;
}

@keyframes scan-sweep {
  0%   { top: -4px;     opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 0.7; }
  100% { top: 100vh;   opacity: 0; }
}

.eyebrow {
  color: var(--cyan);
  font-size: var(--fs-xs);
  font-weight: 900;
  letter-spacing: 0.15em;
}

main {
  width: calc(100% - 12px);
  margin: 4px auto;
  min-height: calc(100vh - 8px);
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.shell.in-game main {
  min-height: calc(100vh - 8px);
  height: calc(100vh - 8px);
  overflow: hidden;
}

.login-card {
  min-height: calc(100vh - 20px);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  grid-template-rows: auto 1fr;
  row-gap: 14px;
  align-content: center;
  overflow: hidden;
  border-radius: 22px;
  background: rgba(0,54,83,0.35);
  box-shadow: 9px 9px 0 var(--teal), 0 0 70px rgba(0,157,217,0.18), inset 0 1px 0 rgba(0,178,189,0.3);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(0,178,189,0.22);
  animation: card-enter 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.login-title-block {
  grid-column: 1 / -1;
  padding: 32px 20px 16px;
  text-align: center;
}

.login-title-block h1 {
  margin: 0;
  color: var(--mist);
  font-size: clamp(42px, 6vw, 72px);
  line-height: 0.95;
  text-shadow: 0 0 20px rgba(0,157,217,0.45);
}

.login-title-block .eyebrow {
  display: block;
  margin-bottom: 6px;
}

.login-copy {
  padding: clamp(36px, 6vw, 82px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  background: linear-gradient(135deg, rgba(0,102,178,0.65) 0%, rgba(0,54,83,0.65) 100%);
  color: var(--mist);
  position: relative;
  overflow: hidden;
}

.login-copy::before {
  content: '\2726';
  position: absolute;
  top: -30px;
  right: -30px;
  font-size: 160px;
  color: rgba(0,178,189,0.06);
  pointer-events: none;
  animation: deco-spin 40s linear infinite;
  line-height: 1;
}

.login-copy::after {
  content: '\25C6';
  position: absolute;
  bottom: -20px;
  left: -20px;
  font-size: 100px;
  color: rgba(250,171,24,0.05);
  pointer-events: none;
  animation: deco-spin 28s linear infinite reverse;
  line-height: 1;
}

.kicker {
  margin: 0 0 7px;
  color: var(--amber);
  font-size: var(--fs-xs);
  font-weight: 900;
  letter-spacing: 0.18em;
}

.login-copy h2 {
  max-width: 650px;
  margin: 0;
  font-size: clamp(30px, 3.2vw, 40px);
  line-height: 1.18;
  text-shadow: 0 2px 16px rgba(0,0,0,0.4);
}

.login-description {
  margin: 6px 0 0;
  font-size: var(--fs-base);
  color: rgba(219,220,221,0.78);
}

.login-form {
  padding: clamp(36px, 5vw, 68px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  max-width: 460px;
  width: 100%;
  margin: 0 auto;
  color: var(--mist);
  background: rgba(0,16,38,0.55);
}

.login-form label {
  margin: 0 0 6px;
  font-size: var(--fs-base);
  font-weight: 900;
  color: var(--cyan);
  letter-spacing: 0.04em;
}

.login-form input,
.login-form select {
  width: 100%;
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 2px solid rgba(0,178,189,0.35);
  border-radius: 10px;
  outline: none;
  background: rgba(0,54,83,0.55);
  color: var(--mist);
  font-size: var(--fs-base);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.login-form select option {
  background: var(--deep);
  color: var(--mist);
}

.login-form input:focus,
.login-form select:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0,178,189,0.22), 0 0 22px rgba(0,178,189,0.18);
}

.login-form input::placeholder {
  color: var(--gray);
}

.email-tools {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: -2px 0 12px;
}

.domain-button {
  align-self: flex-start;
  padding: 8px 14px;
  font-size: 0.9rem;
}

.email-note {
  margin: 0;
  font-size: 0.8rem;
  color: rgba(219,220,221,0.82);
}

.primary-button,
.secondary-button {
  padding: 10px 20px;
  border-radius: 999px;
  font-size: var(--fs-base);
  font-weight: 900;
  cursor: pointer;
  transition: transform 180ms cubic-bezier(.34,1.56,.4,1), box-shadow 180ms ease, filter 180ms ease;
}

.primary-button {
  border: 0;
  background: linear-gradient(135deg, var(--amber), var(--orange));
  color: var(--deep);
  box-shadow: 0 4px 0 #934800, 0 0 22px rgba(250,171,24,0.35);
  position: relative;
  overflow: hidden;
}

.primary-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 55%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: btn-shimmer 2.8s ease-in-out infinite;
  pointer-events: none;
}

.primary-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #934800, 0 0 32px rgba(250,171,24,0.5);
}

.primary-button:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #934800;
}

.secondary-button {
  border: 2px solid rgba(0,178,189,0.55);
  background: rgba(0,54,83,0.55);
  color: var(--mist);
}

.secondary-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 0 var(--teal), 0 0 18px rgba(0,178,189,0.28);
  border-color: var(--cyan);
  color: var(--cyan);
}

button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.game {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 10px 6px;
  border: 1px solid rgba(219,220,221,0.42);
  border-radius: 18px;
  background: rgba(0,102,178,0.34);
  backdrop-filter: blur(12px);
  animation: enter 350ms ease-out;
  min-height: 0;
  overflow: hidden;
}

.game-heading {
  margin-bottom: 4px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.game-heading-copy {
  min-width: 0;
}

.game-title {
  margin: 0 0 18px;
  color: var(--mist);
  font-size: clamp(36px, 4.6vw, 56px);
  font-weight: 900;
  line-height: 0.95;
  text-shadow: 0 0 18px rgba(0,157,217,0.32);
}

.game-heading .kicker {
  font-size: 13px;
  letter-spacing: 0.2em;
}

.status-panels {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.game-heading h2 {
  max-width: 730px;
  margin: 0;
  color: var(--mist);
  font-size: 18px;
  line-height: 1.05;
  text-shadow: 0 0 18px rgba(0,157,217,0.35);
}

.lives {
  padding: 6px 10px;
  border: 2px solid rgba(219,220,221,0.55);
  border-radius: 13px;
  background: rgba(219,220,221,0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: none;
}

.mission-timer {
  width: 228px;
  min-width: 228px;
  min-height: 92px;
  padding: 6px 9px;
  border: 2px solid rgba(250,171,24,0.55);
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(255,247,225,0.97), rgba(255,232,182,0.92));
  color: var(--deep);
  box-shadow: 0 0 0 1px rgba(113,27,0,0.08), 0 10px 26px rgba(250,171,24,0.18);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.mission-timer.timer-critical {
  animation: timer-panel-pulse 850ms ease-in-out infinite;
  box-shadow: 0 0 0 1px rgba(113,27,0,0.1), 0 0 0 4px rgba(226,24,54,0.12), 0 14px 34px rgba(226,24,54,0.24);
}

.timer-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.timer-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 108px;
}

.timer-copy strong {
  color: var(--brown);
  font-size: 23px;
  line-height: 1;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  min-width: 4ch;
}

.timer-copy span {
  color: rgba(58,13,54,0.85);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.timer-clock {
  --clock-progress: 0deg;
  position: relative;
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px rgba(11,45,113,0.18), 0 10px 22px rgba(11,45,113,0.18);
}

.clock-face,
.clock-shade,
.clock-pin {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.clock-face {
  background:
    radial-gradient(circle at center, rgba(255,255,255,0.88) 0 18%, transparent 18.5%),
    radial-gradient(circle at center, rgba(0,0,0,0.06) 0 60%, transparent 61%),
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(242,227,193,0.95));
  border: 3px solid rgba(11,45,113,0.88);
}

.clock-shade {
  background: conic-gradient(from -90deg, rgba(250,171,24,0.42) 0deg, rgba(226,24,54,0.34) var(--clock-progress), transparent var(--clock-progress));
}

.clock-hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform-origin: 50% 100%;
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(11,45,113,0.25);
}

.clock-hand-short {
  width: 4px;
  height: 14px;
  background: linear-gradient(180deg, var(--deep), var(--navy));
  transform: translateX(-50%);
}

.clock-hand-sweep {
  width: 3px;
  height: 22px;
  background: linear-gradient(180deg, var(--red), var(--orange));
}

.clock-pin {
  inset: auto;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  background: var(--navy);
  border: 2px solid rgba(255,255,255,0.82);
  transform: translate(-50%, -50%);
  z-index: 2;
}

.lives-label {
  display: block;
  margin-bottom: 2px;
  color: var(--navy);
  font-size: var(--fs-xs);
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.life-row {
  display: flex;
  gap: 4px;
  justify-content: center;
}

.shield {
  display: inline-block;
  color: var(--magenta);
  font-size: 20px;
  transform-origin: center;
  text-shadow: 0 0 8px rgba(186,48,147,0.45), 0 0 16px rgba(226,24,54,0.28);
  filter: drop-shadow(0 0 6px rgba(226,24,54,0.28));
  animation: heart-glow-pulse 2.8s ease-in-out infinite;
  transition: transform 200ms ease, opacity 200ms ease, color 200ms ease;
}

.life-row .shield:nth-child(2) { animation-delay: 0.18s; }
.life-row .shield:nth-child(3) { animation-delay: 0.34s; }
.life-row .shield:nth-child(4) { animation-delay: 0.5s;  }
.life-row .shield:nth-child(5) { animation-delay: 0.66s; }

.shield.lost {
  opacity: 0.22;
  transform: scale(0.72);
  text-shadow: none;
  animation: none;
  filter: none;
  color: var(--slate);
}

.hint-bar {
  min-height: 46px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(178,204,52,0.18);
}

.hint-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(219,220,221,0.9);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.hint-unlock {
  position: relative;
  width: 14px;
  height: 14px;
  display: inline-block;
}

.hint-unlock-shackle {
  position: absolute;
  left: 2px;
  top: -1px;
  width: 8px;
  height: 7px;
  border: 2px solid var(--amber);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  transform: rotate(-28deg);
  transform-origin: 3px 6px;
}

.hint-unlock-body {
  position: absolute;
  left: 2px;
  bottom: 0;
  width: 10px;
  height: 8px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--amber), var(--orange));
  box-shadow: inset 0 -1px 0 rgba(113,27,0,0.3);
}

.hint-chip {
  padding: 9px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--lime), var(--green));
  color: var(--deep);
  font-size: 14px;
  font-weight: 900;
  animation: hint-pop 320ms ease-out;
  box-shadow: 0 6px 16px rgba(178,204,52,0.28);
}

.board-wrap {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 8px;
  border-radius: 18px;
  background: rgba(219,220,221,0.62);
  box-shadow: 7px 7px 0 rgba(107,109,111,0.55), 0 0 40px rgba(0,157,217,0.1), inset 0 1px 0 rgba(219,220,221,0.55);
  backdrop-filter: none;
  border: 1px solid rgba(219,220,221,0.45);
  position: relative;
}

.countdown-overlay {
  position: absolute;
  inset: 10px;
  z-index: 5;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: radial-gradient(circle at center, rgba(11,45,113,0.86), rgba(0,22,44,0.92));
  backdrop-filter: blur(6px);
}

.countdown-mark {
  color: var(--mist);
  font-size: clamp(72px, 15vw, 160px);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-shadow: 0 0 16px rgba(0,178,189,0.45), 0 0 36px rgba(250,171,24,0.25);
  animation: countdown-flash 900ms ease-in-out infinite;
}

.solved-stack {
  display: grid;
  gap: 6px;
  min-height: 0;
}

.solved-group {
  min-height: 0;
  height: auto;
  width: 100%;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 10px;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,0.22), 0 0 18px rgba(0,0,0,0.18);
  position: relative;
  overflow: hidden;
}

.solved-group:nth-child(3n + 1) {
  background: #0B2D71 !important;
  color: var(--mist);
}

.solved-group:nth-child(3n + 2) {
  background: #00708C !important;
  color: var(--mist);
}

.solved-group:nth-child(3n + 3) {
  background: #769231 !important;
  color: var(--mist);
}

.solved-group:nth-child(4n + 4) {
  background: #97002E !important;
  color: var(--mist);
}

.solved-group::after {
  content: '\2726';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  opacity: 0.18;
  pointer-events: none;
}

.solved-group strong {
  display: block;
  font-size: var(--fs-base);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.solved-group span {
  display: block;
  font-size: var(--fs-base);
  font-weight: 900;
  line-height: 1.3;
}

.board {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: stretch;
  justify-content: stretch;
  gap: 6px;
}

.tile {
  min-height: 0;
  height: 100%;
  padding: 6px;
  border: 2px solid rgba(0,178,189,0.22);
  border-radius: 10px;
  background: rgba(219,220,221,0.76);
  color: var(--deep);
  font-size: var(--fs-base);
  font-weight: 900;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  cursor: pointer;
  backdrop-filter: blur(6px);
  position: relative;
  overflow: hidden;
  transition: transform 200ms cubic-bezier(.34,1.56,.4,1), background 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,178,189,0.06) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 170ms ease;
  pointer-events: none;
}

.tile:hover:not(:disabled) {
  transform: translateY(-3px);
  border-color: var(--sky);
  box-shadow: 0 6px 0 var(--teal), 0 0 22px rgba(0,157,217,0.28);
  background: rgba(219,220,221,0.92);
}

.tile:hover:not(:disabled)::before {
  opacity: 1;
}

.tile.selected {
  border-color: var(--amber);
  background: rgba(0,178,189,0.35);
  color: var(--deep);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 6px 0 var(--teal), 0 0 26px rgba(250,171,24,0.38);
  animation: selected-pulse 280ms ease-out;
}

.board.correct-hit .tile {
  animation: tile-correct 420ms cubic-bezier(.2,.8,.2,1);
}

.board.correct-hit .tile:nth-child(2n) {
  animation-delay: 25ms;
}

.board.correct-hit .tile:nth-child(3n) {
  animation-delay: 45ms;
}

.actions {
  margin-top: 0;
  padding: 2px 0 6px;
  display: flex;
  justify-content: center;
  gap: 9px;
  flex-wrap: wrap;
}

.unlock-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,54,83,0.46);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  padding: 16px;
}

.unlock-modal {
  width: min(420px, 100%);
  padding: 24px 22px 22px;
  border-radius: 22px;
  border: 1px solid rgba(219,220,221,0.65);
  background: linear-gradient(180deg, rgba(219,220,221,0.97), rgba(200,212,222,0.96));
  color: var(--deep);
  text-align: center;
  box-shadow: 0 18px 48px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.55);
  position: relative;
  overflow: hidden;
}

.unlock-modal h3 {
  margin: 8px 0 18px;
  font-size: 22px;
  color: var(--navy);
}

.unlock-icon {
  position: relative;
  width: 72px;
  height: 72px;
  margin: 0 auto 10px;
}

.unlock-shackle {
  position: absolute;
  left: 18px;
  top: 2px;
  width: 36px;
  height: 30px;
  border: 6px solid var(--navy);
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  transform-origin: 12px 24px;
  animation: shackle-open 900ms cubic-bezier(.2,.8,.2,1) forwards;
}

.unlock-body {
  position: absolute;
  left: 12px;
  top: 28px;
  width: 48px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--amber), var(--orange));
  box-shadow: inset 0 -4px 0 rgba(113,27,0,0.25), 0 8px 16px rgba(229,96,31,0.28);
}

.unlock-body::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 10px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(58,13,54,0.85);
  transform: translateX(-50%);
}

.unlock-body::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 18px;
  width: 6px;
  height: 11px;
  border-radius: 999px;
  background: rgba(58,13,54,0.85);
  transform: translateX(-50%);
}

.unlock-spark {
  position: absolute;
  color: var(--cyan);
  opacity: 0;
  animation: unlock-spark 850ms ease-out 250ms forwards;
}

.unlock-spark-a {
  left: 0;
  top: 10px;
  font-size: 18px;
}

.unlock-spark-b {
  right: 2px;
  top: 18px;
  font-size: 14px;
  animation-delay: 320ms;
}

.submit-button {
  min-width: 150px;
}

.completion {
  margin: 0 auto;
  padding: 14px 92px;
  width: min(520px, calc(100vw - 24px));
  border: 2px solid rgba(140,143,147,0.65);
  border-radius: 18px;
  background: linear-gradient(90deg, rgba(219,220,221,0.96), rgba(140,143,147,0.94), rgba(219,220,221,0.96));
  color: var(--deep);
  text-align: center;
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 38px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.45);
  animation: completion-idle-float 2.8s ease-in-out infinite alternate;
  position: relative;
  overflow: hidden;
}

.completion.win {
  border-color: rgba(118,146,49,0.9);
  background: linear-gradient(90deg, rgba(219,220,221,0.97), rgba(204,208,210,0.96), rgba(219,220,221,0.97));
  box-shadow: 0 20px 44px rgba(107,109,111,0.2), inset 0 1px 0 rgba(255,255,255,0.3);
}

.completion.loss {
  border-color: rgba(151,0,46,0.9);
  background: linear-gradient(90deg, rgba(219,220,221,0.97), rgba(204,208,210,0.96), rgba(219,220,221,0.97));
  box-shadow: 0 20px 44px rgba(107,109,111,0.24), inset 0 1px 0 rgba(255,255,255,0.22);
  animation: completion-loss-sway 0.8s ease-in-out 2, completion-idle-float 2.8s ease-in-out infinite alternate 0.75s;
}

.completion h2 {
  margin: 0;
  font-size: 26px;
  line-height: 1;
  overflow-wrap: anywhere;
}

.completion p:not(.kicker) {
  margin: 6px 0 8px;
  font-size: var(--fs-base);
  color: var(--deep);
  overflow-wrap: anywhere;
}

.completion-badge {
  position: absolute;
  top: 50%;
  width: 72px;
  height: 72px;
  margin: 0;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
}

.completion-badge-left {
  left: 10px;
}

.completion-badge-right {
  right: 10px;
}

.completion-badge-ring {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid rgba(107,109,111,0.35);
}

.completion-badge-icon {
  position: relative;
  font-size: 34px;
  line-height: 1;
}

.completion-glow-orb {
  position: absolute;
  width: 96px;
  height: 96px;
  border-radius: 999px;
  filter: blur(22px);
  opacity: 0.28;
  pointer-events: none;
}

.orb-left {
  left: -18px;
  right: auto;
  top: 50%;
  transform: translateY(-50%);
}

.orb-right {
  right: -20px;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

.completion h2,
.completion p,
.completion .kicker,
.completion button {
  position: relative;
  z-index: 1;
}

@media (max-width: 780px) {
  .completion {
    padding: 12px 60px;
    border-radius: 24px;
    width: calc(100vw - 20px);
  }

  .completion-badge {
    width: 56px;
    height: 56px;
  }

  .completion-badge-left {
    left: 8px;
  }

  .completion-badge-right {
    right: 8px;
  }

  .completion-badge-icon {
    font-size: 26px;
  }
}

.completion.win .completion-badge-icon {
  color: var(--amber);
  animation: trophy-bob 1.4s ease-in-out infinite;
}

.completion.win h2,
.completion.win p strong {
  color: var(--green);
}

.completion.win .completion-badge-left .completion-badge-icon {
  animation-delay: 0s;
}

.completion.win .completion-badge-right .completion-badge-icon {
  animation-delay: 0.18s;
}

.completion.win .orb-left,
.completion.win .orb-right {
  background: radial-gradient(circle, rgba(178,204,52,0.7), rgba(0,178,189,0));
}

.completion.loss .completion-badge-icon {
  color: var(--red);
  animation: loss-badge-hover 1.5s ease-in-out infinite;
}

.completion.loss h2,
.completion.loss p strong {
  color: var(--red);
}

.completion.loss .completion-badge-left .completion-badge-icon {
  animation-delay: 0s;
}

.completion.loss .completion-badge-right .completion-badge-icon {
  animation-delay: 0.22s;
}

.completion.loss .orb-left,
.completion.loss .orb-right {
  background: radial-gradient(circle, rgba(226,24,54,0.62), rgba(117,18,105,0));
}

.victory-screen {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.victory-summary {
  width: min(420px, 100%);
}

.victory-board-wrap {
  flex: 1;
  display: flex;
}

.victory-solved-stack {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.victory-solved-stack .solved-group {
  min-height: 0;
  height: auto;
}

.loss-solved-stack {
  flex: 1;
}

.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 11000;
  pointer-events: none;
}

.tour-backdrop {
  position: absolute;
  inset: 0;
  background: transparent;
  backdrop-filter: none;
  animation: tour-backdrop-in 240ms ease-out;
}

.tour-highlight {
  position: fixed;
  border-radius: 14px;
  border: 2px solid rgba(250,171,24,0.95);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45), 0 0 0 2px rgba(255,255,255,0.32) inset, 0 0 28px rgba(250,171,24,0.58);
  animation: tour-highlight-pulse 1.2s ease-in-out infinite;
  pointer-events: none;
}

.tour-callout {
  position: fixed;
  pointer-events: auto;
  padding: 14px 14px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,178,189,0.44);
  background: linear-gradient(180deg, rgba(225,239,251,0.97), rgba(203,222,240,0.96));
  color: var(--deep);
  box-shadow: 0 14px 36px rgba(0,0,0,0.36), inset 0 1px 0 rgba(255,255,255,0.45);
  animation: tour-callout-in 280ms cubic-bezier(.2,.8,.2,1);
}

.tour-arrow {
  position: absolute;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid rgba(0,178,189,0.44);
  background: rgba(213,231,247,0.98);
}

.tour-callout[data-placement='left'] .tour-arrow {
  transform: translate(50%, -50%) rotate(45deg);
}

.tour-callout[data-placement='top'] .tour-arrow {
  transform: translate(-50%, 50%) rotate(45deg);
}

.tour-kicker {
  margin: 0 0 4px;
  color: var(--teal);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.tour-callout h3 {
  margin: 0;
  color: var(--navy);
  font-size: 19px;
  line-height: 1.1;
}

.tour-message {
  margin: 8px 0 12px;
  color: rgba(0,54,83,0.96);
  font-size: 14px;
  line-height: 1.35;
}

.tour-controls {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.tour-controls .primary-button,
.tour-controls .secondary-button {
  padding: 8px 14px;
  font-size: 13px;
}

.toast {
  position: fixed;
  z-index: 100000;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 240px;
  padding: 14px 24px;
  border: 2px solid rgba(0,178,189,0.55);
  border-radius: 999px;
  background: rgba(0,40,70,0.92);
  color: var(--mist);
  box-shadow: 0 6px 0 var(--navy), 0 0 32px rgba(0,178,189,0.28);
  text-align: center;
  font-size: var(--fs-base);
  font-weight: 900;
  backdrop-filter: blur(14px);
}

.toast.correct {
  border-color: var(--lime);
  background: rgba(100,128,30,0.92);
  color: var(--deep);
  box-shadow: 0 6px 0 var(--olive), 0 0 30px rgba(178,204,52,0.4);
}

.toast.wrong {
  border-color: var(--orange);
  background: rgba(200,16,40,0.92);
  color: var(--mist);
  animation: shake 360ms ease-in-out;
  box-shadow: 0 6px 0 var(--wine), 0 0 30px rgba(226,24,54,0.4);
}

.toast.oneaway {
  border-color: var(--orange);
  background: rgba(220,145,10,0.92);
  color: var(--deep);
  animation: one-away-pulse 420ms ease-out;
  box-shadow: 0 6px 0 #6e4000, 0 0 30px rgba(250,171,24,0.4);
}

@keyframes timer-panel-pulse {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-1px) scale(1.02);
  }
}

@keyframes tour-backdrop-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes tour-callout-in {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes tour-highlight-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45), 0 0 0 2px rgba(255,255,255,0.32) inset, 0 0 22px rgba(250,171,24,0.45);
  }

  50% {
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45), 0 0 0 2px rgba(255,255,255,0.4) inset, 0 0 34px rgba(250,171,24,0.75);
  }
}

@keyframes countdown-flash {
  0%, 100% {
    opacity: 0.72;
    transform: scale(0.9);
  }
  45% {
    opacity: 1;
    transform: scale(1.06);
  }
}

@keyframes grid-breathe {
  0%, 100% { opacity: 1;   }
  50%       { opacity: 0.5; }
}

@keyframes drift {
  0%   { opacity: 0;   transform: translateY(100vh) rotate(0deg)   scale(0.6); }
  8%   { opacity: 0.7; }
  92%  { opacity: 0.7; }
  100% { opacity: 0;   transform: translateY(-80px)  rotate(540deg) scale(1.3); }
}

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

@keyframes card-enter {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

@keyframes btn-shimmer {
  0%        { left: -100%; }
  50%, 100% { left: 150%;  }
}

@keyframes enter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes selected-pulse {
  50% { transform: translateY(-3px) scale(1.06); }
}

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

@keyframes heart-glow-pulse {
  0%, 52%, 100% {
    transform: scale(1);
    text-shadow: 0 0 8px rgba(186,48,147,0.42), 0 0 16px rgba(226,24,54,0.26);
    filter: drop-shadow(0 0 6px rgba(226,24,54,0.25));
  }

  14% {
    transform: scale(1.12);
    text-shadow: 0 0 12px rgba(186,48,147,0.72), 0 0 24px rgba(226,24,54,0.48);
    filter: drop-shadow(0 0 12px rgba(226,24,54,0.42));
  }

  27% {
    transform: scale(0.98);
    text-shadow: 0 0 9px rgba(186,48,147,0.58), 0 0 18px rgba(226,24,54,0.38);
    filter: drop-shadow(0 0 9px rgba(226,24,54,0.3));
  }
}

@keyframes tile-correct {
  0% {
    transform: translateY(0) scale(1);
    border-color: rgba(0,178,189,0.22);
  }

  45% {
    transform: translateY(-4px) scale(1.05);
    border-color: var(--lime);
    box-shadow: 0 8px 0 var(--green), 0 0 24px rgba(178,204,52,0.42);
  }

  100% {
    transform: translateY(0) scale(1);
    border-color: rgba(0,178,189,0.22);
  }
}

@keyframes completion-idle-float {
  from {
    transform: translateY(0) scale(1);
  }

  to {
    transform: translateY(-5px) scale(1.01);
  }
}

@keyframes completion-loss-sway {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  25% {
    transform: translateY(2px) rotate(-1.3deg);
  }

  75% {
    transform: translateY(2px) rotate(1.3deg);
  }
}

@keyframes trophy-bob {
  0%,
  100% {
    transform: translateY(0) scale(1);
    text-shadow: 0 0 0 rgba(250,171,24,0);
  }

  50% {
    transform: translateY(-14px) scale(1.18);
    text-shadow: 0 0 24px rgba(250,171,24,0.9);
  }

  75% {
    transform: translateY(-7px) scale(1.09);
  }
}

@keyframes loss-badge-hover {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    text-shadow: 0 0 0 rgba(226,24,54,0);
  }

  50% {
    transform: translateY(-11px) rotate(-8deg) scale(1.15);
    text-shadow: 0 0 22px rgba(226,24,54,0.7);
  }

  75% {
    transform: translateY(-5px) rotate(5deg) scale(1.06);
  }
}

@keyframes shackle-open {
  0% {
    transform: rotate(0deg) translateX(0);
  }

  45% {
    transform: rotate(-8deg) translateX(0);
  }

  100% {
    transform: rotate(-32deg) translateX(-4px);
  }
}

@keyframes unlock-spark {
  0% {
    opacity: 0;
    transform: scale(0.4) translateY(4px);
  }

  45% {
    opacity: 1;
    transform: scale(1.18) translateY(-4px);
  }

  100% {
    opacity: 0;
    transform: scale(1.5) translateY(-10px);
  }
}

@keyframes one-away-pulse {
  0%   { transform: translate(-50%, -15px) scale(0.8);  }
  55%  { transform: translate(-50%, 0)     scale(1.08); }
  100% { transform: translate(-50%, 0)     scale(1);    }
}

@keyframes shake {
  20%, 60% { transform: translateX(calc(-50% - 8px)); }
  40%, 80%  { transform: translateX(calc(-50% + 8px)); }
  100%      { transform: translateX(-50%);             }
}

@media (max-width: 780px) {
  .shell {
    overflow: auto;
  }

  .shell.in-game {
    overflow: hidden;
  }

  .login-card {
    grid-template-columns: 1fr;
  }

  .login-title-block h1 {
    font-size: clamp(34px, 11vw, 52px);
  }

  .login-copy,
  .login-form {
    padding: 34px 26px;
  }

  .game-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .game {
    padding: 8px;
  }

  .game-title {
    font-size: clamp(24px, 8vw, 32px);
  }

  .lives {
    text-align: center;
  }

  .board {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tile {
    height: 100%;
  }

  .actions {
    padding-bottom: 10px;
  }

  .solved-group strong,
  .solved-group span {
    font-size: var(--fs-base);
  }

  .tour-callout {
    max-width: calc(100vw - 24px);
    padding: 12px;
    border-radius: 12px;
  }

  .tour-controls {
    justify-content: center;
  }
}

@media (max-height: 720px) and (min-width: 781px) {
  main {
    padding-top: 7px;
  }

  .game-title {
    font-size: 24px;
    margin-bottom: 2px;
  }

  .game-heading h2 {
    font-size: var(--fs-base);
  }

  .game-heading {
    margin-bottom: 5px;
  }

  .tile {
    height: 100%;
  }

  .board {
    gap: 6px;
  }

  .solved-group {
    min-height: 0;
    height: auto;
  }

  .solved-group strong,
  .solved-group span {
    font-size: var(--fs-xs);
  }

  .actions {
    margin-top: 7px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   TILE EXIT ANIMATION  (correct-guess flip-out)
═══════════════════════════════════════════════════════════════════ */

.board {
  perspective: 900px;
}

.tile.exiting {
  animation: tile-flip-exit 560ms cubic-bezier(.4, 0, .2, 1) forwards;
  pointer-events: none;
  position: relative;
  z-index: 5;
}

@keyframes tile-flip-exit {
  0% {
    transform: translateY(0) scale(1) rotateX(0deg);
    background: rgba(0,178,189,0.35);
    border-color: var(--amber);
    box-shadow: 0 6px 0 var(--teal), 0 0 26px rgba(250,171,24,0.38);
    opacity: 1;
  }
  22% {
    transform: translateY(-9px) scale(1.1) rotateX(0deg);
    background: rgba(178,204,52,0.55);
    border-color: var(--lime);
    box-shadow: 0 14px 0 var(--green), 0 0 36px rgba(178,204,52,0.65);
  }
  52% {
    transform: translateY(-20px) scale(1.05) rotateX(90deg);
    opacity: 0.85;
  }
  100% {
    transform: translateY(-44px) scale(0.2) rotateX(180deg);
    opacity: 0;
    box-shadow: none;
  }
}

/* ── Board lose-scatter (final wrong guess before endgame) ───── */

.board-wrap.lose-animate {
  animation: board-lose-flash 700ms ease-out forwards;
}

@keyframes board-lose-flash {
  0%   { box-shadow: 7px 7px 0 rgba(107,109,111,0.55), 0 0 40px rgba(0,157,217,0.1),  inset 0 1px 0 rgba(219,220,221,0.55); }
  18%  { box-shadow: 7px 7px 0 rgba(226,24,54,0.85),   0 0 70px rgba(226,24,54,0.55), inset 0 1px 0 rgba(226,24,54,0.35); border-color: rgba(226,24,54,0.55); }
  55%  { box-shadow: 7px 7px 0 rgba(226,24,54,0.35),   0 0 40px rgba(226,24,54,0.18); }
  100% { box-shadow: 7px 7px 0 rgba(107,109,111,0.55), 0 0 40px rgba(0,157,217,0.1),  inset 0 1px 0 rgba(219,220,221,0.55); opacity: 0.4; }
}

.board.lose-animate .tile {
  animation: tile-lose-scatter 700ms cubic-bezier(.4, 0, .6, 1) forwards;
}

/* Stagger each tile slightly for a cascade effect */
.board.lose-animate .tile:nth-child(2)  { animation-delay:  35ms; }
.board.lose-animate .tile:nth-child(3)  { animation-delay:  70ms; }
.board.lose-animate .tile:nth-child(4)  { animation-delay: 105ms; }
.board.lose-animate .tile:nth-child(5)  { animation-delay:  20ms; }
.board.lose-animate .tile:nth-child(6)  { animation-delay:  55ms; }
.board.lose-animate .tile:nth-child(7)  { animation-delay:  90ms; }
.board.lose-animate .tile:nth-child(8)  { animation-delay:  15ms; }
.board.lose-animate .tile:nth-child(9)  { animation-delay:  50ms; }
.board.lose-animate .tile:nth-child(10) { animation-delay:  85ms; }
.board.lose-animate .tile:nth-child(11) { animation-delay:  30ms; }
.board.lose-animate .tile:nth-child(12) { animation-delay:  65ms; }

@keyframes tile-lose-scatter {
  0%   { transform: translateY(0) scale(1) rotate(0deg);   opacity: 1; filter: none; }
  15%  { transform: translateY(-4px) scale(1.03) rotate(-1deg); filter: brightness(1.1); }
  35%  { transform: translateY(3px) scale(0.97) rotate(2deg);  }
  55%  { transform: translateY(-2px) scale(0.94) rotate(-2deg); filter: brightness(0.7) grayscale(0.4); }
  100% { transform: translateY(6px) scale(0.88) rotate(1deg);  opacity: 0.15; filter: brightness(0.5) grayscale(0.7) blur(1px); }
}

/* ═══════════════════════════════════════════════════════════════════
   ENDGAME SCREEN  (win + loss)
═══════════════════════════════════════════════════════════════════ */

.endgame {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

/* ── Win background ──────────────────────────────────────────── */
.endgame-win {
  background: linear-gradient(155deg, #00132b 0%, #002440 45%, #0B2D71 100%);
}

/* ── Loss background ─────────────────────────────────────────── */
.endgame-loss {
  background: linear-gradient(155deg, #0d0008 0%, #1c000c 45%, #00132b 100%);
}

/* ── Confetti layer (win only) ───────────────────────────────── */

.confetti-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.confetti-piece {
  position: absolute;
  top: -20px;
  animation: confetti-fall-cw linear infinite;
  will-change: transform;
}

.confetti-piece.ccw {
  animation-name: confetti-fall-ccw;
}

@keyframes confetti-fall-cw {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }
  6% { opacity: 1; }
  90% { opacity: 0.9; }
  100% {
    transform: translateY(110vh) rotate(960deg);
    opacity: 0;
  }
}

@keyframes confetti-fall-ccw {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }
  6% { opacity: 1; }
  90% { opacity: 0.9; }
  100% {
    transform: translateY(110vh) rotate(-960deg);
    opacity: 0;
  }
}

/* ── Correct-guess ripple rings ──────────────────────────────── */

.ripple-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.ripple-ring {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid;
  animation: ripple-expand 800ms cubic-bezier(.2, .6, .4, 1) both;
}

@keyframes ripple-expand {
  0% {
    transform: scale(0.3);
    opacity: 1;
  }
  65% {
    opacity: 0.6;
  }
  100% {
    transform: scale(7);
    opacity: 0;
  }
}

/* ── Loss atmosphere ─────────────────────────────────────────── */

.loss-atmo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.loss-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.07) 3px,
    rgba(0, 0, 0, 0.07) 4px
  );
  animation: scanlines-drift 8s linear infinite;
}

@keyframes scanlines-drift {
  from { background-position: 0 0;    }
  to   { background-position: 0 80px; }
}

.loss-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(200, 0, 40, 0.12) 100%);
  animation: vignette-breathe 3.2s ease-in-out infinite;
}

@keyframes vignette-breathe {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1;   }
}

/* ── Hero section ────────────────────────────────────────────── */

.endgame-hero {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px 14px;
  flex-shrink: 0;
}

.endgame-hero-win {
  background: linear-gradient(135deg,
    rgba(250,171,24,0.13) 0%,
    rgba(0,178,189,0.06)  100%
  );
  border-bottom: 2px solid rgba(250,171,24,0.25);
}

.endgame-hero-loss {
  background: linear-gradient(135deg,
    rgba(226,24,54,0.12)  0%,
    rgba(58,13,54,0.08)   100%
  );
  border-bottom: 2px solid rgba(226,24,54,0.25);
}

/* ── Icon halo ───────────────────────────────────────────────── */

.endgame-icon-halo {
  position: relative;
  width: 82px;
  height: 82px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}

.halo-ring {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid;
  animation: halo-expand linear infinite;
}

/* Win rings */
.halo-ring-a { border-color: rgba(250,171,24,0.8);  animation-duration: 2.2s; animation-delay: 0s;    }
.halo-ring-b { border-color: rgba(250,171,24,0.45); animation-duration: 2.2s; animation-delay: 0.5s;  inset: -8px; }
.halo-ring-c { border-color: rgba(250,171,24,0.2);  animation-duration: 2.2s; animation-delay: 1.0s;  inset: -16px; }

/* Loss rings */
.halo-ring-loss-a { border-color: rgba(226,24,54,0.75); animation-duration: 2s; animation-delay: 0s;   }
.halo-ring-loss-b { border-color: rgba(226,24,54,0.35); animation-duration: 2s; animation-delay: 0.55s; inset: -8px; }

@keyframes halo-expand {
  0%   { transform: scale(1);   opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}

.endgame-emoji {
  font-size: 42px;
  line-height: 1;
  position: relative;
  z-index: 2;
  animation: trophy-float 2.4s ease-in-out infinite;
}

.endgame-emoji-loss {
  width: 52px;
  height: 58px;
  font-size: 0;
  animation: shield-breach 2.6s cubic-bezier(.45,.05,.35,1) infinite;
}

/* Breached-shield loss icon (CSS-drawn, replaces skull) */
.breached-shield { position: relative; display: inline-block; }
.bs-shield {
  position: absolute;
  inset: 0;
  background: linear-gradient(158deg, #E21836 0%, #97002E 52%, #58001C 100%);
  clip-path: polygon(50% 0%, 94% 14%, 94% 52%, 72% 82%, 50% 100%, 28% 82%, 6% 52%, 6% 14%);
  box-shadow: inset 0 2px 3px rgba(255,255,255,0.30), inset 0 -6px 12px rgba(88,0,28,0.55);
  filter: drop-shadow(0 6px 14px rgba(226,24,54,0.45));
}
.bs-shield::before { content: ''; position: absolute; left: 18%; right: 18%; top: 30%; height: 2px; background: rgba(255,255,255,0.16); border-radius: 2px; }
.bs-crack {
  position: absolute;
  left: 50%;
  top: 9%;
  width: 13px;
  height: 80%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(219,220,221,0.96) 0%, rgba(250,171,24,0.92) 60%, rgba(229,96,31,0.9) 100%);
  clip-path: polygon(46% 0, 66% 20%, 34% 38%, 62% 56%, 32% 74%, 52% 100%, 44% 100%, 26% 74%, 54% 56%, 28% 38%, 58% 20%, 38% 0);
  box-shadow: 0 0 8px rgba(250,171,24,0.6);
  animation: bs-crack-glow 2.6s ease-in-out infinite;
}
.bs-spark { position: absolute; color: var(--amber); font-size: 11px; opacity: 0; pointer-events: none; animation: bs-spark-fly 2.6s ease-out infinite; }
.bs-spark-a { left: 30%; top: 34%; animation-delay: 0.15s; }
.bs-spark-b { right: 26%; top: 50%; font-size: 9px; animation-delay: 0.5s; }

@keyframes bs-crack-glow { 0%,100%{opacity:0.82;box-shadow:0 0 6px rgba(250,171,24,0.45);} 45%{opacity:1;box-shadow:0 0 15px rgba(250,171,24,0.9),0 0 26px rgba(226,24,54,0.4);} }
@keyframes bs-spark-fly { 0%,60%{opacity:0;transform:translate(0,0) scale(0.6);} 70%{opacity:1;transform:translate(0,-3px) scale(1.1);} 100%{opacity:0;transform:translate(0,-12px) scale(0.5);} }

@keyframes trophy-float {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 0 10px rgba(250,171,24,0.55));
  }
  50% {
    transform: translateY(-10px) scale(1.14);
    filter: drop-shadow(0 0 22px rgba(250,171,24,1));
  }
}

@keyframes shield-breach {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  14% { transform: translateY(-1px) rotate(-3deg) scale(1.02); }
  28% { transform: translateY(0) rotate(3deg) scale(0.99); }
  42% { transform: translateY(-4px) rotate(-1deg) scale(1.05); }
  60% { transform: translateY(0) rotate(0deg) scale(1); }
}

/* ── Copy block ──────────────────────────────────────────────── */

.endgame-copy {
  flex: 1;
  min-width: 0;
}

.endgame-eyebrow {
  margin: 0 0 3px;
  color: var(--amber);
  font-size: var(--fs-xs);
  font-weight: 900;
  letter-spacing: 0.18em;
}

.endgame-eyebrow-loss {
  color: var(--red);
}

.endgame-headline {
  margin: 0 0 10px;
  font-size: clamp(22px, 3.2vw, 34px);
  color: var(--mist);
  line-height: 1;
  text-shadow: 0 0 24px rgba(0,157,217,0.45);
}

.endgame-headline-loss {
  text-shadow: 0 0 24px rgba(226,24,54,0.5);
}

.endgame-footer-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.endgame-score-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(250,171,24,0.18);
  border: 1.5px solid rgba(250,171,24,0.5);
  color: var(--amber);
  animation: score-pulse 2.6s ease-in-out infinite;
}

.endgame-score-pill strong {
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

.endgame-score-pill span {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.endgame-score-pill-loss {
  background: rgba(226,24,54,0.15);
  border-color: rgba(226,24,54,0.45);
  color: var(--red);
  animation: score-pulse-loss 2.6s ease-in-out infinite;
}

@keyframes score-pulse {
  0%, 100% { box-shadow: 0 0 0   rgba(250,171,24,0);    }
  50%       { box-shadow: 0 0 16px rgba(250,171,24,0.5); }
}

@keyframes score-pulse-loss {
  0%, 100% { box-shadow: 0 0 0   rgba(226,24,54,0);    }
  50%       { box-shadow: 0 0 16px rgba(226,24,54,0.45); }
}

.endgame-cta {
  padding: 8px 18px;
  font-size: var(--fs-base);
}

/* ── Group cards grid ────────────────────────────────────────── */

.endgame-cards-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 7px;
  padding: 12px;
  position: relative;
  z-index: 1;
}

.endgame-card {
  min-height: 0;
  padding: 8px 16px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,0.22),
              0 4px 22px rgba(0,0,0,0.28);
  /* Both win and loss cards share the entry keyframe but have separate classes
     so we can tune timing independently */
  animation: endgame-card-in 500ms cubic-bezier(.2,.8,.2,1) both;
  opacity: 0; /* start hidden; animation fills forward */
}

.endgame-card:nth-child(3n + 1) {
  background: #0B2D71 !important;
  color: var(--mist);
}

.endgame-card:nth-child(3n + 2) {
  background: #00708C !important;
  color: var(--mist);
}

.endgame-card:nth-child(3n + 3) {
  background: #769231 !important;
  color: var(--mist);
}

.endgame-card:nth-child(4n + 4) {
  background: #97002E !important;
  color: var(--mist);
}

.endgame-card::after {
  content: '\2726';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  opacity: 0.15;
  pointer-events: none;
}

.endgame-card strong {
  display: block;
  font-size: var(--fs-base);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.endgame-card span {
  display: block;
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.35;
}

/* Win cards: flip down from flat, like a tile becoming a card */
@keyframes endgame-card-in {
  0% {
    opacity: 0;
    transform: scaleY(0.08) translateY(-4px);
    filter: brightness(2.5);
  }
  55% {
    transform: scaleY(1.05) translateY(2px);
    filter: brightness(1.2);
  }
  80% {
    transform: scaleY(0.97);
    filter: brightness(1);
  }
  100% {
    opacity: 1;
    transform: scaleY(1) translateY(0);
    filter: brightness(1);
  }
}

/* Loss cards: slide in from the left with a blur/desaturate intro */
.endgame-card-loss {
  animation: endgame-card-in-loss 560ms cubic-bezier(.2,.8,.2,1) both;
}

@keyframes endgame-card-in-loss {
  0% {
    opacity: 0;
    transform: translateX(-48px) scaleY(0.4);
    filter: blur(6px) brightness(0.3) saturate(0);
  }
  55% {
    transform: translateX(5px) scaleY(1.04);
    filter: blur(0) brightness(1.2) saturate(1.5);
  }
  80% {
    transform: translateX(-2px) scaleY(0.98);
    filter: brightness(1) saturate(1);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scaleY(1);
    filter: brightness(1) saturate(1);
  }
}

/* ── Responsive tweaks ───────────────────────────────────────── */

@media (max-width: 780px) {
  .endgame-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px 12px;
  }

  .endgame-icon-halo {
    width: 64px;
    height: 64px;
  }

  .endgame-emoji {
    font-size: 34px;
  }

  .endgame-headline {
    font-size: 22px;
    margin-bottom: 8px;
  }

  .endgame-cards-grid {
    padding: 8px;
    gap: 5px;
  }
}

@media (max-height: 720px) and (min-width: 781px) {
  .endgame-hero {
    padding: 12px 18px 10px;
  }

  .endgame-icon-halo {
    width: 62px;
    height: 62px;
  }

  .endgame-emoji {
    font-size: 34px;
  }

  .endgame-headline {
    font-size: 20px;
    margin-bottom: 6px;
  }

  .endgame-card strong,
  .endgame-card span {
    font-size: var(--fs-xs);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ENHANCEMENT PACK — richer endgame + popup graphics & animations
   (Chevron-compliant palette only; layout & features unchanged)
═══════════════════════════════════════════════════════════════════ */

/* ── WIN: rotating light rays behind the trophy ─────────────────── */
.win-rays {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 168px;
  height: 168px;
  transform: translate(-50%, -50%);
  z-index: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(250,171,24,0.30) 0deg 7deg,
    transparent 7deg 20deg
  );
  -webkit-mask: radial-gradient(circle, transparent 24%, #000 30%, #000 60%, transparent 72%);
          mask: radial-gradient(circle, transparent 24%, #000 30%, #000 60%, transparent 72%);
  animation: win-rays-spin 9s linear infinite, win-rays-pulse 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes win-rays-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes win-rays-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* ── WIN: fireworks bursts ──────────────────────────────────────── */
.fireworks-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.firework {
  position: absolute;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  opacity: 0;
  -webkit-mask: radial-gradient(circle, #000 0 2%, transparent 62%);
          mask: radial-gradient(circle, #000 0 2%, transparent 62%);
  animation: fw-burst 2.4s ease-out infinite;
}
.firework::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    currentColor 0deg 3deg,
    transparent 3deg 18deg
  );
}
.fw-1 { top: 18%;  left: 14%; color: #FAAB18; animation-delay: 0.2s; }
.fw-2 { top: 30%;  left: 82%; color: #00B2BD; animation-delay: 1.0s; }
.fw-3 { top: 66%;  left: 24%; color: #B2CC34; animation-delay: 1.7s; }
.fw-4 { top: 72%;  left: 74%; color: #BA3093; animation-delay: 2.4s; }
@keyframes fw-burst {
  0%   { opacity: 0;    transform: scale(0.1); }
  12%  { opacity: 0.95; }
  45%  { opacity: 0.7;  transform: scale(1); }
  70%  { opacity: 0;    transform: scale(1.35); }
  100% { opacity: 0;    transform: scale(1.35); }
}

/* ── WIN: animated star rating ──────────────────────────────────── */
.endgame-stars {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
}
.eg-star {
  font-size: 24px;
  line-height: 1;
  color: rgba(219,220,221,0.28);
  transform: scale(0.6) rotate(-18deg);
  opacity: 0;
  animation: star-pop 520ms cubic-bezier(.2,1.4,.4,1) forwards;
}
.eg-star.filled {
  color: var(--amber);
  text-shadow: 0 0 10px rgba(250,171,24,0.7), 0 0 20px rgba(229,96,31,0.4);
}
.eg-star.filled::after {
  /* gentle idle twinkle only for earned stars */
  content: '';
}
.eg-star.filled {
  animation: star-pop 520ms cubic-bezier(.2,1.4,.4,1) forwards,
             star-twinkle 2.6s ease-in-out 900ms infinite;
}
@keyframes star-pop {
  0%   { opacity: 0; transform: scale(0.4) rotate(-24deg); }
  60%  { opacity: 1; transform: scale(1.25) rotate(6deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes star-twinkle {
  0%, 100% { text-shadow: 0 0 10px rgba(250,171,24,0.7), 0 0 20px rgba(229,96,31,0.4); }
  50%      { text-shadow: 0 0 16px rgba(250,171,24,1), 0 0 30px rgba(229,96,31,0.6); transform: scale(1.08); }
}
.flawless-tag {
  margin-left: 6px;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: var(--deep);
  background: linear-gradient(135deg, var(--lime), var(--amber));
  box-shadow: 0 0 0 1px rgba(255,255,255,0.4) inset, 0 4px 14px rgba(250,171,24,0.4);
  animation: flawless-in 600ms cubic-bezier(.2,1.4,.4,1) 700ms both,
             flawless-shine 2.8s ease-in-out 1.3s infinite;
}
@keyframes flawless-in {
  0%   { opacity: 0; transform: translateY(-6px) scale(0.7); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes flawless-shine {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,0.4) inset, 0 4px 14px rgba(250,171,24,0.4); }
  50%      { box-shadow: 0 0 0 1px rgba(255,255,255,0.6) inset, 0 4px 22px rgba(250,171,24,0.75); }
}

/* ── Endgame stat pills (win + loss) ────────────────────────────── */
.endgame-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}
.eg-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 12px;
  background: rgba(0,178,189,0.12);
  border: 1.5px solid rgba(0,178,189,0.34);
  color: var(--mist);
  opacity: 0;
  transform: translateY(8px);
  animation: eg-stat-in 460ms cubic-bezier(.2,.8,.2,1) forwards;
}
.eg-stat-hero {
  background: rgba(250,171,24,0.16);
  border-color: rgba(250,171,24,0.5);
}
.eg-stat-loss {
  background: rgba(226,24,54,0.12);
  border-color: rgba(226,24,54,0.38);
}
.eg-stat-ico {
  font-size: 13px;
  color: var(--cyan);
}
.eg-stat-hero .eg-stat-ico { color: var(--amber); }
.eg-stat-loss .eg-stat-ico { color: var(--red); }
.eg-ico-heart { color: var(--magenta) !important; }
.eg-stat strong {
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.eg-stat-lbl {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(219,220,221,0.72);
}
@keyframes eg-stat-in {
  to { opacity: 1; transform: translateY(0); }
}

/* ── LOSS: drifting embers ──────────────────────────────────────── */
.ember {
  position: absolute;
  bottom: -12px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, #FAAB18 0%, #E5601F 70%, transparent 100%);
  filter: blur(0.3px);
  opacity: 0;
  animation: ember-rise linear infinite;
}
.e-1 { left: 16%; animation-duration: 6.5s; animation-delay: 0s;   }
.e-2 { left: 34%; animation-duration: 8s;   animation-delay: 1.6s; }
.e-3 { left: 52%; animation-duration: 5.5s; animation-delay: 3s;   }
.e-4 { left: 70%; animation-duration: 7.5s; animation-delay: 2.2s; }
.e-5 { left: 86%; animation-duration: 6.8s; animation-delay: 4s;   }
@keyframes ember-rise {
  0%   { opacity: 0;   transform: translateY(0) translateX(0) scale(1); }
  10%  { opacity: 0.9; }
  50%  { transform: translateY(-46vh) translateX(10px) scale(1.15); }
  85%  { opacity: 0.7; }
  100% { opacity: 0;   transform: translateY(-92vh) translateX(-8px) scale(0.4); }
}

/* ── LOSS: encouragement + closeness meter ──────────────────────── */
.loss-encourage {
  margin: 0 0 10px;
  max-width: 620px;
  font-size: 14px;
  line-height: 1.35;
  color: rgba(219,220,221,0.9);
  animation: enter 480ms ease-out 120ms both;
}
.loss-meter {
  margin: 0 0 12px;
  max-width: 340px;
}
.loss-meter-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(219,220,221,0.16);
  border: 1px solid rgba(226,24,54,0.3);
  overflow: hidden;
}
.loss-meter-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--red), var(--orange), var(--amber));
  background-size: 200% 100%;
  box-shadow: 0 0 12px rgba(229,96,31,0.5);
  transform-origin: left center;
  animation: meter-grow 900ms cubic-bezier(.2,.8,.2,1) 200ms both,
             meter-shimmer 2.4s linear infinite;
}
.loss-meter-label {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(219,220,221,0.78);
}
@keyframes meter-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes meter-shimmer {
  0%   { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

/* ── POPUP: unlock modal — rotating rays, confetti, progress ────── */
.unlock-rays {
  position: absolute;
  left: 50%;
  top: 62px;
  width: 180px;
  height: 180px;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(0,157,217,0.18) 0deg 8deg,
    transparent 8deg 22deg
  );
  -webkit-mask: radial-gradient(circle, transparent 20%, #000 26%, #000 58%, transparent 70%);
          mask: radial-gradient(circle, transparent 20%, #000 26%, #000 58%, transparent 70%);
  animation: win-rays-spin 11s linear infinite;
}
.unlock-confetti {
  position: absolute;
  top: 12px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  animation: uc-drop 1400ms ease-in 200ms infinite;
}
.uc-1 { left: 24%; color: var(--amber);   animation-delay: 0.2s; }
.uc-2 { left: 52%; color: var(--sky);     animation-delay: 0.55s; }
.uc-3 { left: 74%; color: var(--lime);    animation-delay: 0.9s; }
@keyframes uc-drop {
  0%   { opacity: 0; transform: translateY(-6px) rotate(0deg); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(48px) rotate(220deg); }
}
.unlock-modal > .unlock-icon,
.unlock-modal > .kicker,
.unlock-modal > .unlock-title,
.unlock-modal > .unlock-progress,
.unlock-modal > .primary-button {
  position: relative;
  z-index: 1;
}
.unlock-title {
  animation: unlock-title-in 520ms cubic-bezier(.2,1.3,.4,1) 120ms both;
}
@keyframes unlock-title-in {
  0%   { opacity: 0; transform: translateY(8px) scale(0.9); letter-spacing: 0.2em; }
  100% { opacity: 1; transform: translateY(0) scale(1); letter-spacing: normal; }
}
.unlock-progress {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin: 2px 0 16px;
}
.up-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(11,45,113,0.18);
  border: 2px solid rgba(11,45,113,0.35);
  transition: transform 260ms cubic-bezier(.2,1.4,.4,1), background 260ms ease, box-shadow 260ms ease;
}
.up-dot.on {
  background: linear-gradient(135deg, var(--sky), var(--teal));
  border-color: var(--teal);
  box-shadow: 0 0 10px rgba(0,157,217,0.55);
  animation: up-dot-pop 420ms cubic-bezier(.2,1.5,.4,1);
}
@keyframes up-dot-pop {
  0%   { transform: scale(0.6); }
  60%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* ── POPUP: toast icon + layout ─────────────────────────────────── */
.toast {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.toast-text { display: inline-block; }
.toast-ico {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 900;
  background: rgba(255,255,255,0.16);
  animation: toast-ico-pop 380ms cubic-bezier(.2,1.5,.4,1);
}
.toast.correct .toast-ico { background: rgba(68,75,13,0.45); }
.toast.wrong   .toast-ico { background: rgba(88,0,28,0.5);  }
.toast.oneaway .toast-ico { background: rgba(110,64,0,0.5); }
@keyframes toast-ico-pop {
  0%   { transform: scale(0) rotate(-90deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* ── FIELDS: livelier login inputs ──────────────────────────────── */
.login-form input,
.login-form select {
  caret-color: var(--cyan);
}
.login-form input:focus,
.login-form select:focus {
  transform: translateY(-1px);
}
.login-form label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.login-form label::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: linear-gradient(135deg, var(--cyan), var(--sky));
  box-shadow: 0 0 8px rgba(0,178,189,0.6);
  animation: label-dot-pulse 2.4s ease-in-out infinite;
}
@keyframes label-dot-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.35); opacity: 1; }
}

/* ── Short-height tuning so richer heroes still fit ─────────────── */
@media (max-height: 760px) and (min-width: 781px) {
  .endgame-stars { margin-bottom: 6px; }
  .eg-star { font-size: 20px; }
  .endgame-stats { gap: 6px; margin-bottom: 8px; }
  .eg-stat { padding: 4px 10px; }
  .eg-stat strong { font-size: 14px; }
  .loss-encourage { font-size: 13px; margin-bottom: 7px; }
  .loss-meter { margin-bottom: 8px; }
}
@media (max-width: 780px) {
  .endgame-stats { gap: 6px; }
  .eg-stat { padding: 4px 10px; }
  .win-rays { width: 130px; height: 130px; }
}

/* ═══════════════════════════════════════════════════════════════════
   ACCESSIBILITY — calm ambient/looping motion for reduced-motion users
   (features & layout unchanged; entrances still resolve instantly)
═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .spark, .aurora-orb, .scan-line, .shell::before, .confetti-piece,
  .halo-ring, .login-copy::before, .login-copy::after, .primary-button::after,
  .win-rays, .firework, .ember, .unlock-rays, .unlock-confetti,
  .loss-meter-fill, .login-form label::before, .eg-star.filled, .flawless-tag,
  .bs-crack, .bs-spark, .completion, .endgame-score-pill, .endgame-emoji,
  .endgame-emoji-loss {
    animation: none !important;
  }
  * { scroll-behavior: auto !important; }
}
.countdown-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 0 18px;
}
.countdown-chances {
  margin: 0;
  max-width: 340px;
  color: var(--amber);
  font-size: var(--fs-md);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.03em;
  text-shadow: 0 0 14px rgba(250,171,24,0.45);
  animation: chances-rise 360ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes chances-rise {
  0%   { opacity: 0; transform: translateY(8px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Endgame cards: fill the space AND fit the description ──────────
   Each row is at least its content height, and up to an equal share of
   the panel (so short cards still look full-size). The grid scrolls only
   if all three descriptions are very tall. Cards no longer clip. ──── */
.endgame-cards-grid {
  grid-template-rows: repeat(3, minmax(min-content, 1fr));
  align-content: stretch;
  overflow-y: auto;
  scrollbar-width: thin;
}
.endgame-card {
  overflow: visible;            /* was hidden -> stop clipping the desc */
  justify-content: center;
  gap: 4px;
  padding-top: 10px;
  padding-bottom: 10px;
}
/* keep the decorative corner star from overlapping the text */
.endgame-card::after {
  top: 14px;
  transform: none;
}
.endgame-card-desc {
  margin: 2px 0 0;
  max-width: 96%;
  font-size: var(--fs-xs);      /* 11px */
  line-height: 1.3;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  text-align: center;
}

/* ── Small / short-screen tuning ───────────────────────────────── */
@media (max-width: 780px) {
  .countdown-chances { font-size: var(--fs-base); max-width: 260px; }
  .endgame-card-desc { font-size: 10px; line-height: 1.22; }
}
@media (max-height: 760px) and (min-width: 781px) {
  .endgame-card-desc { font-size: 10px; line-height: 1.22; margin-top: 1px; }
  .endgame-card { padding-top: 7px; padding-bottom: 7px; }
}

.endgame-card strong {
  font-size: var(--fs-md);          /* 20px  (was --fs-base 14px) */
  letter-spacing: 0.12em;
}

/* Word list (e.g. PHISHING · MALWARE · WORM) */
.endgame-card span {
  font-size: 16px;                  /* was --fs-base 14px */
  font-weight: 800;
  line-height: 1.4;
}

/* Awareness description */
.endgame-card-desc {
  font-size: var(--fs-base);        /* 14px  (was --fs-xs 11px) */
  line-height: 1.4;
}

/* ── Keep it readable but contained on shorter / smaller screens ── */
@media (max-width: 780px) {
  .endgame-card strong { font-size: var(--fs-base); }   /* 14px */
  .endgame-card span   { font-size: 13px; }
  .endgame-card-desc   { font-size: 12px; line-height: 1.3; }
}
@media (max-height: 760px) and (min-width: 781px) {
  .endgame-card strong { font-size: 16px; }
  .endgame-card span   { font-size: 13px; }
  .endgame-card-desc   { font-size: 12px; line-height: 1.3; }
}
.solved-group:nth-child(3n + 1),
.endgame-card:nth-child(3n + 1) {
  background: #00708C !important;   /* Chevron --blue (was #009DD9 sky) */
  color: var(--mist);
}

/* 2nd cluster → darker green */
.solved-group:nth-child(3n + 2),
.endgame-card:nth-child(3n + 2) {
  background: #769231 !important;   /* Chevron --olive (was #769231 green) */
  color: var(--mist);
}

/* 3rd cluster → darker red */
.solved-group:nth-child(3n + 3),
.endgame-card:nth-child(3n + 3) {
  background: #97002E !important;   /* Chevron --magenta (was #E21836 red) */
  color: var(--mist);
}

/* Safety: any 4th slot (unused on a 3-cluster board) → darker blue */
.solved-group:nth-child(4n + 4),
.endgame-card:nth-child(4n + 4) {
  background: #00708C !important;   /* Chevron --blue */
  color: var(--mist);
}

/* ═══════════════════════════════════════════════════════════════════
   UI POLISH LAYER
   Normalises spacing, radius, elevation, control sizing and focus
   visibility onto the tokens in styles.css. Colours, gradients,
   typeface, theme, markup and behaviour are unchanged. Declared last
   so it standardises the rules above without !important.
═══════════════════════════════════════════════════════════════════ */

/* ── Accessibility: visible keyboard focus ──────────────────────── */
.tile:focus-visible,
.primary-button:focus-visible,
.secondary-button:focus-visible,
.login-form input:focus-visible,
.hint-chip:focus-visible,
button:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
}

/* Tiles sit in a tight grid, so the ring is drawn inside the bounds. */
.tile:focus-visible {
  outline-offset: -4px;
  z-index: 2;
}

/* ── Layout chain ───────────────────────────────────────────────
   The Jinja markup wraps these two screens in a div that the Angular
   template did not have, which broke the flex chain and left the panel
   sized to its content with dead space below. .endgame already carries
   these rules; this gives the wrappers the same behaviour. ───────── */
#standard-game,
#loss-reveal {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

#standard-game > .game-heading,
#standard-game > .hint-bar,
#standard-game > .actions,
#loss-reveal > .game-heading,
#loss-reveal > .hint-bar {
  flex: 0 0 auto;
}

#standard-game > .board-wrap,
#loss-reveal > .board-wrap {
  flex: 1 1 auto;
  min-height: 0;
}

/* ── Buttons: one size system, one radius, one elevation ────────── */
.primary-button,
.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--ctl-md);
  padding: 0 var(--sp-5);
  border-radius: var(--r-pill);
  font-size: var(--fs-base);
  line-height: 1;
  letter-spacing: 0.02em;
  text-align: center;
  white-space: nowrap;
}

.secondary-button {
  box-shadow: var(--el-1);
}

.secondary-button:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: none;
}

button:disabled {
  opacity: 0.42;
  filter: saturate(0.55);
  transform: none;
  box-shadow: none;
}

/* Submit is the primary action: taller, wider, more presence. */
.submit-button {
  min-width: 210px;
  min-height: var(--ctl-lg);
  padding: 0 var(--sp-6);
  letter-spacing: 0.05em;
}

.endgame-cta {
  min-height: var(--ctl-lg);
  padding: 0 var(--sp-6);
  font-size: var(--fs-base);
}

.domain-button {
  min-height: var(--ctl-sm);
  padding: 0 var(--sp-4);
  font-size: var(--fs-sm);
}

.tour-controls .primary-button,
.tour-controls .secondary-button {
  min-height: var(--ctl-sm);
  padding: 0 var(--sp-4);
  font-size: var(--fs-sm);
}

/* ── Login screen rhythm ────────────────────────────────────────── */
.login-title-block {
  padding: var(--sp-6) var(--sp-5) var(--sp-4);
}

.kicker {
  margin: 0 0 var(--sp-2);
}

.login-description {
  margin: var(--sp-2) 0 0;
  line-height: 1.5;
}

.login-chances-note {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.login-form input {
  margin: 0 0 var(--sp-3);
  min-height: var(--ctl-md);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
}

.email-tools {
  gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
}

.login-blocked-note {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

/* ── Game shell rhythm ──────────────────────────────────────────── */
.game {
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
  border-radius: var(--r-lg);
}

.game-heading {
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: 0;
}

/* Title block was 18px adrift from its own kicker. */
.game-title {
  margin: 0 0 var(--sp-2);
  letter-spacing: -0.01em;
}

.game-heading .kicker {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-sm);
}

.game-heading h2 {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.22;
  color: rgba(219,220,221,0.94);
}

/* ── Timer + lives: equal height, aligned, evenly distributed ───── */
.status-panels {
  gap: var(--sp-3);
  align-items: stretch;
}

.mission-timer,
.lives {
  min-height: 92px;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
}

.lives {
  min-width: 136px;
  box-shadow: var(--el-1);
}

.lives-label {
  font-size: var(--fs-2xs);
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.78;
}

.life-row {
  gap: var(--sp-2);
}

.timer-row {
  gap: var(--sp-3);
}

/* ── Decoded clusters ───────────────────────────────────────────── */
.hint-bar {
  min-height: 52px;
  margin-bottom: 0;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
}

.hint-label {
  font-size: var(--fs-sm);
  letter-spacing: 0.12em;
}

.hint-chip {
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
  letter-spacing: 0.03em;
  box-shadow: var(--el-1);
}

/* Solved clusters read as achievements: category leads, words support. */
.solved-group {
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18),
              inset 0 -3px 0 rgba(0,0,0,0.24),
              var(--el-2);
}

.solved-group strong {
  font-size: var(--fs-md);
  letter-spacing: 0.1em;
  line-height: 1.15;
}

.solved-group span {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.35;
  opacity: 0.9;
}

.solved-group::after {
  right: var(--sp-4);
  font-size: 20px;
  opacity: 0.14;
}

/* ── Board and word cards ───────────────────────────────────────── */
.board-wrap {
  gap: var(--sp-2);
  padding: var(--sp-2);
  border-radius: var(--r-lg);
}

.board {
  gap: var(--sp-2);
}

.tile {
  display: grid;
  place-items: center;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-align: center;
  box-shadow: var(--el-1);
}

.tile:hover:not(:disabled) {
  box-shadow: 0 6px 0 var(--teal), var(--el-2);
}

.tile:not(:disabled):active {
  transform: translateY(1px) scale(0.985);
  box-shadow: 0 2px 0 var(--teal);
  transition-duration: 90ms;
}

/* Selected gains a ring so the state reads at a glance. */
.tile.selected {
  box-shadow: 0 6px 0 var(--teal),
              0 0 0 3px rgba(250,171,24,0.55),
              var(--el-2);
}

.actions {
  gap: var(--sp-3);
  padding: var(--sp-2) 0 var(--sp-3);
}

/* ── Tour callout ───────────────────────────────────────────────── */
.tour-callout {
  padding: var(--sp-5);
  border-radius: var(--r-md);
  box-shadow: var(--el-3);
}

.tour-kicker {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-2xs);
  letter-spacing: 0.16em;
}

.tour-callout h3 {
  font-size: var(--fs-md);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.tour-message {
  margin: var(--sp-2) 0 var(--sp-5);
  font-size: var(--fs-base);
  line-height: 1.5;
}

.tour-controls {
  align-items: center;
  justify-content: flex-start;
  gap: var(--sp-2);
}

/* Back + Skip group left, the advancing action anchors right. */
.tour-controls .primary-button {
  margin-left: auto;
}

/* ── Unlock modal ───────────────────────────────────────────────── */
.unlock-modal {
  padding: var(--sp-5);
  border-radius: var(--r-xl);
  box-shadow: var(--el-3), inset 0 1px 0 rgba(255,255,255,0.55);
}

.unlock-modal h3 {
  margin: var(--sp-2) 0 var(--sp-4);
  font-size: var(--fs-lg);
  line-height: 1.15;
}

.unlock-progress {
  margin-bottom: var(--sp-4);
  gap: var(--sp-2);
}

/* ── Results screens ────────────────────────────────────────────── */
.endgame-stats {
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
}

.eg-stat {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
}

.eg-stat-lbl {
  font-size: var(--fs-2xs);
}

.endgame-cards-grid {
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
}

/* Vertical padding is intentionally left to the existing short-screen
   rules; only the horizontal rhythm and elevation are normalised. */
.endgame-card {
  padding-left: var(--sp-5);
  padding-right: var(--sp-5);
  border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18),
              inset 0 -3px 0 rgba(0,0,0,0.24),
              var(--el-2);
}

.endgame-card::after {
  right: var(--sp-4);
}

.endgame-card-desc {
  opacity: 0.92;
}

/* ── Toast ──────────────────────────────────────────────────────── */
.toast {
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  box-shadow: 0 6px 0 var(--navy), var(--el-3);
}

/* ── Tablet ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .game-heading {
    flex-wrap: wrap;
    gap: var(--sp-3);
  }

  .status-panels {
    width: 100%;
    justify-content: flex-start;
  }

  .mission-timer,
  .lives {
    min-height: 84px;
  }

  .submit-button {
    min-width: 180px;
  }
}

/* ── Compact screens: re-assert the tighter rhythm this layer would
      otherwise flatten. ─────────────────────────────────────────── */
@media (max-width: 780px) {
  .game {
    gap: var(--sp-2);
    padding: var(--sp-2);
  }

  .hint-bar {
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
  }

  .solved-group {
    padding: var(--sp-2) var(--sp-3);
  }

  .solved-group strong {
    font-size: var(--fs-base);
  }

  .endgame-stats {
    gap: var(--sp-2);
  }

  .eg-stat {
    padding: var(--sp-1) var(--sp-3);
  }

  .endgame-cards-grid {
    gap: var(--sp-2);
    padding: var(--sp-2);
  }

  .endgame-card {
    padding-left: var(--sp-3);
    padding-right: var(--sp-3);
  }

  .actions {
    gap: var(--sp-2);
    padding: var(--sp-2) 0;
  }

  .submit-button {
    min-width: 160px;
  }

  .tour-callout {
    padding: var(--sp-4);
  }
}

@media (max-height: 760px) and (min-width: 781px) {
  .game {
    gap: var(--sp-2);
  }

  .game-title {
    margin-bottom: var(--sp-1);
  }

  .mission-timer,
  .lives {
    min-height: 82px;
    padding: var(--sp-2) var(--sp-3);
  }

  .hint-bar {
    min-height: 46px;
    padding: var(--sp-2) var(--sp-3);
  }

  .solved-group {
    padding: var(--sp-2) var(--sp-4);
  }

  .endgame-stats {
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
  }

  .eg-stat {
    padding: var(--sp-1) var(--sp-3);
  }

  .endgame-cards-grid {
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
  }

  .actions {
    padding: var(--sp-1) 0 var(--sp-2);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   RENDER STABILITY LAYER
   Eliminates flicker, repaint storms and compositing instability.
   No colour, layout, timing or gameplay value is changed.
═══════════════════════════════════════════════════════════════════ */

/* ── Blur cost ──────────────────────────────────────────────────
   backdrop-filter forces the backdrop to be re-sampled and re-blurred
   on every composited frame of anything drawn above it. On .tile that
   meant nine simultaneous blurs re-running for the whole flip, which is
   the main source of the card flicker. Backgrounds here are already
   translucent over a smooth gradient, so the blur contributed almost
   nothing visually. Elevation carries the depth instead. ─────────── */
.tile,
.toast,
.game {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ── One transition system ──────────────────────────────────────
   Replaces competing per-component transitions, and drops box-shadow
   and filter from transitions entirely (both force repaint per frame). */
.tile,
.primary-button,
.secondary-button,
.hint-chip,
.shield,
.solved-group,
.eg-stat {
  transition:
    transform 200ms ease,
    opacity 200ms ease,
    background-color 200ms ease,
    border-color 200ms ease;
}

/* Press feedback must stay snappier than the standard curve. */
.tile:not(:disabled):active {
  transition-duration: 90ms;
}

/* ── GPU promotion and stable compositing ───────────────────────
   translateZ(0) gives each animated surface its own layer so a
   neighbour's repaint cannot smear it. backface-visibility stops the
   text flashing through during the flip's rotateX pass. ─────────── */
.tile,
.solved-group,
.endgame-card,
.hint-chip,
.tour-callout,
.unlock-modal,
.confetti-piece,
.ripple-ring {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

/* The toast is centred with translateX(-50%); promote it without losing
   that offset. */
.toast {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(-50%, 0, 0);
}

/* The flip needs a real 3D context, and a raised stacking position so a
   flipping card cannot be overlapped mid-rotation (z-index flashing). */
.tile {
  transform-style: preserve-3d;
  -webkit-font-smoothing: antialiased;
}

.tile.exiting,
.tile.loss-exiting {
  will-change: transform, opacity;
  z-index: 3;
}

.tile.selected,
.board.lose-animate .tile,
.board.correct-hit .tile {
  will-change: transform, opacity;
}

/* will-change is only worth holding while motion is actually possible. */
.tile:not(.selected):not(.exiting):not(.loss-exiting) {
  will-change: auto;
}

/* ── Containment ────────────────────────────────────────────────
   The timer writes a custom property up to 6x/second. Containment stops
   that invalidation escaping into the board, clusters or controls. */
.mission-timer,
.lives,
.hint-bar,
.actions,
.toast {
  contain: layout style;
}

.timer-copy strong {
  font-variant-numeric: tabular-nums;
  contain: layout style;
}

/* ── Layout stability (CLS) ─────────────────────────────────────
   Reserve space that used to be claimed only once content arrived. */
.solved-stack,
.board,
.board-wrap,
.endgame-cards-grid {
  contain: layout;
}

.hint-bar {
  align-content: center;
}

/* The submit label swaps between "Submit n/3" and "Processing..."; a
   fixed min-width stops the button resizing under the cursor. */
#submit-label {
  display: inline-block;
  min-width: 11ch;
  text-align: center;
}

#timer-label {
  display: inline-block;
  min-width: 4ch;
}

/* Reserve the toast box so it cannot reflow the fixed layer on show. */
.toast {
  min-height: 46px;
  align-items: center;
}

/* ── Overlay transitions ────────────────────────────────────────
   Countdown and tour sit above live content; isolating them prevents
   their entry animation from repainting the board underneath. */
.countdown-overlay,
.tour-overlay,
.unlock-overlay {
  isolation: isolate;
}

.countdown-mark {
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Tour callout is repositioned imperatively on scroll/resize; promoting
   it keeps those moves off the main thread's paint path. */
.tour-callout,
.tour-highlight {
  will-change: transform;
}

/* ── Reduced motion already disables ambient loops; also drop the
      promotions so those users do not pay for idle layers. ──────── */
@media (prefers-reduced-motion: reduce) {
  .tile,
  .solved-group,
  .endgame-card,
  .hint-chip,
  .toast,
  .tour-callout,
  .unlock-modal,
  .countdown-mark,
  .tour-highlight {
    will-change: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   RESULTS HERO REFINEMENT
   Keeps the layout shown in review; tightens rhythm and alignment only.
═══════════════════════════════════════════════════════════════════ */

/* The halo's outermost ring expands to 2.2x and was being hard-cut by the
   panel edge. A little more inline room lets it fade out instead. */
.endgame-hero {
  gap: var(--sp-5);
  padding: var(--sp-4) var(--sp-5) var(--sp-4) var(--sp-6);
}

/* One consistent step between every line of the copy block. */
.endgame-eyebrow {
  margin: 0 0 var(--sp-1);
}

.endgame-headline {
  margin: 0 0 var(--sp-2);
}

.endgame-stars {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
}

.endgame-stats {
  margin: 0 0 var(--sp-3);
}

.flawless-tag {
  margin-left: var(--sp-1);
}

.endgame-footer-row {
  gap: var(--sp-3);
}

/* Sits on the same scale as the stat pills instead of towering over them. */
.endgame-cta {
  min-height: var(--ctl-md);
  padding: 0 26px;
}

.loss-encourage {
  margin: 0 0 var(--sp-3);
}

@media (max-width: 780px) {
  .endgame-hero {
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  }
}

@media (max-height: 760px) and (min-width: 781px) {
  .endgame-hero {
    padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-5);
  }

  .endgame-stars {
    margin-bottom: var(--sp-2);
  }
}