/* Ant Trail. SimAnt school (Maxis 1991, Mac System 6 windows on warm sand). VGA 6-bit palette, one accent = scent. */
@font-face { font-family: "Trail Chicago"; src: url(/fonts/TrailChicago.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Atkinson Mono"; src: url(/fonts/AtkinsonMono.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Atkinson Next"; src: url(/fonts/AtkinsonNext.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }
:root {
  --paper: #FCF0D0; --sand-l: #F0D49C; --sand-m: #DCB47C; --sand-d: #C09060;
  --grass-d: #2C5418; --grass-m: #487C24; --grass-l: #6CA034; --grass-h: #9CC850;
  --dirt-d: #4C3020; --dirt-m: #74482C; --dirt-l: #9C6C40; --ink: #1C1410; --ink-2: #0C0804;
  --food-d: #B47818; --food-m: #F0B828; --food-l: #FCE070; --food-h: #FCFCDC;
  --scent-d: #6C34B0; --scent-m: #A860E8; --scent-l: #D8A8FC;
  --peb-d: #646058; --peb-m: #908C80; --peb-l: #C0BCAC;
  --u: 3px; --k: 3;
  --px: "Trail Chicago", "Atkinson Mono", monospace; --mono: "Atkinson Mono", ui-monospace, monospace; --body: "Atkinson Next", system-ui, sans-serif;
  --cur-arrow: url(/px/cur/arrow@2x.png) 0 0, default; --cur-grab: url(/px/cur/grab@2x.png) 14 14, pointer;
  --cur-scent: url(/px/cur/scent@2x.png) 14 14, crosshair; --cur-inspect: url(/px/cur/inspect@2x.png) 10 10, pointer;
  color-scheme: light;
}
@media (max-width: 760px) { :root { --u: 2px; --k: 2; } }
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--sand-l); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; color: var(--ink); font: 400 16px/1.5 var(--body); cursor: var(--cur-arrow);
  background: var(--sand-l) url(/px/sand@3x.png) repeat; background-size: 96px 96px; image-rendering: pixelated; overflow-x: hidden; }
@media (max-width: 760px) { body { background-image: url(/px/sand@2x.png); background-size: 64px 64px; } }
img, canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
a { color: inherit; }
a, button, [role=button], summary, label, .ca, select, .scrub { cursor: var(--cur-grab); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--scent-m); outline-offset: 2px; }
.px { font-family: var(--px); font-weight: 400; text-transform: uppercase; letter-spacing: 0; -webkit-font-smoothing: none; -moz-osx-font-smoothing: unset; font-smooth: never; }
.num, code, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.up { color: var(--grass-d); } .down { color: var(--dirt-m); }

/* ---------- menu bar (Mac 1991) ---------- */
.menubar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 18px; height: 44px; padding: 0 16px;
  background: var(--paper); border-bottom: 2px solid var(--ink); }
.menubar .mb-logo { display: flex; align-items: center; gap: 8px; min-height: 40px; text-decoration: none; }
.menubar .mb-logo img { width: 132px; height: 20px; display: block; }
.menubar nav { display: flex; gap: 2px; }
.menubar nav a { font: 12px/12px var(--px); padding: 8px 10px; text-decoration: none; text-transform: uppercase; -webkit-font-smoothing: none; }
.menubar nav a:hover, .menubar nav a[aria-current] { background: var(--ink); color: var(--paper); }
.mb-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
@media (max-width: 960px) { .menubar nav { display: none; } .menubar .mb-conn { display: none; } }
@media (max-width: 760px) { .menubar { gap: 8px; padding: 0 10px; height: 52px; } .menubar .mb-logo img { width: 66px; height: 10px; } .mb-right { gap: 6px; } }

