/* LEXIK — interface (cahier R1, sections 1 à 3).
   Couleurs du logo : jaune #FECF0D pour l'action, charbon #111C26 pour les panneaux. */

@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../assets/fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../assets/fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); }

:root {
  --yellow: #FECF0D;
  --yellow-soft: rgba(254, 207, 13, 0.14);
  --charcoal: #111C26;
  --panel: rgba(17, 28, 38, 0.93);
  --panel-2: #1A2836;
  --panel-3: #22344A;
  --line: rgba(244, 241, 234, 0.12);
  --ink: #F4F1EA;
  --ink-2: #AEB8C4;
  --ink-3: #7F8B98;
  --ok: #57C785;
  --ok-soft: rgba(87, 199, 133, 0.14);
  --retry: #F5A24B;
  --retry-soft: rgba(245, 162, 75, 0.14);
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  font-size: 16px;
}
body.text-large { font-size: 18.5px; }
@media (max-width: 1400px) { :root { font-size: 15px; } body.text-large { font-size: 17.5px; } }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--charcoal); color: var(--ink);
  font-family: "Atkinson Hyperlegible", "Segoe UI", Arial, sans-serif; line-height: 1.4; }
#game { position: fixed; inset: 0; }
#game canvas { display: block; image-rendering: pixelated; }
.hidden, [hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.muted { color: var(--ink-2); }
.small { font-size: 0.85rem; }
.center { text-align: center; }
.fr, .fr-line { color: var(--ink-3); font-weight: 400; }
.fr-line { display: block; font-size: 0.88em; margin-top: 2px; }

kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 1.7em; height: 1.7em; padding: 0 0.4em;
  border-radius: 6px; background: var(--panel-3); border: 1px solid rgba(255, 255, 255, 0.14); border-bottom-width: 2px;
  font: 700 0.78rem "Atkinson Hyperlegible", Arial, sans-serif; color: var(--ink); }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; padding: 0.7em 1.2em; border-radius: 12px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); font-family: inherit; font-weight: 700; font-size: 1rem;
  cursor: pointer; transition: transform .08s ease, background .15s ease, border-color .15s ease; }
.btn:hover { background: var(--panel-3); border-color: rgba(255, 255, 255, 0.22); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, .choice:focus-visible, .chip:focus-visible, .swatch:focus-visible, .support:focus-visible, .tab:focus-visible, .action:focus-visible {
  outline: 3px solid var(--yellow); outline-offset: 2px; }
.btn-primary { background: var(--yellow); color: var(--charcoal); border-color: var(--yellow); }
.btn-primary:hover { background: #FFD93D; border-color: #FFD93D; }
.btn-primary kbd { background: rgba(17, 28, 38, 0.14); border-color: rgba(17, 28, 38, 0.2); color: var(--charcoal); }
.btn-ghost { background: transparent; }
.btn-big { padding: 0.85em 1.6em; font-size: 1.08rem; }
.btn-block { width: 100%; }
.btn-sub { font-weight: 400; opacity: 0.75; font-size: 0.9em; }

/* ---------- Écrans plein cadre ---------- */
.screen { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px;
  background:
    radial-gradient(900px 500px at 50% 30%, rgba(254, 207, 13, 0.10), transparent 60%),
    linear-gradient(180deg, #13212D 0%, #0D161E 100%); }
.screen::before { content: ""; position: absolute; inset: 0; opacity: 0.35; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 32px 32px; }
.title-card { position: relative; text-align: center; max-width: 640px; width: 100%; }
.title-logo { width: min(460px, 80vw); height: auto; display: block; margin: 0 auto 18px; }
.title-tagline { font-size: 1.2rem; color: var(--ink-2); margin: 0 0 34px; }
.title-actions { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.title-actions .btn { min-width: 280px; }
.title-import { margin-top: 14px; font-weight: 400; font-size: 0.92rem; color: var(--ink-2); }
.title-note { min-height: 1.4em; color: var(--retry); margin-top: 18px; }
.title-footer { position: absolute; bottom: 18px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 24px;
  color: var(--ink-3); font-size: 0.85rem; }

/* ---------- Création du personnage ---------- */
.creator-card { position: relative; width: min(920px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--panel);
  border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); padding: 26px 28px; }
.creator-head h1 { margin: 0; font-size: 1.6rem; }
.creator-head p { margin: 4px 0 0; color: var(--ink-2); }
.creator-grid { display: grid; grid-template-columns: 220px 1fr; gap: 28px; margin-top: 22px; }
@media (max-width: 720px) { .creator-grid { grid-template-columns: 1fr; } }
.creator-preview { position: relative; display: flex; align-items: flex-end; justify-content: center; border-radius: 16px; min-height: 340px;
  background: radial-gradient(circle at 50% 75%, rgba(254,207,13,0.16), transparent 60%), var(--panel-2); border: 1px solid var(--line); }
.creator-preview canvas { position: relative; z-index: 1; image-rendering: pixelated; margin-bottom: 18px; }
.preview-floor { position: absolute; bottom: 22px; width: 120px; height: 16px; border-radius: 50%; background: rgba(0, 0, 0, 0.35); }
.field { display: block; margin-bottom: 16px; }
.field-label { display: block; font-weight: 700; margin-bottom: 8px; }
.field input { width: 100%; padding: 0.75em 0.9em; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2);
  color: var(--ink); font-family: inherit; font-weight: 400; font-size: 1.05rem; }
.field input:focus { outline: 3px solid var(--yellow); outline-offset: 1px; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 38px; height: 38px; border-radius: 10px; border: 2px solid rgba(255,255,255,0.15); cursor: pointer; padding: 0; }
.swatch.is-active { border-color: var(--yellow); box-shadow: 0 0 0 3px var(--yellow-soft); }
.swatch-text { width: auto; padding: 0 12px; background: var(--panel-2); color: var(--ink); font-family: inherit; font-weight: 700; font-size: 0.9rem; }
.support-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 720px) { .support-options { grid-template-columns: 1fr; } }
.support { text-align: left; padding: 12px; border-radius: 12px; border: 2px solid var(--line); background: var(--panel-2); color: var(--ink);
  cursor: pointer; font-family: inherit; display: flex; flex-direction: column; gap: 3px; }
.support strong { font-size: 1rem; }
.support span { font-size: 0.85rem; color: var(--ink-2); }
.support .fr { color: var(--ink-3); }
.support.is-active { border-color: var(--yellow); background: var(--yellow-soft); }
.creator-foot { display: flex; justify-content: space-between; margin-top: 10px; gap: 12px; }
.shake { animation: shake .35s; border-color: var(--retry) !important; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* ---------- Panneaux ---------- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  backdrop-filter: blur(4px); }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
#hud .panel, #hud button { pointer-events: auto; }
.hud-player { position: absolute; top: 16px; left: 16px; display: flex; gap: 12px; align-items: center; padding: 10px 16px 10px 10px; min-width: 300px; }
.hud-player canvas { width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle at 50% 60%, #2F4A63, #1A2836);
  border: 2px solid var(--yellow); image-rendering: pixelated; }
.hud-stats { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.hud-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hud-row strong { font-size: 1.1rem; }
.hud-xp-text, .hud-rep-label { font-size: 0.85rem; color: var(--ink-2); }
.hud-rep-label strong { color: var(--ink); font-size: 0.9rem; }
.hud-level { font-weight: 700; color: var(--yellow); font-size: 0.95rem; white-space: nowrap; }
.bar { flex: 1; height: 9px; border-radius: 6px; background: rgba(255, 255, 255, 0.10); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 6px; background: var(--yellow); transition: width .5s ease; }

.hud-right { position: absolute; top: 16px; right: 16px; width: 300px; display: flex; flex-direction: column; gap: 10px; }
.hud-zone { padding: 9px 14px; display: flex; align-items: center; gap: 10px; font-weight: 700; }
.zone-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 4px var(--yellow-soft); }
.hud-quest { padding: 12px 14px; }
.quest-head { display: flex; gap: 8px; align-items: center; font-weight: 700; color: var(--yellow); }
.quest-star { font-size: 1rem; }
.hud-quest p { margin: 6px 0 0; font-size: 0.95rem; }
.hud-quest ul { list-style: none; margin: 8px 0 0; padding: 0; }
.hud-quest li { display: flex; gap: 8px; align-items: center; font-size: 0.9rem; padding: 3px 0; color: var(--ink-2); }
.hud-quest li.is-done { color: var(--ink-3); text-decoration: line-through; }
.check { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--ink-3); display: inline-flex; align-items: center;
  justify-content: center; font-size: 0.7rem; color: var(--charcoal); flex: none; }
.is-done .check { background: var(--ok); border-color: var(--ok); }
.hud-quest.is-free .quest-head { color: var(--ink-2); }
.pulse { animation: pulse 1.2s ease; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(254, 207, 13, 0.55); } 100% { box-shadow: 0 0 0 14px rgba(254, 207, 13, 0); } }

.hud-controls { position: absolute; left: 16px; bottom: 16px; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center;
  padding: 10px 40px 10px 14px; max-width: 520px; font-size: 0.85rem; color: var(--ink-2); }
.hud-controls .ctl { display: flex; align-items: center; gap: 4px; }
.hud-controls .ctl span { margin-left: 3px; }
.hud-close { position: absolute; top: 6px; right: 8px; width: 26px; height: 26px; border: 0; border-radius: 8px; background: transparent;
  color: var(--ink-2); font-size: 1.2rem; cursor: pointer; }
.hud-close:hover { background: var(--panel-3); color: var(--ink); }

.hud-actions { position: absolute; right: 16px; bottom: 16px; display: flex; gap: 8px; }
.action { pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 82px; padding: 9px 6px;
  border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-family: inherit; font-weight: 700; font-size: 0.8rem;
  font-family: inherit; cursor: pointer; box-shadow: var(--shadow); }
.action:hover { border-color: var(--yellow); }
.action-icon { width: 22px; height: 22px; color: var(--yellow); flex: none; }

.prompt { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); padding: 9px 16px; border-radius: 999px;
  background: var(--panel); border: 1px solid rgba(254, 207, 13, 0.5); font-weight: 700; display: flex; gap: 8px; align-items: center;
  box-shadow: var(--shadow); animation: rise .2s ease; white-space: nowrap; }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- Dialogue ---------- */
.dialogue { position: fixed; z-index: 20; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(980px, calc(100vw - 32px));
  max-height: calc(100vh - 120px); overflow: auto; display: flex; gap: 18px; padding: 18px 20px; border-color: rgba(254, 207, 13, 0.25); }
.dialogue.is-open { animation: slideup .22s ease; }
@keyframes slideup { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
.dlg-portrait { flex: none; width: 104px; }
.dlg-portrait canvas { width: 96px; height: 96px; border-radius: 16px; background: radial-gradient(circle at 50% 65%, #2F4A63, #1A2836);
  border: 2px solid var(--line); image-rendering: pixelated; }
.dlg-main { flex: 1; min-width: 0; }
.dlg-head { display: flex; align-items: baseline; gap: 10px; }
.dlg-name { display: inline-block; background: var(--yellow); color: var(--charcoal); font-weight: 700; padding: 2px 12px; border-radius: 8px; }
.dlg-role { color: var(--ink-3); font-size: 0.9rem; }
.dlg-text { font-size: 1.25rem; margin: 10px 0 0; min-height: 1.4em; cursor: pointer; }
.dlg-fr { margin: 4px 0 0; color: var(--ink-3); font-size: 1rem; font-style: italic; }
.dlg-task { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-weight: 700; }
.task-tag { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--charcoal); background: var(--yellow);
  padding: 2px 8px; border-radius: 6px; }
.dlg-task-fr { width: 100%; font-weight: 400; color: var(--ink-3); font-size: 0.92rem; }
.dlg-body { margin-top: 12px; }
.choices { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.choice { width: 100%; display: flex; gap: 12px; align-items: center; text-align: left; padding: 10px 12px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); font-family: inherit; font-weight: 400; font-size: 1.05rem; cursor: pointer;
  transition: border-color .12s ease, background .12s ease; }
.choice:hover:not(:disabled) { border-color: var(--yellow); background: var(--panel-3); }
.choice-n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.8em; height: 1.8em; border-radius: 7px;
  background: var(--panel-3); font-weight: 700; font-size: 0.85rem; }
.choice.is-right { border-color: var(--ok); background: var(--ok-soft); }
.choice.is-right .choice-n { background: var(--ok); color: var(--charcoal); }
.choice.is-wrong { opacity: 0.55; border-color: var(--retry); }
.choice.is-wrong .choice-t { text-decoration: line-through; }
.choice:disabled { cursor: default; }

.order-line { min-height: 54px; display: flex; flex-wrap: wrap; gap: 7px; align-items: center; padding: 9px; border-radius: 11px;
  border: 2px dashed var(--line); background: rgba(255, 255, 255, 0.03); }
.order-line.is-right { border-style: solid; border-color: var(--ok); background: var(--ok-soft); }
.order-empty { color: var(--ink-3); }
.order-bank { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--ink); font-family: inherit; font-weight: 700; font-size: 1.05rem; cursor: pointer; }
.chip:hover:not(:disabled) { border-color: var(--yellow); }
.chip:disabled { opacity: 0.3; cursor: default; }
.chip-placed { background: var(--yellow); color: var(--charcoal); border-color: var(--yellow); cursor: default; }

.write textarea { width: 100%; resize: vertical; min-height: 64px; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--line);
  background: #0E1720; color: var(--ink); font-family: inherit; font-weight: 400; font-size: 1.1rem; }
.write textarea:focus { outline: 3px solid var(--yellow); outline-offset: 1px; }
.write textarea.is-right { border-color: var(--ok); }
.write-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
.write-actions .btn { padding: 0.5em 0.9em; font-size: 0.95rem; }
.write-done { color: var(--ink-2); display: flex; align-items: center; gap: 6px; }

.dlg-feedback { margin-top: 12px; display: flex; gap: 10px; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--line); }
.dlg-feedback p { margin: 0; }
.dlg-feedback .fr-inline { color: var(--ink-3); font-size: 0.92rem; margin-top: 2px; }
.fb-icon { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--charcoal); }
.fb-body { flex: 1; }
.hint-line { margin-top: 6px !important; padding-top: 6px; border-top: 1px solid var(--line); }
.hint-line strong { color: var(--yellow); }
.fb-ok { background: var(--ok-soft); border-color: rgba(87, 199, 133, 0.4); } .fb-ok .fb-icon { background: var(--ok); }
.fb-retry { background: var(--retry-soft); border-color: rgba(245, 162, 75, 0.4); } .fb-retry .fb-icon { background: var(--retry); }
.dlg-feedback.fb-hint { background: var(--yellow-soft); border-color: rgba(254, 207, 13, 0.35); }
.dlg-feedback.fb-hint .fb-icon { background: var(--yellow); }
.fb-info { background: rgba(255, 255, 255, 0.04); } .fb-info .fb-icon { background: var(--ink-2); }

.dlg-keys { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; justify-content: flex-end; }
.key-chip { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 2px; color: var(--ink-2);
  font-family: inherit; font-weight: 400; font-size: 0.85rem; cursor: pointer; }
.key-chip:hover { color: var(--ink); }

/* ---------- Superpositions ---------- */
.overlay { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(8, 14, 20, 0.55); backdrop-filter: blur(3px); animation: fade .15s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.overlay-card { position: relative; width: min(760px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.overlay-small { width: min(520px, 100%); }
.overlay-head { display: flex; align-items: center; gap: 16px; padding: 18px 22px 12px; border-bottom: 1px solid var(--line); }
.overlay-head h2 { margin: 0; font-size: 1.35rem; }
.overlay-head .hud-close { position: static; margin-left: auto; }
.overlay-body { padding: 16px 22px 22px; overflow: auto; }
.tabs { display: flex; gap: 4px; background: var(--panel-2); padding: 4px; border-radius: 11px; }
.tab { border: 0; background: transparent; color: var(--ink-2); padding: 6px 12px; border-radius: 8px; font-family: inherit; font-weight: 700; font-size: 0.9rem; cursor: pointer; }
.tab.is-active { background: var(--yellow); color: var(--charcoal); }

.mission-list, .skill-list, .answer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mission { padding: 12px 14px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); }
.mission p { margin: 6px 0 0; }
.mission.st-locked { opacity: 0.6; }
.mission-top, .skill-top, .answer-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.badge { font-size: 0.75rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--panel-3); color: var(--ink-2); white-space: nowrap; }
.badge-available { background: var(--yellow); color: var(--charcoal); }
.badge-active, .badge-ready { background: var(--yellow-soft); color: var(--yellow); }
.badge-done { background: var(--ok-soft); color: var(--ok); }
.mini-tasks { margin: 8px 0 0; padding-left: 18px; color: var(--ink-2); font-size: 0.9rem; }
.mini-tasks .is-done { color: var(--ink-3); text-decoration: line-through; }
.skill-list li { padding: 10px 12px; border-radius: 12px; background: var(--panel-2); }
.bar-skill { margin-top: 7px; }
.answer-list li { padding: 12px 14px; border-radius: 12px; background: var(--panel-2); }
.answer-prompt { margin: 6px 0; color: var(--ink-2); font-size: 0.92rem; }
.answer-list blockquote { margin: 0; padding: 8px 12px; border-left: 3px solid var(--yellow); background: rgba(255, 255, 255, 0.03); border-radius: 0 8px 8px 0; }

.menu-body { display: grid; gap: 12px; }
.setting { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); }
.setting-col { flex-direction: column; align-items: stretch; }
.toggle { min-width: 86px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-3); color: var(--ink-2);
  font-family: inherit; font-weight: 700; font-size: 0.9rem; cursor: pointer; }
