/* =============================================================================
   XXXCAT - design tokens
   Reference: zecurity.fun / catspin.fun bar - full interactive scene, no static
   fade-in page. World: a third-rate club stage at night, one working spotlight
   pair, a tip jar on the ledge in front of the stage.
   Palette sampled off assets/avatar.png (magenta-to-purple backdrop) and
   assets/banner.png (amber curtain, hot pink/violet spotlights).
   Type: Monoton (neon marquee display, headline only) + Poppins (glam sans,
   UI/body) + Space Mono (ticker/CA/counter digits).
   Motion idiom: a continuous spotlight sweep behind everything, a real
   parabolic bill-toss arc on every tip, a bill-flutter on copy.
   ========================================================================== */
:root{
  --bg-void:#0A040C;
  --purple-deep:#26102F;
  --purple:#5B1C86;
  --magenta:#E11F8C;
  --magenta-bright:#FF2FC0;
  --gold:#F4C542;
  --money:#2FAE5C;
  --money-dark:#1B7A40;
  --money-light:#7BE39B;
  --cream:#FBEFFA;
  --ink:#180B1D;

  --space-2xs:.25rem;
  --space-xs:.5rem;
  --space-sm:.75rem;
  --space-md:1.25rem;
  --space-lg:2rem;
  --space-xl:3rem;

  --radius-sm:.5rem;
  --radius-md:1rem;
  --radius-lg:1.75rem;

  --font-display:"Monoton", cursive;
  --font-body:"Poppins", "Segoe UI", sans-serif;
  --font-mono:"Space Mono", "SFMono-Regular", monospace;

  --ease-pop: cubic-bezier(.2,1.4,.4,1);
}

