/* HRI WebGL template — full-viewport canvas, HRI-branded loading overlay (2026-08-17). */
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #0b1220; }
#unity-container { position: fixed; inset: 0; width: 100%; height: 100%; }
#unity-canvas { display: block; width: 100%; height: 100%; background: #0b1220; }

#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; text-align: center;
  padding: 28px 32px; border-radius: 16px; background: rgba(11, 18, 32, 0.82); border-top: 4px solid #E0851F; max-width: min(92vw, 560px); box-sizing: border-box; }
#hri-emblem { width: 120px; height: 120px; display: block; margin: 0 auto 10px; }
#hri-title { font-family: "Segoe UI", Arial, sans-serif; font-size: 22px; font-weight: 700; color: #ffffff; letter-spacing: 0.3px; }
#hri-sub { font-family: "Segoe UI", Arial, sans-serif; font-size: 13px; color: #cbd5e1; margin-top: 2px; }
#unity-progress-bar-empty { width: 240px; height: 18px; margin: 16px auto 0; background: url('progress-bar-empty-dark.png') no-repeat center / 100% 100%; }
#unity-progress-bar-full { width: 0%; height: 18px; background: url('progress-bar-full-dark.png') no-repeat left / auto 100%; background-color: #E0851F; border-radius: 4px; }
#loading-percent { margin-top: 8px; font-family: "Segoe UI", Arial, sans-serif; font-size: 15px; font-weight: 700; color: #ffffff; }
#loading-tip { margin: 12px auto 0; max-width: 460px; min-height: 40px; font-family: "Segoe UI", Arial, sans-serif; font-size: 14px; line-height: 1.45; color: #ffd24a; }
#hri-disclaimer { margin: 14px auto 0; max-width: 480px; font-family: "Segoe UI", Arial, sans-serif; font-size: 12px; line-height: 1.5; color: #e2e8f0;
  background: rgba(224, 133, 31, 0.14); border: 1px solid rgba(224, 133, 31, 0.6); border-radius: 8px; padding: 8px 12px; }

#hri-corner { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; gap: 8px; z-index: 5; }
#hri-badge { font-family: "Segoe UI", Arial, sans-serif; font-size: 12px; color: #fff; background: rgba(11, 18, 32, 0.7); border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px; padding: 4px 10px; pointer-events: none; }
#unity-fullscreen-button { cursor: pointer; width: 38px; height: 38px; border: 0; border-radius: 8px; background: rgba(11, 18, 32, 0.7) url('fullscreen-button.png') no-repeat center; }
#unity-fullscreen-button:hover { background-color: rgba(224, 133, 31, 0.9); }

#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none; font-family: "Segoe UI", Arial, sans-serif; z-index: 6; }

@media (max-width: 640px) {
  #hri-emblem { width: 84px; height: 84px; }
  #hri-title { font-size: 18px; }
  #hri-badge { display: none; }
}