/* Stats hub (statshub.js), Nov 9 2026. Uses the game's own colors (--card, --line, --ink, --muted, --accent). */
.sh-top { display:flex; flex-direction:column; gap:26px; margin-bottom:8px; }
.sh-top > .st-sec { margin-bottom:0; }
.sh-h { display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:17px; font-weight:800; color:var(--ink); margin:0 0 12px; text-wrap:balance; }
.sh-h span { font-size:12.5px; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; }
/* All your numbers: folded */
.sh-nums { margin-top:26px; border-top:1px solid var(--line); }
.sh-nums > summary { list-style:none; display:flex; flex-direction:column; gap:2px; padding:16px 44px 16px 0; cursor:pointer; position:relative; }
.sh-nums > summary::-webkit-details-marker { display:none; }
.sh-nums > summary span { font-size:17px; font-weight:800; color:var(--ink); }
.sh-nums > summary small { font-size:12.5px; color:var(--muted); }
.sh-nums > summary::after { content:""; position:absolute; right:12px; top:50%; width:9px; height:9px; margin-top:-7px; border-right:2.5px solid var(--muted); border-bottom:2.5px solid var(--muted); transform:rotate(45deg); transition:transform .2s; }
.sh-nums[open] > summary::after { transform:rotate(-135deg); margin-top:-2px; }
.sh-nums > summary:focus-visible { outline:2px solid #ffcb05; outline-offset:2px; border-radius:8px; }
.sh-nums[open] > summary { margin-bottom:8px; }

/* home row: Your pack wall */
.sh-hfan { position:relative; width:52px; height:44px; flex:none; }
.sh-hfan img { position:absolute; height:40px; left:calc(var(--i) * 11px); top:2px; transform:rotate(calc(-8deg + var(--i) * 8deg)); filter:drop-shadow(0 3px 5px rgba(0,0,0,.5)); }
.sh-home.fresh { border-color:rgba(255,203,5,.5); box-shadow:0 0 0 1px rgba(255,203,5,.18), 0 8px 20px rgba(0,0,0,.3); }
.sh-home.fresh .ep-ht span { color:#ffcb05; }

/* hero: who you are, and the best thing you ever pulled */
.sh-hero { position:relative; display:flex; gap:18px; align-items:stretch; padding:18px; border-radius:18px; overflow:hidden;
  background:radial-gradient(120% 140% at 0% 0%, rgba(255,203,5,.14), transparent 55%), radial-gradient(120% 140% at 100% 100%, rgba(95,155,255,.18), transparent 60%), var(--card);
  border:1px solid var(--line2, var(--line)); box-shadow:0 10px 28px rgba(0,0,0,.28); }
.sh-who { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:space-between; gap:16px; }
.sh-id { display:flex; align-items:center; gap:12px; min-width:0; }
.sh-av { flex:none; width:64px; height:64px; border-radius:14px; overflow:hidden; box-shadow:0 0 0 2px rgba(255,203,5,.55), 0 6px 14px rgba(0,0,0,.35); }
.sh-av svg { display:block; width:64px; height:64px; }
.sh-name { font-size:22px; font-weight:800; color:var(--ink); line-height:1.15; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sh-line { font-size:13px; color:var(--muted); margin-top:3px; }
.sh-kind { display:flex; flex-direction:column; gap:1px; padding:9px 12px; border-radius:12px; background:linear-gradient(90deg, rgba(255,203,5,.14), rgba(255,203,5,.02)); border-left:3px solid #ffcb05; }
.sh-kind b { font-size:15px; color:#ffcb05; }
.sh-kind span { font-size:13px; color:var(--ink); opacity:.85; }
.sh-stats { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px 16px; }
.sh-stat { display:flex; flex-direction:column; min-width:0; }
.sh-stat b { font-size:24px; font-weight:800; color:var(--ink); line-height:1.05; font-variant-numeric:tabular-nums; }
.sh-stat span { font-size:12px; color:var(--muted); }
.sh-best { flex:none; width:132px; display:flex; flex-direction:column; align-items:center; gap:2px; padding:0; border:0; background:none; color:var(--ink); font:inherit; cursor:pointer; }
.sh-best-art { position:relative; display:block; width:100%; aspect-ratio:63/88; border-radius:7px; overflow:hidden; transform:rotate(3deg); box-shadow:0 12px 26px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.12); transition:transform .25s; }
.sh-best:hover .sh-best-art { transform:rotate(0) translateY(-3px); }
.sh-best-art img { width:100%; height:100%; object-fit:cover; display:block; }
.sh-sheen { position:absolute; inset:0; background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.38) 48%, transparent 60%); background-size:250% 100%; animation:shSheen 5s ease-in-out infinite; mix-blend-mode:overlay; }
@keyframes shSheen { 0%, 55% { background-position:130% 0; } 100% { background-position:-130% 0; } }
.sh-best-n { font-size:13px; font-weight:700; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sh-best-k { margin-top:10px; font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.sh-best-v { font-size:18px; font-weight:800; color:#ffcb05; font-variant-numeric:tabular-nums; }
.sh-best-d { font-size:11.5px; color:var(--muted); }

/* pack wall: one wrapper per set you've opened, standing on a shelf */
.sh-wall { display:grid; grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); gap:18px 12px; }
.sh-pack { position:relative; display:flex; flex-direction:column; align-items:center; gap:5px; padding:0 0 4px; border:0; background:none; color:var(--ink); font:inherit; cursor:pointer; min-width:0; }
.sh-wrap { display:flex; align-items:flex-end; justify-content:center; width:100%; height:118px; padding-bottom:6px; border-bottom:3px solid rgba(255,255,255,.08);
  background:linear-gradient(0deg, rgba(255,255,255,.05), transparent 40%); border-radius:10px 10px 2px 2px; }
.sh-wrap img { max-width:84%; max-height:108px; object-fit:contain; filter:drop-shadow(0 8px 10px rgba(0,0,0,.45)); transition:transform .2s; }
.sh-wrap.logo img { max-height:46px; margin-bottom:30px; }
.sh-pack:hover .sh-wrap img { transform:translateY(-4px) rotate(-2deg); }
.sh-pack.on .sh-wrap { border-bottom-color:#ffcb05; background:linear-gradient(0deg, rgba(255,203,5,.14), transparent 55%); }
.sh-cnt { position:absolute; top:4px; right:2px; padding:2px 7px; border-radius:999px; font-size:12px; font-weight:800; color:#1b1500; background:#ffcb05; box-shadow:0 2px 6px rgba(0,0,0,.35); font-variant-numeric:tabular-nums; }
.sh-nm { font-size:12px; font-weight:700; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* completion ring under each pack */
.sh-ring { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.sh-ring svg { display:block; flex:none; }
.sh-ring .tr { fill:none; stroke:rgba(255,255,255,.12); stroke-width:3; }
.sh-ring .fg { fill:none; stroke:#3fcf87; stroke-width:3; stroke-linecap:round; transition:stroke-dashoffset .8s ease-out; }
.sh-ring b { font-weight:800; }
.sh-ring.done .fg { stroke:#ffcb05; }
.sh-ring.done .ck { fill:none; stroke:#ffcb05; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.sh-ring.done b { color:#ffcb05; }
.sh-ring.done svg { filter:drop-shadow(0 0 4px rgba(255,203,5,.7)); }
.sh-pack.done .sh-wrap { border-bottom-color:rgba(255,203,5,.75); background:radial-gradient(60% 70% at 50% 100%, rgba(255,203,5,.22), transparent 70%), linear-gradient(0deg, rgba(255,255,255,.05), transparent 40%); }
.sh-pack.done .sh-wrap img { filter:drop-shadow(0 8px 10px rgba(0,0,0,.45)) drop-shadow(0 0 10px rgba(255,203,5,.35)); }

/* entrance, once per opening */
@keyframes shDrop { 0% { opacity:0; transform:translateY(-34px) rotate(-6deg); } 70% { opacity:1; transform:translateY(4px) rotate(1deg); } 100% { transform:none; } }
@keyframes shRise { from { opacity:0; transform:translateY(10px); } }
@keyframes shRing { from { stroke-dashoffset:56.55; } }
.sh-enter .sh-hero { animation:shRise .45s ease-out both; }
.sh-enter .sh-best-art { animation:shRise .6s .15s ease-out both; }
.sh-enter .sh-wrap img { animation:shDrop .55s cubic-bezier(.3,.7,.4,1) both; animation-delay:calc(.25s + var(--d) * 60ms); }
.sh-enter .sh-cnt { animation:shRise .3s both; animation-delay:calc(.55s + var(--d) * 60ms); }
.sh-enter .sh-ring .fg { animation:shRing .9s ease-out both; animation-delay:calc(.5s + var(--d) * 60ms); }
.sh-enter .sh-best .sh-sheen { animation-delay:.6s; }
.sh-bar i { display:block; height:100%; background:linear-gradient(90deg, #3fcf87, #7ef0b4); border-radius:inherit; }
.sh-empty { padding:22px; border-radius:14px; border:1px dashed var(--line2, var(--line)); color:var(--muted); text-align:center; font-size:14px; }

/* a set's story, under the wall */
.sh-det { margin-top:16px; padding:16px; border-radius:16px; background:var(--card); border:1px solid rgba(255,203,5,.45); box-shadow:0 8px 22px rgba(0,0,0,.28); animation:shIn .2s ease-out; }
@keyframes shIn { from { opacity:0; transform:translateY(-6px); } }
.sh-det-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.sh-det-logo { max-height:48px; max-width:70%; object-fit:contain; }
.sh-det-nm { font-size:17px; }
.sh-x { flex:none; width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.05); color:var(--ink); font:inherit; cursor:pointer; }
.sh-det-facts { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:8px; }
.sh-det-facts > div { display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.05); min-width:0; }
.sh-det-facts small { font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.sh-det-facts b { font-size:17px; color:var(--ink); font-variant-numeric:tabular-nums; }
.sh-det-facts span { font-size:12px; color:var(--muted); }
.sh-bar { display:block; height:6px; margin-top:5px; border-radius:3px; background:rgba(255,255,255,.1); overflow:hidden; }
.sh-det-h { margin:14px 0 8px; font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.sh-det-cards { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; max-width:360px; }
.sh-mini { display:flex; flex-direction:column; align-items:center; gap:2px; padding:0; border:0; background:none; color:var(--ink); font:inherit; cursor:pointer; min-width:0; }
.sh-mini img { width:100%; aspect-ratio:63/88; object-fit:cover; border-radius:6px; box-shadow:0 4px 10px rgba(0,0,0,.35); }
.sh-mini span { font-size:12px; font-weight:700; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sh-mini b { font-size:12px; color:#ffcb05; }
.sh-rip { display:block; width:100%; margin-top:14px; padding:12px; border:0; border-radius:12px; font:inherit; font-size:15px; font-weight:800; color:#1b1500; background:#ffcb05; cursor:pointer; }

/* best pulls: a fanned row */
.sh-hall { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:10px; padding:4px 8px 0; }
.sh-hc { display:flex; flex-direction:column; align-items:center; gap:2px; padding:0; border:0; background:none; color:var(--ink); font:inherit; cursor:pointer; min-width:0; }
.sh-hc-art { position:relative; display:block; width:100%; aspect-ratio:63/88; border-radius:6px; overflow:hidden; box-shadow:0 6px 14px rgba(0,0,0,.4); transition:transform .2s;
  transform:rotate(calc((var(--i) - 2) * 2.5deg)) translateY(calc(var(--i) * 0px)); }
.sh-hc:hover .sh-hc-art { transform:translateY(-5px); }
.sh-hc-art img { width:100%; height:100%; object-fit:cover; display:block; }
.sh-hc-art em { position:absolute; top:4px; left:4px; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:11px; font-weight:800; color:#1b1500; background:#ffcb05; }
.sh-hc-n { margin-top:8px; font-size:12px; font-weight:700; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sh-hc-v { font-size:12.5px; font-weight:800; color:#ffcb05; font-variant-numeric:tabular-nums; }
.sh-hc-d { font-size:11px; color:var(--muted); }

/* closest to finishing */
.sh-cl { display:flex; align-items:center; gap:14px; padding:14px; border-radius:14px; background:var(--card); border:1px solid var(--line); }
.sh-cl + .sh-cl { margin-top:8px; }
.sh-cl.sm { padding:10px 14px; opacity:.92; }
.sh-cl-logo { flex:none; width:84px; max-height:42px; object-fit:contain; }
.sh-cl.sm .sh-cl-logo { width:64px; max-height:30px; }
.sh-cl-b { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.sh-cl-b b { font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sh-cl-b > span { font-size:12.5px; color:var(--muted); } .sh-cl-b em { font-style:normal; font-weight:800; color:#3fcf87; }
.sh-cl-go { flex:none; padding:9px 14px; border-radius:999px; border:0; background:#ffcb05; color:#1b1500; font:inherit; font-size:13px; font-weight:800; cursor:pointer; }
.sh-cl.sm .sh-cl-go { background:none; color:var(--ink); border:1px solid rgba(255,255,255,.25); }
@media (max-width:520px) { .sh-cl-logo { width:56px; } .sh-cl.sm .sh-cl-logo { width:48px; } .sh-cl-go { padding:8px 11px; } }

/* Collector / Unlimited switch above the wall */
.sh-mode { display:inline-flex; gap:2px; padding:3px; margin:0 0 14px 10px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); vertical-align:top; }
.sh-mode button { padding:6px 14px; border:0; border-radius:999px; background:none; color:var(--muted); font:inherit; font-size:13px; font-weight:800; cursor:pointer; }
.sh-mode button.on { background:var(--ink); color:#14183a; }
.sh-mode button:focus-visible { outline:2px solid #ffcb05; outline-offset:2px; }
@media (max-width:520px) { .sh-mode { margin-left:0; } }

/* share the wall */
.sh-share { display:inline-flex; align-items:center; gap:6px; margin:-4px 0 14px; padding:7px 14px; border-radius:999px; border:1px solid rgba(255,203,5,.45); background:rgba(255,203,5,.08); color:var(--ink); font:inherit; font-size:13px; font-weight:800; cursor:pointer; }
.sh-share:hover { background:rgba(255,203,5,.16); }
.sh-share:disabled { opacity:.6; cursor:default; }

/* your story */
.sh-tl { list-style:none; margin:0; padding:0 0 0 4px; position:relative; }
.sh-tl::before { content:""; position:absolute; left:21px; top:10px; bottom:22px; width:2px; border-radius:1px; background:linear-gradient(180deg, rgba(255,203,5,.7), rgba(125,176,255,.45) 40%, rgba(199,157,255,.25)); }
.sh-tl-m { position:relative; margin:18px 0 8px 52px; font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.sh-tl-m:first-child { margin-top:0; }
.sh-tl-e { position:relative; display:flex; align-items:flex-start; gap:12px; padding:5px 0; }
.sh-tl-dot { position:relative; z-index:1; flex:none; width:36px; height:36px; display:grid; place-items:center; border-radius:50%; font-size:16px;
  background:var(--card); border:2px solid var(--line2, var(--line)); box-shadow:0 0 0 4px var(--bg); }
.sh-tl-m:first-child + .sh-tl-e .sh-tl-dot { border-color:#ffcb05; box-shadow:0 0 0 4px var(--bg), 0 0 14px rgba(255,203,5,.45); }
.sh-tl-e.start .sh-tl-dot { border-color:#7db0ff; }
.sh-tl-b { flex:1; min-width:0; display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); color:var(--ink); font:inherit; text-align:left; }
button.sh-tl-b { cursor:pointer; } button.sh-tl-b:hover { border-color:rgba(255,203,5,.45); }
.sh-tl-tx { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.sh-tl-tx b { font-size:14.5px; line-height:1.3; text-wrap:balance; }
.sh-tl-tx span { font-size:13px; color:#ffcb05; font-weight:700; }
.sh-tl-tx small { font-size:12px; color:var(--muted); }
.sh-tl-card { flex:none; width:40px; aspect-ratio:63/88; border-radius:4px; overflow:hidden; box-shadow:0 3px 8px rgba(0,0,0,.4); transform:rotate(3deg); }
.sh-tl-card img { width:100%; height:100%; object-fit:cover; display:block; }
.sh-tl-pack { flex:none; width:40px; height:56px; display:flex; align-items:center; justify-content:center; }
.sh-tl-pack img { max-width:100%; max-height:100%; object-fit:contain; filter:drop-shadow(0 3px 5px rgba(0,0,0,.45)); transform:rotate(-4deg); }
.sh-tl-e.start .sh-tl-b { background:linear-gradient(90deg, rgba(125,176,255,.10), rgba(255,255,255,.03)); }
.sh-tl-gap { position:relative; padding:6px 0 6px 52px; }
.sh-tl-gap button { font:inherit; font-size:13px; font-weight:800; color:var(--ink); background:rgba(255,255,255,.06); border:1px dashed rgba(255,255,255,.25); border-radius:999px; padding:6px 14px; cursor:pointer; }

.sh-pack:focus-visible, .sh-cl-go:focus-visible, .sh-share:focus-visible, .sh-tl-gap button:focus-visible, button.sh-tl-b:focus-visible, .sh-best:focus-visible, .sh-hc:focus-visible, .sh-mini:focus-visible, .sh-rip:focus-visible, .sh-x:focus-visible { outline:2px solid #ffcb05; outline-offset:3px; border-radius:8px; }

@media (max-width:520px) {
  .sh-hero { flex-direction:column; padding:16px; }
  .sh-best { display:grid; grid-template-columns:72px 1fr; grid-auto-rows:min-content; align-content:center; column-gap:14px; width:auto; text-align:left; justify-items:start;
    padding-top:14px; border-top:1px solid var(--line); }
  .sh-best-art { grid-row:1 / span 4; width:72px; transform:rotate(-3deg); }
  .sh-best-k { margin-top:0; align-self:end; }
  .sh-wall { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px 8px; }
  .sh-stats { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .sh-hall { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
  .sh-hc:nth-child(n+4) { display:none; }
  .sh-hc-art { transform:rotate(calc((var(--i) - 1) * 2.5deg)); }
}
@media (prefers-reduced-motion:reduce) { .sh-sheen, .sh-det, .sh-enter * { animation:none !important; } }