/* ===== Theme: Washi & Hanko · variant A "Indigo Ink" (#3b2fc9) =====
   From /workspace/preview-blue/a/theme.css (theme-3-blue-a.css), mapped onto the base variables in styles.css.
   Palette + promo-card touches only. Load AFTER styles.css. Headings use self-hosted DM Serif Display (SIL OFL). */
@font-face{font-family:"DM Serif Display";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/dm-serif-display-latin.woff2?v=3") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --bg:#faf8f4; --bg2:#f2eee6; --card:#ffffff; --line:#e6e0d5; --text:#1a1a1a; --muted:#5e5a53; --fine:#5e5a53;
  --accent:#3b2fc9; --accent-hover:#2c2399; --accent-ink:#ffffff; --accent-tint:#ecebfb; --nav-bg:rgba(250,248,244,.92);
  --ok:#15803d; --media-bg:#f4f1ec; --pill-bg:#f2eee6; --pill-ink:#3d3a35; --body-ink:#3d3a35;
  /* channel buttons: eBay solid black · Mercari black outline · PayPal yellow · site CTAs indigo */
  --ebay-bg:#1a1a1a; --ebay-ink:#ffffff; --ebay-hover:#000000;
  --mercari-bg:#ffffff; --mercari-line:#1a1a1a; --mercari-ink:#1a1a1a; --mercari-hover:rgba(26,26,26,.05);
  --paypal-bg:#ffc439; --paypal-hover:#f2ba36; --paypal-ink:#111111;
  --head-font:"DM Serif Display",Georgia,"Times New Roman",serif;
  --foil:linear-gradient(90deg,#3b2fc9,#38bdf8,#a78bfa,#3b2fc9);
  --holo:linear-gradient(115deg,rgba(59,47,201,0) 0%,rgba(59,47,201,.55) 22%,rgba(56,189,248,.55) 45%,rgba(167,139,250,.5) 68%,rgba(59,47,201,0) 100%);
  --radius:14px;
}
h1,h2{font-weight:400;letter-spacing:-.01em}
h1{font-size:clamp(2.05rem,5.6vw,3.4rem)}
@media(max-width:719px){h1{font-size:2rem}}

/* nav: thin foil edge (the star stamp is drawn inside logo.svg) */
.nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--foil);opacity:.55;pointer-events:none}
.nav-links a:hover{color:var(--accent)}
.btn-ghost{border-color:#cfc7b8} .btn-ghost:hover{border-color:var(--accent);color:var(--accent);background:transparent}

/* hero: washi paper + soft shadowy indigo glow + faint holo sheen */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(760px 420px at 88% 8%,rgba(59,47,201,.13),transparent 65%),
  radial-gradient(520px 320px at 4% 100%,rgba(59,47,201,.07),transparent 70%),
  linear-gradient(180deg,#f6f1e8 0%,#faf8f4 100%)}
.hero::before{content:"";position:absolute;inset:-20% -10%;background:var(--holo);opacity:.10;transform:rotate(-4deg);pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 70%);mask-image:linear-gradient(90deg,transparent 30%,#000 70%)}
.hero-inner{position:relative}
.eyebrow{letter-spacing:.18em}
.trust li{background:rgba(255,255,255,.8)}
.trust .ic{color:var(--accent)} .trust .star{color:var(--accent)}

/* listing = trading-card frame: indigo hairline, foil strip on top, holo shimmer on hover */
.card{position:relative;border:1px solid rgba(59,47,201,.22);border-radius:16px;box-shadow:0 1px 2px rgba(26,26,26,.05),0 10px 26px rgba(59,47,201,.08)}
.card::before{content:"";position:absolute;left:16px;right:16px;top:0;height:3px;border-radius:0 0 3px 3px;background:var(--foil);opacity:.8;z-index:1}
.card::after{content:"";position:absolute;inset:0;border-radius:16px;pointer-events:none;background:var(--holo);opacity:0;transition:opacity .25s;mix-blend-mode:soft-light}
.card:hover::after{opacity:.35}
.thumb{border:1px solid var(--line)}
.badge{border:1px solid rgba(59,47,201,.25)}
.badge:not(.badge-live)::before{content:"★";color:var(--accent);margin-right:5px}
.badge-live{border-color:transparent}
.placeholder{background:repeating-linear-gradient(135deg,#f2eee6 0 12px,#ece6db 12px 24px)}
.ph-slab{border-color:#cfc7b8;background:linear-gradient(180deg,#ffffff,#f6f2ea)}
.ph-slab::before{background:var(--accent);opacity:.9}
.pill-grade{background:var(--accent-tint);color:#2c2399}
.link:hover{color:var(--accent-hover)}
.logo-img{height:50px} @media(max-width:719px){.logo-img{height:44px}}

/* ===== T-A usability fixes (Oct 27 audit): same colors, clearer outlines, bigger tap targets, less scrolling on phones ===== */
/* outline buttons, filter pills and Menu: border was 1.24–1.58:1 against the cream (hard to see as buttons); now 3.6:1 */
.btn-ghost,.game-tab,.menu-btn{border-color:#8a8274}
.game-tab{border-width:1.5px}
.game-tab[aria-current]{border-color:var(--accent)}
/* one "Shop" in the nav: the plain "Shop" link sat right next to the "Shop cards" button */
.nav-links a[href$="#shop"]:not(.nav-cta){display:none}
/* small labels: nothing under ~12.5px */
.eyebrow{font-size:.8rem}
.game-tab .count{font-size:.78rem}
.pill{font-size:.8rem}
.feat-label{font-size:.82rem}
/* whole eBay-feedback pill is tappable, not just the 22px-tall text */
.trust li{position:relative}
.trust li a::after{content:"";position:absolute;inset:0;border-radius:999px}
@media(max-width:719px){
  .menu-btn{height:44px}
  .announce{font-size:.8rem}
  .announce-close{width:44px;height:44px;right:4px}
  .trust li{min-height:44px;font-size:.84rem}
  /* "Ships in 1–2 business days" is already in the bar at the very top: one fewer row before the cards */
  .trust li:nth-child(2){display:none}
}
@media(max-width:639px){
  #game-tiles .t-meta{font-size:.8rem}
  .badge{font-size:.76rem}
  /* filter pills: one swipeable row (44px) instead of a 4-row block (200px) */
  #game-tabs.game-tabs,#game-tabs:has(> :nth-child(5)){display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;margin:0 -20px 14px;padding:0 20px 2px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  #game-tabs::-webkit-scrollbar{display:none}
  #game-tabs .game-tab,#game-tabs:has(> :nth-child(5)) .game-tab{flex:0 0 auto;white-space:nowrap;padding:8px 14px}
  /* footer links: 44px tall tap areas */
  .footer-links{gap:4px 18px}
  .footer-links a{display:inline-flex;align-items:center;min-height:44px}
  .ebay-cats a{display:inline-flex;align-items:center;min-height:44px}
}