/* The page around the player (index.html): the window filled, the logo and a bar on night water while it loads. */
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; overscroll-behavior: none; background: #080e1e; }
#unity-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; background: #080e1e; outline: none;
                touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#loading { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
           gap: 28px; background: #080e1e; color: #58b1d8; font: 15px/1.4 "Fira Sans", system-ui, sans-serif;
           transition: opacity 0.6s ease; }
#loading.done { opacity: 0; pointer-events: none; }
#loading img { width: min(560px, 80vw); height: auto; }
#bar { width: min(420px, 70vw); height: 4px; border-radius: 2px; background: rgba(88, 177, 216, 0.18); overflow: hidden; }
#fill { width: 0; height: 100%; background: #2ec8ff; transition: width 0.2s linear; }
#note { max-width: 32em; text-align: center; margin: 0 16px; opacity: 0.85; }