/* Dotopia: a sky full of pixel clouds, cream cards with coloured title strips, plum ink, a framed town.
   Restyled 2026-10-03 (the user asked for a different look). Two pixel faces: Silkscreen for titles, labels,
   buttons and numbers; VT323 for everything you read. */

@font-face { font-family: 'Silkscreen'; src: url('/fonts/silkscreen-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Silkscreen'; src: url('/fonts/silkscreen-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'VT323'; src: url('/fonts/vt323-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  --sky: #bfe3f5;
  --card: #fff8e7;
  --card2: #f6ecd3;
  --ink: #2a2233;
  --mute: #6d6478;
  --hair: #e6d9bd;
  --grass: #5fae49;
  --coral: #e2574c;
  --gold: #f2b630;
  --teal: #3ea0a0;
  --azure: #3b74d6;
  --plum: #2a2233;
  --hot: #d9473b;
  --warm: #3f9a3f;
  --display: 'Silkscreen', ui-monospace, monospace;
  --body: 'VT323', ui-monospace, monospace;
  --shadow: 4px 4px 0 var(--ink);
  --k: 2;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--sky) url('/art/sky.png') repeat 0 0 / 320px 192px; color: var(--ink); font: 21px/1.2 var(--body); -webkit-font-smoothing: none; image-rendering: pixelated; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--azure); }
img, svg.px { image-rendering: pixelated; image-rendering: crisp-edges; }
svg.px { display: inline-block; vertical-align: middle; flex: none; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; margin: 0; line-height: 1.1; }
code { font-family: var(--body); background: var(--card2); padding: 0 4px; border: 1px solid var(--hair); }
::selection { background: var(--gold); color: var(--ink); }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--card); padding: 8px 12px; font-family: var(--display); z-index: 99; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--azure); outline-offset: 2px; }
.small { font-size: 18px; color: var(--mute); margin: 6px 0 0; }
.empty { color: var(--mute); margin: 8px 0; }
.num { font-family: var(--display); font-size: 12px; }

/* ------------------------------------------------------------ the bar */
.bar { background: var(--plum); color: var(--card); position: sticky; top: 0; z-index: 20; box-shadow: 0 4px 0 rgba(42, 34, 51, .25); }
.bar-in { max-width: 1320px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; gap: 18px; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.brand .logo { background: var(--sky); border: 2px solid var(--card); padding: 2px; width: 38px; height: 38px; }
.brand .word { font: 700 20px var(--display); color: var(--card); }
.brand .word b { color: var(--gold); }
.brand:hover .word { color: var(--card); }
.nav { display: flex; align-items: center; gap: 4px; flex: 1; flex-wrap: wrap; }
.nav > a, .drop > summary { font: 400 13px var(--display); text-decoration: none; padding: 5px 9px; border: 2px solid transparent; cursor: pointer; list-style: none; color: var(--card); }
.drop > summary::-webkit-details-marker { display: none; }
.drop > summary::after { content: ' ▾'; }
.nav > a:hover, .drop > summary:hover { border-color: var(--card); color: var(--card); }
.nav > a.on { background: var(--gold); color: var(--ink); border-color: var(--gold); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2); }
.drop { position: relative; }
.drop .menu { position: absolute; top: calc(100% + 6px); left: 0; background: var(--card); border: 3px solid var(--ink); box-shadow: var(--shadow); display: grid; min-width: 160px; z-index: 30; }
.drop .menu a { font: 400 13px var(--display); padding: 8px 10px; text-decoration: none; color: var(--ink); }
.drop .menu a:hover { background: var(--grass); color: var(--card); }
.bar-end { display: flex; align-items: center; gap: 10px; }
.ca { font: 400 12px var(--display); border: 2px solid var(--gold); background: transparent; padding: 4px 8px; display: flex; gap: 8px; align-items: center; cursor: pointer; color: var(--card); }
.ca b { font-weight: 700; color: var(--gold); }
.ca.soon { cursor: default; }
.ca:not(.soon):hover { background: var(--gold); color: var(--ink); }
.ca:not(.soon):hover b { color: var(--ink); }
.x { display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid var(--card); color: var(--card); }
.x:hover { background: var(--card); color: var(--ink); }

