/* burningdownthehouse.party — v2 palette: space black + Guide green.
   Red is reserved for the DON'T PANIC button and "no", gold only for the
   dress-code banner. Light text on dark surfaces; dark ink on bright ones.
   (--navy/--orange keep their names but now hold ink-black / Guide-green.) */
:root {
  --navy: #0c130f;      /* page background + ink on bright surfaces */
  --navy-deep: #080d0a;
  --surface: #15211b;
  --text: #eef5ec;
  --muted: #97ab9e;
  --faint: #5d7366;
  --red: #e6392b;
  --orange: #2fbf71;    /* primary CTA — Guide green */
  --gold: #ffd23f;
  --green: #2fbf71;
  --green-dark: #0f2e1f;
}

@font-face {
  font-family: "Titan One";
  src: url("/static/fonts/TitanOne.ttf") format("truetype");
  font-display: swap;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
/* nothing may widen the page: the game positions against the viewport,
   and horizontal panning on phones broke that assumption */
body { overflow-x: clip; }
body {
  position: relative; /* anchors the touring Vogon to the page floor */
  margin: 0;
  background-color: var(--navy);
  /* the one shared sky: nebula glows + bright and base star layers */
  background-image:
    radial-gradient(60vw 40vh at 15% 20%, rgba(47, 191, 113, 0.09), transparent 70%),
    radial-gradient(50vw 35vh at 85% 75%, rgba(255, 210, 63, 0.07), transparent 70%),
    radial-gradient(1.5px 1.5px at 43px 67px, rgba(238, 245, 236, 0.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 157px 22px, rgba(238, 245, 236, 0.45) 50%, transparent 51%),
    radial-gradient(2px 2px at 92px 131px, rgba(168, 236, 255, 0.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 23px 41px, rgba(238, 245, 236, 0.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 131px 97px, rgba(238, 245, 236, 0.3) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 71px 152px, rgba(255, 210, 63, 0.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 177px 23px, rgba(47, 191, 113, 0.3) 50%, transparent 51%);
  background-size: 100% 100%, 100% 100%, 260px 230px, 260px 230px, 260px 230px, 210px 190px, 210px 190px, 210px 190px, 210px 190px;
  background-attachment: fixed, fixed, scroll, scroll, scroll, scroll, scroll, scroll, scroll;
  color: var(--text);
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.5;
}
/* keyboard users get a clear focus ring everywhere */
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
a { color: var(--green); }
.muted { color: var(--muted); }
.tiny { color: var(--faint); font-size: 0.8rem; }

/* ---------- header ---------- */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.8rem 1.2rem;
  background: rgba(8, 13, 10, 0.85);
  backdrop-filter: blur(6px);
  position: sticky;
  top: 0;
  z-index: 10;
}
.logo { color: var(--green); font-weight: 900; letter-spacing: 1px; }
.lang-select {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--green);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
}
.langs noscript .save { margin: 0 0 0 0.4rem; padding: 0.35rem 0.8rem; font-size: 0.9rem; }

/* ---------- hero ---------- */
.hero { position: relative; text-align: center; overflow-x: clip; }
.hero-img {
  width: 100%;
  display: block;
  min-height: 340px;
  object-fit: cover;
  border-radius: 0 0 18px 18px;
}
/* dark scrim so the headline stays readable over the fire photo */
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 60%;
  background: linear-gradient(180deg, rgba(8, 13, 10, 0.92) 0%, rgba(8, 13, 10, 0.55) 55%, transparent 100%);
  z-index: 1;
}
.hero-text {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4vw;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95), 0 0 20px rgba(0, 0, 0, 0.8);
}
.announce { color: var(--green); font-weight: 900; letter-spacing: 3px; margin: 0.4rem 0; }
.hero-text h1 {
  font-family: "Titan One", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(1.35rem, 4.3vw, 2.5rem);
  letter-spacing: 0.5px;
  margin: 0.3rem 0;
}
.chip {
  background: var(--green);
  color: var(--navy);
  font-weight: 900;
  font-size: clamp(1.15rem, 3vw, 1.6rem);
  padding: 0.5rem 1.7rem;
  border-radius: 999px;
  text-shadow: none;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  margin-top: 0.7rem;
}

/* the cartoon panic button (Two-Buttons-meme style) that tells you not to */
.panic {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 42%);
  width: clamp(150px, 22vw, 210px);
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.7));
  transition: transform 0.1s;
}
.panic img { width: 100%; display: block; }
.panic-label {
  position: absolute;
  left: 0;
  right: 0;
  top: 19%;
  text-align: center;
  color: #fff;
  font-family: "Titan One", system-ui, sans-serif;
  font-size: clamp(1.05rem, 2.9vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: 1px;
  pointer-events: none;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}
.panic:hover { transform: translate(-50%, 42%) scale(1.05); }
.panic:active { transform: translate(-50%, 42%) scale(0.97); }
/* the dome squashes into its base and springs back */
.panic img, .panic-label { transform-origin: 50% 100%; }
.panic.pressed img { animation: press 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); }
.panic.pressed .panic-label { animation: press-label 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes press {
  0% { transform: none; }
  35% { transform: translateY(6%) scaleY(0.88); }
  100% { transform: none; }
}
@keyframes press-label {
  0% { transform: none; }
  35% { transform: translateY(14%); }
  100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .panic.pressed img, .panic.pressed .panic-label { animation: none; }
}

/* ---------- pixel UFOs flying across the hero ---------- */
.ufo {
  position: absolute;
  width: 88px;
  height: 48px;
  z-index: 3;
  cursor: crosshair;
  background-size: contain;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2088%2048'%3E%3Crect%20x%3D'36'%20y%3D'0'%20width%3D'16'%20height%3D'8'%20fill%3D'%23a8ecff'%2F%3E%3Crect%20x%3D'28'%20y%3D'8'%20width%3D'32'%20height%3D'8'%20fill%3D'%23a8ecff'%2F%3E%3Crect%20x%3D'32'%20y%3D'4'%20width%3D'8'%20height%3D'4'%20fill%3D'%23e6fbff'%2F%3E%3Crect%20x%3D'16'%20y%3D'16'%20width%3D'56'%20height%3D'8'%20fill%3D'%23d4dee5'%2F%3E%3Crect%20x%3D'0'%20y%3D'24'%20width%3D'88'%20height%3D'8'%20fill%3D'%23b7c4cd'%2F%3E%3Crect%20x%3D'16'%20y%3D'32'%20width%3D'56'%20height%3D'8'%20fill%3D'%235c6b77'%2F%3E%3Crect%20x%3D'20'%20y%3D'32'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ffd23f'%2F%3E%3Crect%20x%3D'40'%20y%3D'32'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ffd23f'%2F%3E%3Crect%20x%3D'60'%20y%3D'32'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ffd23f'%2F%3E%3Crect%20x%3D'36'%20y%3D'40'%20width%3D'16'%20height%3D'8'%20fill%3D'%2346525c'%2F%3E%3C%2Fsvg%3E");
}
.ufo.boom {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20264%2044'%3E%3Crect%20x%3D'40'%20y%3D'16'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ffd23f'%2F%3E%3Crect%20x%3D'32'%20y%3D'16'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ff7a1a'%2F%3E%3Crect%20x%3D'48'%20y%3D'16'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ff7a1a'%2F%3E%3Crect%20x%3D'40'%20y%3D'8'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ff7a1a'%2F%3E%3Crect%20x%3D'40'%20y%3D'24'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ff7a1a'%2F%3E%3Crect%20x%3D'128'%20y%3D'16'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ffd23f'%2F%3E%3Crect%20x%3D'112'%20y%3D'16'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ff7a1a'%2F%3E%3Crect%20x%3D'144'%20y%3D'16'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ff7a1a'%2F%3E%3Crect%20x%3D'128'%20y%3D'0'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ff7a1a'%2F%3E%3Crect%20x%3D'128'%20y%3D'32'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ff7a1a'%2F%3E%3Crect%20x%3D'112'%20y%3D'0'%20width%3D'8'%20height%3D'8'%20fill%3D'%23e6392b'%2F%3E%3Crect%20x%3D'144'%20y%3D'0'%20width%3D'8'%20height%3D'8'%20fill%3D'%23e6392b'%2F%3E%3Crect%20x%3D'112'%20y%3D'32'%20width%3D'8'%20height%3D'8'%20fill%3D'%23e6392b'%2F%3E%3Crect%20x%3D'144'%20y%3D'32'%20width%3D'8'%20height%3D'8'%20fill%3D'%23e6392b'%2F%3E%3Crect%20x%3D'120'%20y%3D'8'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ffd23f'%2F%3E%3Crect%20x%3D'136'%20y%3D'24'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ffd23f'%2F%3E%3Crect%20x%3D'192'%20y%3D'8'%20width%3D'8'%20height%3D'8'%20fill%3D'%23e6392b'%2F%3E%3Crect%20x%3D'240'%20y%3D'8'%20width%3D'8'%20height%3D'8'%20fill%3D'%23e6392b'%2F%3E%3Crect%20x%3D'192'%20y%3D'28'%20width%3D'8'%20height%3D'8'%20fill%3D'%23e6392b'%2F%3E%3Crect%20x%3D'240'%20y%3D'28'%20width%3D'8'%20height%3D'8'%20fill%3D'%23e6392b'%2F%3E%3Crect%20x%3D'184'%20y%3D'16'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ffd23f'%2F%3E%3Crect%20x%3D'248'%20y%3D'16'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ffd23f'%2F%3E%3Crect%20x%3D'216'%20y%3D'4'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ff7a1a'%2F%3E%3Crect%20x%3D'216'%20y%3D'32'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ff7a1a'%2F%3E%3C%2Fsvg%3E");
  background-size: 264px 44px;
  cursor: default;
}
@keyframes explode {
  from { background-position-x: 0; }
  to { background-position-x: -264px; }
}
.pixel-fire.out { cursor: default; }
.pixel-fire.out .fa {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20120%2056'%3E%3Crect%20x%3D'16'%20y%3D'0'%20width%3D'8'%20height%3D'8'%20fill%3D'%233fa9e0'%2F%3E%3Crect%20x%3D'4'%20y%3D'8'%20width%3D'8'%20height%3D'8'%20fill%3D'%233fa9e0'%2F%3E%3Crect%20x%3D'28'%20y%3D'8'%20width%3D'8'%20height%3D'8'%20fill%3D'%238fd8ff'%2F%3E%3Crect%20x%3D'0'%20y%3D'48'%20width%3D'40'%20height%3D'8'%20fill%3D'%23e6392b'%2F%3E%3Crect%20x%3D'8'%20y%3D'40'%20width%3D'24'%20height%3D'8'%20fill%3D'%23ff7a1a'%2F%3E%3Crect%20x%3D'16'%20y%3D'32'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ffd23f'%2F%3E%3Crect%20x%3D'40'%20y%3D'48'%20width%3D'40'%20height%3D'8'%20fill%3D'%233fa9e0'%2F%3E%3Crect%20x%3D'40'%20y%3D'40'%20width%3D'8'%20height%3D'8'%20fill%3D'%238fd8ff'%2F%3E%3Crect%20x%3D'72'%20y%3D'40'%20width%3D'8'%20height%3D'8'%20fill%3D'%238fd8ff'%2F%3E%3Crect%20x%3D'48'%20y%3D'40'%20width%3D'24'%20height%3D'8'%20fill%3D'%233fa9e0'%2F%3E%3Crect%20x%3D'40'%20y%3D'28'%20width%3D'8'%20height%3D'8'%20fill%3D'%238fd8ff'%2F%3E%3Crect%20x%3D'72'%20y%3D'28'%20width%3D'8'%20height%3D'8'%20fill%3D'%238fd8ff'%2F%3E%3Crect%20x%3D'56'%20y%3D'8'%20width%3D'8'%20height%3D'8'%20fill%3D'%23dff2f8'%2F%3E%3Crect%20x%3D'48'%20y%3D'16'%20width%3D'8'%20height%3D'8'%20fill%3D'%23dff2f8'%2F%3E%3Crect%20x%3D'64'%20y%3D'16'%20width%3D'8'%20height%3D'8'%20fill%3D'%23dff2f8'%2F%3E%3Crect%20x%3D'88'%20y%3D'48'%20width%3D'24'%20height%3D'8'%20fill%3D'%238fd8ff'%2F%3E%3Crect%20x%3D'92'%20y%3D'20'%20width%3D'8'%20height%3D'8'%20fill%3D'%23dff2f8'%2F%3E%3Crect%20x%3D'104'%20y%3D'8'%20width%3D'8'%20height%3D'8'%20fill%3D'%23dff2f8'%2F%3E%3Crect%20x%3D'86'%20y%3D'6'%20width%3D'8'%20height%3D'8'%20fill%3D'%23dff2f8'%2F%3E%3C%2Fsvg%3E");
  background-size: 180px 84px;
  animation: douse 0.55s steps(3) forwards;
}
@keyframes douse {
  from { background-position-x: 0; }
  to { background-position-x: -180px; }
}
.ship-counter {
  position: absolute;
  top: 0.7rem;
  right: 0.9rem;
  z-index: 5;
  background: rgba(8, 13, 10, 0.75);
  border: 1px solid var(--green);
  border-radius: 999px;
  padding: 0.25rem 0.9rem;
  font-weight: 800;
  color: var(--green);
}
/* ---------- easter egg: FSM + flying cone-Rodrigo ---------- */
.fsm {
  position: fixed;
  left: -30vw;
  top: 14vh;
  z-index: 98;
  animation: fsm-fly 7s linear forwards;
  cursor: pointer;
  filter: drop-shadow(0 0 24px rgba(255, 210, 63, 0.7));
}
.fsm-body.hit { animation: fsm-shake 0.5s ease, fsm-bob 1.2s ease-in-out infinite alternate; }
@keyframes fsm-shake {
  0%, 100% { rotate: 0deg; }
  20% { rotate: -14deg; }
  45% { rotate: 12deg; }
  70% { rotate: -8deg; }
}
/* the offended italian hands + falling pasta */
.mamma {
  position: fixed;
  z-index: 99;
  font-size: 2.4rem;
  pointer-events: none;
  animation: mamma-float 1.4s ease-out forwards;
}
@keyframes mamma-float {
  from { transform: translateY(0) scale(0.6) rotate(-15deg); opacity: 1; }
  to { transform: translateY(-130px) scale(1.5) rotate(20deg); opacity: 0; }
}
.pasta-drop {
  position: fixed;
  top: -8vh;
  z-index: 99;
  font-size: 3rem;
  pointer-events: none;
  animation: pasta-fall 1.7s cubic-bezier(0.35, 0, 0.8, 1) forwards;
}
@keyframes pasta-fall {
  from { transform: translateY(0) rotate(0deg); }
  85% { transform: translateY(86vh) rotate(350deg); opacity: 1; }
  to { transform: translateY(84vh) rotate(360deg); opacity: 0; }
}
/* game achievement toast */
.game-toast {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  background: var(--surface);
  border: 2px solid var(--gold);
  border-radius: 16px;
  padding: 1rem 1.6rem;
  display: flex;
  align-items: center;
  gap: 1.3rem;
  text-align: left;
  width: max-content;
  max-width: min(94vw, 560px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 210, 63, 0.25);
  animation: toast-life 5.1s ease forwards;
}
.game-toast .trophy { font-size: 2.8rem; line-height: 1; animation: trophy-pop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1); }
.game-toast .ach { display: flex; flex-direction: column; gap: 0.1rem; }
.game-toast .ach b { color: var(--gold); font-size: 0.75rem; letter-spacing: 2px; }
.game-toast .ach-name { font-family: "Titan One", system-ui, sans-serif; font-size: 1.15rem; }
.game-toast .ach-sub { color: var(--muted); font-size: 0.85rem; font-style: italic; }
@keyframes trophy-pop {
  from { transform: scale(0) rotate(-30deg); }
  to { transform: scale(1) rotate(0deg); }
}
@keyframes toast-life {
  0% { opacity: 0; transform: translate(-50%, calc(-50% + 20px)) scale(0.92); }
  8%, 88% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% + 10px)) scale(0.96); }
}
.fsm .fsm-body {
  width: clamp(170px, 28vw, 300px);
  aspect-ratio: 168 / 136;
  margin: 0 auto;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20168%20136'%3E%3Crect%20x%3D'56'%20y%3D'16'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'56'%20y%3D'24'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'96'%20y%3D'16'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'96'%20y%3D'24'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'56'%20y%3D'0'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'96'%20y%3D'0'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'48'%20y%3D'32'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'56'%20y%3D'32'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'64'%20y%3D'32'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'72'%20y%3D'32'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'80'%20y%3D'32'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'88'%20y%3D'32'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'96'%20y%3D'32'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'104'%20y%3D'32'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'40'%20y%3D'40'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'48'%20y%3D'40'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'56'%20y%3D'40'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'64'%20y%3D'40'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'72'%20y%3D'40'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'80'%20y%3D'40'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'88'%20y%3D'40'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'96'%20y%3D'40'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'104'%20y%3D'40'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'112'%20y%3D'40'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'120'%20y%3D'40'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'32'%20y%3D'48'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'40'%20y%3D'48'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'48'%20y%3D'48'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'56'%20y%3D'48'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'64'%20y%3D'48'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'72'%20y%3D'48'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'80'%20y%3D'48'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'88'%20y%3D'48'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'96'%20y%3D'48'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'104'%20y%3D'48'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'112'%20y%3D'48'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'120'%20y%3D'48'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'128'%20y%3D'48'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'24'%20y%3D'56'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'32'%20y%3D'56'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'40'%20y%3D'56'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'48'%20y%3D'56'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'56'%20y%3D'56'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'64'%20y%3D'56'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'72'%20y%3D'56'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'80'%20y%3D'56'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'88'%20y%3D'56'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'96'%20y%3D'56'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'104'%20y%3D'56'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'112'%20y%3D'56'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'120'%20y%3D'56'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'128'%20y%3D'56'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'136'%20y%3D'56'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'32'%20y%3D'64'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'40'%20y%3D'64'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'48'%20y%3D'64'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'56'%20y%3D'64'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'64'%20y%3D'64'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'72'%20y%3D'64'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'80'%20y%3D'64'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'88'%20y%3D'64'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'96'%20y%3D'64'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'104'%20y%3D'64'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'112'%20y%3D'64'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'120'%20y%3D'64'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'128'%20y%3D'64'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'40'%20y%3D'72'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'48'%20y%3D'72'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'56'%20y%3D'72'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'64'%20y%3D'72'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'72'%20y%3D'72'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'80'%20y%3D'72'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'88'%20y%3D'72'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'96'%20y%3D'72'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'104'%20y%3D'72'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'112'%20y%3D'72'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'120'%20y%3D'72'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'48'%20y%3D'80'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'56'%20y%3D'80'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'64'%20y%3D'80'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'72'%20y%3D'80'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'80'%20y%3D'80'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'88'%20y%3D'80'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'96'%20y%3D'80'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'104'%20y%3D'80'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'48'%20y%3D'40'%20width%3D'8'%20height%3D'8'%20fill%3D'%23f7dfa8'%2F%3E%3Crect%20x%3D'72'%20y%3D'32'%20width%3D'8'%20height%3D'8'%20fill%3D'%23f7dfa8'%2F%3E%3Crect%20x%3D'112'%20y%3D'48'%20width%3D'8'%20height%3D'8'%20fill%3D'%23f7dfa8'%2F%3E%3Crect%20x%3D'40'%20y%3D'64'%20width%3D'8'%20height%3D'8'%20fill%3D'%23f7dfa8'%2F%3E%3Crect%20x%3D'80'%20y%3D'72'%20width%3D'8'%20height%3D'8'%20fill%3D'%23f7dfa8'%2F%3E%3Crect%20x%3D'104'%20y%3D'64'%20width%3D'8'%20height%3D'8'%20fill%3D'%23f7dfa8'%2F%3E%3Crect%20x%3D'64'%20y%3D'56'%20width%3D'8'%20height%3D'8'%20fill%3D'%23f7dfa8'%2F%3E%3Crect%20x%3D'128'%20y%3D'56'%20width%3D'8'%20height%3D'8'%20fill%3D'%23f7dfa8'%2F%3E%3Crect%20x%3D'48'%20y%3D'48'%20width%3D'8'%20height%3D'8'%20fill%3D'%236f4326'%2F%3E%3Crect%20x%3D'48'%20y%3D'56'%20width%3D'8'%20height%3D'8'%20fill%3D'%236f4326'%2F%3E%3Crect%20x%3D'48'%20y%3D'64'%20width%3D'8'%20height%3D'8'%20fill%3D'%236f4326'%2F%3E%3Crect%20x%3D'56'%20y%3D'48'%20width%3D'8'%20height%3D'8'%20fill%3D'%236f4326'%2F%3E%3Crect%20x%3D'56'%20y%3D'56'%20width%3D'8'%20height%3D'8'%20fill%3D'%236f4326'%2F%3E%3Crect%20x%3D'56'%20y%3D'64'%20width%3D'8'%20height%3D'8'%20fill%3D'%236f4326'%2F%3E%3Crect%20x%3D'64'%20y%3D'48'%20width%3D'8'%20height%3D'8'%20fill%3D'%236f4326'%2F%3E%3Crect%20x%3D'64'%20y%3D'56'%20width%3D'8'%20height%3D'8'%20fill%3D'%236f4326'%2F%3E%3Crect%20x%3D'64'%20y%3D'64'%20width%3D'8'%20height%3D'8'%20fill%3D'%236f4326'%2F%3E%3Crect%20x%3D'48'%20y%3D'48'%20width%3D'8'%20height%3D'8'%20fill%3D'%238a5735'%2F%3E%3Crect%20x%3D'104'%20y%3D'64'%20width%3D'8'%20height%3D'8'%20fill%3D'%236f4326'%2F%3E%3Crect%20x%3D'104'%20y%3D'72'%20width%3D'8'%20height%3D'8'%20fill%3D'%236f4326'%2F%3E%3Crect%20x%3D'104'%20y%3D'80'%20width%3D'8'%20height%3D'8'%20fill%3D'%236f4326'%2F%3E%3Crect%20x%3D'112'%20y%3D'64'%20width%3D'8'%20height%3D'8'%20fill%3D'%236f4326'%2F%3E%3Crect%20x%3D'112'%20y%3D'72'%20width%3D'8'%20height%3D'8'%20fill%3D'%236f4326'%2F%3E%3Crect%20x%3D'112'%20y%3D'80'%20width%3D'8'%20height%3D'8'%20fill%3D'%236f4326'%2F%3E%3Crect%20x%3D'120'%20y%3D'64'%20width%3D'8'%20height%3D'8'%20fill%3D'%236f4326'%2F%3E%3Crect%20x%3D'120'%20y%3D'72'%20width%3D'8'%20height%3D'8'%20fill%3D'%236f4326'%2F%3E%3Crect%20x%3D'120'%20y%3D'80'%20width%3D'8'%20height%3D'8'%20fill%3D'%236f4326'%2F%3E%3Crect%20x%3D'104'%20y%3D'64'%20width%3D'8'%20height%3D'8'%20fill%3D'%238a5735'%2F%3E%3Crect%20x%3D'32'%20y%3D'88'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'24'%20y%3D'96'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'32'%20y%3D'104'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'24'%20y%3D'112'%20width%3D'8'%20height%3D'8'%20fill%3D'%23f7dfa8'%2F%3E%3Crect%20x%3D'48'%20y%3D'88'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'48'%20y%3D'96'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'56'%20y%3D'104'%20width%3D'8'%20height%3D'8'%20fill%3D'%23f7dfa8'%2F%3E%3Crect%20x%3D'64'%20y%3D'88'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'72'%20y%3D'96'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'64'%20y%3D'104'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'72'%20y%3D'112'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'64'%20y%3D'120'%20width%3D'8'%20height%3D'8'%20fill%3D'%23f7dfa8'%2F%3E%3Crect%20x%3D'88'%20y%3D'88'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'88'%20y%3D'96'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'96'%20y%3D'104'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'88'%20y%3D'112'%20width%3D'8'%20height%3D'8'%20fill%3D'%23f7dfa8'%2F%3E%3Crect%20x%3D'120'%20y%3D'88'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'128'%20y%3D'96'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'120'%20y%3D'104'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'128'%20y%3D'112'%20width%3D'8'%20height%3D'8'%20fill%3D'%23eec97e'%2F%3E%3Crect%20x%3D'120'%20y%3D'120'%20width%3D'8'%20height%3D'8'%20fill%3D'%23f7dfa8'%2F%3E%3Crect%20x%3D'58'%20y%3D'2'%20width%3D'4'%20height%3D'4'%20fill%3D'%23151515'%2F%3E%3Crect%20x%3D'98'%20y%3D'2'%20width%3D'4'%20height%3D'4'%20fill%3D'%23151515'%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  image-rendering: pixelated;
  animation: fsm-bob 1.2s ease-in-out infinite alternate;
}
@keyframes fsm-bob { from { transform: translateY(0); } to { transform: translateY(-12px); } }
@keyframes fsm-fly {
  from { transform: translateX(0) rotate(-6deg); }
  50% { transform: translateX(60vw) rotate(6deg) translateY(-4vh); }
  to { transform: translateX(140vw) rotate(-6deg); }
}
.cone-fly {
  position: fixed;
  left: 50%;
  top: 45%;
  width: 140px;
  z-index: 99;
  pointer-events: none;
  animation: cone-attack 2.6s ease-in forwards;
}
@keyframes cone-attack {
  from { transform: translate(-50%, -50%) scale(0.08) rotate(0deg); opacity: 0.9; }
  75% { opacity: 1; }
  to { transform: translate(-50%, -50%) scale(11) rotate(900deg); opacity: 0; }
}
@keyframes fly-right {
  from { left: -100px; transform: translateY(0); }
  25% { transform: translateY(-12px); }
  75% { transform: translateY(10px); }
  to { left: 100%; transform: translateY(0); }
}
@keyframes fly-left {
  from { left: 100%; transform: translateY(0); }
  30% { transform: translateY(14px); }
  70% { transform: translateY(-10px); }
  to { left: -100px; transform: translateY(0); }
}

