/* PENGUIN ALERT · penguinalert.com
   Flat light law: no box-shadows on scenery or cards.
   Allowed glows: wordmark, primary CTA, focus rings. */

:root {
  --night: #0A1430;
  --night-hi: #17295E;
  --scene: #0D1730;
  --ice: #EDF7FF;
  --ice-dim: rgba(237, 247, 255, .7);
  --gold: #FFCC4D;
  --red: #FF453B;
  --green: #40D98C;
  --emperor: #3B8CFF;
  --rock: #EB4261;
  --violet: #A36BFF;
  --panel: #F4F9FE;
  --ink: #172130;
  --ink-dim: rgba(23, 33, 48, .72);
  --panel-gold: #B88010;
  --panel-warn: #B03312;
  --water: #123B5F;
  --shallow: #2E6E9E;
  --snow: #E7F2FC;
  --ice-blue: #B8DEFF;
  --beak: #FF9E1C;
  --hairline: rgba(237, 247, 255, .12);
  --card: rgba(255, 255, 255, .06);
  --stroke-ink: rgba(23, 33, 48, .8);
  color-scheme: dark;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 84px;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: ui-rounded, -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "Segoe UI", Roboto, sans-serif;
  background: var(--night);
  color: var(--ice);
  line-height: 1.55;
  overflow-x: hidden;
}

::selection { background: var(--gold); color: var(--ink); }

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

.container {
  width: min(1100px, 100% - 2 * clamp(18px, 5vw, 40px));
  margin-inline: auto;
}

/* ---------- type ---------- */

h1, h2, h3 { text-transform: uppercase; line-height: 1.08; }
h1 { font-weight: 900; font-size: clamp(2.6rem, 8vw, 4.6rem); letter-spacing: .035em; }
h2 { font-weight: 900; font-size: clamp(1.5rem, 4vw, 2.1rem); letter-spacing: .06em; }
h3 { font-weight: 800; font-size: 1.02rem; letter-spacing: .07em; }

.kicker {
  display: block;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}

.section-sub {
  color: var(--ice-dim);
  max-width: 58ch;
  margin-top: 10px;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 26px;
  border-radius: 999px;
  border: 2px solid transparent;
  font: inherit;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, background-color .12s ease, color .12s ease;
}
.btn:active { transform: scale(.97); }
.btn-gold {
  background: var(--gold);
  color: var(--ink);
  text-shadow: none;
  box-shadow: 0 0 22px rgba(255, 204, 77, .28);
}
.btn-gold:hover { background: #FFD772; }
.btn-ghost {
  background: transparent;
  color: var(--ice);
  border-color: rgba(237, 247, 255, .45);
}
.btn-ghost:hover { border-color: var(--ice); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 6px;
}
.btn:focus-visible { outline-offset: 3px; }

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 20, 48, .82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
  padding-top: env(safe-area-inset-top);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 64px;
  padding-block: 8px;
}
.header-inner .btn { min-height: 44px; padding: 9px 20px; font-size: .88rem; margin-left: auto; }

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: .42ch;
  font-weight: 900;
  font-size: 1.22rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark .alert {
  color: var(--red);
  text-shadow: 0 0 18px rgba(255, 69, 59, .55);
}
.beacon {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 12px rgba(255, 69, 59, .9);
  align-self: center;
}
@media (prefers-reduced-motion: no-preference) {
  .beacon { animation: beacon-pulse 2s ease-in-out infinite; }
  @keyframes beacon-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
  }
}

.site-nav { display: flex; gap: 20px; }
.site-nav a {
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ice-dim);
  padding: 10px 2px;
}
.site-nav a:hover { color: var(--ice); }
@media (max-width: 720px) {
  .site-nav { display: none; }
}

