body { padding: 0; margin: 0 }
#unity-container { position: absolute }
body { background: #09121d; overflow: hidden }
/* The game fills the whole window on every device and orientation (under the notch too, with
   viewport-fit=cover); the game keeps its buttons inside the safe-area insets and its own
   layouts adapt to any aspect. */
#unity-container.unity-desktop, #unity-container.unity-mobile { position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh; overflow: hidden }
#unity-canvas { background: #1F1F20 }
.unity-desktop #unity-canvas, .unity-mobile #unity-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100% }
#unity-loading-bar { position: fixed; inset: 0; z-index: 5; overflow: hidden; isolation: isolate; background: #09121d; color: #fff; font-family: system-ui, sans-serif }
#unity-loading-bar::before { content: ""; position: absolute; inset: 0; background: url('loading-arena.jpg') center bottom / cover; filter: blur(18px) brightness(.45); transform: scale(1.08) }
/* A soft shade under the progress text, over the full-bleed art. */
#unity-loading-bar::after { content: ""; position: absolute; inset: auto 0 0 0; height: 30%; z-index: 1; background: linear-gradient(transparent, rgba(5, 9, 16, .82)); pointer-events: none }
/* Wide windows show the whole key art, logo included, cropped only on the right or bottom. */
.loading-art { position: absolute; inset: 0; width: 100%; height: 100% }
.portrait-art, .loading-brand { display: none }
.loading-status { position: absolute; z-index: 2; inset: auto 0 max(3.5%, env(safe-area-inset-bottom)) 0; width: min(52%, 800px); margin: auto; display: flex; flex-direction: column; align-items: center; gap: clamp(5px, 1.35vh, 10px); text-align: center; font-size: clamp(15px, 3vh, 21px); text-shadow: 0 2px 5px #000 }
#loading-message { font-weight: 600 }
#loading-progress { appearance: none; -webkit-appearance: none; width: 100%; height: clamp(5px, .82vh, 8px); border: 1px solid #233651; box-sizing: border-box; background: #101f35; overflow: hidden }
#loading-progress::-webkit-progress-bar { background: #101f35 }
#loading-progress::-webkit-progress-value { background: #ffec25 }
#loading-progress::-moz-progress-bar { background: #ffec25 }
#loading-percent { font-size: .9em; font-variant-numeric: tabular-nums }
#loading-retry { border: 0; border-radius: 5px; padding: .7em 1.4em; background: #ffce28; color: #271a0c; font: inherit; font-weight: 700 }
#unity-loading-bar [hidden] { display: none }
/* Portrait and squarer windows (below 16:9): the snake and castle fill the screen, the logo sits on top. */
@media (max-aspect-ratio: 7/4) {
  .landscape-art { display: none }
  .portrait-art { display: block }
  .loading-brand { display: block; position: absolute; z-index: 2; width: min(42vw, 30vh, 260px); height: auto; left: max(4%, env(safe-area-inset-left)); top: max(3%, env(safe-area-inset-top)); mask-image: radial-gradient(ellipse farthest-side, #000 80%, transparent) }
  .loading-status { width: min(80%, 560px); bottom: max(5%, env(safe-area-inset-bottom)); gap: 11px; font-size: clamp(16px, 4.2vw, 21px) }
}
#unity-footer { position: absolute; right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); z-index: 2 }
.unity-mobile #unity-footer { display: none }
#unity-build-title { display: none }
#unity-fullscreen-button { cursor: pointer; width: 34px; height: 34px; border: 0; border-radius: 6px; padding: 0; background: #0b1424aa url('fullscreen-button.png') no-repeat center; opacity: .45; transition: opacity .15s }
#unity-fullscreen-button:hover, #unity-fullscreen-button:focus-visible { opacity: 1 }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }