html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #05091a; }
body { font-family: "Segoe UI", Inter, Roboto, Arial, sans-serif; color: #fff; }

#app { position: fixed; inset: 0; }
#unity-canvas { width: 100%; height: 100%; display: block; background: #05091a; outline: none; }

#loading {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #05091a radial-gradient(ellipse at center, #13245a 0%, #05091a 70%);
  background:
    radial-gradient(ellipse at center, rgba(19, 36, 90, 0.55) 0%, rgba(5, 9, 26, 0.92) 72%),
    linear-gradient(180deg, rgba(5, 9, 26, 0.55) 0%, rgba(5, 9, 26, 0.8) 100%),
    url("loading-bg.jpg") center / cover no-repeat, #05091a;
  transition: opacity 0.6s ease;
  text-align: center; padding: 24px; box-sizing: border-box;
}
#loading.done { opacity: 0; pointer-events: none; }
#logo { width: min(520px, 80vw); height: auto; margin-bottom: 28px; }
#loading h1 { margin: 0; font-size: clamp(26px, 4vw, 44px); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
#loading .sub { margin: 8px 0 32px; color: #ffc400; font-size: clamp(14px, 1.6vw, 18px); }
#bar { width: min(520px, 80vw); height: 10px; background: rgba(255, 255, 255, 0.12); border-radius: 5px; overflow: hidden; }
#bar-fill { width: 0; height: 100%; background: linear-gradient(90deg, #8ccf00, #a8ff0a); transition: width 0.2s ease; }
#status { margin: 14px 0 0; font-size: 15px; color: #c9d3ee; }
#loading .hint { position: absolute; left: 24px; right: 24px; bottom: 24px; margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.5); }

#message { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: min(720px, 92vw); }
#message div { padding: 10px 14px; margin-bottom: 8px; border-radius: 6px; font-size: 14px; }
#message .error { background: #c62828; }
#message .warning { background: #f9a825; color: #111; }

#atacadao-vr {
  position: fixed; left: 16px; bottom: 16px; z-index: 50;
  width: 88px; height: 88px; border: 0; border-radius: 44px;
  background: rgba(8, 16, 40, 0.92); color: #fff;
  font: 800 22px "Segoe UI", sans-serif; letter-spacing: 0.04em;
  cursor: pointer; box-shadow: 0 0 0 3px #a8ff0a;
}
#atacadao-vr.on { color: #111; background: #a8ff0a; }
#atacadao-vr-exit {
  position: fixed; top: 16px; right: 16px; z-index: 40;
  border: 0; border-radius: 10px; padding: 12px 18px;
  background: rgba(8, 16, 40, 0.88); color: #a8ff0a;
  font: 700 16px "Segoe UI", sans-serif; letter-spacing: 0.04em;
  opacity: 0; pointer-events: none; cursor: pointer;
}
#atacadao-vr-exit.show { opacity: 1; pointer-events: auto; }
#fullscreen {
  position: absolute; right: 14px; bottom: 14px;
  width: 42px; height: 42px; border: 0; border-radius: 8px;
  background: rgba(10, 20, 60, 0.7); color: #a8ff0a; font-size: 22px; cursor: pointer;
}
#fullscreen:hover { background: rgba(20, 40, 110, 0.9); }
#image-quality {
  position: fixed; right: 70px; bottom: 14px; z-index: 40;
  min-width: 174px; height: 42px; padding: 0 12px;
  border: 1px solid #729e41; border-radius: 8px;
  background: #0a1632; color: #edf5ff; cursor: pointer;
  font: 600 14px "Segoe UI", sans-serif;
}
@media (max-width: 520px) {
  #image-quality { min-width: 140px; right: 64px; padding: 0 6px; font-size: 12px; }
}