:root{
  --bg:#07080d; --panel:#0e1018; --panel2:#11141f; --line:#1c2030;
  --ink:#e7ecf6; --mut:#8a93a6; --acc:#5cc8ff; --acc2:#b06cff;
  --common:#8a93a6; --uncommon:#43c59e; --rare:#4aa8ff; --ultra:#b06cff; --legendary:#f5b53d;
}
*{box-sizing:border-box}
[hidden]{display:none!important}   /* beats .tuner{display:grid} / .card-overlay{display:flex} */
body{margin:0;background:radial-gradient(1200px 700px at 50% -10%, #10131f 0%, var(--bg) 60%);
  color:var(--ink);font:15px/1.5 system-ui,-apple-system,Segoe UI,sans-serif;min-height:100vh}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--line)}
.brand{font:700 18px/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.16em}
.brand span{color:var(--acc);margin-left:.35em}
.topright{display:flex;align-items:center;gap:14px}
.dexcount{color:var(--mut);font:12px ui-monospace,monospace}
.dexcount span{color:var(--ink)}
.charges{font:12px ui-monospace,monospace;color:#f5b53d;border:1px solid #f5b53d44;background:#f5b53d12;padding:4px 9px;border-radius:999px;white-space:nowrap;transition:.2s}
.charges.low{color:#ff9f43;border-color:#ff9f4366;background:#ff9f431f}
.charges.empty{color:#ff5c5c;border-color:#ff5c5c66;background:#ff5c5c1f}
.charges #chargeN{font-weight:700}
.mute{background:none;border:1px solid var(--line);color:var(--mut);width:30px;height:26px;border-radius:7px;cursor:pointer;font-size:14px;line-height:1;padding:0}
.mute:hover{border-color:#2c3550;color:var(--ink)}
.mute.muted{opacity:.5;text-decoration:line-through}
main{max-width:720px;margin:0 auto;padding:22px}

/* ---------------- stage ---------------- */
.stagewrap{max-width:520px;margin:0 auto}
.stage{position:relative;aspect-ratio:1;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:#080910;box-shadow:inset 0 0 80px rgba(0,0,0,.6)}
.starfield{position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(1px 1px at 20% 30%,#fff6 0,transparent 60%),
    radial-gradient(1px 1px at 70% 60%,#fff5 0,transparent 60%),
    radial-gradient(1px 1px at 40% 80%,#fff4 0,transparent 60%),
    radial-gradient(1.5px 1.5px at 85% 25%,#cfe6ff7a 0,transparent 60%),
    radial-gradient(1px 1px at 55% 15%,#fff5 0,transparent 60%),
    radial-gradient(1px 1px at 12% 68%,#fff4 0,transparent 60%)}

/* scan rings + zone labels */
.rings{position:absolute;inset:0;width:100%;height:100%;transition:opacity .3s;pointer-events:none}
.ring{fill:none;stroke-width:.25;opacity:.5}
.ring.z-sh{stroke:var(--mut)} .ring.z-be{stroke:var(--acc)} .ring.z-de{stroke:var(--acc2)}
.ring.locked{stroke-dasharray:2 3;opacity:.26}
.ringlbl{fill:#9fb0d0;font:2.6px ui-monospace,monospace;text-anchor:middle;opacity:.55;letter-spacing:.05px}
.ringlbl.locked{fill:#7a6a45;opacity:.7}
.unlock-banner{position:absolute;left:0;right:0;top:18px;z-index:5;text-align:center;pointer-events:none;
  font:800 13px ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--legendary);text-shadow:0 0 18px var(--legendary);opacity:0}
.unlock-banner.show{animation:unlockb 2.6s ease-out}
@keyframes unlockb{0%{opacity:0;transform:translateY(-10px)}12%{opacity:1;transform:none}82%{opacity:1}100%{opacity:0}}
.stage[data-state="tuning"] .rings,.stage[data-state="resolving"] .rings,.stage[data-state="sector"] .rings{opacity:.1}

/* sector nodes (star-chart) */
.blips{position:absolute;inset:0;transition:opacity .3s}
.stage[data-state="tuning"] .blips,.stage[data-state="resolving"] .blips,.stage[data-state="sector"] .blips{opacity:0;pointer-events:none}
.sector{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:3px;border:none;background:none;cursor:default;z-index:2}
.sector .snode{width:11px;height:11px;border-radius:50%;background:#0a0d16;box-shadow:inset 0 0 0 1.4px var(--ac,#8a93a6)}
.sector .sname{font:9.5px ui-monospace,monospace;color:#aeb9d2;white-space:nowrap;letter-spacing:.02em;text-shadow:0 1px 3px #05060c}
.sector.charted{cursor:pointer;animation:tw 2.4s ease-in-out infinite}
.sector.charted .snode{background:var(--ac);box-shadow:0 0 9px 2px var(--ac)}
.sector.charted .sname{color:#eaf1ff}
.sector.charted:hover{animation:none;transform:translate(-50%,-50%) scale(1.16)}
.sector.charted:hover .snode{box-shadow:0 0 13px 4px var(--ac)}
.sector.locked{opacity:.5}
.sector.locked .sname{color:#5d6680}
.sector.frontier .snode{width:7px;height:7px;background:none;box-shadow:inset 0 0 0 1px var(--ac);opacity:.55}
.sector.frontier .sname{color:#7a6336;font-size:12px;font-weight:700}
.charted-hud{position:absolute;right:12px;top:10px;z-index:3;pointer-events:none;
  font:10.5px ui-monospace,monospace;letter-spacing:.04em;color:#8a96b0}
.stage:not([data-state="scan"]) .charted-hud{display:none}
@keyframes tw{0%,100%{opacity:.4}50%{opacity:1}}

/* sector view (drill-in: chart -> sector -> tune) */
.sectorview{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:13px;padding:30px 24px;text-align:center;background:radial-gradient(120% 90% at 50% 42%,#0c1020 0%,transparent 70%)}
.sv-back{position:absolute;left:12px;top:10px;background:none;border:none;color:var(--mut);font:11px ui-monospace,monospace;cursor:pointer;letter-spacing:.04em}
.sv-back:hover{color:#cfe0ff}
.sv-head{display:flex;flex-direction:column;align-items:center;gap:3px}
.sv-ring{font:700 10px ui-monospace,monospace;letter-spacing:.2em;text-transform:uppercase}
.sv-name{margin:0;font:600 26px/1.05 system-ui;color:#eef3ff;text-transform:capitalize}
.sv-coords{font:9.5px ui-monospace,monospace;color:#5d6680;letter-spacing:.05em}
.sv-bias{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;max-width:320px}
.sv-lbl{font:10px ui-monospace,monospace;color:var(--mut);letter-spacing:.06em;text-transform:uppercase}
.sv-chip{font:600 11px ui-monospace,monospace;padding:3px 9px;border-radius:999px;color:var(--c);border:1px solid var(--c);background:#0006;text-transform:capitalize}
.sv-bias-sub{margin-top:-2px;opacity:.78}
.sv-chip-sm{font-weight:500;font-size:10px;padding:2px 7px;border-style:dashed;background:#0004}
.sv-odds{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;font:10px ui-monospace,monospace;color:#9fb0d0}
.sv-odd.t-rare{color:#4aa8ff}.sv-odd.t-ultra{color:#b06cff}.sv-odd.t-legendary{color:#f5b53d}
.sv-field{display:flex;align-items:center;gap:8px;font:10px ui-monospace,monospace;color:#9fb0d0;width:min(320px,80%);margin-top:2px}
.sv-fieldbar{flex:1;height:5px;border-radius:999px;background:#ffffff14;overflow:hidden;min-width:70px}
.sv-fieldbar span{display:block;height:100%;border-radius:999px;transition:width .3s}
.sv-fieldpct{white-space:nowrap;color:var(--mut)}
.sv-field.low .sv-fieldpct{color:#ff9f43}
.sv-traits{display:flex;flex-direction:column;gap:3px}
.sv-trait{font:10.5px ui-monospace,monospace;color:#cdb86a}
.sv-signal{margin-top:4px;position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;background:none;border:none;cursor:pointer;color:#eef3ff}
.sv-pulse{width:26px;height:26px;border-radius:50%;background:var(--ac);box-shadow:0 0 16px 5px var(--ac);animation:svp 1.6s ease-in-out infinite}
@keyframes svp{0%,100%{transform:scale(.82);opacity:.72}50%{transform:scale(1.14);opacity:1}}
.sv-go{font:700 12px ui-monospace,monospace;letter-spacing:.1em}
.sv-signal:hover .sv-pulse{box-shadow:0 0 24px 8px var(--ac)}
.sv-signal:hover .sv-go{color:var(--ac)}

/* tuning core pulse */
.core{position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;
  opacity:0;background:radial-gradient(circle,#bfefff 0%,#5cc8ff 40%,transparent 70%);transition:opacity .3s;pointer-events:none}
.stage[data-state="tuning"] .core{opacity:calc(.25 + var(--shimmer,0)*.75);transform:scale(calc(.7 + var(--shimmer,0)*.9))}

.noise{position:absolute;inset:0;opacity:0;pointer-events:none;mix-blend-mode:screen;
  background:repeating-conic-gradient(from 0deg at 50% 50%, #2a3550 0deg 3deg, #0b0f1a 3deg 6deg);animation:spin 1.1s linear infinite}
.stage[data-state="resolving"] .noise{opacity:.5;animation:spin .5s linear infinite,flick .12s steps(2) infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes flick{50%{opacity:.25}}
.stagehint{position:absolute;left:0;right:0;bottom:14px;text-align:center;color:var(--mut);font:12px ui-monospace,monospace;padding:0 16px;pointer-events:none}
.stage[data-state="resolving"] .stagehint{opacity:0}

/* rarity-climb reveal */
.reveal{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;opacity:0;pointer-events:none;transition:opacity .18s}
.reveal.active{opacity:1}
.reveal-nodes{display:flex;gap:16px}
.rn{width:13px;height:13px;border-radius:50%;background:#161b29;box-shadow:0 0 0 1px #2a3550;transition:transform .14s,background .14s,box-shadow .14s}
.rn.lit{transform:scale(1.45)}
.rn.lit[data-t="common"]{background:var(--common);box-shadow:0 0 14px 2px var(--common)}
.rn.lit[data-t="uncommon"]{background:var(--uncommon);box-shadow:0 0 14px 2px var(--uncommon)}
.rn.lit[data-t="rare"]{background:var(--rare);box-shadow:0 0 16px 3px var(--rare)}
.rn.lit[data-t="ultra"]{background:var(--ultra);box-shadow:0 0 18px 4px var(--ultra)}
.rn.lit[data-t="legendary"]{background:var(--legendary);box-shadow:0 0 22px 5px var(--legendary)}
.reveal-name{font:700 13px ui-monospace,monospace;letter-spacing:.24em;text-transform:uppercase;color:var(--mut);min-height:1.2em}
.reveal-name.hit{animation:revhit .42s cubic-bezier(.2,.9,.2,1.2)}
.reveal-name.t-common{color:var(--common)}
.reveal-name.t-uncommon{color:var(--uncommon);text-shadow:0 0 14px var(--uncommon)}
.reveal-name.t-rare{color:var(--rare);text-shadow:0 0 18px var(--rare)}
.reveal-name.t-ultra{color:var(--ultra);text-shadow:0 0 22px var(--ultra)}
.reveal-name.t-legendary{color:var(--legendary);text-shadow:0 0 30px var(--legendary)}
@keyframes revhit{0%{transform:scale(.55);opacity:.2}60%{transform:scale(1.28)}100%{transform:scale(1);opacity:1}}
.reveal-sub{font:800 12px ui-monospace,monospace;letter-spacing:.2em;color:var(--legendary);min-height:1em;opacity:0;text-shadow:0 0 16px var(--legendary)}
.reveal-sub.show{animation:revsub .7s ease-out forwards}
@keyframes revsub{0%{opacity:0;transform:translateY(6px) scale(.9)}30%{opacity:1;transform:none}100%{opacity:1}}
.chip.new{background:#2a1d3f;border-color:var(--legendary);color:#ffe6a8;box-shadow:0 0 10px var(--legendary)}
.stage.flash::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(circle at 50% 45%,var(--flashcol,#fff) 0%,transparent 62%);animation:stageflash .36s ease-out}
@keyframes stageflash{0%{opacity:0}28%{opacity:.55}100%{opacity:0}}

/* ---------------- pity bar ---------------- */
.pity{max-width:520px;margin:12px auto 0;display:flex;align-items:center;gap:10px;font:11px ui-monospace,monospace;color:var(--mut)}
.pity-lbl{white-space:nowrap}
.pity-track{flex:1;height:8px;border-radius:999px;background:#0a0e18;border:1px solid var(--line);overflow:hidden}
.pity-fill{height:100%;width:0;background:linear-gradient(90deg,#2b5fa8,#4aa8ff);transition:width .4s ease}
.pity-val{white-space:nowrap;min-width:96px;text-align:right}
.pity.near .pity-fill{background:linear-gradient(90deg,#4aa8ff,#b9ecff);box-shadow:0 0 12px #5cc8ff88}
.pity.near .pity-val{color:var(--rare)}
.pity.maxed .pity-fill{background:linear-gradient(90deg,var(--ultra),var(--legendary));box-shadow:0 0 16px var(--legendary)}
.pity.maxed .pity-val{color:var(--legendary);text-shadow:0 0 10px var(--legendary)}

/* ---------------- tuner ---------------- */
.tuner{max-width:520px;margin:14px auto 0;border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:14px;display:grid;gap:12px}
.tuner-head{display:flex;align-items:center;justify-content:space-between}
.tuner-field{font:600 13px ui-monospace,monospace;color:var(--acc);letter-spacing:.04em}
.streak{font:700 11px ui-monospace,monospace;color:var(--mut);opacity:0;transition:.15s;letter-spacing:.05em;margin:0 auto 0 12px}
.streak.on{opacity:1;color:#ffb454}
.streak.on::before{content:"streak "}
.streak.hot{color:#ff7a3d;text-shadow:0 0 10px #ff7a3d99}
.lockfx{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;pointer-events:none;font:800 22px ui-monospace,monospace;letter-spacing:.18em;opacity:0}
.lockfx.show{animation:lockfx .62s ease-out}
.lockfx.clean{color:#5cc8ff;text-shadow:0 0 18px #5cc8ff}
.lockfx.perfect{color:#ffd86b;text-shadow:0 0 26px #ffb454}
@keyframes lockfx{0%{opacity:0;transform:scale(.7)}22%{opacity:1;transform:scale(1.12)}70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
.ghostbtn{background:none;border:none;color:var(--mut);font:12px ui-monospace,monospace;cursor:pointer}
.ghostbtn:hover{color:var(--ink)}
.meterwrap{position:relative;height:12px;border-radius:999px;background:#0a0e18;overflow:hidden;border:1px solid var(--line)}
.meterwrap::after{content:"";position:absolute;left:86%;top:0;bottom:0;width:2px;background:#bfefff;opacity:.85;box-shadow:0 0 8px #5cc8ff;pointer-events:none;z-index:2}
.meter{position:absolute;inset:0;width:0%;background:linear-gradient(90deg,#2b5fa8,#5cc8ff 70%,#b9ecff);transition:width .05s linear;box-shadow:0 0 16px #5cc8ff66}
.meterlbl{position:absolute;right:8px;top:-1px;font:10px/12px ui-monospace,monospace;color:#06121f;mix-blend-mode:luminosity}
.tuner-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
#dial{width:100%;accent-color:var(--acc)}
#dial:disabled{opacity:.4}
#lock{padding:11px 22px;border-radius:10px;border:1px solid var(--acc);background:#0c2236;color:#cfeeff;font:700 13px ui-monospace,monospace;letter-spacing:.12em;cursor:pointer;transition:.15s}
#lock:disabled{opacity:.35;cursor:not-allowed;border-color:var(--line);background:var(--panel2);color:var(--mut)}
#lock:not(:disabled):hover{background:#103149;box-shadow:0 0 22px #5cc8ff33}

/* ---------------- dex ---------------- */
.dexwrap{margin-top:26px}
.dexwrap h2{font:600 15px system-ui;margin:0 0 10px;color:#c7d0e2}
.dexwrap h2 small{color:var(--mut);font:11px ui-monospace,monospace;margin-left:8px}
.dex{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
#dex{display:block}                       /* the #dex container holds per-type sections, each its own .dex grid */
.dex-sec{margin-bottom:16px}
.dex-sec-head{display:flex;align-items:center;gap:10px;margin:2px 2px 7px;font:600 12.5px system-ui}
.dex-sec-head .bar{flex:1;height:4px;background:#161a26;border-radius:2px;overflow:hidden}
.dex-sec-head .bar i{display:block;height:100%}
.dex-sec-head b{color:var(--mut);font:11px ui-monospace,monospace;white-space:nowrap}
.cell{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:#080910;border:1px solid var(--line);cursor:pointer;transition:.12s}
.cell:hover{transform:translateY(-2px)}
.cell svg{width:100%;height:100%}
.cell .b{position:absolute;left:5px;bottom:4px;font:9px ui-monospace,monospace;color:#cdd6e8;text-shadow:0 1px 3px #000}
.cell.mod::after{content:"";position:absolute;right:5px;top:5px;width:6px;height:6px;border-radius:50%;background:var(--legendary);box-shadow:0 0 8px var(--legendary)}
.empty{color:var(--mut);font:13px ui-monospace,monospace;grid-column:1/-1;padding:18px 0}
.dex-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 12px}
.dex-head h2{margin:0}
.completion{display:flex;align-items:center;gap:10px;flex:1;max-width:300px}
.comp-bar{flex:1;height:8px;border-radius:999px;background:#0a0e18;border:1px solid var(--line);overflow:hidden}
.comp-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--uncommon),var(--rare));transition:width .5s ease;box-shadow:0 0 12px #4aa8ff55}
.completion span{font:12px ui-monospace,monospace;color:var(--mut);white-space:nowrap}
.cell.locked{display:flex;align-items:center;justify-content:center;opacity:.5}
.cell.locked .lock{font:600 15px ui-monospace,monospace;color:#4a5269}
.cell.locked:has(.craftbtn){opacity:.74}
.craftbtn{position:absolute;left:50%;bottom:5px;transform:translateX(-50%);font:600 10px ui-monospace,monospace;color:#f5b53d;background:#1a1408;border:1px solid #f5b53d66;border-radius:999px;padding:2px 7px;cursor:pointer;white-space:nowrap;transition:.12s;z-index:2}
.craftbtn:hover:not(:disabled){background:#f5b53d;color:#0b0d14}
.craftbtn.cant{color:#5a5240;border-color:#5a524033;cursor:not-allowed}
.econ-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
.essence{font:13px ui-monospace,monospace;color:#f5b53d}
.essence b{font-weight:700}
.stipend-btn{font:600 12px ui-monospace,monospace;color:#0b0d14;background:#f5b53d;border:0;border-radius:8px;padding:6px 12px;cursor:pointer;animation:stipendpulse 1.6s ease-in-out infinite}
.stipend-btn:hover{filter:brightness(1.08)}
@keyframes stipendpulse{0%,100%{box-shadow:0 0 0 0 #f5b53d55}50%{box-shadow:0 0 0 6px #f5b53d00}}
.leg-row{display:flex;align-items:center;gap:12px;margin-top:16px;padding-top:13px;border-top:1px solid var(--line)}
.leg-lbl{font:12px ui-monospace,monospace;color:var(--mut);white-space:nowrap}
.leg-lbl b{color:var(--legendary)}
.leg-slots{display:flex;gap:8px;flex-wrap:wrap}
.leg-slots .cell{width:58px;flex:0 0 auto}
.card-stamp{position:absolute;top:12px;right:-5px;z-index:5;font:800 10px ui-monospace,monospace;letter-spacing:.08em;padding:5px 9px;background:var(--tcol,#8a93a6);color:#06070d;border-radius:4px;box-shadow:0 4px 14px #0009;transform:rotate(3deg)}

/* ---------------- collectable card ---------------- */
.card-overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(4,5,10,.72);backdrop-filter:blur(3px);opacity:0;transition:opacity .22s}
.card-overlay.show{opacity:1}
.card{position:relative;width:300px;max-width:92vw;border-radius:18px;padding:14px;background:linear-gradient(180deg,#0e1018,#0a0c14);
  border:2px solid var(--tcol,#8a93a6);box-shadow:0 0 0 1px #0008,0 24px 60px #000a,0 0 44px var(--tglow,transparent);
  transform:translateY(16px) scale(.9) rotateX(8deg);opacity:0;transition:transform .4s cubic-bezier(.2,.9,.2,1.1),opacity .3s}
.card-overlay.show .card{transform:none;opacity:1}
.card.tier-common{--tcol:var(--common);--tglow:#8a93a633}
.card.tier-uncommon{--tcol:var(--uncommon);--tglow:#43c59e44}
.card.tier-rare{--tcol:var(--rare);--tglow:#4aa8ff55}
.card.tier-ultra{--tcol:var(--ultra);--tglow:#b06cff66}
.card.tier-legendary{--tcol:var(--legendary);--tglow:#f5b53d77}
.card-art{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:#06070d;border:1px solid #ffffff14}
.card-art svg{width:100%;height:100%;display:block}
.card-tierbadge{position:absolute;left:9px;top:9px;font:700 10px ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;background:#0008;border:1px solid var(--tcol);color:var(--tcol)}
.card-type{position:absolute;right:9px;bottom:9px;font:600 10px ui-monospace,monospace;letter-spacing:.05em;text-transform:capitalize;
  padding:3px 8px;border-radius:999px;background:#0008;border:1px solid}
.tdot{position:absolute;left:5px;top:5px;width:7px;height:7px;border-radius:50%;box-shadow:0 0 0 1px #000a}
.card-foil{position:absolute;inset:0;pointer-events:none;opacity:0}
.card.foil .card-foil{opacity:.55;mix-blend-mode:screen;background-size:280% 280%;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.55) 44%,rgba(120,220,255,.45) 49%,rgba(190,120,255,.45) 54%,rgba(255,170,120,.4) 59%,transparent 70%);
  animation:foil 3.6s linear infinite}
@keyframes foil{0%{background-position:0% 0%}100%{background-position:280% 280%}}
.card-info{padding:12px 4px 4px}
.card-namerow{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.card-name{font:600 18px/1.1 system-ui;text-transform:capitalize}
.card-serial{font:9px ui-monospace,monospace;color:var(--mut);white-space:nowrap}
.card-rarity{display:flex;align-items:baseline;gap:8px;margin:8px 0 10px}
.card-rarity b{font:700 18px ui-monospace,monospace;color:var(--tcol)}
.card-rarity span{font:11px ui-monospace,monospace;color:var(--mut)}
.qrow{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;font:11px ui-monospace,monospace;color:var(--mut)}
.qbar{height:7px;border-radius:999px;background:#0a0e18;overflow:hidden;border:1px solid var(--line)}
.qbar i{display:block;height:100%;background:linear-gradient(90deg,var(--tcol),#fff8)}
.qrow b{color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0}
.chip{font:10px ui-monospace,monospace;padding:4px 8px;border-radius:999px;background:#1a1330;border:1px solid var(--acc2);color:#e8ddff}
.chip.none{background:#0d1018;border-color:var(--line);color:var(--mut)}
.card-meta{font:10px ui-monospace,monospace;color:var(--mut);text-transform:capitalize}
.card-close{width:100%;margin-top:12px;padding:11px;border-radius:10px;border:1px solid var(--tcol);background:#0c1018;color:var(--ink);
  font:700 12px ui-monospace,monospace;letter-spacing:.08em;cursor:pointer;transition:.15s}
.card-close:hover{background:#12161f}

/* --- Phase 1: share / showcase / gallery / toast --- */
.card-shared{position:absolute;left:0;right:0;top:0;text-align:center;z-index:5;font:700 11px ui-monospace,monospace;letter-spacing:.05em;color:#06070d;background:var(--acc);padding:5px;border-radius:14px 14px 0 0}
.card-actions{display:flex;gap:8px;margin-top:12px}
.card-act{flex:1;padding:9px 6px;border-radius:9px;border:1px solid var(--line);background:#0c1018;color:var(--mut);
  font:700 11px ui-monospace,monospace;letter-spacing:.03em;cursor:pointer;transition:.15s;white-space:nowrap}
.card-act:hover{border-color:#2c3550;color:var(--ink)}
.card-act.pin.on{border-color:var(--acc2);color:#d9c2ff}

.show-overlay{z-index:46}
.gallery{width:min(680px,94vw);max-height:90vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:22px;transform:translateY(10px) scale(.98);opacity:0;transition:.22s}
.show-overlay.show .gallery{transform:none;opacity:1}
.gallery-head{font:600 16px system-ui;color:var(--ink);margin:0 0 14px;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.gallery-head span{font:11px ui-monospace,monospace;color:var(--mut);white-space:nowrap}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.gcell{position:relative;aspect-ratio:1;border:none;border-radius:10px;overflow:hidden;background:#06070d;cursor:pointer;padding:0;transition:transform .12s}
.gcell:hover{transform:scale(1.05)}
.gcell svg{width:100%;height:100%;display:block}
.gcell .b{position:absolute;right:4px;bottom:3px;font:700 10px ui-monospace,monospace;color:#cfe0ff;text-shadow:0 1px 3px #000}
.gallery .card-close{margin-top:16px}

.showcase{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.sc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.sc-head h3{margin:0;font:600 14px system-ui;color:#c7d0e2}
.sc-head h3 b{color:var(--mut);font:11px ui-monospace,monospace;margin-left:6px}
.sc-share{padding:7px 12px;border-radius:8px;border:1px solid var(--acc);background:#0c2236;color:#cfeeff;font:700 11px ui-monospace,monospace;letter-spacing:.05em;cursor:pointer;transition:.15s}
.sc-share:hover:not(:disabled){background:#103048}
.sc-share:disabled{opacity:.4;cursor:not-allowed;border-color:var(--line);background:var(--panel2);color:var(--mut)}
.sc-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.sc-cell{position:relative;aspect-ratio:1;border:none;border-radius:9px;overflow:hidden;background:#06070d;cursor:pointer;padding:0;transition:transform .12s}
.sc-cell:hover{transform:scale(1.07)}
.sc-cell svg{width:100%;height:100%;display:block}
.showcase.empty .sc-strip{grid-template-columns:1fr}
.sc-empty{color:var(--mut);font:12px ui-monospace,monospace;padding:6px 0;line-height:1.5}

.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(12px);z-index:60;
  background:#0c1018;border:1px solid var(--acc);color:#dbeaff;font:700 12px ui-monospace,monospace;letter-spacing:.03em;
  padding:11px 18px;border-radius:10px;box-shadow:0 8px 28px #000a;opacity:0;transition:.22s;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* --- account / email-claim --- */
.acct{background:none;border:1px solid var(--line);color:var(--mut);font:11px ui-monospace,monospace;padding:5px 9px;border-radius:7px;cursor:pointer;transition:.15s}
.acct:hover{border-color:#2c3550;color:var(--ink)}
.acct.saved{border-color:var(--acc);color:#cfeeff}
.acct-overlay{z-index:55}
.acct-box{width:min(380px,92vw);background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:12px;transform:translateY(10px) scale(.98);opacity:0;transition:.2s}
.acct-overlay.show .acct-box{transform:none;opacity:1}
.acct-head{font:600 17px system-ui;color:var(--ink)}
.acct-sub{margin:0;font:12px/1.55 ui-monospace,monospace;color:var(--mut)}
.acct-box input{padding:11px 12px;border-radius:9px;border:1px solid var(--line);background:#0a0d16;color:var(--ink);font:14px system-ui;outline:none}
.acct-box input:focus{border-color:var(--acc)}
.acct-save{padding:11px;border-radius:10px;border:1px solid var(--acc);background:#0c2236;color:#cfeeff;font:700 13px ui-monospace,monospace;letter-spacing:.06em;cursor:pointer;transition:.15s}
.acct-save:hover:not(:disabled){background:#103048}
.acct-save:disabled{opacity:.5;cursor:default}
.acct-box .card-close{margin-top:2px}

@media(max-width:560px){main{padding:16px}.stagewrap,.tuner{max-width:none}.card-act{font-size:10px;padding:9px 4px}}