/* ==========================================================================
   Nebula Games - shared base and components
   Requires tokens.css. Everything here is site-agnostic: it draws itself
   from --accent / --ink / --panel, so retinting those in a site stylesheet
   restyles the whole page.
   ========================================================================== */

/* --- reset ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }
/* width/height attributes must not stretch the element once CSS resizes it.
   This applies to <video> just as much as <img>: a video carrying
   height="720" renders 720px tall whatever its aspect-ratio says, and
   object-fit then crops the frame to fit that box. */
img, video { height: auto; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
/* The ring sits OUTSIDE the element (offset 3px), so it must contrast with the
   page behind it, not with the element. Every surface here is dark, so the
   accent ring reads everywhere -- and on a filled accent button the dark gap
   between button and ring keeps the two apart. Do not "fix" this by darkening
   the ring: that hides it against the dark background. */

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: var(--accent-ink);
  padding: .75rem 1.25rem; font-weight: 700;
}
.skip:focus { left: 0; }

/* --- layout --------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { position: relative; }
/* clear the fixed header when jumping to an anchor */
section[id] { scroll-margin-top: calc(var(--head-h) + 8px); }

.band { padding-block: clamp(3.5rem, 7vw, 6rem); }
.band--tint { background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 40%, var(--ink) 100%); }

/* --- section headings ----------------------------------------------------- */

.eyebrow {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 .9rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}

h2.title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  line-height: 1.05;
  letter-spacing: .01em;
  margin: 0 0 1rem;
  text-wrap: balance;
}

.lede {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--text-dim);
  max-width: 62ch;
  margin: 0;
  text-wrap: pretty;
}

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

.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-ink);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.5rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .02em;
  border: 1px solid var(--btn-bg);
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px -12px color-mix(in srgb, var(--accent) 70%, transparent);
}
.btn:active { transform: translateY(0); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  border-color: var(--line);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover {
  border-color: var(--accent-deep);
  box-shadow: 0 10px 28px -16px color-mix(in srgb, var(--accent) 55%, transparent);
}

.btn svg { flex: none; }

.cta-row { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }
.cta-row--center { justify-content: center; }

/* --- status badge --------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-warm);
  border: 1px solid color-mix(in srgb, var(--accent-warm) 35%, transparent);
  background: color-mix(in srgb, var(--accent-warm) 8%, transparent);
  padding: .35rem .8rem;
  border-radius: 999px;
}
.badge::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-warm);
  box-shadow: 0 0 8px var(--accent-warm);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .badge::before { animation: none; } }

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

.site-head {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  transition: background .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
.site-head.is-stuck {
  background: color-mix(in srgb, var(--ink) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}
.site-head .shell {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--head-h);
}

.brand {
  font-family: var(--display);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .08em;
  color: var(--text);
  line-height: 1.05;
  text-transform: uppercase;
}
.brand:hover { text-decoration: none; color: var(--accent); }
.brand span { display: block; font-size: .62rem; color: var(--text-faint); letter-spacing: .3em; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 1.75rem; }
/* :not(.btn) matters: .nav a would otherwise out-specify .btn and repaint the
   header CTA's text in --text-dim, which on a filled accent button is a 1.7:1
   contrast failure. */
.nav a:not(.btn) {
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.nav a:not(.btn):hover { color: var(--accent); text-decoration: none; }
.nav .btn { padding: .55rem 1.1rem; font-size: .82rem; }

@media (max-width: 860px) {
  .nav a:not(.btn) { display: none; }
  /* the header CTA must not wrap to two lines on a phone */
  .nav .btn { white-space: nowrap; padding: .5rem .85rem; font-size: .72rem; }
  .brand { font-size: .82rem; }
}

/* --- stat strip ----------------------------------------------------------- */

.strip { border-block: 1px solid var(--line); background: var(--panel); }
.strip .shell {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  padding-inline: 0;
}
.strip .shell > div { background: var(--panel); padding: 1.9rem var(--gutter); }
.strip dl { margin: 0; }
.strip dt {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: var(--accent);
  line-height: 1;
}
.strip dd {
  margin: .55rem 0 0;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
@media (max-width: 760px) { .strip .shell { grid-template-columns: repeat(2, 1fr); } }

/* --- video player --------------------------------------------------------- */

.player {
  position: relative;
  margin-top: 2.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  box-shadow: 0 40px 90px -50px rgba(0,0,0,.9);
}
.player video { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

.player__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: color-mix(in srgb, var(--ink) 35%, transparent);
  cursor: pointer;
  transition: background .2s ease;
}
.player__play:hover { background: color-mix(in srgb, var(--ink) 15%, transparent); }
.player__play[hidden] { display: none; }
.player__play i {
  width: 78px; height: 78px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 16%, transparent),
              0 0 46px color-mix(in srgb, var(--accent) 45%, transparent);
  transition: transform .2s ease;
}
.player__play:hover i { transform: scale(1.07); }
.player__play svg { fill: var(--accent-ink); margin-left: 4px; }

/* --- feature grid --------------------------------------------------------- */

.grid-features {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.feature {
  background: var(--panel);
  padding: 2rem 1.8rem;
  position: relative;
  transition: background .2s ease;
}
.feature:hover { background: var(--panel-2); }
.feature::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .25s ease;
}
.feature:hover::before { transform: scaleY(1); }
.feature__n {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .2em;
  color: var(--accent-deep);
  display: block;
  margin-bottom: .9rem;
}
.feature h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.18rem;
  margin: 0 0 .6rem;
  line-height: 1.2;
}
.feature p { margin: 0; color: var(--text-dim); font-size: .95rem; }

/* --- screenshot gallery --------------------------------------------------- */

.gallery {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.shot {
  position: relative;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
  cursor: zoom-in;
  display: block;
}
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 9;
  transition: transform .5s cubic-bezier(.2,.8,.3,1), filter .3s ease;
  filter: saturate(.92);
}
.shot:hover img { transform: scale(1.05); filter: saturate(1.05); }
.shot figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 1.6rem .95rem .8rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-align: left;
  color: var(--text);
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--ink) 92%, transparent));
}
.shot--wide  { grid-column: span 4; }
.shot--third { grid-column: span 2; }
.shot--half  { grid-column: span 3; }
.shot--full  { grid-column: span 6; }
.shot--full img { aspect-ratio: 3 / 1; }

@media (max-width: 900px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .shot--wide, .shot--half, .shot--third, .shot--full { grid-column: span 1; }
  .shot--full img { aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) { .gallery { grid-template-columns: 1fr; } }

/* --- lightbox ------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: color-mix(in srgb, var(--ink) 95%, transparent);
  display: grid;
  place-items: center;
  padding: clamp(1rem, 5vw, 4rem);
  backdrop-filter: blur(8px);
}
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; }
.lightbox img {
  max-width: 100%;
  max-height: 80vh;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-inline: auto;
}
.lightbox figcaption {
  margin-top: 1rem;
  text-align: center;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.lightbox button {
  position: absolute;
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  border: 1px solid var(--line);
  color: var(--text);
  width: 46px; height: 46px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1;
  display: grid; place-items: center;
  transition: border-color .2s ease, color .2s ease;
}
.lightbox button:hover { border-color: var(--accent); color: var(--accent); }
.lb-close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lb-prev  { left: clamp(.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.lb-next  { right: clamp(.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }

/* --- split (copy beside a picture) ---------------------------------------- */

.split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.split__media {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 40px 80px -50px #000;
}

.ticks { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: .85rem; }
.ticks li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .8rem;
  color: var(--text-dim);
  font-size: .95rem;
}
.ticks li::before {
  content: "";
  width: 7px; height: 7px;
  margin-top: .6rem;
  background: var(--accent-warm);
  transform: rotate(45deg);
}

/* --- notice callout ------------------------------------------------------- */

.callout {
  border: 1px solid color-mix(in srgb, var(--accent-warm) 28%, transparent);
  border-left-width: 3px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent-warm) 7%, transparent), transparent 60%);
  padding: clamp(1.6rem, 4vw, 2.6rem);
  border-radius: var(--radius);
}
.callout h2.title { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.callout .eyebrow { color: var(--accent-warm); }
.callout .lede + .lede { margin-top: 1.2rem; }
.callout .cta-row { margin-top: 2rem; }

/* --- spec tables ---------------------------------------------------------- */

.specs {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.spec { background: var(--panel); padding: 2rem 1.8rem; }
.spec h3 {
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 1.2rem;
}
.spec dl { margin: 0; display: grid; gap: .7rem; }
.spec .row {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 1rem;
  font-size: .9rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--line);
}
.spec .row:last-child { border-bottom: 0; padding-bottom: 0; }
.spec dt {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-top: .2rem;
}
.spec dd { margin: 0; color: var(--text); }

.chips { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.chip {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--line);
  background: var(--panel);
  padding: .45rem .9rem;
  border-radius: 999px;
}

/* --- closing call to action ----------------------------------------------- */

.finale {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  padding-block: clamp(5rem, 12vw, 9rem);
}
.finale__bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; filter: saturate(.7); }
.finale::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--ink) 0%, color-mix(in srgb, var(--ink) 82%, transparent) 45%, var(--ink) 100%);
}
.finale h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 4rem);
  line-height: 1;
  margin: 0 0 1.2rem;
  text-transform: uppercase;
  text-shadow: 0 0 30px color-mix(in srgb, var(--accent) 30%, transparent);
}
.finale p { color: var(--text-dim); max-width: 46ch; margin: 0 auto 2.2rem; }

