/* ==========================================================================
   Yatta — "verre dépoli": deep night blue, soft cyan / indigo / violet lights,
   frosted panels with a thin light border, rounded corners. Glows are kept for the
   main actions, rare cards and active elements. Loaded last: it overrides the tokens
   and the shared components of base / shell / ui / pages.
   ========================================================================== */
:root {
  --bg: #070b14;
  --bg2: #0c1220;
  --surface: rgba(17, 25, 41, .78);
  --surface-solid: #111a2b;
  --surface2: rgba(255, 255, 255, .055);
  --surface3: rgba(255, 255, 255, .1);
  --line: rgba(255, 255, 255, .08);
  --line2: rgba(255, 255, 255, .16);
  --text: #eef3fb;
  --muted: #b4c0d2;
  --faint: #8592a7;
  --accent: #5ad1fa;
  --accent2: #2fa8e6;
  --on-accent: #03141f;
  --grad: linear-gradient(135deg, #7be0ff, #34b6f2);
  --gold: #f4c55a;
  --gold-grad: linear-gradient(135deg, #ffe08a, #f2b636);
  --chakra: #7fdcff;
  --green: #4fd8a2;
  --violet: #a98bff;
  --display: 'Barlow Condensed', 'Manrope', system-ui, sans-serif;
  --body: 'Manrope', system-ui, sans-serif;
  --mono: 'Manrope', system-ui, sans-serif;
  --radius: 20px;
  --radius-sm: 12px;
  --blur: 20px;
  --shadow: 0 18px 50px -18px rgba(0, 0, 0, .65);
  --glow: 0 10px 30px -8px rgba(90, 209, 250, .45);
}
body { font-size: 15.5px; background: var(--bg); font-feature-settings: 'tnum' 1; }
/* the diffuse lights live on a fixed layer: painted once, not on every scroll */
body::before {
  display: block; content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 600px at 8% -10%, rgba(90, 209, 250, .13), transparent 65%),
    radial-gradient(800px 600px at 100% 0%, rgba(99, 102, 241, .12), transparent 65%),
    radial-gradient(900px 700px at 60% 115%, rgba(147, 97, 255, .1), transparent 65%);
}
::selection { background: rgba(90, 209, 250, .35); }

/* typography: condensed for the big titles only, a very legible sans for the rest */
h1, h2 { font-family: var(--display); letter-spacing: .01em; line-height: 1.02; }
h1 { font-size: clamp(38px, 4.6vw, 62px); font-weight: 800; text-transform: uppercase; }
h2 { font-size: clamp(26px, 2.4vw, 32px); font-weight: 700; text-transform: none; }
h3, h4 { font-family: var(--body); font-weight: 700; letter-spacing: -.01em; line-height: 1.25; text-transform: none; }
h3 { font-size: 17px; }
.eyebrow { font: 700 12px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.grad-text { background: none; color: var(--accent); }
.gold-text { background: none; color: var(--gold); }
.chakra { font-family: var(--body); color: var(--chakra); }
.muted { color: var(--muted); }
.small { font-size: 13.5px; }
.tiny { font-size: 12px; }

/* keyboard focus: always visible */
:where(a, button, input, select, textarea, [tabindex], .tile, .chip):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 10px; }
:where(input, select, textarea):focus-visible { outline-offset: 1px; }

/* rhythm */
.page-head { margin-bottom: 36px; align-items: flex-end; }
.page-head p { font-size: 16px; margin-top: 10px; max-width: 680px; color: var(--muted); }
.section { margin-top: 56px; }
.section-head { margin-bottom: 20px; align-items: flex-end; }
.grid, .grid-2, .grid-3 { gap: 20px; }
.stack > * + * { margin-top: 10px; }

/* frosted surfaces: glass on floating things, more opaque behind long texts */
.glass, .top, .dropdown, .modal, .tabbar, .chat, .toast {
  background: rgba(14, 21, 36, .62); -webkit-backdrop-filter: blur(var(--blur)) saturate(1.35); backdrop-filter: blur(var(--blur)) saturate(1.35);
  border: 1px solid var(--line2); box-shadow: var(--shadow);
}
.panel { padding: 24px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, var(--shadow);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.panel.glow { border-color: rgba(90, 209, 250, .4); box-shadow: 0 0 0 1px rgba(90, 209, 250, .15), var(--glow); }
.panel.tight { padding: 16px; }
.prose, .modal, .bubbles { background-clip: padding-box; }
/* without blur support (or when the device is weak), everything stays opaque */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .top, .dropdown, .modal, .tabbar, .chat, .toast, .panel { background: var(--surface-solid); }
}
.lite .glass, .lite .top, .lite .dropdown, .lite .modal, .lite .tabbar, .lite .chat, .lite .toast, .lite .panel { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface-solid); }
@media (max-width: 760px) { :root { --blur: 12px; } .panel { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface-solid); } }

/* buttons: rounded, sentence case, a halo only on the main action */
.btn { border-radius: var(--radius-sm); padding: 11px 20px; font: 700 14.5px var(--body); letter-spacing: 0; text-transform: none; background: var(--surface2); border: 1px solid var(--line2); color: var(--text);
  transition: transform .15s var(--ease), background .15s, border-color .15s, box-shadow .2s; }
