/* THE DESK — the conviction engine.
   Quiet ledger typography, one accent, hairlines, no gradients. The pixel art is the
   only decoration and it is deliberately the only thing that is not austere. */

:root{
  --ink:#12141C; --paper:#FFFFFF; --soft:#FBFAF5; --rule:#E7E2D6; --rule2:#EEEAE0;
  --body:#4A463C; --mute:#6E6857; --faint:#98917F; --green:#0E7C3A; --gold:#B98A2F;
  --amber:#E8B94A; --red:#C8321F;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:Archivo,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--green)}
svg{shape-rendering:crispEdges}
.pix{image-rendering:pixelated}
h2,h3{margin:0}
[hidden]{display:none !important}

@keyframes shout{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
@keyframes flick{0%,60%{opacity:1}61%,100%{opacity:.25}}
@keyframes drop{0%{transform:translateY(-3px);opacity:0}30%{opacity:1}100%{transform:translateY(0);opacity:1}}
@keyframes tick{0%,100%{opacity:1}50%{opacity:.15}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.shout{animation:shout .5s steps(2,end) infinite}
.flick{animation:flick 1s steps(1,end) infinite}
.drop{animation:drop 1.6s ease-out infinite}
.tick{animation:tick 2s steps(1,end) infinite}
.pulse{display:inline-block;width:8px;height:8px;background:var(--green);animation:pulse 1s steps(2,end) infinite;vertical-align:middle;margin-right:8px}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* ------------------------------------------------------------------ shared */
.k{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.12em;color:var(--mute)}
.k.dim{color:var(--faint)}
.v{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:22px;font-variant-numeric:tabular-nums;margin-top:5px}
.v.sm{font-size:15px}
.v.up{color:var(--green)}
/* Burned supply. Amber rather than red: it is not an error state, it is the half of every
   fee that stops existing. */
.v.burnt{color:var(--gold)}
.soft{font-size:14px;line-height:1.6;color:var(--body);text-wrap:pretty}
.fine{line-height:1.8;margin-top:14px}
.cta{display:inline-block;border:1px solid var(--ink);background:var(--ink);color:#fff;text-decoration:none;font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.08em;padding:14px 30px;font-weight:600;cursor:pointer}
.cta:hover{background:var(--green)}

/* ------------------------------------------------------------------ nav */
.nav{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:16px clamp(16px,4vw,48px);border-bottom:1px solid var(--rule);position:sticky;top:0;background:rgba(255,255,255,.97);z-index:6}
.nav-brand{display:flex;align-items:center;gap:12px}
.nav-word{font-family:'Press Start 2P',monospace;font-size:11px}
.nav-sub{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.1em;color:var(--faint)}
.nav-links{display:flex;flex-wrap:wrap;gap:2px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.06em;order:3}
.nav-links a{text-decoration:none;color:var(--mute);padding:7px 12px}
.nav-links a:hover{color:var(--ink);background:#F4F1E8}
.nav-links a.on{color:#fff;background:var(--ink)}
.w-btn{border:1px solid var(--ink);background:var(--ink);color:#fff;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;padding:10px 18px;cursor:pointer;font-weight:600;display:flex;align-items:center;gap:8px}
.w-btn.on{background:#fff;color:var(--ink)}
.w-dot{width:6px;height:6px;flex:none;background:var(--gold)}
.w-btn.on .w-dot{background:var(--green)}

/* ------------------------------------------------------------------ clock */
.clock{border-bottom:1px solid var(--ink);background:var(--soft);padding:clamp(22px,4vw,40px) clamp(16px,4vw,48px)}
.clock-in{max-width:1240px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:flex-end;gap:clamp(24px,5vw,64px)}
.clock-left{display:flex;align-items:flex-end;gap:18px;flex:none}
.countdown{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:clamp(46px,8vw,86px);line-height:.92;font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin-top:4px}
.bar{height:3px;background:var(--rule);margin-top:10px;max-width:320px}
.bar>div{height:100%;background:var(--green);width:0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:clamp(18px,3vw,40px);flex:1;min-width:min(100%,280px)}
.note{border-bottom:1px solid var(--rule);padding:11px clamp(16px,4vw,48px);font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.05em;color:var(--mute)}

/* ------------------------------------------------------------------ your floor */
.yours{border-bottom:1px solid var(--rule);padding:13px clamp(16px,4vw,48px)}
.yours-in{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:clamp(14px,3vw,34px);flex-wrap:wrap}
.yours-l,.yours-r{flex:none}
.yours-n{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:24px;font-variant-numeric:tabular-nums;line-height:1;margin-top:5px}
.yours-of{color:var(--faint)}
.yours-w{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.12em;color:var(--mute);font-weight:400}
/* The proportion, read at a glance without counting tiles. Green is the part earning. */
.yours-bar{flex:1;min-width:120px;height:8px;background:var(--rule)}
.yours-fill{height:100%;background:var(--green);width:0;transition:width .35s ease-out}
.yours-r{display:flex;gap:clamp(16px,3vw,34px)}

/* ------------------------------------------------------------------ states */
.mid{padding:clamp(48px,9vw,96px) clamp(16px,4vw,48px);display:flex;justify-content:center;border-bottom:1px solid var(--ink)}
.mid-in{max-width:520px;text-align:center}
.mid-in h2{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(30px,5vw,42px);margin:20px 0 10px;line-height:1.05}
.mid-in p{font-size:15px;line-height:1.6;color:var(--body);margin:0 auto 26px;max-width:44ch;text-wrap:pretty}

/* ------------------------------------------------------------------ app */
.app{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));border-bottom:1px solid var(--ink)}
.col{padding:clamp(22px,3.5vw,34px) clamp(16px,3vw,34px);border-right:1px solid var(--rule);min-width:0}
.col.alt{background:var(--soft);border-right:0}
.hd{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;border-bottom:2px solid var(--ink);padding-bottom:9px}
.hd.mt{margin-top:38px}
.hd h2{font-family:'Instrument Serif',serif;font-weight:400;font-size:26px}
.step{margin-top:28px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px;margin-top:16px}
.tile{border:1px solid var(--rule);background:#fff;cursor:pointer;padding:5px;text-align:left;display:block}
.tile:hover{box-shadow:4px 4px 0 #EAF4EC}
.tile.on{border:2px solid var(--green)}
.tile-art{width:100%;aspect-ratio:1;border:1px solid #D9D2BE;background:#F4F1E8 center/100% 100% no-repeat;image-rendering:pixelated}
.tile-id{display:flex;justify-content:space-between;align-items:center;margin-top:6px;font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--mute)}

/* A Trador bought while its previous owner still had it working. It is idle in every sense
   that matters — its old position is dead and pays nobody — but it is worth marking, because
   the buyer is about to spend two transactions instead of one and should know why. */
.tile.sold{border:2px solid var(--gold)}
.tile.sold .tile-art{position:relative}
.tile-sold{position:absolute;top:2px;right:2px;background:var(--gold);color:#12141C;
  font-family:'IBM Plex Mono',monospace;font-size:7.5px;font-weight:700;letter-spacing:.08em;padding:1px 3px}
.sold-note{margin-top:12px;line-height:1.7;color:var(--gold)}

.wrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:14px 0;border-bottom:1px solid var(--rule2)}
.wrow-art{width:48px;height:48px;flex:none;border:1px solid var(--ink);background:#F4F1E8 center/100% 100% no-repeat;image-rendering:pixelated}
.wrow-mid{flex:1;min-width:120px}
.wrow-t{font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:600;display:flex;align-items:center;gap:7px}
.wrow-s{font-family:'IBM Plex Mono',monospace;font-size:9.5px;color:var(--mute);letter-spacing:.06em;margin-top:3px}
.wrow-s b{color:var(--ink);font-variant-numeric:tabular-nums}
.wrow-a{display:flex;gap:6px;flex:none}
.btn-s{border:1px solid var(--ink);background:#EAF4EC;color:var(--ink);font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.06em;padding:9px 12px;cursor:pointer;font-weight:600;min-height:44px}
.btn-s:hover{background:#B7E0C4}
.btn-s[disabled]{background:#F7F5EE;color:var(--faint);cursor:not-allowed}
.btn-g{border:1px solid #D9D2BE;background:#fff;color:var(--mute);font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.06em;padding:9px 12px;cursor:pointer;min-height:44px}
.btn-g:hover{border-color:var(--ink);color:var(--ink)}

/* Section-header actions — SELECT ALL and COLLECT ALL. Deliberately quieter than .btn-s:
   a bulk action sitting beside a heading should not out-shout the per-row buttons it
   summarises. Sized under the 44px touch minimum on purpose; these sit in a heading row,
   never in a thumb path, and both have a full-width equivalent below (the go button, the
   per-row COLLECT). */
.hd-r{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.btn-h{border:1px solid var(--rule);background:#fff;color:var(--mute);font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.1em;padding:7px 10px;cursor:pointer;font-weight:600;min-height:30px;white-space:nowrap}
.btn-h:hover:not([disabled]){border-color:var(--ink);color:var(--ink);background:#EAF4EC}
.btn-h[disabled]{color:var(--faint);cursor:not-allowed}
.btn-h[aria-pressed="true"]{border-color:var(--green);color:var(--green)}
.tile-ck{color:var(--green);font-weight:700}

.brains{display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr));gap:7px;margin-top:9px}
/* EQUAL HEIGHT, whatever the copy. The old build's cards ranged 250px to 751px because
   the commentary ran 80 to 1,400 characters. */
.brain{border:1px solid var(--rule);background:#fff;cursor:pointer;padding:9px 10px;text-align:left;display:flex;flex-direction:column;gap:5px;min-height:92px}
.brain:hover{box-shadow:3px 3px 0 #DCF2E2}
.brain.on{border-color:var(--ink);background:#EAF4EC}
.brain-n{display:flex;align-items:center;gap:7px}
.brain-n span:last-child{font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;line-height:1.2}
.brain-a{width:20px;height:20px;flex:none;border:1px solid #D9D2BE;background:#F4F1E8 center/100% 100% no-repeat;image-rendering:pixelated}
.brain-l{font-size:11.5px;line-height:1.35;color:var(--body);flex:1;text-wrap:pretty}

.dial{display:flex;align-items:flex-end;gap:4px;margin-top:12px}
.dial button{flex:1;min-width:0;border:1px solid var(--rule);background:#fff;cursor:pointer;padding:0 0 6px;display:flex;align-items:flex-end;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;color:var(--faint);font-variant-numeric:tabular-nums}
.dial button:hover{border-color:var(--ink)}
.dial button.on{border-color:var(--ink);background:var(--green);color:#fff}
.mults{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px;margin-top:20px;border-top:1px solid var(--rule);padding-top:16px}
.mults .v{font-size:26px}
.go{width:100%;border:1px solid var(--ink);background:var(--ink);color:#fff;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.1em;padding:18px;cursor:pointer;font-weight:600;display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;margin-top:24px}
.go[disabled]{background:#fff;color:var(--faint);cursor:not-allowed}
.go:not([disabled]):hover{opacity:.9}
.fail{border:1px solid var(--ink);background:#fff;padding:13px 15px;margin-top:14px;font-size:13.5px;line-height:1.55;text-wrap:pretty}
.flash{border-left:2px solid var(--green);padding:4px 0 4px 12px;margin-top:14px;font-size:13.5px;line-height:1.5}

/* ------------------------------------------------------------------ how */
.how{padding:clamp(44px,7vw,84px) clamp(16px,4vw,48px);max-width:1240px;margin:0 auto}
.how>h2{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(30px,4.5vw,44px);margin-bottom:8px}
.how>p.soft{margin:0 0 40px;color:var(--mute)}
.how-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(24px,4vw,44px)}
.hw{width:100%;max-width:150px;height:auto;display:block}
.hw.sm{max-width:120px}
.how-grid h3{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.1em;font-weight:600;margin:18px 0 8px}
.how-grid p{font-size:14.5px;line-height:1.6;color:var(--body);margin:0;text-wrap:pretty}
.closer{font-family:'Instrument Serif',serif;font-size:clamp(30px,5.5vw,56px);line-height:1.1;margin:clamp(52px,8vw,96px) 0 0;max-width:18ch;text-wrap:pretty}

/* ------------------------------------------------------------------ docs */
.docs{border-top:1px solid var(--ink);background:var(--soft);padding:clamp(44px,7vw,84px) clamp(16px,4vw,48px)}
.docs-in{max-width:1240px;margin:0 auto}
.docs-in>h2{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(28px,4vw,40px);margin:8px 0 6px}
.docs-in>p.soft{margin:0 0 clamp(28px,4vw,44px);color:var(--mute);max-width:60ch}
.docs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(26px,4vw,48px)}
.docs-grid h3{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;font-weight:600;margin:0 0 10px}
.docs-grid p{font-size:14px;line-height:1.65;color:var(--body);margin:0 0 12px;text-wrap:pretty}
.docs-grid ul{font-size:14px;line-height:1.7;color:var(--body);margin:0;padding-left:18px}
.docs-grid li{margin-bottom:7px}
.docs-grid code{font-family:'IBM Plex Mono',monospace;font-size:12.5px;background:#F1EEE4;padding:1px 5px}
.docs-grid pre{font-family:'IBM Plex Mono',monospace;font-size:12px;line-height:1.9;background:#fff;border:1px solid var(--rule);padding:14px 16px;margin:0 0 12px;overflow-x:auto}
.addrs{font-family:'IBM Plex Mono',monospace;font-size:10.5px;line-height:2;color:var(--body);word-break:break-all}
.docs-facts{border-top:1px solid var(--rule);margin-top:clamp(30px,4vw,48px);padding-top:20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px}
.foot{border-top:1px solid var(--rule);padding:22px clamp(16px,4vw,48px);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.08em;color:var(--faint)}

/* ------------------------------------------------------------------ recovery notice
   Sits ABOVE the new game, and only for holders who actually have something in the
   retired desk. Everyone else never sees it, so it must never block the page. */
#rec{position:fixed;inset:0;z-index:9000;background:rgba(10,11,15,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:24px 20px;overflow-y:auto;overscroll-behavior:contain}
#rec-card{position:relative;width:100%;max-width:560px;max-height:calc(100vh - 48px);overflow-y:auto;background:var(--ink);border:1px solid #2E323D;border-top:3px solid var(--amber);color:#F4F1E8;padding:26px;box-shadow:0 24px 80px rgba(0,0,0,.55)}
#rec-close{position:absolute;top:8px;right:8px;width:40px;height:40px;border:0;background:transparent;color:#8E8878;font-size:22px;line-height:1;cursor:pointer;font-family:'IBM Plex Mono',monospace}
#rec-close:hover{color:#F4F1E8}
#rec-close:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
.rec-eye{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.16em;color:var(--amber)}
#rec-card h2{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(24px,4vw,32px);line-height:1.1;margin:8px 0 0;color:#fff}
.rec-lead{font-size:14px;line-height:1.6;color:#D6D1C4;margin:10px 0 0;text-wrap:pretty}
.rec-lead b{color:#fff}
.rec-help{font-size:12.5px;line-height:1.6;color:#B9B4A6;margin-top:14px;padding-top:12px;border-top:1px solid #2E323D;text-wrap:pretty}
.rec-help b{color:var(--amber);font-family:'IBM Plex Mono',monospace;font-size:11.5px}
.rec-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:12px 14px;background:#1B1E27;border:1px solid #2E323D;margin-top:8px}
.rec-id{font-family:'IBM Plex Mono',monospace;font-size:12.5px;font-weight:600;color:#fff;letter-spacing:.04em}
.rec-sub{font-family:'IBM Plex Mono',monospace;font-size:9.5px;color:#8E8878;letter-spacing:.06em;margin-top:3px}
.rec-acts{display:flex;gap:8px;flex-wrap:wrap;flex:none}
.rec-go{border:1px solid var(--amber);background:var(--amber);color:var(--ink);font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.05em;padding:11px 16px;cursor:pointer}
.rec-go:hover{background:#F2C65A}
.rec-go.alt{background:transparent;color:var(--amber)}
.rec-go.alt:hover{background:#2A2620}
.rec-go[disabled]{background:#23262F;color:#6E6857;border-color:#2E323D;cursor:not-allowed}
@media (max-width:620px){.rec-row{flex-direction:column;align-items:stretch}.rec-acts{width:100%}.rec-acts .rec-go{flex:1 1 auto}}
@media (max-width:760px){.col{border-right:0;border-bottom:1px solid var(--rule)}}

/* A quiet line, not a barrier. Only rendered when this wallet genuinely still has
   something in the retired desk; everyone else never sees it. */
.rec-hint{display:block;border-bottom:1px solid var(--rule);background:#FBF7EC;padding:11px clamp(16px,4vw,48px);font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.05em;color:#8A6520;text-decoration:none}
.rec-hint:hover{background:#F6EEDC;color:#12141C}

/* THE RUNNER. A strip, not a hero: it is a chore somebody is paid to do, not the
   point of the page. */
.runner{border-bottom:1px solid var(--ink);background:#12141C;color:#F4F1E8;padding:14px clamp(16px,4vw,48px)}
.runner-in{max-width:1240px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.runner-l{display:flex;align-items:center;gap:14px}
.runner-l .k.dim{color:#8E8878}
.runner-l .v{color:#fff;font-size:20px;margin-top:2px}
.runner-r{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.runner-r .k.dim{color:#8E8878}
.runner-btn{border:1px solid var(--amber);background:var(--amber);color:#12141C;font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:700;letter-spacing:.06em;padding:13px 20px;cursor:pointer;min-height:44px}
.runner-btn:hover{background:#F2C65A}
.runner-btn[disabled]{background:#23262F;color:#6E6857;border-color:#2E323D;cursor:not-allowed}