/* ============================================================
   ARCANESTASH — SHARED STYLES
   Loaded by every page (index.html, profile.html, and every
   game-*.html page). Editing this file changes the look
   everywhere at once.
   ============================================================ */

:root{
  --bg:#11131F;
  --bg-elevated:#1A1D2E;
  --bg-elevated-2:#222538;
  --border:#2A2E45;
  --border-soft:#1F2233;
  --blue:#4F8EF7;
  --blue-dim:#3D74D6;
  --blue-soft:#1B2A4A;
  --teal:#3DD9C4;
  --teal-soft:#163530;
  --red:#F1554C;
  --red-soft:#2E1C1C;
  --text:#EEF0F7;
  --text-dim:#A2A6C2;
  --text-faint:#666A8A;
  --radius:10px;
  --radius-lg:16px;
  --shadow: 0 8px 24px rgba(0,0,0,0.4);
  --gap-page: 16px;
  --header-h: 56px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
::selection{background:var(--blue); color:#0A0E1A;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
.hidden{display:none !important;}

h1,h2,h3,h4{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  letter-spacing:0.01em;
  margin:0;
  text-transform:uppercase;
}
.mono{font-family:'JetBrains Mono',monospace;}

/* ============================================================
   HEADER — hamburger | logo+search | profile+basket
   Mobile: two rows if logo is shown (logo row, then search row
   below it, full width). Desktop: everything in one row.
   ============================================================ */
.topbar{
  position:sticky; top:0; z-index:40;
  background:rgba(17,19,31,0.96);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border-soft);
}
.topbar-inner{
  max-width:1280px; margin:0 auto;
  padding:10px var(--gap-page);
}
.topbar-row1{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}

.hamburger-btn{
  width:38px; height:38px; border-radius:8px; background:transparent;
  border:1px solid var(--border-soft); color:var(--text-dim); display:flex; align-items:center;
  justify-content:center; flex-shrink:0; padding:0;
}
.hamburger-btn:hover{border-color:var(--blue-dim); color:var(--blue); background:var(--bg-elevated);}

.desktop-nav{display:none; align-items:center; gap:2px; flex-shrink:0;}
.desktop-nav-link{
  display:flex; align-items:center; gap:7px; padding:8px 12px; border-radius:8px;
  color:var(--text-dim); font-size:13.5px; font-weight:600; background:transparent; border:none;
  white-space:nowrap;
}
.desktop-nav-link:hover{color:var(--text); background:var(--bg-elevated);}
.desktop-nav-link.active{color:var(--blue); background:var(--blue-soft);}
/* Promo Codes deliberately stands out from the rest of the nav —
   same amber/gold treatment as its admin-panel tab, so it reads as
   its own distinct thing rather than blending into Browse
   games/Bundles & packs/Guides. */
.nav-link-promo{color:#F5B942 !important;}
.nav-link-promo:hover{background:rgba(245,185,66,0.14) !important;}
.nav-link-promo.active{background:#F5B942 !important; color:#241a02 !important;}
.desktop-nav-link svg{flex-shrink:0; width:16px; height:16px;}

/* ---------- "Browse games" hover dropdown ---------- */
.desktop-nav-dropdown{position:relative;}
.games-dropdown-panel{
  position:absolute; top:100%; left:0; margin-top:4px; min-width:220px; max-height:340px; overflow-y:auto;
  background:var(--bg-elevated); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow);
  padding:6px; opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s ease; z-index:40;
}
.desktop-nav-dropdown.open .games-dropdown-panel{opacity:1; visibility:visible; transform:translateY(0);}
.games-dropdown-item{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px;
  color:var(--text-dim); font-size:13px; font-weight:600; text-decoration:none;
}
.games-dropdown-item:hover{background:var(--bg-elevated-2); color:var(--text);}
.games-dropdown-item-art{
  width:28px; height:28px; border-radius:6px; flex-shrink:0; background-size:cover; background-color:var(--bg);
}
.games-dropdown-loading{padding:10px 12px; font-size:12.5px; color:var(--text-faint);}

.brand{display:flex; align-items:center; gap:8px; cursor:pointer; min-width:0; flex-shrink:0;}
.brand-mark{
  width:30px; height:30px; border-radius:8px;
  background:linear-gradient(160deg, var(--blue) 0%, var(--blue-dim) 100%);
  display:flex; align-items:center; justify-content:center;
  color:#0A0E1A; font-family:'Barlow Condensed'; font-weight:800; font-size:16px;
  flex-shrink:0;
}
.brand-name{font-size:16px; letter-spacing:0.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.brand-name span{color:var(--blue);}

.header-icons{display:flex; align-items:center; gap:8px; flex-shrink:0; margin-left:auto;}
.currency-select{
  background:var(--bg-elevated); border:1px solid var(--border); color:var(--text-dim);
  height:38px; padding:0 10px; border-radius:10px; font-size:12.5px; font-weight:600;
  font-family:'JetBrains Mono'; cursor:pointer;
}
.currency-select:hover{border-color:var(--blue-dim); color:var(--text);}
.currency-select option{background:var(--bg-elevated); color:var(--text);}

/* Side-menu (mobile) currency row — full width and comfortably sized,
   matching the other menu rows below it, rather than the squeezed
   header version it's standing in for at this width. */
.side-menu-currency-row{padding:4px 4px 12px; border-bottom:1px solid var(--border-soft); margin-bottom:8px;}
.side-menu-currency-row .currency-select{width:100%; height:44px; font-size:14px; padding:0 12px;}

/* Below the desktop breakpoint, the currency switcher moves into the
   hamburger menu entirely (see .side-menu-currency-row above) instead
   of staying squeezed into the header-icons row alongside the coin
   badge, account button, and cart — that crowding is what was pushing
   the whole row onto its own line under the brand instead of fitting
   beside it. Removing it from that row outright is a more reliable
   fix than repeatedly shrinking everything else to try to make room. */
@media (max-width: 859px){
  #currency-switcher{display:none;}
}
.icon-btn{
  position:relative;
  width:38px; height:38px; border-radius:50%; background:var(--bg-elevated);
  border:1px solid var(--border); color:var(--text-dim); display:flex; align-items:center;
  justify-content:center; flex-shrink:0; padding:0;
}
.icon-btn:hover{border-color:var(--blue-dim); color:var(--blue);}
.icon-btn.signed-in{background:var(--blue-soft); border-color:var(--blue-dim); color:var(--blue);}
.icon-btn .badge{
  position:absolute; top:-4px; right:-4px; min-width:17px; height:17px; border-radius:9px;
  background:var(--blue); color:#0A0E1A; font-size:10px; font-weight:700; font-family:'JetBrains Mono';
  display:flex; align-items:center; justify-content:center; padding:0 4px; border:2px solid var(--bg);
}
.coin-balance-badge{
  display:flex; align-items:center; gap:5px; height:38px; padding:0 12px; border-radius:19px;
  background:rgba(245,185,66,0.1); border:1px solid #6B4E12; color:#F5B942;
  font-family:'JetBrains Mono'; font-size:13px; font-weight:700; text-decoration:none; flex-shrink:0;
  transition:background .15s ease, border-color .15s ease;
}
.coin-balance-badge::before{content:'◈'; font-size:12px;}
.coin-balance-badge:hover{background:rgba(245,185,66,0.18); border-color:#F5B942;}
/* Below the desktop breakpoint, the header-icons row (currency
   switcher + this badge + account + cart) has to fit next to the
   hamburger and brand on a much narrower line — this badge was the
   one new addition that pushed that row past fitting on one line,
   forcing the whole row to wrap onto its own line below the brand
   instead of sitting inline the way it used to with just 3 icons.
   Shrinking it down (smaller padding, no icon prefix, tighter font)
   reclaims enough width to fit again rather than wrapping. */
@media (max-width: 640px){
  .coin-balance-badge{padding:0 8px; font-size:11.5px; gap:0; height:32px;}
  .coin-balance-badge::before{display:none;}
}

/* ---------- search ----------
   Mobile: forced to its own full-width second row, below the
   logo/icons row. Desktop: sits inline between nav and icons. */
.search-wrap{position:relative; flex-basis:100%; order:3; margin-top:10px;}
.search-input-row{
  display:flex; align-items:center; gap:8px; background:var(--bg-elevated);
  border:1px solid var(--border); border-radius:24px; padding:0 14px; height:38px;
}
.search-input-row svg{flex-shrink:0; color:var(--text-faint);}
.search-input-row input{
  flex:1; background:transparent; border:none; color:var(--text); font-size:14px;
  font-family:'Inter'; outline:none; min-width:0; height:100%; padding:0;
}
.search-input-row input::placeholder{color:var(--text-faint);}
.search-clear-btn{
  background:transparent; border:none; color:var(--text-faint); padding:2px; flex-shrink:0;
  display:flex; align-items:center;
}
.search-clear-btn:hover{color:var(--text);}

.search-results{
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:50;
  background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); max-height:min(70vh, 460px); overflow-y:auto; overflow-x:hidden;
}
/* Desktop positioning (left/top/width) is set precisely via JS —
   see positionSearchResults() in shared.js — against the cart icon's
   actual measured position, rather than guessed here with a fixed
   min-width that can't account for how much the header has grown. */
.search-results-empty{padding:18px 16px; font-size:13px; color:var(--text-faint); text-align:center;}
.search-result-row{
  display:flex; align-items:center; gap:12px; padding:11px 14px; border-bottom:1px solid var(--border-soft);
}
.search-result-row:last-child{border-bottom:none;}
.search-result-row:hover{background:var(--bg-elevated-2);}
.search-result-thumb{
  width:34px; height:34px; border-radius:7px; flex-shrink:0;
  background:var(--bg-elevated-2); border:1px solid var(--border-soft);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.search-result-thumb-empty{background:transparent; border-color:transparent;}
.search-result-thumb img{max-width:75%; max-height:75%; width:auto; height:auto; object-fit:contain;}
.search-result-info{flex:1; min-width:0;}
.search-result-name{
  font-size:13.5px; font-weight:600; font-family:'Inter'; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.search-result-game{font-size:11.5px; color:var(--text-faint); font-family:'JetBrains Mono'; margin-top:1px;}
.search-result-price{font-size:13px; color:var(--blue); font-family:'JetBrains Mono'; font-weight:600; flex-shrink:0; text-align:right;}
.search-result-variant{display:block; font-size:9.5px; color:var(--text-faint); font-weight:400; text-transform:uppercase; letter-spacing:0.03em; margin-top:1px;}

/* ============================================================
   HAMBURGER SIDE MENU (left)
   ============================================================ */
.side-menu-overlay{
  position:fixed; inset:0; background:rgba(8,9,15,0.65); z-index:90;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.side-menu-overlay.open{opacity:1; pointer-events:auto;}
.side-menu{
  position:fixed; top:0; left:0; bottom:0; width:280px; max-width:84vw;
  background:var(--bg-elevated); border-right:1px solid var(--border-soft); z-index:91;
  transform:translateX(-100%); transition:transform .22s ease;
  display:flex; flex-direction:column; overflow-y:auto;
}
.side-menu.open{transform:translateX(0);}
.side-menu-head{
  display:flex; align-items:center; justify-content:space-between; padding:16px;
  border-bottom:1px solid var(--border-soft);
}
.side-menu-close{background:transparent; border:none; color:var(--text-faint); font-size:22px; padding:4px;}
.side-menu-body{padding:8px;}
.side-menu-link{
  display:flex; align-items:center; gap:12px; padding:12px 12px; border-radius:8px;
  color:var(--text-dim); font-size:14.5px; font-weight:500; width:100%; text-align:left;
  background:transparent; border:none;
}
.side-menu-link:hover{background:var(--bg-elevated-2); color:var(--text);}
.side-menu-link svg{flex-shrink:0; color:var(--text-faint); width:19px; height:19px;}
.side-menu-link.active{color:var(--blue); background:var(--blue-soft);}
.side-menu-link.active svg{color:var(--blue);}
/* "Browse games" expand/collapse submenu in the mobile hamburger menu —
   companion to .desktop-nav-dropdown's hover panel above, since touch
   devices have no hover state for that to trigger on. */
.side-menu-dropdown{display:flex; flex-direction:column;}
.side-menu-link-toggle{cursor:pointer; justify-content:flex-start;}
.side-menu-link-toggle span:nth-child(2){flex:1;}
.side-menu-chevron{flex-shrink:0; display:flex; color:var(--text-faint); transition:transform .15s ease;}
.side-menu-dropdown.open .side-menu-link-toggle{color:var(--text); background:var(--bg-elevated-2);}
.side-menu-dropdown.open .side-menu-chevron{transform:rotate(180deg); color:var(--text);}
.side-menu-submenu{
  display:none; flex-direction:column; gap:2px; padding:4px 0 4px 14px; margin-bottom:2px;
}
.side-menu-dropdown.open .side-menu-submenu{display:flex;}
.side-menu-submenu-item{
  font-size:13.5px; padding:9px 10px;
}
.side-menu-submenu-item .games-dropdown-item-art{width:24px; height:24px;}
.side-menu-section-label{
  font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.06em;
  padding:14px 12px 6px;
}

/* ============================================================
   BASKET DRAWER (right)
   ============================================================ */
.basket-overlay{
  position:fixed; inset:0; background:rgba(8,9,15,0.65); z-index:90;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.basket-overlay.open{opacity:1; pointer-events:auto;}
.basket-drawer{
  position:fixed; top:0; right:0; bottom:0; width:380px; max-width:92vw;
  background:var(--bg-elevated); border-left:1px solid var(--border-soft); z-index:91;
  transform:translateX(100%); transition:transform .22s ease;
  display:flex; flex-direction:column;
}
.basket-drawer.open{transform:translateX(0);}
.basket-head{
  display:flex; align-items:center; justify-content:space-between; padding:16px;
  border-bottom:1px solid var(--border-soft); flex-shrink:0;
}
.basket-head h3{font-size:17px;}
.basket-close{background:transparent; border:none; color:var(--text-faint); font-size:22px; padding:4px;}
.basket-body{flex:1; overflow-y:auto; padding:12px 16px;}
.basket-empty{text-align:center; padding:48px 16px; color:var(--text-faint);}
.basket-empty svg{color:var(--text-faint); margin-bottom:10px;}
.basket-empty p{font-size:13.5px; margin:0;}
.basket-item{
  display:flex; gap:10px; padding:12px 0; border-bottom:1px solid var(--border-soft);
}
.basket-item-thumb{
  width:52px; height:52px; flex-shrink:0; border-radius:8px; overflow:hidden;
  background:var(--bg-elevated-2); border:1px solid var(--border);
}
.basket-item-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.basket-item-thumb-empty{background:linear-gradient(160deg, var(--bg-elevated-2) 0%, var(--bg) 100%);}
.basket-item-info{flex:1; min-width:0;}
.basket-item-name{font-size:13.5px; font-weight:600; font-family:'Inter';}
.basket-item-game{font-size:11px; color:var(--text-faint); font-family:'JetBrains Mono'; margin-top:2px;}
.basket-item-row{display:flex; align-items:center; justify-content:space-between; margin-top:8px; gap:8px;}
.qty-control{display:flex; align-items:center; gap:6px; background:var(--bg); border:1px solid var(--border); border-radius:8px;}
.qty-btn{width:26px; height:26px; background:transparent; border:none; color:var(--text-dim); font-size:15px; display:flex; align-items:center; justify-content:center;}
.qty-btn:hover{color:var(--blue);}
.qty-val{font-family:'JetBrains Mono'; font-size:13px; min-width:20px; text-align:center;}
.basket-item-price{font-family:'JetBrains Mono'; font-size:13.5px; color:var(--blue); font-weight:600;}
.basket-item-remove{background:transparent; border:none; color:var(--text-faint); padding:4px; flex-shrink:0;}
.basket-item-remove:hover{color:var(--red);}
.basket-foot{padding:16px; border-top:1px solid var(--border-soft); flex-shrink:0;}
.basket-total-row{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px;}
.basket-total-label{font-size:13px; color:var(--text-dim);}
.basket-total-val{font-family:'JetBrains Mono'; font-size:20px; color:var(--blue); font-weight:600;}
.basket-note{font-size:11.5px; color:var(--text-faint); margin-top:10px; line-height:1.5; text-align:center;}

/* ---------------- checkout (inside the basket drawer) ---------------- */
.checkout-back{padding:14px 16px 4px;}
.checkout-back button{background:transparent; border:none; color:var(--blue); font-size:13px; font-weight:600; padding:0;}
.checkout-back button:hover{text-decoration:underline;}
.checkout-problems{
  margin:0 16px 12px; padding:10px 12px; border-radius:8px;
  background:var(--red-soft); border:1px solid #5A2320;
}
.checkout-problems p{font-size:12.5px; color:var(--text); margin:0 0 4px; line-height:1.5;}
.checkout-problems p:last-child{margin-bottom:0;}
.checkout-price-changed-note{font-size:11px; color:var(--red); margin-top:2px;}
.checkout-discount-row{color:var(--teal);}
.checkout-discount-row span{color:var(--teal) !important;}
.checkout-coins-row{display:flex; gap:8px;}
.checkout-coins-row input{flex:1; min-width:0;}
.checkout-coins-locked{
  font-size:12.5px; color:var(--text-faint); padding:10px 12px;
  background:var(--bg-elevated-2); border-radius:8px; margin:4px 0 2px;
}
#basket-body .field, #basket-body .checkbox-row{margin:0 16px 14px;}
.checkout-success{text-align:center; padding:48px 20px 24px; color:var(--text-dim);}
.checkout-success svg{color:var(--teal); margin-bottom:14px;}
.checkout-success h3{font-size:19px; color:var(--text); margin-bottom:8px;}
.checkout-success p{font-size:13px; line-height:1.6; max-width:280px; margin:0 auto;}
.checkout-success strong{color:var(--text); font-family:'JetBrains Mono';}

main{max-width:1180px; margin:0 auto; padding:24px var(--gap-page) 60px;}

/* ---------- hero ---------- */
.hero{
  padding:14px 0 22px;
  border-bottom:1px solid var(--border-soft);
  margin-bottom:24px;
}
.hero-eyebrow{
  font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--blue);
  letter-spacing:0.1em; text-transform:uppercase; margin-bottom:12px;
  display:flex; align-items:center; gap:8px;
}
.hero-eyebrow::before{
  content:''; width:6px; height:6px; border-radius:50%; background:var(--teal);
  box-shadow:0 0 0 3px var(--teal-soft);
}
.hero h1{font-size:clamp(28px,7vw,54px); line-height:1.08;}
.hero p{
  font-size:14.5px; color:var(--text-dim); margin-top:14px; line-height:1.6;
  font-family:'Inter'; text-transform:none; font-weight:400; max-width:560px;
}
/* Logo sits to the left of the heading, sized to match the heading
   block's own height — .hero-row stretches both children to equal
   height (flex default), and the image just fills whatever height
   that ends up being while keeping its own aspect ratio, so it never
   needs a hardcoded pixel height that'd drift out of sync with the
   heading's actual rendered size at a given viewport width. */
.hero-row{display:flex; align-items:stretch; gap:20px;}
.hero-logo{flex-shrink:0; display:flex; align-items:center;}
.hero-logo img{height:100%; width:auto; max-height:150px; object-fit:contain;}
.hero-text{flex:1; min-width:0;}
@media (max-width: 640px){
  .hero-row{align-items:center; gap:14px;}
  .hero-logo{align-items:flex-start;}
  .hero-logo img{height:auto; max-height:56px; width:auto;}
}
.hero-stats{display:flex; gap:24px; margin-top:22px; flex-wrap:wrap;}
.hero-stat-num{font-family:'JetBrains Mono'; font-size:20px; color:var(--blue); font-weight:600;}
.hero-stat-label{font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.06em; margin-top:2px;}

/* ---------- section headers ---------- */
.section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:16px; gap:10px;
}
.section-head h2{font-size:19px; color:var(--text);}
.section-head .count{font-family:'JetBrains Mono'; font-size:12px; color:var(--text-faint); text-transform:none; letter-spacing:0; white-space:nowrap;}

/* ---------- game grid (mobile-first: single column) ----------
   Same banner+gradient+footer layout as the reference design, but
   recolored to the site's own dark-blue palette (--bg-elevated /
   --border-soft / --blue) instead of a plain white card, so it
   matches every other card on the site. */
.game-grid{
  display:grid; grid-template-columns:1fr; gap:20px;
}
.game-card{
  position:relative; border-radius:18px; overflow:hidden; cursor:pointer;
  background:var(--blue-soft); border:1px solid transparent;
  box-shadow:0 4px 14px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.22);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  display:flex; flex-direction:column;
}
.game-card:hover, .game-card:focus-visible{
  transform:translateY(-5px);
  box-shadow:0 14px 32px rgba(0,0,0,0.4), 0 4px 10px rgba(0,0,0,0.25);
}
.game-card:active{transform:translateY(-2px);}
.game-card-img{
  position:relative; height:170px; flex-shrink:0; background-size:cover;
  transition:transform .35s ease;
}
.game-card:hover .game-card-img, .game-card:focus-visible .game-card-img{transform:scale(1.05);}
.game-card-img::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(10,11,18,0.05) 0%, rgba(27,42,74,0.4) 55%, var(--blue-soft) 100%);
}
.game-card::after{display:none;}
.game-card-tag{
  position:absolute; top:14px; right:14px; z-index:2;
  font-family:'JetBrains Mono'; font-size:11px; font-weight:700;
  background:var(--blue); color:#0A0E1A;
  padding:5px 10px; border-radius:999px; letter-spacing:0.02em;
}
.game-card-body{position:relative; padding:18px 18px 16px; display:flex; flex-direction:column; gap:6px; flex:1;}
.game-card-title{font-size:21px; line-height:1.2; color:var(--text); font-family:'Barlow Condensed'; font-weight:700;}
.game-card-desc{font-size:13px; color:var(--text-dim); line-height:1.55; font-family:'Inter';}
.game-card-footer{
  display:flex; align-items:center; justify-content:space-between; margin-top:auto;
  padding-top:14px; border-top:1px solid var(--blue-dim);
}
.game-card-items{font-size:12px; color:rgba(238,240,247,0.65); font-family:'JetBrains Mono';}
.game-card-arrow{color:#fff; font-size:15px; font-weight:700; font-family:'Inter';}
.game-card-cta{display:flex; align-items:center; gap:4px; color:#fff; font-family:'Inter'; font-weight:600; font-size:11px; white-space:nowrap;}
.game-card-cta-text-full{display:none;}
.game-card-cta-text-short{display:inline;}

/* ---------- per-game rows (homepage) ----------
   Card + item strip sit side by side at every width, including
   mobile — the card gets squished down instead of dropping below the
   items, and the items become a native horizontally-swipeable strip
   there (arrows removed; a phone doesn't need them when a thumb does
   the same job). Desktop keeps the JS-paged arrow carousel showing 4
   at once — see initHomeGameCarousels() in index.html. */
.game-rows{display:flex; flex-direction:column; gap:20px;}
.game-row{display:flex; flex-direction:row; align-items:stretch; gap:10px;}
.game-row-card{
  position:relative; border-radius:14px; overflow:hidden; cursor:pointer;
  background:var(--blue-soft); border:1px solid transparent;
  box-shadow:0 4px 14px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.22);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  display:flex; flex-direction:column;
  flex:0 0 122px;
}
.game-row-card:hover, .game-row-card:focus-visible{
  transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(0,0,0,0.4), 0 4px 10px rgba(0,0,0,0.25);
}
.game-row-card-img{position:relative; height:66px; flex-shrink:0; background-size:cover; transition:transform .35s ease;}
.game-row-card:hover .game-row-card-img{transform:scale(1.05);}
.game-row-card-img::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(10,11,18,0.05) 0%, rgba(27,42,74,0.45) 60%, var(--blue-soft) 100%);
}
.game-row-card-body{position:relative; padding:8px 10px 9px; display:flex; flex-direction:column; gap:2px;}
.game-row-card-title{font-size:13px; line-height:1.15; color:var(--text); font-family:'Barlow Condensed'; font-weight:700;}
.game-row-card-desc{
  font-size:12.5px; color:var(--text-dim); line-height:1.5; font-family:'Inter';
  display:none; /* no room at the squished mobile size — comes back at the desktop breakpoint below */
}
.game-row-card-footer{
  display:flex; align-items:center; justify-content:space-between; margin-top:6px;
  padding-top:6px; border-top:1px solid var(--blue-dim);
}
.game-row-card-footer .game-card-items{font-size:10px;}

.hot-carousel{position:relative; display:flex; align-items:center; gap:8px; flex:1; min-width:0;}
.hot-carousel-track-wrap{flex:1; min-width:0; overflow:hidden;}
.hot-carousel-track{display:flex; flex-wrap:nowrap; transition:transform .45s ease;}
.hot-carousel-slide{flex:0 0 auto; min-width:0; padding:0 6px; box-sizing:border-box;}
.hot-carousel-slide .item-card{height:100%;}
.hot-carousel-arrow{
  display:flex; flex-shrink:0; width:34px; height:34px; border-radius:50%;
  background:var(--bg-elevated-2); border:1px solid var(--border); color:var(--text);
  font-size:18px; line-height:1; cursor:pointer; align-items:center; justify-content:center;
  transition:background .15s ease, border-color .15s ease;
}
.hot-carousel-arrow:hover{background:var(--bg-elevated); border-color:var(--blue-dim);}

/* Mobile only: native horizontally-swipeable strip instead of the
   JS-paged transform (which stays completely inert here — nothing in
   this block touches .hot-carousel-track's transform/width, so the
   JS's own inline styles just never get applied in the first place at
   this width, rather than needing to be "undone"). Scoped to
   max-width so nothing here can ever leak into the desktop rules
   below and fight the carousel JS there again. */
@media (max-width: 639px){
  .hot-carousel-track-wrap{
    overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    scrollbar-width:none; /* Firefox */
  }
  .hot-carousel-track-wrap::-webkit-scrollbar{display:none;} /* Chrome/Safari */
  .hot-carousel-slide{width:148px; scroll-snap-align:start;}
  .hot-carousel-arrow{display:none;} /* swipe replaces them at this width */
}

/* Desktop: bigger card and full description text back. */
@media (min-width: 640px){
  .game-row{gap:16px;}
  .game-row-card{flex:0 0 260px;}
  .game-row-card-img{height:110px;}
  .game-row-card-body{padding:12px 16px 14px; gap:4px;}
  .game-row-card-title{font-size:19px;}
  .game-row-card-desc{
    display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .game-row-card-footer{margin-top:8px; padding-top:10px;}
  .game-row-card-footer .game-card-items{font-size:12px;}
  .game-card-cta{font-size:13px; gap:5px;}
  .game-card-cta-text-full{display:inline;}
  .game-card-cta-text-short{display:none;}
}

.empty-state{
  text-align:center; padding:48px 16px; color:var(--text-faint);
  border:1px dashed var(--border); border-radius:var(--radius-lg);
}
.empty-state h3{color:var(--text-dim); font-size:15px; margin-bottom:8px; text-transform:none;}
.empty-state p{font-size:13.5px; margin:0;}

/* ---------- breadcrumb ---------- */
/* Public promo codes page (promo-codes.html) */
.promo-code-card{align-items:flex-start; border-color:#6B4E12; background:rgba(245,185,66,0.06);}
.promo-code-value{
  font-family:'Barlow Condensed'; font-weight:800; font-size:22px; color:#F5B942; letter-spacing:0.02em;
}
.promo-code-chip{
  display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  background:var(--bg-elevated-2); border:1px dashed #6B4E12; border-radius:8px; padding:8px 10px;
}
.promo-code-chip span{font-family:'JetBrains Mono'; font-weight:700; letter-spacing:0.04em; color:var(--text);}

.crumb{
  display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-faint);
  margin-bottom:18px; font-family:'JetBrains Mono'; flex-wrap:wrap;
}
.crumb a{color:var(--text-dim);}
.crumb a:active{color:var(--blue);}

/* ---------- game page header ---------- */
.game-header{
  display:flex; gap:14px; align-items:center; margin-bottom:22px; flex-wrap:wrap;
  padding-bottom:20px; border-bottom:1px solid var(--border-soft);
}
.game-header-art{
  width:64px; height:64px; border-radius:var(--radius); flex-shrink:0;
  background-size:cover; border:1px solid var(--border);
}
.game-header h1{font-size:clamp(22px,6vw,40px);}
.game-header p{color:var(--text-dim); font-size:13px; margin-top:4px; max-width:560px; text-transform:none; font-family:'Inter';}

/* ---------- game-page ladder selector ----------
   Only rendered when the game has more than one price variant
   (currently just D2R). Filters the grid to items priced > 0 for
   the selected ladder, in addition to the category tab filter. */
.game-controls-row{
  display:flex; gap:16px; flex-wrap:wrap; margin-bottom:16px;
}
.ladder-select-row{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:0;
}
.ladder-select-row label{
  font-family:'JetBrains Mono'; font-size:10.5px; color:var(--text-faint);
  text-transform:uppercase; letter-spacing:0.05em; white-space:nowrap;
}
.ladder-select-row select{
  background:var(--bg-elevated); border:1px solid var(--border); color:var(--text);
  padding:8px 12px; border-radius:8px; font-size:13.5px; font-family:'Inter'; min-width:220px;
}
/* The closed box above is fully styleable, but the open dropdown LIST
   is rendered natively by the browser/OS — CSS can only reach color
   and background-color on the individual <option> elements, not the
   list's border/shadow/selected-highlight, and support varies by
   browser. This gets it as close to the dark theme as standard CSS
   allows; Chrome/Edge honor this well, Firefox partially, and Safari
   may still show its own native styling regardless. */
.ladder-select-row select option{
  background:var(--bg-elevated); color:var(--text);
}
.ladder-select-row select option:checked{
  background:var(--blue-soft); color:var(--text);
}

/* ---------- item grid (mobile-first: single column) ---------- */
/* auto-fill + minmax: as many 230px-minimum columns as comfortably
   fit the available width, growing evenly to fill any leftover space
   (e.g. 3 columns on a narrow laptop, 5+ on a wide desktop) — rather
   than the old fixed 1 -> 2 -> 3 breakpoint system, which capped at 3
   columns forever past 860px and left real width unused on anything
   wider (a 1300px+ window, for instance). 230px keeps the price +
   qty-stepper + button row from ever feeling cramped — see
   .item-card-bottom / .buy-btn below for why that's the floor. */
.item-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:12px;}
.item-card{
  position:relative;
  background:var(--bg-elevated); border:1px solid var(--border-soft); border-radius:var(--radius-lg);
  padding:16px; display:flex; flex-direction:column; gap:8px; overflow:hidden;
  transition:border-color .15s ease;
}
.item-card:hover, .item-card:focus-visible{border-color:var(--blue-dim);}
.item-card-thumb{
  position:relative;
  width:calc(100% + 32px); margin:-16px -16px 4px; height:140px;
  flex-shrink:0; background:var(--bg-elevated-2);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.item-card-thumb img{
  max-width:55%; max-height:55%; width:auto; height:auto; object-fit:contain;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,0.4));
}
/* PoE1 quantity badge — see itemQuantityBadgeHtml() in shared.js. Sits
   over whichever thumbnail container it's placed in (.item-card-thumb
   or .item-buy-img, both position:relative for this); a light
   shadow/outline keeps "x5000" legible over any item art color. */
.item-qty-badge{
  position:absolute; top:8px; left:8px; z-index:2;
  font-size:13px; font-weight:800; color:#fff; font-family:'JetBrains Mono', monospace;
  text-shadow:0 1px 3px rgba(0,0,0,0.85), 0 0 6px rgba(0,0,0,0.5);
  letter-spacing:0.01em; pointer-events:none;
}
.item-buy-img .item-qty-badge{
  top:12px; left:12px; font-size:18px;
}
.item-buy-img .item-card-thumb-badges{top:12px; left:12px; gap:6px;}
.item-buy-img .item-hot-badge, .item-buy-img .item-discount-badge{font-size:16px;}
/* Homepage hot-items slider: stacks the quantity badge (if any) and
   the Hot badge in the thumb's top-left corner, one above the other,
   so a hot PoE stack (e.g. "x1000") never overlaps the Hot label —
   the quantity badge's own position:absolute is neutralized here in
   favor of this wrapper's flex layout, since both being
   absolutely-positioned to the same spot would just stack them
   exactly on top of each other instead. */
.item-card-thumb-badges{
  position:absolute; top:8px; left:8px; z-index:2;
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;
}
.item-card-thumb-badges .item-qty-badge{position:static; top:auto; left:auto;}
.item-hot-badge{
  font-size:12px; font-weight:800; color:var(--red); font-family:'JetBrains Mono', monospace;
  text-shadow:0 1px 3px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.6);
  letter-spacing:0.03em; pointer-events:none;
}
.item-discount-badge{
  font-size:12px; font-weight:800; color:var(--red); font-family:'JetBrains Mono', monospace;
  text-shadow:0 1px 3px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.6);
  letter-spacing:0.03em; pointer-events:none;
}
/* Pack art tends to be full character/scene art rather than a small
   centered item icon, so it reads as "small" at the same 55% scale
   regular item icons use. This only affects pack cards — every other
   .item-card-thumb (which is most of the site) is untouched. */
