/* WikiPons v3: an app first, like the card platforms people use (Courtyard, Phygitals, WikiMasters).
   Neutral dark panels, clean type, the cards as the only color. Tokens in tokens.css. */

@property --foil { syntax: '<angle>'; inherits: true; initial-value: 210deg; }

:root { color-scheme: dark; accent-color: var(--accent); }
/* the parts the browser draws carry the palette too: scrollbars and the caret */
html { scrollbar-color: #2E2E36 var(--bg); }
input, textarea { caret-color: var(--accent-hi); }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--p-font); font-size: 15px; line-height: 1.5; font-weight: 450;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
[hidden] { display: none !important; }
/* Mona Sans draws a slashed zero in its tabular figures, so numbers stay proportional everywhere; the few that tick
   (the odometer, the countdown, inline timers through <Tn>) get fixed digit cells instead. */
.num { font-variant-numeric: proportional-nums; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
::selection { background: var(--accent); color: #fff; }
.boot { min-height: 100dvh; background: var(--bg); }
.muted { color: var(--text-2); }
.small { font-size: 13.5px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spread { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.stack { display: grid; gap: 14px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); flex: none; animation: live 1.8s ease-in-out infinite; }
@keyframes live { 50% { opacity: 0.35; } }
.live-chip { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border-radius: 999px; background: rgba(63, 217, 138, 0.1); color: #8FF0BE; font-size: 13px; font-weight: 650; }

/* ── buttons ──────────────────────────────────────────────────────────────────────────────── */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  height: 42px; padding: 0 18px; border: 0; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; text-decoration: none;
  font-weight: 650; font-size: 14px; color: #fff; background: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: transform 160ms var(--p-ease-out), background-color 160ms ease, opacity 160ms ease;
}
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.28) 50%, transparent 60%); transform: translateX(-110%);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:disabled) { background-color: var(--accent-hi); }
  .btn:hover:not(:disabled)::before { transform: translateX(110%); transition: transform 700ms var(--p-ease-out); }
  .btn.light:hover:not(:disabled) { background-color: #FFFFFF; }
  .btn.ghost:hover:not(:disabled) { background-color: rgba(255, 255, 255, 0.13); }
  /* one meaning per color: money stays commerce red and rewards stay lime on hover, only accent buttons go blue-hi */
  .btn:is(.coin, .red, .sh-get, .sh-topup-btn):hover:not(:disabled) { background-color: #FF6546; }
  .btn.good:hover:not(:disabled) { background-color: #EEF88A; }
  .btn.danger:hover:not(:disabled) { background-color: rgba(255, 90, 74, 0.2); }
  .btn.chrome:hover:not(:disabled) { background-color: #FFFFFF; }
}
.btn:active:not(:disabled) { transform: scale(0.97); transition-duration: 100ms; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn svg { width: 17px; height: 17px; fill: currentColor; flex: none; }
.btn img { flex: none; }
.btn.light, .btn.chrome { color: #0B0B0D; background-color: #EDEDF0; box-shadow: none; }
.btn.light::before, .btn.chrome::before { background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.9) 50%, transparent 60%); }
.btn.ghost { color: var(--text); background-color: rgba(255, 255, 255, 0.08); box-shadow: none; }
.btn.ghost::before { background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.1) 50%, transparent 60%); }
.btn.coin, .btn.red { background-color: var(--commerce); }
.btn.good { color: #0B0D04; background-color: var(--signal); box-shadow: none; }
.btn.danger { color: #FF8A7D; background-color: rgba(255, 90, 74, 0.13); box-shadow: none; }
.btn.small { height: 34px; padding: 0 14px; font-size: 13px; gap: 6px; }
.btn.small svg { width: 15px; height: 15px; }
.btn.big { height: 50px; padding: 0 24px; font-size: 15px; }
.btn.wide { width: 100%; }
.btn .ico { display: none; }
.link-btn { border: 0; background: none; padding: 0; font-weight: 600; color: var(--accent-hi); text-decoration: underline; text-underline-offset: 3px; }

.icon-btn {
  width: 38px; height: 38px; border-radius: 50%; border: 0; color: var(--text); background: rgba(255, 255, 255, 0.07);
  display: inline-grid; place-items: center; position: relative; flex: none; transition: transform 140ms var(--p-ease-out), background-color 160ms ease;
}
.icon-btn svg { width: 19px; height: 19px; fill: currentColor; }
@media (hover: hover) and (pointer: fine) { .icon-btn:hover { background: rgba(255, 255, 255, 0.12); } }
.icon-btn:active { transform: scale(0.93); }
.badge {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--commerce); color: #fff;
  font-size: 13px; font-weight: 750; display: inline-grid; place-items: center; line-height: 1; font-variant-numeric: proportional-nums;
}
.icon-btn .badge { position: absolute; top: -3px; right: -3px; box-shadow: 0 0 0 3px var(--bg); }

/* ── chips, inputs, tabs ──────────────────────────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  height: 34px; padding: 0 13px; border-radius: 999px; border: 0; color: var(--text-2); background: var(--panel-2);
  display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13px;
  transition: background-color 160ms ease, color 160ms ease, transform 140ms var(--p-ease-out);
}
.chip:active { transform: scale(0.96); }
.chip img { display: none; }
.chip[aria-pressed="true"] { color: #0B0B0D; background: #EDEDF0; }
.field-label { display: grid; gap: 7px; font-weight: 600; font-size: 13px; color: var(--text-2); }
.input, .select {
  height: 44px; width: 100%; border-radius: 12px; border: 0; background: var(--panel-2); color: var(--text);
  padding: 0 14px; font-size: 15px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); transition: box-shadow 160ms ease;
}
.input:focus, .select:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--accent-hi); }
.input::placeholder { color: var(--text-3); }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%); background-position: calc(100% - 19px) 19px, calc(100% - 14px) 19px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
textarea.input { height: auto; padding: 12px 14px; resize: vertical; min-height: 90px; }
.search { position: relative; flex: 1 1 280px; }
.search svg { position: absolute; left: 14px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); fill: var(--text-3); }
.search .input { padding-left: 40px; }
.tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; width: fit-content; max-width: 100%; overflow-x: auto; margin-bottom: 18px; scrollbar-width: none; background: var(--panel); }
.tabs button { border: 0; background: none; border-radius: 999px; padding: 7px 15px; font-weight: 600; font-size: 13.5px; color: var(--text-2); white-space: nowrap; transition: background-color 160ms ease, color 160ms ease; }
.tabs button[aria-selected="true"] { color: var(--text); background: var(--panel-3); }
/* a row wider than its box scrolls sideways, and only the side that has more tabs fades (data-l, data-r, set by <Tabs>) */
.tabs[data-r] { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
.tabs[data-l] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px); mask-image: linear-gradient(90deg, transparent, #000 44px); }
.tabs[data-l][data-r] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.toolbar .select { width: auto; min-width: 150px; }
.panel { background: var(--panel); border-radius: var(--radius-panel); padding: 20px; }
.panel h2, .section-title { margin: 0 0 12px; font-size: 19px; letter-spacing: -0.015em; font-weight: 700; line-height: 1.2; }

/* ── app shell ────────────────────────────────────────────────────────────────────────────── */
.app { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); grid-template-rows: var(--topbar-h) 1fr; min-height: 100dvh; }
.topbar {
  grid-column: 1 / -1; position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr) auto; align-items: center; padding: 0 16px 0 0;
  background: rgba(11, 11, 13, 0.82); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
}
.wordmark { font-weight: 800; font-size: 20px; letter-spacing: -0.035em; text-decoration: none; line-height: 1; white-space: nowrap; }
.topbar > .wordmark { padding-left: 24px; }
.top-search {
  display: flex; align-items: center; gap: 10px; height: 38px; width: min(380px, 100%); margin-left: 24px; padding: 0 14px;
  border-radius: 999px; background: var(--panel); color: var(--text-3); text-decoration: none; font-size: 13.5px; transition: background-color 160ms ease;
}
.top-search svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
@media (hover: hover) and (pointer: fine) { .top-search:hover { background: var(--panel-2); color: var(--text-2); } }
.top-right { display: flex; align-items: center; gap: 8px; }
.stat-pill {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px 0 10px; border-radius: 999px; text-decoration: none;
  background: var(--panel); font-weight: 700; font-size: 14px; font-variant-numeric: proportional-nums;
}
.stat-pill svg { width: 18px; height: 18px; fill: currentColor; }
.stat-pill img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.stat-pill small { color: var(--text-3); font-weight: 600; font-size: 13px; }

.rail {
  position: sticky; top: var(--topbar-h); height: calc(100dvh - var(--topbar-h) - 12px); margin: 0 0 12px 12px; padding: 10px 8px 10px;
  border-radius: var(--radius-panel); background: var(--panel); overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 6px;
}
.nav { display: flex; flex-direction: column; gap: 1px; }
.nav + .nav { margin-top: 8px; padding-top: 8px; box-shadow: inset 0 1px 0 var(--line); }
.nav-label { padding: 6px 12px 4px; font-size: 13px; font-weight: 600; color: var(--text-3); }
.nav a {
  display: flex; align-items: center; gap: 11px; height: 38px; padding: 0 12px; border-radius: 10px; text-decoration: none;
  font-weight: 550; font-size: 14px; color: var(--text-2); transition: background-color 140ms ease, color 140ms ease;
}
.nav a svg { width: 19px; height: 19px; flex: none; fill: currentColor; }
.nav a .badge { margin-left: auto; }
@media (hover: hover) and (pointer: fine) { .nav a:hover { background: rgba(255, 255, 255, 0.045); color: var(--text); } }
.nav a[aria-current="page"] { color: var(--text); background: rgba(255, 255, 255, 0.075); }
/* the foot (guest card or wallet pill) stays pinned at the bottom of the rail while the nav scrolls under it; the -10px
   bottom and margin cover the rail's bottom padding, and the solid panel hides the links behind the see-through card */
.rail-foot { position: sticky; bottom: -10px; z-index: 1; margin-top: auto; padding: 10px 0; margin-bottom: -10px; background: var(--panel); }
.wallet-pill { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 12px; background: var(--panel-2); }
.wallet-pill { padding: 8px 6px 8px 10px; }
.wallet-pill .who { flex: 1; min-width: 0; }
.wallet-pill .gear { width: 36px; height: 36px; background: none; }
.guest-card { display: grid; gap: 6px; padding: 14px; border-radius: 12px; background: linear-gradient(160deg, rgba(58, 76, 255, 0.28), rgba(58, 76, 255, 0.06)); }
.guest-card b { font-size: 14px; font-weight: 700; }
.guest-card span { font-size: 13px; color: var(--text-2); line-height: 1.4; margin-bottom: 6px; }
/* the full guest rail needs about 936px of screen: on shorter screens (a 1440x900 laptop) the explainer goes */
@media (max-height: 935px) { .guest-card span { display: none; } .guest-card { gap: 10px; } }
.main { min-width: 0; padding: 32px 24px 64px; }
.tabbar { display: none; }

/* ── page head ────────────────────────────────────────────────────────────────────────────── */
.head { position: relative; margin: 0 0 24px; display: grid; gap: 4px; }
.head h1 { margin: 0; font-size: 28px; line-height: 1.15; letter-spacing: -0.03em; font-weight: 760; }
.head p { margin: 0; font-size: 14.5px; color: var(--text-2); max-width: 64ch; }
.head .head-actions { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.head .howto { position: absolute; top: 0; right: 0; }

/* ── the card ─────────────────────────────────────────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 20px 16px; }
.card-slot { position: relative; }
.card {
  --metal: var(--metal-0); --tone: var(--p-r0); --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 0%;
  position: relative; aspect-ratio: 5 / 7; width: 100%; border-radius: var(--card-radius); padding: 2.4%;
  background: var(--metal); color: var(--text); text-align: left; border: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.4), 0 18px 30px -20px rgba(0, 0, 0, 1);
  display: flex; flex-direction: column; container-type: inline-size;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 480ms var(--p-ease-out), box-shadow 300ms ease;
}
.card[data-r="1"] { --metal: var(--metal-1); --tone: var(--p-r1); }
.card[data-r="2"] { --metal: var(--metal-2); --tone: var(--p-r2); }
.card[data-r="3"] { --metal: var(--metal-3); --tone: var(--p-r3); }
.card[data-r="4"] { --metal: var(--metal-4); --tone: var(--p-r4); }
.card[data-r="5"] { --metal: var(--metal-5); --tone: #FFFFFF; animation: foil-turn 9s linear infinite; }
.card[data-r="5"] .code, .rcode[data-r="5"] { background: var(--chrome); }
@keyframes foil-turn { to { --foil: 570deg; } }
button.card { cursor: pointer; }
button.card:active { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) scale(0.97); }
.card > .art { position: relative; flex: 0 0 56%; border-radius: 3.2cqw 3.2cqw 1.2cqw 1.2cqw; overflow: hidden; background: #0B0B12; }
.card > .art > img { width: 100%; height: 100%; object-fit: cover; }
.card > .art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.26) 0%, transparent 26%, transparent 72%, rgba(6, 6, 10, 0.4) 100%); pointer-events: none; }
.card > .art.none { display: grid; place-items: center; background: radial-gradient(110% 90% at 30% 15%, color-mix(in oklab, var(--tone) 32%, #0B0B12), #07070C 72%); }
.card > .art.none .initial { font-weight: 850; font-size: 50cqw; line-height: 1; color: var(--tone); opacity: 0.5; letter-spacing: -0.04em; }
.card[data-r="5"] > .art.none .initial { color: #fff; }
.card > .art.blur > img { filter: blur(14px) saturate(0.6); transform: scale(1.1); }
.card .plate {
  flex: 1; margin-top: 2.4cqw; border-radius: 1.2cqw 1.2cqw 3.2cqw 3.2cqw; min-height: 0;
  background: linear-gradient(180deg, #16161D, #0A0A0E); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  padding: 5.6cqw 6cqw 5cqw; display: flex; flex-direction: column;
}
.card .plate h3 {
  margin: 0; font-stretch: 80%; font-weight: 800; text-transform: uppercase; letter-spacing: 0.005em;
  font-size: clamp(11px, 9.2cqw, 18px); line-height: 1.04;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card .plate p { margin: 1.8cqw 0 0; font-size: clamp(9.5px, 6.4cqw, 12.5px); line-height: 1.25; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.card .stats { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 4px; }
.card .stats span { display: grid; line-height: 1; }
.card .plate .stats small { font-size: clamp(7.5px, 5cqw, 10px); font-weight: 650; color: var(--text-3); letter-spacing: 0.05em; margin-bottom: 1.6cqw; }
.card .plate .stats b { font-stretch: 78%; font-weight: 800; font-size: clamp(13px, 10.5cqw, 22px); font-variant-numeric: proportional-nums; }
.card .stats .def { text-align: right; }
.card .stats .atk b { color: #FF8F74; }
.card .stats .def b { color: #A3B3FF; }
.card .code {
  position: absolute; left: 3.6cqw; top: 3.6cqw; z-index: 2; height: max(17px, 11.5cqw); min-width: max(17px, 11.5cqw); padding: 0 3.2cqw;
  display: grid; place-items: center; border-radius: 999px; background: var(--metal); color: #07070C;
  font-stretch: 80%; font-weight: 850; font-size: clamp(9px, 6.8cqw, 13px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 8px rgba(0, 0, 0, 0.55);
}
.card .reads {
  position: absolute; right: 3.6cqw; top: 3.6cqw; z-index: 2; height: max(17px, 11.5cqw); padding: 0 3.4cqw; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 1.6cqw; background: rgba(6, 6, 10, 0.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: clamp(9px, 6.4cqw, 12px); font-weight: 700; font-variant-numeric: proportional-nums;
}
.card .reads svg { width: 1.15em; height: 1.15em; fill: currentColor; opacity: 0.8; }
.card .fav { position: absolute; right: 3.6cqw; bottom: calc(42% + 2cqw); z-index: 2; width: max(22px, 14cqw); height: max(22px, 14cqw); border-radius: 50%; background: rgba(6, 6, 10, 0.7); display: grid; place-items: center; }
.card .fav svg { width: 58%; height: 58%; fill: var(--signal); }
.card .glare {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; opacity: 0;
  background: radial-gradient(70% 55% at var(--gx) var(--gy), rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 70%);
  mix-blend-mode: soft-light; transition: opacity 300ms ease;
}
@media (hover: hover) and (pointer: fine) {
  button.card:hover, .card.tilt:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.4), 0 30px 44px -24px rgba(0, 0, 0, 1); }
  button.card:hover .glare, .card.tilt:hover .glare { opacity: 1; }
}
.card.shiny .glare {
  opacity: 0.9; mix-blend-mode: overlay; background-size: 260% 260%;
  background-image: linear-gradient(118deg, transparent 22%, rgba(255, 255, 255, 0.5) 42%, rgba(150, 170, 255, 0.4) 50%, rgba(255, 190, 170, 0.35) 56%, transparent 74%);
  animation: sheen 3.4s var(--p-ease-in-out) infinite;
}
@keyframes sheen { 0% { background-position: 100% 0; } 60%, 100% { background-position: -60% 0; } }
.card.shiny::after {
  content: 'Shiny'; position: absolute; left: 50%; top: 3.6cqw; transform: translateX(-50%); z-index: 2; height: max(17px, 11.5cqw); padding: 0 3.6cqw;
  display: grid; place-items: center; border-radius: 999px; background: var(--chrome); color: #07070C; font-size: clamp(9px, 6.2cqw, 12px); font-weight: 750;
}
.copies { position: absolute; right: -7px; top: -9px; z-index: 4; min-width: 30px; height: 26px; padding: 0 8px; border-radius: 999px; background: #EDEDF0; color: #0B0B0D; font-weight: 750; font-size: 13px; display: grid; place-items: center; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6); }
.new-tag { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); z-index: 4; background: var(--signal); color: #0B0D04; font-weight: 750; font-size: 13px; padding: 3px 10px; border-radius: 999px; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6); }
.locked { position: absolute; inset: 0; border-radius: var(--card-radius); background: rgba(0, 0, 0, 0.55); z-index: 5; display: grid; place-items: center; color: #fff; font-weight: 650; font-size: 13px; text-align: center; padding: 10px; }
.card-slot.selectable .card { outline: 2px solid transparent; outline-offset: 4px; }
.card-slot.selected .card { outline-color: var(--accent-hi); }
/* Selected (the collection's select mode, the trade picker): the tick sits in the middle of the art, where no badge is
   (the corners hold the reads pill, the copies count and the new dot), and lets the tap through to the card */
.card-slot .tick {
  position: absolute; left: 50%; top: 30%; z-index: 6; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent); display: grid; place-items: center; pointer-events: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.92), 0 8px 18px rgba(0, 0, 0, 0.55);
}
.card-slot .tick svg { width: 22px; height: 22px; fill: #fff; }
.card.skeleton, .skeleton-tile { background: linear-gradient(100deg, #121216 30%, #1A1A20 50%, #121216 70%); background-size: 300% 100%; box-shadow: none; animation: shimmer 1.3s linear infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

.rarity-dot { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; }
.rcode { --metal: var(--metal-0); display: inline-grid; place-items: center; height: 22px; min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--metal); color: #07070C; font-stretch: 80%; font-weight: 850; font-size: 13px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65); }
.rcode[data-r="1"] { --metal: var(--metal-1); } .rcode[data-r="2"] { --metal: var(--metal-2); } .rcode[data-r="3"] { --metal: var(--metal-3); } .rcode[data-r="4"] { --metal: var(--metal-4); }
.rarity-name { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--panel-2); font-weight: 650; font-size: 13.5px; }

/* avatars: a small ring in one of the rarity metals */
.avatar { --metal: var(--metal-0); width: 42px; height: 42px; border-radius: 50%; flex: none; position: relative; display: grid; place-items: center; background: var(--metal); }
.avatar::before { content: ''; width: 64%; height: 64%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #1D1D25, #09090C 70%); }
.avatar[data-r="1"] { --metal: var(--metal-1); } .avatar[data-r="2"] { --metal: var(--metal-2); } .avatar[data-r="3"] { --metal: var(--metal-3); }
.avatar[data-r="4"] { --metal: var(--metal-4); } .avatar[data-r="5"] { --metal: var(--metal-5); }
.avatar.big { width: 84px; height: 84px; }
.avatar .online { position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px var(--bg); }

/* card backs: the brand on the reverse, used for packs and the deal */
/* paint (the metal, the fill, the rosette, the wordmark's color) lives in cosmetics.css (spec 8.1) */
.cback {
  position: relative; aspect-ratio: 5 / 7; width: 100%; border-radius: 9px; container-type: inline-size;
  box-shadow: 0 14px 26px -14px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.cback::before { content: ''; position: absolute; inset: 4.5%; border-radius: 6px; }
.cback::after { content: ''; position: absolute; inset: 11%; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
.cback span { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; font-weight: 800; font-size: 15cqw; letter-spacing: -0.03em; }
.cback.pearl::after { box-shadow: inset 0 0 0 1px rgba(20, 20, 30, 0.2); }
.stack3 { position: relative; width: 36%; aspect-ratio: 5 / 7; }
.stack3 .cback { position: absolute; inset: 0; transition: transform 420ms var(--p-ease-out); }
.stack3 .cback:nth-child(1) { transform: rotate(-11deg) translate(-24%, 4%); }
.stack3 .cback:nth-child(3) { transform: rotate(11deg) translate(24%, 4%); }
.stack3 .cback:nth-child(2) { z-index: 1; }
.stack3 .cback:not(:nth-child(2)) span { visibility: hidden; }
.stack3 .count { position: absolute; right: -44%; bottom: -6%; z-index: 2; height: 24px; padding: 0 9px; border-radius: 999px; display: grid; place-items: center; background: rgba(8, 8, 12, 0.78); color: #fff; font-size: 13px; font-weight: 750; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* ── home ─────────────────────────────────────────────────────────────────────────────────── */
.home { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 2px; container: home / inline-size; }
.banner {
  position: relative; isolation: isolate; overflow: hidden; border-radius: 22px; min-height: 380px; padding: 44px 48px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); align-items: center; gap: 20px; background: #15151A;
}
.banner-bg { position: absolute; inset: -80px; z-index: -2; background-size: cover; background-position: center; filter: blur(56px) saturate(1.5) brightness(0.62); transform: scale(1.15); animation: fade-in 900ms ease both; }
.banner::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 11, 13, 0.9) 0%, rgba(11, 11, 13, 0.55) 48%, rgba(11, 11, 13, 0.1) 100%); }
.banner-copy { max-width: 540px; }
.banner h1 { margin: 0; font-size: clamp(40px, 4.4vw, 60px); line-height: 1.0; letter-spacing: -0.04em; font-weight: 780; }
.banner h1 span { color: rgba(245, 245, 247, 0.5); }
.banner p { margin: 16px 0 24px; font-size: 16px; color: rgba(245, 245, 247, 0.72); max-width: 44ch; }
.banner-cards { position: relative; height: 320px; }
.bc { position: absolute; left: 50%; top: 50%; }
.bc .card { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 30px 50px -20px rgba(0, 0, 0, 0.95); }
.bc-c { width: 200px; transform: translate(-50%, -50%); z-index: 3; animation: deal-c 900ms 100ms var(--p-ease-out) both; }
.bc-l { width: 170px; transform: translate(-128%, -46%) rotate(-12deg); z-index: 1; animation: deal-l 900ms 220ms var(--p-ease-out) both; }
.bc-r { width: 170px; transform: translate(28%, -46%) rotate(12deg); z-index: 2; animation: deal-r 900ms 300ms var(--p-ease-out) both; }
@keyframes deal-c { from { opacity: 0; transform: translate(-50%, -38%) scale(0.94); } }
@keyframes deal-l { from { opacity: 0; transform: translate(-50%, -46%) rotate(0deg); } }
@keyframes deal-r { from { opacity: 0; transform: translate(-50%, -46%) rotate(0deg); } }
@keyframes fade-in { from { opacity: 0; } }

.row-block { min-width: 0; }
.row-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 14px; }
.row-head > .btn { flex: none; }
.row-head h2 { margin: 0; font-size: 21px; letter-spacing: -0.025em; font-weight: 740; line-height: 1.2; }
.row-head p { margin: 3px 0 0; font-size: 13.5px; color: var(--text-2); }
.rail-x {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 2px 12px; margin: -4px -2px 0; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent);
}
.rail-x::-webkit-scrollbar { display: none; }
.legend-tile { flex: 0 0 196px; scroll-snap-align: start; display: grid; gap: 9px; padding-top: 4px; }
.legend-tile small { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); }
.legend-tile small svg { width: 14px; height: 14px; fill: currentColor; }
.legend-tile small b { color: var(--text); font-weight: 700; }

