/* Foil v2 · the dark card shop. Packs are physical objects with crimped wrappers,
   foil is the only colour, prices are coins. Borrowed from packs.com's shop chrome;
   the object design is ours. */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500;600&family=Archivo:wdth,wght@112.5,700;125,800;125,900&display=swap');

:root {
  --bg: #0D0F15; --bg-2: #12151D; --surface: #171B25; --surface-2: #1F2431; --surface-3: #283040;
  --line: rgba(255,255,255,.07); --line-2: rgba(255,255,255,.12);
  --text: #F3F1EA; --text-2: #A9ADB9; --text-3: #6E7383;
  --coin: #00C805; --coin-2: #00A004;
  --mint: #3DDC97; --coral: #FF6B6B;
  --r-lg: 22px; --r-md: 14px; --r-sm: 10px;
  --shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 12px 40px rgba(0,0,0,.45);
  --font: 'Geist', 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, Menlo, monospace;
  --display: 'Archivo', 'Geist', sans-serif;

  --f-common: linear-gradient(160deg, #C9C7BE 0%, #8E8C84 100%);
  --f-uncommon: linear-gradient(160deg, #F6F6F4 0%, #B7BCC6 40%, #EDEEF1 65%, #8F96A3 100%);
  --f-rare: linear-gradient(150deg, #6FB4FF 0%, #2F6BFF 40%, #8ED6FF 70%, #2452D9 100%);
  --f-epic: linear-gradient(150deg, #C07BFF 0%, #7A38FF 35%, #EA9BFF 65%, #5320D6 100%);
  --f-legend: conic-gradient(from 210deg at 50% 50%, #FF5E7E, #FFC24D, #7CFF8A, #4DE0FF, #8A6BFF, #FF5E7E);
  --holo: conic-gradient(from 0deg at 50% 50%, #ff7a7a, #ffd36b, #8dff9a, #6be1ff, #9a8bff, #ff8ad4, #ff7a7a);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font); background: radial-gradient(1200px 500px at 50% -120px, #1B2030 0%, var(--bg) 60%) fixed, var(--bg); color: var(--text); font-size: 14.5px; line-height: 1.5; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; min-height: 100vh; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select { font: inherit; color: inherit; }
::placeholder { color: var(--text-3); }
:focus-visible { outline: 2px solid var(--coin); outline-offset: 2px; border-radius: 8px; }
[hidden] { display: none !important; }
.mono { font-family: var(--mono); }
.display { font-family: var(--display); font-variation-settings: 'wdth' 125, 'wght' 900; text-transform: uppercase; letter-spacing: -.01em; }

/* ---------- topbar ---------- */
.topbar { position: sticky; top: 0; z-index: 40; background: rgba(13,15,21,.82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.topbar-inner { max-width: 1280px; margin: 0 auto; padding: 0 28px; height: 64px; display: flex; align-items: center; gap: 22px; }
.wordmark { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-variation-settings: 'wdth' 125, 'wght' 900; font-size: 19px; letter-spacing: .02em; text-transform: uppercase; }
.wordmark .mark { width: 28px; height: 28px; border-radius: 8px; background: var(--holo); position: relative; }
.wordmark .mark::after { content: ''; position: absolute; inset: 7px; border-radius: 3px; background: var(--bg); }
.nav { display: flex; gap: 4px; flex: 1; height: 100%; }
.nav a { display: flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 14.5px; font-weight: 600; color: var(--text-2); position: relative; transition: color .15s; }
.nav a:hover { color: var(--text); }
.nav a.active { color: var(--text); }
.nav a.active::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--holo); }
.nav a svg { width: 16px; height: 16px; opacity: .85; }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px var(--mint); }
.coin { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #9CFFB0, var(--coin) 55%, var(--coin-2)); color: #03230A; font-family: var(--mono); font-weight: 700; font-size: 10px; flex: none; box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.coin.lg { width: 24px; height: 24px; font-size: 12px; }
.foilsq { width: 14px; height: 14px; border-radius: 4px; background: var(--holo); flex: none; }
.avatar { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(150deg, #2C3550, #171B25); border: 1px solid var(--line-2); display: grid; place-items: center; font-family: var(--mono); font-size: 11px; color: var(--text-2); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 12px; font-weight: 700; font-size: 14.5px; transition: transform .12s, filter .15s, background .15s; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--text); color: var(--bg); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-coin { background: linear-gradient(180deg, #3BE86A, #00C805); color: #03230A; box-shadow: 0 0 0 1px rgba(120,255,160,.25), 0 8px 24px rgba(0,200,5,.25); }
.btn-coin:hover { filter: brightness(1.05); }
.btn-ghost { background: var(--surface); border: 1px solid var(--line); color: var(--text); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-plain { color: var(--text-2); }
.btn-plain:hover { color: var(--text); }
.btn-lg { height: 54px; padding: 0 28px; font-size: 16px; border-radius: 14px; }
.btn-sm { height: 34px; padding: 0 14px; font-size: 13px; border-radius: 10px; }
.btn[disabled] { opacity: .4; cursor: not-allowed; }
.btn-rip { position: relative; background: var(--text); color: var(--bg); overflow: hidden; isolation: isolate; }
.btn-rip::before { content: ''; position: absolute; inset: -2px; background: var(--holo); z-index: -2; filter: blur(14px); opacity: .55; transition: opacity .2s; }
.btn-rip::after { content: ''; position: absolute; inset: 0; background: var(--text); z-index: -1; border-radius: inherit; }
.btn-rip:hover::before { opacity: 1; }

/* ---------- layout ---------- */
.page { max-width: 1280px; margin: 0 auto; padding: 22px 28px 90px; }
.view { animation: rise .28s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow); }
.card-sm { padding: 16px 18px; border-radius: var(--r-md); }
.grid { display: grid; gap: 16px; }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g5 { grid-template-columns: repeat(5, 1fr); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.split { display: grid; grid-template-columns: 1.55fr 1fr; gap: 20px; align-items: start; }
.row { display: flex; align-items: center; gap: 10px; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 8px; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.small { font-size: 12.5px; }
.tiny { font-size: 11.5px; }
.label { font-size: 11px; color: var(--text-3); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.num { font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.num-xl { font-size: 54px; }
.num-lg { font-size: 32px; }
.num-md { font-size: 22px; }
.hair { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--surface-2); color: var(--text-2); white-space: nowrap; border: 1px solid var(--line); }
.pill-light { background: var(--text); color: var(--bg); border-color: transparent; }
.pill-mint { background: rgba(61,220,151,.12); color: var(--mint); border-color: rgba(61,220,151,.25); }
.pill-coral { background: rgba(255,107,107,.12); color: var(--coral); border-color: rgba(255,107,107,.25); }
.up { color: var(--mint); } .down { color: var(--coral); }
h1 { font-size: 42px; font-weight: 800; letter-spacing: -.04em; line-height: 1.02; }
h2 { font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
h3 { font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.section-head { display: flex; align-items: end; justify-content: space-between; margin: 34px 0 14px; gap: 16px; }
.section-head p { color: var(--text-2); margin-top: 4px; }
.section-title { font-family: var(--display); font-variation-settings: 'wdth' 125, 'wght' 900; text-transform: uppercase; font-size: 24px; letter-spacing: .01em; }

/* ---------- ticker ---------- */
.ticker { overflow: hidden; margin: 0 -28px 14px; padding: 0 28px; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.ticker-track { display: flex; gap: 8px; width: max-content; animation: scroll 70s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes scroll { to { transform: translateX(-50%); } }
.pull { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 6px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-size: 12.5px; white-space: nowrap; color: var(--text-2); }
.pull .sw { width: 16px; height: 22px; border-radius: 3px; }
.pull b { color: var(--text); font-weight: 650; }
.pull .mult { font-family: var(--mono); font-weight: 700; color: var(--text); }
.pull.hot { border-color: rgba(0,200,5,.4); box-shadow: 0 0 18px rgba(0,200,5,.12); }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 28px; align-items: center; padding: 12px 0 6px; }
.hero p.lede { font-size: 17px; color: var(--text-2); max-width: 520px; margin: 16px 0 24px; }
.hero-stats { display: flex; gap: 28px; margin-top: 28px; }
.hero-stats .label { margin-bottom: 8px; }
.fan { position: relative; height: 420px; }
.fan .booster { position: absolute; left: 50%; top: 50%; }
.fan .booster:nth-child(1) { transform: translate(-50%,-50%) rotate(-13deg) translateX(-160px) translateY(24px) scale(.92); }
.fan .booster:nth-child(2) { transform: translate(-50%,-50%) translateY(-10px); z-index: 2; }
.fan .booster:nth-child(3) { transform: translate(-50%,-50%) rotate(13deg) translateX(160px) translateY(24px) scale(.92); }
.fan::before { content: ''; position: absolute; left: 50%; top: 50%; width: 520px; height: 300px; transform: translate(-50%,-40%); background: radial-gradient(closest-side, rgba(120,110,255,.28), rgba(255,120,180,.12) 50%, transparent 75%); filter: blur(30px); }

/* ---------- booster pack (the object) ---------- */
.booster { --w: 190px; width: var(--w); aspect-ratio: 190 / 280; position: relative; }
.booster .behind { position: absolute; inset: 0; }
.booster .behind i { position: absolute; left: 50%; top: 10%; width: 78%; height: 84%; border-radius: 12px; background: linear-gradient(160deg, var(--surface-3), var(--surface)); border: 1px solid var(--line-2); box-shadow: 0 10px 30px rgba(0,0,0,.4); transform-origin: 50% 100%; }
.booster .behind i:nth-child(1) { transform: translateX(-50%) rotate(16deg) translateX(34px); }
.booster .behind i:nth-child(2) { transform: translateX(-50%) rotate(9deg) translateX(18px); }
.booster .behind i:nth-child(3) { transform: translateX(-50%) rotate(-10deg) translateX(-14px); }
.booster .behind i::after { content: ''; position: absolute; inset: 12px; border-radius: 8px; border: 1px dashed var(--line-2); background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(255,255,255,.025) 6px 12px); }
.booster .wrap { position: absolute; left: 4%; right: 4%; top: 0; bottom: 0; border-radius: 6px; transform: rotate(-5deg); transform-origin: 50% 55%; background: linear-gradient(165deg, var(--t1) 0%, var(--t2) 100%); box-shadow: 0 30px 50px -18px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.06) inset; overflow: hidden; display: flex; flex-direction: column; isolation: isolate; }
.booster .wrap::before { content: ''; position: absolute; inset: 0; background: var(--holo); opacity: .16; mix-blend-mode: screen; }
.booster .wrap::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 32%, rgba(255,255,255,.30) 44%, rgba(255,255,255,.06) 50%, transparent 62%); pointer-events: none; }
.booster .crimp { height: 18px; flex: none; background: repeating-linear-gradient(90deg, rgba(0,0,0,.28) 0 2px, rgba(255,255,255,.14) 2px 3px, transparent 3px 6px), linear-gradient(180deg, rgba(255,255,255,.28), rgba(0,0,0,.25)); position: relative; z-index: 2; }
.booster .crimp.bottom { background: repeating-linear-gradient(90deg, rgba(0,0,0,.28) 0 2px, rgba(255,255,255,.14) 2px 3px, transparent 3px 6px), linear-gradient(0deg, rgba(255,255,255,.28), rgba(0,0,0,.25)); }
.booster .art { flex: 1; position: relative; overflow: hidden; }
.booster .art .giant { position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%) rotate(-8deg); font-family: var(--display); font-variation-settings: 'wdth' 125, 'wght' 900; font-size: calc(var(--w) * .34); letter-spacing: -.04em; color: transparent; background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.08)); -webkit-background-clip: text; background-clip: text; white-space: nowrap; opacity: .9; }
.booster .art .orb { position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.55), transparent 65%); left: 55%; top: 15%; filter: blur(8px); opacity: .55; }
.booster .art .chips { position: absolute; left: 12px; bottom: 10px; display: flex; }
.booster .art .chips .tlogo { width: 22px; height: 22px; font-size: 7.5px; border: 2px solid rgba(0,0,0,.35); margin-left: -7px; }
.booster .art .chips .tlogo:first-child { margin-left: 0; }
.booster .badge { position: absolute; right: 10px; top: 26px; z-index: 3; background: #0B0C10; color: #fff; border-radius: 8px; padding: 5px 7px 4px; text-align: center; line-height: 1; box-shadow: 0 3px 8px rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.15); }
.booster .badge b { display: block; font-family: var(--display); font-variation-settings: 'wdth' 112.5, 'wght' 900; font-size: 15px; }
.booster .badge small { display: block; font-size: 6.5px; letter-spacing: .12em; font-weight: 700; margin-top: 2px; opacity: .8; }
.booster .plate { flex: none; position: relative; z-index: 2; padding: 10px 12px 12px; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.45)); text-align: center; }
.booster .brand { display: inline-flex; align-items: center; gap: 4px; font-family: var(--display); font-variation-settings: 'wdth' 125, 'wght' 900; font-size: 9px; letter-spacing: .12em; color: #fff; text-transform: uppercase; }
.booster .brand::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--holo); }
.booster .eyebrow { font-size: 6.5px; letter-spacing: .18em; font-weight: 700; color: rgba(255,255,255,.75); text-transform: uppercase; margin-top: 5px; }
.booster .name { font-family: var(--display); font-variation-settings: 'wdth' 125, 'wght' 900; text-transform: uppercase; font-size: calc(var(--w) * .105); line-height: .95; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.5); margin-top: 3px; letter-spacing: .005em; }
.booster .fine { font-size: 5.5px; letter-spacing: .1em; color: rgba(255,255,255,.6); text-transform: uppercase; margin-top: 5px; font-weight: 600; }
.booster.sm { --w: 150px; }
.booster.lg { --w: 240px; }
.booster.xl { --w: 280px; }
.booster.glow::before { content: ''; position: absolute; left: 50%; top: 55%; width: 120%; height: 90%; transform: translate(-50%,-50%); background: radial-gradient(closest-side, var(--t1), transparent 70%); filter: blur(28px); opacity: .55; z-index: -1; }

/* tints */
.tint-graphite { --t1: #4A4D58; --t2: #12141A; }
.tint-ocean { --t1: #3F84FF; --t2: #0E2A7A; }
.tint-ember { --t1: #FF7A3D; --t2: #7A1C0E; }
.tint-lime { --t1: #B9EA4B; --t2: #2C6A12; }
.tint-grape { --t1: #A46CFF; --t2: #2E0E8A; }
.tint-gold { --t1: #FFD24A; --t2: #8A5A00; }
.tint-rose { --t1: #FF6FA5; --t2: #7E0F44; }
.tint-ice { --t1: #A9E9FF; --t2: #1C6C9E; }

/* ---------- shop chrome ---------- */
.shopbar { display: flex; align-items: center; gap: 10px; margin: 26px 0 18px; flex-wrap: wrap; }
.shopbar .section-title { margin-right: 6px; }
.fpill { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-weight: 700; font-size: 13.5px; color: var(--text-2); transition: .15s; }
.fpill:hover { color: var(--text); border-color: var(--line-2); }
.fpill.on { color: var(--text); border-color: rgba(0,200,5,.55); background: rgba(0,200,5,.10); box-shadow: 0 0 0 3px rgba(0,200,5,.10), 0 0 22px rgba(0,200,5,.15); }
.fpill.on::before { content: '✦'; color: var(--coin); font-size: 12px; }
.shopbar .spacer { flex: 1; }
.search { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); min-width: 220px; }
.search input { background: none; border: 0; outline: 0; width: 100%; font-size: 13.5px; }
.search svg { width: 15px; height: 15px; color: var(--text-3); flex: none; }
.select { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-weight: 600; font-size: 13.5px; color: var(--text-2); }
.select select { background: none; border: 0; outline: 0; color: var(--text); font-weight: 600; appearance: none; padding-right: 14px; }

.pack-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 16px 14px; cursor: pointer; transition: transform .18s, border-color .18s, box-shadow .18s; display: flex; flex-direction: column; align-items: center; gap: 10px; overflow: hidden; }
.pack-card::before { content: ''; position: absolute; left: 50%; top: 45%; width: 70%; height: 55%; transform: translate(-50%,-50%); background: radial-gradient(closest-side, var(--t1), transparent 70%); filter: blur(34px); opacity: 0; transition: opacity .25s; }
.pack-card:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: 0 24px 50px rgba(0,0,0,.5); }
.pack-card:hover::before, .pack-card.featured::before { opacity: .38; }
.pack-card .eyebrow { font-size: 10.5px; letter-spacing: .14em; font-weight: 700; color: var(--text-3); text-transform: uppercase; }
.pack-card .name { font-size: 17px; font-weight: 800; letter-spacing: -.02em; margin-top: 2px; text-align: center; }
.pack-card .booster { margin: 12px 0 8px; z-index: 1; }
.pack-card .foot { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 6px; z-index: 1; }
.pack-card .price { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-weight: 700; font-size: 15px; }
.pack-card .view { color: var(--text-2); font-weight: 700; font-size: 13.5px; display: inline-flex; align-items: center; gap: 4px; }
.pack-card:hover .view { color: var(--text); }
.pack-card .by { font-size: 12px; color: var(--text-3); margin-top: -4px; }
.pack-card .star { position: absolute; left: 14px; top: 12px; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--text-3); z-index: 2; }
.pack-card .star:hover, .pack-card .star.on { color: var(--coin); }
.pack-card .tag { position: absolute; right: 14px; top: 12px; z-index: 2; }

/* ---------- biggest pulls ---------- */
.bigpulls { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.bigpull { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; position: relative; overflow: hidden; }
.bigpull .sw { width: 34px; height: 46px; border-radius: 6px; flex: none; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.bigpull .v { font-family: var(--mono); font-weight: 800; font-size: 17px; }
.bigpull .w { font-size: 11.5px; color: var(--text-3); }
.bigpull.legend { border-color: rgba(255,200,120,.35); }
.bigpull.legend::before { content: ''; position: absolute; inset: 0; background: var(--holo); opacity: .07; }

/* ---------- foil swatches ---------- */
.sw-common { background: var(--f-common); }
.sw-uncommon { background: var(--f-uncommon); }
.sw-rare { background: var(--f-rare); }
.sw-epic { background: var(--f-epic); }
.sw-legend { background: var(--f-legend); }

/* ---------- odds table ---------- */
.odds { display: flex; flex-direction: column; gap: 6px; }
.odds .r { display: grid; grid-template-columns: 22px 1fr 64px 60px; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.odds .r .sw { width: 22px; height: 30px; border-radius: 5px; }
.odds .r .n { font-weight: 700; line-height: 1.2; }
.odds .r .p, .odds .r .m { font-family: var(--mono); text-align: right; font-size: 13px; color: var(--text-2); }
.odds .r .m { font-weight: 700; color: var(--text); }
.odds-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; margin: 6px 0 12px; }

/* ---------- token rows ---------- */
.tok { display: grid; grid-template-columns: 32px 1fr auto auto; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; }
.tok:hover { background: var(--surface-2); }
.tok .s { font-weight: 700; }
.tok .n { font-size: 12px; color: var(--text-3); }
.tok .px { font-family: var(--mono); font-size: 13px; text-align: right; }
.tok .chg { font-family: var(--mono); font-size: 12px; text-align: right; min-width: 56px; }
.tok.chase .s::after { content: 'CHASE'; margin-left: 8px; font-size: 9px; letter-spacing: .1em; padding: 3px 6px; border-radius: 999px; background: var(--holo); color: #0B0C10; vertical-align: middle; font-weight: 800; }
.tlogo { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: -.02em; color: hsl(var(--h) 70% 88%); background: hsl(var(--h) 45% 28%); flex: none; border: 1px solid hsl(var(--h) 50% 40% / .6); }
.rcard .front .foil .tlogo { position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); width: 56px; height: 56px; font-size: 14px; border: 4px solid var(--surface); box-shadow: 0 6px 14px rgba(0,0,0,.4); }

/* ---------- reveal ---------- */
.reveal { position: fixed; inset: 0; z-index: 60; background: radial-gradient(900px 500px at 50% 40%, rgba(60,50,110,.45), rgba(13,15,21,.96) 70%); backdrop-filter: blur(18px); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 22px; padding: 24px; }
.reveal .stage { display: flex; gap: 22px; align-items: center; justify-content: center; flex-wrap: wrap; perspective: 1400px; }
.rcard { width: 224px; height: 324px; position: relative; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.2,.8,.2,1); cursor: pointer; }
.rcard.flipped { transform: rotateY(180deg); }
.rcard .face { position: absolute; inset: 0; border-radius: 18px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,.6); }
.rcard .back { background: linear-gradient(160deg, var(--surface-3), var(--surface)); border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; }
.rcard .back::before { content: ''; width: 70px; height: 70px; border-radius: 16px; background: var(--holo); box-shadow: 0 0 40px rgba(255,255,255,.15); animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.rcard .back::after { content: 'TAP TO FLIP'; position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: var(--text-3); font-size: 10.5px; letter-spacing: .16em; font-weight: 700; }
.rcard .front { transform: rotateY(180deg); background: var(--surface); display: flex; flex-direction: column; border: 1px solid var(--line-2); }
.rcard .front .foil { height: 46%; position: relative; }
.rcard .front .foil .sheen { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 48%, transparent 60%); animation: sheen 2.4s ease-in-out infinite; }
@keyframes sheen { 0% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }
.rcard .front .foil .tier { position: absolute; left: 12px; top: 12px; padding: 4px 9px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; }
.rcard .front .info { flex: 1; padding: 34px 16px 14px; text-align: center; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.rcard .front .info .sym { font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.rcard .front .info .nm { font-size: 11.5px; color: var(--text-3); }
.rcard .front .info .val { font-size: 30px; font-weight: 800; letter-spacing: -.04em; margin-top: 8px; }
.rcard .front .info .mult { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.rcard.rare.flipped .front { box-shadow: 0 0 60px rgba(70,130,255,.45); }
.rcard.epic.flipped .front { box-shadow: 0 0 70px rgba(150,80,255,.55); }
.rcard.legend.flipped { animation: hover 2.6s ease-in-out infinite; }
.rcard.legend.flipped .front { box-shadow: 0 0 90px rgba(255,200,120,.6), 0 0 30px rgba(255,120,200,.5); }
@keyframes hover { 0%,100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.reveal-sum { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 24px; display: flex; gap: 32px; align-items: center; }
.reveal-actions { display: flex; gap: 10px; }
.reveal .label { color: var(--text-2); }

/* ---------- launch form ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; font-weight: 700; color: var(--text-2); letter-spacing: .02em; }
.input { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 14.5px; width: 100%; outline: 0; }
.input:focus { border-color: var(--line-2); }
.seg { display: inline-flex; background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px; gap: 2px; }
.seg button { padding: 7px 14px; border-radius: 999px; font-weight: 700; font-size: 13.5px; color: var(--text-2); }
.seg button.on { background: var(--text); color: var(--bg); }
.tints { display: flex; gap: 8px; }
.tints button { width: 34px; height: 34px; border-radius: 10px; border: 3px solid transparent; background: linear-gradient(160deg, var(--t1), var(--t2)); }
.tints button.on { border-color: var(--text); }
.picker { max-height: 340px; overflow: auto; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); padding: 6px; }
.picker .tok { cursor: pointer; }
.picker .tok.sel { background: var(--text); color: var(--bg); }
.picker .tok.sel .n, .picker .tok.sel .chg { color: rgba(0,0,0,.55); }
.chosen { display: flex; flex-wrap: wrap; gap: 6px; min-height: 34px; }
.chosen .pill { cursor: pointer; }
.chosen .pill.chase { background: var(--holo); color: #0B0C10; border-color: transparent; }

/* ---------- collection ---------- */
.holding { display: grid; grid-template-columns: 28px 1fr auto auto auto; gap: 12px; align-items: center; padding: 11px 12px; border-radius: 12px; }
.holding:hover { background: var(--surface-2); }
.holding .sw { width: 28px; height: 38px; border-radius: 6px; }
.holding .v { font-family: var(--mono); text-align: right; }

/* ---------- foil page ---------- */
.bricks { display: grid; grid-template-columns: repeat(24, 1fr); gap: 4px; }
.bricks i { height: 22px; border-radius: 4px; background: var(--surface-2); }
.bricks i.on { background: var(--text); }
.bricks i.burn { background: var(--holo); }
.flow { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; }
.flow .box { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.flow .arrow { color: var(--text-3); font-size: 22px; }

/* ---------- toast / modal ---------- */
.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 12px 18px; border-radius: 12px; font-weight: 700; box-shadow: 0 20px 50px rgba(0,0,0,.5); z-index: 80; animation: rise .2s ease both; }
.modal-bg { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.6); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: 0 40px 80px rgba(0,0,0,.6); padding: 26px; width: 440px; max-width: 100%; }

footer { margin-top: 60px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; color: var(--text-3); font-size: 12.5px; flex-wrap: wrap; gap: 10px; }

@media (max-width: 1100px) { .g5 { grid-template-columns: repeat(3, 1fr); } .bigpulls { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 960px) { .g4, .g3 { grid-template-columns: repeat(2, 1fr); } .split, .hero { grid-template-columns: 1fr; } .fan { height: 340px; } .nav { display: none; } }
@media (max-width: 600px) { .g4, .g3, .g2, .g5 { grid-template-columns: 1fr; } .bigpulls { grid-template-columns: 1fr; } .page { padding: 18px 16px 60px; } .ticker { margin: 0 -16px 14px; padding: 0 16px; } h1 { font-size: 32px; } }

/* v2.1 fixes from the first render */
.fan .booster:nth-child(1) { transform: translate(-50%,-50%) rotate(-14deg) translateX(-215px) translateY(30px) scale(.86); }
.fan .booster:nth-child(3) { transform: translate(-50%,-50%) rotate(14deg) translateX(215px) translateY(30px) scale(.86); }
.fan .booster:nth-child(1) .behind, .fan .booster:nth-child(3) .behind { display: none; }
.booster .behind i { width: 70%; height: 76%; top: 14%; }
.booster .behind i:nth-child(1) { transform: translateX(-50%) rotate(12deg) translateX(30px); }
.booster .behind i:nth-child(2) { transform: translateX(-50%) rotate(6deg) translateX(14px); }
.booster .behind i:nth-child(3) { transform: translateX(-50%) rotate(-8deg) translateX(-12px); }
.pack-card .by { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; text-align: center; }
.pack-card .tag { display: none; }
.pack-card .by .pill { padding: 2px 8px; font-size: 10.5px; margin-right: 4px; vertical-align: middle; }

/* ================= v3 · game layer ================= */
.reveal { gap: 18px; }
.reveal-head { display: flex; align-items: center; gap: 14px; }
.reveal .mute { width: 36px; height: 36px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-size: 15px; }

/* hold to rip */
.holdwrap { display: flex; flex-direction: column; align-items: center; gap: 16px; transition: opacity .25s, transform .25s; }
.holdwrap.gone { opacity: 0; transform: scale(.9); }
.booster.rip-target { --p: 0; transform: scale(1.08); transition: transform .2s; }
.booster.rip-target .piece-top, .booster.rip-target .piece-bottom { transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .5s; }
.booster.rip-target .piece-top::before { opacity: calc(.16 + var(--p) * .5); }
.booster.rip-target .wrap { box-shadow: 0 30px 50px -18px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.06) inset, 0 0 calc(var(--p) * 60px) rgba(255,255,255,calc(var(--p) * .35)); }
.booster.rip-target .tearline { position: absolute; left: 0; right: 0; top: 24%; height: 2px; background: #fff; box-shadow: 0 0 12px #fff; transform: scaleX(var(--p)); transform-origin: 0 50%; z-index: 5; }
.booster.torn .piece-top { transform: rotate(-5deg) translate(-40px, -170px) rotate(-22deg); opacity: 0; }
.booster.torn .piece-bottom { transform: rotate(-5deg) translateY(120px) scale(.9); opacity: 0; }
.booster.torn .behind i { transition: transform .5s, opacity .5s; transform: translateX(-50%) translateY(-60px) scale(1.05); opacity: 0; }
.ripbar { width: 280px; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--line); }
.ripbar i { display: block; height: 100%; width: 0; background: var(--holo); border-radius: 999px; transition: width .05s linear; }
.btn.hold { user-select: none; -webkit-user-select: none; touch-action: none; min-width: 220px; }
.btn.hold.down { transform: scale(.97); }
.btn.hold.down::before { opacity: 1; }

/* cards spill in */
.stage.spill .rcard { animation: spill .55s cubic-bezier(.2,.9,.2,1.1) both; }
@keyframes spill { from { opacity: 0; transform: translateY(-140px) scale(.6) rotate(-8deg); } to { opacity: 1; transform: none; } }
.stage.spill .rcard.flipped { animation: none; }
.rcard.charging .back { animation: charge .35s ease-in-out infinite alternate; }
.rcard.charging .back::before { animation: spin 1.2s linear infinite; box-shadow: 0 0 60px rgba(255,255,255,.35); }
@keyframes charge { from { box-shadow: 0 0 20px rgba(255,255,255,.1); transform: scale(1); } to { box-shadow: 0 0 60px rgba(255,255,255,.35); transform: scale(1.03); } }
.rcard.legend.flipped .front .foil::after { content: ''; position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent 0 20deg, rgba(255,255,255,.35) 25deg 30deg, transparent 35deg 60deg, rgba(255,255,255,.3) 65deg 70deg, transparent 75deg 120deg, rgba(255,255,255,.35) 125deg 130deg, transparent 135deg 180deg, rgba(255,255,255,.3) 185deg 190deg, transparent 195deg 250deg, rgba(255,255,255,.35) 255deg 260deg, transparent 265deg 360deg); animation: spin 5s linear infinite; mix-blend-mode: overlay; }

/* particles */
.spark { position: fixed; z-index: 70; border-radius: 50%; pointer-events: none; animation: fly 1.1s cubic-bezier(.1,.8,.3,1) forwards; background: #fff; }
.spark.rare { background: #7FB8FF; box-shadow: 0 0 8px #7FB8FF; }
.spark.epic { background: #D29BFF; box-shadow: 0 0 10px #B26BFF; }
.spark.legend { background: var(--holo); box-shadow: 0 0 12px rgba(255,220,120,.8); border-radius: 2px; }
@keyframes fly { 0% { transform: translate(-50%,-50%) scale(1); opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 60px)) scale(.2) rotate(240deg); opacity: 0; } }

/* slam text */
.slam { position: fixed; left: 50%; top: 42%; transform: translate(-50%,-50%); z-index: 75; pointer-events: none; font-family: var(--display); font-variation-settings: 'wdth' 125, 'wght' 900; font-size: 92px; letter-spacing: -.01em; color: #fff; text-shadow: 0 6px 0 rgba(0,0,0,.35), 0 20px 60px rgba(0,0,0,.6); animation: slamIn 1.05s cubic-bezier(.1,.9,.2,1) both; white-space: nowrap; }
.slam.rare { color: #8FC4FF; text-shadow: 0 0 40px rgba(80,140,255,.8), 0 6px 0 rgba(0,0,0,.35); }
.slam.epic { color: #D9A8FF; text-shadow: 0 0 50px rgba(160,90,255,.9), 0 6px 0 rgba(0,0,0,.35); }
.slam.legend { background: var(--holo); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 30px rgba(255,200,120,.8)); font-size: 110px; }
.slam.level { color: var(--coin); text-shadow: 0 0 40px rgba(0,200,5,.8), 0 6px 0 rgba(0,0,0,.35); }
.slam.lose { color: var(--text-3); font-size: 72px; }
@keyframes slamIn { 0% { transform: translate(-50%,-50%) scale(2.6); opacity: 0; } 18% { transform: translate(-50%,-50%) scale(.92); opacity: 1; } 28% { transform: translate(-50%,-50%) scale(1.04); } 75% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; transform: translate(-50%,-64%) scale(1.1); } }

/* shake */
body.shake { animation: shake .45s; }
body.shake-hard { animation: shakeHard .5s; }
@keyframes shake { 0%,100% { transform: none; } 20% { transform: translate(-4px, 2px); } 40% { transform: translate(4px, -2px); } 60% { transform: translate(-3px, -1px); } 80% { transform: translate(3px, 1px); } }
@keyframes shakeHard { 0%,100% { transform: none; } 15% { transform: translate(-10px, 5px) rotate(-.4deg); } 30% { transform: translate(10px, -5px) rotate(.4deg); } 45% { transform: translate(-8px, -3px); } 60% { transform: translate(8px, 3px); } 75% { transform: translate(-4px, 2px); } }

/* progression widgets */
.xpbar { height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--line); }
.xpbar i { display: block; height: 100%; background: linear-gradient(90deg, #3BE86A, #00C805); border-radius: 999px; transition: width .8s cubic-bezier(.2,.8,.2,1); }
.xpbox { min-width: 180px; }
.xpbox .xpbar { margin-top: 8px; }
.meter { display: flex; gap: 4px; margin-top: 8px; }
.meter i { flex: 1; height: 14px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--line); }
.meter i.on { background: var(--holo); border-color: transparent; box-shadow: 0 0 10px rgba(255,255,255,.15); }
.reveal-sum .meter { width: 150px; }
.common-t { color: var(--text-2); } .uncommon-t { color: #D8DCE4; } .rare-t { color: #8FC4FF; } .epic-t { color: #D9A8FF; }
.legend-t { background: var(--holo); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ach { position: fixed; right: 24px; bottom: 24px; z-index: 85; display: flex; gap: 12px; align-items: center; background: var(--surface); border: 1px solid rgba(0,200,5,.45); border-radius: 16px; padding: 12px 16px; box-shadow: 0 20px 50px rgba(0,0,0,.5), 0 0 30px rgba(0,200,5,.15); animation: achIn .35s cubic-bezier(.2,.9,.2,1.1) both; min-width: 280px; }
@keyframes achIn { from { opacity: 0; transform: translateX(40px) scale(.9); } to { opacity: 1; transform: none; } }
.medal { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(180deg, #3BE86A, #00C805); color: #03230A; font-size: 18px; flex: none; }
.achgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.achv { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); opacity: .5; }
.achv.on { opacity: 1; border-color: rgba(0,200,5,.35); }
.achv .medal { width: 30px; height: 30px; font-size: 14px; border-radius: 9px; }
.achv:not(.on) .medal { background: var(--surface-2); color: var(--text-3); }
.binder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.binder .slot { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 10px; background: var(--bg-2); border: 1px dashed var(--line-2); font-size: 11px; font-weight: 700; color: var(--text-3); }
.binder .slot .tlogo { opacity: .35; filter: grayscale(1); }
.binder .slot.got { border-style: solid; border-color: rgba(0,200,5,.4); color: var(--text); background: rgba(0,200,5,.06); }
.binder .slot.got .tlogo { opacity: 1; filter: none; }

/* game bar on home */
.gamebar { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 12px; margin-top: 8px; }
.gcard { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; min-height: 66px; }
.gcard.daily.ready { border-color: rgba(0,200,5,.5); box-shadow: 0 0 30px rgba(0,200,5,.12); }
.gcard.battle { border-color: rgba(138,107,255,.35); background: linear-gradient(120deg, rgba(138,107,255,.12), var(--surface) 60%); }
.gicon { width: 40px; height: 40px; border-radius: 12px; background: var(--surface-2); display: grid; place-items: center; font-size: 20px; flex: none; }
.gicon.lvl { background: linear-gradient(180deg, #3BE86A, #00C805); color: #03230A; font-family: var(--display); font-variation-settings: 'wdth' 112.5, 'wght' 900; font-size: 18px; }
.gicon.lvl.big { width: 64px; height: 64px; font-size: 28px; border-radius: 18px; }
.lvlmini { font-family: var(--display); font-variation-settings: 'wdth' 112.5, 'wght' 900; font-size: 15px; color: var(--coin); }

/* battles */
.agent { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); text-align: left; }
.agent.on { border-color: rgba(0,200,5,.5); background: rgba(0,200,5,.06); }
.reveal.battle { justify-content: flex-start; padding-top: 40px; overflow: auto; }
.barena { display: grid; grid-template-columns: 1fr 60px 1fr; gap: 16px; align-items: start; width: 100%; max-width: 1200px; }
.bcol { background: rgba(255,255,255,.02); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; }
.bcol.me { border-color: rgba(0,200,5,.35); }
.bcol .stage { gap: 12px; }
.bcol .rcard { width: 150px; height: 218px; }
.bcol .rcard .front .info .val { font-size: 22px; } .bcol .rcard .front .info .sym { font-size: 17px; } .bcol .rcard .front .foil .tlogo { width: 42px; height: 42px; font-size: 10px; bottom: -20px; }
.bcol .rcard .front .info { padding-top: 26px; }
.bhead { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.vs { align-self: center; font-family: var(--display); font-variation-settings: 'wdth' 125, 'wght' 900; font-size: 26px; color: var(--text-3); text-align: center; margin-top: 140px; }
.bbanner { display: flex; gap: 32px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 24px; }

@media (max-width: 960px) { .gamebar { grid-template-columns: 1fr 1fr; } .achgrid { grid-template-columns: repeat(2, 1fr); } .barena { grid-template-columns: 1fr; } .vs { margin: 0; } .slam { font-size: 56px; } .slam.legend { font-size: 64px; } }

/* v3.1 fixes */
.holdwrap { margin-top: 28px; }
.rcard .front .foil { flex: none; }
.rcard .front .info .nm { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bcol .rcard .front .foil { height: 44%; }
.bcol .rcard .front .info .nm { display: none; }
.bcol .rcard .front .info { padding-top: 30px; gap: 2px; }
.bcol .rcard .front .info .mult { font-size: 11px; }

/* v4 · quantity stepper, many-card reveal, green pass */
.qty { display: flex; align-items: center; gap: 6px; }
.qbtn { width: 36px; height: 36px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); font-size: 18px; font-weight: 700; display: grid; place-items: center; }
.qbtn:hover { border-color: var(--line-2); }
.qty-n { min-width: 40px; text-align: center; font-size: 20px; font-weight: 800; }
.qty .fpill { height: 32px; padding: 0 12px; font-size: 13px; }
.qty .fpill.on::before { content: none; }
.stage.many .rcard { width: 150px; height: 218px; }
.stage.many .rcard .front .info .val { font-size: 22px; } .stage.many .rcard .front .info .sym { font-size: 17px; } .stage.many .rcard .front .foil .tlogo { width: 42px; height: 42px; font-size: 10px; bottom: -20px; }
.stage.many .rcard .front .info { padding-top: 28px; gap: 2px; } .stage.many .rcard .front .info .nm { display: none; } .stage.many .rcard .front .info .mult { font-size: 11px; }
.stage.dense .rcard { width: 118px; height: 172px; }
.stage.dense .rcard .front .info .val { font-size: 18px; } .stage.dense .rcard .front .info .sym { font-size: 14px; } .stage.dense .rcard .front .foil .tlogo { width: 34px; height: 34px; font-size: 8.5px; bottom: -16px; }
.stage.dense .rcard .front .info { padding-top: 22px; } .stage.dense .rcard .front .info .mult { font-size: 9.5px; } .stage.dense .rcard .front .foil .tier { font-size: 8.5px; padding: 3px 6px; }
.stage.dense .rcard .back::before { width: 44px; height: 44px; }
.reveal { overflow: auto; justify-content: flex-start; padding-top: 48px; }
.reveal .stage { max-width: 1240px; }
.wordmark .mark { background: var(--coin); }
.wordmark .mark::after { background: var(--holo); inset: 8px; }
.nav a.active::after { background: var(--coin); }
.btn-rip::before { background: var(--coin); filter: blur(16px); opacity: .45; }
.btn-rip:hover::before { opacity: .85; }
.coin { background: radial-gradient(circle at 35% 30%, #9CFFB0, var(--coin) 55%, var(--coin-2)); color: #03230A; }
.gcard.battle { border-color: rgba(0,200,5,.3); background: linear-gradient(120deg, rgba(0,200,5,.10), var(--surface) 60%); }
.chase-t, .tok.chase .s::after { background: var(--coin); color: #03230A; }
body { background: radial-gradient(1200px 500px at 50% -120px, #12251A 0%, var(--bg) 60%) fixed, var(--bg); }

/* ================= v5 · near-black canvas, real logos, flows ================= */
:root { --bg: #0A0A0C; --bg-2: #0F0F12; --surface: #141417; --surface-2: #1B1B20; --surface-3: #24242B; --line: rgba(255,255,255,.07); --line-2: rgba(255,255,255,.13); }
body { background: var(--bg); position: relative; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(900px 420px at 50% -80px, rgba(120,90,255,.18), transparent 70%), radial-gradient(700px 400px at 85% 15%, rgba(0,200,5,.07), transparent 70%); }
.topbar, .page, .reveal, .modal-bg, .toast, .ach, .usermenu, .slam, .spark { position: relative; z-index: 1; }
.topbar { position: sticky; }
.reveal, .modal-bg, .toast, .ach, .slam, .spark, .usermenu { position: fixed; }
/* logo mark: the one from v2 (holo square, dark core) */
.wordmark .mark { background: var(--holo); border-radius: 8px; }
.wordmark .mark::after { background: var(--bg); inset: 7px; border-radius: 3px; }
/* ticker logos */
.tlogo { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: #fff; flex: none; border: 0; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 2px 6px rgba(0,0,0,.35); }
.tlogo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tlogo.mono { background: hsl(var(--h) 45% 28%); color: hsl(var(--h) 70% 88%); font-family: var(--mono); font-size: 9.5px; font-weight: 700; }
/* booster: no badge, logo row is the art */
.booster .badge { display: none; }
.booster .art .chips { left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 0; }
.booster .art .chips .tlogo { width: calc(var(--w) * .16); height: calc(var(--w) * .16); margin-left: calc(var(--w) * -.03); border: 2px solid rgba(255,255,255,.9); box-shadow: 0 6px 16px rgba(0,0,0,.4); }
.booster .art .chips .tlogo:first-child { margin-left: 0; }
.booster .art .chips .tlogo.mono { font-size: calc(var(--w) * .045); }
.booster .art .giant { top: 38%; }
.booster .plate .fine { display: none; }
.pack-card .foot .names { font-size: 12px; color: var(--text-3); }
.rcard .front .foil .tlogo { position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); width: 56px; height: 56px; border: 4px solid var(--surface); }
.stage.many .rcard .front .foil .tlogo { width: 42px; height: 42px; bottom: -20px; }
.stage.dense .rcard .front .foil .tlogo { width: 34px; height: 34px; bottom: -16px; border-width: 3px; }
.bcol .rcard .front .foil .tlogo { width: 42px; height: 42px; bottom: -20px; }
.binder .slot .tlogo { opacity: .3; filter: grayscale(1); }
.binder .slot.got .tlogo { opacity: 1; filter: none; }
.pack-card .booster { --w: 150px; }
.pack-card { padding-top: 16px; }
/* onboarding */
.modal.ob { width: 460px; }
.obdots { display: flex; gap: 6px; margin-bottom: 16px; }
.obdots i { width: 28px; height: 4px; border-radius: 2px; background: var(--surface-2); }
.obdots i.on { background: var(--coin); } .obdots i.done { background: var(--text-3); }
.obopt { justify-content: flex-start; width: 100%; height: auto; padding: 12px 14px; gap: 12px; text-align: left; }
.obopt[disabled] { opacity: .45; }
.obcheck { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--text-2); line-height: 1.45; }
.obcheck input { margin-top: 3px; accent-color: var(--coin); }
/* account menu */
.usermenu { position: fixed; right: 28px; top: 70px; z-index: 90; width: 260px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 16px; padding: 8px; box-shadow: 0 30px 60px rgba(0,0,0,.6); animation: rise .18s ease both; }
.umhead { display: flex; gap: 10px; align-items: center; padding: 8px 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.umitem { display: block; width: 100%; text-align: left; padding: 9px 10px; border-radius: 10px; font-weight: 600; font-size: 13.5px; color: var(--text-2); }
.umitem:hover { background: var(--surface-2); color: var(--text); }
.umitem.danger { color: var(--coral); }
.avatar { cursor: pointer; }
/* share card */
.sharecard { border-radius: 18px; overflow: hidden; background: var(--bg-2); border: 1px solid var(--line-2); display: grid; grid-template-columns: 150px 1fr; }
.sharecard .foil { position: relative; min-height: 170px; }
.sharecard .foil .sheen { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.5) 48%, transparent 60%); }
.sharecard .foil .tier { position: absolute; left: 10px; top: 10px; padding: 4px 8px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.sharecard .foil .tlogo { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 60px; height: 60px; border: 4px solid rgba(255,255,255,.9); }
.sharecard .sbody { padding: 16px 18px; }
/* activity + empty + fair */
.act { display: flex; gap: 12px; align-items: center; padding: 10px 8px; border-bottom: 1px solid var(--line); }
.act:last-child { border-bottom: 0; }
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 30px 20px; }
.empty .booster { --w: 120px; margin-bottom: 10px; }
.odds .r.hit { border-color: rgba(0,200,5,.5); background: rgba(0,200,5,.06); }
.input select, select.input { appearance: none; }
footer { position: relative; z-index: 1; }
.tlogo.dark { background: #1C1C22; }
.tlogo.dark img { padding: 2px; }

/* v6 · positions view, sticky header fix */
.topbar { z-index: 40; }
.page, main { z-index: 1; }
.pos { display: grid; grid-template-columns: 24px 32px 1.5fr .8fr .8fr .9fr auto; gap: 12px; align-items: center; padding: 10px 8px; border-radius: 12px; }
.pos:hover { background: var(--surface-2); }
.pos.head { padding: 4px 8px 8px; border-bottom: 1px solid var(--line); border-radius: 0; margin-bottom: 4px; }
.pos.head:hover { background: none; }
.pos .v { text-align: right; }
.poscb { display: grid; place-items: center; }
.poscb input { width: 16px; height: 16px; accent-color: var(--coin); cursor: pointer; }
.selbar { position: sticky; bottom: 16px; z-index: 30; display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid rgba(0,200,5,.4); border-radius: 16px; padding: 12px 16px; box-shadow: 0 20px 50px rgba(0,0,0,.6), 0 0 30px rgba(0,200,5,.12); margin-top: 16px; animation: rise .2s ease both; }
.pos > div { min-width: 0; }

/* ================= v7 · battles, foil tiers, alignment, selection ================= */
/* positions: fixed last column so headers line up with values */
.pos { grid-template-columns: 24px 32px 1.4fr .8fr .8fr .9fr 64px; }
.pos.head .v { text-align: right; }
/* catalog selection in the product's own colour, not white */
.picker .tok.sel { background: rgba(0,200,5,.10); box-shadow: inset 0 0 0 1px rgba(0,200,5,.45); color: var(--text); }
.picker .tok.sel .n, .picker .tok.sel .chg { color: var(--text-2); }
.picker .tok.sel .s::after { content: '✓'; margin-left: 8px; color: var(--coin); font-weight: 800; }
.picker .tok.sel .px { color: var(--coin); }
/* battles */
.booster.xs { --w: 72px; }
.booster.xs .plate, .booster.xs .art .chips, .booster.xs .behind { display: none; }
.booster.xs .art .giant { font-size: 20px; top: 50%; }
.booster.xs .wrap { transform: rotate(-4deg); }
.chal { display: flex; gap: 14px; align-items: center; padding: 12px 8px; border-bottom: 1px solid var(--line); }
.chal:last-child { border-bottom: 0; }
.chal .booster { flex: none; }
.howagent { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--bg-2); border: 1px dashed var(--line-2); font-size: 13px; color: var(--text-2); line-height: 1.5; }
.tlogo.sm { width: 22px; height: 22px; font-size: 8px; }
.agent { align-items: center; }
/* foil tiers: each finish is its own material */
.rcard .front .foil { background-blend-mode: normal; }
.rcard .front .foil::before { content: ''; position: absolute; inset: 0; pointer-events: none; }
.rcard.common .front .foil { background: linear-gradient(160deg, #B9B7AE 0%, #7E7C74 100%); }
.rcard.common .front .foil::before { background: repeating-linear-gradient(135deg, transparent 0 3px, rgba(0,0,0,.06) 3px 4px); }
.rcard.uncommon .front .foil { background: linear-gradient(160deg, #F8F8F6 0%, #B4B9C3 38%, #EEEFF2 62%, #8C939F 100%); }
.rcard.uncommon .front .foil::before { background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.18) 2px 3px); mix-blend-mode: overlay; }
.rcard.rare .front .foil { background: linear-gradient(150deg, #7FBBFF 0%, #2F6BFF 40%, #9BDCFF 70%, #2452D9 100%); }
.rcard.rare .front .foil::before { background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.9) 0 1.5px, transparent 2px), radial-gradient(circle at 70% 60%, rgba(255,255,255,.8) 0 1.2px, transparent 2px), radial-gradient(circle at 45% 80%, rgba(255,255,255,.7) 0 1px, transparent 2px), radial-gradient(circle at 85% 20%, rgba(255,255,255,.9) 0 1.5px, transparent 2px), repeating-linear-gradient(115deg, transparent 0 6px, rgba(255,255,255,.08) 6px 7px); }
.rcard.epic .front .foil { background: linear-gradient(150deg, #C784FF 0%, #7A38FF 35%, #F0A6FF 62%, #4E1FD1 100%); }
.rcard.epic .front .foil::before { background: conic-gradient(from 90deg at 50% 50%, rgba(255,255,255,0) 0 40%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 60% 100%), radial-gradient(circle at 30% 40%, rgba(255,255,255,.9) 0 1.5px, transparent 2px), radial-gradient(circle at 75% 25%, rgba(255,255,255,.9) 0 1.5px, transparent 2px), radial-gradient(circle at 60% 75%, rgba(255,255,255,.8) 0 1.2px, transparent 2px); mix-blend-mode: screen; animation: epicspin 5s linear infinite; }
@keyframes epicspin { to { filter: hue-rotate(20deg); } }
.rcard.legend .front .foil { background: var(--f-legend); }
.rcard.legend .front .foil::before { background: repeating-linear-gradient(115deg, rgba(255,255,255,0) 0 8px, rgba(255,255,255,.22) 8px 10px), radial-gradient(circle at 25% 35%, #fff 0 1.8px, transparent 2.4px), radial-gradient(circle at 70% 30%, #fff 0 1.6px, transparent 2.2px), radial-gradient(circle at 55% 70%, #fff 0 1.4px, transparent 2px), radial-gradient(circle at 15% 75%, #fff 0 1.2px, transparent 2px), radial-gradient(circle at 85% 65%, #fff 0 1.6px, transparent 2.2px); mix-blend-mode: overlay; }
/* tier frame + tier stripe */
.rcard .front { border-width: 1px; }
.rcard.rare .front { border-color: rgba(120,170,255,.55); box-shadow: 0 30px 60px rgba(0,0,0,.6), inset 0 0 0 1px rgba(120,170,255,.25); }
.rcard.epic .front { border-color: rgba(190,130,255,.6); box-shadow: 0 30px 60px rgba(0,0,0,.6), inset 0 0 0 1px rgba(190,130,255,.3); }
.rcard.legend .front { border: 2px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--f-legend) border-box; }
.rcard .front .foil .tier { background: rgba(0,0,0,.55); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.25); }
.rcard.legend .front .foil .tier { background: linear-gradient(90deg, #FFD36B, #FF8AD4); color: #2A1400; border-color: transparent; }
.rcard .front .info .val { text-shadow: 0 0 20px rgba(255,255,255,.08); }
.rcard.rare .front .info .mult { color: #8FC4FF; } .rcard.epic .front .info .mult { color: #D9A8FF; } .rcard.legend .front .info .mult { color: #FFD36B; }
.rcard .front .foil .sheen { background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.65) 48%, transparent 60%); }
.rcard.common .front .foil .sheen, .rcard.uncommon .front .foil .sheen { opacity: .6; animation-duration: 3.6s; }
/* tier swatches share the materials */
.sw-rare { background: linear-gradient(150deg, #7FBBFF 0%, #2F6BFF 40%, #9BDCFF 70%, #2452D9 100%); }
.sw-epic { background: linear-gradient(150deg, #C784FF 0%, #7A38FF 35%, #F0A6FF 62%, #4E1FD1 100%); }
.pos.head .label { letter-spacing: .08em; margin-right: -.08em; }
.bonus { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(0,200,5,.08); border: 1px solid rgba(0,200,5,.3); font-size: 13px; color: var(--text-2); margin-bottom: 14px; }
.bonus b { color: var(--text); }
.reveal, .modal-bg { z-index: 60; }
.spark { z-index: 70; } .slam { z-index: 75; } .toast { z-index: 80; } .ach { z-index: 85; } .usermenu { z-index: 90; }

/* ================= v9 · stock card, materials, daily, mobile ================= */
/* --- the stock card (pulled item) --- */
.rcard { width: 232px; height: 336px; }
.rcard .front { display: flex; flex-direction: column; background: linear-gradient(170deg, #1B1C22, #0F1014); border: 1px solid rgba(255,255,255,.14); overflow: hidden; }
.rcard .front::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.018) 3px 4px); pointer-events: none; }
.sc-top { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px 8px; position: relative; z-index: 2; }
.sc-tick { font-family: var(--mono); font-weight: 700; letter-spacing: .12em; font-size: 12.5px; color: rgba(255,255,255,.85); }
.sc-mark { width: 16px; height: 16px; border-radius: 5px; background: var(--holo); position: relative; opacity: .9; }
.sc-mark::after { content: ''; position: absolute; inset: 4px; border-radius: 2px; background: #111; }
.sc-field { flex: 1; margin: 0 12px; border-radius: 12px; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.12); background: #0B0C10 !important; }
.sc-field::before { content: ''; position: absolute; inset: 0; opacity: .22; background: inherit; }
.rcard.common .sc-field::before { background: var(--f-common); }
.rcard.uncommon .sc-field::before { background: var(--f-uncommon); }
.rcard.rare .sc-field::before { background: var(--f-rare); opacity: .3; }
.rcard.epic .sc-field::before { background: var(--f-epic); opacity: .32; }
.rcard.legend .sc-field::before { background: var(--f-legend); opacity: .35; }
.sc-field::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 6px, rgba(255,255,255,.035) 6px 7px), radial-gradient(60% 40% at 50% 100%, rgba(255,255,255,.08), transparent 70%); }
.sc-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: linear-gradient(180deg, transparent, rgba(255,255,255,.06)), repeating-linear-gradient(90deg, transparent 0 8px, rgba(255,255,255,.05) 8px 9px); transform: perspective(160px) rotateX(58deg); transform-origin: 50% 100%; opacity: .8; }
.sc-glow { position: absolute; left: 50%; top: 46%; width: 120px; height: 120px; transform: translate(-50%,-50%); border-radius: 50%; filter: blur(26px); opacity: .55; background: #fff; }
.rcard.common .sc-glow { background: #B9B7AE; opacity: .25; } .rcard.uncommon .sc-glow { background: #E6E9EF; opacity: .35; }
.rcard.rare .sc-glow { background: #5FA8FF; } .rcard.epic .sc-glow { background: #B26BFF; } .rcard.legend .sc-glow { background: conic-gradient(#FF5E7E, #FFC24D, #7CFF8A, #4DE0FF, #8A6BFF, #FF5E7E); opacity: .7; animation: spin 6s linear infinite; }
.sc-field .tlogo.sc-logo, .sc-field .sc-foil { position: absolute; left: 50%; top: 44%; transform: translate(-50%,-50%); width: 84px; height: 84px; border: 0; box-shadow: 0 18px 40px rgba(0,0,0,.6), 0 0 0 4px rgba(255,255,255,.08); z-index: 2; }
.sc-field .tlogo.sc-logo { animation: floatcard 3.2s ease-in-out infinite; }
@keyframes floatcard { 0%,100% { transform: translate(-50%,-50%); } 50% { transform: translate(-50%,-56%); } }
.sc-foil { border-radius: 22px; background: var(--holo); display: block; }
.sc-foil::after { content: ''; position: absolute; inset: 22px; border-radius: 8px; background: #111; }
.sc-foil.sm { width: 32px; height: 32px; border-radius: 9px; position: relative; display: inline-block; } .sc-foil.sm::after { inset: 9px; border-radius: 3px; }
.sc-field .reflect { display: none; }
.sc-field .tier { position: absolute; left: 10px; top: 10px; padding: 4px 8px; border-radius: 999px; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.2); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .1em; z-index: 3; }
.rcard.legend .sc-field .tier { background: linear-gradient(90deg, #FFD36B, #FF8AD4); color: #2A1400; border-color: transparent; }
.sc-bot { display: flex; justify-content: space-between; align-items: flex-end; padding: 10px 14px 14px; position: relative; z-index: 2; gap: 8px; }
.sc-name { font-weight: 800; font-size: 14px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.sc-serial { font-family: var(--mono); font-size: 10px; color: var(--text-3); margin-top: 3px; }
.sc-tag { font-family: var(--mono); font-weight: 800; font-size: 13px; padding: 5px 9px; border-radius: 7px; background: #F3F1EA; color: #0B0C10; white-space: nowrap; }
.rcard.rare .sc-tag { background: #8FC4FF; } .rcard.epic .sc-tag { background: #D9A8FF; } .rcard.legend .sc-tag { background: linear-gradient(90deg, #FFD36B, #FF8AD4); }
.rcard.rare .front { border-color: rgba(120,170,255,.55); } .rcard.epic .front { border-color: rgba(190,130,255,.6); }
.rcard.legend .front { border: 2px solid transparent; background: linear-gradient(170deg, #1B1C22, #0F1014) padding-box, var(--f-legend) border-box; }
/* reveal stage: reflective floor */
.reveal .stage { position: relative; padding-bottom: 30px; }
.reveal .stage::after { content: ''; position: absolute; left: 10%; right: 10%; bottom: -6px; height: 60px; background: radial-gradient(60% 100% at 50% 0%, rgba(255,255,255,.10), transparent 70%); pointer-events: none; }
.reveal { background: radial-gradient(900px 500px at 50% 35%, rgba(60,50,110,.40), rgba(10,10,12,.97) 70%); }
/* many-card scaling for the new card */
.stage.many .rcard { width: 156px; height: 226px; } .stage.many .sc-field .tlogo.sc-logo, .stage.many .sc-field .sc-foil { width: 54px; height: 54px; } .stage.many .sc-name { max-width: 70px; font-size: 11px; } .stage.many .sc-tag { font-size: 11px; padding: 4px 6px; } .stage.many .sc-top { padding: 8px 10px 4px; } .stage.many .sc-bot { padding: 8px 10px 10px; } .stage.many .sc-field { margin: 0 8px; } .stage.many .sc-serial { display: none; }
.stage.dense .rcard { width: 118px; height: 172px; } .stage.dense .sc-field .tlogo.sc-logo, .stage.dense .sc-field .sc-foil { width: 40px; height: 40px; } .stage.dense .sc-name { display: none; } .stage.dense .sc-tag { font-size: 10px; padding: 3px 5px; } .stage.dense .sc-top { padding: 6px 8px 3px; } .stage.dense .sc-bot { padding: 6px 8px 8px; } .stage.dense .sc-field { margin: 0 6px; } .stage.dense .sc-serial { display: none; } .stage.dense .sc-field .tier { font-size: 8px; padding: 2px 5px; }
.bcol .rcard { width: 150px; height: 218px; } .bcol .sc-field .tlogo.sc-logo { width: 52px; height: 52px; } .bcol .sc-name { max-width: 66px; font-size: 11px; } .bcol .sc-tag { font-size: 11px; padding: 4px 6px; } .bcol .sc-top { padding: 8px 10px 4px; } .bcol .sc-bot { padding: 8px 10px 10px; } .bcol .sc-field { margin: 0 8px; } .bcol .sc-serial { display: none; }
/* --- pack wrapper: glossy plastic --- */
.booster .wrap::after { background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.34) 42%, rgba(255,255,255,.06) 48%, transparent 60%), radial-gradient(120% 40% at 20% 18%, rgba(255,255,255,.22), transparent 60%), radial-gradient(90% 30% at 80% 62%, rgba(255,255,255,.14), transparent 60%), radial-gradient(100% 26% at 30% 86%, rgba(255,255,255,.12), transparent 60%); }
.booster .wrap { box-shadow: 0 30px 50px -18px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.08) inset, inset 0 -18px 30px rgba(0,0,0,.25), inset 0 18px 30px rgba(255,255,255,.06); }
/* --- daily --- */
.dailybtn { position: relative; padding: 0 12px; font-size: 16px; }
.dailybtn .dot { display: none; position: absolute; right: -3px; top: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--coin); box-shadow: 0 0 0 2px var(--bg), 0 0 10px var(--coin); }
.dailybtn.ready { border-color: rgba(0,200,5,.5); box-shadow: 0 0 18px rgba(0,200,5,.18); }
.dailybtn.ready .dot { display: block; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.35); } }
.modal.daily { width: 520px; }
.dailytiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.dailytiles .tile { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.umstats { display: flex; gap: 14px; padding: 6px 10px 10px; font-size: 12.5px; color: var(--text-2); }
/* --- mobile: bottom tabs, single column, sheets --- */
.tabbar { display: none; }
@media (max-width: 760px) {
  .topbar-inner { padding: 0 14px; height: 56px; gap: 10px; }
  .nav { display: none; }
  .topbar-right { margin-left: auto; gap: 6px; }
  .topbar-right .btn-coin { display: none; }
  .topbar-right .chip { height: 36px; padding: 0 10px; font-size: 12.5px; }
  #foilchip { display: none; }
  .avatar { width: 36px; height: 36px; border-radius: 10px; }
  .page { padding: 14px 14px 96px; }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; height: 64px; padding-bottom: env(safe-area-inset-bottom); background: rgba(13,14,18,.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--line); }
  .tabbar a, .tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10.5px; font-weight: 700; color: var(--text-3); min-height: 44px; }
  .tabbar a.active { color: var(--text); }
  .tabbar svg { width: 22px; height: 22px; }
  .tabbar .rip { position: relative; top: -14px; }
  .tabbar .rip span { width: 52px; height: 52px; border-radius: 16px; background: var(--coin); color: #03230A; display: grid; place-items: center; box-shadow: 0 0 24px rgba(0,200,5,.45), 0 8px 20px rgba(0,0,0,.5); font-size: 22px; }
  .ticker { margin: 0 -14px 12px; padding: 0 14px; }
  .g5, .g4, .g3, .g2 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .split { grid-template-columns: 1fr; gap: 12px; }
  .card { padding: 16px; border-radius: 18px; }
  h1 { font-size: 30px; }
  .section-title { font-size: 20px; }
  .section-head { margin: 24px 0 10px; }
  .shopbar { gap: 8px; margin: 14px 0 12px; }
  .shopbar .section-title { width: 100%; }
  .shopbar .spacer { display: none; }
  .shopbar .search { min-width: 0; width: 100%; }
  .fpill { height: 36px; padding: 0 12px; font-size: 12.5px; }
  .pack-card { padding: 12px 10px 10px; gap: 6px; }
  .pack-card .booster { --w: 110px; margin: 6px 0 4px; }
  .pack-card .name { font-size: 15px; }
  .pack-card .by { font-size: 11px; }
  .pack-card .eyebrow { font-size: 9px; }
  .pack-card .star { left: 8px; top: 6px; }
  .bigpulls { grid-template-columns: 1fr 1fr; gap: 8px; }
  .bigpull { padding: 10px; gap: 8px; } .bigpull .sw { width: 26px; height: 36px; } .bigpull .v { font-size: 14px; }
  .gamebar { grid-template-columns: 1fr; }
  /* pack page */
  .qty .fpill { padding: 0 10px; }
  .booster.lg { --w: 190px; }
  .binder { grid-template-columns: repeat(4, 1fr); }
  .tok { grid-template-columns: 32px 1fr auto; } .tok .chg { display: none; }
  /* reveal */
  .reveal { padding: 70px 12px 24px; gap: 14px; }
  .reveal-head { flex-wrap: wrap; justify-content: center; text-align: center; }
  .reveal .stage { gap: 12px; }
  .rcard { width: 156px; height: 226px; }
  .sc-field .tlogo.sc-logo, .sc-field .sc-foil { width: 54px; height: 54px; } .sc-name { max-width: 70px; font-size: 11px; } .sc-tag { font-size: 11px; padding: 4px 6px; } .sc-top { padding: 8px 10px 4px; } .sc-bot { padding: 8px 10px 10px; } .sc-field { margin: 0 8px; } .sc-serial { display: none; }
  .stage.many .rcard, .stage.dense .rcard { width: 104px; height: 150px; } .stage.many .sc-field .tlogo.sc-logo, .stage.dense .sc-field .tlogo.sc-logo { width: 36px; height: 36px; } .stage.many .sc-name, .stage.dense .sc-name { display: none; } .stage.many .sc-field .tier, .stage.dense .sc-field .tier { font-size: 7.5px; padding: 2px 4px; }
  .reveal-sum { flex-wrap: wrap; gap: 14px 22px; padding: 14px 16px; width: 100%; }
  .reveal-sum .num-lg { font-size: 24px; }
  .reveal-actions { flex-wrap: wrap; justify-content: center; width: 100%; }
  .reveal-actions .btn { flex: 1 1 45%; height: 48px; font-size: 14px; padding: 0 12px; }
  .slam { font-size: 48px; } .slam.legend { font-size: 56px; }
  /* modals as bottom sheets */
  .modal-bg { align-items: flex-end; padding: 0; }
  .modal { width: 100% !important; max-width: 100%; border-radius: 22px 22px 0 0; padding: 20px 18px calc(20px + env(safe-area-inset-bottom)); max-height: 92vh; overflow: auto; animation: sheetup .25s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes sheetup { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
  .modal::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--line-2); margin: -6px auto 14px; }
  .sharecard { grid-template-columns: 110px 1fr; }
  .dailytiles { grid-template-columns: 1fr 1fr 1fr; gap: 6px; } .dailytiles .tile { padding: 10px 8px; } .dailytiles .num-md { font-size: 16px; }
  .usermenu { right: 12px; left: 12px; width: auto; top: 64px; }
  /* positions */
  .pos { grid-template-columns: 22px 30px 1fr auto 56px; gap: 8px; padding: 10px 4px; }
  .pos > .v:nth-child(4), .pos > .v:nth-child(5) { display: none; }
  .pos.head > :nth-child(4), .pos.head > :nth-child(5) { display: none; }
  .holding { grid-template-columns: 24px 1fr auto; } .holding > .v:nth-child(4) { display: none; }
  .selbar { bottom: 74px; flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .achgrid { grid-template-columns: 1fr; }
  .profileline { flex-wrap: wrap; }
  /* battles */
  .barena { grid-template-columns: 1fr; } .vs { margin: 0; }
  .bcol .stage { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 8px; }
  .bcol .rcard { flex: none; }
  .chal { flex-wrap: wrap; } .chal .btn { width: 100%; }
  .agent { padding: 10px 8px; }
  /* launch */
  .tints { flex-wrap: wrap; }
  .picker { max-height: 300px; }
  .seg button { padding: 7px 10px; font-size: 12.5px; }
  /* footer */
  footer { flex-direction: column; gap: 8px; font-size: 12px; }
  .toast { bottom: 84px; max-width: calc(100% - 24px); text-align: center; }
  .ach { right: 12px; left: 12px; bottom: 84px; min-width: 0; }
}
html, body { overflow-x: clip; max-width: 100%; }
.grid, .g2, .g3, .g4, .g5 { grid-auto-columns: minmax(0, 1fr); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.split > *, .card, .stack > * { min-width: 0; }
@media (max-width: 760px) { .g5, .g4, .g3, .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .split { grid-template-columns: minmax(0, 1fr); } .row.wrap, .shopbar { flex-wrap: wrap; } .row > .pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .hero-stats, .row[style*="gap:22px"] { flex-wrap: wrap; gap: 12px 18px !important; } }
@media (max-width: 760px) {
  .packhero { grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; text-align: center; }
  .packhero .row { justify-content: center; }
  .packhero h1 { font-size: 30px !important; }
  .pack-card .star { display: none; }
  .section-title[style*="font-size:34px"] { font-size: 26px !important; }
  .row.between > .pill:last-child { display: none; }
  .agent { flex-direction: row; }
  .card .grid.g2[style*="gap:8px"] { grid-template-columns: minmax(0, 1fr); }
  .agent .tiny.faint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
  .tabs .seg, .seg { max-width: 100%; overflow-x: auto; }
  .seg button { white-space: nowrap; }
}
/* line icons replace emoji */
.ico { display: inline-flex; width: 20px; height: 20px; flex: none; }
.ico svg { width: 100%; height: 100%; }
.ico.sm { width: 14px; height: 14px; }
.gicon .ico { width: 20px; height: 20px; color: var(--text); }
.gicon.big { width: 56px; height: 56px; border-radius: 16px; } .gicon.big .ico { width: 26px; height: 26px; }
.dailybtn .ico { width: 18px; height: 18px; color: var(--coin); }
.reveal .mute .ico { width: 16px; height: 16px; color: var(--text-2); }
.act .gicon { width: 36px; height: 36px; border-radius: 10px; } .act .gicon .ico { width: 17px; height: 17px; color: var(--text-2); }
.tabbar .rip span svg { width: 24px; height: 24px; }

.burnline { display: flex; gap: 10px; align-items: center; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); font-size: 12.5px; color: var(--text-2); }
.burnline b { color: var(--text); }
/* mobile pack page: hero → open → inside → binder → odds, plus a sticky rip bar */
.stickyrip { display: none; }
@media (max-width: 760px) {
  .packsplit > .stack { display: contents; }
  .packsplit .packhero { order: 1; }
  .packsplit .opencard { order: 2; }
  .packsplit .insidecard { order: 3; }
  .packsplit .bindercard { order: 4; }
  .packsplit .oddscard { order: 5; }
  .packhero { padding: 14px !important; }
  .packhero .booster.lg { --w: 140px; }
  .packhero > div:first-child { padding: 0 !important; }
  .packhero h1 { font-size: 26px !important; margin-top: 2px !important; }
  .packhero p.muted { display: none; }
  .packhero .row[style*="margin-top:18px"] { margin-top: 10px !important; gap: 14px !important; justify-content: center; }
  .packhero .num-md { font-size: 18px; }
  .opencard .btn-lg { height: 52px; }
  .stickyrip { display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 44; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border-radius: 16px; background: rgba(20,20,23,.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--line-2); box-shadow: 0 20px 50px rgba(0,0,0,.6); }
  .stickyrip > div:first-child { flex: 1; min-width: 0; }
  .stickyrip .btn { height: 44px; padding: 0 20px; }
  .page:has(.stickyrip) { padding-bottom: 170px; }
}
.view { animation: rise .28s ease; }
/* ---- mobile duel ---- */
.reveal.duel { justify-content: flex-start; gap: 12px; padding-top: 64px; }
.bscore { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 10px 12px; }
.bside { display: flex; align-items: center; gap: 8px; }
.bside.them { justify-content: flex-end; }
.bside .tlogo { width: 30px; height: 30px; }
.bside.me .num { color: var(--coin); }
.bvs { font-family: var(--display); font-variation-settings: 'wdth' 125, 'wght' 900; font-style: italic; color: var(--text-3); font-size: 16px; }
.bround { font-size: 11.5px; letter-spacing: .12em; font-weight: 800; text-transform: uppercase; color: var(--text-2); }
.bpair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 420px; }
.bslot { display: flex; justify-content: center; border-radius: 20px; padding: 8px; transition: box-shadow .3s, background .3s; }
.bslot .rcard { width: 156px; height: 226px; }
.bpair.won-me .bslot.me { background: rgba(0,200,5,.08); box-shadow: inset 0 0 0 1px rgba(0,200,5,.55), 0 0 30px rgba(0,200,5,.25); }
.bpair.won-them .bslot.them { background: rgba(160,100,255,.08); box-shadow: inset 0 0 0 1px rgba(160,100,255,.55), 0 0 30px rgba(140,90,255,.25); }
.bpair.won-tie .bslot { box-shadow: inset 0 0 0 1px var(--line-2); }
.bledger { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 420px; }
.bl { display: grid; grid-template-columns: 16px 1fr auto 1fr 16px; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-family: var(--mono); font-size: 12.5px; }
.bl .sw { width: 14px; height: 18px; border-radius: 3px; }
.bl b:first-of-type { text-align: left; } .bl b:last-of-type { text-align: right; }
.bl.me b:first-of-type { color: var(--coin); } .bl.them b:last-of-type { color: #C9A6FF; }
.reveal.duel .bbanner { flex-wrap: wrap; gap: 10px 20px; padding: 12px 14px; width: 100%; max-width: 420px; }
.reveal.duel .bbanner .num-lg { font-size: 22px; }
/* ---- mobile polish across screens ---- */
@media (max-width: 760px) {
  .achgrid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .achv { padding: 8px; gap: 8px; } .achv .tiny { display: none; } .achv .medal { width: 26px; height: 26px; font-size: 12px; }
  .bricks { grid-template-columns: repeat(12, 1fr); }
  .flow { grid-template-columns: 1fr; } .flow .arrow { transform: rotate(90deg); text-align: center; }
  .hero { gap: 14px; } .hero .fan { display: none; }
  .hero-stats { gap: 12px 18px; }
  .num-xl { font-size: 40px; }
  .lp-calc .num-xl { font-size: 40px; }
  .input[type="range"] { width: 100%; }
  .odds .r { grid-template-columns: 18px 1fr 52px 52px; gap: 8px; padding: 8px 10px; }
  .picker .tok { grid-template-columns: 32px 1fr auto; }
  .tints button { width: 38px; height: 38px; }
  .row.between.wrap > .btn { width: 100%; }
  .fpill { max-width: 100%; }
  .pack-card .foot .price { font-size: 14px; }
}
@media (max-width: 760px) {
  .view .grid.g2 { grid-template-columns: minmax(0, 1fr); }
  .g3 { grid-template-columns: minmax(0, 1fr); }
  .odds .r { grid-template-columns: 18px 1fr auto auto; }
  .odds .r .p { white-space: nowrap; }
  .seg { flex-wrap: nowrap; }
  .field .seg { width: 100%; justify-content: space-between; }
  .field .seg button { flex: 1; padding: 7px 6px; }
}
/* identity avatar: wallet gradient, XP ring, level badge */
.avatar { width: auto; height: auto; background: none; border: 0; padding: 0; display: inline-flex; border-radius: 50%; }
.av { position: relative; display: inline-grid; place-items: center; width: var(--s); height: var(--s); flex: none; }
.av-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.av-core { width: calc(var(--s) - 10px); height: calc(var(--s) - 10px); border-radius: 50%; background: linear-gradient(135deg, var(--a), var(--b)); display: grid; place-items: center; box-shadow: inset 0 -6px 12px rgba(0,0,0,.25), inset 0 4px 10px rgba(255,255,255,.25); }
.av-mark { width: 36%; height: 36%; border-radius: 22%; background: rgba(10,10,12,.82); position: relative; }
.av-mark::after { content: ''; position: absolute; inset: 26%; border-radius: 18%; background: var(--holo); }
.av-lvl { position: absolute; right: -3px; bottom: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--bg); border: 1.5px solid var(--coin); color: var(--coin); font-family: var(--mono); font-weight: 800; font-size: 10px; display: grid; place-items: center; line-height: 1; }
.umhead .av-lvl { font-size: 11px; }
.card .av { --s: 72px; }
.card .av .av-lvl { min-width: 24px; height: 24px; font-size: 12px; right: -2px; bottom: -2px; }
.avatar:hover .av-core { filter: brightness(1.1); }
@media (max-width: 760px) { .avatar .av { --s: 36px !important; } .avatar .av-ring { display: none; } .avatar .av-core { width: 32px; height: 32px; } }
/* ---- progression: quests, season, card backs, prestige ---- */
.progrid { gap: 20px; }
.quest { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.quest.done { border-color: rgba(0,200,5,.45); background: rgba(0,200,5,.06); }
.season { position: relative; padding-top: 4px; }
.stones { position: relative; height: 0; }
.stone { position: absolute; top: -21px; transform: translateX(-50%); width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); border: 2px solid var(--line-2); color: var(--text-3); font-family: var(--mono); font-size: 10px; font-weight: 800; display: grid; place-items: center; }
.stone.reached { background: var(--coin); border-color: var(--coin); color: #03230A; box-shadow: 0 0 14px rgba(0,200,5,.5); }
.stone.claimed { background: var(--bg); color: var(--coin); }
.backs { display: flex; gap: 8px; flex-wrap: wrap; }
.backpick { width: 40px; height: 54px; border-radius: 8px; border: 2px solid transparent; position: relative; display: grid; place-items: center; color: rgba(255,255,255,.7); }
.backpick.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--text); }
.backpick.locked { opacity: .35; filter: grayscale(.6); }
.back-graphite { background: linear-gradient(160deg, #4A4D58, #12141A); }
.back-ocean { background: linear-gradient(160deg, #3F84FF, #0E2A7A); }
.back-ember { background: linear-gradient(160deg, #FF7A3D, #7A1C0E); }
.back-lime { background: linear-gradient(160deg, #B9EA4B, #2C6A12); }
.back-grape { background: linear-gradient(160deg, #A46CFF, #2E0E8A); }
.back-gold { background: linear-gradient(160deg, #FFD24A, #8A5A00); }
.back-rose { background: linear-gradient(160deg, #FF6FA5, #7E0F44); }
.back-ice { background: linear-gradient(160deg, #A9E9FF, #1C6C9E); }
.back-holo { background: var(--holo); }
.rcard .back.back-ocean, .rcard .back.back-ember, .rcard .back.back-grape, .rcard .back.back-gold, .rcard .back.back-rose, .rcard .back.back-ice { border-color: rgba(255,255,255,.25); }
.rcard .back[class*="back-"]::before { box-shadow: 0 0 40px rgba(0,0,0,.35); }
.rcard .back.back-holo::before { background: #0B0C10; }
.prestige { display: flex; align-items: center; gap: 16px; margin-top: 14px; padding: 14px 16px; border-radius: 16px; border: 1px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--f-legend) border-box; }
.badges { margin-top: 14px; } .badges summary { cursor: pointer; font-weight: 700; color: var(--text-2); list-style: none; } .badges summary::-webkit-details-marker { display: none; } .badges summary::before { content: '›'; display: inline-block; margin-right: 8px; transition: transform .15s; } .badges[open] summary::before { transform: rotate(90deg); }
@media (max-width: 760px) { .progrid { grid-template-columns: 1fr; } .profileline { flex-wrap: wrap; } }

/* ================= v21 · the flip ================= */
.rcard { --rx: 0deg; --ry: 0deg; --flip: 0deg; --ty: 0px; --sc: 1; transform: translateY(var(--ty)) scale(var(--sc)) rotateX(var(--rx)) rotateY(calc(var(--ry) + var(--flip))); transition: transform .55s cubic-bezier(.34,1.45,.64,1); will-change: transform; }
.rcard:not(.flipped):not(.lift) { transition: transform .18s ease-out; }
.rcard:not(.flipped):active { --sc: .97; }
.rcard.lift { --ty: -22px; --sc: 1.07; transition: transform .22s cubic-bezier(.2,.9,.3,1.3); }
.rcard.flipped { --flip: 180deg; --rx: 0deg !important; --ry: 0deg !important; transition: transform .75s cubic-bezier(.34,1.35,.64,1); }
.rcard.landed { --ty: 0px; --sc: 1; }
.rcard.landed .sweep { animation: cardsweep .9s cubic-bezier(.2,.7,.2,1) .05s both; }
.rcard .sweep { position: absolute; inset: 0; border-radius: 18px; pointer-events: none; z-index: 5; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 48%, rgba(255,255,255,.12) 54%, transparent 65%); transform: translateX(-130%) rotateY(180deg); opacity: 0; mix-blend-mode: screen; }
@keyframes cardsweep { 0% { transform: translateX(-130%) rotateY(180deg); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateX(130%) rotateY(180deg); opacity: 0; } }
/* card back */
.rcard .back { background: linear-gradient(160deg, #23242B, #101115); border: 1px solid rgba(255,255,255,.16); display: grid; place-items: center; overflow: hidden; }
.rcard .back::before, .rcard .back::after { display: none; }
.rcard .back .bk-pattern { position: absolute; inset: 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 6px, transparent 6px 14px), repeating-linear-gradient(-45deg, rgba(255,255,255,.035) 0 6px, transparent 6px 14px); }
.rcard .back .bk-mark { width: 64px; height: 64px; border-radius: 16px; background: var(--holo); position: relative; box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 40px rgba(255,255,255,.12); animation: bkspin 9s linear infinite; }
.rcard .back .bk-mark::after { content: ''; position: absolute; inset: 17px; border-radius: 6px; background: #0E0F13; }
@keyframes bkspin { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.rcard .back .bk-label { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: var(--text-3); font-size: 10.5px; letter-spacing: .16em; font-weight: 700; text-transform: uppercase; }
.rcard .back .glare { position: absolute; inset: 0; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.22), rgba(255,255,255,0) 55%); opacity: 0; transition: opacity .2s; pointer-events: none; }
.rcard:not(.flipped):hover .back .glare { opacity: 1; }
.rcard .back[class*="back-"]:not(.back-graphite) .bk-pattern { border-color: rgba(255,255,255,.25); }
.rcard .back.back-ocean { background: linear-gradient(160deg, #3F84FF, #0E2A7A); } .rcard .back.back-ember { background: linear-gradient(160deg, #FF7A3D, #7A1C0E); } .rcard .back.back-grape { background: linear-gradient(160deg, #A46CFF, #2E0E8A); } .rcard .back.back-gold { background: linear-gradient(160deg, #FFD24A, #8A5A00); } .rcard .back.back-rose { background: linear-gradient(160deg, #FF6FA5, #7E0F44); } .rcard .back.back-ice { background: linear-gradient(160deg, #A9E9FF, #1C6C9E); } .rcard .back.back-holo { background: var(--holo); }
.rcard .back.back-holo .bk-mark { background: #0E0F13; } .rcard .back.back-holo .bk-mark::after { background: var(--holo); }
/* charge: wobble + rising glow, no colour hint */
.rcard.charging { animation: wobble .28s ease-in-out infinite alternate; }
.rcard.charging .back { box-shadow: 0 0 0 0 rgba(255,255,255,.0); animation: charge 1s ease-in-out infinite alternate; }
.rcard.charging .back .bk-mark { animation: bkspin 1.2s linear infinite; box-shadow: 0 0 60px rgba(255,255,255,.35); }
@keyframes wobble { from { --ry: -2.5deg; } to { --ry: 2.5deg; } }
/* deal-in from the pack */
.stage.spill .rcard { animation: deal .7s cubic-bezier(.2,1.2,.3,1) both; }
@keyframes deal { 0% { opacity: 0; transform: translateY(-180px) translateX(0) scale(.55) rotateZ(-14deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: translateY(0) scale(1) rotateZ(0); } }
.stage.spill .rcard.lift, .stage.spill .rcard.flipped, .stage.spill .rcard.landed { animation: none; }
.rcard.landed:not(.legend) { animation: settle 3.4s ease-in-out .9s infinite; }
@keyframes settle { 0%,100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@media (prefers-reduced-motion: reduce) { .rcard, .stage.spill .rcard { animation: none !important; transition: none !important; } }

/* ---- funding sheets ---- */
.modal.fund { width: 480px; }
.fund-route { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); text-align: left; transition: border-color .15s, background .15s; }
.fund-route.on { border-color: rgba(0,200,5,.5); background: rgba(0,200,5,.06); }
.fund-route.soon { opacity: .5; }
.fund-custom { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-family: var(--mono); font-weight: 700; }
.fund-custom input { width: 70px; background: none; border: 0; outline: 0; font: inherit; color: var(--text); }
.fund-quote { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.fund-proc { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 10px 0 16px; }
.fund-spin { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--surface-2); border-top-color: var(--coin); animation: spin 1s linear infinite; margin-bottom: 6px; }
.fund-steps { display: flex; flex-direction: column; gap: 8px; }
.fstep-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); color: var(--text-3); transition: color .2s, border-color .2s; }
.fstep-row .fdot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-2); display: grid; place-items: center; font-size: 11px; flex: none; }
.fstep-row.done { color: var(--text); border-color: rgba(0,200,5,.35); }
.fstep-row.done .fdot { background: var(--coin); border-color: var(--coin); color: #03230A; }
.fstep-row.done .fdot::after { content: '✓'; font-weight: 800; }
.fund-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.fund-check { width: 56px; height: 56px; border-radius: 50%; background: var(--coin); color: #03230A; display: grid; place-items: center; font-size: 26px; font-weight: 800; box-shadow: 0 0 40px rgba(0,200,5,.45); animation: pop .5s cubic-bezier(.2,1.4,.4,1) both; margin-bottom: 6px; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.fund-bal { margin-top: 14px; padding: 16px 20px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); width: 100%; }
.fund-bal .num-xl { font-size: 40px; margin: 6px 0 4px; }
.fund-done .bonus { margin-top: 12px; width: 100%; }
#foilchip:hover { border-color: var(--line-2); }

/* ---------- v5 · phone deck rip: one card at a time, stack shows what is left, nothing scrolls ---------- */
.reveal.deckmode { justify-content: space-between; align-items: stretch; overflow: hidden; gap: 10px;
  padding: calc(10px + env(safe-area-inset-top)) 14px calc(12px + env(safe-area-inset-bottom)); }
.reveal.deckmode .reveal-head { justify-content: space-between; width: 100%; gap: 10px; }
.reveal.deckmode .reveal-head .label { font-size: 12px; line-height: 1.25; }
.deckcount { font-family: var(--mono, ui-monospace, monospace); font-size: 12px; font-weight: 800; color: var(--text-1, #fff);
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 5px 11px; white-space: nowrap; }
.deckwrap { flex: 1 1 auto; display: grid; place-items: center; width: 100%; min-height: 0; position: relative; }
.deckstack { position: relative; width: min(58vw, 208px); aspect-ratio: 5 / 7; perspective: 1400px; }
.deckstack .rcard { position: absolute; inset: 0; width: 100% !important; height: 100% !important; margin: 0;
  transition: transform .34s cubic-bezier(.2,.9,.25,1.1), opacity .3s ease; will-change: transform; }
.deckstack .rcard.topcard { cursor: pointer; }
.deckstack .rcard.gone { transform: translateY(-46%) scale(.52) !important; opacity: 0; pointer-events: none; }
.deckstack .rcard .bk-label { font-size: 11px; }
.deckmode .deckstack .rcard.landed, .deckmode .deckstack .rcard.flipped { transition: none; }
.decktap { position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.5); white-space: nowrap; animation: dtp 1.9s ease-in-out infinite; }
@keyframes dtp { 0%,100% { opacity: .38 } 50% { opacity: .85 } }
.pulled { display: flex; gap: 7px; width: 100%; overflow-x: auto; overflow-y: hidden; min-height: 64px; padding: 2px 0 4px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pulled::-webkit-scrollbar { display: none; }
.pulled:empty { min-height: 0; }
.mini { flex: none; width: 58px; border-radius: 10px; padding: 6px 5px; text-align: center; background: var(--surface, #16181f);
  border: 1px solid var(--line, rgba(255,255,255,.1)); animation: minin .34s cubic-bezier(.2,.9,.25,1.1) both; }
@keyframes minin { from { opacity: 0; transform: translateY(-14px) scale(.7) } to { opacity: 1; transform: none } }
.mini .msym { font-size: 10px; font-weight: 800; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini .mval { font-size: 10px; margin-top: 2px; color: var(--text-2, rgba(255,255,255,.66)); font-variant-numeric: tabular-nums; }
.mini .mbar { height: 3px; border-radius: 2px; margin-bottom: 5px; background: rgba(255,255,255,.22); }
.mini.rare .mbar { background: #4da3ff } .mini.epic .mbar { background: #b06cff } .mini.legend .mbar { background: #ffb020 }
.mini.rare { border-color: rgba(77,163,255,.4) } .mini.epic { border-color: rgba(176,108,255,.45) } .mini.legend { border-color: rgba(255,176,32,.5) }
.reveal.deckmode .btn-rip { width: 100%; }
.reveal.deckmode .reveal-sum { width: 100%; gap: 14px; padding: 12px 14px; justify-content: space-between; flex-wrap: wrap; }
.reveal.deckmode .reveal-sum .num-lg { font-size: 20px; }
.reveal.deckmode .reveal-actions { flex-direction: column; width: 100%; gap: 8px; }
.reveal.deckmode .reveal-actions .btn { width: 100%; }
@media (max-width: 700px) { .reveal.deckmode { overflow: hidden; justify-content: space-between; padding-top: calc(10px + env(safe-area-inset-top)); } }

/* deck rip fixes: header must never widen the column, stack depth must read */
.reveal.deckmode { width: 100%; box-sizing: border-box; }
.reveal.deckmode > * { max-width: 100%; box-sizing: border-box; }
.reveal.deckmode .reveal-head { min-width: 0; flex-wrap: nowrap; }
.reveal.deckmode .reveal-head .label { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reveal.deckmode .reveal-head .pill { flex: none; }
.deckcount { flex: none; }
.deckstack { width: min(64vw, 224px); }
.deckstack .rcard::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgba(0,0,0,var(--dim,0)); pointer-events: none; transition: background .3s ease; z-index: 3; }
.deckstack .rcard.flipped::after, .deckstack .rcard.topcard::after { background: transparent; }

/* deck rip: centre unconditionally, never let head content drive the column width */
.reveal.deckmode { align-items: center; }
.reveal.deckmode .reveal-head,
.reveal.deckmode .deckwrap,
.reveal.deckmode .pulled,
.reveal.deckmode .btn-rip,
.reveal.deckmode .reveal-sum,
.reveal.deckmode .reveal-actions { width: 100%; max-width: 100%; }
.reveal.deckmode .deckwrap { justify-items: center; }
.deckstack { margin-inline: auto; }

/* deck rip: hint sits under the card, card sized off available height */
.reveal.deckmode .deckwrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.deckstack { width: auto; height: clamp(230px, 44vh, 350px); aspect-ratio: 5 / 7; }
.decktap { position: static; transform: none; }

/* deck rip: when every card is open the empty deck collapses so the summary fits */
.reveal.deckmode.done .deckwrap { display: none; }
.reveal.deckmode.done { justify-content: center; overflow-y: auto; }
.reveal.deckmode.done .pulled { min-height: 68px; }

/* ---------- v6 · pack artwork is self-contained ----------
   The card's own typography (.pack-card .name / .eyebrow) was overriding the artwork's,
   which is what cropped "AI FRONTIER" to "AI FRONTIEI" and wrapped the eyebrow onto three
   lines, squeezing the art and slicing the token logos. Artwork type scales with --w only,
   and the name additionally caps itself against its longest word so it can never clip. */
.pack-card .booster .plate .name,
.booster .plate .name {
  font-size: min(calc(var(--w) * .105), calc((var(--w) * .92 - 26px) / (var(--nchars, 7) * .72)));
  overflow-wrap: anywhere; hyphens: none;
}
.pack-card .booster .plate .eyebrow,
.booster .plate .eyebrow { font-size: calc(var(--w) * .043); letter-spacing: .14em; white-space: nowrap; }
.pack-card .booster .brand,
.booster .brand { font-size: calc(var(--w) * .058); }
.pack-card .booster .plate,
.booster .plate { padding: calc(var(--w) * .055) calc(var(--w) * .06) calc(var(--w) * .065); }

/* token logos scale with the pack instead of sitting at a fixed 22px */
.booster .art .chips { left: calc(var(--w) * .065); bottom: calc(var(--w) * .05); }
.booster .art .chips .tlogo {
  width: calc(var(--w) * .118); height: calc(var(--w) * .118);
  font-size: calc(var(--w) * .039); margin-left: calc(var(--w) * -.037);
  border-width: max(1.5px, calc(var(--w) * .011));
}
.booster .art .chips .tlogo:first-child { margin-left: 0; }
/* the giant chase ticker is decorative; keep it inside the pack rather than sliced by it */
.booster .art .giant { font-size: calc(var(--w) * .30); max-width: 118%; }

/* the pack is rotated -5deg, so a left-anchored logo row runs off the visible edge; inset it */
.booster .art .chips { left: calc(var(--w) * .14); bottom: calc(var(--w) * .055); }
.booster .art .giant { font-size: calc(var(--w) * .26); }

/* ---------- v6 · phone layout corrections ---------- */
@media (max-width: 700px) {
  /* the practice / daily banner was a single flex row, squeezing its sentence into a 110px column
     and pushing both buttons off the right edge */
  .gcard { flex-wrap: wrap; row-gap: 10px; padding: 14px; }
  .gcard > div[style*="flex:1"] { flex: 1 1 100% !important; min-width: 0; order: 2; }
  .gcard .gicon { order: 1; }
  .gcard .btn { order: 3; flex: 1 1 auto; min-width: 132px; }
  .gcard .label { margin-bottom: 2px; }
  /* pack cards: give the art room and stop the description clipping mid-word */
  .pack-card .by, .pack-card .desc { max-width: 100%; }
}

/* the deck opens itself, so the card back should not instruct a tap */
.deckstack .rcard .bk-label { display: none; }

/* ---------- v7 · pack logos centred + packs.com-style micro-interactions ---------- */
/* the token row reads as part of the artwork only when it is centred on the pack */
.booster .art .chips { left: 50%; transform: translateX(-50%); justify-content: center; bottom: calc(var(--w) * .07); }

/* ambient rays behind the pack, breathing rather than static */
.booster { isolation: isolate; }
.booster::before {
  content: ''; position: absolute; left: 50%; top: 44%; width: 165%; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%,-50%) scale(.98); pointer-events: none; z-index: 0; opacity: 0; transition: opacity .45s ease;
  background: conic-gradient(from 0deg,
    transparent 0 7deg, rgba(255,255,255,.11) 9deg 13deg, transparent 15deg 34deg,
    rgba(255,255,255,.08) 36deg 39deg, transparent 41deg 66deg,
    rgba(255,255,255,.12) 68deg 72deg, transparent 74deg 104deg,
    rgba(255,255,255,.07) 106deg 109deg, transparent 111deg 145deg,
    rgba(255,255,255,.10) 147deg 151deg, transparent 153deg 190deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 78%);
  mask-image: radial-gradient(closest-side, #000 30%, transparent 78%);
}
@keyframes packRays {
  0%, 100% { transform: translate(-50%,-50%) scale(.98) rotate(0deg); opacity: .20; }
  50%      { transform: translate(-50%,-50%) scale(1.02) rotate(7deg); opacity: .34; }
}
/* the pack breathes and wobbles, so it reads as an object you can pick up */
@keyframes packWobble {
  0%, 100% { transform: rotate(-5deg) translateY(0); }
  25%      { transform: rotate(-2.6deg) translateY(-1.5px); }
  50%      { transform: rotate(-6.6deg) translateY(0); }
  75%      { transform: rotate(-3.6deg) translateY(-1.5px); }
}
@media (hover: hover) {
  .pack-card .booster { transition: transform .28s cubic-bezier(.2,.9,.25,1.1); }
  .pack-card:hover .booster { transform: translateY(-7px) scale(1.035); }
  .pack-card:hover .booster::before { opacity: 1; animation: packRays 3.6s ease-in-out infinite; }
  .pack-card:hover .booster .wrap { animation: packWobble 1.7s ease-in-out infinite; }
  .pack-card:hover .booster .art .chips .tlogo { transition: transform .3s cubic-bezier(.2,.9,.25,1.1); }
  .pack-card:hover .booster .art .chips .tlogo:nth-child(1) { transform: translateY(-2px) rotate(-6deg); }
  .pack-card:hover .booster .art .chips .tlogo:nth-child(3) { transform: translateY(-2px) rotate(5deg); }
  .pack-card:hover .booster .art .chips .tlogo:nth-child(5) { transform: translateY(-2px) rotate(-4deg); }
}
/* the hero pack on a pack page keeps the rays on permanently */
.packhero .booster::before, .booster.glow::before { opacity: 1; animation: packRays 4.2s ease-in-out infinite; }

/* ---------- v7 · pulled cards read as cards, and the revealed face gets time on screen ---------- */
.pulled { min-height: 96px; gap: 8px; align-items: flex-start; }
.mini {
  width: 64px; padding: 0; overflow: hidden; border-radius: 9px;
  background: var(--surface-2, #16181f); border: 1px solid var(--line, rgba(255,255,255,.12));
  animation: minin .42s cubic-bezier(.2,.9,.25,1.1) both; text-align: left;
}
.mini .mc-field { position: relative; height: 58px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.mini .mc-field::after { content: ''; position: absolute; inset: 0; background: linear-gradient(140deg, transparent 40%, rgba(255,255,255,.20) 52%, transparent 60%); }
.mini .mc-logo, .mini .sc-foil { width: 28px; height: 28px; border-radius: 50%; }
.mini .mc-tier { position: absolute; top: 3px; right: 4px; font-family: var(--mono, monospace); font-size: 8px; font-weight: 800; color: rgba(255,255,255,.8); }
.mini .mc-bot { padding: 4px 5px 5px; }
.mini .mc-sym { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini .mc-val { display: block; font-size: 9px; color: var(--text-2, rgba(255,255,255,.66)); font-variant-numeric: tabular-nums; margin-top: 1px; }
.mini.rare { border-color: rgba(77,163,255,.55); box-shadow: 0 0 14px rgba(77,163,255,.18); }
.mini.epic { border-color: rgba(176,108,255,.6); box-shadow: 0 0 16px rgba(176,108,255,.22); }
.mini.legend { border-color: rgba(255,176,32,.65); box-shadow: 0 0 18px rgba(255,176,32,.26); }
/* the card travels down into the pile instead of vanishing upward */
.deckstack .rcard.gone { transform: translateY(34%) scale(.44) !important; opacity: 0; pointer-events: none; }
.deckstack .rcard { transition: transform .42s cubic-bezier(.3,.85,.3,1), opacity .34s ease; }

/* ---------- v7.1 · pack plate text must read on every tint ----------
   "STOCK TOKENS FROM" sat at the top of the plate where the scrim was still transparent,
   so on the gold, green and light-blue packs it was white-on-light and effectively invisible.
   The scrim now starts earlier and goes darker, and the eyebrow is solid white with a shadow. */
.pack-card .booster .plate,
.booster .plate {
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.34) 22%, rgba(0,0,0,.62) 58%, rgba(0,0,0,.80) 100%);
}
.pack-card .booster .plate .eyebrow,
.booster .plate .eyebrow {
  color: #fff; opacity: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 6px rgba(0,0,0,.55);
}
.pack-card .booster .plate .brand,
.booster .plate .brand { text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.pack-card .booster .plate .name,
.booster .plate .name { text-shadow: 0 2px 3px rgba(0,0,0,.7), 0 8px 24px rgba(0,0,0,.55); }

/* ---------- v8 · card back with real card grammar ----------
   Was a gradient with a logo floating in it. Now it carries the things that make a card back
   read as one: a struck frame, corner brackets, mirrored chevrons, a tier rail down each side,
   a medallion, and the wordmark repeated upside down at the foot like a real TCG back. */
.rcard .back::before { content: none; }
.rcard .back { overflow: hidden; }
.rcard .back .bk-pattern {
  inset: 0; border: 0; border-radius: inherit;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0 5px, transparent 5px 11px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.045) 0 5px, transparent 5px 11px);
}
.rcard .back .bk-art { position: absolute; inset: 0; display: block; color: rgba(255,255,255,.9); }
.rcard .back .bk-svg { width: 100%; height: 100%; display: block; }
.rcard .back .bk-hole { fill: #0E0F13; }
.rcard .back .bk-core { transform-origin: 100px 140px; }
/* the wordmark, upright at the head and inverted at the foot */
.rcard .back .bk-word {
  position: absolute; left: 0; right: 0; text-align: center;
  font-family: var(--display); font-variation-settings: 'wdth' 125, 'wght' 900;
  font-size: calc(var(--cw, 190px) * .062); letter-spacing: .3em; text-indent: .3em;
  color: rgba(255,255,255,.92); text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.rcard .back .bk-top { top: 11.5%; }
.rcard .back .bk-bot { bottom: 11.5%; transform: rotate(180deg); }
.rcard .back .bk-label { bottom: 4.5%; font-size: 9.5px; opacity: .72; }
/* tints keep their identity, the linework just sits on top */
.rcard .back[class*="back-"] .bk-art { color: rgba(255,255,255,.92); }
.back-graphite .bk-art { color: rgba(255,255,255,.8); }
.back-holo .bk-art { color: rgba(255,255,255,.95); }
.back-holo .bk-core rect:first-child { fill: #0E0F13; fill-opacity: 1; }
.back-holo .bk-hole { fill: #fff; }
/* the medallion is what charges before a big pull */
.rcard.charging .back .bk-core { animation: bkPulse .5s ease-in-out infinite alternate; }
@keyframes bkPulse { from { transform: scale(1); } to { transform: scale(1.14); } }
.rcard.charging .back .bk-art { animation: bkGlow .5s ease-in-out infinite alternate; }
@keyframes bkGlow { from { filter: none; } to { filter: drop-shadow(0 0 10px rgba(255,255,255,.55)); } }
/* smaller cards drop the fine detail rather than turning to mush */
.stage.dense .rcard .back .bk-word, .mini .bk-word { display: none; }

/* category chips carry an icon, in the same monoline family as the landing rails */
.fpill { display: inline-flex; align-items: center; gap: 7px; }
.fpill .fp-ico { width: 15px; height: 15px; display: inline-flex; flex: none; opacity: .75; }
.fpill .fp-ico svg { width: 100%; height: 100%; stroke-width: 1.9; }
.fpill.on .fp-ico { opacity: 1; }

/* landing: a paragraph must never sit flush against the button that follows it */
.lp-p + .btn, .lp-p + .lp-ctas, .lp-p + a.btn { margin-top: 22px; }
.lp-section .lp-p { margin-bottom: 0; }
.lp-section > div > .btn, .lp-section .lp-col > .btn { margin-top: 22px; }

/* the active chip used to add a ✦ glyph; now every chip owns an icon, so tint that instead */
.fpill.on::before { content: none; }
.fpill.on .fp-ico { opacity: 1; color: var(--coin); }

/* give the foot wordmark and the prompt their own room on smaller cards */
.rcard .back .bk-bot { bottom: 14%; }
.rcard .back .bk-label { bottom: 3.5%; }

/* ---- deposit v2 ---- */
.modal.fund.v2 { width: 460px; }
.v2ico { width: 24px; height: 24px; color: var(--text-2); }
.v2-qr { position: relative; width: 216px; height: 216px; margin: 16px auto 0; padding: 8px; background: #fff; border-radius: 18px; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.v2-qr img { display: block; width: 200px; height: 200px; border-radius: 10px; }
.v2-qr-fallback { width: 200px; height: 200px; display: grid; place-items: center; color: #999; font-family: var(--mono); }
.v2-qr-badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 46px; height: 46px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 4px #fff; }
.v2-addr { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 10px 10px 10px 14px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.v2-addr code { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12.5px; word-break: break-all; color: var(--text); line-height: 1.4; }
.v2-warn { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(184,128,28,.10); border: 1px solid rgba(184,128,28,.35); font-size: 12.5px; color: var(--text-2); line-height: 1.45; }
.v2-warn b { color: var(--text); }
.v2-status { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 13px; color: var(--text-2); }
.fund-spin.sm { width: 16px; height: 16px; border-width: 2px; margin: 0; }
.v2-steps { margin: 16px 0 0 18px; color: var(--text-2); font-size: 14px; line-height: 1.6; } .v2-steps b { color: var(--text); }

.v2-key { font-family: var(--mono); font-size: 12px; word-break: break-all; line-height: 1.5; flex: 1; transition: filter .2s; }
.v2-key.blur { filter: blur(6px); user-select: none; }
.modal-bg.gate { z-index: 95; background: rgba(10,10,12,.86); }

/* ================= v27 · the card back is Adewale's art ================= */
.rcard .back, .rcard .back[class*="back-"] { background: #0B0B10 url('assets/cardback.jpg') center / cover no-repeat !important; border: 1px solid rgba(255,255,255,.18); display: block; }
.rcard .back .bk-pattern, .rcard .back .bk-mark, .rcard .back .bk-label { display: none; }
.rcard .back .glare { opacity: 0; }
.rcard:not(.flipped):hover .back .glare { opacity: .7; }
/* level card backs tint the same art */
.rcard .back[class*="back-"]::after { content: ''; position: absolute; inset: 0; border-radius: inherit; mix-blend-mode: color; opacity: .55; pointer-events: none; }
.rcard .back.back-graphite::after { display: none; }
.rcard .back.back-ocean::after { background: #2F6BFF; } .rcard .back.back-ember::after { background: #FF7A3D; } .rcard .back.back-grape::after { background: #8A5CFF; } .rcard .back.back-gold::after { background: #FFC24D; } .rcard .back.back-rose::after { background: #FF6FA5; } .rcard .back.back-ice::after { background: #7ED0FF; } .rcard .back.back-holo::after { display: none; }
.rcard.charging .back { animation: chargeimg 1s ease-in-out infinite alternate; }
@keyframes chargeimg { from { box-shadow: 0 30px 60px rgba(0,0,0,.6); filter: brightness(1); } to { box-shadow: 0 30px 60px rgba(0,0,0,.6), 0 0 60px rgba(255,255,255,.35); filter: brightness(1.25); } }
.backpick { background-image: url('assets/cardback.jpg'); background-size: cover; background-position: center; }
.backpick[class*="back-"]::after { content: ''; position: absolute; inset: 0; border-radius: 6px; mix-blend-mode: color; opacity: .6; }
.backpick.back-graphite::after, .backpick.back-holo::after { display: none; }
.backpick.back-ocean::after { background: #2F6BFF; } .backpick.back-ember::after { background: #FF7A3D; } .backpick.back-grape::after { background: #8A5CFF; } .backpick.back-gold::after { background: #FFC24D; } .backpick.back-rose::after { background: #FF6FA5; } .backpick.back-ice::after { background: #7ED0FF; }
.backpick.back-holo { box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }
/* v27b · the art replaces every generated back element, including the linework back another pass added */
.rcard .back .bk-art, .rcard .back .bk-svg, .rcard .back .bk-word, .rcard .back .bk-top, .rcard .back .bk-bot, .rcard .back .bk-pattern, .rcard .back .bk-mark, .rcard .back .bk-label, .rcard .back .bk-core { display: none !important; }
.rcard.charging .back .bk-core, .rcard.charging .back .bk-art { animation: none !important; }

/* ================= v28 · wallet actions, fixed headers, phone flip ================= */
/* positions: the actions column has a real width so Send + Sell never spill */
.pos { grid-template-columns: 24px 32px 1.4fr .8fr .8fr .9fr 118px; }
.pos > :last-child { justify-self: end; }
.pos .row { flex-wrap: nowrap; }
.pos .btn-sm { height: 32px; padding: 0 11px; }
@media (max-width: 760px) {
  .pos { grid-template-columns: 22px 30px 1fr auto 60px; }
  .pos > :last-child { flex-direction: column; gap: 4px; align-items: stretch; }
  .pos > :last-child .btn-sm { width: 60px; height: 30px; padding: 0; font-size: 12px; justify-content: center; }
  .pos > :last-child .btn-plain { background: var(--surface-2); }
  .holding { grid-template-columns: 24px 1fr auto; }
  .holding > .row { flex-direction: column; gap: 4px; }
}
/* headers stay put; content scrolls under */
.topbar { position: sticky !important; top: 0; z-index: 40; }
.wl-top { position: sticky; top: 0; z-index: 40; background: rgba(42,27,107,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
/* phone flip: the top card is a real card you tap, not a slideshow */
.deckstack .rcard.topcard:not(.flipped) { transition: transform .18s ease-out; }
.deckstack .rcard.topcard:not(.flipped):active { transform: translateY(0) scale(.97) !important; }
.deckmode .deckstack .rcard.flipped { transition: transform .75s cubic-bezier(.34,1.35,.64,1) !important; transform: translateY(0) scale(1) rotateY(180deg) !important; }
.deckmode .deckstack .rcard.lift:not(.flipped) { transform: translateY(-16px) scale(1.05) !important; transition: transform .22s cubic-bezier(.2,.9,.3,1.3) !important; }
.deckmode .deckstack .rcard.gone { transform: translateY(-46%) scale(.52) rotateY(180deg) !important; opacity: 0; transition: transform .3s ease, opacity .25s ease !important; }
.deckstack { width: min(72vw, 250px); }
.decktap { bottom: -38px; color: rgba(255,255,255,.7); }
.deckmode .deckstack .rcard.landed:not(.legend) { animation: none; }
.deckmode .deckstack .rcard.flipped .sweep { animation: cardsweep .9s cubic-bezier(.2,.7,.2,1) .05s both; }

.settle-note { width: 100%; font-size: 12.5px; color: var(--text-3); text-align: center; margin-top: 4px; }
.reveal-sum { flex-wrap: wrap; }

/* ---- brand marks ---- */
.blogo { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; flex: none; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.blogo img { width: 62%; height: 62%; object-fit: contain; display: block; }
.blogo.mono { background: var(--surface-2); } .blogo.mono img { filter: invert(1); opacity: .95; }
.blogo.mono[style*="--tint"] { background: var(--tint); } .blogo.mono[style*="--tint"] img { filter: invert(1) brightness(2); }
.blogo.stroke { background: var(--surface-2); color: var(--text); } .blogo.stroke img { filter: invert(1); width: 56%; height: 56%; }
.blogo.mono-fb { background: var(--surface-2); color: var(--text-2); font-family: var(--mono); font-size: 10px; font-weight: 800; }
.blogo.sm { width: 22px; height: 22px; } .blogo.sm img { width: 60%; height: 60%; }
.blogo.net { width: 32px; height: 32px; } .blogo.net img { width: 100%; height: 100%; }
.blogo.auth { width: 36px; height: 36px; border-radius: 12px; }
.blogo.auth img { width: 52%; height: 52%; }
.fpill.wallet { padding-left: 6px; gap: 8px; height: 40px; }
.fund-route .blogo { flex: none; }
.v2-qr-badge .blogo.net { width: 34px; height: 34px; }
.av.opp .av-core { width: calc(var(--s) - 4px); height: calc(var(--s) - 4px); }

/* v38 · local QR */
.v2-qr-svg { width: 200px; height: 200px; display: block; } .v2-qr-svg svg { width: 100%; height: 100%; display: block; shape-rendering: crispEdges; }

/* v39 · mobile fit pass */
.foilhero { grid-template-columns: 1.2fr 1fr; }
@media (max-width: 760px) {
  .hero, .foilhero { grid-template-columns: minmax(0, 1fr) !important; }
  .wheregrid { grid-template-columns: minmax(0, 1fr) !important; }
  .stickyrip:not(.show) { display: none; }
  .stickyrip.show { display: flex; }
  .legend { flex-wrap: wrap; row-gap: 6px; }
  .stickyrip { padding: 10px 10px 10px 14px; gap: 10px; }
  .stickyrip .qty.st { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; }
  .stickyrip .qty.st .qbtn { width: 30px; height: 30px; font-size: 16px; }
  .stickyrip .qty.st .qty-n { min-width: 22px; text-align: center; font-weight: 700; }
  .stickyrip .btn { height: 42px; padding: 0 16px; }
  .stickyrip .label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pos { grid-template-columns: 22px 30px minmax(0, 1fr) auto 60px; }
  .pos .small.faint { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .backs { flex-wrap: nowrap; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .backs::-webkit-scrollbar { display: none; }
  .backpick { flex: 0 0 auto; }
}

/* v44 · wallet-only sign-in */
.fpill.wallet.lg { width: 100%; height: 48px; justify-content: flex-start; padding-left: 10px; font-size: 15px; border-radius: 14px; }
.fpill.wallet.lg .blogo { width: 28px; height: 28px; }