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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #2a1a12;
  font-family: 'Gloock', Georgia, serif;
}

/* ═══════════════════════════════════
   GALLERY VIEWPORT
   ═══════════════════════════════════ */
#gallery {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* ═══════════════════════════════════
   DRAGGABLE CANVAS
   ═══════════════════════════════════ */
#canvas-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
}

#canvas-wrapper.dragging {
  cursor: grabbing;
}

#canvas {
  position: relative;
  overflow: hidden;
  /* Dimensions set by JS — sized to bg image natural ratio × SCALE */
}

/* Background image fills the canvas exactly (aspect ratio matches canvas) */
#canvas-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  display: block;
}

/* ═══════════════════════════════════
   SUBTLE GLASS OVERLAY (Figma: backdrop-blur 1px, 10% white)
   ═══════════════════════════════════ */
#glass-overlay {
  position: fixed;
  inset: 0;
  background: rgba(233, 233, 233, 0.1);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  pointer-events: none;
  z-index: 10;
}

/* ═══════════════════════════════════
   CHARACTERS
   ═══════════════════════════════════ */
.character {
  position: absolute;
  cursor: pointer;
  z-index: 5;
}

/* Inner wrapper receives the scale-pop animation */
.char-scale {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.char-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  image-rendering: -webkit-optimize-contrast; /* sharper upscale on WebKit */
  image-rendering: smooth;                    /* CSS4 standard */
}

/* Horizontal mirror for Hades */
.char-img.flipped {
  transform: scaleX(-1);
}

/* (blur removed — all characters rendered sharp) */

/* Pop animation — 5% scale, ease-in-out, triggered via JS */
@keyframes charPop {
  0%   { transform: scale(1);    }
  45%  { transform: scale(1.05); }
  100% { transform: scale(1);    }
}

.char-scale.popping {
  animation: charPop 0.75s cubic-bezier(0.45, 0, 0.55, 1) forwards;
}

/* Character name labels (SVG badges below characters) */
.char-label {
  position: absolute;
  pointer-events: none;
  z-index: 6;
}

.char-label img {
  display: block;
  width: 100%;
  height: auto;
}

/* ═══════════════════════════════════
   FIXED TITLE
   ═══════════════════════════════════ */
#site-title {
  position: fixed;
  top: 39px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  font-family: 'Gloock', Georgia, serif;
  font-size: 64px;
  font-weight: 400;
  color: #fffaf8;
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.28);
}

/* ═══════════════════════════════════
   FLOATING SIDEBAR
   ═══════════════════════════════════ */
#sidebar {
  position: fixed;
  left: 40px;
  top: 39px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sidebar-btn {
  width: 100px;
  height: 100px;
  background: #dfd9d6;
  border: none;
  border-radius: 24px;
  padding: 10px;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.14);
}

.sidebar-btn:hover {
  transform: scale(1.07);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22);
}

.sidebar-btn:active {
  transform: scale(0.96);
}

.sidebar-btn img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  pointer-events: none;
}

/* ═══════════════════════════════════
   MODAL  —  video + X button only
   ═══════════════════════════════════ */
#modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.35s ease;
}

#modal.hidden {
  opacity: 0;
  pointer-events: none;
}

#modal.visible {
  opacity: 1;
  pointer-events: all;
}

#modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 5, 2, 0.9);
}

#modal-panel {
  position: relative;
  z-index: 1;
  width: min(860px, 90vw);
}

/* X button — top-right, above the video */
#modal-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  color: rgba(255, 250, 248, 0.72);
  font-size: 22px;
  font-family: sans-serif;
  line-height: 1;
  cursor: pointer;
  padding: 6px 10px;
  transition: color 0.2s, transform 0.2s;
  z-index: 2;
}

#modal-close:hover {
  color: #fffaf8;
  transform: scale(1.15);
}

/* 16:9 video container */
#modal-video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

#modal-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}