@charset "UTF-8";
/* Workshop manual: warm charcoal, bone ink, one sand-amber accent. Hard edges, no gradients, no glow. */
:root {
  --bg:#12110f;
  --panel:#1a1916;
  --panel-2:#211f1b;
  --line:#2e2b26;
  --line-2:#4a453c;
  --ink:#ece6da;
  --muted:#9a9387;
  --accent:#ffb000;
  --accent-ink:#12110f;
  --signal:#ff5a36;
  --mono:ui-monospace,"Cascadia Mono","SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --sans:system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.2,.9,.2,1);
  color-scheme:dark;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  scroll-behavior:smooth;
  scroll-padding-top:84px
}
* { box-sizing:border-box }
body { margin:0; overflow-x:hidden }
::selection { background:var(--accent); color:var(--accent-ink) }
a { color:inherit; text-decoration:none }
a:hover { color:var(--accent) }
a:focus-visible,button:focus-visible,canvas:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:4px
}
button,input { font:inherit }
img { max-width:100% }
.wrap { width:min(1240px,calc(100% - 112px)); margin-inline:auto }
[hidden] { display:none!important }

#backdrop {
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:-1;
  pointer-events:none
}
.skip {
  position:absolute;
  top:-80px;
  left:12px;
  background:var(--accent);
  color:var(--accent-ink);
  padding:12px;
  z-index:60
}
.skip:focus { top:10px }

/* ---------- cursor reticle ---------- */
.reticle {
  position:fixed;
  left:0;
  top:0;
  width:28px;
  height:28px;
  margin:-14px 0 0 -14px;
  pointer-events:none;
  z-index:90;
  opacity:0;
  transition:opacity .2s,width .2s var(--ease),height .2s var(--ease),margin .2s var(--ease)
}
.reticle:before,.reticle:after {
  content:"";
  position:absolute;
  background:var(--ink);
  left:50%;
  top:50%;
  translate:-50% -50%
}
.reticle:before { width:100%; height:1px }
.reticle:after { width:1px; height:100% }
.reticle.on { opacity:.55 }
.reticle.hot { width:44px; height:44px; margin:-22px 0 0 -22px; opacity:1 }
.reticle.hot:before,.reticle.hot:after { background:var(--accent) }
.reticle.off { opacity:0 }

/* ---------- header / HUD ---------- */
.nav {
  position:sticky;
  top:0;
  z-index:40;
  background:var(--bg);
  border-bottom:1px solid transparent;
  transition:border-color .2s
}
.nav.scrolled { border-bottom-color:var(--line) }
.nav-inner {
  height:96px;
  display:flex;
  align-items:center;
  gap:32px;
  transition:height .25s var(--ease)
}
.nav.scrolled .nav-inner { height:64px }
.identity {
  display:flex;
  gap:16px;
  align-items:center;
  font:12px/1.4 var(--mono);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-right:auto
}
.monogram {
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  background:var(--ink);
  color:var(--bg);
  font:700 17px/1 var(--mono);
  letter-spacing:-.06em;
  white-space:nowrap;
  transition:background .15s
}
.identity:hover .monogram { background:var(--accent) }
.monogram span { color:var(--signal) }
nav { display:flex; gap:28px; align-items:center; font:13px var(--mono) }
nav a { position:relative; padding-block:6px }
nav a:not(.nav-external):after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s var(--ease)
}
nav a:hover:after,nav a.active:after { transform:scaleX(1) }
nav a.active { color:var(--ink) }
.nav-external {
  border:1px solid var(--line-2);
  padding:10px 14px!important;
  transition:border-color .15s,background .15s,color .15s
}
.nav-external:hover { border-color:var(--ink); background:var(--ink); color:var(--bg) }
.nav-external span { margin-left:10px }
.xp-pill {
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border:1px solid var(--line-2);
  font:11px/1 var(--mono);
  color:var(--muted);
  white-space:nowrap;
  transition:border-color .15s
}
.xp-pill:hover { border-color:var(--accent); color:var(--ink) }
.xp-level { background:var(--accent); color:var(--accent-ink); font-weight:700; padding:4px 6px }
.xp-track { position:relative; width:70px; height:10px; background:var(--line) }
.xp-track:after {
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(90deg,transparent 0 5px,var(--bg) 5px 7px)
}
.xp-fill { display:block; height:100%; width:calc(var(--xp,0) * 100%); background:var(--accent); transition:width .6s steps(10) }
.xp-pill.bump { animation:bump .5s steps(4) }
@keyframes bump { 50% { background:var(--accent); color:var(--accent-ink) } }

