/* Font */
@font-face {
  font-family: "Eurostile Extended";
  src: url("../Eurostile Extended Bold/Eurostile Extended Bold.ttf")
    format("truetype");
  font-weight: bold;
  font-style: normal;
}
html {
  filter: hue-rotate(0deg);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  /* Prevent pinch zoom on mobile */
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* CRT SNES-style pixel blend effect with burn-in ghosting */
/* True SNES resolution: 256x224 pixels = ~6px per pixel on 1920x1080 */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10006; /* CRT overlay on top of UI */
  background-image:
    /* Horizontal scanlines */ repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.3),
      rgba(0, 0, 0, 0.3) 2px,
      transparent 2px,
      transparent 12px
    ),
    /* Vertical scanlines */
      repeating-linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.3),
        rgba(0, 0, 0, 0.3) 2px,
        transparent 2px,
        transparent 12px
      ),
    /* Soft glow overlay for CRT blend effect */
      radial-gradient(
        circle at 20% 50%,
        rgba(255, 255, 255, 0.005),
        transparent 50%
      );
  background-size: 3.1495px 3.1495px, 3.1495px 3.1495px, 100% 100%;
  mix-blend-mode: multiply;
  opacity: 0.55;
  /* filter: invert(1); */
  backdrop-filter: blur(0.75px);
  box-shadow:
    /* Ghost layer 1 - slight offset */ inset 0.5px 0.5px 0
      rgba(0, 0, 0, 0.08),
    /* Ghost layer 2 - more offset */ inset 1px 1px 0 rgba(0, 0, 0, 0.04),
    /* Vignette effect */ inset 0 0 80px rgba(0, 0, 0, 0.15);
}

/* Mobile: denser CRT grid */
@media (max-width: 768px) {
  body::before {
    background-image:
      /* Horizontal scanlines */ repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.3),
        rgba(0, 0, 0, 0.3) 2px,
        transparent 2px,
        transparent 12px
      ),
      /* Vertical scanlines */
        repeating-linear-gradient(
          90deg,
          rgba(0, 0, 0, 0.3),
          rgba(0, 0, 0, 0.3) 2px,
          transparent 2px,
          transparent 12px
        ),
      /* Soft glow overlay for CRT blend effect */
        radial-gradient(
          circle at 20% 50%,
          rgba(255, 255, 255, 0.005),
          transparent 50%
        );
    background-size: 2.48px 2.48px, 2.48px 2.48px, 100% 100%;
  }

  /* Mobile: keep background black, no fade to dark blue */
  body.glow-active {
    animation: none !important;
    background-color: #000000 !important;
  }
}

/* Alternative: Stronger CRT phosphor glow (uncomment to use) */

@keyframes glowFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.93;
  }
}

@keyframes bgFadeIn {
  0% {
    background-color: #000000;
  }
  100% {
    background-color: #010313;
  }
}

body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10006; /* CRT overlay on top of UI */
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(0, 0, 0, 0.1) 100%
  );
  mix-blend-mode: screen;
  filter: blur(2.5px);
  will-change: opacity;
  opacity: 0;
}

body.glow-active::after {
  animation: glowFadeIn 18s ease-in forwards;
}

/* UI Glow Layer - white glow that sits above CRT grid to let UI luminosity shine through */
#ui-glow-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10010; /* Above CRT grid (10006) */
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.02) 50%,
    transparent 100%
  );
  mix-blend-mode: screen;
  opacity: 1;
}

/* Loading spinner container */
#loading-spinner-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  z-index: 10004;
  pointer-events: none;
  height: 50px;
  width: 50px;
}

#loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.spinner-ring {
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, 0.128);
  border-top: 3px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  animation: spinnerRotate 1s linear infinite;
}

.spinner-text {
  font-family: "Tiny5", monospace;
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.77);
  letter-spacing: 1px;
  text-align: center;
}

@keyframes spinnerRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Hide loading spinner when done */
#loading-spinner-container.hidden {
  display: none;
}