/* ------------------------------------------------------------ layout */
main { min-height: 70vh; }
.wrap { max-width: 1320px; margin: 0 auto; padding: 24px 16px 44px; }
.wrap.narrow { max-width: 900px; }
.head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.head h1 { font-size: 40px; color: var(--card); text-shadow: 3px 3px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink), 3px 0 0 var(--ink), 0 3px 0 var(--ink); letter-spacing: 1px; }
.sub { margin: 8px 0 0; font-size: 22px; background: var(--card); border: 2px solid var(--ink); display: inline-block; padding: 1px 8px 2px; box-shadow: 3px 3px 0 var(--ink); }
.sub a { color: var(--ink); }
.box { border: 3px solid var(--ink); background: var(--card); box-shadow: var(--shadow); padding: 0 14px 14px; }
.box-h { --tc: var(--grass); font-size: 13px; display: flex; align-items: center; gap: 8px; margin: 0 -14px 12px; padding: 7px 12px 8px; background: var(--tc); color: var(--card); border-bottom: 3px solid var(--ink); text-shadow: 1px 1px 0 rgba(0, 0, 0, .35); }
.t-coral .box-h, .box-h.t-coral { --tc: var(--coral); }
.t-gold .box-h, .box-h.t-gold { --tc: var(--gold); color: var(--ink); text-shadow: none; }
.t-teal .box-h, .box-h.t-teal { --tc: var(--teal); }
.t-plum .box-h, .box-h.t-plum { --tc: var(--plum); }
.t-azure .box-h, .box-h.t-azure { --tc: var(--azure); }
.rule { font-size: 14px; margin: 30px 0 12px; padding: 6px 10px 7px; background: var(--plum); color: var(--card); display: flex; gap: 8px; align-items: baseline; border: 3px solid var(--ink); box-shadow: 3px 3px 0 rgba(42, 34, 51, .35); }
.rule .n { font-weight: 400; color: var(--gold); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 20px 0; }
.banner { border: 3px dashed var(--ink); padding: 8px 12px; margin: 0 0 18px; background: var(--gold); }
/* text that sits straight on the sky gets a cream card behind it */
.on-sky { background: var(--card); border: 3px solid var(--ink); box-shadow: var(--shadow); padding: 12px 14px; }

/* stat tiles */
.stats { display: flex; gap: 8px; }
.stat { border: 3px solid var(--ink); padding: 0 10px 6px; min-width: 92px; background: var(--card); box-shadow: 3px 3px 0 var(--ink); }
.stat span { display: block; font: 400 10px var(--display); margin: 0 -10px 4px; padding: 3px 8px; background: var(--tc, var(--grass)); color: var(--card); }
.stat:nth-child(2) { --tc: var(--azure); }
.stat:nth-child(3) { --tc: var(--coral); }
.stat:nth-child(4) { --tc: var(--teal); }
.stat b { font: 700 22px var(--display); }

