/* ═══════════════════════════════════════════
   Memoroam — Gacha (Collection) tab
   Class prefix: gc-

   Two sub-views inside #pageGacha:
     .gc-view-landing  — Featured banner + Daily Pack hero + Explore card
     .gc-view-all      — All Countries binder (195-grid)
   Switched by toggling #pageGacha.is-view-all. Slide handled by absolute
   positioning + translateX. JS managed in js/gacha/gacha.js.
   ═══════════════════════════════════════════ */

/* ── Sub-view positioning & slide transition ── */
#pageGacha .gc-view{
  position:absolute;
  inset:0;
  transition:transform .32s cubic-bezier(.4,0,.2,1), opacity .24s ease;
  will-change:transform;
}
/* Landing now scrolls — Featured carousel + France hero + Shop CTA together
   exceed viewport height. Browse sub-view (gc-view-all) keeps its scroll
   for the long country list. */
/* Landing centres its Pack pane vertically, so drop .page-scroll's 110px
   nav-clearance padding (the .page already reserves the nav's 76px) — that
   padding was pushing all content upward. Modest bottom gap kept. */
#pageGacha .gc-view-landing{transform:translateX(0);opacity:1;overflow-y:auto;display:flex;flex-direction:column;padding-bottom:20px;}
/* Browse opens as a bottom sheet — slides up from below, leaving a peek of
   the dimmed landing at the top. */
#pageGacha .gc-view-all{
  top:7vh;bottom:0;height:auto;   /* 93vh tall; override .page-scroll's height:100% */
  border-radius:24px 24px 0 0;
  background:var(--bg);
  box-shadow:0 -10px 44px rgba(0,0,0,.20);
  transform:translateY(100%);
  opacity:1;
  pointer-events:none;
  z-index:5;
}
#pageGacha.is-view-all .gc-view-landing{
  pointer-events:none;   /* stays in place behind the scrim */
}
#pageGacha.is-view-all .gc-view-all{
  transform:translateY(0);
  pointer-events:auto;
}