/* ---------- buttons: 9-slice PNGs, stepped pixel corners ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 10px; text-decoration: none; white-space: nowrap;
  border-style: solid; border-width: 12px; border-image: url(/px/ui/btn@3x.png) 12 fill / 12px stretch; color: var(--ink);
  font: 24px/24px var(--px); text-transform: uppercase; -webkit-font-smoothing: none; user-select: none; transition: transform 60ms steps(1); }
.btn:hover { border-image-source: url(/px/ui/btn_hover@3x.png); }
.btn:active, .btn.is-press { border-image-source: url(/px/ui/btn_press@3x.png); color: var(--paper); transform: translateY(3px); }
.btn[disabled], .btn.is-off { border-image-source: url(/px/ui/btn_hover@3x.png); color: var(--peb-d); cursor: var(--cur-arrow); transform: none; }
.btn.b-gold { border-image-source: url(/px/ui/btn_gold@3x.png); }
.btn.b-gold:hover { border-image-source: url(/px/ui/btn_gold_hover@3x.png); }
.btn.b-gold:active { border-image-source: url(/px/ui/btn_gold_press@3x.png); color: var(--ink); }
.btn.b-main { border-width: 18px; border-image: url(/px/ui/btn_default_ring@3x.png) 18 fill / 18px stretch; min-height: 60px; padding: 0 14px; }
.btn.b-main:hover { border-image-source: url(/px/ui/btn_default_ring@3x.png); background: none; color: var(--scent-d); }
.btn.b-main:active { transform: translateY(3px); color: var(--scent-d); }
.btn svg { display: block; }
.btn.b-s { min-height: 36px; border-width: 8px; border-image: url(/px/ui/btn@2x.png) 8 fill / 8px stretch; font-size: 12px; line-height: 12px; padding: 0 6px; gap: 6px; }
.btn.b-s:hover { border-image-source: url(/px/ui/btn_hover@2x.png); }
.btn.b-s:active { border-image-source: url(/px/ui/btn_press@2x.png); transform: translateY(2px); }
.btn.b-s.b-gold { border-image-source: url(/px/ui/btn_gold@2x.png); } .btn.b-s.b-gold:hover { border-image-source: url(/px/ui/btn_gold_hover@2x.png); }
.btn.b-s.b-gold:active { border-image-source: url(/px/ui/btn_gold_press@2x.png); }
@media (max-width: 760px) {
  .btn { border-width: 8px; border-image: url(/px/ui/btn@2x.png) 8 fill / 8px stretch; min-height: 44px; font-size: 12px; line-height: 12px; }
  .btn:hover { border-image-source: url(/px/ui/btn_hover@2x.png); } .btn:active { border-image-source: url(/px/ui/btn_press@2x.png); transform: translateY(2px); }
  .btn.b-gold { border-image-source: url(/px/ui/btn_gold@2x.png); } .btn.b-gold:hover { border-image-source: url(/px/ui/btn_gold_hover@2x.png); }
  .btn.b-gold:active { border-image-source: url(/px/ui/btn_gold_press@2x.png); }
  .btn.b-main { border-width: 12px; border-image: url(/px/ui/btn_default_ring@2x.png) 12 fill / 12px stretch; min-height: 52px; }
  .btn.b-s { min-height: 40px; }
}

/* ---------- CA chip ---------- */
.ca { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 8px; background: var(--paper); border: 2px solid var(--ink); font: inherit; max-width: 100%; }
.ca-k { font: 12px/12px var(--px); -webkit-font-smoothing: none; }
.ca-v { font: 500 13px/1.2 var(--mono); word-break: break-all; text-align: left; }
.ca-c { font: 12px/12px var(--px); -webkit-font-smoothing: none; padding: 3px 5px; background: var(--ink); color: var(--paper); }
button.ca:hover { background: var(--food-h); } button.ca.is-done .ca-c { background: var(--scent-d); }
.ca-pend { color: var(--dirt-m); } .ca-pend .ca-v { font: 12px/12px var(--px); -webkit-font-smoothing: none; }
.tick { font: 700 14px var(--mono); }

/* ---------- windows ---------- */
.win { position: relative; background: var(--paper); border: var(--u) solid var(--ink); margin: 0 auto; }
.win-t { position: relative; height: calc(11 * var(--u)); display: flex; align-items: center; justify-content: center;
  background: url(/px/ui/tb-l@3x.png) left top / auto 100% no-repeat, url(/px/ui/tb-r@3x.png) right top / auto 100% no-repeat, url(/px/ui/tb-m@3x.png) left top / auto 100% repeat-x; }
