:root {
  /* Pairs with <meta name="color-scheme"> in index.html. Stops the browser
     synthesizing its own dark theme for this fixed palette. */
  color-scheme: only light;

  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

html, body {
  margin: 0;
  padding: 0;
  width: 100vw;
  /* dvh (not vh/innerHeight) so this tracks Safari's address bar collapsing
     without needing a JS resize listener. */
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  background: #000;
}

/* Unity's WebGL keyboard support focuses a real, briefly-injected <input>/
   <textarea> for TMP_InputField. iOS Safari auto-zooms on focusing any input
   with a computed font-size under 16px; this keeps that from happening. */
input, textarea {
  font-size: 16px;
}

/* Samsung Internet's dark mode force-darkens every CSS colour on this page,
   and it ignores the color-scheme opt-out. Measured on device: background-color,
   linear-gradient, PNG backgrounds, SVG backgrounds and <img> elements are all
   altered, at every image size and with dithering. A 2D canvas bitmap is not,
   so the whole background and the loading bar are painted into #bg-canvas by
   JS in index.html. Colours live there as hex literals. Do not move them back
   into CSS. */
#bg-canvas {
  position: fixed;
  inset: 0;
  display: block;
  z-index: 0;
}

/* Transparent on purpose. #bg-canvas paints the page background continuously,
   including the area behind the game, so the letterbox band and the game box
   can no longer disagree at the seam. */
#game-container {
  position: fixed;
  z-index: 1;
  background: transparent;
}

#unity-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Blocking modal for a fatal error. It covers the page, because the app is
   unusable at that point and a reload is the only way forward. Warnings never
   reach the player, so no banner style lives here. JS switches the display to
   flex to open it. */
#error-modal {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.55);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

#error-modal-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 360px;
  padding: 24px;
  border-radius: 14px;
  background: #F1F7F7;
  color: #1F2E2E;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

#error-modal-title {
  margin: 0 0 12px;
  font-size: 22px;
  line-height: 1.25;
  color: #8B0000;
}

#error-modal-detail {
  max-height: 30dvh;
  /* Sits last in the card, under the toggle that reveals it. */
  margin: 14px 0 0;
  overflow-y: auto;
  /* Engine messages hold long unbroken strings, such as a URL or a path. */
  overflow-wrap: break-word;
  text-align: left;
  font-size: 13px;
  line-height: 1.45;
  color: #4A5A5A;
  /* The body blocks touch gestures, so allow a drag here to read a long
     message on a phone. */
  touch-action: pan-y;
}

/* The ID rules above outrank the browser default for [hidden], so restate it
   here. Without this, the toggle could not keep the message hidden. */
#error-modal-detail[hidden],
#error-modal-detail:empty {
  display: none;
}

#error-modal-detail p {
  margin: 0 0 8px;
}

#error-modal-detail p:last-child {
  margin-bottom: 0;
}

#error-modal-help {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.4;
}

#error-modal-reload {
  display: block;
  width: 100%;
  /* 48px keeps the button large enough to hit on a touch screen. */
  min-height: 48px;
  padding: 12px 20px;
  border: 0;
  border-radius: 8px;
  background: #8B0000;
  color: #FFFFFF;
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}

#error-modal-reload:active {
  background: #6E0000;
}

/* Deliberately quiet next to the reload button. Reloading is what a player
   needs, and the message underneath is only for whoever debugs the failure. */
#error-modal-toggle {
  display: block;
  margin: 10px auto 0;
  padding: 6px 10px;
  border: 0;
  background: none;
  color: #6B7B7B;
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

#error-modal-toggle:active {
  color: #1F2E2E;
}