/* ===== Hero v2: wall of physical game cases (concept mockup; non-free box art) ===== */
.hero2{--cw:clamp(118px,10.8vw,172px);position:relative;isolation:isolate;overflow:hidden;background:#05040a;
  min-height:min(840px,calc(100vh - var(--nav-h) - 26px));min-height:min(840px,calc(100svh - var(--nav-h) - 26px));
  display:grid;align-items:center;padding:2.6rem 0 4.6rem}
.wall{position:absolute;inset:0;z-index:-5;pointer-events:none}
.ly{position:absolute;inset:-5% -3%;will-change:transform;transform:translate3d(calc(var(--mx,0)*var(--px,0)*1px),calc((var(--my,0)*var(--py,0) + var(--sy,0)*var(--sk,0))*1px),0)}
.ly.back{--px:-8;--py:-5;--sk:.22;filter:blur(2px) brightness(.62) saturate(.9)}
.ly.mid{--px:-16;--py:-9;--sk:.12;filter:blur(.7px) brightness(.86) saturate(1)}
.ly.front{--px:-30;--py:-15;--sk:.04;filter:brightness(1)}
.drift{position:absolute;inset:0;perspective:1500px;perspective-origin:50% 38%;animation:wdrift 26s ease-in-out infinite alternate}
.ly.mid .drift{animation-duration:21s;animation-direction:alternate-reverse}
.ly.front .drift{animation-duration:17s}
@keyframes wdrift{from{transform:translate3d(-.6%,.5%,0)}to{transform:translate3d(.7%,-.6%,0)}}
.paused,.paused *{animation-play-state:paused!important}

