html, body { margin: 0; height: 100%; background: #070a1f; overflow: hidden; }
canvas { position: fixed; inset: 0; display: block; touch-action: none; cursor: grab; }
canvas:active { cursor: grabbing; }
/* no-WebGL2 fallback: a lit colour field, same palette, slowly drifting */
.nogl body { background:
  radial-gradient(120% 60% at 50% 100%, #ffb300 0%, #ff4d00 18%, #7a0f2b 42%, #0b4f5c 68%, #070a1f 100%);
  background-size: 100% 200%; animation: drift 24s ease-in-out infinite alternate; }
.nogl canvas { display: none; }
@keyframes drift { to { background-position: 0 100%; filter: hue-rotate(60deg); } }
/* corner link row on the home page: quiet, below the hints, never over the middle of the scene */
.corner { position: fixed; left: max(8px, env(safe-area-inset-left)); bottom: max(6px, env(safe-area-inset-bottom)); display: flex; gap: 6px; pointer-events: none; z-index: 0; font: 12px/1.3 ui-sans-serif, system-ui, sans-serif; }
.corner a { pointer-events: auto; padding: 3px 10px; border-radius: 999px; background: rgba(7,10,31,.72); color: #f2f0e0; text-decoration: none; opacity: .75; }
.corner a:hover, .corner a:focus-visible { opacity: 1; }
/* first-visit movement hint (client/main.ts moveHint) */
.hint { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(92vw, 30rem); box-sizing: border-box; padding: 10px 16px; border-radius: 999px; background: rgba(7,10,31,.72); color: #f2f0e0; font: 15px/1.4 ui-sans-serif, system-ui, sans-serif; text-align: center; pointer-events: none; transition: opacity .8s; }
.hint.gone { opacity: 0; }
.portal-hint { position: fixed; left: 50%; top: max(20px, env(safe-area-inset-top)); transform: translateX(-50%); max-width: 90vw; box-sizing: border-box; padding: 8px 16px; border-radius: 999px; background: rgba(7,10,31,.72); color: #f2f0e0; font: 15px/1.4 ui-sans-serif, system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; opacity: 0; transition: opacity .25s; }
.portal-hint.on { opacity: 1; }
/* from first paint until the first frame draws (client/main.ts removes #loading) */
.loading { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #f2f0e0; opacity: .6; font: 15px/1.4 ui-sans-serif, system-ui, sans-serif; letter-spacing: .04em; pointer-events: none; transition: opacity .4s; }
.loading.gone { opacity: 0; }
.nogl-note { width: min(88vw, 28rem); text-align: center; opacity: .85; }