/* Agents vs Hackers: a moonlit rooftop in hard pixels. Indigo night, cream chassis, agent cyan, hacker red, ember buttons.
   Square corners, 3px ink outlines, hard offset shadows, pixel fonts for everything you scan and Inter for what you read. */
:root {
  --night: #0a0f26;
  --night-2: #111a3a;
  --night-3: #1a2550;
  --deep: #0d1431;
  --ink: #05081a;
  --bevel: #26336b;
  --moss: #2f4a3a;
  --wool: #f3eedb;
  --wool-2: #d9d2bb;
  --muted: #9aa1c2;
  --ember: #f2a93b;
  --ember-2: #ffcf7a;
  --ember-d: #b8731e;
  --frost: #9fe3ff;
  --sage: #b7c29a;
  --sage-d: #7f8a66;
  --danger: #ff8a7a;
  --glow: #7fe7ff;
  --glow-d: #2f8fb0;
  --hack: #ff5a6e;
  --hack-d: #a8243c;
  --circuit: #1d2a5c;
  --pixel: "Pixelify Sans", "Silkscreen", monospace;
  --label: "Silkscreen", "Pixelify Sans", monospace;
  --digits: "VT323", ui-monospace, monospace;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--night); color: var(--wool); font: 15px/1.6 var(--sans); }
a { color: var(--ember-2); }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.num { font-family: var(--digits); font-size: 1.25em; line-height: 1.1; font-variant-numeric: tabular-nums; }
img, canvas { image-rendering: pixelated; }
::selection { background: var(--ember); color: var(--ink); }

/* the panel every box is made of: square, outlined in ink, a lighter bevel inside, a hard shadow outside */
.card, .nft, .metric, .stat-pill, .toast, .modal .card {
  background: var(--night-2);
  border: 3px solid var(--ink);
  box-shadow: inset 0 0 0 2px var(--bevel), 6px 6px 0 var(--ink);
}

/* ------------------------------------------------------------ nav */
.nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 24px;
  padding: 10px clamp(16px, 4vw, 48px);
  background: var(--night);
  border-bottom: 3px solid var(--ink);
  box-shadow: 0 3px 0 var(--night-3);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--wool); font: 700 24px/1 var(--pixel); }