.btn:hover { background: var(--surface3); border-color: rgba(255, 255, 255, .28); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn.primary { background: var(--grad); color: var(--on-accent); border-color: transparent; box-shadow: var(--glow); font: 800 15px var(--body); clip-path: none; }
.btn.primary:hover { filter: brightness(1.07); box-shadow: 0 14px 36px -8px rgba(90, 209, 250, .6); }
.btn.gold { background: var(--gold-grad); color: #2a1a00; border-color: transparent; box-shadow: 0 10px 28px -10px rgba(244, 197, 90, .55); font: 800 15px var(--body); clip-path: none; }
.btn.gold:hover { filter: brightness(1.05); }
.btn.green { background: linear-gradient(135deg, #6ff0bd, #2fbf86); color: #032016; border-color: transparent; }
.btn.violet { background: linear-gradient(135deg, #c3adff, #8a6bff); color: #150a33; border-color: transparent; }
.btn.danger { background: rgba(255, 99, 99, .1); border-color: rgba(255, 99, 99, .4); color: #ff9c9c; }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--surface2); border-color: var(--line2); }
.btn.sm { padding: 7px 13px; font-size: 13px; border-radius: 10px; }
.btn.lg { padding: 14px 26px; font-size: 15.5px; border-radius: 14px; }
.btn.xl { padding: 17px 32px; font-size: 17px; border-radius: 14px; }
.btn:disabled { background: var(--surface2); color: var(--faint); border-color: var(--line); box-shadow: none; filter: none; opacity: 1; transform: none; cursor: not-allowed; }
.pulse::after { display: none; }
.iconbtn { width: 42px; height: 42px; border-radius: 12px; background: var(--surface2); border-color: var(--line2); font-size: 18px; }
.iconbtn:hover { background: var(--surface3); }

.badge { background: var(--accent); color: var(--on-accent); box-shadow: none; font: 800 11px var(--body); border-radius: 99px; }
.pill { font-family: var(--body); border-radius: 99px; font-size: 12px; padding: 4px 10px; }
.pill.hot { background: var(--accent); color: var(--on-accent); }
.lvl { background: var(--accent); color: var(--on-accent); font-family: var(--body); border-radius: 6px; }
.avatar.lg { background: linear-gradient(var(--bg2), var(--bg2)) padding-box, var(--grad) border-box; }

/* forms */
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], select, textarea { background: rgba(5, 9, 18, .55); border: 1px solid var(--line2); border-radius: var(--radius-sm); padding: 12px 15px; font-size: 15px; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(90, 209, 250, .18); }
select option { background: var(--surface-solid); }

/* chips and in-page tabs: segmented glass pills */
.chips { gap: 8px; }
.chip { border-radius: 99px; padding: 8px 15px; font: 600 13.5px var(--body); background: var(--surface2); border-color: var(--line); color: var(--muted); }
.chip:hover { color: var(--text); border-color: var(--line2); }
.chip.on { background: rgba(90, 209, 250, .16); color: var(--text); border-color: rgba(90, 209, 250, .5); }
.chip[data-r].on { background: color-mix(in srgb, var(--c) 18%, transparent); border-color: var(--c); color: var(--text); }
.tabs { width: fit-content; max-width: 100%; padding: 5px; gap: 4px; border: 1px solid var(--line); border-radius: 16px; background: rgba(14, 21, 36, .6); margin-bottom: 28px; }
.tabs button { padding: 10px 18px; border-radius: 12px; font: 700 14.5px var(--body); text-transform: none; letter-spacing: 0; }
.tabs button::after { display: none; }
.tabs button.on { background: rgba(90, 209, 250, .16); color: var(--text); box-shadow: inset 0 0 0 1px rgba(90, 209, 250, .45); }

/* lists, bars, misc */
.list { gap: 8px; }
.li { padding: 13px 16px; border-radius: 14px; background: var(--surface2); border: 1px solid transparent; }
a.li:hover, button.li:hover { background: var(--surface3); border-color: var(--line2); }
.li.me { background: rgba(90, 209, 250, .1); border-color: rgba(90, 209, 250, .4); }
.rank-n { font-family: var(--display); font-size: 20px; }
.bar { height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .08); }
.bar > i { border-radius: 99px; }
.bar > i::after { display: none; }
.ring::before { background: var(--surface-solid); }
.empty { padding: 64px 10px; }
.prose p, .prose li { color: #d3dbe7; }
.prose h2 { font-size: 26px; margin-top: 38px; }
.table th { font-family: var(--body); }

/* icons: one thin line family (js/lib/icons.js); still, they only move on hover */
.emo { animation: none !important; }
.ico { width: 1.15em; height: 1.15em; vertical-align: -.2em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; transition: transform .25s var(--ease); }
.ico-wrap { display: inline-flex; line-height: 1; }
:is(a, button):hover > .ico-wrap .ico, :is(a, button):hover > i > .ico-wrap .ico, .tile:hover .t-ic .ico { transform: translateY(-1px) scale(1.08); }
.flame .fl-out, .flame .fl-in { animation: none; }
.wallet:hover .flame .fl-out { animation: fl-dance 1.6s ease-in-out infinite; }
.yatta-front, .yatta-back, .yatta-star, .yatta-spark { animation: none; }
.logo:hover .yatta-front { animation: yatta-float 1.6s ease-in-out infinite; }
.logo:hover .yatta-star { animation: yatta-star 1.6s ease-in-out infinite; }
.float { animation: none; }

/* ---------- navigation bar ---------- */
.top { border-width: 0 0 1px; border-radius: 0; box-shadow: none; height: 70px; background: rgba(8, 13, 24, .66); }
.top .logo { margin-right: 14px; }
.topnav { gap: 2px; align-items: center; }
.topnav > a, .topnav button { height: 40px; padding: 0 14px; border-radius: 12px; font: 700 14.5px var(--body); letter-spacing: 0; text-transform: none; color: var(--muted); }
.topnav > a::after, .topnav button::after { display: none; }
.topnav > a:hover, .topnav button:hover { color: var(--text); background: var(--surface2); }
.topnav > a.on, .topnav button.on { color: var(--text); background: rgba(90, 209, 250, .13); box-shadow: inset 0 0 0 1px rgba(90, 209, 250, .35); }
.topnav > a.on::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.topnav .rel { height: auto; }
.topnav .badge { min-width: 8px; width: 8px; height: 8px; padding: 0; font-size: 0; margin-left: 2px; align-self: flex-start; margin-top: 8px; }
.top .open-cta { height: 42px; padding: 0 18px; }
.top .sep { width: 1px; height: 28px; background: var(--line2); flex: none; }
.wallet { gap: 2px; padding: 3px; background: var(--surface2); border: 1px solid var(--line); border-radius: 14px; }
.wallet > * { gap: 8px; padding: 5px 12px 5px 8px; border-radius: 11px; font: 700 14px var(--body); }
.wallet .w-free { background: transparent; }
.wallet > *:hover { background: var(--surface2); }
.wallet .w-txt { display: grid; line-height: 1.1; }
.wallet .w-txt small { font: 600 10.5px var(--body); color: var(--faint); letter-spacing: .02em; }
.wallet .w-timer { color: var(--accent); }
.wallet .w-chakra { color: var(--text); }
.me-btn { border-radius: 14px; background: var(--surface2); border-color: var(--line); }
.me-btn:hover { background: var(--surface3); }
.me-btn .me-txt small { color: var(--faint); }
/* nearly opaque: inside the top bar, its own blur cannot reach the page behind */
.dropdown { border-radius: 18px; padding: 8px; background: rgba(8, 14, 28, .97); }
.dropdown .n { border-radius: 12px; }
.dropdown .n.row { display: flex; align-items: center; gap: 10px; }
.dropdown a.n:hover { background: var(--surface3); }
.dropdown .n.on { color: var(--accent); }
.chat-fab { display: none !important; }
.foot { background: transparent; border-top-color: var(--line); color: var(--faint); }
@media (max-width: 1360px) {
  .top .open-cta { padding: 0 14px; }
  .topnav > a, .topnav button { padding: 0 10px; font-size: 14px; }
  .me-btn .me-txt, .wallet .w-txt small { display: none; }
  .me-btn { padding: 3px; }
}
@media (max-width: 1180px) { .top .open-cta, .top .sep { display: none; } }
@media (max-width: 1023px) {
  .top { height: 62px; }
  .tabbar { border-radius: 20px; }
  .tabbar a { font: 700 11px var(--body); }
  .tabbar a.on { color: var(--accent); }
  .tabbar .fab b { border-radius: 16px; background: var(--grad); color: var(--on-accent); box-shadow: var(--glow); border-color: var(--bg); }
  .page-head { margin-bottom: 26px; }
  .section { margin-top: 44px; }
  .panel { padding: 18px; }
}
@media (max-width: 440px) { .top [data-chat] { display: none; } .wallet > * { padding: 5px 8px; } }

/* ---------- overlays ---------- */
.modal { border-radius: 24px; padding: 28px; background: rgba(13, 20, 34, .9); }
.modal-bg { background: rgba(3, 6, 12, .66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.toast { border-radius: 14px; }
.toast.reward { border-color: rgba(90, 209, 250, .5); color: var(--text); }
.toast.live { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 22%, rgba(14, 21, 36, .9)), rgba(14, 21, 36, .9) 70%); }
.chat { border-radius: 22px; top: 82px; bottom: auto; height: min(560px, calc(100vh - 110px)); background: rgba(13, 20, 34, .88); }
@media (max-width: 1023px) { .chat { top: auto; bottom: 96px; height: min(540px, calc(100vh - 170px)); } }
.chat .msg .who { color: var(--accent); }
.bubbles { background: rgba(5, 9, 18, .45); border-radius: 16px; }
.bubble.me { background: rgba(90, 209, 250, .22); }
.reward .item { border-radius: 16px; background: var(--surface-solid); }

/* ---------- home: featured booster ---------- */
.hero { --c: #5ad1fa; min-height: 480px; padding: 48px 52px 40px; border-radius: 28px; gap: 32px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border: 1px solid var(--line); background: linear-gradient(110deg, rgba(12, 18, 32, .96) 0%, rgba(12, 18, 32, .9) 45%, rgba(12, 18, 32, .55) 100%), var(--bg2); box-shadow: var(--shadow); }
.hero::after { display: none; }
.hero .hero-copy { position: relative; z-index: 2; max-width: 540px; }
.hero h1 { font-size: clamp(44px, 5.6vw, 78px); margin-top: 14px; }
.hero .lead { font-size: 16.5px; color: var(--muted); max-width: 460px; margin-top: 12px; }
.hero .cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.hero .claimed { display: flex; align-items: center; gap: 14px; padding: 10px 16px 10px 12px; border-radius: 14px; background: rgba(79, 216, 162, .1); border: 1px solid rgba(79, 216, 162, .35); }
.hero .claimed .state { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; color: var(--green); }
.hero .claimed .next { color: var(--muted); font-size: 14px; }
.hero .claimed .next b { color: var(--text); }
.hero-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 28px 0 0; max-width: 520px; }
.hero-stats > div { padding: 11px 14px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.hero-stats dt { font-size: 12px; color: var(--faint); font-weight: 600; }
.hero-stats dd { margin: 2px 0 0; font-weight: 800; font-size: 15px; }
/* the stage: booster and its best cards, with depth and a halo in the booster colour */
.hero .stage { height: 400px; position: relative; z-index: 1; }
.hero .stage::before { content: ''; position: absolute; inset: 6% 4%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 45%, transparent), transparent); filter: blur(10px); }
.hero .stage .pack-art { width: 210px; z-index: 2; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .6)); }
.hero .stage .fan > a { width: 165px; filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .55)); }
/* the best cards slide out of the top of the opened pack */
.hero .stage .pack-art { top: 14%; }
.hero .stage .fan { z-index: 1; }
.hero .stage .fan > a:nth-child(1) { transform: translate(-88%, -88%) rotate(-8deg); }
.hero .stage .fan > a:nth-child(2) { transform: translate(-12%, -96%) rotate(7deg); }
.hero .kanji-bg { display: none; }
.hero-nav { position: absolute; right: 26px; bottom: 22px; z-index: 3; display: flex; align-items: center; gap: 8px; }
.hero-nav .iconbtn { width: 38px; height: 38px; font-size: 16px; }
.hero .switch { position: static; display: flex; gap: 6px; }
.hero .switch button { width: auto; height: 32px; padding: 0 12px; border-radius: 99px; background: var(--surface2); border: 1px solid var(--line); color: var(--muted); font: 700 12.5px var(--body); }
.hero .switch button.on { width: auto; background: rgba(90, 209, 250, .16); border-color: rgba(90, 209, 250, .45); color: var(--text); }
@media (max-width: 1100px) { .hero .switch { display: none; } }
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding: 22px 20px 74px; min-height: 0; gap: 8px; border-radius: 22px; }
  .hero .stage { height: 270px; order: -1; }
  .hero .stage .pack-art { width: 150px; }
  .hero .stage .fan > a { width: 118px; }
  .hero-stats { grid-template-columns: 1fr 1fr; max-width: none; }
  .hero .hero-copy { max-width: none; }
  .hero .cta > .btn { flex: 1 1 100%; }
  .hero-nav { left: 20px; right: 20px; bottom: 18px; justify-content: space-between; }
}

