/* ============================================================
   LE SIGNAL — Automatic.css (ACSS) tokens
   learnfrench.co neo-brutalist palette, mapped to ACSS token names.
   In Etch Studio these are injected by ACSS; here (standalone file)
   we define the same names + values so the game and the site share
   one token vocabulary.
   ============================================================ */
:root {
  /* Palette */
  --primary: #2563eb;             /* blue — brand / CTAs */
  --primary-dark: #1d4fd8;        /* blue hover */
  --primary-ultra-light: #e8eefe; /* blue tint (chips) */
  --accent: #f59e0b;              /* amber — accent highlights */
  --accent-ultra-light: #fdf6e3;  /* amber tint (notes) */
  --base: #101a2e;                /* navy — the ink: text, borders, shadows */

  /* Constants */
  --white: #ffffff;

  /* Contextual */
  --body-bg-color: #f4f6fc;       /* page background */
  --bg-ultra-light: #f4f6fc;      /* light surface */
  --bg-light: #eef1fb;            /* light surface (hover / panels) */
  --bg-dark: #101a2e;             /* dark surface */
  --bg-ultra-dark: #0d1730;       /* darker surface */
  --text-dark: #101a2e;           /* text on light */
  --text-dark-muted: #4a5570;     /* muted text on light */
  --text-light: #ffffff;          /* text on dark */
  --text-light-muted: #b9c2d8;    /* muted text on dark */

  /* Semantic */
  --success: #1a8f5c;
  --success-ultra-light: #d9f2e6;
  --danger: #c0392b;
  --danger-ultra-light: #fdeaea;

  /* Spacing */
  --space-xs: 4px;
  --space-s: 8px;
  --space-m: 16px;
  --space-l: 24px;
  --space-xl: 40px;
  --space-xxl: 56px;
  --content-gap: 16px;
  --container-gap: 16px;
  --grid-gap: 16px;

  /* Typography */
  --h1: clamp(2.5rem, 5vw, 3.5rem);
  --h2: clamp(1.8rem, 3.5vw, 2.4rem);
  --h3: 1.25rem;
  --text-xxl: 1.5rem;
  --text-xl: 1.25rem;
  --text-l: 1.125rem;
  --text-m: 1rem;
  --text-s: 0.875rem;
  --text-xs: 0.75rem;
  --text-font-family: 'Signika', system-ui, -apple-system, sans-serif;
  --heading-font-family: 'Signika', system-ui, -apple-system, sans-serif;

  /* Border & radius */
  --radius: 0px;
  --border-size: 2px;
  --border-style: solid;
  --border-color-light: var(--base);
  --border-color-dark: var(--white);
  --border: var(--border-size) var(--border-style) var(--border-color-light);

  /* Local one-offs (neo-brutalist hard shadow — not an ACSS token) */
  --_shadow: 6px 6px 0 0 var(--base);
  --_shadow-sm: 4px 4px 0 0 var(--base);
  --_skin: #f2c49b;               /* illustration skin tone (not an ACSS token) */
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--text-font-family);
  background: var(--body-bg-color);
  color: var(--text-dark);
  line-height: 1.5;
  min-height: 100vh;
}

.hidden { display: none !important; }

/* ---------- overlays (title / end) ---------- */
.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(
    -45deg,
    var(--body-bg-color),
    var(--body-bg-color) 24px,
    var(--bg-light) 24px,
    var(--bg-light) 48px
  );
  padding: var(--space-l);
  z-index: 10;
}
.overlay-card {
  background: var(--white);
  border: var(--border);
  box-shadow: var(--_shadow);
  padding: var(--space-xl) var(--space-xxl);
  max-inline-size: 520px;
  inline-size: 100%;
  text-align: center;
}
.brand-kicker {
  margin: 0 0 var(--space-xs);
  font-weight: 600;
  font-size: var(--text-s);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
}
.brand {
  font-family: var(--heading-font-family);
  font-size: var(--h1);
  font-weight: 700;
  margin: 0;
  letter-spacing: 0.02em;
}
.sub {
  font-size: var(--text-l);
  color: var(--primary);
  font-weight: 600;
  margin: var(--space-s) 0 var(--space-m);
}
.tagline { margin: 0 0 var(--space-s); font-size: var(--text-l); }
.howto { margin: 0 0 var(--space-l); color: var(--text-dark-muted); }
.end-stats { margin: var(--space-m) 0 var(--space-l); font-size: var(--text-l); font-weight: 600; }
.end-stats p { margin: var(--space-xs) 0; }

/* ---------- buttons ---------- */
.btn {
  font-family: inherit;
  font-size: var(--text-l);
  font-weight: 600;
  padding: var(--space-m) var(--space-l);
  border: var(--border);
  box-shadow: var(--_shadow-sm);
  cursor: pointer;
  transition: transform 0.05s ease, box-shadow 0.05s ease;
}
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 0 var(--base); }
.btn--primary { background: var(--primary); color: var(--white); }
.btn--accent { background: var(--accent); color: var(--text-dark); }

