/* The page around the game: a full-window canvas, a root for the interface layer, the boot loader and the
   debug overlay. Screens and the HUD are styled by the interface layer (src/ui). */

:root {
  --ink: #07080a;
  --paper: #e9e3cf;
  --sodium: #ff8f3a;
  --violet: #8d86c9;
  --boot-progress: 0;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  font-family: Georgia, 'Times New Roman', serif;
}

.game-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
}

.ui-root {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.ui-root > * {
  pointer-events: auto;
}

/* The boot loader (index.html): the title's own layout on bare ink, before anything is drawn. The wordmark
   is a sodium lamp striking with the real progress (main.js sets --boot-progress from the bytes downloaded
   and the stages built): dull red, then pink, then orange, as a Council lamp comes to law. Under it the
   stage's line; along the foot a ruled measure and the figure. Lengths are multiples of --u, as in src/ui. */

@property --boot-progress { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --boot-percent { syntax: '<integer>'; inherits: true; initial-value: 0; }
@property --boot-flicker { syntax: '<number>'; inherits: true; initial-value: 0; }

@font-face {
  font-family: 'Big Shoulders Display'; font-style: normal; font-weight: 700 900; font-display: block;
  src: url('./assets/ui/fonts/big-shoulders-display-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spectral'; font-style: italic; font-weight: 300; font-display: swap;
  src: url('./assets/ui/fonts/spectral-300-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Tiro Devanagari Hindi'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('./assets/fonts/tiro-devanagari-hindi-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

.boot-loader {
  --u: clamp(0.8px, min(0.0926vh, 0.0521vw), 2.4px);
  --boot-percent: calc(var(--boot-progress) * 100);
  /* The strike: a lamp's colour at this much of its output. */
  --boot-warming: color-mix(in oklab, #6a120c, #f7718a clamp(0%, calc(var(--boot-progress) * 230%), 100%));
  --boot-strike: color-mix(in oklab, var(--boot-warming), var(--sodium) clamp(0%, calc((var(--boot-progress) - 0.42) * 190%), 100%));
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(120% 90% at 18% 86%, #120c0a 0%, var(--ink) 58%);
  transition: opacity 0.9s ease 0.15s, --boot-progress 0.45s linear;
}

.boot-loader > * {
  transition: opacity 0.3s ease;
}

.boot-loader[data-state='ready'] {
  opacity: 0;
  pointer-events: none;
}

/* The words go first, so the title's own wordmark never rises through the loader's. */
.boot-loader[data-state='ready'] > * {
  opacity: 0;
}

.boot-loader-place {
  position: absolute;
  top: calc(40 * var(--u));
  left: calc(72 * var(--u));
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: calc(12 * var(--u));
  font: 700 calc(21 * var(--u)) / 1 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0.72;
}

.boot-loader-place span {
  font: 400 calc(23 * var(--u)) / 1 'Tiro Devanagari Hindi', Georgia, serif;
  color: #f5a655;
}

/* The city the loader names is the edition's (index.html sets data-edition on <html> before anything loads):
   the original's unless the page was asked for another. */
.boot-loader-place[data-edition] { display: none; }
html[data-edition='france'] .boot-loader-place { display: none; }
html[data-edition='france'] .boot-loader-place[data-edition='france'] { display: flex; }

.boot-loader-head {
  position: absolute;
  left: calc(72 * var(--u));
  bottom: calc(92 * var(--u));
  max-width: 76%;
}

.boot-loader-mark {
  margin-left: -0.04em;
  font: 900 calc(214 * var(--u)) / 0.86 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--boot-strike);
  /* A lamp that has not caught is still there: the letters' edges, in cold brass. */
  -webkit-text-stroke: max(1px, calc(1 * var(--u))) rgba(200, 168, 106, 0.2);
  opacity: calc((0.34 + 0.66 * var(--boot-progress)) * (1 - var(--boot-flicker) * (1 - var(--boot-progress)) * 0.55));
  text-shadow: 0 0 calc(var(--boot-progress) * 70 * var(--u)) color-mix(in srgb, var(--boot-strike) 38%, transparent);
  /* The ignitor catches in fits before the arc holds; the fits die away as the lamp comes up. */
  animation: boot-ignitor 3.1s steps(1, end) infinite;
}

@keyframes boot-ignitor {
  0%, 100% { --boot-flicker: 0; }
  6% { --boot-flicker: 1; }
  8% { --boot-flicker: 0; }
  41% { --boot-flicker: 0.7; }
  43% { --boot-flicker: 0; }
  45% { --boot-flicker: 1; }
  49% { --boot-flicker: 0; }
  83% { --boot-flicker: 0.5; }
  85% { --boot-flicker: 0; }
}

.boot-loader-line {
  margin-top: 0.36em;
  min-height: 1em;
  font: italic 300 calc(50 * var(--u)) / 1 'Spectral', Georgia, serif;
  color: #f5a655;
}

.boot-loader[data-state='failed'] .boot-loader-mark {
  animation: none;
  color: #6a120c;
  text-shadow: none;
}

.boot-loader[data-state='failed'] .boot-loader-line {
  font-size: calc(24 * var(--u));
  line-height: 1.3;
  color: var(--sodium);
  overflow-wrap: anywhere;
}

/* The measure: a ledger's rule with a tick every tenth, inked in sodium as far as the loading has come. */
.boot-loader-bar {
  position: absolute;
  left: calc(72 * var(--u));
  right: calc(160 * var(--u));
  bottom: calc(40 * var(--u));
  height: calc(7 * var(--u));
  border-bottom: max(1px, calc(1 * var(--u))) solid rgba(233, 227, 207, 0.2);
  background: repeating-linear-gradient(to right, rgba(233, 227, 207, 0.3) 0 max(1px, calc(1 * var(--u))), transparent max(1px, calc(1 * var(--u))) 10%);
}

.boot-loader-bar span {
  position: absolute;
  left: 0;
  bottom: calc(-1 * max(1px, calc(1 * var(--u))));
  height: max(2px, calc(2 * var(--u)));
  width: calc(var(--boot-progress) * 100%);
  background: var(--boot-strike);
  box-shadow: 0 0 calc(10 * var(--u)) var(--boot-strike);
}

.boot-loader-percent {
  position: absolute;
  right: calc(72 * var(--u));
  bottom: calc(34 * var(--u));
  font: 800 calc(21 * var(--u)) / 1 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--paper);
  opacity: 0.72;
  counter-reset: boot-percent var(--boot-percent);
}

.boot-loader-percent::after {
  content: counter(boot-percent) '%';
}

.boot-loader[data-state='failed'] .boot-loader-percent {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .boot-loader, .boot-loader > * { transition-duration: 0.01s; transition-delay: 0s; }
  .boot-loader-mark { animation: none; }
}

.debug-overlay {
  position: fixed;
  top: 8px;
  right: 8px;
  margin: 0;
  padding: 6px 8px;
  font: 11px/1.35 ui-monospace, Menlo, monospace;
  color: #cfe7d8;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
  white-space: pre;
}