/* =========================================================
   NeverPlayAlone · landing page styles
   cream paper · candy ink · playful gaming-native
   ========================================================= */

:root {
  --bg:      #f5f0e6;
  --paper:   #fffaf0;
  --elev:    #ebe5d6;
  --ink:     #0e0e10;
  --mute:    #6b6760;
  --orange:  #ff5c2b;
  --orange-d:#c43b14;
  --cyan:    #2bc7ff;
  --cyan-d:  #0e8ec0;
  --lime:    #b9e54a;
  --lime-d:  #7fa629;
  --line:    rgba(14,14,16,0.10);
  --line2:   rgba(14,14,16,0.22);
}

html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--ink); }
summary::-webkit-details-marker { display:none; }

/* ===== Grain & vignette (dark spots for light bg) ========== */
.grain {
  background-image:
    radial-gradient(rgba(14,14,16,0.16) 1px, transparent 1px),
    radial-gradient(rgba(14,14,16,0.10) 1px, transparent 1px);
  background-size: 3px 3px, 4px 4px;
  background-position: 0 0, 1px 2px;
  mix-blend-mode: multiply;
  opacity: .35;
}
.vignette {
  background:
    radial-gradient(120% 80% at 50% 0%, transparent 60%, rgba(14,14,16,0.10) 100%),
    radial-gradient(80% 60% at 50% 100%, transparent 60%, rgba(14,14,16,0.10) 100%);
}

/* ===== Reveal ============================================= */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--rd, 0ms);
}
.reveal.in { opacity: 1; transform: none; }

/* ===== Nav links ========================================== */
.nav-link {
  position: relative;
  transition: color .15s ease;
}
.nav-link:hover { color: var(--ink); }
.nav-link::after {
  content:"";
  position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s ease;
}
.nav-link:hover::after { transform: scaleX(1); }

/* ===== Brand mark — Minecraft grass block ================ */
.brand-mark {
  width: 20px; height: 20px;
  position: relative;
  display: inline-block;
  background:
    /* grass strip + dirt body */
    linear-gradient(to bottom,
      #6dbe3e 0 5px,
      #5a8f24 5px 7px,
      #8b5a2b 7px 100%);
  border: 1.5px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  border-radius: 2px;
  image-rendering: pixelated;
}
.brand-mark::after {
  content:"";
  position:absolute;
  inset: 8px 3px 3px 3px;
  background:
    radial-gradient(circle at 25% 30%, rgba(110,68,30,.9) 0 1.5px, transparent 1.5px),
    radial-gradient(circle at 70% 55%, rgba(110,68,30,.9) 0 1.5px, transparent 1.5px),
    radial-gradient(circle at 50% 80%, rgba(110,68,30,.9) 0 1.5px, transparent 1.5px);
}

/* Bigger grass-block mark for header + footer */
.brand-mark-lg {
  width: 32px; height: 32px;
  position: relative;
  display: inline-block;
  background:
    /* dirt body */
    linear-gradient(to bottom,
      #8b5a2b 0 100%);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  border-radius: 2px;
  flex-shrink: 0;
  image-rendering: pixelated;
  overflow: hidden;
}
.brand-mark-lg::before {
  /* grass top band with jagged pixel edge */
  content:"";
  position:absolute;
  left: 0; right: 0; top: 0;
  height: 10px;
  background:
    linear-gradient(to bottom,
      #6dbe3e 0 7px,
      #5a8f24 7px 9px,
      transparent 9px);
}
.brand-mark-lg::after {
  /* dirt pixel speckles */
  content:"";
  position:absolute;
  inset: 11px 2px 2px 2px;
  background:
    radial-gradient(circle at 22% 18%, #6e441e 0 2px, transparent 2px),
    radial-gradient(circle at 72% 38%, #6e441e 0 2px, transparent 2px),
    radial-gradient(circle at 35% 60%, #a47045 0 1.5px, transparent 1.5px),
    radial-gradient(circle at 80% 78%, #6e441e 0 2px, transparent 2px),
    radial-gradient(circle at 18% 85%, #a47045 0 1.5px, transparent 1.5px);
}

/* ===== Sticker tag (chip with hard shadow) ================ */
.sticker-tag {
  display: inline-flex; align-items: center;
  align-self: flex-start;
  width: fit-content;
  font-family: "Silkscreen", "DM Mono", monospace;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 10px 4px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  line-height: 1;
  transform: rotate(-1.5deg);
  transition: transform .15s ease, box-shadow .15s ease;
}
.sticker-tag:hover { transform: rotate(0) translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.tag-orange { background: var(--orange); color: var(--ink); }
.tag-cyan   { background: var(--cyan);   color: var(--ink); }
.tag-lime   { background: var(--lime);   color: var(--ink); }
.tag-ink    { background: var(--ink);    color: var(--bg); }

/* ===== Social icon buttons (header) ======================= */
.social-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  border-radius: 6px;
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  flex-shrink: 0;
}
.social-btn svg { width: 14px; height: 14px; display: block; }
.social-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--ink);
  background: var(--orange);
}
.social-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--ink);
}

/* ===== Buttons ============================================ */
.btn-orange,
.btn-orange-lg {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700;
  color: var(--ink);
  background: var(--orange);
  border: 1.5px solid var(--ink);
  padding: 10px 15px;
  border-radius: 6px;
  letter-spacing: .005em;
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  box-shadow: 3px 3px 0 var(--ink);
}
.btn-orange:hover,
.btn-orange-lg:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--ink);
  background: #ff6f44;
}
.btn-orange:active,
.btn-orange-lg:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}
.btn-orange-lg { padding: 14px 22px; font-size: 14px; }

.btn-cyan-lg {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; color: var(--ink);
  background: var(--cyan);
  border: 1.5px solid var(--ink);
  padding: 14px 22px;
  font-size: 14px;
  border-radius: 6px;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-cyan-lg:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); background: #4cd1ff; }
.btn-cyan-lg:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }

.btn-ghost,
.btn-ghost-lg {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--ink);
  padding: 10px 15px;
  border-radius: 6px;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-ghost:hover,
.btn-ghost-lg:hover {
  transform: translate(-1px,-1px);
  box-shadow: 4px 4px 0 var(--ink);
  background: #fff;
}
.btn-ghost:active,
.btn-ghost-lg:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
.btn-ghost-lg { padding: 14px 22px; font-size: 14px; }

.pixel-arrow {
  width: 12px; height: 12px;
  background:
    linear-gradient(var(--ink), var(--ink)) 4px 5px / 8px 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 6px 3px / 2px 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 6px 7px / 2px 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 8px 5px / 2px 2px no-repeat;
  image-rendering: pixelated;
}

/* ===== Section label ====================================== */
.section-label {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding-bottom: 16px;
  border-bottom: 1.5px dashed var(--line2);
}

/* ===== Hero atmospherics ================================== */
.bg-grid {
  background-image:
    linear-gradient(to right, rgba(14,14,16,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14,14,16,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 75%);
}
.bg-hero-glow {
  background:
    radial-gradient(60% 50% at 78% 35%, rgba(255,92,43,.18), transparent 70%),
    radial-gradient(40% 40% at 22% 55%, rgba(43,199,255,.16), transparent 70%),
    radial-gradient(30% 35% at 60% 75%, rgba(185,229,74,.14), transparent 70%);
}
.bg-constellation {
  background-image:
    radial-gradient(2px 2px at 10% 20%, rgba(14,14,16,.4) 50%, transparent 50%),
    radial-gradient(2px 2px at 80% 15%, rgba(14,14,16,.3) 50%, transparent 50%),
    radial-gradient(2px 2px at 65% 65%, rgba(255,92,43,.55) 50%, transparent 50%),
    radial-gradient(2px 2px at 30% 75%, rgba(43,199,255,.5) 50%, transparent 50%),
    radial-gradient(2px 2px at 50% 40%, rgba(14,14,16,.25) 50%, transparent 50%),
    radial-gradient(2px 2px at 90% 80%, rgba(185,229,74,.55) 50%, transparent 50%),
    radial-gradient(2px 2px at 15% 60%, rgba(255,92,43,.4) 50%, transparent 50%);
}
.bg-enter-glow {
  background:
    radial-gradient(45% 50% at 25% 50%, rgba(255,92,43,.16), transparent 70%),
    radial-gradient(45% 50% at 75% 50%, rgba(43,199,255,.16), transparent 70%);
}

/* ===== Dot pulse ========================================== */
.dot-pulse {
  width: 7px; height: 7px;
  background: var(--orange);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(255,92,43,.6);
  animation: pulse 1.8s infinite ease-out;
  flex-shrink: 0;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,92,43,.6); }
  70%  { box-shadow: 0 0 0 8px rgba(255,92,43,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,92,43,0);   }
}

/* ===== Specimen capsule (hero right) ====================== */
.specimen-card {
  position: relative;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  border-radius: 8px;
  padding: 18px;
  overflow: hidden;
  box-shadow: 6px 6px 0 var(--ink);
}
.specimen-card::before {
  content:"";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(14,14,16,.025) 0 1px,
    transparent 1px 3px
  );
  pointer-events: none;
}

.corner { position: absolute; width: 10px; height: 10px; border: 2px solid var(--orange); }
.corner.tl { top: 4px; left: 4px; border-right: 0; border-bottom: 0; }
.corner.tr { top: 4px; right: 4px; border-left: 0; border-bottom: 0; }
.corner.bl { bottom: 4px; left: 4px; border-right: 0; border-top: 0; }
.corner.br { bottom: 4px; right: 4px; border-left: 0; border-top: 0; }

