/* GamePassPrices — light, fast Game Pass theme (Xbox green on dark). */
:root{
  --g:#107C10; --g2:#16C60C; --bg:#0c0e0f; --bg2:#13171a; --card:#171b1d;
  --card2:#1e2427; --line:#2a3134; --tx:#e9eef0; --mut:#b6c0c2; --mut2:#93a0a2; --gold:#ffd34d;
}
/* keyboard focus ring (was missing) */
:where(a,button,summary,input,select,[tabindex]):focus-visible{outline:2px solid var(--g2);outline-offset:2px;border-radius:6px}
main:focus{outline:none}
/* skip-to-content: off-screen until keyboard-focused */
.skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--g);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;font-weight:700}
.skip:focus{left:0;text-decoration:none}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{margin:0}
html{min-height:100%}
body{background:radial-gradient(900px 460px at 50% -160px,rgba(16,124,16,.20),transparent 60%),var(--bg);
  color:var(--tx);font:16px/1.55 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh}
body>main{flex:1 0 auto}
body>footer.gpf{flex-shrink:0}
a{color:var(--g2);text-decoration:none} a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
h1,h2{letter-spacing:-.4px}

/* header */
header.site{position:sticky;top:0;z-index:30;background:rgba(12,14,15,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:12px;height:60px}
.brand{display:inline-flex;align-items:center;gap:9px;flex:0 0 auto}
.brand:hover{text-decoration:none}
.brand-logo{height:30px;width:auto;display:block}
@media(max-width:560px){.brand-logo{height:26px}}
.nav nav{display:flex;gap:11px;white-space:nowrap} .nav nav a{color:var(--mut);font-weight:600;font-size:13.5px;white-space:nowrap}
.nav nav a:hover{color:var(--tx);text-decoration:none}
.nav .search{margin-left:auto;display:flex;gap:6px}
.search input{background:var(--card2);border:1px solid var(--line);color:var(--tx);border-radius:999px;padding:8px 14px;font-size:14px;outline:none;width:210px}
.search input:focus{border-color:var(--g)}
.search button{background:var(--g);color:#fff;border:0;border-radius:999px;padding:8px 16px;font-weight:700;cursor:pointer}
/* header primary CTA (desktop) */
.hdr-cta{display:inline-flex;align-items:center;background:var(--g);color:#fff;font-weight:800;font-size:14px;padding:8px 13px;border-radius:999px;white-space:nowrap;box-shadow:0 4px 14px -5px rgba(16,124,16,.7);transition:background .15s,transform .1s,box-shadow .15s}
.hdr-cta:hover{background:#1a9a1a;color:#fff;text-decoration:none;transform:translateY(-1px);box-shadow:0 7px 20px -6px rgba(16,124,16,.8)}
/* hamburger (mobile only; hidden on desktop) */
.navtoggle{position:absolute;opacity:0;pointer-events:none}
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0 11px;cursor:pointer;border-radius:10px;flex:0 0 auto}
.burger span{display:block;height:2px;width:100%;background:var(--tx);border-radius:2px;transition:transform .25s,opacity .2s}
.burger:hover span{background:var(--g2)}
/* drawer + backdrop hidden by default (only relevant on mobile) */
.nav-backdrop,.drawer{display:none}

/* hero */
.hero{padding:46px 0 26px}
.hero h1{font-size:clamp(26px,4vw,42px);line-height:1.1;margin:0 0 12px}
.hero h1 .g{color:var(--g2)}
.hero p{color:var(--mut);font-size:18px;max-width:680px;margin:0 0 18px}
.hero .big{display:flex;gap:10px;max-width:560px}
.hero .big input{flex:1;background:var(--card);border:1px solid var(--line);color:var(--tx);border-radius:11px;padding:13px 15px;font-size:16px;outline:none}
.hero .big input:focus{border-color:var(--g);box-shadow:0 0 0 3px rgba(16,124,16,.25)}
.hero .big button{background:var(--g);color:#fff;border:0;border-radius:11px;padding:0 24px;font-weight:800;cursor:pointer}
.stats{display:flex;gap:26px;flex-wrap:wrap;margin-top:22px}
.stats b{display:block;font-size:24px;color:var(--g2);font-weight:800}
.stats span{color:var(--mut);font-size:12px;text-transform:uppercase;letter-spacing:.5px}

/* sections + grid */
section.block{padding:26px 0}
.sec-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 12px;margin:0 0 16px}
.sec-head h2{font-size:22px;margin:0}.sec-head a.more{margin-left:auto;color:var(--mut);font-size:14px;font-weight:600}
.sec-head span.more{align-self:center;background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:3px 11px;font-size:12px;font-weight:700;color:var(--mut);letter-spacing:.3px;white-space:nowrap}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:16px;grid-auto-flow:dense}
.grid-ad{grid-column:1 / -1;margin:4px 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:13px;overflow:hidden;display:flex;flex-direction:column;transition:transform .12s,border-color .12s}
.card:focus-within{border-color:var(--g)}
@media(hover:hover){.card:hover{transform:translateY(-3px);border-color:var(--g);text-decoration:none}}
.card .art{aspect-ratio:2/3;background:var(--card2);position:relative;overflow:hidden}
/* blurred backdrop fills the frame for non-portrait art (Xbox 360 / square tiles) */
.art-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(22px) brightness(.5) saturate(1.15);transform:scale(1.3);z-index:0}
.card .art img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;display:block}
/* crop a baked-in black band at the bottom of some Xbox 360 box art (HasLetterboxArt) */
.art.lb img,.cover.lb img{transform:scale(1.15);transform-origin:50% 0}
.noart,.card .noart{display:grid;place-items:center;width:100%;height:100%;color:var(--mut);font-size:13px;background:var(--card2)}
/* broken-image fallback: show the game title on the placeholder */
.art-failed::after,.cover.art-failed::after{content:attr(data-title);position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:12px;color:var(--mut);font-size:13px;font-weight:600;background:var(--card2)}
.badge-gp{position:absolute;top:8px;left:8px;background:#0b0f10;color:#3ee839;border:1px solid var(--g);font-weight:700;font-size:10px;padding:3px 6px;border-radius:7px;z-index:1}
.badge-disc{position:absolute;top:8px;right:8px;background:var(--g2);color:#062b06;font-weight:800;font-size:12px;padding:2px 7px;border-radius:7px}
.badge-leave{position:absolute;left:8px;bottom:8px;background:#c0260b;color:#fff;font-weight:800;font-size:10px;letter-spacing:.3px;padding:3px 7px;border-radius:7px;z-index:1;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.badge-sponsor{position:absolute;right:8px;bottom:8px;background:var(--gold);color:#3a2a00;font-weight:800;font-size:10px;letter-spacing:.3px;padding:3px 7px;border-radius:7px;z-index:1;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.consent-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--card);border-top:1px solid var(--line);padding:14px 16px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 20px;box-shadow:0 -8px 24px rgba(0,0,0,.35)}
.consent-bar p{margin:0;color:var(--mut);font-size:13.5px;line-height:1.45;max-width:640px;flex:1 1 260px}
.consent-actions{display:flex;gap:10px;flex:0 0 auto}
.consent-btn{padding:9px 18px;border-radius:10px;font-weight:700;font-size:13.5px;white-space:nowrap}
.consent-accept{background:var(--g);color:#fff}
.consent-accept:hover{background:#1a9a1a;color:#fff;text-decoration:none}
.consent-reject{background:var(--card2);color:var(--tx);border:1px solid var(--line)}
.consent-reject:hover{background:var(--line);color:var(--tx);text-decoration:none}
@media(max-width:760px){.consent-bar{bottom:calc(var(--mbar-h) + env(safe-area-inset-bottom))}}
.sec-badge-gold{background:rgba(255,211,77,.15);border-color:rgba(255,211,77,.4);color:var(--gold)}
.sponsor-banner{display:flex;align-items:center;gap:10px;background:rgba(255,211,77,.08);border:1px solid rgba(255,211,77,.3);border-radius:12px;padding:12px 16px;margin:14px 0;color:var(--mut);font-size:14px}
.sponsor-tag{flex:0 0 auto;background:var(--gold);color:#3a2a00;font-weight:800;font-size:11px;letter-spacing:.3px;padding:3px 9px;border-radius:999px}
.card .meta{padding:10px 11px 12px;flex:1;display:flex;flex-direction:column}
.card .title{font-weight:700;font-size:14px;line-height:1.25;color:var(--tx);margin:0 0 5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .pub{color:var(--mut2);font-size:12px;margin-bottom:7px}
.card .pub.has-logo{display:flex;align-items:center;gap:6px}
.card .pub .pub-ico{width:16px;height:16px;border-radius:4px;object-fit:contain;background:#fff;padding:2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);flex:0 0 auto}
.card .pub .pub-ico.lite{background:#16181c;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.card .pub.has-logo{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .crate{display:inline-flex;align-items:center;gap:4px;color:#ffb703;font-weight:700;font-size:12.5px;margin-bottom:6px}
.card .crate .rc{color:var(--mut);font-weight:600}
.card .crate .rc::before{content:"(";}
.card .crate .rc::after{content:")";}
.card .worth{margin-top:auto;color:var(--g2);font-weight:700;font-size:14px}
.freshness{color:var(--mut);font-size:12px;margin:8px 0 0}

/* chips / browse controls */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:14px 16px;font-weight:700;color:var(--tx);min-width:150px}
.chip:hover{border-color:var(--g);text-decoration:none}.chip span{display:block;color:var(--mut);font-weight:500;font-size:13px;margin-top:3px}
.sorts{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.sorts a{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:7px 14px;color:var(--mut);font-size:13px;font-weight:600}
.sorts a.on,.sorts a:hover{border-color:var(--g);color:var(--tx);text-decoration:none}

/* game page */
.crumbs{color:var(--mut2);font-size:13px;padding:14px 0 0}.crumbs a{color:var(--mut)}
.gp-hero{display:grid;grid-template-columns:250px 1fr;gap:28px;padding:22px 0}
.cover{position:relative;align-self:start;border-radius:13px;overflow:hidden;border:1px solid var(--line);background:var(--card2)}
.cover img{position:relative;z-index:1;width:100%;height:auto;aspect-ratio:2/3;object-fit:contain;display:block}
.cover::after{content:"";position:absolute;inset:0;border-radius:13px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),inset 0 -40px 50px -30px rgba(0,0,0,.5);pointer-events:none}
.gp-hero h1{font-size:clamp(22px,3.4vw,32px);line-height:1.15;margin:0 0 8px}
.verdict{background:linear-gradient(90deg,rgba(16,124,16,.2),rgba(16,124,16,.04));border:1px solid var(--g);border-radius:12px;padding:14px 18px;margin:10px 0;font-size:17px}
.verdict b{color:var(--g2)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.tag{background:var(--card2);border:1px solid var(--line);color:var(--mut);font-size:12px;font-weight:700;padding:5px 10px;border-radius:8px}
.tag.gp{color:var(--g2);border-color:var(--g)}
a.tag{text-decoration:none;cursor:pointer;transition:border-color .15s,color .15s,background .15s}
.tag.tag-pub{display:inline-flex;align-items:center;gap:7px;padding-left:7px}
.tag-logo{width:18px;height:18px;border-radius:4px;object-fit:contain;background:#fff;padding:2px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);flex:0 0 auto}
.tag-logo.lite{background:#16181c;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
a.tag:hover{border-color:var(--g);color:var(--g2);background:rgba(22,198,12,.08)}
.buybox{position:relative;background:linear-gradient(155deg,var(--card2),var(--card));border:1px solid var(--line);border-left:3px solid var(--g2);border-radius:14px;padding:16px 18px 16px 19px;margin:14px 0 4px;box-shadow:0 2px 8px rgba(0,0,0,.55),0 14px 34px -16px rgba(22,198,12,.18)}
/* status flag — only shown for leaving-soon / day-one (real urgency at the decision point) */
.bb-flag{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;padding:5px 11px;border-radius:8px;margin-bottom:13px}
.bb-flag.dayone{color:var(--gold);background:rgba(255,211,77,.12);border:1px solid rgba(255,211,77,.4)}
.bb-flag.leaving{color:#ffb38a;background:rgba(214,90,40,.16);border:1px solid rgba(214,90,40,.55)}
.bb-note{color:var(--mut);font-size:13px;margin-top:11px}
.bb-note .cheap{color:var(--g2);font-weight:600}
.buybox .cta{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--g);color:#fff;font-weight:800;padding:12px 22px;border-radius:11px;box-shadow:0 6px 18px -6px rgba(16,124,16,.7);transition:filter .15s,box-shadow .15s,transform .1s}.buybox .cta:hover{filter:brightness(1.12);text-decoration:none;transform:translateY(-1px)}
.buybox .cta .cta-ico{font-size:11px;line-height:1}
.buybox .off{color:var(--gold);font-weight:800;margin-left:3px}
table.reg{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden}
table.reg th,table.reg td{text-align:left;padding:10px 13px;border-bottom:1px solid var(--line);font-size:14px}
table.reg th{color:var(--mut);font-size:12px;text-transform:uppercase;background:var(--bg2)}
table.reg tr:last-child td{border-bottom:0} table.reg tr.cheap td{background:rgba(16,124,16,.12)}
.faq{display:grid;gap:10px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 16px;transition:border-color .12s}
.faq details[open]{border-color:var(--g)}
.faq summary{font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--mut);font-size:20px;font-weight:400;line-height:1}
.faq details[open] summary::after{content:"−";color:var(--g2)}
.faq summary:hover{color:var(--g2)}
.faq p{color:var(--mut);margin:8px 0 0}
.prose{max-width:760px;color:#cfd6d8}.prose h2{margin-top:26px}
.tier-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:16px 0}
.tier{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:18px}
.tier.best{border-color:var(--g)} .tier h3{margin:0 0 4px}.tier .p{font-size:24px;font-weight:800;color:var(--g2)}
.tier ul{padding-left:18px;color:var(--mut);font-size:14px}

/* prices page — hero band + redesigned plan cards */
.price-hero{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(16,124,16,.16),rgba(16,124,16,0));border:1px solid var(--line);border-radius:18px;padding:28px 26px;margin:6px 0 18px}
.price-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(560px 220px at 12% -50%,rgba(22,198,12,.20),transparent 70%);pointer-events:none}
.price-hero>*{position:relative}
.price-hero .pill{display:inline-flex;align-items:center;gap:6px;background:rgba(22,198,12,.12);border:1px solid rgba(22,198,12,.4);color:var(--g2);font-weight:700;font-size:12px;letter-spacing:.3px;padding:5px 12px;border-radius:999px;margin-bottom:13px}
.price-hero h1{font-size:clamp(26px,3.6vw,36px);line-height:1.12;margin:0 0 10px}
.price-hero .lead{color:#cfd6d8;font-size:17px;max-width:700px;margin:0}
.price-stats{display:flex;gap:30px;flex-wrap:wrap;margin-top:20px}
.price-stats b{display:block;font-size:26px;font-weight:800;color:var(--g2);line-height:1.1}
.price-stats span{color:var(--mut);font-size:12px;text-transform:uppercase;letter-spacing:.5px}

.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:16px;margin:20px 0 12px}
.plan{position:relative;display:flex;flex-direction:column;background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:16px;padding:22px 20px 20px;transition:transform .15s,border-color .15s,box-shadow .15s}
@media(hover:hover){.plan:hover{transform:translateY(-4px);border-color:var(--g)}}
.plan.best{border-color:var(--g2);box-shadow:0 0 0 1px var(--g2),0 20px 44px -24px rgba(22,198,12,.85);background:linear-gradient(180deg,rgba(16,124,16,.24),var(--card))}
.plan-tag{position:absolute;top:-11px;left:18px;background:var(--g2);color:#062b06;font-weight:800;font-size:11px;letter-spacing:.4px;text-transform:uppercase;padding:4px 11px;border-radius:999px;box-shadow:0 6px 16px -6px rgba(22,198,12,.8)}
.plan-name{margin:0;font-size:18px;font-weight:800}
.plan-price{display:flex;align-items:baseline;gap:3px;margin:8px 0 16px}
.plan-price .amt{font-size:32px;font-weight:800;color:#fff;letter-spacing:-1px}
.plan.best .plan-price .amt{color:var(--g2)}
.plan-price .per{color:var(--mut);font-size:13px;font-weight:600}
.plan-feats{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:10px}
.plan-feats li{position:relative;padding-left:26px;color:#d4dbdd;font-size:14px;line-height:1.4}
.plan-feats li::before{content:"";position:absolute;left:0;top:1px;width:17px;height:17px;border-radius:50%;background:rgba(22,198,12,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316C60C' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/10px no-repeat}
.plan-cta{margin-top:auto;text-align:center;background:transparent;border:1px solid var(--g);color:var(--g2);font-weight:700;font-size:14px;border-radius:10px;padding:10px 12px;transition:background .15s,color .15s}
.plan-cta:hover{background:rgba(16,124,16,.16);text-decoration:none}
.plan.best .plan-cta{background:var(--g);color:#fff;border-color:var(--g);box-shadow:0 6px 18px -6px rgba(16,124,16,.7)}
.plan.best .plan-cta:hover{background:#1a9a1a}
@media(max-width:520px){.plans{grid-template-columns:repeat(2,1fr);gap:12px}.price-stats{gap:20px}}
.tag.feat{border-color:rgba(22,198,12,.35);color:#bfe9bd}
.sub-note{margin-left:auto;color:var(--mut);font-size:13px;font-weight:600}

/* hero availability alerts */
.gp-alert{border-radius:10px;padding:10px 14px;font-weight:700;font-size:14px;margin:0 0 10px}
.gp-alert.leaving{background:rgba(255,150,40,.12);border:1px solid rgba(255,150,40,.5);color:#ffb060}
.gp-alert.dayone{background:rgba(255,211,77,.12);border:1px solid rgba(255,211,77,.4);color:var(--gold)}

/* scores band */
.scores{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:12px}
.score{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:16px;text-align:center}
.score-src{color:var(--mut);font-size:12px;text-transform:uppercase;letter-spacing:.5px}
.score-val{font-size:34px;font-weight:800;color:var(--g2);line-height:1.1;margin:6px 0}
.score-val .score-max{font-size:16px;color:var(--mut2);font-weight:600}
.score-tier{display:inline-block;background:rgba(255,211,77,.12);color:var(--gold);border:1px solid rgba(255,211,77,.4);border-radius:7px;padding:2px 8px;font-size:11px;font-weight:700}
.score-rc{color:var(--mut2);font-size:11px;margin-top:6px}

/* screenshots */
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.shots .shot-thumb{-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;position:relative;display:block;border-radius:11px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/9;background:var(--card2);padding:0;margin:0;cursor:pointer;font:inherit}
.shots img{width:100%;height:100%;object-fit:cover;transition:transform .2s;display:block;pointer-events:none}
@media(hover:hover){.shots .shot-thumb:hover img{transform:scale(1.04)}}
.shots .shot-thumb:focus-visible{outline:2px solid var(--g2);outline-offset:2px}

/* screenshot lightbox — centered stage, tap/click zones over the left & right
   thirds of the image do prev/next (mirrors how photo viewers on iOS/Twitter
   work); the small arrow glyph is just an affordance hint, the whole zone is
   the hit target so it works comfortably with a thumb on a phone. */
.shot-modal{position:fixed;inset:0;z-index:200;display:flex}
.shot-modal[hidden]{display:none}
.shot-modal-backdrop{position:absolute;inset:0;background:rgba(4,5,6,.9)}
.shot-modal-box{position:relative;margin:auto;width:min(94vw,1240px);display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 12px}
.shot-modal-stage{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:0}
.shot-modal-img{max-width:100%;max-height:78vh;border-radius:12px;border:1px solid var(--line);background:var(--card2);object-fit:contain;-webkit-user-select:none;user-select:none}
.shot-modal-count{color:var(--mut);font-size:13px;margin:0}
.shot-modal-close{-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;position:absolute;top:-46px;right:0;width:38px;height:38px;border-radius:999px;background:var(--card);border:1px solid var(--line);color:var(--tx);font-size:22px;line-height:1;cursor:pointer}
.shot-modal-close:hover{background:var(--card2);border-color:var(--g2)}
.shot-modal-close:focus-visible{outline:2px solid var(--g2);outline-offset:2px}
.shot-modal-zone{-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;position:absolute;top:0;bottom:0;width:40%;max-width:220px;display:flex;align-items:center;border:0;background:transparent;padding:0;margin:0;cursor:pointer;color:var(--tx);opacity:.6;transition:opacity .15s}
.shot-modal-zone-prev{left:0;justify-content:flex-start;background:linear-gradient(90deg,rgba(4,5,6,.5),transparent)}
.shot-modal-zone-next{right:0;justify-content:flex-end;background:linear-gradient(270deg,rgba(4,5,6,.5),transparent)}
.shot-modal-chevron{font-size:30px;line-height:1;padding:0 16px}
.shot-modal-zone:focus-visible{opacity:1;outline:2px solid var(--g2);outline-offset:-4px}
@media(hover:hover){
  .shot-modal-zone{opacity:0}
  .shot-modal-stage:hover .shot-modal-zone{opacity:1}
}
body.shot-modal-open{overflow:hidden}
@media(max-width:640px){.shot-modal-box{padding:0 4px}.shot-modal-close{top:10px;right:10px;background:rgba(4,5,6,.6);backdrop-filter:blur(6px)}.shot-modal-chevron{font-size:24px;padding:0 8px}}

/* game facts */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px 24px;margin:0 0 18px}
.facts dt{color:var(--mut2);font-size:12px;text-transform:uppercase;letter-spacing:.5px}
.facts dd{margin:2px 0 0;font-weight:600}

/* achievements */
.achs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.ach{display:flex;gap:11px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:10px 12px}
.ach img{width:44px;height:44px;border-radius:8px;flex:0 0 44px;object-fit:cover}
.ach-name{font-weight:700;font-size:14px;line-height:1.25}
.ach-sub{color:var(--mut);font-size:12px;margin-top:2px}

/* region table: right-align numbers, scroll on mobile */
.tablewrap{overflow-x:auto}
table.reg td:nth-child(2),table.reg td:nth-child(3),table.reg td:nth-child(4),
table.reg th:nth-child(2),table.reg th:nth-child(3),table.reg th:nth-child(4){text-align:right}
.off{color:var(--g2);font-weight:700}.cheaplbl{color:var(--g2);font-weight:700;margin-left:4px}

/* compact table button (e.g. leaving page "Buy") */
.buycell{width:1%;white-space:nowrap;text-align:right}
.tbtn{display:inline-block;background:transparent;color:var(--g2);border:1px solid var(--g);border-radius:8px;padding:6px 12px;font-size:13px;font-weight:700;white-space:nowrap}
.tbtn:hover{background:var(--g);color:#fff;text-decoration:none}

/* region picker (custom dark dropdown) */
.regpick{position:relative;margin-left:8px}
.regpick>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;background:var(--card2);border:1px solid var(--line);color:var(--tx);border-radius:999px;padding:8px 12px;font-weight:700;font-size:13px}
.regpick>summary::-webkit-details-marker{display:none}
.regpick>summary::after{content:"";width:7px;height:7px;border-right:2px solid var(--mut);border-bottom:2px solid var(--mut);transform:rotate(45deg);margin:-3px 0 0 1px;transition:transform .15s}
.regpick[open]>summary{border-color:var(--g)}
.regpick[open]>summary::after{transform:rotate(225deg);margin-top:2px}
.regpick .rp-cur{letter-spacing:.5px}
.rp-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:60;width:230px;max-height:340px;overflow-y:auto;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 14px 40px rgba(0,0,0,.55)}
.rp-menu a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:var(--tx);font-size:14px}
.rp-menu a:hover{background:var(--card2);text-decoration:none}
.rp-menu a.on{background:rgba(16,124,16,.18);color:var(--g2)}
.rp-menu .rp-code{font-weight:800;min-width:26px;font-size:12px;color:var(--mut)}
.rp-menu a.on .rp-code{color:var(--g2)}
.rp-menu .rp-name{color:var(--tx)}
.rp-grp{padding:8px 10px 4px;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--mut)}
.rp-grp:first-child{padding-top:4px}
.rp-menu::-webkit-scrollbar{width:10px}
.rp-menu::-webkit-scrollbar-track{background:transparent}
.rp-menu::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px;border:2px solid var(--card)}
.rp-menu{scrollbar-width:thin;scrollbar-color:var(--line) transparent}

/* ad-integrated layout: content + sticky sidebar */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:30px;align-items:start}
.aside{position:sticky;top:76px;display:flex;flex-direction:column;gap:18px}
@media(max-width:1080px){.layout{grid-template-columns:1fr}.aside{display:none}}

/* ad slots styled as designed cards (reserve height -> no CLS) */
.ad-slot{margin:20px auto;text-align:center;min-height:104px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:10px}
.ad-slot.box{min-height:266px}
.ad-label{display:block;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--mut2);margin-bottom:6px}

/* footer (redesigned) */
.gpf{position:relative;margin-top:64px;color:var(--mut);font-size:15px;line-height:1.6;
  background:radial-gradient(120% 140% at 50% -20%,rgba(16,124,16,.10),transparent 60%),linear-gradient(180deg,var(--bg2),var(--bg))}
.gpf::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(22,198,12,.15) 18%,var(--g2) 50%,rgba(22,198,12,.15) 82%,transparent);
  box-shadow:0 0 18px rgba(22,198,12,.4)}
.gpf-in{padding:46px 16px 28px}
/* brand row */
.gpf-top{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:flex-start;justify-content:space-between;padding-bottom:32px;margin-bottom:32px;border-bottom:1px solid var(--line)}
.gpf-brand img{display:block;height:36px;width:auto}
.gpf-tag{margin:14px 0 0;max-width:36ch;color:var(--mut2);font-size:14px;line-height:1.55}
.gpf-regions{min-width:260px}
.gpf-regions-label{display:block;margin-bottom:11px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mut2)}
.gpf-regions ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.gpf-regions a{display:inline-flex;align-items:center;padding:6px 13px;border-radius:999px;background:var(--card);border:1px solid var(--line);color:var(--mut);font-size:13px;font-weight:700;letter-spacing:.3px;transition:.16s}
.gpf-regions a:hover{color:#fff;border-color:var(--g);background:rgba(16,124,16,.16);text-decoration:none;transform:translateY(-1px)}
.gpf-regions a.all{background:transparent;border-color:transparent;color:var(--g2);font-weight:600;letter-spacing:0}
.gpf-regions a.all:hover{color:var(--g2);transform:none}
/* link grid */
.gpf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px 32px;padding-bottom:36px}
.gpf-col h4{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--mut2)}
.gpf-col ul{list-style:none;margin:0;padding:0}
.gpf-col a{position:relative;display:inline-block;padding:5px 0;color:var(--mut);font-size:14px;line-height:1.45;white-space:nowrap;transition:color .16s}
.gpf-col a::after{content:"";position:absolute;left:0;bottom:3px;width:0;height:1px;background:var(--g2);transition:width .2s}
.gpf-col a:hover{color:var(--g2);text-decoration:none}
.gpf-col a:hover::after{width:100%}
.gpf a:focus-visible{outline:2px solid var(--g2);outline-offset:3px;border-radius:4px;color:var(--tx)}
/* "new" launch badge on the Other Platforms sister-site links */
.gpf-badge{margin-left:5px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;vertical-align:middle;color:var(--g2)}
/* bottom bar */
.gpf-bottom{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:flex-start;justify-content:space-between;padding-top:22px;border-top:1px solid var(--line)}
.gpf-legal{margin:0;max-width:80ch;font-size:12px;line-height:1.55;color:var(--mut2)}
.gpf-copy{margin:0;flex-shrink:0;font-size:12.5px;font-weight:600;color:var(--mut);white-space:nowrap}
@media(max-width:880px){.gpf-grid{grid-template-columns:repeat(2,1fr);gap:26px 24px}.gpf-regions{min-width:0;width:100%}}
@media(max-width:520px){.gpf-in{padding:36px 16px 24px}.gpf-grid{grid-template-columns:1fr 1fr;gap:22px 18px}.gpf-bottom{flex-direction:column}}

.empty{background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:16px;padding:34px 28px;text-align:center;color:var(--mut)}
.empty-title{font-size:21px;font-weight:800;color:var(--tx);margin-bottom:8px;line-height:1.25}
.empty p{margin:0 auto;max-width:540px;line-height:1.55;font-size:15px}
.empty-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;margin-top:20px}
.empty-hint{margin:16px auto 0!important;font-size:13px;color:var(--mut2)}
.empty-hint a{color:var(--g2);font-weight:600}

/* ===== UI/UX polish pass (additive over the base above) ===== */
.card{will-change:transform}
.card .art img{transition:transform .3s cubic-bezier(.22,1,.36,1)}
@media(hover:hover){
  .card:hover{box-shadow:0 16px 40px -14px rgba(0,0,0,.6),0 0 0 1px rgba(16,124,16,.15)}
  .card:hover .art img{transform:scale(1.045)}
}
.badge-disc{border-radius:999px;padding:3px 8px;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.tablewrap{border-radius:12px}
table.reg tr.cheap td:first-child{box-shadow:inset 3px 0 0 var(--g)}
@media(hover:hover){
  table.reg tbody tr:hover td{background:rgba(255,255,255,.03)}
  table.reg tr.cheap:hover td{background:rgba(16,124,16,.16)}
}
.buybox .cta{transition:background .15s,box-shadow .15s,transform .1s}
.buybox .cta:hover{box-shadow:0 6px 22px -4px rgba(16,124,16,.65);transform:translateY(-1px)}
.regpick[open]>summary{box-shadow:0 0 0 3px rgba(16,124,16,.22)}

@media(max-width:760px){
  .nav{flex-wrap:wrap;height:auto;padding:9px 0;gap:10px}
  .nav nav{order:3;width:100%;overflow-x:auto;gap:16px;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .nav nav a{white-space:nowrap}
  .search{margin-left:auto}.search input{width:140px}
  .gp-hero{grid-template-columns:1fr;gap:16px}
  .cover{max-width:170px}
  .gp-hero h1{font-size:22px}
  .verdict{font-size:15px;padding:12px 14px}
}
/* denser card grid on phones */
@media(max-width:600px){.grid{grid-template-columns:repeat(2,1fr);gap:10px}table.reg th,table.reg td{padding:9px 10px;font-size:13px}}
@media(max-width:360px){.grid{grid-template-columns:1fr}}

/* ================================================================
   MOBILE-FIRST CTA + UX PASS  (drawer, bottom bar, hero/buybox CTAs)
   ================================================================ */
:root{--mbar-h:60px}

/* hero dual CTA */
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:16px}
.cta-primary{display:inline-flex;align-items:center;justify-content:center;background:var(--g);color:#fff;font-weight:800;font-size:16px;padding:13px 26px;border-radius:12px;box-shadow:0 8px 22px -8px rgba(16,124,16,.8);transition:background .15s,transform .1s,box-shadow .15s}
.cta-primary:hover{background:#1a9a1a;color:#fff;text-decoration:none;transform:translateY(-2px);box-shadow:0 12px 30px -8px rgba(16,124,16,.9)}
.cta-ghost{display:inline-flex;align-items:center;color:var(--mut);font-weight:700;font-size:15px;padding:10px 4px}
.cta-ghost:hover{color:var(--g2)}

/* buybox dual actions */
.buybox-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.buybox-actions .cta{margin-top:0}
.buybox-actions .cta:first-child{flex:1 1 240px}
.cta.cta-2{flex:0 1 auto;background:transparent;color:var(--g2);border:1px solid rgba(22,198,12,.4);box-shadow:none}
.cta.cta-2:hover{background:rgba(16,124,16,.14);border-color:rgba(22,198,12,.7);box-shadow:none}
@media(max-width:480px){.buybox-actions .cta{flex:1 1 100%}}

/* tablet / narrow desktop: drop the inline search so nav + CTA + region fit
   (the hero search box and mobile drawer still cover search there) */
@media(min-width:761px) and (max-width:1040px){.nav .search{display:none}.nav{gap:10px}.nav nav{gap:9px}.nav nav a{font-size:13px}.hdr-cta{font-size:13px;padding:8px 12px}.regpick>summary{padding:7px 10px;font-size:12px}}

/* ---- mobile drawer (slide-in) ---- */
@media(max-width:760px){
  /* swap inline nav for a hamburger drawer */
  .nav{flex-wrap:nowrap;height:56px;gap:10px;padding:0 14px}
  .nav .mainnav,.hdr-cta{display:none}
  .nav .search{display:none}
  .brand{margin-right:auto}
  .regpick{margin-left:0}
  .regpick>summary{min-height:40px;padding:9px 13px}
  .burger{display:flex}

  .nav-backdrop{display:block;position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.55);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
  .drawer{display:flex;flex-direction:column;gap:18px;position:fixed;top:0;right:0;bottom:0;z-index:50;width:min(86vw,360px);
    padding:18px 18px calc(20px + env(safe-area-inset-bottom));background:var(--bg2);border-left:1px solid var(--line);
    box-shadow:-18px 0 50px rgba(0,0,0,.5);overflow-y:auto;-webkit-overflow-scrolling:touch;
    transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1)}
  .navtoggle:checked ~ .nav-backdrop{opacity:1;visibility:visible}
  .navtoggle:checked ~ .drawer{transform:translateX(0)}
  /* lock background scroll while the drawer is open (progressive) */
  html:has(.navtoggle:checked){overflow:hidden}

  .drawer-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:14px}
  .drawer-title{font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut2)}
  .drawer-x{display:grid;place-items:center;width:40px;height:40px;margin:-6px;font-size:30px;line-height:1;color:var(--mut);cursor:pointer;border-radius:10px}
  .drawer-x:hover{color:var(--g2)}
  .drawer-search{display:flex;gap:8px}
  .drawer-search input{flex:1;min-width:0;background:var(--card);border:1px solid var(--line);color:var(--tx);border-radius:11px;padding:12px 14px;font-size:16px;outline:none}
  .drawer-search input:focus{border-color:var(--g)}
  .drawer-search button{background:var(--g);color:#fff;border:0;border-radius:11px;padding:0 18px;font-weight:800;font-size:15px;cursor:pointer}
  .drawer-cta{display:flex;align-items:center;justify-content:center;gap:9px;background:var(--g);color:#fff;font-weight:800;font-size:16px;padding:14px;border-radius:12px;box-shadow:0 8px 22px -8px rgba(16,124,16,.8)}
  .drawer-cta svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
  .drawer-cta:hover{background:#1a9a1a;color:#fff;text-decoration:none}
  .drawer-nav{display:flex;flex-direction:column}
  .drawer-nav a{display:flex;align-items:center;min-height:50px;padding:6px 4px;color:var(--tx);font-weight:700;font-size:17px;border-bottom:1px solid var(--line)}
  .drawer-nav a:hover{color:var(--g2);text-decoration:none}
  .drawer-regs-label{display:block;margin-bottom:10px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mut2)}
  .drawer-regs-list{display:flex;flex-wrap:wrap;gap:8px}
  .drawer-regs-grp{flex:0 0 100%;margin:6px 0 0;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mut2)}
  .drawer-regs-grp:first-child{margin-top:0}
  .drawer-regs-list a{display:inline-flex;align-items:center;justify-content:center;min-width:46px;min-height:38px;padding:0 10px;border-radius:999px;background:var(--card);border:1px solid var(--line);color:var(--mut);font-weight:700;font-size:13px}
  .drawer-regs-list a.on{border-color:var(--g);color:var(--g2);background:rgba(16,124,16,.16)}
  .drawer-regs-list a:hover{text-decoration:none;border-color:var(--g)}
}

/* ---- sticky mobile bottom action bar ---- */
.mobilebar{display:none}
@media(max-width:760px){
  body{padding-bottom:calc(var(--mbar-h) + env(safe-area-inset-bottom))}
  .mobilebar{display:grid;grid-template-columns:repeat(4,1fr);align-items:stretch;position:fixed;left:0;right:0;bottom:0;z-index:45;
    height:calc(var(--mbar-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
    background:rgba(15,19,22,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
  .mb-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--mut);font-size:10.5px;font-weight:700;letter-spacing:.2px;text-decoration:none;cursor:pointer;min-height:44px}
  .mb-item svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .mb-item:active{color:var(--g2)}
  .mb-item span{line-height:1}
  /* primary CTA cell pops */
  .mb-cta{position:relative;margin:7px 8px 7px 0;border-radius:12px;background:var(--g);color:#fff;font-size:10px;box-shadow:0 6px 16px -6px rgba(16,124,16,.85)}
  .mb-cta svg{stroke-width:1.8}
  .mb-cta span{font-weight:800}
  .mb-cta:active{color:#fff;background:#1a9a1a}
  /* Keep the NitroPay anchor ad clear of the mobile bar (45), but pinned below the consent
     bar (60) — the ad had no z-index at all, so it could paint over the GDPR consent bar
     when both are visible (nitroAds isn't gated on consent, it just occupies the same
     bottom offset the consent bar uses on mobile). */
  #nitro-anchor,div[id^="gpp-ad-anchor"]{bottom:calc(var(--mbar-h) + env(safe-area-inset-bottom)) !important;z-index:46 !important}
}

/* very small phones: tighten labels */
@media(max-width:360px){
  .mb-item{font-size:10px}
  .mb-cta{font-size:9px}
  .mb-cta span{font-weight:800}
}

/* fine-pointer (desktop) safety: never show mobile chrome */
@media(min-width:761px){.mobilebar,.burger,.drawer,.nav-backdrop{display:none !important}}

/* ================================================================
   AFFILIATE STORES — buy buttons, where-to-buy rows, gift cards
   ================================================================ */
/* shared branded store badge (monogram in the store's brand colour) */
.aff-mark{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:8px;
  font-weight:800;font-size:14px;line-height:1;color:#fff;background:var(--brand,var(--mut2));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 2px 8px -2px rgba(0,0,0,.6)}
.aff-mark-logo{background:none;box-shadow:none;border-radius:0}
.aff-mark-logo img{width:100%;height:100%;object-fit:contain;display:block}

/* inline "grab a key" block under the buybox CTAs */
.aff-keys{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}
.aff-keys-head{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--mut2);margin-bottom:9px}
.aff-btns{display:flex;flex-wrap:wrap;gap:9px}
.aff-btn{display:inline-flex;align-items:center;gap:10px;background:var(--card2);border:1px solid var(--line);
  color:var(--tx);padding:9px 13px 9px 10px;border-radius:11px;
  transition:border-color .15s,background .15s,transform .1s,box-shadow .15s}
.aff-btn:hover{text-decoration:none;background:var(--card);border-color:var(--brand,var(--g));transform:translateY(-1px);box-shadow:0 8px 20px -12px rgba(0,0,0,.8)}
.aff-btn-tx{display:flex;flex-direction:column;line-height:1.2}
.aff-btn-tx b{font-size:14px;font-weight:800}
.aff-btn-sub{font-size:11px;color:var(--mut2);font-weight:600}
.aff-go{color:var(--mut2);font-weight:800;transition:transform .15s,color .15s}
.aff-btn:hover .aff-go{color:var(--brand,var(--g2));transform:translateX(2px)}
.aff-note{color:var(--mut2);font-size:11.5px;line-height:1.45;margin:12px 0 0}
/* per-store brand colour drives --brand on each link */
.aff-eneba{--brand:#ff7a45}.aff-playasia{--brand:#3a8fd8}.aff-amazon{--brand:#ff9900}

/* ================================================================
   PUBLISHER HUB — featured tile grid + long-tail pill list
   ================================================================ */
.pub-sec-head{display:flex;align-items:baseline;gap:10px;margin:24px 0 14px}
.pub-sec-head h2{font-size:22px;margin:0}
.sec-badge{display:inline-flex;align-items:center;justify-content:center;background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:2px 9px;font-size:12px;font-weight:700;color:var(--mut);letter-spacing:.3px}

/* featured tiles */
.pub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.pub-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:18px 16px 16px;color:var(--tx);overflow:hidden;transition:transform .12s,border-color .12s,box-shadow .12s;will-change:transform}
.pub-tile::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,var(--g2),transparent 80%);opacity:0;transition:opacity .15s}
@media(hover:hover){.pub-tile:hover{transform:translateY(-3px);border-color:var(--g);box-shadow:0 16px 40px -14px rgba(0,0,0,.6),0 0 0 1px rgba(16,124,16,.15);text-decoration:none}.pub-tile:hover::before{opacity:1}}
.pub-mono{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--accent,var(--g));color:#fff;font-weight:800;font-size:15px;letter-spacing:.5px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);flex:0 0 auto;margin-bottom:12px}
.pub-mono.pub-logo{background:#fff;padding:4px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.pub-mono.pub-logo.lite{background:#16181c;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.pub-mono.pub-logo img{width:100%;height:100%;object-fit:contain;display:block}
.pub-name{font-weight:700;font-size:14px;line-height:1.25;color:var(--tx);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:6px}
.pub-count{color:var(--g2);font-size:12px;font-weight:700;margin-top:auto}

/* publisher matches strip on search results */
.pub-matches{margin:0 0 22px}
.pub-matches-lbl{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--mut2);margin-bottom:10px}
.pub-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.pub-result{display:flex;align-items:center;gap:13px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;transition:border-color .12s,background .12s,transform .12s}
@media(hover:hover){.pub-result:hover{border-color:var(--g);background:var(--card2);text-decoration:none;transform:translateY(-1px)}}
.pub-result-logo,.pub-result-mono{flex:0 0 auto;width:48px;height:48px;border-radius:11px;display:flex;align-items:center;justify-content:center}
.pub-result-logo{background:#fff;padding:6px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.pub-result-logo.lite{background:#16181c;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.pub-result-logo img{max-width:100%;max-height:100%;object-fit:contain}
.pub-result-mono{background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--accent);font-weight:800;font-size:16px;letter-spacing:.02em}
.pub-result-body{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;gap:2px}
.pub-result-name{color:var(--tx);font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pub-result-sub{color:var(--mut2);font-size:12px;font-weight:600}
.pub-result-arrow{flex:0 0 auto;color:var(--mut2);font-size:16px;transition:color .12s,transform .12s}
@media(hover:hover){.pub-result:hover .pub-result-arrow{color:var(--g);transform:translateX(2px)}}

/* long-tail compact list (multi-column for vertical scannability) */
.pub-list{list-style:none;margin:0;padding:0;columns:3;column-gap:10px}
.pub-list li{break-inside:avoid;margin-bottom:6px}
.pub-pill{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 8px 6px 14px;color:var(--mut);font-size:13px;font-weight:600;transition:border-color .12s,color .12s}
@media(hover:hover){.pub-pill:hover{border-color:var(--g);color:var(--tx);text-decoration:none}}
.pub-pill-tx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pub-pill-n{flex:0 0 auto;background:var(--card2);border-radius:999px;padding:1px 7px;font-size:11px;font-weight:700;color:var(--mut2);min-width:20px;text-align:center}

@media(max-width:600px){.pub-grid{grid-template-columns:repeat(2,1fr);gap:10px}.pub-list{columns:2}.pub-tile{padding:14px 13px 13px}.pub-mono{width:34px;height:34px;font-size:13px;border-radius:8px;margin-bottom:10px}.pub-name{font-size:13px}}
@media(max-width:360px){.pub-grid{grid-template-columns:1fr}.pub-list{columns:1}}

/* "Where to buy" comparison rows */
.wtb{display:grid;gap:11px;margin:14px 0 4px}
.wtb-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px 16px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:15px 18px;color:var(--tx);
  position:relative;overflow:hidden;transition:border-color .15s,transform .1s,box-shadow .15s}
.wtb-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--brand,var(--mut2));opacity:.85}
.wtb-row .aff-mark{width:42px;height:42px;border-radius:11px;font-size:19px}
.wtb-row:hover{text-decoration:none;border-color:var(--brand,var(--g));transform:translateY(-2px);box-shadow:0 16px 34px -20px rgba(0,0,0,.85)}
.wtb-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.wtb-store{font-weight:800;font-size:16.5px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.wtb-pill{font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--brand,var(--mut));
  background:color-mix(in srgb,var(--brand,var(--mut2)) 16%,transparent);border:1px solid color-mix(in srgb,var(--brand,var(--mut2)) 40%,transparent);
  padding:2px 8px;border-radius:999px}
.wtb-blurb{color:var(--mut);font-size:13px}
.wtb-cta{display:inline-flex;align-items:center;gap:6px;color:var(--g2);font-weight:800;font-size:13.5px;white-space:nowrap}
.wtb-arrow{transition:transform .15s}
.wtb-row:hover .wtb-arrow{transform:translateX(3px)}
@media(max-width:560px){
  .wtb-row{grid-template-columns:auto 1fr;gap:4px 13px;padding:13px 15px}
  .wtb-row .aff-mark{width:38px;height:38px;font-size:17px}
  .wtb-cta{grid-column:2;justify-self:start;margin-top:6px}
}

/* gift-card / cheaper-sub block (Get Game Pass context) */
.gc-aff{background:linear-gradient(180deg,rgba(16,124,16,.12),var(--card));border:1px solid var(--line);border-radius:16px;padding:20px 22px;margin:18px 0}
.gc-aff-head h3{margin:0 0 4px;font-size:19px}
.gc-aff-head p{margin:0;color:var(--mut);font-size:14px;max-width:62ch}
.gc-aff-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.gc-aff-btn{display:inline-flex;align-items:center;gap:9px;background:var(--card2);border:1px solid var(--g);color:var(--g2);font-weight:700;font-size:14px;padding:9px 15px 9px 10px;border-radius:11px;transition:background .15s,transform .1s,border-color .15s}
.gc-aff-btn:hover{background:rgba(16,124,16,.16);text-decoration:none;transform:translateY(-1px)}
.gc-aff-btn .aff-mark{width:26px;height:26px;border-radius:7px;font-size:12px}
.gc-aff-btn .aff-go{color:inherit}

/* blog index + post */
.blog-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:16px}
.blog-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 22px;color:inherit}
.blog-card:hover{border-color:var(--g);text-decoration:none}
.blog-card h2{margin:0 0 8px;font-size:19px;color:var(--tx)}
.blog-card p{margin:0 0 12px;color:var(--mut);font-size:14px;line-height:1.5}
.blog-card .blog-date{color:var(--mut2);font-size:12.5px;text-transform:uppercase;letter-spacing:.4px}
.blog-post .blog-meta{color:var(--mut2);font-size:13px;margin-bottom:16px}
.blog-body h2{font-size:21px;margin:26px 0 10px}
.blog-body ul,.blog-body ol{padding-left:20px}
.blog-body li{margin:6px 0}
.blog-body p{margin:12px 0}