@media (max-width: 760px) { .win-t { background-image: url(/px/ui/tb-l@2x.png), url(/px/ui/tb-r@2x.png), url(/px/ui/tb-m@2x.png); } }
.win-n { margin: 0; padding: 0 12px; height: calc(9 * var(--u)); display: flex; align-items: center; background: var(--paper); font: 24px/24px var(--px); text-transform: uppercase; -webkit-font-smoothing: none; }
.win-n img { display: block; }
@media (max-width: 760px) { .win-n { font-size: 12px; line-height: 12px; padding: 0 8px; } .win-n img { width: 66px; height: 10px; } }
.win-s { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; padding: 8px 14px; border-top: 2px solid var(--ink); background: var(--paper); }
.shell { width: min(1400px, calc(100% - 48px)); margin: 0 auto; }
@media (max-width: 760px) { .shell { width: calc(100% - 20px); } }
section { scroll-margin-top: 60px; }

/* zoom rect (Mac window open): 3 ink outlines grow, 180 ms */
.zr { position: fixed; z-index: 90; border: 2px solid var(--ink); pointer-events: none; }

/* ---------- hero: the yard ---------- */
.hero { margin-top: 18px; }
.hero .win-b { position: relative; height: calc(100svh - 168px); max-height: 980px; min-height: 540px; overflow: hidden; background: var(--grass-m); cursor: var(--cur-scent); }
.hero canvas.yard { position: absolute; left: 0; top: 0; display: block; }
.yard-intro { position: absolute; z-index: 3; left: 24px; top: 24px; width: max-content; max-width: 46%; padding: 20px 22px 22px; background: var(--paper); border: 3px solid var(--ink); cursor: var(--cur-arrow); }
.yard-intro h1 { margin: 0; line-height: 0; }
.yard-intro h1 img { width: 532px; height: 84px; }
@media (max-width: 1340px) { .yard-intro h1 img { width: 399px; height: 63px; } .yard-intro { max-width: 52%; } }
.yard-intro .lead { margin: 14px 0 18px; font: 700 22px/1.3 var(--body); max-width: 30ch; }
.yard-intro .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.yard-tag { position: absolute; z-index: 4; right: 14px; top: 14px; padding: 6px 8px; background: var(--paper); border: 2px solid var(--ink); font: 12px/12px var(--px); -webkit-font-smoothing: none; }
.yard-tag b { font-weight: 400; color: var(--scent-d); }
.yard-labels { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.yl { position: absolute; transform: translate(-50%, 0); padding: 1px 4px; background: var(--paper); border: 1px solid var(--ink); font: 700 12px/1.25 var(--mono); white-space: nowrap; }
.yl.hot { background: var(--scent-d); color: var(--paper); border-color: var(--ink); }
.yl.dim { color: var(--peb-d); }
.tip { position: absolute; z-index: 6; pointer-events: none; min-width: 200px; background: var(--paper); border: 2px solid var(--ink); display: none; }
.tip .tip-t { padding: 4px 8px; background: var(--ink); color: var(--paper); font: 12px/12px var(--px); -webkit-font-smoothing: none; }
.tip dl { margin: 0; padding: 6px 8px; display: grid; grid-template-columns: auto auto; gap: 2px 14px; font: 500 13px/1.35 var(--mono); }
.tip dt { color: var(--dirt-m); } .tip dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.tip .tip-h { padding: 4px 8px 6px; font: 12px/12px var(--px); -webkit-font-smoothing: none; color: var(--scent-d); }
.hero .win-s { font: 500 14px/1.3 var(--mono); }
.stat { display: inline-flex; align-items: baseline; gap: 8px; }
.stat .k { font: 12px/12px var(--px); -webkit-font-smoothing: none; }
.stat .v { font: 700 18px/1 var(--mono); font-variant-numeric: tabular-nums; min-width: 3ch; }
.stat .v.hot { color: var(--scent-d); }
.hero .win-s .alertline { flex: 1 1 260px; min-width: 0; font: 500 13px/1.3 var(--mono); color: var(--dirt-m); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero .win-s .alertline b { color: var(--scent-d); font-weight: 700; }
.hero .win-s .ca { margin-left: auto; }
.digits { display: inline-flex; overflow: hidden; height: 1em; line-height: 1; vertical-align: baseline; }
.digits .d { display: inline-block; position: relative; height: 1em; }
.digits .d i { display: block; font-style: normal; height: 1em; }
@media (max-width: 760px) {
  .hero { margin-top: 10px; }
  .hero .win-b { height: calc(100svh - 184px); min-height: 520px; max-height: 820px; }
  .yard-intro { left: 8px; right: 8px; top: 8px; width: auto; padding: 12px 12px 14px; border-width: 2px; }
  .yard-intro h1 img { width: 266px; height: 42px; }
  .yard-intro { max-width: none; }
  .yard-intro .lead { font-size: 17px; margin: 8px 0 12px; }
  .yard-intro .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .yard-intro .acts .btn { width: 100%; min-width: 0; }
  .yard-intro .acts .b-main { grid-column: 1 / -1; }
  .yard-tag { top: auto; right: auto; left: 8px; bottom: 8px; }
  .hero .win-s { gap: 6px 12px; padding: 8px 10px; }
  .hero .win-s .ca { margin-left: 0; width: 100%; }
  .hero .win-s .alertline { display: none; }
  .stat .v { font-size: 16px; } .stat { gap: 5px; }
}

/* ---------- coin window (click a crumb) ---------- */
.cw { position: absolute; z-index: 8; right: 16px; top: 16px; bottom: 16px; width: min(520px, 46%); display: none; flex-direction: column; cursor: var(--cur-arrow); border-width: 3px; }
.cw.open { display: flex; }
.cw .win-t { flex: none; }
.cw-x { position: absolute; left: calc(5 * var(--u)); top: calc(1 * var(--u)); width: calc(9 * var(--u)); height: calc(9 * var(--u)); }
.cw-b { flex: 1; overflow: auto; padding: 14px 16px 16px; overscroll-behavior: contain; }
.cw-h { display: flex; gap: 12px; align-items: center; }
.cw-img { width: 48px; height: 48px; flex: none; border: 2px solid var(--ink); background: var(--sand-m); object-fit: cover; image-rendering: auto; }
.cw-sym { font: 36px/36px var(--px); -webkit-font-smoothing: none; text-transform: uppercase; word-break: break-all; }
.cw-meta { margin-top: 4px; font: 500 14px/1.3 var(--mono); color: var(--dirt-m); }
.cw .ca { margin: 12px 0 8px; width: 100%; }
.cw-links { display: flex; gap: 8px; flex-wrap: wrap; }
.cw-k { margin: 16px 0 6px; display: flex; justify-content: space-between; align-items: baseline; font: 12px/12px var(--px); -webkit-font-smoothing: none; }
.cw-k span:last-child { font: 500 12px var(--mono); text-transform: none; color: var(--dirt-m); }
.cw-chart { width: 100%; height: 150px; display: block; border: 2px solid var(--ink); background: var(--paper); }
.cw-read { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 2px solid var(--ink); border-top: 0; }
.cw-read div { padding: 6px 8px; border-left: 2px solid var(--ink); } .cw-read div:first-child { border-left: 0; }
.cw-read .k { display: block; font: 12px/12px var(--px); -webkit-font-smoothing: none; color: var(--dirt-m); }
.cw-read .v { font: 700 18px/1.3 var(--mono); font-variant-numeric: tabular-nums; }
table.ants { width: 100%; border-collapse: collapse; font: 500 13px/1.3 var(--mono); font-variant-numeric: tabular-nums; }
table.ants th { text-align: right; padding: 0; border-bottom: 2px solid var(--ink); }
table.ants th:first-child, table.ants td:first-child { text-align: left; }
table.ants th button { width: 100%; padding: 6px 4px; text-align: inherit; font: 12px/12px var(--px); -webkit-font-smoothing: none; text-transform: uppercase; }
table.ants th button:hover, table.ants th[aria-sort=descending] button, table.ants th[aria-sort=ascending] button { background: var(--ink); color: var(--paper); }
table.ants td { padding: 6px 4px; text-align: right; border-bottom: 1px solid var(--sand-d); white-space: nowrap; }
table.ants tr.fresh td { animation: rowin 1.2s steps(6) 1; }
@keyframes rowin { 0% { background: var(--scent-l); } 100% { background: transparent; } }
table.ants .w { font-weight: 700; }
.gate { margin-top: 10px; padding: 10px 12px; border: 2px dashed var(--ink); background: var(--sand-l); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font: 400 14px/1.4 var(--body); }
.gate p { margin: 0; flex: 1 1 200px; }
@media (max-width: 760px) {
  .cw { position: fixed; inset: auto 0 0 0; top: 64px; width: auto; border-width: 2px; z-index: 60; }
  .cw-sym { font-size: 24px; line-height: 24px; }
  .cw-b { padding: 10px; }
}

/* ---------- scene windows below the hero ---------- */
.scene { margin-top: 72px; }
.scene .win-b { padding: 28px 32px 32px; }
.scene h2 { margin: 0 0 10px; font: 48px/48px var(--px); text-transform: uppercase; -webkit-font-smoothing: none; }
.scene .sub { margin: 0; max-width: 60ch; font: 400 18px/1.5 var(--body); }
@media (max-width: 760px) { .scene { margin-top: 40px; } .scene .win-b { padding: 16px 12px 18px; } .scene h2 { font-size: 24px; line-height: 24px; } .scene .sub { font-size: 16px; } }

/* scent: one trail at 4x, scrubbed by scroll */
.scent-pin { position: relative; }
.scent-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; margin-top: 22px; align-items: start; }
.scent-stage { position: relative; border: 3px solid var(--ink); background: var(--sand-l); overflow: hidden; line-height: 0; }
.scent-stage canvas { display: block; margin: 0 auto; }
.scrub { position: relative; margin-top: 14px; height: 54px; touch-action: none; }
.scrub-track { position: absolute; left: 0; right: 0; top: 20px; height: 12px; border: 2px solid var(--ink); background: var(--paper); }
.scrub-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--scent-m); }
.scrub-tick { position: absolute; top: 0; width: 2px; height: 54px; background: var(--ink); }
.scrub-tick:last-child span { left: auto; right: 6px; }
.scrub-tick span { position: absolute; top: -2px; left: 6px; font: 12px/12px var(--px); -webkit-font-smoothing: none; white-space: nowrap; }
.scrub-tick.hl { background: var(--scent-d); }
.scrub-h { position: absolute; top: 12px; width: 14px; height: 28px; margin-left: -7px; background: var(--ink); border: 2px solid var(--paper); outline: 2px solid var(--ink); cursor: var(--cur-grab); }
.readout { border: 3px solid var(--ink); background: var(--paper); }
.readout .r { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 12px; border-bottom: 2px solid var(--ink); }
.readout .r:last-child { border-bottom: 0; }
.readout .k { font: 12px/12px var(--px); -webkit-font-smoothing: none; }
.readout .v { font: 700 22px/1.2 var(--mono); font-variant-numeric: tabular-nums; }
.readout .v.hot { color: var(--scent-d); }
.readout .cap { padding: 12px; min-height: 108px; font: 400 16px/1.45 var(--body); background: var(--sand-l); }
.readout .cap b { font-weight: 700; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 26px; border: 3px solid var(--ink); background: var(--paper); }
.steps li { list-style: none; padding: 14px 16px; border-left: 2px solid var(--ink); font: 400 15px/1.45 var(--body); }
.steps li:first-child { border-left: 0; }
.steps li .n { display: block; margin-bottom: 8px; font: 24px/24px var(--px); -webkit-font-smoothing: none; color: var(--scent-d); }
.steps li.on { background: var(--food-h); }
.steps { padding: 0; }
@media (max-width: 960px) { .scent-grid { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr 1fr; } .steps li:nth-child(3) { border-left: 0; } .steps li:nth-child(n+3) { border-top: 2px solid var(--ink); } }
@media (max-width: 760px) { .scent-stage { border-width: 2px; } .readout { border-width: 2px; display: grid; grid-template-columns: 1fr 1fr; } .readout .r { border-right: 2px solid var(--ink); } .readout .cap { grid-column: 1 / -1; min-height: 0; font-size: 15px; }
  .steps { grid-template-columns: 1fr; border-width: 2px; } .steps li { border-left: 0; border-top: 2px solid var(--ink); } .steps li:first-child { border-top: 0; } }