.pack-card-thumb img{
  max-width:100%; max-height:100%;
}
/* Pack thumbs get a taller stage than regular item thumbs (140px) so
   the bigger art above actually has room to grow, rather than just
   filling the same box more tightly. */
.item-card-thumb.pack-card-thumb{
  height:175px;
}
/* Per-game logo stamp on bundle/pack cards — shows the crest of
   whichever game that bundle belongs to (games.logo, see
   add_game_logo_column.sql), e.g. the D2R logo on a D2R bundle. This
   is the ONLY place games.logo is rendered on the site — the home
   page's game-selection tiles deliberately don't show it (see
   index.html). Positioned relative to .item-card's own edge (which
   has position:relative above specifically so this anchors correctly,
   since .item-card-thumb bleeds past the card's padding with negative
   margins). Cards without thumb art still place this correctly since
   it's positioned off the card itself, not the thumb. Anchored to the
   top-RIGHT specifically so it doesn't sit on top of the hot/discount
   badge in itemBadgesOverlayHtml, which anchors to the thumb's
   top-left at nearly the same offset — same corner + same z-index
   used to mean this logo (painted later in the DOM) fully covered
   that badge. */
.item-card-logo{
  position:absolute; top:10px; right:10px; z-index:2;
  width:72px; height:72px; border-radius:14px; overflow:hidden;
  background:rgba(10,11,18,0.6); backdrop-filter:blur(2px);
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 2px 8px rgba(0,0,0,0.35);
  display:flex; align-items:center; justify-content:center;
}
.item-card-logo img{
  width:100%; height:100%; object-fit:contain; padding:6px;
  max-width:100%; max-height:100%; /* override .item-card-thumb img's 55% rule scoping */
  filter:none;
}
.item-card-top{display:flex; align-items:flex-start; justify-content:space-between; gap:8px;}
.item-card-name{font-size:15px; font-family:'Inter'; font-weight:600; text-transform:none; line-height:1.3;}
.item-card-badge{
  font-family:'JetBrains Mono'; font-size:10px; color:var(--text-faint);
  background:var(--bg-elevated-2); border:1px solid var(--border-soft);
  padding:2px 7px; border-radius:12px; white-space:nowrap; text-transform:uppercase; letter-spacing:0.03em; flex-shrink:0;
}
.item-card-desc{
  font-size:12.5px; color:var(--text-dim); line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; text-overflow:ellipsis;
}
.item-card-bottom{
  display:flex; align-items:center; justify-content:space-between; margin-top:auto; gap:10px;
  padding-top:10px; border-top:1px solid var(--border-soft);
}
.item-price{font-family:'JetBrains Mono'; font-size:16px; color:var(--blue); font-weight:600; white-space:nowrap;}
.item-price .unit{font-size:10.5px; color:var(--text-faint); font-weight:400; margin-left:4px;}

/* ---------- pack carousel ----------
   Track slides by translateX in steps of (100 / slideCount)%, set by
   JS. Slide width itself is responsive via flex-basis below, matching
   the same 1/2/3-per-row breakpoints the regular item-grid already
   uses, so this visually lines up with the grid right below it. */
.pack-carousel{position:relative; display:flex; align-items:center; gap:8px;}
.pack-carousel-track-wrap{overflow:hidden; flex:1; min-width:0;}
.pack-carousel-track{display:flex; transition:transform .45s ease; width:100%;}
.pack-carousel-slide{flex:0 0 auto; min-width:0; padding:0 6px; box-sizing:border-box;}
.pack-carousel-slide .item-card{height:100%;}
.pack-carousel-arrow{
  flex-shrink:0; width:36px; height:36px; border-radius:50%;
  background:var(--bg-elevated-2); border:1px solid var(--border); color:var(--text);
  font-size:20px; line-height:1; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .15s ease, border-color .15s ease;
}
.pack-carousel-arrow:hover{background:var(--bg-elevated); border-color:var(--blue-dim);}
.home-guides-pager{display:flex; align-items:center; justify-content:center; gap:16px; margin-top:20px;}
.home-guides-pager .pack-carousel-arrow:disabled{opacity:0.35; cursor:default; pointer-events:none;}
.home-guides-page-indicator{font-family:'JetBrains Mono'; font-size:12.5px; color:var(--text-faint);}
.home-guides-list{display:flex; flex-direction:column; gap:12px;}
.home-guide-row{
  display:flex; align-items:center; gap:16px; padding:14px 18px;
  background:var(--bg-elevated-2); border:1px solid var(--border); border-radius:10px;
  text-decoration:none; color:inherit; transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
.home-guide-row:hover{border-color:var(--blue-dim); background:var(--bg-elevated); transform:translateY(-1px);}
.home-guide-row-thumb{width:64px; height:64px; border-radius:8px; overflow:hidden; flex-shrink:0; background:var(--bg);}
.home-guide-row-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.home-guide-row-body{flex:1; min-width:0;}
.home-guide-row-top{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:3px;}
.home-guide-row-title{font-family:'Barlow Condensed'; font-weight:700; font-size:16px; color:var(--text);}
.home-guide-row-excerpt{
  font-size:12.5px; color:var(--text-dim); line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
.home-guide-row-arrow{flex-shrink:0; color:var(--text-faint); font-size:18px; font-weight:700;}

/* ---------- discount badges & pack tag ----------
   Reuses the existing palette rather than introducing a new accent
   color: --red already carries a "sale/attention" meaning (it's used
   for out-of-stock), and --teal already reads as a positive accent. */
.discount-badge{
  font-family:'JetBrains Mono'; font-size:10.5px; font-weight:700; color:var(--red);
  background:var(--red-soft); border:1px solid var(--red); border-radius:6px;
  padding:1px 6px; white-space:nowrap; flex-shrink:0;
}
.pack-badge{
  display:inline-block; vertical-align:middle;
  font-family:'JetBrains Mono'; font-size:10px; font-weight:700; color:var(--teal);
  background:var(--teal-soft); border:1px solid var(--teal);
  padding:2px 7px; border-radius:12px; white-space:nowrap; text-transform:uppercase; letter-spacing:0.03em; flex-shrink:0;
}
.item-price-row{display:flex; align-items:baseline; gap:7px; flex-wrap:wrap;}
.item-price-was{font-family:'JetBrains Mono'; font-size:12.5px; color:var(--text-faint); text-decoration:line-through; white-space:nowrap;}
.item-buy-price-row{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; margin-top:2px;}
.item-buy-price-was{font-family:'JetBrains Mono'; font-size:15px; color:var(--text-faint); text-decoration:line-through; white-space:nowrap;}
.pack-contents-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px;}
.pack-contents-list li{
  display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:6px 10px;
  font-size:13px; padding:8px 10px; background:var(--bg-elevated-2); border:1px solid var(--border-soft); border-radius:var(--radius);
}
.pack-contents-list a{color:var(--text); text-decoration:none;}
.pack-contents-list a:hover{color:var(--blue);}
/* Name + qty travel together as one flex item so the row only ever
   wraps between "name+qty" and "price/notice" — never splits the name
   itself across lines just because its sibling (esp. the excluded
   notice) is wide. min-width:0 lets the name itself still ellipsize/
   wrap on truly tiny screens instead of forcing the row wider. */
.pack-contents-name-qty{display:flex; align-items:baseline; gap:6px; min-width:0; flex:1 1 160px;}
.pack-contents-qty{color:var(--text-faint); font-size:12px; flex-shrink:0;}
.pack-contents-price{font-family:'JetBrains Mono'; font-size:12.5px; color:var(--text-dim); white-space:nowrap; flex-shrink:0;}
/* Compact chip rather than a long nowrap sentence — the full
   explanation already lives in .pack-excluded-notice just above the
   Add to basket button, so this only needs to flag the one item, and
   as a chip it can sit on its own line on mobile without forcing the
   item name to squeeze down into several lines to make room for it. */
.pack-contents-excluded{
  font-size:11px; font-weight:700; color:var(--red); white-space:normal;
  background:rgba(241,85,76,0.1); border:1px solid rgba(241,85,76,0.3);
  border-radius:20px; padding:3px 9px; line-height:1.35; flex-shrink:0;
}
.pack-contents-price-pending{color:var(--text-faint); font-weight:400; font-family:'Inter';}
.pack-contents-item-excluded a{color:var(--text-faint); text-decoration:line-through;}
.pack-contents-item-custom{flex-direction:column; align-items:stretch; gap:8px;}
.pack-contents-custom-text{
  white-space:pre-line; font-size:13px; line-height:1.6; color:var(--text);
}
.pack-contents-item-custom.pack-contents-item-excluded .pack-contents-custom-text{color:var(--text-faint);}
.pack-contents-custom-footer{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.pack-contents-custom-tag{
  font-size:9.5px; font-weight:700; color:var(--text-faint); border:1px solid var(--border);
  border-radius:8px; padding:1px 6px; text-transform:uppercase; letter-spacing:0.03em;
}
.pack-excluded-notice{
  font-size:12px; color:var(--red); background:rgba(241,85,76,0.08);
  border:1px solid rgba(241,85,76,0.3); border-radius:8px; padding:8px 10px; margin:8px 0;
}

/* Floating Key Stats preview shown on hovering a component link inside
   "What's in this bundle" — see showItemHoverPreview()/
   hideItemHoverPreview() in shared.js. Appended directly to <body> and
   position:fixed (not absolute inside the list) so it can never be
   clipped by any ancestor's overflow and always sits above everything
   else on the page, regardless of where in the DOM the triggering link
   happens to be. */
.item-hover-preview{
  display:none; position:fixed; z-index:1000; width:320px; max-width:calc(100vw - 20px);
  max-height:60vh; overflow-y:auto;
  background:var(--bg-elevated); border:1px solid var(--border-soft); border-radius:var(--radius-lg);
  box-shadow:0 12px 32px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.3);
  padding:16px 18px;
}
.item-hover-preview-thumb{
  width:100%; height:90px; margin-bottom:10px;
  background:var(--bg-elevated-2); border-radius:var(--radius-md, 8px);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.item-hover-preview-thumb img{
  max-width:60%; max-height:60%; width:auto; height:auto; object-fit:contain;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,0.4));
}
.item-hover-preview-title{font-size:14px; font-weight:700; color:var(--text); margin-bottom:8px; line-height:1.35;}
.item-hover-preview p{font-size:13px; color:var(--text-dim); line-height:1.6; margin:0 0 8px;}
.item-hover-preview p:last-child{margin-bottom:0;}
.item-hover-preview ul{list-style:none; margin:0 0 8px; padding-left:0; display:flex; flex-direction:column; gap:5px;}
.item-hover-preview ul:last-child{margin-bottom:0;}
.item-hover-preview li{font-size:12.5px; color:var(--text-dim); line-height:1.55;}
.item-hover-preview h3{font-size:11.5px; color:var(--text); margin:10px 0 6px; text-transform:uppercase; letter-spacing:0.03em;}
.item-hover-preview h3:first-of-type{margin-top:0;}
.item-hover-preview-empty{font-size:12.5px; color:var(--text-faint); font-style:italic;}
/* Touch devices have no hover state, so the nested "Browse games"
   category flyouts (hover-triggered, multi-level) stay desktop-only —
   tapping a game there still navigates straight to its page as
   normal. The item-hover-preview popover (pack contents list) is
   different: it has its own tap-to-show/tap-to-navigate handling in
   shared.js (handlePackItemClick) so it stays useful on touch instead
   of just being switched off. */
