/* ============================================================================
   NO SIGNAL — a dead channel.
   Near-black ground, static greys, ONE signal colour (broadcast yellow), ONE
   danger colour (destroyed forever). Pixel art only at integer scales.
   ========================================================================= */

:root{
  /* ground + greys: the static */
  --void:#07080a;
  --panel:#0c0e12;
  --panel-2:#11141a;
  --panel-3:#171b22;
  --rule:#1d222b;
  --rule-hi:#2c333f;
  --grey:#7f8794;
  --grey-hi:#a7aeba;
  --chalk:#d6dae1;
  --white:#f3f5f8;

  /* the one signal colour */
  --signal:#f5e663;
  --signal-hi:#fff59a;
  --signal-dim:#6f6a2c;
  --signal-ink:#0a0a06;

  /* the one danger colour — only ever means "destroyed forever" */
  --danger:#ff3b30;
  --danger-dim:#5f1d18;

  --display:"Anton","Arial Narrow",Impact,"Haettenschweiler",sans-serif;
  --mono:"Space Mono",ui-monospace,"Cascadia Mono","Segoe UI Mono",Consolas,monospace;

  --wrap:1180px;
  --pad:clamp(16px,4vw,32px);

  --motion:1;
  --noise:.13;      /* page static, before a wallet locks on */
}

@media (prefers-reduced-motion: reduce){ :root{ --motion:0 } }
html.rm{ --motion:0 }

/* ---------------------------------------------------------------- reset -- */
*,*::before,*::after{ box-sizing:border-box }
[hidden]{ display:none !important }

html{
  overflow-x:clip;                 /* never overflow-x:hidden on body */
  scroll-behavior:smooth;
  scroll-padding-top:16px;
  -webkit-text-size-adjust:100%;
  background:var(--void);
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }
html.rm{ scroll-behavior:auto }

body{
  margin:0;
  max-width:100%;
  background:var(--void);
  color:var(--chalk);
  font-family:var(--mono);
  font-size:15px;
  line-height:1.62;
  font-variant-ligatures:none;
  letter-spacing:.01em;
}

h1,h2,h3{ margin:0; font-family:var(--display); font-weight:400; letter-spacing:.012em; line-height:.94; text-transform:uppercase }
p{ margin:0 }
img{ max-width:100% }
a{ color:var(--signal); text-decoration:none; border-bottom:1px solid var(--signal-dim) }
a:hover{ color:var(--signal-hi); border-bottom-color:var(--signal) }
b{ font-weight:700 }
code{ font-family:var(--mono); background:var(--panel-3); border:1px solid var(--rule); padding:1px 5px; color:var(--signal) }

:focus-visible{ outline:2px solid var(--signal); outline-offset:2px }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding-inline:var(--pad) }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--signal); color:var(--signal-ink); padding:10px 16px; border:0; font-weight:700;
}
.skip-link:focus{ left:8px; top:8px }

/* pixel art is only ever drawn at integer scales */
.px{ image-rendering:pixelated; image-rendering:crisp-edges; display:block }

/* ------------------------------------------------- page static + scanlines */
.page-noise{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:0;
  pointer-events:none;
  opacity:var(--noise);
  image-rendering:pixelated;
  transition:opacity 1100ms ease;
  mix-blend-mode:screen;
}
html.rm .page-noise{ transition:none }
/* THE RISK: the page is made of static, and the static calms down the moment a
   wallet locks on. Everything else on the page stays exactly where it is. */
body.locked{ --noise:.045 }

.page-scan{
  position:fixed; inset:0; z-index:61; pointer-events:none;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,.26) 0 1px, transparent 1px 3px),
    radial-gradient(130% 95% at 50% 45%, transparent 52%, rgba(0,0,0,.62) 100%);
}

main,.topbar,.foot{ position:relative; z-index:1 }

