/* v4 iconic pages (games.html vault; more pages added in later chunks). CSP: no inline styles. */

/* ===== THE VAULT hero ===== */
.vh{--cw:clamp(96px,9.6vw,150px);position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse 80% 70% at 50% 100%,#2a0f55 0,#0d0820 45%,#05040a 75%);padding:clamp(2.6rem,6vw,4.6rem) 0 0;border-bottom:1px solid var(--line)}
.vh::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 18% 22%,rgba(25,230,255,.16),transparent 34%),radial-gradient(circle at 84% 18%,rgba(255,46,154,.18),transparent 36%)}
.vh-grid{position:absolute;left:-20%;right:-20%;bottom:0;height:55%;z-index:-1;transform:perspective(500px) rotateX(62deg);transform-origin:50% 100%;
  background:linear-gradient(rgba(139,61,255,.5) 1px,transparent 1px) 0 0/60px 60px,linear-gradient(90deg,rgba(139,61,255,.5) 1px,transparent 1px) 0 0/60px 60px;
  -webkit-mask-image:linear-gradient(to top,#000 10%,transparent 85%);mask-image:linear-gradient(to top,#000 10%,transparent 85%);animation:vgrid 6s linear infinite}
@keyframes vgrid{to{background-position:0 60px,0 60px}}
.vh-head{position:relative;z-index:3;text-align:center}
.vh-title{margin:.9rem 0 .2rem;font:900 clamp(3.4rem,13.5vw,11.5rem)/.86 var(--f-disp);letter-spacing:.02em;text-transform:uppercase}
.vh-the{display:block;font:700 clamp(.95rem,2vw,1.5rem)/1 var(--f-ui);letter-spacing:.9em;margin-right:-.9em;color:var(--cyan);text-shadow:0 0 14px rgba(25,230,255,.8)}
.vh-word{position:relative;display:inline-block;background:linear-gradient(180deg,#fff 0,#f1e6ff 38%,#c58bff 62%,#ff2e9a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 24px rgba(139,61,255,.65)) drop-shadow(0 4px 0 rgba(255,46,154,.35))}
.vh-word::after{content:attr(data-text);position:absolute;left:0;top:0;z-index:-1;color:transparent;-webkit-text-stroke:2px rgba(25,230,255,.55);transform:translate(.045em,.045em)}
.vh-sub{margin:1rem auto 0;max-width:40rem;color:var(--muted);font-size:clamp(.98rem,1.4vw,1.1rem)}
.vh-lib{display:block;width:max-content;margin:.9rem auto 0;font:800 clamp(.9rem,2.1vw,1.55rem)/1 var(--f-disp);letter-spacing:.55em;margin-right:auto;padding:.5rem .3em .5rem .85em;color:#0b0716;background:var(--grad);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);box-shadow:0 0 30px rgba(255,46,154,.5)}
.vh-stats{list-style:none;display:flex;justify-content:center;gap:clamp(1.2rem,4vw,3rem);margin:1.4rem 0 0;padding:0}
.vh-stats li{display:flex;flex-direction:column;align-items:center}
.vh-stats b{font:900 clamp(1.5rem,3vw,2.2rem)/1 var(--f-disp);color:#fff;text-shadow:0 0 16px rgba(139,61,255,.8)}
.vh-stats span{font:700 .74rem/1.4 var(--f-ui);letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}

.vh-stage{position:relative;z-index:2;margin-top:clamp(1.6rem,4vw,2.8rem);height:calc(var(--cw)*1.75);perspective:1300px;perspective-origin:50% 0%}
.vh-shelf{list-style:none;margin:0;padding:0;position:absolute;left:50%;bottom:calc(var(--cw)*.2);display:flex;align-items:flex-end;gap:calc(var(--cw)*.16);transform:translateX(-50%);transform-style:preserve-3d}
.vh-slot{--a:calc(var(--i)*1);position:relative;width:var(--cw);transform-style:preserve-3d;
  transform:translateZ(calc(var(--n)*-28px)) rotateY(calc(var(--i)*-9deg)) translateY(calc(var(--n)*4px));animation:vbob 6s ease-in-out infinite;animation-delay:calc(var(--n)*-.7s)}
.vh-slot[data-i="-4"]{--i:-4;--n:4}.vh-slot[data-i="-3"]{--i:-3;--n:3}.vh-slot[data-i="-2"]{--i:-2;--n:2}.vh-slot[data-i="-1"]{--i:-1;--n:1}
.vh-slot[data-i="0"]{--i:0;--n:0;z-index:2}.vh-slot[data-i="1"]{--i:1;--n:1}.vh-slot[data-i="2"]{--i:2;--n:2}.vh-slot[data-i="3"]{--i:3;--n:3}.vh-slot[data-i="4"]{--i:4;--n:4}
@keyframes vbob{50%{translate:0 -6px}}
.vh .cs.vh-cs{position:relative;left:auto;top:auto;transform:none;width:100%;--k:1;--d:calc(var(--cw)*.12);--hl:.32}
.vh .cs.vh-cs.p-switch{width:89%;margin-inline:auto}
.vh-slot[data-i="0"] .cs{scale:1.22;transform-origin:50% 100%;filter:drop-shadow(0 0 26px rgba(255,46,154,.55))}
.vh-slot::after{content:"";position:absolute;left:6%;right:6%;bottom:-14px;height:14px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.75),transparent)}
.vh-ledge{position:absolute;left:50%;bottom:calc(var(--cw)*.2 - 22px);width:min(1500px,96vw);height:22px;transform:translateX(-50%) perspective(400px) rotateX(48deg);
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(139,61,255,.35) 30%,#160b30 70%);border-top:2px solid var(--cyan);
  box-shadow:0 -6px 30px rgba(25,230,255,.45),0 10px 40px rgba(255,46,154,.45),0 0 90px 10px rgba(139,61,255,.35)}
.vh-ledge::after{content:"";position:absolute;left:8%;right:8%;top:100%;height:70px;background:radial-gradient(ellipse at 50% 0,rgba(255,46,154,.35),transparent 70%)}

/* ===== shelves ===== */
.vault{padding:clamp(3rem,7vw,5.5rem) 0 clamp(3.5rem,7vw,6rem);background:linear-gradient(180deg,#05040a,var(--bg) 30%)}
.vf{display:grid;grid-template-columns:1fr auto;gap:.8rem 2rem;align-items:center;padding:1rem 1.2rem;margin-bottom:2.4rem;background:linear-gradient(90deg,rgba(25,230,255,.06),rgba(139,61,255,.08),rgba(255,46,154,.06));border:1px solid var(--line);clip-path:var(--cham)}
.vf-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;grid-column:1}
.vf-k{font:700 .78rem/1 var(--f-ui);letter-spacing:.26em;text-transform:uppercase;color:var(--cyan);min-width:7.2rem}
.vf-chips{display:flex;flex-wrap:wrap;gap:.45rem}
.vf .chip{cursor:pointer;min-height:40px;padding:.55rem .9rem;font-size:.84rem;transition:background .2s,color .2s,box-shadow .2s,border-color .2s}
.vf .chip:hover{border-color:var(--violet-t);color:#fff}
.vf .chip[aria-pressed=true]{color:#0b0716;background:linear-gradient(120deg,var(--cyan),#b995ff);border-color:transparent;box-shadow:0 0 18px rgba(25,230,255,.45)}
.vf-count{grid-column:2;grid-row:1/span 2;margin:0;text-align:right;font:700 .82rem/1.2 var(--f-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.vf-count b{display:block;font:900 2.4rem/1 var(--f-disp);color:#fff;letter-spacing:0;text-shadow:0 0 18px rgba(255,46,154,.6)}

.vs{--cw:150px;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));column-gap:0;row-gap:3.2rem}
.vs{--ch:212px}
.vi{position:relative;padding:0 .7rem .4rem;display:flex}
.vi[hidden]{display:none}
.vi::before{content:"";position:absolute;left:0;right:0;top:calc(var(--ch) + .4rem);height:14px;z-index:0;background:linear-gradient(180deg,rgba(255,255,255,.18),#2a1458 35%,#120a26);border-top:2px solid var(--violet-t);
  box-shadow:0 -4px 22px rgba(139,61,255,.55),0 10px 26px rgba(255,46,154,.25)}
.vi-a{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:100%;text-decoration:none;color:var(--text);perspective:900px;border-radius:4px;padding-top:.4rem}
.vi-case{display:grid;place-items:end center;height:var(--ch);width:calc(var(--ch)*.72);margin-bottom:1.6rem}
.vs .cs.vi-cs{position:relative;left:auto;top:auto;width:100%;--k:1;--d:14px;--hl:.26;transform:rotateY(-16deg) rotateX(2deg);transform-origin:50% 100%;transition:transform .45s cubic-bezier(.2,.8,.25,1),filter .45s}
.vs .cs.vi-cs.p-switch{width:89%}
.vi-a:hover .cs,.vi-a:focus-visible .cs{transform:translateY(-14px) rotateY(0) scale(1.05);filter:drop-shadow(0 0 22px var(--acc,#8b3dff))}
.vi-a:focus-visible{outline:none}
.vi-a:focus-visible .vi-t{outline:3px solid var(--cyan);outline-offset:4px}
.vi-t{font:700 1.02rem/1.15 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;text-align:center}
.vi-p{margin-top:.3rem;font:600 .74rem/1 var(--f-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.vi-a:hover .vi-t{color:#fff;text-shadow:0 0 12px var(--acc,#8b3dff)}
.vs-empty{text-align:center;padding:3rem 1rem;color:var(--muted);border:1px dashed var(--line)}
.vs-empty[hidden]{display:none}
.vs-empty p{font:700 1.1rem/1.3 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;margin:0 0 1rem}

@media (max-width:900px){
  .vh-slot[data-i="-4"],.vh-slot[data-i="4"]{display:none}
}
@media (max-width:640px){
  .vh{--cw:64px}
  .vs{--ch:178px}
  .vh-slot[data-i="-3"],.vh-slot[data-i="3"]{display:none}
  .vh-slot{transform:translateZ(calc(var(--n)*-20px)) rotateY(calc(var(--i)*-12deg))}
  .vf{grid-template-columns:1fr;padding:1rem}
  .vf-count{grid-column:1;grid-row:auto;text-align:left;display:flex;align-items:baseline;gap:.5rem}
  .vf-count b{display:inline;font-size:1.6rem}
  .vf-k{min-width:0;width:100%}
  .vs{grid-template-columns:repeat(2,1fr);row-gap:2.4rem}
  .vi{padding:0 .5rem 1.2rem}
  .vi-t{font-size:.92rem}
}
@media (prefers-reduced-motion:reduce){
  .vh-grid,.vh-slot{animation:none}
  .vs .cs.vi-cs,.vf .chip{transition:none}
  .vi-a:hover .cs,.vi-a:focus-visible .cs{transform:rotateY(0);filter:drop-shadow(0 0 18px var(--acc,#8b3dff))}
}