@font-face{font-family:"Monoton";src:url("assets/fonts/monoton-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Poppins";src:url("assets/fonts/poppins-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Poppins";src:url("assets/fonts/poppins-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Poppins";src:url("assets/fonts/poppins-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:"Poppins";src:url("assets/fonts/poppins-900.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap;}
@font-face{font-family:"Space Mono";src:url("assets/fonts/spacemono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Space Mono";src:url("assets/fonts/spacemono-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}

*{box-sizing:border-box;}
html,body{height:100%;}
html{overflow-x:hidden;}
body{
  margin:0;
  background:var(--bg-void);
  color:var(--cream);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-y:auto;
}

#boot-error-banner{
  position:fixed; inset:auto 0 0 0; z-index:999999;
  background:#3a0a12; color:#ffe1e1; font:700 13px/1.4 var(--font-mono);
  padding:10px 14px; border-top:3px solid #ff4d6d;
}
#boot-error-banner:empty{display:none;}

.noscript-note{display:none;position:fixed;inset:auto 0 0 0;z-index:9999;background:var(--ink);color:var(--cream);font:600 13px/1.5 var(--font-body);padding:12px 16px;text-align:center;}

a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}

/* =============================================================================
   Scene shell - fixed club-stage viewport, no page scroll. Nav is the tip-jar
   interaction only: no section links, no menu, the mechanic itself IS the nav.
   ========================================================================== */
.scene{
  position:relative;
  min-height:100dvh;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  isolation:isolate;
}

.scene-bg{
  position:fixed; inset:0; z-index:0;
  overflow:hidden;
  filter:saturate(1.05);
}
/* Doll-on-the-pole loop: the fallback photo sits underneath at all times;
   the video plays on top once it can. If the source 404s, the codec is
   unsupported, or JS marks it broken (see app.js), the video is hidden and
   the still photo underneath is already there, no layout jump. */
.scene-bg-media{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 30%;
}
.scene-bg-fallback{ z-index:0; }
.scene-bg-video{ z-index:1; background:transparent; }
@media (prefers-reduced-motion:reduce){
  .scene-bg-video{ display:none; }
}
.scene-scrim{
  position:fixed; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(8,2,10,.72) 0%, rgba(10,3,12,.28) 22%, rgba(10,3,12,.18) 55%, rgba(6,2,8,.86) 88%, rgba(4,1,6,.96) 100%),
    radial-gradient(120% 90% at 50% 8%, rgba(38,16,47,0) 0%, rgba(10,4,12,.55) 70%);
}
.haze{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(60% 40% at 50% 100%, rgba(225,31,140,.16), transparent 70%);
  mix-blend-mode:screen;
}

/* Continuous spotlight sweep - autoplay, never stops, this is the site's
   ambient motion idiom (like a real club rig on a slow oscillator). */
.spotlight{
  position:fixed; top:-10%; z-index:2; pointer-events:none;
  width:46vw; height:130vh;
  background:conic-gradient(from 200deg at 50% 0%, transparent 0deg, rgba(255,47,192,.30) 14deg, rgba(255,47,192,.05) 30deg, transparent 46deg);
  filter:blur(2px);
  mix-blend-mode:screen;
  transform-origin:50% 0%;
}
.spotlight--a{
  left:8%;
  animation:sweep-a 9s ease-in-out infinite;
}
.spotlight--b{
  right:6%;
  background:conic-gradient(from -20deg at 50% 0%, transparent 0deg, rgba(122,52,214,.30) 14deg, rgba(122,52,214,.06) 30deg, transparent 46deg);
  animation:sweep-b 11s ease-in-out infinite;
}
@keyframes sweep-a{
  0%{transform:rotate(-22deg);}
  50%{transform:rotate(24deg);}
  100%{transform:rotate(-22deg);}
}
@keyframes sweep-b{
  0%{transform:rotate(18deg);}
  50%{transform:rotate(-26deg);}
  100%{transform:rotate(18deg);}
}
@media (prefers-reduced-motion:reduce){
  .spotlight--a{animation-duration:40s;}
  .spotlight--b{animation-duration:46s;}
}

/* =============================================================================
   Top bar
   ========================================================================== */
.topbar{
  position:relative; z-index:5;
  display:flex; align-items:center; gap:var(--space-md);
  padding:clamp(.7rem,2vw,1.1rem) clamp(.9rem,3vw,1.8rem);
}
.brand{display:flex; align-items:center; gap:.6rem;}
.brand-icon{
  width:38px; height:38px; border-radius:50%;
  box-shadow:0 0 0 2px rgba(255,255,255,.08), 0 0 18px rgba(255,47,192,.55);
}
.brand-text{display:flex; flex-direction:column; line-height:1.05;}
.brand-name{
  font-family:var(--font-display);
  font-size:clamp(1rem,2.6vw,1.35rem);
  letter-spacing:.03em;
  color:var(--cream);
  text-shadow:0 0 6px rgba(255,47,192,.85), 0 0 20px rgba(255,47,192,.45);
}
.brand-ticker{
  font-family:var(--font-mono);
  font-size:.68rem;
  color:var(--gold);
  letter-spacing:.06em;
}

.status-chip{
  display:flex; align-items:center; gap:.5rem;
  margin-left:auto;
  padding:.4rem .8rem;
  border-radius:999px;
  background:rgba(20,7,24,.55);
  border:1px solid rgba(255,255,255,.12);
  font:600 .68rem/1 var(--font-mono);
  letter-spacing:.04em;
  color:var(--cream);
  backdrop-filter:blur(6px);
  white-space:nowrap;
}
.status-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--money-light);
  box-shadow:0 0 8px var(--money-light);
  animation:blink 1.8s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:1;} 50%{opacity:.35;}}

.topnav{display:flex; align-items:center; gap:.5rem;}
.icon-btn{
  display:flex; align-items:center; gap:.4rem;
  width:40px; height:40px;
  border-radius:50%;
  background:rgba(20,7,24,.55);
  border:1px solid rgba(255,255,255,.14);
  transition:transform .18s var(--ease-pop), background .18s, box-shadow .18s;
}
.icon-btn:hover, .icon-btn:focus-visible{
  transform:translateY(-2px) scale(1.05);
  box-shadow:0 6px 18px rgba(225,31,140,.35);
}
.icon-btn--buy{
  width:auto; padding:0 .9rem 0 .55rem;
  border-radius:999px;
  font:700 .74rem/1 var(--font-body);
  letter-spacing:.02em;
  background:linear-gradient(135deg, rgba(47,174,92,.28), rgba(20,7,24,.55));
}

/* =============================================================================
   Live tips readout
   ========================================================================== */
.counter-readout{
  position:relative; z-index:5;
  display:flex; flex-direction:column; align-items:center;
  gap:.15rem;
  margin-top:clamp(.2rem,2vh,1rem);
  text-align:center;
}
.counter-label{
  font:700 .66rem/1 var(--font-mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(251,239,250,.7);
}
.counter-value{
  font-family:var(--font-display);
  font-size:clamp(2.1rem,7vw,3.6rem);
  line-height:1;
  color:var(--gold);
  text-shadow:0 0 10px rgba(244,197,66,.8), 0 0 26px rgba(244,197,66,.35);
}
.counter-value.is-bump{animation:bump .35s var(--ease-pop);}
@keyframes bump{
  0%{transform:scale(1);}
  35%{transform:scale(1.16);}
  100%{transform:scale(1);}
}
.counter-sub{
  font:600 .68rem/1 var(--font-mono);
  color:rgba(251,239,250,.65);
}

/* =============================================================================
   MAKE IT RAIN banner
   ========================================================================== */
.rain-banner{
  position:fixed; top:38%; left:50%; z-index:40;
  transform:translate(-50%,-50%) scale(.7);
  font-family:var(--font-display);
  font-size:clamp(2.2rem,9vw,5rem);
  color:var(--magenta-bright);
  text-shadow:0 0 14px rgba(255,47,192,.95), 0 0 42px rgba(255,47,192,.6), 0 0 80px rgba(122,52,214,.5);
  opacity:0;
  pointer-events:none;
  letter-spacing:.04em;
  white-space:nowrap;
}
.rain-banner.is-live{
  animation:rain-banner-pop 2.4s var(--ease-pop) forwards;
}
@keyframes rain-banner-pop{
  0%{opacity:0; transform:translate(-50%,-50%) scale(.6) rotate(-4deg);}
  14%{opacity:1; transform:translate(-50%,-50%) scale(1.06) rotate(2deg);}
  22%{transform:translate(-50%,-50%) scale(1) rotate(0deg);}
  80%{opacity:1;}
  100%{opacity:0; transform:translate(-50%,-50%) scale(1) rotate(0deg);}
}

/* =============================================================================
   Stage floor - accumulating bill pile, sits above the photo, below the ledge
   ========================================================================== */
.stage-floor{
  position:absolute; z-index:4; pointer-events:none;
  left:50%; top:38%;
  width:min(58vw,560px); height:26vh;
  transform:translateX(-50%);
}

/* =============================================================================
   Ledge - the foreground bar in front of the stage: cash stack + tip jar.
   This IS the page's only interactive control / "nav".
   ========================================================================== */
.ledge{
  position:relative; z-index:6;
  margin-top:auto;
  padding:0 clamp(.9rem,4vw,2.4rem) clamp(.9rem,3vh,1.6rem);
}
.ledge-inner{
  display:flex; align-items:flex-end; justify-content:center;
  gap:clamp(1.2rem,5vw,3.2rem);
  max-width:720px; margin:0 auto;
  padding:clamp(.9rem,2.4vh,1.4rem) clamp(1rem,3vw,1.8rem);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  background:linear-gradient(180deg, rgba(38,16,47,.55), rgba(10,4,12,.86));
  border:1px solid rgba(255,255,255,.09);
  border-bottom:none;
  box-shadow:0 -10px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(4px);
}

/* Cash stack control */
.cash-stack{
  position:relative;
  width:clamp(74px,15vw,98px);
  height:clamp(52px,10vw,64px);
  margin-bottom:.35rem;
  cursor:grab;
  touch-action:none;
}
.cash-stack:active{cursor:grabbing;}
.cash-stack:focus-visible{outline:2px solid var(--gold); outline-offset:4px;}
.bill{
  position:absolute; inset:0;
  border-radius:.35rem;
  background:
    linear-gradient(135deg, rgba(255,255,255,.22), transparent 40%),
    linear-gradient(160deg, var(--money-light), var(--money) 55%, var(--money-dark));
  border:1.5px solid rgba(10,20,10,.55);
  box-shadow:0 3px 8px rgba(0,0,0,.4);
}
.bill::after{
  content:"$";
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font:800 1rem var(--font-body);
  color:rgba(10,30,15,.55);
}
.bill--stack{transform:rotate(var(--r));}
.cash-stack.is-grabbed .bill--stack{opacity:.25;}
.stack-cta{
  position:absolute; left:50%; bottom:-1.6rem; transform:translateX(-50%);
  white-space:nowrap;
  font:700 .58rem/1.25 var(--font-mono);
  letter-spacing:.06em;
  color:rgba(251,239,250,.62);
  text-align:center;
  text-transform:uppercase;
}

/* Jar + napkin */
.jar-wrap{position:relative; display:flex; flex-direction:column; align-items:center;}
.jar{
  position:relative;
  width:clamp(92px,17vw,120px);
  display:flex; flex-direction:column; align-items:center;
  transition:transform .16s var(--ease-pop);
}
.jar:hover, .jar:focus-visible{transform:translateY(-2px);}
.jar.is-target-hot .jar-svg .jar-glass{
  filter:drop-shadow(0 0 14px rgba(244,197,66,.85));
}
.jar.is-receiving .jar-svg{animation:jar-pulse .5s var(--ease-pop);}
@keyframes jar-pulse{
  0%{transform:scale(1);}
  40%{transform:scale(1.08) rotate(-2deg);}
  70%{transform:scale(.97) rotate(1deg);}
  100%{transform:scale(1);}
}
.jar-svg{width:100%; height:auto; display:block;}
.jar-svg .jar-glass{
  fill:rgba(255,255,255,.10);
  stroke:rgba(255,255,255,.55);
  stroke-width:3;
}
.jar-svg .jar-lid{fill:var(--gold); stroke:rgba(0,0,0,.25); stroke-width:1;}
.jar-svg .jar-slot{fill:var(--ink);}
.jar-svg .jar-bills rect{fill:var(--money); stroke:var(--money-dark); stroke-width:2;}
.jar-svg .jar-bills rect:nth-child(2){fill:var(--money-light);}
.jar-svg .jar-shine{stroke:rgba(255,255,255,.35); stroke-width:5; stroke-linecap:round;}
.jar-hint{
  margin-top:-.4rem;
  font:800 .6rem/1.15 var(--font-body);
  letter-spacing:.06em;
  color:rgba(251,239,250,.75);
  text-align:center;
  text-transform:uppercase;
}

.napkin{
  position:relative;
  margin-top:.6rem;
  width:clamp(150px,32vw,210px);
  padding:.55rem .7rem .6rem;
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,.03) 0 2px, transparent 2px 6px),
    #fbf3e0;
  color:#3a2a12;
  border-radius:.25rem .9rem .4rem .8rem;
  transform:rotate(-2.4deg);
  box-shadow:0 6px 16px rgba(0,0,0,.4), inset 0 0 0 1px rgba(0,0,0,.05);
  cursor:pointer;
  transition:transform .18s var(--ease-pop);
}
.napkin:hover, .napkin:focus-visible{transform:rotate(-1deg) translateY(-2px);}
.napkin-label{
  display:block;
  font:700 .55rem/1.2 var(--font-mono);
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#8a6a2f;
  margin-bottom:.2rem;
}
.napkin-text{
  display:block;
  font:700 .68rem/1.3 var(--font-mono);
  letter-spacing:.01em;
  word-break:break-all;
  color:#3a2a12;
}
.napkin-state{
  display:block;
  margin-top:.25rem;
  font:600 .58rem/1 var(--font-body);
  color:#a3405f;
}
.napkin.is-copied{transform:rotate(0deg) scale(1.03);}
.napkin.is-copied .napkin-state{color:#1b7a40;}

/* =============================================================================
   Flying bills layer (toss arcs + rain burst)
   ========================================================================== */
.flying-layer{
  position:fixed; inset:0; z-index:30; pointer-events:none; overflow:hidden;
}
.fly-bill{
  position:absolute; top:0; left:0;
  width:38px; height:22px;
  border-radius:.3rem;
  background:
    linear-gradient(135deg, rgba(255,255,255,.28), transparent 45%),
    linear-gradient(160deg, var(--money-light), var(--money) 55%, var(--money-dark));
  border:1.5px solid rgba(10,20,10,.55);
  box-shadow:0 4px 10px rgba(0,0,0,.35);
  will-change:transform, opacity;
}
.fly-bill::after{
  content:"$";
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font:800 .78rem var(--font-body);
  color:rgba(10,30,15,.5);
}
.fly-bill.is-toss{animation:toss-arc var(--toss-dur,900ms) cubic-bezier(.33,.86,.4,1) forwards;}
@keyframes toss-arc{
  0%{transform:translate(var(--x0),var(--y0)) rotate(var(--rot0)) scale(.9); opacity:1;}
  45%{transform:translate(var(--xm),var(--ym)) rotate(var(--rotm)) scale(1.05); opacity:1;}
  100%{transform:translate(var(--x1),var(--y1)) rotate(var(--rot1)) scale(.92); opacity:.98;}
}
.fly-bill.is-rain{animation:rain-fall var(--rain-dur,1800ms) linear forwards;}
@keyframes rain-fall{
  0%{transform:translate(var(--x0),-8vh) rotate(0deg); opacity:0;}
  8%{opacity:1;}
  100%{transform:translate(var(--x1),108vh) rotate(var(--rot1)); opacity:.9;}
}
.fly-bill.is-settled{
  position:absolute; animation:none;
  transform:translate(var(--x1),var(--y1)) rotate(var(--rot1));
  opacity:.94;
}
.fly-bill.is-flutter{animation:flutter-copy 900ms ease-out forwards;}
@keyframes flutter-copy{
  0%{transform:translate(var(--x0),var(--y0)) rotate(-8deg) scale(.8); opacity:0;}
  20%{opacity:1;}
  50%{transform:translate(var(--xm),var(--ym)) rotate(10deg) scale(1); opacity:1;}
  100%{transform:translate(var(--x1),var(--y1)) rotate(-4deg) scale(.9); opacity:0;}
}

.tip-float{
  position:absolute; z-index:31;
  font:800 .82rem var(--font-mono);
  color:var(--gold);
  text-shadow:0 0 8px rgba(244,197,66,.8);
  pointer-events:none;
  animation:tip-float-up 900ms ease-out forwards;
}
@keyframes tip-float-up{
  0%{transform:translateY(0); opacity:0;}
  15%{opacity:1;}
  100%{transform:translateY(-46px); opacity:0;}
}

@media (prefers-reduced-motion:reduce){
  .fly-bill.is-toss, .fly-bill.is-rain, .fly-bill.is-flutter, .tip-float, .rain-banner.is-live, .counter-value.is-bump, .jar.is-receiving .jar-svg{
    animation-duration:1ms !important;
  }
}

/* =============================================================================
   Footer
   ========================================================================== */
.scene-footer{
  position:relative; z-index:6;
  display:flex; justify-content:space-between; align-items:center;
  gap:.6rem;
  padding:.55rem clamp(.9rem,4vw,2.4rem) .8rem;
  font:600 .58rem/1 var(--font-mono);
  letter-spacing:.03em;
  color:rgba(251,239,250,.55);
  flex-wrap:wrap;
}
.footer-mid{opacity:.8;}
#canary.is-ok{color:var(--money-light);}

/* =============================================================================
   Depth content - the backstage wall. Sits below the fixed one-screen hero,
   in normal document flow, so it is what the visitor scrolls into once the
   jar mechanic above has had its moment. Framed as the corridor behind the
   stage: four physical objects pinned to the wall (a laminated rules
   placard, a chalkboard tally, a scatter of napkin notes, a lit dressing
   mirror), not a repeated card grid / FAQ list / table - deliberately a
   different structural template from this batch's sibling sites.
   position:relative + an explicit z-index above the hero's fixed video/
   scrim/spotlight layers (max z-index 6 inside .scene) keeps this content
   opaque and on top once scrolled to, instead of the fixed hero bleeding
   through underneath it.
   ========================================================================== */
.depth-wrap{
  position:relative;
  z-index:20;
  isolation:isolate;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.16) 0 2px, transparent 2px 26px),
    linear-gradient(180deg, var(--ink) 0%, var(--purple-deep) 42%, var(--ink) 100%);
}

