:root {
  --bg: #141418;
  --fg: #d8dbe0;
  --ui-fade: 600ms;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--fg);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
#poster, #stage {
  position: fixed; inset: 0; width: 100%; height: 100%;
}
#poster img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  color: transparent; font-size: 0;   /* no alt text or icon if the image is missing */
  transition: opacity 1200ms ease;
}
#stage {
  display: block; touch-action: none; opacity: 0;
  transition: opacity 1200ms ease;
}
body.scene-ready #stage { opacity: 1; }
body.scene-ready #poster img { opacity: 0; }
body.fallback #stage { display: none; }
body.fallback #poster img { opacity: 1; }
body.fallback #ui { display: none; }

#ui {
  position: fixed; left: 0; right: 0; bottom: max(24px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  opacity: 0; pointer-events: none;
  transition: opacity var(--ui-fade) ease;
}
body.ui-visible #ui { opacity: 1; pointer-events: auto; }
/* Keyboard users tabbing into the buttons must not have them fade away mid-use. */
body #ui:focus-within { opacity: 1; pointer-events: auto; }
#caption {
  font-size: 15px; letter-spacing: 0.08em; text-transform: lowercase;
  color: rgba(216, 219, 224, 0.85); text-shadow: 0 1px 8px rgba(0,0,0,0.8);
}
#buttons { display: flex; gap: 10px; }
#buttons button {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(216,219,224,0.25);
  background: rgba(20,20,24,0.55); color: var(--fg);
  font-size: 22px; line-height: 1; cursor: pointer;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
#buttons button:hover { border-color: rgba(216,219,224,0.6); }
#toggle { font-size: 14px; }
#mark {
  position: fixed; right: max(18px, env(safe-area-inset-right)); top: max(16px, env(safe-area-inset-top));
  font-size: 13px; letter-spacing: 0.3em; text-transform: lowercase;
  color: rgba(216,219,224,0.45); user-select: none;
}
@media (max-width: 480px) {
  #caption { font-size: 13px; }
  #buttons button { width: 44px; height: 44px; }
}