.item-stock{font-size:11px; color:var(--teal); font-family:'JetBrains Mono'; display:flex; align-items:center; gap:5px; margin-top:2px;}
.item-stock::before{content:''; width:5px; height:5px; border-radius:50%; background:var(--teal); flex-shrink:0;}
.item-stock.out{color:var(--red);}
.item-stock.out::before{background:var(--red);}
.item-delivery{font-size:11px; color:var(--text-faint); margin-top:2px; line-height:1.4;}
.buy-btn{
  background:var(--blue); color:#0A0E1A; border:none; padding:9px 16px; border-radius:8px;
  font-size:13px; font-weight:700; letter-spacing:0.01em; flex-shrink:0; min-height:38px;
  display:flex; align-items:center; gap:6px;
}
.buy-btn:active{background:#6FA3F9;}
.buy-btn:disabled{background:var(--bg-elevated-2); color:var(--text-faint);}
.buy-btn.in-basket{background:var(--teal-soft); color:var(--teal); border:1px solid var(--teal);}

/* ---------- quantity picker (grid card + item detail buy card) ----------
   Distinct from .qty-control above: that one is a read-only display used
   inside the basket drawer (qty is changed via two separate +/- buttons
   only). This version has an editable number input in the middle so
   shoppers can type an exact amount, then Add to basket applies it. Same
   component is reused on every game's grid cards and on the item detail
   page's buy card (game-poe1.html, game-poe2.html, game-d2r.html, and any
   future game page — none of them have their own copy of this markup, it
   all comes from shared.js/shared.css).
   On the grid card it sits on its own full-width row (.item-card-qty-row),
   above the price/Add-to-basket row, rather than squeezed in beside the
   price — that way it never competes for width with the price text and
   can't get clipped at narrower card sizes. */
.item-card-qty-row{display:flex; justify-content:flex-start;}
.qty-picker{
  display:inline-flex; align-items:center; gap:0; background:var(--bg); border:1px solid var(--border);
  border-radius:8px; overflow:hidden; height:30px; width:auto;
}
.qty-picker-btn{
  width:30px; min-width:30px; height:100%; flex:0 0 auto; background:transparent; border:none; color:var(--text-dim);
  font-size:16px; font-weight:600; font-family:Arial, sans-serif; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.qty-picker-btn:hover{color:var(--blue); background:var(--bg-elevated-2);}
.qty-picker input.qty-picker-input{
  width:42px; min-width:42px; height:100%; min-height:0; flex:0 0 auto; background:transparent; border:none; border-left:1px solid var(--border);
  border-right:1px solid var(--border); color:var(--text); font-family:'JetBrains Mono'; font-size:13px;
  text-align:center; padding:0; -moz-appearance:textfield;
}
.qty-picker input.qty-picker-input::-webkit-outer-spin-button, .qty-picker input.qty-picker-input::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0;
}
.qty-picker input.qty-picker-input:focus{outline:none; color:var(--blue); border-color:var(--border);}
/* larger variant used on the item detail page's buy card, where the
   button below it is full-width rather than sitting beside the picker */
.qty-picker-lg{width:100%; height:38px; justify-content:center;}
.qty-picker-lg .qty-picker-btn{width:38px; font-size:18px;}
.qty-picker.qty-picker-lg input.qty-picker-input{width:56px; min-width:56px; font-size:14px; min-height:0;}

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--border-soft); padding:26px 16px 20px; text-align:center;
  color:var(--text-faint); font-size:12px; line-height:1.6;
}
footer a{color:var(--blue-dim);}
.footer-tagline{font-size:13px; color:var(--text-dim); font-weight:600; margin-bottom:14px;}
.footer-links{display:flex; flex-wrap:wrap; justify-content:center; gap:18px; margin-bottom:14px;}
.footer-links a{color:var(--text-faint); text-decoration:none; font-size:12px;}
.footer-links a:hover{color:var(--blue); text-decoration:underline;}
.footer-copyright{font-size:11px; color:var(--text-faint); opacity:0.8;}
.payment-badges{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:14px;}
.payment-badges svg{display:block; border-radius:5px;}

/* ---------- buttons (generic) ---------- */
.btn{
  background:var(--bg-elevated); border:1px solid var(--border); color:var(--text);
  padding:9px 14px; border-radius:8px; font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:6px;
  min-height:38px;
}
.btn:active{border-color:var(--blue-dim); color:var(--blue);}
.btn-primary{background:var(--blue); color:#0A0E1A; border:none;}
.btn-primary:active{background:#6FA3F9; color:#0A0E1A;}
.btn-danger{border-color:#4A2A28; color:var(--red);}
.btn-danger:active{border-color:var(--red); background:var(--red-soft);}
.btn-sm{padding:7px 11px; font-size:12px; min-height:34px;}
.btn-block{width:100%; justify-content:center;}

/* ===================== ADMIN ===================== */
.admin-shell{display:flex; flex-direction:column; min-height:calc(100vh - 57px);}
.admin-sidebar{
  border-bottom:1px solid var(--border-soft); padding:12px var(--gap-page);
  display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.admin-sidebar::-webkit-scrollbar{display:none;}
.admin-sidebar-label{display:none;}
.admin-nav-btn{
  display:flex; align-items:center; gap:8px; text-align:left; background:transparent;
  border:1px solid var(--border-soft); color:var(--text-dim); padding:8px 14px; border-radius:8px;
  font-size:13px; font-weight:600; white-space:nowrap; flex-shrink:0;
}
.admin-nav-btn.active{background:var(--blue-soft); color:var(--blue); border-color:var(--blue-dim);}
/* Promo Codes deliberately stands out from the other admin tabs —
   amber/gold rather than the neutral+blue-when-active look every
   other tab uses, so it reads as its own distinct thing in the nav. */
.admin-nav-btn-promo{
  color:#F5B942; border-color:#6B4E12; background:rgba(245,185,66,0.08);
}
.admin-nav-btn-promo:hover{background:rgba(245,185,66,0.16); border-color:#F5B942;}
.admin-nav-btn-promo.active{background:#F5B942; color:#241a02; border-color:#F5B942;}
.admin-main{padding:20px var(--gap-page) 60px;}
.admin-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:10px;}
.admin-head h2{font-size:20px;}

.publish-banner{
  display:flex; flex-direction:column; gap:10px; background:var(--blue-soft);
  border:1px solid var(--blue-dim); border-radius:var(--radius-lg); padding:14px 16px;
  margin-bottom:18px;
}
.publish-banner-title{font-size:14px; font-weight:600; font-family:'Inter'; color:var(--blue);}
.publish-banner-sub{font-size:12px; color:var(--text-dim); line-height:1.5; margin-top:3px;}
.publish-banner .btn{align-self:flex-start;}

.admin-stats-row{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:22px;}
.stat-card{
  background:var(--bg-elevated); border:1px solid var(--border-soft); border-radius:var(--radius);
  padding:12px 10px;
}
.stat-card .num{font-family:'JetBrains Mono'; font-size:18px; color:var(--blue); font-weight:600;}
.stat-card .lbl{font-size:10px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.04em; margin-top:3px;}

.admin-game-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px; background:var(--bg-elevated);
  border:1px solid var(--border-soft); border-radius:var(--radius); padding:13px 14px; margin-bottom:10px;
}
.admin-game-row.inactive{opacity:0.55;}
.admin-game-thumb{
  width:42px; height:42px; border-radius:8px; background-size:cover; background-position:center; flex-shrink:0;
  border:1px solid var(--border);
}
.admin-game-info{flex:1; min-width:120px;}
.admin-game-info .name{font-size:14px; font-weight:600; font-family:'Inter';}
.admin-game-info .meta{font-size:11px; color:var(--text-faint); font-family:'JetBrains Mono'; margin-top:2px;}
.admin-game-actions{display:flex; align-items:center; gap:6px; flex-wrap:wrap; width:100%; padding-top:4px; border-top:1px solid var(--border-soft); margin-top:6px;}

.toggle{
  position:relative; width:40px; height:23px; border-radius:14px; background:var(--bg-elevated-2);
  border:1px solid var(--border); flex-shrink:0;
}
.toggle.on{background:var(--teal-soft); border-color:var(--teal);}
.toggle-knob{
  position:absolute; top:2px; left:2px; width:17px; height:17px; border-radius:50%;
  background:var(--text-faint);
}
.toggle.on .toggle-knob{left:21px; background:var(--teal);}

.status-pill{
  font-size:10px; font-family:'JetBrains Mono'; padding:2px 8px; border-radius:12px; text-transform:uppercase;
  letter-spacing:0.03em; white-space:nowrap;
}
.status-pill.on{color:var(--teal); background:var(--teal-soft); border:1px solid #2E6058;}
.status-pill.off{color:var(--text-faint); background:var(--bg-elevated-2); border:1px solid var(--border);}

.admin-item-row{
  display:flex; flex-direction:column; gap:8px;
  background:var(--bg-elevated); border:1px solid var(--border-soft); border-radius:var(--radius);
  padding:13px 14px; margin-bottom:8px;
}
.admin-item-row.inactive{opacity:0.5;}
.admin-item-name{font-size:14px; font-weight:600; font-family:'Inter';}
.admin-item-name .sub{font-size:11.5px; color:var(--text-faint); font-weight:400; margin-top:2px; display:block;}
.admin-item-meta-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.admin-item-cell{font-size:12.5px; color:var(--text-dim); font-family:'JetBrains Mono';}
.admin-item-actions{display:flex; gap:6px; align-items:center; flex-wrap:wrap; padding-top:6px; border-top:1px solid var(--border-soft); margin-top:2px;}
.admin-list-head{display:none;}

/* ---------- items tab: filter row (game / category / search) ---------- */
.admin-filter-row{display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end; margin-bottom:14px;}
.admin-filter-row .field{min-width:200px;}

/* ---------- modal ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(8,9,15,0.75); z-index:100;
  display:flex; align-items:flex-end; justify-content:center;
  backdrop-filter:blur(2px);
}
.modal{
  background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  width:100%; max-width:520px; max-height:92vh; overflow-y:auto; box-shadow:var(--shadow);
}
.modal-wide{max-width:640px;}
.modal-head{
  display:flex; align-items:center; justify-content:space-between; padding:18px 18px 16px;
  border-bottom:1px solid var(--border-soft); position:sticky; top:0; background:var(--bg-elevated);
}
.modal-head h3{font-size:17px;}
.modal-close{background:transparent; border:none; color:var(--text-faint); font-size:24px; line-height:1; padding:4px 6px;}
.modal-body{padding:18px; display:flex; flex-direction:column; gap:14px;}
.modal-foot{padding:14px 18px 18px; border-top:1px solid var(--border-soft); display:flex; flex-direction:column-reverse; gap:8px;}
.modal-foot .btn{width:100%; justify-content:center;}

/* ---------- page content editor rows ---------- */
.content-badge{
  font-family:'JetBrains Mono'; font-size:10px; font-weight:700; color:var(--blue);
  background:var(--blue-soft); border:1px solid var(--blue-dim);
  padding:2px 7px; border-radius:12px; white-space:nowrap; text-transform:uppercase; letter-spacing:0.03em;
}
.content-row{display:flex; gap:8px; align-items:center; margin-bottom:6px;}
.content-row input{flex:1;}
.content-row-pair input:first-child{flex:0 0 38%;}
.content-row-multiline{align-items:flex-start;}
.content-row-multiline textarea{
  flex:1; background:var(--bg-elevated-2); border:1px solid var(--border); color:var(--text);
  padding:8px 10px; border-radius:8px; font-size:13.5px; font-family:'Inter';
  resize:none; overflow:hidden; min-height:38px; line-height:1.5;
}
.content-row-multiline .btn-icon-remove{margin-top:4px;}
.content-faq-row{
  display:flex; flex-direction:column; gap:6px; padding:10px; margin-bottom:8px;
  background:var(--bg); border:1px solid var(--border-soft); border-radius:8px; position:relative;
}
.content-faq-row textarea{min-height:56px; resize:none; overflow:hidden; line-height:1.5;}
.content-faq-row .btn-icon-remove{position:absolute; top:6px; right:6px;}

.field{display:flex; flex-direction:column; gap:6px;}
.field label{font-size:12.5px; color:var(--text-dim); font-weight:600;}
.field .hint{font-size:11px; color:var(--text-faint); font-weight:400;}
.field-row{display:grid; grid-template-columns:1fr; gap:14px;}
input[type=text], input[type=number], input[type=url], input[type=email], input[type=password], textarea, select{
  background:var(--bg); border:1px solid var(--border); color:var(--text);
  padding:10px 12px; border-radius:8px; font-size:15px; font-family:'Inter'; width:100%;
  min-height:42px;
}
input:focus, textarea:focus, select:focus{outline:none; border-color:var(--blue-dim);}
textarea{resize:vertical; min-height:72px; font-family:'Inter';}
.checkbox-row{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--text-dim);}
.checkbox-row input{width:auto; min-height:auto;}

.checkout-pay-method{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0 8px;}
.checkout-pay-method-opt{
  display:flex; align-items:center; justify-content:center; gap:7px;
  border:1px solid var(--border); border-radius:8px; padding:9px 10px;
  font-size:12.5px; line-height:1.25; font-weight:600; color:var(--text-dim); cursor:pointer;
  background:var(--bg-elevated-2); transition:border-color .15s, color .15s; text-align:center;
}
.checkout-pay-method-opt svg{flex-shrink:0;}
.checkout-pay-method-opt input{width:auto; min-height:auto; margin:0;}
.checkout-pay-method-opt.selected{border-color:var(--blue-dim); color:var(--text);}
.checkout-pay-method-opt:hover{border-color:var(--blue-dim);}

/* ---------- pack creator modal ---------- */
.pack-search-results{
  position:relative; margin-top:4px; background:var(--bg-elevated-2); border:1px solid var(--border);
  border-radius:8px; max-height:200px; overflow-y:auto;
}
.pack-search-result{padding:9px 12px; font-size:13.5px; cursor:pointer; border-bottom:1px solid var(--border-soft);}
.pack-search-result:last-child{border-bottom:none;}
.pack-search-result:hover{background:var(--bg-elevated);}
.pack-component-row{
  display:flex; align-items:center; gap:8px; padding:8px 10px; margin-bottom:6px;
  background:var(--bg); border:1px solid var(--border-soft); border-radius:8px;
}
.pack-component-name{flex:1; font-size:13.5px; color:var(--text);}
.pack-component-qty{width:60px !important; min-height:34px !important; padding:6px 8px !important; text-align:center; flex-shrink:0;}
.pack-component-row-custom{display:block;}
.pack-component-custom-textarea{width:100%; min-height:70px; resize:vertical; font-family:inherit; line-height:1.5;}
.pack-component-row-custom-head{display:flex; align-items:center; gap:8px; margin-top:8px;}
.pack-component-row-custom-head .pack-component-qty{margin-right:auto;}
.btn-icon-remove{
  background:transparent; border:none; color:var(--text-faint); font-size:20px; line-height:1;
  padding:2px 6px; cursor:pointer; flex-shrink:0;
}
.btn-icon-remove:hover{color:var(--red);}
.pack-preview-row{
  display:flex; align-items:center; justify-content:space-between; padding:7px 0;
  border-bottom:1px solid var(--border-soft); font-size:13.5px;
}
.pack-preview-row:last-child{border-bottom:none;}
.pack-preview-row strong{font-family:'JetBrains Mono'; color:var(--blue);}

.login-shell{
  max-width:380px; margin:48px auto; background:var(--bg-elevated); border:1px solid var(--border-soft);
  border-radius:var(--radius-lg); padding:24px 20px; text-align:center;
}
.login-shell h2{margin-bottom:6px; font-size:20px;}
.login-shell p{color:var(--text-faint); font-size:12.5px; margin-bottom:18px; text-transform:none;}

.profile-page{display:flex; flex-direction:column; gap:18px;}
.account-card{
  display:flex; align-items:center; gap:12px; background:var(--bg-elevated);
  border:1px solid var(--border-soft); border-radius:var(--radius-lg); padding:14px 16px; flex-wrap:wrap;
}
.account-avatar{
  width:42px; height:42px; border-radius:50%; background:var(--blue-soft); border:1px solid var(--blue-dim);
  color:var(--blue); display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:600;
  font-family:'Inter'; flex-shrink:0;
}
.account-info{flex:1; min-width:140px;}
.account-email{font-size:14px; font-weight:600; font-family:'Inter'; word-break:break-all;}
.account-role{font-size:11.5px; color:var(--text-faint); font-family:'JetBrains Mono'; text-transform:uppercase; letter-spacing:0.04em; margin-top:2px;}
.my-profile-coin-card{
  background:rgba(245,185,66,0.06); border:1px solid #6B4E12; border-radius:var(--radius-lg);
  padding:20px; text-align:center;
}
.my-profile-coin-label{font-size:12px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:6px;}
.my-profile-coin-value{font-family:'Barlow Condensed'; font-weight:800; font-size:40px; color:#F5B942; line-height:1;}
.my-profile-coin-sub{font-size:12px; color:var(--text-faint); margin-top:8px;}

.toast{
  position:fixed; bottom:max(16px, env(safe-area-inset-bottom)); left:16px; right:16px;
  background:var(--bg-elevated-2); border:1px solid var(--teal);
  color:var(--text); padding:12px 16px; border-radius:8px; font-size:13px; z-index:200;
  box-shadow:var(--shadow); display:flex; align-items:center; gap:8px;
}
.toast.err{border-color:var(--red);}
.toast::before{content:'✓'; color:var(--teal); font-weight:700; flex-shrink:0;}
.toast.err::before{content:'!'; color:var(--red);}

/* ---------- tablet and up ---------- */
@media (min-width: 640px){
  .game-grid{grid-template-columns:repeat(2, 1fr);}
  .admin-stats-row{grid-template-columns:repeat(3, minmax(140px,1fr));}
  .field-row{grid-template-columns:1fr 1fr;}
  .modal-overlay{align-items:center; padding:24px;}
  .modal{border-radius:var(--radius-lg);}
  .modal-foot{flex-direction:row; justify-content:flex-end;}
  .modal-foot .btn{width:auto;}
  .toast{left:24px; right:auto; bottom:24px; max-width:340px;}
  .basket-drawer{width:400px;}
}

/* ---------- desktop: header becomes one row, search inline ---------- */
@media (min-width: 860px){
  :root{--gap-page:24px;}
  .topbar-row1{gap:20px; flex-wrap:nowrap;}
  .hamburger-btn{display:none;}
  .desktop-nav{display:flex;}
  .search-wrap{flex-basis:auto; order:0; margin-top:0; flex:1; max-width:460px; margin-left:auto;}
  .header-icons{margin-left:0;}
  .game-grid{grid-template-columns:repeat(3, 1fr);}
  .hero{padding:56px 0 40px;}
  .admin-shell{flex-direction:row;}
  .admin-sidebar{
    flex-direction:column; width:200px; border-bottom:none; border-right:1px solid var(--border-soft);
    padding:24px 14px; overflow-x:visible; position:sticky; top:57px; align-self:flex-start;
    height:calc(100vh - 57px);
  }
  .admin-sidebar-label{display:block; font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.06em; padding:0 10px 10px;}
  .admin-nav-btn{width:100%; border-color:transparent;}
  .publish-banner{flex-direction:row; align-items:center; justify-content:space-between;}
  .publish-banner .btn{align-self:center; flex-shrink:0;}
  .admin-nav-btn:hover{background:var(--bg-elevated-2);}
  .admin-main{padding:28px 28px 60px;}
  .admin-game-actions{width:auto; border-top:none; margin-top:0; padding-top:0; margin-left:auto;}
  .admin-item-row{flex-direction:row; align-items:center;}
  .admin-item-name{flex:1.6;}
  .admin-item-meta-row{gap:18px; flex:1.4;}
  .admin-item-actions{border-top:none; margin-top:0; padding-top:0; margin-left:auto; flex-shrink:0;}
  .admin-list-head{
    display:flex; gap:14px; padding:0 14px; margin-bottom:8px; font-size:11px; color:var(--text-faint);
    text-transform:uppercase; letter-spacing:0.05em;
  }
}

/* ============================================================
   ITEM DETAIL PAGE — buy_<gameId>_<slug>.html
   Hero: title + variant selector + buy panel on one side, image
   on the other (stacks on mobile). Below: content cards (key
   stats, quick facts, why-buy, FAQ, related items) — the same
   pattern across every generated item page.
   ============================================================ */
.item-hero{
  display:grid; grid-template-columns:1fr; gap:22px; margin-bottom:36px;
}
/* Mobile only: show the image/price/buy button/ladder selector BEFORE
   the Key Stats / Why Buy / etc. text blocks, so a phone visitor sees
   the actual product and can buy it without scrolling through
   paragraphs first. This only reorders how they're painted — the
   underlying HTML order (content first, then the buy card) is
   unchanged, and the desktop breakpoint below resets both back to
   their natural order, since desktop already shows them side by side
   and has no stacking-order question to begin with. */
.item-hero-main{order:2;}
.item-hero-side{order:1;}
.item-hero-main{display:flex; flex-direction:column; gap:18px;}
/* Right column: buy card stays at the top, Quick Facts/Related stack
   below it in the same column — this is the whole right-hand side of
   the page now, not just the area next to the image. */
.item-hero-side{display:flex; flex-direction:column; gap:18px;}
.item-hero-eyebrow{
  font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--blue);
  letter-spacing:0.08em; text-transform:uppercase;
}
.item-hero-sub{font-size:14px; color:var(--text-dim); line-height:1.6; font-family:'Inter'; text-transform:none; max-width:640px;}
.item-buy-title{font-size:clamp(22px,5vw,30px); line-height:1.15; margin:0 0 2px;}

/* The ladder-type dropdown now sits directly under "Add to basket" and
   is deliberately given the exact same classes (btn btn-primary
   btn-block) as that button so it inherits its color/padding/font —
   this just overrides the <select>'s native browser chrome (the
   default arrow, inset shadow, alignment) so it actually reads as a
   second button rather than a form control sitting in button colors. */
.variant-select-btn{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  text-align:center; text-align-last:center; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0E1A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:15px;
  padding-right:38px;
}
.variant-select-btn:focus{outline:2px solid var(--blue-dim); outline-offset:1px;}
/* The closed box stays bright blue on purpose (matches "Add to
   basket" above it) — this only themes the OPEN dropdown list, which
   browsers otherwise render with their own default white/light
   styling regardless of the closed box's appearance. Same standard
   CSS limits apply here as the other select on this site: reliable
   in Chrome/Edge, partial in Firefox, possibly untouched in Safari. */
.variant-select-btn option{
  background:var(--bg-elevated); color:var(--text);
}
.variant-select-btn option:checked{
  background:var(--blue-soft); color:var(--text);
}
/* Draws the eye to the selector when nothing's picked yet — an item
   page landing on a real choice instead of a silently pre-picked
   ladder/league is the whole point of this state, so it needs to
   actually get noticed rather than blend in as just another button. */
.variant-select-needs-choice{
  animation: variant-select-pulse 1.2s ease-in-out infinite;
  border-color: var(--red) !important;
}
@keyframes variant-select-pulse{
  0%, 100% { box-shadow: 0 0 0 0 rgba(241, 85, 76, 0.8), 0 0 8px 1px rgba(241, 85, 76, 0.55); }
  50% { box-shadow: 0 0 0 9px rgba(241, 85, 76, 0), 0 0 26px 6px rgba(241, 85, 76, 0.9); }
}
@media (prefers-reduced-motion: reduce){
  .variant-select-needs-choice{ animation: none; box-shadow: 0 0 16px 4px rgba(241, 85, 76, 0.75); }
}

.item-buy-card{
  background:var(--bg-elevated); border:1px solid var(--border-soft); border-radius:var(--radius-lg);
  padding:18px; display:flex; flex-direction:column; gap:10px;
}
/* Holds the item icon. D2R item/rune sprites are small native-resolution
   images (often well under 100px) — stretching them to fill a large box
   looks blurry/pixelated, so this frames the image at a sensible display
   size instead of scaling it up to fill all available space. */
.item-buy-img{
  position:relative;
  width:100%; aspect-ratio:1/1; max-height:280px; border-radius:var(--radius);
  background:var(--bg-elevated-2); border:1px solid var(--border-soft);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.item-buy-img img{
  max-width:65%; max-height:65%; width:auto; height:auto; object-fit:contain;
  image-rendering:auto;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,0.45));
}
.item-buy-meta{font-family:'JetBrains Mono'; font-size:10.5px; color:var(--text-faint); letter-spacing:0.04em; text-transform:uppercase; line-height:1.9;}
/* D2R "Runewords Packs" category disclaimer — sits right above the
   Add to basket button, see build of runesOnlyNoticeHtml in
   drawItemPage (shared.js). Bold white text was specifically asked
   for here since this is a "don't be surprised by what you get"
   notice, not routine copy — it should read as more important than
   the muted text around it. */
.runeword-runes-only-notice{
  font-size:13px; font-weight:700; color:var(--text); line-height:1.5;
  background:var(--bg-elevated-2); border:1px solid var(--border-soft); border-radius:var(--radius-md, 8px);
  padding:10px 12px; margin-top:6px;
}
.item-buy-name{font-size:19px; line-height:1.2;}
.item-buy-price{font-family:'JetBrains Mono'; font-size:26px; color:var(--blue); font-weight:600;}
.item-buy-price .unit{font-size:11px; color:var(--text-faint); font-weight:400; margin-left:6px; text-transform:none;}
.item-buy-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px;}
.item-buy-list li{font-size:12.5px; color:var(--text-dim); line-height:1.5; padding-left:14px; position:relative;}
.item-buy-list li::before{content:''; position:absolute; left:0; top:7px; width:5px; height:5px; border-radius:50%; background:var(--blue);}
.item-buy-recipe{font-family:'JetBrains Mono'; font-size:13px; color:var(--teal); letter-spacing:0.02em;}

.content-block{
  background:var(--bg-elevated); border:1px solid var(--border-soft); border-radius:var(--radius-lg);
  padding:20px; margin-bottom:18px;
}
.content-block h2{font-size:17px; color:var(--text); margin-bottom:12px;}
.content-block p{font-size:13.5px; color:var(--text-dim); line-height:1.7; font-family:'Inter'; text-transform:none; margin:0 0 10px;}
.content-block a{color:var(--blue); font-weight:700; text-decoration:none;}
/* The rule above is for genuine prose links (FAQ, About, etc.) — a
   button that happens to be an <a> tag (like a "Back to store" link
   styled as a button) shouldn't inherit that treatment, since it
   already has its own intentional color from .btn/.btn-primary. Same
   specificity as the rule above, so this has to come after it in the
   file to actually win — this is what was making a blue-background
   .btn-primary link show blue text on blue (invisible until selected)
   whenever it was placed inside a .content-block. */
.content-block a.btn{color:var(--text); font-weight:600;}
.content-block a.btn-primary{color:#0A0E1A;}
.content-block a:hover{text-decoration:underline;}
.content-block p:last-child{margin-bottom:0;}
.content-block ul{list-style:none; margin:0 0 10px; padding-left:0; display:flex; flex-direction:column; gap:6px;}
.content-block ul:last-child{margin-bottom:0;}
.content-block li{font-size:13.5px; color:var(--text-dim); line-height:1.6;}
.discord-link{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--blue-soft); color:var(--blue); border:1px solid var(--blue-dim);
  padding:8px 16px; border-radius:999px; font-weight:600; font-size:13.5px;
  text-decoration:none; transition:background .15s ease, border-color .15s ease;
}
.discord-link:hover{background:var(--blue-dim); color:#fff;}
.content-block h3{font-size:13px; color:var(--text); margin:14px 0 8px; text-transform:uppercase; letter-spacing:0.03em;}
.content-block h3:first-child{margin-top:0;}

/* ---------- inline pencil editing (admin-only, directly on the real item page) ---------- */
.inline-edit-wrap{position:relative;}
.inline-edit-pencil{
  position:absolute; top:14px; right:14px; z-index:2;
  width:28px; height:28px; border-radius:7px; display:flex; align-items:center; justify-content:center;
  background:var(--bg-elevated-2); border:1px solid var(--border); color:var(--text-faint);
  opacity:0; transition:opacity .15s ease, color .15s ease, border-color .15s ease;
}
.inline-edit-wrap:hover .inline-edit-pencil{opacity:1;}
.inline-edit-pencil:hover{color:var(--blue); border-color:var(--blue-dim);}
/* Always visible on touch devices, since there's no hover to reveal it on tap-only screens. */
@media (hover: none){
  .inline-edit-pencil{opacity:0.6;}
}
.inline-edit-empty{font-size:13px; color:var(--text-faint); font-style:italic; margin:0;}
.item-hero-sub.inline-edit-empty{font-style:italic;}

.inline-edit-form{
  background:var(--bg-elevated); border:1px solid var(--blue-dim); border-radius:var(--radius-lg);
  padding:18px; margin-bottom:18px; box-shadow:0 0 0 3px var(--blue-soft);
}
.inline-edit-form h2{font-size:17px; color:var(--text); margin-bottom:12px;}
.inline-edit-form textarea, .inline-edit-form input[type="text"]{
  width:100%; background:var(--bg-elevated-2); border:1px solid var(--border); color:var(--text);
  padding:9px 10px; border-radius:8px; font-size:13.5px; font-family:'Inter'; margin-bottom:10px;
}
.inline-edit-form textarea{min-height:54px; resize:none; overflow:hidden; line-height:1.5;}
.inline-edit-label{
  display:block; font-size:10.5px; color:var(--text-faint); text-transform:uppercase;
  letter-spacing:0.05em; margin-bottom:6px; font-family:'JetBrains Mono';
}
.inline-edit-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:6px;}

.quick-facts{
  background:var(--bg-elevated-2); border:1px solid var(--border-soft); border-radius:var(--radius-lg);
  padding:18px; align-self:start;
}
.quick-facts h2{font-size:15px; margin-bottom:14px;}
.quick-facts-row{display:flex; flex-direction:column; gap:3px; margin-bottom:14px;}
.quick-facts-row:last-of-type{margin-bottom:10px;}
.quick-facts-label{font-family:'JetBrains Mono'; font-size:10px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.05em;}
.quick-facts-val{font-size:13.5px; color:var(--text); font-weight:600;}
.quick-facts-note{font-size:12px; color:var(--text-faint); line-height:1.55; font-style:italic; margin:0;}

.faq-grid{display:grid; grid-template-columns:1fr; gap:18px;}
.faq-q{font-size:13.5px; color:var(--text); font-weight:600; margin-bottom:6px;}
.faq-a{font-size:13px; color:var(--text-dim); line-height:1.6;}

.related-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
.related-list a{
  display:block; font-size:13.5px; color:var(--blue); padding:8px 10px; border-radius:8px;
  background:var(--bg-elevated-2); border:1px solid var(--border-soft);
}
.related-list a:hover{border-color:var(--blue-dim);}

.item-detail-foot-crumb{margin-top:36px;}

@media (min-width: 760px){
  .item-hero{grid-template-columns:1.4fr 1fr; align-items:start;}
  .item-hero-main{order:initial;}
  .item-hero-side{order:initial;}
  .faq-grid{grid-template-columns:1fr 1fr;}
}

/* ---------- rich text editor (guides) ---------- */
.rte-toolbar{
  display:flex; gap:4px; flex-wrap:wrap; padding:8px; margin-bottom:8px;
  background:var(--bg-elevated-2); border:1px solid var(--border); border-radius:8px 8px 0 0;
}
.rte-toolbar button{
  background:transparent; border:1px solid transparent; color:var(--text-dim);
  width:32px; height:32px; border-radius:6px; font-size:13px; font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-family:'Inter';
}
.rte-toolbar button:hover{background:var(--bg-elevated); color:var(--text); border-color:var(--border);}
.rte-toolbar button.active{background:var(--blue-soft); color:var(--blue); border-color:var(--blue-dim);}
.rte-toolbar .rte-sep{width:1px; background:var(--border); margin:4px 2px;}
.rte-surface{
  min-height:280px; max-height:600px; overflow-y:auto;
  background:var(--bg-elevated-2); border:1px solid var(--border); border-top:none;
  border-radius:0 0 8px 8px; padding:14px 16px; font-size:14px; line-height:1.7;
  color:var(--text); font-family:'Inter'; margin-bottom:10px;
}
.rte-surface:focus{outline:none; box-shadow:inset 0 0 0 2px var(--blue-dim);}
.rte-surface h2{font-size:19px; margin:18px 0 8px;}
.rte-surface h3{font-size:15.5px; margin:14px 0 6px;}
.rte-surface p{margin:0 0 12px;}
.rte-surface a{color:var(--blue);}
.rte-surface ul, .rte-surface ol{margin:0 0 12px; padding-left:22px;}
.rte-surface img{max-width:100%; border-radius:8px; margin:8px 0;}
.rte-surface iframe{max-width:100%; border-radius:8px; margin:8px 0;}
.rte-surface blockquote{
  border-left:3px solid var(--blue-dim); margin:0 0 12px; padding:4px 0 4px 14px; color:var(--text-dim);
}