.wall-section{
  position:relative;
  padding:clamp(3rem,8vw,5.5rem) clamp(1.1rem,5vw,3rem);
  display:flex;
  flex-direction:column;
  align-items:center;
}
.wall-title{
  font-family:var(--font-display);
  font-size:clamp(1.5rem,4vw,2.2rem);
  color:var(--cream);
  text-shadow:0 0 10px rgba(255,47,192,.5);
  text-align:center;
  margin:0;
  letter-spacing:.02em;
}
.wall-eyebrow{
  font:600 .76rem/1.4 var(--font-mono);
  letter-spacing:.05em;
  color:rgba(251,239,250,.6);
  margin:.4rem 0 1.8rem;
  text-align:center;
  max-width:520px;
}

/* House rules - laminated placard, taped up */
.rules-card{
  position:relative;
  max-width:640px;
  width:100%;
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,.03) 0 2px, transparent 2px 6px),
    #fbf3e0;
  color:#3a2a12;
  border-radius:var(--radius-md);
  padding:clamp(1.6rem,4vw,2.3rem) clamp(1.4rem,4vw,2.4rem);
  transform:rotate(-1.1deg);
  box-shadow:0 14px 30px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.06);
}
.board-tape{
  position:absolute;
  width:70px; height:24px;
  background:rgba(255,255,255,.55);
  box-shadow:0 2px 5px rgba(0,0,0,.3);
}
.board-tape--a{ top:-11px; left:14%; transform:rotate(-8deg); }
.board-tape--b{ top:-9px; right:12%; transform:rotate(6deg); }
.rules-list{
  list-style:none;
  counter-reset:rule;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.85rem;
}
.rules-list li{
  counter-increment:rule;
  position:relative;
  padding-left:2.5rem;
  font:500 .92rem/1.55 var(--font-body);
}
.rules-list li::before{
  content:counter(rule);
  position:absolute; left:0; top:.05rem;
  width:1.7rem; height:1.7rem;
  border-radius:50%;
  background:var(--gold);
  color:var(--ink);
  font:800 .8rem/1.7rem var(--font-mono);
  text-align:center;
}