/* Coded by credit at bottom */
#coded-by-credit {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Tiny5", monospace;
  font-size: 11px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.77);
  text-align: center;
  letter-spacing: 1px;
  z-index: 10003;
  pointer-events: auto;
  opacity: 0.7;
  transition: opacity 0.0125s ease-out;
  /* cursor: pointer; */
  letter-spacing: 0.125px;
  line-height: 1.5;
}

#coded-by-credit:hover {
  z-index: 10005;
}

/* SORSARI in Pixelify Sans */
#sorsari-credit {
  font-family: "Pixelify Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* YEDGAR in Jacquard 12 */
#yedgar-credit {
  font-family: "Jacquard 12", serif;
  font-size: 16px;
  letter-spacing: 0.5px;
}

#hesh-credit {
  font-family: sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

#sorsari-credit a,
#yedgar-credit a,
#terrorhythm-credit a,
#hesh-credit a {
  color: #fff;
  letter-spacing: 0px;
  text-decoration: none;
  display: inline-block;
}

/* Keep the TERRORHYTHM credit on a single line */
#terrorhythm-credit {
  white-space: nowrap;
  display: inline-block;
}

#sorsari-credit a:hover,
#yedgar-credit a:hover,
#terrorhythm-credit a:hover,
#hesh-credit a:hover {
  font-weight: BOLD;
  animation: pulse 1s infinite;
  z-index: 10005;
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
    color: #fff;
    opacity: 0.7;
  }
  50% {
    transform: scale(1.03);
    color: #f1e5f9;
    opacity: 1;
  }
}

/* Fade out when song starts */
body.glow-active #coded-by-credit {
  opacity: 0;
}

/* Touch to start container */
#touch-to-start-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  z-index: 10003;
  pointer-events: none;
  visibility: hidden; /* Hidden until loading completes */
}

#touch-to-start-container:hover {
  opacity: 0.8;
  color: #f1e5f9;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
/* Show touch-to-start when loading is done */
#touch-to-start-container.visible {
  visibility: visible;
  cursor: pointer;
  pointer-events: auto;
}

/* Line 1: TOUCH TO START */
#touch-to-start-line1 {
  font-family: "Tiny5", monospace;
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.77);
  text-align: center;
  letter-spacing: 1px;
  opacity: 0;
  animation: touchToStartFade 0.25s forwards;
  animation-delay: 1s;
  height: 12px;
  display: flex;
  align-items: center;
}

/* Line 2: SOUND ON + speaker icon */
#touch-to-start-line2 {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  animation: touchToStartFade 0.25s forwards;
  animation-delay: 1s;
  height: 12px;
}

#touch-to-start-line2 span {
  font-family: "Tiny5", monospace;
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.77);
  letter-spacing: 1px;
}

/* Volume icon container */
#volume-icon {
  width: 14px;
  height: 14px;
  position: relative;
  opacity: 0.77;
}

/* Volume SVGs */
.volume-svg {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Volume animation: 1s speaker, 1s speaker with 1 arc, repeat (2s total) */
@keyframes speakerShow {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  50.1% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes oneArcShow {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  50.1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

.volume-speaker {
  animation: speakerShow 2s infinite;
  animation-delay: 1s;
}

.volume-one-arc {
  animation: oneArcShow 2s infinite;
  animation-delay: 1s;
}

/* Fade out when song starts */
body.glow-active #touch-to-start-container {
  animation: touchToStartFadeOut 3s ease-out forwards;
}

body.glow-active #touch-to-start-line1,
body.glow-active #touch-to-start-line2 {
  animation: none;
}

body.glow-active .volume-svg {
  animation: none;
}

/* Hide if song started before text appeared */
#touch-to-start.hidden {
  opacity: 0 !important;
  animation: none !important;
  pointer-events: none !important;
}

@keyframes touchToStartFade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.77;
  }
}

@keyframes touchToStartFadeOut {
  0% {
    opacity: 0.77;
  }
  100% {
    opacity: 0;
  }
}

/* Replay Button */
#replay-button {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  z-index: 10005;
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.1s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

