/* ============================================================
   FERNO.fun, pixel-art inferno theme
   palette: deep navy void + ember orange + electric blue
   ============================================================ */

:root {
  /* void */
  --void-0: #03050c;
  --void-1: #060b18;
  --void-2: #0a1226;
  --void-3: #101c38;

  /* ember / orange */
  --ember-0: #2b0a04;
  --ember-1: #6b1a05;
  --ember-2: #b8390a;
  --ember-3: #ef6a12;
  --ember-4: #ff9b2f;
  --ember-5: #ffd166;
  --ember-6: #fff3c4;

  /* blue */
  --blue-0: #04122e;
  --blue-1: #0a2a63;
  --blue-2: #1450b8;
  --blue-3: #2f86ff;
  --blue-4: #7cc4ff;
  --blue-5: #cfe9ff;

  --ink: #dfe9ff;
  --ink-dim: #8fa3c8;
  --ink-faint: #56688c;

  --edge: rgba(47, 134, 255, 0.22);
  --edge-hot: rgba(255, 155, 47, 0.35);

  --px: 3px;
  --font-pixel: "Press Start 2P", "Courier New", monospace;
  --font-ui: "Space Grotesk", "Segoe UI", system-ui, sans-serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--void-0);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  position: relative;
  isolation: isolate;
}

/* ── background canvases ───────────────────────────────────────── */

#fire, #embers {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

#fire {
  /* the fire sim paints its own pixels; this is the backdrop it sits on */
  background:
    radial-gradient(120% 80% at 50% 118%, rgba(255, 120, 20, 0.16), transparent 62%),
    radial-gradient(90% 60% at 50% 0%, rgba(20, 80, 184, 0.14), transparent 70%),
    linear-gradient(180deg, var(--void-1) 0%, var(--void-0) 55%, #0b0710 100%);
}

#embers {
  z-index: 1;
  pointer-events: none;
}

/* ── fx overlays ───────────────────────────────────────────────── */

.fx {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.scanlines {
  background: repeating-linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.22) 0px,
    rgba(0, 0, 0, 0.22) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: multiply;
  opacity: 0.55;
}

.vignette {
  background:
    radial-gradient(130% 95% at 50% 45%, transparent 42%, rgba(2, 4, 10, 0.55) 78%, rgba(1, 2, 6, 0.92) 100%);
}

.grain {
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 0.7s steps(4) infinite;
}

@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2px, 1px); }
  50%  { transform: translate(1px, -2px); }
  75%  { transform: translate(2px, 2px); }
  100% { transform: translate(0, 0); }
}

.bluewash {
  background: linear-gradient(180deg, rgba(20, 80, 184, 0.16) 0%, transparent 38%);
  mix-blend-mode: screen;
}

/* ── screens ───────────────────────────────────────────────────── */

.screen {
  position: fixed;
  inset: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  opacity: 0;
  visibility: hidden;
  transform: scale(1.03);
  transition: opacity 0.6s var(--ease-out), transform 0.7s var(--ease-out), visibility 0s linear 0.7s;
}

.screen.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.6s var(--ease-out), transform 0.7s var(--ease-out), visibility 0s;
}

.screen.is-leaving {
  opacity: 0;
  transform: scale(0.97) translateY(-8px);
}

/* ── landing ───────────────────────────────────────────────────── */

.screen--landing {
  place-items: center;
  text-align: center;
  padding: 24px;
}

.landing__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  transform: translateY(-2vh);
}

/* pixel crest: a little flame-in-shield mark */
.crest {
  width: 92px;
  height: 92px;
  margin-bottom: 26px;
  position: relative;
  filter: drop-shadow(0 0 18px rgba(255, 120, 20, 0.45));
  animation: crestFloat 4.5s ease-in-out infinite;
}

.crest::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* outer shield */
    linear-gradient(180deg, var(--blue-3), var(--blue-1));
  clip-path: polygon(50% 0%, 100% 18%, 100% 62%, 50% 100%, 0% 62%, 0% 18%);
  opacity: 0.9;
}

.crest::after {
  content: "";
  position: absolute;
  inset: 5px;
  background:
    /* inner flame */
    radial-gradient(60% 70% at 50% 78%, var(--ember-6) 0%, var(--ember-5) 18%, var(--ember-4) 34%, var(--ember-3) 52%, var(--ember-1) 74%, transparent 80%);
  clip-path: polygon(50% 0%, 74% 26%, 64% 40%, 82% 56%, 68% 74%, 50% 100%, 32% 74%, 18% 56%, 36% 40%, 26% 26%);
  animation: crestFlicker 1.6s steps(6) infinite;
}

@keyframes crestFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

@keyframes crestFlicker {
  0%, 100% { transform: scaleY(1) scaleX(1); }
  25%      { transform: scaleY(1.06) scaleX(0.96); }
  50%      { transform: scaleY(0.96) scaleX(1.04); }
  75%      { transform: scaleY(1.03) scaleX(0.99); }
}

/* wordmark */
.wordmark {
  font-family: var(--font-pixel);
  font-size: clamp(30px, 8.2vw, 92px);
  line-height: 1;
  margin: 0;
  letter-spacing: 0.06em;
  color: var(--ember-5);
  display: flex;
  gap: 0.06em;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
}

.wordmark span {
  display: inline-block;
  position: relative;
  text-shadow:
    0 var(--px) 0 var(--ember-1),
    0 calc(var(--px) * 2) 0 var(--ember-0),
    0 0 26px rgba(255, 155, 47, 0.55);
  animation: letterRise 0.7s var(--ease-snap) both;
}

.wordmark span:nth-child(1) { animation-delay: 0.05s; }
.wordmark span:nth-child(2) { animation-delay: 0.11s; }
.wordmark span:nth-child(3) { animation-delay: 0.17s; }
.wordmark span:nth-child(4) { animation-delay: 0.23s; }
.wordmark span:nth-child(5) { animation-delay: 0.29s; }

.wordmark__tld {
  font-size: 0.42em;
  color: var(--blue-4) !important;
  text-shadow:
    0 var(--px) 0 var(--blue-1),
    0 calc(var(--px) * 2) 0 var(--blue-0),
    0 0 22px rgba(47, 134, 255, 0.5) !important;
  animation-delay: 0.35s !important;
  letter-spacing: 0.1em;
}

@keyframes letterRise {
  0%   { opacity: 0; transform: translateY(26px) scale(0.7) rotate(-6deg); }
  100% { opacity: 1; transform: none; }
}

.tagline {
  font-family: var(--font-pixel);
  font-size: clamp(8px, 1.7vw, 13px);
  color: var(--ink-dim);
  margin: 26px 0 0;
  letter-spacing: 0.08em;
  line-height: 1.9;
  text-align: center;
}

.tagline__bracket {
  color: var(--blue-3);
}

/* ── buttons ───────────────────────────────────────────────────── */

.btn {
  font-family: var(--font-pixel);
  font-size: clamp(10px, 1.6vw, 14px);
  color: var(--ember-6);
  background: linear-gradient(180deg, var(--ember-2), var(--ember-1));
  border: 0;
  padding: 18px 30px;
  cursor: pointer;
  letter-spacing: 0.14em;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  position: relative;
  clip-path: polygon(
    8px 0, 100% 0, 100% calc(100% - 8px),
    calc(100% - 8px) 100%, 0 100%, 0 8px
  );
  box-shadow:
    0 0 0 2px var(--void-0),
    0 0 0 4px var(--ember-3),
    0 0 30px rgba(255, 120, 20, 0.35);
  transition: transform 0.18s var(--ease-snap), box-shadow 0.25s var(--ease-out), color 0.2s;
  animation: btnPulse 2.6s ease-in-out infinite;
}

.btn:hover {
  transform: translateY(-3px) scale(1.035);
  box-shadow:
    0 0 0 2px var(--void-0),
    0 0 0 4px var(--ember-4),
    0 0 52px rgba(255, 155, 47, 0.6);
  color: #fff;
}

.btn:active { transform: translateY(0) scale(0.98); }

.btn:focus-visible {
  outline: 3px solid var(--blue-3);
  outline-offset: 4px;
}

.btn__glyph {
  font-size: 0.85em;
  color: var(--ember-6);
  animation: glyphBlink 1.4s steps(2) infinite;
}

@keyframes glyphBlink {
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: 0.35; }
}

@keyframes btnPulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--void-0), 0 0 0 4px var(--ember-3), 0 0 26px rgba(255, 120, 20, 0.3); }
  50%      { box-shadow: 0 0 0 2px var(--void-0), 0 0 0 4px var(--ember-4), 0 0 46px rgba(255, 155, 47, 0.5); }
}

.btn--enter {
  background: linear-gradient(180deg, var(--blue-3), var(--blue-1));
  color: var(--blue-5);
  margin-top: 46px;
  box-shadow:
    0 0 0 2px var(--void-0),
    0 0 0 4px var(--blue-2),
    0 0 30px rgba(47, 134, 255, 0.4);
  animation: btnPulseBlue 2.6s ease-in-out infinite;
}

.btn--enter:hover {
  color: #fff;
  box-shadow:
    0 0 0 2px var(--void-0),
    0 0 0 4px var(--blue-3),
    0 0 56px rgba(47, 134, 255, 0.65);
}

.btn--enter .btn__glyph { color: var(--blue-5); }

@keyframes btnPulseBlue {
  0%, 100% { box-shadow: 0 0 0 2px var(--void-0), 0 0 0 4px var(--blue-2), 0 0 26px rgba(47, 134, 255, 0.32); }
  50%      { box-shadow: 0 0 0 2px var(--void-0), 0 0 0 4px var(--blue-3), 0 0 48px rgba(47, 134, 255, 0.55); }
}

/* ── ENTER detonation ───────────────────────────────────────────
   The button catching fire. Three pieces, all of them above the canvas:
   the button goes white-hot and out, a shockwave flashes out of its own
   centre, and the screen takes one shake. The actual inferno is the fire
   solver behind this, these are only the layers painted over the content.
   Every keyframe below is stepped so the flash reads as pixel fire rather
   than a smooth gradient. */