/* ---------- pixel fire (2-frame flicker, crisp pixels) ---------- */
.pixel-fire { position: relative; width: 60px; height: 84px; }
.hero .pixel-fire { position: absolute; z-index: 3; cursor: pointer; }
.hero .f1 { left: 8%; top: 12%; }
.hero .f2 { left: 28%; top: 6%; transform: scale(0.7); }
.hero .f3 { left: 4%; bottom: 5%; top: auto; transform: scale(0.9); }
.hero .f4 { left: 38%; bottom: 3%; top: auto; transform: scale(0.65); }
.hero .f3 .fa { animation-delay: 0.2s; }
.hero .f4 .fa { animation-delay: 0.45s; }
footer .pixel-fire { margin: 0 auto 0.8rem; transform: scale(0.6); }
.void .pixel-fire { margin: 0 auto 1rem; }
.pixel-fire span {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}
.pixel-fire .fa {
  /* 4-frame sprite sheet: the flame tongues morph frame to frame */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20160%2056'%3E%3Crect%20x%3D'0'%20y%3D'48'%20width%3D'40'%20height%3D'8'%20fill%3D'%23e6392b'%2F%3E%3Crect%20x%3D'0'%20y%3D'40'%20width%3D'8'%20height%3D'8'%20fill%3D'%23e6392b'%2F%3E%3Crect%20x%3D'8'%20y%3D'40'%20width%3D'24'%20height%3D'8'%20fill%3D'%23ff7a1a'%2F%3E%3Crect%20x%3D'32'%20y%3D'40'%20width%3D'8'%20height%3D'8'%20fill%3D'%23e6392b'%2F%3E%3Crect%20x%3D'8'%20y%3D'32'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ff7a1a'%2F%3E%3Crect%20x%3D'16'%20y%3D'32'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ffd23f'%2F%3E%3Crect%20x%3D'24'%20y%3D'32'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ff7a1a'%2F%3E%3Crect%20x%3D'8'%20y%3D'24'%20width%3D'16'%20height%3D'8'%20fill%3D'%23ffd23f'%2F%3E%3Crect%20x%3D'24'%20y%3D'24'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ff7a1a'%2F%3E%3Crect%20x%3D'8'%20y%3D'16'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ff7a1a'%2F%3E%3Crect%20x%3D'16'%20y%3D'16'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ffd23f'%2F%3E%3Crect%20x%3D'16'%20y%3D'8'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ff7a1a'%2F%3E%3Crect%20x%3D'16'%20y%3D'0'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ffd23f'%2F%3E%3Crect%20x%3D'40'%20y%3D'48'%20width%3D'40'%20height%3D'8'%20fill%3D'%23e6392b'%2F%3E%3Crect%20x%3D'40'%20y%3D'40'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ff7a1a'%2F%3E%3Crect%20x%3D'48'%20y%3D'40'%20width%3D'24'%20height%3D'8'%20fill%3D'%23ff7a1a'%2F%3E%3Crect%20x%3D'72'%20y%3D'40'%20width%3D'8'%20height%3D'8'%20fill%3D'%23e6392b'%2F%3E%3Crect%20x%3D'48'%20y%3D'32'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ffd23f'%2F%3E%3Crect%20x%3D'56'%20y%3D'32'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ff7a1a'%2F%3E%3Crect%20x%3D'64'%20y%3D'32'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ffd23f'%2F%3E%3Crect%20x%3D'48'%20y%3D'24'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ff7a1a'%2F%3E%3Crect%20x%3D'56'%20y%3D'24'%20width%3D'16'%20height%3D'8'%20fill%3D'%23ffd23f'%2F%3E%3Crect%20x%3D'48'%20y%3D'16'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ffd23f'%2F%3E%3Crect%20x%3D'64'%20y%3D'16'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ff7a1a'%2F%3E%3Crect%20x%3D'48'%20y%3D'8'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ff7a1a'%2F%3E%3Crect%20x%3D'48'%20y%3D'0'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ffd23f'%2F%3E%3Crect%20x%3D'80'%20y%3D'48'%20width%3D'40'%20height%3D'8'%20fill%3D'%23e6392b'%2F%3E%3Crect%20x%3D'80'%20y%3D'40'%20width%3D'8'%20height%3D'8'%20fill%3D'%23e6392b'%2F%3E%3Crect%20x%3D'88'%20y%3D'40'%20width%3D'24'%20height%3D'8'%20fill%3D'%23ff7a1a'%2F%3E%3Crect%20x%3D'112'%20y%3D'40'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ff7a1a'%2F%3E%3Crect%20x%3D'88'%20y%3D'32'%20width%3D'24'%20height%3D'8'%20fill%3D'%23ffd23f'%2F%3E%3Crect%20x%3D'88'%20y%3D'24'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ffd23f'%2F%3E%3Crect%20x%3D'96'%20y%3D'24'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ff7a1a'%2F%3E%3Crect%20x%3D'104'%20y%3D'24'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ffd23f'%2F%3E%3Crect%20x%3D'88'%20y%3D'16'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ff7a1a'%2F%3E%3Crect%20x%3D'104'%20y%3D'16'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ff7a1a'%2F%3E%3Crect%20x%3D'88'%20y%3D'8'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ffd23f'%2F%3E%3Crect%20x%3D'104'%20y%3D'8'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ffd23f'%2F%3E%3Crect%20x%3D'120'%20y%3D'48'%20width%3D'40'%20height%3D'8'%20fill%3D'%23e6392b'%2F%3E%3Crect%20x%3D'120'%20y%3D'40'%20width%3D'8'%20height%3D'8'%20fill%3D'%23e6392b'%2F%3E%3Crect%20x%3D'128'%20y%3D'40'%20width%3D'24'%20height%3D'8'%20fill%3D'%23ff7a1a'%2F%3E%3Crect%20x%3D'152'%20y%3D'40'%20width%3D'8'%20height%3D'8'%20fill%3D'%23e6392b'%2F%3E%3Crect%20x%3D'128'%20y%3D'32'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ff7a1a'%2F%3E%3Crect%20x%3D'136'%20y%3D'32'%20width%3D'16'%20height%3D'8'%20fill%3D'%23ffd23f'%2F%3E%3Crect%20x%3D'128'%20y%3D'24'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ff7a1a'%2F%3E%3Crect%20x%3D'136'%20y%3D'24'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ffd23f'%2F%3E%3Crect%20x%3D'144'%20y%3D'24'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ff7a1a'%2F%3E%3Crect%20x%3D'136'%20y%3D'16'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ff7a1a'%2F%3E%3Crect%20x%3D'144'%20y%3D'16'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ffd23f'%2F%3E%3Crect%20x%3D'144'%20y%3D'8'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ff7a1a'%2F%3E%3Crect%20x%3D'144'%20y%3D'0'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ffd23f'%2F%3E%3C%2Fsvg%3E");
  background-size: 240px 84px; /* 4 frames x the 60px flame box */
  animation: burn 0.7s steps(4) infinite;
}
.pixel-fire .fb { display: none; }
@keyframes burn {
  from { background-position-x: 0; }
  to { background-position-x: -240px; }
}
  to { transform: scaleY(1.07) skewX(2.5deg); filter: brightness(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .pixel-fire .fa, .pixel-fire .fb, .ufo { animation: none; }
  .pixel-fire .fb { opacity: 0; }
  .fsm, .cone-fly { animation-duration: 0.5s; }
}

/* ---------- stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.6rem, 2vw, 1rem);
  padding: clamp(5rem, 11vw, 7rem) 0 0;
  width: min(960px, 92vw);
  margin: 0 auto;
}
.stat {
  background: var(--surface);
  border: 3px solid var(--muted);
  border-radius: 16px;
  text-align: center;
  padding: 1rem;
}
.stat b { display: block; font-family: "Titan One", system-ui, sans-serif; font-weight: 400; font-size: clamp(1.7rem, 5vw, 2.6rem); }
.stat span { color: var(--text); font-size: clamp(0.72rem, 2vw, 0.9rem); }
body.admin .stat span { white-space: nowrap; } /* short labels only there */
.s40 { border-color: var(--orange); } .s40 b { color: var(--orange); }
.s42 { border-color: var(--green); } .s42 b { color: var(--green); }
.s1  { border-color: var(--gold); } .s1 b { color: var(--gold); }
.sno { border-color: var(--red); } .sno b { color: #ff8a75; }
.spend b { color: var(--muted); }

/* ---------- hardfacts ---------- */
.guide {
  width: min(960px, 92vw);
  box-sizing: border-box;
  margin: 2rem auto;
  background: var(--green-dark);
  border: 3px solid var(--green);
  border-radius: 16px;
  padding: 1.2rem 1.6rem;
}
.guide h2 { color: var(--green); letter-spacing: 1px; font-size: clamp(1.15rem, 2.6vw, 1.5rem); font-family: "Titan One", system-ui, sans-serif; font-weight: 400; margin-top: 0; }
.guide ul { list-style: none; padding: 0; margin: 0; }
.guide li { padding: 0.4rem 0; }

/* ---------- dress code banner ---------- */
.banner {
  background: var(--navy-deep);
  border-top: 3px solid var(--gold);
  border-bottom: 3px solid var(--gold);
  color: var(--text);
  text-align: center;
  padding: 1.2rem 1.2rem 2.6rem;
  margin-top: 2.5rem;
}
.dress {
  font-family: "Titan One", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 2.6vw, 1.45rem);
  letter-spacing: 1px;
  margin: 0;
  text-wrap: balance;
  color: var(--gold);
}
.dress-sub {
  max-width: 46ch;
  margin: 0.6rem auto 0;
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  text-wrap: balance;
}
/* music card overlaps the banner like a ticket stub — one unit */
.music-card {
  width: min(760px, 88vw);
  margin: -1.4rem auto 0;
  position: relative;
  background: var(--surface);
  border: 2px solid var(--gold);
  border-radius: 16px;
  padding: 0.9rem 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.music-card .music-icon { font-size: 2.1rem; line-height: 1; }
.music-card p { margin: 0; }

/* ---------- rsvp (dark card, consistent with the rest) ---------- */
.rsvp {
  width: min(960px, 92vw);
  box-sizing: border-box;
  margin: 2rem auto 3rem;
  background: var(--surface);
  border: 3px solid var(--green);
  border-radius: 16px;
  padding: 1.5rem;
}
.rsvp h2 { text-align: center; font-family: "Titan One", system-ui, sans-serif; font-weight: 400; letter-spacing: 1px; font-size: clamp(1.15rem, 2.6vw, 1.5rem); }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.choice {
  display: block;
  text-align: center;
  padding: 1rem;
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
  border: 3px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.3s ease;
}
.choice input { position: absolute; opacity: 0; }
.choice.go { background: var(--green); color: var(--navy); }
.choice.nogo { background: rgba(230, 57, 43, 0.12); color: #ff9a88; border-color: var(--red); }
.choice:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
  opacity: 1;
}
/* .picked is set by JS: the choice pops and glows, the other fades */
.choice.picked { animation: pop 0.35s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.choice.go.picked { box-shadow: 0 0 26px rgba(47, 191, 113, 0.55); }
.choice.nogo.picked { box-shadow: 0 0 26px rgba(230, 57, 43, 0.5); }
.choices.has-pick .choice:not(.picked) { opacity: 0.4; }
@keyframes pop {
  0% { transform: scale(0.92); }
  60% { transform: scale(1.09); }
  100% { transform: scale(1.04); }
}
.field { display: block; margin: 1.1rem 0; font-weight: 700; }
.field input {
  display: block;
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.6rem;
  border: 2px solid var(--faint);
  border-radius: 10px;
  font-size: 1rem;
  background: var(--navy);
  color: var(--text);
}
.field input:focus { border-color: var(--green); outline: none; }
.save {
  display: block;
  margin: 1.2rem auto 0;
  background: var(--green);
  color: var(--navy);
  font-weight: 900;
  font-size: 1.05rem;
  border: none;
  border-radius: 999px;
  padding: 0.8rem 2rem;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.save:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4); }
.save:active { transform: scale(0.96); }
.flash { text-align: center; font-weight: 800; padding: 0.7rem; border-radius: 10px; }
.flash.yes { background: var(--green); color: var(--navy); }
.flash.no { background: var(--red); color: #fff; }
.flash.warn { background: var(--gold); color: var(--navy); }
.flash.pop { animation: pop 0.35s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.flash .joke { font-weight: 600; font-size: 0.9em; opacity: 0.85; }

footer {
  text-align: center;
  padding: 1.5rem 1rem 2.5rem;
  color: var(--muted);
  border-top: 1px solid var(--surface);
  width: min(960px, 100%);
  margin: 0 auto;
}

/* ---------- teaser / 404 / login ---------- */
.void {
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1.2rem;
  position: relative;
  overflow-x: clip; /* the shared body sky shows through */
}
.void .ufo {
  position: absolute; /* .void > * sets relative — that put the ufo in flow
                         and its drift animation shoved the text around */
  top: 6%;
  animation: fly-right 36s linear infinite, void-drift 11s ease-in-out infinite alternate;
  animation-delay: -12s, 0s;
  opacity: 1; /* solid — it flies over the text, not behind a veil */
  pointer-events: none;
  z-index: 5; /* sails over the text, not behind it */
}
@keyframes void-drift {
  from { margin-top: 0; }
  to { margin-top: 42vh; }
}
.void > * { position: relative; z-index: 1; }
.void h1 { font-family: "Titan One", system-ui, sans-serif; font-weight: 400; font-size: clamp(1.5rem, 5vw, 2.4rem); }
.marvin {
  width: 130px;
  height: 150px;
  margin: 0 auto 0.4rem;
  background: url("/static/marvin.png") no-repeat center / contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 16px rgba(168, 200, 220, 0.3));
}
.marvin-quote { font-style: italic; margin-top: 0; }
.login { background: var(--surface); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 1.5rem 2rem; min-width: min(90vw, 380px); }
.login .field input { border-color: var(--faint); }
.linkbox { width: min(90vw, 480px); padding: 0.7rem; font-size: 0.95rem; border-radius: 10px; border: 2px solid var(--faint); }

/* ---------- admin ---------- */
body.admin .stats { padding: 1.4rem 0 0.5rem; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) {
  body.admin .stats { grid-template-columns: repeat(2, 1fr); }
}
.addguest {
  width: min(960px, 92vw);
  margin: 0 auto 1.5rem;
  padding: 1rem 0;
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}
.addguest form { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
.addguest input[type="text"], .addguest select {
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  border: 1px solid var(--faint);
  background: var(--navy);
  color: var(--text);
  font-size: 0.95rem;
}
.addguest .save { margin: 0; padding: 0.55rem 1.2rem; font-size: 0.95rem; background: var(--green); }
.export {
  margin-left: auto;
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 0.45rem 1.1rem;
  color: var(--muted);
  text-decoration: none;
  font-weight: 700;
}
.export:hover { color: var(--text); border-color: var(--faint); }
.guests { width: min(1100px, 96vw); margin: 0 auto 3rem; border-collapse: collapse; font-size: 0.92rem; }
.guests th { text-align: left; color: var(--muted); padding: 0.6rem 0.8rem; border-bottom: 2px solid var(--surface); }
.guests td { padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--surface); }
.guests .actions { display: flex; gap: 0.5rem; align-items: center; }
.guests .name { font-weight: 700; }
.guests .song { color: var(--gold); font-style: italic; }
.guests .note { color: var(--muted); font-size: 0.85rem; }
.tag { padding: 0.15rem 0.7rem; border-radius: 999px; font-weight: 800; font-size: 0.8rem; }
.tag.yes { background: var(--green); color: var(--navy); }
.tag.no { background: var(--red); color: #fff; }
.tag.pending { background: #33475e; color: var(--text); }
.copy, .linkish {
  background: var(--surface);
  color: var(--muted);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  cursor: pointer;
}
.copy:hover, .linkish:hover { color: var(--text); border-color: var(--faint); }
/* icon-only ✕ buttons: true circles with the glyph dead-center */
.linkish.danger {
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.linkish.danger:hover { color: var(--red); }
.inline { display: inline; }

/* ---------- small screens ---------- */
@media (max-width: 640px) {
  /* text above the photo, photo full and uncropped: no half faces */
  .hero { display: flex; flex-direction: column; background: var(--navy-deep); }
  .hero-img { min-height: 0; height: auto; order: 2; }
  .hero::before { display: none; }
  .hero-text { position: static; order: 1; padding: 1.4rem 1rem 1rem; text-shadow: none; }
  .announce { font-size: 0.85rem; letter-spacing: 1.5px; }
  .hero .pixel-fire, .hero .ufo { z-index: 3; }
  /* the score chip sits in the photo's top-left (dark trees) on phones —
     JS pins it to the image's top edge, below the stacked text */
  .ship-counter { left: 0.6rem; right: auto; font-size: 0.85rem; padding: 0.2rem 0.7rem; }
  /* stat cards slim down instead of getting cut */
  .stat { padding: 0.6rem 0.35rem; border-width: 2px; }
  /* all four fires stay visible and tappable: stacked on the photo's
     left half, clear of the centered panic button and of Ju */
  .hero .f1 { top: auto; bottom: 5%; left: 5%; }
  .hero .f2 { top: auto; bottom: 30%; left: 6%; transform: scale(0.6); }
  .hero .f3 { top: auto; bottom: 13%; left: 30%; transform: scale(0.7); }
  .hero .f4 { top: auto; bottom: 48%; left: 10%; transform: scale(0.55); }
  .guide { padding: 1rem 1.1rem; }
  .guide li { font-size: 0.95rem; }
  .rsvp { padding: 1.2rem 1rem; }
}

/* ---------- admin: tabs ---------- */
.tabs {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  width: min(960px, 92vw);
  margin: 1.2rem auto 0.4rem;
}
.tabs a {
  text-decoration: none;
  color: var(--muted);
  font-weight: 800;
  padding: 0.5rem 1.3rem;
  border-radius: 999px;
  border: 1px solid var(--surface);
}
.tabs a.on { background: var(--green); color: var(--navy); border-color: var(--green); }
.tabs a:hover:not(.on) { color: var(--text); border-color: var(--faint); }
.tabpane { display: none; }
#guests.active { display: block; overflow-x: auto; } /* 6-column table scrolls inside */
.tabpane.active { display: block; }

/* ---------- admin: shopping list ---------- */
.shopcol {
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 1rem 1.2rem;
  width: min(720px, 92vw);
  margin: 1rem auto 2rem;
}
.shopcol h3 { margin: 0 0 0.7rem; color: var(--gold); font-family: "Titan One", system-ui, sans-serif; font-weight: 400; letter-spacing: 1px; font-size: clamp(1.05rem, 2.2vw, 1.3rem); }
.shopcol ul { list-style: none; margin: 0 0 0.9rem; padding: 0; }
.shopcol li {
  display: grid;
  grid-template-columns: 1.9rem minmax(0, 1fr) 3.4rem 0.6rem 3.4rem 2rem;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
/* forms dissolve into the grid so every row shares the same columns */
.shopcol li form { display: contents; }

.shopcol li.done span { text-decoration: line-through; color: var(--faint); }
.check { background: none; border: none; color: var(--green); font-size: 1.2rem; cursor: pointer; padding: 0.15rem 0.35rem; }
.additem { display: flex; gap: 0.6rem; margin-top: 0.4rem; }
.additem input[type="text"] { flex: 1; padding: 0.6rem 0.8rem; border-radius: 8px; border: 1px solid var(--faint); background: var(--navy); color: var(--text); }
.additem .save { margin: 0; padding: 0.55rem 1.2rem; font-size: 0.95rem; }

/* ---------- admin: user menu (password change + logout) ---------- */
.usermenu { position: relative; }
.usermenu summary {
  cursor: pointer;
  list-style: none;
  color: var(--muted);
  font-weight: 700;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}
.usermenu summary::-webkit-details-marker { display: none; }
.usermenu[open] summary, .usermenu summary:hover { color: var(--text); background: var(--surface); }
.usermenu .menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  width: 280px;
  background: var(--surface);
  border: 1px solid var(--faint);
  border-radius: 16px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  z-index: 30;
}
.usermenu .pwform { display: flex; flex-direction: column; gap: 0.6rem; }
.usermenu input { padding: 0.6rem 0.8rem; border-radius: 8px; border: 1px solid var(--faint); background: var(--navy); color: var(--text); width: 100%; }
.usermenu .save { margin: 0; padding: 0.55rem 1rem; font-size: 0.95rem; width: 100%; }
.usermenu .linkish.wide { width: 100%; padding: 0.5rem; }
.usermenu .flash { margin: 0; font-size: 0.9rem; padding: 0.5rem; }



/* ---------- background music toggle ---------- */
.music-toggle {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 20;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--green);
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  transition: transform 0.15s ease;
}
.music-toggle:hover { transform: scale(1.1); }
.music-toggle.playing { animation: bounce 0.5s ease-in-out infinite alternate; }
@keyframes bounce { from { transform: scale(1); } to { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .music-toggle.playing { animation: none; } }

/* ---------- admin: confirm modal ---------- */
.modal-back {
  position: fixed;
  inset: 0;
  background: rgba(5, 9, 7, 0.72);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem; /* breathing room on small screens */
}
/* display:flex above would defeat the hidden attribute without this */
.modal-back[hidden] { display: none; }
.modal {
  background: var(--surface);
  border: 2px solid var(--red);
  border-radius: 16px;
  padding: 1.5rem;
  width: min(92vw, 420px);
  max-height: 86vh;      /* nine trophies fit any phone: scroll inside */
  overflow-y: auto;
  text-align: center;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}
.modal-actions { display: flex; gap: 0.8rem; justify-content: center; margin-top: 1.2rem; }
.modal .save.danger { background: var(--red); color: #fff; margin: 0; padding: 0.55rem 1.4rem; }
.modal .linkish.wide { padding: 0.55rem 1.4rem; width: auto; }

/* ---------- confetti (panic button payoff) ---------- */
.confetti {
  position: fixed;
  top: -20px;
  z-index: 150;
  pointer-events: none;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  to { transform: translateY(112vh) translateX(var(--drift, 0px)) rotate(var(--spin, 720deg)); }
}
@media (prefers-reduced-motion: reduce) { .confetti { display: none; } }

/* ---------- admin: inventory quantities ---------- */
.shopcol .iname { min-width: 0; }
.shopcol .req {
  background: var(--green-dark);
  color: var(--green);
  border: none;
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  font-size: 0.8rem;
  font-weight: 800;
  font-family: inherit;
  margin-right: 0.3rem;
  cursor: pointer;
}
.shopcol .req:hover { background: var(--green); color: var(--navy); }

.qty {
  width: 100%;
  padding: 0.3rem 0.4rem;
  border-radius: 8px;
  border: 1px solid var(--faint);
  background: var(--navy);
  color: var(--text);
  text-align: center;
}
.qsep { color: var(--faint); text-align: center; }
li.done .qty { border-color: var(--green); }

/* ---------- achievements ---------- */
.trophy-counter {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 20;
  background: var(--surface);
  border: 2px solid var(--gold);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  font-weight: 900;
  color: var(--gold);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
.trophy-counter.pop { animation: pop 0.35s cubic-bezier(0.2, 1.6, 0.4, 1); }
.toast-stack {
  position: fixed;
  left: 1rem;
  bottom: 4.6rem;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  pointer-events: none;
}
.game-toast.mini {
  position: static;
  transform: none;
  padding: 0.5rem 1rem;
  font-weight: 800;
  animation: mini-life 3.6s ease forwards;
}
@keyframes mini-life {
  0% { opacity: 0; translate: 0 10px; }
  8%, 65% { opacity: 1; translate: 0 0; }
  100% { opacity: 0; } /* long, gentle fade over the final third */
}
.trophy-badge {
  background: rgba(255, 210, 63, 0.14);
  color: var(--gold);
  border: none;
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  font-size: 0.78rem;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  vertical-align: baseline;
}
.trophy-badge:hover { background: rgba(255, 210, 63, 0.28); }
.guests td.name { white-space: nowrap; }
.trophy-badge { display: inline-flex; align-items: center; vertical-align: middle; }

/* ---------- admin: shopping column headers ---------- */
.shopcol .lhead { border-bottom: 2px solid rgba(255, 255, 255, 0.14); color: var(--muted); font-size: 0.78rem; }
.shopcol .lhead .qhead { text-align: center; }

/* ---------- admin: deep space ---------- */
/* admin shares the body sky */

/* a shooting star streaks by from time to time */
.shooting-star {
  position: fixed;
  top: 0;
  left: 0;
  width: 150px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff);
  border-radius: 999px;
  pointer-events: none;
  z-index: -1; /* part of the sky: the hero photo and cards occlude it */
  opacity: 0; /* JS animates each pass with a random path */
}
.shooting-star.s2 { width: 100px; }
@media (prefers-reduced-motion: reduce) { .shooting-star { display: none; } }

/* ---------- satellites ---------- */
.sat {
  position: absolute;
  width: 104px;
  height: 40px;
  z-index: 3;
  cursor: crosshair;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20104%2040'%3E%3Crect%20x%3D'0'%20y%3D'8'%20width%3D'8'%20height%3D'8'%20fill%3D'%233fa9e0'%2F%3E%3Crect%20x%3D'0'%20y%3D'16'%20width%3D'8'%20height%3D'8'%20fill%3D'%231e6ca0'%2F%3E%3Crect%20x%3D'0'%20y%3D'24'%20width%3D'8'%20height%3D'8'%20fill%3D'%233fa9e0'%2F%3E%3Crect%20x%3D'8'%20y%3D'8'%20width%3D'8'%20height%3D'8'%20fill%3D'%231e6ca0'%2F%3E%3Crect%20x%3D'8'%20y%3D'16'%20width%3D'8'%20height%3D'8'%20fill%3D'%233fa9e0'%2F%3E%3Crect%20x%3D'8'%20y%3D'24'%20width%3D'8'%20height%3D'8'%20fill%3D'%231e6ca0'%2F%3E%3Crect%20x%3D'16'%20y%3D'8'%20width%3D'8'%20height%3D'8'%20fill%3D'%233fa9e0'%2F%3E%3Crect%20x%3D'16'%20y%3D'16'%20width%3D'8'%20height%3D'8'%20fill%3D'%231e6ca0'%2F%3E%3Crect%20x%3D'16'%20y%3D'24'%20width%3D'8'%20height%3D'8'%20fill%3D'%233fa9e0'%2F%3E%3Crect%20x%3D'24'%20y%3D'8'%20width%3D'8'%20height%3D'8'%20fill%3D'%231e6ca0'%2F%3E%3Crect%20x%3D'24'%20y%3D'16'%20width%3D'8'%20height%3D'8'%20fill%3D'%233fa9e0'%2F%3E%3Crect%20x%3D'24'%20y%3D'24'%20width%3D'8'%20height%3D'8'%20fill%3D'%231e6ca0'%2F%3E%3Crect%20x%3D'72'%20y%3D'8'%20width%3D'8'%20height%3D'8'%20fill%3D'%231e6ca0'%2F%3E%3Crect%20x%3D'72'%20y%3D'16'%20width%3D'8'%20height%3D'8'%20fill%3D'%233fa9e0'%2F%3E%3Crect%20x%3D'72'%20y%3D'24'%20width%3D'8'%20height%3D'8'%20fill%3D'%231e6ca0'%2F%3E%3Crect%20x%3D'80'%20y%3D'8'%20width%3D'8'%20height%3D'8'%20fill%3D'%233fa9e0'%2F%3E%3Crect%20x%3D'80'%20y%3D'16'%20width%3D'8'%20height%3D'8'%20fill%3D'%231e6ca0'%2F%3E%3Crect%20x%3D'80'%20y%3D'24'%20width%3D'8'%20height%3D'8'%20fill%3D'%233fa9e0'%2F%3E%3Crect%20x%3D'88'%20y%3D'8'%20width%3D'8'%20height%3D'8'%20fill%3D'%231e6ca0'%2F%3E%3Crect%20x%3D'88'%20y%3D'16'%20width%3D'8'%20height%3D'8'%20fill%3D'%233fa9e0'%2F%3E%3Crect%20x%3D'88'%20y%3D'24'%20width%3D'8'%20height%3D'8'%20fill%3D'%231e6ca0'%2F%3E%3Crect%20x%3D'96'%20y%3D'8'%20width%3D'8'%20height%3D'8'%20fill%3D'%233fa9e0'%2F%3E%3Crect%20x%3D'96'%20y%3D'16'%20width%3D'8'%20height%3D'8'%20fill%3D'%231e6ca0'%2F%3E%3Crect%20x%3D'96'%20y%3D'24'%20width%3D'8'%20height%3D'8'%20fill%3D'%233fa9e0'%2F%3E%3Crect%20x%3D'32'%20y%3D'16'%20width%3D'8'%20height%3D'8'%20fill%3D'%236e7c8a'%2F%3E%3Crect%20x%3D'64'%20y%3D'16'%20width%3D'8'%20height%3D'8'%20fill%3D'%236e7c8a'%2F%3E%3Crect%20x%3D'40'%20y%3D'8'%20width%3D'24'%20height%3D'24'%20fill%3D'%23c2cdd5'%2F%3E%3Crect%20x%3D'40'%20y%3D'24'%20width%3D'24'%20height%3D'8'%20fill%3D'%236e7c8a'%2F%3E%3Crect%20x%3D'44'%20y%3D'0'%20width%3D'16'%20height%3D'8'%20fill%3D'%23ffd23f'%2F%3E%3Crect%20x%3D'48'%20y%3D'4'%20width%3D'8'%20height%3D'4'%20fill%3D'%236e7c8a'%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  image-rendering: pixelated;
}
.sat.zap {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20312%2040'%3E%3Crect%20x%3D'48'%20y%3D'16'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'40'%20y%3D'8'%20width%3D'8'%20height%3D'8'%20fill%3D'%238fd8ff'%2F%3E%3Crect%20x%3D'56'%20y%3D'24'%20width%3D'8'%20height%3D'8'%20fill%3D'%238fd8ff'%2F%3E%3Crect%20x%3D'48'%20y%3D'0'%20width%3D'8'%20height%3D'8'%20fill%3D'%233fa9e0'%2F%3E%3Crect%20x%3D'48'%20y%3D'32'%20width%3D'8'%20height%3D'8'%20fill%3D'%233fa9e0'%2F%3E%3Crect%20x%3D'152'%20y%3D'16'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'136'%20y%3D'8'%20width%3D'8'%20height%3D'8'%20fill%3D'%233fa9e0'%2F%3E%3Crect%20x%3D'168'%20y%3D'8'%20width%3D'8'%20height%3D'8'%20fill%3D'%233fa9e0'%2F%3E%3Crect%20x%3D'136'%20y%3D'28'%20width%3D'8'%20height%3D'8'%20fill%3D'%238fd8ff'%2F%3E%3Crect%20x%3D'168'%20y%3D'28'%20width%3D'8'%20height%3D'8'%20fill%3D'%238fd8ff'%2F%3E%3Crect%20x%3D'152'%20y%3D'4'%20width%3D'8'%20height%3D'8'%20fill%3D'%23ffffff'%2F%3E%3Crect%20x%3D'144'%20y%3D'20'%20width%3D'8'%20height%3D'8'%20fill%3D'%238fd8ff'%2F%3E%3Crect%20x%3D'160'%20y%3D'12'%20width%3D'8'%20height%3D'8'%20fill%3D'%238fd8ff'%2F%3E%3Crect%20x%3D'232'%20y%3D'8'%20width%3D'8'%20height%3D'8'%20fill%3D'%233fa9e0'%2F%3E%3Crect%20x%3D'280'%20y%3D'8'%20width%3D'8'%20height%3D'8'%20fill%3D'%233fa9e0'%2F%3E%3Crect%20x%3D'232'%20y%3D'28'%20width%3D'8'%20height%3D'8'%20fill%3D'%238fd8ff'%2F%3E%3Crect%20x%3D'280'%20y%3D'28'%20width%3D'8'%20height%3D'8'%20fill%3D'%233fa9e0'%2F%3E%3Crect%20x%3D'216'%20y%3D'16'%20width%3D'8'%20height%3D'8'%20fill%3D'%238fd8ff'%2F%3E%3Crect%20x%3D'296'%20y%3D'16'%20width%3D'8'%20height%3D'8'%20fill%3D'%238fd8ff'%2F%3E%3C%2Fsvg%3E");
  background-size: 312px 40px;
  cursor: default;
}
@keyframes zap {
  from { background-position-x: 0; }
  to { background-position-x: -312px; }
}
.sat.falling { animation: sat-fall 1s ease-in forwards !important; }
@keyframes sat-fall {
  to { margin-top: 75vh; transform: rotate(500deg); opacity: 0; }
}

/* ---------- achievements modal ---------- */
.trophy-counter { cursor: pointer; }
.ach-modal { border-color: var(--gold); text-align: left; width: min(94vw, 560px); max-width: none; }
.ach-row { gap: 1.1rem; }
.ach-modal h3 { margin: 0 0 0.6rem; font-family: "Titan One", system-ui, sans-serif; font-weight: 400; color: var(--gold); text-align: center; }
.ach-row { display: flex; align-items: center; gap: 0.9rem; padding: 0.5rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.ach-row:last-child { border-bottom: none; }
.ach-row .ach-ico { font-size: 1.7rem; width: 2.2rem; text-align: center; }
.ach-row .ach-desc { color: var(--muted); font-size: 0.85rem; }
.ach-row.locked { opacity: 0.55; }

/* ---------- the Ultimate Question ---------- */
.quiz-line {
  color: var(--gold);
  font-family: "Titan One", system-ui, sans-serif;
  font-size: 1rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.quiz-q {
  background: var(--surface);
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 8px;
  font: inherit;
  padding: 0.1rem 0.7rem;
  cursor: pointer;
}
.quiz-q:hover { transform: scale(1.12); }
/* no spinner buttons — people just type the answer */
#quiz-in::-webkit-outer-spin-button,
#quiz-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#quiz-in { -moz-appearance: textfield; appearance: textfield; }
#quiz-in {
  margin-left: 0.3rem;
  width: 4.5rem;
  padding: 0.2rem 0.4rem;
  border-radius: 8px;
  border: 1px solid var(--gold);
  background: var(--navy);
  color: var(--text);
  font: inherit;
  text-align: center;
}
.quiz-go {
  margin-left: 0.45rem;
  background: var(--green);
  color: var(--navy);
  border: none;
  border-radius: 8px;
  font: inherit;
  padding: 0.15rem 0.6rem;
  cursor: pointer;
}

/* ---------- the Kessler cascade ---------- */
body.quake { animation: quake 0.7s linear; }
@keyframes quake {
  0%, 100% { translate: 0 0; }
  10% { translate: -7px 4px; }
  25% { translate: 6px -5px; }
  40% { translate: -5px -4px; }
  55% { translate: 5px 5px; }
  70% { translate: -4px 2px; }
  85% { translate: 3px -3px; }
}
@media (prefers-reduced-motion: reduce) { body.quake { animation: none; } }

/* ---------- the Vogon (a complaint made flesh) ---------- */
.pixel-fire.vogon, .vogon-actor {
  background: url("/static/vogon.png") no-repeat center / contain;
  image-rendering: pixelated;
}
/* only the footer transformation pops in — the touring actor must not
   replay this every time waddling/bowing classes toggle */
.pixel-fire.vogon {
  cursor: pointer;
  animation: vogon-arrive 0.6s cubic-bezier(0.2, 1.6, 0.4, 1);
}
.pixel-fire.vogon .fa, .pixel-fire.vogon .fb { display: none; }
@keyframes vogon-arrive {
  from { transform: scale(0.2); }
  to { transform: scale(1); }
}

/* ---------- the touring Vogon (encore performances) ---------- */
.vogon-stage {
  position: fixed; /* always on screen: a poem nobody sees helps nobody */
  bottom: 0.4rem;
  left: 0;
  z-index: 130;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.vogon-actor { width: 78px; height: 112px; }
.vogon-actor.waddling { animation: waddle 0.85s ease-in-out infinite; transform-origin: 50% 92%; }
@keyframes waddle {
  0% { transform: rotate(-7deg) translateY(0) scaleY(1); }
  25% { transform: rotate(0deg) translateY(-7px) scaleY(0.95); }
  50% { transform: rotate(7deg) translateY(0) scaleY(1.03); }
  75% { transform: rotate(0deg) translateY(-7px) scaleY(0.95); }
  100% { transform: rotate(-7deg) translateY(0) scaleY(1); }
}
.vogon-actor.bowing { animation: bow 1.6s ease; transform-origin: 50% 95%; }
@keyframes bow {
  /* the sprite faces left: negative rotation bows him forward, not backward */
  0%, 100% { transform: rotate(0deg); }
  30%, 70% { transform: rotate(-30deg); }
  50% { transform: rotate(-26deg); }
}
.vogon-bubble { pointer-events: auto; cursor: pointer; }
.bubble-x {
  position: absolute;
  top: -9px;
  right: -9px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vogon-bubble {
  /* out of flow: showing it must not resize the stage and shove the actor
     (that misaligned the mic); it also stacks above the mic cable */
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  z-index: 132;
  background: #f6f1e7;
  color: #0c130f;
  border-radius: 12px;
  padding: 0.5rem 0.9rem;
  max-width: min(300px, calc(100vw - 2rem));
  font-size: 0.85rem;
  font-style: italic;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
/* the tail: unmistakably the Vogon talking */
.vogon-bubble::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border: 9px solid transparent;
  border-top-color: #f6f1e7;
  border-bottom: none;
}


/* ---------- the microphone rig: descends from above, retracts after ---------- */
.mic-rig {
  position: fixed;
  bottom: calc(0.4rem + 64px); /* mic head at the orator's face */
  width: 18px;
  height: 140vh;               /* cable disappears past the top */
  z-index: 128;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
.mic-rig::before {
  content: "";
  flex: 1;
  width: 3px;
  background: #8a795a; /* the cable */
}
.mic-rig::after {
  content: "";
  width: 18px;
  height: 30px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2012%2020'%3E%3Crect%20x%3D'2'%20y%3D'0'%20width%3D'8'%20height%3D'2'%20fill%3D'%235a6068'%2F%3E%3Crect%20x%3D'0'%20y%3D'2'%20width%3D'12'%20height%3D'6'%20fill%3D'%23454b53'%2F%3E%3Crect%20x%3D'2'%20y%3D'2'%20width%3D'2'%20height%3D'2'%20fill%3D'%2379818b'%2F%3E%3Crect%20x%3D'2'%20y%3D'8'%20width%3D'8'%20height%3D'2'%20fill%3D'%235a6068'%2F%3E%3Crect%20x%3D'4'%20y%3D'10'%20width%3D'4'%20height%3D'10'%20fill%3D'%2323272c'%2F%3E%3Crect%20x%3D'5'%20y%3D'10'%20width%3D'1'%20height%3D'8'%20fill%3D'%233a4048'%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  image-rendering: pixelated;
}

/* ---------- the spotlight (he brought his own) ---------- */
.vogon-spot {
  position: fixed;
  bottom: 0;
  width: 230px;
  height: 280px;
  z-index: 126;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 240, 190, 0.02), rgba(255, 240, 190, 0.2));
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  opacity: 0;
  transition: opacity 0.8s;
}

/* ---------- pixel cannabis leaf (for exactly one joke) ---------- */
.leaf-ico {
  display: inline-block;
  width: 60px;
  height: 57px;
  background: url("/static/leaf.png") no-repeat center / contain;
  image-rendering: pixelated;
  vertical-align: -20px;
}

}

/* ---------- inline form validation ---------- */
.field-error {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #ffb3ab;
  background: rgba(230, 57, 43, 0.14);
  border: 1px solid var(--red);
  border-left: 4px solid var(--red);
  border-radius: 8px;
  padding: 0.5rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 700;
  margin-top: 0.45rem;
  animation: pop 0.25s ease;
}
.field-error[hidden] { display: none; }
.field input.invalid {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(230, 57, 43, 0.25);
}

/* ---------- admin guests: one card design for every screen ---------- */
.guest-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0.8rem;
  width: min(1100px, 96vw);
  margin: 0 auto 3rem;
}
.gcard {
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.gcard header { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; }
.gname { font-weight: 700; min-width: 0; }
.gdrinks, .gnote {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.gdrinks span { color: var(--gold); font-style: italic; flex: 1; min-width: 0; }
.gcard footer { display: flex; gap: 0.5rem; margin-top: auto; padding-top: 0.2rem; }
.gcard footer .copy { flex: 1; padding: 0.4rem 0.8rem; }
.gcard footer .linkish { padding: 0.4rem 0.9rem; }
.gcard footer .linkish.danger { width: 2.1rem; height: auto; border-radius: 999px; }
.ghead { display: none; }
/* wide screens: one aligned row per guest, like a table */
@media (min-width: 860px) {
  .guest-cards {
    --gcols: minmax(170px, 1.1fr) 6.5rem minmax(0, 2fr) 15rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }
  .ghead {
    display: grid;
    grid-template-columns: var(--gcols);
    gap: 0 1rem;
    padding: 0 0.95rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
  }
  .gcard {
    display: grid;
    grid-template-columns: var(--gcols);
    grid-template-areas:
      "name rsvp drinks actions"
      "note note note note";
    align-items: center;
    gap: 0.15rem 1rem;
    padding: 0.45rem 0.9rem;
    border-radius: 10px;
  }
  .gcard header { display: contents; }
  .gname { grid-area: name; }
  .gcard header .tag { grid-area: rsvp; justify-self: start; }
  .gdrinks { grid-area: drinks; }
  .gnote { grid-area: note; }
  .gcard footer { grid-area: actions; margin: 0; padding: 0; }
}