@import url("https://api.fontshare.com/v2/css?f[]=clash-display@500,600,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap");
/* ============================================================
   premium.css — InkSight dark-luxe polish layer (additive only)
   Reuses existing tokens & class names. No layout changes.
   Pass 3: stronger, clearly visible elevation.
   Pass 4 (Vault): premium dark theme overlay — see bottom of file.
   ============================================================ */


/* ---------- 1. Fine grain texture (site-wide, more perceptible) ---------- */
html::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:1;
  opacity:.085;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:180px 180px;
}
/* faint vignette over grain to keep dark depth */
html::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:1;
  background:radial-gradient(ellipse at 50% 0%, transparent 40%, rgba(0,0,0,.35) 100%);
}
body > *{position:relative;}
body > *:not(script):not(style){z-index:auto;}

/* ---------- 2. Glass nav refinement (stronger frost) ---------- */
.is-nav, header.is-nav, nav.is-nav, .nav, header nav{
  -webkit-backdrop-filter:saturate(160%) blur(18px);
  backdrop-filter:saturate(160%) blur(18px);
  background-color:color-mix(in oklab, var(--void) 62%, transparent) !important;
  border-bottom:1px solid color-mix(in oklab, var(--amber) 14%, var(--line));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(255,255,255,.02),
    0 10px 36px -18px rgba(0,0,0,.7);
}

/* ---------- 3. Foil hairline divider (clearly visible) ---------- */
.foil-hr{
  position:relative;
  height:1.5px;
  width:100%;
  margin:44px 0;
  border:0;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(245,181,61,.85) 18%,
    rgba(229,87,79,.85) 38%,
    rgba(169,116,232,.85) 58%,
    rgba(77,141,240,.85) 78%,
    transparent 100%);
  opacity:.78;
  box-shadow:0 0 14px -2px rgba(245,181,61,.25);
}
.foil-hr.top{margin:0 0 18px}

/* ---------- 4. Glass panels: .lift, .pill, promo band ---------- */
.lift, .pill, .gcard, .tile{
  position:relative;
  background:linear-gradient(180deg,
    color-mix(in oklab, var(--surface) 92%, white 4%) 0%,
    color-mix(in oklab, var(--surface) 96%, transparent) 100%) !important;
  -webkit-backdrop-filter:blur(8px) saturate(130%);
  backdrop-filter:blur(8px) saturate(130%);
  border:1px solid color-mix(in oklab, var(--line) 80%, white 6%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.3),
    0 14px 38px -22px rgba(0,0,0,.75);
}
.lift::after, .pill::after{
  content:"";
  position:absolute; left:0; right:0; top:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  pointer-events:none;
}

/* ---------- 5. Component hover polish ---------- */
.lift, .gcard, .pill, .tile, .amz-card, .act, .cta-btn, .btn{
  transition: transform .26s cubic-bezier(.2,.7,.2,1), box-shadow .26s ease, border-color .26s ease, background-color .26s ease;
}
.lift:hover, .gcard:hover, .tile:hover, .amz-card:hover{
  transform:translateY(-4px);
  border-color:color-mix(in oklab, var(--amber) 42%, var(--line));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 26px 56px -22px rgba(0,0,0,.8),
    0 0 0 1px color-mix(in oklab, var(--amber) 18%, transparent),
    0 0 38px -12px color-mix(in oklab, var(--amber) 50%, transparent);
}
.pill:hover{
  transform:translateY(-5px);
  border-color:color-mix(in oklab, var(--c, var(--amber)) 50%, var(--line));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 28px 60px -22px rgba(0,0,0,.85),
    0 0 40px -12px color-mix(in oklab, var(--c, var(--amber)) 55%, transparent);
}
.btn:hover, .cta-btn:hover, .act:hover{transform:translateY(-1px)}

/* nav link hover sheen + active-page indicator */
.is-nav-links a:not(.is-active):hover,
nav a:not(.is-active):hover{color:var(--amber)}
.is-nav-links a.is-active{
  color:#EAEDF6 !important;
  background:color-mix(in oklab, var(--amber) 14%, var(--surface)) !important;
  box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--amber) 32%, transparent);
}
/* Brand tag chip "Disney Lorcana" — baseline so pages without their own
   .is-nav-tag rule still get the divider/dim treatment. */
html body .is-nav-brand .is-nav-tag{
  margin-left:9px;
  padding-left:10px;
  border-left:1px solid #33394D;
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-weight:500;
  font-size:12px;
  letter-spacing:.02em;
  color:#AAB2C6;
  white-space:nowrap;
}

/* primary amber CTAs — gentle glow */
.btn.primary, .cta-btn.primary, a.btn[data-variant="primary"],
.btn-amber, button.primary{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 8px 22px -10px color-mix(in oklab, var(--amber) 80%, transparent),
    0 0 0 1px color-mix(in oklab, var(--amber) 35%, transparent);
}
.btn.primary:hover, .cta-btn.primary:hover, .btn-amber:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 14px 32px -10px color-mix(in oklab, var(--amber) 90%, transparent),
    0 0 0 1px color-mix(in oklab, var(--amber) 55%, transparent),
    0 0 30px -8px color-mix(in oklab, var(--amber) 65%, transparent);
}

/* ---------- 6. Refined details ---------- */
:focus-visible{
  outline:2px solid var(--amber) !important;
  outline-offset:2px;
  border-radius:6px;
}
::selection{
  background:color-mix(in oklab, var(--amber) 55%, transparent);
  color:#1a1402;
}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:var(--void)}
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, var(--surface-2, var(--surface)), var(--surface-3, var(--surface)));
  border:2px solid var(--void);
  border-radius:8px;
}
*::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, var(--surface-3, var(--surface)), color-mix(in oklab, var(--amber) 30%, var(--surface)));
}
*{scrollbar-color: var(--surface-3, var(--surface)) var(--void); scrollbar-width: thin;}

h1, h2{letter-spacing:-.022em}
.eyebrow, [class*="eyebrow"]{
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:.72rem;
  color:color-mix(in oklab, var(--amber) 80%, white 10%);
}

/* ---------- 7. Homepage hero elevation ---------- */
.hero h1{text-wrap:balance}
.hero p{text-wrap:pretty}
.hero::after{box-shadow:0 0 160px 30px rgba(77,141,240,.14)}

.hero-cluster{position:relative}
.hero-cluster::before{
  content:"";
  position:absolute;
  inset:-80px -40px -20px -40px;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 55%,
      rgba(245,181,61,.34) 0%,
      rgba(245,181,61,.18) 20%,
      transparent 55%),
    radial-gradient(ellipse at 30% 70%,
      rgba(169,116,232,.22) 0%,
      transparent 55%),
    radial-gradient(ellipse at 75% 35%,
      rgba(77,141,240,.18) 0%,
      transparent 55%);
  filter:blur(14px);
  animation:heroBloom 9s ease-in-out infinite alternate;
}
@keyframes heroBloom{
  0%{opacity:.78; transform:scale(1)}
  100%{opacity:1; transform:scale(1.06)}
}

.hero-cluster .hc{
  position:relative;
  box-shadow:
    0 30px 60px -16px rgba(0,0,0,.8),
    0 0 0 1px rgba(255,255,255,.07) inset,
    0 0 50px -14px rgba(245,181,61,.28);
}
.hero-cluster .hc::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.08), transparent 30%);
  mix-blend-mode:overlay;
}

.hero-cluster .hc[data-rarity="enchanted" i]::before,
.hero-cluster .hc.enchanted::before,
.hero-cluster .hc.chase::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background:linear-gradient(125deg,
    transparent 30%,
    rgba(169,116,232,.28) 45%,
    rgba(77,141,240,.28) 55%,
    rgba(63,191,135,.28) 65%,
    transparent 80%);
  mix-blend-mode:screen;
  pointer-events:none;
  animation:foilShift 6s ease-in-out infinite;
}
@keyframes foilShift{
  0%,100%{opacity:.5; transform:translateX(-4%)}
  50%{opacity:.95; transform:translateX(4%)}
}

/* ---------- 8. Pillar cards — visible top accent + glowing ink icon ---------- */
.pill{overflow:hidden; isolation:isolate}
.pill::before{
  content:"";
  position:absolute; top:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg,
    transparent,
    var(--c, var(--amber)) 18%,
    color-mix(in oklab, var(--c, var(--amber)) 70%, white 25%) 50%,
    var(--c, var(--amber)) 82%,
    transparent);
  opacity:1;
  pointer-events:none;
  box-shadow:0 0 18px -2px color-mix(in oklab, var(--c, var(--amber)) 70%, transparent);
}
.pill .ico{
  color:var(--c, var(--amber));
  filter:
    drop-shadow(0 0 10px color-mix(in oklab, var(--c, var(--amber)) 55%, transparent))
    drop-shadow(0 0 22px color-mix(in oklab, var(--c, var(--amber)) 25%, transparent));
}
.pill .ico, .pill [class*="icon"]:first-child{
  position:relative;
}