#enter.is-blasting {
  pointer-events: none;
  animation: enterBlast 0.4s steps(6, end) forwards;
}

@keyframes enterBlast {
  0% {
    transform: scale(1);
    opacity: 1;
    color: var(--blue-5);
    background: linear-gradient(180deg, var(--blue-3), var(--blue-1));
    box-shadow:
      0 0 0 2px var(--void-0),
      0 0 0 4px var(--blue-2),
      0 0 30px rgba(47, 134, 255, 0.4);
    filter: none;
  }
  16% {
    transform: scale(1.12);
    opacity: 1;
    color: var(--void-0);
    background: var(--ember-6);
    box-shadow:
      0 0 0 3px var(--ember-6),
      0 0 46px 16px var(--ember-4),
      0 0 120px 46px var(--ember-3),
      0 0 200px 80px rgba(255, 120, 20, 0.45);
    filter: none;
  }
  45% {
    transform: scale(1.42) translateY(-9px);
    opacity: 1;
    color: var(--void-0);
    background: linear-gradient(180deg, var(--ember-5), var(--ember-3));
    box-shadow:
      0 0 0 3px var(--ember-5),
      0 0 70px 26px var(--ember-3),
      0 0 170px 70px rgba(184, 57, 10, 0.5);
    filter: blur(1px);
  }
  100% {
    transform: scale(2.1) translateY(-34px);
    opacity: 0;
    color: transparent;
    background: linear-gradient(180deg, var(--ember-4), rgba(107, 26, 5, 0));
    box-shadow:
      0 0 0 2px rgba(239, 106, 18, 0),
      0 0 10px 5px rgba(255, 155, 47, 0);
    filter: blur(7px);
  }
}

/* shockwave + flash, positioned on the button by enterSite() */
.screen--landing::before,
.screen--landing::after {
  content: "";
  position: fixed;
  pointer-events: none;
  opacity: 0;
  z-index: 4;
}

.screen--landing::before {
  inset: 0;
  background: radial-gradient(
    58% 46% at var(--boom-x, 50%) var(--boom-y, 62%),
    rgba(255, 243, 196, 0.92) 0%,
    rgba(255, 155, 47, 0.5) 34%,
    transparent 72%
  );
  mix-blend-mode: screen;
}

.screen--landing::after {
  left: var(--boom-x, 50%);
  top: var(--boom-y, 62%);
  width: 0;
  height: 0;
}

.screen--landing.is-booming::before { animation: boomFlash 0.42s ease-out forwards; }
.screen--landing.is-booming::after  { animation: boomShock 0.62s cubic-bezier(0.15, 0.85, 0.3, 1) forwards; }

@keyframes boomFlash {
  0%   { opacity: 0; }
  8%   { opacity: 0.9; }
  100% { opacity: 0; }
}

@keyframes boomShock {
  0% {
    opacity: 1;
    box-shadow:
      0 0 0 0 rgba(255, 246, 220, 0.95),
      0 0 26px 12px rgba(255, 155, 47, 0.9),
      0 0 90px 34px rgba(239, 106, 18, 0.55);
  }
  55% {
    opacity: 1;
    box-shadow:
      0 0 0 10px rgba(255, 246, 220, 0.5),
      0 0 0 74px rgba(255, 155, 47, 0.32),
      0 0 160px 54px rgba(239, 106, 18, 0.3);
  }
  100% {
    opacity: 0;
    box-shadow:
      0 0 0 14px rgba(255, 246, 220, 0),
      0 0 0 250px rgba(255, 155, 47, 0),
      0 0 120px 60px rgba(239, 106, 18, 0);
  }
}

/* one shake of the whole screen, so the blast has weight behind it */
.screen--landing.is-booming {
  animation: boomShake 0.35s steps(2, end);
}

@keyframes boomShake {
  0%   { transform: translate(0, 0); }
  15%  { transform: translate(-8px, -5px); }
  30%  { transform: translate(7px, 4px); }
  45%  { transform: translate(-6px, 5px); }
  60%  { transform: translate(5px, -4px); }
  75%  { transform: translate(-3px, 2px); }
  100% { transform: translate(0, 0); }
}

.btn--ghost {
  background: transparent;
  color: var(--blue-4);
  box-shadow: 0 0 0 2px var(--void-0), 0 0 0 3px var(--blue-2);
  padding: 12px 18px;
  font-size: clamp(8px, 1.1vw, 11px);
  animation: none;
}

.btn--ghost:hover {
  color: var(--blue-5);
  box-shadow: 0 0 0 2px var(--void-0), 0 0 0 3px var(--blue-3), 0 0 24px rgba(47, 134, 255, 0.4);
}

.btn--ghost .btn__glyph { animation: none; }

.hint {
  font-family: var(--font-pixel);
  font-size: clamp(7px, 1.1vw, 10px);
  color: var(--ink-dim);
  letter-spacing: 0.1em;
  margin: 30px 0 0;
  line-height: 2;
  text-shadow: 0 2px 10px rgba(3, 5, 12, 0.9);
}

