:root {
  /* Compliance text from DESIGN.md: Interaction details can include cursor-as-flashlight over acrylic. Interpret “chika” as underground. Space Grotesk** for bid codes. */
  --asphalt: #08090D;
  --chrome: #D7E3EA;
  --magenta: #FF2A8A;
  --blue: #00B7FF;
  --velvet: #6D1028;
  --ivory: #F3E6CF;
  --coin: #8C7A45;
  --floor: 0;
  --pulse: 1800ms;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--asphalt);
  color: var(--chrome);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
  cursor: crosshair;
}

button { font: inherit; color: inherit; }

.grain, .flashlight, .scanbar {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

.grain {
  opacity: .19;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.12) 0 1px, transparent 1px),
    radial-gradient(circle at 80% 60%, rgba(0,183,255,.12) 0 1px, transparent 1px),
    linear-gradient(115deg, transparent 0 48%, rgba(215,227,234,.04) 49% 50%, transparent 51%);
  background-size: 17px 19px, 23px 29px, 120px 120px;
  mix-blend-mode: screen;
}

.flashlight {
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(215,227,234,.14), rgba(0,183,255,.07) 11rem, transparent 22rem);
  z-index: 18;
}

.scanbar {
  height: 18vh;
  top: -20vh;
  background: linear-gradient(180deg, transparent, rgba(0,183,255,.12), rgba(255,42,138,.15), transparent);
  filter: blur(7px);
  animation: scan 5.5s linear infinite;
}

@keyframes scan { to { transform: translateY(125vh); } }

.basement-index {
  position: fixed;
  left: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: grid;
  gap: .55rem;
  padding: .7rem .45rem;
  background: rgba(8,9,13,.58);
  border: 1px solid rgba(215,227,234,.26);
  box-shadow: inset 0 0 18px rgba(0,183,255,.14), 0 0 30px rgba(255,42,138,.11);
  backdrop-filter: blur(12px);
}

.rail { position: absolute; left: 50%; top: -11vh; bottom: -11vh; width: 2px; background: linear-gradient(var(--blue), var(--coin), var(--magenta)); opacity: .55; }
.rail span { position: absolute; width: 12px; height: 12px; border: 1px solid var(--chrome); border-radius: 50%; left: -5px; top: calc(var(--floor) * 3.45rem + 1.15rem); background: var(--magenta); box-shadow: 0 0 18px var(--magenta); transition: top .55s ease; }

.floor-button {
  position: relative;
  width: 3.15rem;
  height: 3rem;
  border: 1px solid rgba(215,227,234,.42);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 20%, #fff, var(--chrome) 17%, #5a6571 41%, #111722 72%);
  color: var(--asphalt);
  font-family: "Bebas Neue", Impact, Haettenschweiler, "Arial Narrow", sans-serif;
  letter-spacing: .08em;
  cursor: pointer;
  box-shadow: inset -8px -10px 14px rgba(0,0,0,.55), 0 0 0 rgba(0,183,255,0);
  transition: transform .2s ease, box-shadow .35s ease;
}

.floor-button i { position: absolute; inset: .45rem; border-radius: inherit; border: 1px solid rgba(255,255,255,.25); }
.floor-button.active { transform: translateX(.42rem) scale(1.05); box-shadow: inset -8px -10px 14px rgba(0,0,0,.55), 0 0 24px var(--blue), 0 0 42px rgba(255,42,138,.35); }
.floor-button.last { font-size: .8rem; }

.floor-readout, .bid-strip {
  position: fixed;
  z-index: 25;
  font-family: "Space Grotesk", ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
  letter-spacing: .12em;
  border: 1px solid rgba(215,227,234,.25);
  background: rgba(8,9,13,.72);
  backdrop-filter: blur(10px);
}

.floor-readout { top: 1.2rem; right: 1.2rem; padding: .85rem 1.1rem; display: grid; gap: .22rem; }
.floor-readout span { color: var(--blue); font-size: .72rem; }
.floor-readout strong { color: var(--ivory); font-size: .92rem; }