/* ---------- shared type ---------- */
.eyebrow {
  font:12px/1.6 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 22px
}
.dot {
  display:inline-block;
  width:8px;
  height:8px;
  background:var(--accent);
  margin-right:10px;
  vertical-align:1px;
  animation:blink 1.2s steps(1) infinite
}
h1 {
  font:700 clamp(44px,6.4vw,96px)/.98 var(--mono);
  letter-spacing:-.06em;
  margin:0 0 32px;
  text-transform:uppercase
}
h1 .line { display:block; min-height:1em }
.hl { color:var(--accent) }
.caret {
  display:inline-block;
  width:.5em;
  height:.78em;
  margin-left:.06em;
  vertical-align:-.02em;
  background:var(--ink);
  animation:blink 1s steps(1) infinite
}
@keyframes blink { 50% { opacity:0 } }
h2 {
  font:700 clamp(28px,3.3vw,44px)/1.08 var(--mono);
  letter-spacing:-.05em;
  margin:0;
  text-transform:uppercase
}
h2 span { color:var(--muted) }
h3 { font:700 26px/1.1 var(--mono); letter-spacing:-.04em; margin:0 0 16px }

/* ---------- entrance + scroll reveal ---------- */
.rise { animation:rise .7s var(--ease) both }
.d1 { animation-delay:.05s }
.d2 { animation-delay:.12s }
.d3 { animation-delay:.24s }
.d4 { animation-delay:.36s }
.d5 { animation-delay:.48s }
@keyframes rise { from { opacity:0; transform:translateY(18px) } }
.reveal {
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  transition-delay:var(--delay,0s)
}
.reveal.pending { opacity:0; transform:translateY(28px) }

/* ---------- buttons: solid blocks with a hard offset shadow ---------- */
.button,.ghost-button {
  cursor:pointer;
  display:inline-flex;
  gap:28px;
  align-items:center;
  padding:16px 20px;
  font:700 13px var(--mono);
  text-transform:uppercase;
  letter-spacing:.04em;
  border:2px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink);
  translate:var(--mx,0) var(--my,0);
  transition:translate .2s var(--ease),box-shadow .12s,transform .12s,background .12s,color .12s
}
.button { background:var(--accent); color:var(--accent-ink) }
.ghost-button { background:var(--bg); color:var(--ink) }
.button:hover,.ghost-button:hover { transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink); color:var(--accent-ink) }
.ghost-button:hover { background:var(--ink) }
.button:active,.ghost-button:active { transform:translate(4px,4px); box-shadow:1px 1px 0 var(--ink) }
.button span,.ghost-button span { font-size:16px }