/* Tip board - chalkboard tally, in-world lore, not a live feed */
.chalk-frame{
  width:100%;
  max-width:720px;
  background:
    radial-gradient(120% 140% at 15% 10%, rgba(255,255,255,.04), transparent 55%),
    #182a1f;
  border:10px solid #4a3320;
  border-radius:.4rem;
  padding:clamp(1.3rem,4vw,2rem);
  box-shadow:0 16px 32px rgba(0,0,0,.5), inset 0 0 30px rgba(0,0,0,.35);
}
.chalk-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:.9rem;
}
.chalk-list li{
  display:flex;
  gap:.9rem;
  align-items:flex-start;
  padding-bottom:.9rem;
  border-bottom:1px dashed rgba(255,255,255,.18);
}
.chalk-list li:last-child{ border-bottom:none; padding-bottom:0; }
.chalk-rank{
  flex:0 0 auto;
  font:800 1rem/1.3 var(--font-mono);
  color:var(--gold);
  text-shadow:0 0 8px rgba(244,197,66,.5);
}
.chalk-info{ display:flex; flex-direction:column; gap:.2rem; }
.chalk-name{
  font:700 .92rem/1.3 var(--font-body);
  color:#f4f1e6;
  text-shadow:0 0 4px rgba(255,255,255,.2);
}
.chalk-note{
  font:400 .78rem/1.4 var(--font-body);
  color:rgba(244,241,230,.66);
  font-style:italic;
}