/* colony: nest cut-away */
.filters { display: flex; flex-wrap: wrap; gap: 0; margin-top: 22px; border: 3px solid var(--ink); background: var(--paper); }
.filters .f { flex: 1 1 150px; padding: 10px 14px; border-left: 2px solid var(--ink); }
.filters .f:first-child { border-left: 0; }
.filters .f .k { display: block; font: 12px/12px var(--px); -webkit-font-smoothing: none; color: var(--dirt-m); }
.filters .f .v { font: 700 24px/1.3 var(--mono); font-variant-numeric: tabular-nums; }
.filters .f.cut .v { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--dirt-m); }
.filters .src { flex-basis: 100%; padding: 6px 14px; border-top: 2px solid var(--ink); font: 500 12px/1.4 var(--mono); color: var(--dirt-m); }
.nest-cut { position: relative; margin-top: 0; border: 3px solid var(--ink); border-top: 0; background: var(--dirt-d); overflow: hidden; line-height: 0; }
.nest-cut canvas { display: block; }
.chambers { position: absolute; inset: 0; }
.ch { position: absolute; display: block; padding: 0; line-height: 1; }
.ch:hover .chl, .ch.on .chl { background: var(--ink); color: var(--paper); }
.chl { position: absolute; left: 50%; transform: translateX(-50%); bottom: 100%; margin-bottom: 2px; padding: 2px 5px; background: var(--paper); border: 1px solid var(--ink); font: 700 12px/1.25 var(--mono); white-space: nowrap; font-variant-numeric: tabular-nums; }
.antcard { position: absolute; z-index: 5; right: 16px; top: 16px; width: 330px; display: none; line-height: 1.4; border-width: 3px; }
.antcard.open { display: block; }
.antcard .win-b { padding: 12px 14px 14px; }
.antcard dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font: 500 14px/1.35 var(--mono); font-variant-numeric: tabular-nums; }
.antcard dt { color: var(--dirt-m); } .antcard dd { margin: 0; text-align: right; font-weight: 700; }
.antcard .aw { margin: 0 0 10px; font: 700 13px/1.3 var(--mono); word-break: break-all; }
.antcard .note { margin: 10px 0 0; font: 400 13px/1.4 var(--body); color: var(--dirt-m); }
.colony-empty { position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%); padding: 10px 14px; background: var(--paper); border: 2px solid var(--ink); font: 12px/12px var(--px); -webkit-font-smoothing: none; line-height: 1.4; display: none; }
.rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 26px; border: 3px solid var(--ink); background: var(--paper); padding: 0; }
.rules li { list-style: none; padding: 12px 14px; border-left: 2px solid var(--ink); border-top: 2px solid var(--ink); font: 400 15px/1.4 var(--body); }
.rules li:nth-child(3n+1) { border-left: 0; } .rules li:nth-child(-n+3) { border-top: 0; }
.rules li b { font: 700 15px var(--mono); }
@media (max-width: 760px) {
  .filters, .nest-cut, .rules { border-width: 2px; } .filters .f { flex-basis: 50%; } .filters .f:nth-child(odd) { border-left: 0; } .filters .f:nth-child(n+3) { border-top: 2px solid var(--ink); }
  .antcard { left: 8px; right: 8px; top: 8px; width: auto; border-width: 2px; }
  .rules { grid-template-columns: 1fr; } .rules li { border-left: 0 !important; border-top: 2px solid var(--ink) !important; } .rules li:first-child { border-top: 0 !important; }
}

/* trail log */
.logbar { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: 18px; font: 500 14px/1.4 var(--mono); color: var(--dirt-m); }
.logwrap { margin-top: 12px; border: 3px solid var(--ink); background: var(--paper); overflow-x: auto; }
table.log { width: 100%; border-collapse: collapse; font: 500 14px/1.3 var(--mono); font-variant-numeric: tabular-nums; min-width: 760px; }
table.log th { padding: 8px 12px; text-align: right; font: 12px/12px var(--px); -webkit-font-smoothing: none; text-transform: uppercase; border-bottom: 2px solid var(--ink); background: var(--sand-l); }
table.log td { padding: 9px 12px; text-align: right; border-bottom: 1px solid var(--sand-d); }
table.log th:nth-child(-n+2), table.log td:nth-child(-n+2) { text-align: left; }
table.log tr:last-child td { border-bottom: 0; }
table.log tr.new td { animation: rowin 1.4s steps(7) 1; }
table.log .coin { display: flex; align-items: center; gap: 10px; }
table.log .coin img { width: 28px; height: 28px; border: 2px solid var(--ink); object-fit: cover; image-rendering: auto; background: var(--sand-m); }
table.log .coin b { font-weight: 700; }
table.log .mint { display: block; min-height: 32px; padding: 4px 0; text-align: left; font: 500 11px/1.4 var(--mono); color: var(--dirt-m); word-break: break-all; white-space: normal; max-width: 52ch; }
table.log .mint .ca-c { margin-left: 6px; padding: 1px 4px; font-size: 12px; }
table.log .mint:hover { color: var(--ink); }
table.log .lk { display: inline-flex; gap: 6px; }
table.log .lk a { display: inline-flex; align-items: center; min-height: 34px; font: 12px/12px var(--px); -webkit-font-smoothing: none; padding: 5px 8px; border: 2px solid var(--ink); text-decoration: none; background: var(--paper); }
table.log .lk a:hover { background: var(--ink); color: var(--paper); }
table.log .scent { color: var(--scent-d); font-weight: 700; }
.log-empty { padding: 34px 16px; text-align: center; }
.log-empty .px { display: block; font-size: 24px; line-height: 24px; }
.log-empty p { margin: 10px 0 0; color: var(--dirt-m); }
.logmore { margin-top: 12px; }
@media (max-width: 760px) { .logwrap { border-width: 2px; } table.log { min-width: 0; } table.log thead { display: none; }
  table.log tr { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 10px; border-bottom: 1px solid var(--sand-d); }
  table.log td { border: 0; padding: 0; text-align: left !important; } table.log td.c2 { order: -1; flex: 1 1 100%; } table.log td:last-child { flex: 1 1 100%; }
  table.log td[data-k]::before { content: attr(data-k) " "; color: var(--dirt-m); font-weight: 400; } }
  table.log td { border: 0; padding: 2px 0; text-align: left !important; } table.log td[data-k]::before { content: attr(data-k) " "; color: var(--dirt-m); font-weight: 400; } table.log td.c2 { text-align: right !important; } }

