/* ALWAYS-ON layout — works standalone or inside an iframe. */
:root {
  --eva-bg: #091B24;
  --eva-safe-top: 0px;
  --eva-safe-right: 0px;
  --eva-safe-bottom: 0px;
  --eva-safe-left: 0px;
  --sat: var(--eva-safe-top);
  --sab: var(--eva-safe-bottom);
  --sal: var(--eva-safe-left);
  --sar: var(--eva-safe-right);
}

#eva-root {
  position: relative;
  width: 100%;
  height: 100vh;       /* fallback for browsers < Safari 15.4 / Chrome 108 */
  height: 100svh;      /* small-viewport height: stable when the URL bar shows/hides */
  background: var(--eva-bg);
  overflow: hidden;
}

#unity-canvas {
  position: absolute;
  top: var(--eva-safe-top);
  left: var(--eva-safe-left);
  width: calc(100% - var(--eva-safe-left) - var(--eva-safe-right));
  height: calc(100% - var(--eva-safe-top) - var(--eva-safe-bottom));
  display: block;
  visibility: hidden;             /* revealed by host.js on load complete */
  touch-action: none;             /* canvas consumes its own gestures */
  background: var(--eva-bg);
}

#eva-build-label {
  position: absolute;
  right: calc(var(--sar) + 8px);
  bottom: calc(var(--sab) + 8px);
  z-index: 30;
  color: rgba(255, 255, 255, 0.6);
  font: 500 11px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  user-select: none;
}

/* Branded boot loader — stays up until Unity signals lobby-ready. */
#eva-loading {
  position: absolute; inset: 0; z-index: 25;
  display: flex; align-items: center; justify-content: center;
  background-color: var(--eva-bg);
  background-image: url("img/loading/bg.jpg");
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
  transition: opacity .4s ease;
}
#eva-loading.eva-hidden { opacity: 0; pointer-events: none; }

.eva-loading-col {
  width: min(78vw, 520px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(36px, 8vh, 88px);
}

.eva-loading-logo {
  width: 84%;
  max-width: 420px;
  height: auto;
  /* PNG has equal transparent padding above/below the letters (~181px of 640). */
  aspect-ratio: 800 / 278;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
}

.eva-loading-meter {
  width: 100%;
}

#eva-progress-pct {
  display: block;
  margin: 0 0 10px;
  text-align: center;
  font: 700 clamp(16px, 4.2vw, 22px)/1 system-ui, -apple-system, sans-serif;
  color: #111;
  letter-spacing: 0.02em;
}

.eva-load-track-wrap {
  position: relative;
  width: 100%;
}

.eva-load-track {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
  user-select: none;
}

.eva-load-fill-slot {
  position: absolute;
  left: 3.6%;
  width: 92.8%;
  top: 28%;
  height: 44%;
}

#eva-progress-fill {
  width: 0%;
  height: 100%;
  overflow: hidden;
  border-radius: 999px;
}

#eva-progress-fill img {
  display: block;
  height: 100%;
  width: 100%;
  max-width: none;
  object-fit: fill;
  object-position: left center;
  pointer-events: none;
  user-select: none;
}

#eva-progress-ball {
  position: absolute;
  top: 50%;
  left: 3.6%;
  width: 18%;
  max-width: 56px;
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
}

/* Shared overlay text. */
.eva-overlay-msg {
  color: #fff; font-family: system-ui, -apple-system, sans-serif;
  font-size: 16px; text-align: center; padding: 24px; line-height: 1.4;
}

/* Fatal modal visuals live inlined in index.html (#eva-fatal-css) so a stale
   TemplateData/style.css cache cannot degrade the dialog to bare text. */