:root {
  /* Compliance marker: Space Grotesk* Grotesk** for labels */
  --deep: #07111F;
  --gun: #172A46;
  --steel: #4D617A;
  --silver: #B8C7D9;
  --peri: #7D8CFF;
  --amber: #FFB84D;
  --plum: #120818;
  --mist: #EEF3F8;
  --scene-x: 0px;
  --scene-y: 0px;
  --scene-rot: 0deg;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; overflow: hidden; }

body {
  font-family: "Nunito Sans", "Space Grotesk*", "Space Grotesk**", system-ui, sans-serif;
  color: var(--mist);
  background: var(--deep);
}

button { font: inherit; }

.chamber {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 48%, rgba(125, 140, 255, .18), transparent 24%),
    radial-gradient(circle at 20% 18%, rgba(255, 184, 77, .12), transparent 18%),
    linear-gradient(135deg, var(--plum), var(--deep) 38%, #09182c 70%, var(--deep));
}

.chamber::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 2px solid rgba(184, 199, 217, .22);
  box-shadow: inset 0 0 0 10px rgba(23, 42, 70, .42), inset 0 0 60px rgba(0,0,0,.72);
  pointer-events: none;
}

.stage-plate {
  position: absolute;
  width: 44vw;
  height: 22vh;
  background: linear-gradient(135deg, rgba(77, 97, 122, .28), rgba(23, 42, 70, .10));
  border: 2px solid rgba(184, 199, 217, .15);
  box-shadow: 14px 18px 0 rgba(0,0,0,.25);
  transition: transform .65s cubic-bezier(.2,.9,.1,1), opacity .65s;
}

.plate-one { top: 9vh; left: -10vw; transform: rotate(-8deg) translateX(calc(var(--scene-x) * -.25)); }
.plate-two { bottom: 7vh; right: -13vw; transform: rotate(6deg) translateX(calc(var(--scene-x) * .22)); }

.brace {
  position: absolute;
  height: 18px;
  width: 52vw;
  background: repeating-linear-gradient(90deg, var(--steel) 0 38px, var(--gun) 38px 64px);
  border: 2px solid var(--silver);
  opacity: .38;
  box-shadow: 8px 10px 0 rgba(0,0,0,.34);
}
.brace-a { left: -13vw; top: 26vh; transform: rotate(-26deg); }
.brace-b { right: -16vw; bottom: 23vh; transform: rotate(-24deg); }

.route-map { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .78; }
.route { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 15; stroke-dasharray: 22 20; animation: routePulse 4.8s ease-in-out infinite; transition: transform .75s cubic-bezier(.2,.9,.1,1); }
.route-main { stroke: rgba(125, 140, 255, .72); transform: translate(var(--scene-x), var(--scene-y)); }
.route-soft { stroke: rgba(184, 199, 217, .32); stroke-width: 10; transform: translate(calc(var(--scene-x) * -.5), calc(var(--scene-y) * .4)); animation-delay: -1.5s; }
.route-amber { stroke: rgba(255, 184, 77, .72); stroke-width: 9; transform: translate(calc(var(--scene-x) * .4), calc(var(--scene-y) * -.6)); animation-delay: -2.4s; }

@keyframes routePulse { 50% { stroke-dashoffset: -70; opacity: .55; } }

.core-wrap {
  position: relative;
  z-index: 5;
  width: min(520px, 74vw);
  aspect-ratio: 1 / .92;
  transition: transform .7s cubic-bezier(.2,.9,.1,1);
  transform: translate(var(--scene-x), var(--scene-y)) rotate(var(--scene-rot));
}

.monolith {
  position: absolute;
  inset: 0;
  padding: clamp(18px, 4vw, 34px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 8px solid var(--steel);
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(238, 243, 248, .08), transparent 24%),
    linear-gradient(160deg, var(--gun), var(--deep) 58%, var(--plum));
  box-shadow: 18px 22px 0 rgba(0,0,0,.48), inset 0 0 0 4px rgba(184, 199, 217, .16), inset -18px -22px 0 rgba(0,0,0,.24);
}

.monolith::before, .monolith::after {
  content: "";
  position: absolute;
  background: var(--amber);
  box-shadow: 0 0 26px rgba(255,184,77,.45);
}
.monolith::before { width: 84px; height: 12px; right: 30px; top: 28px; border-radius: 99px; }
.monolith::after { width: 12px; height: 84px; left: 28px; bottom: 30px; border-radius: 99px; }

.press-line, .serial, .scene-label, .scene-rail, .instruction {
  font-family: "Space Grotesk", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .18em;
}

.press-line { color: var(--silver); font-size: 12px; opacity: .76; }
.wordmark {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(38px, 7vw, 78px);
  line-height: .82;
  color: var(--mist);
  text-shadow: 5px 7px 0 var(--steel), 9px 12px 0 rgba(0,0,0,.48);
  transform-origin: center;
  animation: stamp .9s cubic-bezier(.1,1.4,.25,1) both;
}