.specimen-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 4px 14px;
  border-bottom: 1.5px dashed var(--line2);
  margin-bottom: 18px;
}
.rec-dot {
  width: 8px; height: 8px; background: var(--orange); border-radius: 50%;
  animation: blink 1.5s infinite ease-in-out;
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* ===== Character stage (replaces dome) ==================== */
.stage-wrap {
  position: relative;
  height: 340px;
  overflow: hidden;
  border-radius: 6px;
  background:
    linear-gradient(to bottom,
      #bfe4ff 0%,
      #bfe4ff 55%,
      #b9e54a 55%,
      #7fa629 100%);
  border-bottom: 1.5px solid var(--ink);
  margin-bottom: 18px;
  display: flex; align-items: flex-end; justify-content: center;
}
.stage-floor {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 40%;
  background:
    /* dirt strip */
    linear-gradient(to bottom, transparent 0%, transparent 10%, #8b5a2b 10%, #8b5a2b 30%, #6b4520 30%, #6b4520 100%);
}
.stage-floor::before {
  /* grass-top pixel band */
  content:"";
  position: absolute;
  left: 0; right: 0; top: 8%;
  height: 6px;
  background: repeating-linear-gradient(to right,
    var(--limed) 0 6px,
    #6f9421 6px 12px);
}
.stage-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(14,14,16,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14,14,16,.04) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}
.stage-sun {
  position: absolute;
  top: 12%; right: 14%;
  width: 36px; height: 36px;
  background: #ffd84a;
  border: 1.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink), 0 0 24px rgba(255,216,74,.45);
}
.stage-sun::after {
  content:"";
  position: absolute; inset: 6px;
  background: #ffe96c;
}

/* hero-size character */
.mc-char {
  position: relative;
  width: 220px;
  height: 330px;
  z-index: 4;
  margin-bottom: -4px;
  filter: drop-shadow(2px 3px 0 rgba(14,14,16,.6));
}

/* === Bigger hero stage with full scene === */
.stage-big {
  height: 340px;
  background:
    /* golden-hour sky with peach + soft pink, lush grass band */
    radial-gradient(circle at 78% 12%, rgba(255, 220, 130, .55), transparent 55%),
    radial-gradient(circle at 18% 22%, rgba(255, 150, 200, .35), transparent 55%),
    linear-gradient(to bottom,
      #ffb585 0%,
      #ffd089 14%,
      #ffe8b8 28%,
      #c9e0ff 45%,
      #b6d8ff 55%,
      #82d65a 58%,
      #4f9a2a 100%);
}
.stage-big .stage-floor {
  height: 42%;
  background:
    linear-gradient(to bottom,
      transparent 0%, transparent 4%,
      #8b5a2b 4%, #8b5a2b 22%,
      #6b4520 22%, #6b4520 100%);
}
.stage-big .stage-floor::before {
  top: 2%;
  height: 8px;
  background: repeating-linear-gradient(to right,
    #6dbe3e 0 8px,
    #4f9a2a 8px 16px);
  box-shadow: 0 4px 0 #5a8f24;
}

/* sky clouds (pixel-art rectangles drifting) */
.sky-clouds {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.cloud {
  position: absolute;
  background: #fffaf0;
  border: 1.5px solid var(--ink);
  box-shadow: 2px 2px 0 rgba(14,14,16,.18);
  border-radius: 2px;
}
.cloud::before, .cloud::after {
  content:"";
  position: absolute;
  background: #fffaf0;
  border: 1.5px solid var(--ink);
}
.cloud::before {
  width: 40%; height: 80%;
  top: -30%; left: 15%;
  border-bottom: 0;
}
.cloud::after {
  width: 30%; height: 70%;
  top: -25%; right: 12%;
  border-bottom: 0;
}
.cloud-a { width: 70px; height: 18px; top: 10%;  animation: cloud-drift 28s linear infinite; }
.cloud-b { width: 96px; height: 22px; top: 22%;  animation: cloud-drift 44s linear infinite -10s; }
.cloud-c { width: 50px; height: 14px; top: 6%;   animation: cloud-drift 36s linear infinite -22s; }
@keyframes cloud-drift {
  from { transform: translateX(-120px); }
  to   { transform: translateX(520px); }
}

/* sun with subtle pulsing glow + rays */
.stage-big .stage-sun {
  position: absolute;
  top: 8%; right: 12%;
  width: 44px; height: 44px;
  background: #ffd84a;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  z-index: 1;
}
.stage-big .stage-sun::before {
  /* inner highlight */
  content:""; position: absolute; inset: 6px;
  background: #ffec78;
  border-bottom: 2px solid #e0b820;
  border-right: 2px solid #e0b820;
}
.sun-glow {
  position: absolute;
  inset: -22px;
  background: radial-gradient(circle, rgba(255,216,74,.55), transparent 65%);
  border: none;
  animation: sun-pulse 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sun-pulse {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: .85; transform: scale(1.12); }
}

/* tree silhouettes on horizon */
.trees {
  position: absolute;
  left: -10%; right: -10%;
  bottom: 38%;
  width: 120%; height: 80px;
  opacity: .9;
  z-index: 2;
}

/* foreground decoration blocks */
.fg-block {
  position: absolute;
  width: 38px; height: 38px;
  border: 1.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  z-index: 3;
}
.fg-grass {
  bottom: 14px; left: 8%;
  background:
    linear-gradient(to bottom,
      #6dbe3e 0%, #6dbe3e 30%,
      #8b5a2b 30%, #8b5a2b 100%);
}
.fg-grass::before {
  content:""; position: absolute;
  left: 0; right: 0; top: 30%;
  height: 3px;
  background: #4f9a2a;
}
.fg-stone {
  bottom: 22px; right: 7%;
  width: 32px; height: 32px;
  background: #888b94;
}
.fg-stone::before {
  content:""; position: absolute; inset: 4px;
  background:
    radial-gradient(circle at 30% 35%, #6a6e78 0 3px, transparent 3px),
    radial-gradient(circle at 70% 60%, #b0b4bd 0 2px, transparent 2px),
    radial-gradient(circle at 50% 80%, #6a6e78 0 2px, transparent 2px);
}

/* speech bubble (talking) */
.speech-bubble {
  position: absolute;
  top: 14%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  padding: 6px 14px 7px;
  box-shadow: 3px 3px 0 var(--ink);
  display: flex; align-items: baseline; gap: 8px;
  white-space: nowrap;
  opacity: 0;
  animation: sb-cycle 6.5s ease-in-out infinite;
  z-index: 5;
  pointer-events: none;
}
.sb-name {
  font-family: "Silkscreen", monospace;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orange);
}
.sb-text {
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
}
.sb-tail {
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px; height: 10px;
  background: var(--paper);
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
}
@keyframes sb-cycle {
  0%, 100% { opacity: 0; transform: translateX(-50%) translateY(8px); }
  6%, 70%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  80%, 99% { opacity: 0; transform: translateX(-50%) translateY(-4px); }
}

/* small character (in cards) */
.mc-char-sm {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  width: 90px;
  height: 135px;
  z-index: 2;
  filter: drop-shadow(1.5px 1.5px 0 var(--ink));
}

/* Whole-body walk bob (twice per cycle = each step lifts) */
.mc-char, .mc-char-sm { animation: char-bob 1.2s ease-in-out infinite; }
@keyframes char-bob {
  0%, 100% { translate: 0 0; }
  25%      { translate: 0 -3px; }
  50%      { translate: 0 0; }
  75%      { translate: 0 -3px; }
}

/* Animated parts — proper opposite-side walking gait */
.char-head    { transform-origin: 32px 28px; animation: char-head 1.2s ease-in-out infinite; }
.char-arm-l   { transform-origin: 18px 46px; animation: char-arm-l 1.2s ease-in-out infinite; }
.char-arm-r   { transform-origin: 46px 46px; animation: char-arm-r 1.2s ease-in-out infinite; }
.char-leg-l   { transform-origin: 26px 72px; animation: char-leg-l 1.2s ease-in-out infinite; }
.char-leg-r   { transform-origin: 38px 72px; animation: char-leg-r 1.2s ease-in-out infinite; }
.char-shadow  { transform-origin: 32px 95px; animation: char-shadow 1.2s ease-in-out infinite; }
.char-eye     { animation: char-blink 4.6s infinite; transform-box: fill-box; transform-origin: center; }

/* head sways subtly with bob */
@keyframes char-head {
  0%, 100% { transform: rotate(-1.5deg) translateY(0); }
  25%      { transform: rotate(0)        translateY(-1px); }
  50%      { transform: rotate(1.5deg)   translateY(0); }
  75%      { transform: rotate(0)        translateY(-1px); }
}
/* left arm in-phase with RIGHT leg (opposite-side gait) */
@keyframes char-arm-l {
  0%, 100% { transform: rotate(12deg); }
  50%      { transform: rotate(-12deg); }
}
/* right arm in-phase with LEFT leg */
@keyframes char-arm-r {
  0%, 100% { transform: rotate(-12deg); }
  50%      { transform: rotate(12deg); }
}
@keyframes char-leg-l {
  0%, 100% { transform: rotate(-12deg); }
  50%      { transform: rotate(12deg); }
}
@keyframes char-leg-r {
  0%, 100% { transform: rotate(12deg); }
  50%      { transform: rotate(-12deg); }
}
@keyframes char-shadow {
  0%, 100% { transform: scaleX(1);   opacity: .22; }
  25%      { transform: scaleX(.78); opacity: .14; }
  50%      { transform: scaleX(1);   opacity: .22; }
  75%      { transform: scaleX(.78); opacity: .14; }
}
@keyframes char-blink {
  0%, 92%, 96%, 100% { transform: scaleY(1); }
  93%, 95%           { transform: scaleY(.1); }
}

/* talking mouth: closed/open swap */
.char-mouth .mouth-closed { animation: mouth-c .5s steps(2) infinite; }
.char-mouth .mouth-open   { animation: mouth-o .5s steps(2) infinite; opacity: 0; }
@keyframes mouth-c { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes mouth-o { 0% { opacity: 0; } 50% { opacity: 1; } }

/* Card stages (smaller, color-themed by archetype) */
.card-stage {
  position: relative;
  height: 230px;
  overflow: hidden;
  border-radius: 4px;
  background:
    linear-gradient(to bottom,
      #bfe4ff 0%, #bfe4ff 60%,
      #b9e54a 60%, #7fa629 100%);
  border: 1.5px solid var(--ink);
  margin-bottom: 18px;
}
.cs-floor {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 36%;
  background: linear-gradient(to bottom, #8b5a2b 0%, #8b5a2b 60%, #6b4520 60%, #6b4520 100%);
}
.cs-floor::before {
  content:"";
  position: absolute;
  left: 0; right: 0; top: -4px;
  height: 5px;
  background: repeating-linear-gradient(to right,
    var(--limed) 0 5px,
    #6f9421 5px 10px);
}
.cs-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(14,14,16,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14,14,16,.04) 1px, transparent 1px);
  background-size: 18px 18px;
  pointer-events: none;
}

/* per-archetype tints */
.stage-ashe  { background:
  linear-gradient(to bottom, #d4f0ff 0%, #d4f0ff 60%, #7fa629 60%, #5a7c1a 100%); }
.stage-oracle { background:
  linear-gradient(to bottom, #e3edd0 0%, #e3edd0 60%, #6b8a25 60%, #4a6118 100%); }
.stage-wren  { background:
  linear-gradient(to bottom, #efc9aa 0%, #efc9aa 60%, #8b5a2b 60%, #5a3a1a 100%); }
.stage-wren .cs-floor { background: linear-gradient(to bottom, #5a3a1a 0%, #5a3a1a 60%, #3a2510 60%, #3a2510 100%); }
.stage-wren .cs-floor::before { background: repeating-linear-gradient(to right, #4a3018 0 5px, #2a1808 5px 10px); }
.stage-oracle .cs-floor { background: linear-gradient(to bottom, #6b8a25 0%, #6b8a25 60%, #4a6118 60%, #4a6118 100%); }
.stage-oracle .cs-floor::before { background: repeating-linear-gradient(to right, #5a7c1a 0 5px, #3a5010 5px 10px); }
.stage-ashe .cs-floor { background: linear-gradient(to bottom, #7fa629 0%, #7fa629 60%, #5a7c1a 60%, #5a7c1a 100%); }

/* Tool needs to swing with the arm — already inside char-arm-r */

/* OLD dome wrapper (still referenced elsewhere — keep as legacy) */
.dome-wrap {
  position: relative;
  height: 340px;
  background:
    radial-gradient(ellipse at 50% 80%, rgba(255,92,43,.14), transparent 65%),
    repeating-linear-gradient(45deg, rgba(14,14,16,0.025) 0 8px, transparent 8px 16px);
  border-bottom: 1.5px dashed var(--line2);
  margin-bottom: 18px;
  border-radius: 4px;
}
.dome {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.dome::before {
  content:"";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -55%);
  width: 230px; height: 230px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 30% 25%, rgba(255,255,255,.55), transparent 50%),
    radial-gradient(ellipse at 70% 75%, rgba(255,92,43,.06), transparent 60%);
  box-shadow:
    inset 0 0 30px rgba(255,92,43,.08),
    4px 4px 0 var(--ink);
  clip-path: inset(0 0 35px 0);
}
.dome::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -55%) rotate(-12deg);
  width: 80px; height: 200px;
  border-radius: 50%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,.6), transparent);
  filter: blur(2px);
  pointer-events: none;
}
.dome-floor {
  position: absolute;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  width: 240px; height: 4px;
  background: var(--ink);
  border-radius: 2px;
}
.dome-glow {
  position: absolute;
  bottom: 34px; left: 50%;
  transform: translateX(-50%);
  width: 160px; height: 40px;
  background: radial-gradient(ellipse at center, rgba(255,92,43,.45), transparent 70%);
  filter: blur(7px);
}

.sprite-character {
  position: relative;
  margin-bottom: 64px;
  animation: float 4s ease-in-out infinite;
  filter: drop-shadow(0 6px 0 rgba(14,14,16,.12));
}
@keyframes float {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(-10px) rotate(2deg); }
}
.dome-ore {
  position: relative;
  width: 110px; height: 110px;
  display: block;
}

.particle {
  position: absolute;
  width: 4px; height: 4px;
  background: var(--orange);
  border-radius: 1px;
  opacity: .9;
  box-shadow: 1px 1px 0 var(--ink);
}
.particle.p1 { left: 30%; top: 60%; animation: rise 5.4s linear infinite; }
.particle.p2 { left: 62%; top: 70%; animation: rise 6.2s linear .8s infinite; background: var(--cyan); }
.particle.p3 { left: 45%; top: 78%; animation: rise 4.8s linear 1.6s infinite; background: var(--lime); }
.particle.p4 { left: 68%; top: 50%; animation: rise 7.0s linear 2.2s infinite; }
.particle.p5 { left: 24%; top: 68%; animation: rise 5.8s linear 3.0s infinite; background: var(--cyan); }
@keyframes rise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: .95; }
  90%  { opacity: .7; }
  100% { transform: translateY(-180px) translateX(8px); opacity: 0; }
}

.dome-base {
  position: absolute;
  bottom: 8px; left: 50%;
  transform: translateX(-50%);
  width: 170px; height: 22px;
  background: linear-gradient(180deg, #2a2a32, #0e0e10);
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  box-shadow: 3px 3px 0 var(--ink);
}
.dome-base-stripes {
  position: absolute; inset: 4px 10px;
  background: repeating-linear-gradient(90deg, rgba(255,250,240,.35) 0 2px, transparent 2px 6px);
}

/* spec sheet */
.spec-sheet {
  font-family: "DM Mono", monospace;
  font-size: 11.5px;
  color: var(--ink)/.7;
  padding: 0 4px 4px;
}
.spec-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 0;
  border-top: 1px dashed var(--line2);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--mute);
}
.spec-row:first-child { border-top: 0; }

.wave {
  display: inline-flex; gap: 2px; height: 12px; align-items: end;
}
.wave span {
  display: inline-block; width: 2px; background: var(--orange);
  animation: wave 1s ease-in-out infinite;
}
.wave span:nth-child(1) { height: 30%; }
.wave span:nth-child(2) { height: 70%; animation-delay: 80ms; }
.wave span:nth-child(3) { height: 100%; animation-delay: 160ms; }
.wave span:nth-child(4) { height: 60%; animation-delay: 240ms; }
.wave span:nth-child(5) { height: 40%; animation-delay: 320ms; }
@keyframes wave { 0%,100% { transform: scaleY(.5); } 50% { transform: scaleY(1.1); } }

/* ===== Ticker ============================================== */
.ticker { position: relative; }
.ticker::before, .ticker::after {
  content:""; position: absolute; top:0; bottom:0; width: 80px; z-index: 2; pointer-events: none;
}
.ticker::before { left:0;  background: linear-gradient(to right, var(--elev), transparent); }
.ticker::after  { right:0; background: linear-gradient(to left,  var(--elev), transparent); }
.ticker-track {
  display: flex; gap: 56px;
  width: max-content;
  animation: scroll-x 60s linear infinite;
}
.ticker-item { white-space: nowrap; color: var(--ink); }
.ticker-item.orange { color: var(--orange-d); }
.ticker-item.cyan   { color: var(--cyan-d); }
.ticker-item.lime   { color: var(--lime-d); }
@keyframes scroll-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ===== Floating buddy (manifesto) ========================= */
.float-buddy {
  position: absolute;
  right: 5%; top: 70px;
  width: 80px; height: 100px;
  pointer-events: none;
  display: none;
}
@media (min-width: 1024px) { .float-buddy { display: block; } }
.fb-ore {
  width: 56px; height: 56px;
  position: relative;
  background: linear-gradient(135deg, #ff8a5c, #ff5c2b 60%, #c43b14);
  box-shadow:
    inset -3px -3px 0 rgba(14,14,16,.45),
    inset  3px  3px 0 rgba(255,255,255,.35),
    3px 3px 0 var(--ink);
  margin: 0 auto;
  animation: bob 3s ease-in-out infinite;
}
.fb-ore::before, .fb-ore::after {
  /* eyes */
  content:"";
  position: absolute;
  width: 6px; height: 8px;
  background: var(--ink);
  top: 22px;
}
.fb-ore::before { left: 14px; }
.fb-ore::after  { left: 32px; }
.fb-eye { position: absolute; width: 2px; height: 2px; background: #fff; top: 24px; z-index: 2; }
.fb-eye.e1 { left: 16px; }
.fb-eye.e2 { left: 34px; }
.fb-shadow {
  width: 50px; height: 6px; margin: 12px auto 0;
  background: var(--ink);
  border-radius: 50%;
  opacity: .15;
  animation: shadow 3s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
@keyframes shadow { 0%,100% { transform: scaleX(1); opacity: .15; } 50% { transform: scaleX(.75); opacity: .1; } }

/* ===== Dropcap ============================================ */
.dropcap {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 62px;
  line-height: .9;
  float: left;
  padding: 6px 12px 0 0;
  color: var(--orange);
  font-style: italic;
  text-shadow: 3px 3px 0 var(--ink);
}

/* ===== Pillars =========================================== */
.pillar {
  background: var(--paper);
  padding: 36px 32px 32px;
  position: relative;
  min-height: 480px;
  transition: background .25s ease, transform .25s ease;
}
.pillar:hover { background: #fff; }
.pillar:nth-child(1):hover { background: rgba(255,92,43,.06); }
.pillar:nth-child(2):hover { background: rgba(43,199,255,.06); }
.pillar:nth-child(3):hover { background: rgba(185,229,74,.10); }

.pillar-num {
  font-family: "Silkscreen", monospace;
  font-weight: 700;
  font-size: 12px;
  color: var(--ink);
  background: var(--lime);
  border: 1.5px solid var(--ink);
  padding: 4px 8px 3px;
  border-radius: 4px;
  display: inline-block;
  letter-spacing: .12em;
  margin-bottom: 24px;
  box-shadow: 2px 2px 0 var(--ink);
}
.pillar:nth-child(1) .pillar-num { background: var(--orange); }
.pillar:nth-child(2) .pillar-num { background: var(--cyan); }
.pillar:nth-child(3) .pillar-num { background: var(--lime); }

.pillar-glyph {
  height: 110px;
  display: flex; align-items: center; justify-content: flex-start;
  margin-bottom: 28px;
}

/* voxel stack (players) */
.voxel-stack {
  width: 90px; height: 90px;
  position: relative;
}
.voxel-stack::before, .voxel-stack::after {
  content:"";
  position: absolute;
  width: 38px; height: 38px;
  background: linear-gradient(135deg, #ff8a5c, #ff5c2b);
  border: 1.5px solid var(--ink);
  box-shadow:
    inset -3px -3px 0 rgba(14,14,16,.30),
    inset  3px  3px 0 rgba(255,255,255,.25),
    3px 3px 0 var(--ink);
}
.voxel-stack::before { left: 0;   top: 36px; transform: rotate(45deg) scale(.85); }
.voxel-stack::after  { left: 28px; top: 6px; transform: rotate(45deg) scale(.85); }
.pillar:hover .voxel-stack::before { animation: bob2 2s ease-in-out infinite; }
.pillar:hover .voxel-stack::after  { animation: bob2 2s ease-in-out .3s infinite; }
@keyframes bob2 { 0%,100% { translate: 0 0; } 50% { translate: 0 -5px; } }

/* voxel pyramid (makers) */
.voxel-pyramid {
  width: 90px; height: 90px;
  position: relative;
}
.voxel-pyramid::before {
  content: "";
  position: absolute;
  width: 0; height: 0;
  border-left: 36px solid transparent;
  border-right: 36px solid transparent;
  border-bottom: 56px solid var(--cyan);
  left: 6px; top: 14px;
  filter: drop-shadow(3px 3px 0 var(--ink));
}
.voxel-pyramid::after {
  content: "";
  position: absolute;
  width: 0; height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-bottom: 28px solid var(--cyan-d);
  left: 24px; top: 42px;
}

/* voxel ring (world) */
.voxel-ring {
  width: 86px; height: 86px;
  border: 4px solid var(--ink);
  border-radius: 50%;
  position: relative;
  margin: 6px;
  background: var(--lime);
  box-shadow: 3px 3px 0 var(--ink);
}
.voxel-ring::before {
  content:"";
  position: absolute; inset: 12px;
  border: 1.5px dashed var(--ink);
  border-radius: 50%;
  animation: spin 16s linear infinite;
}
.voxel-ring::after {
  content:"";
  position: absolute;
  width: 12px; height: 12px;
  background: var(--orange);
  border: 1.5px solid var(--ink);
  top: -7px; left: 50%;
  margin-left: -6px;
  border-radius: 2px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.pillar-title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 32px;
  letter-spacing: -.025em;
  margin-bottom: 14px;
}
.pillar-body {
  color: var(--ink);
  opacity: .8;
  line-height: 1.6;
  font-size: 14.5px;
  max-width: 36ch;
  margin-bottom: 24px;
}
.pillar-body em {
  color: var(--ink);
  font-style: italic;
  font-weight: 600;
}
.pillar-list {
  font-family: "DM Mono", monospace;
  font-size: 11.5px;
  color: var(--mute);
  border-top: 1.5px dashed var(--line2);
  padding-top: 16px;
}
.pillar-list li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 6px 0;
}
.pillar-list .t { text-transform: uppercase; letter-spacing: .12em; }
.pillar-list .v { color: var(--ink); font-weight: 500; }

/* ===== Diagram ============================================ */
.diagram {
  position: relative;
  aspect-ratio: 3 / 2;
  border: 1.5px solid var(--ink);
  background:
    radial-gradient(ellipse at center, rgba(255,92,43,.07), transparent 60%),
    repeating-linear-gradient(to right, transparent 0 39px, rgba(14,14,16,0.06) 39px 40px),
    repeating-linear-gradient(to bottom, transparent 0 39px, rgba(14,14,16,0.06) 39px 40px);
  background-size: auto, 40px 40px, 40px 40px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 4px 4px 0 var(--ink);
}
.diagram-svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.node {
  position: absolute;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  z-index: 2;
  transform: translate(-50%, -50%);
}
.node-dot {
  width: 14px; height: 14px;
  background: var(--ink);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--ink);
}
.node-label {
  font-family: "Silkscreen", monospace;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--ink);
}
.n-players { top: 50%; left: 15%; }
.n-makers  { top: 18%; left: 50%; }
.n-world   { top: 50%; left: 85%; }
.n-makers .node-dot { background: var(--cyan); }
.n-players .node-dot { background: var(--orange); }
.n-world .node-dot   { background: var(--lime); }
.n-core { top: 50%; left: 50%; }
.node-core-ring {
  width: 60px; height: 60px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  position: relative;
  display: block;
  background: var(--paper);
  box-shadow: 3px 3px 0 var(--ink);
}
.node-core-ring::before {
  content:"";
  position: absolute; inset: 10px;
  background: linear-gradient(135deg, #ff8a5c, var(--orange));
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  animation: corepulse 2.2s ease-in-out infinite;
}
.node-core-label {
  font-family: "Bricolage Grotesque", sans-serif;
  font-style: italic;
  font-weight: 700;
  color: var(--ink);
  font-size: 15px;
  margin-top: 8px;
}
@keyframes corepulse { 0%,100% { transform: scale(1); } 50% { transform: scale(.85); } }

/* ===== Spec (sprite archetype) cards ====================== */
.spec-card {
  background: var(--paper);
  padding: 28px 24px;
  position: relative;
  transition: background .25s ease, transform .25s ease;
}
.spec-card:hover { background: #fff; transform: translateY(-2px); }

.spec-card-head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: "Silkscreen", monospace;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 18px;
}
.spec-card-num { color: var(--mute); }

.spec-card-art {
  height: 230px;
  position: relative;
  border: 1.5px solid var(--ink);
  margin-bottom: 18px;
  overflow: hidden;
  border-radius: 4px;
  background:
    radial-gradient(ellipse at center, rgba(14,14,16,.04), transparent 70%),
    repeating-linear-gradient(45deg, rgba(14,14,16,0.025) 0 6px, transparent 6px 12px);
}

.art-block {
  position: absolute;
  width: 20px; height: 20px;
  background: var(--orange);
  border: 1.5px solid var(--ink);
  box-shadow:
    inset -2px -2px 0 rgba(14,14,16,.30),
    inset 2px 2px 0 rgba(255,255,255,.25),
    2px 2px 0 var(--ink);
  transform: rotate(45deg);
}

/* Vox — architect builds */
.art-vox { background:
  radial-gradient(ellipse at 50% 100%, rgba(255,92,43,.10), transparent 60%),
  repeating-linear-gradient(45deg, rgba(14,14,16,0.025) 0 6px, transparent 6px 12px);
}
.art-vox .b1 { left: 26%; bottom: 14px; }
.art-vox .b2 { left: 26%; bottom: 34px; }
.art-vox .b3 { left: 26%; bottom: 54px; background: #ff8a5c; }
.art-vox .b4 { left: 48%; bottom: 14px; }
.art-vox .b5 { left: 48%; bottom: 34px; background: #ff8a5c; }
.art-vox .b6 { left: 70%; bottom: 14px; background: var(--cyan); }

/* Ashe — explorer trail */
.art-ashe { background:
  radial-gradient(circle at 70% 30%, rgba(43,199,255,.15), transparent 50%),
  repeating-linear-gradient(45deg, rgba(14,14,16,0.025) 0 6px, transparent 6px 12px);
}
.art-ashe .art-block { background: var(--cyan); }
.art-ashe .b1 { left: 18%; bottom: 14px; }
.art-ashe .b2 { left: 44%; bottom: 14px; }
.art-ashe .b3 { left: 70%; bottom: 14px; background: var(--cyan-d); }
.ashe-trail {
  position: absolute;
  left: 10%; right: 10%; top: 42px;
  height: 2px;
  background: repeating-linear-gradient(to right, var(--cyan-d) 0 5px, transparent 5px 11px);
}

/* Oracle — eye + rings */
.art-oracle { background:
  radial-gradient(circle at 50% 50%, rgba(185,229,74,.18), transparent 60%),
  repeating-linear-gradient(45deg, rgba(14,14,16,0.025) 0 6px, transparent 6px 12px);
}
.oracle-eye {
  position: absolute;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 3px 3px 0 var(--ink);
  z-index: 2;
}
.oracle-eye::after {
  content:"";
  position: absolute;
  width: 12px; height: 12px;
  background: var(--ink);
  border-radius: 50%;
  top: 7px; left: 7px;
}
.oracle-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
.oracle-ring.r1 { width: 84px; height: 84px; animation: spin 12s linear infinite; }
.oracle-ring.r1::before {
  content:""; position: absolute; width: 8px; height: 8px;
  background: var(--orange); border: 1.5px solid var(--ink); border-radius: 2px;
  top: -5px; left: 50%; margin-left: -4px;
}
.oracle-ring.r2 { width: 118px; height: 118px; animation: spin 24s linear reverse infinite; border-style: dashed; }
.oracle-ring.r2::before {
  content:""; position: absolute; width: 6px; height: 6px;
  background: var(--lime); border: 1.5px solid var(--ink); border-radius: 2px;
  bottom: -4px; left: 50%; margin-left: -3px;
}

/* Wren — sword */
.art-wren { background:
  linear-gradient(180deg, rgba(255,92,43,.06), transparent 60%),
  repeating-linear-gradient(45deg, rgba(14,14,16,0.025) 0 6px, transparent 6px 12px);
}
.art-wren .b1 { left: 32%; bottom: 14px; }
.art-wren .b2 { left: 56%; bottom: 14px; }
.wren-blade {
  position: absolute;
  left: 50%; top: 16px;
  width: 8px; height: 86px;
  background: linear-gradient(to bottom, #fff, var(--mute));
  border: 1.5px solid var(--ink);
  transform: translateX(-50%);
  clip-path: polygon(0 6%, 100% 0%, 100% 94%, 0 100%);
}
.wren-blade::after {
  content:"";
  position: absolute; bottom: -7px; left: -6px;
  width: 20px; height: 6px;
  background: var(--orange);
  border: 1.5px solid var(--ink);
}

.spec-card-name {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -.025em;
  margin-bottom: 8px;
}
.spec-card-desc {
  color: var(--ink);
  opacity: .75;
  font-size: 13.5px;
  line-height: 1.55;
  min-height: 64px;
  margin-bottom: 18px;
}
.spec-card-stats {
  border-top: 1.5px dashed var(--line2);
  padding-top: 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.bar {
  height: 8px;
  background: var(--bg);
  border: 1.5px solid var(--ink);
  position: relative;
  border-radius: 2px;
}
.bar span {
  position: absolute; inset: 0;
  width: calc(var(--p) - 4px);
  background: var(--ink);
}
.bar span.orange { background: var(--orange); }
.bar span.cyan   { background: var(--cyan); }
.bar span.lime   { background: var(--lime); }
.stats-legend {
  display: flex; justify-content: space-between;
  font-family: "Silkscreen", monospace;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--mute);
  margin-top: 8px;
}

/* ===== Timeline =========================================== */
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline > li {
  position: relative;
  padding: 28px 0 32px 44px;
  border-top: 1.5px dashed var(--line2);
}
.timeline > li:last-child { border-bottom: 1.5px dashed var(--line2); }
.timeline > li::before {
  content:"";
  position: absolute;
  left: 0; top: 38px;
  width: 14px; height: 14px;
  background: var(--orange);
  border: 1.5px solid var(--ink);
  transform: rotate(45deg);
  box-shadow:
    inset -2px -2px 0 rgba(14,14,16,.3),
    inset 2px 2px 0 rgba(255,255,255,.25),
    2px 2px 0 var(--ink);
}
.timeline > li:nth-child(2)::before { background: var(--cyan); }
.timeline > li:nth-child(3)::before { background: var(--lime); }
.timeline > li:nth-child(4)::before { background: var(--ink); }

.t-date {
  font-family: "Silkscreen", monospace;
  font-size: 11px;
  color: var(--mute);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.t-title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -.025em;
  margin-bottom: 10px;
}
.t-body {
  color: var(--ink);
  opacity: .8;
  line-height: 1.6;
  font-size: 14.5px;
  max-width: 44ch;
}

/* ===== Doors ============================================== */
.door {
  background: var(--paper);
  padding: 56px 44px 48px;
  position: relative;
  min-height: 540px;
  display: flex; flex-direction: column;
  transition: background .3s ease;
}
.door:hover { background: #fff; }
.door-player {
  background: radial-gradient(ellipse at 80% 0%, rgba(255,92,43,.08), transparent 50%), var(--paper);
}
.door-maker {
  background: radial-gradient(ellipse at 20% 100%, rgba(43,199,255,.10), transparent 50%), var(--paper);
}

.door-title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 44px;
  line-height: 1.0;
  letter-spacing: -.03em;
  margin-bottom: 22px;
}
@media (min-width: 1024px) { .door-title { font-size: 56px; } }

.door-body {
  color: var(--ink);
  opacity: .8;
  line-height: 1.6;
  font-size: 15.5px;
  max-width: 42ch;
  margin-bottom: 28px;
}

.door-list {
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 36px;
  display: flex; flex-direction: column; gap: 12px;
}
.door-list li { display: flex; align-items: center; gap: 12px; }
.check {
  width: 16px; height: 16px;
  background: var(--orange);
  border: 1.5px solid var(--ink);
  display: inline-block;
  position: relative;
  flex-shrink: 0;
  border-radius: 2px;
  box-shadow: 1.5px 1.5px 0 var(--ink);
}
.check.cyan { background: var(--cyan); }
.check::after {
  content:"";
  position: absolute; inset: 2px;
  background:
    linear-gradient(45deg, transparent 38%, var(--ink) 38% 52%, transparent 52%),
    linear-gradient(-45deg, transparent 38%, var(--ink) 38% 52%, transparent 52%);
  background-position: 0 1px, 0 -1px;
  background-size: 100% 50%;
  background-repeat: no-repeat;
}
.door-cta { margin-top: auto; align-self: flex-start; }

/* ===== FAQ ================================================ */
.faq-list { display: flex; flex-direction: column; }
.faq-item {
  border-top: 1.5px dashed var(--line2);
  padding: 22px 0;
}
.faq-item:last-child { border-bottom: 1.5px dashed var(--line2); }
.faq-item > summary {
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer;
  list-style: none;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -.02em;
  color: var(--ink);
}
.faq-item > summary:hover { color: var(--orange); }
.faq-icon { width: 18px; height: 18px; position: relative; flex-shrink: 0; margin-left: 18px; }
.faq-icon::before, .faq-icon::after {
  content:""; position: absolute; background: var(--ink); transition: transform .25s ease;
}
.faq-icon::before { left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); }
.faq-icon::after  { top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); }
.faq-item[open] .faq-icon::after { transform: translateX(-50%) scaleY(0); }
.faq-body {
  margin-top: 12px;
  color: var(--ink);
  opacity: .78;
  font-size: 15px;
  line-height: 1.65;
  max-width: 62ch;
}

/* ===== Footer ============================================ */
.footer-h {
  font-family: "Silkscreen", monospace;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--ink);
  background: var(--lime);
  border: 1.5px solid var(--ink);
  display: inline-block;
  padding: 4px 8px 3px;
  border-radius: 4px;
  margin-bottom: 16px;
  box-shadow: 2px 2px 0 var(--ink);
}
.footer-list { display: flex; flex-direction: column; gap: 8px; color: var(--ink); opacity: .8; }
.footer-list a:hover { color: var(--orange); opacity: 1; }

.wordmark {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-style: italic;
  color: var(--ink);
  font-size: clamp(72px, 14vw, 220px);
  letter-spacing: -.06em;
  line-height: .85;
  font-variation-settings: "wdth" 88;
  background: linear-gradient(180deg, var(--ink) 30%, rgba(14,14,16,0) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.wm-row {
  display: flex;
  flex-wrap: nowrap;
  gap: .02em;
  white-space: nowrap;
}
.wm-row-2 { padding-left: clamp(40px, 6vw, 120px); }
.wm-sp { width: .3em; }
.wordmark span {
  display: inline-block;
  transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.wordmark span:hover { transform: translateY(-14px) rotate(-4deg); color: var(--orange); }
.wordmark span:nth-child(2n):hover { transform: translateY(-14px) rotate(3deg); }
.wordmark span:nth-child(3n):hover { transform: translateY(-14px) rotate(-2deg); }
.wordmark span:nth-child(5n):hover { transform: translateY(-14px) rotate(4deg); }

/* ===== Responsive ========================================= */
@media (max-width: 640px) {
  .pillar { min-height: auto; padding: 30px 24px; }
  .door { padding: 40px 28px; min-height: auto; }
  .door-title { font-size: 36px; }
  .dropcap { font-size: 50px; }
}

/* =========================================================
   v3 additions · product-first
   ========================================================= */

/* ===== Deploy widget ====================================== */
.deploy-widget {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  box-shadow: 6px 6px 0 var(--ink);
  overflow: hidden;
  max-width: 580px;
}
.dw-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px;
  border-bottom: 1.5px dashed var(--line2);
  background: var(--bg);
}
.dw-dot {
  width: 8px; height: 8px; background: var(--lime); border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(185,229,74,.4);
  animation: pulse-lime 2s ease-out infinite;
}
@keyframes pulse-lime {
  0%   { box-shadow: 0 0 0 0 rgba(185,229,74,.5); }
  70%  { box-shadow: 0 0 0 8px rgba(185,229,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(185,229,74,0); }
}
.dw-row {
  display: flex; align-items: stretch; gap: 0;
  padding: 14px;
  border-bottom: 1.5px dashed var(--line2);
}
.dw-prefix {
  display: inline-flex; align-items: center;
  padding: 0 10px;
  background: var(--ink);
  color: var(--bg);
  font-family: "DM Mono", monospace;
  font-size: 13px;
  border: 1.5px solid var(--ink);
  border-right: 0;
  border-radius: 6px 0 0 6px;
  font-weight: 500;
}
.dw-input {
  flex: 1;
  font-family: "DM Mono", monospace;
  font-size: 14.5px;
  padding: 12px 12px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  outline: none;
  color: var(--ink);
  border-right: 0;
  transition: background .15s ease;
  min-width: 0;
}
.dw-input::placeholder { color: var(--ink); opacity: .35; }
.dw-input:focus { background: #fff; }
.dw-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--orange);
  border: 1.5px solid var(--ink);
  border-radius: 0 6px 6px 0;
  padding: 0 18px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.dw-cta:hover { background: #ff7548; }
.dw-cta:active { transform: translate(1px, 1px); }

.dw-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 12px 14px;
  border-bottom: 1.5px dashed var(--line2);
}
.dw-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: "Silkscreen", monospace;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 10px 5px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--bg);
  cursor: pointer;
  transition: background .15s ease;
}
.dw-chip:hover { background: var(--paper); }
.dw-chip input { appearance: none; -webkit-appearance: none; margin: 0; width: 10px; height: 10px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--paper); }
.dw-chip input:checked { background: var(--orange); box-shadow: inset 0 0 0 2px var(--paper); }
.dw-chip:has(input:checked) { background: rgba(255,92,43,.10); }

.dw-foot {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 10px 14px;
  font-family: "DM Mono", monospace;
  font-size: 11.5px;
  color: var(--ink);
  opacity: .75;
}

/* ===== Step cards (how it works) ========================== */
.step {
  background: var(--paper);
  padding: 36px 32px 36px;
  position: relative;
  min-height: 460px;
  transition: background .25s ease;
}
.step:hover { background: #fff; }
.step:nth-child(1):hover { background: rgba(255,92,43,.05); }
.step:nth-child(2):hover { background: rgba(43,199,255,.05); }
.step:nth-child(3):hover { background: rgba(185,229,74,.08); }

.step-num {
  font-family: "Silkscreen", monospace;
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  background: var(--orange);
  border: 1.5px solid var(--ink);
  padding: 5px 9px 4px;
  border-radius: 4px;
  display: inline-block;
  letter-spacing: .12em;
  margin-bottom: 26px;
  box-shadow: 2px 2px 0 var(--ink);
}
.step:nth-child(1) .step-num { background: var(--orange); }
.step:nth-child(2) .step-num { background: var(--cyan); }
.step:nth-child(3) .step-num { background: var(--lime); }

.step-art {
  height: 170px;
  position: relative;
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  margin-bottom: 26px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse at center, rgba(14,14,16,.04), transparent 70%),
    repeating-linear-gradient(45deg, rgba(14,14,16,0.025) 0 6px, transparent 6px 12px);
}

/* art-paste: terminal-like input mock */
.art-input {
  display: inline-flex; align-items: center; gap: 0;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  box-shadow: 3px 3px 0 var(--ink);
  overflow: hidden;
}
.ai-prefix {
  background: var(--ink);
  color: var(--bg);
  padding: 8px 10px;
  font-family: "DM Mono", monospace;
  font-size: 13px;
  font-weight: 500;
}
.ai-typed {
  font-family: "DM Mono", monospace;
  font-size: 13.5px;
  padding: 8px 14px 8px 10px;
  color: var(--ink);
  display: inline-flex; align-items: center;
}
.ai-caret {
  display: inline-block;
  width: 8px; height: 14px;
  background: var(--orange);
  margin-left: 4px;
  animation: blink-caret 1.1s steps(2) infinite;
}
@keyframes blink-caret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

/* art-pick: hovering archetype blocks */
.art-pick { background:
  radial-gradient(circle at center, rgba(43,199,255,.10), transparent 60%),
  repeating-linear-gradient(45deg, rgba(14,14,16,0.025) 0 6px, transparent 6px 12px);
}
.art-pick .art-block {
  position: absolute;
  width: 28px; height: 28px;
  background: var(--cyan);
  border: 1.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(45deg);
  top: 50%; margin-top: -14px;
}
.art-pick .b1 { left: 18%; background: var(--orange); animation: bob3 2.4s ease-in-out 0ms infinite; }
.art-pick .b2 { left: 38%; background: var(--cyan);   animation: bob3 2.4s ease-in-out 200ms infinite; }
.art-pick .b3 { left: 58%; background: var(--lime);   animation: bob3 2.4s ease-in-out 400ms infinite; }
.art-pick .b4 { left: 78%; background: var(--ink); border-color: var(--ink); animation: bob3 2.4s ease-in-out 600ms infinite; }
@keyframes bob3 { 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } }

/* art-join: chat bubble */
.art-join { background:
  radial-gradient(circle at 60% 40%, rgba(185,229,74,.10), transparent 60%),
  repeating-linear-gradient(45deg, rgba(14,14,16,0.025) 0 6px, transparent 6px 12px);
}
.chat-bubble {
  display: inline-flex; flex-direction: column; gap: 3px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 3px 3px 0 var(--ink);
  position: relative;
  max-width: 78%;
}
.chat-bubble::after {
  content:"";
  position: absolute; bottom: -6px; left: 24px;
  width: 10px; height: 10px;
  background: var(--paper);
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: rotate(45deg);
}
.cb-name {
  font-family: "Silkscreen", monospace;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orange);
}
.cb-msg {
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  color: var(--ink);
}

.step-title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -.025em;
  margin-bottom: 12px;
}
.step-body {
  color: var(--ink);
  opacity: .78;
  line-height: 1.55;
  font-size: 14.5px;
  max-width: 40ch;
}

/* card deploy link (on spec cards) */
.card-deploy {
  display: inline-block;
  margin-top: 16px;
  font-family: "DM Mono", monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 2px dashed var(--orange);
  padding-bottom: 2px;
  transition: color .15s ease;
}
.card-deploy:hover { color: var(--orange); border-bottom-style: solid; }

/* ===== Config UI mock ===================================== */
.config-ui {
  position: relative;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  padding: 22px 24px 20px;
  box-shadow: 8px 8px 0 var(--ink);
}

.cfg-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 16px;
  border-bottom: 1.5px dashed var(--line2);
  margin-bottom: 18px;
}
.cfg-mini-sprite {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, #ff8a5c, #ff5c2b 60%, #c43b14);
  border: 1.5px solid var(--ink);
  box-shadow:
    inset -2px -2px 0 rgba(14,14,16,.40),
    inset  2px  2px 0 rgba(255,255,255,.30),
    2px 2px 0 var(--ink);
  transform: rotate(45deg);
  border-radius: 3px;
  position: relative;
  flex-shrink: 0;
}
.cfg-mini-sprite::before, .cfg-mini-sprite::after {
  content:""; position: absolute;
  width: 4px; height: 5px;
  background: var(--ink);
  top: 13px;
}
.cfg-mini-sprite::before { left: 10px; }
.cfg-mini-sprite::after  { left: 22px; }

.cfg-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-bottom: 22px;
}
.cfg-field label {
  display: block;
  font-family: "Silkscreen", monospace;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: .6;
  margin-bottom: 6px;
}
.cfg-input {
  display: flex; align-items: center; justify-content: space-between;
  font-family: "DM Mono", monospace;
  font-size: 14px;
  padding: 9px 12px;
  border: 1.5px solid var(--ink);
  background: var(--bg);
  border-radius: 5px;
  box-shadow: 2px 2px 0 var(--ink);
}
.cfg-caret {
  display: inline-block;
  width: 7px; height: 12px;
  background: var(--orange);
  margin-left: 4px;
  animation: blink-caret 1.1s steps(2) infinite;
}
.cfg-chev { color: var(--ink); opacity: .5; font-size: 12px; }

.cfg-section-h {
  font-family: "Silkscreen", monospace;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--lime);
  border: 1.5px solid var(--ink);
  display: inline-block;
  padding: 4px 8px 3px;
  border-radius: 4px;
  box-shadow: 2px 2px 0 var(--ink);
  margin-bottom: 14px;
}
.cfg-section-h + .cfg-section-h { margin-top: 22px; }

.cfg-sliders { display: flex; flex-direction: column; gap: 12px; margin-bottom: 6px; }
.slider-row {
  display: grid; grid-template-columns: 80px 1fr 36px; align-items: center; gap: 12px;
  font-family: "DM Mono", monospace;
  font-size: 13px;
  color: var(--ink);
}
.sl-label { letter-spacing: .02em; }
.slider {
  position: relative;
  height: 10px;
  background: var(--bg);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
}
.sl-fill {
  position: absolute; inset: 0;
  width: var(--p);
  background: var(--ink);
  border-radius: 999px;
}
.sl-fill.orange { background: var(--orange); }
.sl-fill.cyan   { background: var(--cyan); }
.sl-fill.lime   { background: var(--lime); }
.sl-thumb {
  position: absolute;
  top: 50%;
  width: 16px; height: 16px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 1.5px 1.5px 0 var(--ink);
}
.sl-val {
  text-align: right;
  font-family: "Silkscreen", monospace;
  font-weight: 700;
  font-size: 11px;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--ink);
  padding: 2px 6px;
  border-radius: 3px;
  box-shadow: 1.5px 1.5px 0 var(--ink);
}

.cfg-skills {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin-bottom: 20px;
}
.skill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  opacity: .55;
  background: var(--bg);
  border: 1.5px solid var(--ink);
  border-radius: 5px;
  padding: 6px 10px;
  cursor: pointer;
  transition: background .15s ease, opacity .15s ease;
  box-shadow: 1.5px 1.5px 0 var(--ink);
}
.skill.on { opacity: 1; background: var(--paper); }
.sk-box {
  width: 12px; height: 12px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  border-radius: 2px;
  position: relative;
  flex-shrink: 0;
}
.skill.on .sk-box { background: var(--orange); }
.skill.on .sk-box::after {
  content:"";
  position: absolute; inset: 1px;
  background:
    linear-gradient(45deg, transparent 38%, var(--ink) 38% 52%, transparent 52%),
    linear-gradient(-45deg, transparent 38%, var(--ink) 38% 52%, transparent 52%);
  background-position: 0 1px, 0 -1px;
  background-size: 100% 50%;
  background-repeat: no-repeat;
}

.cfg-foot {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1.5px dashed var(--line2);
  padding-top: 14px;
  margin-top: 6px;
}

/* ===== Use cases (servers) ================================ */
.usecase {
  background: var(--paper);
  padding: 32px 26px 30px;
  position: relative;
  min-height: 280px;
  transition: background .25s ease;
}
.usecase:hover { background: #fff; }

.uc-icon {
  display: block;
  width: 56px; height: 56px;
  border: 1.5px solid var(--ink);
  background: var(--bg);
  border-radius: 6px;
  box-shadow: 3px 3px 0 var(--ink);
  margin-bottom: 22px;
  position: relative;
}

/* icon-realm: small house */
.icon-realm { background: var(--orange); }
.icon-realm::before {
  content:""; position: absolute;
  left: 50%; top: 50%; transform: translate(-50%, -55%);
  width: 0; height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 14px solid var(--ink);
}
.icon-realm::after {
  content:""; position: absolute;
  left: 50%; top: 50%; transform: translate(-50%, 0);
  width: 22px; height: 16px;
  background: var(--ink);
}

/* icon-smp: linked figures */
.icon-smp { background: var(--cyan); }
.icon-smp::before {
  content:""; position: absolute;
  left: 14px; top: 50%; transform: translateY(-50%);
  width: 10px; height: 10px;
  background: var(--ink);
  border-radius: 50%;
  box-shadow:
    18px 0 0 var(--ink),
    9px 0 0 0 var(--ink);
}
.icon-smp::after {
  content:""; position: absolute;
  left: 14px; bottom: 12px;
  width: 30px; height: 4px;
  background: var(--ink);
}

/* icon-public: globe / many */
.icon-public { background: var(--lime); }
.icon-public::before {
  content:""; position: absolute;
  inset: 12px;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  background:
    linear-gradient(to right, transparent 49%, var(--ink) 49% 51%, transparent 51%),
    linear-gradient(to bottom, transparent 49%, var(--ink) 49% 51%, transparent 51%);
}

/* icon-mod: stacked cubes */
.icon-mod { background: var(--paper); }
.icon-mod::before, .icon-mod::after {
  content:""; position: absolute;
  width: 14px; height: 14px;
  border: 1.5px solid var(--ink);
  background: var(--orange);
}
.icon-mod::before { left: 12px; top: 22px; background: var(--cyan); }
.icon-mod::after  { left: 26px; top: 14px; background: var(--orange); box-shadow: -8px 16px 0 var(--lime), -8px 16px 0 1.5px var(--ink); }

.uc-title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -.025em;
  margin-bottom: 10px;
}
.uc-body {
  color: var(--ink);
  opacity: .78;
  font-size: 14px;
  line-height: 1.55;
}

/* ===== Open by design bullets ============================ */
.open-bullets { display: flex; flex-direction: column; gap: 14px; }
.ob-row {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
  opacity: .9;
}
.ob-dot {
  width: 10px; height: 10px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
  box-shadow: 1.5px 1.5px 0 var(--ink);
}
.ob-dot.ob-orange { background: var(--orange); }
.ob-dot.ob-cyan   { background: var(--cyan); }
.ob-dot.ob-lime   { background: var(--lime); }

/* ===== Watch demo button ================================== */
.btn-watch {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  border: 1.5px solid var(--ink);
  padding: 13px 18px 13px 14px;
  font-size: 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
  font-family: inherit;
  box-shadow: 0 0 0 var(--ink);
}
.btn-watch:hover {
  background: var(--paper);
  box-shadow: 3px 3px 0 var(--ink);
  transform: translate(-1px, -1px);
}
.btn-watch:active { transform: translate(1px, 1px); box-shadow: 0 0 0 var(--ink); }

.play-icon {
  width: 22px; height: 22px;
  border: 1.5px solid var(--ink);
  background: var(--orange);
  border-radius: 50%;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  box-shadow: 1.5px 1.5px 0 var(--ink);
}
.play-icon::after {
  content:"";
  position: absolute;
  left: 7px; top: 5px;
  width: 0; height: 0;
  border-left: 8px solid var(--ink);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

/* ===== Video modal ======================================== */
.vid-modal[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.vid-modal {
  border: none;
  background: transparent;
  padding: 0;
  margin: auto;
  max-width: 100vw;
  max-height: 100vh;
}
.vid-modal::backdrop {
  background: rgba(14,14,16,.65);
  backdrop-filter: blur(4px);
}
.vid-modal-inner {
  position: relative;
  width: min(960px, 92vw);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 8px;
  box-shadow: 10px 10px 0 var(--ink);
  padding: 14px;
  animation: vid-pop .25s cubic-bezier(.22,.61,.36,1);
}
@keyframes vid-pop {
  from { transform: scale(.95) translateY(8px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.vid-close {
  position: absolute;
  top: 8px; right: 8px;
  width: 38px; height: 38px;
  border: 2px solid var(--ink);
  background: var(--orange);
  border-radius: 50%;
  font-family: inherit;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform .15s ease, box-shadow .15s ease;
  color: var(--ink);
  z-index: 3;
}
.vid-close:hover  { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--ink); }
.vid-close:active { transform: translate(2px,2px);   box-shadow: 0   0   0 var(--ink); }

.vid-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg);
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.vid-frame video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  background: var(--ink);
}
.vid-fallback {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 24px;
  background:
    radial-gradient(ellipse at center, rgba(255,92,43,.10), transparent 60%),
    repeating-linear-gradient(45deg, rgba(14,14,16,0.025) 0 8px, transparent 8px 16px),
    var(--paper);
}
.vid-fallback code {
  font-family: "DM Mono", monospace;
  font-size: .9em;
  background: var(--bg);
  border: 1.5px solid var(--ink);
  padding: 2px 6px;
  border-radius: 4px;
}
.vid-frame.no-video video { display: none; }
.vid-frame.no-video .vid-fallback { display: flex; }

/* ===== Customize card ===================================== */
.spec-card-custom {
  background:
    repeating-linear-gradient(45deg,
      rgba(14,14,16,0.025) 0 6px,
      transparent 6px 14px),
    var(--paper);
}
.spec-card-custom:hover { background:
  repeating-linear-gradient(45deg,
    rgba(255,92,43,0.06) 0 6px,
    transparent 6px 14px),
  var(--paper);
}

.stage-custom {
  background:
    linear-gradient(to bottom,
      #e6e1d4 0%, #e6e1d4 60%,
      #c9c2af 60%, #b0a690 100%);
  border-style: dashed !important;
  border-color: rgba(14,14,16,0.5) !important;
}
.stage-custom .cs-floor {
  background: linear-gradient(to bottom, #c9c2af 0%, #c9c2af 60%, #a59a82 60%, #a59a82 100%);
}
.stage-custom .cs-floor::before {
  background: repeating-linear-gradient(to right,
    rgba(14,14,16,.4) 0 5px,
    transparent 5px 10px);
  opacity: .5;
}
.stage-custom .cs-grid {
  background-image:
    linear-gradient(to right, rgba(14,14,16,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14,14,16,.08) 1px, transparent 1px);
}

/* dashed silhouette of a character */
.custom-silhouette {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  width: 90px;
  height: 135px;
  z-index: 2;
}
.custom-silhouette > div {
  position: absolute;
  border: 1.5px dashed rgba(14,14,16,.55);
  background: rgba(243,236,226,.35);
  border-radius: 2px;
}
.custom-silhouette .cs-head  { left: 28px; top: 6px;  width: 34px; height: 38px; }
.custom-silhouette .cs-torso { left: 28px; top: 50px; width: 34px; height: 42px; }
.custom-silhouette .cs-arm-l { left: 16px; top: 54px; width: 12px; height: 32px; }
.custom-silhouette .cs-arm-r { left: 62px; top: 54px; width: 12px; height: 32px; }
.custom-silhouette .cs-leg-l { left: 30px; top: 96px; width: 13px; height: 30px; }
.custom-silhouette .cs-leg-r { left: 47px; top: 96px; width: 13px; height: 30px; }
.custom-silhouette .cs-plus {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 56px;
  color: var(--orange);
  text-shadow: 2px 2px 0 var(--ink);
  animation: plus-pulse 2.4s ease-in-out infinite;
  z-index: 3;
}
@keyframes plus-pulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.1) rotate(8deg); }
}

/* empty stat bars */
.bar.bar-empty {
  background: transparent;
  border: 1.5px dashed rgba(14,14,16,.4);
}
.bar.bar-empty span { display: none; }

.card-deploy-custom {
  color: var(--orange);
  border-bottom-color: var(--ink);
  font-weight: 700;
}
.card-deploy-custom:hover { color: var(--ink); border-bottom-color: var(--orange); }

/* tighter padding when grid has 5 cols at lg */
@media (min-width: 1024px) and (max-width: 1280px) {
  .spec-card { padding: 22px 18px; }
  .spec-card-art { height: 190px; }
  .spec-card-name { font-size: 26px; }
  .spec-card-desc { font-size: 12.5px; min-height: 56px; }
  .mc-char-sm { width: 72px; height: 108px; }
  .custom-silhouette { width: 70px; height: 108px; }
  .custom-silhouette .cs-head  { left: 22px; top: 4px;  width: 26px; height: 30px; }
  .custom-silhouette .cs-torso { left: 22px; top: 40px; width: 26px; height: 34px; }
  .custom-silhouette .cs-arm-l { left: 12px; top: 44px; width: 10px; height: 26px; }
  .custom-silhouette .cs-arm-r { left: 48px; top: 44px; width: 10px; height: 26px; }
  .custom-silhouette .cs-leg-l { left: 24px; top: 78px; width: 10px; height: 26px; }
  .custom-silhouette .cs-leg-r { left: 36px; top: 78px; width: 10px; height: 26px; }
  .custom-silhouette .cs-plus { font-size: 42px; }
}

/* ===== Reduced motion ===================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ===== Small extra responsive tweaks ====================== */
@media (max-width: 640px) {
  .step { min-height: auto; }
  .cfg-grid { grid-template-columns: 1fr; }
  .cfg-skills { grid-template-columns: repeat(2, 1fr); }
  .slider-row { grid-template-columns: 70px 1fr 32px; }
  .dw-row { flex-wrap: wrap; }
  .dw-prefix { border-radius: 6px 6px 0 0; border-bottom: 0; border-right: 1.5px solid var(--ink); width: 100%; padding: 8px 12px; }
  .dw-input { width: 100%; border-radius: 0; border-right: 1.5px solid var(--ink); }
  .dw-cta { width: 100%; padding: 12px; justify-content: center; border-radius: 0 0 6px 6px; }
}

/* ============================================================ */
/* 3D Minecraft skin viewer (hero right)                        */
/* ============================================================ */
.stage-3d .mc-char,
.stage-3d .skin-vox { display: none; }

.skin-canvas {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  width: 220px;
  height: 300px;
  z-index: 4;
  display: block;
  background: transparent;
  cursor: crosshair;
  touch-action: manipulation;
  filter: drop-shadow(2px 3px 0 rgba(14,14,16,.55));
}
.skin-canvas:active { transform: translateX(-50%) translateY(1px); }
@media (max-width: 640px) {
  .skin-canvas { width: 180px; height: 250px; }
}

/* Soft contact shadow under the model */
.skin-shadow {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  width: 140px;
  height: 14px;
  background: radial-gradient(ellipse, rgba(14,14,16,.28), transparent 70%);
  z-index: 3;
  pointer-events: none;
  animation: skin-shadow-pulse 2.4s ease-in-out infinite;
}
@keyframes skin-shadow-pulse {
  0%, 100% { opacity: .85; transform: translateX(-50%) scaleX(1);    }
  50%      { opacity: .6;  transform: translateX(-50%) scaleX(.92);  }
}

.skin-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Silkscreen", monospace;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(14,14,16,.55);
  z-index: 5;
  pointer-events: none;
  transition: opacity .35s ease;
}
.skin-loading.is-hidden { opacity: 0; }

/* (mobile sizing handled near .skin-canvas above) */

/* ============================================================ */
/* Field log — Voyager video gallery                            */
/* ============================================================ */
.fieldclip {
  position: relative;
  background: var(--paper);
  padding: 18px 18px 22px;
  display: flex; flex-direction: column;
  isolation: isolate;
  overflow: hidden;
  transition: background .25s ease, transform .25s ease;
}
.fieldclip:hover { background: #fff; }
.fieldclip:hover .fc-vid { transform: scale(1.02); }
.fieldclip:hover .fc-expand { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--ink); }

.fc-vid {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  transition: transform .35s ease;
  /* hide controls UI if any */
  pointer-events: none;
}

.fc-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  font-family: "Silkscreen", monospace;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.fc-id { color: rgba(14,14,16,.55); }

.fc-label {
  margin-top: 10px;
  display: flex; flex-direction: column; gap: 3px;
}
.fc-title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.fc-sub {
  font-family: "DM Mono", monospace;
  font-size: 11.5px;
  color: rgba(14,14,16,.6);
}

.fc-expand {
  position: absolute;
  top: 26px; right: 26px;
  width: 30px; height: 30px;
  display: inline-flex;
  align-items: center; justify-content: center;
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  background: var(--paper);
  font-family: "DM Mono", monospace;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
  z-index: 4;
}
.fc-expand:hover { background: var(--orange); color: var(--paper); }
.fc-expand:active { transform: translate(2px,2px); box-shadow: 0 0 0 var(--ink); }

/* video modal caption */
.vid-cap {
  position: absolute;
  left: 12px; bottom: 12px;
  font-family: "Silkscreen", monospace;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--paper);
  background: rgba(14,14,16,.7);
  padding: 4px 8px;
  border-radius: 3px;
  pointer-events: none;
  z-index: 2;
}

/* ============================================================ */
/* Roster switcher — arrows, pips, swap flash, biome themes     */
/* ============================================================ */

/* Prev/next arrows over the stage */
.stage-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px; height: 36px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  box-shadow: 2px 2px 0 var(--ink);
  color: var(--ink);
  cursor: pointer;
  z-index: 10;
  opacity: .92;
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease, opacity .2s ease;
}
.stage-arrow:hover { background: var(--orange); color: var(--paper); opacity: 1; }
.stage-arrow:active { transform: translateY(-50%) translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.stage-prev { left: 10px; }
.stage-next { right: 10px; }

/* Roster pips */
.roster-pips {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: rgba(255, 250, 240, .85);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--ink);
  z-index: 10;
}
.roster-pip {
  width: 8px; height: 8px;
  border-radius: 2px;
  background: rgba(14, 14, 16, .25);
  border: 1.5px solid var(--ink);
  cursor: pointer;
  transition: background .2s ease, transform .15s ease;
}
.roster-pip:hover { transform: translateY(-1px); }
.roster-pip.is-active { background: var(--orange); }

/* Swap flash overlay (brief crossfade on character change) */
.stage-swap {
  position: absolute;
  inset: 0;
  background: var(--paper);
  opacity: 0;
  pointer-events: none;
  z-index: 8;
  transition: opacity .35s ease;
}
.stage-swap.is-flashing { opacity: .6; }

/* ====== Biome themes (data-biome on .stage-3d) ====== */
/* Plains is the default. Override sky + ground + trees + sun. */

/* TUNDRA — aurora borealis over snow */
.stage-3d[data-biome="tundra"] {
  background:
    /* aurora ribbons + frost stars */
    radial-gradient(circle at 22% 8%,  #ffffff 0 1.6px, transparent 2px),
    radial-gradient(circle at 64% 4%,  #ffffff 0 1.4px, transparent 2px),
    radial-gradient(circle at 88% 14%, #ffffff 0 1.2px, transparent 2px),
    radial-gradient(circle at 42% 16%, #ffffff 0 1px,   transparent 1.4px),
    radial-gradient(ellipse 60% 30% at 50% 28%, rgba(95, 226, 209, .75), transparent 70%),
    radial-gradient(ellipse 80% 36% at 30% 38%, rgba(255, 110, 199, .55), transparent 70%),
    radial-gradient(ellipse 60% 28% at 78% 18%, rgba(155, 110, 240, .55), transparent 70%),
    linear-gradient(to bottom,
      #1b1144 0%,
      #3a1f78 18%,
      #6f33b8 32%,
      #d05cb0 44%,
      #79e0d4 52%,
      #d8edf2 58%,
      #f5fafb 58%, #c0d6dc 100%);
}
.stage-3d[data-biome="tundra"] .stage-floor {
  background: linear-gradient(to bottom,
    transparent 0%, transparent 4%,
    #fbffff 4%, #fbffff 22%,
    #c8d8dc 22%, #c8d8dc 100%);
}
.stage-3d[data-biome="tundra"] .stage-floor::before {
  background: repeating-linear-gradient(to right, #ffffff 0 8px, #d6e2dc 8px 16px);
  box-shadow: 0 4px 0 #88a0a8;
}
.stage-3d[data-biome="tundra"] .tree-leaves { fill: #1f3a5a; }
.stage-3d[data-biome="tundra"] .tree-trunks { fill: #1a1430; }
.stage-3d[data-biome="tundra"] .stage-sun {
  background: #ffffff;
  box-shadow: 3px 3px 0 var(--ink), 0 0 22px rgba(190, 220, 255, .6);
}
.stage-3d[data-biome="tundra"] .stage-sun::before { background: #d8e4ff; }

/* NETHER — molten inferno, lava lake glow, ember sparks */
.stage-3d[data-biome="nether"] {
  background:
    radial-gradient(circle at 24% 14%, rgba(255, 132, 46, .75), transparent 50%),
    radial-gradient(circle at 78% 24%, rgba(255, 80, 80, .60), transparent 55%),
    radial-gradient(ellipse 90% 40% at 50% 70%, rgba(255, 196, 60, .55), transparent 70%),
    linear-gradient(to bottom,
      #1a0204 0%,
      #4a0a08 14%,
      #b22510 30%,
      #ff5a1a 44%,
      #ffae3c 56%,
      #b8240c 58%,
      #5e0a05 100%);
}
.stage-3d[data-biome="nether"] .stage-floor {
  background: linear-gradient(to bottom,
    transparent 0%, transparent 4%,
    #a01a10 4%, #a01a10 22%,
    #5e0a05 22%, #3c0604 100%);
}
.stage-3d[data-biome="nether"] .stage-floor::before {
  background: repeating-linear-gradient(to right, #ffb036 0 8px, #ff5a1a 8px 16px);
  box-shadow: 0 4px 0 #b22510, 0 0 18px rgba(255, 130, 40, .55);
}
.stage-3d[data-biome="nether"] .tree-leaves { fill: #2a0606; }
.stage-3d[data-biome="nether"] .tree-trunks { fill: #1a0303; }
.stage-3d[data-biome="nether"] .stage-sun {
  background: #ffe066;
  box-shadow: 3px 3px 0 var(--ink), 0 0 36px rgba(255, 180, 60, .85);
}
.stage-3d[data-biome="nether"] .stage-sun::before { background: #fff3a0; }
.stage-3d[data-biome="nether"] .sun-glow { background: radial-gradient(circle, rgba(255,170,40,.85), transparent 65%); }
.stage-3d[data-biome="nether"] .cloud { display: none; }

/* END — cosmic void with magenta/cyan nebula + stars */
.stage-3d[data-biome="end"] {
  background:
    /* twinkling stars */
    radial-gradient(circle at 16% 10%, #ffffff 0 1.4px, transparent 2px),
    radial-gradient(circle at 38% 6%,  #ffffff 0 1.2px, transparent 2px),
    radial-gradient(circle at 56% 18%, #ffffff 0 1.6px, transparent 2px),
    radial-gradient(circle at 72% 8%,  #ffd2ff 0 1.8px, transparent 2.4px),
    radial-gradient(circle at 86% 22%, #ffffff 0 1.4px, transparent 2px),
    radial-gradient(circle at 28% 28%, #c8f3ff 0 1.2px, transparent 1.8px),
    /* nebula clouds */
    radial-gradient(ellipse 60% 35% at 70% 22%, rgba(255, 120, 220, .55), transparent 70%),
    radial-gradient(ellipse 80% 40% at 24% 32%, rgba(70, 200, 240, .50), transparent 75%),
    radial-gradient(ellipse 50% 28% at 50% 14%, rgba(180, 90, 255, .50), transparent 75%),
    linear-gradient(to bottom,
      #050214 0%,
      #1c0a44 20%,
      #3e1a86 38%,
      #6620b8 50%,
      #fff0c2 58%, #e8d28a 100%);
}
.stage-3d[data-biome="end"] .stage-floor {
  background: linear-gradient(to bottom,
    transparent 0%, transparent 4%,
    #fff0c2 4%, #fff0c2 22%,
    #b8a55a 22%, #786838 100%);
}
.stage-3d[data-biome="end"] .stage-floor::before {
  background: repeating-linear-gradient(to right, #ffeab0 0 8px, #d8c075 8px 16px);
  box-shadow: 0 4px 0 #5a4d28;
}
.stage-3d[data-biome="end"] .tree-leaves { fill: #38114a; }
.stage-3d[data-biome="end"] .tree-trunks { fill: #14062a; }
.stage-3d[data-biome="end"] .stage-sun { display: none; }
.stage-3d[data-biome="end"] .cloud { background: #6e2bc7; border-color: #1a0e2a; box-shadow: 2px 2px 0 rgba(20, 10, 40, .4); }
.stage-3d[data-biome="end"] .cloud::before, .stage-3d[data-biome="end"] .cloud::after { background: #6e2bc7; border-color: #1a0e2a; }

/* OCEAN — tropical sunset over turquoise sea */
.stage-3d[data-biome="ocean"] {
  background:
    radial-gradient(circle at 72% 12%, rgba(255, 220, 130, .60), transparent 50%),
    radial-gradient(circle at 22% 28%, rgba(255, 130, 180, .35), transparent 60%),
    linear-gradient(to bottom,
      #ff7cb5 0%,
      #ffa066 12%,
      #ffd884 24%,
      #ffe7c0 36%,
      #7feadf 48%,
      #f7e6a8 58%,
      #e0c97a 64%,
      #2bb0e2 70%,
      #0a4a7a 100%);
}
.stage-3d[data-biome="ocean"] .stage-floor {
  background: linear-gradient(to bottom,
    transparent 0%, transparent 4%,
    #f7e6a8 4%, #f7e6a8 22%,
    #e0c97a 22%, #e0c97a 40%,
    #2bb0e2 40%, #0a4a7a 100%);
}
.stage-3d[data-biome="ocean"] .stage-floor::before {
  background: repeating-linear-gradient(to right, #fff0b6 0 8px, #e7d287 8px 16px);
  box-shadow: 0 4px 0 #b08a48;
}
.stage-3d[data-biome="ocean"] .tree-leaves { fill: #3a8a4a; }
.stage-3d[data-biome="ocean"] .tree-trunks { fill: #6e3a18; }

/* JUNGLE — vivid canopy with tropical flowers */
.stage-3d[data-biome="jungle"] {
  background:
    /* tropical flower specks */
    radial-gradient(circle at 18% 18%, #ff6ec7 0 4px, transparent 4.4px),
    radial-gradient(circle at 75% 14%, #ffd84a 0 3.5px, transparent 4px),
    radial-gradient(circle at 42% 32%, #ff8c2a 0 4px, transparent 4.4px),
    radial-gradient(circle at 88% 30%, #f368ff 0 3px, transparent 3.4px),
    radial-gradient(circle at 8%  36%, #ffe06a 0 3px, transparent 3.4px),
    radial-gradient(circle at 60% 22%, #ff90c0 0 3px, transparent 3.4px),
    linear-gradient(to bottom,
      #7fb84c 0%,
      #a5d96a 18%,
      #c8e88a 34%,
      #ffd884 44%,
      #82c93c 52%,
      #3a7c1c 58%,
      #1a3a0e 100%);
}
.stage-3d[data-biome="jungle"] .stage-floor {
  background: linear-gradient(to bottom,
    transparent 0%, transparent 4%,
    #8a4f24 4%, #8a4f24 22%,
    #5a2f14 22%, #5a2f14 100%);
}
.stage-3d[data-biome="jungle"] .stage-floor::before {
  background: repeating-linear-gradient(to right, #6dbe3e 0 8px, #2c5818 8px 16px);
  box-shadow: 0 4px 0 #1a3a0e;
}
.stage-3d[data-biome="jungle"] .tree-leaves { fill: #1f4012; }
.stage-3d[data-biome="jungle"] .tree-trunks { fill: #3a2410; }

/* MOUNTAIN — alpine sunset, pink/purple sky, snow-dusted stone */
.stage-3d[data-biome="mountain"] {
  background:
    radial-gradient(circle at 78% 14%, rgba(255, 220, 130, .55), transparent 50%),
    radial-gradient(circle at 22% 26%, rgba(180, 120, 255, .35), transparent 60%),
    linear-gradient(to bottom,
      #f870b8 0%,
      #ffa066 14%,
      #ffd884 28%,
      #c8d8f0 42%,
      #e6e4f0 52%,
      #c8c2d6 58%,
      #6e6480 100%);
}
.stage-3d[data-biome="mountain"] .stage-floor {
  background: linear-gradient(to bottom,
    transparent 0%, transparent 4%,
    #d8d2e2 4%, #d8d2e2 22%,
    #82788e 22%, #5e5470 100%);
}
.stage-3d[data-biome="mountain"] .stage-floor::before {
  background: repeating-linear-gradient(to right, #fffaff 0 8px, #c8c2d6 8px 16px);
  box-shadow: 0 4px 0 #4a4458;
}
.stage-3d[data-biome="mountain"] .tree-leaves { fill: #3e2a4a; }
.stage-3d[data-biome="mountain"] .tree-trunks { fill: #2a1a18; }

/* ============================================================ */
/* Interactable foreground blocks (click to cycle type)         */
/* ============================================================ */
.fg-block.blk {
  position: absolute;
  width: 38px; height: 38px;
  padding: 0;
  border: 1.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  z-index: 3;
  cursor: pointer;
  outline: none;
  background: var(--paper);
  transition: transform .18s cubic-bezier(.4, 1.4, .6, 1), box-shadow .18s ease;
  image-rendering: pixelated;
}
.fg-block.blk:hover { transform: translateY(-2px) rotate(-2deg); box-shadow: 4px 5px 0 var(--ink); }
.fg-block.blk:active { transform: translateY(1px); box-shadow: 1px 1px 0 var(--ink); }
.fg-block.blk.bounce { animation: blk-pop .35s ease; }
@keyframes blk-pop {
  0%   { transform: scale(.85) rotate(-6deg); }
  50%  { transform: scale(1.12) rotate(4deg); }
  100% { transform: scale(1)    rotate(0); }
}

#fg1.fg-block { bottom: 14px; left: 8%; }
#fg2.fg-block { bottom: 22px; right: 7%; width: 32px; height: 32px; }

/* Block type styles */
.blk-grass {
  background:
    linear-gradient(to bottom,
      #6dbe3e 0%, #6dbe3e 30%,
      #5a8f24 30%, #5a8f24 35%,
      #8b5a2b 35%, #8b5a2b 100%);
}
.blk-grass::before {
  content:""; position:absolute; inset: 4px;
  background:
    radial-gradient(circle at 20% 16%, rgba(255,255,255,.35) 0 2px, transparent 2px),
    radial-gradient(circle at 70% 70%, rgba(0,0,0,.18) 0 2px, transparent 2px);
}
.blk-stone {
  background: #888b94;
}
.blk-stone::before {
  content:""; position: absolute; inset: 4px;
  background:
    radial-gradient(circle at 30% 35%, #6a6e78 0 3px, transparent 3px),
    radial-gradient(circle at 70% 60%, #b0b4bd 0 2px, transparent 2px),
    radial-gradient(circle at 50% 80%, #6a6e78 0 2px, transparent 2px);
}
.blk-wood {
  background:
    repeating-linear-gradient(to bottom,
      #a06f3a 0 4px,
      #864f24 4px 6px,
      #b07a3e 6px 10px);
}
.blk-wood::before {
  content:""; position: absolute; inset: 6px 4px;
  background:
    radial-gradient(circle, #5a3a18 0 3px, transparent 4px);
  background-size: 14px 14px;
  background-position: 4px 6px;
}
.blk-cobble {
  background: #6a6e78;
}
.blk-cobble::before {
  content:""; position: absolute; inset: 3px;
  background:
    linear-gradient(45deg, #4a4e58 25%, transparent 25%) -2px -2px,
    linear-gradient(-45deg, #4a4e58 25%, transparent 25%) -2px -2px,
    linear-gradient(45deg, transparent 75%, #b0b4bd 75%) -2px -2px,
    linear-gradient(-45deg, transparent 75%, #b0b4bd 75%) -2px -2px;
  background-size: 10px 10px;
}
.blk-diamond {
  background: #5be6e6;
}
.blk-diamond::before {
  content:""; position: absolute; inset: 5px;
  background:
    radial-gradient(circle at 30% 35%, #ffffff 0 2px, transparent 2px),
    radial-gradient(circle at 70% 30%, #c8f5f5 0 3px, transparent 3px),
    radial-gradient(circle at 55% 70%, #8efafa 0 4px, transparent 4px),
    radial-gradient(circle at 25% 75%, #c8f5f5 0 2px, transparent 2px),
    #2bc7d4;
}
.blk-gold {
  background: #f5d05a;
}
.blk-gold::before {
  content:""; position: absolute; inset: 5px;
  background:
    radial-gradient(circle at 28% 32%, #fff3a0 0 3px, transparent 3px),
    radial-gradient(circle at 72% 36%, #c89818 0 3px, transparent 3px),
    radial-gradient(circle at 50% 70%, #fff3a0 0 2px, transparent 2px),
    radial-gradient(circle at 25% 72%, #c89818 0 2px, transparent 2px),
    #c89818;
}
.blk-iron {
  background: #d4d6da;
}
.blk-iron::before {
  content:""; position: absolute; inset: 5px;
  background:
    radial-gradient(circle at 30% 35%, #e8eaee 0 3px, transparent 3px),
    radial-gradient(circle at 68% 60%, #a8acb4 0 3px, transparent 3px),
    radial-gradient(circle at 48% 24%, #e8eaee 0 2px, transparent 2px),
    #a8acb4;
}
.blk-tnt {
  background:
    linear-gradient(to bottom,
      #d33a1e 0%, #d33a1e 18%,
      #f5f0e6 18%, #f5f0e6 28%,
      #d33a1e 28%, #d33a1e 100%);
}
.blk-tnt::before {
  content:"";
  position:absolute;
  inset: 8px 4px;
  background:
    repeating-linear-gradient(90deg, transparent 0 4px, rgba(0,0,0,.18) 4px 5px);
}
.blk-tnt::after {
  content:"T";
  position:absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Silkscreen", monospace;
  font-weight: 700;
  font-size: 16px;
  color: var(--paper);
  text-shadow: 1px 1px 0 rgba(0,0,0,.4);
}
.blk-obsidian {
  background: #1c0e2a;
}
.blk-obsidian::before {
  content:""; position: absolute; inset: 5px;
  background:
    radial-gradient(circle at 30% 35%, #4a2a6a 0 3px, transparent 3px),
    radial-gradient(circle at 70% 60%, #2a1340 0 3px, transparent 3px),
    radial-gradient(circle at 50% 80%, #6a3a8a 0 2px, transparent 2px),
    #2a1340;
}
.blk-emerald {
  background: #2a8f3c;
}
.blk-emerald::before {
  content:""; position: absolute; inset: 5px;
  background:
    radial-gradient(circle at 30% 35%, #6ce088 0 3px, transparent 3px),
    radial-gradient(circle at 70% 60%, #178f3c 0 3px, transparent 3px),
    radial-gradient(circle at 50% 75%, #aeffbe 0 2px, transparent 2px),
    #168832;
}
.blk-redstone {
  background: #6a6e78;
}
.blk-redstone::before {
  content:""; position: absolute; inset: 5px;
  background:
    radial-gradient(circle at 30% 35%, #ff2a2a 0 3px, transparent 3px),
    radial-gradient(circle at 70% 60%, #c41818 0 3px, transparent 3px),
    radial-gradient(circle at 50% 80%, #ff5050 0 2px, transparent 2px),
    #888b94;
}

/* ============================================================ */
/* Wordmark two-line + responsive overrides for new brand       */
/* ============================================================ */
@media (max-width: 640px) {
  .wordmark { font-size: clamp(48px, 14vw, 100px); }
  .wm-row-2 { padding-left: 30px; }
}

/* ============================================================ */
/* Agent card 3D skin canvases (§02 grid)                       */
/* ============================================================ */
.card-skin-canvas {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  width: 150px;
  height: 220px;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(1.5px 2px 0 rgba(14,14,16,.5));
  image-rendering: pixelated;
}
@media (min-width: 1024px) and (max-width: 1280px) {
  .card-skin-canvas { width: 122px; height: 180px; }
}

/* ============================================================ */
/* Hero combat — sparks + screen shake on impact                */
/* ============================================================ */
.spark-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  overflow: hidden;
}
.spark {
  --dx: 0px;
  --dy: 0px;
  --rot: 0deg;
  position: absolute;
  width: 5px; height: 5px;
  background: #fff3a0;
  box-shadow: 0 0 6px rgba(255, 200, 60, .85);
  border-radius: 1px;
  transform: translate(-50%, -50%);
  animation: sparkFly .52s cubic-bezier(.18,.7,.32,1) forwards;
  image-rendering: pixelated;
}
.spark:nth-child(3n) { background: #ffd84a; }
.spark:nth-child(5n) { background: #ff8c2a; box-shadow: 0 0 8px rgba(255,140,60,.85); }
@keyframes sparkFly {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  60%  { opacity: 1; transform: translate(calc(-50% + var(--dx) * .8), calc(-50% + var(--dy) * .8)) scale(.9) rotate(var(--rot)); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)),     calc(-50% + var(--dy)))      scale(.4) rotate(var(--rot)); }
}

.stage-3d.is-impact { animation: stageHit .26s ease; }
@keyframes stageHit {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3px, 2px); }
  45%  { transform: translate( 3px, -1px); }
  70%  { transform: translate(-1px, 1px); }
  100% { transform: translate(0, 0); }
}

/* ============================================================ */
/* Step 03 — "play-scene" mini in-game HUD                      */
/* ============================================================ */
/* (legacy "play-scene" classes — kept for posterity; not referenced anymore) */
.play-scene {
  position: relative;
  width: 100%;
  height: 100%;
  background:
    /* sky → grass */
    linear-gradient(to bottom,
      #1a1830 0%,
      #2c2750 18%,
      #3e3470 32%,
      #5a4a90 42%,
      #2c5818 42%, #1f4012 100%);
  font-family: "DM Mono", monospace;
  color: var(--paper);
  overflow: hidden;
}
.play-scene::before {
  /* pixel-grid ground texture */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 38%;
  background:
    repeating-linear-gradient(to right, rgba(0,0,0,.18) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(to bottom, rgba(0,0,0,.10) 0 1px, transparent 1px 14px);
  pointer-events: none;
}
.play-scene::after {
  /* pixel moon */
  content: "";
  position: absolute;
  top: 14%; right: 14%;
  width: 22px; height: 22px;
  background: #f5f0e6;
  border: 1.5px solid #cdc6b8;
  box-shadow: 2px 2px 0 rgba(0,0,0,.5);
}

.ps-hud-top {
  position: absolute;
  top: 10px; left: 10px; right: 10px;
  display: flex; justify-content: space-between;
  font-size: 10.5px;
  letter-spacing: .04em;
  color: rgba(255,250,240,.78);
  text-shadow: 1px 1px 0 rgba(0,0,0,.6);
  z-index: 3;
}
.ps-coords::before { content: "▲ "; opacity: .7; }
.ps-time::before { content: "☾ "; opacity: .7; }

.ps-chat {
  position: absolute;
  left: 14px; right: 14px;
  top: 38px;
  display: flex; flex-direction: column;
  gap: 3px;
  z-index: 3;
}
.ps-msg {
  display: flex;
  gap: 6px;
  align-items: baseline;
  font-size: 12px;
  line-height: 1.25;
  text-shadow: 1px 1px 0 rgba(0,0,0,.55);
  opacity: 0;
  transform: translateX(-6px);
  animation: psMsgIn .45s ease forwards;
}
.ps-msg:nth-child(1) { animation-delay: .25s; }
.ps-msg:nth-child(2) { animation-delay: 1.0s; }
.ps-msg:nth-child(3) { animation-delay: 1.8s; }
.ps-msg:nth-child(4) { animation-delay: 2.7s; }
@keyframes psMsgIn {
  to { opacity: 1; transform: translateX(0); }
}
.ps-msg-name {
  font-family: "Silkscreen", monospace;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 5px;
  border-radius: 2px;
}
.ps-msg-name.ps-you  { background: #2bc7ff; color: #0e0e10; }
.ps-msg-name.ps-them { background: #ff5c2b; color: #fffaf0; }
.ps-msg-text {
  color: #fffaf0;
}

.ps-toast {
  position: absolute;
  left: 14px;
  bottom: 70px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(14,14,16,.78);
  border: 1.5px solid var(--lime);
  border-radius: 4px;
  font-size: 11px;
  color: #fffaf0;
  box-shadow: 2px 2px 0 rgba(0,0,0,.4);
  opacity: 0;
  animation: psToastIn .5s ease 2.2s forwards, psToastPulse 1.8s ease 3.4s infinite;
  z-index: 4;
}
.ps-toast-blk {
  width: 14px; height: 14px;
  background:
    linear-gradient(to bottom, #a06f3a 0 40%, #864f24 40% 100%);
  border: 1px solid var(--ink);
  flex-shrink: 0;
}
.ps-toast-from { opacity: .7; font-size: 10px; margin-left: 2px; }
@keyframes psToastIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes psToastPulse {
  0%, 100% { box-shadow: 2px 2px 0 rgba(0,0,0,.4), 0 0 0 0 rgba(185,229,74,.7); }
  50%      { box-shadow: 2px 2px 0 rgba(0,0,0,.4), 0 0 0 6px rgba(185,229,74,0); }
}

.ps-hotbar {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: flex;
  gap: 1px;
  padding: 2px;
  background: rgba(14,14,16,.6);
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  z-index: 3;
}
.ps-slot {
  position: relative;
  width: 26px; height: 26px;
  background: rgba(255,250,240,.08);
  border: 1px solid rgba(255,250,240,.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ps-slot-sel {
  outline: 2px solid #fffaf0;
  outline-offset: -1px;
  background: rgba(255,250,240,.18);
}
.ps-slot-count {
  position: absolute;
  right: 2px; bottom: 1px;
  font-family: "Silkscreen", monospace;
  font-size: 8.5px;
  color: #fffaf0;
  text-shadow: 1px 1px 0 #000;
}
.ps-slot-icon {
  width: 16px; height: 16px;
  display: inline-block;
  image-rendering: pixelated;
}
.ps-ico-pick {
  background:
    linear-gradient(45deg, transparent 60%, #5a3a18 60% 70%, transparent 70%),
    linear-gradient(to bottom, transparent 0 4px, #b0b4bd 4px 6px, transparent 6px),
    linear-gradient(to right, transparent 0 4px, #b0b4bd 4px 12px, transparent 12px) 0 4px / 100% 2px no-repeat;
}
.ps-ico-pick {
  background:
    /* simple pickaxe pixel */
    linear-gradient(to right, transparent 0 3px, #5a3a18 3px 5px, transparent 5px) 0 4px / 2px 10px no-repeat,
    linear-gradient(to right, transparent 0 1px, #c8ced4 1px 13px, transparent 13px) 0 3px / 13px 3px no-repeat;
}
.ps-ico-sword {
  background:
    linear-gradient(to bottom, transparent 0 1px, #e8ebed 1px 11px, transparent 11px) 7px 0 / 2px 10px no-repeat,
    linear-gradient(to bottom, transparent 0 9px, #9a6a3a 9px 12px, transparent 12px) 4px 0 / 8px 3px no-repeat,
    linear-gradient(to bottom, transparent 0 12px, #5a3a1c 12px 15px, transparent 15px) 7px 0 / 2px 3px no-repeat;
}
.ps-ico-wood {
  background: linear-gradient(to bottom, #a06f3a 0 40%, #864f24 40% 60%, #a06f3a 60% 100%);
}
.ps-ico-cobble {
  background:
    linear-gradient(135deg, #6a6e78 25%, #4a4e58 25% 50%, #6a6e78 50% 75%, #4a4e58 75%);
  background-size: 6px 6px;
}

/* Step 03: small Minecraft player centered in the grey step-art card */
.art-join .step-skin {
  width: 110px;
  height: 158px;
  bottom: 6px;
  /* match the step-art striped background by letting the canvas stay
     transparent on top of it */
}
@media (max-width: 640px) {
  .art-join .step-skin { width: 92px; height: 132px; }
}

/* ============================================================ */
/* Hero card — audio toggle + chat input                        */
/* ============================================================ */
/* Audio toggle — inline icon button inside the chat row */
.audio-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  flex-shrink: 0;
  border: none;
  border-right: 1.5px solid var(--ink);
  background: var(--ink);
  color: var(--bg);
  cursor: pointer;
  transition: background .2s ease;
}
.audio-toggle:hover  { background: #2a2a2e; }
.audio-toggle[aria-pressed="true"] { background: var(--orange); color: var(--paper); }
.audio-toggle[aria-pressed="true"]:hover { background: var(--oranged); }

/* speaker glyph — small pixel speaker icon */
.audio-glyph {
  position: relative;
  width: 14px; height: 12px;
  display: inline-block;
  flex-shrink: 0;
}
.audio-glyph::before {
  content: "";
  position: absolute;
  left: 0; top: 3px;
  width: 4px; height: 6px;
  background: currentColor;
}
.audio-glyph::after {
  content: "";
  position: absolute;
  left: 4px; top: 0;
  width: 0; height: 0;
  border-left: 7px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
/* off state — diagonal slash through the speaker */
.audio-toggle[aria-pressed="false"] .audio-glyph::before { opacity: .65; }
.audio-toggle[aria-pressed="false"] .audio-glyph::after  { opacity: .65; }
.audio-toggle[aria-pressed="false"]::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 18px; height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(-25deg);
  pointer-events: none;
}
.audio-toggle { position: relative; }

/* gentle sound-wave nudge when on */
.audio-toggle[aria-pressed="true"] .audio-glyph {
  animation: audioWave 1.4s ease-in-out infinite;
}
@keyframes audioWave {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(1px); }
}

/* Chat input row */
.chat-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: 14px;
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  background: var(--paper);
  overflow: hidden;
  box-shadow: 2px 2px 0 var(--ink);
}
.chat-prefix {
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  background: var(--ink);
  color: var(--bg);
  font-family: "DM Mono", monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
}
.chat-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 9px 10px;
  font-family: "DM Sans", sans-serif;
  font-size: 13.5px;
  color: var(--ink);
  background: transparent;
  letter-spacing: -0.005em;
}
.chat-input::placeholder { color: rgba(14,14,16,.45); }
.chat-input:focus { background: rgba(255, 92, 43, .05); }
.chat-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  border: none;
  border-left: 1.5px solid var(--ink);
  background: var(--orange);
  color: var(--paper);
  cursor: pointer;
  font-family: "DM Mono", monospace;
  font-size: 15px;
  font-weight: 700;
  transition: background .2s ease;
}
.chat-send:hover  { background: var(--oranged); }
.chat-send:disabled { background: rgba(14,14,16,.3); cursor: not-allowed; }
.chat-send-glyph { display: inline-block; transform: translateY(-1px); }

.chat-status {
  margin-top: 6px;
  min-height: 14px;
  font-family: "Silkscreen", monospace;
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(14,14,16,.55);
  transition: color .2s ease;
}
.chat-status.is-err  { color: var(--oranged); }
.chat-status.is-busy { color: var(--orange); }

/* When player is speaking, halo the speech bubble border */
.speech-bubble.is-speaking {
  animation: bubbleSpeak 1.2s ease-in-out infinite;
}
@keyframes bubbleSpeak {
  0%, 100% { box-shadow: 3px 3px 0 var(--ink); }
  50%      { box-shadow: 3px 3px 0 var(--ink), 0 0 0 4px rgba(255, 92, 43, .25); }
}

/* Chat log — back-and-forth between user and agent, separate from
   the speech bubble above the player. Only shows when used. */
.chat-log {
  display: none;
  flex-direction: column;
  gap: 5px;
  margin-top: 10px;
  padding: 8px 10px;
  max-height: 100px;
  overflow-y: auto;
  border: 1.5px dashed var(--line2);
  border-radius: 6px;
  background: rgba(255, 250, 240, .5);
  font-size: 12.5px;
  scrollbar-width: thin;
}
.chat-log.has-msgs { display: flex; }
.chat-log::-webkit-scrollbar { width: 6px; }
.chat-log::-webkit-scrollbar-thumb { background: rgba(14,14,16,.18); border-radius: 4px; }
.cl-msg {
  display: flex;
  gap: 8px;
  align-items: baseline;
  line-height: 1.32;
  opacity: 0;
  transform: translateY(4px);
  animation: clMsgIn .25s ease forwards;
}
@keyframes clMsgIn { to { opacity: 1; transform: translateY(0); } }
.cl-tag {
  flex-shrink: 0;
  font-family: "Silkscreen", monospace;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 2px;
  border: 1px solid var(--ink);
  white-space: nowrap;
}
.cl-tag-you  { background: var(--cyan); color: var(--ink); }
.cl-tag-them { background: var(--orange); color: var(--paper); }
.cl-text {
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  word-break: break-word;
}
.cl-msg.is-thinking .cl-text::after {
  content: "…";
  display: inline-block;
  margin-left: 2px;
  animation: dots 1.2s steps(3) infinite;
}
@keyframes dots {
  0%   { content: "."; }
  33%  { content: ".."; }
  66%  { content: "…"; }
  100% { content: "."; }
}

/* =========================================================
   Mobile fixes
   The cream base (--bg) is unchanged; phones only looked
   darker because the two fixed overlays darken it more there:
   the fine 1px grain dots bloom under antialiasing at high
   DPR, and the viewport-relative vignette covers a larger
   share of a short screen. Tone both down on small screens so
   #f5f0e6 reads the same as on desktop.
   ========================================================= */
@media (max-width: 768px) {
  .grain {
    background-size: 5px 5px, 6px 6px;
    opacity: .16;
  }
  .vignette {
    background:
      radial-gradient(140% 92% at 50% 0%,  transparent 72%, rgba(14,14,16,0.05) 100%),
      radial-gradient(100% 70% at 50% 100%, transparent 72%, rgba(14,14,16,0.05) 100%);
  }
}

@media (max-width: 640px) {
  /* Keep the hero specimen card's min-content from blowing out the
     single-column grid track (caused horizontal scroll on ≤360px). */
  #top .grid > * { min-width: 0; }
  .specimen-card { max-width: 100%; }
}

@media (max-width: 380px) {
  /* Hero headline stays two clean lines on the smallest phones. */
  #top h1 { font-size: 52px; }
}