:root{
  --slime:#4fe808;
  --slime-dark:#b8156f;
  --purple:#6a2fd0;
  --pink:#ff64c8;
  --ink:#050505;
  --panel:#0d0d0d;
  --chrome-a:#fdfdfd;
  --chrome-b:#8b8b8b;
  --chrome-c:#3a3a3a;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
::selection{background:var(--slime);color:#000}
body{
  background:var(--ink);
  color:#eee;
  font-family:'Space Grotesk',sans-serif;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}

/* ============ TICKER ============ */
.ticker-wrap{
  position:fixed;top:0;left:0;right:0;z-index:900;
  background:#e01212;
  border-bottom:3px solid #000;
  overflow:hidden;height:38px;display:flex;align-items:center;
}
.ticker{
  display:flex;white-space:nowrap;
  animation:tick 28s linear infinite;
}
.ticker span{
  font-family:'Permanent Marker',cursive;
  color:#fff;font-size:19px;letter-spacing:1px;
  padding-right:48px;text-transform:uppercase;
}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============ NAV ============ */
nav{
  position:fixed;top:38px;left:0;right:0;z-index:890;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 20px;
  background:rgba(5,5,5,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid #222;
}
.burger{
  background:none;border:2px solid #444;border-radius:8px;
  width:42px;height:38px;display:grid;place-items:center;gap:0;
}
.burger div{width:20px;height:2px;background:#eee;margin:2.5px 0}
.wordmark{
  font-family:'Bungee',cursive;font-size:26px;letter-spacing:2px;
  background:linear-gradient(178deg,#fff 8%,#cfcfcf 28%,#6f6f6f 48%,#fdfdfd 60%,#4c4c4c 82%,#e8e8e8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(255,255,255,.18)) drop-shadow(0 4px 10px rgba(0,0,0,.9));
  text-decoration:none;
}
.nav-icons{display:flex;gap:14px;font-size:20px}
.nav-icons a{text-decoration:none;filter:grayscale(.2)}

/* ============ SIDEBAR DRAWER ============ */
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(340px,88vw);z-index:1000;
  background:#0a0a0a;border-left:3px solid var(--slime);
  transform:translateX(105%);transition:transform .45s cubic-bezier(.7,0,.2,1);
  padding:90px 28px 28px;overflow-y:auto;
}
.drawer.open{transform:translateX(0)}
.drawer h3{
  font-family:'Bungee',cursive;color:var(--slime);
  font-size:15px;letter-spacing:2px;margin:26px 0 10px;
}
.drawer a{
  display:block;color:#ddd;text-decoration:none;
  font-size:17px;padding:9px 4px;border-bottom:1px dashed #262626;
}
.drawer a em{font-style:normal;color:var(--pink);font-size:11px;vertical-align:top;margin-left:6px;font-family:'Press Start 2P',monospace}
.drawer a:hover{color:var(--slime);padding-left:10px;transition:.2s}
.drawer .close-x{
  position:absolute;top:52px;right:20px;background:none;border:none;
  color:#888;font-size:26px;
}
.drawer-tab{
  position:fixed;right:0;top:46%;z-index:880;
  writing-mode:vertical-rl;text-orientation:mixed;
  background:var(--slime);color:#000;border:2px solid #000;border-right:none;
  font-family:'Press Start 2P',monospace;font-size:10px;letter-spacing:2px;
  padding:16px 8px;border-radius:10px 0 0 10px;
  box-shadow:0 0 18px rgba(79,232,8,.45);
}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:950;opacity:0;pointer-events:none;transition:.3s}
.scrim.show{opacity:1;pointer-events:auto}

/* ============ HERO / BILLBOARD ============ */
.hero{
  padding:118px 18px 40px;position:relative;
  background:
    radial-gradient(1000px 500px at 70% -10%, rgba(106,47,208,.35), transparent 60%),
    radial-gradient(700px 400px at 10% 30%, rgba(79,232,8,.14), transparent 60%);
}
.billboard{
  position:relative;max-width:1080px;margin:0 auto;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.8));
}
.billboard>img{width:100%;border-radius:10px}
.screen{
  position:absolute;
  left:6.6%;top:16.5%;width:80.5%;height:65%;
  transform:skewY(-4.6deg);transform-origin:left top;
  background:#000;overflow:hidden;
  outline:2px solid #101010;
}
.screen .bb-slide{
  position:absolute;inset:0;opacity:0;transition:opacity .9s;
  display:grid;place-items:center;background:#000;
}
.screen .bb-slide img{width:100%;height:100%;object-fit:cover}
.screen .bb-slide.on{opacity:1}
.screen .scan{
  position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 4px);
  mix-blend-mode:screen;
}
.screen .glare{
  position:absolute;top:-40%;left:-30%;width:45%;height:180%;
  background:linear-gradient(78deg,transparent,rgba(255,255,255,.16),transparent);
  animation:glare 6s ease-in-out infinite;
}
@keyframes glare{0%,55%,100%{transform:translateX(-60%)}25%{transform:translateX(340%)}}

/* slime drip svg strip */
.drip-strip{position:relative;z-index:5;margin-top:-6px}
.drip-strip svg{display:block;width:100%;height:90px}

/* hero copy */
.hero-copy{max-width:1080px;margin:34px auto 0;text-align:center;position:relative}
.chrome-h{
  font-family:'Bungee',cursive;
  font-size:clamp(34px,7vw,72px);
  line-height:1.02;letter-spacing:2px;
  background:linear-gradient(180deg,#ffffff 5%,#d9d9d9 22%,#5f5f5f 46%,#f6f6f6 56%,#333 78%,#dedede 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 rgba(255,255,255,.14)) drop-shadow(0 10px 24px rgba(0,0,0,.95));
}
.hero-sub{
  margin:16px auto 24px;color:#b9b9b9;max-width:560px;font-size:17px;
}
.hero-sub b{color:var(--slime)}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{
  font-family:'Bungee',cursive;font-size:15px;letter-spacing:1px;
  padding:14px 26px;border-radius:999px;border:3px solid #000;
  background:var(--slime);color:#000;
  box-shadow:0 0 0 2px var(--slime),0 8px 24px rgba(79,232,8,.35);
  transition:transform .15s;text-decoration:none;display:inline-block;
}
.btn:hover{transform:translateY(-3px) rotate(-1deg)}
.btn.ghost{
  background:#0d0d0d;color:#fff;box-shadow:0 0 0 2px #3a3a3a;
}
.btn.ghost:hover{box-shadow:0 0 0 2px var(--pink)}

/* floating balloon dog sticker */
.balloon-sticker{
  position:absolute;right:2%;top:-40px;width:150px;
  transform:rotate(8deg);
  animation:bob 4.5s ease-in-out infinite;
  z-index:6;
}
.balloon-sticker img{
  border:6px solid #fff;border-radius:14px;
  box-shadow:0 14px 34px rgba(0,0,0,.75);
}
.balloon-sticker::after{
  content:"100% THAT DOG";
  position:absolute;left:50%;bottom:-12px;transform:translateX(-50%) rotate(-4deg);
  background:#fff;color:#000;font-family:'Permanent Marker',cursive;
  font-size:11px;padding:2px 8px;white-space:nowrap;border-radius:3px;
}
@keyframes bob{0%,100%{transform:rotate(8deg) translateY(0)}50%{transform:rotate(5deg) translateY(-14px)}}

/* section scaffolding */
section{padding:84px 18px;position:relative}
.sec-head{max-width:1080px;margin:0 auto 40px;text-align:center;position:relative}
.sec-tag{
  font-family:'Press Start 2P',monospace;font-size:10px;color:var(--slime);
  letter-spacing:3px;display:block;margin-bottom:14px;
}
.leopard-band{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-2deg);
  width:120%;height:74px;background:url(assets/leopard.jpg) center/300px repeat;
  opacity:.14;z-index:-1;border-radius:8px;
}