/* ---------- hero ---------- */
.hero {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:70px;
  padding-block:72px 90px;
  align-items:center
}
.intro { max-width:470px; font-size:17px; line-height:1.75; color:var(--muted); margin:0 0 36px }
.hero-actions { display:flex; flex-wrap:wrap; gap:16px }
.inventory {
  display:flex;
  flex-wrap:wrap;
  list-style:none;
  padding:0;
  margin:42px 0 0;
  font:12px var(--mono);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line)
}
.inventory li {
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  transition:background .12s,color .12s
}
.inventory li:hover { background:var(--ink); color:var(--bg) }
.inventory b { font-weight:400; color:var(--muted) }
.inventory li:hover b { color:var(--bg) }
.hero-showcase {
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px;
  align-items:start;
  min-width:0;
  perspective:1100px
}
.hero-showcase { display:block; padding:0 0 130px }
.key-art,.key-shot { margin:0; position:relative }
.key-art img,.key-shot img { display:block; width:100%; height:auto }
.key-art a { display:block; border:2px solid var(--ink); box-shadow:10px 10px 0 var(--line-2); transition:box-shadow .2s }
.key-art a:hover { box-shadow:10px 10px 0 var(--accent) }
.key-art,.key-shot { transform:translate3d(calc(var(--px,0) * 10px),calc(var(--py,0) * 8px),0) rotateY(calc(var(--px,0) * 5deg)) rotateX(calc(var(--py,0) * -4deg)); transition:transform .5s var(--ease) }
.key-shot {
  position:absolute;
  right:-28px;
  bottom:0;
  width:46%;
  border:2px solid var(--ink);
  background:var(--bg);
  padding:5px;
  box-shadow:8px 8px 0 var(--accent);
  transform:translate3d(calc(var(--px,0) * 24px),calc(var(--py,0) * 18px),0) rotateY(calc(var(--px,0) * 8deg))
}
.key-art figcaption,.key-shot figcaption { font:11px/1.6 var(--mono); color:var(--muted); margin-top:12px; text-transform:uppercase }
.key-shot figcaption { position:absolute; left:0; right:0; top:calc(100% + 6px) }
/* Crop marks, like a figure in a printed manual. */
.key-art:before,.key-art:after {
  content:"";
  position:absolute;
  width:14px;
  height:14px;
  border:solid var(--muted);
  pointer-events:none
}
.key-art:before { left:-12px; top:-12px; border-width:1px 0 0 1px }
.key-art:after { right:-12px; top:-12px; border-width:1px 1px 0 0 }
.hud-chip {
  position:absolute;
  font:11px/1 var(--mono);
  letter-spacing:.06em;
  padding:8px 10px;
  background:var(--ink);
  color:var(--bg);
  text-transform:uppercase;
  z-index:2
}
.chip-a { left:-18px; top:-14px; background:var(--accent) }
.chip-b { right:-18px; top:24px }
.intro a { color:var(--ink); border-bottom:2px solid var(--accent) }

/* ---------- Ant Mill feature ---------- */
.antmill { position:relative; padding-block:110px 40px; isolation:isolate }
.antmill:before {
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:760px;
  z-index:-1;
  background:url("/images/antmill/swarm-art.jpg") center/cover no-repeat;
  opacity:.22;
  -webkit-mask-image:linear-gradient(#000 40%,transparent);
  mask-image:linear-gradient(#000 40%,transparent)
}
.antmill .section-heading .button { flex:none }
.antmill-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center; margin-bottom:40px }
.antmill-art { margin:0 }
.antmill-art img { display:block; width:100%; height:auto; border:2px solid var(--ink); box-shadow:10px 10px 0 var(--accent) }
.antmill-art figcaption { font:11px/1.6 var(--mono); color:var(--muted); margin-top:14px; text-transform:uppercase }
.antmill-copy p { color:var(--muted); font-size:15px; line-height:1.8; margin:0 0 18px }
.antmill-copy .lede { color:var(--ink); font-size:19px; line-height:1.6 }
.spec { margin:28px 0 0; border-top:2px solid var(--ink) }
.spec div { display:grid; grid-template-columns:110px 1fr; gap:16px; padding:11px 0; border-bottom:1px solid var(--line) }
.spec dt { font:700 11px/1.7 var(--mono); text-transform:uppercase; color:var(--accent) }
.spec dd { margin:0; font-size:14px }
.shots { display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:auto auto; gap:14px; margin-bottom:56px }
.shot { position:relative; display:block; overflow:hidden; border:2px solid var(--line-2); background:var(--panel); transition:border-color .15s,box-shadow .15s }
.shot img { display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:16/9; transition:transform .5s var(--ease) }
.shot span {
  position:absolute;
  left:0;
  bottom:0;
  padding:6px 9px;
  background:var(--ink);
  color:var(--bg);
  font:11px var(--mono);
  text-transform:uppercase
}
.shot:hover { border-color:var(--ink); box-shadow:6px 6px 0 var(--accent) }
.shot:hover img { transform:scale(1.04) }
.shot-main { grid-row:span 2 }
.shot-main img { aspect-ratio:auto }
.shots .shot:nth-child(4) { grid-column:2 / span 2 }
.colony { border:2px solid var(--ink); background:var(--bg); box-shadow:10px 10px 0 var(--line) }
.colony-stage { position:relative; aspect-ratio:16/7 }
#colony { position:absolute; inset:0; width:100%; height:100%; display:block; cursor:crosshair; touch-action:manipulation }
.colony-note { margin:0; padding:14px 16px; border-top:2px solid var(--ink); font-size:13px; line-height:1.7; color:var(--muted) }
.lightbox { padding:0; border:2px solid var(--ink); background:var(--bg); max-width:min(1400px,94vw); box-shadow:12px 12px 0 var(--accent) }
.lightbox::backdrop { background:rgba(10,9,8,.88) }
.lightbox img { display:block; max-width:100%; max-height:86vh; height:auto }
.lightbox-close {
  position:absolute;
  top:8px;
  right:8px;
  width:38px;
  height:38px;
  border:2px solid var(--ink);
  background:var(--accent);
  color:var(--accent-ink);
  font:700 22px/1 var(--mono);
  cursor:pointer
}

/* ---------- ticker: a hazard-tape band ---------- */
.ticker {
  overflow:hidden;
  background:var(--accent);
  color:var(--accent-ink);
  padding-block:14px;
  border-block:2px solid var(--ink)
}
.ticker-track { display:flex; width:max-content; animation:ticker 40s linear infinite }
.ticker:hover .ticker-track { animation-play-state:paused }
.ticker-group { display:flex }
.ticker span {
  font:700 14px var(--mono);
  letter-spacing:.04em;
  text-transform:uppercase;
  padding-inline:22px;
  white-space:nowrap
}
.ticker span:before { content:"/"; margin-right:22px; opacity:.5 }
@keyframes ticker { to { transform:translateX(-50%) } }

/* ---------- section headings ---------- */
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:40px;
  gap:40px
}
.section-heading .eyebrow { margin-bottom:16px }
.section-note { max-width:400px; margin:0; color:var(--muted); font-size:14px; line-height:1.75 }
.text-link {
  display:inline-flex;
  gap:18px;
  font:700 12px var(--mono);
  text-transform:uppercase;
  align-items:center;
  border-bottom:2px solid var(--accent);
  padding-bottom:4px
}
.text-link span { font-size:16px; transition:transform .2s var(--ease) }
.text-link:hover span { transform:translate(3px,-3px) }

/* ---------- sandbox ---------- */
.playground { padding-block:110px 40px }
.play-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:24px;
  align-items:start
}
.sim { border:2px solid var(--ink); background:var(--bg); box-shadow:10px 10px 0 var(--line) }
.sim-bar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:10px 14px;
  background:var(--ink);
  color:var(--bg);
  font:11px/1.5 var(--mono);
  text-transform:uppercase
}
.sim-title { display:flex; align-items:center; gap:9px; font-weight:700 }
.rec { width:8px; height:8px; background:var(--signal); animation:blink 1.4s steps(1) infinite }
.sim-stats { display:flex; flex-wrap:wrap; gap:16px; justify-content:end }
.sim-stats b { font-weight:700; font-variant-numeric:tabular-nums }
.stage { position:relative; aspect-ratio:1000/640; width:100% }
#sandbox {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  cursor:grab;
  touch-action:none
}
#sandbox:active { cursor:grabbing }
#sandbox:focus-visible { outline-offset:-4px }
.stage-hint {
  position:absolute;
  left:14px;
  top:14px;
  margin:0;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  background:var(--ink);
  color:var(--bg);
  font:11px var(--mono);
  pointer-events:none;
  transition:opacity .3s,translate .3s var(--ease)
}
.stage-hint.gone { opacity:0; translate:0 -8px }
.hand { width:8px; height:8px; background:var(--accent); animation:drag 1.6s var(--ease) infinite }
@keyframes drag { 0%,15% { transform:translateX(6px) } 60% { transform:translateX(-6px) } 75%,100% { transform:translateX(6px); opacity:.2 } }
.toolbar {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:10px;
  padding:12px;
  border-top:2px solid var(--ink)
}
.tool-group { display:flex; flex-wrap:wrap; gap:6px }
.tool {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px 7px 7px;
  border:1px solid var(--line-2);
  background:var(--bg);
  color:var(--ink);
  font:12px var(--mono);
  cursor:pointer;
  transition:background .1s,color .1s,border-color .1s
}
.tool:hover { border-color:var(--ink) }
.tool:active { transform:translateY(1px) }
.tool kbd { font:10px/1 var(--mono); padding:3px 5px; background:var(--line); color:var(--muted) }
.tool.is-active,.tool[aria-pressed="true"] { background:var(--accent); color:var(--accent-ink); border-color:var(--accent) }
.tool.is-active kbd,.tool[aria-pressed="true"] kbd { background:var(--accent-ink); color:var(--accent) }
.tool.accent { border-color:var(--signal); color:var(--signal) }
.tool.accent:hover { background:var(--signal); color:var(--accent-ink) }
.quest-log { border:2px solid var(--ink); padding:20px; background:var(--panel) }
.quest-log .eyebrow { margin-bottom:12px; color:var(--ink) }
.quests { list-style:none; margin:0; padding:0; display:grid }
.quests li {
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:start;
  padding:12px 0;
  border-bottom:1px solid var(--line)
}
.quests li:last-child { border-bottom:0 }
.quests b { display:block; font:700 13px var(--mono); text-transform:uppercase; margin-bottom:4px }
.quests div span { font-size:13px; line-height:1.5; color:var(--muted) }
.quests em { font:11px var(--mono); font-style:normal; color:var(--accent); white-space:nowrap; padding-top:2px }
.quest-progress { color:var(--ink)!important; font-family:var(--mono) }
.check { width:14px; height:14px; margin-top:2px; border:2px solid var(--line-2) }
.quests li.done .check { background:var(--accent); border-color:var(--accent) }
.quests li.done b { text-decoration:line-through; text-decoration-color:var(--accent); text-decoration-thickness:2px }
.quests li.done { animation:questDone .6s steps(3) }
@keyframes questDone { 50% { background:var(--line) } }
.help { margin:14px 0 0; font-size:12px; line-height:1.7; color:var(--muted) }
.help b { color:var(--ink); font:700 11px var(--mono); text-transform:uppercase }

