/* Keep the opening usable while the full canvas artwork is preparing. */
.dive-stage[data-ready="false"]{background:linear-gradient(#b3dddb 0%,#e7eddb 52%,#45b5bd 67%,#27798a 100%)}
.dive-stage[data-ready="false"] .reef-canvas{visibility:hidden}
.dive-stage[data-ready="false"] .scene-fallback{left:50%;top:auto;bottom:40%;width:101.5%;transform:translate(-50%,10.5%);height:auto}
.dive-stage .load-message{top:auto;bottom:100px;left:auto;right:var(--gutter);transform:none;z-index:7;background:#073e48c9;color:var(--paper);font-size:11px;line-height:1.6;padding:8px 13px;border-radius:18px;max-width:calc(100% - 2 * var(--gutter));white-space:normal}
.dive-stage[data-ready="false"] .scene-bottom .scroll-cue{visibility:hidden}
.dive-stage[data-ready="false"] .scene-controls{visibility:hidden}
.dive-stage .load-message .loading-dot{flex:none}
.asset-error .dive-stage .load-message{display:flex;flex-wrap:wrap;gap:6px 10px;width:min(420px,calc(100% - 2 * var(--gutter)));bottom:16px;right:var(--gutter)}
.asset-error .dive-stage .scene-bottom{display:none}
.asset-error .dive-stage .load-message [data-load-text]{flex:1;min-width:0}
.asset-error .dive-stage .dive-fallback-link{width:100%;justify-content:center;padding:4px 0;min-height:36px;color:var(--paper)}
@media(max-width:600px) and (orientation:portrait){
  .dive-stage[data-ready="false"]{--opening-lift:clamp(0px,calc((100svh - 600px) * .3),calc(100svh * .06));background:linear-gradient(#b3dddb 0%,#e7eddb 35%,#45b5bd 52%,#27798a 100%)}
  .dive-stage[data-ready="false"] .scene-fallback{width:118%;bottom:calc(55% + var(--opening-lift));transform:translate(-50%,10.5%)}
  .dive-stage .load-message{bottom:83px;padding-block:6px;font-size:10px}
  .asset-error .dive-stage .load-message{bottom:16px}
}
@media(max-height:560px) and (min-width:601px){.dive-stage .load-message{bottom:24px}}