/* HTML shows the responsive splash before the app and its dependencies initialize.
   Near-square viewports (4:5 through 5:4) use the animated square banner. */
#startup-splash { display: none; position: fixed; inset: 0; z-index: 19999; background: #051022; }
html[data-ui-state="initializing"] #startup-splash { display: block; }
#startup-splash > img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Visibility preserves the media-query-sized desktop column while nodes move. */
html[data-ui-state="initializing"] :is(.control-section, #rotate-buttons-float, #mobile-control-container, #music-settings-container, #game-hud > .brand-title, #statusBar, #scoreboard, #next-piece-preview) {
  visibility: hidden !important;
  pointer-events: none !important;
}
@media (min-width: 1040px) {
  html[data-ui-state="initializing"] .table-column { visibility: hidden !important; }
}
#ui-init-error { position: fixed; bottom: 8px; left: 8px; z-index: 20000; max-width: calc(100% - 32px); padding: 8px; color: #fff; background: #652637; font: 12px system-ui, sans-serif; }