/* ---------- work ---------- */
.work { padding-top:90px }
.project {
  border:2px solid var(--line-2);
  background:var(--panel);
  position:relative;
  transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate(var(--lift,0px),var(--lift,0px));
  transition:transform .25s var(--ease),border-color .15s,box-shadow .15s,opacity .6s var(--ease);
  transition-delay:var(--delay,0s)
}
.project.reveal.pending { transform:perspective(1100px) translateY(28px) }
.project:hover,.project:focus-within { border-color:var(--ink); box-shadow:8px 8px 0 var(--accent) }
.project.explored { border-color:var(--accent) }
.project.explored .text-link:after { content:"✓ +25 XP"; color:var(--accent); font:11px var(--mono) }
.featured { display:grid; grid-template-columns:1.05fr 1fr; margin-bottom:24px }
.project-content { padding:36px; position:relative }
.project-content .eyebrow { font-size:11px; margin-bottom:16px }
.project p:not(.eyebrow) { font-size:14px; line-height:1.8; color:var(--muted); margin:0 0 24px }
.tags { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:28px }
.tags span { font:11px var(--mono); padding:5px 8px; border:1px solid var(--line-2); color:var(--ink) }
.project-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px }
.game .project-content { padding:26px }
.game h3 { font-size:21px }
.game p:not(.eyebrow) { min-height:52px; font-size:13px }
.game-art { height:360px; position:relative; overflow:hidden; border-bottom:2px solid var(--line-2); background:var(--bg) }
.game-art img { display:block; width:100%; height:100%; object-fit:contain; transition:transform .5s var(--ease) }
.project:hover .game-art img { transform:scale(1.04) }

/* NSL Stats live buffer */
.stat-viz {
  margin:24px 24px 24px 0;
  padding:22px;
  border:1px solid var(--line-2);
  background:var(--bg);
  font:11px/1.5 var(--mono);
  color:var(--muted);
  display:grid;
  gap:14px;
  align-content:center
}
.viz-head { display:flex; justify-content:space-between; gap:10px; color:var(--ink); margin-bottom:4px; text-transform:uppercase }
.viz-live { color:var(--signal); animation:blink 1.6s steps(1) infinite }
.viz-row { display:grid; grid-template-columns:64px 1fr; gap:12px; align-items:center }
.bar { height:10px; background:var(--line); overflow:hidden }
.bar i { display:block; height:100%; transform-origin:left; animation:6s steps(12) infinite }
.bar .hp { width:82%; background:var(--accent); animation-name:hp }
.bar .ar { width:46%; background:var(--ink); animation-name:ar }
.bar .sp { width:60%; background:var(--muted); animation-name:sp }
.bar .dm { width:38%; background:var(--signal); animation-name:dm }
@keyframes hp { 0%,100% { transform:scaleX(1) } 30% { transform:scaleX(.72) } 45% { transform:scaleX(.68) } 75% { transform:scaleX(1.08) } }
@keyframes ar { 0%,100% { transform:scaleX(1) } 50% { transform:scaleX(1.3) } }
@keyframes sp { 0%,10% { transform:scaleX(1) } 20%,55% { transform:scaleX(1.25) } 70%,100% { transform:scaleX(1) } }
@keyframes dm { 0%,100% { transform:scaleX(1) } 60% { transform:scaleX(1.5) } 70% { transform:scaleX(.9) } }
.viz-log { display:grid; gap:4px; margin-top:6px; padding-top:12px; border-top:1px dashed var(--line-2); min-height:78px }
.viz-log span { opacity:.3; animation:logline 6s steps(1) infinite }
.viz-log .l1 { animation-delay:.6s }
.viz-log .l2 { animation-delay:1.8s }
.viz-log .l3 { animation-delay:4.2s }
.viz-log .l4 { animation-delay:5.2s }
@keyframes logline { 0% { opacity:1; color:var(--ink) } 20% { opacity:.6; color:var(--muted) } 50%,100% { opacity:.3 } }

