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: two full-screen tutorial slides shown on mobile in
   portrait. The artwork includes bleed on the left, right, and top around the
   original 1290x2796 design area. Rendering the 3231px source height at
   3231 / 2796 = 115.56% and anchoring it bottom-center keeps the content at its
   previous scale while cropping only that bleed. */
#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 bottom;
  background-repeat: no-repeat;
  background-size: auto 115.56%;
  opacity: 0;
  transition: opacity .25s ease;
}
.intro-slide.active { opacity: 1 }
.intro-slide[data-step="1"] { background-image: url('intro_2.webp'); background-color: #1a0808 }
.intro-slide[data-step="2"] { background-image: url('intro_1.webp'); background-color: #1a0808 }

/* iOS Safari (not a Home-Screen web app): iPhone has no element Fullscreen API, but
   Safari collapses its toolbar when the document scrolls. In landscape the page is
   made a little taller than the viewport so that scroll can happen; the game
   container stays position:fixed, so scrolling never moves the canvas. Portrait is
   untouched (the intro overlay owns it). Toggled from index.html via .ios-tb. */
@media (orientation: landscape) {
  html.ios-tb { overflow-y: auto; overscroll-behavior-y: none }
  body.unity-mobile.ios-tb { position: static; overflow: visible; height: auto; min-height: calc(100% + 200px) }
}
/* Transparent "swipe up" layer shown only while the toolbar is still detected in
   landscape: a real swipe on it scrolls the document and Safari hides the bar. */
#ios-swipe-hint { position: fixed; inset: 0; z-index: 30; display: none; touch-action: pan-y; background: transparent }
#ios-swipe-hint.show { display: block }
#ios-swipe-hint .pill { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; background: rgba(0,0,0,.7); color: #fff; font: 600 14px/1.2 -apple-system, "Segoe UI", Arial, sans-serif; white-space: nowrap; pointer-events: none }