/* the case */
.cs{--k:1;--d:calc(var(--cw)*var(--k)*.1);position:absolute;left:var(--x);top:var(--y);width:calc(var(--cw)*var(--k));aspect-ratio:var(--ar,.72);
  transform-style:preserve-3d;transform:translate(-50%,-50%) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotateZ(var(--rz,0deg));
  --bar:#7cc142;--bar2:#3f8a1a;--barfg:#fff;--edge:#2f6d12;--plastic:#0a0d0a;--hl:.28}
.cs-in{position:absolute;inset:0;transform-style:preserve-3d}
.cf,.cb,.ce{position:absolute;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cf{inset:0;container-type:inline-size;border-radius:2px 4px 4px 2px;overflow:hidden;background:var(--plastic);transform:translateZ(calc(var(--d)/2));
  box-shadow:0 22px 30px -6px rgba(0,0,0,.65),0 0 0 1px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.22),inset 0 0 0 3px rgba(0,0,0,.4)}
.cb{inset:0;background:#07070a;border-radius:3px;transform:translateZ(calc(var(--d)/-2)) rotateY(180deg)}
.ce{background:linear-gradient(90deg,var(--edge),#0b0b0f 70%)}
.ce-l{left:calc(var(--d)/-2);top:0;width:var(--d);height:100%;transform:rotateY(-90deg);background:linear-gradient(180deg,var(--bar),var(--edge) 12%,var(--plastic) 13%,var(--plastic))}
.ce-r{right:calc(var(--d)/-2);top:0;width:var(--d);height:100%;transform:rotateY(90deg);background:linear-gradient(180deg,var(--bar),var(--edge) 12%,#d9dde3 13%,#8b9099 100%);opacity:.9}
.ce-t{left:0;top:calc(var(--d)/-2);width:100%;height:var(--d);transform:rotateX(90deg);background:var(--edge)}
.ce-b{left:0;bottom:calc(var(--d)/-2);width:100%;height:var(--d);transform:rotateX(-90deg);background:#0a0a0e}
.cbar{position:absolute;left:0;right:0;top:0;height:9%;display:flex;align-items:center;justify-content:space-between;padding:0 5% 0 8%;
  background:linear-gradient(180deg,var(--bar),var(--bar2));color:var(--barfg);font:700 5.4cqw/1 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.cbar i{width:5cqw;height:5cqw;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--barfg) 30%,rgba(255,255,255,.2) 70%);opacity:.9;flex:none}
.cs img{position:absolute;left:4.6%;right:0;top:9%;bottom:0;width:95.4%;height:91%;object-fit:cover;object-position:50% 20%;display:block}
.cf::before{content:"";position:absolute;left:0;top:9%;bottom:0;width:4.6%;z-index:2;background:linear-gradient(90deg,var(--bar2),var(--bar) 55%,var(--bar2));box-shadow:2px 0 4px rgba(0,0,0,.55);border-right:1px solid rgba(255,255,255,.25)}
.cf::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(106deg,rgba(255,255,255,0) 14%,rgba(255,255,255,var(--hl)) 24%,rgba(255,255,255,.04) 31%,rgba(255,255,255,0) 40%,rgba(255,255,255,.1) 58%,rgba(255,255,255,0) 68%),
  linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 18%,rgba(0,0,0,0) 70%,rgba(0,0,0,.28))}
/* platforms */
.p-x360,.p-xbox{--bar:#8dc63f;--bar2:#4e9a1c;--edge:#2f6d12}
.p-xbox{--bar:#7fb83a;--bar2:#2c5d12;--plastic:#0a0d0a}
.p-ps3{--bar:#1b1c22;--bar2:#07070a;--edge:#0a4f93;--plastic:#06070b;--barfg:#fff}
.p-ps3 .cbar{border-bottom:2px solid #0a72d6}
.p-ps3::after{content:none}
.p-ps2{--bar:#1a2f78;--bar2:#0a1238;--edge:#0a1544;--plastic:#05060f}
.p-ps2 .cbar{border-bottom:2px solid #5a7dff}
.p-switch{--ar:.64;--bar:#e60012;--bar2:#b30010;--edge:#8a000c;--plastic:#12090a}
.p-wii{--bar:#f4f7fa;--bar2:#cfe3ee;--barfg:#007bb8;--edge:#7fb4cc;--plastic:#eef3f6}
.p-wii .cbar i{background:radial-gradient(circle at 35% 30%,#fff,#00a2e0 40%)}
.p-pc{--bar:#2a2c33;--bar2:#14151a;--edge:#2a2c33;--plastic:#0a0a0d;--barfg:#e9e7f5}
.p-pc .cbar{border-bottom:2px solid #f28a1b}
.p-pc .cbar i{border-radius:2px;background:linear-gradient(135deg,#f28a1b,#ffcc66)}
.cs.soft .cf{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}

/* Halo 3 hero case */
.hero2::before{content:"";position:absolute;inset:0;z-index:-3;pointer-events:none;
  background:radial-gradient(ellipse 52% 40% at 50% 21%,rgba(5,4,10,.7),rgba(5,4,10,.4) 62%,rgba(5,4,10,0) 100%),
  linear-gradient(180deg,rgba(5,4,10,.62) 0,rgba(5,4,10,.18) 32%,rgba(5,4,10,.1) 60%,var(--bg) 100%),
  linear-gradient(90deg,rgba(5,4,10,.5),rgba(5,4,10,0) 18%,rgba(5,4,10,0) 82%,rgba(5,4,10,.5))}
.spot{position:absolute;inset:0;z-index:-4;pointer-events:none;mix-blend-mode:screen}
.spot::before{content:"";position:absolute;left:50%;top:-6%;width:62%;height:100%;transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(185,149,255,.08) 55%,transparent 85%);clip-path:polygon(40% 0,60% 0,92% 100%,8% 100%);filter:blur(18px)}
.spot::after{content:"";position:absolute;left:50%;top:62%;width:56%;height:54%;transform:translate(-50%,-50%);
  background:radial-gradient(ellipse,rgba(25,230,255,.34),rgba(139,61,255,.22) 38%,rgba(255,46,154,.1) 56%,transparent 72%)}
.h2-grid{position:relative;z-index:2;display:grid;gap:clamp(.6rem,1.6vw,1.4rem);justify-items:center}
.h2-head{text-align:center;display:flex;flex-direction:column;align-items:center}
.hero2 .glitch{margin:.8rem 0 .5rem;font-size:clamp(3.2rem,10.4vw,9.4rem);text-shadow:0 6px 40px rgba(0,0,0,.7)}
.hero2 .tagline{margin:0}
.h2-stage{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(1rem,2.4vw,2.4rem);align-items:center;width:100%;max-width:1180px}
.flank{background:linear-gradient(135deg,rgba(7,6,13,.86),rgba(18,13,36,.74));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:3px;padding:1.2rem 1.3rem}
.flank.l{justify-self:end;max-width:380px}
.flank.r{justify-self:start;max-width:340px}
.flank .lede{margin:0 0 1.2rem;font-size:1rem;color:#cfc6e8}
.flank.r h2{font:800 .8rem/1 var(--f-ui);letter-spacing:.22em;text-transform:uppercase;color:var(--cyan);margin:0 0 .8rem}
.flank.r p{margin:0 0 1rem;color:#cfc6e8;font-size:.95rem}
.flank .hero-chips{margin-top:0}
.flank a.lnk{display:inline-block;margin-top:.9rem;font:700 .8rem/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);border-bottom:1px solid currentColor;padding-bottom:.2rem}
.halo{position:relative;width:clamp(200px,calc(var(--cw)*2.05),320px);aspect-ratio:.72;display:grid;perspective:1100px}
.halo .cs{position:relative;left:auto;top:auto;transform:none;width:100%;--k:1;--d:calc(var(--cw)*.2);--hl:.34;animation:hfloat 7s ease-in-out infinite}
.halo .cs{transform:translateY(0) rotateX(calc(4deg + var(--my,0)*-5deg)) rotateY(calc(-14deg + var(--mx,0)*14deg)) rotateZ(-1.5deg)}
@keyframes hfloat{0%,100%{translate:0 0}50%{translate:0 -14px}}
.np{position:absolute;right:-12%;top:7%;z-index:5;display:flex;align-items:center;gap:.5rem;background:linear-gradient(90deg,#d6167b,#7a35f0);color:#fff;font:700 .72rem/1 var(--f-ui);letter-spacing:.18em;text-transform:uppercase;padding:.5rem .7rem .5rem .6rem;box-shadow:0 6px 18px rgba(0,0,0,.5);clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%)}
.np::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.25}}
.halo::before{content:"";position:absolute;inset:-14% -26%;background:radial-gradient(ellipse,rgba(25,230,255,.26),rgba(139,61,255,.14) 45%,transparent 70%);pointer-events:none}
.halo-shadow{position:absolute;left:8%;right:8%;bottom:-18px;height:26px;background:radial-gradient(ellipse,rgba(0,0,0,.7),transparent 70%);filter:blur(4px)}
.cover-ribbon{position:absolute;right:0;top:.8rem;z-index:6;background:rgba(7,6,13,.78);color:#e7dcff;border:1px solid var(--line);border-right:0;font:700 .64rem/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;padding:.45rem .7rem;pointer-events:none}
.cover-ribbon b{color:var(--gold)}
.hero2 .scroll-hint{display:none}
#particles{opacity:.8}

/* ===== Hero shuffle (v3): center case swaps, readout bar, controls. transform/opacity only; fixed boxes = no layout shift ===== */
.hs{grid-area:1/1;display:grid;place-items:center;transform-style:preserve-3d;visibility:hidden;will-change:transform}
.hs[data-s=show],.hs[data-s=in]{visibility:visible}
.hs[data-s=in]{z-index:2;animation:r5in .35s cubic-bezier(.2,.85,.25,1) both}
.hs[data-s=out]{z-index:1;animation:r5out .35s cubic-bezier(.5,0,.8,.4) both}
.hs[data-s=show]{z-index:2}
@keyframes r5in{from{transform:translate3d(16%,0,-140px) rotateY(-82deg) scale(.86)}to{transform:none}}
@keyframes r5out{from{visibility:visible;transform:none;opacity:1}to{visibility:visible;transform:translate3d(-22%,0,-220px) rotateY(72deg) scale(.78);opacity:0}}
.halo .cs.p-switch{width:89%}
/* until shuffle.js has chosen the opening cover, keep the case invisible (prevents a flash of the wrong game); fallback reveal after 1.2s */
.r5 .halo .hs[data-s=show]{animation:r5reveal .01s 1.2s both;opacity:0}
.r5 .halo.ready .hs[data-s=show]{animation:none;opacity:1}
@keyframes r5reveal{to{opacity:1}}
/* the wall slot that receives the previous case */
.cs[data-sw]{animation:r5s .4s .08s cubic-bezier(.2,.85,.25,1) both}
@keyframes r5s{from{opacity:0;scale:.82}to{opacity:1;scale:1}}
@keyframes r5s2{from{opacity:0;scale:.82}to{opacity:1;scale:1}}
.np{gap:.45rem}
.np b{font-weight:700;opacity:.85}
.np[data-a]{animation:r5pop .35s both}
@keyframes r5pop{from{scale:.82;opacity:.4}to{scale:1;opacity:1}}
.np[data-a="2"]{animation-name:r5pop2}
@keyframes r5pop2{from{scale:.82;opacity:.4}to{scale:1;opacity:1}}

.r5-bar{position:relative;width:100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem 1.2rem;min-height:2.9rem;margin-top:.9rem;padding-bottom:.55rem}
.r5-bar p{margin:0}
.r5-k{display:block;font:700 .7rem/1 var(--f-ui);letter-spacing:.22em;text-transform:uppercase;color:var(--cyan);white-space:nowrap}
.r5-now,.r5-next{display:flex;align-items:center;gap:.8rem;min-width:0;text-align:left}
.h2-head{width:100%}
.r5-now{width:min(31rem,100%)}
.r5-next{width:min(19rem,100%)}
.r5-t{display:block;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;font:900 clamp(1.05rem,1.5vw,1.35rem)/1.15 var(--f-disp);letter-spacing:.02em;color:#fff;text-shadow:0 0 18px rgba(25,230,255,.45)}
.r5-next .r5-t{font:700 clamp(.95rem,1.4vw,1.15rem)/1.2 var(--f-ui);letter-spacing:.1em;color:#d9ccff;text-shadow:none}
.r5-next .r5-k{color:var(--magenta-t,#ff7ac0)}
.r5-t[data-a="1"]{animation:r5t1 .32s cubic-bezier(.2,.85,.25,1) both}
.r5-t[data-a="2"]{animation:r5t2 .32s cubic-bezier(.2,.85,.25,1) both}
@keyframes r5t1{from{transform:translate3d(22px,0,0);opacity:0}to{transform:none;opacity:1}}
@keyframes r5t2{from{transform:translate3d(22px,0,0);opacity:0}to{transform:none;opacity:1}}
.r5-ctl{display:flex;gap:.4rem;flex:none}
.r5-btn{width:40px;height:40px;display:grid;place-items:center;padding:0;cursor:pointer;color:#fff;background:rgba(7,6,13,.72);border:1px solid var(--line);border-radius:3px;transition:background-color .2s,border-color .2s}
.r5-btn:hover{background:rgba(139,61,255,.3);border-color:var(--cyan)}
.r5-btn svg{width:18px;height:18px;fill:currentColor}
.r5-btn[hidden]{display:none}
.r5-btn .i-play{display:none}
.r5-btn[aria-pressed=true] .i-pause{display:none}
.r5-btn[aria-pressed=true] .i-play{display:block}
.r5-prog{position:absolute;left:0;right:0;margin:0 auto;bottom:0;width:min(30rem,70%);height:2px;background:rgba(185,149,255,.22);overflow:hidden}
.r5-prog::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--cyan),var(--magenta));transform-origin:0 50%;transform:scaleX(0)}
.r5-prog[data-a="1"]::after{animation:r5p1 var(--r5ms,1800ms) linear both}
.r5-prog[data-a="2"]::after{animation:r5p2 var(--r5ms,1800ms) linear both}
@keyframes r5p1{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes r5p2{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.r5-bar.is-paused .r5-prog::after{animation-play-state:paused}
.flank.r h2{display:block;line-height:1.1;min-height:2.6rem;margin:0 0 .8rem}
.flank.r h2 .r5-k{margin-bottom:.45rem}
.r5-ft{display:block;font:800 .95rem/1.2 var(--f-disp);letter-spacing:.015em;color:#fff;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r5-ft[data-a="1"]{animation:r5t1 .32s both}
.r5-ft[data-a="2"]{animation:r5t2 .32s both}
.flank.r .r5-seg{margin:.9rem 0 0;font:400 .74rem/1.4 var(--f-body);color:var(--muted);min-height:2.1rem}
.is-feat.gcard{box-shadow:0 0 0 2px var(--cyan),0 0 26px rgba(25,230,255,.35)}
@media (max-width:640px){
  .r5-bar{gap:.45rem .7rem;min-height:5rem;margin-top:.7rem;flex-wrap:wrap}
  .r5-now{width:100%;flex-direction:column;align-items:center;gap:.35rem;text-align:center}
  .r5-now .r5-t{flex:none;width:100%;text-align:center;font-size:1.15rem}
  .r5-next{width:auto;flex:1 1 0;max-width:calc(100% - 8.4rem);gap:.45rem}
  .r5-next .r5-t{font-size:.86rem;letter-spacing:.02em}
  .r5-btn{width:38px;height:38px}
  .r5-ctl{gap:.3rem}
}
@media (prefers-reduced-motion:reduce){
  .hs,.cs[data-sw],.np[data-a],.r5-t,.r5-ft{animation:none!important}
  .hs[data-s=out]{visibility:hidden}
  .r5-prog,[data-r5=pp]{display:none}
  .r5 .halo .hs[data-s=show]{animation:none;opacity:1}
}

/* library cards using case chrome */
.gcard .media.casebox{aspect-ratio:3/4;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 38%,#2a1360,#0c0918 72%);clip-path:polygon(0 0,calc(100% - 15px) 0,100% 15px,100% 100%,0 100%)}
.gcard .media.casebox .cs{position:relative;left:auto;top:auto;width:68%;--cw:200px;--k:1;--d:12px;transform:none;transition:transform .5s}
.gcard .media.casebox .cs.sw{width:60%}
.gcard:hover .media.casebox .cs{transform:translateY(-4px) rotateY(-8deg) rotateX(2deg)}
.gcard .media.casebox img{transition:none}
.gcard:hover .media img{transform:none}
.gcard .media.casebox .cs img{position:absolute}

@media (max-width:900px){
  .hero2{--cw:clamp(112px,34vw,176px);padding:2.4rem 0 3rem;min-height:auto}
  .cs{left:var(--mx2,var(--x));top:var(--my2,var(--y))}
  .dm{display:none}
  .h2-stage{grid-template-columns:1fr;justify-items:center;gap:1.4rem}
  .halo{width:clamp(180px,52vw,250px);order:-1;margin-top:1.2rem}
  .flank.l{justify-self:stretch;max-width:560px;background:linear-gradient(135deg,rgba(7,6,13,.8),rgba(18,13,36,.68))}
  .flank.r{display:none}
  .np{right:-14%}
  .hero2 .glitch{font-size:clamp(2.8rem,15.4vw,5.4rem)}
  .ly.back{filter:blur(1.6px) brightness(.62)}
  .hero2::before{background:radial-gradient(ellipse 120% 17% at 50% 13%,rgba(5,4,10,.88),rgba(5,4,10,.7) 60%,rgba(5,4,10,0) 100%),linear-gradient(180deg,rgba(5,4,10,.4) 0,rgba(5,4,10,0) 30%,rgba(5,4,10,.08) 60%,var(--bg) 100%)}
  .cover-ribbon{top:auto;bottom:.7rem}
}
@media (max-width:640px){
  .flank{padding:1rem}
  .hero2 .tagline{font-size:1.05rem;letter-spacing:.1em}
  .cover-ribbon{font-size:.58rem;padding:.4rem .5rem}
  .np{right:-10%;font-size:.64rem}
}
@media (prefers-reduced-motion:reduce){
  .halo .cs,.drift,.np::before{animation:none!important}
}