/* app.css
 *
 * The game is the video and the arc drawn on it. Everything here is text laid
 * over that, so it is all `position: fixed`, all `pointer-events: none`, and
 * all pushed to the edges — the middle of the screen belongs to the player.
 */

/*
 * Fredoka (OFL, vendored — licence beside the file) for the display tier:
 * the wordmark, the prompt, the verdict, the level. Rounded and geometric,
 * which is the right voice for a game about circles made of arms. Body text
 * — coaching, captions, notes — stays system-ui for legibility at small
 * sizes. The canvas angle labels use it too (angle-display.js).
 *
 * The palette and the paper-sticker look come from the sibling animals game:
 * a white page; deep plum rgb(92,38,72) for ink and borders; teal #42bdb8
 * carrying the chunky hard drop-shadows; warm gold #fbd868 for fills, stars
 * and wins; hot pink #ff009e for misses. The live picture and the tutorial
 * sit on the page as rounded plum-outlined cards, the way animals' habitat
 * board does — which is also what keeps the white silhouette and the white
 * reference arm legible: their world stays dark inside the card while the
 * page around them is paper.
 */
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("vendor/fonts/fredoka-600.woff2") format("woff2");
}

:root {
  --ink: rgb(92, 38, 72);
  --paper: #ffffff;
  --teal: #42bdb8;
  --gold: #fbd868;
  --pink: #ff009e;
  /* Text laid over the picture gets a white halo, animals-style, so it reads
     on any room the camera happens to see. */
  --halo: 0 2px 0 #fff, 0 4px 10px rgba(255, 255, 255, 0.9);
  --display-font: "Fredoka", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-user-select: none;
  user-select: none;
}

.hidden {
  display: none !important;
}

/* The HUD while the intro tutorial holds the stage. Its own class, so it
 * cannot fight the hidden-toggling each HUD section does for itself. */
.guide-stage {
  display: none !important;
}

/* ── The picture ───────────────────────────────────────────────────────── */

#show-video-el {
  position: fixed;
  inset: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The video is only ever a source for the canvas, which is what gets drawn. */
#show-video-video-el {
  display: none;
}

/* The picture is a board card on the page, like animals' habitat board:
   rounded, plum-outlined, its own dark world inside. */
#show-video-canvas-el {
  display: block;
  border-radius: 25px;
  outline: 4px solid var(--ink);
}

/* ── What to make ──────────────────────────────────────────────────────── */

.hud-challenge,
.hud-verdict-box {
  position: fixed;
  top: 2vh;
  left: 0;
  right: 0;
  text-align: center;
  pointer-events: none;
  text-shadow: var(--halo);
}