/* ---------- booster packaging ---------- */
.pack-art { --c: var(--gold); position: relative; aspect-ratio: 5 / 7.4; container-type: inline-size; cursor: pointer; background: none; box-shadow: none; border-radius: 0; overflow: visible; display: block; transition: transform .25s var(--ease), filter .25s; }
/* crimped foil seals: serrated outer edge, ribbed band */
.pack-art::before, .pack-art::after { content: ''; position: absolute; left: 0; right: 0; height: 6.5cqw; z-index: 2;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .28) 0 .7cqw, rgba(0, 0, 0, .06) .7cqw 1.8cqw), color-mix(in srgb, var(--c) 78%, #fff 8%);
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 4cqw 2.4cqw repeat-x, linear-gradient(#000 0 0) bottom / 100% calc(100% - 2.3cqw) no-repeat;
  mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 4cqw 2.4cqw repeat-x, linear-gradient(#000 0 0) bottom / 100% calc(100% - 2.3cqw) no-repeat; }
.pack-art::before { top: 0; bottom: auto; }
.pack-art::after { top: auto; bottom: 0; transform: scaleY(-1); }
.pack-art .pk-body { position: absolute; inset: 5.5cqw 0; overflow: hidden; border-radius: 2.5cqw;
  background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--c) 80%, #fff 10%), color-mix(in srgb, var(--c) 55%, #0b1020) 70%);
  box-shadow: inset 0 0 0 .6cqw rgba(255, 255, 255, .22); }
.pack-art .pk-hero { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; opacity: .92;
  -webkit-mask: linear-gradient(to bottom, #000 45%, transparent 88%); mask: linear-gradient(to bottom, #000 45%, transparent 88%); }
.pack-art .pk-body::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--c) 70%, #060a14) 8%, transparent 55%), linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .28) 45%, transparent 60%); pointer-events: none; }
/* brand along the right edge, card count in the corner, name in a slanted band */
.pack-art .pk-brand { position: absolute; z-index: 2; right: 4cqw; top: 8cqw; writing-mode: vertical-rl; font: 800 8cqw/1 var(--display); letter-spacing: .08em; color: rgba(255, 255, 255, .92); text-shadow: 0 .5cqw 2cqw rgba(0, 0, 0, .55); }
.pack-art .pk-brand i { font-style: normal; color: var(--accent); }
/* card count: a readable pill on a dark backing, clear of the crimped seal */
.pack-art .pk-count { position: absolute; z-index: 2; left: 5cqw; top: 9cqw; padding: 1.4cqw 3.4cqw; border-radius: 99px; font: 700 5cqw/1 var(--body); color: #fff; background: rgba(6, 10, 20, .72); border: .5cqw solid rgba(255, 255, 255, .45); box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, .35); white-space: nowrap; }
.pack-art .pk-count i { font-style: normal; font-weight: 800; }
.pack-art .pk-band { position: absolute; z-index: 2; left: -2cqw; right: -2cqw; bottom: 9cqw; display: flex; align-items: center; gap: 3.5cqw; padding: 4cqw 8cqw; transform: rotate(-7deg);
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 85%, #fff 5%), color-mix(in srgb, var(--c) 60%, #060a14)); box-shadow: 0 1.5cqw 5cqw rgba(0, 0, 0, .4); }
.pack-art .pk-ico { font-style: normal; font-size: 10cqw; color: #fff; line-height: 1; display: inline-flex; }
.pack-art .pk-name { font: 800 10cqw/.95 var(--display); letter-spacing: .02em; text-transform: uppercase; color: #fff; text-shadow: 0 .5cqw 2cqw rgba(0, 0, 0, .45); min-width: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pack-art:hover { transform: translateY(-6px) rotate(-1.5deg); filter: brightness(1.06); }

/* ---------- daily rewards ---------- */
.rewards { display: grid; gap: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1150px) { .rewards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .rewards { grid-template-columns: 1fr; } }
.rw { --tc: var(--accent); display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
  transition: transform .2s var(--ease), border-color .2s, box-shadow .2s; }
.rw:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--tc) 45%, var(--line)); }
.rw.ready { border-color: color-mix(in srgb, var(--tc) 55%, transparent); box-shadow: 0 14px 40px -18px color-mix(in srgb, var(--tc) 70%, transparent); }
.rw.done { opacity: .82; }
.rw-head { display: flex; align-items: center; gap: 12px; }
.rw .t-ic { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 14px; font-size: 22px; color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--tc) 35%, transparent); }
.rw h3 { font-size: 16.5px; }
.rw-state { display: inline-flex; align-items: center; gap: 6px; font: 700 12px var(--body); padding: 4px 9px; border-radius: 99px; width: fit-content; }
.rw-state.ready { color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, transparent); }
.rw-state.done { color: var(--green); background: rgba(79, 216, 162, .12); }
.rw-state.locked { color: var(--muted); background: var(--surface2); }
.rw-gain { font-size: 14.5px; color: var(--text); }
.rw-gain small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.rw-prog { display: grid; gap: 6px; font-size: 12.5px; color: var(--muted); }
.rw-prog .bar > i { background: var(--tc); }
.rw-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.rw-days i { height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .1); }
.rw-days i.on { background: var(--tc); }
.rw-days i.now { background: transparent; box-shadow: inset 0 0 0 1.5px var(--tc); }
.rw-act { margin-top: auto; padding-top: 4px; }
.rw-act .btn { width: 100%; }
.rw-act .btn.primary { background: linear-gradient(135deg, color-mix(in srgb, var(--tc) 70%, #fff), var(--tc)); box-shadow: 0 10px 28px -10px color-mix(in srgb, var(--tc) 70%, transparent); }
.rw-act .later { display: block; text-align: center; padding: 11px; border-radius: var(--radius-sm); background: var(--surface2); color: var(--muted); font-size: 13.5px; }
.rw-act .later b { color: var(--text); }

/* other home blocks */
.banner { border-radius: var(--radius); padding: 16px 20px; border-color: rgba(244, 197, 90, .4); background: linear-gradient(90deg, rgba(244, 197, 90, .12), transparent 70%), var(--surface); }
.happy-chip { border-radius: 99px; background: rgba(244, 197, 90, .12); border-color: rgba(244, 197, 90, .4); color: var(--gold); box-shadow: none; animation: none; }
.mission { border-radius: 16px; padding: 14px 16px; background: var(--surface2); border-color: transparent; }
.mission .ic { border-radius: 12px; background: var(--surface3); }
.mission.ready { border-color: rgba(79, 216, 162, .45); background: rgba(79, 216, 162, .08); }
.feed { gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.pull { border-radius: 16px; padding: 10px 12px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 14%, transparent), transparent 70%), var(--surface); }
.pull .thumb { border-radius: 8px; }
.pull .r { font-family: var(--body); }
.listings { gap: 20px; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); }
.listing .meta { margin-top: 18px; }
/* the old hub tiles still appear on other pages */
.tile { border-radius: var(--radius); background: var(--surface); }
.tile.ready { border-color: rgba(90, 209, 250, .5); box-shadow: var(--glow); }
.tile.ready::after { content: 'Disponible'; background: var(--accent); color: var(--on-accent); border-radius: 99px; font: 800 11px var(--body); letter-spacing: .02em; text-transform: none; animation: none; }

/* ---------- boosters ---------- */
.packs { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.pack-tile { border-radius: 22px; padding: 22px 20px 20px; gap: 12px; border: 1px solid var(--line); box-shadow: var(--shadow);
  background: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--c) 26%, transparent), transparent 70%), var(--surface); transition: transform .2s var(--ease), border-color .2s, box-shadow .2s; }
