:root {
  --chip: rgba(38, 29, 19, 0.80);
  --chip-hover: rgba(66, 50, 32, 0.92);
  --chip-ink: #fbf1da;
  --chip-line: rgba(255, 232, 178, 0.28);
  --accent: #f0b35a;
  --gap: 12px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; background: #241c12; overflow: hidden; overscroll-behavior: none; }
body { font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--chip-ink); }

/* A soft blurred copy of the picture fills any space around it. */
#bg {
  position: fixed; inset: -40px; z-index: 0;
  background: center / cover no-repeat;
  filter: blur(28px) brightness(0.62) saturate(1.1);
}

#stage { position: fixed; inset: 0; z-index: 1; overflow: hidden; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
#stage.dragging { cursor: grabbing; }
#stage.pointing { cursor: pointer; }
#world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
#art { display: block; width: 1536px; height: 1024px; max-width: none; -webkit-user-drag: none; }
#fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

#veil { position: fixed; inset: 0; z-index: 3; background: #f4e3bd; opacity: 0; pointer-events: none; }

#hud { position: fixed; inset: 0; z-index: 4; pointer-events: none; padding: max(var(--gap), env(safe-area-inset-top)) max(var(--gap), env(safe-area-inset-right)) max(var(--gap), env(safe-area-inset-bottom)) max(var(--gap), env(safe-area-inset-left)); }
#hud > * { pointer-events: auto; }

.chip, #titlechip, #controls button, #places button, #hint, #tip {
  background: var(--chip); color: var(--chip-ink);
  border: 1px solid var(--chip-line); border-radius: 10px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

#titlechip { position: absolute; left: max(var(--gap), env(safe-area-inset-left)); top: max(var(--gap), env(safe-area-inset-top)); display: flex; flex-direction: column; padding: 8px 14px; max-width: min(60vw, 320px); pointer-events: none; }
#title { font-size: 18px; letter-spacing: 0.2px; }
#subtitle { font-size: 12.5px; opacity: 0.8; }

#controls { position: absolute; right: max(var(--gap), env(safe-area-inset-right)); top: max(var(--gap), env(safe-area-inset-top)); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: calc(100vw - 24px); pointer-events: none; }
#controls button { pointer-events: auto; font: inherit; padding: 8px 13px; min-height: 40px; min-width: 40px; cursor: pointer; }
#controls button:hover, #places button:hover { background: var(--chip-hover); }
#controls button[aria-pressed="true"] { border-color: var(--accent); }
button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

#places { position: absolute; left: max(var(--gap), env(safe-area-inset-left)); top: calc(max(var(--gap), env(safe-area-inset-top)) + 64px); display: flex; flex-direction: column; gap: 6px; max-height: calc(100vh - 160px); overflow: auto; }
#places button { font: inherit; text-align: left; padding: 8px 14px; min-height: 40px; cursor: pointer; }
#places button small { display: block; font-size: 12px; opacity: 0.75; }

#hint { position: absolute; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 8px 16px; font-size: 13.5px; text-align: center; max-width: calc(100vw - 32px); pointer-events: none; transition: opacity 0.8s; }
#hint.gone { opacity: 0; }

#tip { position: fixed; padding: 6px 11px; font-size: 13.5px; pointer-events: none; white-space: nowrap; transform: translate(14px, 16px); }
#tip small { opacity: 0.8; margin-left: 6px; }

#stage.grab { cursor: grab; }

/* On-screen joystick, shown only on touch screens. */
#stick { display: none; position: absolute; left: max(22px, env(safe-area-inset-left)); bottom: max(26px, env(safe-area-inset-bottom)); width: 124px; height: 124px; border-radius: 50%;
  background: rgba(38, 29, 19, 0.45); border: 2px solid rgba(255, 232, 178, 0.45); touch-action: none; -webkit-user-select: none; user-select: none; }
#knob { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%;
  background: rgba(251, 241, 218, 0.85); border: 2px solid rgba(38, 29, 19, 0.6); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); pointer-events: none; }
body.touch #stick { display: block; }
body.touch #hint { bottom: calc(max(26px, env(safe-area-inset-bottom)) + 140px); }

.nojs { position: fixed; inset: 0; margin: 0; display: grid; place-items: center; background: #241c12; color: #fbf1da; z-index: 9; }

@media (max-width: 700px) {
  #title { font-size: 16px; }
  /* On narrow screens the buttons sit in one row under the title, leaving the bottom (and each room's
     door) clear. Phones pinch to zoom, so the +/- buttons are hidden there. */
  #controls { top: calc(max(12px, env(safe-area-inset-top)) + 66px); left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); justify-content: flex-start; max-width: none; }
  #controls button { padding: 8px 11px; }
  #zoomIn, #zoomOut { display: none; }
  #hint { width: max-content; }
  #places { top: calc(max(var(--gap), env(safe-area-inset-top)) + 112px); }
}
@media (prefers-reduced-motion: reduce) {
  #hint { transition: none; }
}