.hud-lead {
  font-family: var(--display-font);
  font-size: clamp(0.9rem, 2.2vh, 1.5rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

.hud-prompt {
  font-family: var(--display-font);
  font-size: clamp(2.6rem, 11vh, 7rem);
  font-weight: 600;
  line-height: 1.05;
  color: var(--teal);
  text-shadow: var(--halo);
}

/* Restarts each time the box is re-shown — i.e. once per new question. */
.hud-challenge {
  animation: prompt-in 0.35s ease-out;
}

@keyframes prompt-in {
  from {
    opacity: 0;
    transform: translateY(-1.2vh);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* "the reflex angle that goes with 140°" cannot have the same size as "60°". */
.hud-prompt.wordy {
  font-size: clamp(1.3rem, 4.4vh, 2.8rem);
  max-width: 90vw;
  margin: 0 auto;
  line-height: 1.2;
}

/* ── How you did ───────────────────────────────────────────────────────── */

.hud-verdict {
  font-family: var(--display-font);
  font-size: clamp(2.4rem, 10vh, 6rem);
  font-weight: 600;
  line-height: 1.05;
}

/* Lands with a small spring — display toggling restarts it per verdict. */
.hud-verdict-box {
  animation: verdict-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes verdict-pop {
  from {
    opacity: 0;
    transform: scale(0.72) translateY(-1.5vh);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Gold for a win — the star's colour, and what the amber hold fill was
   charging toward all along. Pink for a miss, per the house palette. */
.hud-verdict.correct {
  color: var(--gold);
  text-shadow: var(--halo);
}

.hud-verdict.wrong {
  color: var(--pink);
  text-shadow: var(--halo);
}

.hud-verdict-note {
  font-size: clamp(1rem, 3vh, 1.8rem);
  color: var(--ink);
  margin-top: 0.2em;
}

/* ── Coaching ──────────────────────────────────────────────────────────── */

/* The coaching line as an animals-style pill: white, plum-bordered, with
   the house teal sitting under it as a hard shadow. */
.hud-message {
  position: fixed;
  bottom: 3vh;
  left: 50%;
  transform: translateX(-50%);
  max-width: 68vw;
  padding: 0.5em 1.1em;
  border-radius: 999px;
  background: #fff;
  border: 2px solid var(--ink);
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 4px 0 var(--teal), 0 8px 14px rgba(92, 38, 72, 0.18);
  font-size: clamp(0.95rem, 2.8vh, 1.6rem);
  text-align: center;
  pointer-events: none;
}

/* ── Progress ──────────────────────────────────────────────────────────── */

.hud-level,
.hud-streak {
  position: fixed;
  bottom: 2vh;
  font-size: clamp(0.8rem, 2vh, 1.2rem);
  text-shadow: var(--halo);
  pointer-events: none;
}

.hud-level {
  font-family: var(--display-font);
  left: 2vw;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/*
 * The streak, as five pips filling toward the level-up. Five stars in a row
 * of text said the same thing, but dots that light one by one make "how far
 * to the next level" legible from across a room — which is where the player
 * is standing.
 */
.hud-streak {
  right: 2vw;
  display: flex;
  gap: 0.5em;
  align-items: center;
}

.hud-streak .pip {
  width: clamp(11px, 1.8vh, 17px);
  height: clamp(11px, 1.8vh, 17px);
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--ink);
  box-shadow: 0 2px 0 rgba(92, 38, 72, 0.25);
  transition:
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.25s ease-out,
    box-shadow 0.25s ease-out;
}

.hud-streak .pip.lit {
  background: var(--gold);
  box-shadow: 0 2px 0 var(--teal);
  transform: scale(1.2);
}

/* ── The guide silhouette ──────────────────────────────────────────────── */

/*
 * Centre-stage. It can afford the middle of the frame because arriving *ends*
 * it: the tutorial is dismissed the moment a pair of arms is seen, so it can
 * never sit on top of the body it is describing. While it plays, the HUD
 * yields (see .guide-stage) and this caption is the only text on screen.
 */
/* A board card, like animals' habitat: plum outline, rounded, teal shadow,
   dark inside so the white silhouette reads. */
.guide {
  position: fixed;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8em;
  padding: clamp(14px, 3vh, 26px) clamp(20px, 4vw, 40px);
  background: #101820;
  border: 4px solid var(--ink);
  border-radius: 25px;
  box-shadow:
    inset 0 0 26px 3px rgba(0, 0, 0, 0.55),
    0 8px 0 var(--teal),
    0 14px 24px rgba(92, 38, 72, 0.25);
  pointer-events: none;
}

/*
 * The name, worn lightly: it belongs to the tutorial and leaves with it —
 * once play starts, the screen is the player's.
 */
.guide-title {
  font-family: var(--display-font);
  font-size: clamp(1.6rem, 5vh, 2.9rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gold);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75);
}

/*
 * Roughly square, because the guide has to hold a child plus the circle each
 * arm sweeps around him — not the portrait box a standing figure suggests.
 */
.guide-canvas {
  width: clamp(260px, 62vh, 580px);
  height: clamp(215px, 52vh, 485px);
  /* Lifts the white silhouette off a bright or busy room behind it. */
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.8));
}

.guide-caption {
  max-width: min(72vw, 30em);
  padding: 0.5em 1.2em;
  border-radius: 999px;
  background: #fff;
  border: 2px solid var(--ink);
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 4px 0 var(--teal);
  font-size: clamp(1rem, 2.8vh, 1.6rem);
  text-align: center;
}

/*
 * The game is meant to be played in landscape, and is laid out for it. Turned
 * portrait, the centred coaching line can wrap to three lines.
 */
@media (max-aspect-ratio: 1/1) {
  .hud-message {
    max-width: 86vw;
  }
}

/* ── Diagnostics ───────────────────────────────────────────────────────── */

#debug-info-el {
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0.5em;
  max-height: 100vh;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.35;
  color: #8ef;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
  z-index: 10;
}

#camera-message-el {
  position: fixed;
  inset: auto 5vw 20vh 5vw;
  padding: 1.2em;
  border-radius: 18px;
  background: #fff;
  border: 3px solid var(--ink);
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 5px 0 var(--teal), 0 10px 16px rgba(92, 38, 72, 0.18);
  font-size: clamp(1rem, 2.6vh, 1.4rem);
  text-align: center;
}