/* Design tokens, reset and the fixed-size scaled stage.
   All scene coordinates are in a 1600 × 1000 design space; js/stage.js scales it to fit. */

:root {
  --stage-w: 1600px;
  --stage-h: 1000px;

  --wall-1: #24202e;
  --wall-2: #15131c;
  --wood-1: #7a4e2d;
  --wood-2: #5a361d;
  --wood-3: #3b2312;
  --lamp: #ffcf8a;

  --neon-cyan: #3ff3ff;
  --neon-magenta: #ff3fd0;
  --neon-red: #ff3a4e;
  --neon-green: #45ff8a;
  --neon-amber: #ffb02e;
  --neon-blue: #4f8dff;
  --neon-violet: #b36bff;
  --neon-gold: #ffd84a;

  --holo: #6ef3ff;
  --holo-dim: rgba(110, 243, 255, .55);
  --holo-bg: rgba(6, 24, 38, .82);

  --font-ui: 'Rajdhani', system-ui, sans-serif;
  --font-holo: 'Orbitron', 'Rajdhani', sans-serif;
  --font-hand: 'Caveat', 'Comic Sans MS', cursive;
  --font-type: 'Special Elite', 'Courier New', monospace;
  --font-neon: 'Tilt Neon', 'Rajdhani', sans-serif;

  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--wall-2);
  color: #e8e6ef;
  font-family: var(--font-ui);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a { color: inherit; }

:focus-visible { outline: 2px solid var(--holo); outline-offset: 4px; }

/* The viewport fills the screen with the wall; the stage is centered and scaled inside it. */
#viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 30%, var(--wall-1), var(--wall-2) 70%);
}

#viewport.is-panning { overflow-x: auto; overflow-y: hidden; }
/* While panning, the wall/desk bleed must not extend the scrollable width. */
#viewport.is-panning #stage { overflow-x: clip; }

/* With a mouse the pointer pans the view (js/stage.js), so the scrollbar is just clutter. */
@media (hover: hover) and (pointer: fine) {
  #viewport.is-panning { scrollbar-width: none; }
  #viewport.is-panning::-webkit-scrollbar { display: none; }
}

.pan-hint {
  position: fixed;
  left: 50%;
  bottom: 64px;
  z-index: 900;
  translate: -50% 0;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--holo);
  background: rgba(8, 10, 20, .7);
  border: 1px solid var(--holo-dim);
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
  animation: pan-hint 2.4s ease-in-out infinite;
  transition: opacity .4s;
}
.pan-hint.is-gone { opacity: 0; }
@keyframes pan-hint { 50% { translate: calc(-50% + 10px) 0; } }

#stage {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--stage-w);
  height: var(--stage-h);
  transform-origin: 0 0;
  transform: translate(var(--stage-x, 0px), var(--stage-y, 0px)) scale(var(--stage-scale, 1));
  user-select: none; /* clicking around the scene shouldn't highlight its text */
}

/* Every scene layer is absolutely positioned in stage coordinates. */
#stage > * { position: absolute; }

.noscript {
  /* sits over the (empty) scene when JavaScript is off */
  position: fixed;
  inset: 0;
  z-index: 2000;
  padding: 15vh max(16px, calc(50vw - 280px)) 0;
  background: var(--wall-2);
  font-size: 18px;
  line-height: 1.5;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}