:root { --ts: 1; color-scheme: dark; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #0e0d12; color: #eee;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  overscroll-behavior: none; touch-action: none;
}
#c { position: fixed; left: 0; top: 0; display: block; z-index: 0; }
#css3d { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
#css3d > div { pointer-events: none; }
#look { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
#phone { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
#talk { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
#menus { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
#toast { position: fixed; inset: 0; z-index: 50; pointer-events: none; }

/* glance chevrons (lead: scene/look.js) */
.chev {
  position: absolute; pointer-events: auto; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; border: 0; padding: 0; cursor: pointer;
  background: rgba(14, 13, 18, .28); color: rgba(255, 255, 255, .78);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: opacity .25s, transform .15s, background .2s;
}
.chev:active { transform: scale(.9); background: rgba(14, 13, 18, .5); }
.chev svg { width: 22px; height: 22px; }
.chev.l { left: max(10px, env(safe-area-inset-left)); top: 50%; margin-top: -23px; }
.chev.r { right: max(10px, env(safe-area-inset-right)); top: 50%; margin-top: -23px; }
.chev.u { left: max(10px, env(safe-area-inset-left)); top: 29%; margin-top: -23px; }
body.lefty .chev.u { left: auto; right: max(10px, env(safe-area-inset-right)); }
.chev.d { bottom: max(10px, env(safe-area-inset-bottom)); right: max(12px, env(safe-area-inset-right)); }
body.lefty .chev.d { right: auto; left: max(12px, env(safe-area-inset-left)); }
.chev.hide { opacity: 0; pointer-events: none; }
.chev .badge {
  position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; border-radius: 9px;
  background: #2aa7e8; color: #fff; font: 700 11px/18px -apple-system, sans-serif; padding: 0 5px;
  box-shadow: 0 0 0 2px rgba(14,13,18,.6); display: none;
}
.chev .badge.on { display: block; animation: chevPulse 1.2s ease-in-out infinite; }
@keyframes chevPulse { 50% { transform: scale(1.18); } }
.viewname {
  position: absolute; left: 50%; bottom: max(62px, calc(env(safe-area-inset-bottom) + 58px));
  transform: translateX(-50%); font: 600 11px/1 -apple-system, sans-serif; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.45); opacity: 0; transition: opacity .4s;
}
.viewname.on { opacity: 1; }
.hint3d {
  position: absolute; pointer-events: none; transform: translate(-50%, -100%);
  font: 600 12px/1.2 -apple-system, sans-serif; color: #fff; background: rgba(20,18,28,.78);
  padding: 6px 9px; border-radius: 8px; white-space: nowrap; opacity: 0; transition: opacity .2s;
}
.hint3d.on { opacity: 1; }

.rotate-hint { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; text-align: center;
  background: #0e0d12; color: #e9e3ff; font: 600 17px/1.4 -apple-system, sans-serif; pointer-events: auto; }
.rotate-hint.on { display: grid; }
.rotate-hint small { color: #a79fc4; font-weight: 500; }
.rotate-hint .rotate-icon { display: block; margin: 0 auto 14px; border-radius: 22px; box-shadow: 0 10px 30px rgba(168, 85, 247, .35); }
.rotate-hint .rotate-phone { display: block; margin: 0 auto 6px; color: #c4b5fd; animation: rot 2.4s ease-in-out infinite; }
.rotate-hint b { letter-spacing: .12em; font-size: 13px; color: #f0abfc; }
@keyframes rot { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }