html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; background: #140b06 }
/* No text selection or magnifier on long-press/double-tap over the game (CrazyGames mobile
   requirement). Text boxes stay selectable: MobileInput.jslib edits text in a real input. */
body { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none }
input, textarea { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text }

/* The game fills the whole page/iframe. Portals supply the frame and their own fullscreen control. */
#unity-container { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: #140b06 }
#unity-canvas { position: absolute; left: 0; top: 0; display: block; background: #140b06; outline: none; touch-action: none }

#hr-loader {
  position: fixed; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3.5vh;
  background: linear-gradient(rgba(12, 6, 2, 0.55), rgba(12, 6, 2, 0.8)), #140b06 url("page-background.jpg") center / cover no-repeat;
  font-family: Georgia, "Times New Roman", serif;
  transition: opacity 0.4s ease;
}
#hr-loader.hr-done { opacity: 0; pointer-events: none }
#hr-logo { width: min(60vw, 420px); max-height: 52vh; object-fit: contain; filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.6)) }
#hr-progress { width: min(60vw, 420px); height: 10px; border-radius: 5px; background: rgba(255, 235, 190, 0.14); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(232, 180, 90, 0.4) }
#hr-progress-fill { width: 0%; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #b8741c, #f3d27a); transition: width 0.2s ease }
#hr-status { color: #f1dfb8; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; min-height: 1.2em; text-align: center; max-width: 80vw; text-shadow: 0 1px 3px #000 }
#hr-loader.hr-error #hr-progress { display: none }
#hr-loader.hr-error #hr-status { color: #ffb4a8; text-transform: none; letter-spacing: 0 }

/* Rotate prompt (index.html #hr-rotate): touch screens held upright only. Above the loader,
   below MobileInput.jslib's text box. */
#hr-rotate {
  display: none; position: fixed; inset: 0; z-index: 20;
  flex-direction: column; align-items: center; justify-content: center; gap: 2vh; padding: 0 24px;
  background: linear-gradient(rgba(12, 6, 2, 0.7), rgba(12, 6, 2, 0.88)), #140b06 url("page-background.jpg") center / cover no-repeat;
  font-family: Georgia, "Times New Roman", serif; text-align: center;
}
@media (orientation: portrait) and (pointer: coarse) { #hr-rotate { display: flex } }
#hr-rotate-phone { width: 120px; height: 120px; overflow: visible }
#hr-rotate-phone .hr-phone { fill: rgba(243, 210, 122, 0.12); stroke: #f3d27a; stroke-width: 4; stroke-linecap: round; transform-origin: 60px 66px; animation: hr-turn 2.4s ease-in-out infinite }
#hr-rotate-phone .hr-arrow { fill: none; stroke: #b8741c; stroke-width: 4; stroke-linecap: round }
#hr-rotate-title { color: #f3d27a; font-size: 24px; font-weight: bold; text-shadow: 0 2px 4px #000 }
#hr-rotate-note { color: #f1dfb8; font-size: 16px; text-shadow: 0 1px 3px #000 }
@keyframes hr-turn { 0%, 20% { transform: rotate(0) } 55%, 85% { transform: rotate(90deg) } 100% { transform: rotate(0) } }
@media (prefers-reduced-motion: reduce) { #hr-rotate-phone .hr-phone { animation: none; transform: rotate(90deg) } }