/* ---------- 9. Promo feature band ---------- */
.promo-feature > div{
  position:relative;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 18px 44px -22px rgba(0,0,0,.7);
}
.promo-feature > div::before{
  content:"";
  position:absolute; top:0; left:6%; right:6%;
  height:1.5px;
  background:linear-gradient(90deg,
    transparent,
    rgba(245,181,61,.9) 22%,
    rgba(169,116,232,.9) 50%,
    rgba(77,141,240,.9) 78%,
    transparent);
  opacity:.85;
  pointer-events:none;
  z-index:2;
  box-shadow:0 0 16px -2px rgba(245,181,61,.35);
}

/* ---------- 10. Stat strip / numeric flair ---------- */
.stat .num, .stat strong, [class*="stat-num"]{
  background:linear-gradient(180deg, #fff 0%, color-mix(in oklab, var(--amber) 70%, white 30%) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 24px color-mix(in oklab, var(--amber) 25%, transparent);
}

/* ticker subtle polish */
.ticker, [class*="ticker"]{
  border-top:1px solid color-mix(in oklab, var(--line) 80%, white 4%);
  border-bottom:1px solid color-mix(in oklab, var(--line) 80%, white 4%);
  background:linear-gradient(180deg,
    color-mix(in oklab, var(--void) 88%, transparent),
    color-mix(in oklab, var(--bg) 92%, transparent));
}

/* ---------- 11. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .lift, .gcard, .pill, .tile, .amz-card, .act, .cta-btn, .btn{transition:none}
  .hero-cluster::before{animation:none}
  .hero-cluster .hc[data-rarity="enchanted" i]::before,
  .hero-cluster .hc.enchanted::before,
  .hero-cluster .hc.chase::before{animation:none}
}

/* ---------- 12. Mobile safety ---------- */
@media (max-width: 640px){
  .hero-cluster::before{inset:-40px -10px 0 -10px; filter:blur(10px)}
  .foil-hr{margin:28px 0}
}

/* ============================================================
   MOBILE USABILITY PASS — site-wide (additive, ~390px audit)
   Targets: zero horizontal overflow, ≥16px inputs (no iOS zoom),
   ≥44px tap targets, safe-area-aware sticky nav, scrollable tables,
   modal width fit, sensible mobile spacing.
   ============================================================ */

/* 1. Kill horizontal page overflow — defense in depth */
html, body { overflow-x: clip; max-width: 100%; }
img, video, canvas, svg, iframe { max-width: 100%; height: auto; }

/* 2. Inputs/selects/textareas: prevent iOS zoom-on-focus.
      16px is the minimum that iOS Safari does NOT auto-zoom. */
@media (max-width: 640px){
  input, select, textarea {
    font-size: 16px !important;
  }
  /* keep search/number inputs full-width on phone */
  input[type="email"], input[type="text"], input[type="search"], input[type="number"]{
    width: 100%;
    min-width: 0;
  }
  /* newsletter row should stack so the button is reachable */
  form.nl, form.nl-form, .nl, .nl-form {
    flex-direction: column;
    align-items: stretch;
  }
  form.nl > button, form.nl-form > button, .nl > button, .nl-form > button {
    width: 100%;
    min-height: 48px;
  }
}

/* 3. Tap targets — ≥44×44 on touch devices for the common controls.
      Scoped to phone widths so desktop density is unchanged. */
@media (max-width: 640px){
  button,
  .btn, .cta-btn, .act,
  .is-nav-cta, .is-nav-links a,
  .tabs button, .tab, .chip, .pill-chip, .filter-chip,
  .buys a, .ms, .mode-chip {
    min-height: 44px;
  }
  /* keep tight pill rows readable but not cramped */
  .is-foot-nav a { min-height: 40px; display:inline-flex; align-items:center; }
}

/* 4. Sticky nav respects iOS notch safe-area */
.is-nav, header.top { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }

/* 5. Universal table scroll on mobile — any <table> not already wrapped
      in .tbl-scroll gets clipped + horizontally scrollable parent.
      We can't wrap in CSS, so we apply to common ancestors and add a
      subtle scroll-affordance fade. */
.tbl-scroll, .table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  position: relative;
  border-radius: 12px;
}
.tbl-scroll::after, .table-scroll::after{
  content:"";
  position: sticky; right: 0; top: 0;
  display: block; width: 24px; height: 100%;
  pointer-events: none;
  background: linear-gradient(270deg, var(--bg, #0A0B12) 10%, transparent);
}
@media (max-width: 640px){
  /* Compress data tables on phones — readable, no overflow */
  .tbl thead th, .tbl tbody td { padding: 9px 8px !important; }
  .tbl .nmcol img { width: 28px !important; height: 40px !important; }
  .tbl .nm { font-size: 12.5px !important; }
  .tbl .rar { font-size: 9.5px !important; padding: 2px 6px !important; }
  /* Any bare table not in a wrapper gets a scroll container */
  main table:not(.tbl-scroll table):not(.table-scroll table){
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* 6. Modals / overlays — fit screen, never overflow,
      scroll internally, reachable close. */
@media (max-width: 640px){
  .modal, .overlay, .dialog, .sheet,
  [role="dialog"] > *:not(script):not(style){
    max-width: 100vw !important;
    max-height: 100dvh !important;
  }
  .modal-body, .dialog-body, .sheet-body { max-height: calc(100dvh - 120px); overflow-y: auto; }
}

/* 7. Typography — keep body readable, scale headings down a touch */
@media (max-width: 640px){
  body { font-size: 15px; }
  h1 { font-size: clamp(28px, 8.4vw, 40px) !important; line-height: 1.08 !important; }
  h2 { font-size: clamp(22px, 6vw, 30px) !important; line-height: 1.15 !important; }
  h3 { font-size: clamp(18px, 5vw, 22px) !important; }
  .mono, .tick, .kicker, .crumb { font-size: 11.5px; }
}

/* 8. Spacing — reduce excess padding on small screens */
@media (max-width: 640px){
  .wrap, .is-nav-in, .is-foot-in { padding-left: 16px !important; padding-right: 16px !important; }
  .hero { padding-top: 36px !important; padding-bottom: 18px !important; }
  .pillars { padding-top: 28px !important; gap: 14px !important; }
  .pill { padding: 22px 18px 20px !important; }
  .nl, .signup { padding: 22px 18px !important; margin-top: 28px !important; }
  section { scroll-margin-top: 64px; }
  .foil-hr { margin: 22px 0 !important; }
}

/* 9. Card image grids — sensible mobile columns */
@media (max-width: 640px){
  .movers, .grid-cards, .card-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 10px !important;
  }
}
@media (max-width: 360px){
  .movers, .grid-cards, .card-grid {
    grid-template-columns: 1fr !important;
  }
}

/* 9b. Desktop nav (single tier) — engage only when the full row of
   links + brand + streak/Donate/CTA cluster genuinely fits. Below
   1450px we hand off to the burger drawer so no link is ever clipped
   or hidden behind the right-side cluster.
   No fade mask: with the breakpoint raised, the row fits without
   horizontal scroll, so a fade would only cut "News" mid-word. */
@media (min-width: 1450px) {
  html body .is-nav-in { height: 66px; padding: 0 18px; gap: 10px; flex-wrap: nowrap !important; }
  html body .is-nav-brand { font-size: 20px; gap: 9px; flex-shrink: 0; }
  html body .is-nav-brand .is-nav-drop { width: 23px; height: 23px; }
  html body .is-nav-brand .is-nav-tag { display: none !important; }
  html body .is-nav-links { min-width: 0; flex: 1 1 auto;
    overflow-x: auto; scrollbar-width: none;
    -webkit-mask-image: none; mask-image: none;
  }
  html body .is-nav-links::-webkit-scrollbar { display: none; }
  html body .is-nav-links a { font-size: 13.5px; padding: 8px 10px; white-space: nowrap; flex-shrink: 0; }
  html body .is-nav-cta { font-size: 13px; padding: 8px 14px; border-radius: 10px; flex-shrink: 0; }
  html body .is-nav-kofi { padding: 8px 12px; font-size: 13px; flex-shrink: 0; }
}

/* 10. Site-wide mobile + tablet nav — drawer below 1200px so the inline
   row never clips a link mid-word. The drawer lists every nav link.
   Selectors are intentionally high-specificity so these rules win over
   per-page inline <style> blocks that still use semi-transparent panels. */
@media(max-width:1449px){
  html body .is-nav{position:sticky !important;top:0 !important;z-index:1000 !important;}
  html body .is-nav-in{position:relative !important;flex-wrap:nowrap !important;height:64px !important;}
  /* Drawer panel — only on pages that ship the burger button so the links
     are reachable. Pages without a burger get the inline scroll-fade
     fallback further down so links remain visible. */
  html body .is-nav-in:has(.is-nav-burger) .is-nav-links{
    position:absolute !important;top:100% !important;left:0 !important;right:0 !important;
    display:none;flex-direction:column !important;align-items:stretch !important;gap:2px !important;
    padding:10px !important;
    background:#06070C !important;
    border-top:1px solid #33394D !important;
    border-bottom:1px solid #33394D !important;
    box-shadow:0 18px 36px -10px rgba(0,0,0,.85) !important;
    max-height:calc(100dvh - 70px);overflow-y:auto !important;
    z-index:1001 !important;
    -webkit-mask-image:none !important; mask-image:none !important;
  }
  html body .is-nav-in:has(.is-nav-burger) .is-nav-links.is-open{display:flex !important;}
  /* OPEN drawer geometry: full-height opaque panel pinned under the sticky
     header. position:fixed resolves against the VIEWPORT only because the
     pill (.is-nav-in) no longer carries backdrop-filter at this width (see
     the vault nav section below) — a blur there made the pill the containing
     block for fixed descendants and collapsed the drawer to a sliver.
     --is-nav-drawer-top is set by nav-burger.js to the header's real
     on-screen bottom edge on open. */
  html body .is-nav-in:has(.is-nav-burger) .is-nav-links.is-open{
    position:fixed !important;
    top:var(--is-nav-drawer-top,64px) !important;left:0 !important;right:0 !important;bottom:0 !important;
    width:100% !important;max-width:100% !important;height:auto !important;max-height:none !important;
    background:#06070C !important;
    -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
    overflow-y:auto !important;-webkit-overflow-scrolling:touch;
    border-top:1px solid #33394D !important;border-bottom:0 !important;
    padding:14px 16px 28px !important;
  }
  html body .is-nav-in:has(.is-nav-burger) .is-nav-links a,
  html body .is-nav-in:has(.is-nav-burger) .is-nav-group > summary,
  html body .is-nav-in:has(.is-nav-burger) .is-nav-group-summary{
    font-size:15px !important;padding:13px 14px !important;border-radius:8px !important;
    min-height:48px !important;display:flex !important;align-items:center !important;
    white-space:normal !important;
    color:#EAEDF6 !important;
  }
  html body .is-nav-in:has(.is-nav-burger) .is-nav-group{display:flex !important;flex-direction:column !important;width:100% !important;position:static !important;}
  html body .is-nav-in:has(.is-nav-burger) .is-nav-group > summary,
  html body .is-nav-in:has(.is-nav-burger) .is-nav-group-summary{width:100% !important;justify-content:space-between !important;background:transparent !important;border:0 !important;cursor:pointer !important;}
  html body .is-nav-in:has(.is-nav-burger) .is-nav-panel{position:static !important;display:none !important;flex-direction:column !important;gap:1px !important;background:transparent !important;border:0 !important;border-left:2px solid #33394D !important;box-shadow:none !important;min-width:0 !important;margin:2px 0 6px 6px !important;padding:2px 0 6px 14px !important;border-radius:0 !important;}
  html body .is-nav-in:has(.is-nav-burger) .is-nav-group.is-open > .is-nav-panel,
  html body .is-nav-in:has(.is-nav-burger) details.is-nav-group[open] > .is-nav-panel{display:flex !important;}
  html body .is-nav-in:has(.is-nav-burger) .is-nav-panel a{font-size:14.5px !important;min-height:44px !important;padding:11px 12px !important;}
  html body .is-nav-in:has(.is-nav-burger) .is-nav-drawer-close{display:flex !important;align-items:center !important;justify-content:space-between !important;width:100% !important;min-height:48px !important;margin:0 0 4px !important;padding:12px 14px !important;border:1px solid #33394D !important;border-radius:10px !important;background:#10131D !important;color:#EAEDF6 !important;font-family:'Space Grotesk','Inter',system-ui,sans-serif !important;font-size:14px !important;font-weight:700 !important;cursor:pointer !important;}
  html body .is-nav-in:has(.is-nav-burger) .is-nav-drawer-close svg{width:18px !important;height:18px !important;flex:none !important;}
  html body .is-nav-in:has(.is-nav-burger) .is-nav-links a:hover,
  html body .is-nav-in:has(.is-nav-burger) .is-nav-links a:focus,
  html body .is-nav-in:has(.is-nav-burger) .is-nav-group > summary:hover,
  html body .is-nav-in:has(.is-nav-burger) .is-nav-group > summary:focus,
  html body .is-nav-in:has(.is-nav-burger) .is-nav-group-summary:hover,
  html body .is-nav-in:has(.is-nav-burger) .is-nav-group-summary:focus,
  html body .is-nav-in:has(.is-nav-burger) .is-nav-drawer-close:hover,
  html body .is-nav-in:has(.is-nav-burger) .is-nav-drawer-close:focus{
    color:#FFD980 !important;background:rgba(245,181,61,.08) !important;
  }
  html body .is-nav-burger{display:inline-flex !important;}
  /* Fallback for pages without burger: keep the row inline but allow it
     to scroll horizontally with a soft mask so nothing is clipped mid-word. */
  html body .is-nav-in:not(:has(.is-nav-burger)) .is-nav-links{
    overflow-x:auto; scrollbar-width:none; min-width:0; flex:1 1 auto;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 20px),transparent 100%);
            mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 20px),transparent 100%);
  }
  html body .is-nav-in:not(:has(.is-nav-burger)) .is-nav-links::-webkit-scrollbar{display:none}
  html body .is-nav-in:not(:has(.is-nav-burger)) .is-nav-links a{white-space:nowrap; flex-shrink:0; font-size:13px; padding:7px 10px;}
  html body .is-nav-in:not(:has(.is-nav-burger)) .is-nav-brand .is-nav-tag{display:none !important;}
}
/* Burger / "Menu" pill — visible, labeled, primary mobile nav control.
   The injected button contains only an <svg>; we append a "Menu" label
   via ::after so existing HTML/JS keeps working unchanged. */
html body .is-nav-burger{
  display:none;
  position:relative;
  z-index:1002;
  flex-shrink:0;
  background:linear-gradient(180deg,#1D2130,#161925);
  border:1px solid #444C63;
  border-radius:10px;
  height:44px;min-width:44px;width:auto;
  padding:0 18px 0 12px;
  gap:8px;
  align-items:center;justify-content:center;
  cursor:pointer;color:#EAEDF6;
  font-family:'Space Grotesk','Inter',system-ui,sans-serif;
  font-weight:700;font-size:14px;letter-spacing:.01em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 6px 18px -10px rgba(0,0,0,.7);
}
html body .is-nav-burger::after{
  content:"Menu";
  font-family:'Space Grotesk','Inter',system-ui,sans-serif;
  font-weight:700;font-size:14px;line-height:1;color:#EAEDF6;
}
html body .is-nav-burger:hover{background:#262B3C;border-color:color-mix(in oklab, var(--amber) 50%, #444C63);}
html body .is-nav-burger svg{width:18px;height:18px;display:block}
html body .is-nav-burger[aria-expanded="true"]{
  background:linear-gradient(180deg,#262B3C,#1D2130);
  border-color:color-mix(in oklab, var(--amber) 55%, #444C63);
  color:#FFD980;
}
html body .is-nav-burger[aria-expanded="true"]::after{color:#FFD980}
@media(min-width:1450px){
  html body .is-nav-burger{display:none !important;}
  html body .is-nav-drawer-close{display:none !important;}
}
/* Below the burger breakpoint, de-emphasize the CTA & Donate so the
   "Menu" pill is unambiguously the primary control and the row fits. */
@media(max-width:900px){
  html body .is-nav-cta{font-size:12px !important;padding:8px 11px !important;}
}
/* Default: CTA icon hidden, label shown */
html body .is-nav-cta .is-nav-cta-icon{display:none;align-items:center;justify-content:center}
html body .is-nav-cta .is-nav-cta-icon svg{width:16px;height:16px;display:block}
/* Collapse Donate + "Get the Ink Report" labels to icon-only across the
   entire burger band (<=1449px). At tablet widths (600–1024) the row was
   too tight to fit full-label CTA + Donate pill + Menu button, pushing
   the hamburger past the viewport's right edge. Icon-only keeps both
   reachable without clipping Menu. Full labels return at 1450+. */
@media(max-width:1449px){
  html body .is-nav-kofi .kofi-label{display:none !important;}
  html body .is-nav-kofi{padding:8px 11px !important;}
  html body .is-nav-cta .is-nav-cta-label{display:none !important;}
  html body .is-nav-cta .is-nav-cta-icon{display:inline-flex !important;}
  html body .is-nav-cta{padding:8px 10px !important;min-width:38px;justify-content:center}
}
@media(max-width:520px){
  html body .is-nav-in{padding:0 12px !important;height:56px !important;gap:6px !important;}
  html body .is-nav-brand{font-size:17px !important;}
  html body .is-nav-brand .is-nav-drop{width:20px !important;height:20px !important;}
  html body .is-nav-brand .is-nav-tag{display:none !important;}
  html body .is-nav .is-nav-links a{font-size:15px !important;padding:13px 14px !important;}
  html body .is-nav-kofi{padding:7px 9px !important;font-size:12px !important;}
}
/* Menu burger is the primary control on mobile — pin it, never let it clip */
html body .is-nav-burger{flex-shrink:0 !important;margin-left:auto}
@media(max-width:380px){
  html body .is-nav-burger{padding:0 14px 0 10px;height:40px;min-width:40px;width:auto;margin-right:0}
  html body .is-nav-burger::after{font-size:13px}
  /* On the tiniest phones, keep only brand + search + burger */
  html body .is-nav-kofi{display:none !important;}
  html body .is-nav-cta{display:none !important;}
}

/* Dark scrim behind the open drawer — sits just below the nav (z-1000) */
html body:has(.is-nav-links.is-open)::before{
  content:"";position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:998;pointer-events:auto;
}
.is-nav-backdrop{display:none}
@media(max-width:1449px){
  html body .is-nav-backdrop{position:fixed;inset:0;z-index:999;display:none;background:rgba(0,0,0,.55);border:0;padding:0;cursor:default}
  html body .is-nav-in:has(.is-nav-links.is-open) .is-nav-backdrop{display:block}
}
/* Prevent background scrolling while the mobile menu is open.
   Lock the ROOT only: overflow-y:hidden on <body> turns body into a scroll
   container, which un-sticks the sticky header the instant the drawer opens
   (header scrolls away → blank header area). Body keeps overflow-y:visible. */
html.is-nav-menu-open,
html:has(.is-nav-links.is-open){overflow-y:hidden !important;overflow-x:clip !important;}
body.is-nav-menu-open,
body:has(.is-nav-links.is-open){overflow-y:visible !important;overflow-x:clip !important;}


/* 11. Hero cluster mobile overflow protection */
@media (max-width: 640px){
  .hero-cluster, .hero-cluster .hc { max-width: 100%; }
  .hero-cluster::before { inset: -30px -8px 0 -8px !important; }
}

/* 12. Deck Lab specific: ensure builder controls don't overflow */
@media (max-width: 640px){
  .dl-grid, .dl-cols, .deck-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .dl-controls, .dl-toolbar { flex-wrap: wrap; gap: 8px; }
  .dl-controls > *, .dl-toolbar > * { min-height: 44px; }
}

/* 13. Make the ticker no taller than needed on phone (it was eating viewport) */
@media (max-width: 640px){
  .ticker .tick { padding: 9px 14px !important; font-size: 11.5px !important; }
}

/* ============================================================
   SET COVER GALLERY — original ink-palette tiles (no third-party art)
   Used on guides/index.html (Browse by set) and shop.html (Shop by set)
   ============================================================ */
.set-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:14px 0 30px}
.set-tile{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:14px;min-height:200px;padding:18px 18px 16px;border-radius:18px;text-decoration:none;color:#fff;isolation:isolate;overflow:hidden;background:linear-gradient(135deg,color-mix(in oklab,var(--c1,var(--amber,#F5B53D)) 42%,#0A0B12) 0%,color-mix(in oklab,var(--c2,var(--Amethyst,#A974E8)) 32%,#06070C) 100%);border:1px solid color-mix(in oklab,var(--c1,var(--amber,#F5B53D)) 35%,#33394D);box-shadow:0 14px 38px -22px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.08);transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,border-color .25s}
.set-tile::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(140% 95% at 100% 0%,color-mix(in oklab,var(--c1,var(--amber,#F5B53D)) 30%,transparent),transparent 55%),radial-gradient(140% 95% at 0% 100%,color-mix(in oklab,var(--c2,var(--Amethyst,#A974E8)) 32%,transparent),transparent 55%),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/></svg>")}
.set-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.22) 50%,transparent 62%);opacity:0;transition:opacity .4s;pointer-events:none;mix-blend-mode:overlay}
.set-tile:hover{transform:translateY(-4px);border-color:color-mix(in oklab,var(--c1,var(--amber,#F5B53D)) 70%,#33394D);box-shadow:0 26px 56px -22px rgba(0,0,0,.85),0 0 40px -12px color-mix(in oklab,var(--c1,var(--amber,#F5B53D)) 60%,transparent)}
.set-tile:hover::after{opacity:1}
.set-tile:focus-visible{outline:2px solid var(--amber,#F5B53D);outline-offset:3px}
.set-tile .set-eye{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.78);display:flex;align-items:center;gap:8px}
.set-tile .set-eye .dot{width:6px;height:6px;border-radius:50%;background:color-mix(in oklab,var(--c1,var(--amber,#F5B53D)) 85%,white);box-shadow:0 0 10px color-mix(in oklab,var(--c1,var(--amber,#F5B53D)) 70%,transparent)}
.set-tile .set-name{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:23px;line-height:1.08;letter-spacing:-.018em;margin:0;background:linear-gradient(110deg,#fff 0%,color-mix(in oklab,var(--c1,var(--amber,#F5B53D)) 78%,white) 55%,#fff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 30px color-mix(in oklab,var(--c1,var(--amber,#F5B53D)) 35%,transparent)}
.set-tile .set-glyph{position:absolute;top:14px;right:14px;font-size:18px;line-height:1;color:color-mix(in oklab,var(--c1,var(--amber,#F5B53D)) 85%,white);opacity:.7;filter:drop-shadow(0 0 12px color-mix(in oklab,var(--c1,var(--amber,#F5B53D)) 55%,transparent));pointer-events:none}
.set-tile .set-cta{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:12.5px;color:rgba(255,255,255,.92);display:inline-flex;align-items:center;gap:6px}
.set-tile .set-cta::after{content:"→";transition:transform .25s}
.set-tile:hover .set-cta::after{transform:translateX(4px)}
@media(max-width:640px){.set-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.set-tile{min-height:160px;padding:14px;gap:10px}.set-tile .set-name{font-size:17px}.set-tile .set-glyph{font-size:15px;top:10px;right:12px}}
@media(max-width:360px){.set-gallery{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.set-tile,.set-tile::after,.set-tile .set-cta::after{transition:none}.set-tile:hover{transform:none}}

/* Ink palette aliases — ensure both naming styles work on every page */
:root{
  --Amber:#F5B53D; --Amethyst:#A974E8; --Emerald:#3FBF87; --Ruby:#E5574F; --Sapphire:#4D8DF0; --Steel:#AAB2C6;
  --amber:#F5B53D; --amethyst:#A974E8; --emerald:#3FBF87; --ruby:#E5574F; --sapphire:#4D8DF0; --steel:#AAB2C6;
}

/* ============================================================
   Layout consistency pass — site-wide frame
   Standardize NAV + FOOTER inner width to 1280px on every page.
   Per-page .wrap widths are tuned per page type (grid vs. text).
   ============================================================ */
.is-nav-in, .nav-in{ max-width:1280px !important; margin:0 auto; padding:0 18px; display:flex; align-items:center; gap:12px; height:64px; }
.is-nav-brand{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:#EAEDF6; font-family:'Space Grotesk',system-ui,sans-serif; font-weight:800; font-size:20px; flex-shrink:0; }
.is-nav-brand b{ color:var(--amber,#F5B53D); font-weight:800; }
.is-nav-brand .is-nav-drop{ display:inline-block; width:22px; height:22px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #FFD27A, #F5B53D 55%, #8a5a12); box-shadow:inset 0 1px 0 rgba(255,255,255,.35); }
.is-nav-links{ display:flex; align-items:center; gap:2px; flex:1 1 auto; min-width:0; }
.is-nav-links a{ color:#C9CFDC; text-decoration:none; border-radius:8px; padding:8px 11px; font-size:13.5px; white-space:nowrap; transition:color .15s, background .15s; }
.is-nav-cta{ display:inline-flex; align-items:center; color:#0c0a04; background:linear-gradient(135deg,#FFD27A,#F5B53D 60%,#E59A1F); font-family:'Space Grotesk',system-ui,sans-serif; font-weight:700; text-decoration:none; padding:8px 14px; border-radius:10px; font-size:13px; white-space:nowrap; flex-shrink:0; }
.is-foot-in{ max-width:1280px !important; }
.is-catnav-in, .is-catdesc{ max-width:1280px !important; }

/* ============================================================
   Ko-fi support links — friendly, distinct from affiliate CTAs.
   Use the styled button anywhere; never embed Ko-fi's logo asset.
   ============================================================ */
.kofi-btn{display:inline-flex;align-items:center;gap:7px;font-family:'Space Grotesk',system-ui,sans-serif;font-weight:600;font-size:13px;color:#EAEDF6;background:rgba(245,181,61,.08);border:1px solid rgba(245,181,61,.32);padding:8px 14px;border-radius:999px;text-decoration:none;transition:background .15s,border-color .15s,transform .15s;white-space:nowrap;cursor:pointer}
.kofi-btn:hover{background:rgba(245,181,61,.16);border-color:rgba(245,181,61,.55);transform:translateY(-1px);color:#fff}
.kofi-btn .kofi-cup{font-size:14px;line-height:1}
.kofi-btn:focus-visible{outline:2px solid var(--amber,#F5B53D);outline-offset:2px}
.kofi-card{margin:18px 0;padding:16px 18px;background:linear-gradient(135deg,rgba(245,181,61,.06),rgba(245,181,61,.02));border:1px solid rgba(245,181,61,.22);border-radius:14px;text-align:center;font-family:'Inter',system-ui,sans-serif;color:#C9CFDD;font-size:13.5px;line-height:1.55}
.kofi-card p{margin:0 0 10px}
.kofi-line{margin:14px auto 0;text-align:center;font-family:'Inter',system-ui,sans-serif;font-size:12.5px;color:#AAB2C6;line-height:1.6}
.kofi-line .kofi-msg{margin-right:8px}
@media(max-width:520px){.kofi-line .kofi-msg{display:block;margin:0 0 8px}}
.is-foot-support{margin:14px 0 6px;font-family:'Inter',system-ui,sans-serif;font-size:12.5px;color:#AAB2C6;line-height:1.6}
.is-foot-support .kofi-btn{padding:5px 11px;font-size:12px;background:transparent;border-color:rgba(245,181,61,.3);color:#EAEDF6;margin-left:6px}
.is-foot-support .kofi-btn:hover{background:rgba(245,181,61,.1)}

/* ============================================================
   Ko-fi DONATE button in primary nav — highlighted, prominent.
   Visually distinct from .is-nav-cta (Get the Ink Report).
   ============================================================ */
.is-nav-kofi{display:inline-flex;align-items:center;gap:6px;font-family:'Space Grotesk',system-ui,sans-serif;font-weight:700;font-size:13px;color:#1a1402;background:linear-gradient(135deg,#FFD27A 0%,#F5B53D 55%,#E59A1F 100%);padding:9px 14px;border-radius:999px;text-decoration:none;white-space:nowrap;flex-shrink:0;border:1px solid rgba(255,210,122,.65);box-shadow:0 0 0 1px rgba(245,181,61,.35),0 6px 18px -6px rgba(245,181,61,.55),0 0 16px -5px rgba(245,181,61,.25);transition:transform .15s ease,box-shadow .2s ease,filter .15s ease;animation:isNavKofiGlow 5.5s ease-in-out infinite}
.is-nav-kofi:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 0 0 1px rgba(255,210,122,.9),0 10px 28px -6px rgba(245,181,61,.85),0 0 36px -6px rgba(245,181,61,.5)}
.is-nav-kofi:focus-visible{outline:2px solid #FFC85A;outline-offset:3px}
.is-nav-kofi .kofi-cup{font-size:14px;line-height:1}
.is-nav-kofi .kofi-label{letter-spacing:.01em}
@keyframes isNavKofiGlow{
  0%,100%{box-shadow:0 0 0 1px rgba(245,181,61,.35),0 6px 18px -6px rgba(245,181,61,.55),0 0 14px -5px rgba(245,181,61,.22)}
  50%{box-shadow:0 0 0 1px rgba(255,210,122,.55),0 8px 24px -6px rgba(245,181,61,.65),0 0 30px -7px rgba(245,181,61,.42)}
}
@media(prefers-reduced-motion:reduce){.is-nav-kofi{animation:none;box-shadow:0 0 0 1px rgba(245,181,61,.35),0 6px 18px -6px rgba(245,181,61,.55),0 0 14px -5px rgba(245,181,61,.22)}}

/* ============================================================
   Ko-fi DONATE milestone modal (Pack Lab)
   ============================================================ */
.kofi-modal{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(4,6,12,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.kofi-modal.show{display:flex;animation:kofiModalFade .25s ease both}
@keyframes kofiModalFade{from{opacity:0}to{opacity:1}}
.kofi-modal-box{position:relative;max-width:440px;width:100%;background:linear-gradient(180deg,#161925 0%,#0A0B12 100%);border:1px solid rgba(245,181,61,.35);border-radius:18px;padding:26px 24px 22px;box-shadow:0 30px 80px -20px rgba(0,0,0,.85),0 0 60px -20px rgba(245,181,61,.35);text-align:center;color:#EAEDF6;font-family:'Inter',system-ui,sans-serif;animation:kofiModalPop .3s cubic-bezier(.2,.7,.2,1) both}
@keyframes kofiModalPop{from{transform:translateY(12px) scale(.96);opacity:0}to{transform:none;opacity:1}}
.kofi-modal-cup{font-size:34px;line-height:1;margin:0 0 8px;display:block;filter:drop-shadow(0 0 14px rgba(245,181,61,.45))}
.kofi-modal-box h3{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:20px;line-height:1.2;margin:0 0 8px;color:#fff;letter-spacing:-.01em}
.kofi-modal-box p{margin:0 0 18px;font-size:14px;line-height:1.55;color:#C9CFDD}
.kofi-modal-box p b{color:#F5B53D;font-weight:600}
.kofi-modal-actions{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.kofi-modal-actions .kofi-btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14.5px;color:#1a1402;background:linear-gradient(135deg,#FFD27A,#F5B53D);padding:12px 18px;border-radius:12px;text-decoration:none;border:1px solid rgba(255,210,122,.7);box-shadow:0 8px 22px -6px rgba(245,181,61,.55);transition:transform .15s,filter .15s}
.kofi-modal-actions .kofi-btn-primary:hover{transform:translateY(-1px);filter:brightness(1.05)}
.kofi-modal-dismiss{background:none;border:none;color:#AAB2C6;font-family:'Inter',sans-serif;font-size:12.5px;padding:6px 10px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.kofi-modal-dismiss:hover{color:#C9CFDD}
.kofi-modal-x{position:absolute;top:10px;right:10px;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid #232838;color:#AAB2C6;border-radius:10px;cursor:pointer;font-size:18px;line-height:1;transition:color .15s,border-color .15s}
.kofi-modal-x:hover{color:#fff;border-color:#3a4159}
.kofi-modal-x:focus-visible{outline:2px solid #F5B53D;outline-offset:2px}
@media(max-width:420px){.kofi-modal-box{padding:22px 18px 18px}.kofi-modal-box h3{font-size:18px}}

/* ============================================================
   Attack of the Vine! preorder — top announcement bar
   ============================================================ */
#aotv-bar{position:sticky;top:0;left:0;right:0;z-index:990;background:linear-gradient(180deg,rgba(10,14,18,.92),rgba(8,11,16,.92));-webkit-backdrop-filter:saturate(150%) blur(14px);backdrop-filter:saturate(150%) blur(14px);border-bottom:1px solid rgba(110,200,150,.22);box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 8px 24px -18px rgba(0,0,0,.7);font-family:'Inter',system-ui,sans-serif;color:#DDE3EE;animation:aotvBarIn .35s ease both}
#aotv-bar.aotv-bar-out{animation:aotvBarOut .22s ease both}
@keyframes aotvBarIn{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}
@keyframes aotvBarOut{to{transform:translateY(-100%);opacity:0}}
#aotv-bar .aotv-bar-in{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:8px 16px;font-size:13.5px;line-height:1.3}
#aotv-bar .aotv-bar-link{display:flex;align-items:center;gap:10px;flex:1;min-width:0;text-decoration:none;color:inherit;transition:opacity .15s}
#aotv-bar .aotv-bar-link:hover{opacity:.85}
#aotv-bar .aotv-bar-link:focus-visible{outline:2px solid #7DD3A8;outline-offset:2px;border-radius:4px}
#aotv-bar .aotv-bar-leaf{height:22px;width:auto;display:block;flex-shrink:0;filter:drop-shadow(0 0 6px rgba(125,211,168,.35))}
#aotv-bar .aotv-bar-txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#aotv-bar .aotv-bar-txt b{color:#7DD3A8;font-weight:700;letter-spacing:.02em}
#aotv-bar .aotv-bar-sub{color:#9098AB}
#aotv-bar .aotv-bar-cta{flex-shrink:0;display:inline-flex;align-items:center;font-family:'Space Grotesk',system-ui,sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.02em;color:#E8FFF0;background:linear-gradient(135deg,rgba(60,140,95,.4),rgba(40,100,70,.5));padding:6px 12px;border-radius:999px;text-decoration:none;border:1px solid rgba(125,211,168,.45);transition:filter .15s,transform .15s,box-shadow .2s;box-shadow:0 0 0 1px rgba(125,211,168,.12),0 6px 14px -8px rgba(60,140,95,.55)}
#aotv-bar .aotv-bar-cta:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 0 0 1px rgba(125,211,168,.4),0 10px 22px -8px rgba(60,140,95,.7)}
#aotv-bar .aotv-bar-cta:focus-visible{outline:2px solid #7DD3A8;outline-offset:2px}
#aotv-bar .aotv-bar-x{flex-shrink:0;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid rgba(255,255,255,.08);color:#AAB2C6;border-radius:8px;cursor:pointer;font-size:16px;line-height:1;transition:color .15s,border-color .15s}
#aotv-bar .aotv-bar-x:hover{color:#EAEDF6;border-color:rgba(255,255,255,.18)}
#aotv-bar .aotv-bar-x:focus-visible{outline:2px solid #7DD3A8;outline-offset:2px}
#aotv-bar .aotv-bar-thumbs{display:inline-flex;gap:3px;align-items:center;flex-shrink:0}
#aotv-bar .aotv-bar-thumbs img{width:21px;height:29px;object-fit:cover;border-radius:3px;border:1px solid rgba(125,211,168,.4);background:#0A0B12;display:block}
@media(max-width:640px){#aotv-bar .aotv-bar-thumbs{display:none}}
@media(max-width:520px){#aotv-bar .aotv-bar-in{gap:8px;padding:7px 10px;font-size:12.5px}#aotv-bar .aotv-bar-sub{display:none}#aotv-bar .aotv-bar-cta{padding:9px 14px;font-size:12.5px;min-height:40px}#aotv-bar .aotv-bar-x{width:40px;height:40px;font-size:20px}}
@media(prefers-reduced-motion:reduce){#aotv-bar,#aotv-bar.aotv-bar-out{animation:none}}

/* aotv-bar-breathe-v1 — slow emerald breathing glow on the AOTV preorder bar.
   Outer soft glow via box-shadow + faint inner top-edge sheen via ::after.
   GPU-friendly (only box-shadow + opacity animate; no layout, no overflow). */
#aotv-bar{will-change:box-shadow;animation:aotvBarIn .35s ease both,aotvBreathe 4.2s ease-in-out 0.4s infinite}
#aotv-bar::after{content:"";position:absolute;left:0;right:0;top:0;height:50%;pointer-events:none;background:linear-gradient(180deg,rgba(125,211,168,.22),rgba(125,211,168,0));opacity:.25;animation:aotvSheen 4.2s ease-in-out 0.4s infinite;mix-blend-mode:screen}
@keyframes aotvBreathe{
  0%,100%{box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 8px 24px -18px rgba(0,0,0,.7),0 0 0 1px rgba(125,211,168,.10),0 0 14px -2px rgba(80,200,140,.18)}
  50%   {box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 8px 24px -18px rgba(0,0,0,.7),0 0 0 1px rgba(125,211,168,.28),0 0 28px 2px rgba(80,210,150,.5)}
}
@keyframes aotvSheen{
  0%,100%{opacity:.18}
  50%   {opacity:.55}
}
#aotv-bar.aotv-bar-out{animation:aotvBarOut .22s ease both}
@media(prefers-reduced-motion:reduce){
  #aotv-bar{animation:none;box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 8px 24px -18px rgba(0,0,0,.7),0 0 0 1px rgba(125,211,168,.18),0 0 16px -2px rgba(80,200,140,.22)}
  #aotv-bar::after{animation:none;opacity:.22}
}


/* responsive-uxaudit-v1 — mobile tap-target floors for promo bars + brand chrome */
@media(max-width:640px){
  #pd-bar .pd-bar-x{width:40px !important;height:40px !important;font-size:20px !important}
  #pd-bar .pd-bar-cta{padding:10px 14px !important;font-size:12.5px !important;min-height:40px}
  html body .is-nav-kofi{min-height:40px;padding:9px 12px !important}
}


/* nav-search-fix-v1 — persistent nav search button styles (must load on first paint, not inside lazy overlay JS) */
.ink-ss-nav-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:transparent;border:1px solid #33394D;border-radius:10px;color:#AAB2C6;padding:0 12px;height:40px;min-height:40px;min-width:40px;flex-shrink:0;font-size:13.5px;font-weight:600;font-family:inherit;cursor:pointer;white-space:nowrap;line-height:1}
.ink-ss-nav-btn:hover{color:#EAEDF6;border-color:#F5B53D}
.ink-ss-nav-btn svg{width:16px;height:16px;flex:none}
@media(max-width:640px){.ink-ss-nav-btn .lbl{display:none}.ink-ss-nav-btn{width:40px;padding:0}}

/* mobile-tap-v1 — minimum 40px tap targets on touch nav surfaces */
@media(max-width:640px){
  .crumb,nav.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px}
  .crumb a,nav.crumb a{display:inline-flex;align-items:center;min-height:40px;padding:8px 4px;line-height:1}
  .crumb span,nav.crumb span{display:inline-flex;align-items:center;min-height:40px;line-height:1}
  #aotv-bar .aotv-bar-link{min-height:44px;padding:6px 0}
  .mv-filters .chip,.mv-controls .chip,#mvRarity .chip,#mvInk .chip,.chip{min-height:40px!important;padding:0 14px}
  .hub-anchors a,.pcx-card a,.pcx-list a{min-height:40px;padding:6px 10px}
}


/* ============================================================
   ============== VAULT — PASS 1 (Pass 4 of premium) ==========
   Premium dark theme overlay. Cosmetic-only — never changes
   layout invariants, IDs, scripts, or data hooks. Loaded
   site-wide via the shared chrome (SiteChrome + static <link>).
   ============================================================ */
:root{
  --vault-bg:#06070C; --vault-bg2:#0a0b12;
  --vault-ink:#F4F2EC; --vault-dim:#9A9CA8; --vault-faint:#9CA3AF;
  --vault-gold:#E9C46A; --vault-gold-2:#C9A24B; --vault-gold-soft:#F6E2A8;
  --vault-amber:#F5B53D; --vault-amethyst:#A974E8; --vault-emerald:#3FBF87;
  --vault-ruby:#E5574F; --vault-sapphire:#4D8DF0; --vault-steel:#8A93A8;
  --vault-hair:rgba(255,255,255,.10); --vault-hair-2:rgba(255,255,255,.055);
  --vault-glass:rgba(255,255,255,.045);
  --vault-ease:cubic-bezier(.32,.72,0,1);
  --vault-font-display:"Clash Display","Space Grotesk",system-ui,sans-serif;
  --vault-font-body:"Plus Jakarta Sans","Inter",system-ui,sans-serif;
  --vault-font-mono:"JetBrains Mono","Space Mono",ui-monospace,monospace;
}

/* ---- Body: near-black with subtle multi-ink glow + grain already present ---- */
html,body{background:var(--vault-bg)!important;color:var(--vault-ink)!important;font-family:var(--vault-font-body)!important;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  background-image:
    radial-gradient(880px 540px at 88% 4%, rgba(169,116,232,.16), transparent 60%),
    radial-gradient(820px 560px at 10% 8%, rgba(77,141,240,.13), transparent 60%),
    radial-gradient(900px 600px at 50% 110%, rgba(233,196,106,.08), transparent 70%),
    radial-gradient(700px 500px at 6% 78%, rgba(63,191,135,.05), transparent 60%) !important;
  background-attachment:fixed!important;
}

/* Headings → Clash Display */
h1,h2,h3,h4,h5,.hero h1,.triad-head h2{font-family:var(--vault-font-display)!important;letter-spacing:-.025em}
.mono,code,kbd,samp,pre,[class*="mono"]{font-family:var(--vault-font-mono)!important}

/* ---- Gradient phrase ---- */
.g, .vault-grad{background:linear-gradient(100deg,var(--vault-sapphire),var(--vault-amethyst) 52%,var(--vault-amber))!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;color:transparent!important}

/* ---- Italic gradient-clip safety net ----
   When italic text uses background-clip:text the slanted overhang of the
   first/last glyph gets cut by the text-fill box. Pad the inline box a
   touch on both sides and ensure it isn't clipped by a parent. Applied to
   the common gradient-headline class names used site-wide; tiny enough to
   avoid layout shift or overflow. Recurring bug — keep this rule. */
:where(.g,.gs,.gx,.gold,.foil,.grad,.accent,.ginline,.vault-grad){
  display:inline-block;
  padding-right:.14em;
  padding-left:.04em;
  overflow:visible;
}
:where(h1,h2,h3,.hero,.mast,.mkhead,.pcx-h1,.ph-title,.t-hero,.ik-hero,.pf-hero){overflow:visible}


/* ============================================================
   NAV — Floating Glass Island
   ============================================================ */
header.is-nav{
  position:sticky;top:14px!important;
  background:transparent!important;
  border-bottom:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  padding-top:2px;pointer-events:none;
}
header.is-nav .is-nav-in{
  pointer-events:auto;
  max-width:min(1260px,calc(100% - 24px))!important;
  width:100%!important;
  margin:0 auto!important;
  height:58px!important;
  padding:0 12px 0 14px!important;
  border-radius:9999px!important;
  background:rgba(10,11,18,.66)!important;
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  backdrop-filter:blur(20px) saturate(140%);
  border:1px solid var(--vault-hair)!important;
  box-shadow:
    0 24px 48px -22px rgba(0,0,0,.75),
    0 6px 14px -6px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.08);
  display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:nowrap!important;
}
/* Desktop layout: brand left, link group flex:1 (left of utility cluster), utilities right with gap */
@media(min-width:1450px){
  header.is-nav .is-nav-in > .is-nav-brand{flex:0 0 auto;margin-right:6px}
  header.is-nav .is-nav-in > .is-nav-links{flex:1 1 auto;min-width:0;display:flex!important;flex-wrap:nowrap!important;gap:2px!important;justify-content:flex-start!important;overflow:visible!important;-webkit-mask-image:none!important;mask-image:none!important}
  header.is-nav .is-nav-in > .ink-ss-nav-btn,
  header.is-nav .is-nav-in > #streakSlot,
  header.is-nav .is-nav-in > .is-nav-kofi,
  header.is-nav .is-nav-in > .is-nav-cta{flex:0 0 auto}
  /* Tighten link padding so all 7 items fit comfortably */
  header.is-nav .is-nav-links a,
  header.is-nav .is-nav-group-summary{font-size:13.5px!important;padding:7px 10px!important;white-space:nowrap}
  /* Search → icon-only on the island (keeps ⌘K + click intact) */
  header.is-nav .ink-ss-nav-btn{width:38px;min-width:38px;padding:0!important;justify-content:center}
  header.is-nav .ink-ss-nav-btn .lbl{display:none!important}
  /* Donate / CTA stay compact */
  header.is-nav .is-nav-kofi{padding:8px 12px!important;font-size:13px!important}
  header.is-nav .is-nav-cta{padding:6px 6px 6px 12px!important;font-size:13px!important}
  header.is-nav .is-nav-cta .is-nav-cta-icon{width:26px;height:26px}
}
/* Mid-desktop (1450–1569): hide CTA text label, keep circled arrow; hide Donate text */
@media(min-width:1450px) and (max-width:1569px){
  header.is-nav .is-nav-cta .is-nav-cta-label{display:none!important}
  header.is-nav .is-nav-cta{padding:6px!important}
  header.is-nav .is-nav-cta .is-nav-cta-icon{display:inline-flex!important}
  header.is-nav .is-nav-kofi .kofi-label{display:none!important}
  header.is-nav .is-nav-kofi{padding:8px 11px!important}
  header.is-nav .is-nav-brand .is-nav-tag{display:none!important}
}
.is-nav-brand{font-family:var(--vault-font-display)!important;letter-spacing:-.01em!important;color:var(--vault-ink)!important}
.is-nav-brand b{color:var(--vault-gold)!important}
.is-nav-drop{background:radial-gradient(circle at 35% 30%,var(--vault-gold-soft),var(--vault-gold) 60%,var(--vault-gold-2))!important;box-shadow:0 0 14px rgba(233,196,106,.55),inset 0 1px 0 rgba(255,255,255,.5)!important}
.is-nav-tag{color:var(--vault-dim)!important;border-left-color:var(--vault-hair)!important;font-family:var(--vault-font-body)!important}

.is-nav-links a,.is-nav-group-summary{font-family:var(--vault-font-body)!important;color:var(--vault-dim)!important;font-weight:600!important;transition:color .25s var(--vault-ease),background .25s var(--vault-ease)!important}
.is-nav-links a:hover,.is-nav-group-summary:hover{color:var(--vault-ink)!important;background:rgba(255,255,255,.05)!important}
.is-nav-links a.is-active{color:var(--vault-gold)!important}
.is-nav-links a.is-active::after{background:var(--vault-gold)!important;box-shadow:0 0 8px rgba(233,196,106,.55)!important}
.is-nav-panel{background:rgba(10,11,18,.92)!important;border:1px solid var(--vault-hair)!important;border-radius:14px!important;box-shadow:0 24px 48px -16px rgba(0,0,0,.85)!important;-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)}
.is-nav-panel a{color:var(--vault-dim)!important}
.is-nav-panel a:hover{color:var(--vault-gold)!important;background:rgba(255,255,255,.05)!important}

/* Search/streak/donate: glass pill style */
.ink-ss-nav-btn{background:var(--vault-glass)!important;border:1px solid var(--vault-hair)!important;color:var(--vault-dim)!important;border-radius:9999px!important;transition:border-color .25s var(--vault-ease),color .25s var(--vault-ease)!important}
.ink-ss-nav-btn:hover{color:var(--vault-ink)!important;border-color:var(--vault-gold)!important}
.is-nav-kofi{background:linear-gradient(180deg,#FFE5A8,#E9C46A 60%,#C9A24B)!important;color:#241c06!important;border-color:rgba(255,229,168,.7)!important;border-radius:9999px!important;font-family:var(--vault-font-body)!important;font-weight:700!important;box-shadow:0 8px 22px -10px rgba(233,196,106,.65),inset 0 1px 0 rgba(255,255,255,.45)!important}

/* "Get the Ink Report" — gold pill with circled arrow */
.is-nav-cta{
  background:linear-gradient(180deg,var(--vault-gold-soft),var(--vault-gold))!important;
  color:#241c06!important;border-color:transparent!important;
  border-radius:9999px!important;padding:8px 8px 8px 14px!important;
  font-family:var(--vault-font-body)!important;font-weight:700!important;letter-spacing:.005em;
  display:inline-flex!important;align-items:center!important;gap:8px!important;
  box-shadow:0 10px 28px -10px rgba(233,196,106,.6),inset 0 1px 0 rgba(255,255,255,.55)!important;
  transition:transform .3s var(--vault-ease),box-shadow .3s var(--vault-ease)!important;
}
.is-nav-cta:hover{transform:translateY(-2px)!important;box-shadow:0 16px 36px -10px rgba(233,196,106,.75),inset 0 1px 0 rgba(255,255,255,.6)!important}
.is-nav-cta:active{transform:scale(.98) translateY(0)!important}
.is-nav-cta .is-nav-cta-icon{
  width:28px;height:28px;border-radius:50%;
  background:rgba(36,28,6,.18);display:inline-flex;align-items:center;justify-content:center;
  transition:transform .35s var(--vault-ease),background .25s var(--vault-ease);
}
.is-nav-cta .is-nav-cta-icon svg{width:14px!important;height:14px!important;color:#241c06}
.is-nav-cta:hover .is-nav-cta-icon{background:rgba(36,28,6,.28);transform:translate(2px,-2px)}

/* Burger: pill styling only. NOTE: the old `body.is-nav-menu-open
   .is-nav-burger{transform:rotate(90deg)}` "morph hint" rotated the whole
   labeled Menu pill 90° while the drawer was open, rendering it as a tall
   vertical tab (Samsung/Chrome). Removed — never rotate the toggle. */
.is-nav-burger{background:var(--vault-glass)!important;border:1px solid var(--vault-hair)!important;color:var(--vault-ink)!important;border-radius:9999px!important;transition:background .25s var(--vault-ease),border-color .25s var(--vault-ease)!important}
.is-nav-burger:hover{background:rgba(255,255,255,.08)!important;border-color:var(--vault-gold)!important}

@media(max-width:1449px){
  /* Mobile pill: DROP the glass blur — backdrop-filter creates a CSS
     containing block that traps position:fixed descendants (the open
     drawer), collapsing it to a clipped sliver inside the 58px pill.
     Near-opaque background instead. */
  header.is-nav .is-nav-in{border-radius:9999px!important;background:rgba(10,11,18,.96)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  /* Drawer must stay position:absolute (template default). position:fixed breaks under .is-nav-in's backdrop-filter containing block. Cosmetic skin only — no position/size/z-index overrides. */
  html body .is-nav-in:has(.is-nav-burger) .is-nav-links{background:rgba(6,7,12,.97)!important;border:1px solid var(--vault-hair)!important;border-top:0!important;border-radius:0 0 18px 18px!important;-webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%)}
  .is-nav-links.is-open > *{opacity:0;transform:translateY(14px);animation:vault-nav-fade .55s var(--vault-ease) forwards}
  .is-nav-links.is-open > *:nth-child(1){animation-delay:.04s}
  .is-nav-links.is-open > *:nth-child(2){animation-delay:.08s}
  .is-nav-links.is-open > *:nth-child(3){animation-delay:.12s}
  .is-nav-links.is-open > *:nth-child(4){animation-delay:.16s}
  .is-nav-links.is-open > *:nth-child(5){animation-delay:.20s}
  .is-nav-links.is-open > *:nth-child(6){animation-delay:.24s}
  .is-nav-links.is-open > *:nth-child(7){animation-delay:.28s}
  .is-nav-links.is-open > *:nth-child(8){animation-delay:.32s}
  .is-nav-links.is-open > *:nth-child(9){animation-delay:.36s}
  .is-nav-links a,.is-nav-group-summary{font-size:18px!important;padding:14px 16px!important}
  .is-nav-drawer-close{background:rgba(255,255,255,.04)!important;border-color:var(--vault-hair)!important;color:var(--vault-ink)!important;border-radius:9999px!important;font-family:var(--vault-font-body)!important}
}
@keyframes vault-nav-fade{to{opacity:1;transform:none}}

/* ============================================================
   BUTTONS — primary gold pill + glass secondary
   ============================================================ */
.btn,.cta,.btn-primary,.btn-amz,.skurow-btns .btn,.aotv-bar-cta{
  font-family:var(--vault-font-body)!important;font-weight:700!important;
  border-radius:9999px!important;letter-spacing:0;
  transition:transform .3s var(--vault-ease),box-shadow .3s var(--vault-ease),background .25s var(--vault-ease),border-color .25s var(--vault-ease)!important;
}
.cta:not(.primary),.btn:not(.primary):not(.btn-primary):not(.btn-amz){
  background:var(--vault-glass)!important;border:1px solid rgba(245,181,61,.55)!important;color:#EAEDF6!important;
}
.cta:not(.primary):hover,.btn:not(.primary):not(.btn-primary):not(.btn-amz):hover{border-color:var(--vault-gold)!important;background:rgba(245,181,61,.10)!important;color:#fff!important;transform:translateY(-2px)!important}
.cta.primary,.btn.primary,.btn-primary,button.primary,a.btn[data-variant="primary"],.btn-amber{
  background:linear-gradient(180deg,#FFC85C,#E0A938)!important;
  color:#161006!important;border:1px solid transparent!important;font-weight:800!important;
  box-shadow:0 14px 36px -12px rgba(245,181,61,.6),0 0 0 1px rgba(245,181,61,.35),inset 0 1px 0 rgba(255,255,255,.45)!important;
}
.cta.primary:hover,.btn.primary:hover,.btn-primary:hover,button.primary:hover,.btn-amber:hover{transform:translateY(-2px)!important;filter:brightness(1.05);box-shadow:0 22px 48px -14px rgba(245,181,61,.78),0 0 0 1px rgba(245,181,61,.55),inset 0 1px 0 rgba(255,255,255,.5)!important}
.cta:active,.btn:active{transform:scale(.98)!important}

/* ============================================================
   CARDS / TILES — double-bezel
   ============================================================ */
.pill,.mq-card,.setcard,.hotc-tile,.skurow,.link-card,.feat,.lift,.glass-tile,.kit-card{
  border-radius:18px!important;
  background:var(--vault-glass)!important;
  border:1px solid var(--vault-hair)!important;
  box-shadow:0 18px 40px -22px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.06)!important;
  transition:transform .35s var(--vault-ease),border-color .3s var(--vault-ease),box-shadow .3s var(--vault-ease)!important;
}
.pill{padding:6px!important;background:var(--vault-glass)!important}
.pill > *{position:relative;z-index:1}
.pill::before{display:none!important}
.pill::after{display:none!important}
.pill .ico,.pill .kick,.pill h2,.pill p,.pill .mini,.pill .go{padding-left:22px;padding-right:22px}
.pill .ico{margin-top:22px}
.pill h2{font-family:var(--vault-font-display)!important}
.pill .go{padding-bottom:22px;display:inline-flex}
/* inner core */
.pill::after{
  content:""!important;display:block!important;
  position:absolute!important;inset:0;border-radius:14px;
  background:linear-gradient(180deg,#15151b,#0c0c11);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.08);
  z-index:0!important;opacity:1!important;width:auto!important;height:auto!important;
  top:0!important;right:0!important;left:0!important;bottom:0!important;filter:none!important;
}
.pill:hover{transform:translateY(-5px)!important;border-color:rgba(233,196,106,.55)!important}

.mq-card{border-radius:14px!important;padding:4px!important;background:var(--vault-glass)!important;position:relative;overflow:hidden}
.mq-card img{border-radius:10px!important;aspect-ratio:5/7;object-fit:contain!important;background:#0c0c11}
.mq-card::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.16) 50%,transparent 62%);background-size:240% 100%;background-position:240% 0;transition:background-position .9s var(--vault-ease);pointer-events:none;mix-blend-mode:overlay;border-radius:14px}
.mq-card:hover{transform:translateY(-5px)!important;border-color:rgba(233,196,106,.55)!important}
.mq-card:hover::after{background-position:-240% 0}

/* Price/change colors */
.spark .u,.up,.is-up,[data-change-pos]{color:var(--vault-emerald)!important}
.spark .d,.down,.is-down,[data-change-neg]{color:var(--vault-ruby)!important}

/* Eyebrow pill */
.eyebrow,.kick,.triad-head .k{font-family:var(--vault-font-mono)!important;letter-spacing:.2em!important;text-transform:uppercase!important}
.eyebrow{background:var(--vault-glass)!important;border:1px solid var(--vault-hair)!important;color:var(--vault-dim)!important;border-radius:9999px!important}
.eyebrow .b{background:var(--vault-emerald)!important;box-shadow:0 0 10px var(--vault-emerald)!important}

/* ============================================================
   FOOTER — Vault skin (links + legal copy untouched)
   ============================================================ */
.is-foot{background:#04050A!important;border-top:1px solid var(--vault-hair)!important;font-family:var(--vault-font-body)!important;color:var(--vault-faint)!important}
.is-foot-nav a{font-family:var(--vault-font-display)!important;color:var(--vault-dim)!important;letter-spacing:0}
.is-foot-nav a:hover{color:var(--vault-gold)!important;background:rgba(255,255,255,.05)!important}
.is-foot-disc{font-family:var(--vault-font-body)!important;color:var(--vault-faint)!important}
.is-foot-disc b{color:var(--vault-dim)!important}
.is-foot-copy{font-family:var(--vault-font-mono)!important;color:var(--vault-faint)!important}

/* ============================================================
   SCROLL-REVEAL helper (opt-in via .vault-reveal)
   ============================================================ */
.vault-reveal{opacity:0;transform:translateY(18px);filter:blur(4px);transition:opacity .8s var(--vault-ease),transform .8s var(--vault-ease),filter .8s var(--vault-ease)}
.vault-reveal.is-in{opacity:1;transform:none;filter:none}
@media(prefers-reduced-motion:reduce){.vault-reveal{opacity:1;transform:none;filter:none;transition:none}}

/* Ensure the floating nav doesn't get its background painted by the old inline rules */
header.is-nav::before,header.is-nav::after{display:none!important}

/* Page background — kill old radials on home so Vault palette shows through */
.wrap{position:relative}

/* ============================================================
   FULL-WIDTH DESKTOP FRAME (visual override)
   Widens the global page frame on large screens so content
   fills the viewport instead of sitting in a ~1120/1280px
   column. Mobile (<1280px) is untouched. Card grids gain
   columns rather than stretching each tile wider.
   Uses parent-relative max-widths (no vw) per the
   full-bleed overflow invariant.
   ============================================================ */
@media (min-width:1280px){
  /* Shared content containers across home + every static page */
  html body .wrap,
  html body .is-foot-in,
  html body .is-catnav-in, html body .is-catdesc,
  html body .pcx-in, html body .pcx-sec,
  html body #aotv-bar .aotv-bar-in,
  html body .wn-strip, html body .ev-wrap,
  html body .ticker,
  html body .nav-in{
    max-width:1680px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:clamp(24px,3vw,40px) !important;
    padding-right:clamp(24px,3vw,40px) !important;
    box-sizing:border-box;
  }
  /* Ticker has no internal padding — it clips a wider track */
  html body .ticker{padding-left:0 !important;padding-right:0 !important;}

  /* Floating nav island widens to match, keeps centered island look */
  html body header.is-nav .is-nav-in{
    max-width:min(1640px, calc(100% - 40px)) !important;
  }

  /* Card grids: add MORE columns to fill space (auto-fill, 5:7 art preserved by tiles) */
  html body .chase-grid{
    grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)) !important;
    gap:14px !important;
  }
}
@media (min-width:1600px){
  html body .chase-grid{
    grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)) !important;
    gap:16px !important;
  }
}
@media (min-width:1920px){
  html body .chase-grid{
    grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)) !important;
  }
}


/* === White-plate product photo rounding (site-wide) ===
   TCGplayer's `_in_NxN.jpg` product shots are on white plates.
   When placed in dark Vault tiles their square corners clash with
   the rounded container. Round the plate to ~12–14px everywhere. */
:where(img[src*="tcgplayer-cdn.tcgplayer.com/product/"][src*="_in_"]),
:where(img.is-prod-plate),
:where(img.product-plate){
  border-radius:12px;
  overflow:hidden;
}

/* ============================================================
   InkSight — Shared Motion Layer (premium, accessible)
   Reveal classes are gated on body.reveal-ready so the hidden
   state only applies AFTER motion.js has run. If the script
   never loads (or prefers-reduced-motion is set), elements
   render statically. We animate only opacity + transform.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  body.reveal-ready :where(main > section, [data-reveal], .reveal) {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity .7s cubic-bezier(.32,.72,0,1),
      transform .7s cubic-bezier(.32,.72,0,1);
  }
  body.reveal-ready :where(main > section, [data-reveal], .reveal).is-inview {
    opacity: 1;
    transform: none;
  }
  /* Never hide carousels / marquees / nav / bespoke hero stacks. */
  body.reveal-ready :where(.no-reveal, [data-no-reveal],
    .pkl-pack, .pkl-rip, .pkl-stage,
    .aotv-hero, .pf-hero, .pf-feat,
    .iq-stage, .iq-orb, .iq-confetti,
    .mkc-list, .ctile-row, .mkt-row,
    .ticker, .marquee, .is-nav, .yt-facade) {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Premium hover micro-interactions (pointer + no reduced motion only). */
@media (hover:hover) and (prefers-reduced-motion: no-preference) {
  :where(.vp-card, .gtile, .ctile, .mkc-card, .feature-card,
         .pcx-card, .ftile, .ptile, .ltile, .stile) {
    transition:
      transform .35s cubic-bezier(.32,.72,0,1),
      box-shadow .35s cubic-bezier(.32,.72,0,1);
  }
  :where(.vp-card, .gtile, .ctile, .mkc-card, .feature-card,
         .pcx-card, .ftile, .ptile, .ltile, .stile):hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 44px -22px rgba(0,0,0,.6);
  }
  /* CTA press feedback */
  :where(.btn, a.btn, button.btn, .cta, .ink-cta, .vp-btn) {
    transition: transform .18s cubic-bezier(.32,.72,0,1);
  }
  :where(.btn, .cta, .ink-cta, .vp-btn):active { transform: scale(.98); }
  /* Subtle arrow nudge for CTAs containing a trailing arrow glyph */
  :where(.cta, .vp-btn, .btn).has-arrow > .arrow,
  :where(a.cta, a.vp-btn, a.btn) :where(.arrow, [data-arrow]) {
    display: inline-block;
    transition: transform .25s cubic-bezier(.32,.72,0,1);
  }
  :where(a.cta, a.vp-btn, a.btn):hover :where(.arrow, [data-arrow]) {
    transform: translateX(3px);
  }
}