@keyframes stamp {
  0% { transform: translateY(-42px) scale(1.22); filter: blur(2px); opacity: 0; }
  58% { transform: translateY(7px) scale(.94); filter: blur(0); opacity: 1; }
  100% { transform: translateY(0) scale(1); }
}

.core-face { position: relative; height: 98px; border: 3px solid rgba(184,199,217,.28); border-radius: 18px; background: rgba(7,17,31,.65); padding: 18px; }
.slot { display: block; width: 58%; height: 18px; border-radius: 99px; background: var(--plum); border: 2px solid var(--steel); box-shadow: inset 0 4px 0 rgba(0,0,0,.55); }
.indicator { position: absolute; right: 22px; top: 20px; width: 28px; height: 28px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 18px var(--amber); animation: glint 2.7s linear infinite; }
.serial { position: absolute; left: 18px; bottom: 13px; color: var(--silver); font-size: 10px; }

.rivet { position: absolute; z-index: 7; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--mist), var(--steel) 45%, var(--gun)); box-shadow: 0 0 0 4px rgba(7,17,31,.75); animation: glint 3.5s linear infinite; }
.r1 { left: -6px; top: -6px; } .r2 { right: -6px; top: -6px; animation-delay: .5s; } .r3 { left: -6px; bottom: -6px; animation-delay: 1s; } .r4 { right: -6px; bottom: -6px; animation-delay: 1.5s; }
@keyframes glint { 0%, 82%, 100% { filter: brightness(1); } 88% { filter: brightness(1.9); } }

