/* =========================================================================================
   The Scene - the look of the loading screen.

   ⚠ THIS FILE IS THE ART CHAT'S. Everything visible about the loading screen is here, and the
   colours and fonts are named variables in the block directly below. Nothing in index.html has
   to change to restyle this, and nothing here affects whether the game loads.

   The placeholder look is deliberately plain - dark ground, one accent, no imagery. It is not an
   art direction and is not meant to survive; it exists so the mechanism can ship and be measured
   before anyone has decided what the game looks like.
   ========================================================================================= */

:root {
  /* ---- THE SWAPPABLE PART ---- */
  --ground:      #0d0a14;   /* the page behind everything */
  --ink:         #efeaf6;   /* the Spanish word itself - the brightest thing on screen */
  --ink-soft:    #a99fc0;   /* meanings and example sentences */
  --ink-quiet:   #5f5775;   /* the wait text and anything apologetic */
  --accent:      #9760e6;   /* the progress bar and the brand mark */
  --card-line:   #241c33;   /* the hairline under the word */

  --face-display: "Georgia", "Times New Roman", serif;   /* the word */
  --face-text:    system-ui, -apple-system, "Segoe UI", sans-serif;  /* everything else */
}

/* The page is the game. No scrollbars, no margins, nothing to click around the edges. */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--ground);
}

/* The game canvas fills the window. Roadmap section 3: Play opens the game full-screen on its
   own page - so there is deliberately no frame, title bar or border drawn around it. */
#unity-canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ground);
}

/* ---------------------------------------------------------------------------------------
   THE LOADING SCREEN
   Covers the canvas completely. Unity paints the canvas black while it boots, and a black
   rectangle appearing behind a half-transparent overlay reads as a glitch, so this is opaque.
   --------------------------------------------------------------------------------------- */
#load {
  position: fixed;
  inset: 0;
  z-index: 10;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background: var(--ground);
  font-family: var(--face-text);
  text-align: center;
  padding: 24px;
  box-sizing: border-box;

  /* Fades rather than cuts when the game is ready - see the 600ms in index.html, which must
     stay longer than this transition or the screen would vanish mid-fade. */
  transition: opacity 0.5s ease;
}

#load.done { opacity: 0; pointer-events: none; }

/* ---- ART SLOT: the brand mark ---- */
#brand {
  font-family: var(--face-display);
  font-size: 15px;
  letter-spacing: 0.42em;   /* wide tracking is doing all the work while there is no logo */
  text-indent: 0.42em;      /* letter-spacing pads the right side only; this re-centres it */
  color: var(--accent);
  margin-bottom: 4px;
}

#brand-sub {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  color: var(--ink-quiet);
  text-transform: lowercase;
  margin-bottom: 52px;
}

/* ---- The word ---- */
#word-card { max-width: 620px; margin-bottom: 56px; }

#word {
  font-family: var(--face-display);
  /* Scales with the window so it stays the largest thing on screen on a laptop without
     overflowing a narrow one. The middle value is the size; the outer two are the limits. */
  font-size: clamp(34px, 7vw, 62px);
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 10px;
}

#gloss {
  font-size: clamp(14px, 2vw, 18px);
  color: var(--ink-soft);
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--card-line);
}

/* The example sentence, in Spanish. Italic so it reads as a quoted line from the game rather
   than as more interface text. */
#example {
  font-family: var(--face-display);
  font-style: italic;
  font-size: clamp(15px, 2.2vw, 20px);
  color: var(--ink);
  line-height: 1.5;
  margin-bottom: 6px;
}

#example-en {
  font-size: clamp(12px, 1.6vw, 15px);
  color: var(--ink-quiet);
  line-height: 1.5;
}

/* ---- The wait ---- */
#bar {
  width: min(300px, 70vw);
  height: 2px;              /* a hairline: informative, not decorative */
  background: var(--card-line);
  overflow: hidden;
  margin-bottom: 14px;
}

#bar-fill {
  width: 0%;
  height: 100%;
  background: var(--accent);
  /* Unity reports progress in jumps as each file lands. Easing the width smooths those jumps
     into movement, which is what stops a stalled-looking bar from looking stopped. */
  transition: width 0.3s ease;
}

#status {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-quiet);
  line-height: 1.6;
  max-width: 460px;
}

/* Used by the failure message for the raw technical detail underneath the human sentence -
   present so a friend can paste it to NZ, quiet so it is not what they read first. */
.quiet {
  display: inline-block;
  margin-top: 8px;
  font-size: 11px;
  opacity: 0.6;
  word-break: break-word;
}