/* Page de chargement de la version web : la même composition que l'écran titre du jeu
   (maquette de 1672 x 941 px, layout.json du kit du 24/09/2026), avec la barre de progression à
   l'emplacement du bouton « Nouvelle partie ». */

:root {
  /* Échelle de la maquette : la composition entière tient dans la fenêtre, centrée. */
  --scale: min(calc(100vw / 1672), calc(100vh / 941));
  --ink: #0d0d0d;
  --paper: #f2f2f2;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--ink);
}

/* Le jeu occupe toute la fenêtre. */
#game-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  background: var(--ink);
}

#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--ink) url("background.jpg") center / cover no-repeat;
  transition: opacity 0.4s ease-out;
}

#loading-screen.is-done {
  opacity: 0;
  pointer-events: none;
}

#loading-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--scale) * 1672);
  height: calc(var(--scale) * 941);
  transform: translate(-50%, -50%);
}

#loading-alpha {
  position: fixed;
  top: calc(var(--scale) * 14);
  left: calc(var(--scale) * 18);
  width: calc(var(--scale) * 210);
}

/* Logo et bouton aux tailles de l'écran titre du jeu (TitleScreen.cs) : logo à 85 %, bouton à
   70 % de la maquette, autour de leur centre. */
#loading-logo {
  position: absolute;
  top: calc(var(--scale) * 97);
  left: calc(var(--scale) * 360);
  width: calc(var(--scale) * 952);
  height: calc(var(--scale) * 476);
  object-fit: contain;
}

/* Emplacement du bouton « Nouvelle partie » de l'écran titre (599,5, 600, 473 x 95). */
#loading-progress {
  position: absolute;
  top: calc(var(--scale) * 600);
  left: calc(var(--scale) * 599.5);
  width: calc(var(--scale) * 473);
  height: calc(var(--scale) * 95);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#loading-bar {
  position: relative;
  height: calc(var(--scale) * 44);
  border: calc(var(--scale) * 5) solid var(--paper);
  background: var(--ink);
  box-shadow: 0 0 0 calc(var(--scale) * 3) var(--ink);
}

#loading-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: var(--paper);
}

#loading-error {
  display: none;
  margin: calc(var(--scale) * 16) 0 0;
  padding: calc(var(--scale) * 12);
  background: var(--ink);
  color: var(--paper);
  font: calc(var(--scale) * 22) / 1.3 monospace;
}

#loading-screen.has-error #loading-error {
  display: block;
}