.pack-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pack-tile { border-radius: var(--radius-tile); background: var(--panel); padding: 10px 10px 14px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pk-visual { position: relative; aspect-ratio: 16 / 10; border-radius: 12px; display: grid; place-items: center; overflow: hidden; }
.pk-visual.blue { background: radial-gradient(90% 100% at 50% 20%, #2735C9, #111433 72%); }
.pk-visual.pearl { background: radial-gradient(90% 100% at 50% 20%, #4B4E5E, #17171D 72%); }
.pk-visual.onyx { background: radial-gradient(90% 100% at 50% 20%, #3A3423, #121110 72%); }
.pk-visual.red { background: radial-gradient(90% 100% at 50% 20%, #8A2410, #1A0C09 72%); }
@media (hover: hover) and (pointer: fine) {
  .pack-tile:hover .stack3 .cback:nth-child(1) { transform: rotate(-16deg) translate(-34%, 2%); }
  .pack-tile:hover .stack3 .cback:nth-child(2) { transform: translateY(-5%); }
  .pack-tile:hover .stack3 .cback:nth-child(3) { transform: rotate(16deg) translate(34%, 2%); }
}
.pk-body { padding: 0 6px; display: grid; gap: 3px; }
.pk-body h3 { margin: 0; font-size: 15.5px; font-weight: 700; letter-spacing: -0.015em; }
.pk-body p { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.4; }
.pk-foot { margin-top: auto; padding: 0 6px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pk-foot span { font-size: 13px; font-weight: 650; color: var(--text-2); }
.meter { display: flex; gap: 4px; margin-top: 8px; }
.meter i { flex: 1; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); }
.meter i.on { background: var(--text); }

/* ── opening ──────────────────────────────────────────────────────────────────────────────── */
.opening { position: fixed; inset: 0; z-index: 70; color: #fff; display: grid; grid-template-rows: auto 1fr auto; padding: 20px 22px; overflow: hidden; background: radial-gradient(70% 60% at 50% 45%, #17182A 0%, #0B0B0D 72%); animation: fade-in 220ms ease-out both; }
.opening .top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.opening .top b { font-size: 17px; font-weight: 700; }
.opening .stage { display: grid; place-items: center; min-height: 0; position: relative; }
.opening .tear { width: min(520px, 80vw); display: grid; place-items: center; animation: tear-shake 900ms var(--p-ease-in-out) both; }
.opening .tear .stack3 { width: 40%; }
@keyframes tear-shake {
  0% { transform: scale(0.92) rotate(-3deg); } 18% { transform: scale(1) rotate(3deg); } 30% { transform: rotate(-4deg); } 42% { transform: rotate(4deg); }
  54% { transform: rotate(-2deg); } 66% { transform: rotate(2deg) scale(1.03); } 100% { transform: scale(1.12); opacity: 0; filter: blur(8px) brightness(1.5); }
}
.deal { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; perspective: 1400px; max-width: 1180px; }
.deal .flip { width: clamp(136px, 16vw, 204px); aspect-ratio: 5 / 7; position: relative; animation: deal-in 460ms var(--p-ease-out) both; cursor: pointer; border: 0; background: none; padding: 0; perspective: 1400px; }
.deal .flip .inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 620ms var(--p-ease-out); }
.deal .flip:nth-child(2) { animation-delay: 70ms; } .deal .flip:nth-child(3) { animation-delay: 140ms; }
.deal .flip:nth-child(4) { animation-delay: 210ms; } .deal .flip:nth-child(5) { animation-delay: 280ms; }
@keyframes deal-in { from { opacity: 0; transform: translateY(90px) rotate(-8deg) scale(0.9); } }
.deal .flip.shown .inner { transform: rotateY(180deg); }
.deal .flip.shown.legend .inner { transition-duration: 1500ms; }
.deal .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.deal .back .cback { height: 100%; border-radius: var(--card-radius); }
@media (hover: hover) and (pointer: fine) { .deal .flip:not(.shown):hover .back { transform: translateY(-6px); transition: transform 240ms var(--p-ease-out); } }
.deal .front { transform: rotateY(180deg); }
.deal .front .card { height: 100%; }
.opening .bottom { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; padding-bottom: env(safe-area-inset-bottom); }
.opening .summary { text-align: center; margin: 0 0 12px; font-size: 15px; color: var(--text-2); }
.opening .summary b { color: var(--text); }
.opening .icon-btn { color: var(--text); }

/* ── modal and sheet ──────────────────────────────────────────────────────────────────────── */
.scrim { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.66); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 20px; animation: fade-in 200ms ease-out both; }
.modal { width: min(540px, 100%); max-height: calc(100dvh - 40px); overflow: auto; border-radius: 20px; padding: 24px; position: relative; background: #151519; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 40px 80px -20px rgba(0, 0, 0, 1); animation: modal-in 280ms var(--p-ease-drawer) both; }
.modal.wide { width: min(920px, 100%); }
/* the sheet itself takes focus when it opens (ui.jsx Modal): no ring around the whole box */
.modal:focus-visible { outline: none; }
.modal h2 { margin: 0 0 6px; font-size: 22px; line-height: 1.15; letter-spacing: -0.025em; font-weight: 740; padding-right: 44px; }
.modal .close { position: absolute; top: 16px; right: 16px; }
@keyframes modal-in { from { opacity: 0; transform: translateY(24px) scale(0.98); } }
/* the way out (ModalHost in main.jsx keeps the last sheet mounted for it): 180ms ease-in, the scrim fades in 200ms */
.modal-host { display: contents; }
.modal-host.leaving .scrim { pointer-events: none; animation: fade-out 200ms ease forwards; }
.modal-host.leaving .modal { animation: modal-out 180ms cubic-bezier(0.4, 0, 1, 1) forwards; }
@keyframes fade-out { to { opacity: 0; } }
@keyframes modal-out { to { opacity: 0; transform: translateY(24px) scale(0.98); } }
.detail { display: grid; grid-template-columns: 260px 1fr; gap: 26px; align-items: start; }
.detail .big-card { position: sticky; top: 0; }
.detail .facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 14px 0; }
.fact { background: var(--panel-2); border-radius: 14px; padding: 12px 14px; }
.fact b { display: block; font-weight: 750; font-size: 22px; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: proportional-nums; }
.fact span { font-size: 13px; color: var(--text-2); }
.fact.atk b { color: #FF8F74; } .fact.def b { color: #A3B3FF; }
.extract { font-size: 14.5px; line-height: 1.6; color: var(--text-2); margin: 10px 0 0; }
.credit { font-size: 12.5px; color: var(--text-3); margin: 8px 0 0; }
.tag { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 11px; border-radius: 999px; font-weight: 600; font-size: 13px; background: rgba(85, 102, 255, 0.16); color: #C3CBFF; }
.tag button { border: 0; background: rgba(255, 255, 255, 0.1); width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; padding: 0; }
.tag button svg { width: 10px; height: 10px; fill: currentColor; }

/* ── toasts: a Sonner stack (<Toaster> in main.jsx). The newest in front, two peeking behind at scale 1 - .05i and
   14px apart; hover spreads them 12px apart; each enters from below and leaves the way it came or the way it was swiped. */
/* --toasts-bottom: set by <Toaster> while a sticky action row (the profile editor's footer, a checkout sheet's
   actions) sits under the stack, so a toast never covers Save or Buy */
.toasts { position: fixed; z-index: 80; right: 18px; bottom: var(--toasts-bottom, 18px); width: min(380px, calc(100vw - 36px)); height: 0; }
.toast {
  position: absolute; left: 0; right: 0; bottom: 0; overflow: hidden; transform-origin: 50% 0; touch-action: none; user-select: none; -webkit-user-select: none;
  background: #1C1C22; color: var(--text); border-radius: 16px; padding: 12px 14px; font-weight: 550; font-size: 14px; line-height: 1.35;
  display: flex; gap: 12px; align-items: center; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 24px 40px -12px rgba(0, 0, 0, 0.95);
  transition: transform 400ms var(--p-ease-out), opacity 300ms ease, height 300ms var(--p-ease-out), translate 220ms var(--p-ease-out);
}
/* the gap between spread-out toasts stays hoverable */
.toast::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 14px; }
.toast:not([data-mounted]) { opacity: 0 !important; transform: translateY(100%) !important; }
.toast[data-leaving] { translate: 0 40%; pointer-events: none; }
.toast[data-swiping] { transition: transform 400ms var(--p-ease-out), opacity 300ms ease; cursor: grabbing; }
.toast.behind > * { opacity: 0; transition: opacity 200ms ease; }
.toast > * { transition: opacity 200ms ease; }
.toast.bad { background: #2E1411; color: #FFB3A8; }
.toast img { width: 30px; height: 30px; flex: none; border-radius: 50%; object-fit: cover; }
.toast-text { min-width: 0; }
.toast.reward img { width: 34px; height: 34px; }
.toast-plus { flex: none; display: inline-flex; align-items: center; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--signal); }
.toast.reward .toast-text { color: var(--text-2); }

/* ── lists and other pages ────────────────────────────────────────────────────────────────── */
.list { display: grid; gap: 8px; }
.item { display: flex; align-items: center; gap: 14px; padding: 11px 14px; border-radius: 14px; background: var(--panel); color: var(--text); }
.item .grow { flex: 1; min-width: 0; }
.item b { display: block; font-size: 14.5px; font-weight: 650; }
.item small { color: var(--text-2); font-size: 13px; }
.empty { text-align: center; padding: 44px 20px; border-radius: var(--radius-panel); background: var(--panel); display: grid; justify-items: center; gap: 8px; }
.empty img { display: none; }
.empty b { font-size: 17px; font-weight: 700; }
.empty p { margin: 0; color: var(--text-2); max-width: 42ch; }
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 24px 0 0; font-weight: 600; color: var(--text-2); }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; font-size: 14.5px; }
.kv dt { color: var(--text-2); } .kv dd { margin: 0; font-weight: 650; text-align: right; font-variant-numeric: proportional-nums; }
.switch { position: relative; width: 46px; height: 28px; border-radius: 999px; background: var(--panel-3); border: 0; transition: background-color 180ms ease; flex: none; }
.switch::after { content: ''; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #EDEDF0; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); transition: transform 200ms var(--p-ease-out); }
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(18px); }
.setting { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; box-shadow: 0 1px 0 var(--line); }
.setting:last-child { box-shadow: none; }
.setting b { display: block; font-weight: 650; } .setting small { color: var(--text-2); }
.ach { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.ach .item { align-items: flex-start; }
.ach .item.done { background: linear-gradient(160deg, rgba(58, 76, 255, 0.22), rgba(58, 76, 255, 0.05)); }
.ach .item:not(.done) .avatar { filter: grayscale(1); opacity: 0.45; }
.progress { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.progress i { display: block; height: 100%; border-radius: 999px; background: var(--text); transform-origin: left; animation: grow 800ms var(--p-ease-out) both; }
@keyframes grow { from { transform: scaleX(0.02); } }
.board .item .rank { width: 34px; font-size: 18px; font-weight: 750; text-align: center; color: var(--text-2); }
.board .item.me { box-shadow: inset 0 0 0 1.5px var(--accent-hi); }
.wall { max-width: 520px; margin: 14vh auto 0; text-align: center; display: grid; gap: 10px; justify-items: center; }
.wall h1 { margin: 0; font-size: 32px; letter-spacing: -0.035em; font-weight: 760; }
.wall p { margin: 0 0 14px; color: var(--text-2); font-size: 15.5px; }
.onboarding { min-height: 100dvh; display: grid; place-items: center; padding: 20px; }
.onboarding .panel { width: min(440px, 100%); padding: 28px; }
.onboarding h1 { margin: 22px 0 6px; font-size: 26px; letter-spacing: -0.03em; font-weight: 750; }

/* ── smaller screens ──────────────────────────────────────────────────────────────────────── */
@container home (max-width: 940px) {
  .banner { grid-template-columns: 1fr; padding: 30px 28px 30px; }
  .banner-cards { height: 270px; order: -1; }
  .banner-copy { max-width: none; }
}
@container home (max-width: 1100px) { .pack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  :root { --topbar-h: 56px; }
  .app { grid-template-columns: 1fr; }
  .rail { display: none; }
  .top-search { display: none; }
  .topbar { grid-template-columns: auto 1fr auto; padding: 0 12px 0 0; }
  .topbar > .wordmark { padding-left: 16px; }
  .top-right { grid-column: 3; }
  .stat-pill { height: 34px; padding: 0 11px 0 8px; font-size: 13px; }
  .stat-pill small { display: none; }
  .main { padding: 16px 14px 100px; }
  .home { gap: 30px; }
  .banner { padding: 24px 20px 24px; border-radius: 18px; min-height: 0; }
  .banner-cards { height: 230px; }
  .bc-c { width: 140px; } .bc-l, .bc-r { width: 118px; }
  .banner p { font-size: 15px; }
  .legend-tile { flex-basis: 160px; }
  .detail { grid-template-columns: 1fr; } .detail .big-card { position: static; width: min(240px, 72%); margin: 0 auto; }
  .toasts { bottom: var(--toasts-bottom, 92px); right: 12px; left: 12px; width: auto; }
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 40;
    background: rgba(21, 21, 25, 0.88); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
    border-radius: 20px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 20px 40px -10px rgba(0, 0, 0, 0.9); padding: 6px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom) * 0.5);
  }
  .tabbar a, .tabbar button { display: grid; justify-items: center; gap: 2px; padding: 7px 2px; border: 0; background: none; border-radius: 14px; font-size: 13px; font-weight: 600; text-decoration: none; color: var(--text-2); }
  .tabbar svg { width: 22px; height: 22px; fill: currentColor; }
  .tabbar [aria-current="page"] { color: var(--text); background: rgba(255, 255, 255, 0.08); }
  .scrim { place-items: end center; padding: 0; }
  .modal { width: 100%; border-radius: 22px 22px 0 0; max-height: 92dvh; animation: sheet-in 320ms var(--p-ease-drawer) both; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  @keyframes sheet-in { from { transform: translateY(100%); } }
}
@media (max-width: 520px) { .pack-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .pk-body p { display: none; } }

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

/* ══ v4: the game layer ══════════════════════════════════════════════════════════════════════ */

/* holographic foil on Super rare and above, and on shiny cards; it follows the pointer like a real holo */
.card .holo {
  position: absolute; inset: 0; border-radius: inherit; z-index: 2; pointer-events: none; mix-blend-mode: color-dodge; opacity: 0.2;
  background-image:
    repeating-linear-gradient(112deg, hsl(330 80% 62% / 0.55) 0%, hsl(45 92% 62% / 0.55) 5%, hsl(160 70% 55% / 0.55) 10%, hsl(214 90% 66% / 0.55) 15%, hsl(330 80% 62% / 0.55) 20%),
    repeating-linear-gradient(-45deg, #141828 0%, rgba(160, 170, 200, 0.85) 4%, #141828 8%);
  background-size: 320% 320%, 220% 220%;
  background-position: var(--gx) var(--gy), calc(100% - var(--gx)) calc(100% - var(--gy));
  background-blend-mode: overlay; filter: brightness(0.8) contrast(1.35);
  transition: opacity 300ms ease;
}
.card[data-r="5"] .holo { opacity: 0.3; }
@media (hover: hover) and (pointer: fine) { button.card:hover .holo, .card.tilt:hover .holo { opacity: 0.55; } }

/* ── the live strip ─────────────────────────────────────────────────────────────────────────── */
.ticker2 { display: flex; align-items: center; gap: 12px; height: 56px; border-radius: 14px; background: var(--panel); padding-left: 14px; overflow: hidden; }
.tk-live { display: inline-flex; align-items: center; gap: 7px; font-weight: 750; font-size: 13px; color: #8FF0BE; flex: none; }
/* the fades are at least 28px, so on a phone the items do not look sliced under the Live label */
.tk-lane { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 max(28px, 4%), #000 min(calc(100% - 28px), 94%), transparent); mask-image: linear-gradient(90deg, transparent, #000 max(28px, 4%), #000 min(calc(100% - 28px), 94%), transparent); }
.tk-run { display: flex; gap: 8px; width: max-content; animation: run var(--run, 60s) linear infinite; }
.ticker2:hover .tk-run { animation-play-state: paused; }
@keyframes run { to { transform: translateX(-50%); } }
.tk { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px 0 4px; border-radius: 10px; background: var(--panel-2); flex: none; }
.tk img, .tk-ph { width: 32px; height: 32px; border-radius: 7px; object-fit: cover; flex: none; background: var(--panel-3); display: grid; place-items: center; font-weight: 800; font-size: 14px; color: var(--text-2); }
.tk > div { min-width: 0; }
.tk > div > b { display: block; font-size: 13px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; line-height: 1.25; }
.tk small { display: block; font-size: 13px; color: var(--text-3); white-space: nowrap; }
.tk small svg { width: 12px; height: 12px; fill: currentColor; vertical-align: -2px; margin-right: 3px; }
.tk small b { font-weight: 650; color: var(--text-2); }
.tk .rcode { height: 20px; min-width: 20px; font-size: 13px; padding: 0 6px; }

/* ── home hero: today's pack ───────────────────────────────────────────────────────────────── */
.hero2 {
  position: relative; isolation: isolate; overflow: hidden; border-radius: 24px; min-height: 450px; padding: 44px 48px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: 24px; align-items: center; background: #15151A;
}
.hero2-bg { position: absolute; inset: -80px; z-index: -2; background-size: cover; background-position: center; filter: blur(60px) saturate(1.5) brightness(0.6); transform: scale(1.15); animation: fade-in 900ms ease both; }
.hero2::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(11, 11, 13, 0.92) 0%, rgba(11, 11, 13, 0.6) 50%, rgba(11, 11, 13, 0.15) 100%); }
.hero2 h1 { margin: 0; font-size: clamp(42px, 4.3vw, 70px); line-height: 0.96; letter-spacing: -0.05em; font-weight: 800; }
.hero2 p { margin: 16px 0 22px; font-size: 16px; color: rgba(245, 245, 247, 0.74); max-width: 46ch; }
.hero2 p b { color: #fff; font-weight: 650; }
.hero2-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 22px; max-width: 540px; }
.hs { border-radius: 14px; background: rgba(255, 255, 255, 0.07); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: 12px 14px; display: grid; gap: 1px; min-width: 0; }
.hs b { font-size: 28px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; }
.hs span { font-size: 13px; color: rgba(245, 245, 247, 0.72); font-weight: 600; }
.hs small { display: flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(245, 245, 247, 0.5); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn.icon-only { width: 50px; padding: 0; }
.btn.icon-only svg { width: 20px; height: 20px; }
.hero2-stage { position: relative; height: 410px; display: grid; place-items: center; }
.h2-pack { position: relative; z-index: 3; border: 0; background: none; padding: 0; cursor: pointer; animation: pack-float 6s var(--p-ease-in-out) infinite; }
.h2-pack:disabled { cursor: default; }
.h2-pack .pack3 { width: 232px; }
@media (hover: hover) and (pointer: fine) { .h2-pack:hover { animation-play-state: paused; } }
@keyframes pack-float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-12px) rotate(-1deg); } }
.h2c { position: absolute; left: 50%; top: 50%; width: 170px; z-index: 1; }
.h2c-l { transform: translate(-122%, -46%) rotate(-15deg); animation: fan-l 900ms 200ms var(--p-ease-out) both; }
.h2c-r { transform: translate(22%, -46%) rotate(15deg); animation: fan-r 900ms 280ms var(--p-ease-out) both; }
@keyframes fan-l { from { opacity: 0; transform: translate(-50%, -46%) rotate(0deg); } }
@keyframes fan-r { from { opacity: 0; transform: translate(-50%, -46%) rotate(0deg); } }
.h2c .card { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 30px 50px -20px rgba(0, 0, 0, 0.95); }

/* ── the pack: crimped foil, the day's article on the front ─────────────────────────────────── */
.pack3 {
  --rx: 0deg; --ry: 0deg; --fx: 50%; --fy: 30%; --ink: #fff;
  --pkfoil: linear-gradient(150deg, #5B6BFF 0%, #2231E0 28%, #8E9BFF 46%, #1A26B8 64%, #4E5CFF 82%, #1A22A0 100%);
  --seal: linear-gradient(90deg, #7F8CFF, #2A39E8 40%, #B9C1FF 60%, #2A39E8);
  position: relative; width: 250px; aspect-ratio: 0.6; transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 500ms var(--p-ease-out); filter: drop-shadow(0 34px 40px rgba(0, 0, 0, 0.6)); touch-action: none; user-select: none; -webkit-user-select: none;
}
.pack3.t-edition { --ink: #10121C; --pkfoil: linear-gradient(150deg, #FFFFFF 0%, #B7BBCC 22%, #FFFFFF 40%, #979CB3 60%, #F2F3F8 80%, #A8ADC2 100%); --seal: linear-gradient(90deg, #D6D9E6, #9096AE 40%, #FFFFFF 60%, #9096AE); }
.pack3.t-pearl { --ink: #16161C; --pkfoil: linear-gradient(150deg, #FFFFFF, #DCDDE6 30%, #FFFFFF 50%, #C8CAD6 75%, #F1F2F6); --seal: linear-gradient(90deg, #E7E8F0, #B9BBC9 50%, #FFFFFF); }
.pack3.t-onyx { --pkfoil: linear-gradient(150deg, #3A3A46, #101014 30%, #4A4A58 50%, #0C0C10 75%, #2E2E38); --seal: linear-gradient(90deg, #4A4A58, #16161C 50%, #6A6A7A); }
.pack3.t-red { --pkfoil: linear-gradient(150deg, #FF7A5C, #D8301A 30%, #FF9A80 50%, #A4200C 75%, #F0502F); --seal: linear-gradient(90deg, #FF9A80, #C0280F 50%, #FFB39E); }
.pk-part { position: absolute; inset: 0; }
.pk-top { clip-path: inset(0 0 85.5% 0); }
.pk-bottom { clip-path: inset(14.5% 0 0 0); }
.pk-face {
  position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--pkfoil); container-type: inline-size; color: var(--ink);
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 10px 5px repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 10px 5px repeat-x, linear-gradient(#000 0 0) center / 100% calc(100% - 10px) no-repeat;
  mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 10px 5px repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 10px 5px repeat-x, linear-gradient(#000 0 0) center / 100% calc(100% - 10px) no-repeat;
}
.pk-seal { flex: 0 0 8%; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.28) 0 1.5px, rgba(0, 0, 0, 0.16) 1.5px 3.5px), var(--seal); }
.pk-mid { flex: 1; min-height: 0; display: grid; grid-template-rows: auto 1fr auto; gap: 5cqw; padding: 7cqw 8cqw 6cqw; }
.pk-brand { font-stretch: 75%; font-weight: 900; font-style: italic; font-size: 18cqw; line-height: 0.88; letter-spacing: -0.01em; text-align: center; text-transform: uppercase; color: var(--ink); }
.pack3:not(.t-edition):not(.t-pearl) .pk-brand { text-shadow: 0 2px 0 rgba(0, 0, 0, 0.2), 0 8px 20px rgba(0, 0, 0, 0.3); }
.pk-art { position: relative; min-height: 0; border-radius: 3cqw; overflow: hidden; background: #0B0B12; box-shadow: 0 0 0 1.6cqw rgba(255, 255, 255, 0.9), 0 10px 24px rgba(0, 0, 0, 0.35); }
.pk-art img { width: 100%; height: 100%; object-fit: cover; }
.pk-art span { position: absolute; left: 0; right: 0; bottom: 0; padding: 12cqw 5cqw 4cqw; font-stretch: 80%; font-weight: 800; font-size: 6.4cqw; line-height: 1.05; text-transform: uppercase; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, 0.78)); }
.pk-art.plain { background: radial-gradient(90% 80% at 50% 30%, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.18)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
.pk-art.plain i { position: absolute; left: 50%; top: 52%; width: 34%; aspect-ratio: 5 / 7; border-radius: 2.4cqw; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.5); }
.pk-art.plain i:nth-child(1) { background: var(--metal-2); transform: translate(-100%, -50%) rotate(-14deg); }
.pk-art.plain i:nth-child(2) { background: var(--metal-5); transform: translate(-50%, -56%); z-index: 1; }
.pk-art.plain i:nth-child(3) { background: var(--metal-4); transform: translate(0%, -50%) rotate(14deg); }
.pk-set { display: flex; justify-content: space-between; align-items: flex-end; gap: 4cqw; font-size: 5.2cqw; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); opacity: 0.92; }
.pk-set small { display: block; font-size: 1em; font-weight: 650; opacity: 0.7; letter-spacing: 0.04em; }
.pk-foil {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay;
  background: radial-gradient(55% 38% at var(--fx) var(--fy), rgba(255, 255, 255, 0.6), transparent 70%), repeating-linear-gradient(115deg, transparent 0 7px, rgba(255, 255, 255, 0.07) 7px 8px);
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 10px 5px repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 10px 5px repeat-x, linear-gradient(#000 0 0) center / 100% calc(100% - 10px) no-repeat;
  mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 10px 5px repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 10px 5px repeat-x, linear-gradient(#000 0 0) center / 100% calc(100% - 10px) no-repeat;
}
.pk-cutline { position: absolute; left: 5%; right: 5%; top: 14.5%; height: 0; border-top: 2px dashed rgba(255, 255, 255, 0.75); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); pointer-events: none; }
.pack3.t-edition .pk-cutline, .pack3.t-pearl .pk-cutline { border-top-color: rgba(16, 18, 28, 0.6); }
.pk-cutline i { position: absolute; left: 0; top: -3px; height: 4px; width: calc(var(--cut) * 100%); border-radius: 4px; background: #fff; }
.pk-cutline::after { content: ''; position: absolute; top: -10px; left: 0; width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 255, 255, 0.95); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); animation: swipe-hint 1.8s var(--p-ease-in-out) infinite; }
@keyframes swipe-hint { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 75% { opacity: 1; } 100% { transform: translateX(calc(min(300px, 64vw) * 0.8)); opacity: 0; } }
.pack3.tearable { cursor: grab; }
.pack3.torn .pk-top { animation: top-off 700ms var(--p-ease-out) forwards; transform-origin: 85% 100%; }
.pack3.torn .pk-foil { opacity: 0; transition: opacity 200ms; }
.pack3.torn::after { content: ''; position: absolute; left: -12%; right: -12%; top: 11%; height: 7%; z-index: 4; animation: seam 520ms ease-out forwards; }
@keyframes top-off { to { transform: translate(38%, -130%) rotate(26deg); opacity: 0; } }
@keyframes pack-drop { to { transform: translateY(70%) scale(0.92); opacity: 0; } }
@keyframes seam { from { opacity: 1; transform: scaleX(0.3); } to { opacity: 0; transform: scaleX(1.2); } }

/* pack tiles */
.pack-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pk-visual .pack3 { width: auto; height: 86%; aspect-ratio: 0.6; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.55)); transition: transform 420ms var(--p-ease-out); }
.pk-visual.edition { background: radial-gradient(90% 100% at 50% 20%, #5A5E70, #16161C 72%); }
@media (hover: hover) and (pointer: fine) { .pack-tile:hover .pk-visual .pack3 { transform: translateY(-4%) rotate(-3deg); } }
@container home (max-width: 980px) { .pack-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container home (max-width: 700px) { .pack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* best pull tile */
.best-tag { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 6; font-size: 13px; font-weight: 750; padding: 3px 9px; border-radius: 999px; background: var(--signal); color: #0B0D04; white-space: nowrap; }

/* ── missions and streak ────────────────────────────────────────────────────────────────────── */
.missions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mission { border-radius: 16px; background: var(--panel); padding: 14px 14px 10px; display: grid; gap: 10px; text-align: left; }
.mission.ready { background: linear-gradient(160deg, rgba(227, 243, 107, 0.16), rgba(227, 243, 107, 0.03)); }
.mission.claimed { opacity: 0.55; }
.m-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.m-top b { font-size: 14px; font-weight: 650; line-height: 1.3; }
.m-reward { display: inline-flex; align-items: center; gap: 4px; font-weight: 750; font-size: 13px; white-space: nowrap; flex-shrink: 0; }
.m-reward img { width: 18px; height: 18px; border-radius: 50%; }
.m-bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.m-bar i { display: block; height: 100%; border-radius: 999px; background: var(--signal); transform-origin: left; transition: transform 600ms var(--p-ease-out); }
.m-foot { display: flex; justify-content: space-between; align-items: center; min-height: 34px; font-size: 13px; color: var(--text-2); font-weight: 600; }
.streak-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(255, 106, 43, 0.14); color: #FFB08E; font-weight: 700; font-size: 13px; white-space: nowrap; }
.streak-chip svg { width: 15px; height: 15px; fill: currentColor; }
@container home (max-width: 820px) { .missions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── the opening ────────────────────────────────────────────────────────────────────────────── */
.opening2 {
  position: fixed; inset: 0; z-index: 70; display: grid; grid-template-rows: auto 1fr auto; padding: 16px 20px calc(18px + env(safe-area-inset-bottom));
  background: radial-gradient(80% 70% at 50% 45%, #1B1D36 0%, #08080A 76%); animation: fade-in 220ms ease-out both; overflow: hidden; user-select: none; -webkit-user-select: none;
}
.opening2.flash::before { content: ''; position: fixed; inset: 0; z-index: 150; background: #fff; pointer-events: none; animation: flash 650ms ease-out forwards; }
@keyframes flash { from { opacity: 0.85; } to { opacity: 0; } }
.op-top { display: flex; align-items: center; gap: 12px; min-height: 40px; }
.op-top b { font-size: 16px; font-weight: 700; }
.op-count { color: var(--text-2); font-weight: 650; font-size: 14px; }
.op-actions { margin-left: auto; display: flex; gap: 8px; }
.op-stage { position: relative; display: grid; place-items: center; min-height: 0; }
.op-pack { animation: pack-in 600ms var(--p-ease-out) both; }
@keyframes pack-in { from { opacity: 0; transform: translateY(40px) scale(0.94); } }
.op-pack .pack3 { width: min(300px, 64vw, 42vh); }
.op-hint { text-align: center; color: var(--text-2); margin: 0 0 10px; font-size: 14.5px; }
.op-stack { position: relative; width: min(320px, 70vw, 50vh); aspect-ratio: 5 / 7; cursor: pointer; }
.op-card {
  position: absolute; inset: 0;
  transform: translateY(calc(var(--d) * -7px)) rotate(calc(var(--d) * 1.5deg)) scale(calc(1 - var(--d) * 0.015));
  transition: transform 420ms var(--p-ease-out), opacity 260ms ease;
  animation: rise-in 620ms var(--p-ease-out) both; animation-delay: calc(var(--d) * 70ms);
}
@keyframes rise-in { from { transform: translateY(70%) scale(0.9); opacity: 0; } }
.op-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 640ms var(--p-ease-out); }
.op-card.f-front .op-inner { transform: rotateY(180deg); }
.op-card[data-r="5"].f-front .op-inner { transition-duration: 900ms; }
.op-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.op-front { transform: rotateY(180deg); }
.op-front .card { height: 100%; }
.op-back .cback { height: 100%; border-radius: var(--card-radius); transition: box-shadow 300ms ease; }
.op-card.f-charge .op-inner { animation: tremble 90ms linear infinite; }
.op-card.f-charge .op-back .cback { box-shadow: 0 0 0 5px var(--tone), 0 30px 60px -12px rgba(0, 0, 0, 0.95); }
.op-card.f-charge[data-r="5"] .op-back .cback { box-shadow: 0 0 0 6px #fff, 0 30px 60px -12px rgba(0, 0, 0, 0.95); }
.op-card.f-charge[data-r="5"] .op-back .cback::before { animation: foil-turn 900ms linear infinite; }
@keyframes tremble { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-2px, 1px) rotate(-0.7deg); } 50% { transform: translate(2px, -1px) rotate(0.7deg); } 75% { transform: translate(-1px, -2px) rotate(-0.4deg); } 100% { transform: translate(0, 0) rotate(0); } }
.op-card.leaving { transform: translate(-135%, 25%) rotate(-22deg) scale(0.7); opacity: 0; transition-duration: 260ms; }
.op-front .new-tag { bottom: -11px; }
.ed-tag { position: absolute; left: 50%; top: -12px; transform: translateX(-50%); z-index: 5; white-space: nowrap; padding: 4px 11px; border-radius: 999px; background: #F5F5F7; color: #0B0B0D; font-size: 13px; font-weight: 750; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.6); }
.slam {
  position: absolute; left: 50%; bottom: calc(100% + 18px); z-index: 200; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  font-stretch: 75%; font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(40px, 7vw, 68px); line-height: 1.05; letter-spacing: -0.01em; padding: 0 0.18em 0.06em 0.05em;
  color: var(--ink); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
  animation: slam 560ms var(--p-ease-out) both;
}
.slam { --ink: var(--p-r2); }
.slam.r3 { --ink: var(--p-r3); } .slam.r4 { --ink: var(--p-r4); }
.slam.r5 { --ink: #F5F5F7; font-size: clamp(48px, 9vw, 92px); }
/* printed pattern inside the letters, one darker flat tone (same technique as the ink name styles, cosmetics.css) */
.slam::after {
  content: attr(data-text); position: absolute; inset: 0; padding: inherit; text-shadow: none; pointer-events: none;
  color: color-mix(in oklab, var(--ink) 58%, #000); -webkit-mask: var(--pr-rings); mask: var(--pr-rings);
}
@keyframes slam { 0% { transform: translateX(-50%) scale(1.9); opacity: 0; } 55% { transform: translateX(-50%) scale(0.94); opacity: 1; } 100% { transform: translateX(-50%) scale(1); } }
.op-bottom { display: grid; justify-items: center; gap: 8px; min-height: 64px; }
.op-tray { display: flex; justify-content: center; gap: 6px; }
.op-tray i { --metal: var(--metal-0); width: 26px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); transition: background 300ms ease; }
.op-tray i.on { background: var(--metal); }
.op-tray i[data-r="1"] { --metal: var(--metal-1); } .op-tray i[data-r="2"] { --metal: var(--metal-2); } .op-tray i[data-r="3"] { --metal: var(--metal-3); }
.op-tray i[data-r="4"] { --metal: var(--metal-4); } .op-tray i[data-r="5"] { --metal: var(--metal-5); }
.op-done { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; max-width: 1200px; padding: 20px 0; }
.op-slot { position: relative; width: clamp(120px, 15vw, 200px); animation: deal-in 520ms var(--p-ease-out) both; animation-delay: calc(var(--i) * 80ms); }
.op-done.many .op-slot { width: clamp(90px, 9.5vw, 140px); }
@keyframes deal-in { from { opacity: 0; transform: translateY(80px) rotate(-8deg) scale(0.9); } }
.op-summary { display: grid; justify-items: center; gap: 14px; }
.op-summary > p { margin: 0; font-size: 15px; color: var(--text-2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.op-summary > p b { color: var(--text); }
.op-summary .missions { width: min(900px, 92vw); }
.next-pill { height: 50px; padding: 0 20px; border-radius: 999px; background: var(--panel-2); display: inline-flex; align-items: center; font-weight: 650; }
.shake-s { animation: shake-s 380ms ease-out; }
.shake-l { animation: shake-l 650ms ease-out; }
@keyframes shake-s { 20% { transform: translate(-4px, 2px); } 40% { transform: translate(4px, -2px); } 60% { transform: translate(-3px, 1px); } 80% { transform: translate(2px, -1px); } }
@keyframes shake-l { 10% { transform: translate(-9px, 4px) rotate(-0.4deg); } 25% { transform: translate(9px, -5px) rotate(0.4deg); } 40% { transform: translate(-7px, 3px); } 55% { transform: translate(6px, -3px); } 70% { transform: translate(-4px, 2px); } 85% { transform: translate(2px, -1px); } }

@container home (max-width: 940px) {
  .hero2 { grid-template-columns: 1fr; padding: 30px 26px; }
  .hero2-stage { order: -1; height: 330px; }
  .h2-pack .pack3 { width: 190px; }
  .h2c { width: 140px; }
}
@media (max-width: 860px) {
  .hero2 { padding: 22px 18px 24px; border-radius: 20px; }
  .hero2-stage { height: 290px; }
  .h2-pack .pack3 { width: 168px; }
  .h2c { width: 118px; }
  .hs { padding: 10px; } .hs b { font-size: 21px; } .hs small { display: none; }
  .missions, .op-summary .missions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .op-summary .row .btn.big { height: 46px; padding: 0 18px; font-size: 14px; }
  .ticker2 { height: 50px; } .tk { height: 36px; } .tk img, .tk-ph { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) { .tk-run, .h2-pack, .pk-cutline::after { animation: none !important; } }

/* ── the tell: the light that leaves the pack climbs to the rarest card inside ─────────────── */
.op-pack { position: relative; display: grid; place-items: center; }
.op-pack .pack3 { position: relative; z-index: 1; }
.op-glow {
  position: absolute; left: 50%; top: 18%; width: 190%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; z-index: 0; opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--gc, #fff) 80%, #fff), color-mix(in srgb, var(--gc, #fff) 45%, transparent) 42%, transparent 72%);
  transition: opacity 260ms ease, transform 420ms var(--p-ease-out);
}
.op-pack.glowing .op-glow { opacity: 1; transform: translate(-50%, -50%) scale(calc(0.8 + var(--q) * 0.07)); animation: glow-pulse 320ms ease-in-out infinite alternate; }
@keyframes glow-pulse { from { filter: brightness(1); } to { filter: brightness(1.4); } }
.op-beam {
  position: absolute; left: 50%; bottom: 84%; width: 72%; height: 80vh; transform: translateX(-50%); pointer-events: none; z-index: 2; opacity: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--gc, #fff) 70%, #fff), color-mix(in srgb, var(--gc, #fff) 35%, transparent) 40%, transparent 85%);
  clip-path: polygon(32% 100%, 68% 100%, 100% 0, 0 0); filter: blur(12px); mix-blend-mode: screen; transition: opacity 250ms ease;
}
.op-pack.glowing .op-beam { opacity: calc(0.3 + var(--q) * 0.1); animation: beam 180ms steps(2) infinite; }
@keyframes beam { 50% { opacity: calc(0.2 + var(--q) * 0.08); } }
.op-pack.glowing .pack3 { animation: quake 110ms linear infinite; }
@keyframes quake {
  0% { transform: translate(0, 0); }
  25% { transform: translate(calc(var(--q) * -1px), calc(var(--q) * 0.6px)) rotate(calc(var(--q) * -0.25deg)); }
  50% { transform: translate(calc(var(--q) * 1px), calc(var(--q) * -0.5px)) rotate(calc(var(--q) * 0.25deg)); }
  75% { transform: translate(calc(var(--q) * -0.6px), calc(var(--q) * -0.8px)); }
  100% { transform: translate(0, 0); }
}
.op-pack.t5 .op-glow { background: radial-gradient(closest-side, #fff, rgba(255, 255, 255, 0.75) 28%, rgba(150, 165, 255, 0.5) 48%, rgba(255, 130, 100, 0.3) 60%, transparent 74%); }
.op-pack.t5 .op-beam { background: linear-gradient(to top, #fff, rgba(200, 206, 255, 0.65) 35%, rgba(255, 170, 150, 0.35) 60%, transparent 90%); }
@media (prefers-reduced-motion: reduce) { .op-pack.glowing .pack3, .op-pack.glowing .op-beam, .op-pack.glowing .op-glow { animation: none !important; } }

/* ══ v6: themed packs, texture, card details ═════════════════════════════════════════════════ */

/* a faint grain and a cold light from the top, so the page is a surface and not a void */
body {
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(58, 76, 255, 0.10), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .035 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    var(--bg);
  background-attachment: fixed;
}

/* themed pack foil: the set's two colors as brushed metal */
.pack3.t-set {
  --ink: #fff;
  --pkfoil: linear-gradient(150deg, color-mix(in oklab, var(--ta) 70%, #fff) 0%, var(--ta) 20%, color-mix(in oklab, var(--ta) 55%, var(--tb)) 42%, var(--tb) 68%, color-mix(in oklab, var(--ta) 65%, var(--tb)) 100%);
  --seal: linear-gradient(90deg, var(--ta), color-mix(in oklab, var(--ta) 40%, var(--tb)) 50%, var(--ta));
}
.pack3.t-set .pk-brand { font-size: clamp(9cqw, calc(150cqw / var(--len, 8)), 17cqw); line-height: 0.9; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25), 0 8px 20px rgba(0, 0, 0, 0.35); }
.pk-brand small { display: block; font-size: 5.4cqw; font-style: normal; font-stretch: 100%; font-weight: 750; letter-spacing: 0.14em; opacity: 0.85; margin-bottom: 1.6cqw; text-shadow: none; }
.pk-art.collage { position: relative; display: block; background: radial-gradient(90% 80% at 50% 30%, color-mix(in oklab, var(--ta) 45%, #000), color-mix(in oklab, var(--tb) 80%, #000)); }
.pk-art.collage img { position: absolute; width: 54%; aspect-ratio: 3 / 4; height: auto; object-fit: cover; border-radius: 2cqw; border: 1.3cqw solid #fff; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5); }
.pk-art.collage img:nth-child(1) { left: 3%; top: 10%; transform: rotate(-10deg); }
.pk-art.collage img:nth-child(2) { right: 3%; top: 8%; transform: rotate(9deg); }
.pk-art.collage img:nth-child(3) { left: 23%; top: 20%; transform: rotate(-1deg); z-index: 1; }
.pk-art.collage em { position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); z-index: 2; white-space: nowrap; font-style: normal; font-size: 5.2cqw; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 1.4cqw 3.6cqw; border-radius: 99px; background: var(--ta); color: #0B0B0D; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45); }
.pack3[data-set="dark"] .pk-art.collage img { filter: grayscale(1) contrast(1.2); }

.coin-chip img { width: 18px; height: 18px; border-radius: 50%; }
.coin-chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 7px; border-radius: 99px; background: var(--panel); font-weight: 750; font-size: 14px; }

/* card details: a serial like a real collector card, and grain on the plate */
.card .serial { position: absolute; left: 4cqw; bottom: 3cqw; z-index: 2; font-size: clamp(7px, 4.6cqw, 10px); font-weight: 700; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.72); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); font-variant-numeric: proportional-nums; }
.card .plate { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"), linear-gradient(180deg, #16161D, #0A0A0E); }
.card > .art { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }

/* ══ v7: social layer ════════════════════════════════════════════════════════════════════════ */
.btn.xbtn { color: #fff; background-color: #0F0F12; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
@media (hover: hover) and (pointer: fine) { .btn.xbtn:hover:not(:disabled) { background-color: #1C1C22; } }
.btn.disabled { opacity: 0.4; pointer-events: none; }
.xbadge { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: 99px; background: #0F0F12; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); color: var(--text); font-weight: 650; font-size: 13.5px; text-decoration: none; }
.xbadge svg { width: 14px; height: 14px; fill: currentColor; }
.xbadge.small { height: 26px; padding: 0 10px; font-size: 13px; }
.xav { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: none; background: var(--panel-3); box-shadow: 0 0 0 2px var(--panel-3); }

.xsteps { display: grid; gap: 12px; }
.xstep { display: grid; gap: 10px; padding: 16px; border-radius: 16px; background: var(--panel-2); }
.xstep b { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 700; }
.xstep b i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--text); color: #0B0B0D; font-style: normal; font-size: 13px; font-weight: 800; }
.xcode { font-stretch: 80%; font-weight: 850; font-size: 34px; letter-spacing: 0.06em; text-align: center; padding: 10px; border-radius: 12px; background: #0B0B0D; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }

.social-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.social-cta { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; border: 0; background: var(--panel); color: var(--text); text-align: left; text-decoration: none; cursor: pointer; transition: transform 160ms var(--p-ease-out), background-color 160ms ease; }
.social-cta > svg { width: 24px; height: 24px; fill: currentColor; flex: none; }
.social-cta span { flex: 1; min-width: 0; display: grid; gap: 2px; }
.social-cta b { font-size: 14px; font-weight: 700; }
.social-cta small { font-size: 13px; color: var(--text-2); }
.social-cta em { font-style: normal; font-weight: 800; font-size: 13px; padding: 4px 9px; border-radius: 99px; background: rgba(227, 243, 107, 0.14); color: var(--signal); }
@media (hover: hover) and (pointer: fine) { .social-cta:hover { background-color: var(--panel-2); transform: translateY(-2px); } }
.social-cta:active { transform: scale(0.98); }
@container home (max-width: 900px) { .social-row { grid-template-columns: 1fr; } }

/* Icon sets */
.set-list { display: grid; gap: 10px; }
.set-row { border-radius: 18px; background: var(--panel); overflow: hidden; box-shadow: inset 3px 0 0 var(--ta); }
.set-head { width: 100%; display: grid; grid-template-columns: 210px minmax(0, 1fr) 200px auto; gap: 18px; align-items: center; padding: 14px 18px 14px 20px; border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; }
.set-strip { display: flex; }
.set-strip img { width: 44px; height: 58px; object-fit: cover; border-radius: 7px; margin-right: -12px; box-shadow: 0 0 0 2px var(--panel), 0 6px 12px rgba(0, 0, 0, 0.5); filter: grayscale(1) brightness(0.55); transition: filter 300ms ease; }
.set-strip img.got { filter: none; }
.set-meta { display: grid; gap: 2px; min-width: 0; }
.set-meta b { font-size: 18px; font-weight: 760; letter-spacing: -0.02em; }
.set-meta span { font-size: 13px; color: color-mix(in oklab, var(--ta) 75%, #fff); font-weight: 600; }
.set-score { display: grid; gap: 6px; }
.set-score b { font-stretch: 80%; font-weight: 850; font-size: 26px; line-height: 1; }
.set-score small { font-size: 0.6em; color: var(--text-3); }
.set-reward { display: flex; justify-content: flex-end; }
.reward-chip, .done-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 99px; background: var(--panel-2); font-weight: 750; font-size: 13.5px; }
.reward-chip img { width: 18px; height: 18px; border-radius: 50%; }
.done-chip { color: var(--good); } .done-chip svg { width: 16px; height: 16px; fill: currentColor; }
.set-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 14px; padding: 4px 20px 20px; animation: fade-in 300ms ease both; }
.set-card { position: relative; }
.set-card:not(.got) .card { filter: grayscale(1) brightness(0.45); }
@media (max-width: 860px) {
  .set-head { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px; }
  .set-strip { grid-column: 1 / -1; }
  .set-score { grid-column: 1; }
}

/* Higher or Lower */
.hl { display: grid; place-items: center; min-height: 60vh; }
.hl-intro { display: grid; justify-items: center; gap: 18px; text-align: center; padding: 30px 0; }
.hl-stats { display: flex; gap: 12px; }
.hl-stats div { display: grid; gap: 2px; padding: 16px 22px; border-radius: 16px; background: var(--panel); min-width: 150px; }
.hl-stats b { font-stretch: 80%; font-weight: 850; font-size: 38px; line-height: 1; }
.hl-stats span { font-size: 13px; color: var(--text-2); }
.hl-final { margin: 0; font-size: 22px; font-weight: 650; }
.hl-final b { font-stretch: 80%; font-weight: 900; font-size: 1.6em; }
.hl-board { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 24px; align-items: center; width: min(820px, 100%); padding-top: 40px; }
.hl-score { position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: flex; align-items: baseline; gap: 8px; }
.hl-score span { font-size: 13px; color: var(--text-2); font-weight: 600; }
.hl-score b { font-stretch: 80%; font-weight: 900; font-size: 30px; }
.hl-side { display: grid; justify-items: center; gap: 14px; }
.hl-side .card { width: min(260px, 38vw); }
.hl-num { display: grid; justify-items: center; gap: 2px; min-height: 96px; }
.hl-num b { font-stretch: 80%; font-weight: 900; font-size: 40px; line-height: 1; }
.hl-num span { font-size: 13px; color: var(--text-2); }
.hl-num.up b { color: var(--good); } .hl-num.down b { color: #FF7B6E; }
.hl-pick { display: grid; gap: 8px; justify-items: stretch; width: min(260px, 38vw); min-height: 96px; }
.hl-pick span { text-align: center; font-size: 13.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-vs { font-stretch: 75%; font-weight: 900; font-style: italic; font-size: 44px; color: var(--text-3); }
@media (max-width: 640px) { .hl-board { gap: 10px; } .hl-vs { font-size: 28px; } .hl-num b { font-size: 28px; } }

/* ══ v8: chrome parallels ═══════════════════════════════════════════════════════════════════ */
/* Cards print like modern chrome sports cards (Topps Chrome, Panini Prizm, Sorare): the picture runs
   edge to edge, the frame is the rarity's parallel (graphite, green lines, blue waves, purple cracked
   ice, orange sunburst, prismatic rings) and the name sits in condensed italic capitals. */
:root {
  --prism: conic-gradient(from var(--foil, 210deg) at 50% 40%, #FFB3C1, #FFE29A, #FFFBE0, #A8F0D0, #9AD8FF, #C4B0FF, #FFB0E6, #FFB3C1);
  --glitter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='1' seed='4'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 9 -6.1'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  --display: 900 italic 1em/0.9 var(--p-font);
}
.card {
  --bw: 3.4cqw; --frame: var(--metal-0);
  display: block; padding: 0; border-radius: 5.4% / 3.86%;
  background: var(--frame); background-blend-mode: overlay, normal;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34), inset 0 1.5px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.45), 0 18px 30px -20px rgba(0, 0, 0, 1);
}
.card[data-r="1"] { --frame: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0 1px, rgba(255, 255, 255, 0) 1px 4px), var(--metal-1); }
.card[data-r="2"] { --frame: url("/assets/v8/waves.svg") 0 0 / 18px 9px, var(--metal-2); }
.card[data-r="3"] { --frame: url("/assets/v8/ice.svg") 0 0 / 110px 110px, var(--metal-3); --pmask: url("/assets/v8/ice.svg") 0 0 / 110px 110px; }
.card[data-r="4"] { --frame: repeating-conic-gradient(from 0deg at 50% -12%, rgba(255, 255, 255, 0.55) 0deg 1.2deg, rgba(255, 255, 255, 0) 1.2deg 3.6deg), var(--metal-4); --pmask: repeating-conic-gradient(from 0deg at 50% -12%, #000 0deg 1.2deg, rgba(0, 0, 0, 0.12) 1.2deg 3.6deg); }
.card[data-r="5"] { --frame: repeating-radial-gradient(circle at 50% 135%, rgba(255, 255, 255, 0.7) 0 1.2px, rgba(255, 255, 255, 0) 1.2px 5px), var(--prism); --pmask: repeating-linear-gradient(118deg, #000 0 1px, rgba(0, 0, 0, 0.35) 1px 3px); }

.card > .art { position: absolute; inset: var(--bw); flex: none; border-radius: 2.6cqw; box-shadow: none; }
.card > .art > img { object-position: 50% 16%; }
.card > .art::after { border-radius: inherit; background: linear-gradient(180deg, rgba(0, 0, 0, 0.36) 0%, rgba(0, 0, 0, 0) 22%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); }
.card[data-art="logo"] > .art { background: radial-gradient(90% 60% at 50% 30%, color-mix(in oklab, var(--tone) 34%, #111119), #08080C 78%); }
.card[data-art="logo"] > .art > img { object-fit: contain; object-position: 50% 50%; padding: 12cqw 16cqw 60cqw; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5)); }
.card > .art.none { padding-bottom: 46cqw; }
.card > .art.none .initial { font: var(--display); font-stretch: 75%; font-size: 62cqw; opacity: 0.6; }

.card .plate {
  position: absolute; left: var(--bw); right: var(--bw); bottom: var(--bw); z-index: 2;
  flex: none; margin: 0; min-height: 0; padding: 20cqw 5.6cqw 5.2cqw;
  border-radius: 0 0 2.6cqw 2.6cqw; box-shadow: none;
  background: linear-gradient(180deg, rgba(8, 8, 12, 0) 0%, rgba(8, 8, 12, 0.74) 32%, rgba(8, 8, 12, 0.96) 64%);
  display: flex; flex-direction: column;
}
.card .plate h3 { font-stretch: 75%; font-weight: 900; font-style: italic; font-size: clamp(12.5px, 11.6cqw, 30px); line-height: 0.9; letter-spacing: 0; padding: 0.04em 0.1em 0.04em 0; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55); }
.card .plate p { margin-top: 1.4cqw; font-size: clamp(9px, 5.9cqw, 13px); color: rgba(245, 245, 247, 0.7); }
.card .stats { margin-top: 3.4cqw; padding-top: 2.8cqw; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.card .plate .stats small { color: rgba(245, 245, 247, 0.46); margin-bottom: 1.2cqw; }
.card .plate .stats b { font-stretch: 75%; font-weight: 850; }
.card .foot { display: none; }
@container (min-width: 230px) {
  .card .foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 2.8cqw; font-size: 3.4cqw; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245, 245, 247, 0.42); font-variant-numeric: proportional-nums; }
}
.card .code { left: calc(var(--bw) + 2.2cqw); top: calc(var(--bw) + 2.2cqw); z-index: 3; background: var(--frame); background-blend-mode: overlay, normal; font-style: italic; font-stretch: 75%; font-weight: 900; }
.card .reads { right: calc(var(--bw) + 2.2cqw); top: calc(var(--bw) + 2.2cqw); z-index: 3; }
.card .fav { z-index: 3; bottom: auto; top: calc(var(--bw) + 17cqw); right: calc(var(--bw) + 2.2cqw); }
.card.shiny::after { top: calc(var(--bw) + 2.2cqw); z-index: 3; }

/* the foil runs across the whole card in the parallel's own pattern, and follows the pointer */
.card .holo {
  inset: 0; z-index: 1; opacity: 0.16; mix-blend-mode: color-dodge; filter: none; background-blend-mode: normal;
  background-image: linear-gradient(115deg, #FF6B8A 0%, #FFD36B 16%, #7BFFB5 33%, #6BD5FF 50%, #A98BFF 66%, #FF7BD8 83%, #FF6B8A 100%);
  background-size: 300% 300%; background-position: var(--gx) var(--gy);
  -webkit-mask: var(--pmask, linear-gradient(#000 0 0)); mask: var(--pmask, linear-gradient(#000 0 0));
}
.card[data-r="5"] .holo { opacity: 0.22; }
@media (hover: hover) and (pointer: fine) { button.card:hover .holo, .card.tilt:hover .holo { opacity: 0.36; } }
.card .glare { z-index: 4; }

/* ── packs: printed foil ───────────────────────────────────────────────────────────────────── */
/* The daily edition is gold and prints the day's Icon; the free packs print a wall of Icons in their
   own foil color; a fine glitter catches the light on every pack. */
.pk-face { background: var(--glitter), var(--pkfoil); background-blend-mode: overlay, normal; }
.pack3.t-edition { --ink: #22180A; --pkfoil: linear-gradient(150deg, #FFF3C8 0%, #D5A240 20%, #FFF8E0 38%, #B8852B 58%, #FFE6A0 78%, #C69535 100%); --seal: linear-gradient(90deg, #F2D388, #B8852B 40%, #FFF6D8 60%, #B8852B); }
.pack3.t-pearl { --pkfoil: linear-gradient(150deg, #FFFFFF, #E4DDF2 22%, #FFFFFF 42%, #D6E6F0 62%, #F7E8EE 82%, #FFFFFF); }
.pack3.t-onyx { --pkfoil: linear-gradient(150deg, #34343F 0%, #0E0E12 26%, #474756 46%, #0A0A0D 70%, #2A2A33 100%); }
.pk-art.printed { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28); background: transparent; }
.pk-art.printed img { mix-blend-mode: luminosity; filter: contrast(1.15); }
.pack3.t-edition .pk-art.printed img { mix-blend-mode: multiply; filter: contrast(1.08) saturate(1.05); }
.pk-art.printed span { font-style: italic; font-stretch: 75%; font-weight: 900; font-size: 9.6cqw; line-height: 0.92; padding: 16cqw 5cqw 4.4cqw; background: linear-gradient(transparent, rgba(20, 12, 2, 0.82)); }
.pk-art.mosaic { display: block; background: transparent; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22); }
.pk-art.mosaic > div { position: absolute; left: 50%; top: 50%; width: 150%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4cqw; transform: translate(-50%, -50%) rotate(-12deg); mix-blend-mode: luminosity; }
.pk-art.mosaic img { width: 100%; aspect-ratio: 3 / 4; height: auto; border-radius: 1.6cqw; filter: grayscale(1) contrast(1.25) brightness(1.08); }
.pack3.t-pearl .pk-art.mosaic > div { mix-blend-mode: multiply; }
.pk-art.mosaic em { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); z-index: 1; white-space: nowrap; font-style: italic; font-stretch: 75%; font-weight: 900; font-size: 6.4cqw; text-transform: uppercase; padding: 1.6cqw 4cqw; border-radius: 99px; background: rgba(8, 8, 12, 0.82); color: #fff; }

/* ── display type: condensed capitals, the voice of a game ─────────────────────────────────── */
.head h1, .wall h1 { font-stretch: 75%; font-weight: 900; text-transform: uppercase; font-size: 40px; line-height: 0.95; letter-spacing: 0; }
.row-head h2 { font-stretch: 75%; font-weight: 900; text-transform: uppercase; font-size: 28px; line-height: 1; letter-spacing: 0.004em; }
.hero2 h1 { font-stretch: 75%; font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(54px, 5.7vw, 94px); line-height: 0.86; letter-spacing: -0.005em; padding-right: 0.08em; }

/* ── home hero: a stage, a wall of articles, a game HUD ────────────────────────────────────── */
.hero2-words {
  position: absolute; inset: -12% -8%; z-index: -1; display: grid; align-content: center; transform: rotate(-7deg); pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 85%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 85%, transparent 100%);
}
.hw-row { display: flex; width: max-content; animation: words var(--dur, 120s) linear infinite; }
.hw-row:nth-child(even) { animation-direction: reverse; }
.hw-row span { display: flex; gap: 0.42em; padding-right: 0.42em; font-stretch: 75%; font-weight: 900; font-style: italic; text-transform: uppercase; font-size: clamp(64px, 7vw, 112px); line-height: 1.02; white-space: nowrap; }
.hw-row b { font-weight: inherit; color: rgba(255, 255, 255, 0.05); }
.hw-row b:nth-child(even) { color: transparent; -webkit-text-stroke: 1.2px rgba(255, 255, 255, 0.1); }
@keyframes words { to { transform: translateX(-50%); } }
.hero2-stage::before {
  content: ''; position: absolute; left: 50%; top: -24%; width: 130%; height: 128%; transform: translateX(-50%); pointer-events: none; z-index: 0;
  background: conic-gradient(from 180deg at 50% 0%, transparent 158deg, rgba(255, 244, 214, 0.08) 170deg, rgba(255, 244, 214, 0.13) 180deg, rgba(255, 244, 214, 0.08) 190deg, transparent 202deg);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent);
}
.hero2-stage::after { content: ''; position: absolute; left: 50%; bottom: 3%; width: 58%; height: 8%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.7), transparent); z-index: 0; }
@container home (min-width: 941px) { .h2-pack .pack3 { width: 248px; } .hero2 { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); } }
.hud { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.hud-stock, .hud-chip { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.07); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.hud-stock { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 5px; align-items: center; padding: 10px 16px; }
.hud-stock .pips { grid-row: 1; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(10, 14px); gap: 4px; }
.hud-stock .pips i { height: 7px; border-radius: 2px; background: rgba(255, 255, 255, 0.14); transform: skewX(-18deg); }
.hud-stock .pips i.on { background: linear-gradient(180deg, #FFFFFF, #D9DCE8); }
.hud-stock > span { font-size: 13.5px; color: rgba(245, 245, 247, 0.75); font-weight: 600; white-space: nowrap; }
.hud-stock > span b { color: #fff; font-stretch: 80%; font-weight: 850; font-size: 17px; margin-right: 2px; }
.hud-stock > small { font-size: 13px; color: rgba(245, 245, 247, 0.5); justify-self: end; white-space: nowrap; }
.hud-chip { font-size: 13.5px; color: rgba(245, 245, 247, 0.72); font-weight: 600; white-space: nowrap; }
.hud-chip b { color: #fff; font-stretch: 80%; font-weight: 850; font-size: 17px; }
.hud-chip svg { width: 18px; height: 18px; fill: #FFB35C; }
.hud-chip .live-dot { margin-right: 2px; }
@media (prefers-reduced-motion: reduce) { .hw-row { animation: none; } }
@media (max-width: 860px) {
  .hero2 h1 { font-size: clamp(44px, 12.5vw, 64px); }
  .hud { gap: 6px; margin-bottom: 18px; }
  .hud-stock, .hud-chip { min-height: 42px; padding: 6px 12px; font-size: 13px; }
  .hud-stock .pips { grid-template-columns: repeat(10, 11px); gap: 3px; }
  .hud-chip b, .hud-stock > span b { font-size: 15px; }
  .head h1, .wall h1 { font-size: 32px; }
  .row-head h2 { font-size: 24px; }
}

/* card backs: a rosette printed like the reverse of a banknote, the wordmark across it */
.cback { border-radius: 5.4% / 3.86%; }
.op-back .cback, .deal .back .cback { border-radius: 5.4% / 3.86%; }
.cback::before {
  inset: 3.4cqw; border-radius: 2.6cqw;
  box-shadow: inset 0 0 0 3.2cqw rgba(0, 0, 0, 0.14), inset 0 0 0 3.6cqw rgba(255, 255, 255, 0.28);
}
.cback::after, .cback.pearl::after {
  inset: auto; left: 50%; top: 50%; width: 80cqw; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; box-shadow: none;
}
.cback span { font-stretch: 75%; font-weight: 900; font-style: italic; text-transform: uppercase; font-size: 17cqw; letter-spacing: 0; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.18), 0 8px 24px rgba(0, 0, 0, 0.35); }
.cback.pearl span { text-shadow: none; }

/* the logo: generated card mark and wordmark (assets-src/logo), white on transparent */
.wordmark { display: inline-flex; align-items: center; }
.wordmark img { display: block; height: 30px; width: auto; }
.onboarding .wordmark img { height: 34px; margin: 0 auto 6px; }
@media (max-width: 860px) { .wordmark img { height: 26px; } }

/* ══ v9: shared system (spec 7.1, lead) ═══════════════════════════════════════════════════════ */

/* press states: rows and tiles give under the finger, 100ms down and 160ms back (.press for any tile) */
a.item, button.item, .press { transition: transform 160ms var(--p-ease-out); }
a.item:active, button.item:active, .press:active { transform: scale(0.985); transition-duration: 100ms; }

/* the browser's `small` is 83% of its parent: never under the 13px floor (0.1) */
small { font-size: max(13px, 0.8333em); }

/* text for screen readers only */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* skeletons: the final box sizes, shown only after 150ms so a fast load never flashes */
.sk {
  display: block; border-radius: var(--r-row); background: linear-gradient(100deg, var(--panel-2) 30%, var(--panel-3) 50%, var(--panel-2) 70%);
  background-size: 300% 100%; animation: sk-show 200ms ease-out 150ms both, shimmer 1.4s linear infinite;
}
@keyframes sk-show { from { opacity: 0; } }
.sk-line { height: 14px; border-radius: var(--r-tag); }
.sk-line + .sk-line { margin-top: 8px; }
.sk-row { height: 58px; border-radius: 14px; }
.sk-row + .sk-row { margin-top: 8px; }
.sk-card { position: relative; aspect-ratio: 5 / 7; border-radius: var(--card-radius); overflow: hidden; }
.sk-card::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 80%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0.06;
  background: repeating-conic-gradient(from 0deg, #fff 0deg 1.4deg, transparent 1.4deg 4.5deg);
  -webkit-mask: radial-gradient(closest-side, transparent 50%, #000 52% 95%, transparent 97%); mask: radial-gradient(closest-side, transparent 50%, #000 52% 95%, transparent 97%);
}

/* <Odometer>: each digit is a clipped cell (as wide as a 0) over a strip of 0 to 9 three times. A column rests on the
   middle band (--d = 10 + digit); a roll past 9 or past 0 runs into the next band, then snaps back to the middle, so
   every digit turns the way the number goes. */
.odo { display: inline-flex; white-space: nowrap; font-variant-numeric: proportional-nums; line-height: 1.1; }
.odo-row { display: inline-flex; }
.odo-d { position: relative; display: inline-block; clip-path: inset(0 -0.15em); }
.odo-ph { visibility: hidden; }
.odo-strip {
  position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; text-align: center;
  transform: translateY(calc(var(--d, 10) * -100% / 30));
  transition: transform 600ms var(--p-ease-out); transition-delay: calc(var(--i, 0) * 25ms);
}
.odo-strip.snap { transition: none; }
.odo-strip > span { display: block; }
@media (prefers-reduced-motion: reduce) { .odo-strip { transition: none; } }

/* <Price>: the coin and the number */
.price { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-variant-numeric: proportional-nums; white-space: nowrap; }
.price img { width: 18px; height: 18px; flex: none; border-radius: 50%; object-fit: cover; }
.price b { font-weight: 800; font-variant-numeric: proportional-nums; }
.price s { color: var(--text-3); font-weight: 600; }

/* <HoldButton>: a white pill; the fill (a clipped copy in the accent) runs over 600ms while held, snaps back in 200ms */
.btn.hold { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.hold-label { display: inline-flex; align-items: center; gap: 10px; }
.hold-label .price { gap: 5px; }
.hold-fill {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: inherit;
  background: var(--hold-fill, var(--accent)); color: #fff; pointer-events: none;
  clip-path: inset(0 100% 0 0); transition: clip-path 200ms var(--p-ease-out);
}
.hold[data-state="pressing"] .hold-fill { clip-path: inset(0 0 0 0); transition: clip-path 600ms linear; }
.hold[data-state="done"] .hold-fill { clip-path: inset(0 0 0 0); transition: none; }
.hold[data-state="confirm"] { background-color: #FFFFFF; box-shadow: inset 0 0 0 2px var(--accent); }

/* <Countdown>: neutral always, three boxes when boxed */
/* the gap is for the boxes only: in the plain timer every digit and colon is its own item, and a gap spreads them apart */
.countdown { display: inline-flex; align-items: center; gap: 0; font-weight: 800; font-variant-numeric: proportional-nums; color: var(--text); }
.countdown.boxed { gap: 6px; }
/* a fixed box width, so the row never moves as the digits tick */
.countdown.boxed b {
  width: 1.75em; min-width: 0; height: 40px; padding: 0; border-radius: 8px; background: var(--panel-2);
  display: grid; place-items: center; font-size: 22px; font-weight: 800; line-height: 1;
}
.countdown.boxed .cd-sep { font-style: normal; font-size: 20px; font-weight: 800; color: var(--text-2); margin: 0 -2px; line-height: 1; }
.sh-reset .countdown.boxed .cd-sep { font-size: 17px; margin: 0 -1px; }
/* <Tn>: a digit in its own 0-wide cell, for timers that tick inside a line of text */
.tn { display: inline-block; width: 1ch; text-align: center; font-style: normal; }

/* <OddsSheet> */
.odds-sub { margin: 0; color: var(--text-2); font-size: 14px; max-width: 46ch; }
.odds { display: grid; gap: 12px; margin: 18px 0 14px; }
.odds-sk { height: 22px; }
.odds-row { display: grid; grid-template-columns: 34px minmax(88px, auto) minmax(0, 1fr) 76px; align-items: center; gap: 12px; }
.odds-name { font-size: 14px; font-weight: 600; }
.odds-bar { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.odds-bar i { display: block; height: 100%; border-radius: inherit; transform-origin: left; animation: grow 600ms var(--p-ease-out) both; }
.odds-bar i[data-r="0"] { background: var(--metal-0); } .odds-bar i[data-r="1"] { background: var(--metal-1); }
.odds-bar i[data-r="2"] { background: var(--metal-2); } .odds-bar i[data-r="3"] { background: var(--metal-3); }
.odds-bar i[data-r="4"] { background: var(--metal-4); } .odds-bar i[data-r="5"] { background: linear-gradient(90deg, #3A4CFF, #9AA5FF 30%, #FFFFFF 50%, #FFC2B3 70%, #FF4A2B); }
.odds-row > b { text-align: right; font-weight: 800; font-size: 15px; }
.odds-foot { margin: 6px 0 0; color: var(--text-2); font-size: 14px; }
@media (max-width: 520px) { .odds-row { grid-template-columns: 30px minmax(0, 1fr) 64px; } .odds-bar { grid-column: 1 / -1; grid-row: 2; } }

/* ══ v9: shell (spec 7.4, WP7) ═══════════════════════════════════════════════════════════════ */

/* the lime dot: today's gift is waiting in the shop */
.dot-new { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px var(--panel); }
.nav a .dot-new { margin-left: auto; }
.nav a .dot-new + .badge { margin-left: 8px; }

/* top bar: the full lockup, the mark alone on small phones */
.wordmark .wm-mark { display: none; }

/* the ponnies pill: the coin and a rolling number (opens the shop), and a round "+" in the commerce color */
.stat-pill.ponnies-pill { gap: 8px; padding: 0 5px 0 10px; }
.pp-main { display: inline-flex; align-items: center; gap: 7px; height: 100%; color: inherit; text-decoration: none; border-radius: 999px; }
.pp-plus {
  position: relative; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--commerce); color: #fff; transition: transform 160ms var(--p-ease-out), background-color 160ms ease;
}
.pp-plus::before { content: ''; position: absolute; inset: -9px -6px; }
.pp-plus svg { width: 14px; height: 14px; fill: currentColor; }
.pp-plus:active { transform: scale(0.9); transition-duration: 100ms; }
@media (hover: hover) and (pointer: fine) { .pp-plus:hover { background: #FF6546; } .pp-main:hover { color: #fff; } }

/* the avatar button: the player's picture in its frame, 32px */
.pop-anchor { position: relative; display: inline-flex; }
.avatar-btn {
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; display: grid; place-items: center; flex: none;
  transition: transform 160ms var(--p-ease-out);
}
.avatar-btn:active { transform: scale(0.94); transition-duration: 100ms; }
.topbar .avatar-btn .who-av { --av: 32px; --rw: 4px; }

/* popovers from the top bar: they grow from their trigger's corner (160ms) */
.pop {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 50; transform-origin: top right;
  background: var(--overlay); border-radius: 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), var(--shadow-pop);
  transition: opacity 160ms var(--p-ease-out), transform 160ms var(--p-ease-out);
}
@starting-style { .pop { opacity: 0; transform: translateY(-4px) scale(0.97); } }

.menu-pop { width: 272px; padding: 8px; display: grid; gap: 2px; }
.menu-who { padding: 8px 8px 12px; margin-bottom: 4px; box-shadow: inset 0 -1px 0 var(--border); }
.menu-pop [role="menuitem"] {
  display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px; border: 0; border-radius: 12px; background: none; width: 100%;
  color: var(--text-2); font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; text-align: left; transition: background-color 140ms ease, color 140ms ease;
}
.menu-pop [role="menuitem"] svg { width: 19px; height: 19px; fill: currentColor; flex: none; }
.menu-pop [role="menuitem"]:is(:hover, :focus-visible) { background: rgba(255, 255, 255, 0.06); color: var(--text); }
.menu-pop [role="menuitem"] .dot-new { margin-left: auto; box-shadow: none; }
.menu-pop .menu-out { margin-top: 4px; box-shadow: inset 0 1px 0 var(--border); border-radius: 0 0 12px 12px; }

.notif-pop { width: min(400px, calc(100vw - 24px)); max-height: min(72dvh, 600px); overflow: auto; overscroll-behavior: contain; padding: 18px 8px 8px; scrollbar-width: thin; }
.notif-pop h2 { margin: 0 10px 6px; font-size: 18px; font-weight: 750; letter-spacing: -0.02em; }
.notif-pop .sk-row { margin: 8px 6px 0; }
.notif-empty { margin: 8px 10px 12px; font-size: 14px; color: var(--text-2); }
.notif-group h3 { margin: 12px 10px 4px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.notif {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px;
  color: var(--text-2); text-decoration: none; transition: background-color 140ms ease;
}
@media (hover: hover) and (pointer: fine) { .notif:hover { background: rgba(255, 255, 255, 0.05); } }
.notif-ico { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-3); color: var(--text-2); }
.notif-ico svg { width: 18px; height: 18px; fill: currentColor; }
.notif-ico[data-tone="money"] { background: rgba(255, 74, 43, 0.14); color: #FF8A73; }
.notif-ico[data-tone="reward"] { background: rgba(227, 243, 107, 0.12); color: var(--signal); }
.notif-text { display: grid; gap: 2px; min-width: 0; }
.notif-text b { font-size: 14px; font-weight: 550; line-height: 1.35; }
.notif.unread .notif-text b { color: var(--text); font-weight: 650; }
.notif-text small { font-size: 13px; color: var(--text-3); }
.notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-hi); }

/* the More sheet: the player on top, then every other section as a tile */
.more-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-right: 48px; margin-bottom: 18px; min-height: 44px; }
.more-head .who { min-width: 0; flex: 1; }
.more-head .icon-btn { width: 40px; height: 40px; }
.more-head.guest h2 { margin: 0; padding: 0; }
.more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.more-tile {
  display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 88px; padding: 12px 6px; border-radius: var(--r-tile);
  background: var(--panel-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); color: var(--text-2); text-decoration: none; text-align: center;
}
.more-tile b { font-size: 13px; font-weight: 600; line-height: 1.2; }
.more-tile[aria-current="page"] { background: var(--panel-3); color: var(--text); }
.more-tile .tab-ico svg { width: 24px; height: 24px; }
.more-out { margin-top: 14px; color: var(--text-2); }
.tab-ico { position: relative; display: grid; place-items: center; }
.tab-ico svg { fill: currentColor; }
.tab-ico .dot-new { position: absolute; top: -1px; right: -4px; box-shadow: 0 0 0 2px #151519; }
.tab-ico .badge { position: absolute; top: -7px; left: calc(50% + 6px); box-shadow: 0 0 0 2px #151519; }

@media (max-width: 860px) {
  .tabbar a, .tabbar button { font-size: 13px; font-stretch: 88%; letter-spacing: -0.005em; }
  .modal-host.leaving .modal { animation: sheet-out 200ms cubic-bezier(0.4, 0, 1, 1) forwards; }
  @keyframes sheet-out { to { transform: translateY(100%); } }
  .notif-pop { position: fixed; top: calc(100% + 6px); left: 10px; right: 10px; width: auto; transform-origin: top center; }
  .menu-pop { right: -2px; }
}
@media (max-width: 440px) {
  .wordmark .wm-full { display: none; }
  .wordmark .wm-mark { display: block; height: 32px; width: auto; }
  .topbar > .wordmark { padding-left: 14px; }
  .top-right { gap: 6px; }
  .stat-pill.packs-pill { padding: 0 10px 0 8px; }
}

/* a page chunk on its way (main.jsx lazy): the skeleton shows only after 150ms, so a fast load never flashes */
.page-wait { display: grid; gap: 12px; max-width: 720px; }
.page-wait .sk-line:first-child { width: 220px; height: 34px; margin-bottom: 8px; }
.page-wait .sk-line:nth-child(2) { width: 60%; }
.page-wait .sk-row { height: 96px; margin: 0; }
.page-bad { display: grid; gap: 10px; justify-items: start; max-width: 520px; padding: 24px 0; }
.page-bad h1 { margin: 0; font-size: 28px; font-weight: 760; letter-spacing: -0.03em; }
.page-bad p { margin: 0 0 8px; color: var(--text-2); }

/* /launch: the owner's $WIKIPONS switch */
.launch { display: grid; gap: 14px; max-width: 760px; }
.launch-state { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: var(--r-tile, 18px); background: var(--panel); }
.launch-state b { font-size: 18px; font-weight: 800; }
.launch-state p { margin: 4px 0; font-size: 14px; color: var(--text-2); overflow-wrap: anywhere; }
.launch-state small { display: block; margin-bottom: 10px; font-size: 13px; color: var(--text-2); }
.launch-dot { flex: none; width: 12px; height: 12px; margin-top: 6px; border-radius: 50%; background: var(--text-3); }
.launch-state.on .launch-dot { background: var(--good); }
.launch-card { display: grid; gap: 10px; padding: 18px 20px; border-radius: var(--r-tile, 18px); background: var(--panel); }
.launch-card h2 { margin: 0; font-size: 22px; font-stretch: 75%; font-weight: 900; text-transform: uppercase; }
.launch-card > p { margin: 0; font-size: 14px; color: var(--text-2); max-width: 64ch; }
.launch-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.launch-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0 6px 0 14px; border-radius: 12px; background: var(--panel-2); font-size: 14px; overflow-wrap: anywhere; }
.launch-form { display: flex; gap: 8px; }
.launch-form .input { flex: 1; min-width: 0; }