* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  background: #14171c; color: #eee;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow: hidden;
  overscroll-behavior: none;
}
#app { position: relative; width: 100%; height: 100%; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; background: #14171c; }

#topbar {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55), transparent);
  pointer-events: none;
  z-index: 5;
}
#topbar .btn { pointer-events: auto; }
#siteTitle { font-weight: 600; letter-spacing: 0.5px; font-size: 15px; opacity: 0.9; }
#roomTitle { font-size: 15px; opacity: 0.75; }

.btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff; padding: 8px 14px; border-radius: 8px;
  font-size: 14px; cursor: pointer;
}
.btn:hover { background: rgba(255,255,255,0.18); }
.btn.ghost { background: rgba(0,0,0,0.35); }

#hint {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.55); padding: 8px 16px; border-radius: 20px;
  font-size: 13px; opacity: 0.9; pointer-events: none; z-index: 5;
  max-width: 90vw; text-align: center;
}
#hint:empty { display: none; }

#joystick {
  position: absolute; left: 24px; bottom: 24px;
  width: 120px; height: 120px; z-index: 6;
  display: none;
}
#joystick.active { display: block; }
#joystickBase {
  width: 100%; height: 100%; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.25);
  position: relative;
}
#joystickKnob {
  width: 50px; height: 50px; border-radius: 50%;
  background: rgba(255,255,255,0.35);
  position: absolute; left: 35px; top: 35px;
}

#loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 15px; opacity: 0.8; z-index: 10; background: #14171c;
}
#loading.hidden { display: none; }

#lightbox {
  position: absolute; inset: 0; z-index: 20;
  background: rgba(5,6,8,0.92);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 30px;
}
#lightbox.hidden { display: none; }
#lightbox img { max-width: 90vw; max-height: 75vh; box-shadow: 0 10px 40px rgba(0,0,0,0.6); border-radius: 4px; }
#lightbox #lightboxCaption { max-width: 70vw; text-align: center; opacity: 0.85; font-size: 15px; }
#lightboxClose { position: absolute; top: 20px; right: 20px; }
.navArrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-size: 22px; padding: 10px 16px; border-radius: 50%;
}
#lightboxPrev { left: 20px; }
#lightboxNext { right: 20px; }

#autoPreview {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  z-index: 8; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  transition: opacity 0.25s ease;
}
#autoPreview.hidden { display: none; }
#autoPreview img {
  max-width: min(60vw, 620px); max-height: 55vh;
  box-shadow: 0 18px 50px rgba(0,0,0,0.55);
  border-radius: 4px; border: 6px solid rgba(255,255,255,0.94);
}
#autoPreview #autoPreviewCaption {
  background: rgba(10,8,5,0.65); padding: 6px 14px; border-radius: 14px;
  font-size: 13px; max-width: 60vw; text-align: center;
}