:root {
  --chrono-black: #09070D;
  --brass-hour: #D6A84F;
  --paradox-magenta: #FF3DD8;
  --future-cyan: #2EF6FF;
  --calendar-bone: #F2E5C4;
  --reset-red: #E7382F;
  --aged-teal: #247C7A;
  --display: "Bungee Shade", Impact, fantasy;
  --pixel: "Press Start 2P", "Courier New", monospace;
  --body: Syne, Inter, system-ui, sans-serif;
  --antique: "Cormorant Garamond", Cormorant, Georgia, serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--chrono-black); }

body {
  margin: 0;
  color: var(--calendar-bone);
  font-family: var(--body);
  background:
    radial-gradient(circle at 20% 15%, rgba(46, 246, 255, .14), transparent 28rem),
    radial-gradient(circle at 85% 40%, rgba(255, 61, 216, .13), transparent 24rem),
    linear-gradient(90deg, rgba(214, 168, 79, .04) 1px, transparent 1px),
    var(--chrono-black);
  background-size: auto, auto, 42px 42px, auto;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(242, 229, 196, .035) 0 1px, transparent 1px 5px);
  mix-blend-mode: screen;
  z-index: 30;
}

.crt-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 31;
  opacity: .24;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(242, 229, 196, .08) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 80%, rgba(46, 246, 255, .08) 0 1px, transparent 1px);
  background-size: 9px 11px, 13px 17px;
  animation: staticJump .42s steps(2) infinite;
}

.chronology-cabinet { position: relative; }

.room {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  padding: 7rem clamp(1.25rem, 5vw, 6rem);
  border-top: 8px double rgba(214, 168, 79, .55);
  overflow: hidden;
}

.room::before {
  content: attr(data-era);
  position: absolute;
  inset: 1.1rem auto auto 1.1rem;
  color: rgba(214, 168, 79, .16);
  font-family: var(--display);
  font-size: clamp(3rem, 13vw, 11rem);
  line-height: .75;
  transform: rotate(-5deg);
  pointer-events: none;
}

.room::after {
  content: "";
  position: absolute;
  inset: 1.5rem;
  border: 2px solid rgba(214, 168, 79, .38);
  box-shadow: inset 0 0 0 7px rgba(36, 124, 122, .18), inset 0 0 60px rgba(0, 0, 0, .8);
  pointer-events: none;
}

.time-dial {
  position: fixed;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: grid;
  gap: .7rem;
  padding: .8rem .55rem;
  border: 2px solid var(--brass-hour);
  border-radius: 999px;
  background: rgba(9, 7, 13, .72);
  box-shadow: 0 0 20px rgba(46, 246, 255, .15);
}

.time-dial a {
  width: 3.1rem;
  height: 3.1rem;
  display: grid;
  place-items: center;
  color: var(--calendar-bone);
  text-decoration: none;
  font: .48rem/1 var(--pixel);
  border: 1px dashed rgba(242, 229, 196, .35);
  border-radius: 50%;
  position: relative;
  transition: transform .18s steps(2), color .18s, border-color .18s;
}

.time-dial a span {
  position: absolute;
  width: .36rem;
  height: .36rem;
  top: .34rem;
  border-radius: 50%;
  background: var(--aged-teal);
}

.time-dial a.active { color: var(--future-cyan); border-color: var(--future-cyan); transform: rotate(8deg) scale(1.08); }
.time-dial a.active span { background: var(--paradox-magenta); box-shadow: 0 0 12px var(--paradox-magenta); }

.timeline-rail {
  position: absolute;
  left: clamp(1rem, 5vw, 5rem);
  top: 100vh;
  width: 9rem;
  height: 600vh;
  overflow: visible;
  z-index: 4;
  pointer-events: none;
}

.timeline-rail path {
  fill: none;
  stroke: var(--brass-hour);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 18 14;
  filter: drop-shadow(0 0 7px rgba(214, 168, 79, .7));
}

.timeline-rail .rail-glitch { stroke: var(--paradox-magenta); stroke-width: 3; stroke-dasharray: 5 9; opacity: .86; }