#replay-button svg {
  width: 21px;
  height: 21px;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
  transition: filter 0.2s ease, transform 0.1s ease;
}

#replay-button:hover svg {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
  transform: scale(1.03);
}

#replay-button:active {
  transform: scale(0.95);
}

#replay-button.visible {
  opacity: 1;
  visibility: visible;
}
/* Alternative: Stronger pixelation effect (uncomment to use instead) */
/*
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0.2) 2px,
      transparent 2px,
      transparent 4px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0.2) 2px,
      transparent 2px,
      transparent 4px
    );
  background-size: 4px 4px;
  mix-blend-mode: overlay;
}
*/

/* Base styles */
body {
  margin: 0;
  overflow: hidden;
  font-family: monospace;
  cursor: auto;
  background-color: #000000;
}

/* Background fade-in animation when song starts */
body.glow-active {
  animation: bgFadeIn 12s ease-in forwards;
}

/* Prevent selection/dragging on visual layers (allow in debug UI) */
#stars-canvas,
#three-container,
#three-blur-wrapper,
#model-viewer,
.center-model-viewer,
.terror-model-viewer,
#bottom-image,
#mobile-left-image,
#mobile-right-image,
#final-image,
#final-image-container,
#sorsari-text,
#sorsari-text *,
#track-title,
canvas,
model-viewer,
img {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Hide dat.GUI control panel */
.dg,
.dg.ac,
.dg.main {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Debug Window */
#debug-window {
  position: fixed;
  top: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.85);
  border: 2px solid #766391;
  border-radius: 8px;
  padding: 0;
  z-index: 10010;
  font-family: arial, sans-serif;
  color: white;
  min-width: 200px;
  max-width: 90vw;
  max-height: calc(100vh - 40px);
  box-shadow: 0 4px 20px rgba(118, 99, 145, 0.3);
  opacity: 0.63;
  touch-action: none; /* Prevent default touch behaviors during drag */
}

#debug-header {
  background: linear-gradient(135deg, #766391, #362f99);
  padding: 10px 15px;
  cursor: move;
  font-weight: bold;
  border-radius: 6px 6px 0 0;
  user-select: none;
  text-align: center;
  font-size: 12px;
  letter-spacing: 1px;
  touch-action: none;
  position: relative;
}

#debug-close-btn {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: white;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.2s;
}

#debug-close-btn:hover {
  opacity: 1;
}

#debug-content {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow-y: auto;
  max-height: calc(100vh - 100px);
}

.debug-btn {
  background: linear-gradient(135deg, #362f99, #766391);
  color: white;
  border: 1px solid #766391;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 300;

  font-size: 12px;
  transition: all 0.2s ease;
  font-weight: normal;
  margin-bottom: 5px;
}

.debug-btn:hover {
  background: linear-gradient(135deg, #766391, #362f99);
  box-shadow: 0 0 10px rgba(118, 99, 145, 0.5);
  transform: translateY(-2px);
}

.debug-btn:active {
  transform: translateY(0);
}

#time-display {
  text-align: center;
  padding: 8px;
  background: rgba(118, 99, 145, 0.2);
  border-radius: 5px;
  font-size: 14px;
  font-weight: bold;
  color: #766391;
  margin-top: 5px;
}

/* Debug window hidden by default */
#debug-window.hidden {
  display: none;
}

/* Debug toggle arrow button */
.debug-toggle-arrow {
  position: absolute;
  left: -30px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  padding: 0;
  background: rgba(118, 99, 145, 0.9);
  border: 1px solid #766391;
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 1001;
}

.debug-toggle-arrow:hover {
  background: rgba(118, 99, 145, 1);
  box-shadow: 0 0 10px rgba(118, 99, 145, 0.6);
}

/* Arrow rotation when collapsed */
#debug-window.collapsed .debug-toggle-arrow {
  transform: translateY(-50%) rotate(180deg);
}

/* Collapsed state - hide content and header */
#debug-window.collapsed #debug-header,
#debug-window.collapsed #debug-content {
  display: none;
}