/* ---------- game layout ---------- */
.game {
  max-inline-size: 980px;
  margin: 0 auto;
  padding: var(--space-l);
  display: grid;
  gap: var(--container-gap);
  min-height: 100vh;
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  flex-wrap: wrap;
}
.title-brand { font-weight: 700; font-size: var(--text-xl); }
.title-ch { color: var(--primary); font-weight: 600; }
.meter { display: flex; align-items: center; gap: var(--space-s); }
.meter-label { font-weight: 600; font-size: var(--text-s); }
.meter-track {
  inline-size: 120px;
  block-size: 14px;
  border: var(--border);
  background: var(--white);
}
.meter-fill { block-size: 100%; background: var(--accent); transition: width 0.3s ease; }
.meter-pct {
  font-weight: 600;
  font-size: var(--text-s);
  inline-size: 44px;
  text-align: right;
}

.main {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: var(--grid-gap);
  align-items: start;
}

/* ---------- stage ---------- */
.stage {
  position: relative;
  block-size: 320px;
  border: var(--border);
  box-shadow: var(--_shadow-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loc {
  position: absolute;
  top: var(--space-m);
  left: var(--space-m);
  z-index: 2;
  background: var(--bg-dark);
  color: var(--text-light);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-xs) var(--space-s);
  letter-spacing: 0.04em;
}
.scene-art {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  pointer-events: none;
}
.scene-art svg {
  inline-size: 100%;
  block-size: 100%;
  display: block;
}
.portrait {
  position: relative;
  z-index: 1;
  inline-size: 120px;
  block-size: 120px;
  border: var(--border);
  box-shadow: var(--_shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.portrait svg {
  inline-size: 100%;
  block-size: 100%;
  display: block;
}

.bg-cryo   { background: linear-gradient(160deg, var(--bg-dark) 0%, var(--bg-ultra-dark) 60%, var(--primary) 135%); }
.bg-nadia  { background: linear-gradient(160deg, var(--bg-ultra-light) 0%, var(--bg-light) 55%, var(--accent) 165%); }
.bg-theo   { background: linear-gradient(160deg, var(--bg-light) 0%, var(--bg-ultra-light) 55%, var(--bg-dark) 165%); }
.bg-amara  { background: linear-gradient(160deg, var(--primary-dark) 0%, var(--bg-ultra-dark) 60%, var(--bg-dark) 135%); }
.bg-signal { background: linear-gradient(160deg, var(--bg-dark) 0%, var(--bg-ultra-dark) 50%, var(--accent) 165%); }
.bg-cliff  { background: linear-gradient(160deg, var(--bg-dark) 0%, var(--bg-ultra-dark) 70%, var(--accent) 175%); }

/* ---------- vocab panel ---------- */
.vocab {
  border: var(--border);
  box-shadow: var(--_shadow-sm);
  background: var(--white);
  padding: var(--space-m);
  max-block-size: 320px;
  overflow-y: auto;
}
.vocab-title {
  margin: 0 0 var(--space-s);
  font-size: var(--text-l);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-s);
}
.vocab-count { font-size: var(--text-xs); color: var(--text-dark-muted); font-weight: 600; }
.vocab-list { list-style: none; margin: 0; padding: 0; }
.vocab-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-s);
  padding: var(--space-s) 0;
  border-bottom: 1px dashed var(--border-color-light);
  font-size: var(--text-s);
}
.v-fr { font-weight: 600; color: var(--primary); }
.v-en { color: var(--text-dark-muted); text-align: right; }

/* ---------- dialogue ---------- */
.dialogue {
  border: var(--border);
  box-shadow: var(--_shadow);
  background: var(--white);
  padding: var(--space-l) var(--space-l);
}
.speaker {
  display: flex;
  align-items: baseline;
  gap: var(--space-s);
  margin-bottom: var(--space-s);
}
.speaker-name { font-size: var(--text-l); font-weight: 700; }
.speaker-role { font-size: var(--text-s); color: var(--text-dark-muted); font-weight: 600; }

.line {
  display: block;
  inline-size: 100%;
  font-family: inherit;
  background: var(--bg-ultra-light);
  border: var(--border);
  box-shadow: var(--_shadow-sm);
  padding: var(--space-l);
  cursor: pointer;
  text-align: left;
  color: var(--text-dark);
}
.line:hover { background: var(--bg-light); }
.fr {
  font-size: var(--text-xxl);
  font-weight: 700;
  line-height: 1.25;
  display: block;
}
.en {
  display: block;
  margin-top: var(--space-s);
  font-size: var(--text-l);
  color: var(--text-dark-muted);
  font-weight: 400;
}

