html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #1a130c; }
#unity-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; background: #1a130c; }
#loading { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
           padding-bottom: 9vh; background: #1a130c url("keyart.jpg") center / cover no-repeat; }
#loading .bar { width: min(520px, 70vw); height: 18px; border: 2px solid #c9a24a; border-radius: 10px; background: rgba(20, 12, 6, 0.75);
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); overflow: hidden; }
#loading .fill { width: 0; height: 100%; background: linear-gradient(#f6cf5a, #c88a1c); transition: width 0.2s; }
#loading .text { margin-top: 10px; color: #f3e2b5; font: 600 16px Georgia, "Times New Roman", serif; text-shadow: 0 1px 3px #000; }

/* Sign in with Google (Plugins/WebGL/DraventaGoogle.jslib): Google's own button in a small framed window over the game. */
.dr-google-veil { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center;
                  background: rgba(10, 6, 2, 0.6); }
.dr-google-box { position: relative; min-width: 340px; padding: 34px 30px 30px; border: 3px solid #c9a24a; border-radius: 16px;
                 background: #142430; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7); text-align: center; }
.dr-google-title { margin-bottom: 20px; color: #f6cf5a; font: 700 22px "Fira Sans Condensed", Arial, sans-serif; }
.dr-google-slot { display: flex; justify-content: center; min-height: 44px; }
.dr-google-close { position: absolute; top: 6px; right: 10px; width: 34px; height: 34px; border: 0; border-radius: 17px;
                   background: #5a3a18; color: #f3e2b5; font: 700 24px/34px Arial, sans-serif; cursor: pointer; }
.dr-google-close:hover { background: #7a4f22; }