/* ------------------------------------------------------------------ boot -- */
.boot{
  position:fixed; inset:0; z-index:120;
  background:#000;
  display:grid; place-items:center;
}
.boot[hidden]{ display:none }
.boot-noise{ position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; opacity:.9 }
.boot-slate{
  position:relative; z-index:2; text-align:center;
  padding:26px 34px;
  border:2px solid var(--rule-hi);
  background:rgba(6,7,9,.86);
  opacity:0;
}
.boot.slate .boot-slate{ opacity:1; transition:opacity 220ms linear }
.boot-caption{ font-family:var(--display); font-size:clamp(38px,9vw,86px); line-height:.9; color:var(--white) }
.boot-sub{ margin-top:10px; font-size:11px; letter-spacing:.34em; color:var(--grey) }
.boot-skip{
  position:absolute; right:14px; bottom:14px; z-index:3;
  background:transparent; color:var(--grey-hi); border:1px solid var(--rule-hi);
  font:700 11px/1 var(--mono); letter-spacing:.2em; padding:9px 13px; cursor:pointer;
}
.boot-skip:hover{ color:var(--signal); border-color:var(--signal-dim) }

/* --------------------------------------------------------------- top bar -- */
/* STATIC, never fixed/sticky — iOS Safari drew gaps above fixed bars. */
.topbar{ border-bottom:1px solid var(--rule); background:var(--panel) }
.topbar-in{
  width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--pad);
  min-height:54px; display:flex; align-items:center; gap:18px;
}
.brand{ display:flex; align-items:center; gap:10px; border:0; color:var(--white) }
.brand-tile{ width:32px; height:32px; image-rendering:pixelated; border:1px solid var(--rule-hi); background:#000 }
.brand-name{ font-family:var(--display); font-size:19px; letter-spacing:.06em }
.topnav{ display:flex; gap:16px; margin-left:auto; flex-wrap:wrap }
.topnav a{ color:var(--grey); border:0; font-size:11px; letter-spacing:.18em; font-weight:700 }
.topnav a:hover{ color:var(--signal) }
.topstatus{ display:flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.18em; color:var(--grey-hi); white-space:nowrap }
.led{
  width:8px; height:8px; flex:none; background:var(--grey); border-radius:50%;
  box-shadow:0 0 8px currentColor;
}
.led.on{ background:var(--signal) }
.led.hot{ background:var(--danger) }
.led.blink{ animation:blink calc(1100ms / max(var(--motion),.35)) steps(2,end) infinite }
@keyframes blink{ 50%{ opacity:.22 } }
html.rm .led.blink{ animation:none }

/* ------------------------------------------------------------- typography */
.eyebrow{ font-size:11px; letter-spacing:.32em; color:var(--signal-dim); font-weight:700; text-transform:uppercase }
.section-lede{ margin-top:12px; max-width:62ch; color:var(--grey-hi); font-size:15px }
section h2{ margin-top:10px; font-size:clamp(30px,4.6vw,52px); color:var(--white) }
section{ padding:clamp(48px,7vw,86px) 0; border-top:1px solid var(--rule) }
.set{ border-top:0; padding-top:clamp(30px,4vw,54px) }

/* ------------------------------------------------------------- 1. THE SET */
.set-in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,520px); gap:clamp(24px,4vw,54px); align-items:start }
.set-copy h1{
  margin-top:14px;
  font-size:clamp(64px,11.5vw,148px);
  color:var(--white);
  letter-spacing:.006em;
  text-shadow:2px 0 0 rgba(245,230,99,.18), -2px 0 0 rgba(255,59,48,.14);
}
.set-copy h1 .dot{ color:var(--signal) }
.lede{ margin-top:18px; font-size:clamp(17px,2vw,21px); color:var(--chalk); font-weight:700; max-width:34ch }
.sub{ margin-top:12px; color:var(--grey-hi); max-width:52ch; font-size:14px }

.meter{ margin:26px 0 0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--rule); background:var(--panel) }
.meter-cell{ padding:12px 10px; border-right:1px solid var(--rule) }
.meter-cell:last-child{ border-right:0 }
.meter dt{ font-size:9.5px; letter-spacing:.2em; color:var(--grey) }
.meter dd{ margin:4px 0 0; font-family:var(--display); font-size:clamp(20px,2.6vw,30px); color:var(--white) }
.meter-cell:nth-child(4) dd{ color:var(--signal) }

.cta{ margin-top:24px; display:flex; gap:12px; flex-wrap:wrap }
.btn{
  display:inline-block; border:1px solid var(--rule-hi); background:var(--panel-2); color:var(--chalk);
  padding:11px 18px; font:700 11.5px/1 var(--mono); letter-spacing:.2em;
}
.btn:hover{ border-color:var(--signal-dim); color:var(--signal) }