/* Top-down RPG tiles */
.rpg-viz {
  background-color:#24301f;
  background-image:linear-gradient(#ffffff0a 1px,transparent 1px),linear-gradient(90deg,#ffffff0a 1px,transparent 1px);
  background-size:30px 30px
}
.rpg-viz i { position:absolute; display:block }
.water {
  right:0;
  top:0;
  width:38%;
  height:46%;
  background:repeating-linear-gradient(0deg,#2c4a5c 0 6px,#355a70 6px 12px);
  background-size:100% 24px;
  animation:water 3s steps(6) infinite
}
@keyframes water { to { background-position:0 24px } }
.tree { width:28px; height:28px; background:#4f7a3a; box-shadow:inset -6px -6px 0 #3b5e2b,0 6px 0 -2px #1a2414 }
.t1 { left:12%; top:16% }
.t2 { left:22%; top:58% }
.t3 { left:58%; top:72% }
.t4 { left:78%; top:62% }
.t5 { left:44%; top:12% }
.chest { left:66%; top:50%; width:22px; height:16px; background:var(--accent); box-shadow:inset 0 -7px 0 #a86f00,0 0 0 2px var(--accent-ink); animation:chest 1.2s steps(2) infinite }
@keyframes chest { 50% { translate:0 -2px } }
.sprite {
  left:10%;
  top:40%;
  width:16px;
  height:20px;
  background:var(--ink);
  box-shadow:inset 0 -8px 0 var(--signal),0 0 0 2px var(--accent-ink);
  animation:walk 9s steps(36) infinite
}
@keyframes walk {
  0% { left:10%; top:40% }
  22% { left:40%; top:40% }
  40% { left:40%; top:58% }
  60% { left:62%; top:52% }
  70% { left:62%; top:52% }
  85% { left:30%; top:30% }
  100% { left:10%; top:40% }
}

/* ---------- about + footer ---------- */
.about { margin-top:110px; padding-block:48px 80px; border-top:2px solid var(--ink) }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:65px }
.about p:not(.eyebrow) { margin:0 0 18px; font-size:15px; color:var(--muted); line-height:1.8 }
.about-links { display:flex; flex-wrap:wrap; gap:10px; margin-top:30px }
.about-links a {
  padding:11px 15px;
  border:1px solid var(--line-2);
  font:700 12px var(--mono);
  text-transform:uppercase;
  transition:background .12s,color .12s,border-color .12s
}
.about-links a:hover { background:var(--accent); color:var(--accent-ink); border-color:var(--accent) }
.about-links span { margin-left:8px }
footer {
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding-block:28px 40px;
  font:11px var(--mono);
  color:var(--muted);
  text-transform:uppercase
}

/* ---------- toasts ---------- */
.toasts {
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:80;
  display:grid;
  gap:10px;
  width:min(320px,calc(100vw - 40px));
  pointer-events:none
}
.toast {
  display:flex;
  gap:14px;
  align-items:center;
  padding:12px 14px;
  border:2px solid var(--ink);
  background:var(--bg);
  box-shadow:6px 6px 0 var(--accent);
  animation:toastIn .35s steps(4) both;
  position:relative;
  overflow:hidden
}
.toast:after {
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  height:3px;
  width:100%;
  background:var(--accent);
  transform-origin:left;
  animation:toastTimer 3.8s linear both
}
.toast.out { animation:toastOut .25s steps(3) both }
.toast-level { box-shadow:6px 6px 0 var(--signal) }
.toast-level:after { background:var(--signal) }
.toast-icon { display:grid; place-items:center; width:34px; height:34px; flex:none; background:var(--accent); color:var(--accent-ink); font-size:15px }
.toast-level .toast-icon { background:var(--signal) }
.toast strong { display:block; font:700 13px var(--mono); text-transform:uppercase; margin-bottom:2px }
.toast div span { font:11px var(--mono); color:var(--muted) }
@keyframes toastIn { from { opacity:0; transform:translateX(40px) } }
@keyframes toastOut { to { opacity:0; transform:translateX(40px) } }
@keyframes toastTimer { to { transform:scaleX(0) } }

/* ---------- konami party ---------- */
.party { --accent:#ff4fd8 }
.party .ticker { animation:party 1s steps(4) infinite }
@keyframes party { 50% { background:#4fd8ff } }

/* ---------- responsive ---------- */
@media(max-width:1050px) {
  .wrap { width:calc(100% - 64px) }
  .hero { gap:40px; padding-block:56px 70px }
  .project-content { padding:28px }
  .project-grid { gap:16px }
  .game .project-content { padding:20px }
  .game h3 { font-size:19px }
  .play-layout { grid-template-columns:1fr }
  .quests { grid-template-columns:1fr 1fr; column-gap:28px }
  .featured { grid-template-columns:1fr }
  .stat-viz { margin:0 24px 24px }
  nav { gap:20px }
  .antmill-grid { grid-template-columns:1fr }
  .key-shot { right:-8px }
}
@media(max-width:760px) {
  .wrap { width:calc(100% - 32px) }
  .nav-inner { height:72px; gap:14px }
  .nav.scrolled .nav-inner { height:60px }
  .identity>span:last-child { display:none }
  nav { gap:14px; font-size:12px }
  .nav-external { padding:8px 10px!important }
  .nav-external span { margin-left:6px }
  .xp-track,.xp-text { display:none }
  .hero { grid-template-columns:1fr; padding-block:40px 58px; gap:52px }
  .hero-showcase { width:100%; padding-bottom:56px }
  .key-shot { right:-4px; width:52% }
  .hero-showcase { padding-bottom:110px }
  .chip-a { left:-4px }
  .shots { grid-template-columns:1fr 1fr }
  .shot-main { grid-column:1 / -1; grid-row:auto }
  .shots .shot:nth-child(4) { grid-column:1 / -1 }
  .colony-stage { aspect-ratio:4/3 }
  .antmill { padding-block:70px 20px }
  .intro { font-size:16px }
  .section-heading { flex-direction:column; align-items:start; gap:18px }
  .playground { padding-block:70px 20px }
  .sim { box-shadow:6px 6px 0 var(--line) }
  .sim-bar { flex-direction:column; align-items:start; gap:6px }
  .sim-stats { justify-content:start; gap:12px }
  .toolbar { justify-content:start }
  .quests { grid-template-columns:1fr }
  .project-grid { grid-template-columns:1fr }
  .game { display:grid; grid-template-columns:38% 1fr }
  .game-art { height:100%; min-height:240px; border-bottom:0; border-right:2px solid var(--line-2) }
  .game p:not(.eyebrow) { min-height:0 }
  .about { margin-top:60px }
  .about-grid { grid-template-columns:1fr; gap:28px }
  footer { flex-wrap:wrap; font-size:10px }
  footer span:nth-child(2) { display:none }
}
@media(max-width:420px) {
  .nav-external { display:none }
  .game { grid-template-columns:1fr }
  .game-art { height:300px; min-height:0; border-right:0; border-bottom:2px solid var(--line-2) }
  .hud-chip { display:none }
  .stat-viz { margin:0 14px 14px; padding:16px }
}
@media(min-width:1500px) { .hero { gap:100px } }
@media(hover:none) { .tool kbd { display:none } .tool { padding:8px 11px } }
@media(prefers-reduced-motion:reduce) {
  :root { scroll-behavior:auto }
  *,*:before,*:after { transition:none!important; animation:none!important }
  .ticker-track { flex-wrap:wrap; width:auto }
  .ticker-group+.ticker-group { display:none }
}