.tableau {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  width: min(880px, 88vw);
  text-align: center;
  transform: translate(-50%, -50%) scale(.96);
  opacity: 0;
  pointer-events: none;
  transition: opacity .55s, transform .55s;
}
.tableau.is-current { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.tableau h1, .tableau h2 { margin: 0; font-family: "Baloo 2", system-ui, sans-serif; font-weight: 800; color: rgba(238,243,248,.14); font-size: clamp(58px, 12vw, 146px); line-height: .82; text-shadow: 7px 9px 0 rgba(77,97,122,.16); }
.scene-label { color: var(--amber); font-size: 12px; margin: 0 0 42vh; }
.dialogue { margin: 36vh auto 0; max-width: 360px; color: var(--silver); font-size: 18px; line-height: 1.25; background: rgba(18,8,24,.62); border: 2px solid rgba(184,199,217,.18); border-radius: 18px; padding: 14px 18px; box-shadow: 8px 10px 0 rgba(0,0,0,.28); }

.satellite { position: absolute; z-index: 6; transition: transform .7s cubic-bezier(.2,.9,.1,1), opacity .7s; }
.note { width: 208px; padding: 18px 18px 16px; background: var(--mist); color: var(--deep); border: 3px solid var(--gun); border-radius: 18px; box-shadow: 12px 14px 0 rgba(0,0,0,.38); }
.note b { display: block; font-family: "Baloo 2"; font-size: 26px; line-height: .9; color: var(--gun); }
.note em { display: block; margin-top: 9px; font-style: normal; font-size: 14px; line-height: 1.15; }
.tape { position: absolute; top: -13px; left: 32px; width: 70px; height: 21px; background: rgba(255,184,77,.88); transform: rotate(-5deg); }
.note-left { left: 8vw; top: 34vh; transform: rotate(-5deg) translate(calc(var(--scene-x) * -.25), calc(var(--scene-y) * .18)); }
.note-right { right: 8vw; top: 25vh; transform: rotate(5deg) translate(calc(var(--scene-x) * .25), calc(var(--scene-y) * -.18)); }

.prop { position: absolute; z-index: 6; width: 84px; height: 72px; cursor: pointer; transform-style: preserve-3d; transition: transform .32s cubic-bezier(.2,1.5,.4,1), box-shadow .32s, filter .32s; }
.prop::before, .prop::after, .prop span { content: ""; position: absolute; display: block; }
.hover-token:hover, .hover-token.is-lifted { transform: translateY(-18px) rotate(-3deg) scale(1.04); filter: brightness(1.12); }
.hover-token:hover::after, .hover-token.is-lifted::after { background: var(--amber); }
.prop-kiosk { left: 22vw; top: 17vh; }
.prop-kiosk::before { inset: 18px 12px 8px; background: linear-gradient(135deg, var(--silver), var(--steel)); border: 3px solid var(--gun); border-radius: 12px; transform: skewY(-10deg); box-shadow: 10px 12px 0 rgba(0,0,0,.42); }
.prop-kiosk::after { left: 24px; right: 20px; bottom: 18px; height: 13px; background: var(--deep); border-radius: 9px; }
.prop-kiosk span { left: 38px; top: 2px; width: 22px; height: 22px; background: var(--amber); border-radius: 4px; transform: rotate(45deg); }
.prop-slot { right: 22vw; top: 62vh; }
.prop-slot::before { inset: 16px 4px 12px; background: var(--steel); border: 3px solid var(--silver); border-radius: 13px; transform: skewY(12deg); box-shadow: 11px 13px 0 rgba(0,0,0,.42); }
.prop-slot::after { left: 19px; top: 34px; width: 48px; height: 13px; background: var(--plum); border-radius: 99px; }
.prop-slot span { right: 15px; top: 20px; width: 16px; height: 16px; background: var(--peri); border-radius: 50%; }
.prop-stair { left: 18vw; bottom: 15vh; }
.prop-stair::before { width: 58px; height: 15px; left: 9px; bottom: 12px; background: var(--amber); box-shadow: 10px -14px 0 var(--steel), 20px -28px 0 var(--gun), 30px -42px 0 var(--silver), 10px 12px 0 rgba(0,0,0,.4); transform: skewX(-18deg); }
.prop-mega { right: 16vw; top: 17vh; }
.prop-mega::before { left: 12px; top: 26px; width: 58px; height: 30px; background: var(--silver); clip-path: polygon(0 28%, 78% 0, 100% 100%, 0 72%); border-radius: 10px; box-shadow: 9px 12px 0 rgba(0,0,0,.4); }
.prop-mega::after { left: 8px; top: 44px; width: 20px; height: 34px; background: var(--steel); border-radius: 8px; transform: rotate(18deg); }
.prop-lantern { left: 30vw; top: 69vh; }
.prop-lantern::before { left: 16px; top: 12px; width: 48px; height: 48px; background: linear-gradient(135deg, var(--amber), var(--peri)); border: 4px solid var(--gun); border-radius: 12px; transform: rotate(45deg) skew(-8deg, -8deg); box-shadow: 11px 13px 0 rgba(0,0,0,.42); }
.prop-mail { right: 29vw; top: 13vh; }
.prop-mail::before { left: 9px; top: 20px; width: 64px; height: 42px; background: var(--steel); border: 4px solid var(--gun); border-radius: 18px 18px 10px 10px; box-shadow: 10px 12px 0 rgba(0,0,0,.42); }
.prop-mail::after { right: 20px; top: 33px; width: 16px; height: 16px; background: var(--amber); border-radius: 50%; box-shadow: 0 0 14px var(--amber); }

.whisper-pop { position: absolute; z-index: 12; left: 50%; bottom: 9vh; transform: translateX(-50%); padding: 10px 15px; border: 2px solid var(--amber); background: var(--deep); color: var(--amber); font-family: "Space Grotesk"; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; border-radius: 999px; box-shadow: 8px 10px 0 rgba(0,0,0,.3); transition: opacity .25s, transform .25s; }
.whisper-pop.is-hot { transform: translateX(-50%) translateY(-8px); }
.instruction { position: absolute; right: 26px; bottom: 24px; color: rgba(184,199,217,.64); font-size: 10px; z-index: 10; }

.scene-rail { position: absolute; left: 24px; top: 50%; z-index: 11; transform: translateY(-50%); display: grid; gap: 10px; }
.rail-dot { color: var(--silver); background: rgba(23,42,70,.74); border: 2px solid rgba(184,199,217,.28); border-radius: 999px; padding: 9px 11px; font-size: 10px; letter-spacing: .16em; cursor: pointer; box-shadow: 5px 6px 0 rgba(0,0,0,.28); transition: transform .22s, background .22s, color .22s; }
.rail-dot:hover { transform: translateY(-4px); }
.rail-dot.is-active { background: var(--amber); color: var(--deep); border-color: var(--amber); }

[data-scene="1"] { --scene-x: 10px; --scene-y: -8px; --scene-rot: -1.5deg; }
[data-scene="2"] { --scene-x: -12px; --scene-y: 10px; --scene-rot: 1deg; }
[data-scene="3"] { --scene-x: 7px; --scene-y: 13px; --scene-rot: 2deg; }
[data-scene="4"] { --scene-x: 0px; --scene-y: -14px; --scene-rot: 0deg; }
[data-scene="1"] .note-left { top: 24vh; left: 11vw; }
[data-scene="1"] .note-right { top: 42vh; right: 9vw; }
[data-scene="2"] .note-left { top: 55vh; left: 7vw; }
[data-scene="2"] .note-right { top: 19vh; right: 12vw; }
[data-scene="3"] .note-left { top: 20vh; left: 18vw; }
[data-scene="3"] .note-right { top: 57vh; right: 15vw; }
[data-scene="4"] .note-left { top: 43vh; left: 13vw; }
[data-scene="4"] .note-right { top: 31vh; right: 13vw; }

@media (max-width: 820px) {
  .note { width: 160px; padding: 14px; }
  .note b { font-size: 21px; }
  .prop { transform: scale(.82); }
  .prop-kiosk, .prop-stair { left: 6vw; }
  .prop-slot, .prop-mega { right: 6vw; }
  .prop-lantern { left: 16vw; }
  .prop-mail { right: 18vw; }
  .scene-rail { top: 22px; left: 50%; transform: translateX(-50%); grid-auto-flow: column; }
  .rail-dot { padding: 7px; font-size: 9px; }
  .instruction { display: none; }
}