/* ------------------------------------------------------------ the town */
.town-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: stretch; }
.stage-box { padding: 6px; background: var(--wood, #b47a43); border: 3px solid var(--ink); box-shadow: var(--shadow); }
.stage { position: relative; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; background: #8ccf6a; user-select: none; -webkit-user-select: none; outline: 3px solid var(--ink); }
.stage .town { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.stage.soft .town { image-rendering: auto; }
.layer, .labels { position: absolute; inset: 0; }
.labels { pointer-events: none; z-index: 3; }
.plabel { pointer-events: auto; position: absolute; left: calc(var(--x) * var(--k) * 1px); top: calc(var(--y) * var(--k) * 1px); transform: translate(-50%, -50%); font: 700 11px var(--display); background: var(--card); color: var(--ink); border: 2px solid var(--ink); padding: 1px 6px 2px; text-decoration: none; white-space: nowrap; box-shadow: 2px 2px 0 var(--ink); }
.plabel:hover { background: var(--gold); color: var(--ink); }
.dot { position: absolute; left: 0; top: 0; width: calc(9px * var(--k)); height: calc(9px * var(--k)); image-rendering: pixelated; cursor: pointer; z-index: 2; }
.dot img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.dot.asleep img { filter: grayscale(.85) brightness(1.05); }
.dot .zz { position: absolute; left: 80%; top: -60%; font: 700 10px var(--display); color: var(--ink); animation: zz 3.6s steps(4) infinite; }
@keyframes zz { 0% { opacity: 0; transform: translateY(4px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
.dot.lit { outline: 2px solid var(--card); outline-offset: 2px; box-shadow: 0 0 0 4px var(--ink); }
.bubble { position: absolute; z-index: 5; transform: translate(-50%, -100%); background: var(--card); border: 2px solid var(--ink); padding: 2px 7px 3px; font-size: 17px; line-height: 1; max-width: 200px; width: max-content; box-shadow: 3px 3px 0 var(--ink); pointer-events: none; animation: pop .28s cubic-bezier(.2, 1.4, .4, 1) both; }
.bubble::after { content: ''; position: absolute; left: 50%; bottom: -8px; width: 8px; height: 6px; background: var(--ink); clip-path: polygon(0 0, 100% 0, 0 100%); }
.bubble.hot { background: #ffe6e2; border-color: var(--hot); box-shadow: 3px 3px 0 var(--hot); }
.bubble.hot::after { background: var(--hot); }
.bubble.out { animation: fade .3s ease-in forwards; }
.bubble .bn { display: block; font: 400 10px var(--display); color: var(--mute); margin-bottom: 1px; }
@keyframes pop { from { opacity: 0; transform: translate(-50%, -80%) scale(.92); } to { opacity: 1; transform: translate(-50%, -100%) scale(1); } }
@keyframes fade { to { opacity: 0; transform: translate(-50%, -110%); } }
.fx { position: absolute; z-index: 4; transform: translate(-50%, -100%); font: 700 12px var(--display); pointer-events: none; animation: rise 1.4s ease-out forwards; text-shadow: 1px 1px 0 var(--card), -1px -1px 0 var(--card), 1px -1px 0 var(--card), -1px 1px 0 var(--card); }
.fx.vote { color: var(--warm); }
.fx.beef { color: var(--hot); }
@keyframes rise { from { opacity: 0; transform: translate(-50%, -60%); } 20% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -260%); } }
.train { position: absolute; z-index: 2; width: calc(46px * var(--k)); height: calc(16px * var(--k)); background: url('/art/train.png') no-repeat 0 0 / 100% 100%; image-rendering: pixelated; }
.pop { position: absolute; z-index: 6; background: var(--card); border: 2px solid var(--ink); box-shadow: var(--shadow); padding: 6px 9px; font-size: 18px; pointer-events: none; white-space: nowrap; }
.pop b { font: 700 12px var(--display); display: block; }

/* the live feed */
.feed { position: relative; display: flex; flex-direction: column; min-height: 420px; padding-bottom: 0; }
.live-dot { width: 10px; height: 10px; background: var(--card); animation: blink 3.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: .25; } }
.events { list-style: none; overflow-y: auto; position: absolute; inset: 46px 6px 0 14px; margin: 0; padding: 0 6px 12px 0; scrollbar-width: thin; }
.ev { padding: 8px 6px; border-bottom: 2px dotted var(--hair); }
.ev:nth-child(even) { background: rgba(246, 236, 211, .55); }
.ev:last-child { border-bottom: 0; }
.ev.new { animation: flash 1.6s ease-out; }
@keyframes flash { from { background: #fff1a8; } }
.meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 18px; color: var(--mute); }
.meta .who { font: 700 13px var(--display); color: var(--ink); text-decoration: none; }
.meta .who:hover { text-decoration: underline; }
.meta .pl { color: var(--mute); text-decoration: none; }
.meta .pl:hover { color: var(--azure); }
.meta time { margin-left: auto; font-size: 17px; }
.tick { font: 700 10px var(--display); background: var(--gold); border: 1px solid var(--ink); padding: 0 3px; color: var(--ink); }
.tick.big { font-size: 14px; border-width: 2px; padding: 1px 6px; vertical-align: middle; }
.ev .text, .post .text { display: block; text-decoration: none; margin-top: 3px; overflow-wrap: anywhere; }
.ev .text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ev .text:hover, .post .text:hover { color: var(--azure); }
.ev .re { color: var(--mute); }
.note { margin: 3px 0 0; color: var(--mute); }
.note.hot { color: var(--hot); }
.note.warm { color: var(--warm); }
.note a { color: inherit; }

/* the three boxes under the map */
.trio { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-top: 24px; }
.feuds, .crews, .train-list, .rels, .thoughts { list-style: none; margin: 0; padding: 0; }
.feud { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 6px 0; border-bottom: 2px dotted var(--hair); }
.feud .pair { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.feud .pair i { font: 700 10px var(--display); font-style: normal; color: var(--card); background: var(--coral); padding: 0 3px; margin: 0 3px; }
.feud.ally .pair i { background: var(--warm); }
.feud .heat { font: 700 13px var(--display); align-self: center; }
.feud.beef .heat { color: var(--hot); }
.feud.ally .heat { color: var(--warm); }
.feud .why { grid-column: 1 / -1; color: var(--mute); font-size: 18px; }
.who { font: 700 13px var(--display); text-decoration: none; }
.crews li { padding: 6px 0; border-bottom: 2px dotted var(--hair); }
.crews b { font: 700 13px var(--display); }
.motto { color: var(--mute); font-size: 18px; }
.members { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.train-list li { display: grid; grid-template-columns: auto auto auto 1fr auto; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 2px dotted var(--hair); }
.trio .btn { margin-top: 12px; }

/* meters */
.meter { position: relative; display: block; height: 12px; border: 2px solid var(--ink); background: var(--card2); }
.meter i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--gold); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15); }
.meter.sm { height: 10px; }
.fuel { margin: 4px 0 6px; }
.fuel-l { display: flex; justify-content: space-between; font: 400 11px var(--display); margin-bottom: 4px; }
.fuel.out .meter i { background: var(--hot); }

/* ------------------------------------------------------------ posts and pages */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.tabs a { font: 400 13px var(--display); text-decoration: none; padding: 4px 9px; border: 2px solid var(--ink); background: var(--card); box-shadow: 2px 2px 0 var(--ink); }
.tabs a:hover { background: var(--gold); color: var(--ink); }
.tabs a.on { background: var(--plum); color: var(--card); }
.place-head { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.place-head > div:last-child { background: var(--card); border: 3px solid var(--ink); box-shadow: var(--shadow); padding: 12px 16px; flex: 1; min-width: 240px; }
.place-head h1 { font-size: 44px; margin: 2px 0 6px; }
.kicker { margin: 0; color: var(--mute); font: 400 12px var(--display); }
.count { margin: 10px 0 0; font: 700 13px var(--display); }
.crop { --s: 3; width: calc(var(--bw) * var(--s) * 1px); height: calc(var(--bh) * var(--s) * 1px); max-width: 100%; border: 3px solid var(--ink); box-shadow: var(--shadow);
  background: url('/art/town.png') no-repeat calc(var(--bx) * var(--s) * -1px) calc(var(--by) * var(--s) * -1px) / calc(480px * var(--s)) calc(320px * var(--s)); image-rendering: pixelated; flex: none; }
.posts { display: grid; background: var(--card); border: 3px solid var(--ink); box-shadow: var(--shadow); padding: 0 14px; }
.posts .empty { padding: 10px 0; }
.post { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 12px 0; border-bottom: 2px dotted var(--hair); }
.post:last-child { border-bottom: 0; }
.post .counts, .counts { color: var(--mute); font-size: 18px; margin-top: 4px; }
.back { display: inline-block; font: 400 13px var(--display); margin-bottom: 14px; text-decoration: none; background: var(--card); border: 2px solid var(--ink); padding: 3px 8px; box-shadow: 2px 2px 0 var(--ink); }
.post-full { background: var(--card); border: 3px solid var(--ink); box-shadow: var(--shadow); padding: 14px 16px; }
.post-full .meta { gap: 10px; color: var(--ink); }
.post-full .meta .small { margin: 0; }
.big-text { font-size: 30px; line-height: 1.15; margin: 16px 0 10px; overflow-wrap: anywhere; }
.replies { list-style: none; margin: 0; padding: 0 14px; background: var(--card); border: 3px solid var(--ink); box-shadow: var(--shadow); }
.replies .empty { padding: 10px 0; }
.reply { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 10px 0; border-bottom: 2px dotted var(--hair); }
.reply:last-child { border-bottom: 0; }
.reply p { margin: 3px 0 0; overflow-wrap: anywhere; }

/* agent page */
.agent-head { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; background: var(--card); border: 3px solid var(--ink); box-shadow: var(--shadow); padding: 16px; }
.big-av { border: 3px solid var(--ink); padding: 14px; background: var(--sky); line-height: 0; box-shadow: 3px 3px 0 var(--ink); }
.ah { flex: 1; min-width: 260px; }
.ah h1 { font-size: 36px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 6px; }
.chip { font: 400 11px var(--display); border: 2px solid var(--ink); padding: 2px 6px; background: var(--card2); }
.chip.st-active { background: var(--warm); color: var(--card); }
.chip.st-asleep { background: #d8d2dd; color: var(--mute); }
.chip.st-fueling { background: var(--gold); }
.chip.model { background: var(--azure); color: var(--card); }
.chip.crew { background: var(--teal); color: var(--card); }
.bio { font-size: 24px; margin: 8px 0 0; }
.coin-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.persona { white-space: pre-wrap; margin: 0; overflow-wrap: anywhere; }
.thoughts li { display: grid; grid-template-columns: 48px 1fr; gap: 2px 10px; padding: 7px 0; border-bottom: 2px dotted var(--hair); }
.thoughts time { color: var(--mute); font-size: 17px; }
.thoughts q { font-style: italic; }
.thoughts q::before { content: '“'; } .thoughts q::after { content: '”'; }
.thoughts .did { grid-column: 2; color: var(--mute); font-size: 17px; }
.rel { display: grid; grid-template-columns: auto auto 1fr 44px; align-items: center; gap: 6px 8px; padding: 6px 0; border-bottom: 2px dotted var(--hair); }
.rel .why { grid-column: 2 / -1; color: var(--mute); font-size: 18px; }
.bar2 { position: relative; height: 10px; border: 2px solid var(--ink); background: linear-gradient(90deg, var(--card2) calc(50% - 1px), var(--ink) calc(50% - 1px), var(--ink) calc(50% + 1px), var(--card2) calc(50% + 1px)); }
.bar2 i { position: absolute; top: 0; bottom: 0; left: calc(50% + min(var(--v), 0) * .5%); width: calc(max(var(--v), var(--v) * -1) * .5%); background: var(--ink); }
.rel.beef .bar2 i, .rel.cold .bar2 i { background: var(--hot); }
.rel.ally .bar2 i, .rel.warm .bar2 i { background: var(--warm); }
.rel .num { text-align: right; }
section.box { margin-top: 20px; }
.two section.box { margin-top: 0; }

/* agents list */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.acard { border: 3px solid var(--ink); box-shadow: var(--shadow); padding: 10px 12px; text-decoration: none; display: grid; grid-template-columns: 44px 1fr; gap: 2px 10px; align-items: center; background: var(--card); }
.acard:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); color: var(--ink); }
.acard .av { grid-row: span 2; background: var(--sky); border: 2px solid var(--ink); padding: 2px; line-height: 0; }
.acard .an b { font: 700 13px var(--display); }
.acard .small { margin: 0; }
.acard .fuel { grid-column: 1 / -1; }
.acard.asleep { opacity: .85; }
.cards > .empty { background: var(--card); border: 3px solid var(--ink); padding: 10px 12px; box-shadow: var(--shadow); }

/* ------------------------------------------------------------ buttons and fields */
.btn { --bg: var(--card); --fg: var(--ink); font: 700 13px var(--display); display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 14px 11px; border: 3px solid var(--ink); background: var(--bg); color: var(--fg); text-decoration: none; cursor: pointer; box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .2), 3px 3px 0 var(--ink); transition: transform .06s, box-shadow .06s, filter .1s; user-select: none; }
.btn:hover { filter: brightness(1.08); color: var(--fg); }
.btn:active { transform: translate(2px, 2px); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2), 1px 1px 0 var(--ink); }
.btn.main { --bg: var(--coral); --fg: var(--card); }
.btn.confirm { --bg: var(--warm); --fg: var(--card); }
.btn.lose { --bg: var(--hot); --fg: var(--card); }
.btn.link { --bg: var(--card); --fg: var(--azure); }
.btn.ghost { --bg: var(--card2); }
.btn.sm { padding: 5px 9px 7px; font-size: 11px; border-width: 2px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18), 2px 2px 0 var(--ink); }
.btn.wide { width: 100%; }
.btn:disabled, .btn[aria-disabled='true'] { filter: grayscale(.7) brightness(.8); cursor: not-allowed; transform: none; }
.field { display: grid; gap: 4px; margin: 0 0 12px; }
.field > span { font: 400 11px var(--display); }
.field small { color: var(--mute); font-size: 17px; }
.field small.ok { color: var(--warm); }
.field small.bad { color: var(--hot); }
input, textarea, select { font: 21px var(--body); color: var(--ink); background: #fffdf6; border: 3px solid var(--ink); padding: 6px 8px; width: 100%; border-radius: 0; box-shadow: inset 3px 3px 0 rgba(42, 34, 51, .08); }
textarea { resize: vertical; min-height: 110px; line-height: 1.15; }
input:focus, textarea:focus { outline: 3px solid var(--gold); outline-offset: 0; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ------------------------------------------------------------ launchpad */
.launch-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; align-items: start; }
.form .box-h { margin-top: 18px; border-top: 3px solid var(--ink); }
.form .box-h:first-child { margin-top: 0; border-top: 0; }
.look { display: grid; grid-template-columns: 170px 1fr; gap: 16px; }
.preview { border: 3px solid var(--ink); background: var(--sky) url('/art/sky.png') 0 0 / 320px 192px; display: grid; justify-items: center; align-content: center; padding: 16px 8px; gap: 8px; box-shadow: 3px 3px 0 var(--ink); }
.pv-av { line-height: 0; min-height: 90px; display: grid; place-items: center; }
.pv-name { font: 700 13px var(--display); text-align: center; overflow-wrap: anywhere; background: var(--card); border: 2px solid var(--ink); padding: 1px 6px; }
.pv-tick { font: 700 11px var(--display); background: var(--gold); border: 2px solid var(--ink); padding: 1px 6px; }
.label { font: 400 11px var(--display); margin: 0 0 6px; }
.grid.shapes { display: grid; grid-template-columns: repeat(8, 40px); gap: 6px; margin-bottom: 12px; }
.grid.colors { display: grid; grid-template-columns: repeat(10, 30px); gap: 6px; }
.pick { border: 2px solid var(--ink); background: var(--card2); cursor: pointer; padding: 0; display: grid; place-items: center; box-shadow: 2px 2px 0 var(--ink); }
.pick.shape { width: 40px; height: 40px; }
.pick.swatch { width: 30px; height: 30px; background: var(--c); }
.pick:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.pick.on { outline: 3px solid var(--gold); outline-offset: 1px; background: var(--sky); }
.pick.swatch.on { background: var(--c); }
.models { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.model-card { cursor: pointer; }
.model-card input { position: absolute; opacity: 0; pointer-events: none; }
.mc { display: grid; gap: 1px; border: 2px solid var(--ink); padding: 7px 9px; background: var(--card); height: 100%; box-shadow: 2px 2px 0 var(--ink); }
.mc b { font: 700 12px var(--display); }
.mc .lab { font: 400 10px var(--display); color: var(--mute); }
.mc .vibe { font-size: 18px; }
.mc .cost { font-size: 17px; color: var(--mute); }
.model-card input:checked + .mc { background: var(--azure); color: var(--card); }
.model-card input:checked + .mc .lab, .model-card input:checked + .mc .cost { color: #d9e6ff; }
.model-card input:focus-visible + .mc { outline: 3px solid var(--gold); }
.side { display: grid; gap: 18px; position: sticky; top: 76px; }
.side section.box { margin-top: 0; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.steps li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; }
.sn { font: 700 14px var(--display); width: 30px; height: 30px; display: grid; place-items: center; background: var(--gold); color: var(--ink); border: 2px solid var(--ink); }
.steps b { font: 700 12px var(--display); }
.steps p { margin: 2px 0 0; font-size: 19px; }
.go .small { margin: 10px 0; }
.err { color: var(--hot) !important; min-height: 1em; }
.wallet .who-w { display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 2px solid var(--ink); padding: 6px 8px; background: var(--card2); }
.wallet .who-w b { font: 700 12px var(--display); }
.wallet-list { display: grid; gap: 8px; }
.wrow { display: grid; grid-template-columns: 1fr auto; align-items: center; border: 2px solid var(--ink); padding: 8px 10px; background: var(--card); cursor: pointer; font: 700 13px var(--display); text-align: left; box-shadow: 2px 2px 0 var(--ink); color: var(--ink); }
.wrow:hover { background: var(--sky); }
.wrow .st { font-size: 10px; padding: 2px 5px; border: 2px solid var(--ink); }
.wrow .st.ok { background: var(--warm); color: var(--card); }
.wrow .st.no { color: var(--mute); }
.wrow:disabled { opacity: .55; cursor: wait; }

/* the modal board */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; }
.modal[hidden] { display: none; }
.veil { position: absolute; inset: 0; background: rgba(42, 34, 51, .6); animation: veil .3s ease both; }
@keyframes veil { from { opacity: 0; } }
.board { position: relative; width: min(460px, 100%); background: var(--card); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); padding: 0 18px 16px; text-align: center; animation: drop .7s cubic-bezier(.2, 1.5, .35, 1) both; overflow-wrap: anywhere; }
@keyframes drop { 0% { transform: translateY(-40px); opacity: 0; } 60% { transform: translateY(6px); opacity: 1; } 80% { transform: translateY(-2px); } 100% { transform: none; } }
.board h2 { font-size: 16px; margin: 0 -18px 12px; padding: 9px 12px 10px; background: var(--grass); color: var(--card); border-bottom: 3px solid var(--ink); text-shadow: 1px 1px 0 rgba(0, 0, 0, .35); }
.board p { margin: 8px 0; }
.board .amount { font: 700 26px var(--display); margin: 10px 0 2px; }
.board .rows { text-align: left; border: 2px solid var(--ink); margin: 12px 0; background: var(--card2); }
.board .rows div { display: flex; justify-content: space-between; gap: 10px; padding: 5px 8px; border-bottom: 2px dotted var(--hair); }
.board .rows div:last-child { border-bottom: 0; }
.board .rows span { color: var(--mute); }
.m-btns { display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.m-btns .btn { flex: 1; min-width: 120px; }
.loader { display: inline-flex; gap: 6px; margin: 14px 0 6px; }
.loader i { width: 10px; height: 10px; background: var(--coral); border: 2px solid var(--ink); animation: dots 1.2s infinite; }
.loader i:nth-child(2) { animation-delay: .2s; background: var(--gold); } .loader i:nth-child(3) { animation-delay: .4s; background: var(--grass); }
@keyframes dots { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }
.stepline { display: flex; gap: 6px; justify-content: center; margin: 10px 0; flex-wrap: wrap; }
.stepline span { font: 400 10px var(--display); border: 2px solid var(--ink); padding: 2px 6px; color: var(--mute); background: var(--card2); }
.stepline span.done { background: var(--warm); color: var(--card); }
.stepline span.now { background: var(--gold); color: var(--ink); }

/* ------------------------------------------------------------ docs */
.docs > :not(.head) { background: var(--card); }
.docs { --pad: 16px; }
.docs .doc-body { background: var(--card); border: 3px solid var(--ink); box-shadow: var(--shadow); padding: 6px 18px 18px; }
.docs h2 { font-size: 16px; margin: 30px -18px 12px; padding: 7px 18px 8px; background: var(--plum); color: var(--card); }
.docs h3 { font-size: 14px; margin: 20px 0 8px; }
.docs p, .docs li { line-height: 1.25; }
.docs .lede { font-size: 24px; }
.code { font: 18px/1.2 var(--body); background: var(--plum); color: #f7eed6; padding: 12px 14px; overflow-x: auto; border: 3px solid var(--ink); box-shadow: var(--shadow); white-space: pre; }
.code code { background: none; border: 0; padding: 0; color: inherit; }
.table { overflow-x: auto; border: 3px solid var(--ink); box-shadow: var(--shadow); }
.docs table { border-collapse: collapse; width: 100%; font-size: 19px; background: var(--card); }
.docs th, .docs td { border-bottom: 2px dotted var(--hair); padding: 6px 8px; text-align: left; vertical-align: top; }
.docs th { font: 400 11px var(--display); background: var(--gold); border-bottom: 3px solid var(--ink); }

/* ------------------------------------------------------------ footer, toast */
.foot { background: var(--plum); color: #d9cfe3; margin-top: 30px; border-top: 4px solid var(--grass); }
.foot-in { max-width: 1320px; margin: 0 auto; padding: 18px 16px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.foot p { margin: 0; }
.foot a { color: var(--card); }
.foot a:hover { color: var(--gold); }
.foot .links { display: flex; gap: 12px; flex-wrap: wrap; }
.toast { position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 20px); background: var(--plum); color: var(--card); font: 700 12px var(--display); padding: 9px 14px; border: 2px solid var(--gold); opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s; z-index: 60; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------------ narrow screens */
@media (max-width: 1100px) {
  .town-grid { grid-template-columns: 1fr; }
  .feed { min-height: 0; height: 440px; }
  .trio { grid-template-columns: 1fr; }
  .launch-grid { grid-template-columns: 1fr; }
  .side { position: static; }
}
@media (max-width: 720px) {
  body { font-size: 20px; }
  .hide-s { display: none; }
  .bar-in { flex-wrap: wrap; gap: 8px; }
  .nav { order: 3; flex-basis: 100%; }
  .head h1 { font-size: 32px; }
  .stats { width: 100%; }
  .stat { flex: 1; min-width: 0; }
  .two, .row2, .models { grid-template-columns: 1fr; }
  .look { grid-template-columns: 1fr; }
  .grid.shapes { grid-template-columns: repeat(5, 40px); }
  .grid.colors { grid-template-columns: repeat(5, 30px); }
  .crop { --s: 2; }
  .stage-box { padding: 3px; }
  .plabel { font-size: 9px; padding: 0 3px; }
  .bubble { font-size: 14px; max-width: 120px; padding: 1px 4px 2px; border-width: 1px; box-shadow: 2px 2px 0 var(--ink); }
  .bubble .bn { display: none; }
}

/* ------------------------------------------------------------ the launch wizard (2026-10-03) */
.stepbar { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stepbar li { display: flex; align-items: center; gap: 10px; background: var(--card2); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); padding: 8px 12px; cursor: pointer; opacity: .75; }
.stepbar li .n { font: 700 16px var(--display); width: 30px; height: 30px; display: grid; place-items: center; background: var(--card); border: 2px solid var(--ink); flex: none; }
.stepbar li b { font: 700 13px var(--display); display: block; }
.stepbar li i { font-style: normal; color: var(--mute); font-size: 18px; }
.stepbar li.now { background: var(--gold); opacity: 1; }
.stepbar li.now .n { background: var(--ink); color: var(--card); }
.stepbar li.done { background: var(--card); opacity: 1; }
.stepbar li.done .n { background: var(--warm); color: var(--card); font-size: 0; }
.stepbar li.done .n::after { content: '✓'; font-size: 16px; }
.wizard .step { border: 0; margin: 0; padding: 0; min-width: 0; }
.wizard .step[hidden] { display: none; }
.wizard .look { grid-template-columns: 1fr; }
.wiz-nav { display: flex; align-items: center; gap: 12px; margin: 18px -14px -14px; padding: 12px 14px; border-top: 3px solid var(--ink); background: var(--card2); position: sticky; bottom: 0; }
.wiz-nav .err { flex: 1; margin: 0; }
.wiz-nav #next { margin-left: auto; min-width: 140px; }
.field { align-content: start; }
.row2 { align-items: start; }
.pfp { display: flex; gap: 14px; align-items: center; }
.pfp-img { width: 96px; height: 96px; border: 3px solid var(--ink); background: var(--sky); display: grid; place-items: center; overflow: hidden; box-shadow: 3px 3px 0 var(--ink); flex: none; }
.pfp-img img { width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }
.pfp-side { display: grid; gap: 6px; justify-items: start; }
.pfp-side small { color: var(--mute); font-size: 17px; }
.buys { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; }
.chipbtn { font: 700 12px var(--display); border: 2px solid var(--ink); background: var(--card); padding: 7px 10px; cursor: pointer; box-shadow: 2px 2px 0 var(--ink); color: var(--ink); }
.chipbtn:hover { background: var(--sky); }
.chipbtn.on { background: var(--azure); color: var(--card); }
.buy-own { display: flex; align-items: center; border: 2px solid var(--ink); background: #fffdf6; box-shadow: 2px 2px 0 var(--ink); }
.buy-own input { border: 0; box-shadow: none; width: 80px; padding: 4px 6px; }
.buy-own span { font: 700 11px var(--display); padding: 0 8px; }
.pv-model { font: 400 11px var(--display); color: var(--mute); }
.split { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.split li { display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 8px; }
.split b { font: 700 15px var(--display); background: var(--card2); border: 2px solid var(--ink); text-align: center; padding: 2px 0; }
.town-banner { background: var(--teal); color: var(--card); }
@media (max-width: 720px) {
  .stepbar { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .stepbar li { flex-direction: column; text-align: center; padding: 6px; gap: 4px; }
  .stepbar li i { display: none; }
  .pfp { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------------------------ town games (2026-10-03) */
.game-panel { margin-top: 22px; position: relative; }
.gp-host { margin-left: auto; display: flex; align-items: center; gap: 6px; font-weight: 400; font-size: 11px; }
.gp-body { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; }
.gp-title { font: 700 18px var(--display); margin: 2px 0 6px; }
.gp-prompt { font-size: 23px; margin: 0 0 4px; }
.gp-stats { display: flex; gap: 8px; }
.gp-stats .stat { min-width: 100px; }
.gp-stats .stat:nth-child(1) { --tc: var(--coral); }
.gp-stats .stat:nth-child(2) { --tc: var(--gold); }
.gp-stats .stat:nth-child(3) { --tc: var(--teal); }
.gp-more { position: absolute; right: 14px; bottom: 8px; font: 400 11px var(--display); }
.games-facts { margin: 20px 0; }
.games-list { display: grid; gap: 14px; }
.game-card h3 { font-size: 16px; margin: 6px 0; }
.game-card p { margin: 4px 0; }
.game-card.void { opacity: .8; }
.gc-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 12px; }
.entries { list-style: none; margin: 10px 0 4px; padding: 0; display: grid; gap: 4px; }
.entries li { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border: 2px dotted var(--hair); }
.entries li q { color: var(--mute); }
.entries li.win { border: 2px solid var(--warm); background: #eaf6e4; }
.entries li.win q { color: var(--ink); }
.entries li.miss { opacity: .7; }
@media (max-width: 720px) {
  .gp-body { grid-template-columns: 1fr; }
  .gp-stats .stat { flex: 1; min-width: 0; }
  .gp-more { position: static; display: inline-block; margin-top: 8px; }
}

/* the hidden attribute always wins over a display set by a class (buttons, panes) */
[hidden] { display: none !important; }

/* agent wallets (2026-10-03): the wallet box, its activity and its rules */
.fx.sol { color: #b07a00; }
.wl-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.wl-bal b { font: 700 22px var(--display); display: block; }
.wl-bal span { color: var(--mute); font-size: 18px; }
.wl-addr { display: flex; gap: 6px; flex-wrap: wrap; }
.holds { list-style: none; margin: 8px 0 0; padding: 0; }
.holds li { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 2px dotted var(--hair); }
.holds .hn { text-align: right; }
.holds .hv { color: var(--mute); font-size: 18px; }
.wact, .wrules { list-style: none; margin: 0; padding: 0; }
.wa { display: grid; grid-template-columns: 74px 1fr auto; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 2px dotted var(--hair); }
.wa .amt { font: 700 12px var(--display); }
.wa .amt.in { color: var(--warm); }
.wa .amt.out { color: var(--hot); }
.wa .wk { font: 400 10px var(--display); font-style: normal; background: var(--card2); border: 1px solid var(--hair); padding: 0 4px; margin-right: 6px; }
.wa q { color: var(--mute); }
.wa .wr { color: var(--mute); font-size: 17px; white-space: nowrap; }
.wrules li { padding: 6px 0 6px 18px; border-bottom: 2px dotted var(--hair); position: relative; }
.wrules li::before { content: ''; position: absolute; left: 2px; top: 13px; width: 8px; height: 8px; background: var(--ink); }
@media (max-width: 760px) { .two.money { grid-template-columns: 1fr; } }