*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: #f5f4ef; color: #1a1a1a;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
#scene-canvas {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  display: block;
  touch-action: none;
}

/* Prevent default mobile gestures from hijacking our touch controls. */
body.touch-device { touch-action: none; -webkit-user-select: none; user-select: none; }
body.touch-device #instructions, body.touch-device #minimap { touch-action: manipulation; }

/* Virtual joystick (mobile only) */
#tc-joystick {
  position: fixed; left: 24px; bottom: 24px; z-index: 12;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(0,180,200,0.55);
  backdrop-filter: blur(6px);
  display: none;
  touch-action: none;
}
body.touch-device #tc-joystick { display: block; }
#tc-joystick .tc-thumb {
  position: absolute; left: 50%; top: 50%;
  width: 52px; height: 52px;
  margin-left: -26px; margin-top: -26px;
  border-radius: 50%;
  background: rgba(0,200,220,0.55);
  border: 1px solid rgba(255,255,255,0.85);
  box-shadow: 0 0 12px rgba(0,200,220,0.5);
}
#tc-lookarea {
  position: fixed; right: 0; top: 0; bottom: 0; width: 50%;
  z-index: 1; touch-action: none;
  display: none;   /* invisible — touch handlers fire on document anyway */
}

/* Hide desktop crosshair on touch devices */
body.touch-device #crosshair { display: none !important; }

/* Crosshair */
#crosshair {
  position: fixed; left: 50%; top: 50%;
  width: 6px; height: 6px;
  margin-left: -3px; margin-top: -3px;
  border-radius: 50%;
  background: rgba(0, 200, 220, 0.7);
  box-shadow: 0 0 8px rgba(0, 200, 220, 0.5);
  pointer-events: none; z-index: 5;
  display: none;
}
.locked #crosshair { display: block; }

/* Instructions panel (top-left) */
#instructions {
  position: fixed; top: 16px; left: 16px; z-index: 10;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.08em; line-height: 1.7;
  color: rgba(20,20,20,0.75);
  background: rgba(255,255,255,0.7); backdrop-filter: blur(8px);
  border: 1px solid rgba(0,180,200,0.3);
  padding: 10px 14px; border-radius: 6px;
  pointer-events: none;
  transition: opacity 0.5s;
}
#instructions.dim { opacity: 0.25; }

/* Minimap (top-right) */
#minimap {
  position: fixed; top: 16px; right: 16px; z-index: 10;
  width: 200px; height: 240px;
  background: rgba(255,255,255,0.75); backdrop-filter: blur(10px);
  border: 1px solid rgba(0,180,200,0.4);
  border-radius: 8px;
  font-family: 'JetBrains Mono', monospace;
}
#minimap-svg { width: 100%; height: 100%; display: block; cursor: default; }
.mm-room {
  fill: rgba(0, 180, 200, 0.18);
  stroke: rgba(0, 200, 220, 0.85);
  stroke-width: 2;
}
/* "You are here" highlight — sits behind whichever room the player is in */
.mm-here {
  fill: rgba(255, 220, 0, 0.28);
  stroke: rgba(255, 200, 0, 0.95);
  stroke-width: 2;
  pointer-events: none;
  transition: opacity 0.2s;
}
.mm-here.hidden { opacity: 0; }
.mm-corridor {
  fill: rgba(255, 80, 180, 0.10);
  stroke: rgba(255, 80, 180, 0.5);
  stroke-width: 1;
}
/* Sean's Desk alcove — small side room, warm tone instead of cyan */
.mm-alcove {
  fill: rgba(232, 184, 106, 0.12);
  stroke: rgba(232, 184, 106, 0.6);
  stroke-width: 1.2;
}
/* Courtyard — outdoor room, leaf-green to read as "outside / nature" */
.mm-outdoor {
  fill: rgba(120, 180, 100, 0.18);
  stroke: rgba(140, 200, 110, 0.85);
  stroke-width: 2;
  stroke-dasharray: 4 3;
}
.mm-pin {
  cursor: pointer;
  transition: filter 0.15s;
}
.mm-pin:hover { filter: drop-shadow(0 0 6px rgba(0,200,220,0.9)); }
.mm-pin circle { fill: rgba(0,180,200,0.85); stroke: #fff; stroke-width: 1.5; }
.mm-pin text {
  fill: #1a1a1a; font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; pointer-events: none;
  text-anchor: middle;
}
.mm-label { font-weight: 700; }
body.touch-device .mm-pin circle { opacity: 0.18 !important; fill: rgba(0,200,220,0.6); }
.mm-player { fill: #ff8c00; stroke: #fff; stroke-width: 1; }
.mm-title {
  fill: rgba(20,20,20,0.6);
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
}

/* Click-to-start overlay
   Sean (cycle #4254): "make the click-to-enter screen show a camera shot of
   the courtyard so it isn't just bright white and painful." We render the
   live courtyard in the canvas behind, then float a soft vignette + the call
   to action over it. Background is now a darken-toward-edges vignette
   instead of an opaque cream gradient so the courtyard reads through. */
#start-overlay {
  position: fixed; inset: 0; z-index: 100;
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(8,12,18,0.10) 0%,
      rgba(8,12,18,0.35) 55%,
      rgba(8,12,18,0.65) 100%);
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  gap: 18px; cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
}
#start-overlay.hidden { display: none; }
#start-overlay h1 {
  font-family: 'Inter', sans-serif;
  font-weight: 800; font-size: 32px; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff5e8;
  text-shadow: 0 0 24px rgba(0,0,0,0.6), 0 0 8px rgba(0,180,200,0.4);
}
#start-overlay .sub {
  font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(180,230,240,0.95);
  text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}
#start-overlay .cta {
  margin-top: 18px;
  font-size: 11px; letter-spacing: 0.25em;
  color: rgba(255,245,232,0.95);
  border: 1px solid rgba(180,230,240,0.6);
  background: rgba(8,12,18,0.30);
  backdrop-filter: blur(4px);
  padding: 12px 28px; border-radius: 999px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.55);
}
#start-overlay .ctrl-row {
  margin-top: 8px;
  font-size: 10px; letter-spacing: 0.18em;
  color: rgba(220,235,240,0.7);
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* Loader — sits over the canvas while the museum boots. We keep the
   background subtle and dark so the courtyard preview render reads
   through without flashing bright white at the user. */
#loader {
  position: fixed; inset: 0; z-index: 200;
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(8,12,18,0.20) 0%,
      rgba(8,12,18,0.55) 100%);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(220,235,240,0.85);
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
#loader.hidden { display: none; }
.spinner {
  width: 28px; height: 28px;
  border: 2px solid rgba(0,180,200,0.18);
  border-top-color: rgba(0,180,200,0.9);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Teleport flash */
#teleport-veil {
  position: fixed; inset: 0; z-index: 50;
  pointer-events: none;
  background: rgba(255, 255, 255, 0);
  transition: background 0.3s;
}
#teleport-veil.flash { background: rgba(0, 200, 220, 0.25); }