:root{color-scheme:dark;--ink:#f4f1e8;--panel:#14121c;--line:#f4f1e8;--accent:#f0b429;--shadow:#000;--u:clamp(2px,0.32vmin,4px)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;height:100dvh;overflow:hidden;background:#0e1116;color:var(--ink)}
body{font-family:"PressStart2P",ui-monospace,monospace;-webkit-font-smoothing:none;font-smooth:never;image-rendering:pixelated}
#bg{position:fixed;inset:0;width:100vw;height:100dvh;display:block;image-rendering:pixelated;touch-action:none}
#panel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,calc(100vw - 24px));max-height:calc(100dvh - 24px);display:flex;flex-direction:column;gap:clamp(4px,1.1dvh,10px);padding:clamp(10px,2dvh,18px) clamp(12px,3vw,20px);background:var(--panel);
  box-shadow:0 calc(-1*var(--u)) 0 0 var(--line),0 var(--u) 0 0 var(--line),calc(-1*var(--u)) 0 0 0 var(--line),var(--u) 0 0 0 var(--line),calc(3*var(--u)) calc(3*var(--u)) 0 0 var(--shadow);font-size:clamp(8px,1.3dvh,11px);line-height:1.6}
.title{display:flex;align-items:center;justify-content:space-between;gap:8px}
h1{margin:0;font-size:clamp(12px,2.3dvh,20px);font-weight:400;letter-spacing:1px}h1 span{color:var(--accent)}
.badge{background:#c0392b;color:#fff;padding:4px 6px;font-size:.85em;cursor:help;box-shadow:0 0 0 2px #fff}
.row{display:flex;align-items:flex-end;gap:8px;min-height:0}
.head{flex:0 0 auto;width:48px;height:48px;background-size:800% 100%;image-rendering:pixelated;transition:transform .12s steps(2)}
.row.react .head{transform:translateY(calc(-2*var(--u)))}
.bubble{position:relative;margin:0 0 clamp(8px,1.6dvh,14px);padding:6px 8px;background:var(--ink);color:#111;font-size:.9em;
  box-shadow:0 calc(-1*var(--u)) 0 0 #111,0 var(--u) 0 0 #111,calc(-1*var(--u)) 0 0 0 #111,var(--u) 0 0 0 #111}
.bubble::before{content:"";position:absolute;left:calc(-3*var(--u));bottom:4px;width:calc(2*var(--u));height:calc(2*var(--u));background:var(--ink);box-shadow:calc(-1*var(--u)) var(--u) 0 0 var(--ink)}
.row.err .bubble{background:#ffd0cc}.row.ok .bubble{background:#c9f5d2}
.stat{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:6px 8px;background:#221f2e;box-shadow:inset 0 0 0 var(--u) #3a3550}
.stat small{color:#a8a3b8;font-size:.8em;text-align:right}.price strong{color:var(--accent);font-weight:400}
#counter{font-size:1.15em;white-space:nowrap}
.stepper{display:flex;align-items:center;justify-content:center;gap:12px}
#qty{min-width:3ch;text-align:center;font-size:1.4em}
.px-btn{font:inherit;color:#111;background:var(--accent);border:0;padding:8px 12px;cursor:pointer;
  box-shadow:0 calc(-1*var(--u)) 0 0 #111,0 var(--u) 0 0 #111,calc(-1*var(--u)) 0 0 0 #111,var(--u) 0 0 0 #111,inset calc(-1*var(--u)) calc(-1*var(--u)) 0 0 #b27a0c;transition:transform .05s steps(1)}
.px-btn:hover{filter:brightness(1.08)}.px-btn:active{transform:translate(var(--u),var(--u))}.px-btn:disabled{background:#6b6578;cursor:wait}
.px-btn:focus-visible,.link:focus-visible{outline:var(--u) dashed var(--ink);outline-offset:calc(2*var(--u))}
.px-btn.sq{width:2.6em;height:2.6em;padding:0;font-size:1.1em}
.px-btn.big{width:100%;padding:clamp(8px,1.6dvh,14px);font-size:1.1em}
.links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 12px}
.link{font:inherit;font-size:.85em;color:var(--ink);background:none;border:0;padding:2px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.link:hover{color:var(--accent)}
#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{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:var(--accent)}.px-dialog ul{padding-left:16px}.px-dialog li{margin:6px 0}.px-dialog b{color:var(--accent);font-weight:400}
.px-dialog form{text-align:right;margin-top:10px}
@media (min-height:760px) and (min-width:600px){.head{width:72px;height:72px}}
@media (max-height:620px){.head{width:48px;height:48px}}
@media (prefers-reduced-motion:reduce){.head,.px-btn{transition:none}}

.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:#ddd;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:var(--accent);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:#999}.rv-state a{color:var(--accent)}
.rv-links{text-align:center;margin:8px 0 0}.rv-links a{color:var(--accent);margin:0 6px}