/* Regulars' reviews - napkin notes pinned in a loose scatter, not a card grid */
.note-grid{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(1rem,4vw,2rem);
  max-width:940px;
}
.note-card{
  position:relative;
  width:clamp(200px,42vw,250px);
  margin:0;
  padding:1.1rem 1.1rem 1.3rem;
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,.03) 0 2px, transparent 2px 6px),
    #fbf3e0;
  color:#3a2a12;
  border-radius:.25rem .9rem .4rem .8rem;
  box-shadow:0 10px 24px rgba(0,0,0,.4);
}
.note-card::before{
  content:"";
  position:absolute; top:-8px; left:50%; transform:translateX(-50%);
  width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ff8fae, #c22a4d 70%);
  box-shadow:0 2px 4px rgba(0,0,0,.4);
}
.note-card p{ font:500 .86rem/1.45 var(--font-body); margin:0 0 .6rem; }
.note-card cite{ font:700 .68rem/1 var(--font-mono); font-style:normal; letter-spacing:.03em; color:#a3405f; }
.note-card--a{ transform:rotate(-3deg); }
.note-card--b{ transform:rotate(2.4deg); }
.note-card--c{ transform:rotate(-1.6deg); }
.note-card--d{ transform:rotate(3.2deg); }

/* Backstage - dressing room mirror, backstory + stat chips */
.mirror-card{
  position:relative;
  max-width:640px; width:100%;
  background:linear-gradient(180deg, rgba(91,28,134,.35), rgba(20,7,24,.75));
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-lg);
  padding:clamp(2.2rem,5vw,2.8rem) clamp(1.4rem,4vw,2.2rem) clamp(1.6rem,4vw,2rem);
  box-shadow:0 18px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
}
.mirror-bulbs{
  position:absolute; top:-14px; left:0; right:0; z-index:1;
  display:flex; justify-content:space-evenly;
  padding:0 1.4rem;
}
.mirror-bulbs span{
  width:11px; height:11px; border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 8px rgba(244,197,66,.9), 0 0 18px rgba(244,197,66,.5);
  animation:bulb-flicker 2.6s ease-in-out infinite;
}
.mirror-bulbs span:nth-child(odd){ animation-delay:.4s; }
.mirror-bulbs span:nth-child(3n){ animation-delay:.9s; }
@keyframes bulb-flicker{ 0%,100%{opacity:1;} 50%{opacity:.55;} }
.mirror-copy{
  font:400 .94rem/1.65 var(--font-body);
  color:rgba(251,239,250,.88);
  margin:.6rem 0 1.6rem;
}