/* Collapsed state - adjust window size */
#debug-window.collapsed {
  min-width: auto;
  width: auto;
  min-height: auto;
  height: auto;
  padding: 0;
}

/* Hue slider section */
.debug-slider-section {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.debug-slider-label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
}

.debug-slider-input {
  width: 100%;
}

/* Tilt display */
#tilt-display {
  font-size: 11px;
  margin-top: 5px;
  opacity: 0.7;
}

/* Debug log */
#debug-log {
  font-size: 10px;
  margin-top: 5px;
  opacity: 0.7;
  max-height: 100px;
  overflow-y: auto;
  word-wrap: break-word;
}

/* Center model pixel blur wrapper (outer) */
#model-pixel-blur-wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 555px;
  height: 555px;
  z-index: 10002; /* Above SNES intro stars (10001) */
  pointer-events: auto;
  will-change: filter;
}

/* Center model viewer wrapper */
#model-viewer-wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 555px;
  height: 555px;
  z-index: 10002; /* Above SNES intro stars (10001) */
  pointer-events: auto;
  will-change: filter, transform;
  filter: brightness(0.1);
  /* Smooth parallax depth shift animation */
  transition: transform 0.05s ease-out;
}

/* Center model viewer */
#model-viewer {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 555px;
  height: 555px;
  pointer-events: auto;
  z-index: 10;
  opacity: 0;
}

/* Hide model-viewer loading bar */
model-viewer::part(progress-bar),
model-viewer::part(bar) {
  display: none !important;
}

/* Prevent model-viewer from being targeted/focused */
#model-viewer,
#terror-model-viewer {
  outline: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-focus-ring-color: transparent;
  user-select: none;
}

#model-viewer:focus,
#model-viewer:focus-visible,
#model-viewer:active,
#terror-model-viewer:focus,
#terror-model-viewer:focus-visible,
#terror-model-viewer:active {
  outline: none !important;
  box-shadow: none !important;
}

/* Background layers */
/* Stars fade wrapper - JavaScript-controlled fade (3:20 to 3:46.5) */
#stars-fade-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.016s linear; /* Smooth 60fps updates */
}

#stars-canvas-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  /* GPU acceleration for blur and transform */
  will-change: filter, transform;
  transform: translateZ(0);
}

#stars-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.65;
  /* GPU acceleration for screen shake transforms */
  will-change: transform;
  transform: translateZ(0);
}

#three-blur-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.64;
}

#three-container {
  /* Blur for depth-of-field effect - triangles appear in far background */
  filter: blur(2px);
  /* GPU acceleration for screen shake transforms */
  will-change: transform, opacity, filter;
  transform: translateZ(0);

  /* filter: invert(100%); */
}

/* Audio visualizer canvas */
#visualizer-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  opacity: 0.8;
}

/* Top image (desktop only) */
#bottom-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 10005;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
  transition: transform 0.05s ease-out;
}

/* Mobile images (hidden on desktop) */
#mobile-left-image,
#mobile-right-image {
  display: none;
  position: fixed;
  top: 0;
  height: auto;
  z-index: 10005;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
  transition: transform 0.05s ease-out;
}

/* TERROR model viewer (bottom right) */
.terror-model-viewer {
  position: fixed;
  bottom: -25px;
  right: -25px;
  width: 150px;
  height: 150px;
  pointer-events: none;
  z-index: 10005;
  opacity: 0;
  transition: height 0.5s ease, width 0.5s ease;
  scale: 0.7;
  cursor: default !important;
}
.center-model-viewer {
  transition: width 0.5s ease, height 0.5s ease;
  cursor: default !important;
}

/* Override model-viewer's default cursor */
model-viewer {
  cursor: default !important;
}

/* SORSARI text (bottom left) */
#sorsari-text {
  position: fixed;
  bottom: 20px;
  left: 20px;
  font-family: "Eurostile Extended", Arial, sans-serif;
  color: white;
  z-index: 10005;
  pointer-events: none;
  letter-spacing: 3px;
  margin: 0;
  padding: 0;
  text-shadow: 2px 0px 10px rgba(0, 0, 0, 0.528);
  opacity: 0;
  display: none;
}

#sorsari-text p {
  margin: 0;
  padding: 0;
}

#sorsari-text .maintext {
  font-weight: bold;
  font-size: 24px;
  margin: 0;
  padding: 0;
  letter-spacing: -1px;
}

#sorsari-text .subtext {
  font-weight: 100;
  font-size: 12px;
  margin: 0;
  padding: 0;
  letter-spacing: 0.125px;
  word-spacing: -2px;
}

/* Track title (bottom center) */
#track-title {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-family: eurostile-extended, Arial, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  /* font-style: italic; */
  font-weight: 900;
  color: white;
  z-index: 10005;
  pointer-events: none;
  text-shadow: 2px 0px 10px rgba(0, 0, 0, 0.528);
  opacity: 0;
  letter-spacing: -0.75px;
  will-change: transform;
  transition: transform 0.05s ease-out;
}

#song-progress-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 0.3vh;
  width: 0%;
  /* background-color: rgba(255, 255, 255, 0.689); */
  background-color: rgba(152, 106, 209, 0.859);
  z-index: 9998;
  opacity: 0.6;
  pointer-events: none;
  transition: width 0.1s linear;
}

/* Safe-area support - keep progress bar above iOS home indicator */
@supports (padding: env(safe-area-inset-bottom)) {
  #song-progress-bar {
    bottom: env(safe-area-inset-bottom, 0);
  }

  #track-title {
    bottom: calc(20px + env(safe-area-inset-bottom, 0));
  }
}

#final-image-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 109999;
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

#final-image {
  max-width: 70vw;
  max-height: 70vh;
  width: auto;
  height: auto;
  cursor: pointer;
  transform-style: preserve-3d;
}

/* Mobile responsive */
@media (max-width: 768px) {
  /* Scale down debug window for mobile */
  #debug-window {
    top: 5px;
    right: 5px;
    min-width: 130px;
    max-width: 44vw;
    font-size: 10px;
    border-width: 1px;
    border-radius: 6px;
    opacity: 0.63;
  }

  #debug-header {
    padding: 4px 24px 4px 6px;
    font-size: 9px;
    letter-spacing: 0px;
  }

  #debug-close-btn {
    right: 4px;
    font-size: 18px;
    width: 18px;
    height: 18px;
  }

  #debug-content {
    padding: 4px;
    gap: 2px;
    max-height: calc(100vh - 60px);
  }

  .debug-btn {
    padding: 3px 5px;
    font-size: 7px;
    margin-bottom: 2px;
    border-radius: 3px;
    white-space: nowrap;
  }

  #time-display {
    padding: 4px;
    font-size: 9px;
    margin-top: 2px;
  }

  .debug-slider-section {
    margin-top: 6px;
    padding-top: 6px;
  }

  .debug-slider-label {
    margin-bottom: 3px;
    font-size: 8px;
  }

  .debug-slider-input {
    height: 16px;
  }

  #tilt-display {
    font-size: 7px;
  }

  #debug-log {
    font-size: 7px;
    max-height: 50px;
  }

  #model-viewer {
    width: 290px !important;
    height: 290px !important;
    transition: height 0.5s ease, width 0.5s ease;
  }
  .terror-model-viewer {
    width: 100px;
    height: 100px;

    bottom: -10px;
    right: -10px;
    transition: height 0.5s ease, width 0.5s ease;
  }

  /* Hide desktop top image on mobile */
  #bottom-image {
    display: none;
  }

  /* Show mobile images */
  #mobile-left-image {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: auto;
    height: 60px;
    /* object-fit: cover; */
    /* object-position: left center; */
  }

  #mobile-right-image {
    display: block;
    position: fixed;
    right: 0;
    top: 0;
    width: auto;
    height: 60px;
    /* object-fit: cover; */
    /* object-position: right center; */
  }
}

/* Circular Visualizer */
#bar-visualizer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0; /* under triangles (1) and model (10002) */
  background: transparent;
  pointer-events: none;
  opacity: 0.15;
}