html, body { margin: 0; height: 100%; overflow: hidden; background: #111; font-family: system-ui, sans-serif; touch-action: none; }
#app canvas { display: block; }

#room {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  padding: 6px 16px; border-radius: 999px;
  background: rgba(20, 16, 12, 0.55); color: #f6ead8;
  font-size: 15px; letter-spacing: 0.04em; pointer-events: none;
  backdrop-filter: blur(4px);
}
#room:empty { display: none; }

#minimap {
  position: fixed; top: 12px; right: 12px;
  background: rgba(20, 16, 12, 0.5); border-radius: 8px;
  pointer-events: none;
}

#crosshair {
  position: fixed; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px;
  border-radius: 50%; background: rgba(255, 255, 255, 0.7); display: none;
}
body.locked #crosshair { display: block; }

#overlay {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: rgba(10, 8, 6, 0.45); cursor: pointer; z-index: 10;
}
#overlay.hidden { display: none; }
#overlay .card {
  max-width: 420px; margin: 16px; padding: 20px 24px; border-radius: 12px;
  background: rgba(30, 24, 18, 0.85); color: #f3e7d6; text-align: center;
}
#overlay h1 { margin: 0 0 8px; font-size: 20px; font-weight: 600; }
#overlay p { margin: 0; line-height: 1.5; }
.mob, .desk { display: none; }
body.walk .desk { display: block; }
body.walk .loading { display: none; }
@media (pointer: coarse) { body.walk .mob { display: block; } body.walk .desk { display: none; } }

/* touch joysticks */
#touch-zone { position: fixed; inset: 0; z-index: 1; display: none; }
@media (pointer: coarse) { #touch-zone { display: block; } }
.stick {
  position: fixed; width: 120px; height: 120px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35); background: rgba(0, 0, 0, 0.15);
  pointer-events: none; z-index: 2; display: none;
}
.stick.on { display: block; }
.stick .knob {
  position: absolute; left: 35px; top: 35px; width: 50px; height: 50px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
}
@media (max-width: 600px) { #minimap { transform: scale(0.7); transform-origin: top right; } }

#buttons {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: flex; gap: 10px; z-index: 5;
}
#buttons button {
  font: inherit; font-size: 14px; color: #f6ead8; cursor: pointer;
  padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(255, 230, 200, 0.25);
  background: rgba(20, 16, 12, 0.6); backdrop-filter: blur(4px);
}
#door-btn, #lift-btn { display: none; }
#door-btn.show, #lift-btn.show { display: block; }
#fade { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.45s ease; z-index: 15; }
#fade.on { opacity: 1; }
body.orbit #door-btn, body.orbit #lift-btn, body.orbit #minimap, body.orbit #crosshair { display: none; }
body.orbit #app canvas { cursor: grab; }
body.locked #buttons { opacity: 0.6; }

/* ---------- guided tour (default): big, simple, remote/touch friendly ---------- */
#tour-bar { display: none; }
body.tour #overlay { cursor: default; }
body.tour #overlay .card { max-width: 90vw; padding: 3vh 4vw; }
body.tour #overlay h1 { font-size: clamp(28px, 3.5vw, 72px); }
body.tour #overlay p { font-size: clamp(20px, 2.4vw, 52px); }
body.tour #buttons, body.tour #minimap, body.tour #crosshair,
body.tour #touch-zone, body.tour .stick { display: none !important; }
body.tour #room {
  top: 5vh; font-size: clamp(22px, 2.8vw, 68px); font-weight: 600;
  padding: 0.35em 1.1em; background: rgba(20, 16, 12, 0.7);
}
body.tour #tour-bar {
  position: fixed; left: 50%; bottom: 6vh; transform: translateX(-50%);
  display: flex; gap: clamp(12px, 2vw, 40px); z-index: 5;
}
#tour-bar button {
  font: inherit; font-size: clamp(18px, 2.2vw, 56px); font-weight: 600; color: #fff6e8;
  min-height: 64px; padding: 0.45em 1.1em; border-radius: 999px; cursor: pointer;
  border: 3px solid rgba(255, 230, 200, 0.55); background: rgba(20, 16, 12, 0.78);
  white-space: nowrap;
}
#tour-bar button:focus-visible { outline: 6px solid #ffcf70; outline-offset: 4px; background: #4a3720; }
#tour-bar button:active { background: #4a3720; }