/* RIPVAULT — Pack Selection Scene styles. GPU-only per-frame work (transform +
   opacity; no animated filters). Two-sided 3D packs with a .psel__shade overlay
   per face for depth dimming. */
.psel{position:fixed;inset:0;background:#000;overflow:hidden;color:#fff;
  font-family:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;z-index:100;}
.psel *{-webkit-user-drag:none;}
/* scene scroll lock (applied by lockScroll() while Pack Selection is interactive) */
html.pack-selection-active,body.pack-selection-active{overscroll-behavior:none;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}

.psel__glow{position:absolute;left:50%;top:58%;width:min(72vw,560px);height:150px;
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(120,140,255,.16),transparent 72%);filter:blur(10px);z-index:0;}

/* top controls */
.psel__ctl{position:absolute;top:calc(14px + env(safe-area-inset-top));width:46px;height:46px;z-index:6;
  display:grid;place-items:center;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#e8e8ee;
  backdrop-filter:blur(8px);transition:background .15s,transform .1s;}
.psel__ctl:hover{background:rgba(255,255,255,.12);}
.psel__ctl:active{transform:scale(.94);}
.psel__ctl:focus-visible{outline:2px solid #7b9bff;outline-offset:2px;}
.psel__ctl svg{width:22px;height:22px;}
.psel__back{left:calc(14px + env(safe-area-inset-left));}
.psel__sound{right:calc(14px + env(safe-area-inset-right));}
/* ⚡ Quick Reveal — immediately left of the speaker, same control style */
.psel__quick{right:calc(70px + env(safe-area-inset-right));font-size:19px;line-height:1;
  color:rgba(255,255,255,.55);transition:background .15s,transform .1s,color .2s,box-shadow .2s;}
.psel__quick.is-on{color:#f2c14e;border-color:rgba(242,193,78,.55);
  box-shadow:0 0 14px rgba(242,193,78,.28),inset 0 0 8px rgba(242,193,78,.12);}
/* first-enable HUD toast */
/* centered via gsap xPercent:-50 (a CSS transform here would be clobbered by gsap y) */
.psel__toast{position:absolute;left:50%;top:calc(76px + env(safe-area-inset-top));
  z-index:30;display:none;white-space:nowrap;pointer-events:none;
  font-size:13px;font-weight:600;letter-spacing:.06em;color:#fff;
  background:rgba(14,14,18,.72);border:1px solid rgba(255,255,255,.14);border-radius:999px;
  padding:10px 20px;backdrop-filter:blur(10px);}

/* 3D stage */
.psel__stage{position:absolute;inset:0;perspective:1150px;perspective-origin:50% 45%;
  display:grid;place-items:center;z-index:2;cursor:grab;}
.psel[data-state="dragging"] .psel__stage{cursor:grabbing;}
.psel__carousel{position:relative;width:0;height:0;transform-style:preserve-3d;will-change:transform;}
.psel__pack{position:absolute;transform-style:preserve-3d;
  width:clamp(150px,42vw,255px);aspect-ratio:759/1265;
  left:calc(clamp(150px,42vw,255px) / -2);top:calc((clamp(150px,42vw,255px) * 1265/759) / -2);}
.psel__scale{position:relative;width:100%;height:100%;transform-style:preserve-3d;will-change:transform;}
.psel__face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.psel__face img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;
  -webkit-user-drag:none;}
/* depth dim: black overlay opacity (compositor-only) — per-frame CSS filters on the
   imgs re-rasterized every frame and janked mobile Safari. Scene is pure black, so
   the overlay is invisible over the packs' transparent margins. */
.psel__shade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;will-change:opacity;}
.psel__face--back{transform:rotateY(180deg);}

/* floor reflection — mirrored CSS layer of the (identical) front pack, not baked */
.psel__reflection{position:absolute;left:50%;top:45%;z-index:1;pointer-events:none;
  width:clamp(150px,42vw,255px);aspect-ratio:759/1265;
  transform:translate(-50%,calc((clamp(150px,42vw,255px) * 1265/759) * 0.5 + 6px)) scaleY(-1);
  opacity:.20;filter:blur(1px);
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 58%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 58%);}

/* HUD: centered shuffle below the carousel */
.psel__hud{position:absolute;left:0;right:0;bottom:calc(30px + env(safe-area-inset-bottom));
  display:flex;justify-content:center;z-index:6;pointer-events:none;}
.psel__shuffle{pointer-events:auto;font-family:inherit;font-weight:800;font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;color:#0a0a0c;background:#fff;border:none;border-radius:999px;
  padding:14px 34px;min-height:48px;cursor:pointer;box-shadow:0 10px 30px rgba(255,255,255,.14);
  transition:transform .1s,opacity .15s;}
.psel__shuffle:hover{transform:translateY(-1px);}
.psel__shuffle:active{transform:scale(.97);}
.psel__shuffle:focus-visible{outline:2px solid #7b9bff;outline-offset:3px;}

/* busy states block interaction affordances */
.psel[data-state="shuffling"] .psel__stage,
.psel[data-state="snapping"] .psel__stage,
.psel[data-state="confirming"] .psel__stage{cursor:default;}
.psel[data-state="shuffling"] .psel__shuffle,
.psel[data-state="confirming"] .psel__shuffle,
.psel[data-state="selected"] .psel__shuffle{opacity:.5;pointer-events:none;}

/* confirmation glow pulse on the selected pack */
.psel__pack.is-confirming .psel__scale::after{content:"";position:absolute;inset:-8%;border-radius:14px;
  background:radial-gradient(closest-side,rgba(201,169,97,.5),transparent 70%);
  animation:pselGlow .5s ease-out forwards;pointer-events:none;}
@keyframes pselGlow{0%{opacity:0;transform:scale(.8)}40%{opacity:1}100%{opacity:0;transform:scale(1.15)}}

@media (prefers-reduced-motion: reduce){
  .psel__pack.is-confirming .psel__scale::after{animation-duration:.25s;}
}