*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Modern Industrial Tech / Developer Dashboard palette — monochrome-first
     (Vercel/Linear-style): white is the one "hardware accent" reserved for
     primary actions, everything else is neutral slate/gray. Color is spent
     only where it carries real meaning — platform tags, rarity tiers,
     condition dots — never on generic chrome. */
  --bg:#0D0F12;
  --card-bg:#161A21;
  --card-bg-hover:#1C212A;
  --off:#12151A;
  --stone:#2A2E36;
  --white:#ffffff;
  --ink:#ffffff;
  --ink2:#C7CBD1;
  --ink3:#9CA3AF;
  --accent:#ffffff;
  --accent-lt:rgba(255,255,255,.08);
  --accent-soft:#C7CBD1;
  --stripe:#ffffff;
  --rust:#F87171;
  --rust-lt:rgba(248,113,113,.12);
  --border:rgba(255,255,255,.04);
  --border-hover:rgba(255,255,255,.15);
  --r:6px;
  --r-sm:4px;
  --shadow-md:0 8px 32px rgba(0,0,0,.4);
  --focus-ring:0 0 0 3px rgba(255,255,255,.3);
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-mono:"SF Mono",Consolas,Menlo,monospace;
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;
}
.skip-link{
  position:absolute;left:12px;top:-48px;background:#fff;color:var(--bg);padding:10px 18px;
  border-radius:var(--r-sm);z-index:1000;text-decoration:none;font-size:14px;transition:top .15s;
}
.skip-link:focus{top:12px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body{font-family:var(--font-sans);background:var(--bg);color:var(--ink);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}

/* NAV */
nav{position:sticky;top:0;z-index:100;background:rgba(13,15,18,.85);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.nav-inner{max-width:1120px;margin:0 auto;padding:0 28px;height:68px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;cursor:pointer}
.logo-slot{border:2px solid var(--accent);border-radius:4px;width:20px;height:26px;position:relative;flex-shrink:0}
.logo-slot::after{content:'';position:absolute;top:5px;left:4px;width:9px;height:4px;background:var(--accent);border-radius:1px}
.logo-text{line-height:1.05}
.logo-title{font-weight:700;font-size:15px;letter-spacing:-.3px;color:var(--ink);font-family:var(--font-mono)}
.logo-sub{font-weight:500;font-size:9px;letter-spacing:2px;color:var(--ink3);font-family:var(--font-mono)}
.nav-links{display:flex;gap:32px;list-style:none}
.nav-links a{color:var(--ink2);text-decoration:none;font-size:14px;transition:color .15s}
.nav-links a:hover{color:var(--ink)}
.cart-btn{display:flex;align-items:center;gap:8px;background:#fff;color:var(--bg);border:none;padding:9px 20px;border-radius:var(--r-sm);font-size:14px;font-weight:500;cursor:pointer;font-family:var(--font-sans);transition:background .15s}
.cart-btn:hover{background:#E5E7EB}
.cart-count{background:var(--bg);color:#fff;font-size:11px;font-weight:700;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;min-width:20px}
.nav-right{display:flex;align-items:center;gap:10px}
.free-ship-badge{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--ink2);white-space:nowrap}
.free-ship-badge i{color:var(--ink3);font-size:15px}
@media(max-width:560px){.free-ship-badge span{display:none}}
.hamburger-btn{display:none;background:none;border:none;cursor:pointer;color:var(--ink);font-size:22px;padding:6px;align-items:center;justify-content:center;line-height:1}
.mobile-menu{display:none;flex-direction:column;background:var(--card-bg);border-top:1px solid var(--border);max-height:75vh;overflow-y:auto}
.mobile-menu a{padding:13px 28px;color:var(--ink2);text-decoration:none;font-size:15px;border-bottom:1px solid var(--border)}
.mobile-menu a:last-child{border-bottom:none}
.mobile-menu.open{display:flex}
.mobile-menu-label{padding:12px 28px 6px;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--ink3)}
/* Collapsible platform list in the mobile menu — a native <details> instead
   of 24 links always shown, so the menu isn't a huge scroll on its own. */
.mobile-submenu{border-bottom:1px solid var(--border)}
.mobile-submenu summary{padding:13px 28px;color:var(--ink2);font-size:15px;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between}
.mobile-submenu summary::-webkit-details-marker{display:none}
.mobile-submenu summary::after{content:'\276F';font-size:12px;color:var(--ink3);transition:transform .2s;transform:rotate(90deg)}
.mobile-submenu[open] summary::after{transform:rotate(-90deg)}
.mobile-submenu a{padding:11px 28px 11px 40px;font-size:14px;background:var(--off)}

.search-suggest{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--card-bg);border:1px solid var(--border-hover);border-radius:var(--r);box-shadow:0 12px 28px rgba(0,0,0,.4);overflow:hidden;z-index:60;max-height:340px;overflow-y:auto}
.search-suggest.open{display:block}
.suggest-item{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;text-align:left;border-bottom:1px solid var(--border)}
.suggest-item:last-child{border-bottom:none}
.suggest-item:hover,.suggest-item.hl{background:var(--off)}
.suggest-img{width:32px;height:32px;border-radius:6px;background:var(--off);flex-shrink:0;object-fit:cover}
.suggest-info{flex:1;min-width:0}
.suggest-title{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.suggest-meta{font-size:11px;color:var(--ink3)}
.suggest-empty{padding:14px;font-size:13px;color:var(--ink3);text-align:center}

/* SEARCH BAR */
.search-bar{position:relative;margin-bottom:20px}
.search-bar i{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--ink3);font-size:16px}
.search-bar input{width:100%;padding:12px 16px 12px 42px;border:1px solid var(--border);border-radius:var(--r-sm);font-family:var(--font-sans);font-size:14px;color:var(--ink);background:var(--card-bg)}
.search-bar input:focus{outline:none;border-color:var(--border-hover)}
.search-bar input::placeholder{color:var(--ink3)}

/* SORT — now shares a row with the search bar, sitting just above the
   game listings instead of the search bar living far up near the header. */
.sort-filter-row{display:flex;gap:12px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.sort-filter-row .search-bar{flex:1;min-width:220px;margin-bottom:0}
.sort-control{display:flex;align-items:center;gap:8px;background:var(--off);border:1px solid var(--border);border-radius:var(--r-sm);padding:8px 16px;color:var(--ink2);font-size:13px}
.sort-control i{font-size:15px;color:var(--ink3)}
.sort-control select{border:none;background:none;font-family:var(--font-sans);font-size:13px;color:var(--ink);outline:none;cursor:pointer}

/* PAGE HEADER — the hero content (heading, Konami code, tagline) is centered
   within its column; on a wide screen, left-aligning short text/controls in
   an already-centered column reads as lopsided, so the hero specifically
   gets centered content instead of just a centered container. */
.page-head{max-width:1120px;margin:0 auto;padding:48px 28px 8px;text-align:center}
.page-head p{color:var(--ink2);font-weight:300}

/* PS1 MEMORY CARD MANAGER HERO — a compact pastiche, not a full recreation:
   a metallic beveled panel on a dark CRT-ish backdrop, thick pixel font,
   tiny hand-built pixel icons of retro storage media, and the Konami-code
   easter egg restyled as PS1 face-button caps (green/blue/red) instead of
   generic key chips. */
.ps1-hero{position:relative;padding:28px 16px;border-radius:10px;overflow:hidden;background:radial-gradient(ellipse at center,#16181d 0%,#0b0c0f 75%)}
.ps1-hero::before{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0px,rgba(255,255,255,.035) 1px,transparent 1px,transparent 3px);mix-blend-mode:overlay}
.ps1-hero::after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 80px rgba(0,0,0,.65)}
.ps1-panel{position:relative;z-index:1;max-width:820px;margin:0 auto;background:linear-gradient(180deg,#e2e2e6 0%,#a8a8b0 45%,#8c8c94 100%);border-radius:8px;padding:3px;box-shadow:0 6px 20px rgba(0,0,0,.5)}
.ps1-panel-inner{background:linear-gradient(180deg,#1c1d20,#101113);border-radius:6px;padding:22px 20px 18px;border:2px solid #0a0a0c}
.ps1-gold-bar{height:5px;border-radius:2px;margin-bottom:16px;background:linear-gradient(180deg,#f4da76,#c9a227);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 2px 3px rgba(0,0,0,.4)}
.ps1-headline{font-family:'Press Start 2P',monospace;font-size:17px;line-height:1.9;color:#fff;text-shadow:0 0 6px rgba(255,255,255,.35),2px 2px 0 rgba(0,0,0,.6);letter-spacing:.5px;margin-bottom:16px}
.ps1-headline .accent{color:#f4da76}

.ps1-icon-row{display:flex;justify-content:center;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.ps1-icon-slot{width:34px;height:34px;background:linear-gradient(180deg,#26282d,#151619);border:1px solid #38393f;border-radius:4px;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
.ps1-icon-slot svg{width:20px;height:20px;shape-rendering:crispEdges}

/* KONAMI CODE — playful retro flourish, restyled as PS1 button caps */
.konami-code{display:flex;flex-direction:column;align-items:center;gap:10px;margin:4px 0 2px}
.konami-keys{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.konami-keys .key{font-family:'Press Start 2P',monospace;font-size:12px;color:#fff;border-radius:6px;padding:7px 9px;min-width:14px;text-align:center;box-shadow:0 2px 0 rgba(0,0,0,.25);animation:keyCycle 4.2s linear infinite;animation-delay:calc(var(--i) * .18s)}
.konami-keys .key-letter{min-width:30px;padding:7px 11px;border-radius:50%;animation:none}
/* B / A / Start map to the three classic PS1 face-button colors. */
.konami-keys .key-b{background:linear-gradient(180deg,#5b8fe0,#2a5db8);border:1px solid #173a7a}
.konami-keys .key-a{background:linear-gradient(180deg,#e05b5b,#b83030);border:1px solid #7a1717}
.konami-keys .key-start{background:linear-gradient(180deg,#5bbf6a,#2f8f3f);border:1px solid #1c5a26;color:#fff;border-radius:6px}
@keyframes keyCycle{
  0%,100%{background:#4b5320}
  33%{background:#5a5f52}
  66%{background:#2b2b28}
}
.konami-tagline{font-family:'Press Start 2P',monospace;font-size:11px;color:var(--accent);letter-spacing:.5px;line-height:1.8;animation:pulseText 1.8s ease-in-out infinite}
@keyframes pulseText{0%,100%{opacity:1}50%{opacity:.5}}
@media(max-width:640px){
  /* Trim vertical padding/margins throughout — the panel read too tall
     ("fat") at phone widths relative to its width. */
  .ps1-hero{padding:16px 10px}
  .ps1-panel-inner{padding:14px 14px 12px}
  .ps1-gold-bar{margin-bottom:10px;height:4px}
  .ps1-headline{font-size:13px;margin-bottom:10px}
  .ps1-icon-row{margin-bottom:10px;gap:6px}
  .ps1-icon-slot{width:26px;height:26px}
  .ps1-icon-slot svg{width:15px;height:15px}
  .konami-code{gap:6px}
  .konami-keys .key{font-size:10px;padding:6px 7px}
  .konami-tagline{font-size:9.5px}
}
@media(max-width:480px){
  .ps1-hero{padding:12px 8px}
  .ps1-panel-inner{padding:12px 10px 10px}
  .ps1-headline{font-size:11px;line-height:1.8;margin-bottom:8px}
  .ps1-icon-row{margin-bottom:8px;gap:5px}
  .ps1-icon-slot{width:22px;height:22px}
  .ps1-icon-slot svg{width:13px;height:13px}
  /* Force one line on phones — shrink instead of wrapping to a second row. */
  .konami-keys{flex-wrap:nowrap;gap:3px}
  .konami-keys .key{font-size:7px;padding:5px 4px;min-width:9px;border-radius:4px}
  .konami-keys .key-letter{min-width:16px;padding:5px 5px}
}

/* TRUST BAR — now the very top of the page, above the nav/logo, centered
   rather than left-aligned; wraps to multiple lines on narrow screens
   instead of horizontal-scrolling (which doesn't play well with centering). */
.trust-bar{background:var(--off);border-bottom:1px solid var(--border)}
.trust-inner{max-width:1120px;margin:0 auto;padding:10px 28px;display:flex;align-items:center;justify-content:center}
.trust-track{display:flex}
/* .trust-set appears twice in the HTML (second copy aria-hidden) — on
   desktop only the first is shown, centered like a normal row. margin-right
   is the gap between items AND the seam gap where the loop repeats, so both
   read identically once it's animating on mobile. */
.trust-set{display:flex;align-items:center;gap:28px}
.trust-set:nth-of-type(2){display:none}
/* Mobile: a slow, continuously auto-scrolling marquee instead of wrapping
   to multiple rows or requiring a manual swipe. translateX(-50%) always
   lands exactly on the second (identical) set since margin-right gives both
   sets the same total width, so the loop has no visible seam beyond the
   intentional extra breathing room before it repeats. */
@media(max-width:640px){
  .trust-inner{justify-content:flex-start;overflow:hidden}
  .trust-set{margin-right:48px}
  .trust-set:nth-of-type(2){display:flex}
  .trust-track{width:max-content;animation:trustScroll 32s linear infinite}
}
@keyframes trustScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.trust-item{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink2);white-space:nowrap}
.trust-item i{color:var(--ink3);font-size:16px}

/* SHOP */
.shop{max-width:1120px;margin:0 auto;padding:40px 28px 60px}
.shop-h1{font-size:22px;font-weight:700;color:var(--ink);letter-spacing:-.3px;margin:0 0 6px}
.shop-h1-sub{color:var(--ink2);font-weight:300;font-size:14px;margin:0 0 24px}

/* SHOWCASE ROW — standalone promo cards (Bundle Deal, Price Match), each
   full-width and self-contained instead of slides in a carousel. */
.showcase-row{max-width:1120px;margin:32px auto 0;padding:0 28px;display:flex;flex-direction:column;gap:16px}
/* justify-content was space-between, which pinned the thumbnails to the
   far edge of the card and stretched .showcase-text to fill all the space
   between — on a wide desktop card that left a big dead gap in the middle.
   Content now just hugs together with a fixed gap instead. */
.showcase-card{background:var(--off);border:1px solid var(--border);border-radius:var(--r);padding:24px 28px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.showcase-text{flex:0 1 460px;min-width:220px}
.showcase-eyebrow{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);margin-bottom:6px}
.showcase-title{font-size:24px;font-weight:800;letter-spacing:-.4px;margin-bottom:6px}
.showcase-sub{font-size:13px;color:var(--ink2);line-height:1.5;margin-bottom:16px;max-width:420px}
.showcase-btn{background:#fff;color:var(--bg);border:none;padding:10px 18px;border-radius:var(--r-sm);font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font-sans);transition:transform .15s;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.showcase-btn:hover{transform:translateY(-1px)}
.showcase-thumbs{display:flex;gap:10px;flex-shrink:0}
.showcase-thumb{width:64px;height:64px;border-radius:var(--r-sm);overflow:hidden;background:var(--card-bg);flex-shrink:0}
.showcase-thumb img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:640px){.showcase-card{padding:20px}.showcase-title{font-size:20px}.showcase-thumbs{width:100%;justify-content:flex-start}}
/* Dark-mode "chip" pattern: inactive = a low-opacity tint of the tier's hue
   over the card background with the bright hue as text; active = the solid
   bright hue as background. Keeps each tier's color identity while staying
   legible against the new dark-slate page. */
.tier-pill{display:inline-flex;align-items:center;gap:5px;border-color:transparent}
.tier-pill.common{background:rgba(156,163,175,.15);color:#9CA3AF}
.tier-pill.common.active{background:#9a9a94;color:#0D0F12}
.tier-pill.uncommon{background:rgba(46,160,67,.15);color:#4ADE80}
.tier-pill.uncommon.active{background:#2ea043;color:#fff}
.tier-pill.rare{background:rgba(47,111,237,.15);color:#60A5FA}
.tier-pill.rare.active{background:#2f6fed;color:#fff}
.tier-pill.elite{background:rgba(139,92,246,.15);color:#A78BFA}
.tier-pill.elite.active{background:#8b5cf6;color:#fff}
.tier-pill.legendary{background:rgba(240,151,58,.15);color:#FBBF6C}
.tier-pill.legendary.active{background:#f0973a;color:#0D0F12}
.tier-pill.relic{background:rgba(224,69,92,.15);color:#F87171}
.tier-pill.relic.active{background:#e0455c;color:#fff}
.collector-pill{display:inline-flex;align-items:center;gap:5px;background:rgba(232,200,96,.12);color:#e8c860;border-color:transparent}
.collector-pill:hover{background:rgba(232,200,96,.2)}
.collector-pill.active{background:#fff;color:var(--bg)}

/* BARGAIN BIN / COLLECTOR / S-RANK badges on cards — stacked in one
   top-right column so a game that carries more than one badge (e.g. a
   Collector's Pick that's also S-Rank) doesn't overlap itself. */
.badge-stack{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.badge-bargain{font-size:10px;font-weight:600;padding:3px 9px;border-radius:var(--r-sm);background:var(--stone);color:#fff;font-family:var(--font-mono)}
.badge-collector{font-size:10px;font-weight:600;padding:3px 9px;border-radius:var(--r-sm);background:#000;border:1px solid rgba(232,200,96,.3);color:#e8c860;display:flex;align-items:center;gap:4px}
/* bargain-note and game-notes are only rendered when they have something to
   show — cards size to their real content so short cards stay short. */
.bargain-note{background:var(--accent-lt);color:var(--ink2);font-size:11px;font-weight:600;padding:4px 10px;border-radius:var(--r-sm);margin-bottom:10px;display:inline-block;font-family:var(--font-mono)}
.game-notes{background:var(--off);color:var(--ink2);font-size:11px;font-style:italic;line-height:1.4;padding:6px 9px;border-radius:6px;margin-bottom:10px}
/* Public blurb about the game itself (distinct from Notes, which is about
   this specific copy's condition) — only shown in the quick-view modal;
   grid/S-Rank cards omit it entirely to stay short. */
.game-desc{color:var(--ink2);font-size:12px;line-height:1.5;margin-bottom:8px}
.stock-note{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--ink2);margin-bottom:12px}
.stock-note::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent-soft);flex-shrink:0}
.stock-note.stock-low{color:var(--rust)}
.stock-note.stock-low::before{background:var(--rust)}

/* FILTERS */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.pill{background:var(--card-bg);border:1px solid var(--border);color:var(--ink2);font-size:13px;font-weight:500;padding:7px 16px;border-radius:var(--r-sm);cursor:pointer;white-space:nowrap;transition:all .15s;font-family:var(--font-sans)}
.pill:hover{background:var(--card-bg-hover);border-color:var(--border-hover);color:var(--ink)}
.pill.active{background:#fff;color:var(--bg);border-color:#fff}

/* PLATFORM CARDS — a wrapping grid instead of a horizontally-scrolling row,
   so every platform stays reachable without an off-screen overflow. */
.platform-label{font-size:12px;font-weight:700;color:var(--ink);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}
.platform-label-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.platform-label-row .platform-label{margin-bottom:0}
.shop-all-link{background:none;border:none;padding:0;font-family:var(--font-sans);font-size:12px;font-weight:600;color:var(--ink2);cursor:pointer;display:inline-flex;align-items:center;gap:3px;text-decoration:none;transition:color .15s}
.shop-all-link:hover{color:var(--ink)}
.shop-all-link i{font-size:13px}
.platform-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:10px;margin-bottom:32px;min-height:168px}
.platform-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--r-sm);padding:12px 8px;cursor:pointer;transition:all .15s;font-family:var(--font-sans);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;white-space:normal;color:var(--ink2)}
.platform-card:hover{background:var(--card-bg-hover);border-color:var(--border-hover);color:var(--ink)}
.platform-card.active{background:#fff;color:var(--bg);border-color:#fff}
.platform-card .plat-icon{font-size:22px;line-height:1}
.platform-card .plat-name{font-size:13px;font-weight:600;line-height:1.2}
.platform-card .plat-count{font-size:10.5px;font-weight:600;color:var(--ink2);background:var(--accent-lt);padding:2px 8px;border-radius:var(--r-sm)}
.platform-card.active .plat-count{background:rgba(13,15,18,.12);color:var(--bg)}
.popular-section{margin-bottom:32px}
.popular-section .platform-label i{color:var(--rust)}

/* PLATFORM SHELVES / S-RANK / SALE / RECENTLY SOLD — all now stacked
   single-column horizontal cards, same treatment as the main #gameGrid,
   shown only in the default "All platforms" browse view. */
.platform-shelf{margin-bottom:32px}
.shelf-row{display:flex;flex-direction:column;gap:12px}

.platform-swipe-hint{display:none;align-items:center;gap:6px;font-size:11px;color:var(--ink3);margin:-4px 0 24px}
.tier-disclaimer{font-size:11px;color:var(--ink3);margin:-8px 0 16px}

/* On narrow screens, the platform grid becomes a horizontally-swipeable
   row (touch scrolling makes this a natural gesture there, unlike on
   desktop where a mouse can't easily scroll sideways) — a brief nudge
   animation plus a text hint tell first-time visitors it's swipeable. */
@media (max-width:640px){
  .platform-grid{
    min-height:88px;
    display:flex;
    flex-wrap:nowrap;
    align-items:flex-start;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x proximity;
    margin-bottom:10px;
    padding-bottom:4px;
  }
  .platform-grid::-webkit-scrollbar{display:none}
  .platform-card{flex:0 0 auto;min-width:92px;scroll-snap-align:start}
  .platform-swipe-hint{display:flex}
  @keyframes platNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(-22px)}}
  .platform-grid.js-nudge{animation:platNudge .9s ease-in-out .5s 1}
}

/* GRID */
.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
/* Reserves space for the loading state so #gameGrid popping in from empty
   doesn't shove #platformShelves/footer/etc down all at once (was flagged
   as the #shop element's CLS source in Core Web Vitals). Only applies on
   shop.html — id selector, not the .game-grid class other sections share. */
#gameGrid{min-height:600px}
.grid-msg{grid-column:1/-1;text-align:center;color:var(--ink3);padding:60px 20px;font-size:15px;display:flex;flex-direction:column;align-items:center;gap:4px}
.grid-msg i{font-size:28px}
.grid-err{color:var(--rust)}
.spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.game-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;transition:all .2s cubic-bezier(0.16, 1, 0.3, 1);display:flex;flex-direction:column;cursor:pointer}
.game-card:hover{background:var(--card-bg-hover);transform:translateY(-2px);border-color:var(--border-hover)}

/* MAIN BROWSE GRID + SALE / RECENTLY SOLD / S-RANK / CONTINUE SHOPPING —
   compact horizontal cards, single column, on mobile everywhere. On desktop
   these all go 2-up as the same horizontal card (JS renders horizontal:true
   unconditionally for these sections now). Platform Shelves is the one
   exception (see below) — it keeps its original 4-column "preview, see all"
   grid of full vertical cards, since that's a curated per-platform sampler,
   not a plain listing. */
#gameGrid,#saleRow,#recentlySoldRow,#popularGrid,#customGrid1,#customGrid2{display:flex;flex-direction:column;gap:12px}
@media(min-width:769px){
  .platform-shelf .shelf-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
  #gameGrid,#saleRow,#recentlySoldRow,#popularGrid,#customGrid1,#customGrid2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
  /* A lone item spans the full row but shouldn't stretch edge to edge —
     without a cap here, .game-info's flex:1 + space-between spreads price/
     badge/button across a ~1000px-wide card, leaving a huge dead gap next
     to the cover art. Cap width and center it instead. */
  #gameGrid .game-card.horizontal:only-child,
  #saleRow .game-card.horizontal:only-child,
  #recentlySoldRow .game-card.horizontal:only-child,
  #popularGrid .game-card.horizontal:only-child,
  #customGrid1 .game-card.horizontal:only-child,
  #customGrid2 .game-card.horizontal:only-child{grid-column:1 / -1;max-width:600px;margin:0 auto}
}
.game-card.horizontal{flex-direction:row;align-items:stretch}
.game-card.horizontal .game-img{width:84px;min-width:84px;aspect-ratio:5/7;height:auto}
.game-card.horizontal .game-info{flex:1;min-width:0;padding:12px 14px;display:flex;flex-direction:column;justify-content:space-between;gap:8px}
.hcard-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.hcard-top .game-title{margin-bottom:4px;-webkit-line-clamp:1}
.hcard-top .game-cond{margin-bottom:0}
.hcard-top .badge-stack{position:static;flex-direction:row;gap:4px;flex-shrink:0}
.hcard-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hcard-bundle-note{font-size:11px;font-weight:700;display:flex;align-items:center;gap:4px;margin:2px 0 8px;font-family:var(--font-mono)}
.hcard-bundle-note i{font-size:12px}
.game-card.horizontal .game-price{margin-bottom:0;font-size:18px}
.game-card.horizontal .add-btn{width:auto;padding:8px 18px;margin-top:0;flex-shrink:0}
/* Portrait box matching typical game case-front proportions (~5:7), with
   object-fit:contain so cover art is never cropped — a mismatched image
   just letterboxes against the background instead of losing edges. */
.game-img{background:var(--off);aspect-ratio:5/7;display:flex;align-items:center;justify-content:center;font-size:44px;color:var(--accent);position:relative;overflow:hidden}
.game-img img{width:100%;height:100%;object-fit:contain}
.badge-sold{position:absolute;top:10px;left:10px;font-size:10px;font-weight:600;padding:3px 9px;border-radius:var(--r-sm);background:var(--rust);color:#fff}
.game-img.is-sold i{color:#c9d6d1}
.game-info{padding:16px;display:flex;flex-direction:column;flex:1}
/* Reserve a fixed 2-line height so a wrapping title doesn't push this card's
   price/button lower than a card with a short single-line title next to it. */
.game-title{font-size:15px;font-weight:600;color:var(--ink);margin-bottom:3px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.game-plat{font-size:11px;color:var(--ink3);font-family:var(--font-mono);margin-bottom:10px}
.game-cond{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink2);margin-bottom:12px;font-family:var(--font-mono)}
.cond-info-btn{background:none;border:none;color:var(--ink3);cursor:pointer;padding:0;margin-left:2px;display:flex;align-items:center;font-size:13px;transition:color .15s}
.cond-info-btn:hover{color:var(--ink)}
.cond-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
/* Explicit hex per condition (not tied to the repurposed --accent/--stripe
   vars, which are now white) so each grade keeps a distinct identity. */
.c-gm{background:#8B7FFF}.c-ln{background:#2DD4BF}.c-vg{background:#5EEAD4}.c-g{background:#D4AF5A}.c-hs{background:var(--rust)}
.game-price{font-size:22px;font-weight:700;letter-spacing:-.4px;margin-bottom:14px;font-family:var(--font-mono)}
.game-price s{font-size:13px;color:var(--ink3);font-weight:400;margin-left:6px}
/* margin-top:auto pins the button to the bottom of every card — with
   Grid's default row-stretch, that means every "Add to cart" button in
   a row lines up at the exact same height, which reads as far more
   cohesive than letting the button float wherever a card's own content
   happens to end (the alternative tried before this). */
.add-btn{width:100%;background:#fff;color:var(--bg);border:none;padding:11px;border-radius:var(--r-sm);font-size:14px;font-weight:600;cursor:pointer;font-family:var(--font-sans);transition:all .15s;margin-top:auto}
.add-btn:hover{background:#E5E7EB;transform:translateY(-1px)}
.add-btn:disabled{background:var(--stone);color:var(--ink3);cursor:not-allowed;transform:none}

/* FOOTER */
footer{background:#000;color:#fff;padding:44px 28px 30px}
.footer-inner{max-width:1120px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.08)}
.footer-logo{display:flex;align-items:center;gap:9px}
.footer-logo-slot{border:2px solid var(--accent-soft);border-radius:4px;width:16px;height:21px;position:relative;flex-shrink:0}
.footer-logo-slot::after{content:'';position:absolute;top:4px;left:3px;width:7px;height:3px;background:var(--accent-soft);border-radius:1px}
.footer-logo-text{font-size:14px;font-weight:700;letter-spacing:-.2px}
.footer-logo-text span{display:block;font-size:8px;font-weight:500;letter-spacing:1.5px;color:var(--accent-soft)}
.footer-links{display:flex;gap:24px;flex-wrap:wrap}
.footer-links a{color:#888;font-size:13px;text-decoration:none;transition:color .15s}
.footer-links a:hover{color:#fff}
.footer-copy{max-width:1120px;margin:18px auto 0;font-size:12px;color:#5c5f5c}

/* CART DRAWER */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:200;opacity:0;pointer-events:none;transition:opacity .25s}
.overlay.open{opacity:1;pointer-events:all}
.drawer{position:fixed;right:0;top:0;bottom:0;width:420px;max-width:100vw;background:var(--card-bg);z-index:201;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:-4px 0 40px rgba(0,0,0,.5);border-left:1px solid var(--border-hover)}
.drawer.open{transform:translateX(0)}
.drawer-head{padding:24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.drawer-title{font-size:17px;font-weight:600}
.close-btn{background:var(--off);border:none;width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;color:var(--ink2);transition:background .15s;line-height:1}
.close-btn:hover{background:var(--stone)}
.drawer-body{flex:1;overflow-y:auto;padding:8px 24px}
.cart-empty{text-align:center;padding:64px 0;color:var(--ink3)}
.cart-empty-icon{font-size:44px;margin-bottom:14px;color:var(--accent-soft)}
.cart-empty p{font-size:15px}
.cart-item{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--border)}
.ci-img{width:58px;height:58px;background:var(--off);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--accent);flex-shrink:0;overflow:hidden}
.ci-img img{width:100%;height:100%;object-fit:cover}
.ci-info{flex:1;min-width:0}
.ci-title{font-size:14px;font-weight:500;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci-meta{font-size:11px;color:var(--ink3);font-family:var(--font-mono);margin-bottom:8px}
.ci-row{display:flex;align-items:center;justify-content:space-between}
.ci-qty{display:flex;align-items:center;gap:8px}
.qty-btn{width:24px;height:24px;border-radius:50%;border:1px solid var(--border);background:var(--card-bg-hover);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;color:var(--ink2);font-family:var(--font-sans);line-height:1}
.qty-btn:hover{border-color:var(--border-hover);color:var(--ink)}
.qty-num{font-size:13px;font-weight:600;min-width:16px;text-align:center;font-family:var(--font-mono)}
.ci-price{font-size:15px;font-weight:600;font-family:var(--font-mono)}
.rm-btn{background:none;border:none;color:var(--ink3);cursor:pointer;font-size:12px;padding:3px 8px;border-radius:var(--r-sm);font-family:var(--font-sans);transition:all .15s}
.rm-btn:hover{background:var(--rust-lt);color:var(--rust)}
.drawer-foot{padding:20px 24px;border-top:1px solid var(--border)}
.ship-zip-row{margin-bottom:14px}
.ship-zip-row label{display:block;font-size:12px;font-weight:600;color:var(--ink2);margin-bottom:5px}
.ship-zip-row .ship-zip-hint{font-weight:400;color:var(--ink3)}
.ship-zip-row input{width:100%;font-family:var(--font-sans);font-size:14px;padding:9px 11px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--off);color:var(--ink);outline:none;transition:border-color .15s}
.ship-zip-row input:focus{border-color:var(--border-hover)}
.sum-row{display:flex;justify-content:space-between;font-size:14px;color:var(--ink2);margin-bottom:7px}
.sum-total{display:flex;justify-content:space-between;font-size:17px;font-weight:700;padding-top:12px;border-top:1px solid var(--border);margin-bottom:18px;font-family:var(--font-mono)}
.checkout-btn{width:100%;background:#fff;color:var(--bg);border:none;padding:15px;border-radius:var(--r-sm);font-size:15px;font-weight:600;cursor:pointer;font-family:var(--font-sans);margin-bottom:10px;transition:background .15s;display:flex;align-items:center;justify-content:center;gap:8px}
.checkout-btn:hover{background:#E5E7EB}
.checkout-btn:disabled{background:var(--stone);color:var(--ink3);cursor:not-allowed}
.secure-note{text-align:center;font-size:12px;color:var(--ink3);margin-top:4px}

/* CONDITION GUIDE MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:400;opacity:0;pointer-events:none;transition:opacity .2s;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal-panel{background:var(--card-bg);border:1px solid var(--border-hover);border-radius:var(--r);max-width:520px;width:100%;max-height:85vh;overflow-y:auto;transform:translateY(12px) scale(.98);transition:transform .2s;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.modal-overlay.open .modal-panel{transform:translateY(0) scale(1)}
.modal-head{padding:22px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--card-bg);border-radius:var(--r) var(--r) 0 0}
.modal-title{font-size:17px;font-weight:600}
.modal-sub{font-size:13px;color:var(--ink3);margin-top:2px}
.modal-body{padding:8px 24px 24px}
.modal-section-label{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--accent);padding:16px 0 4px}
.modal-section-label-2{border-top:1px solid var(--border);margin-top:8px}
.cond-scope-note{display:flex;gap:8px;align-items:flex-start;background:var(--off);border-radius:var(--r-sm);padding:10px 12px;font-size:12.5px;color:var(--ink2);line-height:1.5;margin-bottom:4px}
.cond-scope-note i{margin-top:2px;color:var(--accent);flex-shrink:0}
.cond-entry{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--border)}
.cond-entry:last-child{border-bottom:none}
.cond-entry.highlight{background:var(--accent-lt);margin:0 -12px;padding:16px 12px;border-radius:var(--r-sm);border-bottom:none}
.cond-icon{width:36px;height:36px;border-radius:50%;background:var(--off);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--accent);font-size:16px}
.cond-entry.highlight .cond-icon{background:var(--card-bg-hover)}
.cond-name{font-size:14px;font-weight:600;margin-bottom:3px}
.cond-desc{font-size:13px;color:var(--ink2);line-height:1.6}

/* QUICK VIEW MODAL — reuses gameCardHTML's own markup as its body (with the
   description clamp lifted), so it stays visually identical to the grid card
   it came from, just bigger and with room to breathe. The close button gets
   its own small header row rather than floating over the image — the image
   already has a platform badge (top-left) and status badges (top-right), so
   there's no free corner for it, and .modal-panel's overflow-y:auto would
   clip a negatively-offset floating button anyway. */
.qv-panel{max-width:420px;padding:0}
.qv-head-bar{display:flex;justify-content:flex-end;padding:8px 8px 0}
.qv-panel .game-card{border:none;cursor:default}

.pricematch-panel{max-width:560px;padding:0}
.pricematch-head{justify-content:space-between;align-items:center;padding:16px 16px 0}
.pricematch-title{font-size:16px;font-weight:700}
#priceMatchFormContainer{padding:0 4px 4px}


.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--card-bg-hover);color:#fff;padding:12px 22px;border-radius:var(--r-sm);font-size:14px;font-weight:500;z-index:300;transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;gap:9px;pointer-events:none;white-space:nowrap;box-shadow:var(--shadow-md);border:1px solid var(--border-hover)}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast-check{background:#fff;color:var(--bg);width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;font-weight:700}

/* Scroll-to-top — mobile only (display:none overridden inside the mobile
   breakpoint below); the catalog is a long scroll on a phone screen. */
.scroll-top-btn{display:none;position:fixed;bottom:24px;right:18px;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--bg);border:none;box-shadow:var(--shadow-md);font-size:18px;align-items:center;justify-content:center;z-index:250;opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .2s,transform .2s}
.scroll-top-btn.show{opacity:1;pointer-events:auto;transform:translateY(0)}

@media(max-width:768px){
  .scroll-top-btn{display:flex}
  .nav-links{display:none}
  .hamburger-btn{display:flex}
  .footer-inner{flex-direction:column;align-items:flex-start}
  .drawer{width:100vw}
  .shop{padding:24px 14px 40px}
  .game-info{padding:12px}
  .game-title{font-size:13px}
  .game-plat{font-size:10px;margin-bottom:6px}
  .game-price{font-size:17px;margin-bottom:10px}
  .add-btn{padding:9px;font-size:12px}
  .bargain-note,.stock-note{font-size:10px;padding:3px 8px}
  .hcard-bundle-note{font-size:10px}
  /* iOS Safari auto-zooms on focusing any input under 16px, and doesn't always
     zoom back out cleanly on blur — keeping it at 16px prevents that entirely. */
  .search-bar input{font-size:16px}
  .sort-control select{font-size:16px}
}