body { padding: 0; margin: 0 }
#unity-container { position: absolute }
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
#unity-container.unity-mobile { position: fixed; width: 100%; height: 100% }
#unity-canvas { background: url('dragon-soul.jpg') #231F20 no-repeat center; background-size: cover }
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-logo { width: 154px; height: 690px }
#unity-progress-bar-empty { width: 1000px; height: 18px; margin-top: 10px; background: url('progress-bar-empty-dark.png') no-repeat center }
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }
#unity-footer { position: relative }
.unity-mobile #unity-footer { display: none }
#unity-logo-title-footer { float:left; width: 102px; height: 38px; background: url('dragon-footer.png') no-repeat center }
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
#unity-fullscreen-button { cursor:pointer; float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }
#unity-mobile-button { cursor:pointer; float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }

/* --- phones --- */
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; background: #14100c; }
body.is-mobile { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
#unity-container.unity-mobile { position: fixed; transform: none; left: env(safe-area-inset-left, 0px); top: env(safe-area-inset-top, 0px);
  width: calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
.unity-mobile #unity-canvas { width: 100%; height: 100%; touch-action: none; }
.unity-mobile #unity-loading-bar { width: 80vw; max-width: 560px; }
.unity-mobile #unity-logo { width: 100%; height: 22vh; background-size: contain; }
.unity-mobile #unity-progress-bar-empty { width: 100%; height: 14px; background-size: 100% 100%; }
.unity-mobile #unity-progress-bar-full { height: 14px; background-size: 100% 100%; }
#rotate-hint { display: none; position: fixed; inset: 0; z-index: 9000; background: #14100c; color: #f0e2c0; font-family: Georgia, serif; font-size: 22px; text-align: center; align-items: center; justify-content: center; line-height: 1.5; }
#rotate-hint span { font-size: 15px; color: #b8a888; }
#rotate-hint .rotate-icon { font-size: 64px; }
@media (orientation: portrait) { body.is-mobile #rotate-hint { display: flex; } body.is-mobile #unity-container { visibility: hidden; } }
#install-hint { display: none; position: fixed; left: 8px; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); z-index: 8000; align-items: center; gap: 10px; justify-content: space-between; background: rgba(40, 30, 20, 0.95); color: #f0e2c0; font-family: Arial, sans-serif; font-size: 14px; padding: 10px 12px; border-radius: 10px; border: 1px solid #7a5a2a; }
#install-hint button { background: #c98a1b; color: #20140a; border: 0; border-radius: 8px; padding: 8px 16px; font-weight: bold; }

/* --- desktop: fill the window --- */
#unity-container.unity-desktop { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; transform: none; }
#unity-container.unity-desktop #unity-canvas { width: 100%; height: 100%; display: block; }
#unity-container.unity-desktop #unity-footer { position: fixed; right: 0; bottom: 0; height: 38px; width: auto; z-index: 10; opacity: 0.55; }
#unity-container.unity-desktop #unity-footer:hover { opacity: 1; }
#unity-container.unity-desktop #unity-logo-title-footer, #unity-container.unity-desktop #unity-build-title { display: none; }