/* HOLLOWMERE — WebGL template.
   Palette and type lifted from Docs/UI_Mockups so the page around the game reads as part of it. */

@font-face {
  font-family: 'EBGaramond';
  /* Subset to Latin basic (24 KB, from 851 KB). The title has to render before the game has
     downloaded anything, so the font it needs cannot be a slow download itself. */
  src: url('ebgaramond-subset.woff2') format('woff2');
  font-display: block;   /* block, not swap — a flash of Arial then Garamond looks broken */
}

:root {
  --amber:      #d9a066;
  --amber-dim:  #b8834f;
  --ink:        #dfe4ea;
  --ink-faint:  #5d6874;
  --hairline:   rgba(255, 255, 255, 0.07);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #05080c;
  /* The same vignette the panels sit on, so the letterbox isn't dead black */
  background: radial-gradient(120% 120% at 18% 12%, #202b38 0%, #131b25 38%, #0a0e15 70%, #05080c 100%);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* ── The 10% border. Everything the game owns lives inside this. ─────────── */
#unity-container {
  position: fixed;
  inset: 10%;                 /* 10% of the viewport on every edge */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 16:9, as large as fits inside the container.
   Sized in JS (see fitCanvas in index.html), NOT by CSS aspect-ratio. Two reasons:
   1. `aspect-ratio` with `width:100%` silently stretches when the container is WIDER than
      16:9 — max-height clamps the height but the fixed width won't follow, so you get a
      too-wide canvas. That crops the game, badly, because the CanvasScaler matches width.
   2. Unity rewrites the canvas width/height attributes every resize, so its intrinsic
      ratio isn't ours to rely on.
   The border and shadow live on the frame wrapper, so they can't be included in the
   canvas's own box and skew the ratio. */
#unity-frame {
  position: relative;
  /* ⚠️ No `line-height: 0` here. The canvas is display:block so there's no descender gap to
     kill, and the value inherits into the loading cover — collapsing the title's line box so
     the progress bar lands on top of it. */
  border: 1px solid var(--hairline);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
#unity-canvas {
  display: block;
  background: #05080c;
  outline: none;
}

/* ── Loading screen ─────────────────────────────────────────────────────── */
#loading-cover {
  position: absolute;
  inset: 0;
  line-height: normal;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 42px;
  background: radial-gradient(120% 120% at 50% 40%, #131b25 0%, #0a0e15 60%, #05080c 100%);
  z-index: 3;
  transition: opacity 0.6s ease;
}
#loading-cover.done { opacity: 0; pointer-events: none; }

#loading-title {
  font-family: 'EBGaramond', Georgia, serif;
  font-size: clamp(30px, 6.2vw, 84px);
  letter-spacing: 0.30em;
  text-indent: 0.30em;             /* letter-spacing adds a trailing gap; this re-centres it */
  color: var(--ink);
  white-space: nowrap;
}

#loading-sub {
  font-size: clamp(10px, 1.1vw, 13px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: -28px;
}

#loading-track {
  width: min(340px, 46%);
  height: 2px;
  background: var(--hairline);
  position: relative;
  overflow: hidden;
}
#loading-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--amber);
  box-shadow: 0 0 14px rgba(217, 160, 102, 0.55);
  transition: width 0.25s ease-out;
}

/* ── Fullscreen button, bottom-right of the game area ───────────────────── */
#fullscreen-button {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 14, 21, 0.55);
  border: 1px solid rgba(217, 160, 102, 0.30);
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.35;
  transition: opacity 0.18s ease, border-color 0.18s ease;
  z-index: 4;
}
#fullscreen-button:hover { opacity: 1; border-color: var(--amber); }
#fullscreen-button svg { stroke: var(--amber); fill: none; stroke-width: 1.6; }
#fullscreen-button.hidden { display: none; }

/* ── Warning ribbon (Unity calls this for non-fatal problems) ───────────── */
#unity-warning {
  position: absolute;
  left: 50%;
  top: 16px;
  transform: translate(-50%);
  z-index: 5;
  font-size: 13px;
}
#unity-warning > div {
  background: rgba(10, 14, 21, 0.92);
  border: 1px solid var(--amber-dim);
  color: var(--ink);
  padding: 8px 14px;
  margin-bottom: 6px;
  border-radius: 3px;
}

/* Footer strip, matching the mockups' build line */
#unity-footer {
  position: fixed;
  left: 0; right: 0; bottom: 14px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.10em;
  color: #39424e;
  pointer-events: none;
}

/* On a narrow screen the 10% border wastes most of the display — cut it back so
   the game is still usable on a laptop in a small window or a phone in landscape. */
@media (max-width: 900px), (max-height: 620px) {
  #unity-container { inset: 3%; }
  #loading-cover { gap: 26px; }
}