/* Signature-move reel: a second Kling clip (the pole-spin), framed like a
   lit vanity mirror to match the Backstage bulbs above it. Additive to the
   existing Behind the Curtain layout, sits between the copy and the stat
   chips, does not replace or resize anything already there. Plays only
   once scrolled into view (see wireSpinClip in app.js) so a second
   autoplaying video never fights the hero's for bandwidth on load. */
.mirror-reel{
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  margin:0 0 1.7rem;
}
.mirror-reel-frame{
  position:relative;
  width:168px; height:168px;
  border-radius:50%;
  overflow:hidden;
  background-image:url("assets/avatar.png");
  background-size:cover;
  background-position:50% 15%;
  border:3px solid var(--gold);
  box-shadow:0 0 0 6px rgba(244,197,66,.14), 0 14px 30px rgba(0,0,0,.5);
}
.mirror-reel-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 15%;
  display:block;
}
.mirror-reel-caption{
  font:700 .62rem/1 var(--font-mono);
  letter-spacing:.05em; text-transform:uppercase;
  color:rgba(251,239,250,.6);
  text-align:center;
}
.stat-row{
  display:flex; flex-wrap:wrap; gap:.7rem;
}
.stat-chip{
  flex:1 1 220px;
  padding:.7rem .9rem;
  border-radius:var(--radius-sm);
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.08);
}
.stat-label{
  display:block;
  font:700 .58rem/1 var(--font-mono);
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold);
  margin-bottom:.3rem;
}
.stat-value{
  display:block;
  font:500 .8rem/1.35 var(--font-body);
  color:var(--cream);
}