.hint__key {
  color: var(--blue-4);
  border: 1px solid var(--edge);
  padding: 4px 7px;
  margin-right: 8px;
  background: rgba(10, 42, 99, 0.45);
}

.landing__foot {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 22px;
  font-family: var(--font-pixel);
  font-size: 9px;
  color: var(--ink-dim);
  letter-spacing: 0.1em;
  border-top: 1px solid rgba(47, 134, 255, 0.18);
  background: linear-gradient(180deg, rgba(3, 5, 12, 0.55), rgba(3, 5, 12, 0.92));
  backdrop-filter: blur(2px);
}

.stat { display: inline-flex; align-items: center; gap: 8px; }

.pip {
  width: 7px;
  height: 7px;
  display: inline-block;
  background: var(--ink-faint);
}

.pip--live {
  background: var(--blue-4);
  box-shadow: 0 0 8px var(--blue-3);
  animation: pipBlink 1.8s steps(2) infinite;
}

/* the hub's ONLINE indicator reads as a cool signal light, not an ember */
.hub__status .pip--live {
  background: var(--blue-4);
  box-shadow: 0 0 10px var(--blue-3), 0 0 20px rgba(47, 134, 255, 0.5);
}

@keyframes pipBlink {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0.25; }
}

/* ── hub ───────────────────────────────────────────────────────── */

.screen--hub {
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
}

.hub__bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 18px clamp(16px, 4vw, 48px);
  border-bottom: 1px solid rgba(47, 134, 255, 0.14);
  background: linear-gradient(180deg, rgba(6, 11, 24, 0.85), transparent);
  animation: barIn 0.6s var(--ease-out) both;
}

@keyframes barIn {
  from { opacity: 0; transform: translateY(-14px); }
}

.hub__title {
  font-family: var(--font-pixel);
  font-size: clamp(8px, 1.5vw, 14px);
  color: var(--ember-5);
  margin: 0;
  letter-spacing: 0.14em;
  text-shadow: 0 0 18px rgba(255, 155, 47, 0.4);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.hub__status {
  font-family: var(--font-pixel);
  font-size: 9px;
  color: var(--ink-dim);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.1em;
}

/* cards */
/* Rows are equal height so one long description cannot stretch its whole
   band. A wrapped card (card plus the Discord link under it) sits in a
   single grid cell, so its link takes room from the card itself rather than
   making the whole row taller. */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: clamp(14px, 1.8vw, 22px);
  align-content: center;
  padding: clamp(20px, 4vw, 54px) clamp(16px, 4vw, 48px);
  overflow-y: auto;
  min-height: 0;
}

@media (max-width: 1080px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .cards { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; align-content: start; }
}

.card {
  --accent: var(--blue-3);
  --accent-dim: var(--blue-1);
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 20px;
  text-decoration: none;
  color: var(--ink);
  background: linear-gradient(155deg, rgba(16, 28, 56, 0.72), rgba(6, 11, 24, 0.86));
  border: 1px solid rgba(47, 134, 255, 0.18);
  clip-path: polygon(
    12px 0, 100% 0, 100% calc(100% - 12px),
    calc(100% - 12px) 100%, 0 100%, 0 12px
  );
  cursor: pointer;
  font-family: var(--font-ui);
  text-align: left;
  transition: transform 0.28s var(--ease-out), border-color 0.28s, box-shadow 0.3s, background 0.3s;
  animation: cardIn 0.65s var(--ease-out) both;
  overflow: hidden;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%);
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}

.card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), transparent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.35s var(--ease-out);
}

.card:hover, .card:focus-visible {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.55), 0 0 34px color-mix(in srgb, var(--accent) 22%, transparent);
  outline: none;
}

.card:hover::before, .card:focus-visible::before { opacity: 1; }
.card:hover::after, .card:focus-visible::after { transform: scaleY(1); }

.card:nth-child(1) { animation-delay: 0.05s; }
.card:nth-child(2) { animation-delay: 0.12s; }
.card:nth-child(3) { animation-delay: 0.19s; }
.card:nth-child(4) { animation-delay: 0.26s; }
.card:nth-child(5) { animation-delay: 0.33s; }

@keyframes cardIn {
  from { opacity: 0; transform: translateY(28px); }
}

.card__icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: block;
  position: relative;
  background: var(--accent-dim);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  position: relative;
}

.card__name {
  font-family: var(--font-pixel);
  font-size: clamp(9px, 1.3vw, 12px);
  color: var(--ember-5);
  letter-spacing: 0.1em;
}

.card__desc {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-dim);
}

.card__meta {
  display: block;
  font-family: var(--font-pixel);
  font-size: 8px;
  color: var(--ink-faint);
  letter-spacing: 0.08em;
  margin-top: 2px;
}

/* A card plus an optional link under it. The wrapper is one grid cell in
   .cards, so the link sits below its card without being nested inside the
   card's own <a>, which the HTML parser splits apart. The wrapper fills the
   cell, the card takes the space left over and the link keeps its own. */
.cardwrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  min-height: 0;
}