/* ---------- hero night scene ---------- */

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--night) 0%, #101E47 55%, var(--night-hi) 100%);
  padding-top: clamp(64px, 12vh, 130px);
}
.hero-inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-bottom: calc(clamp(56px, 9vw, 110px) * .5);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hero-icon {
  width: 76px;
  height: 76px;
  border-radius: 18px;
  border: 2px solid rgba(237, 247, 255, .25);
  margin-bottom: 22px;
}
.hero h1 { max-width: 12ch; }
.hero-sub {
  margin-top: 18px;
  max-width: 56ch;
  font-size: 1.08rem;
  color: var(--ice-dim);
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

/* aurora ribbons */
.aurora {
  position: absolute;
  inset: -40px -10% auto -10%;
  height: 46%;
  z-index: 1;
  pointer-events: none;
}
.ribbon {
  position: absolute;
  left: 0;
  right: 0;
  height: 42%;
  border-radius: 999px;
  filter: blur(38px);
  opacity: .8;
}
.ribbon-1 {
  top: 4%;
  background: linear-gradient(90deg, rgba(64, 217, 140, .34), rgba(59, 140, 255, .26), rgba(163, 107, 255, .24));
  transform: rotate(-4deg);
}
.ribbon-2 {
  top: 38%;
  background: linear-gradient(90deg, rgba(163, 107, 255, .20), rgba(64, 217, 140, .24), rgba(59, 140, 255, .20));
  transform: rotate(3deg);
}
@media (prefers-reduced-motion: no-preference) {
  .ribbon-1 { animation: drift-a 70s ease-in-out infinite alternate; }
  .ribbon-2 { animation: drift-b 90s ease-in-out infinite alternate; }
  @keyframes drift-a {
    from { transform: rotate(-4deg) translateX(-3%); }
    to { transform: rotate(-2deg) translateX(3%); }
  }
  @keyframes drift-b {
    from { transform: rotate(3deg) translateX(2%); }
    to { transform: rotate(1deg) translateX(-2%); }
  }
}

/* stars: two drifting dot layers via radial gradients */
.stars {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(237,247,255,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 44%, rgba(237,247,255,.5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 41% 12%, rgba(237,247,255,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 36%, rgba(237,247,255,.45) 50%, transparent 51%),
    radial-gradient(2px 2px at 67% 15%, rgba(237,247,255,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 41%, rgba(237,247,255,.5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 88% 22%, rgba(237,247,255,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 58%, rgba(237,247,255,.4) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 94% 55%, rgba(237,247,255,.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 47% 60%, rgba(237,247,255,.4) 50%, transparent 51%);
}

/* snowfall: three translucent dot sheets falling at different speeds */
@media (prefers-reduced-motion: no-preference) {
  .snowfall {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
  }
  .snowfall::before,
  .snowfall::after {
    content: "";
    position: absolute;
    inset: -100% 0 0 0;
    background-image:
      radial-gradient(2px 2px at 10% 10%, rgba(237,247,255,.55) 50%, transparent 51%),
      radial-gradient(1.5px 1.5px at 30% 40%, rgba(237,247,255,.4) 50%, transparent 51%),
      radial-gradient(2px 2px at 52% 22%, rgba(237,247,255,.5) 50%, transparent 51%),
      radial-gradient(1.5px 1.5px at 72% 55%, rgba(237,247,255,.38) 50%, transparent 51%),
      radial-gradient(2px 2px at 90% 32%, rgba(237,247,255,.5) 50%, transparent 51%),
      radial-gradient(1.5px 1.5px at 18% 78%, rgba(237,247,255,.4) 50%, transparent 51%),
      radial-gradient(2px 2px at 64% 84%, rgba(237,247,255,.45) 50%, transparent 51%);
    background-size: 640px 640px;
    animation: snow-fall 26s linear infinite;
  }
  .snowfall::after {
    background-size: 420px 420px;
    opacity: .6;
    animation-duration: 17s;
    animation-delay: -8s;
  }
  @keyframes snow-fall {
    from { transform: translateY(0); }
    to { transform: translateY(50%); }
  }
}

/* snow shelf silhouette */
.shelf {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 2;
  pointer-events: none;
}
.shelf svg { display: block; width: 100%; height: clamp(56px, 9vw, 110px); }

/* field-report ticker */
.ticker {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 34px;
  padding: 10px 18px;
  background: var(--panel);
  border: 2px solid var(--stroke-ink);
  border-radius: 14px;
  color: var(--ink);
  font-weight: 700;
  font-size: .92rem;
  min-height: 44px;
}
.ticker-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  flex: none;
}
@media (prefers-reduced-motion: no-preference) {
  .ticker-dot { animation: beacon-pulse 1.6s ease-in-out infinite; }
}

/* ---------- sections ---------- */

.section { padding-block: clamp(60px, 10vw, 104px); }
.section-head { margin-bottom: clamp(28px, 5vw, 44px); }

.section-night { background: var(--night); }
.section-deep {
  background: linear-gradient(180deg, var(--night) 0%, #0C1838 100%);
}

/* placards: the game's HUD card, verbatim */
.placard {
  background: var(--panel);
  border: 2px solid var(--stroke-ink);
  border-radius: 14px;
  color: var(--ink);
  padding: 22px 24px;
}
.placard h3 { color: var(--ink); }
.placard .command {
  color: var(--panel-gold);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: 8px;
}
.placard p { color: var(--ink-dim); margin-top: 8px; font-size: .95rem; }

/* dark cards */
.card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 22px 24px;
}

.grid {
  display: grid;
  gap: 16px;
}
.grid-modes { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid-features { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* ---------- screens ---------- */

.screen-figure { margin: 0 0 40px; }
.screen-figure:last-child { margin-bottom: 0; }
.device {
  border: 2px solid var(--stroke-ink);
  background: var(--snow);
  border-radius: 28px;
  padding: 10px;
}
.device img { border-radius: 18px; }
.screen-figure figcaption {
  margin-top: 14px;
  font-weight: 800;
  font-size: .88rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ice-dim);
}
.screen-figure figcaption strong { color: var(--gold); font-weight: 800; }

/* ---------- android band ---------- */

.android-band {
  border-block: 1px solid var(--hairline);
  background: linear-gradient(180deg, rgba(64, 217, 140, .05), rgba(59, 140, 255, .05));
}
.android-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  justify-content: space-between;
}
.android-inner .section-sub { margin-top: 8px; }

/* ---------- waitlist ---------- */

.waitlist-placard {
  max-width: 620px;
  margin-inline: auto;
  padding: clamp(24px, 5vw, 40px);
}
.waitlist-placard h2 { color: var(--ink); }
.waitlist-placard .section-sub { color: var(--ink-dim); }

.seg {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.seg input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.seg label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 2px solid var(--stroke-ink);
  font-weight: 800;
  font-size: .85rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .12s ease;
}
.seg input[type="radio"]:checked + label {
  background: var(--ink);
  color: var(--panel);
}
.seg input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--panel-gold);
  outline-offset: 2px;
}

.waitlist-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}
.field-label {
  display: block;
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 8px;
}
.text-input {
  flex: 1 1 260px;
  min-height: 48px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 2px solid var(--stroke-ink);
  background: #FFFFFF;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}
.text-input::placeholder { color: rgba(23, 33, 48, .45); }
textarea.text-input {
  border-radius: 14px;
  min-height: 120px;
  resize: vertical;
}
.waitlist-row .btn-gold { border-color: var(--stroke-ink); }

.form-note {
  margin-top: 14px;
  font-size: .85rem;
  color: var(--ink-dim);
}
.form-status {
  margin-top: 16px;
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .02em;
  color: var(--ink);
  min-height: 1.4em;
}
.form-status.is-error { color: var(--panel-warn); }
.form-status.is-success { color: var(--panel-gold); }
.roster-note { margin-top: 8px; font-size: .82rem; color: var(--ink-dim); }

.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- faq ---------- */

.faq-item {
  margin-bottom: 12px;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  min-height: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--panel-gold);
  flex: none;
}
.faq-item[open] summary::after { content: "·"; }
.faq-item p { margin-top: 10px; }

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--hairline);
  padding-block: 44px calc(44px + env(safe-area-inset-bottom));
  background: var(--night);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 34px;
}
.footer-nav { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-nav a {
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ice-dim);
  padding-block: 10px;
}
.footer-nav a:hover { color: var(--ice); }
.footer-lines {
  width: 100%;
  font-size: .8rem;
  letter-spacing: .06em;
  color: rgba(237, 247, 255, .45);
  display: grid;
  gap: 6px;
}
.footer-lines .quiet { text-transform: uppercase; font-weight: 700; }

/* ---------- subpages ---------- */

.page-main { padding-block: clamp(40px, 8vw, 72px); }
.prose-placard {
  padding: clamp(24px, 5vw, 44px);
}
.prose-placard h1 {
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  margin-bottom: 6px;
}
.prose-placard .effective {
  color: var(--ink-dim);
  font-size: .9rem;
  margin-bottom: 26px;
}
.prose-placard h2 {
  font-size: 1.05rem;
  letter-spacing: .08em;
  color: var(--ink);
  margin: 28px 0 10px;
}
.prose-placard p, .prose-placard li {
  color: var(--ink-dim);
  font-size: .97rem;
  margin-bottom: 10px;
}
.prose-placard ul { padding-left: 22px; }
.prose-placard a { color: var(--panel-gold); }
.prose-placard strong { color: var(--ink); }

.back-link {
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ice-dim);
  margin-left: auto;
  padding: 10px 0;
}
.back-link:hover { color: var(--ice); }

/* ---------- 404 ---------- */

.lost-main {
  position: relative;
  min-height: calc(100vh - 64px);
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(180deg, var(--night) 0%, var(--night-hi) 100%);
}
.lost-inner { position: relative; z-index: 3; padding: 40px 20px calc(120px + env(safe-area-inset-bottom)); }
.lost-inner h1 { font-size: clamp(3rem, 12vw, 5.5rem); color: var(--ice); }
.lost-inner p { color: var(--ice-dim); margin: 14px auto 30px; max-width: 40ch; }

/* ---------- hero cast: the colony stands on the shelf ---------- */

.hero-cast {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  margin-top: clamp(20px, 4vh, 46px);
  padding-right: clamp(0px, 3vw, 34px);
  pointer-events: none;
}
.hc { width: auto; flex: none; }
.hc-elephant { height: clamp(60px, 13vw, 178px); z-index: 1; }
.hc-trooper  { height: clamp(66px, 14vw, 194px); margin-left: -14px; z-index: 2; }
.hc-chick    { height: clamp(42px, 9vw, 126px);  margin-left: -10px; z-index: 3; }
.hc-hexling  { height: clamp(62px, 13.5vw, 186px); margin-left: -8px; z-index: 2; }
.hc-mesmer   { height: clamp(58px, 12.5vw, 174px); margin-left: -6px; z-index: 1; }
.hc-krill    { height: clamp(24px, 5vw, 66px);   margin-left: 6px;  z-index: 3; }
@media (prefers-reduced-motion: no-preference) {
  .hc { animation: hc-bob 3.4s ease-in-out infinite alternate; }
  .hc-trooper { animation-delay: .45s; }
  .hc-chick { animation-delay: .9s; }
  .hc-hexling { animation-delay: 1.35s; }
  .hc-mesmer { animation-delay: 1.8s; }
  .hc-krill { animation-delay: 2.25s; animation-duration: 2.2s; }
  @keyframes hc-bob {
    from { transform: translateY(0); }
    to { transform: translateY(-5px); }
  }
}
@media (max-width: 760px) {
  .hero-cast { justify-content: center; padding-right: 0; }
}