.hint { margin: var(--space-s) 0 0; font-size: var(--text-xs); color: var(--text-dark-muted); font-weight: 600; }
.note {
  margin: var(--space-m) 0 0;
  font-size: var(--text-s);
  color: var(--text-dark);
  background: var(--accent-ultra-light);
  border-left: 4px solid var(--accent);
  padding: var(--space-s) var(--space-m);
}
.words { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-top: var(--space-m); }
.chip {
  font-size: var(--text-xs);
  font-weight: 600;
  background: var(--primary-ultra-light);
  color: var(--primary);
  border: 1px solid var(--primary);
  padding: 2px var(--space-s);
}
.grammar {
  display: flex;
  gap: var(--space-s);
  align-items: flex-start;
  margin-top: var(--space-m);
  background: var(--bg-light);
  border: var(--border);
  border-color: var(--primary);
  padding: var(--space-s) var(--space-m);
}
.grammar-title { font-weight: 700; color: var(--primary); white-space: nowrap; }
.grammar-body { font-size: var(--text-s); }

.check { margin-top: var(--space-m); }
.check-prompt { font-weight: 600; font-size: var(--text-m); margin: 0 0 var(--space-s); }
.choices { display: flex; flex-direction: column; gap: var(--space-s); }
.choice {
  font-family: inherit;
  font-size: var(--text-m);
  font-weight: 600;
  text-align: left;
  padding: var(--space-m);
  border: var(--border);
  box-shadow: var(--_shadow-sm);
  background: var(--white);
  cursor: pointer;
  color: var(--text-dark);
  transition: transform 0.05s ease, box-shadow 0.05s ease;
}
.choice:hover { background: var(--bg-light); }
.choice:active { transform: translate(4px, 4px); box-shadow: 0 0 0 0 var(--base); }
.choice:disabled { cursor: not-allowed; opacity: 0.7; }
.choice.correct { background: var(--success-ultra-light); border-color: var(--success); }
.choice.wrong { background: var(--danger-ultra-light); border-color: var(--danger); }

.feedback {
  margin: var(--space-m) 0 0;
  font-size: var(--text-m);
  font-weight: 600;
  padding: var(--space-s) var(--space-m);
  border: var(--border);
}
.feedback.good { background: var(--success-ultra-light); color: var(--success); }
.feedback.bad { background: var(--danger-ultra-light); color: var(--danger); }

.continue { margin-top: var(--space-m); }

/* ---------- chapter menu & end actions ---------- */
.chapters {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  margin: var(--space-l) 0 var(--space-m);
}
.chapter-btn { display: block; inline-size: 100%; }
.ch-num {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.85;
}
.ch-title { display: block; font-size: var(--text-l); }

.end-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  margin-top: var(--space-l);
}

.link-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-s);
  font-weight: 600;
  color: var(--primary);
  text-decoration: underline;
  padding: var(--space-xs);
}

/* ---------- illustration animation ---------- */
@keyframes blink {
  0%, 90%, 100% { transform: scaleY(1); }
  94% { transform: scaleY(0.08); }
}
@keyframes glowPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
@keyframes wavePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@keyframes softPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.15; }
}
@keyframes dangerPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@keyframes twinkle {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 0.3; }
}

.eye {
  animation: blink 4.5s infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.glow { animation: glowPulse 2.4s ease-in-out infinite; }
.wave { animation: wavePulse 2.2s ease-in-out infinite; }
.wave--delay { animation: wavePulse 2.2s ease-in-out infinite; animation-delay: 0.4s; }
.wave--delay2 { animation: wavePulse 2.2s ease-in-out infinite; animation-delay: 0.8s; }
.soft { animation: softPulse 3s ease-in-out infinite; }
.soft--delay { animation: softPulse 3s ease-in-out infinite; animation-delay: 1.5s; }
.soft--delay2 { animation: softPulse 3s ease-in-out infinite; animation-delay: 0.75s; }
.light { animation: glowPulse 1.8s ease-in-out infinite; }
.light--2 { animation: glowPulse 1.8s ease-in-out infinite; animation-delay: 0.6s; }
.light--3 { animation: glowPulse 1.8s ease-in-out infinite; animation-delay: 1.2s; }
.danger { animation: dangerPulse 1.5s ease-in-out infinite; }
.star { animation: twinkle 2.8s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .eye, .glow, .wave, .wave--delay, .wave--delay2,
  .soft, .soft--delay, .soft--delay2,
  .light, .light--2, .light--3, .danger, .star {
    animation: none !important;
  }
}

@media (max-width: 720px) {
  .main { grid-template-columns: 1fr; }
  .stage { block-size: 200px; }
  .vocab { max-block-size: none; }
  .fr { font-size: var(--text-xl); }
  .brand { font-size: var(--h2); }
  .overlay-card { padding: var(--space-l); }
}