/* The game's own pieces: the canvas, the prompt that offers a stop, the touch controls, the blink between rooms. */
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; outline: none; background: #EAD7C2; }
#view.dragging { cursor: grabbing; }
#view.hot { cursor: pointer; }
#vignette { z-index: 1; }

#blink { position: fixed; inset: 0; z-index: 8; pointer-events: none; background: var(--ivory); opacity: 0; transition: opacity .25s; }
#blink.on { opacity: 1; }

.found { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; font: 500 11px var(--mono); letter-spacing: .08em; color: var(--walnut); }
.found svg { width: 12px; color: var(--brass); }

/* the offer: walk up to a marker, or point at a room from outside, to a marker and its title rises from the bottom of the screen */
#prompt { position: fixed; left: 50%; bottom: 96px; z-index: 4; display: flex; align-items: center; gap: 12px; max-width: min(460px, calc(100vw - 32px)); padding: 10px 18px 10px 10px;
  border: 1px solid rgba(176, 141, 87, .55); border-radius: 999px; background: var(--glass); box-shadow: 0 14px 34px rgba(59, 39, 31, .2); text-align: left; color: var(--ink);
  transform: translate(-50%, 14px); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
#prompt.room kbd { font-size: 0; } #prompt.room kbd::before { content: '↧'; font-size: 15px; }
#prompt.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#prompt:hover { background: #FBF7EF; }
#prompt kbd { display: grid; place-items: center; width: 34px; height: 34px; flex: none; margin: 0; border: 0; border-radius: 50%; background: var(--forest); color: var(--ivory); font: 500 13px var(--mono); }
#prompt b { display: block; font: italic 600 17px/1.15 var(--serif); color: var(--walnut); }
#prompt b em { color: var(--oxblood); }
#prompt small { display: block; margin-top: 2px; font: 500 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--olive); }
body.has-panel #prompt { opacity: 0; pointer-events: none; }

/* the controls card, shown for a few seconds when you start */
#help { position: fixed; left: 50%; top: 84px; z-index: 4; transform: translate(-50%, -8px); opacity: 0; transition: opacity .5s, transform .5s; pointer-events: none;
  padding: 10px 18px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); box-shadow: 0 10px 28px rgba(59, 39, 31, .14); font: 500 11px var(--mono); letter-spacing: .04em; color: var(--ink-2); white-space: nowrap; }
#help.on { opacity: 1; transform: translate(-50%, 0); }
#help p { margin: 0; }
#help .h-touch { display: none; }

/* touch: a thumbstick for walking inside */
#stick { display: none; }
@media (pointer: coarse) {
  #stick { display: block; position: fixed; left: max(22px, env(safe-area-inset-left)); bottom: max(26px, env(safe-area-inset-bottom)); z-index: 4; width: 128px; height: 128px; border-radius: 50%;
    background: rgba(245, 239, 227, .38); border: 1.5px solid rgba(245, 239, 227, .8); box-shadow: 0 8px 24px rgba(59, 39, 31, .18); touch-action: none; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  #stick i { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px; border-radius: 50%; background: var(--ivory); box-shadow: 0 4px 12px rgba(59, 39, 31, .25); }
  #help .h-keys, .hint { display: none !important; }
  #help .h-touch { display: block; }
  #help { white-space: normal; text-align: center; width: max-content; max-width: calc(100vw - 32px); }
  .hud-bottom { bottom: auto; top: 64px; padding: 8px 16px; grid-template-columns: 1fr; }
  .hud-bottom .tour { justify-self: center; }
  .hud-bottom .dots { display: none; }
  #prompt { bottom: 178px; }
}
@media (max-width: 760px) {
  .brand small, #soundBtn span, #exploreBtn span { display: none; }
  .hud-top { padding: 12px; }
  #nextName { display: none; }
}

/* just exploring: no stops, no panels, no tour, nothing telling you where to go */
#exploreBtn[aria-pressed="true"] { background: var(--forest); color: var(--ivory); border-radius: 999px; }
body.explore .tour, body.explore #prompt, body.explore .listing, body.explore #help, body.explore .hint, body.explore #panel, body.explore .found { display: none !important; }

/* the intro sits over the front walk while the camera turns round her */
#intro { z-index: 10; }
.intro-t { margin: 6px 0 0; }
.intro-alt .link, .intro-alt a { background: none; border: 0; padding: 0; color: #EFE5D3; font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
body:not(.live) .hud-bottom, body:not(.live) #prompt, body:not(.live) #stick, body.overhead #stick, body:not(.live) .listing { opacity: 0; pointer-events: none; }

/* the floors, like a lift's buttons, down the right edge: inside, the dollhouse and the floor plan */
.levels { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 5; display: flex; flex-direction: column; gap: 3px; padding: 4px; border-radius: 22px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 6px 20px rgba(59, 39, 31, .12); transition: opacity .4s; }
.levels button { padding: 9px 14px; border: 0; border-radius: 999px; background: none; font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); cursor: pointer; }
.levels button:hover { color: var(--walnut); }
.levels button[aria-pressed="true"] { background: var(--walnut); color: var(--ivory); }
.levels button[data-f="3"] { display: none; }
body[data-mode="doll"]:not(.planview) .levels button[data-f="3"] { display: block; }
body:not(.live) .levels, body[data-mode="front"] .levels, body.has-panel .levels { opacity: 0; pointer-events: none; }

/* the floor plan: the listing steps aside, and every room on the storey wears its name */
body.planview .listing { opacity: 0; pointer-events: none; }
#planLabels { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .35s; }
#planLabels.on { opacity: 1; }
#planLabels button { position: absolute; left: 0; top: 0; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: rgba(251, 247, 239, .9); color: var(--walnut); font: italic 600 13px var(--serif); white-space: nowrap; cursor: pointer; pointer-events: auto; box-shadow: 0 4px 12px rgba(59, 39, 31, .14); transition: background .2s, color .2s; }
#planLabels:not(.on) button { pointer-events: none; }
#planLabels button:hover, #planLabels button:focus-visible { background: var(--forest); color: var(--ivory); outline: none; }
@media (max-width: 720px) {
  /* on a phone the bottom is free, so the floors become a row there instead of covering the plan */
  .levels { right: auto; left: 50%; top: auto; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); flex-direction: row; }
  .levels button { padding: 8px 12px; font-size: 9.5px; }
  /* walking, the joystick has the bottom left, so the floors stack in the bottom right */
  body[data-mode="walk"] .levels { left: auto; right: max(16px, env(safe-area-inset-right)); bottom: max(26px, env(safe-area-inset-bottom)); transform: none; flex-direction: column; }
  .modes { gap: 0; }
  .modes button { padding: 8px 8px; letter-spacing: .06em; }
  .modes button svg { display: none; }
  #planLabels button { font-size: 11px; padding: 4px 8px; }
}