/* =========================================================
   KMONEY — "THE VAULT" · 360° room, scroll-driven
   Step inside a reinforced bank vault. Scroll turns you
   around the room; each wall holds his stuff.
   Steel + chrome + money-green. Quiet luxury.
   ========================================================= */

:root{
  --bg:#05070a;
  --steel:#0c110e;
  --steel-hi:#1a221d;
  --chrome:#d3dad7;
  --chrome-dim:#8b9691;
  --ink:#eaf3ee;
  --muted:rgba(234,243,238,.55);
  --subtle:rgba(234,243,238,.28);
  --money:#37d67a;
  --money-deep:#0e7a44;
  --line:rgba(55,214,122,.20);
  --f-disp:'Archivo', system-ui, sans-serif;
  --f-mono:'Space Mono', ui-monospace, monospace;
  --radius:86.6vw;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ background:var(--bg); }
body{ background:var(--bg); color:var(--ink); font-family:var(--f-disp); overflow-x:hidden; -webkit-font-smoothing:antialiased; }
.mono{ font-family:var(--f-mono); }
.mint{ color:var(--money); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------------- INTRO · VEO VAULT ENTRANCE ---------------- */
.veo-intro{ position:fixed; inset:0; z-index:100; background:#020403; will-change:opacity; transition:opacity 1s ease; }
.veo-intro.gone{ opacity:0; pointer-events:none; }
.veo-intro video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.veo-tint{ position:absolute; inset:0; background:radial-gradient(120% 90% at 50% 46%, transparent 55%, rgba(2,4,3,.55)); pointer-events:none; }
.veo-frame{ position:absolute; inset:16px; border:1px solid rgba(207,214,215,.14); pointer-events:none; }
.veo-top{ position:absolute; top:1.5rem; left:0; right:0; text-align:center; font-size:.6rem; letter-spacing:.34em; color:var(--money); }
.veo-serial{ position:absolute; bottom:1.5rem; left:0; right:0; text-align:center; font-size:.55rem; letter-spacing:.24em; color:var(--subtle); display:flex; gap:.4rem; justify-content:center; align-items:center; }
.live-dot{ width:6px; height:6px; border-radius:50%; background:var(--money); box-shadow:0 0 8px var(--money); animation:pulse 1.6s infinite; }
@keyframes pulse{ 50%{ opacity:.3; } }
.veo-hint{ position:absolute; left:50%; bottom:3.6rem; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.5rem;
  font-size:.66rem; letter-spacing:.32em; color:var(--chrome); text-shadow:0 2px 12px rgba(0,0,0,.8); transition:opacity .5s ease; }
.veo-hint i{ font-style:normal; animation:bob 1.8s ease-in-out infinite; }
.veo-hint.hide{ opacity:0; }
@keyframes bob{ 0%,100%{ transform:translateY(0); opacity:.5; } 50%{ transform:translateY(6px); opacity:1; } }

/* ---------------- WebGL GALLERY ---------------- */
.gl{ position:fixed; inset:0; width:100vw; height:100vh; display:block; z-index:1; background:#04070a; }
.gl-vignette{ position:fixed; inset:0; z-index:2; pointer-events:none; box-shadow:inset 0 0 260px 70px rgba(0,0,0,.82); }
.gl-grain{ position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.now-plate{ position:fixed; left:2.2rem; bottom:2.4rem; z-index:20; display:flex; flex-direction:column; gap:.55rem; max-width:min(60vw,440px); }
.np-tag{ font-size:.6rem; letter-spacing:.3em; color:var(--money); font-weight:700; }
.np-title{ font-family:var(--f-disp); font-weight:900; text-transform:uppercase; font-size:clamp(1.9rem,4.4vw,3.4rem); line-height:.92; letter-spacing:-.01em;
  background:linear-gradient(180deg,#fff,#aeb6b2 62%,#e9efec); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; text-shadow:0 2px 24px rgba(0,0,0,.6); }
.np-sub{ font-size:.62rem; letter-spacing:.18em; color:var(--muted); text-transform:uppercase; }
.np-cta{ margin-top:.4rem; align-self:flex-start; padding:.75rem 1.6rem; border:1px solid var(--chrome-dim); color:var(--ink); border-radius:3px; text-decoration:none; font-size:.66rem; letter-spacing:.18em; transition:border-color .25s, color .25s, transform .2s; background:rgba(5,8,7,.35); backdrop-filter:blur(4px); }
.np-cta:hover{ border-color:var(--money); color:var(--money); transform:translateY(-2px); }
@media (max-width:720px){ .now-plate{ left:1.2rem; right:1.2rem; bottom:1.6rem; max-width:none; } }

/* ---------------- 2× PLATINUM hype badge ---------------- */
.plat-badge{ position:fixed; left:50%; bottom:26%; z-index:30; pointer-events:none; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  opacity:0; transform:translateX(-50%) translateY(34px) scale(.86);
  transition:opacity .5s ease, transform .7s cubic-bezier(.34,1.56,.4,1); }
.plat-badge.show{ opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
.pb-line{ display:flex; align-items:baseline; gap:.5rem; }
.pb-x, .pb-word{ font-family:var(--f-disp); font-weight:900; text-transform:uppercase; line-height:.9;
  background:linear-gradient(110deg,#ffffff 0%,#e8eff4 22%,#b4c2cc 44%,#7f8f9a 56%,#eef5fa 78%,#ffffff 100%);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 6px 26px rgba(219,230,238,.45)); animation:pbShine 3.4s linear infinite; }
.pb-x{ font-size:clamp(2.4rem,9vw,4.6rem); letter-spacing:-.02em; }
.pb-word{ font-size:clamp(2.8rem,11vw,6rem); letter-spacing:.01em; }
.pb-sub{ font-size:clamp(.56rem,1.6vw,.72rem); letter-spacing:.34em; color:var(--plat); text-transform:uppercase; }
@keyframes pbShine{ 0%{ background-position:180% 0; } 100%{ background-position:-80% 0; } }
@media (prefers-reduced-motion:reduce){ .pb-x,.pb-word{ animation:none; } }

/* GOLD cert badge — same energy, more restrained */
.gold-badge{ position:fixed; left:50%; bottom:28%; z-index:29; pointer-events:none; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:.3rem;
  opacity:0; transform:translateX(-50%) translateY(24px) scale(.92);
  transition:opacity .5s ease, transform .6s cubic-bezier(.34,1.4,.4,1); }
.gold-badge.show{ opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
.gb-word{ font-family:var(--f-disp); font-weight:900; text-transform:uppercase; line-height:.9;
  font-size:clamp(1.9rem,6.4vw,3.7rem); letter-spacing:.04em;
  background:linear-gradient(110deg,#f7e6ad 0%,#e6c766 26%,#c99a3a 48%,#a97f2e 58%,#f2dd93 82%,#f7e6ad 100%);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 4px 18px rgba(202,162,74,.32)); animation:pbShine 4.6s linear infinite; }
.gb-sub{ font-size:clamp(.5rem,1.4vw,.64rem); letter-spacing:.3em; color:rgba(230,202,128,.68); text-transform:uppercase; }
@media (prefers-reduced-motion:reduce){ .gb-word{ animation:none; } }

/* ---------------- SOUND toggle ---------------- */
.mute-btn{ position:fixed; top:1.15rem; right:4.4rem; z-index:40; display:inline-flex; align-items:center; gap:.45rem;
  padding:.48rem .85rem; background:rgba(6,10,8,.55); border:1px solid var(--chrome-dim); border-radius:100px;
  color:var(--money); font-size:.58rem; letter-spacing:.18em; cursor:pointer; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:border-color .2s, color .2s, opacity .2s; }
.mute-btn:hover{ border-color:var(--money); }
.mute-btn .mb-ico{ font-size:.9rem; line-height:1; animation:eqPulse 1s ease-in-out infinite; }
.mute-btn.off{ color:var(--muted); }
.mute-btn.off .mb-ico{ animation:none; opacity:.5; }
@keyframes eqPulse{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
.now-plate.sound .np-title::after{ content:''; display:inline-block; width:.42em; height:.42em; margin-left:.45em;
  border-radius:50%; background:var(--money); box-shadow:0 0 10px var(--money); vertical-align:middle; animation:eqPulse 1s ease-in-out infinite; }
@media (max-width:720px){ .mute-btn{ top:auto; bottom:1.1rem; right:1.1rem; } }

/* ---------------- highlights rail (catalogue dock) ---------------- */
.rail{ position:fixed; left:50%; bottom:1.2rem; transform:translateX(-50%); z-index:35;
  display:flex; gap:.42rem; padding:.35rem .5rem; max-width:min(92vw,640px); overflow-x:auto;
  background:rgba(6,10,8,.42); border:1px solid rgba(139,150,145,.22); border-radius:100px;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); scrollbar-width:none;
  opacity:0; transition:opacity .6s ease; }
.rail.show{ opacity:1; }
.rail::-webkit-scrollbar{ display:none; }
.rail-item{ flex:0 0 auto; width:52px; height:33px; border-radius:5px; overflow:hidden; padding:0; cursor:pointer;
  border:1px solid rgba(255,255,255,.14); background:#0a0d0b; opacity:.52; position:relative;
  transition:opacity .25s, border-color .25s, transform .25s, box-shadow .25s; }
.rail-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.rail-item:hover{ opacity:.92; transform:translateY(-3px); }
.rail-item.on{ opacity:1; border-color:var(--money); box-shadow:0 0 0 1px var(--money), 0 8px 20px rgba(0,0,0,.55); transform:translateY(-5px); }
@media (max-width:720px){
  .rail{ bottom:auto; top:3.2rem; left:50%; max-width:96vw; overflow:visible; gap:.2rem; padding:.28rem .34rem; justify-content:center; touch-action:none; }
  .rail-item{ width:30px; height:20px; }
}

/* ---------------- INTRO · KMONEY reveal + watermark ---------------- */
.veo-brand{ position:absolute; left:0; right:0; top:45%; transform:translateY(-50%) scale(.95); z-index:6; text-align:center;
  opacity:0; pointer-events:none; transition:opacity 1.1s ease, transform 1.5s cubic-bezier(.16,1,.3,1); }
.veo-brand.reveal{ opacity:1; transform:translateY(-50%) scale(1); }
.vb-word{ display:block; font-family:Archivo, sans-serif; font-weight:900; font-size:clamp(3rem,13vw,9rem); letter-spacing:.02em; line-height:.9;
  color:#f3f7f4; text-shadow:0 0 44px rgba(55,214,122,.4), 0 10px 44px rgba(0,0,0,.7); }
.vb-sub{ display:block; margin-top:.7rem; font-size:clamp(.58rem,1.6vw,.8rem); letter-spacing:.42em; color:var(--money); }
.wm{ position:fixed; right:.7rem; bottom:.45rem; z-index:5; font-size:.5rem; letter-spacing:.24em;
  color:rgba(150,170,160,.13); pointer-events:none; user-select:none; }

/* ---------------- LIGHTBOX (in-site video) ---------------- */
.lightbox{ position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:6vh 5vw;
  background:rgba(2,4,3,.92); backdrop-filter:blur(10px); }
.lightbox.open{ display:flex; }
.lb-inner{ position:relative; width:min(1120px,92vw); display:flex; flex-direction:column; gap:1rem; }
.lb-close{ position:absolute; top:-2.8rem; right:0; background:rgba(5,8,7,.6); border:1px solid var(--chrome-dim); color:var(--ink);
  padding:.55rem 1.1rem; border-radius:3px; font-size:.62rem; letter-spacing:.2em; cursor:pointer; transition:border-color .2s, color .2s; }
.lb-close:hover{ border-color:var(--money); color:var(--money); }
.lb-frame{ position:relative; width:100%; aspect-ratio:16/9; border-radius:6px; overflow:hidden;
  border:3px solid; border-image:linear-gradient(135deg,#f7e6ad,#c99a3a 40%,#8a6a24 60%,#f4dd93) 1;
  box-shadow:0 40px 96px rgba(0,0,0,.75), 0 0 70px rgba(202,162,74,.2); background:#000; }
.lb-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.lb-title{ text-align:center; font-size:.66rem; letter-spacing:.18em; color:var(--muted); text-transform:uppercase; }

/* ---------------- THE SCENE / ROOM (legacy CSS room — unused) ---------------- */
.scene{ position:fixed; inset:0; overflow:hidden; perspective:100vw; perspective-origin:50% 46%; background:#05070a; }
.vault-ambient{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(80% 60% at 50% 42%, rgba(55,214,122,.06), transparent 60%); }
.room{ position:absolute; inset:0; transform-style:preserve-3d;
  transform:translateZ(calc(-1 * var(--radius))) rotateY(var(--rot,0deg)); will-change:transform; }

.wall{ position:absolute; left:50%; top:50%; width:100vw; height:100vh; margin-left:-50vw; margin-top:-50vh;
  transform:rotateY(calc(var(--i) * 60deg)) translateZ(var(--radius));
  overflow:hidden; backface-visibility:hidden; display:flex; align-items:center; justify-content:center; padding:6vh 8vw;
  background:
    linear-gradient(180deg, rgba(10,14,12,.4), rgba(4,6,5,.75)),
    repeating-linear-gradient(90deg, #0b100d 0 3px, #0d120f 3px 6px),
    linear-gradient(135deg, #10160f, #080b09);
  box-shadow:inset 0 0 0 2px rgba(55,214,122,.08), inset 0 0 160px rgba(0,0,0,.7); }
.wall::before{ content:""; position:absolute; inset:14px; border:1px solid rgba(207,214,215,.08); pointer-events:none; }
.wall:nth-of-type(1){ --i:0; } .wall:nth-of-type(2){ --i:1; } .wall:nth-of-type(3){ --i:2; }
.wall:nth-of-type(4){ --i:3; } .wall:nth-of-type(5){ --i:4; } .wall:nth-of-type(6){ --i:5; }

.wall-vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5; z-index:0; filter:saturate(1.05) contrast(1.03); }
.wall-tint{ position:absolute; inset:0; z-index:1; background:
  radial-gradient(90% 70% at 30% 50%, transparent, rgba(4,6,5,.86)),
  linear-gradient(90deg, rgba(4,6,5,.7), transparent 55%); }
.wall-inner{ position:relative; z-index:2; max-width:640px; display:flex; flex-direction:column; gap:1rem; align-items:flex-start; text-align:left; }
.wall-inner--wide{ max-width:1000px; align-items:center; text-align:center; }

.wall-tag{ font-size:.62rem; letter-spacing:.3em; color:var(--money); font-weight:700; }
.wall-title{ font-family:var(--f-disp); font-weight:900; text-transform:uppercase; font-size:clamp(3rem,9vw,7.5rem); line-height:.86; letter-spacing:-.02em;
  color:var(--chrome); text-shadow:0 2px 30px rgba(0,0,0,.6); background:linear-gradient(180deg,#fff,#aeb6b2 60%,#e9efec); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.wall-title--sm{ font-size:clamp(2.2rem,6vw,4.4rem); }
.wall-sub{ font-size:clamp(.62rem,1.4vw,.8rem); letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.wall-cta{ margin-top:.4rem; display:inline-block; padding:.85rem 1.8rem; border:1px solid var(--chrome-dim); color:var(--ink); border-radius:3px; text-decoration:none; font-size:.7rem; letter-spacing:.18em; transition:background .25s, border-color .25s, transform .2s; }
.wall-cta:hover{ border-color:var(--money); color:var(--money); transform:translateY(-2px); }
.wall-cta--fill{ background:var(--money); border-color:var(--money); color:#03140a; font-weight:700; }
.wall-cta--fill:hover{ background:#5be89a; color:#03140a; box-shadow:0 10px 30px rgba(55,214,122,.3); }
.wall-note{ font-size:.58rem; letter-spacing:.1em; color:var(--subtle); margin-top:.6rem; }

/* ----- framed video screens (mounted in the vault) ----- */
.wall-inner--split{ flex-direction:row; align-items:center; justify-content:center; gap:clamp(2rem,5vw,5rem); max-width:1220px; width:100%; }
.wall-inner--reverse{ flex-direction:row-reverse; }
.wall-copy{ display:flex; flex-direction:column; gap:1rem; align-items:flex-start; flex:0 0 32%; min-width:230px; }
.screen{ position:relative; flex:1 1 56%; max-width:660px; display:block; text-decoration:none; }
.screen-frame{ position:relative; display:block; aspect-ratio:16/9; border-radius:8px; padding:15px;
  background:linear-gradient(135deg,#eef3f1 0%,#aab4b0 16%,#5f6c67 38%,#e7edea 52%,#8b9691 74%,#eef3f1 100%);
  box-shadow:0 40px 90px rgba(0,0,0,.75), 0 0 60px rgba(55,214,122,.14), inset 0 0 0 1px rgba(255,255,255,.55); }
.screen-frame::before{ content:""; position:absolute; inset:15px; border-radius:3px; box-shadow:inset 0 0 0 2px rgba(3,6,4,.85), inset 0 0 30px rgba(0,0,0,.7); z-index:2; pointer-events:none; }
.screen-frame video{ position:absolute; inset:15px; width:calc(100% - 30px); height:calc(100% - 30px); object-fit:cover; border-radius:2px; opacity:1; filter:saturate(1.06) contrast(1.04); }
.screen--gold .screen-frame{ background:linear-gradient(135deg,#f7e6ad 0%,#c99a3a 20%,#8a6a24 40%,#f4dd93 54%,#b98f34 76%,#f7e6ad 100%);
  box-shadow:0 40px 90px rgba(0,0,0,.75), 0 0 60px rgba(201,154,58,.22), inset 0 0 0 1px rgba(255,248,220,.6); }
.screen-plate{ position:absolute; bottom:-1.5rem; left:50%; transform:translateX(-50%); z-index:4; white-space:nowrap;
  font-size:.55rem; letter-spacing:.16em; padding:.34rem .8rem; color:#0a100d; background:linear-gradient(180deg,#dfe6e2,#9aa6a1); border-radius:2px; box-shadow:0 6px 16px rgba(0,0,0,.5); }
.screen-play{ position:absolute; top:50%; left:50%; z-index:5; transform:translate(-50%,-50%) scale(.7); width:64px; height:64px; display:grid; place-items:center; border-radius:50%; background:rgba(3,6,4,.5); border:1px solid rgba(255,255,255,.75); color:#fff; font-size:1.2rem; opacity:0; backdrop-filter:blur(3px); transition:opacity .3s, transform .3s; }
.screen:hover .screen-play{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.screen:hover .screen-frame{ box-shadow:0 46px 100px rgba(0,0,0,.8), 0 0 74px rgba(55,214,122,.24), inset 0 0 0 1px rgba(255,255,255,.7); }
@media (max-width:820px){ .wall-inner--split, .wall-inner--reverse{ flex-direction:column; gap:2.4rem; } .wall-copy{ align-items:center; text-align:center; flex:none; } .screen{ width:100%; } }

/* ----- WALL: deposit boxes ----- */
.boxes{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; width:100%; margin-top:1.4rem; }
.box{ position:relative; aspect-ratio:4/3; border-radius:5px; overflow:hidden; text-decoration:none;
  background:linear-gradient(145deg,#1a221d,#0c110e); border:1px solid rgba(207,214,215,.14);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.4), 0 10px 26px rgba(0,0,0,.5); display:flex; align-items:flex-end; }
.box--open:hover{ border-color:var(--money); box-shadow:0 14px 34px rgba(0,0,0,.6), 0 0 0 1px var(--money); }
.box-vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.72; z-index:0; }
.box-plate{ position:relative; z-index:2; width:100%; padding:.5rem .6rem; font-size:.56rem; letter-spacing:.14em; color:var(--ink);
  background:linear-gradient(transparent, rgba(4,6,5,.92)); text-align:left; }
.box--locked{ align-items:center; justify-content:center; flex-direction:column; gap:.4rem; color:var(--chrome-dim); }
.box--locked .box-serial{ position:absolute; top:.5rem; left:.6rem; font-size:.5rem; letter-spacing:.16em; color:var(--subtle); }
.box-lock{ font-size:1.1rem; color:var(--chrome-dim); }
.box--locked .box-plate{ background:none; text-align:center; color:var(--subtle); letter-spacing:.24em; }

/* ----- WALL: ledger ----- */
.balance-block{ display:flex; flex-direction:column; gap:.5rem; }
.balance-label{ font-size:.6rem; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); }
.balance{ font-family:var(--f-disp); font-weight:900; font-size:clamp(3.4rem,11vw,8rem); line-height:.9; color:var(--money); text-shadow:0 0 40px rgba(55,214,122,.35); letter-spacing:-.01em; }
.balance-sub{ font-size:.62rem; letter-spacing:.14em; color:var(--muted); }
.ledger-rows{ margin-top:1.6rem; display:flex; flex-direction:column; gap:.1rem; width:100%; max-width:520px; }
.lrow{ display:flex; justify-content:space-between; gap:1rem; padding:.7rem 0; border-top:1px solid var(--line); font-size:.68rem; letter-spacing:.08em; }
.lrow span{ color:var(--muted); text-transform:uppercase; } .lrow b{ color:var(--ink); }

/* ----- WALL: cosign / connect ----- */
.cosign-copy{ font-size:clamp(.9rem,1.6vw,1.1rem); line-height:1.6; color:var(--muted); max-width:560px; }
.cosign-copy b{ color:var(--ink); }
.connect-row{ display:flex; gap:.9rem; flex-wrap:wrap; margin-top:.6rem; }
.connect-foot{ margin-top:2rem; font-size:.55rem; letter-spacing:.22em; color:var(--subtle); }

/* ---------------- ROOM CHROME ---------------- */
.floor{ position:absolute; left:0; right:0; bottom:0; height:26vh; z-index:5; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(4,6,5,.9) 60%, #040605);
  border-top:1px solid rgba(55,214,122,.06); }
.ceiling{ position:absolute; left:0; right:0; top:0; height:18vh; z-index:5; pointer-events:none;
  background:linear-gradient(0deg, transparent, rgba(4,6,5,.85)); }
.vignette{ position:absolute; inset:0; z-index:6; pointer-events:none; box-shadow:inset 0 0 200px 40px rgba(0,0,0,.75); }

/* ---------------- HUD ---------------- */
.hud{ position:fixed; z-index:20; font-size:.6rem; letter-spacing:.2em; color:var(--muted); text-transform:uppercase; pointer-events:none; }
.hud-tl{ top:1.4rem; left:1.6rem; color:var(--money); font-weight:700; } .hud-dim{ color:var(--subtle); }
.hud-tr{ top:1.4rem; right:1.6rem; } .hud-bl{ bottom:1.4rem; left:1.6rem; } .hud-br{ bottom:1.4rem; right:1.6rem; }
.dots{ position:fixed; right:1.5rem; top:50%; transform:translateY(-50%); z-index:20; display:flex; flex-direction:column; gap:.7rem; }
.dot{ width:8px; height:8px; border-radius:50%; border:1px solid var(--chrome-dim); background:transparent; transition:background .3s, border-color .3s, transform .3s; }
.dot.on{ background:var(--money); border-color:var(--money); transform:scale(1.35); box-shadow:0 0 10px var(--money); }

/* 260vh intro spin + 820vh piece-nav — keep the split in sync with SPIN_VH/NAV_VH in js/gallery.js */
.scroll-track{ height:530vh; }   /* = (SPIN_VH + NAV_VH) * 100 in gallery.js */

/* ---------------- responsive ---------------- */
@media (max-width:820px){
  :root{ --radius:96vw; }
  .scene{ perspective:130vw; }
  .boxes{ grid-template-columns:repeat(2,1fr); }
  .wall{ padding:8vh 7vw; }
  .hud-tr, .hud-br{ display:none; }
  .dots{ right:.7rem; }
}
@media (prefers-reduced-motion:reduce){
  .d-dial{ transition:none; } .door{ transition:opacity .4s; } .intro.open .door{ transform:none; }
}