.pack-tile:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 55%, transparent); box-shadow: 0 20px 50px -20px color-mix(in srgb, var(--c) 60%, transparent); }
.pack-tile .pack-art { width: 66%; margin: 0 auto 4px; }
.pack-tile h3 { font-size: 18px; }
.pack-tile .sub { font-size: 13.5px; margin-top: -4px; }
.pack-tile .acts .btn { padding: 9px 10px; font-size: 13.5px; }
.shop-featured { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 32px; border-radius: 24px; border: 1px solid var(--line); padding: 26px 48px 26px 36px; margin-bottom: 40px; box-shadow: var(--shadow);
  background: linear-gradient(110deg, rgba(12, 18, 32, .96) 0%, rgba(12, 18, 32, .85) 50%, color-mix(in srgb, var(--c) 22%, rgba(12, 18, 32, .7)) 100%); }
.shop-featured::after { display: none; }
.shop-featured h2 { margin: 6px 0 4px; font-size: clamp(30px, 3.4vw, 44px); line-height: 1; text-transform: uppercase; font-weight: 800; }
.shop-featured p { margin: 0; color: var(--muted); }
.shop-featured .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.shop-featured .timer { display: inline-block; margin-top: 12px; padding: 5px 12px; border-radius: 99px; font-size: 13px; color: var(--muted); background: rgba(255, 255, 255, .05); border: 1px solid var(--line); }
.shop-featured .art { width: 130px; }
@media (max-width: 860px) { .shop-featured { gap: 18px; padding: 20px; border-radius: 20px; } .shop-featured .art { width: 92px; } }

