/* Rip: digital booster packs. Foil wrappers, card backs, the opening stage. */

/* ---------- pack wrapper ---------- */
.pack {
  --h: 210; --h2: 260; --metal: hsl(var(--h) 70% 52%);
  position: relative; aspect-ratio: 0.56; width: 100%; border-radius: 6px 6px 4px 4px;
  transform-style: preserve-3d; isolation: isolate; user-select: none; -webkit-user-select: none;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .28));
}
.pack .wrap {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  background:
    radial-gradient(120% 70% at 50% 38%, hsl(var(--h) 85% 62% / .9), transparent 62%),
    linear-gradient(160deg, hsl(var(--h) 75% 46%), hsl(var(--h2) 70% 28%) 70%, hsl(var(--h2) 75% 18%));
}
.pack[data-game="mtg"] .wrap {
  background:
    radial-gradient(90% 55% at 50% 40%, hsl(var(--h) 45% 40% / .9), transparent 65%),
    linear-gradient(165deg, #1d1813, hsl(var(--h) 30% 16%) 55%, #0c0a08);
}
.pack[data-game="ygo"] .wrap {
  background:
    radial-gradient(100% 60% at 50% 42%, hsl(var(--h) 70% 45% / .85), transparent 64%),
    conic-gradient(from 200deg at 50% 45%, #1b0f2e, hsl(var(--h) 60% 22%), #2a1745, #120a20, #1b0f2e);
}
.pack[data-game="ja"] .wrap {
  background:
    radial-gradient(circle at 50% 40%, hsl(var(--h) 80% 58% / .95) 0 22%, transparent 23%),
    linear-gradient(170deg, #fbf6ee, #efe6d8 60%, #e3d6c2);
}
/* crimped ends: ridges + a zig-zag edge */
.pack .crimp {
  position: absolute; left: 0; right: 0; height: 7%; z-index: 3;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .38) 0 1.5px, rgba(0, 0, 0, .12) 1.5px 3px, transparent 3px 5px),
    linear-gradient(180deg, #e9edf3, #9aa4b1 45%, #d8dee6 70%, #8c96a3);
}
.pack .crimp.top { top: 0; -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top/8px 40% repeat-x, linear-gradient(#000 0 0) bottom/100% 61% no-repeat; mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top/8px 40% repeat-x, linear-gradient(#000 0 0) bottom/100% 61% no-repeat; }
.pack .crimp.bottom { bottom: 0; -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom/8px 40% repeat-x, linear-gradient(#000 0 0) top/100% 61% no-repeat; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom/8px 40% repeat-x, linear-gradient(#000 0 0) top/100% 61% no-repeat; }
.pack[data-game="mtg"] .crimp { background: repeating-linear-gradient(90deg, rgba(255, 230, 170, .35) 0 1.5px, rgba(0, 0, 0, .2) 1.5px 3px, transparent 3px 5px), linear-gradient(180deg, #f3d98f, #9a7426 50%, #e6c56d 75%, #7d5c1c); }
.pack[data-game="ygo"] .crimp { background: repeating-linear-gradient(90deg, rgba(255, 240, 190, .35) 0 1.5px, rgba(0, 0, 0, .2) 1.5px 3px, transparent 3px 5px), linear-gradient(180deg, #ffe7a1, #b7892a 50%, #f5d27a 75%, #8a6420); }
.pack[data-game="ja"] .crimp { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .5) 0 1.5px, rgba(0, 0, 0, .08) 1.5px 3px, transparent 3px 5px), linear-gradient(180deg, #f1d3d8, #c94b5c 50%, #f0c4cb 75%, #a8293b); }
/* holographic foil: moves with the finger / phone tilt */
.pack .foil {
  position: absolute; inset: 0; z-index: 1; mix-blend-mode: color-dodge; opacity: .42; pointer-events: none;
  background:
    repeating-linear-gradient(115deg, #ff7ad9 0%, #ffe58a 8%, #7dffce 16%, #7ac3ff 24%, #c9a2ff 32%, #ff7ad9 40%),
    radial-gradient(circle at calc(var(--mx, .5) * 100%) calc(var(--my, .3) * 100%), rgba(255, 255, 255, .6), transparent 45%);
  background-size: 300% 300%, 100% 100%;
  background-position: calc(var(--mx, .5) * 100%) calc(var(--my, .3) * 100%), 0 0;
}
.pack[data-game="ja"] .foil { opacity: .22; }
.pack .glare {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(calc(110deg + var(--mx, .5) * 40deg), transparent 30%, rgba(255, 255, 255, .75) 46%, transparent 60%);
}
.pack .face {
  position: absolute; inset: 9% 7% 10%; z-index: 3; display: flex; flex-direction: column; align-items: center;
  text-align: center; color: #fff; pointer-events: none; gap: 4%;
}
.pack .face .mid { margin: auto 0; display: grid; place-items: center; gap: 6px; width: 100%; }
.pack.has-hero .face .mid { margin: auto 0 0; }
.pack[data-game="ja"] .face { color: #2a1d18; }
.pack .face .brand {
  font-family: var(--display); font-weight: 800; font-size: clamp(9px, 3.4cqw, 15px); letter-spacing: .18em; text-transform: uppercase;
  opacity: .9; text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.pack[data-game="ja"] .face .brand { text-shadow: none; color: #a8293b; }
.pack .face .logo { max-width: 92%; max-height: 22cqw; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .55)); }
.pack:not(.has-hero) .face .logo { max-height: 44cqw; }
.pack .face .sym { width: 42%; aspect-ratio: 1; filter: invert(1) drop-shadow(0 2px 6px rgba(0, 0, 0, .6)); opacity: .9; }
.pack .face .title {
  font-family: var(--display); font-weight: 800; line-height: 1.05; font-size: clamp(11px, 7cqw, 30px); padding: 0 4%;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .45); overflow-wrap: anywhere;
}
.pack[data-game="ja"] .face .title { text-shadow: none; }
.pack[data-game="ygo"] .face .title, .pack[data-game="mtg"] .face .title { background: linear-gradient(180deg, #fff3c4, #e0b44c 60%, #fff0bd); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6)); }
.pack .face .count { font-size: clamp(8px, 3cqw, 13px); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.pack-box { container-type: inline-size; }

/* ---------- rip home ---------- */
.rip-hero {
  position: relative; overflow: hidden; border-radius: var(--radius); padding: 18px 18px 16px; margin-top: 6px;
  background: linear-gradient(135deg, #17151d, #2a2340 55%, #3b1f3a); color: #fff; box-shadow: var(--shadow);
}
.rip-hero::after {
  content: ""; position: absolute; inset: -40% -20% auto auto; width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(from 0deg, #ff7ad9, #ffe58a, #7dffce, #7ac3ff, #c9a2ff, #ff7ad9); filter: blur(40px); opacity: .35;
  animation: rip-spin 14s linear infinite;
}
.rip-hero > * { position: relative; z-index: 1; }
.rip-hero .eyebrow { color: rgba(255, 255, 255, .7); }
.coin-row { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; }
.coin { width: 30px; height: 30px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 30%, #fff6c8, #f2c230 40%, #b8861f 75%); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25), 0 0 0 2px rgba(255, 255, 255, .15); display: grid; place-items: center; color: #7a5410; font-weight: 900; font-size: 15px; font-family: var(--display); }
.coin.sm { width: 18px; height: 18px; font-size: 10px; }
.coins-big { font-family: var(--display); font-weight: 800; font-size: 44px; line-height: 1; font-variant-numeric: tabular-nums; }
.rip-hero .btn { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .2); }
.rip-hero .btn.claim { background: linear-gradient(135deg, #ffd65a, #f2a31b); color: #3b2405; border: 0; font-weight: 800; box-shadow: 0 6px 18px rgba(242, 163, 27, .35); }
.rip-hero .btn.claim:disabled { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .6); box-shadow: none; }
.rip-hero .stats { display: flex; gap: 18px; margin-top: 14px; font-size: 13px; color: rgba(255, 255, 255, .72); flex-wrap: wrap; }
.rip-hero .stats b { color: #fff; font-family: var(--mono); font-weight: 500; }
.digital-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; }
.digital-tag.ink { background: var(--paper-2); color: var(--ink-2); }

.shelf { display: flex; gap: 12px; overflow-x: auto; padding: 14px 4px 18px; margin: 0 -4px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.shelf::-webkit-scrollbar { display: none; }
.shelf .sealed { flex: none; width: 92px; scroll-snap-align: start; border: 0; background: none; padding: 0; cursor: pointer; text-align: center; color: inherit; font: inherit; }
.shelf .sealed .pack { animation: rip-bob 3.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.4s); }
.shelf .sealed span { display: block; font-size: 11px; color: var(--ink-3); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shelf-empty { padding: 18px 16px; font-size: 14px; color: var(--ink-2); }

.feature-rail { display: flex; gap: 16px; overflow-x: auto; padding: 10px 4px 22px; margin: 0 -4px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.feature-rail::-webkit-scrollbar { display: none; }
.shop-pack { flex: none; width: 138px; border: 0; background: none; padding: 0; cursor: pointer; text-align: left; color: inherit; font: inherit; scroll-snap-align: start; }
.shop-pack .pack { transition: transform .25s cubic-bezier(.2, 1.4, .4, 1); }
.shop-pack:hover .pack, .shop-pack:focus-visible .pack { transform: translateY(-6px) rotate(-1.5deg); }
.shop-pack .nm { font-weight: 700; font-size: 13.5px; margin-top: 10px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shop-pack .pr { display: flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 13px; color: var(--ink-2); margin-top: 3px; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 16px 12px; }
.shop-grid .shop-pack { width: auto; }
.shop-grid .shop-pack .nm { font-size: 12.5px; }

/* buy sheet */
.buy-preview { width: 150px; margin: 4px auto 6px; animation: rip-bob 3s ease-in-out infinite; }
.qty-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.qty-pick button { border: 1.5px solid var(--line); background: var(--card); border-radius: 12px; padding: 10px 4px; font: inherit; color: inherit; cursor: pointer; display: grid; gap: 2px; }
.qty-pick button b { font-family: var(--display); font-size: 20px; }
.qty-pick button small { font-size: 11px; color: var(--ink-3); }
.qty-pick button.on { border-color: var(--red); background: var(--red-soft); }
.flying-pack { position: fixed; z-index: 90; pointer-events: none; width: 120px; }
.coin-float { position: fixed; z-index: 91; pointer-events: none; font-family: var(--display); font-weight: 800; font-size: 22px; color: #f2a31b; text-shadow: 0 2px 6px rgba(0, 0, 0, .3); }

/* ---------- card backs ---------- */
.rcard { position: absolute; inset: 0; transform-style: preserve-3d; }
.rcard .inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.3, 1.3, .5, 1); }
.rcard.up .inner { transform: rotateY(180deg); }
.rcard .side { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 4.6% / 3.3%; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.rcard .front { transform: rotateY(180deg); background: #222; }
.rcard .front img { width: 100%; height: 100%; object-fit: cover; display: block; }
.back-pokemon, .back-ja {
  background:
    radial-gradient(circle at 50% 50%, #fff 0 9%, #1b1b1b 9.5% 11%, transparent 11.5%),
    linear-gradient(180deg, transparent 47.5%, #1b1b1b 47.5% 52.5%, transparent 52.5%) 50% 50% / 46% 100% no-repeat,
    radial-gradient(circle at 50% 50%, #e8382a 0 22%, transparent 22.5%),
    radial-gradient(circle at 50% 50%, transparent 0 22.6%, #1b1b1b 22.6% 24.5%, transparent 25%),
    conic-gradient(from 0deg at 50% 50%, #2d55c8, #183a96, #3a6be0, #183a96, #2d55c8, #1d47b0, #2d55c8),
    #1d47b0;
  border: 6px solid #0f2a75;
}
.back-pokemon::after, .back-ja::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, transparent 0 25%, rgba(140, 190, 255, .25) 35%, transparent 60%); }
.back-mtg {
  background:
    radial-gradient(ellipse 34% 26% at 50% 50%, #e9b25a 0 30%, #7a3b14 32% 52%, transparent 54%),
    radial-gradient(ellipse 40% 32% at 50% 50%, #2c5a7a 0 60%, transparent 62%),
    repeating-radial-gradient(ellipse at 50% 50%, #4a2b17 0 6px, #3b2111 6px 12px),
    #3b2111;
  border: 7px solid #23130a;
}
.back-ygo {
  background:
    radial-gradient(ellipse 30% 22% at 50% 50%, #120a05 0 60%, transparent 62%),
    repeating-conic-gradient(from 0deg at 50% 50%, #c4561a 0 8deg, #6b2a0c 8deg 16deg),
    #6b2a0c;
  border: 7px solid #2a1206;
}
.back-ygo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, transparent 0 20%, rgba(0, 0, 0, .45) 70%); }

/* holo shimmer over foil pulls */
.rcard .holo, .zoom-card .holo {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: .5;
  background:
    repeating-linear-gradient(110deg, #ff7ad9 0%, #ffe58a 7%, #7dffce 14%, #7ac3ff 21%, #c9a2ff 28%, #ff7ad9 35%),
    radial-gradient(circle at calc(var(--mx, .5) * 100%) calc(var(--my, .4) * 100%), rgba(255, 255, 255, .5), transparent 50%);
  background-size: 260% 260%, 100% 100%;
  background-position: calc(var(--mx, .5) * 100%) calc(var(--my, .4) * 100%), 0 0;
  animation: rip-holo 5s linear infinite;
}
.rcard .holo.rev { opacity: .28; }

/* ---------- the stage ---------- */
.rip-stage {
  position: fixed; inset: 0; z-index: 80; overflow: hidden; touch-action: none; color: #fff;
  background: radial-gradient(120% 80% at 50% 40%, var(--stage-glow, #3a2a6e) 0%, #0b0a10 62%);
  display: grid; place-items: center; animation: rip-fade-in .3s ease;
}
.rip-stage[data-game="pokemon"] { --stage-glow: #1f3f8c; }
.rip-stage[data-game="ja"] { --stage-glow: #7a1426; }
.rip-stage[data-game="mtg"] { --stage-glow: #5a3a12; }
.rip-stage[data-game="ygo"] { --stage-glow: #3d1f6e; }
.rip-stage canvas.fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 6; }
.rip-stage .bar { position: absolute; top: 0; left: 0; right: 0; z-index: 8; display: flex; justify-content: space-between; align-items: center; padding: calc(env(safe-area-inset-top, 0px) + 12px) 14px 0; }
.rip-stage .bar button { border: 0; background: rgba(255, 255, 255, .1); color: #fff; border-radius: 999px; min-height: 40px; min-width: 40px; padding: 0 14px; font: 600 14px var(--body); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.rip-stage .bar svg { width: 18px; height: 18px; }
.rip-stage .set-name { font-family: var(--display); font-weight: 700; font-size: 15px; opacity: .85; text-align: center; max-width: 50vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rip-stage .hint { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 28px); z-index: 7; text-align: center; font-weight: 700; letter-spacing: .02em; font-size: 15px; opacity: .9; transition: opacity .3s; }
.rip-stage .hint small { display: block; font-weight: 500; opacity: .7; margin-top: 4px; font-size: 13px; }
.rip-stage .hint .btn { margin-top: 12px; }
.stage-pack { position: relative; width: min(60vw, 280px); perspective: 900px; z-index: 3; }
.stage-pack .tilt { position: relative; transform-style: preserve-3d; transition: transform .12s ease-out; }
.stage-pack .part { position: relative; }
.stage-pack .part.top { position: absolute; inset: 0; z-index: 4; clip-path: polygon(0 0, 100% 0, 100% 15%, 0 15%); transform-origin: 100% 15%; }
.stage-pack .part.main { clip-path: polygon(0 15%, 100% 15%, 100% 100%, 0 100%); z-index: 3; }
.stage-pack .tear-line { position: absolute; left: 0; right: 0; top: 15%; height: 0; z-index: 5; border-top: 2px dashed rgba(255, 255, 255, .55); pointer-events: none; }
.stage-pack svg.tear { position: absolute; left: 0; top: 15%; width: 100%; height: 12px; margin-top: -6px; z-index: 6; overflow: visible; pointer-events: none; }
.stage-pack .tear-zone { position: absolute; left: -10%; right: -10%; top: -8%; height: 36%; z-index: 7; cursor: grab; }
.swipe-guide { position: absolute; top: 9%; left: 6%; z-index: 7; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .9); box-shadow: 0 0 0 6px rgba(255, 255, 255, .25); animation: rip-guide 1.8s cubic-bezier(.5, 0, .3, 1) infinite; pointer-events: none; }
.stage-cards { position: absolute; left: 50%; top: calc(50% + 6px); width: min(74vw, 340px, calc((100dvh - 210px) * 0.716)); aspect-ratio: 63 / 88; transform: translate(-50%, -50%); z-index: 4; perspective: 1200px; }
.stage-cards .rcard { transition: transform .5s cubic-bezier(.2, 1.2, .4, 1), opacity .3s; will-change: transform; }
.stage-cards .rcard.top { cursor: grab; }
.stage-cards .rcard.charged .back-glow { opacity: 1; }
.rcard .back-glow { position: absolute; inset: -6%; border-radius: 9%; z-index: -1; opacity: 0; transition: opacity .4s; background: radial-gradient(closest-side, var(--tier-c, #fff), transparent); filter: blur(10px); animation: rip-pulse 1s ease-in-out infinite; }
.rays { position: absolute; left: 50%; top: 50%; width: 170vmax; height: 170vmax; margin: -85vmax 0 0 -85vmax; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: repeating-conic-gradient(from 0deg, var(--ray, rgba(255, 220, 120, .22)) 0deg 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 0, transparent 38%); mask: radial-gradient(circle, #000 0, transparent 38%); animation: rip-spin 18s linear infinite; }
.rays.on { opacity: 1; }
.flash { position: absolute; inset: 0; z-index: 7; background: #fff; opacity: 0; pointer-events: none; }
.pull-label { position: absolute; left: 0; right: 0; z-index: 7; text-align: center; pointer-events: none; top: 60px; }
.pull-label .rar { display: inline-block; font-family: var(--display); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: 15px; padding: 6px 14px; border-radius: 999px; background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .3); }
.pull-label .rar.t3 { background: linear-gradient(135deg, #f7d774, #b8861f); color: #2a1a00; border: 0; }
.pull-label .rar.t4 { background: linear-gradient(90deg, #ff7ad9, #ffe58a, #7dffce, #7ac3ff, #c9a2ff); color: #1a1030; border: 0; background-size: 200% 100%; animation: rip-slide 2s linear infinite; }
.pull-value { position: absolute; left: 0; right: 0; z-index: 7; text-align: center; pointer-events: none; bottom: calc(env(safe-area-inset-bottom, 0px) + 92px); }
.pull-value b { font-family: var(--display); font-weight: 800; font-size: 26px; text-shadow: 0 2px 12px rgba(0, 0, 0, .6); }
.pull-value .new { display: inline-block; margin-left: 8px; vertical-align: 4px; font-size: 11px; font-weight: 800; letter-spacing: .12em; padding: 3px 8px; border-radius: 999px; background: #2bd48f; color: #062a1b; }
.pull-value .nm { display: block; font-size: 14px; opacity: .8; margin-top: 2px; }
.stage-progress { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 60px); z-index: 7; display: flex; gap: 5px; }
.stage-progress i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .25); transition: background .3s, transform .3s; }
.stage-progress i.done { background: rgba(255, 255, 255, .8); }
.stage-progress i.t2 { background: #b88cff; } .stage-progress i.t3 { background: #ffcf4a; } .stage-progress i.t4 { background: #ff7ad9; }
.stage-progress i.cur { transform: scale(1.5); }
.shake { animation: rip-shake .5s cubic-bezier(.36, .07, .19, .97); }

/* summary */
.rip-summary { position: absolute; inset: 0; z-index: 9; overflow-y: auto; padding: calc(env(safe-area-inset-top, 0px) + 64px) 16px calc(env(safe-area-inset-bottom, 0px) + 24px); touch-action: pan-y; }
.rip-summary .head { text-align: center; margin-bottom: 18px; animation: rip-rise .5s cubic-bezier(.2, 1.2, .4, 1) both; }
.rip-summary .head .big { font-family: var(--display); font-weight: 800; font-size: 42px; line-height: 1; }
.rip-summary .head .chip { margin-top: 10px; }
.rip-summary .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; max-width: 640px; margin: 0 auto; }
.rip-summary .grid button { position: relative; border: 0; padding: 0; background: none; color: #fff; font: inherit; cursor: pointer; text-align: left; animation: rip-deal .5s cubic-bezier(.2, 1.3, .4, 1) both; animation-delay: calc(var(--i) * 60ms); }
.rip-summary .grid .art { position: relative; aspect-ratio: 63 / 88; border-radius: 5px; overflow: hidden; box-shadow: 0 6px 16px rgba(0, 0, 0, .4); background: #222; }
.rip-summary .grid .art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rip-summary .grid .t2 .art { box-shadow: 0 0 0 2px #b88cff, 0 6px 18px rgba(184, 140, 255, .45); }
.rip-summary .grid .t3 .art { box-shadow: 0 0 0 2px #ffcf4a, 0 6px 22px rgba(255, 207, 74, .55); }
.rip-summary .grid .t4 .art { box-shadow: 0 0 0 2px #ff7ad9, 0 0 26px rgba(255, 122, 217, .7); }
.rip-summary .grid .v { display: block; font-family: var(--mono); font-size: 12.5px; margin-top: 5px; }
.rip-summary .grid .n { display: block; font-size: 11.5px; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rip-summary .grid .newdot { position: absolute; top: 4px; right: 4px; z-index: 2; font-size: 9px; font-weight: 800; letter-spacing: .1em; padding: 2px 6px; border-radius: 999px; background: #2bd48f; color: #062a1b; }
.rip-summary .acts { display: grid; gap: 10px; max-width: 420px; margin: 22px auto 0; }
.rip-summary .acts .btn { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .2); }
.rip-summary .acts .btn.red { background: var(--red); color: var(--on-red); border: 0; }
.zoom { position: absolute; inset: 0; z-index: 12; display: grid; place-items: center; background: rgba(6, 5, 10, .85); animation: rip-fade-in .2s; perspective: 1000px; }
.zoom-card { position: relative; width: min(80vw, 380px, calc((100dvh - 160px) * .716)); aspect-ratio: 63 / 88; border-radius: 4.6% / 3.3%; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); transition: transform .1s ease-out; }
.zoom-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zoom .meta { position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + 22px); left: 0; right: 0; text-align: center; color: #fff; }

/* digital binder */
.dig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 14px 10px; }
.dig-grid .tile { position: relative; border: 0; background: none; padding: 0; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.dig-grid .tile .art { position: relative; aspect-ratio: 63 / 88; border-radius: 5px; overflow: hidden; background: var(--paper-2); box-shadow: 0 3px 10px rgba(0, 0, 0, .12); }
.dig-grid .tile .art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dig-grid .tile.t2 .art { box-shadow: 0 0 0 2px #9a74e8; } .dig-grid .tile.t3 .art { box-shadow: 0 0 0 2px #d9a520; } .dig-grid .tile.t4 .art { box-shadow: 0 0 0 2px #e255b5, 0 0 14px rgba(226, 85, 181, .45); }
.dig-grid .tile .q { position: absolute; top: 5px; right: 5px; z-index: 2; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: rgba(0, 0, 0, .7); color: #fff; }
.dig-grid .tile .nm { font-size: 12.5px; font-weight: 600; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dig-grid .tile .vv { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.dig-grid .tile.sel .art::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--red) 35%, transparent); box-shadow: inset 0 0 0 3px var(--red); }
.dig-grid .tile .tick { position: absolute; left: 6px; top: 6px; z-index: 3; width: 22px; height: 22px; border-radius: 6px; border: 2px solid #fff; background: rgba(0, 0, 0, .35); display: grid; place-items: center; color: #fff; }
.dig-grid .tile.sel .tick { background: var(--red); border-color: var(--red); }
.dig-grid .tile .tick svg { width: 14px; height: 14px; }
.rip-home-card { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 12px 16px 12px 12px; color: inherit; text-decoration: none; overflow: hidden; position: relative; }
.rip-home-card .mini { width: 48px; flex: none; transform: rotate(-8deg); }
.rip-home-card .grow { display: grid; gap: 2px; }
.rip-home-card span { font-size: 13px; color: var(--ink-3); }
.rip-home-card .coinline { display: flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 13px; color: var(--ink-2); }

@keyframes rip-bob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-6px) rotate(1deg); } }
@keyframes rip-spin { to { transform: rotate(360deg); } }
@keyframes rip-holo { to { background-position: calc(var(--mx, .5) * 100% + 260%) calc(var(--my, .4) * 100%), 0 0; } }
@keyframes rip-fade-in { from { opacity: 0; } }
@keyframes rip-guide { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 75% { transform: translateX(min(48vw, 220px)); opacity: 1; } 100% { transform: translateX(min(48vw, 220px)); opacity: 0; } }
@keyframes rip-pulse { 50% { transform: scale(1.06); filter: blur(16px); } }
@keyframes rip-shake { 10%, 90% { transform: translate(-2px, 1px); } 20%, 80% { transform: translate(4px, -2px); } 30%, 50%, 70% { transform: translate(-7px, 3px); } 40%, 60% { transform: translate(7px, -3px); } }
@keyframes rip-slide { to { background-position: 200% 0; } }
@keyframes rip-rise { from { opacity: 0; transform: translateY(16px) scale(.96); } }
@keyframes rip-deal { from { opacity: 0; transform: translateY(30px) rotate(-6deg) scale(.8); } }
@media (prefers-reduced-motion: reduce) {
  .shelf .sealed .pack, .buy-preview, .rays, .rip-hero::after, .swipe-guide, .rcard .holo, .goal .claim-btn { animation: none !important; }
  .shake { animation: none; }
}

/* ---------- pack art: a featured card + a design per era ---------- */
.pack .hero { position: absolute; z-index: 0; overflow: hidden; }
.pack .hero img { position: absolute; width: 100%; height: 100%; object-fit: cover; display: block; }
.pack.has-hero .foil { opacity: .3; }

/* Pokemon, Scarlet & Violet / Mega era: silver foil wrapper, the chase card bleeding through a big window */
.pack[data-era="modern"] .wrap { background: linear-gradient(170deg, #f4f6fa, #c9d0db 45%, #eef1f6 60%, #aeb7c4); }
.pack[data-era="modern"] .hero { left: 0; right: 0; top: 6%; height: 66%; clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); }
.pack[data-era="modern"] .hero img { width: 135%; height: 135%; left: -17.5%; top: -12%; }
.pack[data-era="modern"] .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, hsl(var(--h) 60% 30% / .55)); }
.pack[data-era="modern"].has-hero .face { color: #10131a; }
.pack[data-era="modern"].has-hero .face .brand { color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.pack[data-era="modern"].has-hero .face .title { text-shadow: none; color: hsl(var(--h) 60% 25%); }
.pack[data-era="modern"].has-hero .face .count { color: #3a4150; }

/* Pokemon, 2003-2023: deep colour with the art cut on a diagonal */
.pack[data-era="classic"] .hero { left: 0; right: 0; top: 0; height: 74%; clip-path: polygon(0 0, 100% 0, 100% 78%, 0 96%); }
.pack[data-era="classic"] .hero img { width: 140%; height: 140%; left: -20%; top: -10%; }
.pack[data-era="classic"] .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, transparent 40%, hsl(var(--h2) 70% 18% / .7)); }

/* Pokemon, 1999-2002: bright yellow-and-blue, the card framed like a photo, starburst rays */
.pack[data-era="vintage"] .wrap {
  background:
    repeating-conic-gradient(from 0deg at 50% 40%, rgba(255, 255, 255, .16) 0deg 8deg, transparent 8deg 20deg),
    linear-gradient(165deg, #ffd23a, #f6a821 48%, #2a62c9 49%, #183f8f);
}
.pack[data-era="vintage"] .hero { left: 14%; right: 14%; top: 15%; aspect-ratio: 1 / 1.05; border: 3.5cqw solid #fff; border-radius: 3cqw; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); transform: rotate(-3deg); }
.pack[data-era="vintage"] .hero img { width: 132%; height: 132%; left: -16%; top: -12%; }
.pack[data-era="vintage"] .face .brand { color: #183f8f; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }

/* Japanese: a clean cream wrapper, art in a red-ruled window, a vertical red band */
.pack[data-era="ja"] .hero { left: 9%; right: 9%; top: 9%; height: 58%; outline: 1.2cqw solid #c8102e; outline-offset: 1.2cqw; }
.pack[data-era="ja"] .hero img { width: 135%; height: 135%; left: -17.5%; top: -10%; }
.pack[data-era="ja"] .wrap::before { content: ""; position: absolute; left: 3%; top: 0; bottom: 0; width: 3%; background: #c8102e; z-index: 1; }
.pack[data-era="ja"].has-hero .face .brand { color: #fff; background: #c8102e; padding: 1px 6px; border-radius: 2px; }

/* Magic: full-bleed painting, dark vignette, gold type */
.pack[data-era="mtg"] .hero { inset: 0; }
.pack[data-era="mtg"] .hero img { object-position: 50% 30%; }
.pack[data-era="mtg"] .hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 70% at 50% 35%, transparent 35%, rgba(0, 0, 0, .78)), linear-gradient(180deg, rgba(0, 0, 0, .55), transparent 25%, transparent 55%, rgba(0, 0, 0, .9)); }
.pack[data-era="mtg"].has-hero .face .sym { width: 22%; order: -1; }
.pack[data-era="mtg"].has-hero .face .title { font-size: clamp(11px, 8.5cqw, 32px); }

/* Yu-Gi-Oh: the monster in a gold-edged diamond on dark foil */
.pack[data-era="ygo"] .hero { left: 8%; right: 8%; top: 12%; aspect-ratio: 1; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.pack[data-era="ygo"] .hero img { width: 150%; height: 150%; left: -25%; top: -20%; }
.pack[data-era="ygo"] .hero::before { content: ""; position: absolute; inset: 0; z-index: 1; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%, 0 50%, 4% 50%, 50% 96%, 96% 50%, 50% 4%, 4% 50%, 0 50%); background: linear-gradient(135deg, #fff1b8, #c9962f 50%, #ffe08a); }
.pack[data-era="ygo"] .wrap::after { content: ""; position: absolute; left: 6%; right: 6%; top: 43.5%; height: 1px; background: linear-gradient(90deg, transparent, #e6c25b, transparent); z-index: 1; }

/* goals */
.rip-links { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 14px; }
.rip-links a { position: relative; display: grid; justify-items: center; gap: 4px; padding: 12px 6px; color: inherit; text-decoration: none; font-size: 13px; }
.rip-links svg { width: 22px; height: 22px; color: var(--red); }
.rip-links .badge { position: absolute; top: 6px; right: 8px; font-style: normal; }
.goal-hero { padding: 16px; margin: 6px 0 14px; }
.progress.thin { height: 6px; margin-top: 8px; }
.goal-list { display: grid; gap: 10px; }
.goal { display: flex; align-items: center; gap: 14px; padding: 12px 14px; }
.goal .grow { flex: 1; min-width: 0; }
.goal .t { font-weight: 700; }
.goal .s { font-size: 13px; color: var(--ink-3); }
.goal.claimed { opacity: .7; }
.goal .reward { display: flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 13px; color: var(--ink-3); flex: none; }
.goal .claim-btn { flex: none; min-height: 48px; line-height: 1.1; background: linear-gradient(135deg, #ffd65a, #f2a31b); color: #3b2405; border: 0; font-weight: 800; box-shadow: 0 4px 14px rgba(242, 163, 27, .4); animation: rip-pulse-btn 1.6s ease-in-out infinite; }
.goal .claim-btn small { font-weight: 700; font-family: var(--mono); }
.medal { --p: 0; flex: none; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--red) calc(var(--p) * 1%), var(--paper-2) 0); }
.medal::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--card); }
.medal span { position: relative; font-family: var(--display); font-weight: 800; font-size: 19px; color: var(--ink-3); display: grid; place-items: center; }
.medal span svg { width: 18px; height: 18px; }
.medal.won { background: conic-gradient(from 0deg, #fff3c4, #e0b44c, #fff0bd, #b8861f, #fff3c4); box-shadow: 0 3px 10px rgba(184, 134, 31, .35); }
.medal.won::before { background: radial-gradient(circle at 35% 30%, #fff8dc, #f2c94c 55%, #c4921f); }
.medal.won span { color: #6b4708; }
.unlock-stack { display: grid; gap: 8px; margin: 14px auto 0; max-width: 420px; }
.unlock { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; text-align: left; color: #fff; text-decoration: none;
  background: linear-gradient(135deg, rgba(255, 214, 90, .22), rgba(255, 122, 217, .18)); border: 1px solid rgba(255, 214, 90, .5);
  animation: rip-rise .6s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(.5s + var(--i) * .25s); }
.unlock .eyebrow { color: #ffd65a; }
.unlock .medal { width: 40px; height: 40px; }
/* sets */
.set-prog { color: inherit; text-decoration: none; }
.mini-pack { width: 44px; flex: none; }
.mini-pack.big { width: 110px; }
.set-head { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: center; margin-top: 6px; }
.checklist .tile { text-decoration: none; color: inherit; }
.checklist .tile.missing .art img { filter: grayscale(1); opacity: .28; }
.checklist .tile.missing .nm { color: var(--ink-3); }
@keyframes rip-pulse-btn { 50% { transform: scale(1.05); } }

/* stats */
.luck-meter { position: relative; height: 10px; border-radius: 5px; margin: 16px 0 26px; background: linear-gradient(90deg, #5aa0ff, #c9c3d6 50%, #ffcf4a); }
.luck-meter i { position: absolute; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .4); }
.luck-meter span { position: absolute; top: 16px; font-size: 11px; opacity: .7; }
.luck-meter span:nth-of-type(1) { left: 0; } .luck-meter span:nth-of-type(2) { left: 50%; transform: translateX(-50%); } .luck-meter span:nth-of-type(3) { right: 0; }
.tier-chart { padding: 14px 16px; }
.tier-chart .legend { display: flex; gap: 16px; font-size: 13px; color: var(--ink-2); margin-bottom: 10px; }
.tier-chart .legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.tier-chart .you { background: var(--red); } .tier-chart .exp { background: var(--ink-3); opacity: .55; }
.tier-row { display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: center; padding: 6px 0; }
.tier-row .lab { font-size: 13px; font-weight: 600; }
.tier-row .bars { display: grid; gap: 2px; }
.tier-row .bar { position: relative; height: 16px; border-radius: 0 4px 4px 0; min-width: 2px; }
.tier-row .bar span { position: absolute; left: calc(100% + 6px); top: 50%; transform: translateY(-50%); font-family: var(--mono); font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.tier-row .bar.exp span { color: var(--ink-3); }

a.back { text-decoration: none; }

/* rip all */
.ripall-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0 2px; }
.chip.ripall { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; background: linear-gradient(135deg, #ffd65a, #f2a31b); color: #3b2405; border: 0; }
.chip.ripall svg { width: 14px; height: 14px; }
.speed-seg button { min-height: 38px; }
.rip-stage .set-name small { display: block; font-family: var(--body); font-weight: 600; font-size: 11px; opacity: .7; letter-spacing: .06em; text-transform: uppercase; }
.rip-summary .grid.hits { margin-bottom: 6px; }
.rip-summary .grid.hits button { --i: 0; }

/* friends */
.rip-links a { font-size: 12px; padding: 10px 2px; }
.avatar { --h: 200; flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 800; color: #fff;
  background: linear-gradient(135deg, hsl(var(--h) 70% 55%), hsl(calc(var(--h) + 50) 65% 38%)); box-shadow: 0 0 0 2px var(--card); }
.avatar.big { width: 64px; height: 64px; font-size: 26px; }
.lb-row { color: inherit; text-decoration: none; }
.lb-row.me { background: color-mix(in srgb, var(--red) 6%, transparent); }
.lb-row .rank { width: 22px; text-align: center; font-family: var(--display); font-weight: 800; color: var(--ink-3); flex: none; }
.lb-row .rank.r1 { color: #c9962f; } .lb-row .rank.r2 { color: #8c96a3; } .lb-row .rank.r3 { color: #b0703a; }
.inf-tag { font-style: normal; font-weight: 800; color: var(--red-ink); }
.trades-link { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 14px 16px; color: inherit; text-decoration: none; position: relative; }
.trades-link > svg { width: 24px; height: 24px; color: var(--red); flex: none; }
.trades-link .grow { display: grid; gap: 2px; }
.trades-link span { font-size: 13px; color: var(--ink-3); }
.trades-link .badge { font-style: normal; }
.profile-head { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.dig-grid.tiny { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
.coins-tile .art { display: grid; place-items: center; align-content: center; gap: 6px; background: linear-gradient(135deg, #fff3c4, #f2c94c); }
.coins-tile .art b { font-family: var(--display); color: #6b4708; }
.fair-bar { position: relative; height: 8px; border-radius: 4px; margin: 12px 0 2px; background: linear-gradient(90deg, var(--down), var(--paper-2) 45% 55%, var(--up)); }
.fair-bar i { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--card); box-shadow: 0 0 0 2px var(--ink); }

.qty-custom { display: grid; gap: 2px; justify-items: center; border: 1.5px solid var(--line); background: var(--card); border-radius: 12px; padding: 6px 4px; }
.qty-custom small { font-size: 11px; color: var(--ink-3); }
.qty-custom span { display: flex; align-items: center; gap: 2px; }
.qty-custom input { width: 40px; border: 0; background: none; text-align: center; font-size: 18px; font-weight: 700; color: inherit; padding: 0; }
.qty-custom button { border: 0; background: var(--paper-2); color: inherit; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; }
.qty-custom button svg { width: 14px; height: 14px; }

/* public site: sign in / join */
body.signed-out .tabbar { display: none; }
body.signed-out #view { padding-bottom: 40px; }
.auth-wrap { max-width: 420px; margin: 0 auto; padding: calc(env(safe-area-inset-top, 0px) + 28px) 0 24px; }
.auth-brand { text-align: center; }
.auth-packs { display: flex; justify-content: center; align-items: flex-end; height: 168px; margin-bottom: 4px; }
.auth-packs .pack-box { width: 88px; margin: 0 -12px; transform: rotate(-12deg) translateY(12px); }
.auth-packs .pack-box:nth-child(2) { transform: translateY(-6px); z-index: 2; width: 100px; }
.auth-packs .pack-box:nth-child(3) { transform: rotate(12deg) translateY(12px); }
.auth-packs .pack { animation: rip-bob 3.4s ease-in-out infinite; }
.auth-packs .pack-box:nth-child(2) .pack { animation-delay: -1.1s; }
.auth-packs .pack-box:nth-child(3) .pack { animation-delay: -2.2s; }
.auth-brand h1 { font-size: 46px; margin: 8px 0 4px; }
.auth-brand p { margin: 0 auto 18px; max-width: 320px; }
.auth-card { padding: 18px; }
.auth-card h2 { margin: 0 0 12px; }
.auth-card form { display: grid; gap: 12px; }
.auth-foot { text-align: center; margin-top: 14px; }
@media (prefers-reduced-motion: reduce) { .auth-packs .pack { animation: none; } }

/* search anywhere */
.live-filter { margin-bottom: 10px; }
.filter-empty { margin: 10px 2px; }
[hidden] { display: none !important; }
#rip-search-results { margin-top: 6px; }
#rip-search-results .shop-pack .nm small { font-weight: 600; font-size: 11px; letter-spacing: .04em; }

.rip-summary .grid .stack-n { position: absolute; top: 4px; left: 4px; z-index: 2; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 999px; background: rgba(0, 0, 0, .75); color: #fff; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .5); }
.rip-summary .grid button:has(.stack-n) .art { box-shadow: 3px 3px 0 -1px rgba(255, 255, 255, .25), 6px 6px 0 -2px rgba(255, 255, 255, .12), 0 6px 16px rgba(0, 0, 0, .4); }

/* sign in with Google */
.google-btn { display: flex; align-items: center; justify-content: center; gap: 10px; background: #fff; color: #1f1f1f; border: 1px solid #dadce0; font-weight: 600; text-decoration: none; }
.google-btn:hover { background: #f8f9fa; }
.g-logo { width: 18px; height: 18px; flex: none; vertical-align: -3px; }
.or-line { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--ink-3); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.or-line::before, .or-line::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.copy-line { display: flex; gap: 8px; align-items: center; }
.copy-line code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 12px; padding: 8px 10px; background: var(--paper-2); border-radius: 8px; }

/* ads + supporters */
.ad-card { position: relative; display: flex; align-items: center; gap: 12px; margin: 16px 0; padding: 14px 16px 14px 16px; color: inherit; text-decoration: none; border-style: dashed; }
.ad-card .grow { display: grid; gap: 2px; min-width: 0; }
.ad-card .grow span { font-size: 13px; color: var(--ink-3); }
.ad-card .ad-tag { position: absolute; top: 6px; right: 10px; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.ad-card .ad-cta { flex: none; min-height: 34px; padding: 0 12px; }
.tier-badge { font-style: normal; display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; vertical-align: 2px; }
.tier-badge.t-supporter { background: #e8eef9; color: #2b4a8a; }
.tier-badge.t-collector { background: linear-gradient(135deg, #fff1b8, #e0b44c); color: #4a3205; }
.tier-badge.t-patron { background: linear-gradient(90deg, #ff9fd6, #ffe48a, #8df2c6, #8cc9ff, #c7a3ff); color: #1a1030; }
.tier-badge.t-founder { background: #17151d; color: #ffd65a; box-shadow: 0 0 0 1.5px #ffd65a; }
.name-collector, .name-patron, .name-founder { color: #b8861f; }
:root[data-theme="dark"] .name-collector, :root[data-theme="dark"] .name-patron, :root[data-theme="dark"] .name-founder { color: #f2c94c; }
.framed-patron .avatar, .framed-founder .avatar { box-shadow: 0 0 0 3px var(--card), 0 0 0 6px transparent; background-clip: padding-box; outline: 3px solid transparent;
  background-image: linear-gradient(135deg, hsl(var(--h) 70% 55%), hsl(calc(var(--h) + 50) 65% 38%)); position: relative; }
.framed-patron .avatar::after, .framed-founder .avatar::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; z-index: -1;
  background: conic-gradient(#ff9fd6, #ffe48a, #8df2c6, #8cc9ff, #c7a3ff, #ff9fd6); animation: rip-spin 6s linear infinite; }
.support-hero .plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.plan { position: relative; border: 1.5px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .08); color: #fff; border-radius: 14px; padding: 14px 10px; display: grid; gap: 2px; cursor: pointer; font: inherit; }
.plan b { font-family: var(--display); font-size: 24px; }
.plan span { font-size: 12px; opacity: .8; }
.plan.best { border-color: #ffd65a; background: rgba(255, 214, 90, .14); }
.plan i { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: #ffd65a; color: #3b2405; white-space: nowrap; }
.plan:disabled { opacity: .5; cursor: default; }
.tip-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.tip-grid .btn { padding: 0 4px; min-height: 42px; }
.tier-row.got { background: color-mix(in srgb, var(--up) 7%, transparent); }
.tier-ico { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 12px; font-weight: 700; background: var(--paper-2); color: var(--ink-2); }
.tier-row.got .tier-ico { background: var(--up); color: #fff; }
.tier-ico svg { width: 18px; height: 18px; }
.style-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.style-opt { border: 2px solid transparent; background: none; border-radius: 12px; padding: 6px 2px; display: grid; justify-items: center; gap: 4px; cursor: pointer; color: inherit; font: inherit; }
.style-opt.on { border-color: var(--red); }
.style-opt:disabled { opacity: .45; cursor: default; }
.style-opt small { font-size: 11px; text-align: center; }
.style-opt .pc.md { width: 46px; aspect-ratio: 63 / 88; border-radius: 4px; position: relative; overflow: hidden; }
.mat-swatch { width: 60px; height: 40px; border-radius: 8px; background: radial-gradient(120% 60% at 50% 50%, #2f8f63, #123e2d); box-shadow: var(--shadow); }
.founders { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 14px 16px; }
.founders span { font-weight: 700; } .founders small { color: var(--ink-3); font-weight: 500; }

/* unlockable card backs (Rip + Play) */
.cos-back-gold { background: repeating-conic-gradient(from 0deg at 50% 50%, #f7d774 0 10deg, #b8861f 10deg 20deg) !important; border-color: #6b4708 !important; }
.cos-back-holo { background: linear-gradient(115deg, #ff9fd6, #ffe48a 25%, #8df2c6 45%, #8cc9ff 65%, #c7a3ff 85%) !important; border-color: #fff !important; }
.cos-back-void { background: radial-gradient(circle at 50% 50%, #7a5cff 0 8%, #120a2a 30%, #000 70%) !important; border-color: #3d2c8a !important; }
.cos-back-gold::after, .cos-back-holo::after, .cos-back-void::after { display: none !important; }
/* unlockable playmats (Play) */
.mat.cos-mat-galaxy, .mat-swatch.cos-mat-galaxy { background: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 60%, #fff, transparent), radial-gradient(1.5px 1.5px at 40% 80%, #fff, transparent), radial-gradient(120% 80% at 50% 50%, #2a1d5c, #0b0820 70%); }
.mat.cos-mat-gilded, .mat-swatch.cos-mat-gilded { background: repeating-linear-gradient(45deg, rgba(255, 214, 110, .06) 0 2px, transparent 2px 22px), radial-gradient(120% 80% at 50% 50%, #3a2a0e, #140d03 70%); }
.mat.cos-mat-aurora, .mat-swatch.cos-mat-aurora { background: linear-gradient(160deg, #0b3d3a, #1b2a5c 45%, #3b1450 75%, #0b1a2a); }

/* legal + account */
.legal-agree { margin: 2px 0 0; } .legal-agree a { color: var(--red-ink); }
.auth-foot a { color: inherit; }
.danger-zone { margin-top: 18px; padding: 12px 16px; }
.danger-zone summary { cursor: pointer; font-weight: 700; color: var(--down); }
.btn.danger { background: var(--down); color: #fff; border: 0; }
/* more cosmetics */
.aura-swatch { width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle, #fff 0 12%, var(--a1) 13% 40%, var(--a2) 41% 70%, transparent 71%); }
.aura-default { --a1: #b88cff; --a2: #ffcf4a; } .aura-ember { --a1: #ff7a3c; --a2: #ffd65a; } .aura-frost { --a1: #9ad7ff; --a2: #ffffff; }
.aura-prism { background: conic-gradient(#ff7ad9, #ffe58a, #7dffce, #7ac3ff, #c9a2ff, #ff7ad9); } .aura-solar { --a1: #ffd65a; --a2: #f2a31b; box-shadow: 0 0 12px #ffd65a; }
.banner-swatch { width: 60px; height: 26px; border-radius: 6px; }
.banner-default { background: var(--paper-2); }
.banner-sunset { background: linear-gradient(90deg, #ff7a59, #ffb36b, #ffd36b); }
.banner-ocean { background: linear-gradient(90deg, #0b4f6c, #1f8fb8, #6fd3e8); }
.banner-circuit { background: repeating-linear-gradient(90deg, rgba(125, 255, 206, .5) 0 2px, transparent 2px 14px), linear-gradient(90deg, #0b2a2a, #11423f); }
.banner-crown { background: linear-gradient(90deg, #3a2a0e, #b8861f 40%, #fff1b8 50%, #b8861f 60%, #3a2a0e); }
.profile-banner { height: 84px; border-radius: var(--radius); margin: 4px 0 -30px; box-shadow: var(--shadow); }
.profile-banner + .profile-head { padding-left: 14px; position: relative; }
.emote-list, .emote-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.emote-grid { margin-top: 12px; }
.emote-chip { display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px; border-radius: 999px; font-weight: 800; font-size: 14px; border: 0; cursor: pointer;
  background: var(--paper-2); color: var(--ink); font-family: var(--display); }
.emote-chip svg { width: 12px; height: 12px; }
.emote-chip.t1 { background: #e8eef9; color: #2b4a8a; } .emote-chip.t2 { background: linear-gradient(135deg, #fff1b8, #e0b44c); color: #4a3205; }
.emote-chip.t3 { background: linear-gradient(90deg, #ff9fd6, #ffe48a, #8df2c6, #8cc9ff, #c7a3ff); color: #1a1030; } .emote-chip.t4 { background: #17151d; color: #ffd65a; box-shadow: 0 0 0 2px #ffd65a; }
.emote-chip.locked { opacity: .45; cursor: default; }
.emote-bubble { position: fixed; left: 50%; z-index: 63; transform: translateX(-50%); padding: 10px 20px; border-radius: 999px; font: 800 20px var(--display);
  background: #fff; color: #17151d; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); animation: emote-pop .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.emote-bubble.mine { bottom: calc(env(safe-area-inset-bottom, 0px) + 170px); }
.emote-bubble.theirs { top: calc(env(safe-area-inset-top, 0px) + 110px); }
.emote-bubble.t1 { background: #e8eef9; color: #2b4a8a; } .emote-bubble.t2 { background: linear-gradient(135deg, #fff1b8, #e0b44c); color: #4a3205; }
.emote-bubble.t3 { background: linear-gradient(90deg, #ff9fd6, #ffe48a, #8df2c6, #8cc9ff, #c7a3ff); } .emote-bubble.t4 { background: #17151d; color: #ffd65a; box-shadow: 0 0 0 2px #ffd65a, 0 10px 30px rgba(0, 0, 0, .5); }
@keyframes emote-pop { from { opacity: 0; transform: translateX(-50%) scale(.5); } }

/* Google sign-in setup: pick the downloaded file, then a checklist of what Google said */
.g-drop { position: relative; display: grid; gap: 4px; padding: 16px; border: 2px dashed var(--line); border-radius: 14px; cursor: pointer; text-align: center; background: var(--card); }
.g-drop:hover, .g-drop:focus-within { border-color: var(--red); }
.g-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.g-drop span { font-size: 13px; color: var(--ink-2); }
.g-checks { margin-top: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); display: grid; gap: 10px; }
.g-checks.good { border-color: color-mix(in srgb, #1f9d55 50%, var(--line)); }
.g-checks.bad { border-color: color-mix(in srgb, var(--red) 50%, var(--line)); }
.g-check { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; }
.g-dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #fff; }
.g-dot svg { width: 14px; height: 14px; }
.g-dot.y { background: #1f9d55; } .g-dot.n { background: var(--red); } .g-dot.q { background: #8a8494; }

/* Today: free daily pack + pack of the week */
.today-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 420px) { .today-strip { grid-template-columns: 1fr; } }
.today-card { position: relative; display: grid; grid-template-columns: 74px 1fr; gap: 12px; align-items: center; text-align: left; padding: 12px; border-radius: 18px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; cursor: pointer; overflow: hidden; transition: transform .15s ease; }
.today-card:active { transform: scale(.98); }
.today-card.free { background: linear-gradient(135deg, color-mix(in srgb, #ffcf3f 22%, var(--card)), var(--card) 70%); border-color: color-mix(in srgb, #e0a800 45%, var(--line)); }
.today-card.free:not(.done)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%); transform: translateX(-100%); animation: tcShine 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes tcShine { 60%, 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .today-card.free::after { animation: none; display: none; } }
.today-card.done { opacity: .7; cursor: default; }
.today-card.deal { background: linear-gradient(135deg, color-mix(in srgb, var(--red) 14%, var(--card)), var(--card) 70%); border-color: color-mix(in srgb, var(--red) 40%, var(--line)); }
.tc-pack { position: relative; width: 74px; }
.tc-pack .pack { width: 74px; }
.tc-off { position: absolute; top: -6px; right: -6px; background: var(--red); color: #fff; font: 800 12px/1 var(--sans, system-ui); padding: 5px 7px; border-radius: 999px; box-shadow: 0 3px 10px rgba(0, 0, 0, .25); }
.tc-body { display: grid; gap: 2px; min-width: 0; }
.tc-body b { font-family: var(--display); font-size: 15px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tc-body small { color: var(--ink-2); font-size: 12px; }
.tc-cta { margin-top: 6px; font-weight: 700; font-size: 13px; color: #9a6b00; }
.today-card.done .tc-cta { color: var(--ink-2); font-weight: 600; }
.tc-price { margin-top: 6px; font-weight: 800; display: inline-flex; gap: 4px; align-items: center; }
.tc-price s, .shop-pack .was { color: var(--ink-2); font-weight: 500; }
.shop-pack .sale { margin-left: 4px; background: var(--red); color: #fff; border-radius: 999px; padding: 1px 6px; font-weight: 800; }
@media (prefers-color-scheme: dark) { .tc-cta { color: #ffcf3f; } }

/* the once-in-a-while support ask on the pack summary */
.support-nudge { margin: 18px auto 6px; max-width: 460px; padding: 16px 18px 12px; border-radius: 18px; color: #fff; text-align: left;
  background: linear-gradient(135deg, rgba(255, 207, 74, .16), rgba(255, 122, 217, .12)); border: 1px solid rgba(255, 214, 90, .35);
  animation: snIn .45s cubic-bezier(.2, .9, .3, 1.15) .6s both; transition: opacity .3s ease, transform .3s ease; }
.support-nudge.gone { opacity: 0; transform: translateY(8px); }
.support-nudge b { font-family: var(--display); font-size: 17px; display: block; }
.support-nudge p { margin: 6px 0 12px; font-size: 14px; line-height: 1.45; opacity: .85; }
.support-nudge .sn-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.support-nudge .btn.ghost { color: #fff; border-color: rgba(255, 255, 255, .3); background: transparent; }
.support-nudge .sn-never { display: block; margin: 10px auto 0; background: none; border: 0; color: rgba(255, 255, 255, .55); font: inherit; font-size: 12.5px; text-decoration: underline; cursor: pointer; }
@keyframes snIn { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .support-nudge { animation: none; } }

/* welcome intro for new players */
.welcome { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; overflow: hidden;
  background: radial-gradient(120% 80% at 80% 0%, #3a2a6e 0%, #17151d 60%) #17151d; color: #fff; animation: wlIn .35s ease both; }
.welcome.out { animation: wlOut .3s ease both; }
@keyframes wlIn { from { opacity: 0; } } @keyframes wlOut { to { opacity: 0; } }
.wl-card { position: relative; z-index: 2; width: min(420px, 100%); text-align: center; animation: wlUp .45s cubic-bezier(.2,.9,.3,1.1) both; }
@keyframes wlUp { from { opacity: 0; transform: translateY(24px); } }
.wl-art { height: 150px; display: grid; place-items: center; margin-bottom: 8px; }
.wl-coin { width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; font: 800 56px/1 var(--display); color: #7a4d00;
  background: radial-gradient(circle at 35% 30%, #fff2b0, #ffcf4a 45%, #c98a00); box-shadow: 0 20px 60px rgba(255, 190, 40, .45), inset 0 -6px 0 rgba(0,0,0,.15);
  animation: wlSpin 2.4s ease-in-out infinite; }
@keyframes wlSpin { 50% { transform: rotateY(180deg) scale(1.05); } }
.wl-icon { width: 104px; height: 104px; border-radius: 30px; display: grid; place-items: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
.wl-icon svg { width: 52px; height: 52px; }
.welcome .eyebrow { color: #ffcf4a; }
.welcome h2 { font: 800 clamp(30px, 8vw, 42px)/1.05 var(--display); margin: 10px 0 10px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.welcome.jackpot .wl-jackpot h2 { color: #ffcf4a; text-shadow: 0 6px 30px rgba(255, 190, 40, .45); }
.welcome p { margin: 0 auto; max-width: 30em; color: rgba(255,255,255,.8); font-size: 16px; line-height: 1.5; }
.wl-dots { display: flex; gap: 8px; justify-content: center; margin: 22px 0 18px; }
.wl-dots i { width: 8px; height: 8px; border-radius: 99px; background: rgba(255,255,255,.25); transition: width .25s ease; }
.wl-dots i.on { width: 26px; background: #fff; }
.wl-acts { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }
.wl-acts .btn.block { grid-column: 1 / -1; }
.welcome .btn.ghost { color: #fff; border-color: rgba(255,255,255,.3); background: transparent; }
.wl-bit { position: absolute; top: 0; width: 9px; height: 14px; border-radius: 2px; z-index: 1; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .welcome, .wl-card, .wl-coin { animation: none; } }

/* 7-day daily coins streak */
.streak { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin: 14px 0 8px; }
.streak-day { position: relative; display: grid; gap: 2px; justify-items: center; padding: 8px 2px 7px; border-radius: 12px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .75); }
.streak-day small { font-size: 10px; opacity: .8; }
.streak-day b { font: 800 15px/1 var(--display); color: #fff; }
.streak-day.done { background: rgba(255, 207, 74, .22); border-color: rgba(255, 207, 74, .6); }
.streak-day.done::after { content: "\2713"; position: absolute; top: -6px; right: -4px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 800; color: #3a2400; background: #ffcf4a; }
.streak-day.today { background: #ffcf4a; border-color: #ffcf4a; color: #4a3000; box-shadow: 0 0 0 3px rgba(255, 207, 74, .3), 0 8px 22px rgba(255, 190, 40, .35); animation: skGlow 1.8s ease-in-out infinite; }
.streak-day.today b { color: #3a2400; }
.streak-day.big { background-image: linear-gradient(160deg, rgba(255, 122, 217, .25), transparent); }
.streak-day .sk-pack { font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #ff9be6; }
.streak-day.today .sk-pack { color: #7a1d60; }
.streak-day.pop { animation: skPop .5s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes skGlow { 50% { box-shadow: 0 0 0 6px rgba(255, 207, 74, .15), 0 8px 22px rgba(255, 190, 40, .35); } }
@keyframes skPop { 40% { transform: scale(1.15); } }
.streak-note { margin: 0 0 10px; font-size: 12px; opacity: .7; }
@media (prefers-reduced-motion: reduce) { .streak-day.today, .streak-day.pop { animation: none; } }

/* trade-up machine */
.tu-list { display: grid; gap: 10px; }
.tu-row { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.tu-row .grow { display: grid; gap: 2px; min-width: 0; }
.tu-bar { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; margin-top: 6px; }
.tu-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffcf4a, #E2361C); border-radius: 99px; }
.tu-reveal { text-align: center; }
.tu-card { width: min(240px, 70%); margin: 14px auto 0; border-radius: 12px; overflow: hidden; animation: tuIn .7s cubic-bezier(.2, .9, .3, 1.2) both;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35); }
.tu-reveal.t2 .tu-card { box-shadow: 0 0 0 3px #b98bff, 0 18px 50px rgba(150, 90, 255, .45); }
.tu-reveal.t3 .tu-card { box-shadow: 0 0 0 3px #ffcf4a, 0 18px 60px rgba(255, 190, 40, .55); }
.tu-reveal.t4 .tu-card { box-shadow: 0 0 0 3px #ff7ad9, 0 18px 70px rgba(255, 122, 217, .6); }
.tu-card img { display: block; width: 100%; }
@keyframes tuIn { from { opacity: 0; transform: rotateY(90deg) scale(.8); } }
@media (prefers-reduced-motion: reduce) { .tu-card { animation: none; } }

/* events */
.events { display: grid; gap: 10px; }
.event-card { display: grid; gap: 4px; text-align: left; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; }
button.event-card { cursor: pointer; }
.event-card b { font-family: var(--display); font-size: 17px; }
.event-card p { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.event-card.double { background: linear-gradient(135deg, color-mix(in srgb, #3ddc97 20%, var(--card)), var(--card) 70%); border-color: color-mix(in srgb, #1f9d55 45%, var(--line)); }
.event-card.spot { background: linear-gradient(135deg, color-mix(in srgb, #ffcf4a 20%, var(--card)), color-mix(in srgb, #ff7ad9 10%, var(--card))); border-color: color-mix(in srgb, #e0a800 45%, var(--line)); }
.ev-tag { justify-self: start; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: 99px; background: var(--ink); color: var(--paper); }
.ev-podium { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; font-size: 13px; }
.ev-podium i { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 5px; border-radius: 50%; background: #ffcf4a; color: #3a2400; font: 800 11px/1 var(--display); font-style: normal; }
.ev-podium em { font-style: normal; font-weight: 700; }
.ev-me { color: var(--ink-2); font-size: 12px; margin-top: 2px; }
.ev-rank { width: 26px; font: 800 18px/1 var(--display); text-align: center; }
.streak-note .x2 { color: #3ddc97; }

/* Lifetime plan card */
.lifetime-card { margin: 14px 0 6px; padding: 18px; border-radius: 22px; color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 100% 0%, rgba(255, 207, 74, .35), transparent 55%), linear-gradient(160deg, #2a2236, #121016);
  border: 1px solid rgba(255, 207, 74, .45); box-shadow: 0 18px 40px rgba(18, 16, 22, .25); }
.lifetime-card .eyebrow { color: #ffcf4a; }
.lifetime-card .lt-price { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 8px; }
.lifetime-card .lt-price b { font: 800 40px/1 var(--display); letter-spacing: -.02em; }
.lifetime-card .lt-price span { opacity: .75; font-size: 14px; }
.lifetime-card ul { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 6px; }
.lifetime-card li { position: relative; padding-left: 26px; font-size: 15px; }
.lifetime-card li::before { content: "\2713"; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 800; color: #3a2400; background: #ffcf4a; }
.lifetime-card .lt-adult { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; opacity: .9; margin: 4px 0 12px; }
.lifetime-card .lt-adult input { margin-top: 2px; width: 18px; height: 18px; accent-color: #ffcf4a; flex: none; }
.lifetime-card a { color: #ffcf4a; }
.lifetime-card .small { margin: 10px 0 0; opacity: .65; }
.lifetime-card.owned b { font-family: var(--display); font-size: 20px; display: block; margin: 4px 0; }
.lifetime-card.owned p { margin: 0; opacity: .85; }

/* Lifetime: badge, card back, banner (only Lifetime owners) */
.tier-badge.t-lifetime { color: #1a1206; background: linear-gradient(110deg, #ffcf4a 0%, #fff4c9 22%, #ffb347 45%, #ff7ad9 70%, #ffcf4a 100%);
  background-size: 220% 100%; animation: ltShimmer 3s linear infinite; box-shadow: 0 0 0 1.5px #17151d, 0 0 12px rgba(255, 207, 74, .45); }
.name-lifetime { color: #e0a800; }
@keyframes ltShimmer { to { background-position: -220% 0; } }
.cos-back-lifetime { position: relative; overflow: hidden; border-color: #ffcf4a !important;
  background: radial-gradient(circle at 50% 42%, rgba(255, 207, 74, .9) 0 9%, transparent 10%),
              repeating-conic-gradient(from 0deg, #1d1609 0 10deg, #2b2010 10deg 20deg), #120d05 !important; }
.cos-back-lifetime::before { content: "\221E"; position: absolute; left: 0; right: 0; top: 58%; text-align: center; font: 800 18px/1 var(--display); color: #ffcf4a; text-shadow: 0 0 8px rgba(255, 207, 74, .7); }
.cos-back-lifetime::after { content: ""; position: absolute; inset: 0; display: block !important;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 240, 190, .55) 50%, transparent 65%); background-size: 250% 100%; animation: ltShimmer 2.6s linear infinite; }
.banner-lifetime { background: linear-gradient(110deg, #120d05, #6b4a0c 25%, #ffcf4a 45%, #ff7ad9 60%, #6b4a0c 80%, #120d05); background-size: 220% 100%; animation: ltShimmer 6s linear infinite; }
.lifetime-card .lt-preview { display: flex; gap: 14px; align-items: center; margin: 0 0 12px; }
.lifetime-card .lt-preview .banner-swatch { width: 120px; height: 34px; border-radius: 8px; margin-bottom: 8px; }
@media (prefers-reduced-motion: reduce) { .tier-badge.t-lifetime, .cos-back-lifetime::after, .banner-lifetime { animation: none; } }

/* Lifetime owners wall (top of the Founders wall) */
.lifetime-wall { display: grid; gap: 8px; padding: 12px; border-radius: 20px; border: 1px solid rgba(255, 207, 74, .5);
  background: radial-gradient(120% 120% at 100% 0%, rgba(255, 207, 74, .28), transparent 60%), linear-gradient(160deg, #2a2236, #121016); }
.lw-entry { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; color: #fff; text-decoration: none;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 207, 74, .18); transition: background .2s ease; }
.lw-entry:hover { background: rgba(255, 207, 74, .12); }
.lw-entry .grow { display: grid; gap: 2px; min-width: 0; }
.lw-entry b { font-family: var(--display); font-size: 16px; color: #ffd65a; }
.lw-entry small { color: rgba(255, 255, 255, .6); font-size: 12px; }