.toggle.on { background: var(--yellow); color: var(--charcoal); border-color: var(--yellow); }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: var(--panel-3); padding: 4px; border-radius: 10px; }
.seg-btn { border: 0; background: transparent; color: var(--ink-2); padding: 7px; border-radius: 7px; font-family: inherit; font-weight: 700; font-size: 0.9rem; cursor: pointer; }
.seg-btn.is-active { background: var(--yellow); color: var(--charcoal); }
.menu-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.howto-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 12px; }
.howto-list li { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: center; }
.howto-list em { display: block; font-style: normal; color: var(--ink-3); font-size: 0.9rem; }
.howto-keys { display: flex; gap: 4px; flex-wrap: wrap; }
.howto-bubble { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 8px;
  background: var(--yellow); color: var(--charcoal); font-weight: 700; border: 2px solid var(--charcoal); }

.finale-card { text-align: center; padding: 26px; }
.finale-symbol { width: 90px; height: auto; }
.finale-card h2 { margin: 10px 0 4px; font-size: 1.6rem; }
.finale-sub { margin: 0; color: var(--ink-2); }
.finale-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0; }
.finale-stats div { background: var(--panel-2); border-radius: 12px; padding: 12px 8px; display: flex; flex-direction: column; }
.finale-stats strong { font-size: 1.4rem; color: var(--yellow); }
.finale-stats span { color: var(--ink-2); font-size: 0.85rem; }
.finale-next { color: var(--ink-2); font-size: 0.92rem; margin: 0 0 16px; }

/* ---------- Notifications ---------- */
#toasts { position: fixed; z-index: 26; top: 104px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px;
  align-items: center; pointer-events: none; }
.toast { min-width: 260px; max-width: 460px; padding: 10px 16px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line);
  box-shadow: var(--shadow); display: flex; flex-direction: column; text-align: center; animation: drop .25s ease; transition: opacity .4s ease, transform .4s ease; }
.toast span { color: var(--ink-2); font-size: 0.9rem; }
.toast-success { border-color: rgba(87, 199, 133, 0.6); } .toast-success strong { color: var(--ok); }
.toast-level { border-color: var(--yellow); background: linear-gradient(180deg, rgba(254, 207, 13, 0.18), var(--panel)); } .toast-level strong { color: var(--yellow); }
.toast.out { opacity: 0; transform: translateY(-8px); }
@keyframes drop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

#loader { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: var(--charcoal);
  color: var(--ink-2); font-size: 1.1rem; }