/* ---------- the parade ---------- */

.parade {
  position: relative;
  background: var(--snow);
  border-block: 2px solid var(--stroke-ink);
  padding: 22px 0 16px;
  overflow: hidden;
}
.parade-chip {
  width: max-content;
  margin: 0 auto 16px;
  background: var(--ink);
  color: var(--snow);
  border-radius: 999px;
  padding: 6px 16px;
  font-weight: 800;
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.parade-viewport { overflow: hidden; }
.parade-track { display: flex; width: max-content; }
.parade-group {
  display: flex;
  align-items: flex-end;
  gap: clamp(24px, 4vw, 46px);
  padding-right: clamp(24px, 4vw, 46px);
}
.parade-group img { height: 72px; width: auto; }
.parade-group img:nth-child(2) { height: 54px; }   /* chick */
.parade-group img:nth-child(4) { height: 40px; }   /* krill */
.parade-group img:nth-child(7) { height: 62px; }   /* husky */
.parade-group img:nth-child(11) { height: 52px; }  /* sledders */
.parade-group img:nth-child(15) { height: 60px; }  /* medi-sled */
.parade-tail { margin-left: clamp(30px, 6vw, 80px); height: 58px; }
@media (prefers-reduced-motion: no-preference) {
  .parade-track { animation: parade-move 60s linear infinite; }
  .parade:hover .parade-track { animation-play-state: paused; }
  @keyframes parade-move {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
  }
  .parade-group img {
    animation: waddle .62s ease-in-out infinite alternate;
    transform-origin: 50% 100%;
  }
  .parade-group img:nth-child(2n) { animation-delay: .16s; }
  .parade-group img:nth-child(3n) { animation-delay: .31s; }
  .parade-group img:nth-child(5n) { animation-delay: .47s; }
  @keyframes waddle {
    from { transform: rotate(-2.4deg); }
    to { transform: rotate(2.4deg); }
  }
}
@media (max-width: 640px) {
  .parade-group img { height: 58px; }
  .parade-group img:nth-child(2) { height: 44px; }
  .parade-group img:nth-child(4) { height: 32px; }
  .parade-group img:nth-child(7) { height: 50px; }
  .parade-group img:nth-child(11) { height: 42px; }
  .parade-group img:nth-child(15) { height: 48px; }
  .parade-tail { height: 46px; }
}

/* ---------- mode stamps ---------- */

.grid-modes { row-gap: 30px; margin-top: 12px; }
.mode-placard { position: relative; }
.mode-placard h3 { padding-right: 58px; }
.mode-stamp {
  position: absolute;
  top: -20px;
  right: 14px;
  height: 58px;
  width: auto;
  transform: rotate(7deg);
}

/* ---------- screens pair ---------- */

.screens-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 40px;
}
@media (max-width: 860px) {
  .screens-pair { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- the cast dossiers ---------- */

.cast-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
  margin-top: 10px;
}
.cast-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 16px 22px;
}
.cast-art {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}
.cast-art img {
  height: 128px;
  width: auto;
  transition: transform .16s ease;
}
.cast-card:hover .cast-art img { transform: scale(1.07) rotate(-2deg); }
.cast-art:focus-visible { outline: 2px solid var(--panel-gold); outline-offset: 4px; border-radius: 10px; }
@media (prefers-reduced-motion: no-preference) {
  .cast-card.is-talking .cast-art img { animation: wobble .55s ease; }
  @keyframes wobble {
    0% { transform: rotate(0); }
    25% { transform: rotate(-7deg) scale(1.08); }
    60% { transform: rotate(5deg) scale(1.04); }
    100% { transform: rotate(0); }
  }
}
.cast-name { margin-top: 12px; font-size: .96rem; letter-spacing: .05em; color: var(--ink); }
.cast-tag {
  margin-top: 6px;
  font-weight: 800;
  font-size: .67rem;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.tag-emperor { color: #2160C4; }
.tag-rock { color: #C22745; }
.tag-wild { color: #187347; }
.cast-line { color: var(--ink-dim); font-size: .86rem; margin-top: 8px; line-height: 1.45; }
.bark {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translate(-50%, 8px);
  background: var(--ink);
  color: var(--panel);
  font-weight: 800;
  font-size: .8rem;
  padding: 8px 13px;
  border-radius: 12px;
  width: max-content;
  max-width: 90%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 3;
}
.bark::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--ink);
  border-bottom: 0;
}
.cast-card:hover .bark,
.cast-card.is-talking .bark,
.cast-card:has(.cast-art:focus-visible) .bark {
  opacity: 1;
  transform: translate(-50%, 0);
}
.cast-footnote {
  margin-top: 26px;
  text-align: center;
  color: var(--ice-dim);
  font-size: .9rem;
}

/* ---------- factions ---------- */

.faction-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: stretch;
}
.faction-card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-top: 4px solid;
  border-radius: 16px;
  padding: 26px;
  display: flex;
  flex-direction: column;
}
.f-emperor { border-top-color: var(--emperor); }
.f-rock { border-top-color: var(--rock); }
.faction-badge {
  align-self: flex-start;
  font-weight: 900;
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.f-emperor .faction-badge { background: rgba(59, 140, 255, .16); color: #9CC5FF; }
.f-rock .faction-badge { background: rgba(235, 66, 97, .16); color: #FF9AB0; }
.faction-card h3 { font-size: 1.3rem; letter-spacing: .05em; }
.faction-motto { color: var(--ice-dim); margin-top: 10px; max-width: 46ch; }
.lineup {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-top: auto;
  padding-top: 22px;
  min-height: 112px;
}
.lineup img { height: 88px; width: auto; }
@media (max-width: 480px) {
  .lineup img { height: 60px; }
}
.faction-bark { margin-top: 16px; font-weight: 700; font-size: .85rem; }
.f-emperor .faction-bark { color: #9CC5FF; }
.f-rock .faction-bark { color: #FF9AB0; }
.vs-chip {
  align-self: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  border: 2px solid var(--stroke-ink);
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: .04em;
  transform: rotate(-7deg);
}
.faction-note {
  margin-top: 26px;
  text-align: center;
  color: var(--ice-dim);
  font-size: .92rem;
}
@media (max-width: 900px) {
  .faction-grid { grid-template-columns: 1fr; }
  .vs-chip { justify-self: center; }
  .lineup { min-height: 0; }
  .lineup img { height: 74px; }
}

/* ---------- the wild band ---------- */

.wild-band {
  background: linear-gradient(180deg, #0C1838 0%, #071026 100%);
  border-block: 1px solid var(--hairline);
  overflow: hidden;
}
.wild-inner {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 5vw, 52px);
  align-items: center;
}
.tier-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
  padding: 0;
  list-style: none;
}
.tier-chips li {
  border: 2px solid rgba(237, 247, 255, .28);
  color: var(--ice);
  border-radius: 999px;
  padding: 7px 14px;
  font-weight: 800;
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.tier-chips li:nth-child(4) { border-color: rgba(255, 204, 77, .55); color: var(--gold); }
.tier-chips li:nth-child(5) { border-color: rgba(255, 69, 59, .7); color: #FFB4AE; }
.tier-chips li.tier-visitors { border-color: rgba(64, 217, 140, .7); color: #7FE9B6; }
.wild-cluster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 22px;
  align-items: center;
  justify-items: center;
}
.wc { width: auto; }
.wc-squid   { height: clamp(130px, 15vw, 200px); grid-row: span 2; }
.wc-leopard { height: clamp(76px, 9vw, 116px); }
.wc-shark   { height: clamp(68px, 8vw, 104px); }
.wc-saucer  { height: clamp(60px, 7vw, 92px); grid-column: 1 / -1; }
@media (prefers-reduced-motion: no-preference) {
  .wc { animation: hc-bob 4.4s ease-in-out infinite alternate; }
  .wc-leopard { animation-delay: 1.1s; }
  .wc-shark { animation-delay: 2.2s; }
  .wc-saucer { animation-delay: .6s; animation-duration: 3s; }
}
.wild-caption {
  margin-top: 26px;
  text-align: right;
  color: rgba(237, 247, 255, .5);
  font-size: .84rem;
}
@media (max-width: 880px) {
  .wild-inner { grid-template-columns: 1fr; }
  .wild-caption { text-align: center; }
}

/* ---------- android sled ---------- */

.android-sled { height: 84px; width: auto; flex: none; }

/* ---------- waitlist peeker ---------- */

.waitlist-wrap {
  position: relative;
  max-width: 620px;
  margin-inline: auto;
}
.waitlist-wrap .waitlist-placard { max-width: none; }
.waitlist-peeker {
  position: absolute;
  top: -57px;
  right: 30px;
  height: 64px;
  width: auto;
  z-index: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .waitlist-peeker { animation: hc-bob 3s ease-in-out infinite alternate; }
}

/* ---------- utilities ---------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}