@import url('https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&display=swap');
:root{color-scheme:dark;--bg:#0e0b1f;--panel:#19142f;--edge:#2c2552;--mint:#4be3b0;--mint-hi:#8ff5d2;--coral:#ff6b6b;--lemon:#ffd23f;--lilac:#a98bff;--text:#f1eeff;--muted:#a8a2c4;--ok:#4be3b0;--warn:#ffb84d;--bad:#ff6b7f;
 font:16px/1.5 system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:var(--text);background:var(--bg)}
*{box-sizing:border-box}
body{margin:0;min-height:100dvh;background:radial-gradient(ellipse at 20% -10%,rgba(75,227,176,.16),transparent 55%),radial-gradient(ellipse at 90% 0%,rgba(169,139,255,.22),transparent 50%),var(--bg)}
#app{max-width:980px;margin:0 auto;padding:0 16px 56px}
#app.wide{max-width:1280px}
.px{font-family:Silkscreen,ui-monospace,monospace;letter-spacing:.5px}
a{color:var(--mint-hi);text-decoration:none}a:hover{text-decoration:underline}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;word-break:break-all}
button{font:inherit;color:var(--text);cursor:pointer;min-height:40px;padding:6px 14px;background:var(--edge);border:2px solid #000;border-radius:0;box-shadow:inset 2px 2px rgba(255,255,255,.14),inset -2px -3px rgba(0,0,0,.45)}
button:disabled{opacity:.5;cursor:default}
button.go{color:#08130f;background:var(--mint);font-weight:700}button.go:hover:not(:disabled){background:var(--mint-hi)}
button.big{width:100%;min-height:54px;font-size:19px;margin-top:12px}
:focus-visible{outline:2px solid var(--lemon);outline-offset:2px}
.bar{display:flex;align-items:center;gap:14px;padding:16px 0;flex-wrap:wrap}.bar .lang{white-space:nowrap;min-width:52px}
.brand{display:flex;align-items:center;gap:8px;color:var(--text);font-size:18px}.brand img{width:28px;height:28px;image-rendering:pixelated}
.bar .sp{flex:1}.bar .nav{color:var(--muted)}.bar .nav.on{color:var(--lemon)}
.hero{text-align:center;padding:20px 0 6px}
.hero h1{margin:0;font-size:52px;line-height:1.05;color:var(--mint);text-shadow:4px 4px 0 #000}
.hero h1 span{color:var(--coral)}
.lede{max-width:660px;margin:14px auto;color:var(--muted)}
.strip{display:flex;justify-content:center;gap:6px;margin:14px 0 4px;flex-wrap:wrap}.strip img{width:56px;height:56px;image-rendering:pixelated;border:2px solid #000;box-shadow:3px 3px #000}
.progress{height:16px;max-width:560px;margin:14px auto 8px;background:#000;border:2px solid var(--edge)}
.progress .fill{height:100%;background:repeating-linear-gradient(90deg,var(--mint) 0 10px,var(--mint-hi) 10px 20px);transition:width .4s}
.count{margin:0;color:var(--muted)}.count b{color:var(--text);font-size:20px}.live{color:var(--ok)}
.facts{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.facts li{padding:4px 10px;background:var(--panel);border:2px solid var(--edge);font-size:14px}
nav.tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:24px 0 0}
nav.tabs a{padding:8px 14px;background:var(--edge);border:2px solid #000;color:var(--text);text-decoration:none}
nav.tabs a.on{color:#08130f;background:var(--lemon)}
.panel{max-width:580px;margin:24px auto;padding:16px 20px 20px;background:var(--panel);border:2px solid #000;box-shadow:5px 5px #000,inset 0 0 0 2px var(--edge)}
.panel.wide{max-width:740px}
.panel h2,.gallery h2{margin:0 0 8px;font-size:22px;color:var(--lemon)}
.warn{color:var(--warn)}.muted{color:var(--muted);font-size:14px}.ok{color:var(--ok)}.bad{color:var(--bad)}
.note{padding:8px 12px;border:2px solid currentColor;margin:0 0 12px}.note.ok{color:var(--ok)}.note.error{color:var(--bad)}.note.warn{color:var(--warn)}
.row{display:flex;justify-content:space-between;align-items:center;margin:12px 0;gap:12px}
.stepper{display:flex;align-items:center;gap:12px}.stepper button{width:40px;padding:0;font-size:20px}.stepper b{min-width:32px;text-align:center;font-size:24px}
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 4px}
.ways label{position:relative;display:flex;flex-direction:column;align-items:center;padding:8px 4px;background:#100c22;border:2px solid var(--edge);cursor:pointer;text-align:center}
.ways label.on{border-color:var(--mint);box-shadow:inset 0 0 0 1px var(--mint)}
.ways input{position:absolute;opacity:0;pointer-events:none}.ways small{color:var(--muted);font-size:13px}
.field{display:flex;flex-direction:column;gap:4px;margin:12px 0;font-size:14px}
.field input,select,input[type=search]{font:inherit;font-size:14px;color:var(--text);background:#100c22;border:2px solid var(--edge);min-height:40px;padding:4px 8px;border-radius:0}
.seg{display:flex;gap:4px}.seg button.on{color:#08130f;background:var(--lemon)}
textarea.prompt{width:100%;margin-top:8px;font:12.5px/1.5 ui-monospace,Menlo,Consolas,monospace;color:var(--text);background:#100c22;border:2px solid var(--edge);padding:10px;resize:vertical}
.wallets{display:flex;flex-wrap:wrap;gap:8px}.wallets img{width:20px;height:20px;vertical-align:-4px;margin-right:6px}
.reveal{margin-top:16px;padding-top:12px;border-top:2px dashed var(--edge)}
.gallery{margin:32px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.card{margin:0;background:var(--panel);border:2px solid #000;box-shadow:3px 3px #000}
.card .pic{display:block;width:100%;aspect-ratio:1;image-rendering:pixelated;background:#000}
.card figcaption{padding:6px 8px 8px;font-size:14px;display:flex;flex-direction:column}.card small{color:var(--muted);font-size:12px}
.card.loading .pic,.card.mystery .pic{animation:pulse .8s infinite alternate}
.card.tier-legendary{border-color:var(--lemon);box-shadow:3px 3px #000,0 0 12px rgba(255,210,63,.6)}
.card.tier-epic{border-color:var(--lilac)}.card.tier-rare{border-color:var(--mint)}
@keyframes pulse{from{opacity:.55}to{opacity:1}}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px}
.tile{margin:0;padding:8px 4px 6px;text-align:center;background:var(--panel);border:2px solid #000}
.tile img{display:block;width:72px;height:72px;margin:0 auto 4px;image-rendering:pixelated}
.tile figcaption{display:flex;flex-direction:column;font-size:12px;line-height:1.3}.tile small{color:var(--muted)}
.tiles.rare .tile{border-color:var(--lemon);box-shadow:0 0 8px rgba(255,210,63,.45)}
.chars h3{margin:18px 0 8px;font-size:15px;color:var(--muted)}
.layout{display:grid;grid-template-columns:270px 1fr;gap:20px;align-items:start;margin-top:16px}
.side{position:sticky;top:12px;max-height:calc(100dvh - 24px);overflow:auto;padding:12px;background:var(--panel);border:2px solid #000;box-shadow:4px 4px #000}
.side-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.side details{border-top:2px solid var(--edge);padding:6px 0}.side summary{cursor:pointer;font-size:15px;padding:2px 0}
.opts{display:flex;flex-direction:column;gap:2px;margin-top:6px}.opts.scroll{max-height:240px;overflow:auto}
.opt{display:grid;grid-template-columns:20px 1fr auto;gap:6px;align-items:center;font-size:14px;padding:2px 4px;cursor:pointer}
.opt:hover{background:#100c22}.opt[hidden]{display:none}.opt input{margin:0;accent-color:var(--mint)}.opt small{color:var(--muted)}
button.link{min-height:0;padding:2px 4px;background:none;border:0;box-shadow:none;color:var(--mint-hi);font-size:14px}
.toolbar{display:flex;gap:8px;align-items:center}.toolbar .search{flex:1;display:flex;gap:8px}.search input{flex:1;min-width:0}
.filters-toggle{display:none}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}.chip{min-height:30px;padding:2px 10px;font-size:13px;background:#100c22;border-color:var(--mint)}
.results .grid .card{cursor:pointer}.results .grid .card:hover{border-color:var(--mint-hi)}
button.more{display:block;margin:16px auto}
dialog.detail{max-width:min(740px,94vw);width:100%;padding:16px;color:var(--text);background:var(--panel);border:2px solid #000;box-shadow:6px 6px #000,inset 0 0 0 2px var(--edge)}
dialog.detail::backdrop{background:rgba(14,11,31,.8)}
dialog .close{position:absolute;top:8px;right:8px;margin:0}dialog .close button{min-height:32px;width:32px;padding:0}
.detail-body{display:grid;grid-template-columns:250px 1fr;gap:16px}.detail-body .big{width:250px;height:250px;image-rendering:pixelated;border:2px solid #000}
.detail-body h2{margin:0 36px 4px 0;color:var(--lemon)}
.traits{width:100%;border-collapse:collapse;margin:8px 0 12px;font-size:14px}.traits th{text-align:left;font-weight:400;color:var(--muted);padding:2px 8px 2px 0}.traits td{padding:2px 8px 2px 0}
.onchain pre{max-height:200px;overflow:auto;font-size:12px;background:#100c22;padding:8px;white-space:pre-wrap;word-break:break-all}
.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.cards3 .panel{margin:0;max-width:none}
footer{margin-top:40px;text-align:center;color:var(--muted);font-size:14px}footer p{margin:6px 0}
@media(max-width:860px){.layout{grid-template-columns:1fr}.side{display:none;position:static;max-height:none}.side.open{display:block}.filters-toggle{display:inline-block}}
@media(max-width:600px){.bar{gap:10px}.bar .nav{font-size:14px}.brand{font-size:16px}.toolbar{flex-wrap:wrap}.toolbar .search{order:3;flex-basis:100%}.detail-body{grid-template-columns:1fr}.detail-body .big{width:100%;height:auto;aspect-ratio:1}.hero h1{font-size:38px}.ways{grid-template-columns:1fr}.grid{grid-template-columns:repeat(2,1fr)}.tiles{grid-template-columns:repeat(3,1fr)}}
@media(prefers-reduced-motion:reduce){.card .pic,.progress .fill{animation:none;transition:none}}