/* ==========================================================================
   GODZILA GAMES — graffiti / kaiju / goofy design system
   Palette: concrete cream + ink + atomic-green + hot-pink + purple + yellow
   Type: Bungee (display) · Bangers (goofy shout) · Fredoka (body)
   ========================================================================== */

:root{
  --wall:#F4EFE2;        /* concrete cream */
  --wall-2:#EBE4D2;
  --paper:#FFFFFF;
  --ink:#17121B;         /* near-black outline/text */
  --toxic:#9BE037;       /* atomic breath green */
  --toxic-dk:#6FB016;
  --hot:#FF2E88;         /* hot pink spray */
  --zap:#7A3BF5;         /* electric purple */
  --sun:#FFC220;         /* spray yellow */
  --sky:#22C7E6;         /* cyan pop */
  --muted:#6b6470;
  --shadow:5px 5px 0 var(--ink);
  --shadow-lg:8px 8px 0 var(--ink);
  --bd:3px solid var(--ink);
  --wrap:1220px;
  --f-disp:"Bungee",system-ui,sans-serif;
  --f-shout:"Bangers",system-ui,cursive;
  --f-body:"Fredoka",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden;max-width:100%}
body{
  margin:0;background:var(--wall);color:var(--ink);
  font-family:var(--f-body);font-size:17px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  background-image:radial-gradient(var(--wall-2) 1.5px,transparent 1.5px);
  background-size:22px 22px;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--f-disp);font-weight:400;line-height:1;margin:0;text-transform:uppercase}
h1{font-size:clamp(2.6rem,7vw,5.4rem)}
h2{font-size:clamp(1.8rem,4vw,3rem)}
h3{font-size:1.3rem}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.shout{font-family:var(--f-shout);letter-spacing:.02em}
.muted{color:var(--muted)}
.section{padding:clamp(48px,7vw,96px) 0}
.tight{padding:clamp(34px,4vw,60px) 0}
.spin-emoji{display:inline-block}

/* ---------- goofy animations ---------- */
@keyframes wob{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes shake{0%,100%{transform:translate(0,0)}20%{transform:translate(-2px,1px)}40%{transform:translate(2px,-1px)}60%{transform:translate(-1px,2px)}80%{transform:translate(1px,-2px)}}
@keyframes blink{0%,60%{opacity:1}61%,100%{opacity:.15}}
@keyframes stomp{0%,100%{transform:scale(1)}45%{transform:scale(1.12,.86)}70%{transform:scale(.96,1.05)}}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.bob{animation:bob 2.4s ease-in-out infinite}
.wob{animation:wob 3s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}

/* ---------- buttons (chunky stickers) ---------- */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-disp);font-size:.82rem;
  text-transform:uppercase;padding:.85em 1.4em;background:var(--toxic);color:var(--ink);
  border:var(--bd);box-shadow:var(--shadow);cursor:pointer;transition:transform .1s,box-shadow .1s;text-align:center}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.btn--hot{background:var(--hot);color:#fff}
.btn--zap{background:var(--zap);color:#fff}
.btn--sun{background:var(--sun)}
.btn--ghost{background:var(--paper)}
.btn--sm{padding:.55em .9em;font-size:.7rem;box-shadow:3px 3px 0 var(--ink)}
.btn--sm:hover{box-shadow:5px 5px 0 var(--ink)}
.btn--block{width:100%;justify-content:center}

/* ---------- tag / chip ---------- */
.tag{font-family:var(--f-disp);font-size:.6rem;text-transform:uppercase;padding:4px 9px;border:2px solid var(--ink);background:var(--sun);display:inline-block}
.kick{font-family:var(--f-shout);font-size:1.35rem;color:var(--hot);letter-spacing:.02em;display:inline-block;transform:rotate(-3deg)}

/* ---------- header (graffiti banner + sticker tabs) ---------- */
.top{background:var(--zap);color:#fff;font-family:var(--f-disp);font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;border-bottom:var(--bd)}
.top .wrap{display:flex;justify-content:space-between;align-items:center;height:30px;gap:12px;overflow:hidden;white-space:nowrap}
.hdr{position:sticky;top:0;z-index:60;background:var(--ink);border-bottom:4px solid var(--toxic)}
.hdr__row{display:flex;align-items:center;gap:16px;height:74px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-disp);font-size:1.7rem;color:var(--toxic);text-transform:uppercase;white-space:nowrap}
.brand__roar{font-size:1.9rem}
.brand b{color:var(--hot)}
.nav{display:flex;align-items:center;gap:8px;margin-left:auto}
.nav a{font-family:var(--f-disp);font-size:.72rem;text-transform:uppercase;color:var(--ink);background:var(--wall);
  padding:.55em .8em;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--toxic);transition:transform .12s}
.nav a:nth-child(2n){box-shadow:3px 3px 0 var(--hot);transform:rotate(-1.5deg)}
.nav a:nth-child(3n){box-shadow:3px 3px 0 var(--sky);transform:rotate(1.5deg)}
.nav a:hover{transform:translateY(-3px) rotate(-2deg);background:var(--sun)}
.nav a.on{background:var(--toxic)}
.hdr__cart{font-family:var(--f-disp);font-size:.72rem;text-transform:uppercase;color:var(--ink);background:var(--toxic);
  padding:.55em .9em;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--hot);display:inline-flex;gap:.5em;align-items:center}
.hdr__cart b{background:var(--hot);color:#fff;border-radius:20px;padding:0 7px;font-size:.72rem}
.burger{display:none;background:var(--toxic);border:2px solid var(--ink);width:44px;height:40px;font-size:1.2rem;cursor:pointer}

/* ---------- marquee ---------- */
.marq{background:var(--hot);color:#fff;border-top:var(--bd);border-bottom:var(--bd);overflow:hidden;padding:8px 0}
.marq__in{display:inline-flex;gap:34px;white-space:nowrap;font-family:var(--f-shout);font-size:1.5rem;animation:drift 22s linear infinite;will-change:transform}
.marq span{display:inline-flex;gap:34px}
.marq em{color:var(--sun);font-style:normal}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--ink);color:#fff;border-bottom:var(--bd);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px,4vw,50px);align-items:center;padding:clamp(40px,6vw,84px) 0}
.hero__blob{position:absolute;border-radius:50%;filter:blur(2px);opacity:.9;z-index:0}
.hero h1{color:#fff;position:relative;z-index:2}
.hero h1 em{font-style:normal;color:var(--toxic);text-shadow:4px 4px 0 var(--hot)}
.hero__lead{font-size:1.15rem;color:#e9e4f0;max-width:40ch;position:relative;z-index:2}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;position:relative;z-index:2}
.hero__mon{position:relative;z-index:2;text-align:center;font-size:clamp(9rem,22vw,17rem);line-height:1;filter:drop-shadow(8px 8px 0 var(--hot))}
.hero__spray{position:absolute;font-family:var(--f-shout);font-size:2.2rem;color:var(--sun);transform:rotate(-12deg);z-index:3}
.hero__badges{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap;position:relative;z-index:2}
.hero__badge{background:var(--paper);color:var(--ink);border:var(--bd);box-shadow:4px 4px 0 var(--toxic);padding:8px 12px;font-family:var(--f-disp);font-size:.62rem;text-transform:uppercase}
.hero__badge b{display:block;font-size:1.1rem;color:var(--hot)}

/* ---------- section heading ---------- */
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,40px)}
.head h2{position:relative;display:inline-block}
.head h2::after{content:"";position:absolute;left:0;bottom:-8px;width:100%;height:8px;background:var(--toxic);z-index:-1;transform:rotate(-1deg)}
.head__link{font-family:var(--f-disp);font-size:.72rem;text-transform:uppercase;background:var(--sun);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:.5em .8em}
.head__link:hover{background:var(--hot);color:#fff}

/* ---------- product cards (sticker / wanted poster) ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:clamp(16px,2vw,26px)}
.card{background:var(--paper);border:var(--bd);box-shadow:var(--shadow);display:flex;flex-direction:column;
  transition:transform .14s,box-shadow .14s;position:relative}
.card:nth-child(3n){transform:rotate(-.6deg)}
.card:nth-child(3n+1){transform:rotate(.5deg)}
.card:hover{transform:translate(-3px,-4px) rotate(0);box-shadow:var(--shadow-lg);z-index:3}
.card__pic{position:relative;aspect-ratio:4/3;overflow:hidden;border-bottom:var(--bd);background:var(--wall-2)}
.card__pic img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.card:hover .card__pic img{transform:scale(1.06)}
.card__off{position:absolute;top:-6px;right:8px;background:var(--hot);color:#fff;font-family:var(--f-disp);font-size:.7rem;
  padding:5px 8px;border:2px solid var(--ink);transform:rotate(6deg);box-shadow:2px 2px 0 var(--ink)}
.card__plat{position:absolute;bottom:8px;left:8px;background:var(--ink);color:var(--toxic);font-family:var(--f-disp);
  font-size:.56rem;text-transform:uppercase;padding:3px 7px}
.card__meter{position:absolute;top:8px;left:8px;background:var(--sun);border:2px solid var(--ink);font-family:var(--f-disp);
  font-size:.56rem;padding:2px 6px;text-transform:uppercase}
.card__b{padding:13px 14px 15px;display:flex;flex-direction:column;flex:1;gap:7px}
.card__name{font-family:var(--f-disp);font-size:1.02rem;line-height:1.05}
.card__name a:hover{color:var(--hot)}
.card__tz{font-size:.83rem;color:var(--muted);margin:0;line-height:1.4}
.card__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:8px}
.card__price{font-family:var(--f-disp);font-size:1.05rem}
.card__price s{color:var(--muted);font-size:.72rem;font-family:var(--f-body)}
.card__ttc{font-family:var(--f-body);font-size:.62rem;color:var(--muted);display:block}

/* ---------- catalogue ---------- */
.catbar{background:var(--ink);color:#fff;border-bottom:var(--bd);padding:22px 0}
.catbar h1{color:var(--toxic)}
.catbar h1 em{font-style:normal;color:var(--hot)}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px}
.chip{font-family:var(--f-disp);font-size:.66rem;text-transform:uppercase;padding:.45em .8em;background:var(--wall);color:var(--ink);
  border:2px solid var(--ink);box-shadow:3px 3px 0 var(--toxic);cursor:pointer}
.chip:hover{transform:translateY(-2px)}
.chip.on{background:var(--hot);color:#fff;box-shadow:3px 3px 0 var(--sun)}
.catwrap{padding:clamp(26px,4vw,48px) 0 clamp(50px,7vw,90px)}
.cattools{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.cattools .cnt{font-family:var(--f-shout);font-size:1.6rem;color:var(--zap)}
.cattools select{font-family:var(--f-disp);font-size:.72rem;background:var(--sun);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:.5em .7em}
.empty{border:3px dashed var(--ink);background:var(--paper);padding:50px 20px;text-align:center}

/* ---------- monster meter (goofy ledger) ---------- */
.meter{border:var(--bd);background:var(--paper);box-shadow:var(--shadow-lg)}
.meter__row{display:grid;grid-template-columns:52px 1.5fr 1fr 88px;gap:14px;align-items:center;padding:13px clamp(12px,2vw,22px);border-top:2px solid var(--ink)}
.meter__row:first-child{border-top:0}
.meter__row.h{background:var(--zap);color:#fff;font-family:var(--f-disp);font-size:.62rem;text-transform:uppercase}
.meter__rk{font-family:var(--f-shout);font-size:1.8rem;color:var(--hot)}
.meter__nm{font-family:var(--f-disp);font-size:1rem}
.meter__nm small{display:block;font-family:var(--f-body);font-size:.72rem;color:var(--muted)}
.bar{height:16px;border:2px solid var(--ink);background:var(--wall-2);position:relative;overflow:hidden}
.bar i{display:block;height:100%;background:repeating-linear-gradient(45deg,var(--toxic),var(--toxic) 8px,var(--toxic-dk) 8px,var(--toxic-dk) 16px)}
.meter__pr{font-family:var(--f-disp);text-align:right}

/* ---------- rampage picker ---------- */
.ramp{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ramp a{border:var(--bd);background:var(--paper);box-shadow:var(--shadow);padding:20px 16px;display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden;transition:transform .14s}
.ramp a:hover{transform:translate(-3px,-4px);box-shadow:var(--shadow-lg)}
.ramp a:nth-child(1){background:var(--toxic)}
.ramp a:nth-child(2){background:var(--hot);color:#fff}
.ramp a:nth-child(3){background:var(--sky)}
.ramp a:nth-child(4){background:var(--sun)}
.ramp__ico{font-size:2.4rem;line-height:1}
.ramp h3{font-size:1.25rem}
.ramp p{font-size:.82rem;margin:0}
.ramp .go{font-family:var(--f-disp);font-size:.62rem;text-transform:uppercase;margin-top:4px}

/* ---------- eyewitness reports ---------- */
.wit{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.witc{background:var(--paper);border:var(--bd);box-shadow:var(--shadow);padding:20px}
.witc:nth-child(2){transform:rotate(-1deg)}
.witc__tag{font-family:var(--f-disp);font-size:.58rem;text-transform:uppercase;background:var(--ink);color:var(--toxic);padding:3px 7px;display:inline-block;margin-bottom:10px}
.witc__q{font-size:1rem;line-height:1.5;margin:0 0 12px}
.witc__by{font-family:var(--f-shout);font-size:1.3rem;color:var(--hot)}
.witc__st{color:var(--sun);-webkit-text-stroke:1px var(--ink);font-size:1.1rem}

/* ---------- assurance ---------- */
.assure{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.assure div{background:var(--paper);border:var(--bd);box-shadow:var(--shadow);padding:18px}
.assure .e{font-size:2rem}
.assure h3{font-size:1rem;margin:8px 0 4px}
.assure p{font-size:.82rem;color:var(--muted);margin:0}

/* ---------- gift block ---------- */
.gift{border:var(--bd);box-shadow:var(--shadow-lg);background:var(--toxic);display:grid;grid-template-columns:1fr 1fr;overflow:hidden}
.gift__img{width:100%;height:100%;min-height:230px;object-fit:cover;border-left:var(--bd)}
.gift__b{padding:clamp(24px,3.5vw,44px)}
.gift__b .kick{color:var(--zap)}
.gift__b strong{background:var(--sun);padding:0 4px;border:2px solid var(--ink)}

/* ---------- PDP ---------- */
.pdp{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(22px,4vw,50px);padding:clamp(26px,3.5vw,50px) 0 clamp(40px,6vw,80px);align-items:start}
.pdp__main{border:var(--bd);box-shadow:var(--shadow-lg);background:var(--wall-2);overflow:hidden}
.pdp__main img{width:100%;aspect-ratio:4/3;object-fit:cover}
.pdp__thumbs{display:flex;gap:8px;margin-top:8px}
.pdp__thumbs button{flex:1;border:var(--bd);background:none;padding:0;cursor:pointer;overflow:hidden;box-shadow:2px 2px 0 var(--ink)}
.pdp__thumbs button.on{border-color:var(--hot)}
.pdp__thumbs img{aspect-ratio:4/3;object-fit:cover}
.pdp__price{display:inline-flex;align-items:baseline;gap:10px;background:var(--sun);border:var(--bd);box-shadow:var(--shadow);padding:8px 14px;font-family:var(--f-disp);font-size:1.7rem;margin:.4em 0;transform:rotate(-1.5deg)}
.pdp__price s{font-size:.9rem;font-family:var(--f-body);color:var(--muted)}
.pdp__price .off{font-size:.7rem;background:var(--hot);color:#fff;padding:2px 6px;border:2px solid var(--ink)}
.pdp__buy{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}
.pdp__desc{white-space:pre-line}
.spec{width:100%;border-collapse:collapse;margin-top:16px;border:var(--bd)}
.spec td{padding:9px 12px;border-top:2px solid var(--ink);font-size:.9rem}
.spec td:first-child{font-family:var(--f-disp);font-size:.62rem;text-transform:uppercase;background:var(--wall-2);width:38%}
.crumbs{font-family:var(--f-disp);font-size:.62rem;text-transform:uppercase;padding:16px 0;color:var(--muted)}
.crumbs a:hover{color:var(--hot)}

/* ---------- cart / checkout ---------- */
.cartrow{display:grid;grid-template-columns:70px 1fr auto auto;gap:14px;align-items:center;background:var(--paper);border:var(--bd);box-shadow:var(--shadow);padding:12px;margin-bottom:12px}
.cartrow img{width:70px;height:70px;object-fit:cover;border:2px solid var(--ink)}
.qty{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-disp)}
.qty button{width:30px;height:30px;border:2px solid var(--ink);background:var(--toxic);cursor:pointer;font-family:var(--f-disp)}
.rm{background:none;border:0;font-family:var(--f-disp);font-size:.6rem;text-transform:uppercase;color:var(--hot);cursor:pointer}
.summary{border:var(--bd);box-shadow:var(--shadow-lg);background:var(--paper);padding:22px}
.summary dl{display:grid;grid-template-columns:1fr auto;gap:8px 12px;margin:0 0 16px}
.summary dt{color:var(--muted)}
.summary .tot{font-family:var(--f-disp);font-size:1.3rem}
.field{display:block;margin-bottom:14px}
.field span{font-family:var(--f-disp);font-size:.62rem;text-transform:uppercase;display:block;margin-bottom:5px}
.field input,.field textarea,.field select{width:100%;font-family:var(--f-body);font-size:1rem;padding:.6em .7em;border:var(--bd);background:var(--paper)}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:#fff;border-top:6px solid var(--toxic);padding:clamp(40px,5vw,70px) 0 30px;margin-top:30px}
.foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:28px}
.foot h4{font-family:var(--f-disp);font-size:.72rem;text-transform:uppercase;color:var(--toxic);margin:0 0 12px}
.foot a{display:block;color:#d9d3e0;padding:.24em 0;font-size:.92rem}
.foot a:hover{color:var(--hot)}
.foot__brand p{color:#b8b1c4;font-size:.9rem;max-width:34ch}
.foot__pay span{display:inline-block;font-family:var(--f-disp);font-size:.56rem;border:2px solid var(--toxic);padding:3px 7px;margin:4px 4px 0 0}
.foot__legal{border-top:2px solid #35303c;margin-top:34px;padding-top:18px;font-size:.78rem;color:#8f8899;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

/* ---------- prose (legal) ---------- */
.prose{max-width:740px}
.prose h2{margin:1.3em 0 .4em}
.prose h3{margin:1.1em 0 .3em;font-size:1.05rem}
.prose table{width:100%;border-collapse:collapse;border:var(--bd);margin:1em 0}
.prose td,.prose th{border:2px solid var(--ink);padding:9px 11px;text-align:left;font-size:.9rem}
.prose th{background:var(--toxic);font-family:var(--f-disp);font-size:.62rem;text-transform:uppercase}

/* ---------- cart drawer + toast ---------- */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(140%);background:var(--ink);color:var(--toxic);
  font-family:var(--f-disp);font-size:.8rem;text-transform:uppercase;padding:12px 20px;border:3px solid var(--toxic);z-index:200;transition:transform .3s}
.toast.on{transform:translateX(-50%) translateY(0)}

/* ---------- mobile ---------- */
.msheet{position:fixed;inset:0;z-index:90;background:var(--ink);transform:translateX(100%);transition:.25s;padding:24px;display:flex;flex-direction:column;gap:6px}
.msheet.on{transform:none}
.msheet a{font-family:var(--f-disp);color:#fff;text-transform:uppercase;font-size:1.5rem;padding:.3em 0;border-bottom:2px solid #35303c}
.msheet a:hover{color:var(--toxic)}
.msheet__x{align-self:flex-end;background:var(--hot);color:#fff;border:2px solid #fff;font-size:1.4rem;width:44px;height:44px;cursor:pointer}
.cko-cookie{display:none}

@media(max-width:960px){
  .hero .wrap{grid-template-columns:1fr}
  .hero__mon{font-size:clamp(7rem,30vw,11rem)}
  .foot__grid{grid-template-columns:1fr 1fr}
  .ramp{grid-template-columns:1fr 1fr}
  .wit{grid-template-columns:1fr}
  .assure{grid-template-columns:1fr 1fr}
  .pdp{grid-template-columns:1fr}
  .gift{grid-template-columns:1fr}
}
@media(max-width:760px){
  .nav,.top{display:none}
  .burger{display:inline-block}
  .cartrow{grid-template-columns:56px 1fr;grid-auto-rows:auto}
  .meter__row{grid-template-columns:40px 1.5fr 70px}
  .meter__row .bar{display:none}
}
@media(max-width:520px){.ramp,.assure,.foot__grid{grid-template-columns:1fr}}

/* ---------- split (text + real photo) ---------- */
.split{display:grid;grid-template-columns:1fr 1.05fr;border:var(--bd);box-shadow:var(--shadow-lg);background:var(--paper);overflow:hidden}
.split img{width:100%;height:100%;object-fit:cover;min-height:300px;display:block;border-right:var(--bd)}
.split--rev img{order:2;border-right:0;border-left:var(--bd)}
.split__b{padding:clamp(26px,4vw,48px);align-self:center}
.split__b h2{margin:.05em 0 .45em}
.split__b .lead{font-size:1.05rem}
.split__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.split__tags span{font-family:var(--f-disp);font-size:.58rem;text-transform:uppercase;border:2px solid var(--ink);background:var(--sun);padding:4px 8px}
/* photo strip band */
.strip{position:relative;border:var(--bd);box-shadow:var(--shadow-lg);overflow:hidden;min-height:220px;display:flex;align-items:center;justify-content:center;text-align:center}
.strip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.strip__v{position:relative;z-index:2;background:rgba(23,18,27,.7);border:3px solid var(--toxic);padding:22px 30px;margin:20px}
.strip__v h2{color:#fff}
.strip__v h2 em{font-style:normal;color:var(--toxic)}
@media(max-width:860px){.split{grid-template-columns:1fr}.split img,.split--rev img{order:0;border-right:0;border-left:0;border-bottom:var(--bd);min-height:220px}}

/* ======================================================================
   FIX PACK 20260707 — footer/toast peek, mobile header, hero clip
   ====================================================================== */

/* (1) Empty toast was peeking a green sliver at bottom-centre ("cut footer").
   Fully hide until active. */
.toast{visibility:hidden;opacity:0;transition:transform .3s,opacity .2s}
.toast.on{visibility:visible;opacity:1}

/* (2) Give the page real breathing room at the very bottom so nothing
   fixed can visually clip the footer. */
.foot{padding-bottom:44px}

/* (3) Mobile header — keep the burger on-screen (it was pushed past the
   overflow-x:hidden edge on narrow phones, so "no menu" appeared). */
@media(max-width:760px){
  .hdr__row{gap:10px;height:64px}
  .brand{font-size:1.15rem;gap:6px}
  .brand__roar{font-size:1.35rem}
  .hdr__cart{margin-left:auto;padding:.5em .7em}
  .hdr__cart span{display:none}          /* keep 🛒 + count, drop the word */
  .burger{display:inline-block;flex:0 0 auto}
}
@media(max-width:380px){
  .brand{font-size:1rem}
  .hdr__cart{padding:.5em .55em}
}

/* (4) Hero on phones — tame the giant lizard + spray so nothing gets
   clipped and the section keeps sensible height. */
@media(max-width:760px){
  .hero .wrap{padding:34px 0 42px}
  .hero__mon{font-size:clamp(6rem,30vw,9.5rem);margin:6px 0}
  .hero__spray{font-size:1.5rem}
  .hero__badges{gap:8px}
}

/* (5) Marquee can cause horizontal scroll on some phones — belt & braces. */
.marq,.marq__in{max-width:100vw}

/* ======================================================================
   THEMATIC SLIDERS (.slab) — photo-backed rails of product cards
   ====================================================================== */
.slab{position:relative;padding:clamp(40px,5vw,72px) 0;border-top:var(--bd);border-bottom:var(--bd);overflow:hidden;color:#fff}
.slab::before{content:"";position:absolute;inset:0;background:var(--slab-bg) center/cover no-repeat;z-index:0;filter:saturate(1.1)}
.slab::after{content:"";position:absolute;inset:0;z-index:1}
.slab--fight::after{background:linear-gradient(120deg,rgba(23,18,27,.94) 0%,rgba(122,59,245,.72) 60%,rgba(255,46,136,.55) 100%)}
.slab--rpg::after{background:linear-gradient(120deg,rgba(23,18,27,.94) 0%,rgba(23,18,27,.72) 45%,rgba(155,224,55,.42) 100%)}
.slab .wrap{position:relative;z-index:2}
.slab__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.slab__head h2{color:#fff;text-shadow:4px 4px 0 var(--ink)}
.slab__head p{color:#efeaf6;max-width:46ch;margin:.4em 0 0;font-size:.98rem}
.slab__nav{display:flex;gap:8px}
.slab__arw{width:46px;height:46px;border:var(--bd);background:var(--sun);color:var(--ink);font-family:var(--f-disp);font-size:1.4rem;cursor:pointer;box-shadow:3px 3px 0 var(--ink);line-height:1}
.slab__arw:hover{background:var(--toxic);transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.slab__arw:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.rail{display:flex;gap:18px;overflow-x:auto;padding:6px 2px 16px;scroll-snap-type:x mandatory;scrollbar-width:thin;scroll-behavior:smooth}
.rail::-webkit-scrollbar{height:10px}
.rail::-webkit-scrollbar-thumb{background:var(--toxic);border:2px solid var(--ink)}
.rail::-webkit-scrollbar-track{background:rgba(255,255,255,.15)}
.rail > .card{flex:0 0 clamp(210px,60vw,256px);scroll-snap-align:start;background:var(--paper);color:var(--ink)}
@media(max-width:760px){.slab__nav{display:none}}

/* ======================================================================
   THE LAIR — blog hub + post cards + article
   ====================================================================== */
.lair-feat{display:grid;grid-template-columns:1.15fr 1fr;border:var(--bd);box-shadow:var(--shadow-lg);background:var(--paper);overflow:hidden;margin-bottom:26px}
.lair-feat__pic{position:relative;min-height:280px;background:var(--wall-2) center/cover no-repeat;border-right:var(--bd);display:block}
.lair-feat__tag{position:absolute;top:14px;left:14px;font-family:var(--f-disp);font-size:.62rem;text-transform:uppercase;background:var(--hot);color:#fff;border:2px solid var(--ink);padding:5px 9px}
.lair-feat__b{padding:clamp(22px,3vw,40px);display:flex;flex-direction:column;gap:10px;align-self:center}
.lair-feat__t{font-family:var(--f-disp);font-size:clamp(1.4rem,2.6vw,2.1rem);text-transform:uppercase;line-height:1.02}
.lair-feat__x{color:var(--muted);font-size:1.02rem}
.lair-feat__meta{font-family:var(--f-disp);font-size:.66rem;text-transform:uppercase;color:var(--zap);margin-top:4px}
.lair-feat:hover .lair-feat__t{color:var(--hot)}
@media(max-width:760px){.lair-feat{grid-template-columns:1fr}.lair-feat__pic{border-right:0;border-bottom:var(--bd)}}

.postgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.postgrid--main{margin-bottom:30px}
@media(max-width:900px){.postgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.postgrid{grid-template-columns:1fr}}
.post-card{display:flex;flex-direction:column;border:var(--bd);box-shadow:var(--shadow);background:var(--paper);overflow:hidden;transition:transform .12s,box-shadow .12s}
.post-card:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink)}
.post-card__pic{position:relative;aspect-ratio:16/9;background:var(--wall-2) center/cover no-repeat;border-bottom:var(--bd);display:block}
.post-card__tag{position:absolute;top:10px;left:10px;font-family:var(--f-disp);font-size:.56rem;text-transform:uppercase;background:var(--sun);color:var(--ink);border:2px solid var(--ink);padding:4px 7px}
.post-card__b{padding:14px 16px 18px;display:flex;flex-direction:column;gap:6px}
.post-card__k{font-family:var(--f-disp);font-size:.58rem;text-transform:uppercase;color:var(--zap)}
.post-card__t{font-family:var(--f-disp);font-size:1.02rem;text-transform:uppercase;line-height:1.1}
.post-card:hover .post-card__t{color:var(--hot)}
.post-card__x{color:var(--muted);font-size:.86rem;line-height:1.4}

.lair-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;border:var(--bd);box-shadow:var(--shadow);background:var(--toxic);padding:22px 26px}

/* article */
.post__hero{position:relative;background:var(--ink) center/cover no-repeat;color:#fff;border-bottom:var(--bd);padding:clamp(40px,6vw,90px) 0 clamp(24px,3vw,40px)}
.post__hero::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(23,18,27,.93),rgba(122,59,245,.6))}
.post__hero .wrap{position:relative;z-index:2}
.post__hero h1{color:#fff;text-shadow:5px 5px 0 var(--ink);max-width:22ch;margin:.15em 0}
.post__meta{font-family:var(--f-disp);font-size:.66rem;text-transform:uppercase;color:#e9e4f0}
.post__wrap{padding-top:clamp(26px,3vw,46px)}
.post__body{max-width:760px}
.post__body h2{margin:1.4em 0 .4em;font-size:1.5rem}
.post__body p{font-size:1.06rem;line-height:1.7}
.lair-link{color:var(--zap);text-decoration:underline;text-decoration-thickness:2px;font-family:var(--f-disp);font-size:.9rem;text-transform:uppercase}
.lair-link:hover{color:var(--hot)}

/* ======================================================================
   GARY'S OBSESSIONS (staff picks) + slim promise bar
   ====================================================================== */
.picks{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:860px){.picks{grid-template-columns:1fr}}
.pick{display:flex;flex-direction:column;border:var(--bd);box-shadow:var(--shadow-lg);background:var(--paper);overflow:hidden}
.pick__pic{position:relative;aspect-ratio:16/10;overflow:hidden;border-bottom:var(--bd);background:var(--wall-2);display:block}
.pick__pic img{width:100%;height:100%;object-fit:cover;transition:transform .25s}
.pick:hover .pick__pic img{transform:scale(1.05)}
.pick__badge{position:absolute;top:12px;left:12px;font-family:var(--f-disp);font-size:.62rem;text-transform:uppercase;background:var(--zap);color:#fff;border:2px solid var(--ink);padding:5px 9px;box-shadow:2px 2px 0 var(--ink);transform:rotate(-2deg)}
.pick__b{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.pick__name{font-family:var(--f-disp);font-size:1.15rem;text-transform:uppercase;line-height:1.05}
.pick__name a:hover{color:var(--hot)}
.pick__blurb{color:var(--ink);font-size:.94rem;line-height:1.5;flex:1}
.pick__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:6px}
.pick__price{font-family:var(--f-disp);font-size:1.15rem}

.promise{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center;align-items:center;
  border:var(--bd);box-shadow:var(--shadow);background:var(--sun);padding:16px 22px;
  font-family:var(--f-disp);font-size:.72rem;text-transform:uppercase;text-align:center}
.promise span{white-space:nowrap}

/* clickable genre-guide cards (Know your carnage) */
.assure a.genre-card{background:var(--paper);border:var(--bd);box-shadow:var(--shadow);padding:18px;display:flex;flex-direction:column;text-decoration:none;transition:transform .12s,box-shadow .12s}
.assure a.genre-card:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink)}
.assure a.genre-card:hover h3{color:var(--hot)}
.genre-card__go{margin-top:10px;font-family:var(--f-disp);font-size:.62rem;text-transform:uppercase;color:var(--zap)}
.assure a.genre-card:hover .genre-card__go{color:var(--hot)}