.depth-close{
  text-align:center;
  padding:1.4rem 1rem 2.6rem;
}
.depth-close-link{
  display:inline-flex; align-items:center; gap:.4rem;
  font:700 .66rem/1 var(--font-mono);
  letter-spacing:.06em; text-transform:uppercase;
  color:rgba(251,239,250,.6);
  padding:.55rem 1.1rem;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  transition:color .18s, border-color .18s, transform .18s var(--ease-pop);
}
.depth-close-link:hover, .depth-close-link:focus-visible{
  color:var(--gold); border-color:rgba(244,197,66,.5);
  transform:translateY(-2px);
}

@media (prefers-reduced-motion:reduce){
  .mirror-bulbs span{ animation-duration:1ms; }
}

@media (max-width:640px){
  .chalk-list li{ gap:.7rem; }
  .note-card{ width:min(84vw,240px); }
}

/* =============================================================================
   Responsive
   ========================================================================== */
@media (max-width:640px){
  .topbar{gap:.5rem;}
  .status-chip span:last-child{max-width:38vw; overflow:hidden; text-overflow:ellipsis;}
  .icon-btn--buy span{display:none;}
  .icon-btn--buy{width:40px; padding:0; justify-content:center;}
  .ledge-inner{gap:1rem; flex-wrap:wrap;}
  .napkin{width:min(78vw,220px);}
  .scene-footer{font-size:.52rem;}
}

@media (min-width:1100px){
  .ledge-inner{gap:4rem;}
}

@media (max-height:560px){
  .counter-readout{margin-top:.2rem;}
  .counter-value{font-size:1.7rem;}
  .stage-floor{top:34%;}
}