.brand svg { width: 32px; height: 32px; }
.brand i { font-style: normal; font-size: 15px; color: var(--muted); margin: 0 2px; }
@media (max-width: 420px) { .brand span { font-size: 19px; } }
.nav nav { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.nav nav a { white-space: nowrap; color: var(--muted); text-decoration: none; padding: 8px 10px; font: 400 16px/1 var(--pixel); }
.nav nav a:hover { color: var(--wool); }
.nav nav a.on { color: var(--night); background: var(--wool); box-shadow: 3px 3px 0 var(--ink); }
.chip { display: inline-flex; align-items: center; gap: 6px; font: 400 11px/1.2 var(--label); text-transform: uppercase; letter-spacing: 0.04em; padding: 5px 8px; border: 2px solid var(--bevel); color: var(--muted); white-space: nowrap; }
.chip.live { color: var(--sage); border-color: var(--sage); }
.chip.live::before { content: ""; width: 6px; height: 6px; background: var(--sage); animation: pulse 1s steps(2) infinite; }
@keyframes pulse { 50% { opacity: 0; } }
@media (max-width: 760px) {
  .nav { flex-wrap: wrap; gap: 8px 12px; padding-top: 10px; padding-bottom: 6px; }
  .nav .chip { margin-left: auto; }
  .nav nav { order: 3; width: 100%; margin: 0 -10px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .nav nav::-webkit-scrollbar { display: none; }
}

.preview-bar { padding: 10px clamp(16px, 4vw, 48px); background: var(--deep); border-bottom: 3px solid var(--ink); color: var(--frost); font-size: 13px; text-align: center; }
body.preview details.prompt { display: none; }

/* ------------------------------------------------------------ hero */
.hero { position: relative; min-height: min(88vh, 760px); padding-bottom: 170px; overflow: hidden; display: grid; align-items: start; border-bottom: 3px solid var(--ink); background: #060a1d; }
.scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-copy {
  position: relative; z-index: 2;
  padding: clamp(40px, 9vh, 96px) clamp(16px, 4vw, 48px) 0;
  max-width: 1200px; width: 100%; margin: 0 auto;
}
.eyebrow { display: flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: 0.12em; font: 400 12px/1.4 var(--label); color: var(--glow); text-shadow: 2px 2px 0 var(--ink); }
.eyebrow .cursor { width: 8px; height: 12px; background: var(--glow); box-shadow: 2px 2px 0 var(--ink); animation: pulse 1s steps(2) infinite; }
.hero h1 { font: 700 clamp(52px, 9vw, 104px)/0.95 var(--pixel); margin: 12px 0 16px; text-shadow: 5px 5px 0 var(--ink); }
.hero h1 span { display: inline-block; }
.hero h1 .h-vs { font: 400 0.32em/1 var(--label); color: var(--ember-2); vertical-align: 0.9em; margin: 0 0.15em; text-shadow: 3px 3px 0 var(--ink); }
.hero h1 .h-hackers { color: var(--hack); text-shadow: 5px 5px 0 var(--ink), 0 0 18px rgba(255, 90, 110, 0.35); }
.hero p.lede { max-width: 600px; font-size: clamp(16px, 2vw, 18px); color: var(--wool-2); margin: 0 0 24px; text-shadow: 2px 2px 0 var(--ink); }
.hero-stats { display: flex; flex-wrap: wrap; gap: 14px; }
.stat-pill { padding: 10px 14px 8px; min-width: 150px; }
.stat-pill b { display: block; font: 400 32px/1 var(--digits); }
.stat-pill span { color: var(--muted); font: 400 10px/1.5 var(--label); text-transform: uppercase; }
@media (max-width: 759px) {
  /* on a phone the copy fills the sky; the pasture and its sheep sit below the stats */
  .hero { min-height: 0; padding-bottom: 130px; }
  .hero-copy { padding-top: 112px; }
  .stat-pill { min-width: 0; flex: 1 1 calc(50% - 14px); padding: 10px 12px 8px; }
  .stat-pill b { font-size: 24px; white-space: nowrap; }
}

/* ------------------------------------------------------------ sections */
main { max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px) 80px; }
section { padding-top: 56px; scroll-margin-top: 64px; }
/* a circuit trace between sections: a dim bus with a lit node every 64px */
section + section::before { content: ""; display: block; height: 12px; margin-bottom: 44px;
  background: linear-gradient(90deg, transparent 0 28px, var(--glow-d) 28px 36px, transparent 36px 64px) 0 2px / 64px 8px repeat-x,
    linear-gradient(var(--circuit), var(--circuit)) 0 4px / 100% 4px no-repeat; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.section-head h2 { font: 700 clamp(32px, 4.5vw, 46px)/1.05 var(--pixel); margin: 0; text-shadow: 4px 4px 0 var(--ink); }
.section-head p { color: var(--muted); margin: 0; max-width: 560px; }
.card { padding: 22px; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 880px) { .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); } }
h3 { font: 600 20px/1.25 var(--pixel); margin: 0 0 12px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.spread { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
@media (max-width: 400px) { .spread > .chip { white-space: normal; } }
.spread:has(> h3) { margin-bottom: 12px; }
.spread > h3 { margin-bottom: 0; }

/* ladder */
.ladder { display: grid; gap: 10px; }
.rung { position: relative; display: grid; grid-template-columns: 124px minmax(0, 1fr) 64px; align-items: center; gap: 12px; padding: 10px 12px; background: var(--deep); border: 2px solid var(--ink); }
.rung.now { border-color: var(--ember); box-shadow: 0 0 0 2px var(--ink), inset 0 0 0 2px rgba(242, 169, 59, 0.18); }
.rung.done { opacity: 0.5; }
.rung .bar { height: 12px; background: var(--night-3); border: 2px solid var(--ink); position: relative; }
.rung .bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--ember) 0 6px, var(--ember-d) 6px 8px); transition: width 0.6s steps(12); }
.rung.done .bar i { background: repeating-linear-gradient(90deg, var(--sage) 0 6px, var(--sage-d) 6px 8px); }
.rung .price { text-align: right; font: 400 24px/1 var(--digits); }
.rung .range { font: 400 10px/1.5 var(--label); color: var(--muted); }
.rung .num { white-space: nowrap; font-size: 20px; }

