:root{color-scheme:dark;--ink:#fff;--panel:#14121c;--line:#f4f1e8;--accent:#f0b429;--red:#e5484d;--dark:#14121c}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:70px;background:#0b0a10}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{min-height:100%;color:var(--ink);font:12px/1.6 "PressStart2P",ui-monospace,monospace;-webkit-font-smoothing:none;overflow-x:hidden}
#bg{position:fixed;inset:0;width:100vw;height:100vh;height:100lvh;display:block;image-rendering:pixelated;touch-action:pan-y;z-index:0}
body::before{content:"";position:fixed;inset:0;background:rgba(11,10,16,.38);pointer-events:none;z-index:1}
.top,.poster,.secs{position:relative;z-index:2}
a{color:var(--ink)}
.btn{font:inherit;cursor:pointer;border:0;background:var(--accent);color:var(--dark);padding:16px 18px;box-shadow:4px 4px 0 #000;text-transform:uppercase;letter-spacing:1px}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #000}.btn:disabled{background:#6b6578!important;color:#ddd!important;cursor:wait}
.btn:focus-visible,.link:focus-visible,.step button:focus-visible,a:focus-visible{outline:3px dashed var(--ink);outline-offset:3px}
.badge{background:var(--red);color:#fff;font-size:11px;padding:4px 6px;cursor:help}
.top{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;background:#000}
.wm{font-size:18px;letter-spacing:1px;text-decoration:none}.wm span{color:#fff}
.links{display:flex;gap:14px;flex-wrap:wrap;font-size:11px}
.links a{text-decoration:none}.links a:hover{color:#fff;text-decoration:underline}
.poster{min-height:calc(100vh - 52px);min-height:calc(100svh - 52px);display:flex;flex-direction:column;justify-content:flex-end;gap:20px;padding:24px 18px 28px;max-width:1400px}
.tag{display:inline-block;margin-bottom:12px;font-size:13px;background:#000;color:#fff;padding:6px 8px}
h1{font-weight:normal;line-height:1;white-space:nowrap;font-size:clamp(30px,8.4vw,112px);text-shadow:6px 6px 0 #000}h1 span{display:block;color:#fff;margin-top:.1em}
.sub{font-size:13px;background:#000;padding:8px 10px;align-self:flex-start}.one{white-space:nowrap}
small{display:block;font-size:11px;opacity:.8}
.blk{display:grid;border:4px solid #000;box-shadow:10px 10px 0 #000}
.blk>div{padding:14px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.blk>div[hidden]{display:none}
.blk b{font-size:15px;font-weight:normal}
.a{background:var(--accent);color:var(--dark);flex-direction:column;align-items:flex-start!important;justify-content:center!important;gap:6px!important}
.step{display:flex;align-items:center;border:2px solid var(--dark)}
.step button{font:inherit;background:none;color:var(--dark);border:0;width:40px;height:40px;cursor:pointer;font-size:14px}
.step output{min-width:40px;text-align:center;font-size:16px;color:var(--dark)}
.k2{background:#f4f1e8;color:var(--dark)}.k2 small:last-child{font-size:10px;margin-top:4px}
.k{background:var(--dark)}.k>div{font-size:15px}.k small{white-space:nowrap}
.k .btn{font-size:13px;padding:10px 12px;box-shadow:none;white-space:nowrap}
.g{padding:0!important}.g .btn{width:100%;height:100%;min-height:64px;background:var(--red);color:#fff;box-shadow:none;font-size:15px;padding:20px}
.status{align-self:flex-start;background:#000;padding:8px 10px;font-size:12px;max-width:100%}
.status.ok{color:#fff}.status.err{color:#fff}
.tools{display:flex;gap:16px;flex-wrap:wrap}.tools:not(:has(:not([hidden]))){display:none}
.link{font:inherit;font-size:11px;color:var(--ink);background:#000;border:0;padding:6px 8px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.link:hover{color:#fff}.link[hidden]{display:none}
.foot{background:#000;padding:8px 10px;align-self:flex-start;font-size:10px}.tl{display:none}
@media (min-width:900px){.poster{padding:40px 56px}.tl{display:flex}.foot{display:none}.blk{grid-template-columns:1fr 1fr 1.4fr}.blk.has-claim{grid-template-columns:1fr 1fr 1.3fr 1.4fr}}
@media (max-width:899px){.wm{font-size:14px}.badge{font-size:9px}.one{white-space:normal}.sub{font-size:12px}.k small{font-size:10px}.tag{font-size:12px}}
.secs{max-width:900px;margin:0 auto;padding:40px 16px 60px;display:grid;gap:28px}
.sx{background:var(--dark);border:4px solid #000;box-shadow:10px 10px 0 #000;padding:22px;font-size:13px;line-height:1.9}
.sx h2{display:inline-block;background:#000;color:#fff;font-size:18px;padding:6px 10px;margin-bottom:16px;font-weight:normal}
.sx p+p{margin-top:14px}.sx ul{list-style:none;padding-left:0;display:grid;gap:40px}#traits li{padding:4px 6px}.sx b{color:#fff;font-weight:normal}
.totop{justify-self:center;background:#000;padding:10px 14px;font-size:12px}
@media (max-width:899px){.sx{font-size:12px;padding:18px}}
#tip{position:fixed;z-index:30;max-width:240px;padding:6px 8px;background:#111;color:var(--ink);font-family:inherit;font-size:9px;line-height:1.6;pointer-events:none;box-shadow:0 0 0 2px var(--ink)}
.px-dialog{margin:auto;width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 48px);overflow:auto;padding:18px;background:var(--panel);color:var(--ink);border:0;font-family:inherit;font-size:10px;line-height:1.8;
  box-shadow:0 -4px 0 0 var(--line),0 4px 0 0 var(--line),-4px 0 0 0 var(--line),4px 0 0 0 var(--line),10px 10px 0 0 #000}
.px-dialog::backdrop{background:rgba(8,6,14,.6)}
.px-dialog h2{margin:0 0 10px;font-size:14px;font-weight:400;color:#fff}.px-dialog ul{padding-left:16px}.px-dialog li{margin:6px 0}.px-dialog b{color:#fff;font-weight:400}
.px-dialog form{text-align:right;margin-top:10px}.px-dialog .btn{font-size:11px;padding:10px 12px}
.txinfo{margin:6px 0 0;font-size:10px;line-height:1.6;text-align:center;word-break:break-all}
.txinfo a{color:inherit;text-decoration:underline}

.link.wc{display:block;margin:6px auto 0;font-size:10px}
.wc-dialog{text-align:center}
.wc-qr{display:block;margin:8px auto;image-rendering:pixelated;width:232px;height:232px;max-width:70vw;max-height:70vw;border:4px solid #000;background:#fff}
.wc-note{font-size:10px;margin:4px 0 8px}
.wc-links{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:8px}
.wc-links a{font-size:10px;text-decoration:none}
.wc-row{display:flex;gap:8px;justify-content:center}
.wc-links[hidden]{display:none}

.wc-picker{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin:2px 0 4px;max-width:300px;margin-inline:auto}
.px-chip{font:inherit;font-size:8px;line-height:1;padding:5px 6px;background:#111;color:#fff;border:2px solid #555;cursor:pointer;image-rendering:pixelated}
.px-chip:hover,.px-chip:focus-visible{border-color:#f0b429;outline:none}
.px-chip[aria-pressed="true"]{background:#f0b429;color:#000;border-color:#000;box-shadow:2px 2px 0 #000}
.wc-dialog .wc-qr{width:200px;height:200px}
.chain-help{margin:6px auto;max-width:420px;padding:8px;border:2px solid #e5484d;background:#1a0b0c;font-size:8px;line-height:1.7;text-align:center}.chain-help[hidden]{display:none}.chain-help p{margin:0 0 6px}
.dbg{max-width:460px;max-height:30vh;overflow:auto;margin:6px auto;padding:6px;background:#000;color:#7f7;border:2px solid #333;font-size:7px;line-height:1.5;white-space:pre-wrap;word-break:break-all;text-align:left}.dbg[hidden]{display:none}
.reveal-dialog{width:min(560px,calc(100vw - 24px))}
.rv-top{display:flex;gap:10px;align-items:center;margin-bottom:10px}.rv-top .head{width:48px;height:48px}
.rv-grid{display:grid;grid-template-columns:repeat(var(--cols,1),1fr);gap:8px;max-height:min(58dvh,460px);overflow:auto;margin:0 auto;max-width:calc(var(--cols,1) * 150px + 40px)}
.rv-grid[data-n="1"]{max-width:260px}
.rv-tile{background:#000;border:2px solid #333;padding:4px;font-size:8px;line-height:1.5;text-align:center;min-width:0}
.rv-tile .rv-img{position:relative;aspect-ratio:1;background:#111}
.rv-tile img{width:100%;height:100%;display:block;image-rendering:pixelated}
.rv-gen{position:absolute;inset:0;display:grid;place-items:center;color:#fff;background:repeating-linear-gradient(45deg,#111 0 6px,#1a1a1a 6px 12px);animation:rvblink 1s steps(2) infinite}
@keyframes rvblink{50%{opacity:.6}}
.rv-cap{margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-state{color:#fff}.rv-state a{color:#fff}
.rv-links{text-align:center;margin:8px 0 0}.rv-links a{color:#fff;margin:0 6px}

.rv-msg{color:#fff;margin-bottom:10px;font-size:12px}
.chain-help{border-color:var(--red)}
/* Wall fades in once sheet 0 has painted (instant with reduced motion). */
#bg{opacity:0;transition:opacity 200ms ease-out}
#bg.shown{opacity:1}
@media (prefers-reduced-motion:reduce){#bg{transition:none}}
.chain-help{font-size:11px;max-width:560px;margin:0;align-self:flex-start}.txinfo{align-self:flex-start;background:#000;padding:6px 8px;text-align:left;font-size:11px}
/* Trait examples: one 24px engine punk per trait from public/mint/traits.png, shown at 4x (96px) like the narrator heads. */
.tx{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:28px 16px;margin-top:22px;list-style:none}
.tx figure{display:flex;flex-direction:column;align-items:center;gap:12px;margin:0}
.tx i{display:block;width:96px;height:96px;background:var(--tx) calc(var(--i) * -96px) 0/calc(var(--txn) * 96px) 96px no-repeat;image-rendering:pixelated;border:3px solid #000;box-shadow:4px 4px 0 #000}

.tx figcaption{font-size:10px;line-height:1.4;text-align:center;color:#fff}.tx .r figcaption{color:var(--accent)}
@media (max-width:899px){.tx{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:22px 8px;margin-top:18px}#traits li{padding:2px 0}#traits ul{gap:32px}.tx figcaption{font-size:9px}}

/* Connect is one split control: main = browser wallet (or QR when none is installed), right segment = scan QR. */
.g.split{display:flex}.g.split #action{flex:1 1 auto;min-width:0}
.g.split .qr{flex:0 0 auto;width:auto;min-width:64px;padding:0 14px;font-size:12px;letter-spacing:1px;background:var(--red);color:#fff;box-shadow:none;border-left:3px solid #000}
.g.split .qr[hidden]{display:none}.g.split .qr:hover{background:#000}
@media (max-width:520px){.g.split .qr{min-width:56px;padding:0 10px;font-size:11px}}
/* Transparent scrollbar track so the wall shows in the gutter; square pixel thumb. */
html{scrollbar-color:var(--accent) transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px;background:transparent}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-thumb{background:var(--accent);border:2px solid #000;border-radius:0}
::-webkit-scrollbar-thumb:hover{background:var(--ink)}

/* Farcaster Mini App (424x695 web, phone webviews): one screen, no QR split, no long-scroll sections. */
html.miniapp, html.miniapp body { height: 100%; overflow: hidden; }
html.miniapp .split .qr, html.miniapp #wcBtn { display: none !important; }
html.miniapp .links, html.miniapp section.sx, html.miniapp footer { display: none !important; }