.cabinet-bezel {
  width: min(1120px, 92vw);
  min-height: 78vh;
  position: relative;
  display: grid;
  place-items: center;
  border: clamp(.8rem, 2vw, 1.4rem) solid var(--brass-hour);
  outline: .45rem solid rgba(36, 124, 122, .7);
  background:
    radial-gradient(circle, transparent 0 42%, rgba(46, 246, 255, .14) 43% 44%, transparent 45%),
    linear-gradient(135deg, rgba(242, 229, 196, .07), transparent 35%, rgba(255, 61, 216, .08)),
    #120d16;
  box-shadow: 0 0 0 1rem #050407, 0 0 80px rgba(46, 246, 255, .2), inset 0 0 90px #000;
}

.clock-orbit {
  position: absolute;
  width: min(72vw, 650px);
  aspect-ratio: 1;
  border: 3px dotted rgba(242, 229, 196, .22);
  border-radius: 50%;
  animation: tickSpin 12s steps(60) infinite;
}

.tick-ring { position: absolute; inset: 12%; border: 2px dashed rgba(214, 168, 79, .45); border-radius: 50%; }
.hand { position: absolute; left: 50%; top: 50%; width: 42%; height: 4px; transform-origin: 0 50%; background: var(--brass-hour); box-shadow: 0 0 14px var(--brass-hour); }
.hand-hour { width: 25%; animation: handSweep 34s steps(12) infinite; }
.hand-minute { background: var(--future-cyan); animation: handSweep 11s steps(60) infinite; }
.hand-second { height: 2px; background: var(--reset-red); animation: handSweep 3.7s steps(60) infinite; }

.marquee { position: relative; text-align: center; max-width: 980px; z-index: 2; }
.title-ghost { position: absolute; inset: -2rem 0 auto; font-family: var(--display); font-size: clamp(4rem, 15vw, 13rem); color: rgba(255, 61, 216, .13); transform: translate(-1rem, -.8rem) skew(-7deg); }
h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(4.5rem, 17vw, 13.5rem);
  line-height: .74;
  letter-spacing: -.07em;
  color: var(--calendar-bone);
  text-shadow: .08em .06em 0 var(--aged-teal), -.04em -.04em 0 var(--paradox-magenta), 0 0 30px rgba(46, 246, 255, .42);
}
.time-dot { color: var(--future-cyan); text-shadow: 0 0 22px var(--future-cyan); display: inline-block; animation: dotJump 4s steps(1) infinite; }
.cabinet-subtitle { max-width: 680px; margin: 2rem auto 0; font-size: clamp(1rem, 2vw, 1.45rem); line-height: 1.45; color: var(--calendar-bone); }

