:root {
  --tour-help-height: calc(44px + env(safe-area-inset-bottom));
  --control-height: 36px;
  color-scheme: dark;
}
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #181c20;
  color: #fff;
  font: 14px/1.4 system-ui, sans-serif;
  overscroll-behavior: none;
}
#tour { height: calc(100% - var(--tour-help-height)); }
::selection { background: #c6ddf3; color: #09264b; }
header {
  position: absolute;
  top: max(8px, env(safe-area-inset-top));
  left: max(8px, env(safe-area-inset-left));
  right: max(8px, env(safe-area-inset-right));
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  pointer-events: none;
  z-index: 5;
}
.title {
  padding: 7px 10px;
  background: #fffffff2;
  color: #18263b;
  border-radius: 4px;
}
.title img { display: block; width: 138px; height: auto; }
.title strong { display: block; font: 18px/1.2 Georgia, serif; margin-top: 4px; }
.community {
  position: absolute;
  left: max(8px, env(safe-area-inset-left));
  bottom: calc(var(--tour-help-height) + 8px);
  padding: 6px 8px;
  background: #fffffff2;
  border-radius: 4px;
  pointer-events: none;
  z-index: 2;
}
.community img { display: block; width: 84px; height: auto; }
nav { display: flex; align-items: flex-start; gap: 4px; pointer-events: auto; }
button, select, summary {
  box-sizing: border-box;
  min-height: var(--control-height);
  padding: 6px 9px;
  background: #102c49;
  color: #fff;
  border: 1px solid #7490aa;
  border-radius: 4px;
  font: inherit;
}
button, summary { cursor: pointer; }
button:disabled, select:disabled { opacity: .6; cursor: default; }
button[aria-pressed='true'] { background: #dae8ef; color: #09264b; }
button:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid #c2e0fa;
  outline-offset: 2px;
}
button:not(:disabled):hover, summary:hover { background: #23496f; color: #fff; }
#room { width: clamp(136px, 18vw, 190px); min-width: 0; }
#more { position: relative; z-index: 1; }
#more summary { list-style: none; }
#more summary::-webkit-details-marker { display: none; }
.options {
  position: absolute;
  top: calc(var(--control-height) + 6px);
  right: 0;
  width: min(290px, calc(100vw - 16px));
  max-height: calc(100dvh - var(--tour-help-height) - var(--control-height) - 28px);
  overflow: auto;
  box-sizing: border-box;
  padding: 16px;
  border: 1px solid #7490aa;
  border-radius: 4px;
  background: #102c49;
  scrollbar-color: #7490aa #102c49;
}
.options p { margin: 0 0 12px; line-height: 1.5; color: #e3edf7; }
.options p:last-child { margin: 12px 0 0; }
.option-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
#stream-status {
  position: absolute;
  top: calc(var(--control-height) + 6px);
  right: 0;
  margin: 0;
  padding: 4px 8px;
  border-radius: 4px;
  background: #102c49;
  color: #e3edf7;
  font-size: 13px;
}
#stream-status[hidden], #hint, #loading[hidden], #curtain[hidden] { display: none; }
#curtain { position: absolute; inset: 0; z-index: 3; background: #181c20; display: grid; place-items: center; }
#loading {
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  max-width: 75vw; padding: 16px 20px; border-radius: 4px;
  background: #102c49; text-align: center; z-index: 4;
}
.sse-annotation-hotspots, .sse-annotationInfo, .sse-annotationNav { display: none !important; }
#stick {
  position: absolute;
  bottom: calc(var(--tour-help-height) + 12px);
  right: max(12px, env(safe-area-inset-right));
  width: 88px; height: 88px; min-height: 0; padding: 0;
  border-radius: 50%; background: #102c49d9; border: 1px solid #c6ddf3;
  touch-action: none; user-select: none; display: none; z-index: 4;
}
#stick span {
  position: absolute; left: 50%; top: 50%;
  width: 36px; height: 36px; margin: -18px 0 0 -18px;
  border-radius: 50%; background: #e8f3fa; pointer-events: none;
}
#tour-help {
  position: absolute; inset: auto 0 0; z-index: 6;
  box-sizing: border-box; height: var(--tour-help-height);
  display: flex; align-items: center; justify-content: center;
  padding: 4px max(12px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: #09264b; color: #fff; pointer-events: none;
}
.keyboard-help { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(100%, 1100px); }
#tour-help p { margin: 0; }
.walk-help, .jump-help, .escape-help { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.keys { display: flex; gap: 3px; }
#tour-help kbd { padding: 1px 4px; border: 1px solid #95b5d4; border-radius: 3px; font: 600 13px/1.4 system-ui, sans-serif; }
.escape-help { padding: 4px 6px; color: #e3edf7; }
#tour-help[data-locked='true'] .escape-help { background: #e4f0fb; color: #09264b; border-radius: 4px; }
.lock-label, .touch-help { display: none; }
#tour-help[data-locked='true'] .lock-label { display: inline; }
#tour-help[data-locked='true'] #path-help, #tour-help[data-mode='fly'] .jump-help { display: none; }
.touch-help { text-align: center; }
#tour-help[data-input='touch'] .keyboard-help { display: none; }
#tour-help[data-input='touch'] .touch-help { display: block; }
.screen-reader-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 1050px) { .jump-help { display: none; } }
@media (hover: none), (pointer: coarse) {
  :root { --control-height: 44px; }
  .desktop-only { display: none !important; }
  #stick { display: block; }
}
@media (max-width: 760px) {
  :root { --tour-help-height: calc(40px + env(safe-area-inset-bottom)); }
  .title, .community { display: none; }
  header { justify-content: flex-end; }
  #path-help, #look-help, #tour-help[data-locked='true'] .lock-label { display: none; }
  .keyboard-help { justify-content: center; gap: 12px; }
}
@media (max-height: 500px) and (pointer: coarse) {
  .title, .community { display: none; }
  header { justify-content: flex-end; }
}