/* inputs */
.stepper { display: inline-flex; align-items: stretch; border: 3px solid var(--ink); background: var(--deep); }
.stepper button { background: var(--night-3); border: 0; width: 42px; height: 42px; cursor: pointer; font: 700 22px/1 var(--pixel); color: var(--wool); box-shadow: inset 0 -3px 0 var(--ink); }
.stepper button:hover { background: #24316a; }
.stepper button:active { box-shadow: inset 0 3px 0 var(--ink); }
.stepper input { width: 56px; text-align: center; background: none; border: 0; font: 400 30px/1 var(--digits); -moz-appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.field { width: 100%; background: var(--deep); border: 3px solid var(--ink); box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.35); padding: 10px 12px; font-family: var(--mono); font-size: 14px; border-radius: 0; }
.field:focus, .stepper:focus-within { outline: 3px solid var(--ember); outline-offset: 0; }
select.field { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--wool) 50%), linear-gradient(135deg, var(--wool) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px 13px; cursor: pointer; text-decoration: none;
  font: 600 16px/1 var(--pixel); color: #1b1203; background: var(--ember);
  border: 3px solid var(--ink); border-radius: 0;
  box-shadow: inset 0 -4px 0 var(--ember-d), inset 0 3px 0 var(--ember-2), 4px 4px 0 var(--ink);
}
.btn:hover { background: #ffb84f; }
.btn:active { transform: translate(2px, 2px); box-shadow: inset 0 -4px 0 var(--ember-d), 2px 2px 0 var(--ink); }
.btn:focus-visible { outline: 3px solid var(--wool); outline-offset: 2px; }
.btn.ghost { background: var(--night-3); color: var(--wool); box-shadow: inset 0 -4px 0 var(--deep), inset 0 3px 0 #2c3a78, 4px 4px 0 var(--ink); }
.btn.ghost:hover { background: #24316a; }
.btn.small { padding: 8px 12px 10px; font-size: 14px; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

.price-big { font: 400 54px/1 var(--digits); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; text-align: right; font: 400 20px/1.1 var(--digits); }
.note { border-left: 6px solid var(--ember); padding: 10px 12px; background: var(--deep); font-size: 13px; color: var(--wool-2); }
details.prompt summary { cursor: pointer; color: var(--muted); font: 400 11px/1.5 var(--label); text-transform: uppercase; margin-top: 14px; }
pre.prompt-text { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 260px; overflow: auto; background: var(--ink); border: 3px solid var(--bevel); padding: 12px; font: 12px/1.5 var(--mono); color: var(--wool-2); }
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 30px 1fr; gap: 10px; font-size: 14px; color: var(--wool-2); }
.steps li::before { content: counter(s); width: 26px; height: 26px; background: var(--deep); border: 2px solid var(--ember); display: grid; place-items: center; font: 400 18px/1 var(--digits); color: var(--ember-2); }

/* NFT cards */
.nfts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 20px; }
.nft { display: flex; flex-direction: column; padding: 8px; }
.nft .art { aspect-ratio: 1; background: var(--night-3); display: block; width: 100%; border: 3px solid var(--ink); }
.nft .art img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.nft .meta { padding: 10px 4px 4px; display: grid; gap: 8px; font-size: 13px; }
.nft .meta .title { font: 600 16px/1.2 var(--pixel); }
.nft .listing { display: grid; gap: 2px; }
.nft .listing b { font-size: 26px; white-space: nowrap; }
.tag { display: inline-block; font: 400 10px/1.2 var(--label); text-transform: uppercase; padding: 3px 6px; border: 2px solid var(--bevel); color: var(--wool-2); }
.tag.agent { color: var(--glow); border-color: var(--glow-d); }
.tag.hacker { color: var(--hack); border-color: var(--hack-d); }
.tag.taken { color: #ffd0c8; border-color: var(--hack); background: rgba(255, 90, 110, 0.12); }
.empty { padding: 40px; text-align: center; color: var(--muted); border: 3px dashed var(--bevel); font: 400 16px/1.4 var(--pixel); }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.seg { display: inline-flex; border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.seg button { background: var(--night-2); border: 0; padding: 7px 12px; cursor: pointer; color: var(--muted); font: 400 15px/1 var(--pixel); }
.seg button + button { border-left: 2px solid var(--ink); }
.seg button:hover { color: var(--wool); }
.seg button.on { background: var(--wool); color: var(--night); }

/* ledger */
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 880px) { .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.metric { padding: 14px 16px; }
.metric span { color: var(--muted); font: 400 10px/1.5 var(--label); text-transform: uppercase; }
.metric b { display: block; font: 400 34px/1.1 var(--digits); margin-top: 4px; overflow-wrap: anywhere; }
.metric small { color: var(--muted); font-size: 12px; }
.meter { height: 16px; background: var(--night-3); border: 3px solid var(--ink); margin-top: 10px; }
.meter i { display: block; height: 100%; min-width: 4px; background: repeating-linear-gradient(90deg, var(--sage) 0 6px, var(--sage-d) 6px 8px); }
.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-height: 420px; overflow: auto; }
.feed li { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; padding: 9px 4px; border-bottom: 2px solid var(--deep); font-size: 14px; }
.feed li .when { color: var(--muted); font: 400 18px/1 var(--digits); }
.feed .ico { width: 20px; height: 20px; shape-rendering: crispEdges; }

/* rules */
.rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 880px) { .rules { grid-template-columns: minmax(0, 1fr); } }
.rule h3 { display: flex; align-items: center; gap: 10px; }
.rule h3 svg { shape-rendering: crispEdges; }
.rule p { color: var(--wool-2); font-size: 14px; margin: 0 0 8px; }

footer { border-top: 3px solid var(--ink); box-shadow: 0 -3px 0 var(--night-3); padding: 28px clamp(16px, 4vw, 48px) 48px; color: var(--muted); font-size: 13px; }
footer .addr { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 24px; margin-top: 12px; font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; max-width: min(560px, calc(100vw - 32px)); padding: 12px 16px; font-size: 14px; background: var(--night-3); }
.toast[data-kind="ok"] { border-color: var(--sage); }
.toast[data-kind="error"] { border-color: var(--danger); }
.banner { background: var(--deep); border: 3px solid var(--frost); color: var(--frost); padding: 10px 14px; font-size: 13px; margin-top: 24px; box-shadow: 6px 6px 0 var(--ink); }
.modal { position: fixed; inset: 0; z-index: 40; background: rgba(5, 8, 26, 0.82); display: grid; place-items: center; padding: 16px; }
.modal .card { width: min(560px, 100%); max-height: 90vh; overflow: auto; background: var(--night-2); }
.modal label { font: 400 11px/1.5 var(--label); text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) { .chip.live::before { animation: none; } .rung .bar i { transition: none; } }

/* ------------------------------------------------------------ Agents vs Hackers additions */
hr.dash { border: 0; border-top: 3px dashed var(--bevel); margin: 22px 0; }
.glow { color: var(--glow); text-shadow: 0 0 12px rgba(127, 231, 255, 0.35); }
.metric.agent b { color: var(--glow); }
.metric.hacker b { color: var(--hack); }
.metric.agent { box-shadow: inset 0 0 0 2px var(--bevel), inset 0 4px 0 2px var(--glow-d), 6px 6px 0 var(--ink); }
.metric.hacker { box-shadow: inset 0 0 0 2px var(--bevel), inset 0 4px 0 2px var(--hack-d), 6px 6px 0 var(--ink); }
.nft.is-hacker { box-shadow: inset 0 0 0 2px var(--hack-d), 6px 6px 0 var(--ink); }
.nft .title .id { color: var(--muted); }
/* the live feed reads as a terminal */
.card.terminal { padding: 0; background: #070b1c; }
.term-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 3px solid var(--ink); background: var(--night-3); font: 400 11px/1 var(--label); color: var(--muted); text-transform: uppercase; }
.term-bar i { width: 8px; height: 8px; background: var(--bevel); box-shadow: 2px 2px 0 var(--ink); }
.term-bar i:first-child { background: var(--hack); }
.term-bar i:nth-child(2) { background: var(--ember); }
.term-bar i:nth-child(3) { background: var(--glow); }
.term-bar span { margin-left: 8px; }
.terminal .feed { padding: 6px 14px 10px; font: 13px/1.45 var(--mono); }
.terminal .feed li { border-bottom: 1px dashed #141c3c; }
.terminal .feed li b { color: var(--glow); font-weight: 600; }
.terminal .feed li b.wf { color: var(--hack); }
.terminal .feed li.hit span:not(.when) { color: #ffd0c8; }
.rung.now { border-color: var(--glow); box-shadow: 0 0 0 2px var(--ink), inset 0 0 0 2px rgba(127, 231, 255, 0.16); }
.rung .bar i { background: repeating-linear-gradient(90deg, var(--glow) 0 6px, var(--glow-d) 6px 8px); }
.steps li::before { border-color: var(--glow); color: var(--glow); }
.note { border-left-color: var(--glow); }
@media (prefers-reduced-motion: reduce) { .eyebrow .cursor { animation: none; } }
.rung-note { grid-column: 1 / -1; display: flex; text-transform: uppercase; align-items: center; gap: 8px; margin-top: -2px; font: 400 10px/1.5 var(--label); letter-spacing: 0.06em; color: var(--glow); }
.rung-note::before { content: ""; width: 6px; height: 6px; background: var(--glow); box-shadow: 0 0 6px var(--glow); }
.pips { display: inline-flex; gap: 2px; vertical-align: middle; }
.pips i { width: 6px; height: 6px; background: var(--night-3); box-shadow: inset 0 0 0 1px var(--hack-d); }
.pips i.on { background: var(--hack); box-shadow: 0 0 4px rgba(255, 90, 110, 0.7); }
.tag.alpha { display: inline-flex; align-items: center; gap: 6px; }
.alpha-table { width: 100%; border-collapse: collapse; margin: 4px 0 12px; font: 400 19px/1.1 var(--digits); }
.alpha-table th { text-align: left; font: 400 10px/1.4 var(--label); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding: 0 8px 6px 0; border-bottom: 2px solid var(--ink); }
.alpha-table td { padding: 7px 8px 7px 0; border-bottom: 1px dashed var(--circuit); color: var(--wool); }
.alpha-table td:first-child { display: flex; align-items: center; gap: 10px; color: var(--hack); }
.alpha-table tr:last-child td { border-bottom: 0; }

.mintbar { --bar: var(--glow); --bar-2: var(--glow); --bar-d: var(--glow-d); }
/* ------------------------------------------------------------ hero mint bar
   Only the generation on sale: Gen 0 until it sells out, then Gen 1 in its place. */
.mintbar { display: block; max-width: 760px; margin: 0 0 18px; padding: 16px 18px 14px; color: inherit; text-decoration: none;
  background: rgba(13, 20, 49, 0.92); border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px var(--bar), 6px 6px 0 var(--ink); }
.mintbar:hover { box-shadow: inset 0 0 0 2px var(--bar-2), 6px 6px 0 var(--ink); }
.mb-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 400 12px/1.4 var(--label); text-transform: uppercase; letter-spacing: 0.06em; }
.mb-label { display: inline-flex; align-items: center; gap: 8px; color: var(--bar-2); }
.mb-label i { width: 8px; height: 8px; background: var(--bar); box-shadow: 0 0 8px var(--bar); animation: mb-blink 1.2s steps(2) infinite; }
.mb-left { color: var(--muted); }
@keyframes mb-blink { 50% { opacity: 0.25; } }
.mb-count { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 10px; }
.mb-count b { font: 400 clamp(44px, 7vw, 68px)/0.9 var(--digits); color: var(--wool); text-shadow: 3px 3px 0 var(--ink); }
.mb-count .mb-of { font: 400 clamp(24px, 3.4vw, 34px)/1 var(--digits); color: var(--muted); }
.mb-count .mb-pct { margin-left: auto; font-size: clamp(30px, 4.4vw, 44px); color: var(--bar-2); }
.mb-track { position: relative; height: 26px; background: var(--ink); border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px var(--bevel); margin-bottom: 30px; }
.mb-track > i { position: absolute; left: 2px; top: 2px; bottom: 2px; max-width: calc(100% - 4px); background: repeating-linear-gradient(90deg, var(--bar) 0 10px, var(--bar-d) 10px 12px); box-shadow: 0 0 12px var(--bar); transition: width 0.6s steps(12); }
.mb-track > i::after { content: ""; position: absolute; right: -2px; top: -4px; bottom: -4px; width: 4px; background: var(--wool); box-shadow: 0 0 8px var(--wool); }
.mb-note { font-size: 14px; color: var(--wool-2); }
/* ------------------------------------------------------------ refund guarantee (hero card under the mint bar) */
.refund-guard { --rg: var(--ember); --rg-2: var(--ember-2); --rg-d: var(--ember-d);
  display: block; max-width: 760px; margin: 0 0 18px; padding: 14px 18px 12px; color: inherit; text-decoration: none;
  background: rgba(13, 20, 49, 0.92); border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px var(--rg), 6px 6px 0 var(--ink); }
.refund-guard:hover { box-shadow: inset 0 0 0 2px var(--rg-2), 6px 6px 0 var(--ink); }
.refund-guard[data-state="cleared"] { --rg: var(--sage); --rg-2: var(--sage); --rg-d: var(--sage-d); }
.refund-guard[data-state="refunding"] { --rg: var(--hack); --rg-2: var(--danger); --rg-d: var(--hack-d); }
.rg-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 400 12px/1.4 var(--label); text-transform: uppercase; letter-spacing: 0.06em; }
.rg-label { display: inline-flex; align-items: center; gap: 8px; color: var(--rg-2); }
.rg-label svg { width: 20px; height: 20px; }
.rg-state { padding: 2px 8px; color: var(--ink); background: var(--rg); box-shadow: 0 0 8px var(--rg); }
.rg-text { margin: 8px 0 10px; font-size: 15px; color: var(--wool); }
.rg-text b { color: var(--rg-2); }
.rg-track { position: relative; height: 14px; background: var(--ink); border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px var(--bevel); }
.rg-track > i { position: absolute; left: 2px; top: 2px; bottom: 2px; max-width: calc(100% - 4px); background: repeating-linear-gradient(90deg, var(--rg) 0 8px, var(--rg-d) 8px 10px); transition: width 0.6s steps(12); }
.rg-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; color: var(--muted); }
.rg-foot .num { color: var(--wool); font-size: 20px; }
.rg-note { box-shadow: inset 3px 0 0 var(--ember); }
.refund-card { margin-bottom: 18px; box-shadow: inset 0 0 0 2px var(--hack), 6px 6px 0 var(--ink); }
@media (max-width: 640px) { .refund-guard { padding: 12px 12px 10px; } .rg-text { font-size: 14px; } }
@media (max-width: 760px) {
  .mintbar { padding: 12px 12px 10px; }
}

/* the four price tiers under the bar: the one on sale lit, sold ones dimmed */
.mb-track { margin-bottom: 12px; }
.mb-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
.mb-steps span { padding: 4px 6px; text-align: center; white-space: nowrap; font: 400 10px/1.4 var(--label); text-transform: uppercase; color: var(--muted); background: var(--ink); box-shadow: inset 0 0 0 1px var(--bevel); }
.mb-steps span.now { color: var(--ink); background: var(--bar); box-shadow: 0 0 8px var(--bar); }
.mb-steps span.done { opacity: 0.45; text-decoration: line-through; }
@media (max-width: 760px) { .mb-steps span { font-size: 8px; padding: 4px 2px; } }

.slots { border: 3px solid var(--glow); background: var(--deep); padding: 12px 14px; margin: 0 0 16px; box-shadow: 4px 4px 0 var(--ink); }
.slots.compact { margin: 16px 0 0; border-width: 2px; box-shadow: none; }
.slots-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.slots-label { font: 400 12px/1.2 var(--label); text-transform: uppercase; letter-spacing: 0.04em; color: var(--glow); }
.slots-big { font-size: 46px; color: var(--glow); }
.slots-big small { font-size: 0.5em; color: var(--muted); }
.slots.compact .slots-big { font-size: 30px; }
.slots .pips { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin: 8px 0 10px; }
.slots .pips i { width: auto; height: 14px; border: 2px solid var(--ink); background: var(--night-3); box-shadow: none; }
.slots .pips i.on { background: var(--glow); box-shadow: inset 0 -3px 0 var(--glow-d), 0 0 6px rgba(80, 230, 255, 0.35); }
.slots.empty { border-color: var(--danger); }
.slots.empty .slots-big { color: var(--danger); }
.stack { display: grid; gap: 18px; align-content: start; }

/* invites */
.rule.wide { grid-column: 1 / -1; }
.slots-bonus { margin-top: 2px; }
.slots-bonus b { font-size: 18px; color: var(--glow); }
.invite-link { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }

/* Whitehat: the free guard (shown only where the deployment has one) */
.card.whitehat { grid-column: 1 / -1; }
.whitehat-body { display: flex; gap: 18px; align-items: center; margin-top: 10px; }
.whitehat-body > div { flex: 1; }
.whitehat-art { width: 128px; height: 128px; image-rendering: pixelated; border: 2px solid var(--bevel); background: var(--deep); flex: none; }
.whitehat-facts { margin: 12px 0 0; padding-left: 18px; color: var(--wool-2); }
.whitehat-facts li { margin: 4px 0; }
.rule-ico { image-rendering: pixelated; }
.whitehat-offer { border-left-color: #f4f6fb; }
@media (max-width: 560px) { .whitehat-body { flex-direction: column; align-items: flex-start; } }

/* market pages */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; }
.pager[hidden] { display: none; }
.pager button { min-width: 38px; background: var(--night-2); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); padding: 7px 10px; cursor: pointer; color: var(--muted); font: 400 15px/1 var(--pixel); }
.pager button:hover:not(:disabled) { color: var(--wool); }
.pager button.on { background: var(--wool); color: var(--night); }
.pager button:disabled { opacity: .4; cursor: default; box-shadow: none; transform: translate(3px, 3px); }
.pager .pg-gap { color: var(--muted); font: 400 15px/1 var(--pixel); }
.pager .pg-info { flex-basis: 100%; text-align: center; }