/* ending: the whole yard */
.end { margin-top: 72px; }
.end .win-b { position: relative; }
.end-yard { position: relative; height: 72vh; min-height: 440px; max-height: 760px; overflow: hidden; background: var(--grass-m); border-bottom: 3px solid var(--ink); line-height: 0; }
.end-yard canvas { position: absolute; left: 0; top: 0; }
.end-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; padding: 26px 16px 28px; text-align: center; }
.end-cta h2 { flex-basis: 100%; margin: 0 0 6px; font: 48px/48px var(--px); -webkit-font-smoothing: none; text-transform: uppercase; }
.end-cta .ca { flex-basis: auto; }
.foot { width: min(1400px, calc(100% - 48px)); margin: 26px auto 34px; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; font: 400 14px/1.5 var(--body); color: var(--dirt-d); }
.foot a { display: inline-block; padding: 8px 0; text-decoration: none; border-bottom: 2px solid var(--ink); }
@media (max-width: 760px) { .end { margin-top: 40px; } .end-yard { height: 60vh; min-height: 380px; border-bottom-width: 2px; } .end-cta h2 { font-size: 24px; line-height: 24px; } .foot { width: calc(100% - 20px); flex-direction: column; } }

/* toast for a hot trail */
.toast { position: absolute; z-index: 7; left: 50%; bottom: 18px; transform: translateX(-50%); display: none; min-width: 300px; max-width: calc(100% - 24px); }
.toast.on { display: block; }
.toast .win-b { padding: 10px 14px; font: 500 14px/1.4 var(--mono); }
.toast .win-b b { color: var(--scent-d); }

