html, body { width: 100%; height: 100%; padding: 0; margin: 0; background: #fff }

/* Desktop: centered canvas window. */
#unity-container { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) }

/* Mobile: fill the whole viewport, suppress browser gestures/selection. */
body.unity-mobile {
  position: fixed;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
body.unity-mobile #unity-container {
  position: fixed;
  left: 0; top: 0;
  transform: none;
  width: 100%;
  height: 100%;
}

#unity-canvas { background: #fff; display: block }
.unity-mobile #unity-canvas { width: 100%; height: 100%; touch-action: none }

#unity-loading-bar { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; pointer-events: none }
/* Hidden until index.html has fully decoded the logo, so it fades in whole
   instead of painting top-to-bottom while the PNG is still downloading. */
#unity-logo { width: 150px; height: 38px; background: url('jahez-logo-dark.webp') no-repeat center; background-size: contain; opacity: 0; transition: opacity .2s ease }
#unity-logo.ready { opacity: 1 }
#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 20px; box-sizing: border-box; border: 2px solid #ed0000; border-radius: 9px; overflow: hidden }
#unity-progress-bar-full { width: 0%; height: 100%; background: #ed0000 }

#unity-footer { position: relative }
.unity-mobile #unity-footer { display: none }
#unity-logo-title-footer { float:left; width: 102px; height: 38px; background: url('unity-logo-title-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-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }

/* Portrait intro overlay: three full-screen tutorial slides shown on mobile in
   portrait. Tapping advances 1 -> 2 -> 3; slide 3 asks the player to rotate.
   Rotating to landscape hides the overlay (toggled from index.html via the
   .show class). background-size: auto 100% is "fit height" - each slide scales
   to the viewport height at its native aspect ratio, so the baked-in text/dots
   (including the "rotate your phone" prompt) keep their proportions; the
   per-slide background-color fills the pillarbox bars on the sides and covers
   the image while it loads. */
#intro-overlay { display: none }
body.unity-mobile #intro-overlay.show {
  display: block;
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  z-index: 9999;
  background: #000;
  touch-action: none;
}
.intro-slide {
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 100%;
  opacity: 0;
  transition: opacity .25s ease;
}
.intro-slide.active { opacity: 1 }
.intro-slide[data-step="1"] { background-image: url('intro_1.webp'); background-color: #000 }
.intro-slide[data-step="2"] { background-image: url('intro_2.webp'); background-color: #24123f }
.intro-slide[data-step="3"] { background-image: url('intro_3.webp'); background-color: #24123f }