/* ============ HEEL CAROUSEL ============ */
#drops{background:linear-gradient(#050505,#0a0510 60%,#050505)}
.heel-stage{
  max-width:900px;margin:0 auto;position:relative;
  background:#f1eef0;border-radius:22px;overflow:hidden;
  border:3px solid #000;box-shadow:0 0 0 3px #2b2b2b,0 30px 80px rgba(0,0,0,.7);
  padding:40px 20px 0;text-align:center;
}
.heel-stage .heel-img{width:min(330px,64vw);margin:0 auto;pointer-events:none}
.case-spinner{
  position:absolute;left:50%;top:11%;
  width:min(190px,38vw);aspect-ratio:9/17.5;
  transform:translateX(-50%);
  perspective:900px;z-index:4;
}
.case-3d{
  width:100%;height:100%;position:relative;
  transform-style:preserve-3d;
  animation:spin 9s linear infinite;
  border-radius:26px;
}
.case-spinner.paused .case-3d{animation-play-state:paused}
.case-face{
  position:absolute;inset:0;border-radius:26px;overflow:hidden;
  border:4px solid #cfcfcf;
  box-shadow:0 24px 50px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.6);
  background:#111;backface-visibility:hidden;
}
.case-face img{width:100%;height:100%;object-fit:cover;transition:opacity .5s}
.case-face.back{transform:rotateY(180deg)}
@keyframes spin{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
.heel-note{
  position:absolute;left:16px;top:16px;transform:rotate(-5deg);
  font-family:'Permanent Marker',cursive;color:#222;font-size:15px;
  background:#fff;padding:6px 12px;border-radius:4px;
  box-shadow:0 4px 12px rgba(0,0,0,.2);
}
.spinner-controls{
  position:relative;background:#000;margin:26px -20px 0;padding:16px;
  display:flex;gap:12px;justify-content:center;align-items:center;
}
.spinner-controls .pill{
  font-family:'Press Start 2P',monospace;font-size:10px;
  background:#111;color:#fff;border:2px solid #333;border-radius:999px;
  padding:11px 18px;letter-spacing:1px;
}
.spinner-controls .pill:hover{border-color:var(--slime);color:var(--slime)}
.case-label{font-family:'Bungee',cursive;color:#fff;font-size:14px;letter-spacing:2px;min-width:170px;text-align:left}
.case-label small{display:block;color:var(--slime);font-family:'Space Grotesk';font-size:12px;letter-spacing:0}

/* ============ MONTAGE ============ */
#montage{background:#050505}
.montage-stage{
  max-width:860px;margin:0 auto;position:relative;
  aspect-ratio:4/3;background:#0b0b0b;border-radius:18px;overflow:hidden;
  border:3px solid #1d1d1d;
}
.montage-stage .m-slide{
  position:absolute;inset:0;opacity:0;transform:scale(1.06) rotate(.6deg);
}
.montage-stage .m-slide.on{opacity:1;transform:scale(1) rotate(0);transition:opacity .18s,transform 3.4s linear}
.montage-stage .m-slide img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.m-caption{
  position:absolute;left:18px;bottom:18px;z-index:5;
  font-family:'Permanent Marker',cursive;font-size:clamp(18px,3vw,26px);color:#fff;
  text-shadow:0 2px 0 #000,0 0 22px rgba(0,0,0,.8);
  background:rgba(0,0,0,.35);padding:4px 14px;border-radius:6px;backdrop-filter:blur(3px);
}
.flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:6}
.flash.pop{animation:flashpop .3s}
@keyframes flashpop{0%{opacity:.9}100%{opacity:0}}
.play-cover{
  position:absolute;inset:0;z-index:8;display:grid;place-items:center;
  background:radial-gradient(closest-side,rgba(0,0,0,.25),rgba(0,0,0,.78)),url(assets/crew.jpg) center 20%/cover;
}
.play-btn{
  width:96px;height:96px;border-radius:50%;border:4px solid #fff;
  background:rgba(0,0,0,.45);color:#fff;font-size:34px;
  display:grid;place-items:center;backdrop-filter:blur(4px);
  transition:transform .2s;
}
.play-btn:hover{transform:scale(1.12);border-color:var(--slime);color:var(--slime)}
.play-cover p{
  position:absolute;bottom:26px;width:100%;text-align:center;
  font-family:'Press Start 2P',monospace;font-size:10px;color:#ddd;letter-spacing:2px;
}
.montage-stage .stop-tag{
  position:absolute;top:14px;right:14px;z-index:9;display:none;
  font-family:'Press Start 2P',monospace;font-size:9px;color:#fff;
  background:rgba(224,18,18,.85);border:2px solid #fff;border-radius:6px;padding:8px 10px;
}
.montage-stage.playing .stop-tag{display:block}

/* ============ GAME ============ */
#game{
  background:
    linear-gradient(rgba(4,4,4,.93),rgba(4,4,4,.96)),
    url(assets/pixelclass.jpg) center/cover;
}
.game-frame{
  max-width:820px;margin:0 auto;position:relative;
  border:4px solid var(--slime);border-radius:8px;
  box-shadow:0 0 0 4px #000,0 0 44px rgba(79,232,8,.3);
  background:#000;overflow:hidden;
}
.game-frame canvas{
  display:block;width:100%;image-rendering:pixelated;background:#000;
}
.game-hud{
  display:flex;justify-content:space-between;align-items:center;
  background:#000;border-top:3px solid #40001f;
  padding:10px 14px;font-family:'Press Start 2P',monospace;font-size:9px;color:var(--slime);
}
.game-hud button{
  background:var(--slime);border:none;border-radius:4px;color:#000;
  font-family:'Press Start 2P',monospace;font-size:10px;padding:10px 14px;
}
.speech-layer{
  position:absolute;inset:0;z-index:10;display:grid;place-items:center;
  background:rgba(0,0,0,.72);text-align:center;padding:20px;
}
.speech-layer.hidden{display:none}
.bubble8{
  background:#fff;color:#000;border:4px solid #000;border-radius:4px;
  box-shadow:0 0 0 4px #fff;
  font-family:'Press Start 2P',monospace;font-size:clamp(10px,2.4vw,14px);
  line-height:1.9;padding:22px 26px;max-width:440px;position:relative;
}
.bubble8::after{
  content:"";position:absolute;left:44px;bottom:-22px;
  border:11px solid transparent;border-top-color:#000;
}
.speech-layer .btn{margin-top:26px}

/* ============ ENVELOPE MODAL ============ */
.modal{
  position:fixed;inset:0;z-index:1100;display:none;place-items:center;
  background:rgba(0,0,0,.86);padding:18px;
}
.modal.show{display:grid}
.env-wrap{width:min(560px,94vw);position:relative}
.env-step{display:none}
.env-step.on{display:block;animation:rise .4s}
@keyframes rise{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.envelope{
  cursor:pointer;border-radius:12px;overflow:hidden;position:relative;
  border:3px solid #333;box-shadow:0 30px 70px rgba(0,0,0,.8);
}
.envelope img{width:100%}
.envelope .env-hint{
  position:absolute;inset:auto 0 0 0;text-align:center;padding:12px;
  background:linear-gradient(transparent,rgba(0,0,0,.85));
  font-family:'Press Start 2P',monospace;font-size:10px;color:#fff;letter-spacing:2px;
  animation:blink 1.2s steps(2) infinite;
}
@keyframes blink{50%{opacity:.25}}
.letter{
  background:#f5f0e6;color:#191919;border-radius:12px;padding:30px 28px;
  box-shadow:0 30px 70px rgba(0,0,0,.8);
  font-size:17px;
}
.letter h4{font-family:'Permanent Marker',cursive;font-size:24px;margin-bottom:14px}
.letter textarea{
  width:100%;min-height:120px;border:none;background:transparent;resize:vertical;
  font-family:'Permanent Marker',cursive;font-size:19px;color:#3d2f86;
  background-image:repeating-linear-gradient(transparent 0 30px,#d8cfbc 30px 31px);
  line-height:31px;outline:none;
}
.letter .row{display:flex;justify-content:space-between;align-items:center;margin-top:18px}
.letter .sig{font-family:'Permanent Marker',cursive;color:#666}
.upload-zone{
  border:3px dashed #b7a98a;border-radius:10px;padding:26px;text-align:center;
  color:#6b5f47;cursor:pointer;margin:10px 0 4px;
}
.upload-zone:hover{border-color:var(--purple)}
.upload-zone img{max-height:150px;margin:10px auto 0;border-radius:8px}
.imsg{
  background:#fff;border-radius:18px;padding:22px 18px 26px;
  box-shadow:0 30px 70px rgba(0,0,0,.8);
}
.imsg .thread{display:flex;flex-direction:column;gap:8px}
.imsg .b{
  max-width:78%;padding:11px 16px;border-radius:20px;font-size:16px;line-height:1.35;
  font-family:-apple-system,'Space Grotesk',sans-serif;
}
.imsg .them{background:#e9e9eb;color:#000;align-self:flex-start;border-bottom-left-radius:5px}
.imsg .me{background:#0a84ff;color:#fff;align-self:flex-end;border-bottom-right-radius:5px}
.imsg .meta{font-size:11px;color:#8e8e93;text-align:center;margin-bottom:6px}
.imsg .delivered{font-size:11px;color:#8e8e93;align-self:flex-end;margin-top:2px}
.typing{display:inline-flex;gap:4px;align-items:center;height:14px}
.typing i{width:7px;height:7px;border-radius:50%;background:#9a9aa0;animation:ty 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes ty{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.modal .close-modal{
  position:absolute;top:-46px;right:0;background:none;border:2px solid #555;
  color:#ccc;border-radius:50%;width:36px;height:36px;font-size:16px;
}

/* ============ VAULT / ZIPPER SHOP ============ */
#vault{background:#000}
.vault-grid{
  max-width:1080px;margin:0 auto;display:grid;gap:26px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.zip-box{
  position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;
  background:#0a0a0a;border:2px solid #232323;cursor:pointer;
}
.zip-box .product{
  position:absolute;inset:0;display:flex;flex-direction:column;
}
.zip-box .product img{width:100%;height:72%;object-fit:cover;object-position:center 25%}
.zip-box .p-info{padding:12px 14px;flex:1;background:#0a0a0a}
.zip-box .p-info h5{font-family:'Bungee',cursive;font-size:14px;letter-spacing:1px;color:#fff}
.zip-box .p-info span{color:var(--slime);font-size:14px}
.zip-panel{
  position:absolute;top:0;bottom:0;width:calc(50% + 3px);z-index:3;
  background:#101010 url(assets/leopard.jpg) center/440px;
  transition:transform .8s cubic-bezier(.65,0,.3,1);
}
.zip-panel.l{left:0;border-right:3px solid #000}
.zip-panel.r{right:0;border-left:3px solid #000}
.zip-box.open .zip-panel.l{transform:translateX(-102%)}
.zip-box.open .zip-panel.r{transform:translateX(102%)}
.zip-teeth{
  position:absolute;top:0;bottom:0;width:12px;z-index:4;
  left:calc(50% - 6px);
  background:repeating-linear-gradient(0deg,#d8c17a 0 7px,#8a7434 7px 9px,#31290f 9px 14px);
  border-left:2px solid #000;border-right:2px solid #000;
  transition:opacity .3s .1s;
}
.zip-box.open .zip-teeth{opacity:0}
.zip-pull{
  position:absolute;z-index:5;left:50%;top:16%;transform:translateX(-50%);
  width:26px;height:52px;transition:top .55s ease-in,opacity .2s .5s;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.8));
}
.zip-box.open .zip-pull{top:92%;opacity:0}
.zip-pull::before{
  content:"";display:block;width:18px;height:22px;margin:0 auto;
  background:linear-gradient(145deg,#f0e2ae,#93803f);border-radius:5px 5px 3px 3px;border:2px solid #241d05;
}
.zip-pull::after{
  content:"";display:block;width:14px;height:24px;margin:-2px auto 0;
  border:4px solid #b09a52;border-radius:7px;background:transparent;
}
.zip-label{
  position:absolute;z-index:4;bottom:12px;width:100%;text-align:center;
  font-family:'Press Start 2P',monospace;font-size:8px;color:#9c9c9c;letter-spacing:2px;
  transition:opacity .2s;
}
.zip-box.open .zip-label{opacity:0}
.vault-note{
  max-width:1080px;margin:22px auto 0;text-align:center;color:#777;
  font-family:'Press Start 2P',monospace;font-size:9px;letter-spacing:2px;line-height:2;
}

/* ============ FOOTER ============ */
footer{
  border-top:3px solid var(--slime);
  background:#020202;padding:60px 18px 110px;text-align:center;position:relative;
}
footer .chrome-h{font-size:clamp(30px,6vw,54px)}
footer p{color:#888;margin-top:14px}
footer .socials{margin-top:22px;display:flex;gap:16px;justify-content:center}
footer .socials a{
  color:#ddd;text-decoration:none;border:2px solid #333;border-radius:999px;
  padding:10px 20px;font-size:14px;
}
footer .socials a:hover{border-color:var(--pink);color:var(--pink)}
.footer-drip{position:absolute;top:-3px;left:0;right:0;transform:rotate(180deg)}
.footer-drip svg{display:block;width:100%;height:56px}

@media (max-width:640px){
  .balloon-sticker{position:static;width:110px;margin:38px auto 0;display:block}
  .case-label{min-width:0}
}

/* ============ SKELETON v2 (serotoninn-inspired) ============ */
/* loader */
#loader{
  position:fixed;inset:0;z-index:3000;background:#050505;
  display:grid;place-items:center;transition:opacity .5s,visibility .5s;
}
#loader.done{opacity:0;visibility:hidden}
#loader .l-mark{font-family:'Bungee',cursive;font-size:clamp(28px,6vw,54px);letter-spacing:3px;
  background:linear-gradient(180deg,#fff 5%,#d9d9d9 22%,#5f5f5f 46%,#f6f6f6 56%,#333 78%,#dedede 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent;}
#loader .l-pct{font-family:'Press Start 2P',monospace;font-size:11px;color:var(--slime);margin-top:18px;letter-spacing:3px}
#loader .l-bar{width:min(300px,60vw);height:4px;background:#1a0d15;border-radius:4px;margin-top:14px;overflow:hidden}
#loader .l-bar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--slime),#b9ff8a);transition:width .18s}

/* bracket + numbered section tags */
.brk{color:var(--slime)}
.num-head{max-width:1160px;margin:0 auto 34px;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.num-head .n{font-family:'Press Start 2P',monospace;font-size:11px;color:var(--slime);letter-spacing:2px}
.num-head h2{font-family:'Bungee',cursive;font-size:clamp(24px,4.6vw,44px);letter-spacing:2px;
  background:linear-gradient(180deg,#fff 5%,#d9d9d9 22%,#5f5f5f 46%,#f6f6f6 56%,#333 78%,#dedede 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.num-head .hint{margin-left:auto;font-family:'Press Start 2P',monospace;font-size:8px;color:#6f5f68;letter-spacing:2px}

/* nav links */
.nav-links{display:flex;gap:20px;align-items:center}
.nav-links a{color:#cbb9c3;text-decoration:none;font-family:'Press Start 2P',monospace;font-size:9px;letter-spacing:2px}
.nav-links a:hover,.nav-links a.on{color:var(--slime)}
@media(max-width:720px){.nav-links{display:none}}

/* product rail (horizontal drag) */
.rail{max-width:1160px;margin:0 auto;display:flex;gap:20px;overflow-x:auto;
  padding:6px 4px 22px;scrollbar-width:none;cursor:grab;scroll-snap-type:x proximity}
.rail::-webkit-scrollbar{display:none}
.rail.dragging{cursor:grabbing;scroll-snap-type:none}
.rail .pcard{flex:0 0 min(270px,72vw);scroll-snap-align:start}

/* product card */
.pcard{background:#0c090b;border:2px solid #241820;border-radius:16px;overflow:hidden;
  position:relative;transition:transform .25s,border-color .25s;cursor:pointer}
.pcard:hover{transform:translateY(-6px);border-color:var(--slime)}
.pcard .pc-imgs{aspect-ratio:3/4;position:relative;overflow:hidden;background:#111}
.pcard .pc-imgs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .35s}
.pcard .pc-imgs img.alt{opacity:0}
.pcard:hover .pc-imgs img.alt{opacity:1}
.pcard .pc-badge{position:absolute;top:12px;left:12px;z-index:2;background:var(--slime);color:#000;
  font-family:'Press Start 2P',monospace;font-size:7px;padding:7px 9px;border-radius:6px;border:2px solid #000;letter-spacing:1px}
.pcard .pc-add{position:absolute;right:12px;bottom:12px;z-index:2;width:38px;height:38px;border-radius:50%;
  background:#000;color:var(--slime);border:2px solid var(--slime);font-size:20px;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:.2s}
.pcard .pc-add:hover{background:var(--slime);color:#000}
.pcard .pc-info{padding:14px 16px 16px}
.pcard .pc-name{font-family:'Bungee',cursive;font-size:14px;letter-spacing:1px;color:#fff}
.pcard .pc-price{font-family:'Press Start 2P',monospace;font-size:10px;color:var(--slime);margin-top:8px;letter-spacing:1px}
.pcard .pc-coll{color:#6f5f68;font-size:11px;margin-top:6px;font-family:'Space Grotesk',sans-serif;letter-spacing:2px}

/* shop grid + filters */
.shop-grid{max-width:1160px;margin:0 auto;display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.filter-bar{max-width:1160px;margin:0 auto 26px;display:flex;gap:10px;flex-wrap:wrap}
.f-chip{font-family:'Press Start 2P',monospace;font-size:8px;padding:10px 14px;border-radius:999px;
  background:#151015;color:#8d7c86;border:2px solid #241820;cursor:pointer;letter-spacing:1px}
.f-chip.on{background:var(--slime);color:#000;border-color:#000}

/* categories grid (home) */
.cat-grid{max-width:1160px;margin:0 auto;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.cat-tile{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;border:2px solid #241820;cursor:pointer;text-decoration:none;display:block}
.cat-tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s;filter:saturate(.9)}
.cat-tile:hover img{transform:scale(1.07)}
.cat-tile .ct-label{position:absolute;left:14px;bottom:12px;z-index:2;
  font-family:'Press Start 2P',monospace;font-size:10px;color:#fff;letter-spacing:2px;
  text-shadow:0 2px 8px #000;background:rgba(0,0,0,.45);padding:8px 10px;border-radius:8px;backdrop-filter:blur(4px)}
.cat-tile .ct-label b{color:var(--slime)}

/* film section */
.film-wrap{max-width:1000px;margin:0 auto;position:relative;border-radius:18px;overflow:hidden;
  border:3px solid #241820;aspect-ratio:16/9;background:#0a0709}
.film-wrap video,.film-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.film-wrap .film-tag{position:absolute;top:14px;left:14px;font-family:'Press Start 2P',monospace;
  font-size:8px;color:#fff;background:rgba(0,0,0,.5);padding:8px 10px;border-radius:8px;letter-spacing:2px;backdrop-filter:blur(4px)}

/* CTA banner strip */
.cta-strip{max-width:1160px;margin:0 auto;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.cta-tile{position:relative;border-radius:16px;overflow:hidden;border:2px solid #241820;padding:34px 26px;
  background:linear-gradient(150deg,#140b11,#0a0609);text-decoration:none;display:block;transition:border-color .25s,transform .25s}
.cta-tile:hover{border-color:var(--slime);transform:translateY(-4px)}
.cta-tile h4{font-family:'Bungee',cursive;font-size:19px;color:#fff;letter-spacing:1px;margin-bottom:8px}
.cta-tile p{color:#8d7c86;font-size:14px;margin-bottom:14px}
.cta-tile .go{font-family:'Press Start 2P',monospace;font-size:9px;color:var(--slime);letter-spacing:2px}
.cta-tile .bg-e{position:absolute;right:-10px;bottom:-16px;font-size:84px;opacity:.12;pointer-events:none}

/* footer v2 */
.foot2{border-top:3px solid var(--slime);background:#020202;padding:60px 20px 40px;position:relative}
.foot2-grid{max-width:1160px;margin:0 auto;display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.foot2 h5{font-family:'Press Start 2P',monospace;font-size:9px;color:var(--slime);letter-spacing:2px;margin-bottom:14px}
.foot2 a{display:block;color:#8d7c86;text-decoration:none;font-size:14px;padding:5px 0}
.foot2 a:hover{color:#fff}
.foot2 .news input{width:100%;background:#120d11;border:2px solid #241820;border-radius:10px;color:#fff;
  font-size:14px;padding:12px 14px;outline:none;margin-bottom:10px;font-family:'Space Grotesk',sans-serif}
.foot2 .news input:focus{border-color:var(--slime)}
.foot2-bottom{max-width:1160px;margin:40px auto 0;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  color:#4a3a43;font-size:12px;font-family:'Press Start 2P',monospace;letter-spacing:1px}

/* product modal */
.pm{position:fixed;inset:0;z-index:1250;display:none;place-items:center;background:rgba(0,0,0,.88);padding:16px}
.pm.show{display:grid}
.pm-card{width:min(880px,96vw);max-height:92vh;overflow-y:auto;background:#0d0a0c;border:2px solid #2c1a24;
  border-radius:18px;display:grid;grid-template-columns:1fr 1fr;gap:0;position:relative}
@media(max-width:760px){.pm-card{grid-template-columns:1fr}}
.pm-media{background:#111;min-height:320px;position:relative}
.pm-media img,.pm-media video{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:3/4}
.pm-thumbs{position:absolute;left:10px;bottom:10px;display:flex;gap:8px;z-index:2}
.pm-thumbs img{width:44px;height:56px;object-fit:cover;border-radius:6px;border:2px solid #333;cursor:pointer;opacity:.7}
.pm-thumbs img.on{border-color:var(--slime);opacity:1}
.pm-body{padding:30px 28px}
.pm-body h3{font-family:'Bungee',cursive;font-size:24px;letter-spacing:1px;color:#fff;margin-bottom:6px}
.pm-price{font-family:'Press Start 2P',monospace;font-size:13px;color:var(--slime);letter-spacing:1px;margin-bottom:16px}
.pm-desc{color:#cbb9c3;font-size:15px;line-height:1.7;margin-bottom:22px}
.pm-close{position:absolute;top:12px;right:12px;z-index:3;background:#000;border:2px solid #333;color:#ccc;
  border-radius:50%;width:36px;height:36px;cursor:pointer;font-size:15px}
.pm-close:hover{border-color:var(--slime);color:var(--slime)}

/* slime rain easter egg */
.slime-drop{position:fixed;top:-40px;z-index:2500;pointer-events:none;font-size:26px;animation:slimefall linear forwards}
@keyframes slimefall{to{transform:translateY(110vh) rotate(240deg)}}

/* ============ 05. ON ROTATION — MINIMAL SPOTLIGHT ============ */
.spot{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
@media(max-width:760px){.spot{grid-template-columns:1fr;gap:26px;text-align:center}}
.spot-stage{position:relative;display:grid;place-items:center;padding:24px}
.spot-stage::before{content:"";position:absolute;width:64%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(79,232,8,.4),transparent 68%);filter:blur(34px);z-index:0}
.spot-frame{position:relative;z-index:1;width:min(300px,72vw);aspect-ratio:3/4;border-radius:28px;overflow:hidden;
  border:2px solid #2c1a24;box-shadow:0 34px 74px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.05);
  animation:spot-float 5.5s ease-in-out infinite}
@keyframes spot-float{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-16px) rotate(1.2deg)}}
.spot-img{width:100%;height:100%;object-fit:cover;transition:opacity .5s}
.spot-coll{font-family:'Press Start 2P',monospace;font-size:9px;color:var(--slime);letter-spacing:2px}
.spot-name{font-family:'Bungee',cursive;font-size:clamp(28px,5vw,46px);letter-spacing:1px;margin:12px 0 6px;line-height:1;
  background:linear-gradient(180deg,#fff 5%,#d9d9d9 22%,#5f5f5f 46%,#f6f6f6 56%,#333 78%,#dedede 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.spot-price{font-family:'Press Start 2P',monospace;font-size:13px;color:var(--slime);letter-spacing:1px;margin-bottom:16px}
.spot-desc{color:#cbb9c3;font-size:16px;line-height:1.7;margin-bottom:24px;max-width:420px}
@media(max-width:760px){.spot-desc{margin-left:auto;margin-right:auto}.spot-cta,.spot-dots{justify-content:center}}
.spot-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.spot-dots{display:flex;gap:8px}
.spot-dots button{width:10px;height:10px;border-radius:50%;background:#2c1a24;border:none;cursor:pointer;padding:0;transition:.25s}
.spot-dots button.on{background:var(--slime);width:26px;border-radius:6px}

/* ============ HERO BANNER (masked, full-width) ============ */
.hero-banner{position:relative;max-width:1160px;margin:0 auto;aspect-ratio:16/7;border-radius:22px;overflow:hidden;
  border:2px solid #2c1a24;background:#0a0709;
  box-shadow:0 30px 70px rgba(0,0,0,.7),0 0 46px rgba(79,232,8,.14),inset 0 0 0 1px rgba(255,255,255,.05)}
@media(max-width:640px){.hero-banner{aspect-ratio:4/5;border-radius:16px}}
.hero-banner .bb-slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.hero-banner .bb-slide.on{opacity:1}
.hero-banner .bb-slide img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.hb-label{position:absolute;left:16px;bottom:16px;z-index:3;font-family:'Press Start 2P',monospace;font-size:10px;
  color:#fff;letter-spacing:2px;background:rgba(0,0,0,.42);padding:9px 12px;border-radius:8px;backdrop-filter:blur(5px)}
@media(max-width:640px){.hb-label{font-size:8px;left:12px;bottom:12px}}
.hb-scan{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 4px);mix-blend-mode:screen}
.hb-glare{position:absolute;top:-40%;left:-30%;width:40%;height:180%;z-index:2;pointer-events:none;
  background:linear-gradient(78deg,transparent,rgba(255,255,255,.13),transparent);animation:glare 7s ease-in-out infinite}
.hb-dots{position:absolute;right:14px;bottom:16px;z-index:3;display:flex;gap:7px}
.hb-dots button{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.35);border:none;cursor:pointer;padding:0;transition:.25s}
.hb-dots button.on{background:var(--slime);width:22px;border-radius:5px}

/* ============ v3: YOURS TRULY refresh ============ */
/* slimed wordmark */
.wordmark{position:relative;display:inline-block}
.logo-drip{position:absolute;left:0;right:0;top:78%;width:100%;height:16px;pointer-events:none;overflow:visible}
.logo-drip path{fill:var(--slime);stroke:#000;stroke-width:.8}
.logo-drip .d2{animation:dripwob 3.2s ease-in-out infinite}
@keyframes dripwob{0%,100%{transform:translateY(0)}50%{transform:translateY(2.5px)}}

/* borderless hero case stage */
.hero-stage{position:relative;max-width:1100px;margin:0 auto;min-height:min(62vh,560px);
  display:grid;place-items:center;padding:10px 0 6px}
.hs-glow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(520px,80vw);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,var(--hs-acc,rgba(79,232,8,.5)),transparent 66%);
  filter:blur(46px);opacity:.55;transition:background 1s}
.hs-slide{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .8s ease;pointer-events:none}
.hs-slide.on{opacity:1}
.hs-slide img{max-height:min(54vh,480px);max-width:82vw;object-fit:contain;border:none;border-radius:0;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.75));animation:hs-sway 7s ease-in-out infinite}
@keyframes hs-sway{0%,100%{transform:perspective(900px) rotateY(-7deg) translateY(0)}50%{transform:perspective(900px) rotateY(7deg) translateY(-12px)}}
.hs-slide model-viewer{width:min(560px,88vw);height:min(54vh,480px);--poster-color:transparent;background:transparent}
.hs-meta{position:relative;z-index:2;margin-top:14px;text-align:center}
.hs-name{font-family:'Bungee',cursive;font-size:clamp(20px,3.4vw,30px);letter-spacing:2px;
  background:linear-gradient(180deg,#fff 5%,#d9d9d9 22%,#5f5f5f 46%,#f6f6f6 56%,#333 78%,#dedede 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hs-dots{display:flex;gap:8px;justify-content:center;margin-top:12px}
.hs-dots button{width:9px;height:9px;border-radius:50%;background:#241f26;border:none;cursor:pointer;padding:0;transition:.25s}
.hs-dots button.on{background:var(--hs-acc-solid,var(--slime));width:24px;border-radius:5px}

/* floating junk cutouts (no borders, no grid) */
.float-junk{position:absolute;pointer-events:none;z-index:1;filter:drop-shadow(0 16px 26px rgba(0,0,0,.6));
  animation:fj-bob 6.5s ease-in-out infinite}
.float-junk img{width:100%;display:block}
.float-junk.fj-a{width:120px;right:4%;top:8%;animation-delay:.6s;transform:rotate(10deg)}
.float-junk.fj-b{width:84px;left:5%;bottom:12%;animation-delay:1.8s;transform:rotate(-9deg) scaleX(-1)}
@keyframes fj-bob{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -18px;rotate:4deg}}
@media(max-width:700px){.float-junk.fj-a{width:78px;top:4%}.float-junk.fj-b{display:none}}

/* zipped new-arrivals cards */
.pcard.zipped .zc-panel{position:absolute;top:0;bottom:0;width:calc(50% + 3px);z-index:5;
  background:#0d0d0d url(assets/leopard.jpg) center/420px;transition:transform .8s cubic-bezier(.65,0,.3,1)}
.pcard.zipped .zc-panel.l{left:0;border-right:3px solid #000}
.pcard.zipped .zc-panel.r{right:0;border-left:3px solid #000}
.pcard.zipped .zc-teeth{position:absolute;top:0;bottom:0;width:12px;left:calc(50% - 6px);z-index:6;
  background:repeating-linear-gradient(0deg,#d8c17a 0 7px,#8a7434 7px 9px,#31290f 9px 14px);
  border-left:2px solid #000;border-right:2px solid #000;transition:opacity .3s .1s}
.pcard.zipped .zc-label{position:absolute;z-index:6;bottom:14px;width:100%;text-align:center;
  font-family:'Press Start 2P',monospace;font-size:8px;color:#cfcfcf;letter-spacing:2px;transition:opacity .2s}
.pcard.zipped .zc-pull{position:absolute;z-index:7;left:50%;top:14%;transform:translateX(-50%);
  width:26px;height:52px;transition:top .55s ease-in,opacity .2s .5s;filter:drop-shadow(0 4px 8px rgba(0,0,0,.8))}
.pcard.zipped .zc-pull::before{content:"";display:block;width:18px;height:22px;margin:0 auto;
  background:linear-gradient(145deg,#f0e2ae,#93803f);border-radius:5px 5px 3px 3px;border:2px solid #241d05}
.pcard.zipped .zc-pull::after{content:"";display:block;width:14px;height:24px;margin:-2px auto 0;
  border:4px solid #b09a52;border-radius:7px}
.pcard.zipped.unzipped .zc-panel.l{transform:translateX(-102%)}
.pcard.zipped.unzipped .zc-panel.r{transform:translateX(102%)}
.pcard.zipped.unzipped .zc-teeth,.pcard.zipped.unzipped .zc-label{opacity:0}
.pcard.zipped.unzipped .zc-pull{top:92%;opacity:0}

/* per-case spotlight accent */
.spot-stage::before{background:radial-gradient(circle,var(--acc,rgba(79,232,8,.4)),transparent 68%)}
.spot-price{color:var(--acc-solid,var(--slime))}
.spot-coll{color:var(--acc-solid,var(--slime))}
.spot-dots button.on{background:var(--acc-solid,var(--slime))}

/* nav backpack icon */
.bag-link{display:inline-flex;align-items:center;color:#eee}
.bag-link:hover{color:var(--slime)}
.bag-link svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.bag-link img{width:26px;height:26px;object-fit:contain;display:block}

/* ============ v4: starlight + react-bits-style effects ============ */
/* shiny chrome text sweep (ShinyText) */
@keyframes chrome-shine{0%{background-position:135% 0,0 0}55%{background-position:-135% 0,0 0}100%{background-position:-135% 0,0 0}}
.chrome-h,.num-head h2,.spot-name,.hs-name{
  background-image:
    linear-gradient(115deg,transparent 38%,rgba(255,255,255,.9) 50%,transparent 62%),
    linear-gradient(180deg,#fff 5%,#d9d9d9 22%,#5f5f5f 46%,#f6f6f6 56%,#333 78%,#dedede 96%);
  background-size:250% 100%,100% 100%;
  background-position:135% 0,0 0;
  animation:chrome-shine 6s ease-in-out infinite;
}
@media(prefers-reduced-motion:reduce){.chrome-h,.num-head h2,.spot-name,.hs-name{animation:none}}

/* tilt cards (TiltedCard) */
.fx-tilt{transform-style:preserve-3d;will-change:transform}
.fx-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:9;opacity:0;transition:opacity .25s;
  background:radial-gradient(260px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.16),transparent 62%)}
.fx-tilt:hover .fx-glare{opacity:1}

/* breathing star-border on primary buttons (StarBorder) */
@keyframes btn-breathe{0%,100%{box-shadow:0 0 0 2px var(--slime),0 8px 24px rgba(79,232,8,.3)}50%{box-shadow:0 0 0 2px var(--slime),0 8px 34px rgba(79,232,8,.62)}}
.btn:not(.ghost){animation:btn-breathe 3.2s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.btn:not(.ghost){animation:none}}

/* starfield canvas sits above body bg, below content */
#fxStars{position:fixed;inset:0;pointer-events:none;display:block}

/* ============ COMMERCE: bag drawer, checkout, PDP v2 ============ */
.bag-link{position:relative;display:grid;place-items:center;width:40px;height:38px;color:#eee}
.bag-link svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.bag-link:hover{color:var(--slime)}
.jc-badge{position:absolute;top:-4px;right:-6px;min-width:18px;height:18px;border-radius:9px;
  background:var(--slime);color:#000;font-family:'Press Start 2P',monospace;font-size:8px;
  display:none;place-items:center;padding:0 4px;border:2px solid #000}

.jc-drawer{position:fixed;top:0;right:0;bottom:0;width:min(430px,94vw);z-index:1160;
  background:#0a070a;border-left:3px solid var(--slime);transform:translateX(105%);
  transition:transform .45s cubic-bezier(.7,0,.2,1);padding:24px 22px 46px;overflow-y:auto}
.jc-drawer.jc-open{transform:translateX(0)}
.jc-title{font-family:'Bungee',cursive;font-size:20px;letter-spacing:2px;margin:8px 0 14px;
  background:linear-gradient(180deg,#fff,#888 60%,#eee);-webkit-background-clip:text;background-clip:text;color:transparent}
.jc-item{display:flex;gap:12px;align-items:flex-start;background:#110c10;border:2px solid #1c1218;
  border-radius:14px;padding:12px;margin-bottom:10px}
.jc-item>img{width:56px;height:74px;object-fit:cover;border-radius:8px;border:2px solid #1c1218}
.jc-i-body{flex:1;min-width:0}
.jc-i-body>b{font-family:'Bungee',cursive;font-size:13px;color:#fff;display:block;letter-spacing:1px}
.jc-i-body>span{color:#8d8d8d;font-size:12px;display:block;margin-top:2px}
.jc-pers{color:var(--slime)!important}
.jc-qty{display:flex;gap:6px;align-items:center;margin-top:8px}
.jc-qty button{width:26px;height:26px;border-radius:7px;background:#161016;color:#fff;
  border:2px solid #241a20;cursor:pointer;font-size:13px;line-height:1}
.jc-qty button:hover{border-color:var(--slime)}
.jc-qty i{font-style:normal;font-family:'Press Start 2P',monospace;font-size:10px;min-width:20px;text-align:center}
.jc-rm{background:none!important;border:none!important;width:auto!important;color:#6f5f68;font-size:11px;text-decoration:underline}
.jc-i-price{font-family:'Press Start 2P',monospace;font-size:10px;color:var(--slime);white-space:nowrap}
.jc-region{display:flex;gap:8px;align-items:center;margin:14px 0 8px}
.jc-region span{font-family:'Press Start 2P',monospace;font-size:8px;color:#6f5f68;letter-spacing:1px;margin-right:auto}
.jc-region button{font-family:'Press Start 2P',monospace;font-size:8px;padding:9px 11px;border-radius:999px;
  background:#151015;color:#8d7c86;border:2px solid #241820;cursor:pointer}
.jc-region button.on{background:var(--slime);color:#000;border-color:#000}
.jc-free{margin:10px 0 4px}
.jc-free span{font-size:12px;color:#b9b3b6}
.jc-free-bar{height:6px;background:#1a1216;border-radius:4px;margin-top:6px;overflow:hidden}
.jc-free-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--slime),#b9ff8a);transition:width .4s}
.jc-sums{border-top:1px solid #1c1218;margin-top:14px;padding-top:12px}
.jc-sums>div{display:flex;justify-content:space-between;align-items:center;padding:4px 0}
.jc-sums span{font-family:'Press Start 2P',monospace;font-size:8px;color:#8d7c86;letter-spacing:1px}
.jc-sums b{font-size:14px;color:#ddd}
.jc-total{border-top:1px solid #1c1218;margin-top:6px;padding-top:10px!important}
.jc-total b{font-family:'Bungee',cursive;font-size:20px;color:var(--slime)}
.jc-co{width:100%;margin-top:16px}
.jc-note{color:#6f5f68;font-size:12px;line-height:1.7;margin-top:12px;text-align:center}
.jc-back{background:none;border:none;color:#8d7c86;font-size:13px;cursor:pointer;padding:4px 0;margin-bottom:10px}
.jc-back:hover{color:var(--slime)}
.jc-form label{display:block;font-family:'Press Start 2P',monospace;font-size:8px;color:#8d7c86;margin:12px 0 6px;letter-spacing:1px}
.jc-form input{width:100%;background:#151015;border:2px solid #241820;border-radius:10px;color:#fff;
  font-size:15px;padding:11px 13px;outline:none;font-family:'Space Grotesk',sans-serif}
.jc-form input:focus{border-color:var(--slime)}
.jc-form input:disabled{opacity:.5}
.jc-2col{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.jc-done{text-align:center;padding-top:12px}
.jc-done-mark{font-size:44px}
.jc-done h4{font-family:'Bungee',cursive;font-size:22px;letter-spacing:2px;color:#fff;margin:8px 0}
.jc-code{font-family:'Press Start 2P',monospace;font-size:15px;color:var(--slime);letter-spacing:2px;
  background:#120d11;border:2px dashed #2c4a1a;border-radius:10px;padding:14px;margin:12px 0}

/* PDP v2 — exquisite */
.pm{backdrop-filter:blur(8px)}
.pm-card{width:min(940px,96vw);--pacc:var(--slime)}
.pm-body{padding:34px 32px}
.pm-coll{font-family:'Press Start 2P',monospace;font-size:8px;color:var(--pacc);letter-spacing:2px}
.pm-body h3{margin-top:10px;font-size:30px}
.pm-priceline{display:flex;align-items:center;gap:14px;margin:6px 0 14px}
.pm-priceline .pm-price{margin:0;font-size:16px;color:#fff}
.pm-stock{font-family:'Press Start 2P',monospace;font-size:8px;letter-spacing:1px;color:#8d7c86}
.pm-stock.low{color:#f7c948}
.pm-stock.out{color:#ff5d8f}
.pm-desc{border-bottom:1px solid #1c1218;padding-bottom:16px}
.pm-opt{margin-bottom:14px}
.pm-opt>label:first-child{display:block;font-family:'Press Start 2P',monospace;font-size:8px;color:#8d7c86;letter-spacing:1px;margin-bottom:8px}
.pm-opt select{width:100%;background:#151015;border:2px solid #241820;border-radius:10px;color:#fff;
  font-size:15px;padding:12px;outline:none;font-family:'Space Grotesk',sans-serif;cursor:pointer}
.pm-opt select:focus{border-color:var(--pacc)}
.pm-check{display:flex;gap:10px;align-items:center;cursor:pointer;font-size:14px;color:#cbb9c3}
.pm-check input{width:18px;height:18px;accent-color:var(--pacc)}
.pm-check b{color:var(--pacc);font-family:'Press Start 2P',monospace;font-size:9px}
.pm-persname{width:100%;margin-top:10px;background:#151015;border:2px solid #241820;border-radius:10px;
  color:#fff;font-family:'Permanent Marker',cursive;font-size:17px;padding:11px 13px;outline:none}
.pm-persname:focus{border-color:var(--pacc)}
.pm-row{display:flex;justify-content:space-between;align-items:center;gap:14px}
.pm-qty{display:flex;gap:8px;align-items:center}
.pm-qty button{width:34px;height:34px;border-radius:9px;background:#151015;color:#fff;border:2px solid #241820;cursor:pointer;font-size:16px}
.pm-qty button:hover{border-color:var(--pacc)}
.pm-qty i{font-style:normal;font-family:'Press Start 2P',monospace;font-size:12px;min-width:24px;text-align:center}
.pm-total{font-family:'Bungee',cursive;font-size:24px;color:var(--pacc)}
.pm-fine{margin-top:16px;color:#6f5f68;font-size:11px;font-family:'Press Start 2P',monospace;letter-spacing:1px;line-height:2.1;font-size:8px}
.pm-customlink{display:inline-block;margin-top:12px;color:#8d7c86;font-size:13px;text-decoration:underline}
.pm-customlink:hover{color:var(--pacc)}

/* card stock states */
.pcard.soldout .pc-imgs img{filter:grayscale(.85) brightness(.55)}
.pc-badge.pc-out{background:#2a2a2a;color:#bbb}
.pc-badge.pc-low{background:#f7c948}

/* ============ visible BAG button + floating hero cutouts ============ */
.bag-link{width:auto!important;height:auto!important;display:inline-flex!important;align-items:center;gap:8px;
  padding:9px 14px;border:2px solid var(--slime);border-radius:999px;color:#fff!important;text-decoration:none;
  box-shadow:0 0 14px rgba(79,232,8,.25);transition:.15s}
.bag-link:hover{background:rgba(79,232,8,.12)}
.bp-px{width:20px;height:20px;image-rendering:pixelated}
.bag-word{font-family:'Press Start 2P',monospace;font-size:9px;letter-spacing:1px}
.jc-badge{position:absolute;top:-7px;right:-7px}
@media(max-width:480px){.bag-word{display:none}.bag-link{padding:9px 11px}}

.hs-slide img.cut{object-fit:contain;background:none;border:none;
  filter:drop-shadow(0 30px 44px rgba(0,0,0,.75)) drop-shadow(0 0 34px var(--hs-acc-solid,rgba(79,232,8,.35)));
  animation:cut-float 6s ease-in-out infinite}
@keyframes cut-float{0%,100%{transform:translateY(0) rotate(-1.4deg)}50%{transform:translateY(-18px) rotate(1.4deg)}}

/* floating cutout covers on cards + PDP (no background, no crop) */
.pc-imgs img.isCut{object-fit:contain;padding:9% 12%;background:
  radial-gradient(circle at 50% 42%,rgba(79,232,8,.08),transparent 70%),#0c090b;
  filter:drop-shadow(0 16px 24px rgba(0,0,0,.65))}
.pm-media img.isCut{object-fit:contain;padding:7%;background:
  radial-gradient(circle at 50% 40%,rgba(79,232,8,.10),transparent 72%),#0c090b;
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.7))}

/* floating cutouts in collections tiles + spotlight */
.cat-tile.ct-cut{background:radial-gradient(circle at 50% 46%,rgba(79,232,8,.09),transparent 72%),#0c090b}
.cat-tile img.isCut{object-fit:contain;padding:6% 16%;filter:drop-shadow(0 14px 22px rgba(0,0,0,.65))}
.spot-img.isCut{object-fit:contain;padding:4%;filter:drop-shadow(0 24px 38px rgba(0,0,0,.7))}
.spot-frame:has(.spot-img.isCut){border:none;box-shadow:none;background:transparent;overflow:visible}
.bp-img{width:22px;height:22px;object-fit:contain;image-rendering:pixelated}

/* ============ floating cutouts everywhere (cards, tiles, spotlight, PDP, zipped rail) ============ */
.pc-imgs img.isCut{object-fit:contain;padding:9%;
  background:radial-gradient(circle at 50% 58%,rgba(79,232,8,.10),transparent 70%),#0c090b;
  filter:drop-shadow(0 16px 24px rgba(0,0,0,.72))}
.pcard:hover .pc-imgs img.isCut{transform:translateY(-8px) scale(1.03);transition:transform .35s}
.cat-tile.ct-cut{background:radial-gradient(circle at 50% 55%,rgba(79,232,8,.12),transparent 72%),#0c090b}
.cat-tile img.isCut{object-fit:contain;padding:7%;filter:drop-shadow(0 18px 28px rgba(0,0,0,.72))}
.spot-frame:has(img.isCut){border:none;box-shadow:none;background:none;overflow:visible;animation:none}
.spot-img.isCut{object-fit:contain;filter:drop-shadow(0 28px 44px rgba(0,0,0,.78)) drop-shadow(0 0 30px var(--acc,rgba(79,232,8,.3)));animation:cut-float 6s ease-in-out infinite}
.pm-media img.isCut{object-fit:contain;padding:8%;
  background:radial-gradient(circle at 50% 55%,var(--pacc-soft,rgba(79,232,8,.10)),transparent 72%),#0d0a0c}