:root {
  --museum-border: #000;
  --museum-ui-bg: rgba(236, 236, 236, 0.92);
  --museum-accent: #5a7a9a;
  --museum-safe-t: env(safe-area-inset-top, 0px);
  --museum-safe-b: env(safe-area-inset-bottom, 0px);
  --museum-safe-l: env(safe-area-inset-left, 0px);
  --museum-safe-r: env(safe-area-inset-right, 0px);
  --museum-stick-size: 112px;
  --museum-stick-bottom: 24px;
  --museum-ui-above-stick: calc(
    var(--museum-safe-b) + var(--museum-stick-bottom) + var(--museum-stick-size) + 20px
  );
}

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

html {
  height: 100%;
  height: 100dvh;
}

body {
  margin: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  touch-action: none;
  font-family: "DotGothic16", "Courier New", monospace;
  background: #1a1a1a;
  color: #1a1a1a;
  -webkit-user-select: none;
  user-select: none;
}

#museum-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

body.museum-locked #museum-canvas {
  cursor: none;
}

.museum-lock-prompt {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
  padding: 14px 20px;
  text-align: center;
  border: 2px solid var(--museum-border);
  background: var(--museum-ui-bg);
  box-shadow: 4px 4px 0 #808080;
  pointer-events: none;
}

.museum-lock-prompt p {
  margin: 0;
  font-size: 15px;
}

.museum-lock-prompt-sub {
  margin-top: 6px !important;
  font-size: 12px !important;
  color: #444;
}

.museum-ui {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.museum-ui a,
.museum-ui button,
.museum-touch-zone,
.museum-joystick {
  pointer-events: auto;
}

.museum-top-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(10px + var(--museum-safe-t)) calc(12px + var(--museum-safe-r)) 10px
    calc(12px + var(--museum-safe-l));
}

.museum-back {
  padding: 6px 10px;
  border: 2px solid var(--museum-border);
  background: var(--museum-ui-bg);
  color: inherit;
  text-decoration: none;
  font: inherit;
  font-size: 13px;
  box-shadow: 3px 3px 0 #808080;
}

.museum-hint {
  margin: 0;
  padding: 4px 8px;
  font-size: 11px;
  border: 2px solid var(--museum-border);
  background: var(--museum-ui-bg);
  box-shadow: 2px 2px 0 #808080;
  max-width: min(280px, 55vw);
  line-height: 1.35;
}

.museum-hint--desktop {
  display: none;
}

.museum-focus {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #000;
  opacity: 0.85;
  pointer-events: none;
}

.museum-plaque {
  position: fixed;
  left: 50%;
  bottom: 28%;
  transform: translateX(-50%);
  max-width: min(90vw, 360px);
  padding: 8px 12px;
  text-align: center;
  border: 2px solid var(--museum-border);
  background: var(--museum-ui-bg);
  box-shadow: 4px 4px 0 #808080;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.museum-plaque.is-visible {
  opacity: 1;
}

.museum-plaque-title {
  margin: 0;
  font-size: 15px;
}

.museum-plaque-author {
  margin: 4px 0 0;
  font-size: 12px;
  color: #444;
}

.museum-interact-prompt {
  position: fixed;
  left: 50%;
  bottom: 18%;
  transform: translateX(-50%);
  margin: 0;
  padding: 6px 12px;
  font-size: 13px;
  border: 2px solid var(--museum-border);
  background: var(--museum-ui-bg);
  box-shadow: 3px 3px 0 #808080;
  pointer-events: none;
  white-space: nowrap;
}

.museum-interact-prompt.is-visible {
  display: block;
}

.museum-interact-prompt[hidden] {
  display: none;
}

.museum-interact-btn {
  position: fixed;
  left: 50%;
  bottom: 18%;
  transform: translateX(-50%);
  padding: 8px 18px;
  font: inherit;
  font-size: 14px;
  border: 2px solid var(--museum-border);
  background: #c62828;
  color: #fff;
  box-shadow: 3px 3px 0 #505050;
  cursor: pointer;
  z-index: 4;
}

.museum-interact-btn[hidden] {
  display: none;
}

.museum-dialogue {
  position: fixed;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  width: min(92vw, 400px);
  padding: 12px 16px;
  border: 2px solid var(--museum-border);
  background: var(--museum-ui-bg);
  box-shadow: 4px 4px 0 #808080;
  z-index: 5;
  text-align: center;
}

.museum-dialogue[hidden] {
  display: none;
}

.museum-dialogue-name {
  margin: 0 0 6px;
  font-size: 13px;
  color: #5a7a9a;
}

.museum-dialogue-line {
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
}

.museum-dialogue-hint {
  margin: 10px 0 0;
  font-size: 11px;
  color: #555;
}

body.museum-interacting .museum-interact-prompt,
body.museum-interacting .museum-interact-btn,
body.museum-interacting .museum-plaque,
body.museum-interacting .museum-lock-prompt {
  display: none !important;
}

body.museum-interacting #museum-canvas {
  cursor: default;
}

@media (pointer: fine) and (hover: hover) {
  .museum-interact-btn {
    display: none !important;
  }
}

@media (pointer: coarse) {
  :root {
    /* Clear Chrome mobile bottom bar + home indicator */
    --museum-stick-bottom: max(88px, 12vh);
  }

  .museum-interact-prompt {
    display: none !important;
  }

  .museum-plaque {
    bottom: calc(var(--museum-ui-above-stick) + 56px);
    max-width: min(88vw, 360px);
  }

  .museum-interact-btn {
    bottom: var(--museum-ui-above-stick);
  }

  .museum-dialogue {
    bottom: auto;
    top: calc(var(--museum-safe-t) + 52px);
    max-height: min(40vh, 240px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.museum-loading {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #ececec;
  font-size: 16px;
}

.museum-loading.is-hidden {
  display: none;
}

.museum-loading-err {
  max-width: 320px;
  padding: 0 16px;
  text-align: center;
  font-size: 13px;
  color: #8b2020;
}

.museum-touch-zone {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 1;
}

.museum-touch-zone--look {
  right: 0;
}

.museum-joystick {
  position: fixed;
  left: calc(16px + var(--museum-safe-l));
  bottom: calc(var(--museum-safe-b) + var(--museum-stick-bottom));
  width: var(--museum-stick-size);
  height: var(--museum-stick-size);
  border: 2px solid var(--museum-border);
  border-radius: 50%;
  background: rgba(236, 236, 236, 0.35);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  z-index: 3;
  touch-action: none;
}

.museum-joystick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border: 2px solid var(--museum-border);
  border-radius: 50%;
  background: rgba(90, 122, 154, 0.75);
  box-shadow: 2px 2px 0 #404040;
  transform: translate(0, 0);
  will-change: transform;
}

@media (min-width: 768px) {
  .museum-hint--mobile {
    display: none;
  }

  .museum-hint--desktop {
    display: block;
  }

  .museum-touch-zone,
  .museum-joystick {
    display: none;
  }

  .museum-lock-prompt {
    display: block;
  }

  .museum-lock-prompt[hidden] {
    display: none;
  }
}

@media (pointer: fine) and (hover: hover) {
  .museum-touch-zone,
  .museum-joystick {
    display: none;
  }

  .museum-hint--mobile {
    display: none;
  }

  .museum-hint--desktop {
    display: block;
  }
}