/* Colours and radii from DESIGN.md: dark, dark-hover, yellow, failed-chip and failed-text; pill (half the height) and nav-tile rounding. */
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #2F2A26; }
/* Never zero-sized: the closing dialog hides the frame for a moment, and a 0x0 backbuffer makes WebGL errors. */
#unity-canvas { display: block; width: 100%; height: 100%; min-width: 1px; min-height: 1px; outline: none; background: #2F2A26; touch-action: none; }
#player-loading { position: fixed; left: 50%; top: 50%; width: min(280px, 60vw); height: 12px; transform: translate(-50%, -50%); border-radius: 6px; background: #443C36; overflow: visible; }
#player-loading[hidden] { display: none; }
#player-bar { width: 0; height: 100%; border-radius: 6px; background: #F7D84A; transition: width .2s; }
#player-message { position: fixed; left: 16px; right: 16px; top: 16px; padding: 12px 16px; border-radius: 14px; background: #443C36; color: #FFFFFF; font: 700 15px/1.4 system-ui, sans-serif; }
#player-message.error { top: 50%; transform: translateY(-50%); background: #FFE3E4; color: #B42A31; }
#player-message[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { #player-bar { transition: none; } }

#player-percent { position: absolute; inset: 24px -30px auto; color: #FFFFFF; text-align: center; font: 700 16px/1.4 system-ui, sans-serif; }