/* Scrim behind the sheet (dims the landing peek; tap to dismiss). */
.gc-sheet-scrim{
  position:absolute;inset:0;z-index:4;
  background:rgba(20,16,12,.42);
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
#pageGacha.is-view-all .gc-sheet-scrim{opacity:1;pointer-events:auto;}

/* Grab handle — sticky at the top of the sheet; drag down to dismiss. */
.gc-sheet-handle{
  position:sticky;top:0;z-index:3;
  margin:0 -18px;                 /* full-bleed over .page-scroll's side padding */
  display:flex;align-items:center;justify-content:center;
  padding:11px 0 5px;
  background:var(--bg);
  border-radius:24px 24px 0 0;
  cursor:grab;touch-action:none;
}
.gc-sheet-handle span{
  width:38px;height:5px;border-radius:999px;
  background:rgba(0,0,0,.16);
}
[data-theme="dark"] .gc-sheet-handle span{background:rgba(255,255,255,.22);}

/* ── Top bar (title + currency chips) ── */
.gc-topbar{
  display:flex;
  justify-content:space-between;
  /* Top-align so the "Market" title sits at the same 52px offset as the
     other tabs' headers — flex-end dragged it down to bottom-align with
     the taller currency chips. */
  align-items:flex-start;
  gap:12px;
  padding:52px 0 14px;
}
/* Title uses the shared .app-header-title (layout.css) so the Market
   header matches Tickets / Travel Planner / Profile. */
.gc-topbar-title{display:flex;flex-direction:column;gap:2px;min-width:0;}

/* ── Currency row ── */
.gc-currency-row{display:flex;gap:8px;flex-shrink:0;align-items:center;}
/* Cream pill (our aesthetic), Forest-style layout: a coin medallion on the
   left and a welded "+" button on the right — two matched circles flanking
   the count. */
.gc-coin{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 6px 5px 5px;
  border-radius:999px;
  background:var(--card);
  border:1px solid var(--border);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 2px 6px rgba(0,0,0,.06);
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;font-weight:700;
  color:var(--text);
  letter-spacing:.02em;
  cursor:pointer;
  transition:transform .15s ease;
}
.gc-coin:active{transform:scale(.96);}

/* Plain icon (no medallion) sitting directly in the pill. */
.gc-coin-icon{
  width:26px;height:26px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
}
.gc-coin-icon img{width:21px;height:21px;object-fit:contain;}
.gc-coin-amt{line-height:1;font-variant-numeric:tabular-nums;padding:0 1px;}

/* Bamboo (premium) — welded "+" top-up button. The shoots artwork is much
   narrower than the leaf (32% vs 68% of its canvas), so it carries ~4px more
   transparent margin; pull the count in to even the icon-to-number gap. */
.gc-coin-bamboo{padding-right:4px;}
.gc-coin-bamboo .gc-coin-icon{margin-right:-4px;}
.gc-coin-plus{
  width:22px;height:22px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:linear-gradient(135deg,#9DC265 0%,#76A046 100%);
  color:#fff;
  box-shadow:0 1px 3px rgba(74,107,42,.32), inset 0 1px 0 rgba(255,255,255,.40);
}
.gc-coin-plus svg{display:block;}

/* Leaves (free) — no top-up button. */
.gc-coin-sprout{padding-right:12px;}

/* Pack actions — Collections / Store tiles below the pack hero. */
.gc-pack-actions{
  display:flex;gap:12px;
  margin-top:14px;
}
.gc-pack-action{
  position:relative;
  overflow:hidden;
  flex:1;
  min-height:152px;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:14px;
  border:none;border-radius:20px;
  background:var(--card);
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.07);
  transition:transform .15s ease, box-shadow .25s ease;
}
.gc-pack-action:active{transform:translateY(1px);box-shadow:0 3px 10px rgba(0,0,0,.06);}
/* Full-bleed watercolour scene filling the tile edge-to-edge. The art bakes
   in a warm cream ground so it blends with the card and reads as a "paper
   card" in dark mode too. cover (not contain) so it always fills the tile;
   overflow:hidden on the parent clips it to the 20px corners. Removes itself
   on 404 → clean card + label fallback. */
.gc-pack-action-art{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  pointer-events:none;
  -webkit-user-select:none;user-select:none;
  /* Soft wash, not a solid picture — the art reads as watercolour wrapped
     over the cream tile. Tune this single value: lower = more washed-out. */
  opacity:.5;
  /* Promote to its own compositing layer rasterised at device resolution,
     so the detailed art isn't downsampled along with the huge 500%-wide
     .page-strip layer on high-DPI WebViews. */
  transform:translateZ(0);
  backface-visibility:hidden;
}
/* The Store scene has cream margins baked into the square, leaving white
   space in the tile. Zoom in so the stall fills more of the card — the
   parent's overflow:hidden crops the overflow. Tune the scale to taste. */
.gc-pack-action-art--store{
  transform:scale(1.05) translateZ(0);
}
/* Plain grey label at the bottom-left, layered above the art. */
.gc-pack-action-label{
  position:relative;z-index:1;
  padding-left:4px;
  font-family:'DM Sans',sans-serif;font-weight:700;font-size:15px;
  color:#6F665E;text-align:left;letter-spacing:.01em;
}
[data-theme="dark"] .gc-pack-action{box-shadow:0 6px 18px rgba(0,0,0,.32);}
[data-theme="dark"] .gc-pack-action-label{color:#9A9088;}

/* ── My Packs overlay (empty state for now) ── */
.gc-mypacks{
  position:fixed;inset:0;z-index:10001;
  background:var(--bg);
  opacity:0;pointer-events:none;
  transform:translateY(8px);
  transition:opacity .28s ease, transform .3s cubic-bezier(.32,.72,.24,1);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;
}
.gc-mypacks.is-open{opacity:1;pointer-events:auto;transform:translateY(0);}
.gc-mypacks-empty{
  flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:0 36px calc(60px + env(safe-area-inset-bottom));
}
.gc-mypacks-empty-icon{
  width:84px;height:84px;margin-bottom:16px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:rgba(108,143,62,.10);
  color:#6C8F3E;
}
.gc-mypacks-empty-title{
  font-family:'Playfair Display',serif;font-weight:700;
  font-size:22px;color:var(--text);margin-bottom:6px;
}
.gc-mypacks-empty-sub{
  font-family:'DM Sans',sans-serif;font-size:14px;line-height:1.5;
  color:var(--muted);max-width:260px;margin-bottom:20px;
}
.gc-mypacks-empty-cta{
  padding:11px 22px;border:none;border-radius:999px;
  background:linear-gradient(135deg,#C68A3A 0%,#A06F2B 100%);
  font-family:'DM Sans',sans-serif;font-size:14px;font-weight:700;color:#fff;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(160,111,43,.28);
  transition:transform .12s ease;
}
.gc-mypacks-empty-cta:active{transform:scale(.96);}
[data-theme="dark"] .gc-mypacks-empty-icon{background:rgba(168,199,107,.12);color:#A8C76B;}

/* ── Body wrapper ── centres the pack hero + action tiles between the
   header and the bottom nav. */
.gc-body{padding:4px 0 24px;flex:1;display:flex;flex-direction:column;justify-content:center;gap:6px;}

/* ── Store sheet (seasonal / daily / assets) — slide-up, mirrors Collections ── */
.gc-store{
  position:fixed;inset:0;z-index:10001;
  pointer-events:none;
}
.gc-store.is-open{pointer-events:auto;}
.gc-store-scrim{
  position:absolute;inset:0;
  background:rgba(20,16,12,.42);
  opacity:0;transition:opacity .3s ease;
}
.gc-store.is-open .gc-store-scrim{opacity:1;}
.gc-store-sheet{
  position:absolute;left:0;right:0;bottom:0;
  height:93vh;
  background:var(--bg);
  border-radius:24px 24px 0 0;
  box-shadow:0 -10px 44px rgba(0,0,0,.20);
  transform:translateY(100%);
  transition:transform .34s cubic-bezier(.32,.72,.24,1);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.gc-store.is-open .gc-store-sheet{transform:translateY(0);}
.gc-store-sheet .gc-sheet-handle{margin:0;}   /* no side padding to bleed over here */
.gc-store-body{padding:4px 18px calc(28px + env(safe-area-inset-bottom));}
.gc-store-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
  margin:6px 2px 14px;
}
.gc-store-title{
  font-family:'Playfair Display',serif;font-weight:700;
  font-size:24px;color:var(--text);
  margin:0;
}
/* Bamboo balance chip — spec §6.3 wants the spend currency prominent in shop
   flows. Tap routes to the top-up popup. Sprouts deliberately absent (they
   cannot buy shop items). */
.gc-store-bal{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 8px 6px 9px;
  border:1px solid rgba(198,138,58,.28);
  border-radius:999px;
  background:linear-gradient(135deg, rgba(198,138,58,.10) 0%, rgba(198,138,58,.04) 100%);
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;font-weight:600;color:var(--text);
  font-variant-numeric:tabular-nums;
  cursor:pointer;
  transition:transform .12s ease;
}
.gc-store-bal:active{transform:scale(.96);}
.gc-store-bal-icon{display:block;flex-shrink:0;}
.gc-store-bal-plus{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;
  background:var(--gold);color:var(--paper-2);
  margin-left:1px;
}
/* Small uppercase section label above the featured carousel. */
.gc-store-eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);
  margin:2px 2px 8px;
}

/* ── Featured store carousel (Limited + Daily + Shop, swipe-snap) ── */
.gc-featured{
  margin-top:4px;
  position:relative;  /* anchor for the absolutely-positioned dots overlay */
}

.gc-featured-scroller{
  display:flex;
  gap:12px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
}
.gc-featured-scroller::-webkit-scrollbar{display:none;}

.gc-featured-card{
  flex:0 0 100%;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  position:relative;
  border-radius:14px;
  background:var(--card);
  overflow:hidden;
  cursor:pointer;
  transition:transform .15s ease;
  border:1px solid rgba(198,138,58,.18);
}
.gc-featured-card:active{transform:scale(.99);}
.gc-featured-card-daily{border-color:rgba(108,143,62,.20);}

.gc-featured-strip{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 14px;
  border-bottom:1px solid var(--border);
}
.gc-featured-card-limited .gc-featured-strip{
  background:linear-gradient(180deg, rgba(198,138,58,.10) 0%, rgba(198,138,58,0) 100%);
}
.gc-featured-card-daily .gc-featured-strip{
  background:linear-gradient(180deg, rgba(108,143,62,.10) 0%, rgba(108,143,62,0) 100%);
}

.gc-featured-pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px 3px 7px;
  border-radius:999px;
  font-family:'IBM Plex Mono',monospace;
  font-size:9.5px;font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  box-shadow:0 1px 2px rgba(0,0,0,.12), 0 1px 0 rgba(255,255,255,.25) inset;
}
.gc-featured-pill-limited{
  background:var(--gold);
  color:var(--paper-2);
}
.gc-featured-pill-daily{
  background:linear-gradient(135deg, #7DA546 0%, #5D8033 100%);
  color:#FBF7E8;
  padding:3px 9px;
}
.gc-featured-pill-dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--paper-2);
  animation:gcFeaturedPulse 2s ease-in-out infinite;
}
@keyframes gcFeaturedPulse{
  0%,100%{opacity:.5;transform:scale(1);}
  50%{opacity:1;transform:scale(1.2);}
}
.gc-featured-countdown{
  font-family:'IBM Plex Mono',monospace;
  font-size:12.5px;font-weight:600;
  letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
}
.gc-featured-card-limited .gc-featured-countdown{color:var(--gold);}
.gc-featured-card-daily   .gc-featured-countdown{color:#6C8F3E;}

.gc-featured-body{
  display:flex;align-items:center;gap:14px;
  padding:20px 14px 30px;  /* extra bottom padding so dots overlay sits clear of content */
}
.gc-featured-thumb{
  width:82px;height:82px;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--border);
}
.gc-featured-thumb-limited{
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,200,220,.55) 0%, rgba(255,200,220,0) 65%),
    linear-gradient(165deg, #FCF1EE 0%, var(--paper-2) 100%);
}
.gc-featured-thumb-daily{
  background:
    radial-gradient(ellipse at 50% 30%, rgba(168,199,107,.40) 0%, rgba(168,199,107,0) 65%),
    linear-gradient(165deg, #F4FBE8 0%, var(--paper-2) 100%);
}
.gc-featured-thumb-img{
  width:64%;height:auto;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.08));
  pointer-events:none;
}
.gc-featured-meta{
  display:flex;flex-direction:column;gap:2px;
  min-width:0;flex:1;
}
.gc-featured-name{
  font-family:'Playfair Display',serif;
  font-weight:700;font-size:15px;
  color:var(--text);
  line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.gc-featured-sub{
  font-family:'DM Sans',sans-serif;
  font-size:11px;
  color:var(--muted);
  letter-spacing:.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.gc-featured-buy{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 11px;
  border:none;border-radius:999px;
  background:linear-gradient(135deg, #D49A50 0%, #9C6826 100%);
  color:#F4F0E2;
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  flex-shrink:0;
  cursor:pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 4px 10px rgba(156,104,38,.30);
  transition:transform .12s ease;
}
.gc-featured-buy:active{transform:scale(.96);}
.gc-featured-price{
  display:inline-flex;align-items:center;gap:3px;
  padding-right:7px;
  border-right:1px solid rgba(255,255,255,.22);
  font-variant-numeric:tabular-nums;
}
.gc-featured-price svg{opacity:.85;}
.gc-featured-buy-label{letter-spacing:.10em;}

/* Pagination dots — centered row below the seasonal hero carousel. */
.gc-featured-dots{
  display:flex;
  justify-content:center;
  gap:5px;
  margin-top:9px;
  pointer-events:none;  /* don't block card taps */
}
.gc-featured-dot{
  width:5px;height:5px;border-radius:50%;
  background:rgba(0,0,0,.18);
  transition:background-color .2s ease, transform .2s ease;
}
.gc-featured-dot.is-active{
  background:var(--gold);
  transform:scale(1.3);
}

/* ── Shop carousel card (third panel) ── */
.gc-featured-card-shop{border-color:rgba(198,138,58,.22);}
.gc-featured-card-shop .gc-featured-strip{
  background:linear-gradient(180deg, rgba(198,138,58,.08) 0%, rgba(198,138,58,0) 100%);
}
.gc-featured-pill-shop{
  background:linear-gradient(135deg, var(--gold) 0%, #A0712B 100%);
  color:var(--paper-2);
  padding:3px 10px;
}
.gc-featured-shop-arrow{
  color:var(--gold);
  opacity:.65;
  display:inline-flex;align-items:center;
}
.gc-featured-thumb-shop{
  background:
    radial-gradient(ellipse at 50% 30%, rgba(198,138,58,.18) 0%, rgba(198,138,58,0) 65%),
    linear-gradient(165deg, rgba(198,138,58,.06) 0%, var(--paper-2) 100%);
  color:var(--gold);
}
.gc-featured-buy-shop{
  background:linear-gradient(135deg, var(--gold) 0%, #9C6826 100%);
  padding:8px 16px;
}
[data-theme="dark"] .gc-featured-card-shop{border-color:rgba(232,184,113,.18);}
[data-theme="dark"] .gc-featured-card-shop .gc-featured-strip{
  background:linear-gradient(180deg, rgba(232,184,113,.10) 0%, rgba(232,184,113,0) 100%);
}
[data-theme="dark"] .gc-featured-thumb-shop{
  background:
    radial-gradient(ellipse at 50% 30%, rgba(198,138,58,.14) 0%, rgba(198,138,58,0) 65%),
    linear-gradient(165deg, rgba(198,138,58,.04) 0%, var(--paper-2) 100%);
}

/* ── Seasonal hero banner (carousel) ───────────────────────────────────────
   Full-bleed cinematic banner. An art-directed seasonal scene fills the whole
   card; text sits over a bottom scrim; a rarity glow rim hugs the edge. ── */
.gc-sb{
  position:relative;isolation:isolate;
  flex:0 0 100%;
  scroll-snap-align:start;scroll-snap-stop:always;
  height:194px;
  border-radius:20px;
  overflow:hidden;
  cursor:pointer;
  border:1px solid rgba(67,47,24,.10);
  background:var(--card);
  box-shadow:0 6px 22px -10px rgba(67,47,24,.45);
  transition:transform .16s ease;
}
.gc-sb:active{transform:scale(.985);}

/* Glass finish — a soft top highlight + inner floor shadow for depth. Neutral,
   no coloured rim (rarity reads through the scene + countdown, not a border). */
.gc-sb-glow{
  position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30), inset 0 -22px 30px -24px rgba(28,16,10,.5);
}

/* Themed scene — the art-directed gradient backdrop + watermark + drift. */
.gc-sb-scene{position:absolute;inset:0;z-index:0;overflow:hidden;}
.gc-sb-scene[data-scene="sakura"]{
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(255,214,228,.95) 0%, rgba(255,214,228,0) 55%),
    radial-gradient(90% 80% at 12% 90%, rgba(255,233,224,.9) 0%, rgba(255,233,224,0) 60%),
    linear-gradient(155deg, #FBE3EC 0%, #F7D7E2 38%, #F4E6DA 100%);
}
.gc-sb-scene[data-scene="lantern"]{
  background:
    radial-gradient(110% 85% at 80% 18%, rgba(255,196,128,.9) 0%, rgba(255,196,128,0) 55%),
    radial-gradient(90% 80% at 10% 95%, rgba(120,72,108,.55) 0%, rgba(120,72,108,0) 60%),
    linear-gradient(160deg, #5A3B66 0%, #8E4F5E 46%, #C9784E 100%);
}

/* Big faint watermark glyph, top-right, bleeding off the edge. */
.gc-sb-motif{
  position:absolute;top:-26px;right:-22px;
  width:184px;height:184px;display:block;
  transform:rotate(-8deg);
  opacity:.5;
}
.gc-sb-motif svg{width:100%;height:100%;display:block;}
.gc-sb-scene[data-scene="sakura"] .gc-sb-motif{color:#E48AAE;opacity:.42;}
.gc-sb-scene[data-scene="lantern"] .gc-sb-motif{color:#FFD79A;opacity:.5;}

/* Drifting motes — GPU-only (transform/opacity). 7 spans, staggered by --i. */
.gc-sb-drift{position:absolute;inset:0;pointer-events:none;}
.gc-sb-drift span{
  position:absolute;top:-14px;
  left:calc(8% + (var(--i) * 13%));
  width:9px;height:9px;border-radius:60% 0 60% 0;
  opacity:0;
  animation:gcSbDrift 7s linear infinite;
  animation-delay:calc(var(--i) * -1.15s);
  will-change:transform,opacity;
}
.gc-sb-drift.is-petal span{background:rgba(255,255,255,.78);box-shadow:0 0 4px rgba(232,138,174,.5);}
.gc-sb-drift.is-ember span{
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,222,160,.95);box-shadow:0 0 7px rgba(255,196,120,.85);
  animation-name:gcSbRise;animation-duration:8s;
}
@keyframes gcSbDrift{
  0%{transform:translate3d(0,-14px,0) rotate(0deg);opacity:0;}
  12%{opacity:.85;}
  100%{transform:translate3d(-34px,210px,0) rotate(220deg);opacity:0;}
}
@keyframes gcSbRise{
  0%{transform:translate3d(0,210px,0) scale(.7);opacity:0;}
  18%{opacity:.9;}
  100%{transform:translate3d(18px,-14px,0) scale(1);opacity:0;}
}

/* Bottom scrim — keeps overlaid text legible over any scene. */
.gc-sb-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top, rgba(28,16,10,.62) 0%, rgba(28,16,10,.26) 30%, rgba(28,16,10,0) 58%);
}

/* Top row — LIMITED badge + urgency countdown chip. */
.gc-sb-top{
  position:absolute;top:13px;left:14px;right:14px;z-index:3;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
/* LIMITED badge — frosted dark pill (matches the countdown chip), a twinkling
   gold spark, and a slow shimmer sweep across the wordmark. */
.gc-sb-pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 11px 5px 8px;border-radius:999px;
  background:rgba(28,16,10,.42);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 2px 8px rgba(28,16,10,.22);
}
.gc-sb-pill-spark{
  width:13px;height:13px;flex:0 0 auto;color:#FFD98A;
  filter:drop-shadow(0 0 3px rgba(255,205,120,.7));
  animation:gcSbSpark 2.8s ease-in-out infinite;
}
.gc-sb-pill-txt{
  font-family:'DM Sans',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:#FFF3DE;
  background:linear-gradient(100deg, #FFF3DE 0%, #FFF3DE 40%, #FFFFFF 50%, #FFF3DE 60%, #FFF3DE 100%);
  background-size:240% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:gcSbShimmer 3.6s linear infinite;
}
@keyframes gcSbSpark{0%,100%{transform:scale(1) rotate(0);opacity:.85;}50%{transform:scale(1.2) rotate(20deg);opacity:1;}}
@keyframes gcSbShimmer{0%{background-position:150% 0;}100%{background-position:-50% 0;}}
.gc-sb-cd{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:999px;
  background:rgba(28,16,10,.42);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;font-weight:700;letter-spacing:.04em;
  color:#FFE7B0;font-variant-numeric:tabular-nums;
}

/* Foot — name + flag·sub on the left, View collection pill on the right. */
.gc-sb-foot{
  position:absolute;left:16px;right:14px;bottom:14px;z-index:3;
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
}
.gc-sb-meta{min-width:0;}
.gc-sb-name{
  font-family:'Playfair Display',serif;font-weight:700;
  font-size:20px;line-height:1.12;color:#FFF7EE;
  text-shadow:0 1px 8px rgba(0,0,0,.4);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.gc-sb-sub{
  display:flex;align-items:center;gap:6px;margin-top:4px;
  font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;
  color:rgba(255,247,238,.82);letter-spacing:.01em;
  overflow:hidden;white-space:nowrap;
}
.gc-sb-flag{
  flex:0 0 auto;border-radius:2px;object-fit:cover;
  box-shadow:0 1px 3px rgba(0,0,0,.4);
}
.gc-sb-view{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:3px;
  padding:9px 11px 9px 15px;border-radius:999px;
  background:rgba(255,247,238,.94);
  color:#3A2410;
  font-family:'DM Sans',sans-serif;
  box-shadow:0 5px 14px -4px rgba(28,16,10,.5);
}
.gc-sb-view-txt{font-size:12.5px;font-weight:700;letter-spacing:.005em;white-space:nowrap;}
.gc-sb-view-chev{width:14px;height:14px;flex:0 0 auto;opacity:.7;}
@media (prefers-reduced-motion: reduce){
  .gc-sb-drift span{animation:none;opacity:0;}
  .gc-sb-pill-spark,.gc-sb-pill-txt{animation:none;}
}

/* Section heads (shared by Daily + Templates). */
.gc-st-sec-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:10px;margin:0 2px 11px;
}
.gc-st-sec-titles{display:flex;flex-direction:column;gap:1px;min-width:0;}
.gc-st-sec-title{
  font-family:'Playfair Display',serif;font-weight:700;
  font-size:18px;color:var(--text);margin:0;line-height:1.15;
}
.gc-st-sec-sub{
  font-family:'DM Sans',sans-serif;font-size:11.5px;color:var(--muted);
  letter-spacing:.01em;
}

/* ── 2 · Daily items ── */
.gc-daily{margin-top:26px;}
/* Minimal "resets in" indicator — clock glyph + mono time, no heavy pill. */
.gc-daily-timer{
  flex:0 0 auto;
  display:inline-flex;align-items:baseline;gap:5px;
  color:var(--muted);
  font-family:'IBM Plex Mono',monospace;
  font-size:12.5px;font-weight:500;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
}
.gc-daily-timer svg{
  width:12px;height:12px;align-self:center;
  color:var(--gold);opacity:.85;
}
.gc-daily-timer span{color:var(--text);font-weight:600;}
/* Swipeable carousel of big cards — one prominent, a peek of the next so it
   reads as scrollable (vs squishing all three into a row). */
.gc-daily-grid{
  display:flex;gap:12px;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;
  margin:0 -2px;padding:2px 2px 4px;
}
.gc-daily-grid::-webkit-scrollbar{display:none;}
.gc-daily-cell{
  flex:0 0 76%;max-width:280px;
  scroll-snap-align:start;
  scroll-snap-stop:always;   /* one card per swipe — can't glide past several */
  display:flex;flex-direction:column;min-width:0;
}

/* ── 3 · Templates ── */
.gc-tpl{margin-top:28px;}
.gc-tpl-list{display:flex;flex-direction:column;gap:10px;}
.gc-tpl-card{
  display:flex;align-items:center;gap:13px;
  width:100%;text-align:left;
  padding:12px;
  border:1px solid var(--border);border-radius:14px;
  background:var(--card);
  cursor:pointer;
  transition:transform .14s ease, border-color .18s ease;
}
.gc-tpl-card:active{transform:scale(.985);}
.gc-tpl-art{
  flex:0 0 56px;height:56px;
  display:flex;align-items:center;justify-content:center;
  border-radius:11px;
  background:
    radial-gradient(ellipse at 50% 25%, rgba(198,138,58,.16) 0%, rgba(198,138,58,0) 65%),
    linear-gradient(160deg, rgba(198,138,58,.08) 0%, var(--paper-2) 100%);
  color:var(--gold);
  box-shadow:inset 0 0 0 1px var(--border);
}
.gc-tpl-art svg{width:26px;height:26px;}
.gc-tpl-meta{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.gc-tpl-title{
  font-family:'Playfair Display',serif;font-weight:700;
  font-size:15px;color:var(--text);line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.gc-tpl-sub{
  font-family:'DM Sans',sans-serif;font-size:11.5px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.gc-tpl-chev{flex:0 0 auto;color:var(--muted);opacity:.6;display:inline-flex;}

/* ── Daily card (full-size, real asset art) ──
   A trading-card portrait of the real design with a footer: name over country
   on the left, Bamboo price on the right. Art loads async into .gc-dc-img. */
.gc-dc{
  display:flex;flex-direction:column;width:100%;
  padding:0;text-align:left;
  border:1px solid var(--border);border-radius:13px;
  background:var(--card);
  overflow:hidden;
}

.gc-dc-art{
  position:relative;
  aspect-ratio:3 / 4;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  background:linear-gradient(165deg, var(--paper) 0%, var(--paper-2) 100%);
  border-bottom:1px solid var(--border);
}
/* Backgrounds fill edge-to-edge; stamps/stickers sit contained over the flag. */
.gc-dc-img{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.gc-dc-img img{
  width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity .35s ease;
}
.gc-dc.is-art-loaded .gc-dc-img img{opacity:1;}
.gc-dc-art.is-contained .gc-dc-img{padding:11px;}
.gc-dc-art.is-contained .gc-dc-img img{
  width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.22));
}
/* Blurred flag wash behind a contained stamp/sticker. */
.gc-dc-backdrop{position:absolute;inset:0;overflow:hidden;opacity:.42;}
.gc-dc-backdrop img{
  width:100%;height:100%;object-fit:cover;
  filter:blur(11px) saturate(1.15);transform:scale(1.25);
}
/* Rarity stars — a dark translucent badge so they read on any artwork (light
   watercolours washed them out before). Star colour set per rarity below. */
.gc-dc-rar{
  position:absolute;top:6px;left:6px;z-index:2;
  display:inline-flex;align-items:center;
  padding:2px 6px;border-radius:999px;
  background:rgba(26,20,14,.5);
  font-size:10px;letter-spacing:1.5px;line-height:1;
  color:#FFFFFF;
  box-shadow:0 1px 3px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.12);
}
/* Transparent tap overlay — covers the art; tapping opens the 3D holo view. */
.gc-dc-tap{
  position:absolute;inset:0;z-index:3;
  border:none;background:transparent;padding:0;margin:0;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.gc-dc-tap:active{background:rgba(0,0,0,.05);}

/* Footer — stacked: name, then country with flag, then the price pill. */
.gc-dc-foot{
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  padding:8px 9px 9px;
}
.gc-dc-name{
  font-family:'Playfair Display',serif;font-weight:700;
  font-size:13px;color:var(--text);line-height:1.18;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.gc-dc-country{
  display:inline-flex;align-items:center;gap:5px;min-width:0;max-width:100%;
  font-family:'DM Sans',sans-serif;font-size:10.5px;color:var(--muted);
}
.gc-dc-country span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gc-dc-flag{
  flex:0 0 auto;object-fit:cover;border-radius:2px;
  box-shadow:0 0 0 1px rgba(0,0,0,.08);
}
/* Filled, tappable Buy button (price lives inside it). */
.gc-dc-buy{
  align-self:stretch;justify-content:center;
  display:inline-flex;align-items:center;gap:4px;
  margin-top:3px;
  padding:7px 11px;
  border:none;border-radius:999px;
  background:linear-gradient(135deg, #D49A50 0%, #9C6826 100%);
  color:#F7F2E6;
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;font-weight:700;
  font-variant-numeric:tabular-nums;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 3px 8px rgba(156,104,38,.30);
  transition:transform .12s ease, filter .12s ease;
}
.gc-dc-buy:active{transform:scale(.95);}
.gc-dc-buy img{display:block;}

/* Rarity accents — border + star colour (mirrors the pack-card palette, brightened
   for legibility on the dark star badge). */
.gc-dc.rarity-rare{border-color:rgba(90,158,158,.32);}
.gc-dc.rarity-rare .gc-dc-rar{color:#7FD3D3;}
.gc-dc.rarity-legendary{border-color:rgba(123,82,171,.34);}
.gc-dc.rarity-legendary .gc-dc-rar{color:#C49BF0;}
.gc-dc.rarity-mythic{border-color:rgba(212,168,67,.42);box-shadow:0 3px 14px rgba(212,168,67,.20);}
.gc-dc.rarity-mythic .gc-dc-rar{color:#F2CE63;}
.gc-dc.rarity-wonder{border-color:rgba(192,57,43,.42);box-shadow:0 3px 14px rgba(192,57,43,.20);}
.gc-dc.rarity-wonder .gc-dc-rar{color:#F2897C;}

/* Empty / skeleton states. */
.gc-dc-empty{cursor:default;}
.gc-dc-empty-glyph svg{width:30px;height:30px;opacity:.4;color:var(--muted);}
.gc-dc-empty .gc-dc-name{color:var(--muted);}
.gc-dc-skel{cursor:default;}
.gc-dc-skel .gc-dc-art{background:linear-gradient(110deg, var(--paper-2) 30%, rgba(0,0,0,.04) 50%, var(--paper-2) 70%);background-size:200% 100%;animation:gcDcShimmer 1.3s linear infinite;}
.gc-dc-skel .gc-dc-name{display:block;width:60%;height:9px;border-radius:3px;background:rgba(0,0,0,.07);}
@keyframes gcDcShimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

/* ── Hero: Daily Pack ── */
.gc-hero{
  padding:18px 0 8px;
}
.gc-hero-card{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  gap:10px;
  padding:0;
  background:transparent;
  border:none;
  border-radius:0;
}
/* Slow breathing pulse on the gold dot when ready — adds a living
   detail at the status indicator without animating the whole card. */
@keyframes gcHeroReadyPulse{
  0%,100% { box-shadow:0 0 0 3px rgba(198,138,58,.18); }
  50%     { box-shadow:0 0 0 6px rgba(198,138,58,.08); }
}
/* Top-right "Change pack ›" link — opens the Browse view as a country
   picker. Lives in the flex flow (align-self) rather than absolute so it
   can't get covered by the pack art. Negative margins pull it into the
   card's padded corner so it doesn't push the pack art down. */
.gc-hero-change{
  align-self:flex-end;
  margin:0 0 -2px 0;
  border:none;background:transparent;
  padding:6px 4px;
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);
  opacity:.85;
  cursor:pointer;
  transition:opacity .15s ease, transform .15s ease;
}
.gc-hero-change:active{transform:scale(.96);opacity:1;}
.gc-hero-change span{margin-left:4px;font-size:12px;}
[data-theme="dark"] .gc-hero-change{color:var(--gold-soft);}
/* Coming-soon preview — reuses .gc-bcard-preview so the look exactly
   matches the Browse selection card (native script + English name +
   dashed padlock stamp, tinted by the country's --tint). Sized for the
   hero context. Color/opacity muting that on Browse comes via parent
   .gc-bcard selectors is re-stated here scoped to .gc-hero-preview. */
.gc-hero-preview{
  width:100%;
  max-width:340px;
  min-height:140px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.gc-hero-preview .gc-bcard-native,
.gc-hero-preview .gc-bcard-english{
  color:var(--muted);
  opacity:.50;
}
.gc-hero-preview .gc-bcard-stamp{
  color:var(--muted);
  border-color:var(--border);
  opacity:.50;
}

.gc-hero-pack-art-wrap{
  position:relative;
  width:100%;max-width:340px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .15s ease;
}
.gc-hero-card.is-ready .gc-hero-pack-art-wrap:active{
  transform:scale(.97);
}
/* Loading frame — reserves the pack's 16:9 footprint (transparent, no card) while
   the catalogue resolves, so the pack fades into a stable space with no flash. */
.gc-hero-pack-loading{width:100%;aspect-ratio:16/9;}
/* Panda mascot overlay — sits inside the seal's empty inner cream circle.
   Same percentages as the Browse card's .gc-bcard-seal-logo so the panda
   lands on the same spot of the pack image regardless of render scale.
   mix-blend-mode:multiply integrates the digital logo into the watercolour
   paper (whites dissolve into the cream, darks stay strong). */
.gc-hero-seal-logo{
  position:absolute;
  width:12%;
  aspect-ratio:1/1;
  transform:translate(-50%,-50%);
  object-fit:contain;
  pointer-events:none;
  opacity:0;   /* held until the pack art reveals, so the panda doesn't float over an empty frame */
  transition:opacity .5s ease .18s;
  mix-blend-mode:multiply;
  filter:saturate(.9) drop-shadow(0 1px 2px rgba(0,55,164,.12));
  z-index:1;
}
.gc-hero-pack-art-wrap.is-loaded .gc-hero-seal-logo{opacity:.92;}
.gc-hero-pack-art{
  width:100%;height:auto;
  aspect-ratio:16/9;   /* packs are locked to 16:9 — reserve the frame so the card doesn't jump when the art loads */
  object-fit:contain;
  /* Layered drop-shadows hug the pack's actual silhouette (drop-shadow
     respects alpha; box-shadow would cast a rect ignoring the watercolor
     edges). Two layers: a tight contact shadow and a larger soft lift. */
  filter:
    drop-shadow(0 2px 4px rgba(67,47,24,.12))
    drop-shadow(0 10px 22px rgba(67,47,24,.18));
  /* Smooth reveal: the signed pack art arrives a beat after the rest of the
     page, so hold it hidden + slightly small/low, then ease it up once loaded
     (.is-loaded is set on the wrap by the img's onload). No abrupt pop. */
  opacity:0;
  transform:scale(.94) translateY(10px);
  transition:opacity .55s ease, transform .65s cubic-bezier(.22,.61,.24,1), filter .4s ease;
  pointer-events:none;
}
.gc-hero-pack-art-wrap.is-loaded .gc-hero-pack-art{opacity:1;transform:none;}
/* Ready state — adds a third warm-gold halo around the pack so it reads
   as "lit up" when today's pack is unopened. */
.gc-hero-card.is-ready .gc-hero-pack-art{
  filter:
    drop-shadow(0 2px 4px rgba(67,47,24,.12))
    drop-shadow(0 10px 22px rgba(67,47,24,.18))
    drop-shadow(0 0 14px rgba(198,138,58,.32));
}
.gc-hero-status{
  font-family:'DM Sans',sans-serif;font-size:12px;color:var(--muted);
  display:inline-flex;align-items:center;gap:6px;
  line-height:1;
}
.gc-hero-status.is-ready::before{
  content:'';
  width:6px;height:6px;border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 3px rgba(198,138,58,.18);
  animation:gcHeroReadyPulse 2.4s ease-in-out infinite;
}
.gc-hero-cta{display:none;}
.gc-hero-cta-lock{display:none;}

/* ── Shop CTA — section card under the hero ── */
.gc-shop-cta{
  display:flex;align-items:center;gap:14px;
  width:100%;
  margin-top:14px;
  padding:14px 16px;
  background:var(--card);
  border:1px solid rgba(198,138,58,.18);
  border-radius:18px;
  cursor:pointer;
  text-align:left;
  font-family:inherit;color:var(--text);
  transition:transform .12s ease;
}
.gc-shop-cta:active{transform:scale(.99);}
.gc-shop-cta-icon{
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg, rgba(198,138,58,.10) 0%, rgba(198,138,58,.04) 100%);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--gold);
  flex-shrink:0;
  box-shadow:inset 0 0 0 1px rgba(198,138,58,.18);
}
.gc-shop-cta-meta{
  display:flex;flex-direction:column;gap:3px;
  min-width:0;flex:1;
}
.gc-shop-cta-title{
  font-family:'Playfair Display',serif;
  font-weight:700;font-size:17px;line-height:1.15;
  color:var(--text);
}
.gc-shop-cta-sub{
  font-family:'DM Sans',sans-serif;
  font-size:11px;
  color:var(--muted);
  letter-spacing:.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.gc-shop-cta-arrow{
  font-size:22px;
  color:var(--gold);
  opacity:.7;
  flex-shrink:0;
  line-height:1;
  margin-right:2px;
}

/* ── Postcard Rack — pack selection carousel ──
   Fullscreen overlay with a 3D ring of packs. User swipes to spin,
   taps the front-most pack to select it. Sits at z-index 9998 so
   Sits above the pack-open overlay so it can dissolve to reveal it. */
.gc-rack-overlay{
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  background:rgba(247,242,228,0);
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease, background-color .35s ease;
}
.gc-rack-overlay.is-open{
  opacity:1;
  pointer-events:auto;
  background:rgba(247,242,228,1);
}
.gc-rack-close{
  position:absolute;
  top:calc(20px + env(safe-area-inset-top));
  right:20px;
  width:40px;height:40px;
  border-radius:50%;
  border:none;
  background:var(--card);
  color:var(--text);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.06), inset 0 0 0 1px var(--border);
  transition:transform .12s ease;
  z-index:3;
}
.gc-rack-close:active{transform:scale(.92);}

.gc-rack-title{
  position:absolute;
  top:calc(28px + env(safe-area-inset-top));
  left:0;right:0;
  text-align:center;
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-size:28px;
  color:var(--text);
  letter-spacing:.01em;
  opacity:0;
  transform:translateY(12px);
  transition:opacity .5s ease .15s, transform .5s ease .15s;
}
.gc-rack-overlay.is-open .gc-rack-title{
  opacity:1;
  transform:translateY(0);
}
.gc-rack-subtitle{
  position:absolute;
  top:calc(64px + env(safe-area-inset-top));
  left:0;right:0;
  text-align:center;
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  opacity:0;
  transform:translateY(8px);
  transition:opacity .5s ease .25s, transform .5s ease .25s;
}
.gc-rack-overlay.is-open .gc-rack-subtitle{
  opacity:.7;
  transform:translateY(0);
}

.gc-rack-scene{
  position:relative;
  width:100%;
  height:55vh;
  display:flex;align-items:center;justify-content:center;
  overflow:visible;
}
.gc-rack-ring{
  position:relative;
  width:260px;
  height:100%;
  display:flex;align-items:center;justify-content:center;
}
.gc-rack-card{
  position:absolute;
  width:260px;
  transition:opacity .08s ease;
  will-change:transform, opacity;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.gc-rack-card-img{
  width:100%;height:auto;
  object-fit:contain;
  pointer-events:none;
  transition:filter .3s ease;
}
/* Drop-shadows are expensive on Android WebView when many cards animate.
   Apply only to the front card when the ring is NOT spinning. */
.gc-rack-overlay:not(.is-spinning) .gc-rack-card.is-front .gc-rack-card-img{
  filter:
    drop-shadow(0 4px 8px rgba(67,47,24,.18))
    drop-shadow(0 20px 40px rgba(67,47,24,.22))
    drop-shadow(0 0 18px rgba(198,138,58,.15));
}
.gc-rack-card-seal{
  position:absolute;
  width:12%;
  aspect-ratio:1/1;
  transform:translate(-50%,-50%);
  object-fit:contain;
  pointer-events:none;
  opacity:.92;
  mix-blend-mode:multiply;
  filter:saturate(.9) drop-shadow(0 1px 2px rgba(0,55,164,.12));
}

/* Selected pack — two-phase: glow, then expand + centre.
   Phase 1 (.is-selected): subtle gold glow builds around the pack.
   Phase 2 (.is-selected.is-presenting): pack scales up and centres
   in the viewport, ready to be opened. */
.gc-rack-card.is-selected{
  transition:transform .32s cubic-bezier(.22,1,.36,1),
             opacity .28s ease !important;
  transform:translateX(0) scale(1.0) !important;
  z-index:999 !important;
}
/* Lightweight drop-shadow during selection — big blur radii kill paint perf
   on Samsung WebView when combined with a simultaneous scale transition.
   No filter transition between selected → presenting; let transform do
   the visual work and keep the shadow static. */
.gc-rack-card.is-selected .gc-rack-card-img{
  filter:
    drop-shadow(0 8px 16px rgba(67,47,24,.22))
    drop-shadow(0 0 20px rgba(198,138,58,.32));
}
.gc-rack-card.is-selected.is-presenting{
  transition:transform .34s cubic-bezier(.22,1,.36,1) !important;
  transform:translateX(0) translateY(0) scale(1.25) !important;
}
/* Fade out non-selected cards — parent class set by JS (no :has(),
   unreliable on Samsung WebView per feedback_avoid_has_selector_webview) */
.gc-rack-ring.has-selection .gc-rack-card:not(.is-selected){
  opacity:0.15 !important;
  transition:opacity .4s ease !important;
}

.gc-rack-hint{
  position:absolute;
  bottom:calc(48px + env(safe-area-inset-bottom));
  left:0;right:0;
  text-align:center;
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  font-weight:500;
  letter-spacing:.12em;
  color:var(--muted);
  opacity:0;
  transition:opacity .5s ease .5s;
}
.gc-rack-overlay.is-open:not(.is-spinning) .gc-rack-hint{
  opacity:.55;
}

/* Dark mode */
[data-theme="dark"] .gc-rack-overlay.is-open{
  background:rgba(26,23,20,.97);
}
[data-theme="dark"] .gc-rack-close{
  background:var(--card);
  box-shadow:0 1px 3px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.06);
}

/* ── Pack-open overlay (foundation prototype) ──
   See docs/gacha/pack-animation-spec.md. JS stand-in until the Capacitor
   native plugin (Swift/Metal + Kotlin/Vulkan) replaces this surface. */
.gc-pack-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:rgba(247,242,228,0);  /* fades in via .is-open */
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease, background-color .35s ease;
}
.gc-pack-overlay.is-open{
  opacity:1;
  pointer-events:auto;
  background:rgba(247,242,228,.96);
  /* backdrop-filter scoped to is-open only — per memory
     feedback_backdrop_filter_perf, always-mounted blurred overlays kill
     globe-drag perf. This overlay only exists while open, but keep the
     pattern consistent. */
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.gc-pack-close{
  position:absolute;
  top:calc(20px + env(safe-area-inset-top));
  right:20px;
  width:40px;height:40px;
  border-radius:50%;
  border:none;
  background:var(--card);
  color:var(--text);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.06), inset 0 0 0 1px var(--border);
  transition:transform .12s ease;
  z-index:3;
}
.gc-pack-close:active{transform:scale(.92);}
.gc-pack-overlay.is-tearing .gc-pack-close,
.gc-pack-overlay.is-opened .gc-pack-close{display:none;}

/* Glow wrapper — positioned identically to how the stage used to be,
   owns the entrance/exit transforms so the stage moves as one unit. */
.gc-pack-glow-wrap{
  position:relative;
  width:84%;max-width:340px;
  border-radius:10px;
  z-index:2;
  transform:scale(.6) translateY(40px) rotateZ(-12deg);
  opacity:0;
  transition:
    transform .7s cubic-bezier(.22,1,.32,1),
    opacity .5s ease;
}
.gc-pack-overlay.is-open .gc-pack-glow-wrap{
  transform:scale(1) translateY(0) rotateZ(0deg);
  opacity:1;
  animation:gcShadowDrift 8s ease-in-out infinite;
}
.gc-pack-overlay.is-opening .gc-pack-glow-wrap{
  transform:scale(1.06) translateY(-12px) rotateZ(2deg);
  transition:transform .6s ease, opacity .6s ease;
}
.gc-pack-overlay.is-opened .gc-pack-glow-wrap{
  opacity:0;
  pointer-events:none;
  animation:none;
}
.gc-pack-overlay.is-tearing .gc-pack-glow-wrap,
.gc-pack-overlay.is-opened .gc-pack-glow-wrap{
  animation:none;
  box-shadow:none;
}
@keyframes gcShadowDrift{
  0%   {box-shadow: 14px  18px 38px rgba(67,47,24,.32);}
  25%  {box-shadow:-14px  12px 38px rgba(67,47,24,.28);}
  50%  {box-shadow:-10px -14px 38px rgba(67,47,24,.26);}
  75%  {box-shadow: 16px -10px 38px rgba(67,47,24,.28);}
  100% {box-shadow: 14px  18px 38px rgba(67,47,24,.32);}
}
/* Stage — now sits inside the glow wrapper, fills it. */
.gc-pack-stage{
  position:relative;
  width:100%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  overflow:hidden;
  border-radius:10px;
}
/* Tear guide — none; "Pull down to tear open" prompt teaches the gesture. */
.gc-pack-stage::before,.gc-pack-stage::after{content:none;}

.gc-pack-art{
  width:100%;height:auto;
  object-fit:contain;
}

/* Card-back peek — sits behind the tear halves, visible through the
   tear gap. Rotated 90° to look like a card inside a landscape pack.
   After tear completes, WAAPI rotates it upright before cross-fading
   to the actual card deck. */
.gc-pack-peek{
  position:absolute;
  /* Nudged right of stage-centre: the pack's tear seam sits at 58%, so a card
     centred at 50% reads as left-of-gap. 53% splits the difference for a
     "slightly more centred" look without fully chasing the seam. */
  left:53%;
  top:50%;
  /* Rotated -90°: visual height = width × 1 (card aspect 5/7 sideways), so
     width must stay below the pack art's body height in stage units.
     Japan pack art is ~2:1, body height ~50% of stage W — 44% leaves a
     safe margin so the card stays hidden behind the pack pre-tear. */
  transform:translate(-50%,-50%) rotate(-90deg);
  width:44%;
  aspect-ratio:5/7;
  border-radius:12px;
  overflow:hidden;
  pointer-events:none;
}
/* Rarity laser — a glowing line along the tear seam that
   grows with --tear-pct. Sits above the peek, between the
   tear halves. Height tracks the torn region; a bright tip
   dot at the leading edge sells the "cutting" feel. */
.gc-tear-laser{
  position:absolute;
  left:calc(58% - 1.5px);
  top:0;
  width:3px;
  height:var(--tear-pct, 0%);
  pointer-events:none;
  z-index:3;
  opacity:0;
  transition:opacity .15s ease;
  border-radius:1.5px;
  background:linear-gradient(to bottom, rgba(255,255,255,.25) 0%, rgba(255,255,255,.8) 100%);
}
.gc-pack-overlay.is-tearing .gc-tear-laser{
  opacity:1;
}
/* Burst fan — cone of light from tear seam */
@keyframes gcTearFan{
  0%  {transform:scaleX(0);opacity:0;}
  15% {transform:scaleX(1);opacity:1;}
  100%{transform:scaleX(1);opacity:0;}
}
.gc-tear-fan{
  position:absolute;
  top:0;
  height:100%;
  transform-origin:0 50%;
  transform:scaleX(0);
  pointer-events:none;
  z-index:3;
  clip-path:polygon(0% 33%, 100% 0%, 100% 100%, 0% 67%);
  animation:gcTearFan .9s ease-out forwards;
}
.gc-pack-overlay.is-tear-done .gc-tear-laser{
  opacity:0;
  transition:opacity .3s ease-out;
}
/* ── Rarity reveal: rim-glow on the torn pack + card ──
   Replaces the coloured seam-laser snap + burst fan. A rarity-tinted
   drop-shadow on the STAGE hugs the actual silhouette of the cut pack +
   the card showing through the tear — drop-shadow follows the rendered
   alpha, and the stage has no background, so the already-faded right tear
   half contributes nothing. The glow traces only what's left (NOT a
   backing rectangle), and because it's on the stage it rides along as the
   pack pours/rotates out, then fades with it (stage opacity → 0). Snaps in
   on the burst for punch (synced to the heavy haptic).
   Revert snapshot: docs/gacha/pack-reveal-rarity-REVERT-SNAPSHOT.md */
/* Burst — bloom in + one gentle breath (the "rarity beat"): the colour
   ramps up, dips, and settles over 1.3s so the eye registers it before the
   pack pours. `both` fill holds the end frame until .is-tear-done's static
   rule takes over for the pour. */
.gc-pack-overlay.is-tear-burst[data-burst-rarity="rare"]      .gc-pack-stage{ animation:gcRarityBeatRare 1.3s ease-out both; }
.gc-pack-overlay.is-tear-burst[data-burst-rarity="legendary"] .gc-pack-stage{ animation:gcRarityBeatLegendary 1.3s ease-out both; }
.gc-pack-overlay.is-tear-burst[data-burst-rarity="mythic"]    .gc-pack-stage{ animation:gcRarityBeatMythic 1.3s ease-out both; }
.gc-pack-overlay.is-tear-burst[data-burst-rarity="wonder"]    .gc-pack-stage{ animation:gcRarityBeatWonder 1.3s ease-out both; }

/* Pour — a SINGLE diffuse drop-shadow (no crisp inner rim) so the pack +
   protruding card read as one soft glowing object rather than two outlined
   shapes. Held static while the stage rotates out, then fades with it. */
.gc-pack-overlay.is-tear-done[data-burst-rarity="rare"]      .gc-pack-stage{ filter:drop-shadow(0 0 24px rgba(124,196,196,.7)); }
.gc-pack-overlay.is-tear-done[data-burst-rarity="legendary"] .gc-pack-stage{ filter:drop-shadow(0 0 28px rgba(168,124,219,.74)); }
.gc-pack-overlay.is-tear-done[data-burst-rarity="mythic"]    .gc-pack-stage{ filter:drop-shadow(0 0 4px rgba(255,235,150,.8)) drop-shadow(0 0 32px rgba(232,198,90,.78)); }
.gc-pack-overlay.is-tear-done[data-burst-rarity="wonder"]    .gc-pack-stage{ filter:drop-shadow(0 0 5px rgba(255,210,160,.9)) drop-shadow(0 0 40px rgba(232,90,90,.82)); }

@keyframes gcRarityBeatRare{
  0%{filter:drop-shadow(0 0 2px rgba(124,196,196,0));}
  22%{filter:drop-shadow(0 0 30px rgba(124,196,196,.85));}
  55%{filter:drop-shadow(0 0 18px rgba(124,196,196,.48));}
  100%{filter:drop-shadow(0 0 24px rgba(124,196,196,.7));}
}
/* Legendary — brighter, two restless breaths (no hot core yet). */
@keyframes gcRarityBeatLegendary{
  0%{filter:drop-shadow(0 0 2px rgba(168,124,219,0));}
  18%{filter:drop-shadow(0 0 36px rgba(168,124,219,.95));}
  40%{filter:drop-shadow(0 0 20px rgba(168,124,219,.5));}
  62%{filter:drop-shadow(0 0 33px rgba(168,124,219,.88));}
  82%{filter:drop-shadow(0 0 22px rgba(168,124,219,.56));}
  100%{filter:drop-shadow(0 0 28px rgba(168,124,219,.74));}
}
/* Mythic — hot near-white core (a crisp spark) + 3 fast pulses. */
@keyframes gcRarityBeatMythic{
  0%{filter:drop-shadow(0 0 0 rgba(255,235,150,0)) drop-shadow(0 0 2px rgba(232,198,90,0));}
  14%{filter:drop-shadow(0 0 5px rgba(255,235,150,.95)) drop-shadow(0 0 42px rgba(232,198,90,.95));}
  34%{filter:drop-shadow(0 0 2px rgba(255,235,150,.45)) drop-shadow(0 0 24px rgba(232,198,90,.55));}
  54%{filter:drop-shadow(0 0 5px rgba(255,235,150,.95)) drop-shadow(0 0 40px rgba(232,198,90,.92));}
  74%{filter:drop-shadow(0 0 2px rgba(255,235,150,.45)) drop-shadow(0 0 24px rgba(232,198,90,.55));}
  88%{filter:drop-shadow(0 0 5px rgba(255,235,150,.9)) drop-shadow(0 0 38px rgba(232,198,90,.88));}
  100%{filter:drop-shadow(0 0 4px rgba(255,235,150,.8)) drop-shadow(0 0 32px rgba(232,198,90,.78));}
}
/* Wonder — hottest tight core + biggest halo + 4 rapid strong pulses. */
@keyframes gcRarityBeatWonder{
  0%{filter:drop-shadow(0 0 0 rgba(255,210,160,0)) drop-shadow(0 0 2px rgba(232,90,90,0));}
  11%{filter:drop-shadow(0 0 7px rgba(255,210,160,1)) drop-shadow(0 0 48px rgba(232,90,90,.98));}
  26%{filter:drop-shadow(0 0 3px rgba(255,210,160,.55)) drop-shadow(0 0 26px rgba(232,90,90,.6));}
  41%{filter:drop-shadow(0 0 7px rgba(255,210,160,1)) drop-shadow(0 0 46px rgba(232,90,90,.95));}
  56%{filter:drop-shadow(0 0 3px rgba(255,210,160,.55)) drop-shadow(0 0 26px rgba(232,90,90,.6));}
  71%{filter:drop-shadow(0 0 7px rgba(255,210,160,1)) drop-shadow(0 0 46px rgba(232,90,90,.95));}
  86%{filter:drop-shadow(0 0 3px rgba(255,210,160,.6)) drop-shadow(0 0 28px rgba(232,90,90,.65));}
  100%{filter:drop-shadow(0 0 5px rgba(255,210,160,.9)) drop-shadow(0 0 40px rgba(232,90,90,.82));}
}

.gc-pack-peek-img{
  width:100%;height:100%;
  object-fit:cover;
  border-radius:12px;
}

/* Tear halves — two copies of the pack art split vertically at ~58%
   from left (between country name and Memoroam seal). At rest both
   halves show their side via inset clip-paths. During tearing, polygon
   clip-paths drive a progressive top-to-bottom split: the "torn"
   region (0 → --tear-pct) shows separated halves with a tapered gap,
   while the "connected" region (--tear-pct → 100%) stays whole. */
.gc-pack-tear{
  position:relative;
  width:100%;
}
.gc-pack-tear-left{
  clip-path:inset(0 42% 0 0);
}
.gc-pack-tear-right{
  position:absolute;
  inset:0;
  clip-path:inset(0 0 0 58%);
  isolation:isolate;
}
.gc-pack-overlay.is-tearing .gc-pack-tear-left{
  clip-path:polygon(
    0% 0%,
    58% 0%,
    58% var(--tear-pct, 100%),
    100% var(--tear-pct, 100%),
    100% 100%,
    0% 100%
  );
}
.gc-pack-overlay.is-tearing .gc-pack-tear-right{
  clip-path:polygon(
    calc(58% + var(--tear-gap, 0px)) 0%,
    100% 0%,
    100% 100%,
    58% 100%,
    58% var(--tear-pct, 100%)
  );
}
/* Tear guide — none; "Pull down to tear open" prompt teaches the gesture. */
.gc-pack-stage::before,.gc-pack-stage::after{content:none;}

/* Panda seal overlay over the pack's empty inner cream circle. left/top here
   are only a fallback default — _gcPackOverlayShow overrides them inline each
   call with this country's detected seal centre (_gcSealPos, same source as
   the rack/hero/binder) so the panda doesn't jump when the overlay cross-fades
   in over the rack. No opacity/transform transitions of its own — it inherits
   the stage's entrance/fade by virtue of being a child. */
.gc-pack-stage-seal{
  position:absolute;
  left:76%;
  top:51%;
  width:12%;
  aspect-ratio:1/1;
  transform:translate(-50%,-50%);
  object-fit:contain;
  pointer-events:none;
  opacity:.92;
  mix-blend-mode:multiply;
  filter:saturate(.9) drop-shadow(0 1px 2px rgba(0,55,164,.12));
}

.gc-pack-prompt{
  position:absolute;
  bottom:calc(80px + env(safe-area-inset-bottom));
  left:0;right:0;
  text-align:center;
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  opacity:0;
  transition:opacity .4s ease;
}
.gc-pack-overlay.is-open .gc-pack-prompt{
  opacity:.75;
  transition-delay:.65s;  /* hold until entrance settles */
}
.gc-pack-overlay.is-opening .gc-pack-prompt,
.gc-pack-overlay.is-tearing .gc-pack-prompt,
.gc-pack-overlay.is-opened .gc-pack-prompt{
  opacity:0;
  transition-delay:0s;
}

/* Skip button — small pill bottom-centre. Lets the user bypass per-card
   flips and reveal everything left in the pack at once. Visible only
   during the "ready to tap a card" phase (.is-opened with no active
   reveal); hidden during the flip/post-flip and skip-spread phases. */
.gc-pack-skip{
  position:absolute;
  bottom:calc(40px + env(safe-area-inset-bottom));
  left:50%;
  padding:10px 26px;
  border-radius:99px;
  border:none;
  background:var(--card);
  color:var(--muted);
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  box-shadow:0 1px 3px rgba(0,0,0,.06), inset 0 0 0 1px var(--border);
  transform:translateX(-50%);
  transition:opacity .35s ease;
  z-index:5;
}
.gc-pack-overlay.is-opened .gc-pack-skip{
  opacity:.85;
  pointer-events:auto;
  transition-delay:.9s;  /* hold until deck entrance settles */
}
.gc-pack-overlay.is-revealing .gc-pack-skip,
.gc-pack-overlay.is-revealing-post .gc-pack-skip,
.gc-pack-overlay.is-skipped .gc-pack-skip{
  opacity:0;
  pointer-events:none;
  transition-delay:0s;
}
.gc-pack-skip:active{
  /* Hold the translateX for centring while adding the press feedback. */
  transform:translateX(-50%) scale(.94);
}

/* Card-stack deck — appears after the pack opens. 3 face-down cards stack
   centred and fan slightly so the user can see the depth. Cards animate in
   sequentially (bottom → top) so the user reads the stack as "the items
   are inside here". Placeholder card-back styling — real per-country
   card-back artwork lands once /sign/card-back is wired in the Worker.
   pointer-events:none so taps pass through to .gc-pack-stage behind, which
   currently closes the overlay; Phase 2B will replace this with per-card
   reveal handlers. */
/* Card deck — portrait orientation (5:7, standard trading-card ratio).
   Vertical cards match TCG conventions and give the bespoke per-country
   card-back artwork room to breathe. */
.gc-pack-deck{
  position:absolute;
  top:50%;left:50%;
  width:64%;max-width:265px;
  aspect-ratio:5/7;
  transform:translate(-50%,-50%);
  z-index:2;
  pointer-events:none;
  perspective:1200px;  /* gives the 3D pull + flip below real depth */
}

.gc-pack-card{
  position:absolute;
  inset:0;
  /* Outer card is a positional + shadow shell; visual surface is on the
     two flip sides below. border-radius here is what gives the box-shadow
     its rounded shape — without it the shadow casts a sharp rectangle
     even though the inner sides are rounded. */
  border-radius:14px;
  box-shadow:0 6px 18px rgba(67,47,24,.18);
  /* Initial: above frame — remaining cards drop from above onto
     the first card that already fell from the pack. */
  transform:translateY(-35vh);
  opacity:0;
  transition:
    transform 1s cubic-bezier(.22,1.15,.36,1),
    opacity .4s ease;
  /* Cards opt out of pointer hit-testing by default. Only the top
     non-collected card re-enables it below, so only THAT card responds
     to taps (background + back-of-stack don't accidentally absorb). */
  pointer-events:none;
}
.gc-pack-overlay.is-opened .gc-pack-card[data-depth="0"]:not(.is-collected){
  pointer-events:auto;
  cursor:pointer;
}
.gc-pack-card.is-drop-source{
  opacity:0 !important;
  pointer-events:none !important;
}
/* When the card carries a real card-back image, slightly deeper shadow. */
.gc-pack-card.has-back{
  box-shadow:0 6px 18px rgba(67,47,24,.22);
}
.gc-pack-overlay.is-opened .gc-pack-card{opacity:1;}
/* Stacked offsets tuned for vertical cards — small horizontal fan +
   slight vertical step + subtle rotation so the depth reads clearly.
   :not(.is-collected) so the collect transform below wins via specificity. */
.gc-pack-overlay.is-opened .gc-pack-card[data-depth="2"]:not(.is-collected){
  z-index:1;
  transform:translateX(-12px) translateY(10px) rotate(-3deg) scale(.95);
  transition-delay:.1s;
}
.gc-pack-overlay.is-opened .gc-pack-card[data-depth="1"]:not(.is-collected){
  z-index:2;
  transform:translateX(10px) translateY(6px) rotate(2.5deg) scale(.97);
  transition-delay:.15s;
}
.gc-pack-overlay.is-opened .gc-pack-card[data-depth="0"]:not(.is-collected){
  z-index:3;
  /* --swipe-y is set inline by the touchmove handler during an active
     swipe-up; defaults to 0 the rest of the time. */
  transform:translateY(var(--swipe-y, 0px)) rotate(0deg);
  transition-delay:.45s;
}
/* After initial entrance settles JS adds .is-settled. Intentionally
   LEFT at lower specificity than the data-depth rules — that way the
   staggered .40/.50/.60s delays continue to apply to post-swipe
   fade-ins (gives the remaining cards a "fly in from the bottom one
   after another" feel rather than arriving simultaneously). Kept as a
   marker class JS can read; not actively overriding anything today. */
/* Once the reveal loop has started (.is-settled), hide non-top
   unrevealed cards so only the active (depth 0) card + collected
   pile are visible — no translucent deck ghosts behind them. */
.gc-pack-overlay.is-settled .gc-pack-card:not(.is-collected):not([data-depth="0"]){
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* ── Card reveal — scale up, then 180° flip ──
   Two-phase reveal: card first scales up + lifts dramatically toward the
   camera (extraction), then flips 180° on the Y axis to land face-up.
   180° rather than 360°+: with two opposite faces and backface-visibility:
   hidden, the wrapper needs an odd multiple of 180° to end on the face.
   180° is the minimum — one clean half-turn during the lifted state. */
.gc-pack-card-flip{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
}

.gc-pack-card-side{
  position:absolute;
  inset:0;
  border-radius:14px;
  overflow:hidden;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

.gc-pack-card-side-back{
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(168deg, var(--paper-2) 0%, var(--card) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(198,138,58,.22),
    inset 0 0 0 3px var(--card);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;
}
.gc-pack-card.has-back .gc-pack-card-side-back{
  /* Real artwork takes over — drop the placeholder cream surface. */
  background:transparent;
  box-shadow:none;
}

.gc-pack-card-side-face{
  transform:rotateY(180deg);
  visibility:hidden;
  opacity:0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(168deg, var(--card) 0%, var(--paper-2) 100%);
  --border-c:rgba(196,185,167,.5);
  --border-w:1.5px;
  box-shadow:inset 0 0 0 var(--border-w) var(--border-c);
  display:flex;flex-direction:column;align-items:center;
  padding:0;
  gap:0;
  padding-top:0;
}
/* ── Glow layer (perf-safe: animates opacity, not filter) ── */
.gc-pack-card-glow{position:absolute;inset:0;border-radius:14px;z-index:0;pointer-events:none;}
.gc-pack-card.rarity-rare .gc-pack-card-glow{box-shadow:0 6px 16px rgba(90,158,158,.28);}
.gc-pack-card.rarity-legendary .gc-pack-card-glow{box-shadow:0 8px 24px rgba(123,82,171,.32);}
.gc-pack-card.rarity-mythic .gc-pack-card-glow{box-shadow:0 8px 36px rgba(212,168,67,.50);animation:gcGlowPulse 5s ease-in-out infinite;}
.gc-pack-card.rarity-wonder .gc-pack-card-glow{box-shadow:0 10px 42px rgba(192,57,43,.55);animation:gcGlowPulseWonder 4s ease-in-out infinite;}

/* ── Rarity visual system ──
   Common    → clean card with subtle warm border
   Rare      → teal glow + gentle gloss sweep
   Legendary → purple glow + pronounced gloss sweep with rest phase
   Mythic    → gold pulsing glow + rainbow holo wander
   Wonder    → red-gold pulsing glow + intense prismatic holo (unique wander) */

/* — Common: subtle warm border — */
.gc-pack-card.rarity-common .gc-pack-card-side-face{
  --border-c:rgba(196,185,167,.35); --border-w:1px;
  box-shadow:inset 0 0 0 var(--border-w) var(--border-c), 0 1px 4px rgba(0,0,0,.06);
}

/* — Rare: teal glow + gentle gloss sweep — */
.gc-pack-card.rarity-rare .gc-pack-card-side-face{
  --border-c:transparent; --border-w:0;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.gc-pack-card.rarity-rare .gc-pack-card-face-showcase::before{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:8px;
  background:linear-gradient(105deg, transparent 0%, transparent 40%, rgba(255,255,255,.18) 46%, rgba(255,255,255,.28) 50%, rgba(255,255,255,.18) 54%, transparent 60%, transparent 100%);
  background-size:300% 100%;mix-blend-mode:overlay;
  animation:gcGlossSwipe 10s linear infinite;
}

/* — Legendary: purple glow + pronounced gloss sweep with rest phase — */
.gc-pack-card.rarity-legendary .gc-pack-card-side-face{
  --border-c:transparent; --border-w:0;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.gc-pack-card.rarity-legendary .gc-pack-card-face-showcase::before{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:8px;
  background:linear-gradient(105deg, transparent 0%, transparent 36%, rgba(255,255,255,.35) 43%, rgba(255,255,255,.55) 50%, rgba(255,255,255,.35) 57%, transparent 64%, transparent 100%);
  background-size:300% 100%;mix-blend-mode:overlay;
  /* Dedicated keyframe (not the shared gcGlossSwipe): same pronounced sweep
     speed but a much shorter rest, so it recurs ~2x as often. */
  animation:gcGlossSwipeLeg 4.5s linear infinite;
}

/* — Mythic: gold pulsing glow + rainbow holo wander — */
.gc-pack-card.rarity-mythic .gc-pack-card-side-face{
  --border-c:transparent; --border-w:0;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
  background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.45) 0%,rgba(255,255,255,0) 60%),linear-gradient(168deg,#F5F0E8 0%,#F0EBDF 100%);
}
.gc-pack-card.rarity-mythic .gc-pack-card-face-showcase::before{
  content:'';position:absolute;inset:-30%;z-index:3;pointer-events:none;
  background:linear-gradient(135deg,#ff0000 0%,#ff6600 12%,#ffdd00 24%,#00cc44 36%,#00ccff 50%,#4444ff 62%,#aa00ff 75%,#ff0066 88%,#ff0000 100%);
  background-size:160% 160%;mix-blend-mode:color-dodge;opacity:.3;
  animation:gcHoloWander 14s ease-in-out infinite;
}

/* — Wonder: red-gold pulsing glow + intense prismatic holo (unique wander) — */
.gc-pack-card.rarity-wonder .gc-pack-card-side-face{
  --border-c:transparent; --border-w:0;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
  background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.4) 0%,rgba(255,255,255,0) 60%),linear-gradient(168deg,#F3EDE4 0%,#EDE7DB 100%);
}
.gc-pack-card.rarity-wonder .gc-pack-card-face-showcase::before{
  content:'';position:absolute;inset:-40%;z-index:3;pointer-events:none;
  background:linear-gradient(160deg,#ff0000 0%,#ff6600 10%,#ffdd00 20%,#00cc44 30%,#00ccff 42%,#4444ff 54%,#aa00ff 66%,#ff0066 78%,#ffdd00 88%,#ff0000 100%);
  background-size:120% 120%;mix-blend-mode:color-dodge;opacity:.35;
  animation:gcHoloWanderWonder 10s ease-in-out infinite;
}

/* Stamp/sticker foil — light-friendly. The default color-dodge clips to white
   on the pale flag backdrop (why this used to be muted to opacity:.1, which
   read as "no holo" on unpack). Overlay lays the iridescence onto the stamp
   illustration's midtones and leaves the light margins clean, so the foil is
   clearly visible without blowing out — matching the WebGL collection card.
   DIAL: --foil-strength is the single knob (0=off, 1=intense); blend can swap
   to hard-light for a punchier foil or soft-light for subtler. */
.gc-pack-card.rarity-mythic[data-category="stamp"] .gc-pack-card-face-showcase::before,
.gc-pack-card.rarity-mythic[data-category="sticker"] .gc-pack-card-face-showcase::before,
.gc-pack-card.rarity-wonder[data-category="stamp"] .gc-pack-card-face-showcase::before,
.gc-pack-card.rarity-wonder[data-category="sticker"] .gc-pack-card-face-showcase::before{
  mix-blend-mode:soft-light;
  opacity:var(--foil-strength, .6);
}

/* ── Rarity keyframes ── */
@keyframes gcStarSpectrum{
  0%   {background-position:0% center;}
  100% {background-position:-200% center;}
}
@keyframes gcGlossSwipe{
  0%  {background-position:150% 0;}
  35% {background-position:-50% 0;}
  100%{background-position:-50% 0;}
}
/* Legendary: sweep occupies the first half of the cycle (same speed as the
   shared keyframe's sweep), then only a half-cycle rest — so at 4.5s the
   sweep fires every ~4.5s with a ~2.25s pause instead of ~4.55s. */
@keyframes gcGlossSwipeLeg{
  0%  {background-position:150% 0;}
  50% {background-position:-50% 0;}
  100%{background-position:-50% 0;}
}
@keyframes gcHoloWander{
  0%  {background-position:0% 50%;  transform:rotate(-2deg);}
  18% {background-position:100% 20%;transform:rotate(3deg);}
  35% {background-position:40% 100%;transform:rotate(-4deg);}
  52% {background-position:90% 10%; transform:rotate(1deg);}
  70% {background-position:10% 80%; transform:rotate(5deg);}
  88% {background-position:70% 30%; transform:rotate(-3deg);}
  100%{background-position:0% 50%;  transform:rotate(-2deg);}
}
@keyframes gcHoloWanderWonder{
  0%  {background-position:50% 0%;  transform:rotate(0deg);}
  14% {background-position:0% 90%;  transform:rotate(-5deg);}
  28% {background-position:100% 40%;transform:rotate(4deg);}
  44% {background-position:20% 10%; transform:rotate(-2deg);}
  58% {background-position:80% 100%;transform:rotate(6deg);}
  74% {background-position:40% 30%; transform:rotate(-4deg);}
  90% {background-position:90% 70%; transform:rotate(3deg);}
  100%{background-position:50% 0%;  transform:rotate(0deg);}
}
@keyframes gcGlowPulse{0%,100%{opacity:.55;}50%{opacity:1;}}
@keyframes gcGlowPulseWonder{0%,100%{opacity:.6;}50%{opacity:1;}}

/* Spin-fly keyframes — total 2.5s with deliberate hold at the lifted
   position to give the user a beat to register the card before the flip:
     0-7%    anticipation (pull back slightly)
     7-21%   scale up + lift (extraction)
     21-61%  HOLD at lifted position (~1s pause — anticipation beat)
     61-89%  180° flip while still scaled + lifted (one half-turn)
     89-100% settle to final examination pose, face-up                    */
@keyframes gcPackCardSpinFly{
  0% {
    transform:rotateY(0deg)   translateZ(0)    translateY(0)    scale(1);
  }
  7% {
    transform:rotateY(0deg)   translateZ(-6px) translateY(3px)  scale(.97);
  }
  21% {
    transform:rotateY(0deg)   translateZ(85px) translateY(-22px) scale(1.22);
  }
  61% {
    /* Hold lifted position — pause for ~1s before the flip starts */
    transform:rotateY(0deg)   translateZ(85px) translateY(-22px) scale(1.22);
  }
  89% {
    transform:rotateY(180deg) translateZ(115px) translateY(-32px) scale(1.32);
  }
  100% {
    transform:rotateY(180deg) translateZ(95px)  translateY(-28px) scale(1.27);
  }
}
.gc-pack-card.is-face .gc-pack-card-flip{
  animation:gcPackCardSpinFly 2.5s cubic-bezier(.4,0,.25,1) forwards;
}
/* Final card — longer hold before the flip for suspense */
@keyframes gcPackCardSpinFlyFinal{
  0% {
    transform:rotateY(0deg)   translateZ(0)    translateY(0)    scale(1);
  }
  6% {
    transform:rotateY(0deg)   translateZ(-6px) translateY(3px)  scale(.97);
  }
  18% {
    transform:rotateY(0deg)   translateZ(85px) translateY(-22px) scale(1.22);
  }
  55% {
    transform:rotateY(0deg)   translateZ(85px) translateY(-22px) scale(1.22);
  }
  85% {
    transform:rotateY(180deg) translateZ(115px) translateY(-32px) scale(1.32);
  }
  100% {
    transform:rotateY(180deg) translateZ(95px)  translateY(-28px) scale(1.27);
  }
}
.gc-pack-card.is-face.is-final .gc-pack-card-flip{
  animation:gcPackCardSpinFlyFinal 3.2s cubic-bezier(.4,0,.25,1) forwards;
}

/* Blank the canvas during a reveal — display:none every direct child of
   the overlay except the close button and the deck (which contains only
   the active card after JS detaches the rest). This catches things the
   per-card hide rules can't:
     - .gc-pack-stage holds the pack art image, which uses filter:drop-
       shadow. The filter creates a separate compositor layer; on this
       WebView the parent stage's opacity:0 does NOT propagate through
       that layer, so the FRANCE pack art was leaking through as a faint
       "ghost card" behind the flip.
     - .gc-pack-prompt + .gc-pack-skip are already opacity:0 in these
       states but display:none is the absolute version.
   Keep the close button visible so the user can bail mid-flip. */
.gc-pack-overlay.is-revealing > .gc-pack-stage,
.gc-pack-overlay.is-revealing > .gc-pack-prompt,
.gc-pack-overlay.is-revealing > .gc-pack-skip,
.gc-pack-overlay.is-revealing-post > .gc-pack-stage,
.gc-pack-overlay.is-revealing-post > .gc-pack-prompt,
.gc-pack-overlay.is-revealing-post > .gc-pack-skip{
  display:none !important;
}

/* Hide face-down NON-active cards (depth 1 + 2) while the top card is
   being revealed. The "currently flipping" card has .is-face AND NOT
   .is-collected and stays visible. Previously-collected cards are now
   ALSO kept visible — they form the "revealed pile" behind the active
   flipping card (replaces the cream-ghost with real prior reveals).
   Two phases:
     .is-revealing       — HARD hide via display:none + off-screen.
     .is-revealing-post  — soft hide via opacity:0 + visibility:hidden +
                           off-screen so dropping the class on
                           swipe-collect transitions smoothly via the
                           base .gc-pack-card transition. */
.gc-pack-overlay.is-revealing .gc-pack-card:not(.is-face):not(.is-collected){
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  transform:translateY(140vh) scale(.2) !important;
  pointer-events:none !important;
}
.gc-pack-overlay.is-revealing .gc-pack-card:not(.is-face):not(.is-collected) *{
  visibility:hidden !important;
  opacity:0 !important;
}
.gc-pack-overlay.is-revealing-post .gc-pack-card:not(.is-face):not(.is-collected){
  opacity:0 !important;
  visibility:hidden !important;
  transform:translateY(140vh) scale(.2) !important;
  pointer-events:none !important;
}

/* Belt-and-suspenders for the FLIPPING card's own back/face: explicit
   opacity animations across the rotation midpoint guarantee the back
   disappears past 90° even if the WebView's backface-visibility renders
   imperfectly (some Samsung / older WebViews leak the back's reverse
   side as a faint ghost). The face mirrors in the opposite direction.
   Timings match the new 2.5s spin-fly — flip happens 61→89%, so the
   crossover lands in the middle of that range. */
/* Cross-fade timed AROUND the 90° edge-on moment (which lands at 75% of
   the 2.5s animation — midpoint of the 61->89% rotation phase). Back
   fades out 62->75% so it's invisible by edge-on; face visibility flips
   on at 76% (just past edge-on, when its surface starts facing the
   camera) with opacity ramping 0->1 by 88%. The visibility-in-keyframes
   guarantees the face's cream background does NOT render before 76% —
   prior implementations relied on opacity:0 alone, which still painted
   the cream surface on this WebView and produced the ghost-card. The
   ~1-frame gap at the exact 90° tick is inherent to any CSS 3D flip
   (both sides have 0 visible area when fully edge-on), but the
   surrounding cross-fade keeps either back or face partially visible
   for almost the entire rotation. */
@keyframes gcPackBackHide{
  0%, 62%   { opacity:1; }
  75%, 100% { opacity:0; }
}
@keyframes gcPackFaceShow{
  0%, 75%   { visibility:hidden; opacity:0; }
  76%       { visibility:visible; opacity:0; }
  88%, 100% { visibility:visible; opacity:1; }
}
.gc-pack-card.is-face .gc-pack-card-side-back{
  animation:gcPackBackHide 2.5s linear forwards;
}
.gc-pack-card.is-face .gc-pack-card-side-face{
  animation:gcPackFaceShow 2.5s linear forwards;
}
/* Final card cross-fade — timed to the 3.2s animation (flip at 55→85%) */
@keyframes gcPackBackHideFinal{
  0%, 65%   { opacity:1; }
  72%, 100% { opacity:0; }
}
@keyframes gcPackFaceShowFinal{
  0%, 72%   { visibility:hidden; opacity:0; }
  73%       { visibility:visible; opacity:0; }
  84%, 100% { visibility:visible; opacity:1; }
}
.gc-pack-card.is-face.is-final .gc-pack-card-side-back{
  animation:gcPackBackHideFinal 3.2s linear forwards;
}
.gc-pack-card.is-face.is-final .gc-pack-card-side-face{
  animation:gcPackFaceShowFinal 3.2s linear forwards;
}

/* ── Skip state — reveal all remaining cards face-up at once ──
   Overrides the per-card flip animation: every uncollected card flips
   face-up via a 0.5s rotateY transition in parallel, and the three card
   positions spread into a horizontal row so the user can scan all
   contents at once. Higher specificity + !important defeat the
   data-depth fan transforms and the spin-fly animation. */
.gc-pack-overlay.is-skipped .gc-pack-card:not(.is-collected) .gc-pack-card-flip{
  transform:rotateY(180deg) !important;
  animation:none !important;
  transition:transform .55s cubic-bezier(.4,0,.25,1) !important;
}
.gc-pack-overlay.is-skipped .gc-pack-card:not(.is-collected) .gc-pack-card-side-back{
  opacity:0 !important;
  animation:none !important;
  transition:opacity .35s ease .25s;
}
.gc-pack-overlay.is-skipped .gc-pack-card:not(.is-collected) .gc-pack-card-side-face{
  opacity:1 !important;
  animation:none !important;
  transition:opacity .35s ease .25s;
}
/* Spread layout — the centre card is the user's original "top" card
   (depth 0), the originally-deeper cards fan out left + right. Pretty
   subtle rotations so the row still reads as a group. */
.gc-pack-overlay.is-skipped .gc-pack-card[data-depth="0"]:not(.is-collected){
  transform:translateX(0)     translateY(0) rotate(0deg) !important;
  z-index:3;
  transition:transform .55s cubic-bezier(.4,0,.25,1) !important;
}
.gc-pack-overlay.is-skipped .gc-pack-card[data-depth="1"]:not(.is-collected){
  transform:translateX(-105px) translateY(0) rotate(-4deg) !important;
  z-index:2;
  transition:transform .55s cubic-bezier(.4,0,.25,1) !important;
}
.gc-pack-overlay.is-skipped .gc-pack-card[data-depth="2"]:not(.is-collected){
  transform:translateX(105px)  translateY(0) rotate(4deg) !important;
  z-index:1;
  transition:transform .55s cubic-bezier(.4,0,.25,1) !important;
}

/* NEW badge — instant show on skip/summary */
.gc-pack-overlay.is-skipped .gc-pack-card-new{
  opacity:1;transform:translate(-50%,0) scale(1);animation:none;
}

/* ── Trading-card face: stars / badge / showcase / info ── */

/* Stars — inside footer, below the name */
.gc-pack-card-face-stars{
  font-size:10px;
  letter-spacing:4px;
  color:rgba(160,148,132,.85);
  text-align:center;
  line-height:1;
  margin-top:3px;
}
.gc-pack-card.rarity-rare    .gc-pack-card-face-stars{color:#5A9E9E;}

/* Legendary+ stars — continuous spectrum shimmer.
   Stars stay fully visible; the colour shifts smoothly across them. */
.gc-pack-card.rarity-legendary .gc-pack-card-face-stars,
.gc-pack-card.rarity-mythic .gc-pack-card-face-stars,
.gc-pack-card.rarity-wonder .gc-pack-card-face-stars{
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  background-size:200% 100%;
}
.gc-pack-card.rarity-legendary .gc-pack-card-face-stars{
  background-image:linear-gradient(
    90deg, #7B52AB, #a87cdb, #d4b8ff, #a87cdb, #7B52AB, #a87cdb, #d4b8ff, #a87cdb, #7B52AB
  );
  animation:gcStarSpectrum 8s linear infinite;
}
.gc-pack-card.rarity-mythic .gc-pack-card-face-stars{
  background-image:linear-gradient(
    90deg, #D4A843, #e8c65a, #faf0c8, #e8c65a, #D4A843, #e8c65a, #faf0c8, #e8c65a, #D4A843
  );
  animation:gcStarSpectrum 6s linear infinite;
}
.gc-pack-card.rarity-wonder .gc-pack-card-face-stars{
  background-image:linear-gradient(
    90deg, #C0392B, #e05a4d, #ffd700, #e05a4d, #C0392B, #e05a4d, #ffd700, #e05a4d, #C0392B
  );
  animation:gcStarSpectrum 4.5s linear infinite;
}

/* Category badge — top-left */
.gc-pack-card-face-badge{
  position:absolute;
  top:10px;left:10px;
  font-family:'IBM Plex Mono',monospace;
  font-size:8px;font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--muted);
  background:rgba(255,255,255,.85);
  padding:3px 7px;
  border-radius:6px;
  z-index:6;
}
/* Card ID — top-right (FR · #07) */
.gc-pack-card-face-id{
  position:absolute;
  top:10px;right:10px;
  font-family:'IBM Plex Mono',monospace;
  font-size:8px;font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  background:rgba(255,255,255,.85);
  padding:3px 7px;
  border-radius:6px;
  z-index:6;
}

/* Showcase — holds the asset image, fills available space.
   Thin inset border gives a museum-mount / polaroid feel. */
.gc-pack-card-face-showcase{
  position:relative;
  flex:1;
  width:100%;
  overflow:hidden;
  min-height:0;
  margin:8px 8px 6px;
  width:calc(100% - 16px);
  border-radius:8px;
  box-shadow:inset 0 0 0 1.5px rgba(196,185,167,.25);
  isolation:isolate;
}
.gc-pack-card.rarity-rare .gc-pack-card-face-showcase{
  box-shadow:inset 0 0 0 1.5px rgba(90,158,158,.20);
}
.gc-pack-card.rarity-legendary .gc-pack-card-face-showcase{
  box-shadow:inset 0 0 0 1.5px rgba(123,82,171,.18);
}
.gc-pack-card.rarity-mythic .gc-pack-card-face-showcase{
  box-shadow:inset 0 0 0 1.5px rgba(212,168,67,.20);
}
.gc-pack-card.rarity-wonder .gc-pack-card-face-showcase{
  box-shadow:inset 0 0 0 1.5px rgba(192,57,43,.18);
}

/* Backgrounds fill edge-to-edge within the frame */
.gc-pack-card-face-image{
  position:absolute;
  inset:0;
}
.gc-pack-card-face-image img{
  width:100%;height:100%;
  object-fit:cover;
}

/* Stamps + stickers: centred, contained, with breathing room */
.gc-pack-card[data-category="stamp"] .gc-pack-card-face-image,
.gc-pack-card[data-category="sticker"] .gc-pack-card-face-image{
  position:relative;
  inset:auto;
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;
  padding:12px;
  box-sizing:border-box;
}
.gc-pack-card[data-category="stamp"] .gc-pack-card-face-image img,
.gc-pack-card[data-category="sticker"] .gc-pack-card-face-image img{
  object-fit:contain;position:relative;z-index:1;
}
/* Sticker drop-shadow for lifted feel */
.gc-pack-card[data-category="sticker"] .gc-pack-card-face-image img{
  filter:drop-shadow(0 3px 6px rgba(67,47,24,.18));
}
/* Flag backdrop behind stamps/stickers */
.gc-pack-card-face-backdrop{display:none;}
.gc-pack-card[data-category="stamp"] .gc-pack-card-face-backdrop,
.gc-pack-card[data-category="sticker"] .gc-pack-card-face-backdrop{
  display:block;position:absolute;inset:-20px;z-index:0;overflow:hidden;
}
.gc-pack-card-face-backdrop img{
  width:100%;height:100%;object-fit:cover;
  filter:blur(18px) saturate(1.6) brightness(1.05);
  transform:scale(1.3);opacity:.40;
}
.gc-pack-card-face-backdrop::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.85) 0%, rgba(255,255,255,.5) 35%, transparent 70%);
}

/* Info band — compact footer: name + stars */
.gc-pack-card-face-info{
  width:100%;
  padding:7px 10px 10px;
  text-align:center;
  flex-shrink:0;
}
.gc-pack-card-face-name{
  font-family:'Playfair Display',serif;
  font-size:12px;font-weight:600;
  color:var(--text);
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Placeholder (no item data) */
.gc-pack-card-face-placeholder{
  font-family:'Playfair Display',serif;
  font-size:17px;font-weight:600;
  color:var(--text);
  text-align:center;
  opacity:.55;
}

/* NEW badge — top-centre of card, in line with the STAMP / card-id pills.
   Lives INSIDE .gc-pack-card-side-face so it shares their coordinate space
   (top:10px, same Y as -face-badge and -face-id), scales/lifts with the
   face during the spin-fly, and inherits backface-visibility:hidden so it
   can't show until the card is face-up. The pop is timed to fire just
   AFTER the flip lands (face fully shows at ~2.2s of the 2.5s spin-fly,
   ~2.69s of the 3.2s final). */
.gc-pack-card-new{
  position:absolute;top:10px;left:50%;
  transform:translate(-50%,0) scale(1);
  font-family:'IBM Plex Mono',monospace;
  font-size:9px;font-weight:700;
  letter-spacing:.1em;
  background:#D03030;
  color:#fff;
  padding:3px 10px;border-radius:4px;
  line-height:1;
  z-index:6;
  opacity:0;
  pointer-events:none;
  box-shadow:0 2px 5px rgba(208,48,48,.35);
}
.gc-pack-card.is-face .gc-pack-card-new{
  animation:gcNewReveal .55s ease-out 2.35s forwards;
}
.gc-pack-card.is-final.is-face .gc-pack-card-new{
  animation-delay:2.85s;
}
/* Smooth reveal: gentle fade in with a subtle scale + downward settle */
@keyframes gcNewReveal{
  0%   {opacity:0;transform:translate(-50%,-5px) scale(.92);}
  100% {opacity:1;transform:translate(-50%,0)    scale(1);}
}
.gc-pack-card-qty{
  position:absolute;bottom:12px;right:12px;
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;font-weight:700;
  color:var(--muted);
  opacity:.7;
}

/* Collected cards settle into a small fanned PILE below the active card.
   Position driven by data-collected-idx (set by JS on collect) so the
   user sees their growing reveal history during subsequent flips. The
   pile sits at z-index:0 so the active flipping card stays in front.
   Flattens the inner flip wrapper (kills the spin-fly's leftover
   translateZ + scale) so the collected card sits at a clean 2D pose
   rather than projecting forward through the perspective stack. */
.gc-pack-overlay.is-opened .gc-pack-card.is-collected{
  z-index:0;
  opacity:.95;
  pointer-events:none;
  /* No transform transition — _gcPackCollectCard WAAPI-glides into the pile
     pose (a CSS transition can't reliably interpolate out of the spin-fly's
     forwards-fill on this WebView, which caused a snap). Opacity still eases. */
  transition:opacity .4s ease;
}
/* Pile slots match the original face-down deck fan positions — the
   collected cards literally take the spot where the ghost used to
   appear (data-depth=2 first, then 1, then 0 as more are collected).
   That puts them right behind the active flipping card rather than
   stranded at the bottom of the screen. */
.gc-pack-overlay.is-opened .gc-pack-card.is-collected[data-collected-idx="0"]{
  transform:translateX(-12px) translateY(10px) rotate(-3deg) scale(.95);
}
.gc-pack-overlay.is-opened .gc-pack-card.is-collected[data-collected-idx="1"]{
  transform:translateX(10px)  translateY(6px)  rotate(2.5deg) scale(.97);
}
.gc-pack-overlay.is-opened .gc-pack-card.is-collected[data-collected-idx="2"]{
  transform:translateY(0) rotate(0deg);
}
/* Flatten the inner flip wrapper for collected cards. The spin-fly
   animation was forwards-filled at rotateY(180deg) translateZ(95px)
   scale(1.27) — that translateZ was projecting the card forward through
   the perspective stack of subsequent reveals. animation:none stops the
   forwards fill; rotateY(180deg) keeps the face up. The collapse from
   lifted to flat is WAAPI-driven in _gcPackCollectCard (no CSS transition
   here — interpolating out of the forwards-fill snapped on this WebView). */
.gc-pack-card.is-collected .gc-pack-card-flip{
  animation:none !important;
  transform:rotateY(180deg) !important;
}

/* Swipe tracking — during an active swipe-up gesture, kill the transition
   so the card follows the finger directly via the inline --swipe-y var. */
.gc-pack-overlay.is-opened .gc-pack-card[data-depth="0"]:not(.is-collected).is-swiping{
  transition:none;
}

/* Real per-country card-back artwork — fills the card edge-to-edge.
   transform:scale crops a few % from each edge to absorb the cream
   "paper margin" built into the watercolour generation. Card's
   overflow:hidden clips the excess to the rounded rect. */
.gc-pack-card-back-img{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  border-radius:14px;
  pointer-events:none;
}

/* Placeholder card-back (cream + Memoroam mark) — shown when the country's
   real card-back URL isn't loaded yet. */
.gc-pack-card-mark{
  width:56px;height:56px;
  opacity:.55;
  mix-blend-mode:multiply;
  filter:saturate(.85);
  pointer-events:none;
}
.gc-pack-card-label{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;font-weight:700;
  letter-spacing:.24em;
  color:var(--muted);
  opacity:.6;
}

/* ── Pack summary — shown after all 3 cards revealed ── */
.gc-pack-summary{
  position:absolute;
  inset:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:28px;
  padding:40px 20px;
  opacity:0;
  transition:opacity .4s ease;
  z-index:5;
}
.gc-pack-summary.is-visible{opacity:1;}
.gc-pack-summary-title{
  font-family:'Playfair Display',serif;
  font-size:22px;font-weight:700;
  letter-spacing:.04em;
  color:var(--text);
  margin:0;
}
.gc-pack-summary-cards{
  display:flex;
  gap:12px;
  width:100%;
  max-width:380px;
  justify-content:center;
}
.gc-pack-summary-card{
  flex:1 1 0;
  min-width:0;        /* let the nowrap name ellipsize instead of forcing this
                         card wider than its siblings — keeps all boxes equal */
  max-width:110px;
  display:flex;flex-direction:column;
  align-items:center;
  gap:12px;
}
.gc-pack-summary-stars{
  font-size:13px;
  letter-spacing:2px;
  color:var(--muted);
}
.gc-pack-summary-card.rarity-rare .gc-pack-summary-stars{color:#5A9E9E;}
.gc-pack-summary-card.rarity-legendary .gc-pack-summary-stars{color:#7B52AB;}
.gc-pack-summary-card.rarity-mythic .gc-pack-summary-stars{color:#D4A843;}
.gc-pack-summary-card.rarity-wonder .gc-pack-summary-stars{color:#C0392B;}
.gc-pack-summary-card.rarity-legendary .gc-pack-summary-stars,
.gc-pack-summary-card.rarity-mythic .gc-pack-summary-stars,
.gc-pack-summary-card.rarity-wonder .gc-pack-summary-stars{
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:gcStarShimmer 5s ease-in-out infinite;
}
.gc-pack-summary-card.rarity-legendary .gc-pack-summary-stars{
  background-image:linear-gradient(
    105deg,#7B52AB 0%,#7B52AB 30%,#e8d5ff 45%,#fff 50%,#e8d5ff 55%,#7B52AB 70%,#7B52AB 100%
  );
}
.gc-pack-summary-card.rarity-mythic .gc-pack-summary-stars{
  background-image:linear-gradient(
    105deg,#D4A843 0%,#D4A843 30%,#faf0d0 45%,#fff 50%,#faf0d0 55%,#D4A843 70%,#D4A843 100%
  );
}
.gc-pack-summary-card.rarity-wonder .gc-pack-summary-stars{
  background-image:linear-gradient(
    105deg,#C0392B 0%,#C0392B 30%,#fcc 45%,#fff 50%,#fcc 55%,#C0392B 70%,#C0392B 100%
  );
}
@keyframes gcStarShimmer{
  0%  {background-position:200% center;}
  100%{background-position:-200% center;}
}
.gc-pack-summary-img-wrap{
  position:relative;
  width:100%;
}
.gc-pack-summary-img{
  position:relative;
  width:100%;
  aspect-ratio:5/7;
  border-radius:10px;
  overflow:hidden;
  background:var(--card);
  box-shadow:0 2px 8px rgba(67,47,24,.12);
  isolation:isolate;
}
.gc-pack-summary-qty{
  position:absolute;
  bottom:-6px;right:-6px;
  min-width:20px;height:20px;
  border-radius:10px;
  background:#6B7280;
  color:#fff;
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  padding:0 5px;
  box-shadow:0 1px 4px rgba(0,0,0,.18);
  z-index:1;
}
/* Asset image — direct child only (the > excludes the backdrop's <img>).
   Backgrounds fill the box; stamps/stickers are contained so the whole
   item stays visible, sitting over a blurred flag backdrop. */
.gc-pack-summary-img > img{
  position:relative;
  z-index:1;
  width:100%;height:100%;
  object-fit:cover;
}
.gc-pack-summary-img[data-category="stamp"] > img,
.gc-pack-summary-img[data-category="sticker"] > img{
  object-fit:contain;
  padding:8px;
  box-sizing:border-box;
}
.gc-pack-summary-img[data-category="sticker"] > img{
  filter:drop-shadow(0 2px 4px rgba(67,47,24,.18));
}
/* Blurred flag backdrop behind contained stamps/stickers */
.gc-pack-summary-backdrop{
  position:absolute;inset:-12px;z-index:0;overflow:hidden;
}
.gc-pack-summary-backdrop img{
  width:100%;height:100%;object-fit:cover;
  filter:blur(12px) saturate(1.6) brightness(1.05);
  transform:scale(1.3);opacity:.40;
}
.gc-pack-summary-backdrop::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.85) 0%, rgba(255,255,255,.5) 35%, transparent 70%);
}

/* ── Summary-card rarity foil ──────────────────────────────────────────
   The "Your Pack" grid had NO foil at all — the holo only lived on the
   spin-fly reveal card and the WebGL collection card, so the screen the
   player actually dwells on looked flat. This grid is static (no 3D flip),
   so mix-blend composites reliably here. Per-rarity strength mirrors the
   WebGL collection card (_GC_HOLO): common = none, rare = mono sheen,
   legendary+ = drifting iridescent rainbow climbing to wonder.
   Blend = soft-light (NOT color-dodge): color-dodge clips to white on the
   pale stamp/sticker backdrops AND over-saturates photo backgrounds — it
   reads as a cheap rainbow filter. soft-light lays a gentle iridescent
   sheen on both. Strengths validated against the real sticker art.
   DIAL: --foil-strength (0=off, 1=intense) overrides every tier at once. */
.gc-pack-summary-card.rarity-rare .gc-pack-summary-img::before{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:10px;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.30) 50%, transparent 62%);
  background-size:300% 100%;mix-blend-mode:overlay;
  animation:gcGlossSwipe 9s linear infinite;
}
.gc-pack-summary-card.rarity-legendary .gc-pack-summary-img::before,
.gc-pack-summary-card.rarity-mythic .gc-pack-summary-img::before,
.gc-pack-summary-card.rarity-wonder .gc-pack-summary-img::before{
  content:'';position:absolute;inset:-30%;z-index:3;pointer-events:none;
  background:linear-gradient(135deg,#ff0000 0%,#ff6600 12%,#ffdd00 24%,#00cc44 36%,#00ccff 50%,#4444ff 62%,#aa00ff 75%,#ff0066 88%,#ff0000 100%);
  background-size:160% 160%;mix-blend-mode:soft-light;
  animation:gcHoloWander 14s ease-in-out infinite;
}
.gc-pack-summary-card.rarity-legendary .gc-pack-summary-img::before{opacity:var(--foil-strength,.45);}
.gc-pack-summary-card.rarity-mythic .gc-pack-summary-img::before{opacity:var(--foil-strength,.6);}
.gc-pack-summary-card.rarity-wonder .gc-pack-summary-img::before{
  background-size:120% 120%;opacity:var(--foil-strength,.72);animation:gcHoloWanderWonder 10s ease-in-out infinite;
}
.gc-pack-summary-name{
  font-family:'DM Sans',sans-serif;
  font-size:11px;font-weight:600;
  color:var(--text);
  text-align:center;
  line-height:1.3;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.gc-pack-summary-btn{
  padding:14px 48px;
  border-radius:99px;
  border:none;
  background:linear-gradient(135deg,#4B5563,#374151);
  color:#fff;
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(55,65,81,.3);
  transition:transform .12s ease;
}
.gc-pack-summary-btn:active{transform:scale(.95);}

/* ── Collect → file-into-binder animation ──────────────────────────────────
   The summary swaps for the country's real binder page; each new card flies
   into its slot. Reuses .bnd-grid / .bnd-slot from the binder. */
.gc-file{
  position:absolute; inset:0;
  display:flex; flex-direction:column; gap:14px;
  padding:calc(36px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom));
  transform-origin:center top;
  animation:gcFileBinderOpen .55s cubic-bezier(.22,1,.36,1) both;  /* binder "opens" on Collect */
}
@keyframes gcFileBinderOpen{
  0%{opacity:0; transform:perspective(1100px) translateY(30px) rotateX(14deg) scale(.93);}
  55%{opacity:1;}
  100%{opacity:1; transform:perspective(1100px) translateY(0) rotateX(0deg) scale(1);}
}
.gc-file-head{display:flex; align-items:center; gap:11px; flex:0 0 auto;}
.gc-file-flag{width:34px; height:auto; border-radius:4px; box-shadow:0 0 0 1px rgba(67,47,24,.12), 0 1px 3px rgba(0,0,0,.18);}
.gc-file-titles{display:flex; flex-direction:column; gap:1px; min-width:0; flex:1 1 auto;}
.gc-file-name{font-family:'Playfair Display',serif; font-size:21px; font-weight:700; color:var(--text); line-height:1.15;}
.gc-file-count{font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.02em; color:var(--muted);}
.gc-file-count b{color:var(--gold); font-weight:700;}
.gc-file-scroll{flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px;}
.gc-file-continue{flex:0 0 auto; align-self:center; margin-top:2px;}
.gc-file-continue.is-hidden{opacity:0; pointer-events:none; transform:translateY(10px);}
/* not is-hidden → fade/slide in */
.gc-file-continue{transition:opacity .35s ease, transform .35s cubic-bezier(.22,1,.36,1);}

/* Header status group — live "filed / total" progress + a high-contrast Skip all
   pill, pinned top-right of the binder header so it's seen where the eye reads the
   country name and never scrolls away during the pans. */
.gc-file-status{display:flex; align-items:center; gap:10px; margin-left:auto; flex:0 0 auto;}
.gc-file-progress{
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; font-weight:700;
  letter-spacing:.02em; color:var(--muted); white-space:nowrap;
}
.gc-file-progress .gc-file-prog-n{color:var(--gold); display:inline-block;}
.gc-file-skip{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:5px;
  padding:8px 14px; border:none; border-radius:999px;
  background:var(--gold); color:#3C2A12;
  font-family:'DM Sans',sans-serif; font-size:13px; font-weight:700; letter-spacing:.01em;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  box-shadow:0 2px 8px rgba(198,138,58,.35), inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .12s ease, box-shadow .15s ease, opacity .25s ease;
}
.gc-file-skip:active{transform:scale(.94);}
.gc-file-skip-chev{font-size:15px; line-height:1; transform:translateY(-.5px);}
.gc-file-skip.is-hidden{opacity:0; pointer-events:none;}
/* Country name must yield to the status group rather than wrap/push it. */
.gc-file-name{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;}

/* Target slot awaiting its incoming card — gold ring + gentle pulse, art empty. */
.bnd-slot.is-awaiting{z-index:2;}
.bnd-slot.is-awaiting .bnd-slot-img{box-shadow:inset 0 0 0 2px rgba(198,138,58,.55); animation:gcFileAwait 1.1s ease-in-out infinite;}
.bnd-slot.is-awaiting .bnd-slot-tag{display:none;}
@keyframes gcFileAwait{
  0%,100%{box-shadow:inset 0 0 0 2px rgba(198,138,58,.5);}
  50%{box-shadow:inset 0 0 0 2px rgba(198,138,58,.95), 0 0 16px rgba(198,138,58,.45);}
}
/* Slot settles with a soft pop once the burn finishes. */
.bnd-slot.is-filled-now{animation:gcFilePop .55s cubic-bezier(.34,1.56,.64,1); z-index:3;}
@keyframes gcFilePop{0%{transform:scale(.84);} 60%{transform:scale(1.07);} 100%{transform:scale(1);}}

/* ── Polaroid develop reveal ── the card art loads beneath a cream scrim and
   "develops" out of a milky, over-exposed wash to full clarity as the scrim fades.
   The SCRIM opacity-fade is the load-bearing reveal; the brightness/saturation
   filter on the art is flourish, so it degrades gracefully if the WebView drops
   animated filters. Transform/opacity/filter only — GPU-safe, no mask/clip. */
.bnd-dev{position:absolute; inset:0; z-index:4; pointer-events:none; border-radius:9px; overflow:hidden;}
.bnd-dev-scrim{position:absolute; inset:0; background:#FBF6EC; opacity:.92;}
[data-theme="dark"] .bnd-dev-scrim{background:#2C271F;}
/* Warm vignette that blooms then settles as the print comes up. */
.bnd-dev-vignette{
  position:absolute; inset:0; opacity:0;
  background:radial-gradient(120% 120% at 50% 45%, transparent 56%, rgba(67,47,24,.2) 100%);
}
.bnd-dev.is-developing .bnd-dev-scrim{animation:gcDevScrim 1s cubic-bezier(.4,0,.2,1) forwards;}
.bnd-dev.is-developing .bnd-dev-vignette{animation:gcDevVignette 1s ease-out forwards;}
@keyframes gcDevScrim{0%{opacity:.92;} 100%{opacity:0;}}
@keyframes gcDevVignette{0%{opacity:0;} 42%{opacity:1;} 100%{opacity:0;}}
/* The art itself comes up: over-exposed + grey -> full colour + focus. Clip the
   slot during the develop so the gentle scale-down can't poke past the corners. */
.bnd-slot.is-developing{overflow:hidden;}
.bnd-slot.is-developing .bnd-slot-img{animation:gcDevelop 1s cubic-bezier(.4,0,.2,1) both;}
@keyframes gcDevelop{
  0%{filter:brightness(1.7) saturate(0) contrast(.6); transform:scale(1.05);}
  100%{filter:brightness(1) saturate(1) contrast(1); transform:scale(1);}
}

/* ── Browse sub-view (passport-card style) ── */

/* Browse top bar — round back button, centered title, dark currency pill */
#gcViewAll{padding-bottom:120px;}  /* clearance for the fixed filter pills + nav */

.gc-browse-bar{
  display:flex;align-items:center;
  gap:10px;
  padding:18px 0 12px;
}
.gc-browse-back{
  width:40px;height:40px;
  border-radius:50%;
  border:none;
  background:var(--card);
  box-shadow:0 1px 3px rgba(0,0,0,.06), inset 0 0 0 1px var(--border);
  color:var(--text);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  flex-shrink:0;
  transition:transform .12s ease;
}
.gc-browse-back:active{transform:scale(.92);}
.gc-browse-title{
  flex:1;
  font-family:'Playfair Display',serif;font-weight:700;
  font-size:26px;line-height:1.1;
  color:var(--text);
  text-align:center;
}
.gc-browse-currency{
  display:inline-flex;align-items:center;
  gap:6px;
  padding:7px 12px 7px 10px;
  border-radius:999px;
  background:#1C1713;
  color:#FBF7E8;
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;font-weight:600;
  font-variant-numeric:tabular-nums;
  flex-shrink:0;
  letter-spacing:.02em;
}
.gc-browse-currency-icon{
  display:inline-flex;align-items:center;justify-content:center;
  color:#A8C76B;
}

/* Search bar — narrows the country list by name or ISO code. When the
   input has text, the continent filter is bypassed and results are pulled
   from the full catalog; selecting a continent pill clears the search. */
.gc-browse-search{
  position:relative;
  display:flex;align-items:center;
  margin:16px 0 6px;
  padding:0 14px;
  height:42px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.gc-browse-search:focus-within{
  border-color:rgba(198,138,58,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 0 0 3px rgba(198,138,58,.10);
}
.gc-browse-search-icon{
  color:var(--muted);
  display:inline-flex;align-items:center;
  margin-right:8px;
  flex-shrink:0;
  transition:color .2s ease;
}
.gc-browse-search:focus-within .gc-browse-search-icon{color:var(--gold);}
.gc-browse-search-input{
  flex:1;min-width:0;
  border:none;background:transparent;
  font-family:'DM Sans',sans-serif;
  font-size:14px;
  color:var(--text);
  outline:none;
  padding:0;
}
.gc-browse-search-input::placeholder{color:var(--muted);}
.gc-browse-search-clear{
  background:none;border:none;
  padding:6px;margin-right:-6px;
  border-radius:50%;
  color:var(--muted);
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:background-color .15s ease, color .15s ease;
}
.gc-browse-search-clear:active{
  background:rgba(0,0,0,.05);
  color:var(--text);
}
.gc-browse-search-clear[hidden]{display:none;}

/* Empty state when search produces zero matches. */
.gc-browse-empty{
  padding:32px 16px;
  text-align:center;
  font-family:'DM Sans',sans-serif;
  font-size:14px;
  color:var(--muted);
  line-height:1.5;
}
.gc-browse-empty strong{
  color:var(--text);
  font-weight:600;
}

/* Section stats — eyebrow showing active continent + country count */
.gc-browse-stats{padding:8px 4px 18px;}
.gc-browse-stats-eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);
}

/* 1-col grid — one country per row */
.gc-browse-grid{
  display:grid;grid-template-columns:1fr;
  gap:12px;
}

/* Country card — passport-page-style preview + foot */
.gc-bcard{
  --tint:200,150,110;  /* default — overridden inline per country */
  display:flex;flex-direction:column;
  gap:10px;
  padding:10px 10px 12px;
  border:none;border-radius:18px;
  background:var(--card);
  box-shadow:0 2px 10px rgba(0,0,0,.05);
  cursor:pointer;
  text-align:left;
  font-family:inherit;color:var(--text);
  contain:layout paint;
  transition:transform .15s ease;
}
.gc-bcard:active{transform:scale(.98);}

.gc-bcard-preview{
  position:relative;
  border-radius:12px;
  padding:16px 14px;
  min-height:104px;
  background:
    radial-gradient(ellipse at 78% 55%, rgba(var(--tint),.32) 0%, rgba(var(--tint),0) 70%),
    linear-gradient(135deg, var(--paper-2) 0%, rgba(var(--tint),.05) 100%);
  box-shadow:inset 0 0 0 1px rgba(var(--tint),.18);
  overflow:hidden;
  isolation:isolate;
}
/* When a country has bespoke pack art on R2 (currently France only), the
   image replaces the watercolour placeholder + we hide the native/English/
   stamp overlays. Pack URL is set inline via background-image.
   The preview reshapes to 16:9 — matching the locked aspect in the pack
   master prompt (docs/gacha/memoroam-pack-master-prompt) — so `cover`
   fills the rectangle exactly with no cropping and no cream margins.
   Placeholder cards keep their original shorter shape; only cards with
   pack art grow to the proper 16:9 frame. */
.gc-bcard-preview.has-pack{
  aspect-ratio:16/9;
  min-height:0;
  padding:0;
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  background-color:var(--paper-2);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}
.gc-bcard-preview.has-pack .gc-bcard-native,
.gc-bcard-preview.has-pack .gc-bcard-english,
.gc-bcard-preview.has-pack .gc-bcard-stamp{display:none;}
/* Memoroam mascot overlay — sits centred inside the seal's empty inner
   cream circle. Position matches the pack master prompt: seal anchored at
   73% horizontal / 50% vertical, inner circle ~50% of seal diameter.
   mix-blend-mode:multiply integrates the digital logo into the watercolour
   paper — pure whites dissolve into the cream, darks stay strong, so it
   reads as printed-on rather than slapped-on. Slight desaturation + soft
   cobalt-tinted shadow continue the painted feel. */
.gc-bcard-seal-logo{
  position:absolute;
  width:12%;
  aspect-ratio:1/1;
  transform:translate(-50%,-50%);
  object-fit:contain;
  pointer-events:none;
  opacity:.92;
  mix-blend-mode:multiply;
  filter:saturate(.9) drop-shadow(0 1px 2px rgba(0,55,164,.12));
  z-index:1;
}
.gc-bcard-native{
  position:relative;z-index:1;
  font-family:'Playfair Display',serif;
  font-weight:700;font-size:22px;
  line-height:1.1;
  color:rgb(var(--tint));
  opacity:.88;
  letter-spacing:-.01em;
  max-width:60%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.gc-bcard-native-en{font-size:18px;}  /* slightly smaller when showing English name as the prominent label */
.gc-bcard-english{
  position:relative;z-index:1;
  font-family:'IBM Plex Mono',monospace;
  font-size:9.5px;font-weight:700;
  letter-spacing:.18em;
  color:rgb(var(--tint));
  opacity:.72;
  text-transform:uppercase;
  margin-top:1px;
  max-width:60%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.gc-bcard-stamp{
  position:absolute;
  top:50%;right:12px;
  transform:translateY(-50%);
  width:56px;height:56px;
  border:1.5px dashed rgba(var(--tint),.50);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'IBM Plex Mono',monospace;
  font-size:8px;font-weight:700;
  letter-spacing:.10em;
  color:rgba(var(--tint),.65);
  text-align:center;
  line-height:1.3;
  z-index:1;
}

.gc-bcard-foot{
  display:flex;flex-direction:column;
  gap:8px;
  padding:2px 4px 0;
}
.gc-bcard-name-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;
}
.gc-bcard-name{
  font-family:'Playfair Display',serif;
  font-weight:700;font-size:16px;
  line-height:1.15;
  color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  min-width:0;flex:1;
}
.gc-bcard-coming-soon{
  font-family:'IBM Plex Mono',monospace;
  font-size:10px;font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  opacity:.7;
  margin-top:-4px;
}
.gc-bcard-lock-icon{
  width:22px;height:22px;
}
.gc-bcard-progress{
  display:flex;align-items:center;gap:8px;
}
.gc-bcard-bar{
  flex:1;
  height:3px;
  background:rgba(0,0,0,.07);
  border-radius:999px;
  overflow:hidden;
}
.gc-bcard-bar-fill{
  height:100%;
  background:rgba(var(--tint),.85);
  border-radius:999px;
  transition:width .4s ease;
}
.gc-bcard-count{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;font-weight:500;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
  flex-shrink:0;
}

/* Coming Soon — no pack art yet. Always renders muted/grey regardless of
   owned count, so a country with stray test-data items doesn't get a
   tinted preview while the rest of its bucket sits grey.
   :not(.has-pack) keeps the gradient from clobbering pack-art cards via
   shorthand-resets-longhand cascade (was killing background-size:contain). */
.gc-bcard-preview:not(.has-pack){
  background:linear-gradient(135deg, var(--paper-2) 0%, var(--card) 100%);
  box-shadow:inset 0 0 0 1px var(--border);
}
.gc-bcard:not(.has-pack-card) .gc-bcard-native,
.gc-bcard:not(.has-pack-card) .gc-bcard-english{
  color:var(--muted);
  opacity:.45;
}
.gc-bcard:not(.has-pack-card) .gc-bcard-stamp{
  color:var(--muted);
  border-color:var(--border);
  opacity:.45;
}
.gc-bcard.is-locked .gc-bcard-name,
.gc-bcard:not(.has-pack-card) .gc-bcard-name{color:var(--muted);}

/* Complete (60/60) — gold trim */
.gc-bcard.is-complete{
  box-shadow:0 2px 10px rgba(198,138,58,.20), inset 0 0 0 1.5px var(--gold-soft);
}
.gc-bcard.is-complete .gc-bcard-name{color:var(--gold);}
.gc-bcard.is-complete .gc-bcard-count{color:var(--gold);font-weight:600;}

/* Continent filter pills — pinned to the bottom edge of the page (sibling
   of the sub-views inside #pageGacha so they don't slide with the view
   transform). When Browse is active the bottom nav is hidden, so these
   pills become the lowest UI element. */
#pageGacha .gc-browse-filters{
  position:absolute;
  z-index:6;                      /* above the sheet (z-index:5) */
  left:18px;right:18px;
  bottom:calc(20px + env(safe-area-inset-bottom, 0px));
  display:flex;
  gap:8px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
  padding:6px 2px;
  z-index:6;
  opacity:0;
  pointer-events:none;
  transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease;
}
#pageGacha.is-view-all .gc-browse-filters{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}
.gc-browse-filters::-webkit-scrollbar{display:none;}

/* Immersive Browse: hide the bottom nav + extend #pageGacha to fill the
   full viewport so the filter pills sit at the bottom edge. Mirrors the
   Days v2 immersive pattern (body class toggled from _gcSetView). */
body.gc-browse-immersive .bottom-nav{display:none;}
body.gc-browse-immersive #pageGacha{height:100vh;}
.gc-bf{
  display:inline-flex;align-items:center;
  padding:10px 18px;
  border:none;border-radius:999px;
  background:var(--card);
  font-family:'DM Sans',sans-serif;
  font-size:13.5px;font-weight:500;
  color:var(--text);
  flex-shrink:0;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.04);
  transition:transform .12s ease, background-color .2s ease, color .2s ease;
}
.gc-bf:active{transform:scale(.97);}
.gc-bf-name{letter-spacing:.01em;}
.gc-bf.is-active{
  background:#1C1713;
  color:#FBF7E8;
}

/* ── Toast (singleton, lazy-mounted to body) ── */
.gc-toast{
  position:fixed;
  left:50%;bottom:86px;
  transform:translate(-50%, 8px);
  padding:10px 16px;
  border-radius:999px;
  background:rgba(28,23,19,.92);
  color:var(--paper-2);
  font-family:'DM Sans',sans-serif;
  font-size:13px;font-weight:500;
  letter-spacing:.01em;
  opacity:0;
  pointer-events:none;
  z-index:9999;
  white-space:nowrap;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  transition:opacity .18s ease, transform .18s ease;
  /* Base rule has NO backdrop-filter — only the open state does. */
}
.gc-toast.is-open{
  opacity:1;
  transform:translate(-50%, 0);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

/* ═══════════════════════════════════════════
   Bamboo Shop — centered popup (decorative gold banner + bundle rows)
   ═══════════════════════════════════════════ */
.gc-bstore{
  position:fixed;inset:0;z-index:10001;
  display:flex;align-items:center;justify-content:center;
  padding:24px 18px calc(24px + env(safe-area-inset-bottom));
  opacity:0;
  pointer-events:none;
  transition:opacity .26s ease;
}
.gc-bstore.is-open{
  opacity:1;
  pointer-events:auto;
}

/* Scrim — backdrop-filter scoped to open state so the always-mounted
   overlay doesn't tax compositing while idle. */
.gc-bstore-scrim{
  position:absolute;inset:0;
  background:rgba(38,32,22,.46);
}
.gc-bstore.is-open .gc-bstore-scrim{
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}

/* Modal card */
.gc-bstore-modal{
  position:relative;
  width:100%;max-width:380px;max-height:100%;
  display:flex;flex-direction:column;
  background:var(--card);
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 18px 50px rgba(40,30,12,.32), 0 0 0 1px rgba(198,138,58,.12);
  transform:translateY(14px) scale(.97);
  transition:transform .32s cubic-bezier(.32,.72,.24,1);
}
.gc-bstore.is-open .gc-bstore-modal{transform:translateY(0) scale(1);}

/* Decorative gold banner */
.gc-bstore-banner{
  position:relative;height:128px;flex-shrink:0;
  background:linear-gradient(135deg, #E8B871 0%, #C68A3A 55%, #A06F2B 100%);
  overflow:hidden;
}
.gc-bstore-banner-glow{
  position:absolute;left:50%;top:42%;
  width:230px;height:230px;transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,247,224,.7) 0%, rgba(255,247,224,0) 65%);
  pointer-events:none;
}
/* Custom banner image — covers the gradient+coin motif when it loads;
   onerror removes it so the gradient remains as fallback. */
.gc-bstore-banner-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  pointer-events:none;
}
.gc-bstore-coin{
  position:absolute;
  filter:drop-shadow(0 2px 5px rgba(120,80,20,.35));
  pointer-events:none;
}
.gc-bstore-spark{
  position:absolute;border-radius:50%;
  background:rgba(255,250,235,.92);
  box-shadow:0 0 6px rgba(255,250,235,.85);
  transform:translate(-50%,-50%);
  pointer-events:none;
}

/* Banner balance pill + close */
.gc-bstore-bal{
  position:absolute;left:13px;top:13px;
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 13px 6px 8px;border-radius:999px;
  background:#FFFDF8;
  font-family:'IBM Plex Mono',monospace;font-size:13.5px;font-weight:800;
  color:#5E4310;font-variant-numeric:tabular-nums;
  box-shadow:0 3px 10px rgba(70,45,8,.30), 0 0 0 1.5px rgba(198,138,58,.45);
}
/* Content */
.gc-bstore-content{
  padding:18px 20px calc(18px + env(safe-area-inset-bottom));
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.gc-bstore-titlerow{display:flex;align-items:center;gap:7px;}
.gc-bstore-title{
  font-family:'Playfair Display',serif;font-weight:700;
  font-size:21px;line-height:1.1;color:var(--text);
}
.gc-bstore-desc{
  margin:6px 0 16px;
  font-family:'DM Sans',sans-serif;font-size:13px;line-height:1.45;
  color:var(--muted);
}

/* Bundle rows */
.gc-bstore-list{display:flex;flex-direction:column;gap:10px;}
.gc-bstore-row{
  position:relative;
  display:flex;align-items:center;gap:13px;
  width:100%;text-align:left;
  padding:13px 12px;border-radius:16px;
  background:var(--bg);
  border:1px solid var(--border);
  transition:box-shadow .2s ease;
  overflow:hidden;
}
.gc-bstore-row.is-popular{
  border-color:rgba(198,138,58,.32);
  box-shadow:0 2px 10px rgba(198,138,58,.10);
}
.gc-bstore-row.is-best{
  border-color:rgba(198,138,58,.40);
  background:linear-gradient(120deg, var(--bg) 55%, rgba(198,138,58,.06) 100%);
  box-shadow:0 3px 14px rgba(198,138,58,.14);
}
.gc-bstore-row.is-popular::before,
.gc-bstore-row.is-best::before{
  content:'';
  position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(
    110deg,
    transparent 30%,
    rgba(232,184,113,.10) 47%,
    rgba(255,255,255,.16) 50%,
    rgba(232,184,113,.10) 53%,
    transparent 70%
  );
  background-size:250% 100%;
  animation:gcShimmer 4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes gcShimmer{
  0%{background-position:150% 0;}
  100%{background-position:-50% 0;}
}

.gc-bstore-row-icon{
  width:46px;height:46px;flex-shrink:0;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 40%, rgba(232,184,113,.20), rgba(232,184,113,.06));
}
.gc-bstore-row-icon img{filter:drop-shadow(0 2px 4px rgba(0,0,0,.12));}
.gc-bstore-row-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;}
.gc-bstore-row-amount{
  font-family:'IBM Plex Mono',monospace;font-size:18px;font-weight:800;
  color:var(--text);font-variant-numeric:tabular-nums;line-height:1;
}
/* Corner tab — tucked flush into the row's top-right corner, clipped to the
   row's rounded edge (row has overflow:hidden). Sits above the centred price
   pill without touching it, so the pill column stays aligned. */
.gc-bstore-row-tag{
  position:absolute;top:0;right:0;z-index:2;
  padding:2px 9px 3px;
  border-radius:0 0 0 10px;
  background:linear-gradient(135deg, #8AAE54 0%, #6C8F3E 100%);
  font-family:'DM Sans',sans-serif;font-size:8px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:#fff;
  white-space:nowrap;line-height:1.2;
}
.gc-bstore-row-tag.is-best{background:linear-gradient(135deg, #6C8F3E 0%, #4F7029 100%);}
.gc-bstore-row-bonus{
  font-family:'DM Sans',sans-serif;font-size:11.5px;font-weight:700;
  color:#6C8F3E;letter-spacing:.01em;
}
.gc-bstore-row-bonus-muted{color:var(--muted);font-weight:600;}
.gc-bstore-row-price{
  flex-shrink:0;
  width:78px;box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;
  padding:7px 8px;border:none;border-radius:999px;
  background:linear-gradient(135deg, #C68A3A 0%, #A06F2B 100%);
  font-family:'DM Sans',sans-serif;font-size:13px;font-weight:700;color:#fff;
  box-shadow:0 2px 7px rgba(160,111,43,.26);
  cursor:pointer;
  transition:transform .12s ease;
}
.gc-bstore-row-price:active{transform:scale(.95);}

/* Balance bump animation (shared) */
.gc-ws-bal-bump{
  animation:gcBalBump .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes gcBalBump{
  0%{transform:scale(1);}
  40%{transform:scale(1.18);}
  100%{transform:scale(1);}
}

/* ── Dark mode — Bamboo Shop ── */
[data-theme="dark"] .gc-bstore-modal{
  box-shadow:0 18px 50px rgba(0,0,0,.5), 0 0 0 1px rgba(232,184,113,.14);
}
[data-theme="dark"] .gc-bstore-row{background:var(--bg);}
[data-theme="dark"] .gc-bstore-row.is-popular{
  border-color:rgba(232,184,113,.30);
  box-shadow:0 2px 10px rgba(198,138,58,.16);
}
[data-theme="dark"] .gc-bstore-row.is-best{
  border-color:rgba(232,184,113,.35);
  background:linear-gradient(120deg, var(--bg) 55%, rgba(198,138,58,.10) 100%);
  box-shadow:0 3px 14px rgba(198,138,58,.20);
}
[data-theme="dark"] .gc-bstore-row-bonus{color:#A8C76B;}

/* Dark mode keeps the same green pill + light medallion; just lift the border
   a touch for separation against the dark page. */
[data-theme="dark"] .gc-coin{border-color:rgba(255,255,255,.10);}

[data-theme="dark"] .gc-featured-card-limited{border-color:rgba(232,184,113,.20);}
[data-theme="dark"] .gc-featured-card-daily{border-color:rgba(168,199,107,.20);}
[data-theme="dark"] .gc-featured-card-limited .gc-featured-strip{
  background:linear-gradient(180deg, rgba(232,184,113,.12) 0%, rgba(232,184,113,0) 100%);
}
[data-theme="dark"] .gc-featured-card-daily .gc-featured-strip{
  background:linear-gradient(180deg, rgba(168,199,107,.12) 0%, rgba(168,199,107,0) 100%);
}
[data-theme="dark"] .gc-featured-thumb-limited{
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,200,220,.12) 0%, rgba(255,200,220,0) 65%),
    linear-gradient(165deg, rgba(255,200,220,.04) 0%, var(--paper-2) 100%);
}
[data-theme="dark"] .gc-featured-thumb-daily{
  background:
    radial-gradient(ellipse at 50% 30%, rgba(168,199,107,.14) 0%, rgba(168,199,107,0) 65%),
    linear-gradient(165deg, rgba(168,199,107,.04) 0%, var(--paper-2) 100%);
}
[data-theme="dark"] .gc-featured-card-daily .gc-featured-countdown{color:#A8C76B;}
[data-theme="dark"] .gc-featured-buy{
  background:linear-gradient(135deg, #8AB050 0%, #5D8033 100%);
}
[data-theme="dark"] .gc-featured-dot{background:rgba(255,255,255,.10);}
[data-theme="dark"] .gc-featured-dot.is-active{background:var(--gold-soft);}

/* ── Store (dark) ── */
[data-theme="dark"] .gc-store-bal{
  border-color:rgba(232,184,113,.24);
  background:linear-gradient(135deg, rgba(232,184,113,.12) 0%, rgba(232,184,113,.04) 100%);
}
[data-theme="dark"] .gc-dc{border-color:rgba(255,255,255,.08);}
[data-theme="dark"] .gc-dc-skel .gc-dc-art{
  background:linear-gradient(110deg, var(--paper-2) 30%, rgba(255,255,255,.05) 50%, var(--paper-2) 70%);
  background-size:200% 100%;
}
[data-theme="dark"] .gc-sb{border-color:rgba(232,184,113,.22);box-shadow:0 6px 24px -10px rgba(0,0,0,.7);}
/* Scenes carry their own art-directed colour, so they read well in dark mode
   as-is; just deepen the sakura wash a touch so it doesn't glare. */
[data-theme="dark"] .gc-sb-scene[data-scene="sakura"]{
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(232,178,200,.85) 0%, rgba(232,178,200,0) 55%),
    radial-gradient(90% 80% at 12% 90%, rgba(214,166,150,.7) 0%, rgba(214,166,150,0) 60%),
    linear-gradient(155deg, #C99BAE 0%, #BE8298 38%, #B59686 100%);
}
[data-theme="dark"] .gc-sb-view{background:rgba(244,238,226,.92);}
[data-theme="dark"] .gc-tpl-card{border-color:rgba(255,255,255,.08);}
[data-theme="dark"] .gc-daily-timer{
  border-color:rgba(232,184,113,.22);background:rgba(232,184,113,.10);
}

[data-theme="dark"] .gc-hero-card{
  background:transparent;
  border:none;
}


/* Browse sub-view — dark mode */
[data-theme="dark"] .gc-browse-back{
  background:var(--card);
  box-shadow:0 1px 3px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.06);
}
[data-theme="dark"] .gc-browse-currency{background:#0F0C09;}

[data-theme="dark"] .gc-bcard{
  box-shadow:0 2px 10px rgba(0,0,0,.3);
}
[data-theme="dark"] .gc-bcard-preview:not(.has-pack){
  background:linear-gradient(135deg, var(--paper-2) 0%, var(--card) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
[data-theme="dark"] .gc-bcard-bar{background:rgba(255,255,255,.08);}

[data-theme="dark"] .gc-bf{
  background:var(--card);
  box-shadow:0 4px 14px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.2);
}
[data-theme="dark"] .gc-bf.is-active{background:#0F0C09;color:#FBF7E8;}

/* ════════════════════════════════════════════════════════════════════════
   PROFILE TABS + ASSET BINDER (Pokémon-TCG-style collection grid)
   ════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════════
   COLLECTION SHELF — a swipeable carousel of "books" (Passport · Atlas).
   Replaces the old Passport|Binder tab control. Built on native CSS
   scroll-snap so the horizontal swipe is the browser's own momentum scroll
   (no custom touch-gesture code — the robust path on the Samsung WebView).
   A peek of the neighbouring cover hints there's more; the dot indicator
   tracks position. Tap a cover to open it.
   ════════════════════════════════════════════════════════════════════════ */
.shelf{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column;
  margin:0 -18px;   /* full-bleed past .page-scroll's 18px padding → widest possible covers */
}
/* Parent .page-scroll is touch-action:pan-y, which on this WebView intersects
   to "no pan" against a pan-x child — so open the profile page-scroll up to
   `auto` and let the track itself claim the horizontal gesture. */
#pageProfile .page-scroll{touch-action:auto;}
.shelf-track{
  position:relative;
  flex:1 1 auto; min-height:0;
  display:flex; align-items:stretch; gap:8px;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x;
  padding:10px 4%;            /* slim margins; the covers do the work */
  scrollbar-width:none;
}
.shelf-track::-webkit-scrollbar{display:none;}
.shelf-slide{
  flex:0 0 92%;               /* wide covers + a thin peek of the neighbour */
  scroll-snap-align:center;
  display:flex; align-items:center; justify-content:center;
  min-width:0;
}
.shelf-slide .passport-book,
.shelf-slide .binder-book{width:100%; height:100%;}

/* ── Atlas / Collection cover ── the binder's "book": a green-and-gold
   collector's case sized to match the passport so the shelf reads even. */
.binder-book{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:100%; padding:6px 0;
}
.binder-frame{
  position:relative;
  width:100%; aspect-ratio:0.70; max-height:100%;   /* passport proportion, matches the shelf */
}
.binder-cover{
  position:absolute; inset:0;
  border-radius:16px;
  background:linear-gradient(145deg,#1F3D34 0%,#2C5247 42%,#162E29 100%);
  box-shadow:0 8px 32px rgba(0,0,0,.26);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  cursor:pointer; overflow:hidden;
  user-select:none; -webkit-user-select:none;
  transition:transform .18s ease;
}
/* Lit-from-above sheen + grounded base shadow — gives the leather some depth. */
.binder-cover::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 60% at 50% -8%, rgba(255,255,255,.10), transparent 56%),
    radial-gradient(100% 80% at 50% 122%, rgba(0,0,0,.24), transparent 60%);
}
.binder-cover:active{transform:scale(.98);}
.binder-crest{position:relative; color:#C8A96E; opacity:.92;}
.binder-title{
  position:relative;
  font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:600;
  letter-spacing:3px; text-transform:uppercase; color:#C8A96E;
}
.binder-subtitle{
  position:relative;
  font-family:'IBM Plex Mono',monospace; font-size:8px;
  letter-spacing:4px; text-transform:uppercase; color:rgba(200,169,110,.5);
  margin-top:-6px;
}
.binder-badge{
  position:absolute; bottom:24px;
  background:rgba(200,169,110,.15);
  border:1px solid rgba(200,169,110,.2);
  border-radius:20px; padding:5px 14px;
  font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:500;
  letter-spacing:.5px; color:#C8A96E;
}
/* Gold map-corner brackets. */
.binder-corner{
  position:absolute; width:24px; height:24px;
  border:1.5px solid rgba(200,169,110,.5);
  pointer-events:none;
}
.binder-corner.tl{top:14px;left:14px;border-right:0;border-bottom:0;border-radius:6px 0 0 0;}
.binder-corner.tr{top:14px;right:14px;border-left:0;border-bottom:0;border-radius:0 6px 0 0;}
.binder-corner.bl{bottom:14px;left:14px;border-right:0;border-top:0;border-radius:0 0 0 6px;}
.binder-corner.br{bottom:14px;right:14px;border-left:0;border-top:0;border-radius:0 0 6px 0;}

/* ── Binder interior ── a FULL-SCREEN view that reveals when the Atlas is tapped:
   it scales up + fades from the binder's position into the whole screen. Bottom nav
   hidden via body.binder-open; the 3D card detail (z 10006) layers above. Mounted
   outside .page-strip so position:fixed escapes its will-change containing block. ── */
body.binder-open .bottom-nav{display:none;}
.binder-interior{
  position:fixed; inset:0; z-index:1001;
  display:flex; flex-direction:column;
  /* Flat bg — a top gold glow here got hard-cut by the opaque sticky pills strip,
     leaving a faint warm "shadow line" right below the search bar. */
  background:var(--bg);
  opacity:0; visibility:hidden;
  transform:scale(.94);
  transform-origin:50% 44%;
  transition:opacity .26s ease, transform .34s cubic-bezier(.22,.61,.24,1), visibility .34s;
}
.binder-interior.open{opacity:1; visibility:visible; transform:none;}
.binder-interior-head{
  flex-shrink:0;
  display:flex; align-items:center; gap:8px;
  padding:calc(env(safe-area-inset-top,0px) + 16px) 16px 8px;
}
/* Minimal bare chevron — no filled circle, so it doesn't crowd the header. */
.binder-back{
  flex-shrink:0; width:32px; height:40px; padding:0; margin-left:-4px;
  border:none; background:none; color:var(--text);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:opacity .15s ease;
}
.binder-back:active{opacity:.5;}
/* Header search — a sleek pill inline with the back chevron (country list only;
   hidden on the continent tiles). The [hidden] override is required because
   .binder-search's display:flex would otherwise beat the UA [hidden]{display:none}
   at equal specificity. */
.binder-search{
  flex:1 1 auto; min-width:0;
  display:flex; align-items:center; gap:9px;
  height:44px; padding:0 16px;
  background:var(--card);
  border:1px solid rgba(67,47,24,.07);
  border-radius:999px;                       /* clean pill, matches the filter pills */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);   /* flat — no drop shadow band below */
  transition:border-color .18s ease, box-shadow .18s ease;
}
.binder-search[hidden]{display:none;}
.binder-search:focus-within{
  border-color:rgba(198,138,58,.5);
  box-shadow:0 3px 16px rgba(198,138,58,.2), 0 0 0 3px rgba(198,138,58,.12), inset 0 1px 0 rgba(255,255,255,.55);
}
.binder-search-ic{flex-shrink:0; width:17px; height:17px; color:var(--gold); opacity:.85;}
.binder-search-inp{
  flex:1 1 auto; min-width:0; border:none; background:none; outline:none; padding:0;
  font-family:'DM Sans',sans-serif; font-size:14.5px; font-weight:500; color:var(--text);
}
.binder-search-inp::placeholder{color:var(--muted); opacity:.85; font-weight:400;}
[data-theme="dark"] .binder-search{
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
[data-theme="dark"] .binder-search:focus-within{
  border-color:rgba(198,138,58,.5);
  box-shadow:0 3px 16px rgba(0,0,0,.32), 0 0 0 3px rgba(198,138,58,.16), inset 0 1px 0 rgba(255,255,255,.05);
}
.binder-interior-body{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column;   /* lets the continent grid fill the height */
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:0 16px 24px;
}

/* ── Atlas contents index ── a TCG-style accordion list. Each row: leading flag,
   country name, an "owned / total" count on the right, and a flat scaleX bar
   (never a ring — WebView wobble). ★ legendary+mythic and ✦ wonder "rare pull"
   pills sit under the name only when you own some. The name, pills, and bar share
   one left edge (past the flag) so the row reads as a clean content column. */
.bndx-list{
  position:relative; z-index:1;
  display:flex; flex-direction:column; gap:10px;
  padding:6px 0 8px;
}
/* Continent filter pills on the country list (replaces the 3×2 tiles screen).
   Reuses the Browse .gc-bf pill; sticky so they stay reachable while scrolling.
   Negative side margins bleed the sticky strip to the scroll-body edges. */
.bndx-pills{
  display:flex; gap:8px;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch;
  position:sticky; top:0; z-index:5;
  margin:0 -16px 4px; padding:10px 16px 12px;
  background:linear-gradient(var(--bg) 80%, transparent);
}
.bndx-pills::-webkit-scrollbar{display:none;}
/* Lighter shadow than the floating Browse pills (these sit on the list). */
.bndx-pill{box-shadow:0 2px 8px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);}

.bndx-item{
  background:var(--card); border-radius:14px; overflow:hidden;
  box-shadow:0 1px 5px rgba(67,47,24,.12);
}
.bndx-item.is-complete{box-shadow:0 0 0 1.5px var(--gold), 0 1px 6px rgba(198,138,58,.28);}
.bndx-row{
  display:flex; flex-direction:column; align-items:center; gap:16px;  /* flag+count centred over the fan */
  width:100%; text-align:left; border:none; cursor:pointer; background:transparent;
  padding:20px 18px 24px;                                             /* generous room around the cards */
  transition:background .15s ease;
}
.bndx-row:active{background:rgba(67,47,24,.05);}
/* Expandable slot grid (the accordion body); JS animates its height. */
.bndx-slots{height:0; overflow:hidden;}
.bndx-slots .bnd-grid{padding:2px 16px 16px;}
/* Names dropped — the flag IS the country identifier, so it's larger and fully
   visible (nothing overlaps it). Country name lives in the flag's alt text. */
.bndx-flag{
  width:44px; height:auto; display:block; border-radius:5px; flex-shrink:0;
  /* width-locked + natural height so wide flags (Malaysia/Philippines are 2:1)
     show in full instead of being cropped; hairline ring separates pale flags */
  box-shadow:0 0 0 1px rgba(67,47,24,.12), 0 1px 3px rgba(0,0,0,.20);
}
[data-theme="dark"] .bndx-flag{box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 1px 3px rgba(0,0,0,.30);}
/* Acquired-count pill — sits BESIDE the flag (no longer over it). Gold once
   you've collected some, neutral at zero. */
.bndx-count-pill{
  flex-shrink:0;
  min-width:24px; height:22px; padding:0 9px; box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:11px;
  background:rgba(67,47,24,.07); color:var(--muted);
  font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:700; line-height:1;
}
.bndx-count-pill.is-some{background:rgba(198,138,58,.15); color:var(--gold);}
[data-theme="dark"] .bndx-count-pill{background:rgba(255,255,255,.07);}
[data-theme="dark"] .bndx-count-pill.is-some{background:rgba(198,138,58,.2);}

/* ── Country screen ── a row tap opens this full view of one country's grid.
   The header back button returns to the list. Slides in for a "new screen" feel. */
.bndc{animation:bndcIn .28s cubic-bezier(.22,.61,.24,1);}
@keyframes bndcIn{from{opacity:0; transform:translateX(16px);} to{opacity:1; transform:none;}}
.bndc-head{display:flex; align-items:center; gap:13px; padding:4px 2px 20px;}
.bndc-flag{
  width:46px; height:auto; display:block; border-radius:6px; flex-shrink:0;
  box-shadow:0 0 0 1px rgba(67,47,24,.12), 0 2px 6px rgba(0,0,0,.22);
}
.bndc-titles{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:6px;}
.bndc-name{
  font-family:'Playfair Display',serif; font-size:23px; font-weight:700;
  color:var(--text); line-height:1.25;           /* room for descenders (the 'g') */
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bndc-count{
  display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  padding:4px 11px 4px 9px; border-radius:999px;
  background:rgba(67,47,24,.06);
  font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:700;
  color:var(--muted);
}
.bndc-count-ic{width:14px; height:14px; flex-shrink:0; opacity:.75;}
.bndc-count.is-some{background:rgba(198,138,58,.15); color:var(--gold);}
[data-theme="dark"] .bndc-count{background:rgba(255,255,255,.07);}
[data-theme="dark"] .bndc-count.is-some{background:rgba(198,138,58,.2);}
/* Pencil button → opens the showcase picker (which 5 cards the row fan shows). */
.bndc-edit-btn{
  flex-shrink:0; width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(67,47,24,.12); background:var(--card); color:var(--muted);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 1px 4px rgba(67,47,24,.12); transition:transform .15s ease, color .15s ease;
}
.bndc-edit-btn:active{transform:scale(.92); color:var(--gold);}
[data-theme="dark"] .bndc-edit-btn{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12);}

/* ── Showcase picker (edit mode) ── */
.bndc-head.is-editing{padding:4px 2px 16px;}
.bndc-edit-titles{flex:1 1 auto; min-width:0;}
.bndc-edit-title{font-family:'Playfair Display',serif; font-size:20px; font-weight:700; color:var(--text); line-height:1.2;}
.bndc-edit-done{
  flex-shrink:0; padding:9px 22px; border-radius:999px; border:none; cursor:pointer;
  background:#1C1713; color:#FBF7E8;
  font-family:'DM Sans',sans-serif; font-size:14px; font-weight:600;
  box-shadow:0 2px 8px rgba(0,0,0,.18); transition:transform .12s ease;
}
.bndc-edit-done:active{transform:scale(.96);}
/* WYSIWYG editor: a faithful replica of the home list row (.bndx-item / .bndx-row
   / .bndx-fan), centred on screen. The fan reuses the live .bndx-fan-card markup,
   so it's pixel-identical to home; we only layer on the tap affordance + the
   corner swap glyph hinting the interaction. */
#gcBinder.is-editing{flex:1 1 auto; min-height:0; display:flex; flex-direction:column;}
.bndc.is-editing-showcase{flex:1 1 auto; min-height:0; display:flex; flex-direction:column;}
/* Centre the card + hint as a group, biased a touch above true centre. */
.bndc-edit-stage{flex:1 1 auto; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding-bottom:10vh;}
.bndc-edit-card{width:100%;}
.bndc-edit-hint{
  font-family:'DM Sans',sans-serif; font-size:13px; color:var(--muted);
  text-align:center; margin:14px 0 0;
}
.bndx-row.is-static{cursor:default;}
.bndx-row.is-static:active{background:transparent;}
.bndc-fan-edit .bndx-fan-card{cursor:pointer; transition:filter .14s ease, box-shadow .15s ease;}
.bndc-fan-edit .bndx-fan-card:active{filter:brightness(.92);}
/* Sheet pool-card art (the replacement picker grid). */
.bndc-edit-img{position:absolute; inset:0;}
.bndc-edit-img img{width:100%; height:100%; object-fit:cover; display:block;}
.bndc-pool-card[data-category="stamp"] .bndc-edit-img img,
.bndc-pool-card[data-category="sticker"] .bndc-edit-img img{object-fit:contain; padding:5px; box-sizing:border-box;}
.bndc-fe-empty{text-align:center; color:var(--muted); font-family:'DM Sans',sans-serif; font-size:13px; padding:46px 0;}
.bndc-pool{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding-bottom:8px;}
.bndc-pool-card{
  position:relative; aspect-ratio:5/7; border-radius:8px; overflow:hidden; cursor:pointer;
  background:var(--paper-2);
  box-shadow:0 2px 6px -2px rgba(67,47,24,.4), inset 0 0 0 1px rgba(67,47,24,.06);
  transition:transform .12s ease;
}
.bndc-pool-card:active{transform:scale(.93);}
.bndc-pool-empty{grid-column:1 / -1; text-align:center; color:var(--muted); font-family:'DM Sans',sans-serif; font-size:13px; padding:24px 0;}

/* ── Replacement picker sheet (tap a fan card → choose its swap) ──
   Slide-up sheet mirroring .gc-rates; the grid reuses .bndc-pool / .bndc-pool-card. */
.gcss{position:fixed; inset:0; z-index:10002; pointer-events:none;}
.gcss.is-open{pointer-events:auto;}
.gcss-scrim{position:absolute; inset:0; background:rgba(20,16,12,.42); opacity:0; transition:opacity .3s ease;}
.gcss.is-open .gcss-scrim{opacity:1;}
.gcss-sheet{
  position:absolute; left:0; right:0; bottom:0;
  max-height:82vh; display:flex; flex-direction:column;
  background:var(--bg); border-radius:24px 24px 0 0;
  box-shadow:0 -10px 44px rgba(0,0,0,.20);
  transform:translateY(100%); transition:transform .34s cubic-bezier(.32,.72,.24,1);
}
.gcss.is-open .gcss-sheet{transform:translateY(0);}
.gcss-sheet .gc-sheet-handle{margin:0; flex:0 0 auto;}
.gcss-body{padding:0 18px calc(22px + env(safe-area-inset-bottom)); overflow-y:auto; -webkit-overflow-scrolling:touch;}
.gcss-title{font-family:'Playfair Display',serif; font-weight:700; font-size:23px; color:var(--text); text-align:center; margin:2px 0 4px;}
.gcss-sub{font-family:'DM Sans',sans-serif; font-size:12.5px; color:var(--muted); text-align:center; margin:0 0 16px;}
.gcss-grid{padding-bottom:4px;}
/* current = the card already in the tapped spot · featured = featured in another spot */
.bndc-pool-card.is-current{box-shadow:0 2px 8px -2px rgba(198,138,58,.5), 0 0 0 2.5px var(--gold);}
.bndc-pool-card.is-featured{opacity:.6;}
.gcss-tag{
  position:absolute; left:4px; right:4px; bottom:4px;
  font:700 8.5px 'IBM Plex Mono',monospace; letter-spacing:.03em; text-transform:uppercase;
  text-align:center; padding:3px 2px; border-radius:5px;
  background:rgba(28,23,19,.72); color:#FBF7E8;
}
.gcss-tag.is-current{background:var(--gold); color:#1C1713;}
.bndx-prog{display:flex; align-items:center; gap:10px;}
.bndx-bar{
  flex:1 1 auto; height:5px; border-radius:3px; overflow:hidden;
  background:rgba(67,47,24,.10);
}
.bndx-bar-fill{
  display:block; height:100%; border-radius:3px; transform-origin:left;
  background:linear-gradient(90deg, var(--gold), var(--gold-soft));
  transition:transform .55s cubic-bezier(.22,.61,.24,1);
}
[data-theme="dark"] .bndx-bar{background:rgba(255,255,255,.10);}
.bndx-count{
  flex-shrink:0; min-width:16px; text-align:right;
  font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:700; color:var(--muted);
}
.bndx-count.is-some{color:var(--gold);}

/* ── Country-row card peek ── name + fraction over a strip of mini cards
   (owned art rarity-sorted, face-down for the rest). Replaces the bare
   progress bar so the binder index shows the actual collection. */
.bndx-head{display:flex; align-items:center; gap:11px;}   /* flag + name + count, one line */
.bndx-meta{display:flex; align-items:center; gap:7px; flex:0 0 auto;}
.bndx-frac{
  display:inline-flex; align-items:center; gap:5px;
  font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600;
  color:var(--muted); white-space:nowrap;
  background:rgba(67,47,24,.05); padding:4px 9px 4px 8px; border-radius:999px;
}
.bndx-frac-ic{width:13px; height:13px; flex-shrink:0; opacity:.7;}
.bndx-frac b{font-weight:700; color:var(--text);}      /* the collected count */
.bndx-frac-tot{opacity:.6;}                             /* "/60" reads as the goal */
.bndx-frac.is-some b{color:var(--gold);}                /* progress → gold count */
.bndx-frac.is-complete{background:rgba(198,138,58,.15); color:var(--gold);}
.bndx-frac.is-complete b{color:var(--gold);}
[data-theme="dark"] .bndx-frac{background:rgba(255,255,255,.06);}
[data-theme="dark"] .bndx-frac.is-complete{background:rgba(198,138,58,.20);}
/* ── Fanned "hand" of the country's best pulls ── overlapping cards with a
   slight tilt; the rarest sits front with a subtle glow (no busy per-card
   borders). The 2px --card ring gives each card a clean edge against the cards
   it overlaps. Empty countries fan elegant face-down backs, not grey boxes.
   Transforms are set inline per card (see _gcBinderFanHtml) so the fan
   self-centres for any count. */
.bndx-fan{position:relative; width:100%; height:128px; margin:2px 0;}  /* taller for the larger fanned cards */
.bndx-fan-card{
  position:absolute; bottom:0; left:50%;
  width:82px; aspect-ratio:5/7;
  border-radius:6px; overflow:hidden;
  transform-origin:50% 90%;
  background:var(--paper-2);
  box-shadow:0 2px 7px rgba(67,47,24,.28), 0 0 0 2px var(--card);
}
.bndx-fan-img{position:absolute; inset:0;}
.bndx-fan-img img{width:100%; height:100%; object-fit:cover; display:block;}
.bndx-fan-card[data-category="stamp"] .bndx-fan-img img,
.bndx-fan-card[data-category="sticker"] .bndx-fan-img img{object-fit:contain; padding:3px; box-sizing:border-box;}
/* subtle glow on the front (rarest) card only */
.bndx-fan-card.is-front.rarity-legendary{box-shadow:0 2px 8px rgba(67,47,24,.28), 0 0 0 2px var(--card), 0 0 11px rgba(123,82,171,.45);}
.bndx-fan-card.is-front.rarity-mythic{box-shadow:0 2px 8px rgba(67,47,24,.28), 0 0 0 2px var(--card), 0 0 13px rgba(212,168,67,.55);}
.bndx-fan-card.is-front.rarity-wonder{box-shadow:0 2px 8px rgba(67,47,24,.28), 0 0 0 2px var(--card), 0 0 13px rgba(192,57,43,.5);}
/* face-down back — an elegant waiting card with a small seal motif */
.bndx-fan-card.is-back{
  background:linear-gradient(158deg, #F4EDE1, #E9DECB);
  box-shadow:0 2px 6px rgba(67,47,24,.18), 0 0 0 2px var(--card);
}
.bndx-fan-card.is-back::after{
  content:''; position:absolute; top:50%; left:50%; width:15px; height:15px;
  transform:translate(-50%,-50%); border-radius:50%;
  border:1.5px solid rgba(198,138,58,.38);
}
[data-theme="dark"] .bndx-fan-card{background:rgba(255,255,255,.06);}
[data-theme="dark"] .bndx-fan-card.is-back{background:linear-gradient(158deg, rgba(255,255,255,.09), rgba(255,255,255,.05));}

/* Rare-pull pills (★ legendary+mythic · ✦ wonder) — at the end of the progress line. */
.bndx-stat{
  display:inline-flex; align-items:center; gap:4px; flex-shrink:0;
  font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:700;
}
.bndx-stat-ic{width:13px; height:13px; flex-shrink:0;}
.bndx-stat.is-wonder{color:#C0392B;}
.bndx-chev{flex-shrink:0; align-self:center; color:var(--muted); opacity:.5; transition:transform .28s ease;}
.bndx-item.is-expanded .bndx-chev{transform:rotate(180deg);}

/* ── Continent tiles (top level of the binder) ── a 2-col grid you drill into. */
/* The 3×2 continent grid fills the whole interior — equal rows, no empty space
   below (the grid flexes to #gcBinder.is-continents, which fills the body). */
.bndx-cont-grid{
  position:relative; z-index:1;
  flex:1 1 auto; min-height:0;
  display:grid; grid-template-columns:repeat(2, 1fr); grid-auto-rows:1fr; gap:12px;
  padding:6px 0 8px;
}
/* Continent tile — "warm paper" card with a gold-hairline edge (the Curator's
   Case identity) and a per-continent two-tone wash + lit-from-above sheen for
   subtle character (all CSS, no images). Percent-hero layout: name title at the
   top, a big completion % focal stat, then the bar + card tally at the foot. */
.bndx-cont{
  --c1:#faf6f0; --c2:#efe6da;            /* warm-cream default; per-continent below */
  display:flex; flex-direction:column; justify-content:space-between; gap:12px;
  padding:16px 18px; border:none; cursor:pointer; text-align:left;
  border-radius:14px;
  background:
    radial-gradient(135% 75% at 50% -12%, rgba(255,255,255,.55), transparent 58%),
    linear-gradient(152deg, var(--c1), var(--c2));
  box-shadow:
    inset 0 0 0 1px rgba(198,138,58,.20),  /* gold-hairline edge */
    0 1px 5px rgba(67,47,24,.12);
  transition:transform .15s ease;
}
.bndx-cont:active{transform:scale(.98);}
.bndx-cont.is-empty{opacity:.55;}
.bndx-cont[data-cont="Asia"]{--c1:#faf3ee; --c2:#f1e2d8;}
.bndx-cont[data-cont="Europe"]{--c1:#f5f7fb; --c2:#e7ecf5;}
.bndx-cont[data-cont="Africa"]{--c1:#fbf5e9; --c2:#f3e7cf;}
.bndx-cont[data-cont="North America"]{--c1:#f0f7f3; --c2:#e0ede6;}
.bndx-cont[data-cont="South America"]{--c1:#f3f7ec; --c2:#e6efdb;}
.bndx-cont[data-cont="Oceania"]{--c1:#eff6f8; --c2:#ddebef;}
[data-theme="dark"] .bndx-cont,
[data-theme="dark"] .bndx-cont[data-cont]{
  background:var(--card);
  box-shadow:inset 0 0 0 1px rgba(198,138,58,.18), 0 1px 5px rgba(0,0,0,.30);
}
.bndx-cont-name{
  font-family:'Playfair Display',serif; font-size:18px; font-weight:700;
  color:var(--text); line-height:1.15;
}
.bndx-cont-hero{display:flex; flex-direction:column; gap:3px;}
.bndx-cont-pct{
  /* Matches the Docs-tab ring % (.docs-ring-pct): DM Sans has a solid, connected
     % glyph, unlike IBM Plex Mono which broke up at this weight/size. */
  font-family:'DM Sans', system-ui, sans-serif; font-size:34px; font-weight:600;
  font-variant-numeric:tabular-nums; letter-spacing:-.04em;
  color:var(--muted); line-height:1;
}
.bndx-cont-pct.is-some{color:var(--gold);}
.bndx-cont-pct-lbl{
  font-family:'DM Sans',sans-serif; font-size:11px; color:var(--muted); letter-spacing:.04em;
}
.bndx-cont-foot{display:flex; flex-direction:column; gap:8px;}
.bndx-cont-sub{
  font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted); letter-spacing:.03em;
}
.bndx-cont .bndx-bar{flex:0 0 auto; width:100%;}

/* ── Binder ── "The Curator's Case": a warm display case, not a flat grid. */
/* Paper grain (multiply) + a soft "lit from above" vignette sit BEHIND the
   grid. View-scoped to #gcBinder, so no always-mounted cost on the globe. */
#gcBinder{position:relative; flex:0 0 auto;}
/* Continent view fills the interior so the 3×2 tiles cover the screen; the
   country accordion (no class) keeps its natural height and scrolls. */
#gcBinder.is-continents{flex:1 1 auto; min-height:0; display:flex; flex-direction:column;}
/* Only the full-bleed immersive views (continent tiles + the 100% celebration)
   carry the grain/vignette. On the country LIST and single-country screens the
   pseudo-elements are bounded to the content box and read as a grey rectangle
   behind the rows, so they're scoped out there. */
#gcBinder.is-continents::before, #gcBinder.is-complete::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;mix-blend-mode:multiply;opacity:.06;
}
#gcBinder.is-continents::after, #gcBinder.is-complete::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 55% at 50% -4%, rgba(198,138,58,.10), transparent 60%);
}
[data-theme="dark"] #gcBinder.is-continents::before,
[data-theme="dark"] #gcBinder.is-complete::before{mix-blend-mode:screen;opacity:.05;}
.bnd-loading{
  text-align:center;color:var(--muted);
  font-family:'DM Sans',sans-serif;font-size:14px;
  padding:60px 16px;
}
.bnd-head{
  position:sticky;top:0;z-index:3;
  display:flex;align-items:center;gap:10px;
  padding:10px 2px 12px;margin-bottom:2px;
}
/* Glass only while the binder is on screen (view-scoped, never over the globe).
   Tinted with the PAGE bg (--bg), not --paper-2 — so at rest it blends into the
   page instead of reading as a lighter block, while still veiling any cards that
   scroll up under the sticky header. */
.bnd-head.is-glass{
  background:linear-gradient(180deg, rgba(240,235,227,.94), rgba(240,235,227,.72));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
[data-theme="dark"] .bnd-head.is-glass{
  background:linear-gradient(180deg, rgba(26,23,20,.94), rgba(26,23,20,.70));
}
.bnd-head-mid{
  flex:1;min-width:0;
  display:flex;flex-direction:column;align-items:center;gap:3px;
}
.bnd-head-flag{
  width:30px;height:20px;object-fit:cover;border-radius:3px;
  box-shadow:0 1px 3px rgba(0,0,0,.22);
}
.bnd-head-name{
  font-family:'Playfair Display',serif;font-size:18px;font-weight:700;
  color:var(--text);line-height:1.1;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
/* Progress meter — replaces the bare count. GPU-only scaleX fill (never width,
   never conic/arc — per the donut-wobble memory). */
.bnd-progress{
  width:150px;max-width:62%;
  display:flex;flex-direction:column;align-items:stretch;gap:5px;margin-top:2px;
}
.bnd-progress-num{
  font-family:'IBM Plex Mono',monospace;font-size:11px;
  color:var(--muted);letter-spacing:.04em;text-align:right;
}
.bnd-progress-num b{color:var(--gold);font-weight:700;}
.bnd-progress-track{
  height:3px;border-radius:2px;overflow:hidden;background:rgba(67,47,24,.12);
}
.bnd-progress-fill{
  height:100%;border-radius:2px;transform-origin:left;
  background:linear-gradient(90deg, var(--gold), var(--gold-soft));
  transition:transform .55s cubic-bezier(.22,.61,.24,1);
}
[data-theme="dark"] .bnd-progress-track{background:rgba(255,255,255,.12);}
.bnd-nav{
  flex-shrink:0;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(198,138,58,.28);
  background:rgba(255,255,255,.5);color:var(--gold);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 1px 3px rgba(67,47,24,.12);
  transition:transform .15s ease, background .15s ease;
}
.bnd-nav:active{transform:scale(.92);background:rgba(198,138,58,.12);}

.bnd-grid{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  padding-bottom:8px;
}
.bnd-slot{
  position:relative;
  aspect-ratio:5/7;
  border-radius:9px;
}
/* Owned = a matted artefact lifted off the page: cream mat, gold inner hairline,
   art recessed into the mat, soft outer drop-shadow. */
/* Art fills the card edge-to-edge (no cream mat/border). The cream background
   only shows behind contained stamps/stickers, which sit on the card surface. */
.bnd-slot.is-owned{
  background:#FBF6EC;
  box-shadow:
    inset 0 0 0 1px rgba(198,138,58,.22),
    0 6px 14px -7px rgba(67,47,24,.45),
    0 2px 5px -2px rgba(67,47,24,.26);
}
.bnd-slot-img{
  position:absolute;inset:0;border-radius:9px;overflow:hidden;
}
.bnd-slot-img img{width:100%;height:100%;object-fit:cover;display:block;}
.bnd-slot[data-category="stamp"] .bnd-slot-img img,
.bnd-slot[data-category="sticker"] .bnd-slot-img img{
  object-fit:contain;padding:8px;box-sizing:border-box;
}
/* #NNN tag — bottom of the art, on a soft scrim. */
.bnd-slot-tag{
  position:absolute;left:0;right:0;bottom:0;
  font-family:'IBM Plex Mono',monospace;font-size:8px;font-weight:700;
  color:#fff;text-align:right;letter-spacing:.02em;
  background:linear-gradient(to top, rgba(0,0,0,.5), transparent);
  padding:12px 8px 5px;border-radius:0 0 9px 9px;pointer-events:none;
}
/* Empty = a debossed paper well holding a faint embossed category glyph.
   Mirrors the passport's recessed locked-stamp idiom — reads as a slot to fill,
   not "missing". Static, GPU-safe, no dashed border. */
.bnd-slot.is-locked{
  background:var(--paper-2);
  border:1px solid rgba(67,47,24,.07);
  border-radius:9px;overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(67,47,24,.16), inset 0 -1px 1px rgba(255,255,255,.55);
}
/* Empty slot now just shows its #NNN, debossed and centred in the paper well. */
.bnd-slot-num{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'IBM Plex Mono',monospace;font-size:15px;font-weight:700;
  letter-spacing:.04em;color:rgba(67,47,24,.28);
  text-shadow:0 1px 0 rgba(255,255,255,.55);
  pointer-events:none;
}
/* Same size/weight/colour as the digits, but rendered upright — IBM Plex Mono's
   own "#" is slanted, which made "#052" read broken / not joined to the number.
   DM Sans gives an upright hash that sits flush with the mono digits. */
.bnd-no-hash{
  font-family:'DM Sans', sans-serif;
  font-weight:700;
  margin-right:1px;
}
/* Rarity edge — every owned mat carries its tier colour as an inner hairline +
   faint outer ring (lift shadow restated so it's preserved). Applied across all
   five tiers, INCLUDING common, so the binder reads as one deliberate system
   rather than "some cards are framed, some aren't". */
.bnd-slot.is-owned.rarity-common{box-shadow:inset 0 0 0 1px rgba(120,120,122,.5), 0 6px 14px -7px rgba(67,47,24,.45), 0 0 0 1px rgba(120,120,122,.16);}
.bnd-slot.is-owned.rarity-rare{box-shadow:inset 0 0 0 1px rgba(90,158,158,.55), 0 6px 14px -7px rgba(67,47,24,.45), 0 0 0 1px rgba(90,158,158,.18);}
.bnd-slot.is-owned.rarity-legendary{box-shadow:inset 0 0 0 1px rgba(123,82,171,.55), 0 6px 14px -7px rgba(67,47,24,.45), 0 0 0 1px rgba(123,82,171,.2);}
.bnd-slot.is-owned.rarity-mythic{box-shadow:inset 0 0 0 1.5px rgba(212,168,67,.85), 0 6px 16px -6px rgba(212,168,67,.5), 0 0 0 1px rgba(212,168,67,.35);}
.bnd-slot.is-owned.rarity-wonder{box-shadow:inset 0 0 0 1.5px rgba(192,57,43,.8), 0 6px 16px -6px rgba(192,57,43,.45), 0 0 0 1px rgba(192,57,43,.3);}
/* Empty wells telegraph the prize with the same tier colour as a faint hairline,
   for every tier (common reads grey). */
.bnd-slot.is-locked.rarity-common{box-shadow:inset 0 1px 3px rgba(67,47,24,.16), inset 0 0 0 1px rgba(120,120,122,.26);}
.bnd-slot.is-locked.rarity-rare{box-shadow:inset 0 1px 3px rgba(67,47,24,.16), inset 0 0 0 1px rgba(90,158,158,.3);}
.bnd-slot.is-locked.rarity-legendary{box-shadow:inset 0 1px 3px rgba(67,47,24,.16), inset 0 0 0 1px rgba(123,82,171,.3);}
.bnd-slot.is-locked.rarity-mythic{box-shadow:inset 0 1px 3px rgba(67,47,24,.16), inset 0 0 0 1px rgba(212,168,67,.3);}
.bnd-slot.is-locked.rarity-wonder{box-shadow:inset 0 1px 3px rgba(67,47,24,.16), inset 0 0 0 1px rgba(192,57,43,.28);}

/* 100% completion — gold frame + an embossed corner seal, eased in once. */
#gcBinder.is-complete .bnd-grid{
  box-shadow:0 0 0 1px rgba(198,138,58,.45), 0 0 0 4px rgba(198,138,58,.08);
  border-radius:12px;padding:10px;
}
.bnd-complete-seal{
  position:absolute;top:54px;right:6px;z-index:4;pointer-events:none;
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
  padding:8px 12px;border-radius:99px;
  border:1px solid rgba(198,138,58,.5);background:rgba(251,246,236,.7);
  text-shadow:0 1px 0 rgba(255,255,255,.5);box-shadow:0 2px 8px rgba(198,138,58,.25);
  transform-origin:center;animation:bndSealIn .6s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes bndSealIn{0%{opacity:0;transform:scale(.6) rotate(-8deg);}60%{opacity:1;transform:scale(1.08) rotate(2deg);}100%{opacity:1;transform:scale(1) rotate(-4deg);}}
@media (prefers-reduced-motion: reduce){.bnd-complete-seal{animation:none;}}

/* Dark mode */
[data-theme="dark"] .bnd-nav{background:rgba(255,255,255,.08);}
[data-theme="dark"] .bnd-nav:active{background:rgba(255,255,255,.14);}
[data-theme="dark"] .bnd-slot.is-owned{
  background:#2C271F;
  box-shadow:inset 0 0 0 1px rgba(198,138,58,.26), 0 6px 14px -7px rgba(0,0,0,.6), 0 2px 5px -2px rgba(0,0,0,.45);
}
[data-theme="dark"] .bnd-slot.is-locked{
  background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.05);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.4), inset 0 -1px 1px rgba(255,255,255,.04);
}
[data-theme="dark"] .bnd-slot-num{color:rgba(232,224,212,.32);text-shadow:0 1px 0 rgba(0,0,0,.35);}
/* Dark-mode rarity edges — 4 class-level selectors so the tier colour beats the
   dark base owned/locked rules above (which sit at equal specificity and would
   otherwise wipe the rarity hairline in dark mode). Background inherits from the
   dark base rule; only the box-shadow is overridden. */
[data-theme="dark"] .bnd-slot.is-owned.rarity-common{box-shadow:inset 0 0 0 1px rgba(150,150,154,.45), 0 6px 14px -7px rgba(0,0,0,.6), 0 2px 5px -2px rgba(0,0,0,.45);}
[data-theme="dark"] .bnd-slot.is-owned.rarity-rare{box-shadow:inset 0 0 0 1px rgba(90,158,158,.6), 0 6px 14px -7px rgba(0,0,0,.6), 0 0 0 1px rgba(90,158,158,.22);}
[data-theme="dark"] .bnd-slot.is-owned.rarity-legendary{box-shadow:inset 0 0 0 1px rgba(123,82,171,.62), 0 6px 14px -7px rgba(0,0,0,.6), 0 0 0 1px rgba(123,82,171,.24);}
[data-theme="dark"] .bnd-slot.is-owned.rarity-mythic{box-shadow:inset 0 0 0 1.5px rgba(212,168,67,.9), 0 6px 16px -6px rgba(0,0,0,.6), 0 0 0 1px rgba(212,168,67,.4);}
[data-theme="dark"] .bnd-slot.is-owned.rarity-wonder{box-shadow:inset 0 0 0 1.5px rgba(192,57,43,.85), 0 6px 16px -6px rgba(0,0,0,.6), 0 0 0 1px rgba(192,57,43,.35);}
[data-theme="dark"] .bnd-slot.is-locked.rarity-common{box-shadow:inset 0 1px 3px rgba(0,0,0,.4), inset 0 0 0 1px rgba(150,150,154,.3);}
[data-theme="dark"] .bnd-slot.is-locked.rarity-rare{box-shadow:inset 0 1px 3px rgba(0,0,0,.4), inset 0 0 0 1px rgba(90,158,158,.34);}
[data-theme="dark"] .bnd-slot.is-locked.rarity-legendary{box-shadow:inset 0 1px 3px rgba(0,0,0,.4), inset 0 0 0 1px rgba(123,82,171,.36);}
[data-theme="dark"] .bnd-slot.is-locked.rarity-mythic{box-shadow:inset 0 1px 3px rgba(0,0,0,.4), inset 0 0 0 1px rgba(212,168,67,.34);}
[data-theme="dark"] .bnd-slot.is-locked.rarity-wonder{box-shadow:inset 0 1px 3px rgba(0,0,0,.4), inset 0 0 0 1px rgba(192,57,43,.32);}

/* ════════════════════════════════════════════════════════════════════════
   CARD DETAIL VIEW (CSS-3D card, tilt + flip)
   ════════════════════════════════════════════════════════════════════════ */
.cd-overlay{
  position:fixed; inset:0; z-index:10006;   /* above the Offering Rates sheet (10002) so it can open over it */
  background:
    radial-gradient(ellipse 120% 50% at 50% 0%, rgba(212,148,58,.10), transparent 60%),
    linear-gradient(180deg, var(--paper-2) 0%, var(--bg) 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:18px; padding:calc(env(safe-area-inset-top) + 58px) 20px 48px;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .35s ease, visibility .35s ease;
}
.cd-overlay.is-open{opacity:1; visibility:visible; pointer-events:auto;}

.cd-close{
  position:fixed; top:calc(14px + env(safe-area-inset-top)); left:14px;
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--border); background:rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  color:var(--text); display:grid; place-items:center; cursor:pointer; z-index:2;
}
.cd-close svg{width:18px; height:18px;}
[data-theme="dark"] .cd-close{background:rgba(255,255,255,.08);}

.cd-stage{
  position:relative; width:100%; max-width:420px; aspect-ratio:4/5; max-height:56vh; flex-shrink:0;
  display:grid; place-items:center; perspective:1300px;
  touch-action:none; -webkit-user-select:none; user-select:none; cursor:grab;
}
.cd-stage:active{cursor:grabbing;}
/* Ground shadow under the floating card. Rendered here (not in WebGL) so it can
   spill into the gap below the card without the canvas clipping it, and stays
   aligned since the card always fills a fixed fraction of the stage. Two layers:
   a wide diffuse pool (::before) for the soft lift + a tighter, darker core
   (::after) for contact weight. Both are squashed ellipses, centred under the
   card's resting position (~6% up from the stage floor). pointer-events:none so
   drag/flip still hit the canvas. */
/* --sh-* custom properties are driven every frame by the WebGL tick
   (_gcCardTick → _gcUpdateGroundShadow) so the pool reacts to the card's live
   yaw/pitch/float: it narrows toward a line on flip, leans on tilt, and
   shrinks/softens as the card floats up. Fallbacks keep it a clean static
   ellipse before the first frame / if JS doesn't run. */
.cd-stage::before,
.cd-stage::after{
  content:''; position:absolute; left:50%; bottom:1.5%;
  border-radius:50%; pointer-events:none; z-index:0;
  opacity:var(--sh-op, 1);
  transform:translate(calc(-50% + var(--sh-x, 0px)), var(--sh-y, 0px))
            scale(var(--sh-sx, 1), var(--sh-sy, 1));
  transform-origin:50% 50%;
  will-change:transform, opacity, filter;
}
.cd-stage::before{
  width:92%; height:16%;
  background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(74,54,30,.20) 0%, rgba(74,54,30,.09) 46%, transparent 73%);
  filter:blur(calc(10px + var(--sh-blur, 0px)));
}
.cd-stage::after{
  width:64%; height:11%; bottom:3.5%;
  background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(60,42,22,.38) 0%, rgba(60,42,22,.2) 44%, transparent 71%);
  filter:blur(calc(6px + var(--sh-blur, 0px)));
}
[data-theme="dark"] .cd-stage::before{
  background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0,0,0,.42) 0%, rgba(0,0,0,.2) 45%, transparent 72%);
}
[data-theme="dark"] .cd-stage::after{
  background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0,0,0,.6) 0%, rgba(0,0,0,.32) 42%, transparent 70%);
}
.cd-card{
  position:relative; width:80%; aspect-ratio:5/7;
  transform-style:preserve-3d; will-change:transform;
}
.cd-flip{position:absolute; inset:0; transform-style:preserve-3d; will-change:transform;}
.cd-side{
  position:absolute; inset:0; border-radius:14px; overflow:hidden;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  background:var(--card);
  box-shadow:0 20px 44px -16px rgba(67,47,24,.5), 0 6px 16px -6px rgba(67,47,24,.3);
}
.cd-back{transform:rotateY(180deg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;}
.cd-back-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.cd-back-mark{width:54px; height:54px; opacity:.55; mix-blend-mode:multiply;}
.cd-back-label{font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:700; letter-spacing:.24em; color:var(--muted); opacity:.6;}

.cd-showcase{position:absolute; inset:0; isolation:isolate;}
.cd-img{position:absolute; inset:0; z-index:1;}
.cd-img img{width:100%; height:100%; object-fit:cover; display:block;}
.cd-card[data-category="stamp"] .cd-img img,
.cd-card[data-category="sticker"] .cd-img img{object-fit:contain; padding:10px; box-sizing:border-box;}
.cd-card[data-category="sticker"] .cd-img img{filter:drop-shadow(0 3px 6px rgba(67,47,24,.2));}
.cd-backdrop{display:none; position:absolute; inset:-16px; z-index:0; overflow:hidden;}
.cd-card[data-category="stamp"] .cd-backdrop,
.cd-card[data-category="sticker"] .cd-backdrop{display:block;}
.cd-backdrop img{width:100%; height:100%; object-fit:cover; filter:blur(16px) saturate(1.6) brightness(1.05); transform:scale(1.3); opacity:.4;}
.cd-backdrop::after{content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.85) 0%, rgba(255,255,255,.5) 35%, transparent 70%);}

/* Glow — separate layer behind the card so opacity can pulse (no filter repaints) */
.cd-glow{position:absolute; inset:0; border-radius:14px; transform:translateZ(-2px); pointer-events:none;}
.cd-card.rarity-rare .cd-glow{box-shadow:0 8px 22px rgba(90,158,158,.45);}
.cd-card.rarity-legendary .cd-glow{box-shadow:0 10px 30px rgba(123,82,171,.5);}
.cd-card.rarity-mythic .cd-glow{box-shadow:0 10px 40px rgba(212,168,67,.6); animation:gcGlowPulse 5s ease-in-out infinite;}
.cd-card.rarity-wonder .cd-glow{box-shadow:0 12px 46px rgba(192,57,43,.65); animation:gcGlowPulseWonder 4s ease-in-out infinite;}

/* Holo / gloss over the front art — reuses the pack keyframes */
.cd-card.rarity-rare .cd-showcase::before{
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:14px;
  background:linear-gradient(105deg, transparent 0%, transparent 40%, rgba(255,255,255,.18) 46%, rgba(255,255,255,.28) 50%, rgba(255,255,255,.18) 54%, transparent 60%, transparent 100%);
  background-size:300% 100%; mix-blend-mode:overlay; animation:gcGlossSwipe 10s linear infinite;
}
.cd-card.rarity-legendary .cd-showcase::before{
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:14px;
  background:linear-gradient(105deg, transparent 0%, transparent 36%, rgba(255,255,255,.35) 43%, rgba(255,255,255,.55) 50%, rgba(255,255,255,.35) 57%, transparent 64%, transparent 100%);
  background-size:300% 100%; mix-blend-mode:overlay; animation:gcGlossSwipeLeg 4.5s linear infinite;
}
.cd-card.rarity-mythic .cd-showcase::before{
  content:''; position:absolute; inset:-30%; z-index:3; pointer-events:none;
  background:linear-gradient(135deg,#ff0000 0%,#ff6600 12%,#ffdd00 24%,#00cc44 36%,#00ccff 50%,#4444ff 62%,#aa00ff 75%,#ff0066 88%,#ff0000 100%);
  background-size:160% 160%; mix-blend-mode:color-dodge; opacity:.3; animation:gcHoloWander 14s ease-in-out infinite;
}
.cd-card.rarity-wonder .cd-showcase::before{
  content:''; position:absolute; inset:-40%; z-index:3; pointer-events:none;
  background:linear-gradient(160deg,#ff0000 0%,#ff6600 10%,#ffdd00 20%,#00cc44 30%,#00ccff 42%,#4444ff 54%,#aa00ff 66%,#ff0066 78%,#ffdd00 88%,#ff0000 100%);
  background-size:120% 120%; mix-blend-mode:color-dodge; opacity:.35; animation:gcHoloWanderWonder 10s ease-in-out infinite;
}
.cd-card.rarity-mythic[data-category="stamp"] .cd-showcase::before,
.cd-card.rarity-mythic[data-category="sticker"] .cd-showcase::before,
.cd-card.rarity-wonder[data-category="stamp"] .cd-showcase::before,
.cd-card.rarity-wonder[data-category="sticker"] .cd-showcase::before{opacity:.1;}

/* Info + controls */
.cd-info{
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; max-width:360px;
  opacity:0; transform:translateY(8px); transition:opacity .42s ease, transform .42s ease;
}
.cd-info.is-revealed{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){.cd-info{transition:opacity .2s ease;}}
.cd-eyebrow{font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--gold);}
.cd-name{font-family:'Playfair Display',serif; font-weight:700; font-size:30px; line-height:1.1; margin:0; color:var(--text);}
.cd-rarity{display:inline-flex; align-items:center; gap:10px; padding:6px 14px; border-radius:99px; background:rgba(255,255,255,.5); border:1px solid var(--border);}
[data-theme="dark"] .cd-rarity{background:rgba(255,255,255,.06);}
.cd-stars{letter-spacing:3px; font-size:14px; color:var(--muted);}
.cd-rarity-label{font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);}
.cd-rarity.rarity-rare .cd-stars,.cd-rarity.rarity-rare .cd-rarity-label{color:#5A9E9E;}
.cd-rarity.rarity-legendary .cd-stars,.cd-rarity.rarity-legendary .cd-rarity-label{color:#7B52AB;}
.cd-rarity.rarity-mythic .cd-stars,.cd-rarity.rarity-mythic .cd-rarity-label{color:#D4A843;}
.cd-rarity.rarity-wonder .cd-stars,.cd-rarity.rarity-wonder .cd-rarity-label{color:#C0392B;}

/* Flavour / summary placard — a museum label below the rarity pill. Typographic,
   not boxed: Playfair name above, IBM Plex Mono for the serial + meta labels,
   DM Sans for the prose + values. */
.cd-flavour-box{width:100%; max-width:360px; margin-top:2px; text-align:left;}
.cd-flavour-divider{height:1px; width:54px; margin:2px auto 14px; background:linear-gradient(90deg, transparent, rgba(198,138,58,.85), transparent);}
.cd-code{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.16em; color:var(--muted); text-align:center; margin-bottom:12px;}
.cd-flavour{font-family:'DM Sans',sans-serif; font-size:14px; line-height:1.62; color:var(--text); opacity:.85; font-style:italic; margin:0;}
.cd-flavour-meta{display:flex; flex-direction:column; margin-top:14px;}
.cd-meta{display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:8px 0; border-top:1px solid var(--border);}
.cd-meta i{font-family:'IBM Plex Mono',monospace; font-style:normal; font-size:9px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); flex-shrink:0;}
.cd-meta b{font-family:'DM Sans',sans-serif; font-weight:600; font-size:12.5px; color:var(--text); text-align:right;}
.cd-flavour-box.rarity-rare .cd-meta-rarity{color:#5A9E9E;}
.cd-flavour-box.rarity-legendary .cd-meta-rarity{color:#7B52AB;}
.cd-flavour-box.rarity-mythic .cd-meta-rarity{color:#D4A843;}
.cd-flavour-box.rarity-wonder .cd-meta-rarity{color:#C0392B;}

.cd-controls{display:flex; gap:10px; margin-top:6px; justify-content:center;}
.cd-icon-btn{
  display:grid; place-items:center; width:36px; height:36px; padding:0;
  border:1px solid var(--border); background:rgba(255,255,255,.5); color:var(--text);
  border-radius:50%; cursor:pointer; transition:all .2s ease;
}
.cd-icon-btn svg{width:17px; height:17px;}
.cd-icon-btn:active{transform:translateY(1px) scale(.96);}
.cd-icon-btn.is-active{background:rgba(212,148,58,.14); color:var(--gold); border-color:rgba(212,148,58,.4);}

/* ── Simple mode — opened from the Offering Rates sheet. Just the title above a
   large 3D card; no flavour placard, eyebrow, or control buttons. ── */
.cd-overlay.cd-simple{justify-content:center;}
.cd-overlay.cd-simple .cd-info{order:-1;}                 /* title block sits ABOVE the card */
.cd-overlay.cd-simple .cd-eyebrow,
.cd-overlay.cd-simple .cd-flavour-box,
.cd-overlay.cd-simple .cd-controls{display:none;}
.cd-overlay.cd-simple .cd-stage{max-height:64vh;}        /* a little more room without the placard */
[data-theme="dark"] .cd-icon-btn{background:rgba(255,255,255,.06);}

/* WebGL canvas + loader + slot→card morph clone */
.cd-canvas{display:block;}
.cd-loader{position:absolute; inset:0; display:grid; place-items:center;}
.cd-loader-ring{width:34px; height:34px; border:2px solid rgba(212,148,58,.18); border-top-color:var(--gold); border-radius:50%; animation:cdSpin 1s linear infinite;}
@keyframes cdSpin{to{transform:rotate(360deg);}}
.cd-transit{
  position:fixed; z-index:10007; background-size:cover; background-position:center;   /* one above .cd-overlay so the fly-in clone stays visible */
  background-color:var(--card); border-radius:10px; transform-origin:top left; pointer-events:none;
  box-shadow:0 24px 50px -18px rgba(101,75,40,.55), 0 10px 22px -8px rgba(101,75,40,.35);
  transition:transform .6s cubic-bezier(.22,.61,.24,1), opacity .4s ease;
  will-change:transform, opacity;
}
/* Stamp/sticker fallback clone: blurred flag backdrop + contained subject,
   mirroring the WebGL face. DOM-only (no CORS), so the flag shows even when the
   3D card can't render and this clone stays as the card. */
.cd-transit-flag{position:absolute; inset:0; z-index:0; overflow:hidden; border-radius:inherit;}
.cd-transit-flag img{width:100%; height:100%; object-fit:cover; filter:blur(12px) saturate(1.6) brightness(1.05); transform:scale(1.3); opacity:.4;}
.cd-transit-flag::after{content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.85) 0%, rgba(255,255,255,.5) 35%, transparent 70%);}
.cd-transit-art{position:absolute; inset:0; z-index:1; background-size:contain; background-repeat:no-repeat; background-position:center;}

/* ════════════════════════════════════════════════════════════════════════
   Offering Rates — odds-disclosure sheet (§12.1). Slide-up bottom sheet that
   mirrors the Store sheet; entry pills on the pack hero + pack-select rack.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Entry pills ── */
.gc-hero-rates{
  display:inline-flex;align-items:center;gap:6px;
  width:fit-content;margin:0 auto;
  padding:7px 14px;border-radius:999px;
  background:var(--card);border:1px solid var(--border);
  color:var(--muted);font:600 12.5px var(--font-body);
  box-shadow:var(--shadow);cursor:pointer;
  transition:transform .12s ease;
}
.gc-hero-rates:active{transform:scale(.95);}
.gc-hero-rates .gcr-i{color:var(--gold);}

.gc-rack-rates{
  position:absolute;z-index:5;
  left:0;right:0;margin:0 auto;width:fit-content;
  bottom:calc(82px + env(safe-area-inset-bottom));   /* centered, just above the swipe/tap hint */
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 15px;border-radius:999px;
  background:var(--card);color:var(--text);
  font:600 12.5px var(--font-body);
  box-shadow:0 1px 3px rgba(0,0,0,.08), inset 0 0 0 1px var(--border);
  cursor:pointer;opacity:0;pointer-events:none;
  transition:transform .12s ease, opacity .5s ease .5s;
}
.gc-rack-overlay.is-open:not(.is-spinning) .gc-rack-rates{opacity:1;pointer-events:auto;}
.gc-rack-rates:active{transform:scale(.95);}
.gc-rack-rates .gcr-i{color:var(--gold);}

/* ── Sheet shell (mirrors .gc-store) ── */
.gc-rates{position:fixed;inset:0;z-index:10002;pointer-events:none;}
.gc-rates.is-open{pointer-events:auto;}
.gc-rates-scrim{
  position:absolute;inset:0;background:rgba(20,16,12,.42);
  opacity:0;transition:opacity .3s ease;
}
.gc-rates.is-open .gc-rates-scrim{opacity:1;}
.gc-rates-sheet{
  position:absolute;left:0;right:0;bottom:0;
  max-height:92vh;display:flex;flex-direction:column;
  background:var(--bg);border-radius:24px 24px 0 0;
  box-shadow:0 -10px 44px rgba(0,0,0,.20);
  transform:translateY(100%);
  transition:transform .34s cubic-bezier(.32,.72,.24,1);
}
.gc-rates.is-open .gc-rates-sheet{transform:translateY(0);}
.gc-rates-sheet .gc-sheet-handle{margin:0;flex:0 0 auto;}
.gc-rates-body{
  padding:0 18px calc(24px + env(safe-area-inset-bottom));
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}

/* ── Header ── */
.gcr-sheet-title{
  font-family:'Playfair Display',serif;font-weight:700;
  font-size:24px;color:var(--text);text-align:center;
  margin:2px 0 10px;
}
.gcr-country{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-bottom:12px;
}
.gcr-head-flag{
  width:30px;height:21px;border-radius:4px;object-fit:cover;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.gcr-country-name{font:600 14px var(--font-body);color:var(--muted);letter-spacing:.01em;}
.gcr-intro{
  font-size:13px;line-height:1.5;color:var(--muted);
  text-align:center;margin:0 6px 16px;
}
.gcr-intro b{color:var(--text);font-weight:600;}

/* ── Slot tabs ── */
.gcr-tabs{
  display:flex;gap:6px;padding:4px;margin:0 0 14px;
  background:var(--paper-2);border:1px solid var(--border);border-radius:14px;
}
.gcr-tab{
  flex:1;border:none;background:transparent;cursor:pointer;
  padding:9px 4px;border-radius:10px;
  font:600 13px var(--font-body);color:var(--muted);
  transition:background .2s ease, color .2s ease;
}
.gcr-tab.is-active{
  background:var(--card);color:var(--text);
  box-shadow:0 1px 6px rgba(0,0,0,.08);
}

/* ── Tier rows ── */
.gcr-tier{
  background:var(--card);border:1px solid var(--border);
  border-radius:14px;margin-bottom:8px;overflow:hidden;
}
.gcr-tier-row{
  display:flex;align-items:center;gap:11px;width:100%;
  height:52px;box-sizing:border-box;   /* fixed (not min) so every row — and both tabs — are byte-identical in height */
  padding:13px 15px;border:none;background:transparent;
  cursor:pointer;text-align:left;font:inherit;
}
.gcr-tier.is-na .gcr-tier-row{cursor:default;}
.gcr-tier-name{
  min-width:100px;   /* fixed name column so the star meters line up across rows */
  font:600 15px var(--font-body);color:var(--text);
}
/* Rarity stars — carries the same colour + shimmer as the card faces
   (.gc-pack-summary-stars), replacing the old diamond swatch as the rarity
   cue. Common/Rare are solid; Legendary+ get the coloured shimmer sweep via
   the shared gcStarShimmer keyframe. */
.gcr-stars{
  font-size:13px;letter-spacing:2px;line-height:1;
  flex:0 0 auto;white-space:nowrap;
}
.gcr-stars-on{color:rgba(160,148,132,.9);}   /* Common — muted */
.gcr-stars-off{color:rgba(0,0,0,.14);}        /* empty meter slots */
[data-theme="dark"] .gcr-stars-off{color:rgba(255,255,255,.16);}
.gcr-tier.rarity-rare      .gcr-stars-on{color:#5A9E9E;}
.gcr-tier.rarity-legendary .gcr-stars-on{color:#7B52AB;}
.gcr-tier.rarity-mythic    .gcr-stars-on{color:#D4A843;}
.gcr-tier.rarity-wonder    .gcr-stars-on{color:#C0392B;}
/* Legendary+ — coloured shimmer sweep, clipped to the filled stars only */
.gcr-tier.rarity-legendary .gcr-stars-on,
.gcr-tier.rarity-mythic    .gcr-stars-on,
.gcr-tier.rarity-wonder    .gcr-stars-on{
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:gcStarShimmer 5s ease-in-out infinite;
}
.gcr-tier.rarity-legendary .gcr-stars-on{background-image:linear-gradient(105deg,#7B52AB 0%,#7B52AB 30%,#e8d5ff 45%,#fff 50%,#e8d5ff 55%,#7B52AB 70%,#7B52AB 100%);}
.gcr-tier.rarity-mythic    .gcr-stars-on{background-image:linear-gradient(105deg,#D4A843 0%,#D4A843 30%,#faf0d0 45%,#fff 50%,#faf0d0 55%,#D4A843 70%,#D4A843 100%);}
.gcr-tier.rarity-wonder    .gcr-stars-on{background-image:linear-gradient(105deg,#C0392B 0%,#C0392B 30%,#fcc 45%,#fff 50%,#fcc 55%,#C0392B 70%,#C0392B 100%);}
.gcr-pct{
  margin-left:auto;font:700 16px var(--font-mono);color:var(--text);
}
.gcr-na{margin-left:auto;white-space:nowrap;font:500 12.5px var(--font-body);color:var(--muted);font-style:italic;}
.gcr-tier.is-na{opacity:.72;}
.gcr-chev{margin-left:10px;color:var(--muted);flex:0 0 auto;transition:transform .24s ease;}
.gcr-tier.is-expanded .gcr-chev{transform:rotate(180deg);}
.gcr-tier.is-na .gcr-chev{display:none;}

/* ── Expanded card list (accordion) ── */
/* Collapsed by default; JS sets an explicit max-height (measured scrollHeight)
   on expand so the slide is correctly timed. */
.gcr-cards{max-height:0;overflow:hidden;transition:max-height .34s cubic-bezier(.4,0,.2,1);}
.gcr-card{
  display:flex;align-items:center;gap:11px;
  padding:9px 15px;border-top:1px solid var(--border);
  cursor:pointer;transition:background .15s ease;
}
.gcr-card:active{background:var(--paper-2);}
.gcr-card-chip{
  position:relative;overflow:hidden;
  width:34px;height:46px;border-radius:6px;flex:0 0 auto;
  background:linear-gradient(160deg, var(--c1), var(--c2));   /* loading + fallback backdrop */
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25), 0 1px 3px rgba(0,0,0,.16);
}
.gcr-card-chip.rarity-common{--c1:#cdc4b8;--c2:#a89e90;}
.gcr-card-chip.rarity-rare{--c1:#7fbdbd;--c2:#4d8c8c;}
.gcr-card-chip.rarity-legendary{--c1:#a07fc9;--c2:#6a45a0;}
.gcr-card-chip.rarity-mythic{--c1:#e6c46a;--c2:#c79a2f;}
.gcr-card-chip.rarity-wonder{--c1:#d96b5e;--c2:#b02f24;}
/* Once real art is in, swap the tint for neutral paper so contained
   stamps/stickers don't sit on a coloured wash; backgrounds cover it anyway. */
.gcr-card-chip.has-img{background:var(--paper-2);}
.gcr-card-chip img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;animation:gcrChipIn .25s ease both;
}
.gcr-card-chip.cat-stamp img,
.gcr-card-chip.cat-sticker img{object-fit:contain;padding:3px;box-sizing:border-box;}
@keyframes gcrChipIn{from{opacity:0;}to{opacity:1;}}
.gcr-card-no{font:600 10.5px var(--font-mono);color:var(--muted);min-width:34px;}
.gcr-card-name{
  flex:1;font:500 13px var(--font-body);color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.gcr-card-pct{font:600 12px var(--font-mono);color:var(--muted);flex:0 0 auto;}

/* ── States ── */
.gcr-loading,.gcr-empty{
  padding:22px 8px;text-align:center;
  font:500 13px var(--font-body);color:var(--muted);
}
.gcr-empty{padding:14px 8px;}
.gcr-foot{
  font-size:11.5px;line-height:1.5;color:var(--muted);
  text-align:center;margin:16px 6px 4px;
}