.bid-strip { right: 1.2rem; bottom: 1.2rem; padding: .8rem 1rem; }
.bid-strip span { display: block; color: var(--coin); font-size: .64rem; }
.bid-strip b { color: var(--magenta); font-size: 1.2rem; text-shadow: 0 0 16px var(--magenta); }
.font-token { position: fixed; left: -200vw; top: -200vh; }

.chamber {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: 7rem 7vw 5rem 8rem;
  isolation: isolate;
}

.chamber::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(120deg, rgba(255,42,138,.08), transparent 22%, rgba(0,183,255,.1) 61%, transparent),
    radial-gradient(circle at 75% 20%, rgba(109,16,40,.5), transparent 28%),
    var(--asphalt);
}

.chamber::after {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  background: repeating-linear-gradient(102deg, transparent 0 58px, rgba(215,227,234,.035) 59px 61px), linear-gradient(transparent, rgba(0,0,0,.55));
  transform: translateY(calc(var(--floor) * -2rem));
}

.street { display: grid; align-items: center; }
.street-sign { width: min(72vw, 950px); transform: skewY(-5deg) translateX(7vw); padding: 2rem 2.4rem; background: linear-gradient(100deg, rgba(215,227,234,.08), rgba(215,227,234,.28) 27%, rgba(0,183,255,.1) 42%, rgba(255,42,138,.16) 58%, rgba(215,227,234,.05)); border: 1px solid rgba(215,227,234,.34); box-shadow: inset 0 0 45px rgba(215,227,234,.11), 0 28px 80px rgba(0,0,0,.7); }
.street-sign .jp { font-family: "Noto Sans JP", system-ui, sans-serif; color: var(--magenta); letter-spacing: .4em; font-size: .8rem; }
h1 { margin: 0; font-family: "Bebas Neue", Impact, Haettenschweiler, "Arial Narrow", sans-serif; font-size: clamp(5rem, 17vw, 16rem); line-height: .78; letter-spacing: .04em; color: transparent; background: linear-gradient(180deg, #fff, var(--chrome) 18%, #59606d 34%, var(--blue) 42%, #fefefe 50%, var(--magenta) 58%, #202631 76%, var(--chrome)); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 18px rgba(0,183,255,.26)); }
.street-sign p, .rail-note p, .case-copy p, .auction-sheet p, .closing-line { font-family: "Cormorant Garamond", Georgia, serif; color: var(--ivory); font-size: clamp(1.15rem, 2.2vw, 2rem); }
.puddle { position: absolute; left: 20vw; bottom: 8vh; width: 58vw; height: 16vh; border-radius: 50%; background: radial-gradient(ellipse, rgba(215,227,234,.24), rgba(0,183,255,.12) 35%, rgba(8,9,13,.05) 70%); transform: rotate(-3deg); filter: blur(.2px); }
.puddle span { display: block; text-align: center; transform: scaleY(-1); font-family: "Bebas Neue", Impact, sans-serif; font-size: clamp(3rem, 10vw, 8rem); letter-spacing: .07em; color: rgba(215,227,234,.42); }
.elevator-call { position: absolute; right: 15vw; top: 21vh; width: 5.2rem; height: 5.2rem; border-radius: 50%; border: 1px solid var(--chrome); background: radial-gradient(circle at 34% 22%, #fff, var(--blue) 22%, #1b3650 48%, #07080c 75%); cursor: pointer; box-shadow: 0 0 34px rgba(0,183,255,.45); animation: blink var(--pulse) ease-in-out infinite; }
.elevator-call i { position: absolute; inset: 1.1rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); }
.elevator-call span { font-family: "Noto Sans JP", sans-serif; color: var(--ivory); }
.coin-slot { position: absolute; right: 8vw; bottom: 16vh; color: var(--coin); font-family: "Space Grotesk", monospace; letter-spacing: .16em; border-top: 2px solid var(--coin); padding-top: .6rem; }
@keyframes blink { 50% { box-shadow: 0 0 60px var(--magenta); filter: hue-rotate(80deg); } }

.escalator { perspective: 900px; }
.tunnel-cut { position: absolute; inset: 0; background: linear-gradient(135deg, transparent 0 30%, rgba(109,16,40,.72) 31% 48%, transparent 49%), linear-gradient(45deg, transparent 0 35%, rgba(0,183,255,.12) 36% 38%, transparent 39%); clip-path: polygon(18% 0, 100% 0, 73% 100%, 0 100%); }
.escalator-rail { position: absolute; left: 18vw; top: 11vh; bottom: 8vh; width: 18vw; transform: rotate(21deg) skewX(-15deg); border-left: 10px solid rgba(215,227,234,.45); border-right: 2px solid var(--blue); display: flex; flex-direction: column; justify-content: space-around; color: var(--magenta); font-family: "Space Grotesk", monospace; text-transform: uppercase; }
.escalator-rail span { background: rgba(8,9,13,.7); padding: .3rem .6rem; }
.rail-note { position: absolute; right: 11vw; top: 22vh; width: min(420px, 42vw); transform: rotate(-4deg); }
.rail-note h2, .case-copy h2, .storage-door h2 { font-family: "Bebas Neue", Impact, sans-serif; font-size: clamp(7rem, 14vw, 13rem); margin: 0; color: var(--chrome); text-shadow: 0 0 22px var(--blue); }
.receipt-curl { position: absolute; right: 20vw; bottom: 8vh; width: 16rem; min-height: 12rem; background: var(--ivory); color: var(--asphalt); padding: 1.1rem; transform: rotate(8deg); border-radius: 2rem 2rem .25rem .25rem; box-shadow: inset 0 0 25px rgba(140,122,69,.35); font-family: "Space Grotesk", monospace; }
.receipt-curl b { font-size: 2.2rem; color: var(--velvet); }
.receipt-curl em { display: block; font-family: "Cormorant Garamond", serif; margin-top: 1rem; }
.arrow-well { position: absolute; left: 55vw; bottom: 17vh; display: grid; gap: .55rem; }
.arrow-well span { width: 3rem; height: 3rem; border-right: 3px solid var(--blue); border-bottom: 3px solid var(--blue); transform: rotate(45deg); animation: arrow 1.4s ease-in-out infinite; }
.arrow-well span:nth-child(2) { animation-delay: .2s; } .arrow-well span:nth-child(3) { animation-delay: .4s; }
@keyframes arrow { 50% { opacity: .25; transform: translateY(.7rem) rotate(45deg); } }

.cases { display: grid; place-items: center; }
.case-copy { position: absolute; left: 10vw; top: 13vh; width: min(390px, 38vw); z-index: 2; }
.case-copy h2 { font-size: clamp(4rem, 9vw, 9rem); color: transparent; -webkit-text-stroke: 1px var(--chrome); text-shadow: 0 0 20px var(--magenta); }
.acrylic-case { position: relative; width: min(42vw, 520px); height: 52vh; border: 1px solid rgba(215,227,234,.55); background: linear-gradient(125deg, rgba(215,227,234,.2), rgba(0,183,255,.06) 36%, rgba(255,42,138,.1) 55%, rgba(215,227,234,.06)); box-shadow: inset 0 0 60px rgba(215,227,234,.16), 0 30px 90px rgba(0,0,0,.65); transform: rotateX(8deg) rotateY(-18deg) rotateZ(3deg); transition: transform .45s ease, filter .35s ease; }
.acrylic-case:hover, .auction-sheet:hover { filter: contrast(1.18) brightness(1.12); }
.cube-edge { position: absolute; inset: 1rem; border: 1px solid rgba(0,183,255,.55); transform: translate(1.4rem, -1.4rem); }
.capsule { position: absolute; left: 33%; top: 30%; width: 12rem; height: 12rem; border-radius: 50%; background: linear-gradient(90deg, var(--magenta) 0 50%, var(--chrome) 50%); box-shadow: inset -16px -14px 25px rgba(0,0,0,.35), 0 0 34px rgba(255,42,138,.35); }
.tag { position: absolute; right: -2rem; top: 2rem; background: var(--ivory); color: var(--asphalt); padding: .8rem 1rem; font-family: "Space Grotesk", monospace; transform: rotate(8deg); box-shadow: 0 0 0 4px rgba(140,122,69,.4); }
.laser-dot { position: absolute; width: .7rem; height: .7rem; border-radius: 50%; background: var(--magenta); box-shadow: 0 0 20px var(--magenta); animation: laser 3s linear infinite; }
@keyframes laser { 0% { left: 12%; top: 18%; } 50% { left: 78%; top: 60%; } 100% { left: 12%; top: 18%; } }
.paddle { position: absolute; right: 12vw; bottom: 10vh; width: 9rem; height: 15rem; border-radius: 5rem 5rem 2rem 2rem; background: radial-gradient(circle at 28% 18%, #fff, var(--chrome) 15%, #76818b 37%, var(--velvet) 70%); transform: rotate(17deg); display: grid; place-items: center; font-family: "Space Grotesk", monospace; color: var(--asphalt); box-shadow: 0 0 36px rgba(215,227,234,.28); }
.paddle::after { content: ""; position: absolute; bottom: -5rem; width: 2.2rem; height: 7rem; border-radius: 1rem; background: linear-gradient(var(--chrome), var(--velvet)); }
.price-ghost { position: absolute; right: 25vw; top: 30vh; color: rgba(0,183,255,.46); font-family: "Space Grotesk", monospace; font-size: 4rem; animation: ghost 2.7s ease-in-out infinite; }
@keyframes ghost { 50% { opacity: .08; transform: translateY(-1rem) skewX(-8deg); } }

.archive { display: grid; grid-template-columns: .9fr 1.1fr; gap: 5vw; align-items: center; }
.storage-door { min-height: 62vh; border: 2px solid rgba(215,227,234,.28); background: linear-gradient(90deg, rgba(109,16,40,.75), rgba(8,9,13,.92)); padding: 3rem; position: relative; box-shadow: inset 0 0 70px rgba(0,0,0,.75); }
.door-light { position: absolute; right: 2rem; top: 2rem; width: 1.2rem; height: 1.2rem; background: var(--magenta); border-radius: 50%; box-shadow: 0 0 26px var(--magenta); }
.storage-door p { color: var(--coin); font-family: "Noto Sans JP", system-ui, sans-serif; letter-spacing: .24em; }
.auction-sheet { position: relative; padding: 2rem; background: rgba(243,230,207,.9); color: var(--asphalt); max-width: 590px; transform: rotate(-3deg); box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 0 28px rgba(140,122,69,.28); }
.auction-sheet small { font-family: "Noto Sans JP", sans-serif; color: var(--velvet); letter-spacing: .15em; }
.auction-sheet h3 { font-family: "Bebas Neue", Impact, sans-serif; font-size: clamp(3rem, 6vw, 6rem); line-height: .86; margin: .5rem 0; }
.auction-sheet p { color: var(--asphalt); }
.seal { position: absolute; right: -2.2rem; bottom: -2.2rem; width: 7rem; height: 7rem; border-radius: 50%; background: var(--coin); color: var(--ivory); display: grid; place-items: center; text-align: center; font-family: "Space Grotesk", monospace; font-size: .78rem; box-shadow: inset -10px -10px 15px rgba(0,0,0,.25); }
.map-lines { position: absolute; inset: auto 8vw 12vh auto; width: 30vw; height: 18vh; }
.map-lines i { position: absolute; height: 2px; background: var(--blue); box-shadow: 0 0 14px var(--blue); transform-origin: left; }
.map-lines i:nth-child(1){ width: 70%; transform: rotate(-12deg); top: 20%; } .map-lines i:nth-child(2){ width: 45%; transform: rotate(38deg); top: 45%; left: 28%; background: var(--magenta); } .map-lines i:nth-child(3){ width: 60%; transform: rotate(8deg); top: 75%; left: 10%; } .map-lines i:nth-child(4){ width: 35%; transform: rotate(-58deg); top: 40%; left: 63%; background: var(--coin); }
.gavel-shadow { position: absolute; left: 12vw; bottom: 7vh; width: 24rem; height: 5rem; background: rgba(0,0,0,.6); filter: blur(8px); transform: rotate(-15deg); }

.final { display: grid; place-items: center; text-align: center; background: radial-gradient(circle at center, rgba(109,16,40,.8), var(--asphalt) 62%); }
.pit { position: relative; width: min(72vw, 720px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; }
.pit-ring { position: absolute; inset: 8%; border-radius: 50%; border: 2px solid rgba(215,227,234,.4); background: radial-gradient(circle, rgba(8,9,13,.95) 0 38%, rgba(0,183,255,.12) 39% 41%, rgba(109,16,40,.82) 42% 68%, transparent 69%); box-shadow: inset 0 0 80px rgba(0,0,0,.9), 0 0 80px rgba(255,42,138,.18); }
.current-tag { position: relative; z-index: 2; background: var(--ivory); color: var(--asphalt); padding: 1.3rem 1.6rem; transform: rotate(-2deg); box-shadow: 0 0 34px rgba(243,230,207,.28); animation: tremble .22s linear infinite; }
.current-tag span { display: block; font-family: "Bebas Neue", Impact, sans-serif; font-size: 3rem; color: var(--velvet); }
.current-tag b { font-family: "Space Grotesk", monospace; color: var(--magenta); }
@keyframes tremble { 50% { transform: translate(.08rem, -.05rem) rotate(1deg); } }
.tick { position: absolute; inset: 0; transform: rotate(var(--r)); animation: clock 5s steps(6) infinite; }
.tick span { position: absolute; top: 0; left: 50%; width: 5.4rem; height: 9rem; border-radius: 4rem 4rem 1.2rem 1.2rem; background: linear-gradient(var(--chrome), var(--velvet)); transform: translateX(-50%); box-shadow: 0 0 20px rgba(215,227,234,.2); }
.tick-1 { --r: 0deg; } .tick-2 { --r: 60deg; } .tick-3 { --r: 120deg; } .tick-4 { --r: 180deg; } .tick-5 { --r: 240deg; } .tick-6 { --r: 300deg; }
@keyframes clock { to { rotate: 60deg; } }
.closing-line { max-width: 780px; margin-top: -8vh; font-size: clamp(1.8rem, 4vw, 4rem); color: var(--ivory); text-shadow: 0 0 24px rgba(255,42,138,.35); }

.floor-flash .chamber.active .acrylic-case, .floor-flash .chamber.active .auction-sheet, .floor-flash .chamber.active .street-sign { animation: catchlight .7s ease; }
@keyframes catchlight { 0% { filter: brightness(1); } 45% { filter: brightness(1.55) hue-rotate(15deg); } 100% { filter: brightness(1); } }

@media (max-width: 760px) {
  .chamber { padding-left: 5rem; padding-right: 1.1rem; }
  .floor-readout { left: 5rem; right: .8rem; top: .8rem; }
  .bid-strip { right: .8rem; }
  .street-sign { width: 82vw; transform: skewY(-5deg); }
  .rail-note, .case-copy { position: relative; right: auto; left: auto; top: auto; width: auto; }
  .acrylic-case { width: 76vw; }
  .archive { grid-template-columns: 1fr; }
  .pit { width: 84vw; }
}