/* wallet dialog */
.dlg { position: fixed; z-index: 95; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(28, 20, 16, .35); padding: 12px; }
.dlg.open { display: flex; }
.dlg .win { width: min(460px, 100%); }
.dlg .win-b { padding: 16px; }
.dlg p { margin: 0 0 12px; }
.dlg .wl { display: grid; gap: 8px; }
.dlg .msg { margin-top: 10px; font: 500 14px/1.4 var(--mono); color: var(--dirt-m); }
.dlg .x { position: absolute; left: calc(5 * var(--u)); top: calc(1 * var(--u)); width: calc(9 * var(--u)); height: calc(9 * var(--u)); }

/* docs */
.doc { margin-top: 26px; }
.doc .win-b { padding: 28px 34px 34px; max-width: none; }
.doc h1 { margin: 0 0 8px; font: 48px/48px var(--px); -webkit-font-smoothing: none; text-transform: uppercase; }
.doc h2 { margin: 34px 0 10px; font: 24px/24px var(--px); -webkit-font-smoothing: none; text-transform: uppercase; }
.doc p, .doc li { max-width: 72ch; font-size: 17px; }
.doc code { font-size: 15px; background: var(--sand-l); padding: 1px 4px; }
.doc table { border-collapse: collapse; width: 100%; font: 500 14px/1.35 var(--mono); font-variant-numeric: tabular-nums; margin-top: 8px; }
.doc th, .doc td { border: 2px solid var(--ink); padding: 6px 10px; text-align: left; vertical-align: top; }
.doc th { background: var(--sand-l); font: 12px/12px var(--px); -webkit-font-smoothing: none; text-transform: uppercase; }
.doc .tw { overflow-x: auto; }
@media (max-width: 760px) { .doc .win-b { padding: 16px 12px; } .doc h1 { font-size: 24px; line-height: 24px; } .doc p, .doc li { font-size: 16px; } }

/* 404 */
.nf { min-height: calc(100vh - 44px); display: flex; align-items: center; justify-content: center; padding: 20px 10px; }
.nf .win { width: min(560px, 100%); }
.nf .win-b { padding: 22px; text-align: center; }
.nf .art { display: block; margin: 0 auto 14px; width: 96px; height: 96px; }
.nf h1 { margin: 0 0 16px; font: 24px/24px var(--px); -webkit-font-smoothing: none; text-transform: uppercase; }
@media (max-width: 760px) { #logb:not(.all) tr:nth-child(n+7) { display: none; } }

/* ---------- how-it-works film (stage 7): a Mac window with the poster, own player, no autoplay ---------- */
.film-win { margin-bottom: 40px; }
.film { margin: 0; }
.film-stage { position: relative; aspect-ratio: 16 / 9; background: var(--ink-2); border: 2px solid var(--ink); overflow: hidden; }
.film-stage video, .film-poster { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; background: var(--ink-2); }
.film-big { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.film-big:active { transform: translate(-50%, calc(-50% + 3px)); }
.film.is-play .film-big { display: none; }
.film.is-play .film-poster { visibility: hidden; }
.film-bar { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: nowrap; }
.film-t { position: relative; flex: 1 1 auto; height: 16px; background: var(--paper); border: 2px solid var(--ink); touch-action: none; cursor: var(--cur-grab); min-width: 80px; }
.film-t > i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--scent-m); border-right: 2px solid var(--ink); }
.film-time { font-size: 12px; line-height: 12px; white-space: nowrap; }
.film:fullscreen { background: var(--ink-2); display: flex; flex-direction: column; justify-content: center; padding: 16px; }
.film:fullscreen .film-stage { border: 0; }
@media (max-width: 760px) { .film-bar { gap: 6px; } .film-bar .btn { padding: 0 4px; } .film-time { display: none; } .film-win { margin-bottom: 28px; } }
@media (max-width: 340px) { .yard-intro { left: 4px; right: 4px; padding: 10px 6px 12px; } }
.film-stage { cursor: var(--cur-grab); }
.film-stage:focus-visible { outline: 3px solid var(--scent-d); outline-offset: 3px; }
/* 10-28: the three hero actions in one row on desktop (Watch the yard + X + "pump.fun soon" / pump.fun): X is icon-only in the hero there
   (the menu bar keeps "Follow", aria-label stays), the intro card may grow a little; phones keep the 2-column grid */
@media (min-width: 761px) { .yard-intro .acts { flex-wrap: nowrap; } .yard-intro .b-x .bl { display: none; } .yard-intro { max-width: 54%; } }
@media (min-width: 761px) and (max-width: 1340px) { .yard-intro { max-width: 60%; } }
@media (min-width: 761px) and (max-width: 1100px) { .yard-intro .acts { flex-wrap: wrap; } }