.insert-year {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(#E7382F, #70120f);
  color: var(--calendar-bone);
  border: 4px solid var(--calendar-bone);
  padding: 1rem 2rem;
  font: .78rem/1 var(--pixel);
  box-shadow: 0 0 18px var(--reset-red), inset 0 0 18px rgba(0,0,0,.55);
  animation: blinkSlot 1s steps(2) infinite;
  cursor: pointer;
}

.coin-return { position: absolute; right: 1.5rem; bottom: 1.5rem; font: .56rem/1.2 var(--pixel); color: var(--brass-hour); writing-mode: vertical-rl; }

.room-label {
  position: absolute;
  top: 2rem;
  right: clamp(2rem, 8vw, 8rem);
  z-index: 5;
  padding: .7rem 1rem;
  border: 2px solid var(--brass-hour);
  background: rgba(9, 7, 13, .86);
  font-family: var(--display);
  font-size: clamp(1.25rem, 3vw, 2.8rem);
  color: var(--calendar-bone);
  transform: rotate(2deg);
  box-shadow: .35rem .35rem 0 var(--aged-teal);
}

h2 { margin: .5rem 0 1rem; font-family: var(--display); font-size: clamp(2.5rem, 7vw, 6.8rem); line-height: .86; color: var(--calendar-bone); text-shadow: .04em .04em 0 var(--brass-hour); }
p { font-size: clamp(1rem, 1.6vw, 1.25rem); line-height: 1.55; }

.board-surface, .artifact-stack, .vault-copy, .reset-console, .countdown-column {
  position: relative;
  z-index: 6;
  width: min(720px, 82vw);
  padding: clamp(1.4rem, 4vw, 3rem);
  background:
    linear-gradient(90deg, rgba(9,7,13,.04), rgba(214,168,79,.08)),
    var(--calendar-bone);
  color: var(--chrono-black);
  border: 4px solid var(--brass-hour);
  box-shadow: 1rem 1rem 0 rgba(36,124,122,.7), 0 0 35px rgba(0,0,0,.5);
}

.tilted-left { transform: rotate(-4deg) translateX(5vw); }
.score-readout, .stamp, .achievement, .timer { font-family: var(--pixel); }
.score-readout { color: var(--reset-red); font-size: .64rem; }
.bone-card { margin-top: 1.5rem; padding: 1rem; border: 2px dashed var(--reset-red); font-family: var(--antique); font-size: 1.35rem; background: rgba(214, 168, 79, .13); }
.bone-card span { display: block; font-family: var(--pixel); font-size: .6rem; color: var(--aged-teal); margin-bottom: .5rem; }
.date-wheel { position: absolute; right: -3.2rem; top: 2rem; display: grid; gap: .3rem; padding: .5rem; background: var(--chrono-black); border: 2px solid var(--brass-hour); transform: rotate(8deg); overflow: hidden; }
.date-wheel span { display: block; color: var(--future-cyan); font: .72rem var(--pixel); padding: .55rem; border-bottom: 1px solid rgba(242,229,196,.22); animation: dateFlip 3s steps(3) infinite; }

.chrono-wheel {
  position: absolute;
  right: 6vw;
  bottom: 8vh;
  width: min(42vw, 430px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 9px double var(--brass-hour);
  background: conic-gradient(from 30deg, rgba(46,246,255,.35), rgba(255,61,216,.22), rgba(214,168,79,.4), rgba(36,124,122,.5), rgba(46,246,255,.35));
  z-index: 4;
  animation: wheelContradict 18s steps(12) infinite;
}
.chrono-wheel::before, .chrono-wheel::after { content:""; position:absolute; inset: 12%; border-radius:50%; border:2px dashed var(--calendar-bone); }
.chrono-wheel::after { inset: 32%; border-color: var(--paradox-magenta); box-shadow: 0 0 25px var(--paradox-magenta); }
.wheel-label { position:absolute; font: .68rem var(--pixel); background: var(--chrono-black); padding:.4rem; color: var(--future-cyan); }
.wheel-label.top { top: -1rem; left: 43%; } .wheel-label.right { right:-1rem; top:45%; } .wheel-label.bottom { bottom:-1rem; left:40%; } .wheel-label.left { left:-1rem; top:45%; }
.wheel-core { position:absolute; inset: 45%; border-radius:50%; background: var(--future-cyan); box-shadow:0 0 26px var(--future-cyan); }

.loop-room { grid-template-columns: 1fr 1fr; gap: 2rem; background: radial-gradient(circle at 30% 45%, rgba(255,61,216,.18), transparent 28rem), var(--chrono-black); }
.arena-ring { position:relative; z-index:5; width:min(520px, 78vw); aspect-ratio:1; border:7px dotted var(--future-cyan); border-radius:50%; box-shadow: inset 0 0 50px rgba(46,246,255,.17), 0 0 35px rgba(46,246,255,.2); animation: arenaPulse 2.8s steps(4) infinite; }
.token { position:absolute; width:3.4rem; height:3.4rem; border-radius:50% 50% 45% 45%; background:var(--future-cyan); box-shadow:0 0 20px var(--future-cyan); offset-path: circle(42% at 50% 50%); animation: tokenLap 5.5s linear infinite; }
.token-live { offset-distance: 10%; }
.token-ghost { opacity:.24; background: var(--calendar-bone); box-shadow:none; }
.token-ghost.one { offset-distance: 30%; animation-delay: -.9s; } .token-ghost.two { offset-distance: 55%; animation-delay: -1.8s; } .token-ghost.three { offset-distance: 78%; animation-delay: -2.7s; }
.stamp { display:inline-block; color:var(--reset-red); border:4px solid var(--reset-red); padding:.7rem; transform:rotate(-9deg); font-size:.7rem; }
.receipt { margin-top:1.2rem; padding:1rem; color:var(--calendar-bone); background:var(--chrono-black); font-family:var(--pixel); font-size:.62rem; line-height:1.8; }

.paradox-room { background: radial-gradient(circle at 60% 50%, rgba(36,124,122,.36), transparent 30rem), var(--chrono-black); }
.paradox-table { position:relative; z-index:5; width:min(850px, 86vw); min-height:520px; border-radius: 48% 52% 45% 55%; border:10px solid var(--brass-hour); background:linear-gradient(145deg, #174947, #0d1b1c); box-shadow: inset 0 0 80px #000, 0 0 35px rgba(214,168,79,.32); }
.move-card { position:absolute; width:min(390px, 65vw); min-height:190px; padding:1.3rem; background:var(--calendar-bone); color:var(--chrono-black); border:3px solid var(--brass-hour); box-shadow:.7rem .7rem 0 rgba(255,61,216,.5); }
.move-card b { display:block; font-family:var(--pixel); color:var(--reset-red); margin-bottom:1rem; }
.card-a { left:9%; top:18%; transform:rotate(-8deg); } .card-b { right:8%; top:28%; transform:rotate(7deg); }
.paradox-sticker { position:absolute; left:50%; top:52%; transform:translate(-50%,-50%) rotate(-14deg); z-index:3; color:var(--calendar-bone); background:var(--reset-red); border:3px solid var(--calendar-bone); padding:1rem; font: .72rem var(--pixel); box-shadow:0 0 20px var(--reset-red); }
.triple-clock { position:absolute; left:50%; bottom:2rem; transform:translateX(-50%); display:flex; gap:1rem; }
.triple-clock span { width:4rem; height:2.6rem; border-radius:1.6rem 1.6rem .4rem .4rem; background:var(--brass-hour); border:3px solid var(--chrono-black); position:relative; }
.triple-clock span::after { content:""; position:absolute; left:48%; top:48%; width:38%; height:2px; background:var(--chrono-black); transform-origin:left; animation: handSweep 2.8s steps(8) infinite; }
.archive-note { position:absolute; z-index:6; right:7vw; bottom:8vh; max-width:360px; font:1.4rem/1.25 var(--antique); color:var(--brass-hour); background:rgba(9,7,13,.8); padding:1rem; border-left:5px solid var(--paradox-magenta); }

.corridor-room { background: linear-gradient(90deg, rgba(231,56,47,.13), transparent 25%, rgba(46,246,255,.1)), var(--chrono-black); }
.countdown-column { width:min(760px, 78vw); transform:perspective(900px) rotateY(-10deg); transform-origin:left center; }
.timer { color:var(--reset-red); font-size:clamp(2.6rem, 9vw, 7rem); text-shadow:0 0 18px var(--reset-red); animation: dangerBlink .8s steps(2) infinite; }
.corridor-text { animation: textCompress 8s steps(8) infinite; transform-origin:left; }
.hourglass-dice { position:absolute; z-index:5; right:13vw; bottom:16vh; width:9rem; height:9rem; border:5px solid var(--future-cyan); transform:rotate(12deg); box-shadow:0 0 30px var(--future-cyan); }
.hourglass-dice::before, .hourglass-dice::after { content:""; position:absolute; left:1.2rem; right:1.2rem; border-left:3.2rem solid transparent; border-right:3.2rem solid transparent; }
.hourglass-dice::before { top:1rem; border-top:3.2rem solid rgba(242,229,196,.82); } .hourglass-dice::after { bottom:1rem; border-bottom:3.2rem solid rgba(214,168,79,.8); }
.hourglass-dice span { position:absolute; width:.7rem; height:.7rem; border-radius:50%; background:var(--paradox-magenta); box-shadow:0 0 12px var(--paradox-magenta); }
.hourglass-dice span:nth-child(1){left:18%;top:18%;}.hourglass-dice span:nth-child(2){right:18%;top:18%;}.hourglass-dice span:nth-child(3){left:26%;bottom:20%;}.hourglass-dice span:nth-child(4){right:26%;bottom:20%;}

.vault-room { grid-template-columns: 1fr 1fr; gap:2rem; background: radial-gradient(circle at 45% 52%, rgba(46,246,255,.19), transparent 32rem), var(--chrono-black); }
.vault-door { position:relative; z-index:5; width:min(520px, 78vw); aspect-ratio:1; border:14px solid var(--aged-teal); border-radius:50%; background:radial-gradient(circle, rgba(46,246,255,.12), transparent 34%), #050407; box-shadow:inset 0 0 65px #000, 0 0 40px rgba(46,246,255,.3); }
.portal { position:absolute; inset:20%; border-radius:50%; border:7px double var(--future-cyan); background:conic-gradient(from 90deg, transparent, rgba(46,246,255,.6), rgba(255,61,216,.35), transparent); animation: tickSpin 9s linear infinite; }
.spoiler { position:absolute; padding:.6rem .8rem; background:var(--chrono-black); color:var(--future-cyan); border:1px solid var(--future-cyan); font:.6rem var(--pixel); box-shadow:0 0 15px rgba(46,246,255,.42); animation: spoilerLeak 4s steps(3) infinite; }
.fragment-a { left:-10%; top:24%; } .fragment-b { right:-9%; top:48%; animation-delay:-1s; } .fragment-c { left:23%; bottom:-5%; animation-delay:-2s; }

.reset-room { background: radial-gradient(circle at center, rgba(242,229,196,.08), transparent 25rem), var(--chrono-black); }
.reset-console { text-align:center; transform:rotate(2deg); }
.reset-lever { width:6rem; height:14rem; margin:0 auto 1rem; border:4px solid var(--brass-hour); background:var(--aged-teal); position:relative; border-radius:4rem 4rem 1rem 1rem; cursor:pointer; }
.reset-lever span { position:absolute; left:50%; top:.8rem; width:2rem; height:8rem; background:var(--reset-red); border:3px solid var(--calendar-bone); transform:translateX(-50%) rotate(-18deg); transform-origin:50% 90%; transition:transform .25s steps(3); }
.reset-lever.pulled span { transform:translateX(-50%) rotate(22deg); }
.achievement { display:inline-block; margin-top:1rem; color:var(--future-cyan); border:2px solid var(--future-cyan); padding:.75rem; font-size:.58rem; background:var(--chrono-black); }
.final-dot { position:absolute; width:2rem; height:2rem; border-radius:50%; background:var(--future-cyan); box-shadow:0 0 30px 12px rgba(46,246,255,.55); animation: finalPulse 2s ease-in-out infinite; }

.booted .timeline-rail path { animation: railDraw 3.2s steps(24) both; }
.insert-year.pressed { animation: none; transform: translateX(-50%) translateY(7px); box-shadow: inset 0 0 22px #000; }
.room.in-view .room-label { animation: labelStamp .32s steps(2); }

@keyframes staticJump { 50% { transform: translate(2px, -1px); } }
@keyframes tickSpin { to { transform: rotate(360deg); } }
@keyframes handSweep { to { transform: rotate(360deg); } }
@keyframes dotJump { 0%,100%{transform:translateY(0)} 25%{transform:translate(1.4rem,-.5rem)} 50%{transform:translate(-.8rem,.25rem)} 75%{transform:translate(.5rem,.9rem)} }
@keyframes blinkSlot { 50% { filter: brightness(1.8); color:#fff; } }
@keyframes dateFlip { 50% { transform: translateY(-.35rem); filter: blur(1px); } }
@keyframes wheelContradict { 50% { transform: rotate(-70deg) scale(1.03); filter:hue-rotate(70deg); } 100% { transform: rotate(360deg); } }
@keyframes arenaPulse { 50% { border-color: var(--paradox-magenta); transform: scale(.98); } }
@keyframes tokenLap { to { offset-distance: 110%; } }
@keyframes dangerBlink { 50% { color:var(--calendar-bone); text-shadow:none; } }
@keyframes textCompress { 65% { letter-spacing:-.06em; transform:scaleX(.62); } }
@keyframes spoilerLeak { 50% { transform: translateY(-1rem) rotate(2deg); opacity:.52; } }
@keyframes finalPulse { 50% { transform: scale(1.9); background:var(--paradox-magenta); } }
@keyframes railDraw { from { stroke-dashoffset: 900; opacity:.05; } to { stroke-dashoffset:0; opacity:1; } }
@keyframes labelStamp { 0% { transform: scale(1.4) rotate(-12deg); filter: blur(2px); } 100% { transform: rotate(2deg); filter:none; } }

@media (max-width: 900px) {
  .loop-room, .vault-room { grid-template-columns: 1fr; }
  .time-dial { right: .35rem; transform: translateY(-50%) scale(.75); transform-origin: right center; }
  .timeline-rail { left: -1.8rem; opacity:.55; }
  .chrono-wheel { position:relative; right:auto; bottom:auto; width:min(75vw, 360px); margin-top:2rem; }
  .tilted-left { transform: rotate(-2deg); }
  .room { padding-right: 3.7rem; }
  .date-wheel { right: .8rem; top: auto; bottom: -2.8rem; }
  .archive-note { position:relative; right:auto; bottom:auto; margin-top:1rem; }
}