.store-widget {
  margin: 3rem auto 0;
  max-width: 646px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}
.store-widget iframe { display: block; width: 100%; height: 190px; border: 0; }

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

.site-foot {
  border-top: 1px solid var(--line);
  padding-block: 3rem;
  background: var(--ink);
}
.site-foot .shell {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
}
.site-foot p {
  margin: 0;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .1em;
  color: var(--text-faint);
}
.site-foot nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.site-foot nav a {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* --- scroll reveal --------------------------------------------------------
   Content is visible by default. Only once the inline head script has proved
   JS is alive do we hide it for the entrance animation, so a script failure
   can never leave the page blank. */

.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.2,.8,.3,1), transform .7s cubic-bezier(.2,.8,.3,1);
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .shot img, .btn, .feature::before { transition: none; }
}

/* --- store header ---------------------------------------------------------
   The Steam store arrangement: a media viewer beside a facts sidebar, so the
   trailer, the screenshots and the "what is this / who made it / can I run it"
   answers all sit above the fold instead of being separate scrolling sections.
   Shared, because every game site wants the same shape. */

.store { padding-block: calc(var(--head-h) + 2.2rem) clamp(2.5rem, 5vw, 4rem); }

.store__head { margin-bottom: 1.6rem; }
.store__head h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.8rem, 4.2vw, 3rem);
  line-height: 1.05;
  margin: .7rem 0 0;
  text-transform: uppercase;
  letter-spacing: .01em;
}

.store__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: clamp(1.2rem, 2.5vw, 2rem);
  align-items: start;
}
@media (max-width: 940px) { .store__grid { grid-template-columns: minmax(0, 1fr); } }

/* --- media viewer --------------------------------------------------------- */

.stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.stage > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.stage figure { margin: 0; }
.stage [hidden] { display: none !important; }

/* the player is a standalone block elsewhere; inside the stage it is the stage */
.stage .player {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.stage .player video { width: 100%; height: 100%; }

/* the still frames double as a link to the full-size image */
.stage__zoom { display: block; cursor: zoom-in; }

.thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.thumbs a {
  display: block;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) / 2);
  overflow: hidden;
  opacity: .62;
  transition: opacity .18s ease, border-color .18s ease, transform .18s ease;
}
.thumbs a:hover,
.thumbs a:focus-visible { opacity: 1; transform: translateY(-2px); }
.thumbs a[aria-current="true"] { opacity: 1; border-color: var(--accent); }
.thumbs img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.thumbs .is-video { position: relative; }
.thumbs .is-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 26px no-repeat;
}

/* --- facts sidebar -------------------------------------------------------- */

.store__side {
  display: grid;
  gap: 1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem;
}
.store__capsule {
  width: 100%;
  border-radius: calc(var(--radius) / 2);
  border: 1px solid var(--line);
}
.store__short { margin: 0; color: var(--text-dim); font-size: .93rem; }

.store__facts { margin: 0; display: grid; gap: .5rem; }
.store__facts .row {
  display: grid;
  grid-template-columns: 6.2rem 1fr;
  gap: .8rem;
  font-size: .86rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--line);
}
.store__facts .row:last-child { border-bottom: 0; padding-bottom: 0; }
.store__facts dt {
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-top: .18rem;
}
.store__facts dd { margin: 0; }
.store__facts a { color: var(--accent); }

.store__tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.store__tags .chip { font-size: .66rem; padding: .26rem .6rem; letter-spacing: .1em; }

.store__buy {
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) / 2);
  background: var(--ink-2);
  padding: 1rem;
  display: grid;
  gap: .7rem;
}
.store__buy .btn { justify-content: center; width: 100%; }
.store__buy p {
  margin: 0;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: center;
}

/* --- art-pending placeholder ----------------------------------------------
   For sites whose structure is finished but whose images have not been pulled
   yet. Deliberately obvious: these must not reach production unnoticed. */

.stage--pending,
.capsule--pending {
  display: grid;
  place-items: center;
  text-align: center;
  background: repeating-linear-gradient(
    45deg,
    var(--panel) 0 12px,
    var(--panel-2) 12px 24px);
  border: 1px dashed color-mix(in srgb, var(--accent-warm) 45%, transparent);
  color: var(--text-faint);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 1rem;
}
.stage--pending { aspect-ratio: 16 / 9; border-radius: var(--radius); }
.capsule--pending { aspect-ratio: 2 / 3; border-radius: calc(var(--radius) / 2); }
.stage--pending b,
.capsule--pending b { display: block; color: var(--accent-warm); margin-bottom: .4rem; }