:root {
  --cyber-cyan: #00fff9;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
html { background: #07070d; }

body {
  background: #07070d;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: 'VT323', 'Courier New', monospace;
  color: #a8d8c0;
  overflow: hidden;
  gap: 16px;
}

/* CRT power-off transition: vertical squish to a horizontal line, then a
   bright dot, then black. Used before any redirect (terminal or href). */
body.crt-off {
  animation: crt-off 0.55s cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards;
  pointer-events: none;
}

@keyframes crt-off {
  0% {
    transform: scale(1, 1);
    filter: brightness(1);
    opacity: 1;
  }
  35% {
    transform: scale(1.01, 0.005);
    filter: brightness(2.6) saturate(1.4);
    opacity: 1;
  }
  85% {
    transform: scale(0.04, 0.005);
    filter: brightness(2.2);
    opacity: 1;
  }
  100% {
    transform: scale(0, 0);
    filter: brightness(0);
    opacity: 0;
  }
}

#game {
  position: relative;
  aspect-ratio: 16 / 9;
  width: min(100vw, calc(100vh * 16 / 9));
  outline: none;
  box-shadow:
    0 0 0 2px #1a1a24,
    0 0 0 4px #07070d,
    0 0 60px rgba(168, 216, 192, 0.15);
}

/* Bedroom photo: native browser rendering, full source quality. */
#bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
  pointer-events: none;
}

/* SVG overlay holds all hotspots; viewBox is set from JSON at runtime. */
#hotspots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Hotspots are invisible until hovered or until "show all" mode is on. */
.hotspot {
  fill: transparent;
  stroke: transparent;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
  pointer-events: all;
  cursor: pointer;
  transition: stroke 0.15s ease, filter 0.15s ease;
}

.hotspot:hover,
#game.show-all .hotspot {
  stroke: var(--cyber-cyan);
  filter: drop-shadow(0 0 4px rgba(0, 255, 249, 0.55));
}

#game.show-all .hotspot {
  animation: hotspot-pulse 1.4s ease-in-out infinite;
}

@keyframes hotspot-pulse {
  0%, 100% { stroke-opacity: 1; }
  50% { stroke-opacity: 0.5; }
}

#hint {
  font-size: 18px;
  letter-spacing: 0.05em;
  color: #6ba888;
  opacity: 0.8;
  user-select: none;
}

/* Terminal overlay — black screen, scanlines, monospace green text. */
#terminal {
  position: fixed;
  inset: 0;
  background: #000;
  color: #a8d8c0;
  font-family: 'VT323', 'Courier New', monospace;
  font-size: 28px;
  line-height: 1.15;
  padding: 24px 28px;
  z-index: 10;
  overflow: hidden;
}

#terminal::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(168, 216, 192, 0.04) 0px,
    rgba(168, 216, 192, 0.04) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
}

#terminal-content {
  position: relative;
  z-index: 1;
  white-space: pre;
}

.terminal-line {
  min-height: 1.15em;
}

#terminal-cursor {
  display: inline-block;
  animation: terminal-blink 0.9s ease-in-out infinite alternate;
}

@keyframes terminal-blink {
  from { opacity: 1; }
  to { opacity: 0.2; }
}

/* Avoid sticky :hover outlines on iOS after tapping a hotspot. */
@media (hover: none) {
  .hotspot:hover {
    stroke: transparent;
    filter: none;
  }
}

/* Touch devices: show the toggle bar, hide the desktop hint. */
@media (pointer: coarse) {
  #touch-controls[hidden] { display: flex; }
  #touch-controls {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) 14px;
    background: linear-gradient(to top, #07070d 70%, rgba(7, 7, 13, 0));
    z-index: 5;
    font-family: 'VT323', 'Courier New', monospace;
  }
  #highlight-toggle {
    background: transparent;
    color: var(--cyber-cyan);
    border: 1px solid var(--cyber-cyan);
    padding: 8px 16px;
    font: inherit;
    font-size: 18px;
    letter-spacing: 0.05em;
    cursor: pointer;
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(0, 255, 249, 0.25);
  }
  #highlight-toggle[aria-pressed="true"] {
    background: var(--cyber-cyan);
    color: #07070d;
    box-shadow: 0 0 14px rgba(0, 255, 249, 0.55);
  }
  #touch-hint {
    font-size: 16px;
    color: #6ba888;
    opacity: 0.8;
  }
  #hint { display: none; }
}

/* Touch + portrait: pan-and-look. Image fills height; body scrolls horizontally. */
@media (pointer: coarse) and (orientation: portrait) {
  :root { --controls-h: 64px; }
  body {
    overflow-x: auto;
    overflow-y: hidden;
    align-items: flex-start;
    justify-content: flex-start;
    touch-action: pan-x;
    overscroll-behavior: contain;
    gap: 0;
    padding-bottom: var(--controls-h);
  }
  #game {
    width: auto;
    height: calc(100vh - var(--controls-h));
    height: calc(100dvh - var(--controls-h));
    aspect-ratio: 16 / 9;
    flex-shrink: 0;
  }
}