/* ---------- Petits écrans (minimum 1366 × 768, cahier R1 section 3) ---------- */
@media (max-width: 1100px) {
  .hud-right { width: 250px; }
  .hud-player { min-width: 250px; }
  .hud-controls { display: none; }
}
@media (max-height: 800px) {
  .dlg-portrait { width: 80px; } .dlg-portrait canvas { width: 72px; height: 72px; }
  .dialogue { padding: 14px 16px; }
  .dlg-text { font-size: 1.15rem; }
  .choice { padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* =====================================================================
   R2 — documents, téléphone, oral, carte, chapitres, transfert
   ===================================================================== */

/* ---------- Panneau de document ---------- */
.docpanel { position: fixed; z-index: 21; top: 16px; left: 50%; transform: translateX(-50%); width: min(600px, calc(100vw - 680px));
  min-width: 360px; max-height: calc(100vh - 470px); display: flex; flex-direction: column; background: #FBF8F1; color: #1D2733;
  border-radius: 14px; border: 3px solid var(--yellow); box-shadow: var(--shadow); animation: slidedown .2s ease; overflow: hidden; }
@keyframes slidedown { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (max-width: 1300px) { .docpanel { width: min(560px, calc(100vw - 32px)); top: 112px; max-height: calc(100vh - 500px); min-height: 150px; } }
.docpanel header { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--charcoal); color: var(--ink); }
.docpanel header strong { flex: 1; font-size: 0.95rem; }
.doc-icon { color: var(--yellow); }
.doc-toggle { background: none; border: 0; color: var(--ink-2); font-family: inherit; font-size: 0.8rem; cursor: pointer; display: flex; gap: 6px; align-items: center; }
.doc-body { overflow: auto; padding: 10px 14px 12px; }
.docpanel.is-collapsed .doc-body { display: none; }
.docpanel.is-collapsed { max-height: none; }
.doc h4 { margin: 10px 0 4px; font-size: 0.95rem; }
.doc h4:first-child { margin-top: 0; }
.doc p, .doc ul, .doc dl { margin: 4px 0; font-size: 0.95rem; }
.doc ul { padding-left: 20px; }
.doc table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin: 4px 0; }
.doc th, .doc td { border-bottom: 1px solid #E3DDD0; padding: 4px 6px; text-align: left; }
.doc th { background: #F1EBDD; }
.doc dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; }
.doc dt { font-weight: 700; }
.doc dd { margin: 0; }
.doc h4.is-focus { background: #FFE98A; border-radius: 6px; padding: 2px 6px; margin-left: -6px; }
.doc-note { color: #6B5A2A; background: #FFF4C2; padding: 6px 8px; border-radius: 8px; font-size: 0.88rem !important; }
.doc-poster h4 { font-size: 1.15rem; color: #8A2D3B; text-transform: uppercase; }
.doc-email dl { background: #F1EBDD; padding: 6px 8px; border-radius: 8px; }

/* ---------- Appel téléphonique et écoute ---------- */
.dialogue.is-phone { border-color: rgba(87, 199, 133, 0.55); }
.dialogue.is-phone .dlg-name { background: var(--ok); }
.dialogue.is-phone .dlg-portrait canvas { background: radial-gradient(circle at 50% 50%, #1F5F44, #13342A); }
.dlg-text.audio-only { color: var(--ink-2); font-size: 1.05rem; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.listen-icon { font-size: 1.3rem; animation: pulse-ic 1.4s ease infinite; }
@keyframes pulse-ic { 50% { transform: scale(1.15); } }
.dialogue.no-hints .dlg-name::after { content: ' · no hints'; font-weight: 400; }

/* ---------- Fiche (message téléphonique) ---------- */
.msgform { background: #FBF8F1; color: #1D2733; border-radius: 12px; padding: 10px 12px 12px; border: 2px dashed #CDBF9E; }
.msgform-head { font-weight: 700; margin-bottom: 6px; color: #6B5A2A; }
.msgfield { display: grid; grid-template-columns: 170px 1fr 24px; gap: 8px; align-items: center; margin: 6px 0; }
.msgfield span { font-weight: 700; font-size: 0.92rem; }
.msgfield input, .msgfield select { width: 100%; padding: 7px 9px; border-radius: 8px; border: 1px solid #CDBF9E; background: #FFFFFF;
  font-family: inherit; font-size: 1rem; color: #1D2733; }
.msgfield input:focus, .msgfield select:focus { outline: 3px solid var(--yellow); outline-offset: 1px; }
.msgfield input.is-right, .msgfield select.is-right { border-color: var(--ok); background: #EAF7EF; }
.mark { font-style: normal; font-weight: 700; text-align: center; }
.mark.ok { color: #1F8A4C; } .mark.bad { color: #B3261E; }
.msgform .write-actions .btn-ghost { color: #1D2733; border-color: #CDBF9E; }
.msgform .write-done { color: #5C6875; }
@media (max-width: 800px) { .msgfield { grid-template-columns: 1fr 24px; } .msgfield span { grid-column: 1 / -1; } }

/* ---------- Réponse orale ---------- */
.speak { display: flex; gap: 16px; align-items: center; }
.mic { flex: none; width: 116px; height: 116px; border-radius: 50%; border: 3px solid var(--yellow); background: radial-gradient(circle at 50% 40%, #2F4A63, #1A2836);
  color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer; font-family: inherit;
  touch-action: none; user-select: none; transition: transform .1s ease, box-shadow .2s ease; }
.mic:hover { box-shadow: 0 0 0 6px var(--yellow-soft); }
.mic-dot { width: 26px; height: 26px; border-radius: 50%; background: var(--yellow); }
.mic-label { font-size: 0.78rem; text-align: center; padding: 0 6px; }
.mic.is-rec { transform: scale(1.06); border-color: #E35D5B; box-shadow: 0 0 0 10px rgba(227, 93, 91, 0.2); }
.mic.is-rec .mic-dot { background: #E35D5B; animation: pulse-ic 0.9s ease infinite; }
.speak-side { flex: 1; min-width: 0; }
.speak-status { margin: 0 0 8px; }
.rec-dot { color: #E35D5B; }
.speak audio { width: 100%; max-width: 420px; height: 36px; margin-bottom: 6px; }

/* ---------- HUD : autres missions ---------- */
.quest-more { list-style: none; margin: 8px 0 0; padding: 8px 0 0; border-top: 1px solid var(--line); }
.quest-more li { font-size: 0.85rem; padding: 2px 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; background: var(--yellow); }
.dot-available { background: var(--yellow); } .dot-active { background: #5B9BE3; } .dot-ready { background: #FFFFFF; border: 2px solid var(--yellow); }
.dot-practice { background: #7DD3A8; } .dot-player { background: #E35D5B; border: 2px solid #FFFFFF; }
.hud-actions .action { width: 76px; }

/* ---------- Carte ---------- */
.overlay-map { width: min(1100px, 100%); }
.map-legend { display: flex; gap: 6px 12px; align-items: center; flex-wrap: wrap; font-size: 0.85rem; color: var(--ink-2); }
.map-legend .dot { margin-left: 6px; }
.map-body { display: grid; grid-template-columns: 1fr 260px; gap: 16px; align-items: start; }
#map-canvas { width: 100%; height: auto; border-radius: 10px; background: #2A3440; }
.map-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 60vh; overflow: auto; }
.map-list li { display: flex; gap: 10px; align-items: flex-start; background: var(--panel-2); border-radius: 10px; padding: 8px 10px; }
.map-list li .dot { margin-top: 5px; }
.map-list li div { display: flex; flex-direction: column; }
.map-list li span { font-size: 0.85rem; color: var(--ink-2); }
@media (max-width: 900px) { .map-body { grid-template-columns: 1fr; } }

/* ---------- Carnet par chapitres ---------- */
.chapter { margin-bottom: 18px; }
.chapter > header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.chapter > header div { flex: 1; display: flex; flex-direction: column; }
.chapter > header .fr { font-size: 0.85rem; }
.ch-n { width: 32px; height: 32px; border-radius: 9px; background: var(--yellow); color: var(--charcoal); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.ch-count { font-weight: 700; color: var(--ink-2); }
.el-title { font-size: 1rem; margin: 16px 0 8px; }
.el-title .fr { font-size: 0.85rem; }

/* ---------- Menu : transfert ---------- */
.transfer { border: 1px solid rgba(254, 207, 13, 0.35); background: var(--yellow-soft); border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; }
.transfer-title { margin: 0; font-weight: 700; }
.finale-card .btn-block + .btn-block { margin-top: 8px; }

/* ---------- R3 : flèche de guidage hors écran ---------- */
.guide {
  position: fixed; z-index: 12; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 6px; pointer-events: none;
  padding: 4px 10px 4px 4px; border-radius: 999px;
  background: rgba(17, 28, 38, 0.92); border: 2px solid var(--yellow);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  color: #fff; font-weight: 700; font-size: 0.85rem; white-space: nowrap;
  animation: guide-pop 1.4s ease-in-out infinite;
}
.guide-arrow {
  width: 24px; height: 24px; border-radius: 50%; background: var(--yellow); position: relative;
  transform: rotate(var(--angle, 0rad));
}
.guide-arrow::after {
  content: ''; position: absolute; left: 7px; top: 6px;
  border-left: 11px solid var(--charcoal); border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
@keyframes guide-pop { 0%, 100% { box-shadow: 0 6px 18px rgba(0,0,0,.35), 0 0 0 0 rgba(254,207,13,.5); } 50% { box-shadow: 0 6px 18px rgba(0,0,0,.35), 0 0 0 6px rgba(254,207,13,0); } }

/* R3 : missions suivies (carte et HUD) */
.map-list li[data-track] { cursor: pointer; border: 2px solid transparent; transition: border-color .15s, background .15s; }
.map-list li[data-track]:hover, .map-list li[data-track]:focus-visible { border-color: rgba(254,207,13,.5); outline: none; }
.map-list li.is-tracked { border-color: var(--yellow); background: rgba(254,207,13,.08); }
.track-tag { font-style: normal; font-size: .72rem !important; font-weight: 700; color: var(--yellow) !important; margin-top: 3px; text-transform: uppercase; letter-spacing: .04em; }
.track-tag.is-hint { color: var(--ink-2) !important; font-weight: 400; text-transform: none; letter-spacing: 0; }
#hud-quest-more li[data-track] { cursor: pointer; border-radius: 6px; }
#hud-quest-more li[data-track]:hover { background: rgba(255,255,255,.06); }

/* R3 : décor du centre commercial derrière l'écran titre */
.title-bg { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; image-rendering: pixelated;
  opacity: 0.30; pointer-events: none; z-index: 0;
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse at 50% 45%, #000 20%, transparent 75%);
  animation: title-pan 60s ease-in-out infinite alternate; }
@keyframes title-pan { from { transform: scale(1.05) translate(-2%, -1%); } to { transform: scale(1.12) translate(2%, 1.5%); } }
@media (prefers-reduced-motion: reduce) { .title-bg { animation: none; } }
.screen > .title-card, .screen > .creator-card, .screen > .title-footer { z-index: 1; }

.howto-dots { display: inline-flex; gap: 5px; align-items: center; height: 26px; }
.howto-dots i { width: 8px; height: 8px; border-radius: 2px; background: var(--yellow); box-shadow: 0 0 0 2px rgba(17,28,38,.8); }
.howto-dots i:nth-child(2) { opacity: .7; } .howto-dots i:nth-child(3) { opacity: .45; }

/* Espace CFP / R4 */
#cloud-status{position:fixed;bottom:9px;left:16px;padding:6px 10px;border-radius:5px;background:#0d171ee8;color:#afc1ce;font-size:11px;z-index:9500;pointer-events:none}#cloud-account{position:fixed;top:8px;left:50%;transform:translateX(-50%);font-size:12px;color:#FECF0D;background:#16242ee8;padding:7px 12px;border:1px solid #485764;border-radius:6px;text-decoration:none;z-index:9500}.cloud-block{position:fixed;inset:0;z-index:20000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;background:#101b24ed;padding:40px;text-align:center}.cloud-block p{max-width:600px}.hud-player{border-top:3px solid #FECF0D}.hud-quest{border-left:3px solid #FECF0D}.title-card{border:1px solid #6a717b;box-shadow:0 22px 80px #000a}.title-bg{filter:saturate(1.05)!important}.shop-catalog{display:grid;grid-template-columns:1fr 1fr;gap:12px}.shop-catalog .btn{text-align:left;padding:16px}.shop-catalog .owned{border-color:#4b9b7b}.shop-preview{image-rendering:pixelated;max-width:100%;border:1px solid #455762}
.classroom-bar{position:fixed;left:20px;right:20px;bottom:68px;z-index:15;display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:rgba(17,31,43,.97);border:1px solid #4c6477;border-radius:16px;padding:12px 18px;box-shadow:0 10px 30px #0006;color:#eef4f5;font:14px 'Atkinson Hyperlegible',sans-serif}.classroom-bar strong{font-size:11px;letter-spacing:1px;color:#ffcf50}.classroom-bar select{background:#203342;color:white;border:1px solid #587080;border-radius:8px;padding:9px;max-width:380px}.classroom-note{font-size:12px;color:#b8c9d2}.classroom-bar .btn{padding:8px 12px}@media(max-width:750px){.classroom-bar{left:6px;right:6px;bottom:68px;padding:8px;gap:6px}.classroom-bar select{max-width:65vw}.classroom-note{display:none}.classroom-bar strong{width:100%}}

.classroom-bar[hidden]{display:none}