/* ---------- cards grids, stats, progression ---------- */
.cards { gap: 26px 20px; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
.cards .cap, .item .cap { margin-top: 10px; font-size: 13px; color: var(--muted); }
.stat-tiles { gap: 14px; }
.stat { border-radius: 18px; padding: 18px 20px; background: var(--surface); border-color: var(--line); }
.stat small { font-family: var(--body); letter-spacing: .08em; color: var(--faint); }
.stat b { font-family: var(--display); font-size: 34px; font-weight: 800; margin-top: 4px; }
.ach .a { border-radius: 16px; background: var(--surface); }
.ach .a > i { border-radius: 12px; }
.ach .a.got > i { background: var(--grad); color: var(--on-accent); }
.streak { gap: 10px; }
.streak .d { border-radius: 16px; background: var(--surface); }
.streak .d.now { border-color: var(--accent); box-shadow: var(--glow); }
.tier { border-radius: 16px; width: 116px; background: var(--surface); }
.tier.unlocked { border-color: rgba(90, 209, 250, .5); background: rgba(90, 209, 250, .08); }
.tier.big { border-color: rgba(244, 197, 90, .55); background: linear-gradient(180deg, rgba(244, 197, 90, .12), transparent); }
.counter { border-radius: 99px; }
.counter b { font-family: var(--body); color: var(--text); }
.wheel-hub { background: var(--grad); color: var(--on-accent); }
.trade-col { border-radius: 16px; background: rgba(5, 9, 18, .4); }
.album-tile { border-radius: 18px; }
.album-tile:hover { border-color: rgba(90, 209, 250, .5); }

/* cards: shimmer only while hovered, the turning ring stays on Mythics (rare) */
.card[data-r=R] .cart::after { animation: none; opacity: 0; }
.card[data-r=R]:hover .cart::after { opacity: 1; animation: k-sheen 1.4s ease-in-out; }
.card[data-r=M] .cfoil { animation: none; }

/* motion preferences */
@media (prefers-reduced-motion: reduce) {
  .btn, .rw, .pack-tile, .pack-art, .tile, .ico { transition: none; }
  .btn:hover, .rw:hover, .pack-tile:hover, .pack-art:hover { transform: none; }
  .card[data-r=M] .ci::before { animation: none; }
}
/* themes tab: about fifty boosters, smaller tiles and a search */
.theme-search { margin: -12px 0 22px; max-width: 420px; }
.packs.compact { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.packs.compact .pack-tile { padding: 16px 14px 14px; gap: 10px; }
.packs.compact .pack-tile h3 { font-size: 16px; }
.packs.compact .pack-tile .sub { font-size: 12.5px; }
.packs.compact .pack-tile .acts .btn { padding: 8px 8px; font-size: 12.5px; }

/* ---------- 3D card viewer (js/ui/inspect.js) ---------- */
.inspect { position: fixed; inset: 0; z-index: 130; display: flex; padding: 24px; overflow: auto;
  background: radial-gradient(60% 50% at 50% 42%, rgba(30, 44, 70, .75), rgba(3, 6, 12, .94)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .2s; }
/* the card on the left, its details on the right */
.insp-main { display: flex; align-items: center; justify-content: center; gap: clamp(28px, 5vw, 64px); width: 100%; max-width: 1180px; margin: auto; }
.insp-left { display: flex; flex-direction: column; align-items: center; gap: 22px; flex: none; }
.insp-info { width: min(440px, 100%); max-height: min(78vh, 720px); overflow: auto; padding: 26px; border-radius: var(--radius); background: rgba(14, 21, 36, .78); border: 1px solid var(--line2); box-shadow: var(--shadow); }
.insp-info .row .btn { flex: 0 1 auto; }
@media (max-width: 860px) {
  .inspect { padding: 64px 16px 32px; }
  .insp-main { flex-direction: column; gap: 24px; }
  .insp-info { max-height: none; }
}
.inspect.on { opacity: 1; }
.insp-stage { position: relative; perspective: 1400px; display: grid; place-items: center; }
.insp-card { --c: var(--r-C); position: relative; width: min(40vw, 52vh, 380px); aspect-ratio: 5 / 7; transform-style: preserve-3d; cursor: grab; container-type: inline-size; outline: none; touch-action: none; }
@media (max-width: 860px) { .insp-card { width: min(74vw, 52vh, 360px); } }
/* thickness: slices in the rarity colour between the two faces */
.insp-edge { position: absolute; inset: 0; border-radius: 4.5cqw; background: color-mix(in srgb, var(--c) 55%, #0a1120); transform: translateZ(calc(var(--z) * .3cqw)); }
.insp-edge:nth-child(odd) { background: color-mix(in srgb, var(--c) 42%, #0a1120); }
.insp-card:active { cursor: grabbing; }
.insp-card.ease { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.insp-card[data-r=U] { --c: var(--r-U); } .insp-card[data-r=R] { --c: var(--r-R); } .insp-card[data-r=E] { --c: var(--r-E); } .insp-card[data-r=L] { --c: var(--r-L); } .insp-card[data-r=M] { --c: var(--r-M); }
.insp-card:focus-visible { outline: none; }
.insp-face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(1.3cqw); }
.insp-front .card { width: 100%; height: 100%; }
.insp-front .card .ci { transform: none; box-shadow: 0 0 12cqw color-mix(in srgb, var(--c) 45%, transparent); }
.insp-front .card::after { display: none; }
/* the front stays opaque, so the thickness never shows through: a card not owned is greyed instead */
.insp-front .card.missing { opacity: 1; }
.insp-front .card.missing .ci { filter: grayscale(1) brightness(.6); }
/* the back: rarity colour, the emblem and the name */
.insp-back { transform: rotateY(180deg) translateZ(1.3cqw); border-radius: 4.5cqw; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(90% 70% at 50% 35%, color-mix(in srgb, var(--c) 85%, #fff 15%), var(--c) 45%, color-mix(in srgb, var(--c) 45%, #050913) 100%);
  box-shadow: inset 0 0 0 2.2cqw color-mix(in srgb, var(--c) 70%, #fff 15%), 0 0 12cqw color-mix(in srgb, var(--c) 45%, transparent); }
.insp-back::before { content: ''; position: absolute; inset: 5cqw; border-radius: 4cqw; border: .6cqw solid rgba(255, 255, 255, .45);
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .07) 0 2cqw, transparent 2cqw 4cqw); }
.insp-back::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .22) 45%, transparent 60%); }
.ib-in { position: relative; z-index: 1; display: grid; justify-items: center; gap: 4cqw; }
.ib-mark { width: 30cqw; height: 30cqw; filter: drop-shadow(0 2cqw 4cqw rgba(0, 0, 0, .35)); }
.ib-mark .yatta-emblem * { animation: none !important; }
.ib-word { font: 800 17cqw/1 var(--display); letter-spacing: .04em; color: #fff; text-shadow: 0 1cqw 3cqw rgba(0, 0, 0, .35); }
.ib-word i { font-style: normal; color: #0b1424; }
.ib-rar { font: 800 4.6cqw var(--body); letter-spacing: .2em; text-transform: uppercase; color: #fff; padding: 1.4cqw 4cqw; border-radius: 99px; background: rgba(0, 0, 0, .25); }
.insp-shadow { width: min(36vw, 46vh, 340px); height: 26px; margin-top: 26px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); }
.insp-bar { display: grid; gap: 12px; justify-items: center; }
.insp-hint { color: var(--muted); font-size: 14px; text-align: center; }
.insp-x { position: absolute; top: 18px; right: 18px; }
@media (prefers-reduced-motion: reduce) { .insp-card.ease { transition: none; } }
/* cards and boosters: no text selection, no dragging the picture out */
.inspect, .card, .pack-art { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.card img, .pack-art img, .inspect img, .inspect svg { -webkit-user-drag: none; user-drag: none; pointer-events: none; }

/* ---------- boosters in the 3D viewer: a sealed pack with flat artwork ---------- */
/* the artwork is 148 cqw tall (5 / 7.4); the pack adds a rounded shoulder of --sh above and below it.
   --cr: crimped seal, --T: half thickness */
.insp-card.insp-pack { aspect-ratio: 100 / 156; --cr: 5.5cqw; --sh: 4cqw; --T: 2.8cqw; }
/* explicit 100% sizes: with inset: 0 the browser sized these from the card's old 5/7 ratio */
:is(.insp-pack, .pk3d-in) .pk3 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
:is(.insp-pack, .pk3d-in) .pk3 .pack-art { position: absolute; left: 0; width: 100%; height: 148cqw; aspect-ratio: auto; top: var(--off, 0px); cursor: inherit; }
:is(.insp-pack, .pk3d-in) .pk3 .pack-art:hover { transform: none; filter: none; }
/* flat seals at both ends, in the middle plane, seen from both sides */
:is(.insp-pack, .pk3d-in) .pk3.fin.top { clip-path: inset(0 0 calc(100% - var(--cr) - .2cqw) 0); }
:is(.insp-pack, .pk3d-in) .pk3.fin.bot { clip-path: inset(calc(100% - var(--cr) - .2cqw) 0 0 0); --off: calc(var(--sh) * 2); }
/* the artwork: two flat panels at the full thickness, between the shoulders */
:is(.insp-pack, .pk3d-in) .pk3.face { --off: var(--sh); clip-path: inset(calc(var(--cr) + var(--sh)) 0 calc(var(--cr) + var(--sh)) 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
:is(.insp-pack, .pk3d-in) .pk3.face.front { transform: translateZ(var(--T)); }
:is(.insp-pack, .pk3d-in) .pk3.face.back { transform: rotateY(180deg) translateZ(var(--T)); }
/* foil shades of the pack, from the booster colour */
:is(.insp-pack, .pk3d) { --foil-hi: color-mix(in srgb, var(--c) 80%, #fff 18%); --foil-mid: color-mix(in srgb, var(--c) 65%, #0a1120); --foil-lo: color-mix(in srgb, var(--c) 40%, #050a14); }
/* side walls, standing at right angles: full thickness along the artwork, narrowing to the seals */
:is(.insp-pack, .pk3d-in) .pk3-wall { position: absolute; top: 0; height: 100%; width: calc(var(--T) * 2); left: calc(var(--T) * -1);
  background: linear-gradient(90deg, var(--foil-mid), var(--foil-hi) 45%, var(--foil-hi) 55%, var(--foil-mid));
  clip-path: polygon(0 calc(var(--cr) + var(--sh)), 50% var(--cr), 100% calc(var(--cr) + var(--sh)), 100% calc(100% - var(--cr) - var(--sh)), 50% calc(100% - var(--cr)), 0 calc(100% - var(--cr) - var(--sh)));
  transform: rotateY(90deg); }
:is(.insp-pack, .pk3d-in) .pk3-wall.right { left: auto; right: calc(var(--T) * -1); }
/* plain foil slopes from each face down to the seals (the artwork itself never bends) */
:is(.insp-pack, .pk3d-in) .pk3-side { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-style: preserve-3d; }
:is(.insp-pack, .pk3d-in) .pk3-side.back { transform: rotateY(180deg); }
:is(.insp-pack, .pk3d-in) .pk3-slope { position: absolute; left: 0; right: 0; height: hypot(var(--sh), var(--T)); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
:is(.insp-pack, .pk3d-in) .pk3-slope.top { top: calc(var(--cr) + var(--sh) - hypot(var(--sh), var(--T))); transform-origin: 50% 100%; transform: translateZ(var(--T)) rotateX(atan2(var(--T), var(--sh)));
  background: linear-gradient(var(--foil-lo), var(--foil-hi)); }
:is(.insp-pack, .pk3d-in) .pk3-slope.bot { top: calc(100% - var(--cr) - var(--sh)); transform-origin: 50% 0; transform: translateZ(var(--T)) rotateX(calc(-1 * atan2(var(--T), var(--sh))));
  background: linear-gradient(var(--foil-mid), var(--foil-lo)); }
/* boosters standing in 3D on the pages: turned a little, they straighten up under the pointer */
.pk3d-stage { perspective: 1100px; position: relative; }
.pk3d { --c: var(--gold); position: relative; aspect-ratio: 100 / 156; container-type: inline-size; cursor: pointer;
  --cr: 5.5cqw; --sh: 4.5cqw; --T: 3.8cqw; transform-style: preserve-3d; transform: rotateX(8deg) rotateY(-28deg) rotateZ(-1deg); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.pk3d-in { position: absolute; inset: 0; width: 100%; height: 100%; transform-style: preserve-3d; }
.pk3d-stage::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: -14px; height: 18px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .5), transparent); pointer-events: none; }
.pack-tile:hover .pk3d, .pk3d:focus-visible { transform: rotateX(4deg) rotateY(-10deg) translateY(-6px); }
.pack-tile .pk3d-stage { width: 60%; margin: 4px auto 18px; }
.shop-featured .art .pk3d-stage { width: 100%; }
.shop-featured .art .pk3d { animation: pk3d-sway 7s ease-in-out infinite; }
@keyframes pk3d-sway { 0%, 100% { transform: rotateX(7deg) rotateY(-26deg) translateY(0); } 50% { transform: rotateX(4deg) rotateY(-12deg) translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .pk3d { transition: none; } .shop-featured .art .pk3d { animation: none; } }
.lite .shop-featured .art .pk3d { animation: none; }
/* the back of a booster: dark foil, metal frame, the pack's information on both sides of the seal */
.pack-back .pk-body { background: radial-gradient(80% 55% at 50% 40%, color-mix(in srgb, var(--c) 35%, #0b1020), #070b16 80%); box-shadow: inset 0 0 0 .6cqw rgba(255, 255, 255, .25); }
.pack-back .pk-body::after { background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .12) 45%, transparent 60%); }
.pkb-frame { position: absolute; inset: 5cqw; border: .6cqw solid color-mix(in srgb, var(--c) 60%, #fff 25%); clip-path: polygon(6cqw 0, calc(100% - 6cqw) 0, 100% 6cqw, 100% calc(100% - 6cqw), calc(100% - 6cqw) 100%, 6cqw 100%, 0 calc(100% - 6cqw), 0 6cqw); box-shadow: inset 0 0 6cqw color-mix(in srgb, var(--c) 30%, transparent); }
.pkb-logo { position: absolute; z-index: 2; left: 0; right: 0; top: 9cqw; text-align: center; font: 800 14cqw/1 var(--display); font-style: italic; letter-spacing: .02em; color: #e8f9ff; -webkit-text-stroke: .5cqw color-mix(in srgb, var(--c) 60%, #0b1020); paint-order: stroke fill; text-shadow: 0 0 4cqw color-mix(in srgb, var(--c) 70%, transparent); }
.pkb-logo i { font-style: italic; color: var(--accent); }
.pkb-col { position: absolute; z-index: 2; top: 30cqw; bottom: 10cqw; width: 33cqw; display: flex; flex-direction: column; gap: 2.4cqw; color: #fff; text-align: left; }
.pkb-col.left { left: 9cqw; }
.pkb-col.right { right: 9cqw; }
.pkb-name { font: 800 7cqw/1 var(--display); text-transform: uppercase; letter-spacing: .02em; color: color-mix(in srgb, var(--c) 45%, #fff); overflow-wrap: break-word; hyphens: auto; }
.pkb-sub { margin: 0; font: 600 3.6cqw/1.35 var(--body); color: rgba(255, 255, 255, .78); }
.pkb-facts { display: grid; grid-template-columns: auto 1fr; gap: 1.2cqw 2cqw; margin: 1cqw 0 0; font: 600 3.4cqw/1.2 var(--body); }
.pkb-facts dt { color: rgba(255, 255, 255, .6); }
.pkb-facts dd { margin: 0; font-weight: 800; }
.pkb-slots { display: flex; gap: 1.4cqw; margin-top: auto; }
.pkb-slots i { width: 3.2cqw; height: 4.6cqw; border-radius: .8cqw; box-shadow: 0 0 0 .4cqw rgba(255, 255, 255, .6); }
.pkb-title { font: 800 3.4cqw var(--body); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.pkb-rates { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.8cqw; font: 600 3.5cqw var(--body); }
.pkb-rates li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.6cqw; }
.pkb-rates i { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; }
.pkb-rates .pkb-pct { font-weight: 800; }
.pkb-code { margin-top: auto; height: 9cqw; border-radius: .8cqw; background: repeating-linear-gradient(90deg, #0b1020 0 .5cqw, transparent .5cqw 1cqw, #0b1020 1cqw 2cqw, transparent 2cqw 2.5cqw), #fff; box-shadow: 0 0 0 1.2cqw #fff; margin-left: 1.2cqw; margin-right: 1.2cqw; }
/* the rate table beside a booster: compact, never wrapping */
.insp-info .table { font-size: 12.5px; }
.insp-info .table th, .insp-info .table td { padding: 7px 6px; white-space: nowrap; }
.insp-info .cards.sm { grid-template-columns: repeat(3, 1fr); }
/* a card not unlocked: grey back and edge in the 3D viewer, like its front */
.insp-card.is-missing { --c: #6b7079; }
.insp-card.is-missing .insp-back { filter: grayscale(1) brightness(.7); }
.insp-card.is-missing .insp-edge { filter: grayscale(1) brightness(.75); }
/* sound and smooth mode: two icon toggles in the account menu */
.dropdown .menu-toggles { display: flex; gap: 8px; padding: 6px 10px; }
.menu-toggles .iconbtn.on { background: rgba(90, 209, 250, .16); border-color: rgba(90, 209, 250, .5); color: var(--accent); }

/* daily rewards: four tiles with a big emoji, the title and what is available */
.rewards .rw { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 190px; padding: 26px 18px; text-align: center; cursor: pointer; font: inherit; color: var(--text); text-decoration: none; }
.rewards .rw .rw-emo { font-size: 64px; line-height: 1; filter: drop-shadow(0 10px 18px color-mix(in srgb, var(--tc) 45%, transparent)); transition: transform .25s var(--ease); }
.rewards .rw:hover .rw-emo { transform: translateY(-4px) scale(1.06); }
.rewards .rw .rw-title { font: 800 17px/1.2 var(--body); margin-top: 6px; }
.rewards .rw .rw-avail { font: 600 13.5px/1.3 var(--body); color: var(--muted); }
.rewards .rw .rw-avail b { color: var(--text); }
.rewards .rw.ready .rw-avail { color: var(--tc); }
.rewards .rw:not(.ready) .rw-emo { filter: grayscale(.35) opacity(.85); }

/* ---------- home banner: simple, airy, gently animated ---------- */
.hero { min-height: 460px; padding: 64px 64px 72px; gap: 48px; overflow: hidden; isolation: isolate; background: #0b111d; }
.hero .hero-copy { max-width: 520px; animation: hero-in .7s var(--ease) both; }
.hero h1 { font-size: clamp(48px, 6vw, 84px); margin-top: 16px; }
.hero .lead { font-size: 18px; margin-top: 14px; max-width: 420px; }
.hero .cta { margin-top: 34px; gap: 22px; }
.hero-link { font: 700 15px var(--body); color: var(--text); opacity: .85; border-bottom: 1px solid transparent; transition: opacity .15s, border-color .15s; }
.hero-link:hover { opacity: 1; border-bottom-color: var(--accent); }
.hero-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; font-size: 13.5px; color: var(--muted); }
.hero-meta span { opacity: .5; }
/* an aurora in the booster colour, slowly drifting behind everything */
.hero-bg { position: absolute; inset: -25%; z-index: -1; pointer-events: none; filter: blur(40px); opacity: .9;
  background: radial-gradient(35% 45% at 70% 45%, color-mix(in srgb, var(--c) 55%, transparent), transparent 70%), radial-gradient(30% 40% at 30% 70%, rgba(90, 209, 250, .22), transparent 70%), radial-gradient(25% 35% at 85% 85%, color-mix(in srgb, var(--c) 30%, #8b5cf6 30%), transparent 70%);
  animation: hero-drift 16s ease-in-out infinite alternate; }
/* a soft light sweeping across the banner from time to time */
.hero::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .06) 50%, transparent 60%) 0 0 / 250% 100% no-repeat; animation: hero-sweep 7s ease-in-out infinite; }
.hero::after { display: none; }
.hero .stage { animation: hero-in .8s .08s var(--ease) both; }
.hero .stage::before { opacity: .55; }
/* the pack floats, the two cards sway a little behind it */
.hero .stage .pack-art { animation: hero-float 5s ease-in-out infinite; }
.hero .stage .fan > a:nth-child(1) { animation: hero-sway 6s ease-in-out infinite alternate; }
.hero .stage .fan > a:nth-child(2) { animation: hero-sway 6s -3s ease-in-out infinite alternate; }
.hero-dots { position: absolute; left: 64px; bottom: 30px; z-index: 3; display: flex; gap: 8px; }
.hero-dots button { width: 26px; height: 6px; padding: 0; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .22); cursor: pointer; transition: width .3s var(--ease), background .3s; }
.hero-dots button.on { width: 46px; background: var(--accent); }
.hero-dots button:hover { background: rgba(255, 255, 255, .45); }
@keyframes hero-drift { from { transform: translate(-3%, -2%) rotate(0deg) scale(1); } to { transform: translate(4%, 3%) rotate(6deg) scale(1.08); } }
@keyframes hero-sweep { 0%, 55% { background-position: 150% 0; } 100% { background-position: -50% 0; } }
@keyframes hero-float { 0%, 100% { translate: 0 0; rotate: -1deg; } 50% { translate: 0 -10px; rotate: 1deg; } }
@keyframes hero-sway { from { translate: 0 0; } to { translate: 0 -8px; } }
@keyframes hero-in { from { opacity: 0; transform: translateY(12px); } }
@media (max-width: 860px) {
  .hero { padding: 26px 20px 56px; gap: 10px; }
  .hero h1 { font-size: clamp(40px, 11vw, 60px); }
  .hero .cta { gap: 16px; }
  .hero-dots { left: 20px; bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg, .hero::before, .hero .stage .pack-art, .hero .stage .fan > a, .hero .hero-copy, .hero .stage { animation: none; }
}
.lite .hero-bg, .lite .hero::before, .lite .hero .stage .pack-art, .lite .hero .stage .fan > a { animation: none; }
/* animated starry sky behind the whole site (js/ui/starfield.js) */
#bg-stars { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; }

/* opening a booster: tear it by swiping along its top, left to right */
.opening .tear-stage { display: grid; justify-items: center; gap: 14px; margin: 18px auto 6px; padding: 10px 0; width: min(100%, 680px); touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; }
.tear-pack { --cut: 0; --top: 6.5%; position: relative; width: min(300px, 68vw); aspect-ratio: 5 / 7.4; cursor: grab; touch-action: none; outline: none; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .6)); animation: tp-float 3s ease-in-out infinite; }
.tear-pack.grab { cursor: grabbing; animation: none; }
.tear-pack:focus-visible { filter: drop-shadow(0 0 0 2px var(--accent)) drop-shadow(0 30px 40px rgba(0, 0, 0, .6)); }
.tear-pack .tp-top, .tear-pack .tp-body { position: absolute; inset: 0; }
.tear-pack .pack-art { width: 100%; height: 100%; pointer-events: none; }
.tear-pack .pack-art:hover { transform: none; filter: none; }
/* the strip above the cut, in two pieces: right of the cut it stays attached; left of the cut the
   torn piece peels up and away, bending at the point where the tear is */
.tp-top { --x: calc(var(--cut) * 100%); clip-path: polygon(var(--x) 0, 100% 0, 100% var(--top), var(--x) var(--top)); }
.tp-top.tp-torn {
  clip-path: polygon(0 0, var(--x) 0, var(--x) var(--top), 0 var(--top));
  /* hinged on its top edge at the tear point: the top stays one with the rest of the strip,
     only the torn bottom edge opens */
  transform-origin: var(--x) 0;
  transform: rotate(calc(var(--cut) * -16deg));
  filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .55));
  transition: transform .08s;
}
.tp-body { clip-path: polygon(0 calc(var(--top) - 1px), 100% calc(var(--top) - 1px), 100% 100%, 0 100%); }
.tp-line { position: absolute; left: 3%; right: 3%; top: var(--top); border-top: 3px dashed rgba(255, 255, 255, .9); filter: drop-shadow(0 0 2px rgba(0, 0, 0, .9)); pointer-events: none; }
/* the opening under the cut: the dark inside of the booster shows where it is torn */
.tear-pack::before { content: ''; position: absolute; z-index: 1; left: 0; top: calc(var(--top) - 6px); height: calc(8px + var(--cut) * 16px); width: calc(var(--cut) * 100%); border-radius: 0 6px 6px 0; background: linear-gradient(#000, #1a1208); box-shadow: inset 0 3px 6px rgba(0, 0, 0, .9); pointer-events: none; }
.tear-pack .tp-top { z-index: 2; }
.tear-pack .tp-line, .tear-pack .tp-cut, .tear-pack .tp-hand { z-index: 3; }
.tp-cut { position: absolute; left: 0; top: calc(var(--top) - 3px); height: 6px; width: calc(var(--cut) * 100%); border-radius: 3px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, .2), #fff 70%, #ffe9a8); box-shadow: 0 0 14px 4px rgba(255, 230, 160, .75); }
.tp-cut::after { content: ''; position: absolute; right: -9px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: radial-gradient(circle, #fff, #ffd36b 40%, transparent 70%); opacity: calc(var(--cut) * 10); }
.tp-hand { position: absolute; top: calc(var(--top) - 7%); left: -4%; font-size: 30px; pointer-events: none; animation: tp-hand 1.8s ease-in-out infinite; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .6)); }
.tear-pack.grab .tp-hand, .tear-pack.torn .tp-hand, .tear-pack.started .tp-hand { display: none; }
@keyframes tp-hand { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 75% { transform: translateX(min(210px, 50vw)); opacity: 1; } 100% { transform: translateX(min(210px, 50vw)); opacity: 0; } }
@keyframes tp-float { 50% { transform: translateY(-8px) rotate(-.6deg); } }
/* torn: the strip flies away, the booster drops and fades into the reels */
.tear-pack.torn { animation: none; }
.tear-pack.torn .tp-top { transition: transform .55s cubic-bezier(.2, .7, .3, 1), opacity .55s; transform: translate(-30%, -180%) rotate(-35deg); opacity: 0; }
.tear-pack.torn .tp-body { transition: transform .5s .2s, opacity .45s .25s; transform: translateY(10%) scale(.96); opacity: 0; }
.tear-pack.torn .tp-line, .tear-pack.torn .tp-cut { opacity: 0; transition: opacity .2s; }
.opening .machine.hidden { display: none; }
@media (prefers-reduced-motion: reduce) { .tear-pack, .tp-hand { animation: none; } }

/* --- phones --------------------------------------------------------------------------------- */
/* nothing may widen the page sideways (a wide element would make the whole site zoom out) */
html, body { overflow-x: clip; max-width: 100%; }
@media (max-width: 560px) {
  .top { gap: 6px; padding: 0 10px; }
  .wallet small { display: none; }
  .happy-chip { padding: 6px 8px; }
  .happy-txt { display: none; }
  .wallet > * { padding: 4px 7px; gap: 5px; }
  .wallet .w-free .ring { width: 18px; height: 18px; }
  .top .iconbtn, .me-btn { flex: none; }
  .page { padding: 18px 12px 120px; }
  h1 { font-size: clamp(30px, 9vw, 40px); }
  .page-head { gap: 12px; }
  .page-head .btn.xl, .page-head .btn.lg { width: 100%; justify-content: center; }
  .panel { padding: 16px; }
  .grid-2, .grid2, .grid-3 { grid-template-columns: 1fr !important; }
  .stat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat b { font-size: 26px; }
  .modal { width: calc(100vw - 16px) !important; max-height: calc(100dvh - 24px); }
  .modal .mbody { padding: 18px 14px; }
  .tabs { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .tabs button { white-space: nowrap; }
  input, select, textarea { font-size: 16px; } /* no zoom on focus on iPhone */
}

/* ==============================================================================================
   Harmonisation: one page banner (only its accent colour changes from page to page), one button
   code (cyan = main action, gold = collect a reward, green = accept), readable rarities
   ============================================================================================== */
.pass-hero { --pa: #c39bff; }
.fg-hero { --pa: #ff9f43; }
.m-hero { --pa: #3ddc97; }
.ref-hero, .invite { --pa: #ffc83d; }
.defi { --pa: #ff6b4a; }
.rules-hero { --pa: #5ad1fa; }
.pass-hero, .fg-hero, .m-hero, .ref-hero, .invite, .defi, .rules-hero {
  border-radius: 24px; border: 1px solid color-mix(in srgb, var(--pa) 32%, rgba(255, 255, 255, .08));
  background: radial-gradient(70% 130% at 0% 0%, color-mix(in srgb, var(--pa) 20%, transparent), transparent 62%), radial-gradient(60% 110% at 100% 100%, rgba(61, 139, 255, .12), transparent 60%), rgba(8, 14, 28, .86);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .8);
}
.pass-hero::before { display: none; }
.pass-hero h1, .invite h1, .defi h1 { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--text); }
:is(.pass-hero, .fg-hero, .m-hero, .ref-hero, .invite, .defi, .rules-hero) .eyebrow { color: var(--pa); }

/* the big PLAY button of the Arena is a main action: cyan like the others */
.lobby-go { color: #04202c; background: linear-gradient(180deg, #8de6ff, #2fb8ee); box-shadow: 0 0 0 2px rgba(180, 240, 255, .5) inset, 0 14px 40px -10px rgba(47, 184, 238, .8); animation-name: lobby-pulse-cyan; }
@keyframes lobby-pulse-cyan { 50% { box-shadow: 0 0 0 2px rgba(180, 240, 255, .5) inset, 0 14px 60px -6px rgba(47, 184, 238, 1); } }

/* rarities: Heroic a warmer yellow than the gold of rewards; Eternal white that glows */

[style*="--r-M)"]:not(img):not(i), .pull[data-r=M] .r { text-shadow: 0 0 .5em rgba(185, 215, 255, .95), 0 0 .12em #fff; }
.pill.r[style*="--r-M)"], .chip[style*="--r-M)"] { border-color: rgba(220, 235, 255, .7); background: linear-gradient(90deg, rgba(255, 255, 255, .14), rgba(190, 220, 255, .14), rgba(255, 210, 245, .14)); }

/* tabs with an icon (Classement): the icon sits on the same line */
.tabs button span { margin-right: 4px; }