/* ---- the set (TV) ---- */
.tv{ border:1px solid var(--rule-hi); background:var(--panel); box-shadow:0 0 0 1px #000 inset, 0 28px 60px -30px #000 }
.tv-screen{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  background:#050608; border-bottom:1px solid var(--rule-hi);
  display:grid; place-items:center;
}
.tv-noise{ position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; opacity:.34 }
.tv-signals{ position:relative; z-index:2; display:grid; justify-items:center; gap:14px }
.tv-hero{ border:1px solid rgba(245,230,99,.22); background:#000 }
.tv-strip{ display:flex; gap:8px }
.tv-strip img{ border:1px solid var(--rule); background:#000; opacity:.66 }
.tv-slate{
  position:absolute; inset:0; z-index:3; display:grid; place-items:center;
  background:rgba(4,5,7,.72); transition:opacity 500ms ease;
}
.tv-slate span{ font-family:var(--display); font-size:clamp(26px,4vw,44px); color:var(--grey-hi); letter-spacing:.04em }
.tv-slate[hidden]{ display:none }
.tv-glass{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,.30) 0 1px, transparent 1px 3px),
    radial-gradient(120% 100% at 50% 40%, rgba(255,255,255,.05), transparent 55%),
    radial-gradient(130% 110% at 50% 50%, transparent 48%, rgba(0,0,0,.78) 100%);
}
.tv-osd{
  position:absolute; z-index:5; top:12px; left:14px;
  font-size:11px; letter-spacing:.24em; font-weight:700; color:var(--signal);
  text-shadow:0 0 10px rgba(245,230,99,.5);
}

/* ---- control panel = the mint box ---- */
.tv-panel{ padding:16px clamp(14px,2.4vw,22px) 20px; background:var(--panel-2) }
.panel-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--rule); padding-bottom:10px }
.panel-title{ font-family:var(--display); font-size:17px; color:var(--white); letter-spacing:.08em }
.panel-state{ display:flex; align-items:center; gap:7px; font-size:10.5px; letter-spacing:.2em; color:var(--grey-hi) }

.price-line{
  margin-top:14px; display:flex; flex-wrap:wrap; gap:8px; align-items:baseline;
  font-size:12.5px; letter-spacing:.08em; color:var(--grey-hi);
}
.price-free{ color:var(--signal); font-weight:700 }
.price-line b{ color:var(--white) }
.price-sep{ color:var(--rule-hi) }
.usd{ color:var(--grey) }
.price-supply{ margin-left:auto; color:var(--grey) }

/* channel knob stepper */
.knob-row{ margin-top:16px }
.knob-label{ font-size:9.5px; letter-spacing:.24em; color:var(--grey) }
.knob{ margin-top:8px; display:flex; gap:6px; flex-wrap:wrap }
.ch{
  position:relative; width:46px; height:46px; flex:none;
  background:var(--panel-3); border:1px solid var(--rule-hi); color:var(--grey-hi);
  font:700 15px/1 var(--mono); cursor:pointer; display:grid; place-items:center;
  transition:background 140ms linear, color 140ms linear, border-color 140ms linear;
}
.ch::after{ content:""; position:absolute; top:4px; left:50%; width:2px; height:8px; background:currentColor; transform:translateX(-50%); opacity:.55 }
.ch:hover:not(:disabled){ border-color:var(--signal-dim); color:var(--signal) }
.ch[aria-checked="true"]{ background:var(--signal); border-color:var(--signal); color:var(--signal-ink) }
.ch[aria-checked="true"]::after{ opacity:1 }
.ch:disabled{ opacity:.3; cursor:not-allowed }

