/* ============================================================================
   XBX Prices — green rebrand theme (site-wide override).
   Loaded AFTER style_v48.css in header.php so its rules win on equal specificity.
   Implements the XBXPrices.dc.html design system:
     - Dark base #0B0B0C, text #EBEBEC, Xbox-green accent #28DB6A
     - Chakra Petch (display) + Hanken Grotesk (body)
     - Sticky blurred nav, rounded #161617 surfaces, vertical poster game cards,
       dark footer.
   Targets the EXISTING markup classes (.header / .game-container / .pp-foot-* …)
   so no template rewrite is needed beyond index.php's homepage body.
   ========================================================================== */

:root{
  --xbx-bg:#0B0B0C;
  --xbx-surface:#161617;
  --xbx-surface-2:#101011;
  --xbx-line:rgba(255,255,255,0.08);
  --xbx-line-2:rgba(255,255,255,0.12);
  --xbx-text:#EBEBEC;
  --xbx-text-2:#A9A9AE;
  --xbx-muted:#8D8D93;
  --xbx-faint:#82868d;
  --xbx-green:#28DB6A;
  --xbx-green-hi:#34e878;
  --xbx-green-line:rgba(40,219,106,0.28);
  --xbx-red:#FF5C6A;
  --xbx-gold:#F6B23C;
  --xbx-disp:'Chakra Petch',sans-serif;
  --xbx-body:'Hanken Grotesk',Arial,sans-serif;
}

/* ---------- Base ---------------------------------------------------------- */
html,body{background:var(--xbx-bg)!important;color:var(--xbx-text)!important;}
body{font-family:var(--xbx-body)!important;-webkit-font-smoothing:antialiased;}
::selection{background:rgba(40,219,106,0.30);}
a{color:var(--xbx-text-2);}
a:hover{color:var(--xbx-text);}
.width{max-width:1280px!important;}
/* The light content cards from the PS theme → dark surfaces. */
.box,.page{background:transparent!important;border:none!important;}
.box.wrap,.box.wrap-justify-left{background:transparent!important;}

/* Section title bars ------------------------------------------------------- */
.big-title,.title{
  background:transparent!important;border:none!important;color:#F6F6F7!important;
  font-family:var(--xbx-disp)!important;font-weight:700!important;letter-spacing:-0.01em;
  text-transform:none!important;font-size:25px!important;padding:0!important;margin:0 0 20px!important;
}
.big-title.pp-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;}
.pp-more{
  color:var(--xbx-green)!important;font-family:var(--xbx-body)!important;font-weight:700!important;
  font-size:13.5px!important;letter-spacing:0!important;text-transform:none!important;white-space:nowrap;
}
.pp-more:hover{color:var(--xbx-green-hi)!important;text-decoration:underline;}
.center-xs.pagin a,.pagin a b{color:var(--xbx-green)!important;}

/* ============================================================================
   NAV (header.php .header)
   ========================================================================== */