.cardwrap > .card {
  flex: 0 0 auto;
  min-height: 0;
}

.card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin: 10px 0 0;
  padding: 6px 11px;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(10, 18, 38, 0.6);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.cardwrap:has(.card--perps) .card__cta { border-color: rgba(247, 147, 26, 0.4); }
.cardwrap:has(.card--sports) .card__cta { border-color: rgba(40, 199, 111, 0.4); }

.card__cta-arrow {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s, transform 0.2s;
}

.card__cta:hover,
.card__cta:focus-visible {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(16, 28, 56, 0.85);
  outline: none;
}

.card__cta:hover .card__cta-arrow,
.card__cta:focus-visible .card__cta-arrow {
  opacity: 1;
  transform: none;
}

/* a section that exists as a signpost but has nothing wired up yet */
.card.is-locked .card__icon { opacity: 0.75; }

.card__arrow {
  position: absolute;
  right: 18px;
  top: 20px;
  font-size: 18px;
  color: var(--accent);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.28s, transform 0.28s var(--ease-out);
}

.card:hover .card__arrow, .card:focus-visible .card__arrow {
  opacity: 1;
  transform: none;
}

.card__badge {
  position: absolute;
  right: 16px;
  bottom: 16px;
  font-family: var(--font-pixel);
  font-size: 7px;
  letter-spacing: 0.1em;
  color: var(--blue-4);
  border: 1px solid var(--edge);
  padding: 5px 8px;
  background: rgba(10, 42, 99, 0.3);
}

/* per-card accents */
.card--x       { --accent: #e7e9ea; --accent-dim: #3a3f45; }
.card--discord { --accent: #5865f2; --accent-dim: #23283f; }
.card--github  { --accent: #ff9b2f; --accent-dim: #3a1f08; }
.card--hl      { --accent: #f7931a; --accent-dim: #3a2108; }
.card--mod     { --accent: #3ddc97; --accent-dim: #082a1f; }
.card--music   { --accent: #2f86ff; --accent-dim: #0d1c3a; }
.card--perps   { --accent: #f7931a; --accent-dim: #3a2108; }
.card--sports  { --accent: #28c76f; --accent-dim: #062a17; }
.card--blog    { --accent: #a06bff; --accent-dim: #2a1347; }
.card--planned { --accent: var(--blue-2); --accent-dim: #0d1c3a; cursor: default; }
.card--planned:hover {
  transform: none;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
  border-color: rgba(47, 134, 255, 0.3);
}
.card--planned:hover::before { opacity: 0.5; }

/* hub icons live in css/icons.css (generated by tools/build-icons.mjs) */

/* hub footer */
.hub__foot {
  border-top: 1px solid rgba(47, 134, 255, 0.18);
  background: linear-gradient(0deg, rgba(3, 5, 12, 0.95), rgba(3, 5, 12, 0.75));
  backdrop-filter: blur(2px);
  padding: 12px clamp(16px, 4vw, 48px) 16px;
}

.ticker {
  font-family: var(--font-pixel);
  font-size: 8px;
  color: var(--ink-dim);
  letter-spacing: 0.12em;
  white-space: nowrap;
  overflow: hidden;
  height: 14px;
  margin-bottom: 10px;
}

.ticker span {
  display: inline-block;
  padding-left: 100%;
  animation: ticker 34s linear infinite;
}

@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

.hub__legal {
  font-family: var(--font-pixel);
  font-size: 8px;
  color: var(--ink-dim);
  letter-spacing: 0.08em;
  text-align: center;
}

/* ── toast ─────────────────────────────────────────────────────── */

.toast {
  position: fixed;
  left: 50%;
  bottom: 34px;
  transform: translate(-50%, 26px);
  z-index: 20;
  font-family: var(--font-pixel);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--blue-5);
  background: rgba(6, 11, 24, 0.95);
  border: 1px solid var(--blue-2);
  padding: 14px 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.35s var(--ease-snap);
  max-width: min(92vw, 520px);
  text-align: center;
  line-height: 1.7;
}

.toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}

.toast b { color: var(--ember-5); font-weight: normal; }

/* ── music page ────────────────────────────────────────────────── */

.screen--music {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
}

/* now-playing bar */
.player {
  margin: clamp(14px, 2.4vw, 26px) clamp(16px, 4vw, 48px) 0;
  background: linear-gradient(150deg, rgba(16, 28, 56, 0.82), rgba(6, 11, 24, 0.9));
  border: 1px solid rgba(47, 134, 255, 0.22);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  padding: 14px 18px 16px;
}

.player__now {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
}

.player__cover {
  width: 56px;
  height: 56px;
  background: var(--void-3) center/cover no-repeat;
  border: 1px solid rgba(47, 134, 255, 0.25);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  image-rendering: pixelated;
}

.player__cover.is-on {
  box-shadow: 0 0 18px rgba(255, 155, 47, 0.35);
  border-color: rgba(255, 155, 47, 0.4);
}

.player__meta { min-width: 0; }

.player__title {
  font-family: var(--font-pixel);
  font-size: clamp(9px, 1.4vw, 13px);
  color: var(--ember-5);
  letter-spacing: 0.08em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player__sub {
  font-size: 13px;
  color: var(--ink-dim);
  margin-top: 7px;
  letter-spacing: 0.04em;
}

.player__time {
  font-family: var(--font-pixel);
  font-size: 11px;
  color: var(--blue-4);
  letter-spacing: 0.06em;
}

.player__bar {
  margin-top: 14px;
  height: 6px;
  background: rgba(10, 18, 38, 0.9);
  border: 1px solid rgba(47, 134, 255, 0.16);
  overflow: hidden;
}

.player__progress {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--blue-3), var(--ember-3) 65%, var(--ember-5));
  transition: width 0.15s linear;
  box-shadow: 0 0 12px rgba(255, 155, 47, 0.5);
}

/* track list */
.tracks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(14px, 2.4vw, 24px) clamp(16px, 4vw, 48px) clamp(20px, 3vw, 34px);
  overflow-y: auto;
  min-height: 0;
}

.track {
  display: grid;
  grid-template-columns: 44px 52px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: linear-gradient(150deg, rgba(16, 28, 56, 0.6), rgba(6, 11, 24, 0.78));
  border: 1px solid rgba(47, 134, 255, 0.14);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  cursor: pointer;
  transition: transform 0.22s var(--ease-out), border-color 0.22s, background 0.22s, box-shadow 0.25s;
  animation: trackIn 0.5s var(--ease-out) both;
}

.track:nth-child(1) { animation-delay: 0.03s; }
.track:nth-child(2) { animation-delay: 0.07s; }
.track:nth-child(3) { animation-delay: 0.11s; }
.track:nth-child(4) { animation-delay: 0.15s; }
.track:nth-child(5) { animation-delay: 0.19s; }
.track:nth-child(6) { animation-delay: 0.23s; }
.track:nth-child(7) { animation-delay: 0.27s; }
.track:nth-child(8) { animation-delay: 0.31s; }
.track:nth-child(9) { animation-delay: 0.35s; }
.track:nth-child(10) { animation-delay: 0.39s; }

@keyframes trackIn {
  from { opacity: 0; transform: translateX(-18px); }
}

.track:hover {
  transform: translateX(6px);
  border-color: rgba(255, 155, 47, 0.4);
  box-shadow: -4px 0 0 var(--ember-3), 0 10px 26px rgba(0, 0, 0, 0.4);
}

.track.is-playing {
  border-color: rgba(255, 155, 47, 0.55);
  background: linear-gradient(150deg, rgba(43, 10, 4, 0.55), rgba(6, 11, 24, 0.85));
  box-shadow: -4px 0 0 var(--ember-4), 0 0 26px rgba(255, 155, 47, 0.22);
}

.track__play {
  width: 44px;
  height: 44px;
  border: 0;
  background: var(--blue-1);
  color: var(--blue-5);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 14px;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: background 0.2s, color 0.2s, transform 0.2s var(--ease-snap);
}

.track__play:hover {
  background: var(--blue-2);
  color: #fff;
  transform: scale(1.08);
}

.track__play:focus-visible {
  outline: 3px solid var(--ember-4);
  outline-offset: 2px;
}

.track.is-playing .track__play {
  background: var(--ember-2);
  color: var(--ember-6);
}

.track__playicon { line-height: 1; }

.track__art {
  width: 52px;
  height: 52px;
  background: var(--void-3) center/cover no-repeat;
  border: 1px solid rgba(47, 134, 255, 0.2);
  image-rendering: pixelated;
}

.track__body { min-width: 0; }

.track__title {
  font-family: var(--font-pixel);
  font-size: clamp(8px, 1.1vw, 11px);
  color: var(--ember-5);
  letter-spacing: 0.06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.track.is-playing .track__title { color: #fff; }

.track__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 9px;
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: 0.05em;
}

.track__genre {
  color: var(--blue-4);
  border: 1px solid var(--edge);
  padding: 2px 7px;
  background: rgba(10, 42, 99, 0.3);
}

.track__tag {
  color: var(--ember-4);
  border: 1px solid rgba(255, 155, 47, 0.28);
  padding: 2px 7px;
}

.track__time {
  font-family: var(--font-pixel);
  font-size: 10px;
  color: var(--ink-dim);
  letter-spacing: 0.05em;
}

.track__suno {
  font-family: var(--font-pixel);
  font-size: 8px;
  color: var(--ink-faint);
  text-decoration: none;
  letter-spacing: 0.08em;
  padding: 7px 9px;
  border: 1px solid rgba(47, 134, 255, 0.16);
  transition: color 0.2s, border-color 0.2s;
}

.track__suno:hover {
  color: var(--blue-4);
  border-color: var(--blue-2);
}

@media (max-width: 720px) {
  .track {
    grid-template-columns: 40px 44px minmax(0, 1fr) auto;
    gap: 12px;
    padding: 10px 12px;
  }
  .track__play { width: 40px; height: 40px; }
  .track__art { width: 44px; height: 44px; }
  .track__suno { display: none; }
  .player__now { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; }
  .player__cover { width: 44px; height: 44px; }
}

/* ── modding page ──────────────────────────────────────────────── */

.screen--modding {
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
}

/* header is a normal bar here: the hero starts below it, not under it */
.hub__bar--float {
  border-bottom: 1px solid rgba(47, 134, 255, 0.14);
  background: linear-gradient(180deg, rgba(6, 11, 24, 0.9), rgba(6, 11, 24, 0.55));
}

.mods {
  display: grid;
  grid-template-columns: minmax(0, 940px);
  grid-auto-rows: max-content;
  justify-content: center;
  align-content: start;
  gap: clamp(18px, 2.4vw, 30px);
  padding: 0 clamp(14px, 3.4vw, 40px) clamp(24px, 4vw, 48px);
  overflow-y: auto;
  min-height: 0;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ── the mod card ── */

.mod {
  --accent: #3ddc97;
  position: relative;
  background: linear-gradient(168deg, rgba(16, 28, 56, 0.86), rgba(6, 11, 24, 0.94));
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  clip-path: polygon(
    18px 0, 100% 0, 100% calc(100% - 18px),
    calc(100% - 18px) 100%, 0 100%, 0 18px
  );
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  animation: cardIn 0.7s var(--ease-out) both;
  overflow: hidden;
  align-self: start;
}

.mod::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(61, 220, 151, 0.05);
}

/* ── hero ── */

/* Full-bleed banner. No aspect-ratio here on purpose: pairing one with an
   explicit height makes the browser derive the WIDTH from the height, which
   shrank the hero to a narrow strip and cropped the art badly. */
.mod__hero {
  position: relative;
  width: 100%;
  height: clamp(200px, 30vh, 340px);
  overflow: hidden;
  background: var(--void-2);
}

.mod__banner {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The art's logo/title sits in the top third (9-31% of the image, peak at 27%).
     A centred crop cut the top of it off; bias well upward so the window starts
     at the very top of the artwork. */
  object-position: center 8%;
  display: block;
  transform: scale(1.02);
  animation: heroDrift 26s ease-in-out infinite alternate;
}

@keyframes heroDrift {
  from { transform: scale(1.02) translateY(0); }
  to   { transform: scale(1.05) translateY(-1%); }
}

/* the banner is bright and busy, darken the bottom for legible type */
.mod__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(3, 5, 12, 0.55) 0%, rgba(3, 5, 12, 0.08) 30%, rgba(3, 5, 12, 0.72) 74%, rgba(6, 11, 24, 1) 100%),
    radial-gradient(120% 90% at 12% 100%, rgba(61, 220, 151, 0.16), transparent 55%);
  pointer-events: none;
}

.mod__badges {
  position: absolute;
  top: clamp(12px, 2vw, 20px);
  left: clamp(12px, 2vw, 20px);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-pixel);
  font-size: 8px;
  letter-spacing: 0.14em;
  padding: 6px 10px;
  line-height: 1;
}

.tag--game {
  color: var(--void-0);
  background: var(--accent);
  box-shadow: 0 0 22px rgba(61, 220, 151, 0.45);
}

.tag--live {
  color: var(--ember-6);
  background: rgba(43, 10, 4, 0.82);
  border: 1px solid rgba(239, 106, 18, 0.55);
  backdrop-filter: blur(4px);
}

.mod__titleblock {
  position: absolute;
  left: clamp(14px, 2.6vw, 28px);
  right: clamp(14px, 2.6vw, 28px);
  bottom: clamp(12px, 2vw, 20px);
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 18px);
  min-width: 0;
}

.mod__logo {
  width: clamp(44px, 5vw, 60px);
  height: clamp(44px, 5vw, 60px);
  flex: 0 0 auto;
  object-fit: cover;
  border: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
}

.mod__title {
  font-family: var(--font-pixel);
  font-size: clamp(13px, 2.1vw, 20px);
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: #fff;
  margin: 0 0 7px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.95), 0 0 40px rgba(61, 220, 151, 0.3);
}

.mod__tagline {
  font-size: clamp(12px, 1.3vw, 15px);
  color: var(--ember-6);
  margin: 0;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95);
}

/* ── body ── */

.mod__body {
  padding: clamp(18px, 3vw, 34px) clamp(16px, 3vw, 34px) clamp(22px, 3.4vw, 38px);
}

.mod__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 14px);
  margin-bottom: clamp(20px, 2.8vw, 30px);
}