/* the one button */
.go{
  margin-top:16px; width:100%; display:block;
  background:var(--signal); color:var(--signal-ink); border:1px solid var(--signal);
  font:700 14px/1 var(--mono); letter-spacing:.16em; padding:16px 14px; cursor:pointer;
  transition:background 140ms linear, color 140ms linear;
}
.go:hover:not(:disabled){ background:var(--signal-hi) }
.go:disabled{ background:transparent; color:var(--grey); border-color:var(--rule-hi); cursor:not-allowed }
.go-danger{ background:var(--danger); border-color:var(--danger); color:#fff }
.go-danger:hover:not(:disabled){ background:#ff5a51 }

.status-line{ margin-top:12px; font-size:12.5px; color:var(--grey-hi); min-height:1.6em }
.status-line.err{ color:var(--danger) }
.status-line.ok{ color:var(--signal) }
.tx-line{ margin-top:8px; font-size:11.5px; color:var(--grey); word-break:break-all }
.tx-line a{ border-bottom-color:var(--signal-dim) }

.mint-result{ margin-top:16px; border-top:1px solid var(--rule); padding-top:14px }
.mint-result p{ font-size:10.5px; letter-spacing:.2em; color:var(--signal) }
.mint-result .row{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap }
.mint-result figure{ margin:0; text-align:center }
.mint-result img{ border:1px solid var(--rule-hi); background:#000 }
.mint-result figcaption{ margin-top:4px; font-size:10px; color:var(--grey) }

/* -------------------------------------------------------- 2. HOW IT WORKS */
.steps{ list-style:none; margin:30px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px }
.step{ border:1px solid var(--rule); background:var(--panel); padding:20px 18px 22px; position:relative }
.step-n{ font-size:10px; letter-spacing:.26em; color:var(--signal-dim) }
.step h3{ margin-top:10px; font-size:30px; color:var(--white) }
.step-say{ margin-top:8px; font-size:15px; font-weight:700; color:var(--signal) }
.step-more{ margin-top:10px; font-size:13px; color:var(--grey-hi) }
.step-burn{ border-color:var(--danger-dim) }
.step-burn .step-say{ color:var(--danger) }
.step-burn .step-n{ color:var(--danger-dim) }

.counter{ margin:16px 0 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--rule); background:var(--panel-2) }
.counter-cell{ padding:14px 16px; border-right:1px solid var(--rule) }
.counter-cell:last-child{ border-right:0 }
.counter dt{ font-size:9.5px; letter-spacing:.2em; color:var(--grey) }
.counter dd{ margin:4px 0 0; font-family:var(--display); font-size:clamp(22px,3vw,34px); color:var(--white) }
.counter-cell:nth-child(2) dd{ color:var(--danger) }

.facts{ margin:16px 0 0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px }
.fact{ border-left:2px solid var(--rule-hi); padding:9px 0 9px 14px; font-size:13px; color:var(--grey-hi) }
.fact b{ color:var(--white) }
.fact-danger{ border-left-color:var(--danger) }
.fact-danger b{ color:var(--danger) }

/* ------------------------------------------------------ 3. THE SPLICE DECK */
.deck{ margin-top:26px; border:1px solid var(--rule-hi); background:var(--panel); padding:clamp(16px,2.6vw,26px) }
.deck-slots{ display:grid; grid-template-columns:auto auto auto auto auto auto auto; gap:12px; align-items:start; justify-content:space-between }
.slot{ width:clamp(140px,17vw,204px) }
.slot-cap{ font-size:9.5px; letter-spacing:.22em; color:var(--grey) }
.slot-body{
  margin-top:6px; width:100%; aspect-ratio:1; display:grid; place-items:center;
  background:#050608; border:1px dashed var(--rule-hi); color:var(--grey);
  cursor:pointer; padding:0;
}
.slot-body:hover{ border-color:var(--signal-dim) }
.slot-preview{ cursor:default; border-style:solid }
.slot-empty{ font-size:22px; color:var(--rule-hi) }
.slot-note{ margin-top:6px; font-size:10.5px; color:var(--grey) }
.slot-keep .slot-cap,.slot-keep .slot-note{ color:var(--signal) }
.slot-keep .slot-body{ border-color:var(--signal-dim) }
.slot-fuel .slot-cap,.slot-fuel .slot-note{ color:var(--danger) }
.slot-fuel .slot-body{ border-color:var(--danger-dim) }
.slot-op{ align-self:center; padding-top:22px; color:var(--rule-hi); font-family:var(--display); font-size:26px; line-height:1 }
.slot-out .slot-body{ border-color:var(--rule-hi) }
.slot-body img{ border:0; background:#000 }
.slot-id{ position:absolute }

.warn{
  margin-top:18px; border:1px solid var(--danger); background:rgba(255,59,48,.07);
  color:var(--danger); padding:12px 14px; font-size:13.5px; font-weight:700; letter-spacing:.02em;
}
.warn[hidden]{ display:none }

.holdings{ margin-top:26px }
.holdings[hidden]{ display:none }
.holdings-head{ font-size:11px; letter-spacing:.2em; color:var(--grey-hi) }
.holdings-hint{ color:var(--grey); letter-spacing:.06em }
.grid-tokens{ margin-top:12px; display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px }
.tok{
  position:relative; padding:6px; background:var(--panel-2); border:1px solid var(--rule);
  cursor:pointer; text-align:center; color:var(--grey-hi); font:400 10px/1.4 var(--mono);
}
.tok img{ margin:0 auto; background:#000 }
.tok-id{ margin-top:5px; letter-spacing:.1em }
.tok:hover:not(:disabled){ border-color:var(--signal-dim) }
.tok:disabled{ cursor:not-allowed; opacity:.62 }
.tok.pick-keep{ border-color:var(--signal); box-shadow:0 0 0 1px var(--signal) inset }
.tok.pick-fuel{ border-color:var(--danger); box-shadow:0 0 0 1px var(--danger) inset }
.tok-badge{
  position:absolute; top:4px; left:4px; right:4px;
  font-size:8px; letter-spacing:.14em; font-weight:700; padding:2px 0;
}
.badge-lost{ background:var(--signal); color:var(--signal-ink) }
.badge-legend{ background:var(--white); color:#0a0a0a }
.tok-role{
  position:absolute; bottom:26px; left:4px; right:4px;
  font-size:8.5px; letter-spacing:.14em; font-weight:700; padding:2px 0;
}
.role-keep{ background:var(--signal); color:var(--signal-ink) }
.role-fuel{ background:var(--danger); color:#fff }

/* ---------------------------------------------------- 4. LOST SIGNALS ---- */
.grid-mut{ margin-top:28px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px }
.mut{ border:1px solid var(--rule); background:var(--panel); padding:16px; display:flex; gap:16px; align-items:flex-start }
.mut img{ flex:none; border:1px solid var(--rule-hi); background:#000 }
.mut-body{ flex:1; min-width:0 }
.mut h3{ font-size:24px; color:var(--white) }
.mut-count{ margin-top:6px; font-size:12px; color:var(--signal) }
.mut-share{ margin-top:8px; height:6px; background:var(--panel-3); border:1px solid var(--rule) }
.mut-fill{ height:100%; background:var(--signal-dim) }
.mut-pct{ margin-top:6px; font-size:10.5px; color:var(--grey) }

/* ---------------------------------------------------- 5. LEGENDARIES ----- */
.grid-legends{ margin-top:28px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px }
.legend{ border:1px solid var(--rule); background:var(--panel); padding:14px; text-align:center }
.legend img{ margin:0 auto; background:#000; border:1px solid var(--rule-hi); width:192px; height:192px }  /* x12: five-up, two clean rows of the ten 1-of-1s */
.legend h3{ margin-top:12px; font-size:20px; color:var(--white) }
.legend-id{ margin-top:4px; font-size:11px; color:var(--grey) }
.legend-tag{
  margin-top:10px; display:inline-block; font-size:9px; letter-spacing:.18em; font-weight:700;
  background:var(--white); color:#0a0a0a; padding:3px 8px;
}

/* ---------------------------------------------------- 6. THE DIAL -------- */
.tiers{ margin-top:26px; border:1px solid var(--rule); background:var(--panel) }
.tier{ display:grid; grid-template-columns:120px 1fr 108px; align-items:center; gap:14px; padding:11px 16px; border-bottom:1px solid var(--rule) }
.tier:last-child{ border-bottom:0 }
.tier-name{ font-size:11px; letter-spacing:.2em; color:var(--grey-hi) }
.tier-bar{ height:10px; background:var(--panel-3); border:1px solid var(--rule) }
.tier-fill{ height:100%; background:var(--rule-hi) }
.tier:nth-child(3) .tier-fill{ background:var(--signal-dim) }
.tier:nth-child(4) .tier-fill{ background:var(--signal) }
.tier-n{ text-align:right; font-size:12px; color:var(--grey-hi) }
.tier-n b{ color:var(--white) }

.grid-layers{ margin-top:14px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px }
.layer{ border:1px solid var(--rule); background:var(--panel); padding:14px 16px 16px }
.layer h3{ font-size:17px; color:var(--white) }
.layer-sub{ margin-top:3px; font-size:10px; letter-spacing:.16em; color:var(--grey) }
.layer ul{ margin:12px 0 0; padding:0; list-style:none }
.layer li{ display:flex; justify-content:space-between; gap:10px; font-size:12px; padding:3px 0; color:var(--grey-hi); border-bottom:1px solid #12151b }
.layer li:last-child{ border-bottom:0 }
.layer li span:last-child{ color:var(--grey); font-variant-numeric:tabular-nums }

/* ---------------------------------------------------- 7. THE MANUAL ------ */
.faq{ margin-top:26px; border:1px solid var(--rule); background:var(--panel) }
.faq details{ border-bottom:1px solid var(--rule) }
.faq details:last-child{ border-bottom:0 }
.faq summary{
  cursor:pointer; list-style:none; padding:15px 18px;
  font-size:14px; font-weight:700; color:var(--white); display:flex; justify-content:space-between; gap:14px;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:"+"; color:var(--signal); font-size:17px; line-height:1 }
.faq details[open] summary::after{ content:"\2212" }
.faq summary:hover{ color:var(--signal) }
.faq details p{ padding:0 18px 17px; font-size:13.5px; color:var(--grey-hi); max-width:78ch }

/* ------------------------------------------------------------- footer ---- */
.foot{ border-top:1px solid var(--rule); background:var(--panel); padding:30px 0 44px }
.foot-brand{ font-family:var(--display); font-size:26px; color:var(--white); letter-spacing:.07em }
.foot-facts{ margin:16px 0 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px }
.foot-facts dt{ font-size:9.5px; letter-spacing:.2em; color:var(--grey) }
.foot-facts dd{ margin:4px 0 0; font-size:12.5px; color:var(--grey-hi); word-break:break-all }
.foot-note{ margin-top:20px; font-size:11.5px; color:var(--grey) }

/* ============================== responsive ============================== */
@media (max-width:1080px){
  .set-in{ grid-template-columns:minmax(0,1fr) }
  .tv{ max-width:560px }
  .grid-layers{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .grid-mut{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .grid-legends{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:900px){
  /* keep the Legendary GIF on an integer scale: one column, x16 */
  .grid-legends{ grid-template-columns:minmax(0,1fr) }
  .legend img{ width:256px; height:256px }
}
@media (max-width:820px){
  .topnav{ display:none }
  .steps{ grid-template-columns:minmax(0,1fr) }
  .facts{ grid-template-columns:minmax(0,1fr) }
  .deck-slots{ grid-template-columns:repeat(2,minmax(0,1fr)); justify-content:stretch }
  .slot,.slot-body{ width:100% }
  .slot-body{ height:auto; aspect-ratio:1 }
  .slot-op{ display:none }
}
@media (max-width:620px){
  body{ font-size:14px }
  .meter{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .meter-cell:nth-child(2n) { border-right:0 }
  .meter-cell:nth-child(-n+2){ border-bottom:1px solid var(--rule) }
  .counter{ grid-template-columns:minmax(0,1fr) }
  .counter-cell{ border-right:0; border-bottom:1px solid var(--rule) }
  .counter-cell:last-child{ border-bottom:0 }
  .grid-mut{ grid-template-columns:minmax(0,1fr) }
  .grid-legends{ grid-template-columns:minmax(0,1fr) }
  .legend img{ width:256px; height:256px }        /* x16 */
  .grid-layers{ grid-template-columns:minmax(0,1fr) }
  .foot-facts{ grid-template-columns:minmax(0,1fr) }
  .tier{ grid-template-columns:88px 1fr 78px; gap:10px; padding:10px 12px }
  .ch{ width:44px; height:44px }
  .grid-tokens{ grid-template-columns:repeat(auto-fill,minmax(88px,1fr)) }
  .price-supply{ margin-left:0 }
}

/* ========================== reduced motion path ========================== */
@media (prefers-reduced-motion: reduce){
  .page-noise{ transition:none }
  .led.blink{ animation:none }
  .tv-slate{ transition:none }
  .go,.ch,.btn{ transition:none }
}
html.rm .go,html.rm .ch,html.rm .btn,html.rm .tv-slate{ transition:none }