.header{
  position:sticky!important;top:0;z-index:200;
  background:rgba(11,11,12,0.82)!important;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--xbx-line)!important;
  box-shadow:none!important;
}
.headerLinkCustom,
.header .dropdown-toggle{
  color:#CFCFD2!important;font-family:var(--xbx-body)!important;font-weight:600!important;
  font-size:13.5px!important;border-radius:8px;
}
.headerLinkCustom:hover,
.header .dropdown-toggle:hover,
.header .dropdown-toggle:focus{color:var(--xbx-text)!important;}
/* active (PS theme set inline font-weight:bold;color:#fff → recolor to green) */
.headerLinkCustom[style*="#fff"],
.header .dropdown-toggle[style*="#fff"]{color:var(--xbx-green)!important;}
.header .caret{border-top-color:#8D8D93;}

/* dropdown menus → dark rounded popovers */
.header .dropdown-menu,
.dropdown-menu{
  background:var(--xbx-surface)!important;border:1px solid var(--xbx-line-2)!important;
  border-radius:12px!important;box-shadow:0 20px 44px -16px rgba(0,0,0,0.8)!important;
  padding:7px!important;
}
.dropdown-menu>li>a{color:var(--xbx-text)!important;border-radius:8px;font-size:13.5px;padding:9px 11px;}
.dropdown-menu>li>a:hover{background:rgba(40,219,106,0.08)!important;color:var(--xbx-text)!important;}
.dropdown-menu .divider{background:var(--xbx-line)!important;}
.dropdown-menu>.active>a{background:rgba(40,219,106,0.12)!important;color:var(--xbx-green)!important;}

/* in-header compact search (non-home pages): animated search bar (vanilla, no
   SVG goo filter — that left a gray edge halo). Collapsed it's a near-black 44px
   magnifier circle with a transparent border (no gray box). On hover/focus (or
   when it carries a query) the form stretches 44px→250px into a full dark pill
   with border + green focus ring, and the magnifier turns green. The real
   <input name=q> + autocomplete (.pp-ac) ride crisp on top, untouched. */
.header-search.pp-goo{
  position:relative;display:inline-flex;align-items:center;
  height:40px;width:44px;
  transition:width .38s cubic-bezier(.22,1,.36,1);
}
.header-search.pp-goo:hover,
.header-search.pp-goo:focus-within,
.header-search.pp-goo.is-filled{width:250px;}

/* clean pill (no SVG goo filter → crisp edges, zero gray halo). The whole form
   animates 44px→250px; the pill fills it and carries the border + focus ring. */
.header-search.pp-goo .pp-goo-blobs{position:absolute;inset:0;z-index:1;pointer-events:none;}
.header-search.pp-goo .pp-goo-pill{
  position:absolute;left:0;top:0;height:40px;width:100%;border-radius:999px;
  background:var(--xbx-surface-2);border:1px solid transparent;box-sizing:border-box;
  transition:background .2s ease,border-color .2s ease,box-shadow .2s ease;
}
/* open (hover / focus / has-query): lift to the dark surface + show the border */
.header-search.pp-goo:hover .pp-goo-pill,
.header-search.pp-goo:focus-within .pp-goo-pill,
.header-search.pp-goo.is-filled .pp-goo-pill{
  background:var(--xbx-surface);border-color:var(--xbx-line-2);
}
.header-search.pp-goo:focus-within .pp-goo-pill{
  border-color:var(--xbx-green);box-shadow:0 0 0 4px rgba(40,219,106,0.16);
}

/* magnifier (crisp, above the blobs) — decorative; Enter / click submits */
.header-search.pp-goo .pp-goo-ico{
  position:absolute;left:0;top:0;width:40px;height:40px;z-index:2;
  display:flex;align-items:center;justify-content:center;
  background:transparent!important;border:none!important;color:var(--xbx-muted)!important;
  pointer-events:none;transition:color .25s ease;
}
.header-search.pp-goo .pp-goo-ico svg{transition:transform .42s cubic-bezier(.34,1.56,.64,1);}
.header-search.pp-goo:hover .pp-goo-ico,
.header-search.pp-goo:focus-within .pp-goo-ico,
.header-search.pp-goo.is-filled .pp-goo-ico{color:var(--xbx-green)!important;}
.header-search.pp-goo:focus-within .pp-goo-ico svg{transform:scale(1.08) rotate(-6deg);}

/* the real input (crisp, on top) — transparent so the gooey pill shows through */
.header-search.pp-goo input{
  position:relative;z-index:3;width:100%;height:40px;
  padding:0 14px 0 40px;box-sizing:border-box;
  background:transparent!important;border:none!important;outline:none;border-radius:999px;
  color:var(--xbx-text)!important;font-family:var(--xbx-body)!important;
  font-size:13.5px!important;line-height:40px;cursor:pointer;
}
.header-search.pp-goo:focus-within input{cursor:text;}
.header-search.pp-goo input::placeholder{color:var(--xbx-muted)!important;opacity:0;transition:opacity .25s ease .08s;}
.header-search.pp-goo:hover input::placeholder,
.header-search.pp-goo:focus-within input::placeholder,
.header-search.pp-goo.is-filled input::placeholder{opacity:1;}

/* Legacy full-width ".search-outer" search band (148px) under the header. The homepage
   already hides it (its hero has its own search) and every other page carries the compact
   in-header search — so on inner pages this band was just an empty 148px gap below the
   header (its input collapsed to ~28px, invisible). Mobile already hides it; do the same on
   desktop and reclaim the space (drop the -8px tuck that paired with the band). */
.search-outer{display:none!important;}
.page{margin-top:10px!important;}

/* region pill / account chips */
.pp-region-pill,.pp-acct-btn{
  background:var(--xbx-surface)!important;border:1px solid var(--xbx-line-2)!important;border-radius:10px!important;
}
.region-dropdown .dropdown-toggle{color:var(--xbx-text)!important;}

/* --- Region country picker (desktop 3-column dropdown) → dark theme. The PS
   theme left a white search box, light section headers, lavender hover and a
   blue selected row; recolour them all onto the Xbox dark + green palette.
   `!important` is required to beat the inline border colours in the markup. */
.region-dropdown .region-search-wrap{background:var(--xbx-surface)!important;border-bottom:1px solid var(--xbx-line)!important;}
.region-dropdown .region-search{
  background:var(--xbx-bg)!important;border:1px solid var(--xbx-line-2)!important;
  border-radius:10px!important;color:var(--xbx-text)!important;
}
.region-dropdown .region-search::placeholder{color:var(--xbx-muted)!important;}
.region-dropdown .region-search:focus{
  background:var(--xbx-surface)!important;border-color:var(--xbx-green)!important;
  box-shadow:0 0 0 3px rgba(40,219,106,0.18)!important;outline:none;
}
.region-dropdown .row .col-xs-4{border-right-color:var(--xbx-line)!important;}
.region-dropdown .dropdown-header{
  color:var(--xbx-muted)!important;text-transform:uppercase;
  letter-spacing:.6px;font-size:12px!important;font-weight:700;
}
.multi-column-dropdown li a{color:var(--xbx-text)!important;border-radius:8px;}
.multi-column-dropdown li a:hover{background:rgba(40,219,106,0.10)!important;color:var(--xbx-text)!important;}
.region-dropdown li.active,
.region-dropdown li.active a,
.region-dropdown li.active a:hover,
.region-dropdown .multi-column-dropdown li.active a{
  background:rgba(40,219,106,0.16)!important;color:var(--xbx-green)!important;
}
.region-dropdown .region-no-results{color:var(--xbx-muted)!important;}
.region-dropdown .dropdown-menu .divider{background:var(--xbx-line)!important;}

/* Logged-out account control → clean green sign-in CTA pill (design button language). */
.header .pp-acct-login{
  display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 16px;
  background:var(--xbx-green)!important;color:#06140b!important;
  font-family:var(--xbx-body)!important;font-weight:800!important;font-size:13.5px!important;
  border-radius:10px!important;text-decoration:none!important;white-space:nowrap;
  box-shadow:0 6px 18px -6px rgba(40,219,106,0.6);transition:background .15s ease;
}
.header .pp-acct-login:hover,.header .pp-acct-login:focus{background:var(--xbx-green-hi)!important;color:#06140b!important;text-decoration:none!important;}
.header .pp-acct-login svg{stroke:#06140b;display:block;}
.header .pp-acct-login .pp-acct-mini{display:none;}
@media(max-width:600px){
  .header .pp-acct-login{padding:0 12px;}
  .header .pp-acct-login .pp-acct-full{display:none;}
  .header .pp-acct-login .pp-acct-mini{display:inline;}
}

/* Header polish: smaller wordmark + everything vertically centred on one axis.
   Logo inline style is height:53px (header.php) — shrink it and let the flex row
   centre it cleanly. Vertical-centring scoped to the desktop bar (>=1200px) so the
   mobile 2-tier wrap layout (style_v48 @media <=1199) is untouched. */
.header .logo img,.header .logo-small img{height:40px!important;width:auto!important;}
.header .logo,.header .logo-small{height:40px!important;}
@media(min-width:1200px){
  .header{height:60px!important;}
  .header>.width{display:flex!important;align-items:center!important;min-height:60px;}
  .header .logo,.header .logo-small{margin-top:0!important;margin-bottom:0!important;}
  .header .region-dropdown{height:auto!important;display:flex!important;align-items:center!important;}
  .header .pp-acct-login{align-self:center!important;}
}

/* ============================================================================
   GAME CARDS  →  vertical poster cards (design GameCard.dc.html)
   The PS theme renders a 438px-wide HORIZONTAL tile; flip it to a vertical card
   that flows in a responsive grid.
   ========================================================================== */
.box.wrap,.box.wrap-justify-left{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(186px,1fr));
  align-items:stretch!important;       /* each card fills its row height, even with less content */
  gap:16px!important;
  float:none!important;
}
.box.wrap::after{content:none!important;}
/* In-grid NitroPay ad slots reserve a full card-sized grid cell. When the ad never fills
   (adblocker / no creative / dev localhost) the watcher tags it .pp-collapsed and hides the
   holder, but the cell stayed — leaving a blank card-shaped HOLE mid-grid. Drop the whole
   cell from the grid once collapsed so the real cards reflow with no gap. A filled ad gets
   .pp-filled instead, so live ad cells are untouched. */
.box.wrap > *:has(.pp-ad.pp-collapsed),
.box.wrap-justify-left > *:has(.pp-ad.pp-collapsed){display:none!important;}
.game-container-lo,.game-container-li{display:block!important;width:auto!important;height:100%!important;float:none!important;margin:0!important;border:none!important;
  /* content-visibility:auto (from style_v48) applies PAINT containment, which clips the
     card's green hover glow to this wrapper's box. Default square corners → hard green
     rectangles at every corner. Round the wrapper to 16px so the clip follows the card. */
  border-radius:16px!important;}
/* content-visibility:auto rides over from style_v48 with the OLD horizontal-card
   placeholder (contain-intrinsic-size …172px). The vertical Xbox cards are ~421px tall,
   so a skipped/off-screen card collapsed to 172px and left a blank slot + grid gap.
   Re-state the intrinsic size to match the real card (auto = remember once rendered). */
.game-container-lo{contain-intrinsic-size:auto 186px auto 421px!important;}
.game-container-li{contain-intrinsic-size:auto 186px auto 455px!important;}

.game-container,.game-container.game-even,.game-container.game-odd{
  display:flex!important;flex-direction:column!important;
  width:auto!important;height:100%!important;max-width:none!important;
  background:var(--xbx-surface)!important;border:1px solid var(--xbx-line)!important;
  border-radius:16px!important;overflow:hidden!important;padding:0!important;
  transform:translateZ(0);   /* own compositing layer → kills the 1px corner bleed where the
                                square-cornered cover pokes past the rounded overflow clip */
  color:var(--xbx-text)!important;text-decoration:none!important;
  transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s ease,border-color .18s ease;
}
/* Hover lift/scale fires on the WRAPPER (grid item), not the inner anchor, so the cover and the
   bottom action buttons share ONE stable hover state and transform together as a unit. Driving it
   off the anchor made the card un-hover the instant the cursor crossed onto a button (a sibling
   stacked on top) → scale toggled → flicker ("preskakuje") that left buttons mid-transition.
   Border + glow stay on the visible card (the anchor). */
.game-container-lo,.game-container-li{transition:transform .18s cubic-bezier(.2,.7,.3,1);}
.game-container-lo:hover{transform:translateY(-3px) scale(1.02);z-index:2;}
/* Logged-in cards carry the bottom action bar. ANY hover movement (scale OR lift) slides the bar
   out from under the cursor → un-hover → drop → re-hover → flicker. So these cards DON'T move on
   hover; the green glow ring alone is the hover feedback, and the bar stays put under the cursor. */
.game-container-li:hover{z-index:2;}
.game-container-lo:hover>.game-container,.game-container-li:hover>.game-container{
  padding:0!important;border-color:#2BE372!important;
  /* border(1px)+ring(1px) = one clean 2px green edge concentric with the 16px radius
     (the old 3px band notched at the corner); softer outer glow. */
  box-shadow:0 0 0 1px #2BE372,0 0 24px -2px rgba(43,227,114,0.45),0 18px 36px -16px rgba(0,0,0,0.85)!important;
}

/* cover image: full-width 3:4 */
.game-container .game-tile{
  float:none!important;width:100%!important;height:auto!important;aspect-ratio:584/800;
  flex:0 0 auto!important;   /* lock the 584:800 poster height; don't let the flex column shrink it */
  position:relative;overflow:hidden;background:#12161b;
  border-top-left-radius:16px;border-top-right-radius:16px;   /* match card so cover corners clip clean */
}
.game-container .game-tile img{
  width:100%!important;height:100%!important;object-fit:cover;display:block;
}
/* scrims: dark wash top (discount/score badges) + bottom (platform pill) so every
   overlay stays legible even over bright cover art (e.g. white "membership" cases). */
.game-container .game-tile::after{
  content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(5,7,9,0.82) 0%,rgba(5,7,9,0.32) 24%,rgba(5,7,9,0) 46%),
    linear-gradient(to top,rgba(5,7,9,0.84) 0%,rgba(5,7,9,0) 32%);
}

/* on-cover badges → rounded, design colours; all ride above the scrim (z-index:4) */
.game-tile-platform,.game-tile-platform-shiftup{
  bottom:10px!important;left:10px!important;border:1px solid rgba(255,255,255,0.18)!important;
  background:rgba(8,9,11,0.62)!important;color:#EBEBEC!important;border-radius:6px!important;
  font-family:var(--xbx-disp)!important;font-size:9px!important;letter-spacing:.05em;font-weight:600!important;
  padding:4px 7px!important;z-index:4!important;
  backdrop-filter:blur(7px) saturate(1.1);-webkit-backdrop-filter:blur(7px) saturate(1.1);
}
/* critic-score / DLC chip → top-RIGHT so it clears the discount cluster (top-left) */
.game-tile-dlcbox{
  top:10px!important;right:10px!important;left:auto!important;border:1px solid rgba(255,255,255,0.18)!important;border-radius:8px!important;
  background:rgba(8,9,11,0.66)!important;color:#EBEBEC!important;font-size:11px!important;font-weight:700!important;padding:4px 8px!important;z-index:4!important;
  backdrop-filter:blur(7px) saturate(1.1);-webkit-backdrop-filter:blur(7px) saturate(1.1);
  box-shadow:0 2px 8px -3px rgba(0,0,0,0.6);
}
/* discount cluster → separate compact pills (design GameCard), not one red block */
.game-tile-discount{
  top:10px!important;left:10px!important;right:auto!important;text-align:left!important;
  background:none!important;border:none!important;padding:0!important;z-index:4!important;
  display:flex!important;flex-direction:column;align-items:flex-start;gap:5px;
}
.game-tile-discount .xbx-disc{
  font-family:var(--xbx-disp)!important;font-weight:700;font-size:12.5px;line-height:1;
  padding:4px 9px;border-radius:7px;background:linear-gradient(180deg,#C2474E,#9E3138);color:#fff;
  box-shadow:0 2px 8px -3px rgba(0,0,0,0.55);text-shadow:0 1px 1px rgba(0,0,0,0.35);
}
/* "Lowest ever" → Xbox green, the on-brand "best deal" signal */
.game-tile-discount .xbx-atl{
  font-family:var(--xbx-disp)!important;font-weight:700;font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;line-height:1;padding:4px 8px;border-radius:7px;
  background:linear-gradient(180deg,#34E878,#15B656);color:#052712;
  box-shadow:0 2px 9px -2px rgba(40,219,106,0.5);
}
.game-tile-discount .xbx-ends{
  font-family:var(--xbx-body)!important;font-weight:600;font-size:10px;line-height:1.1;
  padding:4px 8px;border-radius:7px;background:rgba(8,9,11,0.60);color:#EBEBEC;border:1px solid rgba(255,255,255,0.18);
  backdrop-filter:blur(7px) saturate(1.1);-webkit-backdrop-filter:blur(7px) saturate(1.1);
}
.game-tile-delist{border-radius:6px!important;}
.game-tile-plusbox{display:none!important;} /* PS Plus bar art not used in new card */
.game-tile-plusdisc{border-radius:6px!important;}

/* text block below cover */
.game-tile-info-top{
  height:auto!important;padding:13px 13px 0!important;text-align:left!important;
  /* base style_v48 draws a #DDDDDD (light-theme) divider under the price block — re-tint it to the
     dark-theme line colour so it reads as an on-brand separator, not a stray white rule. */
  border-bottom:1px solid var(--xbx-line)!important;
}
.game-name{
  color:var(--xbx-text)!important;font-family:var(--xbx-body)!important;font-weight:700!important;
  font-size:14.5px!important;line-height:1.25!important;letter-spacing:-0.01em;text-align:left!important;
  min-height:36px;margin:0!important;
}
.game-price{
  font-family:var(--xbx-disp)!important;font-weight:700!important;font-size:20px!important;
  color:var(--xbx-text)!important;text-align:left!important;margin-top:8px!important;
}
/* A discount is signalled by an inner .strike-price (original, struck through);
   free / PS-plus-free by .price-text-* fonts. Only those go green — full price stays neutral. */
.game-price:has(.strike-price),.game-price .price-text-free,.game-price .price-text-plus{color:var(--xbx-green)!important;}
.game-price:has(.strike-price){display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.strike-price{color:var(--xbx-faint)!important;font-weight:400!important;font-size:13px!important;}
.price-text-nfs{color:var(--xbx-muted)!important;}
.game-tile-info-bottom{
  padding:8px 13px 14px!important;text-align:left!important;color:var(--xbx-muted)!important;font-size:11px!important;
  height:auto!important;margin-top:auto!important;   /* pin to card bottom; extra stretch absorbs above */
}
.game-tile-trophies,.game-tile-difficulty{color:var(--xbx-muted)!important;font-size:11px!important;}
/* difficulty / completion-time ramp — the PS theme's .difficultyN colours (#600000 maroon …
   #006000 dark green) are tuned for a LIGHT card and go invisible on the dark Xbox surface.
   Re-light the whole easy→hard ramp (green→amber→red) for AA contrast on var(--xbx-surface).
   Same classes drive the clock/time colour, so short-time greens stay readable too. */
.game-tile-difficulty .difficulty-unknown{color:#9A9AA0!important;}
.game-tile-difficulty .difficulty1{color:#39D27A!important;}
.game-tile-difficulty .difficulty2{color:#5FD16C!important;}
.game-tile-difficulty .difficulty3{color:#83CE57!important;}
.game-tile-difficulty .difficulty4{color:#A6CA48!important;}
.game-tile-difficulty .difficulty5{color:#CFC23E!important;}
.game-tile-difficulty .difficulty6{color:#DDB23C!important;}
.game-tile-difficulty .difficulty7{color:#E89A40!important;}
.game-tile-difficulty .difficulty8{color:#EE7E4A!important;}
.game-tile-difficulty .difficulty9{color:#F2664F!important;}
.game-tile-difficulty .difficulty10{color:#F25A53!important;}

/* ============================================================================
   Logged-in quick-action buttons (Wishlist / Library / Hide)
   The PS theme parked these as a 438px-wide light-grey strip at top:172px — over the
   vertical Xbox card that became a broken, washed-out overlay mid-cover. Recast as a dark,
   icon-only action bar across the card BOTTOM, revealed on hover (desktop). One of each
   add/remove pair is inline display:none — we never touch `display`, so the toggle still works.
   ========================================================================== */
.wish-tile-but,.library-tile-but,.hide-tile-but{
  background:#15181c!important;color:#EBEBEC!important;border:none!important;   /* opaque — no difficulty bleed-through */
  font-size:0!important;line-height:38px!important;text-align:center;letter-spacing:0!important;
}
.wish-tile-but .spr-other,.library-tile-but .spr-other,.hide-tile-but .spr-other{
  display:inline-block;vertical-align:middle;margin:0!important;
  filter:brightness(0) invert(1);opacity:.9;   /* dark PS sprites → white on the dark bar */
}
/* opaque green wash (gradient layer OVER the solid base) so card text behind the bar
   never bleeds through the hovered button */
.wish-tile-but:hover,.library-tile-but:hover,.hide-tile-but:hover{
  background:linear-gradient(0deg,rgba(40,219,106,0.20),rgba(40,219,106,0.20)),#15181c!important;
}
.wish-tile-but:hover .spr-other,.library-tile-but:hover .spr-other,.hide-tile-but:hover .spr-other{opacity:1;}

/* Pin the bar to the card BOTTOM at ALL widths. This neutralises the legacy
   `.wish-gamebox-but{position:absolute;top:172px}` (style_v48.css) that otherwise floats
   the buttons as a broken strip MID-COVER below 1200px (our old fix was desktop-gated).
   Inset 1px on left/right/bottom so the card's 1px border + green hover ring wrap fully
   AROUND it; corners use the inner radius (16px outer − 1px border = 15px) so they nest. */
.game-container-li{position:relative;}
.wish-tile-but,.library-tile-but,.hide-tile-but{
  position:absolute!important;top:auto!important;bottom:1px!important;height:38px!important;
  width:calc((100% - 2px)/3)!important;padding:0!important;margin:0!important;
  border-top:1px solid var(--xbx-line)!important;
  transition:opacity .16s ease,background .16s ease;z-index:6;
}
.wish-tile-but{left:1px!important;border-bottom-left-radius:15px;}
.library-tile-but{left:calc((100% - 2px)/3 + 1px)!important;border-left:1px solid var(--xbx-line)!important;}
.hide-tile-but{left:auto!important;right:1px!important;border-left:1px solid var(--xbx-line)!important;border-bottom-right-radius:15px;}
/* Kill legacy `.wish-gamebox-but:hover{top:171px;padding-top:3px}` / `.hide-tile-but:hover{padding-left:6px}`
   (style_v48.css) that yanked the hovered button to mid-card. Equal specificity, loaded later → we win. */
.wish-tile-but:hover,.library-tile-but:hover,.hide-tile-but:hover{
  top:auto!important;bottom:1px!important;padding:0!important;
}

/* Hover-capable pointers (mouse, any width): bar stays hidden until the card is hovered
   (fade only — nothing to catch mid-frame). Touch devices (no hover) keep it always visible. */
@media (hover:hover){
  .wish-tile-but,.library-tile-but,.hide-tile-but{opacity:0;pointer-events:none;}
  .game-container-li:hover .wish-tile-but,
  .game-container-li:hover .library-tile-but,
  .game-container-li:hover .hide-tile-but{opacity:1;pointer-events:auto;}
}

/* ============================================================================
   FOOTER (footer.php .pp-footer)
   ========================================================================== */
.pp-footer,.footer.pp-footer{background:#090909!important;border-top:1px solid var(--xbx-line)!important;}
.pp-foot-col h3{color:var(--xbx-faint)!important;font-family:var(--xbx-disp)!important;letter-spacing:.08em;}
.pp-foot-col a{color:var(--xbx-text-2)!important;}
.pp-foot-col a:hover{color:var(--xbx-green)!important;text-decoration:none;}
.pp-foot-brand p{color:var(--xbx-muted)!important;}
.pp-foot-social a{border-color:var(--xbx-line-2)!important;color:#CFCFD2!important;}
.pp-foot-social a:hover{border-color:rgba(40,219,106,0.5)!important;background:var(--xbx-surface)!important;color:var(--xbx-text)!important;}
.pp-foot-bottom{border-top-color:var(--xbx-line)!important;color:var(--xbx-faint)!important;}
.pp-foot-bottom a{color:var(--xbx-muted)!important;}
.pp-foot-bottom a:hover{color:var(--xbx-green)!important;}
.pp-totop{background:var(--xbx-green)!important;color:#06140b!important;}
.pp-totop:hover,.pp-totop:focus{background:var(--xbx-green-hi)!important;color:#06140b!important;}

/* ============================================================================
   Ad shells / misc surfaces — keep them dark so they don't flash white.
   ========================================================================== */
.pp-ad,.pp-ad-placeholder{background:rgba(255,255,255,0.015)!important;border-color:var(--xbx-line)!important;}

/* ============================================================================
   MOBILE / TABLET + ACCESSIBILITY POLISH  (site-wide, appended last so it wins)
   The homepage hero, burger-drawer header, card grid and footer are already
   responsive; this block extends mobile correctness to the remaining inner
   pages and brings the whole site to WCAG 2.1 AA basics: visible keyboard
   focus, >=44px touch targets, no horizontal overflow, scrollable data tables
   and a reduced-motion catch-all.
   ========================================================================== */

/* --- 1. Horizontal-overflow safety net. overflow-x:clip (NOT hidden) so it
   never turns <html> into a scroll container — the sticky header keeps working,
   and no stray wide element (table, embed, long token) can scroll the page
   sideways on a phone. Media is capped to its container too. */
html{overflow-x:clip;}
.page img,.page video,.page iframe,.page embed,.page object,
.page svg,.page table{max-width:100%;}
.page iframe{height:auto;}
/* long unbroken strings (API keys, URLs) wrap instead of stretching the layout */
.page code,.page pre{overflow-wrap:anywhere;word-break:break-word;}

/* --- 2. Visible keyboard focus. The theme strips outlines on inputs/cards;
   :focus-visible restores a green ring for keyboard users ONLY (mouse/touch
   never see it). Critical for tab navigation across cards, chips and forms. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible,
.game-container-lo:focus-visible,.game-container-li:focus-visible,
.pp-cat:focus-visible,.pp-tier:focus-visible,.pp-spot:focus-visible,
.wish-tile-but:focus-visible,.library-tile-but:focus-visible,.hide-tile-but:focus-visible,
.pp-region-pill:focus-visible,.pp-acct-btn:focus-visible,.pp-burger:focus-visible,
.headerLinkCustom:focus-visible,.dropdown-toggle:focus-visible,
.pagin a:focus-visible,.pp-more:focus-visible{
  outline:2px solid var(--xbx-green)!important;outline-offset:2px!important;border-radius:8px;
}
/* a focused game card gets the same green ring/glow as hover so it reads as selected */
.game-container-lo:focus-visible>.game-container,
.game-container-li:focus-visible>.game-container{
  border-color:#2BE372!important;
  box-shadow:0 0 0 1px #2BE372,0 0 24px -2px rgba(43,227,114,0.45)!important;
}

/* --- 3. Touch targets >= 44px (WCAG 2.5.5 / platform HIG). --- */
/* card Wishlist/Library/Hide action bar (was 38px) */
.wish-tile-but,.library-tile-but,.hide-tile-but{height:44px!important;line-height:44px!important;}
/* floating back-to-top (was 40/38px) */
.pp-totop{width:46px!important;height:46px!important;}
@media (max-width:600px){.pp-totop{width:46px!important;height:46px!important;}}
/* nav drawer / sheet rows + dropdown items: comfortable thumb height */
.dropdown-menu>li>a{min-height:44px;display:flex;align-items:center;}

/* --- 4. Data tables → horizontal scroll instead of overflowing the viewport.
   display:block makes the table its own scroll box while rows/cells keep their
   table display, so the grid stays intact. Scoped to genuine DATA tables only;
   layout tables (settings checkbox grid, email, the 2-cell API-key table) are
   left untouched. --- */
@media (max-width:680px){
  .ppr-rtable,.ppc-ptable,table.prices,.pa-rtable,.md-table,
  .page table.table{
    display:block;width:100%;max-width:100%;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
  }
}

/* --- 5. Tighten section spacing on phones so content isn't lost in big gaps. */
@media (max-width:600px){
  .big-title,.title{font-size:21px!important;margin-bottom:14px!important;}
  .page{margin-bottom:28px;}
}

/* --- 6. Reduced-motion catch-all: neutralise EVERY animation/transition
   site-wide for users who request it, not just the individually-guarded ones. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
}