/* iOS: `100%` and `100vh` resolve against the layout viewport, not the glass, so a
   "full height" shell stops short and leaves a band of bare background along the
   bottom — worst in a home-screen app. Newest unit last so older engines take the
   fallback. viewer.js runs the app in FILLMODE_NONE precisely so that these rules,
   and not `window.innerHeight`, decide how big the canvas is.
   See TROY/CLAUDE.md. */
html, body {
  margin: 0; background: #0b0b0c; overflow: hidden;
  height: 100%; height: -webkit-fill-available; height: 100dvh;
  font: 13px/1.5 -apple-system, BlinkMacSystemFont, sans-serif; color: #e8e4dc;
}
#application-canvas {
  display: block; width: 100%; touch-action: none;
  height: 100%; height: -webkit-fill-available; height: 100dvh;
  opacity: 0; transition: opacity 0.7s ease;
}
#application-canvas.ready { opacity: 1; }
#status {
  position: fixed; left: 12px; bottom: 12px; opacity: 0.6;
}
#placeholder {
  display: none; position: fixed; inset: 0; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; text-align: center;
}
#placeholder .title { font-size: 15px; letter-spacing: 0.02em; }
#placeholder .msg { opacity: 0.5; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
a.back {
  position: fixed; left: 12px; top: 12px; color: #e8e4dc; opacity: 0.6;
  text-decoration: none; font-size: 12px; letter-spacing: 0.04em;
}
a.back:hover { opacity: 1; }
#hint {
  position: fixed; left: 50%; bottom: 24px;
  /* Sits on stone, grass and sky by turns — it needs its own ground to be
     legible, not just a text-shadow. */
  padding: 8px 16px; border-radius: 999px; white-space: nowrap;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: #f6f3ec; background: rgba(10, 10, 12, 0.58);
  border: 1px solid rgba(246, 243, 236, 0.18);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  opacity: 0; transform: translateX(-50%) translateY(7px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
/* Rising as it arrives is what catches the eye — it lets the hint be noticed
   without having to be loud. */
#hint.show { opacity: 0.95; transform: translateX(-50%) translateY(0); }