.stat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: clamp(12px, 1.8vw, 18px) 8px;
  background: linear-gradient(160deg, rgba(16, 28, 56, 0.7), rgba(6, 11, 24, 0.85));
  border: 1px solid rgba(47, 134, 255, 0.18);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.stat-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ember-4), transparent);
  opacity: 0.8;
}

.stat-card__num {
  font-family: var(--font-pixel);
  font-size: clamp(11px, 1.9vw, 17px);
  color: var(--ember-5);
  letter-spacing: 0.02em;
  text-shadow: 0 0 20px rgba(255, 155, 47, 0.4);
  white-space: nowrap;
}

.stat-card__label {
  font-family: var(--font-pixel);
  font-size: 7px;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
}

/* numbers animate in only once live data lands */
.mod.is-live .stat-card__num { animation: numPop 0.45s var(--ease-snap) both; }
.mod.is-stale .stat-card__num { color: var(--ink-faint); text-shadow: none; }

@keyframes numPop {
  from { opacity: 0; transform: translateY(6px) scale(0.94); }
}

.mod__summary {
  font-size: clamp(15px, 1.55vw, 17px);
  line-height: 1.7;
  color: var(--ink-dim);
  margin: 0 0 clamp(18px, 2.4vw, 24px);
  max-width: 68ch;
}

.mod__highlights {
  list-style: none;
  padding: 0;
  margin: 0 0 clamp(22px, 3vw, 32px);
  display: grid;
  gap: 10px;
}

.mod__highlights li {
  position: relative;
  padding-left: 26px;
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.55;
  color: var(--ink);
}

.mod__highlights li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 8px;
  height: 8px;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(61, 220, 151, 0.7);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* ── buttons ── */

.mod__actions {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(10px, 1.4vw, 16px);
  margin-bottom: clamp(24px, 3.4vw, 34px);
}

.btn--cta,
.btn--wide {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-pixel);
  font-size: clamp(9px, 1.15vw, 11px);
  letter-spacing: 0.1em;
  line-height: 1.5;
  padding: clamp(14px, 1.9vw, 18px) clamp(14px, 2vw, 22px);
  text-decoration: none;
  text-align: center;
  border: 0;
  cursor: pointer;
  transition: transform 0.24s var(--ease-out), box-shadow 0.3s, filter 0.3s, background 0.3s, color 0.3s;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

.btn--cta {
  color: var(--void-0);
  background: linear-gradient(135deg, var(--accent), #24c983 55%, #1fb877);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(61, 220, 151, 0.35);
}

.btn--cta .btn__glyph {
  font-size: 1.2em;
  transition: transform 0.26s var(--ease-out);
}

.btn--cta:hover,
.btn--cta:focus-visible {
  transform: translateY(-3px);
  filter: brightness(1.09);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 0 40px rgba(61, 220, 151, 0.4);
  outline: none;
}

.btn--cta:hover .btn__glyph,
.btn--cta:focus-visible .btn__glyph {
  transform: translateX(6px);
}

.btn--wide {
  color: var(--blue-4);
  background: rgba(10, 42, 99, 0.28);
  box-shadow: inset 0 0 0 1px rgba(47, 134, 255, 0.35);
}

.btn--wide:hover,
.btn--wide:focus-visible {
  color: var(--blue-5);
  transform: translateY(-3px);
  background: rgba(10, 42, 99, 0.5);
  box-shadow: inset 0 0 0 1px rgba(124, 196, 255, 0.55), 0 14px 34px rgba(0, 0, 0, 0.45);
  outline: none;
}

/* ── gallery ── */

.mod__gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 14px);
}

.shot {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  min-height: 180px;
  overflow: hidden;
  background: var(--void-2);
  border: 1px solid rgba(47, 134, 255, 0.16);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform 0.5s var(--ease-out), filter 0.4s;
  filter: saturate(0.92) brightness(0.92);
}

.shot figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 26px 12px 11px;
  font-family: var(--font-pixel);
  font-size: 7px;
  line-height: 1.6;
  letter-spacing: 0.14em;
  color: var(--ember-6);
  background: linear-gradient(0deg, rgba(3, 5, 12, 0.95), rgba(3, 5, 12, 0.6) 55%, transparent);
  transition: color 0.3s;
}

.shot:hover img,
.shot:focus-within img {
  transform: scale(1.06);
  filter: saturate(1.05) brightness(1);
}

.shot::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow 0.3s;
  pointer-events: none;
}

.shot:hover::after {
  box-shadow: inset 0 0 0 1px rgba(61, 220, 151, 0.6);
}

/* ── responsive ── */

@media (max-width: 860px) {
  .mod__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mod__actions { grid-template-columns: minmax(0, 1fr); }
  .mod__gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .mod__hero { aspect-ratio: auto; height: 180px; }
  .mod__title { font-size: 13px; }
  .mod__logo { width: 40px; height: 40px; }
  .mod__gallery { grid-template-columns: minmax(0, 1fr); }
  .shot { aspect-ratio: 3 / 2; min-height: 0; }
  .mod__summary { font-size: 14px; }
}

/* ── responsive ────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .hub__title { font-size: 8px; }
  .hub__status { display: none; }
  .landing__inner { transform: none; }
  .crest { width: 72px; height: 72px; margin-bottom: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  /* make sure entrance animations never leave content invisible */
  .wordmark span,
  .card,
  .hub__bar {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* capture / print mode: freeze every animation at its final state */
html.is-static *,
html.is-static *::before,
html.is-static *::after {
  animation: none !important;
  transition: none !important;
}

html.is-static .wordmark span,
html.is-static .card,
html.is-static .hub__bar {
  opacity: 1 !important;
  transform: none !important;
}