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

/* --- Viewport: centers and clips the canvas --- */
.viewport {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111;
}

/* --- Canvas: the 2D scene root --- */
.canvas {
  position: relative;
  width: 1200px;
  height: 800px;
  transform-origin: center center;
  /* Scale set by JS; see Scaling section */
}

/* --- Layer 1: Background --- */
.bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* --- Layer 2: SVG hotspots --- */
.hotspots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  /* Block pointer events on the SVG itself;
     only the <a> children will be clickable */
  pointer-events: none;
}

.hotspots a {
  pointer-events: all;
  cursor: pointer;
}

.hotspots a:hover polygon,
.hotspots a:hover ellipse,
.hotspots a:hover circle,
.hotspots a:hover path {
  fill: rgba(255, 255, 255, 0.15);
}

/* --- Layer 3: Positioned elements ---
   Apply .scene-item to any element you want placed on the canvas.
   Set --x, --y, --w, --h as inline styles; the element will be
   centered on the (--x, --y) coordinate.
   Combine with .sprite, .card, or .label for visual styling,
   or use .scene-item alone for unstyled primitives (tables, forms, etc.).
*/
.scene-item {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w, auto);
  height: var(--h, auto);
  z-index: 2;
  transform: translate(-50%, -50%);
}

/* --- Image sprite --- */
.sprite {
  display: block;
  object-fit: contain;
}

/* --- Text card --- */
.card {
  background: rgba(0, 0, 0, 0.65);
  color: white;
  padding: 0.75rem 1rem;
  border-radius: 4px;
  font-family: Georgia, serif;
  backdrop-filter: blur(4px);
}

/* --- Minimal label --- */
.label {
  color: white;
  font-family: Georgia, serif;
  font-size: 1rem;
  text-decoration: none;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
}

/* --- Button ---
   Wrap in a .scene-item div for canvas placement.
   Pass --color for background (default: white) and
   --text-color for label (default: #111).
   Width stretches to fill container if --w is set on the parent.
*/
.btn {
  display: inline-block;
  width: 100%;
  padding: 0.5rem 1.25rem;
  background: var(--color, white);
  color: var(--text-color, #111);
  font-family: Georgia, serif;
  font-size: 0.9rem;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.btn:hover  { transform: scale(1.05); }
.btn:active { transform: scale(0.97); }

/* --- hidden class used for conditional rendering --- */
.hidden {
    display: none !important;
}

/* --- Typography inside scene items --- */
.scene-item h1 { font-size: 1.4rem;  margin-bottom: 0.25rem; }
.scene-item h2 { font-size: 1.15rem; margin-bottom: 0.25rem; }
.scene-item h3 { font-size: 0.95rem; margin-bottom: 0.25rem; }
.scene-item h4 { font-size: 0.85rem; margin-bottom: 0.25rem; }
.scene-item h5 { font-size: 0.8rem;  margin-bottom: 0.25rem; }
.scene-item h6 { font-size: 0.75rem; margin-bottom: 0.25rem; }
.scene-item p  { font-size: 0.8rem;  opacity: 0.75; }