/* ===================================================== base */
:root {
  --bg: #0b0e17; --bg2: #121729; --panel: #161c30; --panel2: #1d2440; --line: rgba(255,255,255,.08);
  --text: #e8ecf6; --muted: #8e98b3; --accent: #7c6cff; --accent2: #12c2e9; --good: #38c97f; --warn: #ffb21e; --bad: #ff5470;
  --radius: 16px;
  --c-common: #a3adbb; --c-uncommon: #38c97f; --c-rare: #3f8cff; --c-epic: #b35cff; --c-legendary: #ffb21e; --c-chase: #ff4fa3;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { background: var(--bg); } /* dark canvas: no white strip under the iOS keyboard / overscroll (the backdrop itself lives on body::before) */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text); min-height: 100vh;
}
/* The page backdrop lives on a fixed layer instead of body { background-attachment: fixed }:
   the look is identical, but a fixed layer composites for free while a fixed-attachment
   background repaints on every scroll — a classic Firefox Android jank source (Cory, 2026-10-24). */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(1200px 600px at 10% -10%, #2a1f5c 0%, transparent 60%),
              radial-gradient(900px 500px at 110% 10%, #0f3a52 0%, transparent 55%), var(--bg);
}
button, input, select, textarea { font: inherit; color: inherit; }
code, kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; background: rgba(255,255,255,.08); padding: .1em .35em; border-radius: 5px; }
kbd { border: 1px solid rgba(255,255,255,.15); border-bottom-width: 2px; }
h2 { margin: 0 0 14px; font-size: 1.15rem; letter-spacing: .01em; }
h2 small { color: var(--muted); font-weight: 500; }
h3 { margin: 22px 0 10px; font-size: .95rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.muted { color: var(--muted); } .small { font-size: .85rem; }
.hidden { display: none !important; }
.row { display: flex; gap: 8px; align-items: center; } .row.wrap { flex-wrap: wrap; }
.dev-only { display: none !important; } body.dev .dev-only { display: block !important; }

/* r-* = rarity colors for anything */
.r-common { --rc: var(--c-common); --rc2: #5d6676; }
.r-uncommon { --rc: var(--c-uncommon); --rc2: #127a49; }
.r-rare { --rc: var(--c-rare); --rc2: #1d48a8; }
.r-epic { --rc: var(--c-epic); --rc2: #5d1fa8; }
.r-legendary { --rc: var(--c-legendary); --rc2: #b25c00; }
.r-chase { --rc: var(--c-chase); --rc2: #7b2ff7; }
.rt-common { color: var(--c-common); } .rt-uncommon { color: var(--c-uncommon); } .rt-rare { color: var(--c-rare); }
.rt-epic { color: var(--c-epic); } .rt-legendary { color: var(--c-legendary); }
.rt-chase { background: linear-gradient(90deg,#ff4fa3,#ffb21e,#38c97f,#3f8cff,#b35cff); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ===================================================== buttons & inputs */
.btn {
  border: 1px solid var(--line); background: var(--panel2); padding: 9px 16px; border-radius: 11px; cursor: pointer;
  font-weight: 600; transition: transform .12s, background .2s, box-shadow .2s, opacity .2s; white-space: nowrap;
}
.btn:hover { background: #262f55; } .btn:active { transform: translateY(1px) scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.primary { background: linear-gradient(135deg, var(--accent), #5a48e8); border-color: transparent; box-shadow: 0 6px 20px rgba(124,108,255,.35); }
.btn.primary:hover:not(:disabled) { box-shadow: 0 8px 26px rgba(124,108,255,.55); filter: brightness(1.08); }
.btn.big { width: 100%; padding: 14px; font-size: 1.05rem; border-radius: 14px; }
.btn.small { padding: 6px 11px; font-size: .85rem; border-radius: 9px; }
.btn.ghost { background: transparent; }
.btn.danger { background: rgba(255,84,112,.15); border-color: rgba(255,84,112,.35); color: #ffb3c0; margin-top: 10px; }
input:not([type=checkbox]):not([type=color]):not([type=file]), select, textarea {
  background: #0e1324; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; outline: none; min-width: 0;
  transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124,108,255,.25); }
textarea { width: 100%; resize: vertical; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; }
input[type=color] { width: 100%; height: 38px; border: 1px solid var(--line); border-radius: 10px; background: #0e1324; padding: 3px; }
input.bad { animation: shakeX .4s; border-color: var(--bad); }
.icon-btn { background: var(--panel2); border: 1px solid var(--line); width: 42px; height: 42px; border-radius: 11px; cursor: pointer; font-size: 1.05rem; }
.icon-btn { position: relative; }
body.cloud button#notifBtn { display: inline-flex !important; align-items: center; justify-content: center; }
.notif-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px; border-radius: 9px; background: #e5484d; color: #fff; font-size: 11px; font-weight: 700; text-align: center; }
.notif-list { display: grid; gap: 8px; margin: 12px 0; max-height: 50vh; overflow-y: auto; }
.notif { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); cursor: pointer; text-align: left; width: 100%; font: inherit; color: inherit; }
.notif.unread { border-color: var(--accent); background: rgba(124,108,255,.08); }
.notif.pinned { border-color: #d9a441; background: rgba(217,164,65,.10); }
.notif.pinned .notif-text::before { content: '📌 PINNED'; display: block; font-size: .68rem; font-weight: 700; letter-spacing: .06em; color: var(--muted); margin-bottom: 2px; }
.notif-icon { font-size: 1.3rem; flex: none; }
.notif-text { flex: 1; min-width: 0; }
.notif-time { display: block; font-size: .75rem; color: var(--muted); margin-top: 2px; }
.notif-actions { display: flex; gap: 10px; margin-top: 4px; }
.quest-list { display: grid; gap: 10px; margin-top: 12px; }
.quest { border: 1px solid var(--line); border-left-width: 3px; border-radius: 12px; padding: 12px 14px; background: var(--panel2); }
.quest.tier-easy { border-left-color: #38c97f; }
.quest.tier-medium { border-left-color: #3f8cff; }
.quest.tier-hard { border-left-color: #b35cff; }
.quest.tier-ultra { border-left-color: #f0b429; }
.quest.claimable { border-color: var(--accent); box-shadow: 0 0 14px rgba(124,108,255,.28); }
.quest-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.quest-tier { display: block; font-size: .78rem; color: var(--muted); text-transform: capitalize; margin-top: 2px; }
.quest-bar { height: 8px; }
.quest-done { color: var(--good); font-weight: 700; font-size: .85rem; white-space: nowrap; }
.quest-prog { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 700; white-space: nowrap; }
/* set picker: sets with packs glow gold, the current set is marked in accent */
.grant-all { margin-bottom: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; align-items: center; }
.grant-all .muted { margin-right: 4px; }
.variant-census { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.02); display: grid; gap: 5px; font-size: .88rem; }
.variant-census .vc-row { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.variant-census .vc-n { font-weight: 800; font-variant-numeric: tabular-nums; }
.variant-census .vc-done { color: var(--good); }
.variant-census .vc-mine { color: var(--accent2); font-weight: 700; }
.variant-census .vc-serial-link { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.variant-census .vc-serial-link:hover { text-decoration: underline; }
.owners-row[data-mycopy] { cursor: pointer; }
.owners-row[data-mycopy]:hover .owners-serial { text-decoration: underline; }
.variant-census .vc-link { cursor: pointer; }
.variant-census .vc-link:hover .vc-n { text-decoration: underline; }
.variant-census .vc-go { color: var(--accent2); font-weight: 800; }
.variant-census .vc-misprint-note { color: var(--muted); font-style: italic; }
.owners-list { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.owners-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; background: var(--panel2); border-radius: 8px; align-items: baseline; }
.owners-serial { font-weight: 800; font-variant-numeric: tabular-nums; }
.owners-name { font-weight: 700; }
.owners-you { color: var(--accent2); font-weight: 700; }
.owners-tag { color: var(--muted); font-size: .82rem; font-weight: 700; }
.owners-misprint { color: var(--bad); font-size: .72rem; font-weight: 800; letter-spacing: .06em; border: 1px solid var(--bad); padding: 0 4px; border-radius: 4px; }
.variants-grid .card { max-width: 170px; }
.variants-panel { margin-top: 16px; }
.variants-grid .coll-item { pointer-events: auto; cursor: pointer; }
.vserial-cap { text-align: center; font-size: .8rem; margin-top: 4px; color: var(--muted); }
.vserial-cap b { color: var(--text); }
.gift-modal label { display: block; margin: 10px 0; }
.gift-modal select { width: 100%; margin-top: 4px; }
.gift-modal .trade-card { max-width: 170px; margin: 4px 0 8px; }
.gift-actions { display: flex; gap: 10px; margin-top: 14px; }

/* ===================================================== top bar */
.topbar {
  position: sticky; top: 0; z-index: 20; transform: translateZ(0); display: flex; align-items: center; gap: 18px; padding: 12px 22px;
  background: rgba(11,14,23,.94); /* no backdrop-filter: live blur under the sticky bar repaints every frame (Firefox Android chugs — Cory, 2026-10-24) */ border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 8px; font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; color: inherit; text-decoration: none; cursor: pointer; border-radius: 10px; }
.brand:hover .logo { filter: brightness(1.15); } .brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.brand b { background: linear-gradient(90deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 4px 16px rgba(124,108,255,.45); font-size: 1.05rem; }
.set-picker { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .85rem; }
.set-picker select { max-width: 240px; color: var(--text); }
/* Custom set dropdown (always opens at the top; native selects can't) */
.set-dd { position: relative; }
.set-dd-btn {
  display: block; width: 100%; max-width: 240px; text-align: left; cursor: pointer;
  background-color: #0e1324; border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 36px 9px 12px; color: var(--text); font: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23aab4ff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.set-dd-btn:hover { border-color: var(--accent); }
.set-dd-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-dd-list {
  /* Fixed + body-level (app.js portals the node): inside the sticky header the
     list is trapped in the header's stacking context, so pack art / progress
     rings paint over it. z-index matches .acct-menu, the other header dropdown. */
  position: fixed; z-index: 300;
  width: 264px; max-width: 92vw; max-height: 62vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55); padding: 6px;
}
.set-dd-group { padding: 8px 10px 4px; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.set-dd-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; background: none; border: 0; border-radius: 8px; cursor: pointer;
  padding: 8px 10px; color: var(--text); font: inherit; font-size: .92rem; text-align: left;
}
.set-dd-item:hover, .set-dd-item:focus-visible { background: var(--panel2); outline: none; }
.set-dd-item.has-packs .set-dd-name { color: #ffe08a; font-weight: 700; }
.set-dd-item.is-current .set-dd-name { color: #aab4ff; }
.set-dd-count { color: #ffe08a; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.tabs { display: flex; gap: 4px; margin-left: auto; background: rgba(255,255,255,.04); padding: 4px; border-radius: 13px; overflow-x: auto; scrollbar-width: none; }
.tab { background: none; border: 0; padding: 8px 14px; border-radius: 10px; color: var(--muted); cursor: pointer; font-weight: 600; white-space: nowrap; }
.tab:hover { color: var(--text); } .tab.active { background: var(--panel2); color: var(--text); box-shadow: 0 2px 10px rgba(0,0,0,.3); }
.top-actions { display: flex; gap: 8px; align-items: center; }
.player-chip { display: flex; align-items: center; gap: 8px; background: var(--panel2); border: 1px solid var(--line); padding: 4px 12px 4px 4px; border-radius: 999px; cursor: pointer; font-weight: 600; max-width: 230px; }
.player-chip #playerName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.player-chip .avatar, .player-chip .mode-tag { flex-shrink: 0; }
.avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #ff7a59, #b35cff); font-weight: 800; font-size: .85rem; flex: none; }

/* ===================================================== layout */
main { max-width: 1400px; margin: 0 auto; padding: 22px; }
.view { display: none; animation: fadeIn .25s ease; } .view.active { display: block; }
.panel { background: linear-gradient(180deg, rgba(29,36,64,.75), rgba(22,28,48,.75)); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
/* A panel that leads with an h3 (e.g. Sell Your Dupes) shouldn't stack the global h3 top margin on the panel's padding. */
.panel > h3:first-child { margin-top: 0; }
#view-players .panel + .panel { margin-top: 16px; }
#view-arcade .panel + .panel { margin-top: 16px; }
.packs-layout { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }

/* ===================================================== inventory */
.inventory { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 14px; }
.inventory h2 { margin: 0; }
.inv-pack { position: relative; display: grid; place-items: center; padding: 8px 0 2px; }
.inv-badge { position: absolute; top: 2px; right: calc(50% - 82px); min-width: 34px; height: 34px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center; font-weight: 800; background: var(--bad); box-shadow: 0 4px 14px rgba(255,84,112,.5); border: 3px solid var(--panel); }
.inv-count { text-align: center; color: var(--muted); } .inv-count span:first-child { font-size: 1.6rem; font-weight: 800; color: var(--text); margin-right: 2px; }
.redeem { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.redeem label { font-size: .85rem; color: var(--muted); }
.redeem input { flex: 1; font-family: ui-monospace, Menlo, monospace; text-transform: uppercase; font-size: .85rem; letter-spacing: .03em; }
.dev-box { border: 1px dashed rgba(255,178,30,.4); background: rgba(255,178,30,.06); border-radius: 12px; padding: 12px; }
.dev-box .row { flex-wrap: wrap; }
.dev-title { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--warn); font-weight: 700; margin-bottom: 8px; }
.mini-stats { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); font-size: .9rem; }
.mini-stats div { display: flex; justify-content: space-between; gap: 10px; }
.mini-stats span { color: var(--muted); } .mini-stats b { text-align: right; }

/* ===================================================== pack art */
.pack { --pw: 200px; position: relative; width: var(--pw); aspect-ratio: 5/8; user-select: none; filter: drop-shadow(0 18px 30px rgba(0,0,0,.5)); }
.pack.mini { --pw: 120px; }
.pack-top, .pack-body { position: absolute; left: 0; right: 0; background: linear-gradient(160deg, var(--p1), var(--p2)); }
.pack-top { top: 0; height: 11%; border-radius: 6px 6px 0 0; transition: transform .6s cubic-bezier(.3,1.4,.5,1), opacity .5s; transform-origin: 0% 100%; }
.pack-top::after { content: ''; position: absolute; left: 4%; right: 4%; bottom: 0; border-bottom: 2px dashed rgba(255,255,255,.45); }
.pack-body { top: 11%; bottom: 0; border-radius: 0 0 6px 6px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4%; text-align: center; padding: 10% 8% 14%; transition: transform .5s ease-in, opacity .5s; }
.pack .crimp { position: absolute; left: 0; right: 0; top: 0; height: 60%; background: repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 3px, rgba(255,255,255,.12) 3px 6px); }
.pack .crimp.bottom { top: auto; bottom: 0; height: 6%; }
.pack-body::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 38%, rgba(255,255,255,.35), transparent 45%), repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 10px, transparent 10px 20px); }
.pack-shine { position: absolute; inset: -50%; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.45) 50%, transparent 60%); animation: shine 3.5s ease-in-out infinite; pointer-events: none; }
.pack-emblem { position: relative; width: 46%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-size: calc(var(--pw) * .2); background: rgba(0,0,0,.22); border: 3px solid rgba(255,255,255,.5); box-shadow: inset 0 0 20px rgba(255,255,255,.25), 0 0 30px rgba(255,255,255,.2); text-shadow: 0 0 18px #fff; }
.pack-name { position: relative; font-weight: 900; font-size: calc(var(--pw) * .085); line-height: 1.1; text-shadow: 0 2px 8px rgba(0,0,0,.4); text-transform: uppercase; }
.pack-sub { position: relative; font-size: calc(var(--pw) * .055); opacity: .85; font-weight: 600; }
/* pack skin "civ": night runway — dark asphalt, glowing centerline dashes, threshold piano keys, blue edge lights, touchdown zone bars (no image files) */
.pack-skin-civ .pack-top {
  background:
    radial-gradient(ellipse 90% 30% at 50% -8%, rgba(255,240,200,.32), transparent 70%),
    repeating-linear-gradient(90deg, rgba(245,245,245,.9) 0 18px, transparent 18px 34px) 50% 26px / 72% 24px no-repeat,
    repeating-linear-gradient(180deg, rgba(255,255,255,.92) 0 16px, transparent 16px 40px) 50% 0 / 7px 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(255,196,110,.30) 0 16px, transparent 16px 40px) 50% 0 / 18px 100% no-repeat,
    radial-gradient(circle, rgba(160,200,255,.85) 0 2px, transparent 3px) 10px 0 / 20px 30px repeat-y,
    radial-gradient(circle, rgba(160,200,255,.85) 0 2px, transparent 3px) right 10px top 0 / 20px 30px repeat-y,
    repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, #0a0e15 0%, #131924 55%, #0c1017 100%);
}
.pack-skin-civ .pack-body {
  background:
    radial-gradient(ellipse 70% 40% at 50% 108%, rgba(255,196,110,.22), transparent 70%),
    linear-gradient(90deg, transparent 0 calc(50% - 46px), rgba(255,255,255,.7) calc(50% - 46px) calc(50% - 14px), transparent calc(50% - 14px) calc(50% + 14px), rgba(255,255,255,.7) calc(50% + 14px) calc(50% + 46px), transparent calc(50% + 46px)) 50% 20% / 100% 10px no-repeat,
    repeating-linear-gradient(180deg, rgba(255,255,255,.92) 0 16px, transparent 16px 40px) 50% 0 / 7px 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(255,196,110,.30) 0 16px, transparent 16px 40px) 50% 0 / 18px 100% no-repeat,
    radial-gradient(circle, rgba(160,200,255,.85) 0 2px, transparent 3px) 10px 0 / 20px 30px repeat-y,
    radial-gradient(circle, rgba(160,200,255,.85) 0 2px, transparent 3px) right 10px top 0 / 20px 30px repeat-y,
    repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, #0c1017 0%, #080b10 70%, #05070a 100%);
}
.pack-skin-civ .pack-body::before {
  background: radial-gradient(ellipse 90% 30% at 50% 0%, rgba(255,240,200,.12), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 55%); mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
}
.pack-skin-civ .crimp { background: repeating-linear-gradient(100deg, rgba(0,0,0,.55) 0 4px, rgba(255,180,90,.28) 4px 6px, rgba(255,255,255,.08) 6px 9px); }
.pack-skin-civ .crimp.bottom { background: repeating-linear-gradient(100deg, rgba(0,0,0,.68) 0 4px, rgba(200,120,40,.32) 4px 6px, rgba(255,255,255,.05) 6px 9px); }
.pack-skin-civ .pack-top::after { border-bottom-color: rgba(255,200,120,.55); }
.pack-skin-civ .pack-emblem { background: radial-gradient(circle at 35% 30%, rgba(255,220,170,.35), rgba(20,14,8,.85) 72%);
  border-color: rgba(255,210,150,.7); box-shadow: 0 0 28px rgba(255,180,90,.55), inset 0 0 18px rgba(255,210,150,.3); text-shadow: 0 0 16px rgba(255,200,140,.9); }
.pack-skin-civ .pack-name { color: #ffffff; text-shadow: 0 0 14px rgba(255,190,100,.85), 0 2px 8px rgba(0,0,0,.65); }
.pack-skin-civ .pack-sub { color: #e8d9b8; }
/* pack skin "space": Franklin's baked-in art — JWST NGC 346 photo with his NASA-style SPACE roundel
   and lettering baked in, one 1000x1600 image stored as 3 band SVGs (assets/sets/space/pack-art-1..3.svg,
   split so each file fits the push size limit) tiled at pack scale. No site-printed emblem/name/count. */
.pack-skin-space .pack-top {
  background-color: #04061a;
  background-image: url('../assets/sets/space/pack-art-1.svg'), url('../assets/sets/space/pack-art-2.svg'), url('../assets/sets/space/pack-art-3.svg');
  background-repeat: no-repeat;
  background-size: calc(var(--pw) * 1) calc(var(--pw) * .533), calc(var(--pw) * 1) calc(var(--pw) * .534), calc(var(--pw) * 1) calc(var(--pw) * .533);
  background-position: 0 0, 0 calc(var(--pw) * .533), 0 calc(var(--pw) * 1.067);
}
.pack-skin-space .pack-body {
  background-color: #04061a;
  background-image: url('../assets/sets/space/pack-art-1.svg'), url('../assets/sets/space/pack-art-2.svg'), url('../assets/sets/space/pack-art-3.svg');
  background-repeat: no-repeat;
  background-size: calc(var(--pw) * 1) calc(var(--pw) * .533), calc(var(--pw) * 1) calc(var(--pw) * .534), calc(var(--pw) * 1) calc(var(--pw) * .533);
  background-position: 0 calc(var(--pw) * -.176), 0 calc(var(--pw) * .357), 0 calc(var(--pw) * .891);
}
.pack-skin-space .pack-body::before { background: none; }
.pack-skin-space .crimp { background: repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 3px, rgba(170,190,255,.16) 3px 6px); }
.pack-skin-space .pack-top::after { border-bottom-color: rgba(170,190,255,.45); }
.pack-skin-space .pack-emblem { background: radial-gradient(circle at 35% 30%, rgba(110,130,255,.38), rgba(6,10,40,.75) 72%);
  border-color: rgba(170,190,255,.65); box-shadow: 0 0 28px rgba(100,130,255,.55), inset 0 0 18px rgba(150,170,255,.35); text-shadow: 0 0 16px rgba(150,180,255,.9); }
.pack-skin-space .pack-name { color: #f2f5ff; text-shadow: 0 0 14px rgba(110,140,255,.75), 0 2px 8px rgba(0,0,0,.6); }
.pack-skin-space .pack-sub { color: #b9c6ff; }
.pack-skin-space .pack-emblem, .pack-skin-space .pack-name, .pack-skin-space .pack-sub { display: none; }
/* Space card back: Franklin's baked-in deep-field art shown edge-to-edge — no frame, no lattice,
   no printed diamond/name; his PackRipper mark is in the art (2026-10-14) */
.card[data-set="space"] .back { padding: 0; background: #05070f; }
.card[data-set="space"] .cb { background: url('../assets/sets/space/card-back-art.svg') center / cover no-repeat #05070f; border: none; border-radius: 12px; }
.card[data-set="space"] .cb-emblem, .card[data-set="space"] .cb-name { display: none; }
/* pack skin "plants": Franklin's baked-in art — jungle photo with his script lettering and a
   Photoshop vignette, one 1000x1600 image stored as 4 band SVGs (assets/sets/plants/pack-art-1..4.svg).
   No site-printed emblem/name/count (baked into the art), no black layer (treatment baked in),
   static light shaft removed, animated shine sweep kept (Franklin 2026-10-14) */
.pack-skin-plants .pack-top {
  background-color: #04120a;
  background-image: url('../assets/sets/plants/pack-art-1.svg'), url('../assets/sets/plants/pack-art-2.svg'), url('../assets/sets/plants/pack-art-3.svg'), url('../assets/sets/plants/pack-art-4.svg');
  background-repeat: no-repeat;
  background-size: calc(var(--pw) * 1) calc(var(--pw) * .4), calc(var(--pw) * 1) calc(var(--pw) * .4), calc(var(--pw) * 1) calc(var(--pw) * .4), calc(var(--pw) * 1) calc(var(--pw) * .4);
  background-position: 0 0, 0 calc(var(--pw) * .4), 0 calc(var(--pw) * .8), 0 calc(var(--pw) * 1.2);
}
.pack-skin-plants .pack-body {
  background-color: #04120a;
  background-image: url('../assets/sets/plants/pack-art-1.svg'), url('../assets/sets/plants/pack-art-2.svg'), url('../assets/sets/plants/pack-art-3.svg'), url('../assets/sets/plants/pack-art-4.svg');
  background-repeat: no-repeat;
  background-size: calc(var(--pw) * 1) calc(var(--pw) * .4), calc(var(--pw) * 1) calc(var(--pw) * .4), calc(var(--pw) * 1) calc(var(--pw) * .4), calc(var(--pw) * 1) calc(var(--pw) * .4);
  background-position: 0 calc(var(--pw) * -.176), 0 calc(var(--pw) * .224), 0 calc(var(--pw) * .624), 0 calc(var(--pw) * 1.024);
}
.pack-skin-plants .pack-body::before { background: none; }
.pack-skin-plants .crimp { background: repeating-linear-gradient(100deg, rgba(0,0,0,.5) 0 4px, rgba(120,190,90,.5) 4px 6px, rgba(255,255,255,.12) 6px 9px); }
.pack-skin-plants .crimp.bottom { background: repeating-linear-gradient(100deg, rgba(0,0,0,.62) 0 4px, rgba(40,90,35,.55) 4px 6px, rgba(255,255,255,.07) 6px 9px); }
.pack-skin-plants .pack-top::after { border-bottom-color: rgba(230,250,190,.6); }
.pack-skin-plants .pack-emblem { background: radial-gradient(circle at 35% 30%, rgba(255,244,180,.5), rgba(14,40,18,.88) 72%);
  border-color: rgba(190,230,140,.7); box-shadow: 0 0 28px rgba(140,200,90,.65), inset 0 0 18px rgba(255,244,180,.30); text-shadow: 0 0 16px rgba(255,244,180,.9); }
.pack-skin-plants .pack-name { color: #ffffff; text-shadow: 0 0 14px rgba(140,200,90,.9), 0 2px 8px rgba(0,0,0,.65); }
.pack-skin-plants .pack-sub { color: #dff0c8; }
.pack-skin-plants .pack-emblem, .pack-skin-plants .pack-name, .pack-skin-plants .pack-sub { display: none; }
/* Plants card back: Franklin's baked-in pothos art (2 band SVGs) shown edge-to-edge —
   no frame, no lattice, no printed diamond/name; his PackRipper mark is in the art (2026-10-14) */
.card[data-set="plants"] .back { padding: 0; background: #0a1f10; }
.card[data-set="plants"] .cb { background:
  url('../assets/sets/plants/card-back-art-1.svg') 0 0 / 100% 50% no-repeat,
  url('../assets/sets/plants/card-back-art-2.svg') 0 100% / 100% 50% no-repeat #04120a;
  border: none; border-radius: 12px; }
.card[data-set="plants"] .cb-emblem, .card[data-set="plants"] .cb-name { display: none; }
/* pack skin "nascar": checkered-flag foil over night asphalt, red speed streaks, stadium-light glow (no image files) */ 
.pack-skin-nascar .pack-top {
  background:
    linear-gradient(180deg, rgba(0,0,0,.38) 0%, rgba(0,0,0,0) 30%, rgba(12,12,14,.88) 70%, #0b0b0d 100%),
    repeating-conic-gradient(#0d0d0f 0% 25%, #ececec 0% 50%) 50% 0 / 30px 30px,
    linear-gradient(90deg, transparent 0%, rgba(200,16,46,.55) 50%, transparent 100%) 0 100% / 100% 5px no-repeat,
    linear-gradient(180deg, #232327 0%, #0e0e10 100%);
}
.pack-skin-nascar .pack-body {
  background:
    radial-gradient(ellipse 62% 24% at 50% 108%, rgba(200,16,46,.30), transparent 70%),
    repeating-linear-gradient(100deg, rgba(255,255,255,.028) 0 2px, transparent 2px 9px),
    repeating-conic-gradient(rgba(255,255,255,.045) 0% 25%, transparent 0% 50%) 50% 100% / 46px 46px,
    linear-gradient(180deg, #17171a 0%, #0b0b0d 60%, #060607 100%);
}
.pack-skin-nascar .pack-body::before {
  background:
    radial-gradient(ellipse 85% 36% at 50% -8%, rgba(255,244,220,.32), transparent 70%),
    conic-gradient(from 180deg at 50% -24%, transparent 0deg, rgba(255,255,255,.10) 4deg, transparent 9deg, transparent 15deg, rgba(255,255,255,.07) 19deg, transparent 24deg);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 62%); mask-image: linear-gradient(180deg, #000 0%, transparent 62%);
}
.pack-skin-nascar .crimp { background: repeating-linear-gradient(100deg, rgba(0,0,0,.5) 0 4px, rgba(200,16,46,.38) 4px 6px, rgba(255,255,255,.12) 6px 9px); }
.pack-skin-nascar .crimp.bottom { background: repeating-linear-gradient(100deg, rgba(0,0,0,.62) 0 4px, rgba(120,8,26,.5) 4px 6px, rgba(255,255,255,.07) 6px 9px); }
.pack-skin-nascar .pack-top::after { border-bottom-color: rgba(255,255,255,.55); }
.pack-skin-nascar .pack-emblem { background: radial-gradient(circle at 35% 30%, rgba(255,110,110,.38), rgba(24,8,10,.82) 72%);
  border-color: rgba(255,130,130,.7); box-shadow: 0 0 28px rgba(200,16,46,.6), inset 0 0 18px rgba(255,130,130,.32); text-shadow: 0 0 16px rgba(255,150,150,.9); }
.pack-skin-nascar .pack-name { color: #ffffff; text-shadow: 0 0 14px rgba(200,16,46,.85), 0 2px 8px rgba(0,0,0,.65); }
.pack-skin-nascar .pack-sub { color: #f0c4c4; }
/* pack skin "nba": center court under the lights — polished maple hardwood, painted key, white court lines, warm arena glow (no image files) */
.pack-skin-nba .pack-top {
  background:
    linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 32%, rgba(10,8,4,.9) 72%, #050403 100%),
    conic-gradient(from 180deg at 50% -22%, transparent 0deg, rgba(255,236,200,.13) 4deg, transparent 9deg, transparent 15deg, rgba(255,236,200,.08) 19deg, transparent 24deg),
    radial-gradient(ellipse 78% 36% at 50% -4%, rgba(255,228,170,.30), transparent 70%),
    radial-gradient(ellipse 44% 60% at 50% 118%, rgba(232,114,42,.22), transparent 70%),
    linear-gradient(180deg, #191410 0%, #0d0a07 100%);
}
.pack-skin-nba .pack-body {
  background:
    linear-gradient(180deg, rgba(255,240,210,.16) 0%, rgba(255,240,210,0) 34%, rgba(0,0,0,.38) 100%),
    linear-gradient(115deg, transparent 30%, rgba(255,255,255,.08) 45%, transparent 60%),
    linear-gradient(rgba(255,255,255,.65), rgba(255,255,255,.65)) 0 26% / 100% 3px no-repeat,
    radial-gradient(circle at 50% 26%, transparent 40px, rgba(255,255,255,.7) 40px, rgba(255,255,255,.7) 43px, transparent 43px),
    radial-gradient(circle at 50% 175%, transparent 404px, rgba(255,255,255,.55) 404px, rgba(255,255,255,.55) 407px, transparent 407px),
    radial-gradient(circle at 50% calc(100% - 148px), transparent 54px, rgba(255,255,255,.7) 54px, rgba(255,255,255,.7) 57px, transparent 57px),
    linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.7)) 50% 100% / 122px 154px no-repeat,
    linear-gradient(rgba(24,52,130,.88), rgba(24,52,130,.88)) 50% 100% / 116px 148px no-repeat,
    repeating-linear-gradient(0deg, rgba(60,30,5,.16) 0 2px, transparent 2px 16px),
    repeating-linear-gradient(90deg, rgba(255,235,200,.05) 0 3px, transparent 3px 60px),
    linear-gradient(180deg, #d29a4e 0%, #c08438 45%, #a06c2a 100%);
}
.pack-skin-nba .pack-body::before {
  background:
    radial-gradient(ellipse 85% 34% at 50% -8%, rgba(255,240,210,.30), transparent 70%),
    conic-gradient(from 180deg at 50% -24%, transparent 0deg, rgba(255,255,255,.10) 4deg, transparent 9deg, transparent 15deg, rgba(255,255,255,.06) 19deg, transparent 24deg);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 60%); mask-image: linear-gradient(180deg, #000 0%, transparent 60%);
}
.pack-skin-nba .crimp { background: repeating-linear-gradient(100deg, rgba(0,0,0,.5) 0 4px, rgba(232,114,42,.45) 4px 6px, rgba(255,255,255,.12) 6px 9px); }
.pack-skin-nba .crimp.bottom { background: repeating-linear-gradient(100deg, rgba(0,0,0,.62) 0 4px, rgba(140,62,18,.5) 4px 6px, rgba(255,255,255,.07) 6px 9px); }
.pack-skin-nba .pack-top::after { border-bottom-color: rgba(255,255,255,.55); }
.pack-skin-nba .pack-emblem { background: radial-gradient(circle at 35% 30%, rgba(255,180,110,.45), rgba(30,14,4,.85) 72%);
  border-color: rgba(255,170,100,.7); box-shadow: 0 0 28px rgba(232,114,42,.65), inset 0 0 18px rgba(255,170,100,.32); text-shadow: 0 0 16px rgba(255,180,110,.9); }
.pack-skin-nba .pack-name { color: #ffffff; text-shadow: 0 0 14px rgba(232,114,42,.9), 0 2px 8px rgba(0,0,0,.65); }
.pack-skin-nba .pack-sub { color: #f5d9bd; }
/* pack skin "fastfood": checkered diner tablecloth — classic red-and-white checks with a warm neon-diner glow (no image files) */
.pack-skin-fastfood .pack-top {
  background:
    linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 34%, rgba(30,6,3,.88) 74%, #160403 100%),
    radial-gradient(ellipse 75% 38% at 50% -6%, rgba(255,190,90,.30), transparent 70%),
    repeating-conic-gradient(#b3231b 0% 25%, #f3ead8 0% 50%) 50% 0 / 36px 36px;
}
.pack-skin-fastfood .pack-body {
  background:
    radial-gradient(ellipse 62% 24% at 50% 108%, rgba(255,170,60,.24), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(20,4,2,.55) 60%, rgba(12,2,1,.88) 100%),
    repeating-conic-gradient(#a11f17 0% 25%, #e9dfc8 0% 50%) 50% 0 / 44px 44px;
}
.pack-skin-fastfood .pack-body::before {
  background:
    radial-gradient(ellipse 85% 36% at 50% -8%, rgba(255,200,110,.32), transparent 70%),
    conic-gradient(from 180deg at 50% -24%, transparent 0deg, rgba(255,220,150,.10) 4deg, transparent 9deg, transparent 15deg, rgba(255,220,150,.06) 19deg, transparent 24deg);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 62%); mask-image: linear-gradient(180deg, #000 0%, transparent 62%);
}
.pack-skin-fastfood .crimp { background: repeating-linear-gradient(100deg, rgba(0,0,0,.5) 0 4px, rgba(255,190,80,.36) 4px 6px, rgba(255,255,255,.14) 6px 9px); }
.pack-skin-fastfood .crimp.bottom { background: repeating-linear-gradient(100deg, rgba(0,0,0,.62) 0 4px, rgba(140,70,20,.5) 4px 6px, rgba(255,255,255,.08) 6px 9px); }
.pack-skin-fastfood .pack-top::after { border-bottom-color: rgba(255,220,160,.6); }
.pack-skin-fastfood .pack-emblem { background: radial-gradient(circle at 35% 30%, rgba(255,200,110,.42), rgba(40,12,4,.82) 72%);
  border-color: rgba(255,200,110,.75); box-shadow: 0 0 28px rgba(255,150,50,.6), inset 0 0 18px rgba(255,190,100,.35); text-shadow: 0 0 16px rgba(255,180,90,.9); }
.pack-skin-fastfood .pack-name { color: #fff8ea; text-shadow: 0 0 14px rgba(255,150,50,.85), 0 2px 8px rgba(0,0,0,.65); }
.pack-skin-fastfood .pack-sub { color: #f5cf9a; }
/* pack skin "movies": opening night — red velvet curtain, glowing marquee bulbs, film-strip crimps, gold spotlight glow (no image files) */
.pack-skin-movies .pack-top {
  background:
    radial-gradient(circle, #fff7d6 0 5px, rgba(255,205,110,.5) 6px, rgba(255,205,110,0) 12px) 0 4px / 30px 22px repeat-x,
    conic-gradient(from 180deg at 50% -30%, transparent 0deg, rgba(255,225,170,.20) 5deg, transparent 11deg, transparent 17deg, rgba(255,225,170,.12) 22deg, transparent 28deg),
    radial-gradient(ellipse 70% 40% at 50% -6%, rgba(255,214,140,.30), transparent 70%),
    repeating-linear-gradient(115deg, rgba(0,0,0,.18) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, #8a1420 0%, #5c0a13 45%, #38050a 100%);
}
.pack-skin-movies .pack-body {
  background:
    radial-gradient(ellipse 65% 26% at 50% 110%, rgba(212,175,55,.28), transparent 70%),
    linear-gradient(115deg, transparent 44%, rgba(255,205,120,.10) 47%, transparent 50%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, #1a0d0f 0%, #0d0608 60%, #070405 100%);
}
.pack-skin-movies .pack-body::before {
  background:
    radial-gradient(ellipse 85% 36% at 50% -8%, rgba(255,220,160,.22), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 60%); mask-image: linear-gradient(180deg, #000 0%, transparent 60%);
}
.pack-skin-movies .crimp {
  background:
    repeating-linear-gradient(90deg, transparent 0 9px, rgba(0,0,0,.75) 9px 21px, transparent 21px 33px),
    linear-gradient(180deg, #3a3a40 0%, #232327 100%);
}
.pack-skin-movies .crimp.bottom {
  background:
    repeating-linear-gradient(90deg, transparent 0 9px, rgba(0,0,0,.8) 9px 21px, transparent 21px 33px),
    linear-gradient(180deg, #232327 0%, #121214 100%);
}
.pack-skin-movies .pack-top::after { border-bottom-color: rgba(255,214,140,.6); }
.pack-skin-movies .pack-emblem {
  background: radial-gradient(circle at 35% 30%, rgba(255,225,170,.35), rgba(30,10,4,.88) 72%);
  border-color: rgba(255,214,140,.75);
  box-shadow: 0 0 28px rgba(255,190,100,.55), inset 0 0 18px rgba(255,200,110,.30);
  text-shadow: 0 0 16px rgba(255,200,110,.9);
}
.pack-skin-movies .pack-name { color: #fff3d6; text-shadow: 0 0 14px rgba(255,180,90,.85), 0 2px 8px rgba(0,0,0,.65); }
.pack-skin-movies .pack-sub { color: #e8c9a0; }
/* pack skin "music": encore — a vinyl record under stage lights; groove rings, magenta/cyan light beams, gold label glow (no image files) */
.pack-skin-music .pack-top {
  background:
    repeating-radial-gradient(circle at 50% 100%, rgba(255,255,255,.06) 0 2px, transparent 2px 7px),
    conic-gradient(from 180deg at 50% -20%, transparent 0deg, rgba(255,80,200,.20) 6deg, transparent 12deg, transparent 20deg, rgba(80,200,255,.15) 26deg, transparent 32deg),
    radial-gradient(ellipse 60% 35% at 50% 108%, rgba(255,200,90,.22), transparent 70%),
    linear-gradient(180deg, #150a24 0%, #0d0618 60%, #080410 100%);
}
.pack-skin-music .pack-body {
  background:
    repeating-radial-gradient(circle at 50% -12%, rgba(255,255,255,.04) 0 2px, transparent 2px 7px),
    radial-gradient(ellipse 70% 30% at 50% 0%, rgba(255,80,200,.12), transparent 70%),
    linear-gradient(180deg, #0d0618 0%, #070310 100%);
}
.pack-skin-music .pack-body::before {
  background:
    radial-gradient(ellipse 85% 30% at 50% 0%, rgba(150,110,255,.20), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 55%); mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
}
.pack-skin-music .crimp {
  background:
    radial-gradient(circle, #080410 3px, transparent 4px) 0 0 / 18px 16px repeat-x,
    linear-gradient(180deg, #2a1545 0%, #1a0d2b 100%);
}
.pack-skin-music .crimp.bottom {
  background:
    radial-gradient(circle, #080410 3px, transparent 4px) 0 0 / 18px 16px repeat-x,
    linear-gradient(180deg, #1a0d2b 0%, #0d0616 100%);
}
.pack-skin-music .pack-top::after { border-bottom-color: rgba(255,120,210,.55); }
.pack-skin-music .pack-emblem {
  background:
    radial-gradient(circle, #f0c75e 0 10px, #a87f2a 11px 13px, transparent 14px),
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.07) 0 2px, transparent 2px 5px),
    radial-gradient(circle at 50% 50%, #232327 0, #0a0a0c 70%);
  border-color: rgba(212,164,55,.8);
  box-shadow: 0 0 26px rgba(255,80,200,.5), inset 0 0 14px rgba(0,0,0,.8);
  text-shadow: 0 0 16px rgba(255,200,110,.9);
}
.pack-skin-music .pack-name { color: #ffe9f6; text-shadow: 0 0 14px rgba(255,80,200,.85), 0 2px 8px rgba(0,0,0,.65); }
.pack-skin-music .pack-sub { color: #c9a8e0; }
/* pack skin "f1": night Grand Prix — carbon-fiber foil, red/white curb stripes, neon speed streaks, podium-gold glow (no image files) */
.pack-skin-f1 .pack-top {
  background:
    linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 30%, rgba(8,8,10,.9) 70%, #060608 100%),
    conic-gradient(from 180deg at 50% -22%, transparent 0deg, rgba(255,240,240,.14) 4deg, transparent 9deg, transparent 15deg, rgba(255,240,240,.09) 19deg, transparent 24deg),
    radial-gradient(ellipse 80% 38% at 50% -4%, rgba(255,235,235,.28), transparent 70%),
    repeating-linear-gradient(90deg, #d90429 0 16px, #f2f2f2 16px 32px) 0 100% / 100% 10px no-repeat,
    repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #1b1b1f 0%, #0c0c0e 100%);
}
.pack-skin-f1 .pack-body {
  background:
    radial-gradient(ellipse 62% 24% at 50% 108%, rgba(212,175,55,.20), transparent 70%),
    linear-gradient(115deg, transparent 42%, rgba(217,4,41,.28) 46%, transparent 50%, transparent 72%, rgba(255,255,255,.10) 76%, transparent 80%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.35) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, #141416 0%, #0a0a0c 60%, #050506 100%);
}
.pack-skin-f1 .pack-body::before {
  background:
    radial-gradient(ellipse 85% 34% at 50% -8%, rgba(255,240,240,.30), transparent 70%),
    conic-gradient(from 180deg at 50% -24%, transparent 0deg, rgba(255,255,255,.10) 4deg, transparent 9deg, transparent 15deg, rgba(255,255,255,.06) 19deg, transparent 24deg);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 60%); mask-image: linear-gradient(180deg, #000 0%, transparent 60%);
}
.pack-skin-f1 .crimp { background: repeating-linear-gradient(100deg, rgba(0,0,0,.5) 0 4px, rgba(217,4,41,.42) 4px 6px, rgba(255,255,255,.12) 6px 9px); }
.pack-skin-f1 .crimp.bottom { background: repeating-linear-gradient(100deg, rgba(0,0,0,.62) 0 4px, rgba(130,2,24,.5) 4px 6px, rgba(255,255,255,.07) 6px 9px); }
.pack-skin-f1 .pack-top::after { border-bottom-color: rgba(255,255,255,.55); }
.pack-skin-f1 .pack-emblem { background: radial-gradient(circle at 35% 30%, rgba(255,120,120,.40), rgba(26,6,8,.84) 72%);
  border-color: rgba(255,140,140,.7); box-shadow: 0 0 28px rgba(217,4,41,.65), inset 0 0 18px rgba(255,140,140,.32); text-shadow: 0 0 16px rgba(255,150,150,.9); }
.pack-skin-f1 .pack-name { color: #ffffff; text-shadow: 0 0 14px rgba(217,4,41,.9), 0 2px 8px rgba(0,0,0,.65); }
.pack-skin-f1 .pack-sub { color: #f3c9c9; }
/* pack skin "tech": midnight circuit board — deep navy PCB, glowing cyan traces, gold pin accents (no image files) */
.pack-skin-tech .pack-top {
  background:
    linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 32%, rgba(4,8,20,.92) 72%, #05070f 100%),
    radial-gradient(ellipse 85% 45% at 50% -8%, rgba(0,229,255,.32), transparent 70%),
    radial-gradient(circle at 82% 18%, rgba(0,229,255,.85) 0 3px, rgba(0,229,255,.25) 3px 7px, transparent 8px),
    radial-gradient(circle at 14% 34%, rgba(255,183,0,.9) 0 3px, rgba(255,183,0,.25) 3px 7px, transparent 8px),
    radial-gradient(circle at 68% 52%, rgba(0,229,255,.7) 0 2px, rgba(0,229,255,.2) 2px 6px, transparent 7px),
    repeating-linear-gradient(45deg, transparent 0 30px, rgba(0,229,255,.09) 30px 32px, transparent 32px 62px),
    repeating-linear-gradient(0deg, rgba(0,229,255,.07) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(90deg, rgba(0,229,255,.07) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(90deg, #ffb700 0 12px, #0a0f1e 12px 26px) 0 100% / 100% 8px no-repeat,
    linear-gradient(180deg, #0d1526 0%, #070b16 100%);
}
.pack-skin-tech .pack-body {
  background:
    radial-gradient(ellipse 65% 26% at 50% 108%, rgba(255,183,0,.20), transparent 70%),
    linear-gradient(115deg, transparent 42%, rgba(0,229,255,.20) 47%, transparent 52%, transparent 70%, rgba(255,255,255,.08) 75%, transparent 80%),
    repeating-linear-gradient(0deg, rgba(0,229,255,.05) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(0,229,255,.05) 0 1px, transparent 1px 34px),
    linear-gradient(180deg, #0b1222 0%, #070b16 55%, #04060d 100%);
}
.pack-skin-tech .pack-body::before {
  background:
    radial-gradient(ellipse 85% 34% at 50% -8%, rgba(0,229,255,.28), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 60%); mask-image: linear-gradient(180deg, #000 0%, transparent 60%);
}
.pack-skin-tech .crimp { background: repeating-linear-gradient(100deg, rgba(0,0,0,.5) 0 4px, rgba(0,229,255,.5) 4px 6px, rgba(255,183,0,.4) 6px 8px, rgba(255,255,255,.10) 8px 11px); }
.pack-skin-tech .crimp.bottom { background: repeating-linear-gradient(100deg, rgba(0,0,0,.62) 0 4px, rgba(0,160,180,.45) 4px 6px, rgba(180,120,0,.4) 6px 8px, rgba(255,255,255,.06) 8px 11px); }
.pack-skin-tech .pack-top::after { border-bottom-color: rgba(0,229,255,.6); }
.pack-skin-tech .pack-emblem { background: radial-gradient(circle at 35% 30%, rgba(0,229,255,.35), rgba(4,10,22,.88) 72%);
  border-color: rgba(0,229,255,.7); box-shadow: 0 0 28px rgba(0,229,255,.55), inset 0 0 18px rgba(0,229,255,.28); text-shadow: 0 0 16px rgba(0,229,255,.9); }
.pack-skin-tech .pack-name { color: #ffffff; text-shadow: 0 0 14px rgba(0,229,255,.9), 0 2px 8px rgba(0,0,0,.65); }
.pack-skin-tech .pack-sub { color: #bfefff; }
/* pack skin "birds": dawn chorus — first light over the treeline, iridescent starling-feather sheen (no image files) */
.pack-skin-birds .pack-top {
  background:
    linear-gradient(180deg, rgba(6,8,20,.55) 0%, rgba(6,8,20,0) 34%, rgba(20,16,40,.5) 62%, rgba(10,8,18,.92) 100%),
    conic-gradient(from 180deg at 50% 108%, transparent 0deg, rgba(255,220,160,.10) 6deg, transparent 12deg, transparent 24deg, rgba(255,220,160,.07) 30deg, transparent 36deg),
    radial-gradient(ellipse 90% 55% at 50% 108%, rgba(255,196,110,.55), rgba(255,150,80,.18) 55%, transparent 75%),
    radial-gradient(ellipse 34% 20% at 50% 96%, rgba(255,236,190,.85), transparent 70%),
    linear-gradient(180deg, #0b1030 0%, #2b3a6e 38%, #7a5a8c 62%, #e8935a 82%, #f7c873 100%);
}
.pack-skin-birds .pack-body {
  background:
    linear-gradient(115deg, transparent 38%, rgba(120,220,190,.14) 46%, rgba(190,130,255,.12) 52%, transparent 60%),
    linear-gradient(65deg, transparent 55%, rgba(255,200,120,.10) 68%, transparent 80%),
    radial-gradient(ellipse 70% 30% at 50% 0%, rgba(64,160,150,.25), transparent 70%),
    repeating-linear-gradient(173deg, rgba(255,255,255,.045) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(173deg, rgba(0,0,0,.28) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #123b3c 0%, #0b2426 45%, #060f10 100%);
}
.pack-skin-birds .pack-body::before {
  background:
    radial-gradient(ellipse 85% 34% at 50% -8%, rgba(255,214,150,.28), transparent 70%),
    conic-gradient(from 180deg at 50% -24%, transparent 0deg, rgba(255,255,255,.10) 4deg, transparent 9deg, transparent 15deg, rgba(255,255,255,.06) 19deg, transparent 24deg);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 60%); mask-image: linear-gradient(180deg, #000 0%, transparent 60%);
}
.pack-skin-birds .crimp { background: repeating-linear-gradient(100deg, rgba(0,0,0,.5) 0 4px, rgba(232,147,90,.5) 4px 6px, rgba(255,255,255,.12) 6px 9px); }
.pack-skin-birds .crimp.bottom { background: repeating-linear-gradient(100deg, rgba(0,0,0,.62) 0 4px, rgba(140,80,30,.55) 4px 6px, rgba(255,255,255,.07) 6px 9px); }
.pack-skin-birds .pack-top::after { border-bottom-color: rgba(255,220,170,.6); }
.pack-skin-birds .pack-emblem { background: radial-gradient(circle at 35% 30%, rgba(255,210,140,.45), rgba(30,18,8,.85) 72%);
  border-color: rgba(255,200,130,.7); box-shadow: 0 0 28px rgba(232,147,90,.65), inset 0 0 18px rgba(255,200,130,.32); text-shadow: 0 0 16px rgba(255,210,140,.9); }
.pack-skin-birds .pack-name { color: #ffffff; text-shadow: 0 0 14px rgba(232,147,90,.9), 0 2px 8px rgba(0,0,0,.65); }
.pack-skin-birds .pack-sub { color: #f7ddba; }
/* pack skin "sea": deep blue foil, a dive from the sunlit reef (top) down to the midnight zone (bottom):
   light rays fading with depth, rising bubbles, a few bioluminescent specks in the dark (no image files) */
.pack-skin-sea .pack-top {
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.07) 0 2px, transparent 2px 7px), linear-gradient(180deg, #8beaf5 0%, #3cc6e6 100%);
}
.pack-skin-sea .pack-body {
  background:
    radial-gradient(circle at 22% 30%, rgba(255,255,255,.75) 0 1.6px, rgba(200,245,255,.25) 2.4px, transparent 3.4px),
    radial-gradient(circle at 26% 37%, rgba(255,255,255,.6) 0 1px, transparent 2.4px),
    radial-gradient(circle at 81% 21%, rgba(255,255,255,.7) 0 2.2px, rgba(200,245,255,.22) 3px, transparent 4.2px),
    radial-gradient(circle at 76% 31%, rgba(255,255,255,.55) 0 1.2px, transparent 2.6px),
    radial-gradient(circle at 86% 52%, rgba(220,250,255,.45) 0 1.4px, transparent 2.8px),
    radial-gradient(circle at 15% 58%, rgba(220,250,255,.35) 0 1px, transparent 2.4px),
    radial-gradient(circle at 18% 84%, #8ffcff 0 1.1px, rgba(80,255,230,.45) 2.2px, transparent 5px),
    radial-gradient(circle at 70% 91%, #b4ffda 0 1px, rgba(90,255,190,.4) 2px, transparent 4.6px),
    radial-gradient(circle at 88% 79%, #9fe8ff 0 .9px, rgba(90,200,255,.4) 1.8px, transparent 4px),
    radial-gradient(circle at 40% 95%, #8ffcff 0 .8px, transparent 3.4px),
    repeating-linear-gradient(115deg, rgba(255,255,255,.045) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #3cc6e6 0%, #1592cf 16%, #0b62ad 36%, #0a3f86 56%, #071f55 76%, #030a22 92%, #01040f 100%);
}
.pack-skin-sea .pack-body::before {
  background:
    conic-gradient(from 168deg at 48% -14%, transparent 0deg, rgba(255,255,255,.20) 3deg, transparent 7deg, transparent 12deg, rgba(255,255,255,.14) 15deg, transparent 19deg,
      transparent 23deg, rgba(255,255,255,.18) 25deg, transparent 29deg, transparent 33deg, rgba(255,255,255,.10) 36deg, transparent 40deg),
    radial-gradient(ellipse 70% 30% at 50% 0%, rgba(230,255,255,.35), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 30%, transparent 58%); mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 30%, transparent 58%);
}
.pack-skin-sea .crimp { background: repeating-linear-gradient(90deg, rgba(0,40,80,.28) 0 3px, rgba(255,255,255,.22) 3px 6px); }
.pack-skin-sea .crimp.bottom { background: repeating-linear-gradient(90deg, rgba(0,0,0,.45) 0 3px, rgba(110,200,255,.16) 3px 6px); }
.pack-skin-sea .pack-top::after { border-bottom-color: rgba(255,255,255,.6); }
.pack-skin-sea .pack-emblem { background: radial-gradient(circle at 35% 28%, rgba(160,235,255,.45), rgba(6,40,95,.78) 70%);
  border-color: rgba(170,235,255,.75); box-shadow: 0 0 26px rgba(60,190,255,.55), inset 0 0 18px rgba(170,240,255,.35); text-shadow: 0 0 14px rgba(140,230,255,.9); }
.pack-skin-sea .pack-name { color: #f3fbff; text-shadow: 0 0 14px rgba(60,170,255,.7), 0 2px 8px rgba(0,0,0,.7); }
.pack-skin-sea .pack-sub { color: #a9dcff; }
/* pack skin "nfl": night game under the lights — floodlit field-turf foil, faint yard lines, championship-gold glow (no image files) */
.pack-skin-nfl .pack-top {
  background:
    linear-gradient(180deg, rgba(0,0,0,.40) 0%, rgba(0,0,0,0) 32%, rgba(2,12,6,.88) 72%, #020805 100%),
    conic-gradient(from 180deg at 50% -22%, transparent 0deg, rgba(255,252,230,.12) 4deg, transparent 9deg, transparent 15deg, rgba(255,252,230,.08) 19deg, transparent 24deg),
    radial-gradient(ellipse 78% 36% at 50% -4%, rgba(255,250,220,.30), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 2px, transparent 2px 46px),
    linear-gradient(180deg, #0f4a26 0%, #07220f 100%);
}
.pack-skin-nfl .pack-body {
  background:
    radial-gradient(ellipse 60% 22% at 50% 108%, rgba(212,175,55,.22), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 2px, transparent 2px 46px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 3px, transparent 3px 9px),
    linear-gradient(180deg, #0a3520 0%, #04150b 62%, #020a05 100%);
}
.pack-skin-nfl .pack-body::before {
  background:
    radial-gradient(ellipse 85% 34% at 50% -8%, rgba(255,252,235,.30), transparent 70%),
    conic-gradient(from 180deg at 50% -24%, transparent 0deg, rgba(255,255,255,.10) 4deg, transparent 9deg, transparent 15deg, rgba(255,255,255,.06) 19deg, transparent 24deg);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 60%); mask-image: linear-gradient(180deg, #000 0%, transparent 60%);
}
.pack-skin-nfl .crimp { background: repeating-linear-gradient(100deg, rgba(0,0,0,.5) 0 4px, rgba(212,175,55,.34) 4px 6px, rgba(255,255,255,.12) 6px 9px); }
.pack-skin-nfl .crimp.bottom { background: repeating-linear-gradient(100deg, rgba(0,0,0,.62) 0 4px, rgba(120,90,20,.45) 4px 6px, rgba(255,255,255,.07) 6px 9px); }
.pack-skin-nfl .pack-top::after { border-bottom-color: rgba(255,255,255,.55); }
.pack-skin-nfl .pack-emblem { background: radial-gradient(circle at 35% 30%, rgba(255,225,130,.40), rgba(20,14,4,.82) 72%);
  border-color: rgba(255,215,120,.7); box-shadow: 0 0 28px rgba(212,175,55,.6), inset 0 0 18px rgba(255,215,120,.32); text-shadow: 0 0 16px rgba(255,220,130,.9); }
.pack-skin-nfl .pack-name { color: #ffffff; text-shadow: 0 0 14px rgba(212,175,55,.85), 0 2px 8px rgba(0,0,0,.65); }
.pack-skin-nfl .pack-sub { color: #e8d9a8; }
/* pack skin "air": gunmetal + woodland-camo foil, brushed-metal crimp, contrails and a green HUD scope around the jet emblem (no image files) */
.pack-skin-air .pack-top {
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 3px), linear-gradient(180deg, #a3adb6 0%, #6c7680 55%, #4a535c 100%);
}
.pack-skin-air .pack-body {
  background:
    linear-gradient(118deg, transparent 30%, rgba(255,255,255,.16) 41%, transparent 47%, transparent 62%, rgba(255,255,255,.07) 68%, transparent 73%),
    linear-gradient(180deg, rgba(20,26,32,0) 55%, rgba(14,18,22,.65) 100%),
    repeating-linear-gradient(0deg, transparent 0 23%, rgba(0,0,0,.28) 23% calc(23% + 1px), rgba(255,255,255,.08) calc(23% + 1px) calc(23% + 2px), transparent calc(23% + 2px) 25%),
    radial-gradient(ellipse 22% 12% at 18% 14%, #2d3424 96%, transparent 100%),
    radial-gradient(ellipse 30% 13% at 78% 24%, #8b8458 95%, transparent 100%),
    radial-gradient(ellipse 18% 20% at 88% 58%, #2d3424 95%, transparent 100%),
    radial-gradient(ellipse 34% 11% at 30% 66%, #2d3424 95%, transparent 100%),
    radial-gradient(ellipse 26% 14% at 62% 84%, #8b8458 95%, transparent 100%),
    radial-gradient(ellipse 20% 10% at 12% 90%, #8b8458 95%, transparent 100%),
    radial-gradient(ellipse 28% 18% at 26% 36%, #3f4b2c 96%, transparent 100%),
    radial-gradient(ellipse 30% 16% at 74% 46%, #56633a 96%, transparent 100%),
    radial-gradient(ellipse 24% 15% at 50% 6%, #56633a 95%, transparent 100%),
    radial-gradient(ellipse 30% 14% at 90% 92%, #3f4b2c 95%, transparent 100%),
    linear-gradient(160deg, #6a7448 0%, #5b6540 50%, #4a5236 100%);
}
.pack-skin-air .pack-body::before {
  background:
    linear-gradient(152deg, transparent 0 18%, rgba(255,255,255,.55) 18.6%, rgba(255,255,255,.12) 19.6%, transparent 21%),
    linear-gradient(152deg, transparent 0 23%, rgba(255,255,255,.35) 23.4%, rgba(255,255,255,.08) 24.3%, transparent 25.6%),
    repeating-radial-gradient(circle at 50% 41%, transparent 0 23%, rgba(140,255,170,.32) 23% calc(23% + 1.5px), transparent calc(23% + 1.5px) 31%),
    radial-gradient(circle at 50% 41%, rgba(120,255,160,.16), transparent 42%);
  -webkit-mask-image: linear-gradient(180deg, #000 0 70%, transparent 92%); mask-image: linear-gradient(180deg, #000 0 70%, transparent 92%);
}
.pack-skin-air .crimp { background: repeating-linear-gradient(90deg, rgba(0,0,0,.32) 0 3px, rgba(255,255,255,.22) 3px 6px); }
.pack-skin-air .crimp.bottom { background: repeating-linear-gradient(90deg, rgba(0,0,0,.5) 0 3px, rgba(190,200,210,.22) 3px 6px); }
.pack-skin-air .pack-top::after { border-bottom-color: rgba(230,236,240,.55); }
.pack-skin-air .pack-emblem { background: radial-gradient(circle at 50% 45%, rgba(40,70,48,.55), rgba(10,18,14,.88) 72%);
  border-color: rgba(150,255,180,.7); box-shadow: 0 0 0 3px rgba(40,46,52,.85), 0 0 22px rgba(110,255,150,.45), inset 0 0 18px rgba(120,255,160,.3); text-shadow: 0 0 12px rgba(150,255,180,.8); }
/* the set's emoji emblem is swapped for a fighter-jet silhouette (inline SVG mask), glowing like a HUD */
.pack-skin-air .pack-emblem { font-size: 0; }
.pack-skin-air .pack-emblem::after { content: ''; position: absolute; inset: 15%; background: linear-gradient(180deg, #f2f7ee, #b9c8b2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 3 L53.5 15 L55 33 L90 58 L90 65 L56 57 L56.5 74 L69 84 L69 90 L52 85.5 L50 92 L48 85.5 L31 90 L31 84 L43.5 74 L44 57 L10 65 L10 58 L45 33 L46.5 15 Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 3 L53.5 15 L55 33 L90 58 L90 65 L56 57 L56.5 74 L69 84 L69 90 L52 85.5 L50 92 L48 85.5 L31 90 L31 84 L43.5 74 L44 57 L10 65 L10 58 L45 33 L46.5 15 Z'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 0 6px rgba(140,255,170,.75)); }
.pack-skin-air .pack-name { color: #f1f3ea; letter-spacing: .04em; text-shadow: 0 2px 0 rgba(0,0,0,.55), 0 0 12px rgba(0,0,0,.6); }
.pack-skin-air .pack-sub { color: #d9dfc6; text-shadow: 0 1px 2px rgba(0,0,0,.7); }

.pack.float { --pw: 220px; animation: float 4s ease-in-out infinite; }
.pack.ready { --pw: 250px; cursor: pointer; animation: dropIn .5s cubic-bezier(.2,1.4,.4,1), wiggle 2.4s 0.6s ease-in-out infinite; }
.pack.ready:hover { animation: shakeSmall .35s ease-in-out infinite; }
.pack.tearing { --pw: 250px; animation: shakeHard .4s ease-in-out; }
.pack.tearing .pack-top { transform: translate(60px, -90px) rotate(28deg); opacity: 0; transition-delay: .3s; }
.pack.tearing .pack-body::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: #fff; box-shadow: 0 0 30px 12px rgba(255,255,255,.9); animation: slitGlow .8s .3s both; }
.pack.gone .pack-body { transform: translateY(120%) rotate(-6deg); opacity: 0; }

/* ===================================================== stage */
.stage { min-height: 700px; padding: 26px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; position: relative; overflow: hidden; }
.stage::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, rgba(124,108,255,.18), transparent 60%); pointer-events: none; }
.stage.shake { animation: shakeHard .5s; }
.stage-idle { display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; }
.idle-msg { color: var(--muted); max-width: 420px; line-height: 1.6; } .idle-msg b { color: var(--text); }
.stage-pack { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.pack-wrap { display: flex; justify-content: center; width: 100%; }
.tear-hint { color: var(--muted); animation: pulse 1.6s ease-in-out infinite; font-weight: 600; }
.reveal-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; width: 100%; max-width: 1000px; }
.reveal-grid .card { width: var(--cardw, clamp(108px, calc((100% - 64px) / 5), 184px)); cursor: pointer; }
/* While the packs view is being re-shown, showView tags the grid .no-anim for
   one frame so the reveal cards' deal/flip animations don't replay on return. */
#revealGrid.no-anim .card, #revealGrid.no-anim .card-inner, #revealGrid.no-anim .face { animation: none !important; transition: none !important; }
/* Reveal cards: the outer corner radius scales with the card, like every other
   card measurement (the .cf panel radius and the rarity frame strip are both
   3.4cqw). The global .card radius is a fixed 12px, tuned at the old 184px
   desktop width, where 12px is the concentric sum (3.4cqw panel + 3.4cqw
   frame). At the solver's smaller widths (70-123px) that fixed 12px balloons
   to 10-17% of the card while the panel corner shrinks to ~3px, so the frame
   reads as a separate, rounder shell floating around the face. 6.5% / 4.65%
   reproduces 12px at 184x258 and stays concentric at every size (percentages
   resolve against the card's own box; cqw here would resolve against the
   viewport). Per-set shapes keep their own rules: Periodic (later in this
   file) and Calendar (its own sheet, loaded after this one) override this. */
.reveal-grid .card { border-radius: 6.5% / 4.65%; }
/* Square sets keep their 1/1 shape in mixed reveal lines (Jumbled packs
   pull from many sets at once): a flex line is as tall as its tallest
   (portrait) card, and WebKit stretches the square cards to that height,
   discarding their aspect-ratio - Franklin's phone showed a Calendar
   tile at exactly 5/7 (2026-10-21). Opting out of stretch lets the
   ratio rule size them; centering the tile in the line is deliberate.
   Single-set reveals are all one shape, so this changes nothing there. */
.reveal-grid .card[data-set="calendar"],
.reveal-grid .card[data-set="periodic"] { align-self: center; }
.stage-controls { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.stage-summary { color: var(--muted); text-align: center; } .stage-summary b { color: var(--text); }
.stage-summary b[class^=rt-] { color: inherit; } .stage-summary .rt-rare { color: var(--c-rare); } .stage-summary .rt-epic { color: var(--c-epic); } .stage-summary .rt-legendary { color: var(--c-legendary); } .stage-summary .rt-uncommon { color: var(--c-uncommon); } .stage-summary .rt-common { color: var(--c-common); }
.stage-summary .rt-chase { color: transparent; }

/* ===== Open Packs single panel: stage + control strip under it (2026-10-16) =====
   The old 'Your packs' sidebar is gone; the stage reclaims its 300px and keeps
   its full size so a standard 9-card reveal renders at today's size in this
   same box. Desktop stage min-height is 700px (raised from 620) with its old
   panel padding restored (26px top), so the whole reveal — grid, summary and
   Done — fits from the start: the control strip below never moves between
   idle / tear / reveal (Quick Open stays put for spam-clicking), and the top
   row's overhanging NEW badges (-8px) clear the stage's clipped top edge. */
.packs-panel { padding: 0; overflow: hidden; }
.packs-controls { border-top: 1px solid var(--line); padding: 16px 20px 18px; display: flex; flex-direction: column; align-items: center; gap: 12px; background: rgba(0,0,0,.14); }
.packs-controls-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; max-width: 700px; }
.packs-controls-row #openBtn { width: auto; flex: 1 1 300px; max-width: 350px; min-width: 230px; }
.packs-controls-row #quickOpenBtn { flex: 1 1 210px; max-width: 250px; min-width: 190px; padding-top: 13px; padding-bottom: 13px; }
.packs-controls-row .odds-row { flex: 1 1 100%; display: flex; justify-content: center; }
.packs-controls-row .btn.ghost { border: 0; background: transparent; box-shadow: none; color: var(--muted); padding: 4px 12px; }
.packs-controls-row .btn.ghost:hover { background: transparent; color: var(--text); }
.packs-controls .dev-box { width: 100%; max-width: 520px; }
/* Unopened-count badge, moved from the deleted sidebar mini-pack onto the stage pack */
.idle-pack { position: relative; }
.stage-badge { top: -12px; right: -14px; }
/* Playing Cards packs hold 6 cards: reveal 3+3 on desktop instead of 5+1.
   Scoped by the .playing-3x3 class buildGrid() sets only for set 'playing';
   9-card, 5-card (States) and 3-card (Periodic) grids are untouched.
   Mechanism: cap the grid at 3 full-size cards wide (3*184 + 2*16 gap = 584px)
   and size cards in thirds, so exactly 3 fit per row at today's 184px size;
   below 584px the thirds shrink proportionally, like the normal grid. */
.reveal-grid.playing-3x3 { max-width: 584px; }
.reveal-grid.playing-3x3 .card { width: var(--cardw, calc((100% - 32px) / 3)); }
@media (max-width: 560px) {
  .reveal-grid.playing-3x3 .card { width: var(--cardw, calc(33.3% - 8px)); }  /* match today's phone rule: already 3-across */
  .packs-controls { padding: 14px 14px 16px; }
  .packs-controls-row #openBtn, .packs-controls-row #quickOpenBtn { min-width: 0; flex: 1 1 100%; }
}
/* Phones: pin the pack controls to the bottom of the screen while the
   packs panel is in view, so "Open next pack" never hides below a
   full 9-card reveal. Desktop layout is untouched. */
@media (max-width: 700px) {
  .packs-controls { position: sticky; bottom: 0; z-index: 6; background: var(--panel); box-shadow: 0 -8px 22px rgba(0,0,0,.35); }
}
/* Collection header: 'Packs opened' line (relocated from Open Packs) */
.packs-opened-note { color: var(--muted); font-weight: 600; } .packs-opened-note b { color: var(--text); }

/* ===================================================== card */
.card {
  --rx: 0deg; --ry: 0deg; --mx: 50%;
  position: relative; aspect-ratio: 5/7; container-type: inline-size; border-radius: 5.5cqw;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .25s ease-out, box-shadow .4s;
  border-radius: 12px;
}
.card-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3,1.25,.5,1); border-radius: inherit; }
.face { position: absolute; inset: 0; border-radius: inherit; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.card.flippable { perspective: 1100px; }
.card.flippable .card-inner { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
.card.flippable .face { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.card.flippable .front { transform: rotateY(180deg); }
.card.flippable .back { transform: rotateY(0deg); }
.card.flippable.flipped .card-inner { transform: rotateY(180deg); }
/* Belt and braces for browsers where backface-visibility leaks: swap which face is
   visible exactly at the mid-point of the 0.7s flip, when the card is edge-on. */
.card.flippable .front { visibility: hidden; transition: visibility 0s linear .3s; }
.card.flippable .back { visibility: visible; transition: visibility 0s linear .3s; }
.card.flippable.flipped .front { visibility: visible; }
.card.flippable.flipped .back { visibility: hidden; }
.card.deal { animation: deal .55s cubic-bezier(.2,1.3,.4,1) both; }

/* front */
.front { background-color: #12172a; background-image: linear-gradient(155deg, var(--rc), var(--rc2)); padding: 3.4cqw; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.r-chase .front { background-image: conic-gradient(from 200deg, #ff4fa3, #ffb21e, #f5f56a, #38c97f, #12c2e9, #3f8cff, #b35cff, #ff4fa3); }
.r-legendary .front { background-image: linear-gradient(155deg, #ffe08a, #ffb21e 35%, #b25c00 70%, #ffd166); }
.cf { position: relative; height: 100%; display: flex; flex-direction: column; gap: 2cqw; padding: 2.6cqw; background-color: #12172a; background-image: linear-gradient(180deg, #151a2b, #0f1322); border-radius: 3.4cqw; }
.cf-top { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; }
.cf-name { font-weight: 800; font-size: 7.2cqw; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-name-wrap { white-space: normal; overflow-wrap: break-word; line-height: 1.08; min-width: 0;   /* 2 lines at the 70% size; */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }       /* ellipsis only past 2 lines */
.cf-gem { flex: none; width: 4.6cqw; height: 4.6cqw; transform: rotate(45deg); background: var(--rc); box-shadow: 0 0 2.5cqw var(--rc); border-radius: 1cqw; }
.r-chase .cf-gem { background: conic-gradient(#ff4fa3, #ffb21e, #38c97f, #3f8cff, #b35cff, #ff4fa3); }
.cf-art { position: relative; aspect-ratio: 100/72; border-radius: 2.4cqw; overflow: hidden; border: .9cqw solid rgba(255,255,255,.16); flex: none; background: var(--art-bg, #000); }
.cf-art svg, .cf-art img { display: block; width: 100%; height: 100%; object-fit: var(--art-fit, cover); }
.cf-type { display: flex; justify-content: space-between; gap: 2cqw; font-size: 4.3cqw; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding-bottom: 1.4cqw; border-bottom: .4cqw solid rgba(255,255,255,.1); }
.cf-sub { color: #b9c2d8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-rar { color: var(--rc); flex: none; }
.r-chase .cf-rar { background: linear-gradient(90deg,#ff4fa3,#ffb21e,#38c97f,#3f8cff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cf-details { flex: 1; min-height: 0; overflow: hidden; font-size: 4.6cqw; line-height: 1.32; color: #cfd6e6; background: rgba(255,255,255,.045); border: .4cqw solid rgba(255,255,255,.07); border-radius: 2.2cqw; padding: 2.2cqw 2.6cqw; font-style: italic;
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent); mask-image: linear-gradient(180deg, #000 78%, transparent); }
.cf-foot { display: flex; justify-content: space-between; align-items: center; font-size: 3.8cqw; color: #8c96ad; font-weight: 700; letter-spacing: .08em; }
.cf-foot .cf-code.code-l5, .cf-foot .cf-code.code-l6 { letter-spacing: .03em; }

/* Periodic Table set: the card IS the element tile — literally. Square,
   full-bleed tile art, no text chrome at all (no title, subtitle, details,
   footer, or rarity frame). Name/subtitle/details/rarity stay in the card
   modal. NEW / holo / variant badges and holo shimmer still overlay.
   The card keeps a rarity-colored outer glow so rarity reads at a glance,
   and its corner radius is concentric with the tile's white border
   (white border: 9.67% radius at 4% inset -> card edge 13.7%). */
.card[data-set="periodic"] { aspect-ratio: 1/1; border-radius: 13.7%;
  box-shadow: 0 0 26px 3px color-mix(in srgb, var(--rc) 55%, transparent); }
.card[data-set="periodic"] .front { padding: 0; background: #000; }
.card[data-set="periodic"] .cf { padding: 0; gap: 0; background: #000; border-radius: inherit; overflow: hidden; }
.card[data-set="periodic"] .cf-top,
.card[data-set="periodic"] .cf-type,
.card[data-set="periodic"] .cf-details,
.card[data-set="periodic"] .cf-foot { display: none; }
.card[data-set="periodic"] .cf-art { flex: 1 1 auto; aspect-ratio: auto; border: 0; border-radius: 0; background: #000; }
/* Face-down, the back's inner frame (.cb) must curve with the card edge:
   concentric radius = card radius 13.7% - the back's 4cqw padding = 9.7cqw
   (the generic .cb radius, 3.5cqw, is far too tight at this card radius). */
.card[data-set="periodic"] .cb { border-radius: 9.7cqw; }
/* ...but while a Periodic card sits face-down in the pack reveal, the rarity
   glow would spoil the flip — it only appears once the card is flipped
   (collection/modal renders are not flippable, so they keep the glow). */
.card.flippable:not(.flipped)[data-set="periodic"] { box-shadow: none; }
.foil { background: linear-gradient(90deg,#ff9bd2,#9be7ff,#fff79b); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* holo */
.card.holo .front::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; mix-blend-mode: color-dodge; opacity: .75;
  background:
    radial-gradient(circle at var(--mx) 30%, rgba(255,255,255,.35), transparent 40%),
    linear-gradient(115deg, transparent 18%, rgba(255,70,190,.55) 30%, rgba(60,220,255,.55) 42%, rgba(255,240,90,.55) 54%, rgba(120,255,160,.5) 64%, transparent 78%);
  background-size: 100% 100%, 260% 260%; animation: holo 4.5s ease-in-out infinite;
}
.card.holo .front::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; border-radius: inherit; opacity: .35; mix-blend-mode: overlay;
  background-image: radial-gradient(rgba(255,255,255,.9) 1px, transparent 1.4px); background-size: 7cqw 7cqw; animation: twinkle 2.2s ease-in-out infinite;
}

/* numbered variants: rainbow border, amped holo, serial badge */
/* The frame is a gradient border painted on the card's OWN box (conic
   background clipped to the border area behind a transparent border), so
   no layer ever paints outside the card's border-radius. The old ::after
   frame (inset -2.5px + clip-path + an animated filter) lost its corner
   shaping on iOS Safari and left square flaps past the corners. The hue
   cycle now rotates the conic itself via a registered @property angle;
   engines without @property keep the same ring, static. */
@property --va { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.card.variant {
  border: 2.5px solid transparent;
  background-image: conic-gradient(from var(--va), #ff5f5f, #ffb21e, #f7f75f, #38c97f, #3f8cff, #b35cff, #ff5f5f);
  background-origin: border-box;
  animation: variant-spin 5s linear infinite;
}
@keyframes variant-spin { to { --va: 360deg; } }
.card.variant .front::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; mix-blend-mode: color-dodge;
  background:
    radial-gradient(circle at var(--mx) 30%, rgba(255,255,255,.25), transparent 42%),
    linear-gradient(115deg, transparent 10%, rgba(255,70,190,.34) 24%, rgba(60,220,255,.34) 38%, rgba(255,240,90,.34) 52%, rgba(120,255,160,.32) 64%, rgba(180,120,255,.32) 74%, transparent 88%);
  background-size: 100% 100%, 200% 200%; animation: holo-fast 2.6s ease-in-out infinite;
}
@keyframes holo-fast { 0%, 100% { background-position: 50% 50%, 0% 50%; opacity: .44; } 50% { background-position: 50% 50%, 100% 50%; opacity: .58; } }
.card.variant .front::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; border-radius: inherit; opacity: .19; mix-blend-mode: overlay;
  background-image: radial-gradient(rgba(255,255,255,.9) 1px, transparent 1.6px); background-size: 7cqw 7cqw; animation: twinkle 1.6s ease-in-out infinite;
}
/* One-of-One: solid gold */
.card.vt-oneofone {
  background-image: conic-gradient(from var(--va), #ffd700, #fff3b0, #ffb700, #ffdf5e, #ffd700, #fff3b0, #ffd700);
  box-shadow: 0 0 18px rgba(255,210,102,.55);
  animation-duration: 7.5s;
}
.card.vt-oneofone .front::after {
  background:
    radial-gradient(circle at var(--mx) 30%, rgba(255,255,255,.31), transparent 42%),
    linear-gradient(115deg, transparent 15%, rgba(255,215,0,.34) 30%, rgba(255,243,176,.36) 45%, rgba(255,183,0,.32) 60%, transparent 80%);
  background-size: 100% 100%, 200% 200%; animation: holo-fast 2.2s ease-in-out infinite;
}
/* Prism: crystalline ice-blue refraction */
.card.vt-prism {
  background-image: conic-gradient(from var(--va), #a0e7ff, #ffffff, #7fd4ff, #d0f0ff, #a0e7ff, #ffffff, #a0e7ff);
  animation-duration: 6s;
}
.card.vt-prism .front::after {
  background:
    radial-gradient(circle at var(--mx) 30%, rgba(255,255,255,.34), transparent 42%),
    linear-gradient(115deg, transparent 15%, rgba(160,231,255,.36) 30%, rgba(255,255,255,.36) 45%, rgba(127,212,255,.34) 60%, transparent 80%);
  background-size: 100% 100%, 200% 200%; animation: holo-fast 2s ease-in-out infinite;
}
/* Obsidian: dark volcanic glass with purple sheen */
.card.vt-obsidian::after {
  background: conic-gradient(#3d2463, #7b4ab8, #2d1a4a, #a86ad4, #3d2463, #6b3a9e, #3d2463);
  animation: obsidian-pulse 4s ease-in-out infinite;
}
@keyframes obsidian-pulse { 0%, 100% { filter: brightness(.9); } 50% { filter: brightness(1.3); } }
.card.vt-obsidian .front::after {
  background:
    radial-gradient(circle at var(--mx) 30%, rgba(255,255,255,.4), transparent 42%),
    linear-gradient(115deg, transparent 10%, rgba(139,92,200,.52) 30%, rgba(88,48,140,.55) 50%, rgba(180,120,230,.44) 70%, transparent 90%);
  background-size: 100% 100%, 200% 200%; animation: holo-obsidian 3.2s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes holo-obsidian { 0%, 100% { background-position: 50% 50%, 0% 50%; opacity: .55; } 50% { background-position: 50% 50%, 100% 50%; opacity: .72; } }
/* One-of-One: gold */
.card.vt-oneofone .badge-variant { background: linear-gradient(135deg, #ffd700, #ffb700); color: #1a1a1a; }

/* back */
.back { background: linear-gradient(145deg, var(--p1), var(--p2)); padding: 4cqw; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.cb { position: relative; height: 100%; border-radius: 3.5cqw; border: 1.2cqw solid rgba(255,255,255,.55); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6cqw; overflow: hidden;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 4cqw, transparent 4cqw 8cqw), repeating-linear-gradient(-45deg, rgba(0,0,0,.1) 0 4cqw, transparent 4cqw 8cqw); }
.cb-emblem { width: 46cqw; aspect-ratio: 1; display: grid; place-items: center; transform: rotate(45deg); border-radius: 8cqw; background: rgba(0,0,0,.3); border: 1.4cqw solid rgba(255,255,255,.7); box-shadow: 0 0 6cqw rgba(255,255,255,.35); }
.cb-emblem span { transform: rotate(-45deg); font-weight: 900; font-size: 10cqw; letter-spacing: .1em; }
.cb-emblem span.code-l5 { font-size: 8.4cqw; letter-spacing: .04em; }
.cb-emblem span.code-l6 { font-size: 7.2cqw; letter-spacing: .02em; }
.cb-name { font-weight: 800; font-size: 6cqw; text-transform: uppercase; letter-spacing: .1em; text-align: center; padding: 0 6cqw; text-shadow: 0 2px 6px rgba(0,0,0,.4); }

/* Unowned collection cards: full face, darkened */
.card.unowned { filter: brightness(.38) saturate(.75); }

/* glow after reveal */
.card.glow.r-uncommon { box-shadow: 0 0 14px rgba(56,201,127,.45); }
.card.glow.r-rare { box-shadow: 0 0 22px 2px rgba(63,140,255,.7); }
.card.glow.r-epic { box-shadow: 0 0 30px 6px rgba(179,92,255,.75); animation: glowPulse 2s ease-in-out infinite; --gc: rgba(179,92,255,.75); }
.card.glow.r-legendary { box-shadow: 0 0 40px 10px rgba(255,178,30,.8); animation: glowPulse 1.6s ease-in-out infinite; --gc: rgba(255,178,30,.8); }
.card.glow.r-chase { animation: rainbowGlow 2s linear infinite; }
.card.glow.holo { outline: 2px solid rgba(255,255,255,.35); outline-offset: 3px; }

/* badges */
.badge-new, .badge-count, .badge-holo, .badge-variant { position: absolute; z-index: 3; font-weight: 800; border-radius: 999px; font-size: 11px; padding: 3px 8px; pointer-events: none; box-shadow: 0 3px 10px rgba(0,0,0,.4); }
.badge-new { top: -8px; left: -6px; background: var(--good); color: #062; letter-spacing: .06em; }
.badge-count { top: -8px; right: -6px; background: #fff; color: #111; }
.badge-holo { bottom: -8px; right: -6px; background: linear-gradient(90deg,#ff9bd2,#9be7ff,#fff79b); color: #222; }
/* variant serial stays hidden until the card is flipped (pack reveal) */
.flippable:not(.flipped) .badge-variant, .flippable:not(.flipped) .misprint-void { display: none; }
/* the frame stays hidden pre-flip via background-image only — the spin animation
   must keep running: starting it in the same style change as the flip made
   iOS Safari drop the .card-inner flip transition (variant cards popped
   instead of flipping; fixed 2026-10-21). */
.card.flippable:not(.flipped).variant { background-image: none; }
/* Reveal glide for variants: the .card.variant animation shorthand otherwise
   overrides .card.deal outright, so variant cards sat still while every other
   card glided in — itself a pre-flip tell. In the reveal grid (.deal) the two
   animations share one list; tier spin speeds are preserved per-animation.
   Collection/modal variants (no .deal) are untouched and never glide. */
.card.deal.variant { animation: deal .55s cubic-bezier(.2,1.3,.4,1) both, variant-spin 5s linear infinite; }
.card.deal.variant.vt-oneofone { animation-duration: .55s, 7.5s; }
.card.deal.variant.vt-prism { animation-duration: .55s, 6s; }
.badge-variant { top: -8px; right: -6px; background: linear-gradient(90deg,#ff5f5f,#ffb21e,#38c97f,#3f8cff,#b35cff); color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.65); }
.card.vt-prism .badge-variant { background: linear-gradient(135deg, #7fd4ff, #a0e7ff); color: #0a2a3a; text-shadow: none; }
.card.vt-obsidian .badge-variant { background: linear-gradient(135deg, #6b3a9e, #a86ad4); color: #fff; }
/* Misprint mark: a low-opacity VOID-style diagonal stamped across the
   whole face, bottom-left to top-right (Franklin's design). Sits above the
   art (z 2) but under the corner badges (z 3); sized in cqw so it scales
   with the card in every context — no corner pins or stacking needed. */
.misprint-void { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-35deg); z-index: 2; font-weight: 900; font-size: 15cqw; letter-spacing: .1em; white-space: nowrap; color: #fff; opacity: .3; text-shadow: 0 1px 10px rgba(0,0,0,.5); pointer-events: none; }
.card.flippable:not(.flipped) .badge-new { opacity: 0; }
.card.flippable .badge-new { transition: opacity .3s .5s; }

/* silhouette */
.card.missing .sil { background: repeating-linear-gradient(135deg, #12172a 0 8px, #0f1324 8px 16px); border: 2px dashed color-mix(in srgb, var(--rc) 45%, transparent); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqw; color: #4a5470; }
.sil-q { font-size: 30cqw; font-weight: 900; line-height: 1; color: #2a3150; }
.sil-num { font-weight: 800; font-size: 9cqw; color: #6b7593; }
.sil-r { font-size: 6cqw; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: color-mix(in srgb, var(--rc) 70%, #333); }

/* ===================================================== collection */
.coll-head { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; margin-bottom: 16px; }
.completion { display: flex; align-items: center; gap: 16px; }
.ring { --p: 0; --g: 0; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#34d399 calc(var(--g) * 1%), var(--accent) calc(var(--g) * 1%), var(--accent) calc(var(--p) * 1%), rgba(255,255,255,.08) calc(var(--p) * 1%)); position: relative; flex: none; }
.ring::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: var(--panel); }
.ring span { position: relative; font-weight: 800; font-size: 1.15rem; }
/* True completion (every card turned in): the ring goes One-of-One gold
   with the same rotating shimmer as the 1/1 card frame (registered --va
   angle, no animated filter — iOS-safe per the 2026-10-19 variant fix). */
.ring.complete { background: conic-gradient(from var(--va), #ffd700, #fff3b0, #ffb700, #ffdf5e, #ffd700, #fff3b0, #ffd700); box-shadow: 0 0 18px rgba(255,210,102,.55); animation: variant-spin 7.5s linear infinite; }
.ring.complete span { color: #ffd766; }
.complete-note { color: #ffd766; font-weight: 800; }
.comp-title { font-weight: 800; font-size: 1.2rem; } .comp-sub { color: var(--muted); font-size: .9rem; margin-top: 4px; }
.rarity-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 560px) { .rarity-progress { grid-template-columns: repeat(2, 1fr); } }
.rp { text-align: left; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; transition: border-color .2s, background .2s; }
.rp:hover { background: rgba(255,255,255,.07); } .rp.active { border-color: var(--rc); background: color-mix(in srgb, var(--rc) 12%, transparent); }
.rp-top { display: flex; justify-content: space-between; gap: 8px; font-size: .85rem; font-weight: 700; } .rp-top > span:last-child { white-space: nowrap; } .rp-name { color: var(--rc); }
.bar { display: block; height: 7px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--rc2, var(--accent)), var(--rc, var(--accent2))); transition: width .6s ease; }
.r-chase .bar i { background: linear-gradient(90deg,#ff4fa3,#ffb21e,#38c97f,#3f8cff,#b35cff); }
.r-numbered { --rc: #b35cff; } .r-numbered .bar i { background: linear-gradient(90deg,#b35cff,#ff4fa3,#ffb21e); }
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; padding: 14px; }
.filters input[type=search] { flex: 1 1 220px; }
.seg { display: flex; background: #0e1324; border: 1px solid var(--line); border-radius: 10px; padding: 3px; flex-wrap: wrap; }
.seg button { background: none; border: 0; padding: 6px 11px; border-radius: 8px; cursor: pointer; color: var(--muted); font-weight: 600; font-size: .88rem; }
.seg button.active { background: var(--panel2); color: var(--text); }
.filter-count { color: var(--muted); font-size: .85rem; margin-left: auto; }
.coll-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 18px; padding: 14px 12px 0 0; }
.coll-grid .card, .recent .card { cursor: pointer; }
.recent .card { content-visibility: auto; contain-intrinsic-size: 150px 210px; }
/* collection cell: content-visibility clips to the cell box, so the cell gets room (padding, cancelled by the negative
   margin) for the corner badges + hover lift; the padding is click-through so it never steals clicks from neighbours */
.coll-item { content-visibility: auto; contain-intrinsic-size: auto 186px auto 240px; padding: 26px 16px 6px 6px; margin: -26px -16px -6px -6px; min-width: 0; pointer-events: none; }
.coll-card { position: relative; pointer-events: auto; cursor: pointer; transition: transform .25s ease-out; }
.coll-item:hover .coll-card { transform: translateY(-4px) scale(1.03); }
/* notification-style badges on the card's top-right corner: they straddle the top edge (2px overlap) and stick out
   past the right edge, so the rarity gem / name stay uncovered; holo ✦n sits left of the ×n count */
.coll-badges { position: absolute; z-index: 2; top: -16px; right: -9px; display: flex; gap: 3px; pointer-events: none; }
.coll-badges .badge-count, .coll-badges .badge-holo, .coll-badges .badge-turned, .coll-badges .badge-vault { position: static; pointer-events: auto; padding: 0 7px; height: 18px; line-height: 18px; font-size: 11px; white-space: nowrap;
  box-shadow: 0 0 0 2px #0b0f1a, 0 3px 8px rgba(0,0,0,.55); }
.recent .card:hover { transform: translateY(-4px) scale(1.03); z-index: 2; }
.empty { color: var(--muted); padding: 40px; text-align: center; grid-column: 1/-1; }

/* ===================================================== stats */
.stats-layout { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: stretch; }
.stats-layout .wide { grid-column: 1 / -1; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
/* Stats has exactly 8 tiles: on wider screens pin them to 4 x 2 so the last
   row isn't a lopsided pair (auto-fill fits 6 + 2 at desktop widths). Mobile
   keeps the 2-across flow. The All-players box shares the same 4-across
   grid so its (3) tiles match the top box's tile size exactly. */
@media (min-width: 700px) { #statTiles, #globalTiles { grid-template-columns: repeat(4, 1fr); } }
.tile { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.tile span { color: var(--muted); font-size: .8rem; } .tile b { font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.tile.clickable { cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.tile.clickable:hover { border-color: var(--accent2); background: rgba(255,255,255,.07); transform: translateY(-1px); }
.tile-hint { color: var(--accent2); font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.gallery-back { margin-bottom: 12px; }
.stat-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 14px; margin-top: 12px; max-height: 70vh; overflow: auto; padding: 20px 12px 10px; }
.stat-gallery-item { position: relative; cursor: pointer; content-visibility: auto; contain-intrinsic-size: 160px 224px; }
.stat-gallery-item .badge-turned { position: absolute; top: 4px; left: 4px; z-index: 3; }
.stat-gallery-item.turned .card { box-shadow: 0 0 0 2px #34d399, 0 0 16px rgba(52,211,153,.35); }
/* content-visibility's paint containment clips badges at the item box, so
   inside the gallery the corner badges pin INSIDE the card instead of
   overhanging its corner like everywhere else. */
.stat-gallery-item .badge-new { top: 4px; left: 4px; }
.stat-gallery-item .badge-count, .stat-gallery-item .badge-variant { top: 4px; right: 4px; }
.stat-gallery-item .badge-holo { bottom: 4px; right: 4px; }
.stat-gallery-item .card { width: 100%; }
/* Numbered gallery: one scroll container, a headed grid per tier. The
   section grids reuse .stat-gallery layout but must not scroll themselves. */
.sg-wrap { max-height: 70vh; overflow: auto; margin-top: 4px; padding: 0 12px 10px; }
.st-head { margin: 20px 2px 0; font-size: 1.05rem; display: flex; align-items: baseline; gap: 2px; }
.st-head:first-child { margin-top: 8px; }
.sg-sec { max-height: none; overflow: visible; margin-top: 0; padding: 14px 0 2px; }
[data-gallery-more] { display: block; margin: 10px auto 2px; }
.bars { display: grid; gap: 10px; }
.barrow { display: grid; grid-template-columns: 96px 1fr 132px; gap: 12px; align-items: center; font-size: .9rem; }
.barrow .bl { color: var(--rc); font-weight: 700; } .barrow .bar { height: 10px; } .barrow .bn { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .barrow em { color: var(--muted); font-style: normal; font-size: .8rem; }
.best-pull { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.best-pull .card { width: 230px; cursor: pointer; }
.best-cap { text-align: center; display: flex; flex-direction: column; gap: 3px; } .bpc-line { white-space: nowrap; } .best-cap span { color: var(--muted); font-size: .85rem; }
.recent { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 14px; }

/* ===================================================== odds */
.table-wrap { overflow-x: auto; }

.odds-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.odds-table th { text-align: left; color: var(--muted); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.odds-table td { padding: 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.odds-table td:first-child { font-weight: 700; color: var(--rc); }
.odds-table em { color: var(--muted); font-style: normal; font-size: .85em; }
.dot { display: inline-block; width: 10px; height: 10px; transform: rotate(45deg); background: var(--rc); margin-right: 10px; border-radius: 2px; box-shadow: 0 0 8px var(--rc); }
.r-chase .dot { background: conic-gradient(#ff4fa3, #ffb21e, #38c97f, #3f8cff, #b35cff, #ff4fa3); }
.slot-list { display: grid; gap: 8px; }
.slot { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.slot > div { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.pill { display: inline-block; font-size: .78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--rc, var(--accent)) 18%, transparent); color: var(--rc, #cfd6ff); border: 1px solid color-mix(in srgb, var(--rc, var(--accent)) 40%, transparent); white-space: nowrap; }

/* ===================================================== sets & settings */
.sets-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 20px; align-items: start; }
.set-list { display: grid; gap: 10px; }
.set-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.03); }
.set-item.current { border-color: var(--accent); }
.swatch { width: 46px; height: 58px; border-radius: 8px; flex: none; display: grid; place-items: center; font-weight: 900; font-size: .75rem; background: linear-gradient(150deg, var(--p1), var(--p2)); }
.swatch.code-l5 { font-size: .62rem; letter-spacing: -.01em; }
.swatch.code-l6 { font-size: .54rem; letter-spacing: -.02em; }
.set-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; } .set-meta span { color: var(--muted); font-size: .82rem; }
.set-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.form-grid input { width: 100%; }
.sets-layout .row { flex-wrap: wrap; }
.form-grid label { display: flex; flex-direction: column; gap: 5px; font-size: .82rem; color: var(--muted); }
  .pills { display: flex; flex-wrap: wrap; gap: 6px; }
.warn-box { background: rgba(255,178,30,.08); border: 1px solid rgba(255,178,30,.35); color: #ffd98a; border-radius: 10px; padding: 10px 12px; font-size: .85rem; line-height: 1.5; }
.toggle { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; cursor: pointer; }
.toggle input { width: 18px; height: 18px; accent-color: var(--accent); }
label.inline { display: flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--muted); } label.inline input { width: 70px; }

/* ===================================================== modal & toasts */
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(5,7,14,.75); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 20px; animation: fadeIn .2s; }
/* The card modal (.zoom inside) gets extra room for the copies panel; every other modal keeps 760px. */
.modal-box:has(.zoom) { max-width: 900px; }
.modal-box { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 26px; max-width: 760px; width: 100%; max-height: 92vh; max-height: 92dvh; overflow: auto; overscroll-behavior: contain; box-shadow: 0 30px 80px rgba(0,0,0,.6); animation: popIn .3s cubic-bezier(.2,1.3,.4,1); }
body.modal-open { overflow: hidden; }
.modal-box form.row { margin-top: 12px; } .modal-box form input { flex: 1; }
/* Gift pop (giftpop.js): a narrow, centered column — the card used to
   borrow .trade-card and inherit the Trading Post listing grid (card
   face beside its caption), leaving the pop wide and lopsided on PC. */
.modal-box:has(.giftpop-wrap) { max-width: 460px; }
.giftpop-card { display: flex; flex-direction: column; align-items: center; margin: 14px auto 2px; }
.giftpop-card .card { width: min(190px, 62vw); }
.giftpop-cap { margin-top: 8px; text-align: center; font-size: .9rem; }
.giftpop-cap b, .giftpop-cap span { display: block; }
.modal-x { position: absolute; top: 6px; right: 8px; padding: 10px; margin: -4px -2px 0 0; background: none; border: 0; font-size: 1.8rem; color: var(--muted); cursor: pointer; line-height: 1; }
.zoom { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 26px; align-items: start; }
.zoom-card .card { width: 100%; }
.zoom-card .cf-details { overflow: auto; -webkit-mask-image: none; mask-image: none; }
.zoom-info h3 { margin: 10px 0 4px; font-size: 1.4rem; color: var(--text); text-transform: none; letter-spacing: 0; }
.zoom-info dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 16px 0; font-size: .92rem; }
.zoom-info dt { color: var(--muted); } .zoom-info dd { margin: 0; font-weight: 600; }
.zoom-details { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; line-height: 1.5; font-style: italic; color: #cfd6e6; margin-bottom: 14px; white-space: pre-wrap; }
.player-list { display: grid; gap: 8px; margin: 12px 0; }
 .toast-wrap { position: fixed; bottom: calc(22px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 70; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: #1f2747; border: 1px solid var(--line); padding: 11px 18px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.5); font-weight: 600; animation: toastIn .35s cubic-bezier(.2,1.3,.4,1); max-width: 90vw; }
.toast.good { border-color: rgba(56,201,127,.5); } .toast.warn { border-color: rgba(255,178,30,.5); } .toast.error { border-color: rgba(255,84,112,.6); }
.toast.out { opacity: 0; transform: translateY(10px); transition: .35s; }

/* ===================================================== fx */
.fx-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 60; }
.screen-flash { position: fixed; inset: 0; pointer-events: none; z-index: 55; background: radial-gradient(circle, var(--flash), transparent 75%); animation: flash .9s ease-out forwards; }
.fx-banners { position: fixed; inset: 0; z-index: 65; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; pointer-events: none; padding: 12px; }
.fx-banner { text-align: center; }
.fx-banner span { font-size: clamp(2.4rem, 8vw, 5.5rem); font-weight: 900; letter-spacing: .04em; animation: bannerIn 2.2s cubic-bezier(.2,1.3,.4,1) forwards; text-shadow: 0 6px 30px rgba(0,0,0,.6); -webkit-text-stroke: 2px rgba(0,0,0,.25); }
.fx-banner.legendary span { color: #ffd166; text-shadow: 0 0 40px rgba(255,178,30,.9), 0 6px 30px rgba(0,0,0,.6); }
.fx-banner.variant span { background: linear-gradient(90deg,#ff5f5f,#ffb21e,#f7f75f,#38c97f,#3f8cff,#b35cff,#ff5f5f); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 26px rgba(255,255,255,.75)); animation: bannerIn 3.2s cubic-bezier(.2,1.3,.4,1) forwards, rainbowText 1s linear infinite; }
.fx-banner.chase span { background: linear-gradient(90deg,#ff4fa3,#ffb21e,#f5f56a,#38c97f,#12c2e9,#b35cff); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 24px rgba(255,79,163,.8)); animation: bannerIn 2.8s cubic-bezier(.2,1.3,.4,1) forwards, rainbowText 1s linear infinite; }
.fx-banner.hero span { color: #ffd700; text-shadow: 0 0 40px rgba(255,215,0,.9), 0 6px 30px rgba(0,0,0,.6); }

/* ===================================================== keyframes */
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes popIn { from { opacity: 0; transform: scale(.92); } }
@keyframes toastIn { from { opacity: 0; transform: translateY(16px) scale(.95); } }
@keyframes float { 50% { transform: translateY(-10px) rotate(1.5deg); } }
@keyframes shine { 0%, 55% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }
@keyframes dropIn { from { transform: translateY(-60px) scale(.8) rotate(-6deg); opacity: 0; } }
@keyframes wiggle { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-2.5deg); } 90% { transform: rotate(2.5deg); } 95% { transform: rotate(-1.5deg); } }
@keyframes shakeSmall { 0%, 100% { transform: translate(0) rotate(0); } 25% { transform: translate(-2px, 1px) rotate(-1deg); } 75% { transform: translate(2px, -1px) rotate(1deg); } }
@keyframes shakeHard { 0%, 100% { transform: translate(0); } 20% { transform: translate(-6px, 2px) rotate(-1deg); } 40% { transform: translate(6px, -2px) rotate(1deg); } 60% { transform: translate(-4px, 1px); } 80% { transform: translate(4px, -1px); } }
@keyframes shakeX { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@keyframes slitGlow { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pulse { 50% { opacity: .45; } }
@keyframes deal { from { opacity: 0; transform: translateY(140px) scale(.4) rotate(-12deg); } }
@keyframes holo { 0%, 100% { background-position: 0 0, 0% 50%; } 50% { background-position: 0 0, 100% 50%; } }
@keyframes twinkle { 50% { opacity: .15; } }
@keyframes glowPulse { 50% { box-shadow: 0 0 18px 2px var(--gc); } }
@keyframes rainbowGlow {
  0% { box-shadow: 0 0 40px 10px rgba(255,79,163,.85); } 25% { box-shadow: 0 0 40px 10px rgba(255,178,30,.85); }
  50% { box-shadow: 0 0 40px 10px rgba(56,201,127,.85); } 75% { box-shadow: 0 0 40px 10px rgba(63,140,255,.85); } 100% { box-shadow: 0 0 40px 10px rgba(255,79,163,.85); }
}
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }
@keyframes bannerIn { 0% { opacity: 0; transform: scale(.4) rotate(-6deg); } 15% { opacity: 1; transform: scale(1.08) rotate(0); } 25% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(1.1); } }
@keyframes rainbowText { to { background-position: 200% 0; } }

/* ===================================================== responsive */
@media (max-width: 1100px) {
  .tab { padding: 11px 14px; }
  .topbar { flex-wrap: wrap; gap: 10px 14px; }
  .tabs { order: 5; width: 100%; margin-left: 0; }
  .top-actions { margin-left: auto; }
}
@media (max-width: 900px) {
  main { padding: 14px; }
  .packs-layout, .stats-layout { grid-template-columns: 1fr; }
  .stage { min-height: 480px; padding: 16px 10px; }
  .coll-head { grid-template-columns: 1fr; }
  .zoom { grid-template-columns: 1fr; justify-items: center; } .zoom-card { width: min(280px, 80vw); }
}
@media (max-width: 560px) {
  .seg button { padding: 9px 11px; }
  .topbar { position: static; padding: 10px 12px; }
  .brand-text, #playerName { display: none; }
  .player-chip { padding: 4px; }
  .brand-text { display: none; }
  .set-picker .set-tag { display: inline-flex; align-items: center; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent2); white-space: nowrap; }
  .set-picker { order: 4; width: 100%; } .set-picker select { max-width: none; flex: 1; }
  .set-picker .set-dd { flex: 1; }
  .set-dd-btn { max-width: none; width: 100%; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124,108,255,.18); font-weight: 700; }
  .set-dd-list { max-width: none; }
    .reveal-grid { gap: 10px; } .reveal-grid .card { width: var(--cardw, calc(33.3% - 8px)); }
  .coll-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 20px 14px; padding: 13px 9px 0 0; }
  .coll-badges { top: -13px; right: -7px; gap: 2px; } .coll-badges .badge-count, .coll-badges .badge-holo { font-size: 9.5px; padding: 0 5px; height: 15px; line-height: 15px; }
  .badge-new, .badge-count, .badge-holo { font-size: 9px; padding: 2px 6px; }
  /* Phones: the 3-column row starves the numbers (80px) and the label (74px), so 5-digit
     counts wrapped mid-row. Stack deliberately instead: label + numbers on line 1,
     full-width bar underneath - every row the same shape, bars easier to compare. */
  .barrow { grid-template-columns: 1fr auto; grid-template-areas: "bl bn" "bar bar"; row-gap: 6px; }
  .barrow .bl { grid-area: bl; } .barrow .bar { grid-area: bar; } .barrow .bn { grid-area: bn; }
  .form-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.stage { scroll-margin-top: 84px; overflow-anchor: none; }   /* stage content is swapped wholesale: never use it as a scroll anchor */
/* Phones/tablets: reserve the full 9-card reveal (+ its one-line summary and the Reveal All row) on the stage
   from the start, so the page height doesn't change between the tearing pack and the reveal, and the scroll
   position can't jump. (The finished summary is a single short line since the Top pull segment and the
   Next Pack / Done buttons were removed 2026-10-16 — the constants below dropped by roughly the old
   summary's extra wrapped lines.) The idle state gets its own shorter reservation further below.
   Stage inner width = 100vw - 28px (main padding) - 22px (stage padding + border). Desktop keeps its 700px stage. */
@media (max-width: 900px) and (min-width: 654px) {   /* 5 cards per row -> 2 rows; summary 1 line */
  .stage { min-height: max(460px, calc(128px + 2.8 * clamp(108px, (100vw - 114px) / 5, 184px))); }
}
@media (max-width: 653px) and (min-width: 561px) {   /* 108px cards, only 4 fit per row -> 3 rows */
  .stage { min-height: calc(140px + 4.2 * 108px); }
}
@media (max-width: 560px) {                          /* 3 cards per row -> 3 rows; summary 1 line */
  .stage { min-height: calc(136px + 4.2 * ((100vw - 50px) * .333 - 8px)); }
}
/* Idle on phones/tablets needs far less height than a reveal (pack + one text line), and with no Done
   button nothing returns to idle mid-session — so idle alone may be shorter: the control strip moves
   once when an open starts, then stays put through the reveal and every Quick Open after it. */
@media (max-width: 900px) {
  .stage:has(> #stageIdle:not(.hidden)) { min-height: 448px; }
}

/* ===================================================== online accounts */
.cloud-only { display: none !important; }
body.cloud .cloud-only { display: inline-flex !important; }
body.cloud p.cloud-only { display: block !important; }
/* Tabs keep the same inline-block layout as the other tabs: as flex items their badges ride at the top of the button instead of centering (Daily/Market are the cloud-only tabs). */
body.cloud .tab.cloud-only { display: inline-block !important; }
.tab.admin-tab { display: none; color: var(--warn); }
body.admin .tab.admin-tab { display: inline-block; }
.area-title { margin: 28px 0 14px; font-size: 1.1rem; }
.admin-gate { max-width: 520px; }
.mode-tag { font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; padding: 2px 7px; border-radius: 99px; background: rgba(255,255,255,.08); color: var(--muted); font-weight: 800; }
.player-chip.online .mode-tag { background: rgba(56,201,127,.18); color: #7ef0b4; }
body.admin .player-chip .mode-tag { background: rgba(255,178,30,.18); color: #ffd98a; }
.login-box { display: flex; flex-direction: column; gap: 10px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.login-box h2 { margin: 0; }
.login-form { display: flex; flex-direction: column; gap: 10px; }
.login-form input#loginUser { font-size: 1.05rem; padding: 12px 14px; }
.login-msg { min-height: 1.2em; font-size: .9rem; } .login-msg.bad { color: #ff9cad; }
.acct-actions { margin-top: 14px; }
.admin-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 20px; align-items: start; }
.admin-layout .wide { grid-column: 1 / -1; }
.form-grid .span2 { grid-column: 1 / -1; }
.fld-label { font-size: .82rem; color: var(--muted); display: block; margin-bottom: 2px; }
.form-grid label.toggle { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; width: auto; }
.form-grid label.toggle input { width: 18px; height: 18px; flex: none; margin: 0; }
.form-grid .row input { flex: 1; }
.acct-list { display: grid; gap: 10px; }
.acct-row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.03); }
.acct-row.disabled { opacity: .55; }
.acct-main { display: flex; gap: 10px; align-items: center; min-width: 0; }
.acct-row .acct-actions { margin: 0; gap: 6px; }
.acct-row select { max-width: 160px; padding: 6px 8px; font-size: .85rem; }
.acct-row .ga-n { width: 64px; padding: 6px 8px; font-size: .85rem; }
.danger-text { color: #ff9cad; }
.created-box { margin-top: 14px; border: 1px solid rgba(56,201,127,.45); background: rgba(56,201,127,.08); border-radius: 12px; padding: 12px 14px; }
.created-box .dev-title { color: var(--good); }
.big-code { font-size: 1.1rem; padding: 6px 10px; user-select: all; }

/* accounts-only: nothing but the login screen until you log in */
body.locked main, body.locked .tabs, body.locked .set-picker, body.locked #playerBtn .mode-tag { visibility: hidden; }
.login-box.gate { padding: 4px 0 0; margin: 0; border-bottom: 0; }
label.inline input[type=checkbox] { width: 16px; height: 16px; margin: 0; flex: none; }
.login-form .row { align-items: center; gap: 14px; }
.login-form .row #loginBtn { margin-left: auto; }
.login-box.gate h2 { margin-top: 0; }
#gateRetry { align-self: flex-start; margin-bottom: 8px; }

/* click the pack in "Your packs" to open + tear it */
.inv-pack.clickable { cursor: pointer; }
.inv-pack.clickable .pack { transition: transform .18s ease, filter .18s ease; }
.inv-pack.clickable:hover .pack, .inv-pack.clickable:focus-visible .pack { transform: translateY(-4px) rotate(-2deg) scale(1.04); filter: drop-shadow(0 10px 22px rgba(123,47,247,.45)) brightness(1.08); }
.inv-pack.clickable:active .pack { transform: scale(.97); }
.inv-pack:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 12px; }
.inv-pack.empty { cursor: pointer; opacity: .7; }
/* big idle pack in the stage: clickable like the sidebar pack. The pack itself has a float
   animation (transform), so the hover lift goes on the wrapper to avoid fighting it. */
.idle-pack { border-radius: 14px; transition: transform .18s ease, filter .18s ease; }
.idle-pack.clickable, .idle-pack.empty { cursor: pointer; }
.idle-pack.clickable:hover, .idle-pack.clickable:focus-visible { transform: translateY(-6px) scale(1.04); filter: drop-shadow(0 14px 28px rgba(123,47,247,.45)) brightness(1.08); }
.idle-pack.clickable:active { transform: scale(.97); }
.idle-pack:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.idle-pack.empty { opacity: .75; }

.login-form .field { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--muted); }
.login-form #loginPin { font-size: 1.3rem; letter-spacing: .4em; padding: 10px 14px; max-width: 160px; }
.login-pair { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; margin: 8px 0; }
.login-pair span { color: var(--muted); font-size: .85rem; }

/* ---------- optional per-card logo ---------- */
/* logo only (no details text): bigger art, details box becomes a light logo plate */
.cf-logo-only .cf-art { flex: 1 1 auto; aspect-ratio: auto; min-height: 0; }
.cf-details.cf-logo-strip { flex: 0 0 25cqw; display: flex; align-items: center; justify-content: center; padding: 2cqw 4cqw;
  background: linear-gradient(180deg, #fbfcff, #e6ebf5); border-color: rgba(255,255,255,.55); -webkit-mask-image: none; mask-image: none; font-style: normal; }
.cf-logo-strip .cf-logo { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.cf-logo-strip .cf-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; filter: drop-shadow(0 .4cqw .8cqw rgba(0,0,0,.18)); }
/* logo + details: small logo chip beside the text */
.cf-logo-sm { float: left; width: 17cqw; height: 13cqw; margin: .4cqw 2.4cqw .8cqw 0; padding: 1.2cqw; border-radius: 1.8cqw;
  background: linear-gradient(180deg, #fbfcff, #e6ebf5); display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.cf-logo-sm img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.cf-logo.broken { display: none; }
.cf-logo-strip:has(.broken) { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.07); }

/* ===================================================== prize wheel */
/* wheel/arcade counts now show as tab badges (see .tab-badge) */
.wheel-wrap { max-width: 640px; margin: 0 auto; text-align: center; padding: 12px 0 48px; }
.spin-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 20px; } .spin-btns .btn.big { flex: 1 1 128px; margin: 0; }
@media (max-width: 480px) {
  /* four-across squeezes each button to ~1/4 of a phone screen and the
     nowrap labels burst out (AUTOSPIN most of all) — go two-by-two */
  .spin-btns { flex-wrap: wrap; }
  .spin-btns .btn.big { flex: 1 1 40%; width: auto; }
}
.wheel-title { margin: 6px 0 2px; }
.ticket-box {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 4px auto 14px; padding: 10px 22px;
  border: 2px dashed #ffb21e; border-radius: 14px;
  background: rgba(255,178,30,.08); font-size: 1.1rem;
}
.ticket-box .ticket-emoji { font-size: 1.6rem; }
.ticket-box b { font-size: 1.35rem; color: #ffe08a; }
.wheel-stage { position: relative; width: min(92vw, 520px); margin: 10px auto 0; }
/* Jumbled Mess packs */
.pack-skin-jumbled .pack-top, .pack-skin-jumbled .pack-body { background: linear-gradient(135deg, #a855f7 0%, #ec4899 25%, #f59e0b 50%, #10b981 75%, #3b82f6 100%); }
.pack-skin-jumbled .pack-emblem { font-size: 2.2rem; }
.pack-skin-jumbled .pack-name { color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
/* pack skin "periodic": dark lab bench with a faint periodic-table tile grid (class pack-skin-periodic) */
.pack-skin-periodic .pack-top {
  background:
    radial-gradient(ellipse 90% 30% at 50% -8%, rgba(150,230,255,.20), transparent 70%),
    repeating-linear-gradient(90deg, rgba(148,210,255,.14) 0 2px, transparent 2px 34px),
    repeating-linear-gradient(0deg, rgba(148,210,255,.14) 0 2px, transparent 2px 40px),
    radial-gradient(3px 3px at 20% 30%, rgba(132,204,22,.85) 45%, transparent 100%),
    radial-gradient(3px 3px at 72% 18%, rgba(34,211,238,.85) 45%, transparent 100%),
    radial-gradient(2.5px 2.5px at 45% 62%, rgba(168,85,247,.85) 45%, transparent 100%),
    radial-gradient(2.5px 2.5px at 85% 55%, rgba(251,191,36,.85) 45%, transparent 100%),
    linear-gradient(180deg, #0b1220 0%, #0f1b2d 55%, #0a0f18 100%);
}
.pack-skin-periodic .pack-body {
  background:
    radial-gradient(ellipse 70% 40% at 50% 108%, rgba(34,211,238,.14), transparent 70%),
    repeating-linear-gradient(90deg, rgba(148,210,255,.12) 0 2px, transparent 2px 34px),
    repeating-linear-gradient(0deg, rgba(148,210,255,.12) 0 2px, transparent 2px 40px),
    linear-gradient(180deg, #0a0f18 0%, #070b12 70%, #05080d 100%);
}
.pack-skin-periodic .pack-body::before {
  background: radial-gradient(ellipse 90% 30% at 50% 0%, rgba(150,230,255,.10), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 55%); mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
}
.pack-skin-periodic .crimp { background: repeating-linear-gradient(100deg, rgba(0,0,0,.55) 0 4px, rgba(120,200,255,.25) 4px 6px, rgba(255,255,255,.08) 6px 9px); }
.pack-skin-periodic .crimp.bottom { background: repeating-linear-gradient(100deg, rgba(0,0,0,.68) 0 4px, rgba(80,150,210,.28) 4px 6px, rgba(255,255,255,.05) 6px 9px); }
.pack-skin-periodic .pack-top::after { border-bottom-color: rgba(140,210,255,.5); }
.pack-skin-periodic .pack-emblem { background: radial-gradient(circle at 35% 30%, rgba(160,220,255,.35), rgba(8,14,24,.88) 72%);
  border-color: rgba(150,215,255,.7); box-shadow: 0 0 28px rgba(110,190,255,.5), inset 0 0 18px rgba(150,215,255,.28); text-shadow: 0 0 16px rgba(160,220,255,.9); }
.pack-skin-periodic .pack-name { color: #ffffff; text-shadow: 0 0 14px rgba(120,200,255,.85), 0 2px 8px rgba(0,0,0,.65); }
.pack-skin-periodic .pack-sub { color: #b8d9ec; }

/* Periodic Table: square pack to match the square tile cards */
.pack.pack-skin-periodic { aspect-ratio: 1/1; }
.pack.pack-skin-periodic .pack-top { border-radius: 14px 14px 0 0; }
.pack.pack-skin-periodic .pack-body { border-radius: 0 0 14px 14px; }

#wheelCanvas { width: 100%; height: auto; display: block; filter: drop-shadow(0 8px 24px rgba(0,0,0,.45)); }
.wheel-pointer {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 14px solid transparent; border-right: 14px solid transparent;
  border-top: 24px solid #ffe08a;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
}
.wheel-result {
  margin: 14px auto; font-size: 1.15rem;
  background: var(--panel2); border: 1px solid var(--line);
  padding: 12px 18px; border-radius: 12px; max-width: 480px;
}
.wheel-hint { margin-top: 14px; }
.multi-results h3 { margin: 4px 0 12px; }
.multi-row { display: flex; justify-content: space-between; gap: 18px; padding: 7px 2px; border-bottom: 1px solid var(--line); font-size: 1.02rem; }
.multi-row:last-of-type { border-bottom: 0; }
.multi-results .btn.primary { display: block; width: 100%; text-align: center; }

/* ---------- dupe trade-in ---------- */
.tradein-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 10px; font-size: 1rem; }
.tradein-rows { display: grid; gap: 8px; }
@media (min-width: 720px) { .tradein-rows { grid-template-columns: 1fr 1fr; } }
.tradein-row { display: flex; align-items: center; gap: 12px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.tradein-mid { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.tradein-row .btn { margin-left: auto; }

/* ---------- collapsible panels ---------- */
.panel.collapsible > h2 { display: flex; align-items: center; gap: 8px; }
.collapse-btn { margin-left: auto; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 2px 8px; border-radius: 6px; }
.collapse-btn:hover { color: var(--text); background: var(--panel2); }
.panel.collapsed > :not(h2) { display: none; }
.panel.collapsed .collapse-btn { transform: rotate(-90deg); }

/* ---------- trade-in: mobile layout ---------- */
@media (max-width: 560px) {
  .tradein-row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 12px;
    row-gap: 10px;
  }
  .tradein-row .pill { grid-column: 1; }
  .tradein-mid { grid-column: 2; font-size: 0.92rem; min-width: 0; }
  .tradein-row .btn { grid-column: 1 / -1; justify-self: end; margin-left: 0; }
  .tradein-head h3 { font-size: 0.95rem; }
}

/* ---------- players & favorites ---------- */
.player-list { display: grid; gap: 8px; }
@media (min-width: 720px) { .player-list { grid-template-columns: 1fr 1fr; } }
.player-card { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; color: inherit; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; cursor: pointer; }
.player-card:hover { border-color: var(--accent); }
.player-meta { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.player-meta b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-go { font-size: 1.5rem; color: var(--muted); flex: none; }
.avatar.big { width: 54px; height: 54px; font-size: 1.5rem; }
.profile h3 { margin: 20px 0 10px; font-size: 1rem; }
.prof-head { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.prof-head h2 { margin: 0 0 4px; }
.prof-favs { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.prof-fav-cap { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; font-size: .85rem; }
.prof-fav-cap b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prof-sets { display: grid; gap: 8px; }
.prof-set { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.prof-set-top { display: flex; justify-content: space-between; gap: 8px; font-size: .9rem; margin-bottom: 6px; }

/* ---------- trading ---------- */
.tab-badge { display: inline-block; min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: #f5b942; color: #1a1408; font-size: 11px; font-weight: 700; text-align: center; vertical-align: middle; }
.trade-row { border: 1px solid #333; border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; background: #141414; }
.trade-head { margin-bottom: 8px; }
.trade-cards { display: flex; align-items: center; gap: 10px; }
.trade-side { flex: 1; min-width: 0; }
.trade-cap-top { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #999; margin-bottom: 4px; }
.trade-card .card { width: 100%; max-width: 150px; }
/* Small trade-card renders (gift modal/pop, trade lists, builder — 84px on
   phones, 120px on desktop): the fixed 12px outer radius doesn't scale with
   the card while the frame (.front padding) and inner radius (both 3.4cqw)
   do, so the outer corner balloons (~2x too round at 84px). 6.8% = inner
   3.4% + frame 3.4% keeps the arcs concentric at any width — the same
   %-radius trick as .reveal-grid's 6.5% / 4.65%. Periodic tiles keep
   their tuned 13.7%. */
.trade-card .card:not([data-set="periodic"]) { border-radius: 6.8% / 4.86%; }
.trade-cap { margin-top: 6px; font-size: .85rem; }
.trade-cap b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trade-swap { font-size: 24px; color: #f5b942; flex: none; }
.trade-actions { margin-top: 10px; display: flex; gap: 8px; align-items: center; }
.trade-top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.trade-top h2 { margin: 0; }
.trade-with { display: block; margin: 8px 0; }
.trade-with select { width: 100%; margin-top: 4px; }
.trade-steps { display: flex; gap: 8px; margin-top: 10px; font-size: .85rem; flex-wrap: wrap; }
.trade-steps .tstep { padding: 8px 12px; border: 0; font: inherit; border-radius: 20px; background: #222; color: #999; }
.trade-steps .tstep.active { background: #f5b942; color: #1a1408; font-weight: 700; }
.trade-steps .tstep.done { background: #2c4a2c; color: #bfe3bf; }
.trade-pick { background: none; border: 2px solid transparent; border-radius: 12px; padding: 4px; cursor: pointer; text-align: left; color: inherit; }
.trade-pick.selected { border-color: #f5b942; background: #1d1a12; }
.trade-dock { position: sticky; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); margin-top: 12px; background: #1c1c22; border: 1px solid #f5b942; border-radius: 12px; }
.trade-dock .btn { margin-left: auto; flex: none; }
.trade-review-group { margin: 4px 0 8px; }
.trade-review-cards { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.trade-review-cards .trade-card { width: 118px; }
.trade-review-swap { text-align: center; font-size: 26px; color: #f5b942; margin: 2px 0; }
.trade-review-actions { display: flex; gap: 10px; justify-content: center; margin: 14px 0 24px; flex-wrap: wrap; }
#tradeReview { padding-bottom: 8px; }
.trade-items { display: flex; flex-wrap: wrap; gap: 8px; }
.trade-items .trade-card { width: 92px; }
.trade-items .trade-cap { font-size: .75rem; }
/* Class collision rescue (2026-10-24): trading.css's .trade-card is the
   Trading Post listing row (display:grid, face + info columns), but the
   direct-trade tile wrapper uses the same class name — on phones every
   trade tile was being laid out as that grid, captions beside the art
   and pack art overflowing its 84px column. In direct-trade containers
   the tile is a plain stacked block: visual on top, caption below. */
.trade-items .trade-card, .trade-review-cards .trade-card, .gift-modal .trade-card { display: block; }
.trade-items .trade-card[data-card] { cursor: pointer; }
/* Packs are fixed at --pw:200px for the opening view; in trade tiles
   they take the tile's width (their inner type scales off --pw). */
.trade-items .pack { --pw: 92px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.45)); }
.trade-review-cards .pack { --pw: 118px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.45)); }
/* Dock chips stay on one line; long set names ellipsize instead of
   wrapping the chip into a blob. */
.trade-chip { min-width: 0; max-width: 100%; }
.trade-chip b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trade-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.trade-chip { display: inline-flex; align-items: center; gap: 6px; background: #2a2a32; border: 1px solid #4a4a55; border-radius: 16px; padding: 3px 4px 3px 10px; font-size: .8rem; }
.trade-chip b { font-weight: 600; }
.chip-variant { font-size: .72rem; font-weight: 800; background: linear-gradient(90deg,#ff5f5f,#ffb21e,#38c97f,#3f8cff,#b35cff); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; }
.gift-copies { display: grid; gap: 6px; margin: 10px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.gift-copies .fld-label { font-size: .8rem; color: var(--muted); font-weight: 700; }
.chip-holo { border: none; background: none; color: #666; cursor: pointer; font-size: 14px; padding: 2px 4px; }
.chip-holo.on { color: #f5b942; text-shadow: 0 0 6px #f5b942; }
.chip-x { border: none; background: none; color: #999; cursor: pointer; font-size: 14px; padding: 2px 6px; }
.chip-x:hover { color: #fff; }
.prof-set { cursor: pointer; transition: border-color .15s; }
.prof-set:hover { border-color: #f5b942; }
.trade-panel-actions { display: flex; gap: 10px; align-items: center; margin-top: 4px; flex-wrap: wrap; }
.trade-panel-actions .btn { display: inline-flex; align-items: center; justify-content: center; line-height: 1.4; margin: 0; }
.player-name-row { display: flex; align-items: center; gap: 8px; }
.pill-you { font-size: .65rem; padding: 1px 8px; }

/* Spin ticket jackpot card — styling lives on .face.front (surprise.css) so the
   whole card flips like a normal card; a background/border here on the outer
   element never rotates and breaks the flip illusion. */
.ticket-card { position: relative; }
.ticket-face { display: none; flex-direction: column; align-items: center; justify-content: center; height: 100%; font-size: 35cqw; gap: 6cqw; padding: 6cqw; text-align: center; }
.ticket-card.flipped .ticket-face { display: flex; }
.ticket-face b { font-size: 12.8cqw; line-height: 1.15; color: #a5d6a7; letter-spacing: 0.1em; }
.ticket-face span { font-size: 10.5cqw; color: #c8e6c9; }

/* Game token slip card */
.token-card { position: relative; }
.token-face { display: none; flex-direction: column; align-items: center; justify-content: center; height: 100%; font-size: 35cqw; gap: 6cqw; padding: 6cqw; text-align: center; }
.token-card.flipped .token-face { display: flex; }
.token-face b { font-size: 11.7cqw; line-height: 1.15; color: #ffd97a; letter-spacing: 0.08em; }
.token-face span { font-size: 10.5cqw; color: #ffe9b8; }

/* Store credit slip card */
.credit-card { position: relative; }
.credit-face { display: none; flex-direction: column; align-items: center; justify-content: center; height: 100%; font-size: 35cqw; gap: 6cqw; padding: 6cqw; text-align: center; }
.credit-card.flipped .credit-face { display: flex; }
.credit-face b { font-size: 11.7cqw; line-height: 1.15; color: #9ff0bb; letter-spacing: 0.08em; }
.credit-face span { font-size: 10.5cqw; color: #c9f5d8; }

/* Higher/Lower game */
.game-table { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.game-card .card { width: 180px; }
.game-streak { font-size: 1.05rem; }
.prize-box { width: 100%; max-width: 420px; border: 1px dashed #888; border-radius: 10px; padding: 10px 12px; }
.prize-box b { display: block; margin-bottom: 6px; }
.bank-prize { display: inline-block; background: #243; border: 1px solid #4caf50; border-radius: 999px; padding: 3px 10px; margin: 2px 4px 2px 0; font-size: 0.9rem; }
.game-over { font-size: 1.1rem; font-weight: 700; }

/* Traditional playing card for Higher/Lower */

/* Big number card for Higher/Lower */
.numcard { width: 150px; height: 210px; background: linear-gradient(135deg, #232342, #2e2e5a);
  border: 2px solid #6b6bd6; border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center; }
.numcard span { font-size: 5.5rem; font-weight: 800; color: #fff; text-shadow: 0 2px 12px rgba(107,107,214,.6); }

/* Arcade tab: public */

/* Arcade lobby */
.arcade-tokens { font-size: 1.15rem; margin-top: 4px; }

/* Market tab: Buyers/Sellers toggle */
.market-toggle { display: flex; gap: 8px; margin-bottom: 16px; }
.market-toggle-btn { flex: 1; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel2); color: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; position: relative; }
.market-toggle-btn.active { border-color: #f5b942; background: #1d1a12; color: #f5b942; }
.market-toggle-btn .tab-badge { position: absolute; top: 8px; right: 12px; }

/* Shop tab — Balatro-style booth */
.shop-head { padding: 16px; }
.shop-title-row { display: flex; align-items: center; justify-content: space-between; }
.shop-head h2 { margin: 0; }
.shop-balance { font-size: 1.3rem; }
.shop-restock { margin-top: 8px; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin: 16px 0; }
/* Booth visuals are fixed-width (200px + 32px booth padding at >=600px,
   140px below it): once the visuals are 200px, a booth needs a 232px
   floor or the stage overflows its booth at mid widths. */
@media (min-width: 600px) { .shop-grid { grid-template-columns: repeat(auto-fit, minmax(152px, 1fr)); gap: 12px; } }
@media (min-width: 1250px) { .shop-grid { grid-template-columns: repeat(auto-fit, minmax(182px, 1fr)); gap: 16px; } }
@media (min-width: 1600px) { .shop-grid { grid-template-columns: repeat(auto-fit, minmax(204px, 1fr)); } }
.shop-booth { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px; text-align: center; display: flex; flex-direction: column; }
.shop-hint { min-height: 15px; margin-top: 6px; }
/* Uniform visual stage: packs come in different aspect ratios (Calendar is square 1/1,
   most are 5/8), so every booth reserves the same visual height and centers the pack —
   names, prices and Buy buttons then line up across the row. */
.shop-info { display: flex; flex-direction: column; flex: 1; }
.shop-info .shop-left { flex: 1; }
.shop-deal-tag { position: absolute; top: -10px; right: 12px; background: linear-gradient(135deg, #ffd700, #ffb700); color: #1a1a1a; font-weight: 800; font-size: .75rem; padding: 4px 12px; border-radius: 999px; letter-spacing: .05em; }
/* pack visuals use CPS.cards.pack with .shop-pack-size */
.shop-info .shop-packname { font-size: 1rem; margin: 0 0 4px; }
.shop-price { font-size: 1.3rem; font-weight: 800; margin: 8px 0; }
.shop-info .btn { width: 100%; margin-top: 8px; }
.shop-pack-wrap { display: flex; justify-content: center; align-items: center; height: 224px; margin-bottom: 12px; }
/* fixed pixel --pw so the emblem font-size calc works; 140px fits mobile 2-col */
.shop-pack-wrap .pack { --pw: 140px; }
/* mystery matches the pack size */
.shop-mystery {
  width: 140px; height: 224px; margin: 0 auto 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, #1a1a2e, #0f0f1a);
  border: 2px dashed var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
@media (min-width: 600px) {
  .shop-pack-wrap .pack { --pw: 120px; }
  .shop-pack-wrap { height: 192px; }
  .shop-mystery { width: 120px; height: 192px; }
}
@media (min-width: 1250px) {
  .shop-pack-wrap .pack { --pw: 150px; }
  .shop-pack-wrap { height: 240px; }
  .shop-mystery { width: 150px; height: 240px; }
}
@media (min-width: 1600px) {
  .shop-pack-wrap .pack { --pw: 172px; }
  .shop-pack-wrap { height: 275px; }
  .shop-mystery { width: 172px; height: 275px; }
}

.shop-ticket {
  width: 140px; height: 224px; margin: 0 auto 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, #0d2b1d, #0a1a12);
  border: 2px dashed #2ecc71;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
@media (min-width: 600px) {
  .shop-ticket { width: 120px; height: 192px; }
}
@media (min-width: 1250px) {
  .shop-ticket { width: 150px; height: 240px; }
}
@media (min-width: 1600px) {
  .shop-ticket { width: 172px; height: 275px; }
}
.shop-ticket-icon { font-size: 3rem; filter: drop-shadow(0 0 14px rgba(46,204,113,.45)); }
.shop-deal-tag.ticket { background: linear-gradient(135deg, #27ae60, #1e8449); color: #fff; }
.shop-mystery-q { font-size: 3rem; font-weight: 900; color: var(--gold); text-shadow: 0 0 20px rgba(255,215,0,.4); }
.shop-deal-tag.mystery { background: linear-gradient(135deg, #9b59b6, #8e44ad); color: #fff; }
/* FAQ & How to Play (static view, linked from the account menu) */
.faq-panel { padding: 20px 22px; max-width: 860px; margin: 0 auto; }
.faq-panel h2 { margin-top: 0; }
.faq-sec { margin: 26px 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.faq-item { margin: 14px 0; }
.faq-q { margin: 0 0 4px; font-size: 1rem; color: var(--text); text-transform: none; letter-spacing: normal; }
.faq-a { margin: 0; color: var(--muted); line-height: 1.5; }

/* --- turn-ins + the Vault (108) --- */
.badge-turned { background: #14532d; color: #86efac; border-radius: 999px; font-weight: 800; box-shadow: 0 2px 8px rgba(0,0,0,.35); display: inline-flex; align-items: center; justify-content: center; min-width: 18px; }
.badge-vault { background: #3a2c07; color: #f5b942; border-radius: 999px; font-weight: 800; box-shadow: 0 2px 8px rgba(0,0,0,.35); display: inline-flex; align-items: center; justify-content: center; min-width: 18px; }
.coll-item.vaulted .card { box-shadow: 0 0 0 1px rgba(245,185,66,.65), 0 0 10px rgba(245,185,66,.18); }
.coll-item.turned .card { box-shadow: 0 0 0 2px #34d399, 0 0 16px rgba(52,211,153,.35); }
.turned-note { color: #4ade80; font-weight: 700; }
.owned-note { color: var(--accent); font-weight: 700; }
.vault-tag { color: #f5b942; font-weight: 700; }
.vault-box { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vault-title { width: 100%; font-weight: 800; font-size: .85rem; color: #f5b942; }
.turnin-btn { margin-top: 10px; border-color: rgba(52,211,153,.5); color: #4ade80; }
.confirm-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.coll-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; margin: 0 0 10px; }
.coll-actions .btn { max-width: 100%; white-space: normal; text-align: center; }

/* --- account menu (header chip dropdown) --- */
.acct-menu { position: fixed; z-index: 300; min-width: 196px; max-height: calc(100vh - 76px); overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 6px; box-shadow: 0 14px 34px rgba(0,0,0,.45); display: flex; flex-direction: column; gap: 2px; }
.acct-menu-item { text-align: left; background: none; border: 0; color: var(--text); padding: 9px 10px; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer; }
.acct-menu-item:hover { background: rgba(255,255,255,.07); }

/* Baked-in backs reframed (Franklin, 2026-10-14): the Space and Plants card
   backs sit INSIDE the standard site frame again — theme-gradient surround,
   4cqw inset, frame border — instead of edge-to-edge, so the back art matches
   front proportions. The baked art itself and the hidden printed dressing
   (no diamond, no set name) are unchanged. */
.card[data-set="space"] .back { padding: 4cqw; background: linear-gradient(145deg, var(--p1), var(--p2)); }
.card[data-set="space"] .cb { border: 1.2cqw solid rgba(255,255,255,.55); border-radius: 3.5cqw; }
.card[data-set="plants"] .back { padding: 4cqw; background: linear-gradient(145deg, var(--p1), var(--p2)); }
.card[data-set="plants"] .cb { border: 1.2cqw solid rgba(255,255,255,.55); border-radius: 3.5cqw; }

/* Pack shine crosses the tear line (Franklin, 2026-10-15): the sweep element
   lives in .pack-body, whose box starts below the seal and clips it
   (overflow: hidden), so the light never reached the pack's top flap. A twin
   element (.pack-shine-top, rendered by cardface inside .pack-top) shows the
   SAME sweep through a window: it is sized and positioned exactly like the
   body's shine element in pack space (2pw wide, twice the body height tall,
   top edge at -.536pw), so the band runs unbroken across the cutline and the
   two stay in sync (same keyframes, duration, easing). .pack-top clips the
   twin to the flap, so it tears away with the seal. Square packs
   (Calendar/Periodic, 1/1) get their matching geometry below. */
.pack-top { overflow: hidden; }
.pack-shine-top { position: absolute; left: calc(var(--pw) * -.5); top: calc(var(--pw) * -.536); width: calc(var(--pw) * 2); height: calc(var(--pw) * 2.848); background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.45) 50%, transparent 60%); animation: shine 3.5s ease-in-out infinite; pointer-events: none; }
.pack-skin-calendar .pack-shine-top, .pack-skin-periodic .pack-shine-top { top: calc(var(--pw) * -.335); height: calc(var(--pw) * 1.78); }

/* Bundle gift composer (js/giftbundle.js, migration 181) */
.gb-controls { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 10px; }
.gb-controls select, .gb-controls input[type="search"], .gb-controls input[type="number"] { flex: 1 1 140px; }
.gb-num { flex: 1 1 140px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.gb-recap { margin: 10px 0 4px; font-size: 14px; }
.gb-picked { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.gb-picked .btn { margin-left: auto; }
.gb-grid { max-height: 46vh; overflow-y: auto; }
.gb-grid .trade-pick { position: relative; }
.gb-n { position: absolute; top: 4px; right: 4px; background: rgba(20,16,40,.85); color: #ffd75e;
  font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 999px; pointer-events: none; }
.gb-pickrows { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 2px; }
.gb-pickrow { display: flex; justify-content: space-between; align-items: center; gap: 8px; text-align: left;
  background: var(--panel2, #241f3a); border: 1px solid var(--line, #3a3358); border-radius: 8px;
  padding: 6px 10px; color: inherit; font-size: 13px; cursor: pointer; }
.gb-pickrow.on { border-color: #ffd75e; }
.gb-x { color: #ff9d9d; font-weight: 700; padding: 0 4px; }

/* --- Support / donate page (js/donate.js; unlinked #donate view) --- */
.dn-panel { padding: 20px 22px; max-width: 860px; margin: 0 auto; }
.dn-panel h2 { margin-top: 0; }
.dn-lede { font-size: 1.1rem; margin: 0 0 6px; }
.dn-amounts { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 10px; }
.dn-amt.on { background: linear-gradient(135deg, var(--accent), #5a48e8); border-color: transparent; color: #fff; box-shadow: 0 6px 20px rgba(124,108,255,.35); }
.dn-custom { display: flex; align-items: center; gap: 10px; color: var(--muted); margin: 6px 0; }
.dn-custom input { width: 110px; }
.dn-summary { font-weight: 700; margin: 10px 0 8px; }
.dn-trust { text-align: center; font-weight: 700; color: var(--good); margin: 10px 0 4px; }
.dn-costs, .dn-perks { color: var(--muted); line-height: 1.6; margin: 8px 0; padding-left: 20px; }
.dn-bar { margin: 12px 0 6px; }
.dn-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent2)); }