/* City presentation bundle — dark field, translucent controls, amber accent. */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; }
body {
  background: #101413;
  color: #e9ece8;
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  touch-action: none;
}
#stage { position: fixed; inset: 0; }
#stage canvas { display: block; width: 100%; height: 100%; touch-action: none; }

#masthead {
  position: fixed;
  top: 0; left: 0; right: 0;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 18px 12px;
  background: linear-gradient(#101413ee, #10141300);
  pointer-events: none;
}
#title { font-size: 19px; font-weight: 650; letter-spacing: .01em; }
#caption { margin-top: 2px; font-size: 11.5px; color: #9aa39e; }

#views {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  padding: 6px;
  border-radius: 22px;
  background: rgba(18, 22, 21, .72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(233, 236, 232, .09);
}
#views button {
  border: 0;
  border-radius: 16px;
  min-height: 40px;
  padding: 8px 16px;
  font: 600 13px/1 inherit;
  color: #cfd5d0;
  background: transparent;
}
#views button.active {
  color: #16130c;
  background: #e6a63f;
}

#loading {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 10px;
  justify-items: center;
  font-size: 13px;
  color: #9aa39e;
  background: #101413;
  transition: opacity .5s;
}
#loading.done { opacity: 0; pointer-events: none; }
#loading span {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid #2c3431;
  border-top-color: #e6a63f;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }