/* Layout: sticky wallet bar, one 1180px column, booster shelf as a wrapping grid; opening happens on a full-screen night stage. */
:root {
  --bg: #fff6fa;
  --surface: #ffffff;
  --sunk: #f6e9f1;
  --ink: #2b1838;
  --muted: #7d6a88;
  --line: #ecd9e6;
  --accent: #e0408a;
  --accent-ink: #ffffff;
  --sky: #2f9be8;
  --good: #1f9d68;
  --stage: #120d1c;

  --t0: #8f98a3;
  --t1: #27a86f;
  --t2: #2f8fe0;
  --t3: #9b51e0;
  --t4: #e99a12;
  --t5: #e0408a;
  --rainbow: linear-gradient(100deg, #ff5e7e, #ffb238 22%, #ffe14d 40%, #4cd38a 58%, #45b4ff 76%, #a46bff);

  --f-display: "Bagel Fat One", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --f-body: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;

  --r: 14px;
  --shadow: 0 1px 2px rgba(60, 20, 60, .06), 0 6px 20px rgba(60, 20, 60, .08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #160f1f; --surface: #20172c; --sunk: #2a2038; --ink: #f7eef9; --muted: #ab9bba; --line: #3a2d4a;
    --accent: #ff69ad; --accent-ink: #20102a; --sky: #5bb3f3; --good: #4fd19a; --t0: #a8b0ba; --t1: #4fd19a; --t2: #5bb3f3; --t3: #b984f2; --t4: #ffbe45; --t5: #ff69ad;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #160f1f; --surface: #20172c; --sunk: #2a2038; --ink: #f7eef9; --muted: #ab9bba; --line: #3a2d4a;
  --accent: #ff69ad; --accent-ink: #20102a; --sky: #5bb3f3; --good: #4fd19a; --t0: #a8b0ba; --t1: #4fd19a; --t2: #5bb3f3; --t3: #b984f2; --t4: #ffbe45; --t5: #ff69ad;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font: 500 15px/1.5 var(--f-body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 400; line-height: 1.05; margin: 0; text-wrap: balance; letter-spacing: .005em; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }

/* ---------- top bar ---------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--surface); }
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top-in, .wrap, .foot-in { max-width: 1180px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
/* two rows: logo + wallet, then the nav (scrolls sideways when it does not fit) */
.top-in { display: flex; align-items: center; gap: 6px 20px; padding-block: 10px 6px; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 8px; font-family: var(--f-display); font-size: 22px; text-decoration: none; }
.logo-mark { width: 26px; height: 26px; border-radius: 8px; background: var(--rainbow); box-shadow: inset 0 0 0 3px var(--surface), 0 0 0 1px var(--line); }
.nav { order: 3; flex: 1 0 100%; display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; margin-inline: -8px; padding: 0 8px 2px; }
.nav::-webkit-scrollbar { display: none; }
.nav a { position: relative; flex: none; white-space: nowrap; text-decoration: none; font-weight: 800; padding: 6px 12px; border-radius: 999px; color: var(--muted); }
.nav a:hover { color: var(--ink); background: var(--sunk); }
.nav a.on { color: var(--ink); background: var(--sunk); }
.dot { position: absolute; top: 5px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.wallet { display: flex; gap: 8px; margin-left: auto; min-width: 0; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--sunk); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pill small { color: var(--muted); font-weight: 700; }
.ico { display: inline-block; width: 14px; height: 14px; }
.ico-pack { border-radius: 3px; background: var(--accent); clip-path: polygon(0 8%, 12% 0, 25% 8%, 37% 0, 50% 8%, 62% 0, 75% 8%, 87% 0, 100% 8%, 100% 92%, 87% 100%, 75% 92%, 62% 100%, 50% 92%, 37% 100%, 25% 92%, 12% 100%, 0 92%); }
.ico-bit { border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe9a3, #e9a417 60%, #b97a06); }
@media (max-width: 720px) {
  .top-in { gap: 6px 10px; }
  .nav { margin-inline: -16px; padding-inline: 12px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 24px), transparent); }
  .nav a { padding: 6px 10px; }
}
@media (max-width: 520px) {
  .logo { font-size: 0; gap: 0; }
  .wallet { gap: 5px; }
  .pill { padding: 5px 9px; gap: 5px; }
  .acct b { max-width: 84px; overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- generic ---------- */
main { display: block; min-height: 60vh; outline: none; }
.wrap { padding-block: 24px 48px; display: grid; gap: 36px; }
.wrap > * { min-width: 0; }
.sec-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.sec-head h2 { font-size: clamp(26px, 4vw, 34px); }
.sec-head p { margin: 4px 0 0; color: var(--muted); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; border-radius: 999px; padding: 11px 20px; font-weight: 900; text-decoration: none; background: var(--sunk); color: var(--ink); transition: transform .12s, filter .12s; white-space: nowrap; }
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-main { background: var(--accent); color: var(--accent-ink); box-shadow: 0 4px 0 color-mix(in srgb, var(--accent) 60%, #000); }
.btn-main:active { box-shadow: 0 2px 0 color-mix(in srgb, var(--accent) 60%, #000); }
.btn-gold { background: linear-gradient(180deg, #ffd96a, #f2a91c); color: #3a2300; box-shadow: 0 4px 0 #b77a06; }
.btn-sm { padding: 7px 14px; font-size: 14px; }
.btn-ghost { background: transparent; box-shadow: inset 0 0 0 2px var(--line); }
.btn-danger { background: #d23b3b; color: #fff; box-shadow: 0 4px 0 #8e2121; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 0; cursor: pointer; padding: 6px 13px; border-radius: 999px; font-weight: 800; font-size: 14px; background: var(--sunk); color: var(--muted); }
.chip.on { background: var(--ink); color: var(--bg); }
.bar { height: 8px; border-radius: 99px; background: var(--sunk); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.label { font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* rarity tags */
.rt { display: inline-flex; align-items: center; gap: 5px; font-weight: 900; font-size: 13px; }
.rt::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--tc); }
.rt-0 { --tc: var(--t0); } .rt-1 { --tc: var(--t1); } .rt-2 { --tc: var(--t2); } .rt-3 { --tc: var(--t3); } .rt-4 { --tc: var(--t4); } .rt-5 { --tc: var(--t5); }
.rt-5::before { background: var(--rainbow); }
.code { font-size: 11px; font-weight: 900; padding: 1px 6px; border-radius: 5px; background: var(--sunk); color: var(--muted); letter-spacing: .03em; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; border-radius: 22px; padding: clamp(22px, 4vw, 44px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: center; background: var(--stage); color: #fff; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(1px 1px at 12% 20%, #fff8 50%, transparent 51%), radial-gradient(1.5px 1.5px at 30% 70%, #fff6 50%, transparent 51%),
  radial-gradient(1px 1px at 55% 15%, #fff9 50%, transparent 51%), radial-gradient(1.5px 1.5px at 80% 40%, #fff7 50%, transparent 51%),
  radial-gradient(1px 1px at 90% 85%, #fff8 50%, transparent 51%), radial-gradient(1px 1px at 45% 90%, #fff5 50%, transparent 51%),
  radial-gradient(60% 90% at 85% 50%, #e0408a55, transparent 70%), radial-gradient(50% 80% at 0% 100%, #2f9be833, transparent 70%); }
.hero .label { color: #ffd4ea; }
.hero h1 { font-size: clamp(38px, 7vw, 72px); margin: 8px 0 10px; }
.hero p { margin: 0 0 22px; color: #e6d9ef; max-width: 46ch; }
.hero-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.hero .btn:not(.btn-main):not(.btn-gold) { background: #ffffff1a; color: #fff; }
.fan { position: relative; height: clamp(220px, 30vw, 300px); }
.fan .card { position: absolute; width: clamp(120px, 15vw, 170px); left: 50%; top: 50%; }
.fan .card:nth-child(1) { transform: translate(-115%, -48%) rotate(-12deg); }
.fan .card:nth-child(2) { transform: translate(-50%, -54%); z-index: 2; }
.fan .card:nth-child(3) { transform: translate(15%, -48%) rotate(12deg); }
@media (max-width: 760px) { .hero { grid-template-columns: 1fr; } .fan { order: -1; height: 200px; } .fan .card { width: 110px; } }

/* stat strip */
.strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.stat { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 14px; text-decoration: none; min-width: 0; }
.stat b { font-size: 20px; font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); font-size: 13px; line-height: 1.25; }
.stat .btn { margin-left: auto; }
@media (max-width: 980px) { .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .strip { grid-template-columns: 1fr; } }

/* ---------- booster shelf ---------- */
.shelf { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
@media (max-width: 900px) { .shelf { grid-template-columns: 1fr; } }
.packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 16px 12px; }
.pack-btn { border: 0; background: none; padding: 0; cursor: pointer; text-align: left; display: grid; gap: 6px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pack-btn .meta { font-size: 13px; line-height: 1.25; }
.pack-btn .meta b { display: block; font-weight: 900; }
.pack-btn .meta small { color: var(--muted); font-weight: 700; }
.pack-btn.on .pack { outline: 3px solid var(--accent); outline-offset: 3px; }
/* touch screens keep :hover after a tap: the lift is for mice only */
@media (hover: hover) { .pack-btn:hover .pack { transform: translateY(-4px) rotate(-1deg); } }
.pack-btn:active .pack { transform: scale(.96); transition-duration: .08s; }

/* the foil pack */
.pack { --pc: #e0408a; --pc2: #ff9fca; position: relative; aspect-ratio: 5 / 8; border-radius: 6px; overflow: hidden; transition: transform .18s; background: linear-gradient(160deg, var(--pc2), var(--pc) 55%, color-mix(in srgb, var(--pc) 70%, #000)); box-shadow: 0 6px 14px rgba(40, 10, 40, .25); isolation: isolate; }
.pack::before, .pack::after { content: ""; position: absolute; left: 0; right: 0; height: 9%; z-index: 3; background: repeating-linear-gradient(90deg, #ffffff55 0 3px, #00000022 3px 6px), color-mix(in srgb, var(--pc) 75%, #000); }
.pack::before { top: 0; } .pack::after { bottom: 0; }
.pack .art { position: absolute; inset: 15% 12% 24%; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 3px #ffffffcc, 0 6px 14px #0005; background: #0002; }
.pack .art img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pack .shine { position: absolute; inset: 0; z-index: 2; background: linear-gradient(115deg, transparent 30%, #ffffff55 45%, transparent 55%); mix-blend-mode: overlay; }
.pack .ttl { position: absolute; left: 6%; right: 6%; bottom: 10%; z-index: 2; text-align: center; color: #fff; font-family: var(--f-display); font-size: clamp(11px, 1.3vw, 14px); line-height: 1; text-shadow: 0 2px 0 #0004; }
.pack .brand { position: absolute; top: 9.5%; left: 0; right: 0; z-index: 2; text-align: center; font-size: 9px; font-weight: 900; letter-spacing: .18em; color: #fffc; }
.pack.g-t4 { --pc: #e0408a; --pc2: #ffb3d6; }
.pack.g-t5 { --pc: #c98a0b; --pc2: #ffe08a; }
.pack.g-t3 { --pc: #6b4de6; --pc2: #9fd8ff; }
.pack.g-t2 { --pc: #1f86d6; --pc2: #a9e2ff; }
.pack.g-sp { --pc: #179c78; --pc2: #a5f0cf; }
.pack.g-moon { --pc: #3d3a9e; --pc2: #b9c4ff; }
.pack.g-fun { --pc: #e0408a; --pc2: #ffb3d6; }
.pack.g-rainbow { --pc: #6b4de6; --pc2: #9fd8ff; }
.pack.g-star { --pc: #c98a0b; --pc2: #ffe08a; }
.pack.g-moon-cn { --pc: #8a1d3f; --pc2: #ffb0c4; }
.pack.g-rainbow-cn { --pc: #1f86d6; --pc2: #a9e2ff; }
.pack.g-game-cn { --pc: #179c78; --pc2: #a5f0cf; }
.pack.g-game { --pc: #0f6f8a; --pc2: #9ff0e6; }
.pack.g-pr { --pc: #3b2a55; --pc2: #c7a6ff; }
.pack.g-mix { --pc: #d63d86; --pc2: #8fd3ff; }
.pack.g-mix::before, .pack.g-mix::after { background: repeating-linear-gradient(90deg, #ffffff55 0 3px, #00000022 3px 6px), var(--rainbow); }
.pack.g-daily { --pc: #f07b1d; --pc2: #ffe46b; }
.pack.g-gold { --pc: #b98207; --pc2: #fff2b0; }

/* detail panel */
.detail { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 76px); padding: 20px; display: grid; gap: 16px; }
.detail .dhead { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; }
.detail h3 { font-size: 24px; }
.odds { width: 100%; border-collapse: collapse; font-size: 14px; }
.odds td { padding: 5px 0; border-bottom: 1px dashed var(--line); }
.odds td:last-child { text-align: right; font-weight: 900; font-variant-numeric: tabular-nums; }
.acts { display: grid; gap: 8px; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; }
.facts div { background: var(--sunk); border-radius: 10px; padding: 8px 4px; }
.facts b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
.facts span { font-size: 12px; color: var(--muted); font-weight: 700; }
@media (max-width: 900px) { .detail { position: static; } }

/* ---------- cards ---------- */
.card { --tc: var(--t0); position: relative; aspect-ratio: 63 / 88; border-radius: 7% / 5%; background: var(--sunk); overflow: hidden; box-shadow: 0 2px 8px rgba(40, 10, 40, .18); }
.card img { width: 100%; height: 100%; object-fit: cover; }
.card.t1 { --tc: var(--t1); } .card.t2 { --tc: var(--t2); } .card.t3 { --tc: var(--t3); } .card.t4 { --tc: var(--t4); } .card.t5 { --tc: var(--t5); }
.card.t3, .card.t4, .card.t5 { box-shadow: 0 0 0 2px var(--tc), 0 4px 16px color-mix(in srgb, var(--tc) 45%, transparent); }
.card.t5 { box-shadow: 0 0 0 2px #fff, 0 0 18px #ff69ad99, 0 0 32px #45b4ff66; }
.card .fb { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px; text-align: center; font-weight: 900; font-size: 13px; line-height: 1.2; color: var(--muted); }
.card .fb small { font-size: 10px; font-weight: 800; opacity: .8; }
.card.ok .fb { display: none; }
.card.land { background: #120d1c; }
.card.land img { object-fit: contain; }
.card.noimg { background: linear-gradient(160deg, color-mix(in srgb, var(--tc) 30%, var(--surface)), var(--sunk)); }
.card.noimg .fb { color: var(--ink); }
.card.noimg .fb::before { content: ""; width: 34%; aspect-ratio: 1; border-radius: 50%; background: var(--tc); opacity: .35; margin-bottom: 6px; }
.card.noimg.t5 .fb::before { background: var(--rainbow); }
.pack .art:empty::after { content: "Nouveau set"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.card.missing img { filter: grayscale(1) brightness(.35) contrast(.8); opacity: .35; }
.card.missing { box-shadow: inset 0 0 0 2px var(--line); }
.card .qty { position: absolute; right: 6px; bottom: 6px; background: #000a; color: #fff; font-weight: 900; font-size: 12px; padding: 1px 7px; border-radius: 99px; }
.card .new { position: absolute; left: 6px; top: 6px; background: var(--accent); color: var(--accent-ink); font-weight: 900; font-size: 11px; padding: 2px 7px; border-radius: 99px; letter-spacing: .04em; }
.card .nr { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; color: #fff; font-weight: 900; font-size: 12px; text-shadow: 0 1px 2px #000; }
.holo::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; mix-blend-mode: overlay; opacity: .6;
  background: radial-gradient(farthest-corner circle at calc(50% + var(--mx, 0) * 120%) calc(50% + var(--my, 0) * 120%), #ffffffd0 0, #ffffff40 16%, transparent 48%); }
.holo::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; mix-blend-mode: color-dodge;
  opacity: calc(.3 + (max(var(--mx, 0), -1 * var(--mx, 0)) + max(var(--my, 0), -1 * var(--my, 0))) * .6);
  background: repeating-linear-gradient(calc(118deg + var(--mx, 0) * 40deg), #ff7ab855 0%, #ffe56a55 6%, #6affc455 12%, #6ab8ff55 18%, #c58aff55 24%, #ff7ab855 30%), repeating-linear-gradient(-45deg, #ffffff14 0 1px, transparent 1px 6px);
  background-size: 240% 240%, auto; background-position: calc(50% + var(--mx, 0) * 90%) calc(50% + var(--my, 0) * 90%), 0 0; }
.holo.t4::after { background-image: repeating-linear-gradient(calc(118deg + var(--mx, 0) * 40deg), #fff3c455 0%, #ffbe4566 8%, #fffbe855 14%, #e9a21255 22%, #fff3c455 30%), radial-gradient(#ffffff40 1px, transparent 1.6px); background-size: 240% 240%, 9px 9px; }
.holo.t5::after { opacity: calc(.32 + (max(var(--mx, 0), -1 * var(--mx, 0)) + max(var(--my, 0), -1 * var(--my, 0))) * .5);
  background-image: repeating-linear-gradient(calc(118deg + var(--mx, 0) * 50deg), #ff5e7e88 0%, #ffb23888 5%, #ffe14d88 10%, #4cd38a88 15%, #45b4ff88 20%, #a46bff88 25%, #ff5e7e88 30%), radial-gradient(#ffffff55 1px, transparent 1.6px); background-size: 220% 220%, 7px 7px; }

/* album grid */
.album { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 14px 12px; }
.album .cell { border: 0; padding: 0; background: none; cursor: pointer; display: grid; gap: 5px; text-align: left; }
.album .cell .cap { display: flex; justify-content: space-between; gap: 4px; align-items: center; font-size: 12px; font-weight: 800; min-width: 0; }
.album .cell .cap span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 420px) { .album { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; } }

/* set list */
.setlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.setrow { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 12px; text-decoration: none; align-items: center; }
.setrow:hover { border-color: var(--accent); }
.setrow b { display: block; }
.setrow small { color: var(--muted); font-weight: 700; }
.setrow .bar { margin-top: 6px; }
.setrow.done .bar > i { background: var(--rainbow); }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.search { border: 2px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 8px 14px; font: inherit; font-weight: 700; min-width: 0; width: 240px; max-width: 100%; }
.back { display: inline-flex; gap: 6px; font-weight: 800; color: var(--muted); text-decoration: none; margin-bottom: 8px; }
.back:hover { color: var(--ink); }

/* feed */
.feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.pull { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px; border: 0; cursor: pointer; text-align: left; }
.pull .card { width: 44px; border-radius: 4px; }
.pull b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pull small { color: var(--muted); font-weight: 700; }
.empty { padding: 28px; text-align: center; color: var(--muted); border: 2px dashed var(--line); border-radius: var(--r); }

/* steps */
.how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.how div { padding: 18px; }
.how h3 { font-size: 20px; margin: 4px 0 6px; }
.how p { margin: 0; color: var(--muted); }
.how .label { color: var(--accent); }
@media (max-width: 760px) { .how { grid-template-columns: 1fr; } }

/* ponies */
.ponies { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.pony { display: grid; gap: 8px; padding: 10px; text-decoration: none; }
.pony .card { border-radius: 8px; aspect-ratio: 1; }
.pony .card img { object-position: top; }
.pony b { font-size: 14px; line-height: 1.2; }
.pony small { color: var(--muted); font-weight: 800; font-size: 12px; }
.pony.locked .card img { filter: brightness(0) saturate(0); opacity: .35; }
.pony-head { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; align-items: center; }
.pony-head h1 { font-size: clamp(34px, 6vw, 56px); margin-bottom: 8px; }
.pony-head p { max-width: 62ch; margin: 0 0 12px; }
@media (max-width: 600px) { .pony-head { grid-template-columns: 110px minmax(0, 1fr); gap: 14px; } }

/* missions */
.missions { display: grid; gap: 10px; }
.mission { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 14px 16px; }
.mission b { display: block; }
.mission .bar { grid-column: 1; }
.mission.claimed { opacity: .55; }
.streak { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.day { padding: 12px 6px; text-align: center; border-radius: 12px; background: var(--sunk); display: grid; gap: 2px; }
.day b { font-size: 15px; }
.day small { color: var(--muted); font-weight: 800; font-size: 12px; }
.day.got { background: color-mix(in srgb, var(--good) 18%, var(--surface)); }
.day.today { box-shadow: inset 0 0 0 2px var(--accent); }
@media (max-width: 560px) { .streak { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* rules */
.rules { display: grid; gap: 18px; max-width: 820px; }
.rules p, .rules li { color: var(--muted); }
.rules strong { color: var(--ink); }
.tbl-wrap { overflow-x: auto; }
.legal { overflow-wrap: anywhere; }
.legal ul { padding-left: 1.2em; }
.legal li + li { margin-top: 6px; }
.legal .code { font-size: 12px; letter-spacing: 0; white-space: nowrap; }
.legal-h4 { font-size: 16px; margin: 18px 0 6px; }
.legal-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; margin: 0; }
.legal-dl dt { font-weight: 800; color: var(--ink); }
.legal-dl dd { margin: 0; color: var(--muted); }
@media (max-width: 560px) { .legal-dl { grid-template-columns: minmax(0, 1fr); gap: 2px; } .legal-dl dd { margin-bottom: 10px; } }
.tbl { border-collapse: collapse; width: 100%; font-size: 14px; }
.tbl th, .tbl td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.tbl td.n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 800; }

/* ---------- opening stage (always dark) ---------- */
/* registered so the holo shimmer and the zoom tilt can be animated when nobody is pointing */
@property --mx { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --my { syntax: '<number>'; inherits: true; initial-value: 0; }
.stage { position: fixed; inset: 0; z-index: 50; background: radial-gradient(80% 60% at 50% 40%, #2a1a40, #0c0814 75%); color: #fff; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: calc(env(safe-area-inset-top, 0px) + 14px) max(16px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 18px) max(16px, env(safe-area-inset-left, 0px)); overflow: hidden; }
.stage { outline: none; touch-action: manipulation; animation: zfade .2s ease-out both; }
html.no-scroll, html.no-scroll body { overflow: hidden; }
.stage > .stage-top, .stage > .stage-mid, .stage > .stage-bot { position: relative; z-index: 1; }
.stage-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.stage-top b { font-family: var(--f-display); font-weight: 400; font-size: 20px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-top .btn { background: #ffffff1a; color: #fff; min-height: 44px; min-width: 44px; flex: none; }
.stage .btn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.stage .btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* the scene before the opening: payment choice, one big obvious button within thumb reach */
.ob-acts { display: grid; justify-items: center; gap: 10px; width: min(100%, 380px); margin: 0 auto; }
.btn-open { position: relative; width: 100%; min-height: 64px; padding: 10px 24px; flex-direction: column; gap: 2px; line-height: 1.15; font-size: 22px; letter-spacing: .01em;
  background: var(--accent); color: #fff; box-shadow: 0 5px 0 color-mix(in srgb, var(--accent) 55%, #000), 0 12px 34px #e0408a66; transition: transform .1s ease-out, opacity .2s; }
.btn-open small { font-size: 13px; font-weight: 800; opacity: .88; letter-spacing: 0; }
.btn-open:active:not([disabled]) { transform: translateY(4px) scale(.985); }
.btn-open[disabled]:not(.is-loading) { opacity: .5; box-shadow: none; }
/* pressed: the button stays bright and turns into the progress indicator */
.btn-open.is-loading { flex-direction: row; gap: 12px; cursor: progress; transform: translateY(4px) scale(.985); opacity: 1; }
.btn-open .spin { display: none; width: 22px; height: 22px; border-radius: 50%; border: 3px solid #ffffff59; border-top-color: #fff; animation: spin .8s linear infinite; }
.btn-open.is-loading .spin { display: block; }
.btn-alt { width: 100%; min-height: 48px; background: #ffffff1f; color: #fff; }
.btn-alt[disabled] { opacity: .55; }
.ob-acts [hidden] { display: none; }
.ob-acts .btn[data-act="skip"] { min-height: 44px; }
.ob-err { margin: 0; width: 100%; padding: 10px 14px; border-radius: 12px; background: #d23b3b2e; box-shadow: inset 0 0 0 2px #ff7b7b88; color: #ffe1e1; font-weight: 800; text-align: center; }
.ob-note { margin: 0; color: #d9c9e6; font-size: 13px; font-weight: 700; }
.ob-info { margin: 0; font-size: 14px; }
.ob-info b { color: #fff; }
@media (max-width: 520px) { .stage-bot { padding-top: 8px; } .btn-open { min-height: 68px; } }
.stage-mid { display: grid; place-items: center; min-height: 0; perspective: 1400px; }
.stage-mid.shake { animation: shake .55s cubic-bezier(.36, .07, .19, .97); }
.stage-bot { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; min-height: 48px; }
.stage-bot .btn:not(.btn-main):not(.btn-gold) { background: #ffffff1f; color: #fff; }
.hint { color: #d9c9e6; font-weight: 800; text-align: center; }
.zhint { margin: 10px 0 0; font-size: 13px; opacity: .75; }
@keyframes shake { 10%, 90% { translate: -2px 1px; } 20%, 80% { translate: 4px -2px; } 30%, 50%, 70% { translate: -8px 3px; } 40%, 60% { translate: 8px -3px; } }

/* the pack: floats in, foil shine sweeps, top strip rips off, body slides away */
.pack-wrap { display: grid; justify-items: center; gap: 18px; }
/* entrance, float and shake each live on their own layer, so switching from one to the next never jumps */
.bp-in { animation: pack-in .75s cubic-bezier(.2, .9, .3, 1.25) both; }
.bp-bob { animation: bob 2.6s ease-in-out .75s infinite; }
.stage.anim .bp-bob { animation-play-state: paused; }
.big-pack { position: relative; display: block; width: min(240px, 52vw, 34vh); cursor: pointer; isolation: isolate; -webkit-tap-highlight-color: transparent; transition: scale .18s; }
@media (hover: hover) { .big-pack:hover { scale: 1.03; } }
.big-pack:active { scale: .97; }
.stage.opening .big-pack { cursor: default; }
/* will-change only for the time of the opening */
.stage.anim .big-pack, .stage.anim .big-pack .pk, .stage.anim .big-pack .pglow, .stage.anim .flip { will-change: transform, opacity; }
.big-pack::before { content: ""; position: absolute; inset: -20% -32%; z-index: -1; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, #ff69ad5c, #a46bff26 55%, transparent); animation: aura 2.6s ease-in-out infinite; }
.big-pack.k-gold::before { background: radial-gradient(closest-side, #ffd76a80, #ffbe4526 55%, transparent); }
.big-pack.k-daily::before { background: radial-gradient(closest-side, #ffb2386b, #ffe14d1f 55%, transparent); }
.big-pack .pk { display: block; }
.big-pack .pk-top { position: absolute; inset: 0; visibility: hidden; transform-origin: 0 12%; clip-path: polygon(-50% -50%, 150% -50%, 150% 12%, 100% 12%, 90% 14%, 80% 11%, 70% 14%, 60% 11%, 50% 14%, 40% 11%, 30% 14%, 20% 11%, 10% 14%, 0 12%, -50% 12%); }
.big-pack .pk-top .pack { box-shadow: none; }
.big-pack .pack { box-shadow: 0 20px 60px #e0408a55, 0 10px 30px #0008; }
.big-pack.k-gold .pack { box-shadow: 0 20px 60px #ffbe4566, 0 10px 30px #0008; }
.big-pack .ttl { font-size: 22px; }
.big-pack .brand { font-size: 12px; }
/* foil sweep: a band three packs wide slides across (transform only) */
.big-pack .shine { inset: 0 auto 0 0; width: 300%; background: linear-gradient(105deg, transparent 42%, #ffffffc8 50%, transparent 58%); transform: translateX(-66.667%); animation: sweep-x 3.2s ease-in-out .7s infinite; }
@keyframes sweep-x { 0% { transform: translateX(-66.667%); } 45%, 100% { transform: translateX(0); } }
/* lit ring around the pack: a fixed shadow that fades in, instead of an animated box-shadow */
.big-pack::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: 6px; pointer-events: none; opacity: 0; transition: opacity .45s;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gc) 80%, #fff), 0 0 36px 8px var(--gc); }
.big-pack.lit::after { opacity: 1; }
.big-pack.tear::after { opacity: 0; transition-duration: .2s; }
.big-pack.h-5::after { box-shadow: 0 0 0 2px #fff, 0 0 30px 8px #ff69ad, 0 0 70px 18px #45b4ff99; }
.big-pack.h-6::after { box-shadow: 0 0 0 3px #fff3c4, 0 0 34px 10px #ffd76a, 0 0 80px 24px #ff69ad88, 0 0 120px 30px #45b4ff55; }
.tear-line { position: absolute; left: -4%; right: -4%; top: 12.5%; height: 4%; translate: 0 -50%; z-index: 4; pointer-events: none; opacity: 0; border-radius: 50%; background: radial-gradient(closest-side, #fff, #fff6d6aa 45%, transparent); }
.big-pack.tear { animation: tug .26s ease-in-out both; pointer-events: none; }
.big-pack.tear::before { animation: none; opacity: 0; transition: opacity .6s .5s; }
.big-pack.tear .pk-top { visibility: visible; transform: translate(26%, -95%) rotate(24deg); opacity: 0; transition: transform .6s .2s cubic-bezier(.3, .6, .4, 1), opacity .4s .45s; }
.big-pack.tear .pk-body { clip-path: polygon(-50% 12%, 0 12%, 10% 14%, 20% 11%, 30% 14%, 40% 11%, 50% 14%, 60% 11%, 70% 14%, 80% 11%, 90% 14%, 100% 12%, 150% 12%, 150% 150%, -50% 150%); transform: translateY(75vh) rotate(-7deg); opacity: 0; transition: transform .5s .7s cubic-bezier(.5, 0, .75, 0), opacity .3s .9s; }
.big-pack.tear .tear-line { animation: tearglow .7s .18s ease-out both; }
.stage.anim .pack-wrap > .hint { opacity: 0; transition: opacity .2s; }
/* the tear keeps the size the pack swelled to while shaking */
@media (prefers-reduced-motion: no-preference) { .big-pack.tear { scale: 1.07; } }
@keyframes pack-in { from { opacity: 0; transform: translateY(46px) scale(.72) rotate(-7deg); } }
@keyframes bob { 50% { transform: translateY(-9px) rotate(1deg); } }
@keyframes aura { 50% { opacity: .55; scale: .92; } }
@keyframes sweep { 0% { background-position: 100% 0; } 45%, 100% { background-position: 0 0; } }
@keyframes tug { 0% { transform: none; } 25% { transform: rotate(-2.5deg) scale(1.03); } 50% { transform: rotate(2.5deg) scale(1.05); } 75% { transform: rotate(-1.5deg) scale(1.05); } 100% { transform: scale(1.04); } }
@keyframes tearglow { 0% { opacity: 0; scale: .3 1; } 25% { opacity: 1; scale: 1.1 1.6; } 100% { opacity: 0; scale: 1.2 1; } }

/* the cards: dealt in from where the pack was, face down, 3D flip */
.row { display: flex; gap: 46px clamp(8px, 1.6vw, 18px); justify-content: center; flex-wrap: wrap; max-width: 1000px; }
.flip { --i: 0; width: clamp(96px, 16vw, 168px); aspect-ratio: 63 / 88; position: relative; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2, .8, .25, 1), translate .2s; cursor: pointer; border: 0; padding: 0; background: none; -webkit-tap-highlight-color: transparent; animation: deal .6s calc(var(--i) * 90ms) backwards cubic-bezier(.2, .8, .3, 1.15); }
.row.dealt .flip { animation: none; }
@keyframes deal { from { translate: 0 38vh; rotate: calc(var(--i) * 7deg - 14deg); scale: .55; opacity: 0; } }
.flip > * { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip .face { transform: rotateY(180deg); }
.flip .face .card { width: 100%; height: 100%; }
.flip.open { transform: rotateY(180deg); cursor: zoom-in; }
.flip.open:hover { translate: 0 -5px; }
.flip.slow { transition-duration: 1.5s, .2s; transition-timing-function: cubic-bezier(.45, 0, .2, 1), ease; }
.row .flip.charge { animation: charge .42s ease-in both; z-index: 2; }
.row .flip.charge.glow-5 { animation-duration: .75s; }
.row .flip.pop { animation: pop .8s cubic-bezier(.2, .8, .3, 1) both; z-index: 2; }
.row .flip.pop.slow { animation-duration: 1.8s; }
.flip.best.glow-4, .flip.best.glow-5 { --s0: 1.12; }
@keyframes charge { 0% { scale: 1; translate: 0 0; } 20% { translate: -2px 1px; } 40% { translate: 3px -1px; } 60% { translate: -4px 2px; } 80% { translate: 4px -3px; } 100% { scale: 1.12; translate: 0 -6px; } }
@keyframes pop { 0% { scale: var(--s0, 1); } 45% { scale: 1.2; } 100% { scale: 1; } }
/* card back: the real Kayou back art, tier hint as outer glow + inner rim/overlay so the art stays visible */
.back-side { border-radius: 7% / 5%; overflow: hidden; background: radial-gradient(120% 90% at 50% 35%, #4a3470, #1d1330 70%); box-shadow: 0 8px 22px #0007; }
.back-side img { width: 100%; height: 100%; object-fit: cover; }
/* a landscape back lies turned a quarter so the face-down card stays a full portrait card */
.back-side img.land { position: absolute; left: 50%; top: 50%; width: 139.7%; height: 71.6%; max-width: none; translate: -50% -50%; rotate: 90deg; }
.back-side::before, .back-side::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
/* rarity hint before the flip: tier glow, stronger for Légendaire, rainbow pulse for Mythique.
   Shadows stay fixed; only the opacity of the rim and the position of the sheens move (compositor only). */
.flip.glow-3 .back-side { box-shadow: 0 0 0 2px #d6a8ff, 0 0 18px 4px #b984f2cc, 0 0 44px 10px #b984f24d; }
.flip.glow-3 .back-side::after { box-shadow: inset 0 0 16px 2px #b984f2aa; animation: hint 1.6s ease-in-out infinite; }
.flip.glow-4 .back-side { box-shadow: 0 0 0 2px #ffe08a, 0 0 26px 8px #ffbe45, 0 0 72px 18px #ffbe4577; animation: wiggle 2.4s ease-in-out 1s infinite; }
.flip.glow-4 .back-side::after { box-shadow: inset 0 0 22px 3px #ffbe45bb; animation: hint 1.1s ease-in-out infinite; }
.flip.glow-4 .back-side::before, .flip.glow-6 .back-side::before { right: auto; width: 300%; border-radius: 0; background: linear-gradient(105deg, transparent 40%, #fff3c477 50%, transparent 60%); transform: translateX(-66.667%); animation: sweep-x 1.8s ease-in-out infinite; }
.flip.glow-5 .back-side { box-shadow: 0 0 26px 10px #ff69ad, 0 0 62px 20px #45b4ffaa, 0 0 100px 30px #ffe14d55; animation: wiggle 1.8s ease-in-out .6s infinite; }
/* the rainbow tile is twice the card wide, repeated: sliding by one tile loops seamlessly */
.flip.glow-5 .back-side::before { right: auto; width: 400%; border-radius: 0; background: var(--rainbow); background-size: 50% 100%; mix-blend-mode: soft-light; opacity: .45; animation: slide-x 2.4s linear infinite; }
.flip.glow-5 .back-side::after { padding: 3px; background: conic-gradient(#ff5e7e, #ffb238, #ffe14d, #4cd38a, #45b4ff, #a46bff, #ff5e7e); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: hint .9s ease-in-out infinite; }
@keyframes huespin { to { filter: hue-rotate(360deg); } }
@keyframes hint { 50% { opacity: .45; } }
@keyframes slide-x { to { transform: translateX(-50%); } }
@keyframes wiggle { 0%, 78%, 100% { rotate: 0deg; } 82% { rotate: -2.5deg; } 86% { rotate: 2.5deg; } 90% { rotate: -1.5deg; } 94% { rotate: 1deg; } }
.flip .tagline { position: absolute; left: 0; right: 0; top: calc(100% + 8px); bottom: auto; transform: rotateY(180deg); text-align: center; font-size: 12px; font-weight: 900; line-height: 1.2; }
.flip .tagline span { display: block; color: #d9c9e6; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* shimmer drifts on its own until a pointer takes over */
.zoom .tilt.idle .duo { animation: holo-idle 5s ease-in-out infinite; }
@keyframes holo-idle { 0%, 100% { --mx: -.32; --my: -.22; } 50% { --mx: .32; --my: .24; } }
.summary { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; font-weight: 800; color: #d9c9e6; margin-top: 56px; }
.summary b { color: #fff; }

/* reveal effects (canvas particles + light DOM layers) */
.fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }
.fx-flash { --fc: #b984f2; position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(circle at var(--x) var(--y), color-mix(in srgb, var(--fc) 70%, #fff) 0, color-mix(in srgb, var(--fc) 45%, transparent) 9%, transparent 26%); animation: flash .8s ease-out both; }
.fx-flash.t4 { --fc: #ffbe45; } .fx-flash.t5 { --fc: #ff69ad; }
.fx-flash.wide { background: radial-gradient(circle at var(--x) var(--y), #fff 0, color-mix(in srgb, var(--fc) 75%, #fff) 7%, color-mix(in srgb, var(--fc) 45%, transparent) 28%, transparent 62%); animation-duration: 1s; }
.fx-flash.full { background: radial-gradient(circle at var(--x) var(--y), #fff 0, color-mix(in srgb, var(--fc) 70%, #fff) 12%, color-mix(in srgb, var(--fc) 40%, transparent) 45%, transparent 90%); animation-duration: 1.3s; }
.fx-flash.full.t5 { background: radial-gradient(circle at var(--x) var(--y), #fff 0, #ffffffcc 9%, transparent 38%), conic-gradient(from 0deg at var(--x) var(--y), #ff5e7eaa, #ffb238aa, #ffe14daa, #4cd38aaa, #45b4ffaa, #a46bffaa, #ff5e7eaa); animation-duration: 1.6s; }
@keyframes flash { 0% { opacity: 0; } 8% { opacity: 1; } 100% { opacity: 0; } }
.fx-rays { --rc: #ffd76a5e; position: absolute; z-index: 0; left: var(--x); top: var(--y); width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax; border-radius: 50%; pointer-events: none; background: repeating-conic-gradient(var(--rc) 0deg 5deg, transparent 5deg 15deg); -webkit-mask-image: radial-gradient(closest-side, #000, #0009 18%, transparent 45%); mask-image: radial-gradient(closest-side, #000, #0009 18%, transparent 45%); animation: rays-in 3.2s ease-out both, spin 16s linear infinite; }
.fx-rays.t5 { background: repeating-conic-gradient(#ff5e7e66 0deg 4deg, transparent 4deg 10deg, #ffe14d66 10deg 14deg, transparent 14deg 20deg, #45b4ff66 20deg 24deg, transparent 24deg 30deg); }
@keyframes rays-in { 0% { opacity: 0; scale: .3; } 12% { opacity: 1; scale: 1; } 70% { opacity: .85; } 100% { opacity: 0; scale: 1.05; } }
@keyframes spin { to { rotate: 360deg; } }
.fx-banner { position: absolute; left: 0; right: 0; top: 13%; z-index: 4; pointer-events: none; text-align: center; font-family: var(--f-display); font-size: clamp(34px, 8.6vw, 96px); line-height: 1; letter-spacing: .02em; white-space: nowrap; animation: banner 2.6s cubic-bezier(.2, .9, .3, 1.2) both; }
.fx-banner span { display: inline-block; padding: 0 .1em; color: transparent; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(180deg, #fffbe8 0%, #ffe08a 38%, #f0a92a 62%, #fff3c4 100%); filter: drop-shadow(0 4px 0 #3a1f0099) drop-shadow(0 0 22px #ffbe45aa); }
.fx-banner.t5 span { background-image: linear-gradient(100deg, #ff5e7e, #ffb238, #ffe14d, #4cd38a, #45b4ff, #a46bff, #ff5e7e, #ffb238); filter: drop-shadow(0 4px 0 #2b183899) drop-shadow(0 0 24px #ff69ad99); }
@keyframes banner { 0% { opacity: 0; scale: 2.2; } 12% { opacity: 1; scale: .94; } 19% { scale: 1.05; } 26%, 80% { opacity: 1; scale: 1; translate: 0 0; } 100% { opacity: 0; scale: 1.02; translate: 0 -12px; } }
@keyframes bfade { 0%, 100% { opacity: 0; } 12%, 80% { opacity: 1; } }
@keyframes slide { to { background-position: -200% 0; } }

/* zoom on a revealed card, inside the stage */
.zoom { position: absolute; inset: 0; z-index: 6; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 16px; background: #07040dd9; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: zoom-out; touch-action: none; outline: none; animation: zfade .25s ease-out both; }
.zoom.out { animation: zfade-out .2s ease-in both; }
.zoom .tilt { height: min(76vh, 126vw, calc(100vh - 160px)); aspect-ratio: 63 / 88; perspective: 1200px; animation: zin .5s cubic-bezier(.2, .9, .25, 1.08) both; }
.zoom .tilt.land, .zoom .tilt:has(> .card.land) { height: auto; width: min(92vw, 104vh, calc((100vh - 160px) * 88 / 63)); aspect-ratio: 88 / 63; }
.zoom.out .tilt { animation: zout .2s ease-in both; }
.zoom .duo { --tilt: 26deg; }
.zoom .card { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 4.5% / 3.2%; box-shadow: 0 0 0 2px #ffffff26, 0 30px 80px #000b; }
.zoom .cardback { border-radius: 4.5% / 3.2%; box-shadow: 0 0 0 2px #ffffff26, 0 30px 80px #000b; }
/* landscape card in the landscape zoom frame: its (landscape) back fills the frame */
.zoom .tilt.land .cardback img.land, .zoom .tilt:has(.card.land) .cardback img.land { object-fit: cover; }
.zoom .turnbtn { background: #ffffff1f; color: #fff; }
.zoom .card.t3, .zoom .card.t4 { box-shadow: 0 0 0 2px var(--tc), 0 0 60px color-mix(in srgb, var(--tc) 55%, transparent), 0 30px 80px #000b; }
.zoom .card.t5 { box-shadow: 0 0 0 2px #fff, 0 0 50px #ff69ad99, 0 0 90px #45b4ff77, 0 30px 80px #000b; }
.zoom .card.noimg .fb { font-size: clamp(16px, 3.4vh, 28px); }
.zoom .card .new { font-size: 14px; padding: 3px 10px; left: 10px; top: 10px; }
.zcap { margin: 0; display: grid; justify-items: center; gap: 2px; text-align: center; color: #fff; max-width: min(92vw, 520px); animation: zfade .3s .15s both; }
.zcap b { font-family: var(--f-display); font-weight: 400; font-size: clamp(20px, 3vh, 28px); line-height: 1.1; }
.zcap > span:last-of-type { color: #d9c9e6; font-weight: 700; font-size: 13px; }
/* two-sided card (stage zoom + detail modal): tilt on .duo, turn on .turn */
.duo { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateY(calc(var(--mx, 0) * var(--tilt, 14deg))) rotateX(calc(var(--my, 0) * var(--tilt, 14deg) * -1)); transition: transform .12s ease-out; }
.turn { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3, .7, .2, 1); }
.tilt.turned .turn { transform: rotateY(180deg); }
.turn > .card, .cardback { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cardback { position: absolute; inset: 0; transform: rotateY(180deg); border-radius: 7% / 5%; overflow: hidden; background: radial-gradient(120% 90% at 50% 35%, #4a3470, #1d1330 70%); box-shadow: 0 2px 8px rgba(40, 10, 40, .18); }
.cardback img { width: 100%; height: 100%; object-fit: cover; }
.cardback:has(img.land) { background: #120d1c; }
.cardback img.land { object-fit: contain; } /* letterboxed like a landscape front in a portrait frame */
.zoom > .zhint { color: #d9c9e6; font-weight: 800; font-size: 12px; opacity: .6; }
@keyframes zfade { from { opacity: 0; } }
@keyframes zfade-out { to { opacity: 0; } }
@keyframes zin { from { transform: var(--from, scale(.6)); opacity: .4; } }
@keyframes zout { to { transform: scale(.88); opacity: 0; } }

/* reduced motion: no particles/shake/rays (skipped in JS), cards cross-fade instead of turning */
@media (prefers-reduced-motion: reduce) {
  .stage, .bp-in, .bp-bob, .big-pack, .big-pack::before, .big-pack .shine, .flip .back-side, .flip .back-side::before, .flip .back-side::after { animation: none !important; }
  .btn-open .spin { animation: spin 1.6s linear infinite !important; }
  .btn-open:active:not([disabled]), .btn-open.is-loading { transform: none; }
  .big-pack.tear .pk-top, .big-pack.tear .pk-body { transform: none; transition: opacity .25s !important; }
  .flip, .flip.open { transform: none; }
  .flip .face, .flip .tagline { transform: none; opacity: 0; transition: opacity .35s !important; }
  .flip .back-side { transition: opacity .35s !important; }
  .flip.open .face, .flip.open .tagline { opacity: 1; }
  .flip.open .back-side { opacity: 0; }
  .zoom { animation: zfade .2s ease-out both !important; }
  .zoom .duo { transform: none; }
  .fx-flash { animation: flash .6s ease-out both !important; }
  .fx-banner { animation: bfade 2.4s ease both !important; }
}

/* modal */
.modal { position: fixed; inset: 0; z-index: 70; background: #0b0612cc; backdrop-filter: blur(6px); display: grid; place-items: center; padding: calc(env(safe-area-inset-top, 0px) + 16px) max(16px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 16px) max(16px, env(safe-area-inset-left, 0px)); overflow-y: auto; }
.mbox { width: min(760px, 100%); display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 26px; align-items: center; padding: 24px; position: relative; }
.mbox .tilt { perspective: 900px; }
.mbox .card { width: 100%; }
.mbox .duo { --tilt: 14deg; }
.mcard { display: grid; gap: 12px; justify-items: center; }
.mcard .tilt { width: 100%; }
.mbox h3 { font-size: 30px; margin: 6px 0 4px; }
.mbox dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 14px 0 18px; font-size: 14px; }
.mbox dt { color: var(--muted); font-weight: 700; }
.mbox dd { margin: 0; font-weight: 800; }
.mbox .x { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--sunk); cursor: pointer; font-size: 18px; font-weight: 900; }
.mbox .acts { grid-template-columns: 1fr; }
@media (max-width: 620px) { .mbox { grid-template-columns: 1fr; padding: 18px; } .mbox .tilt { width: min(220px, 70%); margin: 0 auto; } }
.confirm { display: grid; gap: 14px; padding: 22px; max-width: 420px; }
.confirm div { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

.toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); transform: translate(-50%, 140%); z-index: 90; background: var(--ink); color: var(--bg); font-weight: 800; padding: 10px 18px; border-radius: 999px; transition: transform .25s, opacity .25s; opacity: 0; pointer-events: none; max-width: calc(100% - 32px); text-align: center; }
.toast.on { transform: translate(-50%, 0); opacity: 1; }

.foot { border-top: 1px solid var(--line); }
.foot-in { padding-block: 20px 28px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.foot p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* account */
.acct { border: 0; cursor: pointer; font: inherit; color: var(--ink); background: var(--ink); color: var(--bg); }
.acct .ava { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--rainbow); color: #2b1838; font-size: 11px; font-weight: 900; }
.acct small { color: inherit; opacity: .7; }
.acct .warn { color: var(--t4); opacity: 1; }
.authbox { position: relative; width: min(420px, 100%); padding: 24px; display: grid; gap: 10px; }
.authbox h3 { font-size: 28px; margin-top: 6px; }
.authbox p { margin: 0; }
.authbox label { font-weight: 800; font-size: 14px; margin-top: 4px; }
.authbox input { font: inherit; font-weight: 700; padding: 10px 14px; border-radius: 12px; border: 2px solid var(--line); background: var(--bg); color: var(--ink); }
.authbox input:focus { border-color: var(--accent); outline: none; }
.authbox .btn { margin-top: 6px; }
.authbox .x { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--sunk); cursor: pointer; font-size: 18px; font-weight: 900; color: var(--ink); }
.authbox .chips { padding-right: 40px; }
.err { color: #d23b3b; font-weight: 800; font-size: 14px; }
.kv { display: grid; grid-template-columns: auto auto; justify-content: space-between; gap: 6px 14px; margin: 6px 0; }
.kv dt { color: var(--muted); font-weight: 700; } .kv dd { margin: 0; font-weight: 900; }
.board { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.board li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 12px 16px; }
.board li .bar { grid-column: 2 / -1; }
.board li b { overflow: hidden; text-overflow: ellipsis; }
.board .rank { font-family: var(--f-display); font-size: 22px; color: var(--muted); }
.board li:nth-child(1) .rank { color: var(--t4); } .board li:nth-child(2) .rank { color: var(--t0); } .board li:nth-child(3) .rank { color: #c27a3a; }
.board li.me { border-color: var(--accent); }

/* leaderboard: trade link */
.board .who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
.board .who b { white-space: nowrap; }
.tlink { font-size: 13px; font-weight: 800; color: var(--accent); text-decoration: none; }
.tlink:hover { text-decoration: underline; }

/* ---------- shared: market, trades, admin ---------- */
.pitch { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding: 18px 20px; margin-bottom: 20px; border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.pitch h3 { font-size: 22px; }
.pitch p { margin: 4px 0 0; max-width: 56ch; }
.fee { color: var(--ink); }
.count { margin: 0 0 10px; font-size: 14px; font-weight: 700; }
.chip.toggle { box-shadow: inset 0 0 0 2px var(--line); background: transparent; }
.chip.toggle.on { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.chip[disabled] { opacity: .4; cursor: not-allowed; }
.sub { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 28px 0 10px; }
.sub:first-child { margin-top: 0; }
.sub h3 { font-size: 22px; }
.badge { min-width: 22px; padding: 1px 7px; border-radius: 99px; background: var(--accent); color: var(--accent-ink); font-weight: 900; font-size: 13px; text-align: center; }
.empty.sm { padding: 16px; font-size: 14px; }
.more { display: flex; justify-content: center; margin-top: 18px; }
.more-t { margin: 0; font-size: 13px; font-weight: 700; }
.flag { position: absolute; left: 4px; top: 4px; z-index: 1; max-width: calc(100% - 8px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 900; line-height: 1.5; padding: 0 6px; border-radius: 99px; background: #d23b3b; color: #fff; }
.flag.new-f { background: var(--accent); color: var(--accent-ink); }
.rows { display: grid; gap: 8px; }
.trow, .hrow { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 8px 12px 8px 8px; }
.hrow { grid-template-columns: auto minmax(0, 1fr) auto; padding: 10px 14px; }
.thumb { border: 0; padding: 0; background: none; cursor: pointer; width: 44px; }
.thumb .card { border-radius: 4px; }
.trow-mid { min-width: 0; display: grid; }
.trow-mid b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow-mid small { color: var(--muted); font-weight: 700; font-size: 13px; }
.trow-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.st { justify-self: start; white-space: nowrap; font-size: 12px; font-weight: 900; padding: 2px 9px; border-radius: 99px; background: var(--sunk); color: var(--muted); }
.st-accepted { background: color-mix(in srgb, var(--good) 20%, var(--surface)); color: var(--good); }
.st-bought { background: color-mix(in srgb, var(--sky) 18%, var(--surface)); color: var(--sky); }
@media (max-width: 520px) {
  .hrow { grid-template-columns: minmax(0, 1fr) auto; }
  .hrow .trow-mid { grid-column: 1 / -1; grid-row: 2; }
}
.field, .aform input, .sell input, .bits-in input, .trecap textarea { font: inherit; font-weight: 700; padding: 8px 12px; border-radius: 10px; border: 2px solid var(--line); background: var(--bg); color: var(--ink); min-width: 0; width: 100%; }
.aform input:focus, .sell input:focus, .bits-in input:focus, .trecap textarea:focus { border-color: var(--accent); outline: none; }
.btn-danger:active { box-shadow: 0 2px 0 #8e2121; }

/* market */
.offers { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.offer { display: grid; grid-template-columns: 92px minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 8px 14px; padding: 12px; }
.offer-card { grid-row: 1 / 3; border: 0; padding: 0; background: none; cursor: pointer; align-self: start; }
.offer-card:hover .card { transform: translateY(-3px); }
.offer-card .card { transition: transform .15s; }
.offer-info { display: grid; gap: 2px; align-content: start; min-width: 0; }
.offer-info b { line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.offer-info small { color: var(--muted); font-weight: 700; font-size: 12px; }
.offer-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.offer-buy .price { font-weight: 900; font-size: 20px; line-height: 1.1; }
.offer-buy .price small { font-size: 13px; color: var(--muted); }
.offer-buy > small { flex: 1 1 auto; font-size: 12px; font-weight: 700; }
.offer-buy .btn { margin-left: auto; }
.offer-buy > small:last-child { flex-basis: 100%; text-align: right; }
.sell { display: grid; gap: 8px; padding: 14px; border-radius: 12px; background: var(--sunk); }
.sell label { font-weight: 900; font-size: 14px; }
.sell-row { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.sell-row input { max-width: 160px; background: var(--surface); }
.sell small { font-size: 12px; font-weight: 700; }
.sell-net { margin: 0; font-size: 14px; }
.note-warn { margin: 0; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--t4) 22%, var(--surface)); font-weight: 800; font-size: 13px; }
.sell-acts { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* trades */
.trades { display: grid; gap: 12px; }
.trade { display: grid; gap: 12px; padding: 16px; }
.trade header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.trade header small { font-weight: 700; font-size: 13px; }
.tnote { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--sunk); font-weight: 700; overflow-wrap: anywhere; }
.tsides { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: start; }
.tsides .label { display: block; margin-bottom: 6px; }
.swap { align-self: center; font-size: 22px; font-weight: 900; color: var(--muted); }
.trade footer { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.trade footer small { margin-right: auto; font-size: 13px; font-weight: 700; }
.none { margin: 0; font-size: 14px; }
.minis { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.mini { width: 72px; border: 0; padding: 0; background: none; cursor: pointer; display: grid; gap: 3px; text-align: left; }
.mini .card { border-radius: 5px; }
.mini-f { font-size: 10px; font-weight: 900; line-height: 1.2; color: var(--accent); }
.mini-f.lack { color: #d23b3b; }
.mini.lack .card { box-shadow: 0 0 0 2px #d23b3b; }
.mini .qty { font-size: 11px; right: 3px; bottom: 3px; padding: 0 5px; }
.mini-t { font-size: 11px; font-weight: 800; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bits-chip { display: inline-flex; align-items: center; gap: 6px; align-self: center; padding: 5px 11px; border-radius: 99px; background: var(--sunk); font-weight: 900; font-size: 14px; }
.bits-chip.lack { box-shadow: inset 0 0 0 2px #d23b3b; }
@media (max-width: 640px) {
  .tsides { grid-template-columns: minmax(0, 1fr); }
  .swap { justify-self: center; rotate: 90deg; }
}
.tpick { display: grid; gap: 10px; padding: 16px; margin-bottom: 14px; }
.tpick p { margin: 0; }
.tsearch { display: flex; gap: 8px; flex-wrap: wrap; }
.tsearch .search { flex: 1 1 200px; width: auto; }
.sugg { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sugg:empty { display: none; }
.tpanes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
@media (max-width: 760px) { .tpanes { grid-template-columns: minmax(0, 1fr); } }
.tpane { display: grid; gap: 12px; padding: 16px; align-content: start; }
.tpane h3, .aform h3 { font-size: 22px; }
.tpane .search { width: 100%; }
.tpane-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tpane-tools .search { flex: 1 1 180px; width: auto; }
.tsel { display: grid; gap: 6px; }
.tsel-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px 6px 6px; border-radius: 10px; background: var(--sunk); }
.tsel-row .thumb { width: 40px; }
.tsel-t { min-width: 0; display: grid; }
.tsel-t b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step { display: flex; align-items: center; gap: 6px; }
.step .chip { min-width: 32px; padding: 4px 0; background: var(--surface); color: var(--ink); }
.step b { min-width: 20px; text-align: center; }
.bits-in { display: flex; align-items: center; gap: 8px; font-weight: 800; flex-wrap: wrap; }
.bits-in input { width: 120px; }
.picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 10px 8px; max-height: 460px; overflow-y: auto; padding: 2px; }
.pick { border: 0; padding: 0; background: none; cursor: pointer; display: grid; gap: 3px; text-align: left; min-width: 0; }
.pick .card { border-radius: 5px; }
.pick .qty { font-size: 11px; right: 3px; bottom: 3px; padding: 0 5px; }
.pick.on .card { outline: 3px solid var(--accent); outline-offset: 1px; }
.pick[disabled] { opacity: .4; cursor: not-allowed; }
.trecap { display: grid; gap: 10px; padding: 16px; }
.trecap textarea { resize: vertical; }
.trecap p { margin: 0; }
#tx-recap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }

/* admin */
.strip.tot { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .strip.tot { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.h3 { font-size: 24px; }
.agrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 680px) { .agrid { grid-template-columns: minmax(0, 1fr); } }
.aform { display: grid; gap: 12px; padding: 16px; align-content: start; }
.aform.wide { grid-column: 1 / -1; }
.aform p { margin: 4px 0 0; font-size: 14px; }
.aform .acts { grid-template-columns: 1fr; }
.aform.danger { border-color: color-mix(in srgb, #d23b3b 40%, var(--line)); }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fields label { display: grid; gap: 4px; font-weight: 800; font-size: 14px; }
.fields .wide { grid-column: 1 / -1; margin: 0; }
.aform .picks { max-height: 280px; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); }
.tbl-wrap.panel { padding: 0 4px; }
.adm td, .adm th { white-space: nowrap; vertical-align: middle; }
.adm th.n { text-align: right; }
.adm .th { border: 0; background: none; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.adm th[aria-sort="ascending"] .th, .adm th[aria-sort="descending"] .th { color: var(--ink); }
.adm tbody tr { cursor: pointer; }
.adm tbody tr:hover { background: var(--sunk); }
.adm tbody tr:last-child td { border-bottom: 0; }
.adm a { text-decoration: none; }
.log { padding: 4px 16px; }
.log-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 2px 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; overflow-wrap: anywhere; }
.log-row:last-child { border-bottom: 0; }
@media (max-width: 520px) { .log-row { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .chips.hscroll { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
  .chips.hscroll::-webkit-scrollbar { display: none; }
  .chips.hscroll .chip { flex: none; white-space: nowrap; }
  .toolbar .search { flex: 1 1 100%; width: auto; }
}

/* notifications: bell next to the account button, list in a popover under it */
.bell { position: relative; border: 0; cursor: pointer; font: inherit; color: var(--ink); padding: 5px 9px; }
.bell:hover, .bell[aria-expanded="true"] { background: var(--line); }
.bell-ico { display: block; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--bell) center / contain no-repeat; mask: var(--bell) center / contain no-repeat;
  --bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a6 6 0 0 0-6 6v3.6L4.3 15.3A1 1 0 0 0 5.2 17h13.6a1 1 0 0 0 .9-1.7L18 11.6V8a6 6 0 0 0-6-6Zm-2.8 16.5a3 3 0 0 0 5.6 0Z'/%3E%3C/svg%3E"); }
.bell .badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 900; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--surface); }
.npop { position: fixed; z-index: 60; width: min(360px, calc(100vw - 24px)); max-height: min(480px, calc(100vh - 120px)); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 50px #2b18383a; overflow: hidden; }
.np-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.np-clear { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 800; color: var(--muted); cursor: pointer; padding: 2px 4px; }
.np-clear:hover { color: var(--ink); }
.np-list { overflow-y: auto; overscroll-behavior: contain; }
.np-item { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center; padding: 10px 16px; text-decoration: none; font-size: 14px; line-height: 1.35; border-bottom: 1px solid var(--line); }
.np-item:last-child { border-bottom: 0; }
.np-item:hover { background: var(--sunk); }
.np-item.new { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.np-thumb { width: 36px; height: 50px; border-radius: 4px; background: var(--sunk); overflow: hidden; }
.np-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.np-item small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; font-weight: 700; }
.np-ico { width: 36px; height: 36px; border-radius: 50%; background: var(--sunk); position: relative; }
.np-ico::after { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--muted); }
.np-ico.k-trade_in::after, .np-ico.k-trade_accepted::after { background: var(--accent); }
.np-ico.k-sold::after, .np-ico.k-gift::after { background: var(--t4); }
.np-ico.k-trade_declined::after, .np-ico.k-trade_cancelled::after, .np-ico.k-listing_cancelled::after { background: var(--t0); }
.np-trade { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.np-empty { margin: 0; padding: 24px 16px; color: var(--muted); text-align: center; font-size: 14px; }
@media (max-width: 520px) { .bell { padding: 5px 8px; } }

/* card sheet for a card not owned yet: opens greyed, then fades into colour with a light sweep */
.mcard .card.peek img { transition: filter 1.2s ease, opacity 1.2s ease; }
.mcard .card.peek { transition: box-shadow 1.2s ease; }
.card.peek.missing.holo::before, .card.peek.missing.holo::after { opacity: 0; }
.card.peek .sweep { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, #ffffffb0 50%, transparent 65%); transform: translateX(-130%); }
.card.peek:not(.missing) .sweep { animation: peek-sweep 1.1s .35s ease-out forwards; }
@keyframes peek-sweep { to { transform: translateX(130%); } }
.card .peek-tag { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); background: #000b; color: #fff; font-weight: 900; font-size: 12px; padding: 3px 10px; border-radius: 99px; white-space: nowrap; }

/* utilitaires des gabarits de app.js (la CSP interdit les attributs style="") */
.dprog { display: flex; justify-content: space-between; font-weight: 800; font-size: 14px; margin-bottom: 6px; }
.bar.mb20 { margin-bottom: 20px; }
.bar.mb12 { margin-bottom: 12px; }
.bar.mw420 { max-width: 420px; }
.mt6 { margin-top: 6px; }
.tierline { margin: 0 0 16px; font-size: 14px; }
.ink { color: var(--ink); }
.fw8 { font-weight: 800; }
.h3r { font-size: 22px; margin-bottom: 6px; }
.cmsg { margin: 0; font-weight: 700; }
.hint.mt44 { margin-top: 44px; }
.m0 { margin: 0; }
.fs13 { font-size: 13px; }

/* ---------- v4 : ouverture en 3 temps (secousse, lueur = hint, retournement) ---------- */
/* --k : force de la secousse, --gc : couleur de la lueur, selon le meilleur du booster (6 = numérotée) */
.big-pack { --k: 1; --gc: #d9dee6; }
.big-pack.h-1 { --k: 1.3; --gc: #4fd19a; }
.big-pack.h-2 { --k: 1.7; --gc: #5bb3f3; }
.big-pack.h-3 { --k: 2.3; --gc: #b984f2; }
.big-pack.h-4 { --k: 3; --gc: #ffbe45; }
.big-pack.h-5 { --k: 3.8; --gc: #ff69ad; }
.big-pack.h-6 { --k: 4.4; --gc: #ffd76a; }
.big-pack.shaking { animation: pshake .15s linear infinite, swell 2s ease-in forwards; }
.big-pack.shaking.lit { --k2: 1.7; animation-duration: .11s, 2s; }
@keyframes pshake {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  25% { translate: calc(var(--k) * var(--k2, 1) * -1.6px) calc(var(--k) * .6px); rotate: calc(var(--k) * var(--k2, 1) * -.7deg); }
  50% { translate: calc(var(--k) * var(--k2, 1) * 1.4px) calc(var(--k) * -.8px); rotate: calc(var(--k) * var(--k2, 1) * .6deg); }
  75% { translate: calc(var(--k) * var(--k2, 1) * -1px) calc(var(--k) * .9px); rotate: calc(var(--k) * var(--k2, 1) * -.4deg); }
}
@keyframes swell { to { scale: 1.07; } }
.big-pack .pglow { position: absolute; inset: -34% -62%; z-index: -1; border-radius: 50%; pointer-events: none; opacity: 0; scale: .35;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--gc) 60%, #fff), color-mix(in srgb, var(--gc) 55%, transparent) 38%, transparent);
  transition: opacity .45s ease-out, scale .8s cubic-bezier(.2, .9, .3, 1.25); }
.big-pack.lit .pglow { opacity: 1; scale: 1; animation: gpulse .8s ease-in-out .6s infinite; }
.big-pack.h-5 .pglow, .big-pack.h-6 .pglow { background: radial-gradient(closest-side, #fff 0, #ffffffaa 18%, transparent 45%), conic-gradient(#ff5e7e, #ffb238, #ffe14d, #4cd38a, #45b4ff, #a46bff, #ff5e7e);
  -webkit-mask-image: radial-gradient(closest-side, #000 25%, #0008 55%, transparent); mask-image: radial-gradient(closest-side, #000 25%, #0008 55%, transparent); }
.big-pack.h-5.lit .pglow { animation: gpulse .8s ease-in-out .6s infinite, spin 3s linear infinite; }
.big-pack.h-6 .pglow { background: radial-gradient(closest-side, #fffbe8 0, #ffe08acc 22%, transparent 48%), repeating-conic-gradient(#ffd76a 0 6deg, #ff5e7e 10deg, #ffe14d 16deg, #45b4ff 22deg, #ffd76a 28deg, transparent 30deg 36deg); }
.big-pack.h-6.lit .pglow { animation: gpulse .7s ease-in-out .6s infinite, spin 2.2s linear infinite; }
.big-pack.tear .pglow { opacity: 0; transition: opacity .5s .35s; animation: none; }
@keyframes gpulse { 50% { scale: 1.14; } }
/* the whole stage takes the colour of the hint once the pack lights up */
.stage::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .8s;
  background: radial-gradient(55% 45% at 50% 45%, color-mix(in srgb, var(--sg, #fff) 30%, transparent), transparent 75%); }
.stage.lit::before { opacity: 1; }
.stage.sg-0 { --sg: #a8b0ba; } .stage.sg-1 { --sg: #4fd19a; } .stage.sg-2 { --sg: #5bb3f3; } .stage.sg-3 { --sg: #b984f2; } .stage.sg-4 { --sg: #ffbe45; } .stage.sg-5 { --sg: #ff69ad; } .stage.sg-6 { --sg: #ffd76a; }
.stage.sg-5::before, .stage.sg-6::before { background: radial-gradient(55% 45% at 50% 45%, color-mix(in srgb, var(--sg) 34%, transparent), transparent 75%), radial-gradient(90% 70% at 50% 50%, #45b4ff22, transparent 80%); }
/* skipped: the result shows up at once */
.stage.skipped .flip, .stage.skipped .flip > * { animation: none !important; transition: none !important; }

/* numbered card, face down: gold and rainbow */
.flip.glow-6 .back-side { box-shadow: 0 0 0 2px #fff3c4, 0 0 28px 10px #ffd76a, 0 0 70px 22px #ff69ad88, 0 0 110px 34px #45b4ff55; animation: wiggle 1.6s ease-in-out .5s infinite; }
.flip.glow-6 .back-side::before { background: linear-gradient(105deg, transparent 38%, #fff3c4aa 50%, transparent 62%); animation-duration: 1.4s; }
.flip.glow-6 .back-side::after { padding: 3px; background: conic-gradient(#ffd76a, #ff5e7e, #ffe14d, #45b4ff, #fff3c4, #a46bff, #ffd76a); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: hint .9s ease-in-out infinite; }
.row .flip.charge.glow-6 { animation-duration: .75s; }
.flip.best.glow-6 { --s0: 1.12; }
.flip .tagline .ptag { color: #ffe08a; font-weight: 900; }
.zcap .zprint { color: #ffe08a; font-weight: 900; font-size: 14px; }
.summary .snum b { color: #ffe08a; }
.fx-flash.t6 { --fc: #ffd76a; }
.fx-flash.full.t6 { background: radial-gradient(circle at var(--x) var(--y), #fff 0, #fff3c4dd 10%, transparent 40%), conic-gradient(from 0deg at var(--x) var(--y), #ffd76aaa, #ff5e7eaa, #ffe14daa, #45b4ffaa, #ffd76aaa, #a46bffaa, #ffd76aaa); animation-duration: 1.7s; }
.fx-rays.t6 { background: repeating-conic-gradient(#ffd76a77 0deg 5deg, transparent 5deg 11deg, #ff69ad55 11deg 14deg, transparent 14deg 20deg, #45b4ff55 20deg 23deg, transparent 23deg 30deg); }
.fx-banner.t6 span { background-image: linear-gradient(100deg, #fff3c4, #ffd76a, #ff5e7e, #ffe14d, #45b4ff, #ffd76a, #fff3c4); filter: drop-shadow(0 4px 0 #3a1f0099) drop-shadow(0 0 26px #ffd76aaa); }

/* ---------- exemplaires numérotés : n°, variante, badges, effets de foil ---------- */
.card.pr { box-shadow: 0 0 0 2px #ffe08a, 0 0 16px #ffbe4599; }
.card.pr-holo, .card.pr-exclusive { box-shadow: 0 0 0 2px #fff, 0 0 16px #ff69ad99, 0 0 26px #45b4ff66; }
.card.pr-first { box-shadow: 0 0 0 2px #e6e9ee, 0 0 14px #c9d0d899; }
.card .pfx { position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; }
.pr-holo .pfx { mix-blend-mode: color-dodge; opacity: .5; background: repeating-linear-gradient(115deg, #ff5e7e66 0%, #ffe14d66 5%, #4cd38a66 10%, #45b4ff66 15%, #a46bff66 20%, #ff5e7e66 25%); background-size: 300% 300%; animation: foil 5s linear infinite; }
.pr-brillante .pfx { mix-blend-mode: screen; opacity: .7; background-image: radial-gradient(#fff 1px, transparent 1.6px), radial-gradient(#ffe08a 1px, transparent 1.7px), linear-gradient(105deg, transparent 40%, #fff6d655 50%, transparent 60%); background-size: 13px 13px, 21px 21px, 300% 100%; background-position: 0 0, 7px 9px, 100% 0; animation: glitter 2.4s ease-in-out infinite; }
.pr-signee .pfx { box-shadow: inset 0 0 0 3px #f2c14e, inset 0 0 18px #ffd76a88; background: linear-gradient(105deg, transparent 38%, #fff3c499 50%, transparent 62%) no-repeat; background-size: 300% 100%; background-position: 100% 0; animation: sweep 3s ease-in-out infinite; }
.pr-first .pfx { box-shadow: inset 0 0 0 3px #e6e9ee, inset 0 0 14px #ffffff66; background: linear-gradient(105deg, transparent 40%, #ffffff77 50%, transparent 60%) no-repeat; background-size: 300% 100%; background-position: 100% 0; animation: sweep 3.6s ease-in-out infinite; }
.pr-exclusive .pfx { padding: 3px; background: conic-gradient(#ff5e7e, #ffb238, #ffe14d, #4cd38a, #45b4ff, #a46bff, #ff5e7e); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: huespin 3s linear infinite; }
@keyframes foil { to { background-position: 300% 300%; } }
@keyframes glitter { 0%, 100% { background-position: 0 0, 7px 9px, 100% 0; opacity: .55; } 50% { background-position: 3px 2px, 4px 12px, 0 0; opacity: .85; } }
.card .serial { position: absolute; right: 5px; top: 5px; z-index: 2; padding: 1px 6px; border-radius: 99px; font-size: 11px; font-weight: 900; line-height: 1.4; color: #3a2300; background: linear-gradient(180deg, #fff6d6, #f2c14e); box-shadow: 0 1px 4px #0007; }
.card .pmarks { position: absolute; left: 4px; right: 4px; bottom: 5px; z-index: 2; display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; }
.card .pmarks span { padding: 0 5px; border-radius: 99px; font-size: 9px; font-weight: 900; line-height: 1.6; white-space: nowrap; color: #fff; background: #000c; }
.pr-holo .pvar, .pr-exclusive .pvar { color: #2b1838; background: var(--rainbow); }
.pr-brillante .pvar, .pr-signee .pvar { color: #3a2300; background: linear-gradient(180deg, #fff6d6, #f2c14e); }
.pr-first .pvar { color: #2b2f36; background: linear-gradient(180deg, #ffffff, #c9d0d8); }
.card .pb-one_of_one { color: #2b1838; background: linear-gradient(90deg, #fff3c4, #ffd76a, #fff3c4); }
.card .pb-perfect { color: #08311f; background: #4fd19a; }
.card .pb-low { color: #04243d; background: #5bb3f3; }
.zoom .card .serial { right: 12px; top: 12px; padding: 3px 12px; font-size: clamp(14px, 2.4vh, 20px); }
.zoom .card .pmarks { bottom: 12px; gap: 6px; }
.zoom .card .pmarks span { padding: 2px 10px; font-size: clamp(11px, 1.8vh, 14px); }
@media (max-width: 520px) { .row .card .pmarks span { font-size: 8px; padding: 0 4px; } .row .card .serial { font-size: 10px; } }

/* ---------- pitié et taux étendus ---------- */
.pity { display: grid; gap: 8px; }
.pity-row { display: grid; gap: 4px; font-size: 14px; font-weight: 700; }
.pity-row .bar { height: 6px; }
.pity-l .bar > i { background: var(--t4); }
.pity-m .bar > i { background: var(--rainbow); }
.rt-n::before { background: linear-gradient(135deg, #fff3c4, #f2c14e 45%, #ff69ad 75%, #45b4ff); }
.odds .nrow td { border-bottom: 0; padding-top: 8px; }
.odds .nrow small { display: block; font-size: 12px; font-weight: 700; margin-top: 2px; }
.more-l { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 800; color: var(--accent); text-decoration: none; }
.more-l:hover { text-decoration: underline; }

/* ---------- fil des pulls « En direct » ---------- */
.live { display: grid; gap: 10px; min-width: 0; }
.live-head { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; }
.live-head h2 { font-size: 24px; }
.live-head small { font-weight: 700; }
.live-head .more-l { margin: 0 0 0 auto; }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: #e0408a; animation: livepulse 1.8s ease-out infinite; }
@keyframes livepulse { 0% { box-shadow: 0 0 0 0 #e0408a99; } 80%, 100% { box-shadow: 0 0 0 9px #e0408a00; } }
.live-list { list-style: none; margin: 0; padding: 2px 2px 10px; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.lv-item { flex: none; scroll-snap-align: start; }
.lv-item.fresh { animation: lvin .6s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes lvin { from { opacity: 0; translate: -24px 0; scale: .9; } }
.lv-btn { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: center; width: 260px; height: 100%; padding: 8px 12px 8px 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); cursor: pointer; text-align: left; }
.lv-btn:hover { border-color: var(--accent); }
.lv-btn .card { width: 40px; border-radius: 4px; }
.lv-num .lv-btn { border-color: color-mix(in srgb, #f2c14e 60%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, #ffd76a 14%, var(--surface)), var(--surface) 60%); }
.lv-t { min-width: 0; display: grid; gap: 2px; font-size: 13px; line-height: 1.3; }
.lv-l { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-weight: 600; }
.lv-t small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; color: var(--muted); font-weight: 700; font-size: 12px; }
.lv-t .rt { font-size: 12px; }
.lv-serial { padding: 0 6px; border-radius: 99px; font-weight: 900; color: #3a2300; background: linear-gradient(180deg, #fff6d6, #f2c14e); }
.lv-empty { padding: 14px 4px; font-size: 14px; font-weight: 700; }

/* ---------- page « Taux et plafonds » ---------- */
.rates { display: grid; gap: 14px; }
.rates .sub { margin: 18px 0 0; }
.rates > .muted { margin: 0; }
.rgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.rcard { display: grid; gap: 10px; padding: 18px; min-width: 0; }
.rcard.wide { grid-column: 1 / -1; }
.rcard h3 { font-size: 22px; }
.rcard p { margin: 0; }
.rlist { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; }
.rtbl td .bar { height: 5px; margin-top: 4px; min-width: 60px; }
.rtbl tr.out td { color: var(--muted); }
.rtbl .sold, .etile .soldout { font-size: 11px; font-weight: 900; padding: 1px 7px; border-radius: 99px; color: #fff; background: #d23b3b; }
.etiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.etile { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 12px 8px 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); cursor: pointer; text-align: left; }
.etile:hover { border-color: var(--accent); }
.etile .card { width: 64px; border-radius: 5px; }
.etile .card .soldout { position: absolute; left: 50%; top: 50%; z-index: 3; translate: -50% -50%; white-space: nowrap; }
.etile.out .card img { filter: grayscale(1) brightness(.7); }
.etile.out .pfx { display: none; }
.et-t { min-width: 0; display: grid; gap: 3px; }
.et-t b { font-size: 14px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.et-t small { color: var(--muted); font-weight: 700; font-size: 12px; }
.et-t .bar { height: 5px; }
.et-t .bar > i { background: linear-gradient(90deg, #f2c14e, #ff69ad); }

/* ---------- collection « Numérotées », fiche d'exemplaire ---------- */
a.chip { text-decoration: none; display: inline-flex; align-items: center; }
.sec-head > .chips { align-items: center; }
.pb, .pvar-chip { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 12px; font-weight: 900; line-height: 1.5; white-space: nowrap; color: #fff; background: #000c; }
.pb-one_of_one { color: #2b1838; background: linear-gradient(90deg, #fff3c4, #ffd76a, #fff3c4); }
.pb-perfect { color: #08311f; background: #4fd19a; }
.pb-low { color: #04243d; background: #5bb3f3; }
.pvar-chip.pr-holo, .pvar-chip.pr-exclusive { color: #2b1838; background: var(--rainbow); }
.pvar-chip.pr-brillante, .pvar-chip.pr-signee { color: #3a2300; background: linear-gradient(180deg, #fff6d6, #f2c14e); }
.pvar-chip.pr-first { color: #2b2f36; background: linear-gradient(180deg, #ffffff, #c9d0d8); }
.oserial { padding: 0 6px; border-radius: 99px; font-weight: 900; color: #3a2300; background: linear-gradient(180deg, #fff6d6, #f2c14e); }
/* small thumbnails: only the serial, smaller */
.mini .card .serial, .pick .card .serial, .thumb .card .serial, .offer-card .card .serial, .tsel-row .card .serial { right: 2px; top: 2px; padding: 0 4px; font-size: 9px; line-height: 1.5; }
.thumb .card .serial { font-size: 8px; padding: 0 3px; }
.flag.excl-f { color: #2b1838; background: var(--rainbow); }
.flag.lock-f, .flag-i { color: #fff; background: #5a4a66; }
.flag.lock-1, .flag-i.lock-1 { background: #c2410c; }
.flag.lock-2, .flag-i.lock-2 { background: #2563eb; }
.flag.lock-3, .flag-i.lock-3 { background: #7c3aed; }
.flag-i { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 12px; font-weight: 900; line-height: 1.5; }
.flag.lock-f { z-index: 3; }

/* fiche d'une carte : éditions numérotées et restants */
.eds { display: grid; gap: 6px; margin: -6px 0 16px; }
.eds:empty { display: none; }
.eds-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.eds-l li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 10px; background: var(--sunk); font-size: 13px; font-weight: 700; }
.eds-l li.out { opacity: .6; }
.eds-l li.out b { color: #d23b3b; }
.eds-mine { display: flex; flex-wrap: wrap; gap: 6px; }
.eds .more-l { margin: 0; }
.excl-note { margin: 0; padding: 8px 10px; border-radius: 10px; font-size: 13px; font-weight: 700; background: linear-gradient(100deg, #ff5e7e22, #ffe14d22, #45b4ff22, #a46bff22); box-shadow: inset 0 0 0 2px #ff69ad55; }

/* onglet Numérotées */
.ptiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px 12px; }
.ptile { display: grid; gap: 8px; padding: 10px; color: inherit; text-decoration: none; align-content: start; }
.ptile:hover { border-color: var(--accent); }
.ptile:hover .card { transform: translateY(-3px); }
.ptile .card { transition: transform .15s; }
.ptile.locked .card img { filter: saturate(.6); }
.pt-t { display: grid; gap: 3px; min-width: 0; justify-items: start; }
.pt-t b { font-size: 14px; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-t small { color: var(--muted); font-weight: 700; font-size: 12px; }
.pt-t .rt { font-size: 12px; }
.pbs { display: flex; flex-wrap: wrap; gap: 3px; }
.pbs .pb { font-size: 10px; }

/* #/print/<id> */
.pview { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 28px; align-items: start; }
.pv-card { display: grid; gap: 12px; justify-items: center; }
.pv-card .tilt { width: 100%; perspective: 900px; }
.pv-card .duo { --tilt: 14deg; }
.pv-card .card { width: 100%; }
.pv-card .card .serial { right: 12px; top: 12px; padding: 3px 12px; font-size: 18px; }
.pv-card .card .pmarks { bottom: 12px; gap: 6px; }
.pv-card .card .pmarks span { padding: 2px 10px; font-size: 13px; }
.pv-info { display: grid; gap: 10px; min-width: 0; }
.pv-info h2 { font-size: clamp(28px, 4vw, 38px); line-height: 1.1; }
.pv-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pv-serial { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pv-serial > b { font-size: 26px; font-weight: 900; padding: 0 12px; border-radius: 99px; color: #3a2300; background: linear-gradient(180deg, #fff6d6, #f2c14e); box-shadow: 0 2px 8px #0003; }
.pv-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; margin: 4px 0; font-size: 14px; }
.pv-kv dt { color: var(--muted); font-weight: 700; }
.pv-kv dd { margin: 0; font-weight: 800; }
.pv-kv .sold { color: #d23b3b; }
.pv-bl { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: 13px; font-weight: 600; color: var(--muted); }
.pv-acts { grid-template-columns: repeat(auto-fit, minmax(200px, max-content)); align-items: start; }
.pv-acts .sell, .pv-acts .note-warn, .pv-acts > small { grid-column: 1 / -1; max-width: 520px; }
.linkbtn { border: 0; padding: 0; background: none; font: inherit; font-weight: 800; color: var(--accent); cursor: pointer; text-align: left; }
.linkbtn:hover { text-decoration: underline; }
.phist .nw { white-space: nowrap; }
.st-k-pull { background: color-mix(in srgb, #f2c14e 26%, var(--surface)); color: #8a5a00; }
.st-k-market { background: color-mix(in srgb, var(--good) 20%, var(--surface)); color: var(--good); }
.st-k-trade { background: color-mix(in srgb, var(--sky) 18%, var(--surface)); color: var(--sky); }
.st-k-auction { background: color-mix(in srgb, #7c3aed 18%, var(--surface)); color: #7c3aed; }
.zcap .zlink { margin-top: 6px; color: #ffe08a; font-weight: 900; font-size: 14px; text-decoration: none; }
.zcap .zlink:hover { text-decoration: underline; }

/* marché et échanges */
.offer-num { border-color: color-mix(in srgb, #f2c14e 55%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, #ffd76a 12%, var(--surface)), var(--surface) 55%); }
.offer-num .more-l { margin-top: 2px; font-size: 12px; }
.ppicks-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ppicks { max-height: 260px; }
.pnote { margin: 0; }
.mini-stub { display: grid; place-items: center; aspect-ratio: 63 / 88; width: 100%; border-radius: 5px; background: var(--sunk); color: var(--muted); font-size: 11px; font-weight: 900; }
.tsel-row .mini-stub { width: 40px; }
.mini-p .mini-f { color: #b07a00; }
a.mini { color: inherit; text-decoration: none; }

@media (max-width: 720px) {
  .pview { grid-template-columns: 1fr; }
  .pv-card { max-width: 300px; margin: 0 auto; width: 100%; }
}

/* ---------- enchères ---------- */
.aucs { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.auc { display: grid; grid-template-columns: 92px minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; gap: 10px 14px; padding: 12px; border-color: color-mix(in srgb, #7c3aed 35%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, #a46bff 10%, var(--surface)), var(--surface) 55%); }
.auc .offer-card { grid-row: 1 / 4; }
.auc.hl { box-shadow: 0 0 0 3px var(--accent), var(--shadow); }
.auc.auc-end { opacity: .8; background: var(--surface); border-color: var(--line); }
.auc-mid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 10px; border-radius: 10px; background: var(--sunk); }
.auc-price, .auc-time { display: grid; gap: 1px; min-width: 0; }
.auc-time { text-align: right; justify-items: end; }
.auc-price .price { font-weight: 900; font-size: 20px; line-height: 1.15; }
.auc-price .price small { font-size: 13px; color: var(--muted); }
.auc-mid small { font-size: 12px; font-weight: 700; }
.auc-mid .label { font-size: 11px; }
.auc-time b { font-size: 18px; font-weight: 900; line-height: 1.15; }
.auc-time b.soon { color: #d23b3b; animation: soon 1s ease-in-out infinite; }
@keyframes soon { 50% { opacity: .55; } }
.auc-act { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; align-content: start; padding-top: 10px; border-top: 1px dashed var(--line); }
.auc-bid .sell-row { flex-wrap: wrap; }
.auc-act > small { flex-basis: 100%; font-size: 12px; font-weight: 700; }
.auc-bid { display: grid; gap: 4px; width: 100%; }
.auc-bid .sell-row input { width: 120px; font: inherit; font-weight: 800; padding: 6px 10px; border-radius: 10px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); }
.auc-bid .sell-row input:focus { border-color: var(--accent); outline: none; }
.auc-bid small { font-size: 12px; font-weight: 700; }
.auc-bid .st { justify-self: start; }
.st-out { background: color-mix(in srgb, #d23b3b 16%, var(--surface)); color: #d23b3b; }
.st-pending { background: color-mix(in srgb, #7c3aed 16%, var(--surface)); color: #7c3aed; }
.plink { color: inherit; text-decoration: none; font-weight: 800; }
.plink:hover { color: var(--accent); text-decoration: underline; }
.durs { display: flex; gap: 6px; flex-wrap: wrap; }
.durs .chip { position: relative; cursor: pointer; }
.durs input { position: absolute; opacity: 0; pointer-events: none; }
.durs .chip:has(input:checked) { background: var(--ink); color: var(--bg); }
.durs .chip:has(input:focus-visible) { outline: 3px solid var(--sky); outline-offset: 2px; }
@media (max-width: 420px) { .aucs { grid-template-columns: minmax(0, 1fr); } .auc { grid-template-columns: 72px minmax(0, 1fr); } }

/* ---------- profil et vitrine ---------- */
.prof-head { display: flex; align-items: center; gap: 16px; padding: 18px; flex-wrap: wrap; }
.prof-head > div { flex: 1 1 200px; min-width: 0; }
.prof-head h2 { font-size: clamp(26px, 4vw, 34px); overflow-wrap: anywhere; }
.prof-head p { margin: 4px 0 0; }
.ava-big { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; flex: none; font-family: var(--f-display); font-size: 30px; color: #fff; background: var(--rainbow); box-shadow: inset 0 0 0 3px #ffffff88; }
.vitrine { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; padding: 18px; border-radius: 18px; background: radial-gradient(90% 120% at 50% 0%, #2a1a40, var(--stage) 75%); box-shadow: inset 0 0 0 1px #ffffff14, var(--shadow); }
.vslot { position: relative; display: grid; gap: 6px; align-content: start; min-width: 0; color: #fff; }
.vs-n { position: absolute; left: -6px; top: -6px; z-index: 4; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-size: 12px; font-weight: 900; color: #2b1838; background: #fff3c4; box-shadow: 0 1px 4px #0006; }
.vs-card { display: block; border: 0; padding: 0; background: none; cursor: pointer; color: inherit; text-decoration: none; transition: transform .15s; }
.vs-card:hover { transform: translateY(-4px); }
.vs-card .card { width: 100%; }
.vs-empty { display: grid; place-items: center; aspect-ratio: 63 / 88; border-radius: 7% / 5%; border: 2px dashed #ffffff40; color: #ffffffa0; font-size: 13px; font-weight: 800; text-align: center; padding: 8px; }
.vs-cap { display: grid; gap: 2px; min-width: 0; font-size: 13px; line-height: 1.25; }
.vs-cap b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-cap small { color: #d9c9e6; font-weight: 700; font-size: 12px; }
.vs-cap .rt { font-size: 12px; }
.vs-tools { display: flex; flex-wrap: wrap; gap: 4px; }
.vs-tools .chip { padding: 4px 9px; font-size: 12px; background: #ffffff1f; color: #fff; }
.vs-tools .chip.on { background: #fff; color: var(--stage); }
.vslot.picking .vs-empty, .vslot.picking .vs-card .card { outline: 3px solid #ffd76a; outline-offset: 2px; }
.vpick { display: grid; gap: 12px; padding: 16px; margin-top: 14px; }
.vpick .toolbar { margin: 0; }
.vpick .search { width: 100%; }
@media (max-width: 760px) { .vitrine { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 460px) { .vitrine { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px; } }

/* ---------- défis de la semaine ---------- */
.wmission { border-color: color-mix(in srgb, #7c3aed 30%, var(--line)); }
.wmission .bar > i { background: linear-gradient(90deg, #a46bff, #ff69ad); }
.wmission.ready { box-shadow: 0 0 0 2px var(--accent), var(--shadow); }

/* ---------- albums ---------- */
.albms { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.albm, .albm-bonus { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 14px; align-items: start; }
.albm.ready, .albm-bonus.ready { box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
.albm.claimed .bar > i { background: var(--rainbow); }
.albm-cover { display: block; border: 0; padding: 0; background: none; cursor: pointer; color: inherit; text-decoration: none; }
.albm-cover .card { width: 100%; }
.albm-cover .mini-stub { font-size: 13px; }
.albm-t { display: grid; gap: 6px; min-width: 0; }
.albm-t h3 { font-size: 22px; }
.albm-t h3 a { text-decoration: none; }
.albm-t h3 a:hover { color: var(--accent); }
.albm-t .dprog { margin: 0; }
.albm-t p { margin: 0; }
.albm-b { font-size: 13px; font-weight: 700; color: var(--muted); }
.albm-b b { color: var(--ink); }
.albm-a { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.albm-a .more-l { margin: 0 0 0 auto; }
.albm-a small { font-size: 12px; font-weight: 700; }
.albm-bonus { grid-template-columns: 140px minmax(0, 1fr); max-width: 720px; margin-top: 14px; }
@media (max-width: 420px) { .albm { grid-template-columns: 72px minmax(0, 1fr); } .albm-bonus { grid-template-columns: 100px minmax(0, 1fr); } }

/* ---------- taux : aucun achat en argent réel ---------- */
.nomoney { margin: 0; padding: 10px 14px; border-radius: 12px; font-weight: 700; font-size: 14px; background: color-mix(in srgb, var(--good) 14%, var(--surface)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--good) 40%, transparent); }
.nomoney b { color: var(--good); }
.np-ico[class*="k-auction"]::after { background: #7c3aed; }

/* mouvement réduit : pas de secousse ni de rotation, la lueur apparaît simplement */
@media (prefers-reduced-motion: reduce) {
  .big-pack.shaking, .big-pack.lit .pglow, .pfx, .live-dot, .lv-item.fresh, .flip.glow-6 .back-side::before, .flip.glow-6 .back-side::after, .auc-time b.soon { animation: none !important; }
  .vs-card, .vs-card:hover { transition: none; transform: none; }
  .big-pack .pglow { scale: 1; }
}

/* set view (booster scene: Voir les cartes de la collection) */
.stage .sv-btn { margin-top: 10px; }
.sv { position: fixed; inset: 0; z-index: 70; background: #0c0814cc; backdrop-filter: blur(4px); display: grid; place-items: center; padding: calc(env(safe-area-inset-top, 0px) + 12px) 12px calc(env(safe-area-inset-bottom, 0px) + 12px); animation: zfade .18s ease-out both; }
.sv[hidden] { display: none; }
.sv-box { background: var(--surface, var(--bg)); color: var(--ink, #20102a); border-radius: 18px; width: min(980px, 100%); max-height: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px #0008; }
@media (min-width: 700px) { .sv-box { height: auto; max-height: min(88vh, 100%); } }
.sv-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px 8px; }
.sv-head b { font-family: var(--f-display); font-weight: 400; font-size: 20px; display: block; }
.sv-head small { opacity: .75; }
.sv-head .btn { flex: none; min-height: 44px; }
.sv-filters { display: flex; gap: 6px; overflow-x: auto; padding: 4px 16px 10px; scrollbar-width: none; flex: none; }
.sv-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line, #ddd); background: transparent; color: inherit; border-radius: 999px; padding: 6px 12px; min-height: 36px; font: inherit; font-size: 13px; cursor: pointer; }
.sv-chip.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.sv-count { margin: 0 16px 8px; font-size: 14px; }
.sv-grid { overflow-y: auto; padding: 4px 16px 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 12px; overscroll-behavior: contain; align-content: start; flex: 1; }
@media (min-width: 700px) { .sv-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } }
.sv-card { margin: 0; position: relative; }
.sv-card figcaption { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-size: 12px; margin-top: 4px; line-height: 1.2; }
.sv-card figcaption > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-card.miss figcaption > span:last-child { opacity: .55; }
.sv-n { position: absolute; top: 6px; right: 6px; background: #000a; color: #fff; border-radius: 999px; padding: 1px 7px; font-size: 12px; font-weight: 700; z-index: 2; }