/* ui.css — système unique, chargé en dernier. Trois matières, partout :
     PAPIER  (fiches, cartes, boutons)       --paper / --ink
     CUIR    (cadres, bordures, ombres dures) --leather
     ÉCRAN   (le Traducteur et ce qu'il dit)  --scr / --scr-ink
   + une seule police d'affichage (pixel), une seule police de texte (serif). */

:root {
  --paper: #fbf4e2; --paper-2: #efe0bd; --ink: #2e1f14; --ink-soft: #7a5e44;
  --leather: #4e2716; --leather-d: #2a120a; --gold: #e8b048; --gold-d: #8a5a1c;
  --scr: #0f2a26; --scr-ink: #8fffd0;
  --pk-edge: #4e2716; --pk-paper: #fbf4e2; --pk-ink: #2e1f14;
  --frame: 0 0 0 3px var(--leather), 0 4px 0 3px var(--leather-d), 0 14px 30px rgba(0, 0, 0, 0.45);
}

/* ------------------------------------------------------------- briques */
.btn {
  font-family: var(--pixel); word-spacing: 0.3em; font-size: 0.95em;
  padding: 0.5em 1.1em; border: none; border-radius: 8px;
  background: linear-gradient(180deg, #fff, var(--paper-2)); color: var(--ink);
  box-shadow: 0 0 0 2px var(--leather), 0 3px 0 2px var(--leather-d);
}
.btn:hover { background: linear-gradient(180deg, #fff, #f7e9c6); border: none; transform: translateY(-1px); }
.btn:active { transform: translateY(2px); box-shadow: 0 0 0 2px var(--leather), 0 1px 0 2px var(--leather-d); }
.btn.primary { background: linear-gradient(180deg, #ffe07c, var(--gold)); color: var(--ink); font-weight: normal; }
.btn.primary:hover { background: linear-gradient(180deg, #ffe998, #f0bc58); }
.btn.ghost { background: linear-gradient(180deg, #f6ecd6, #e4d2ab); }
.btn.danger { background: linear-gradient(180deg, #f6d6cc, #e4aa9a); color: #6a1a10; }
kbd {
  font-family: var(--pixel); color: var(--ink); background: var(--gold);
  border: none; border-radius: 5px; box-shadow: 0 2px 0 var(--gold-d); padding: 0.1em 0.45em;
}
.btn kbd { background: rgba(78, 39, 22, 0.15); box-shadow: none; }

/* fiche papier encadrée de cuir : la brique de tous les écrans */
.paper-card, .title-card, .quiz-q h2, .m-q h2, .res-stats, .end-cell, .end-badge, .end-student {
  background: linear-gradient(180deg, var(--paper), var(--paper-2)) !important; color: var(--ink) !important;
  border: none !important; border-radius: 12px; box-shadow: var(--frame); backdrop-filter: none;
}

/* ------------------------------------------------------------- chargement */
#boot {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(232, 176, 72, 0.12), transparent 60%),
    repeating-linear-gradient(45deg, #1a0f0a 0 8px, #1e120c 8px 16px);
}
#boot h1 { font-family: "LQPixel", monospace; color: var(--paper); letter-spacing: 0.08em; text-shadow: 0 4px 0 var(--leather-d); word-spacing: 0.3em; }
#boot em { color: var(--gold); }
.boot-track {
  width: min(320px, 70vw); height: 16px; margin: 1.2rem auto 0; padding: 3px; border-radius: 8px;
  background: var(--scr); box-shadow: var(--frame);
}
#boot-bar { height: 100%; border-radius: 4px; background: repeating-linear-gradient(90deg, var(--scr-ink) 0 6px, #5fd8a8 6px 8px); box-shadow: 0 0 8px var(--scr-ink); }
#boot p { font-family: var(--pixel); color: var(--paper-2); word-spacing: 0.3em; }
#boot p::before { content: "◉ TRAD-1 · "; color: var(--scr-ink); }

/* ----------------------------------------------------------- écran-titre */
.title-screen { background: linear-gradient(180deg, rgba(20, 10, 6, 0.1) 0%, rgba(20, 10, 6, 0.55) 60%, rgba(20, 10, 6, 0.85) 100%); }
.title-logo h1 { font-family: var(--pixel); color: var(--paper); text-shadow: 0 5px 0 var(--leather-d), 0 0 30px rgba(232, 176, 72, 0.35); }
.title-logo h1 em { color: var(--gold); }
.tagline { font-family: var(--serif); font-style: italic; color: var(--paper-2); text-shadow: 0 2px 6px #000; }
.title-card { padding: 1.1em 1.3em; }
.lang-block h3 { font-family: var(--pixel); color: var(--ink-soft); letter-spacing: 0.04em; text-transform: none; font-size: 0.85em; word-spacing: 0.3em; }
.lang { border: none; background: rgba(255, 255, 255, 0.5); color: var(--ink); font-family: var(--pixel); box-shadow: inset 0 0 0 2px rgba(120, 85, 50, 0.25); }
.lang:hover { background: #fff; }
.lang.on { background: #fff3c8; box-shadow: inset 0 0 0 3px var(--gold); color: var(--ink); }
.lang-flag { background: var(--leather); color: var(--paper); font-family: var(--pixel); }
.title-note { font-family: var(--serif); color: var(--ink-soft); }
.title-foot { color: var(--paper-2); font-family: var(--serif); text-shadow: 0 1px 4px #000; }
.title-foot .keys { font-family: var(--pixel); word-spacing: 0.3em; }

/* -------------------------------------------------------------- arrivée */
.intro-screen { background: linear-gradient(180deg, transparent 50%, rgba(20, 10, 6, 0.8) 100%); }
.intro-line { font-family: var(--pixel); color: var(--paper); text-shadow: 0 3px 0 var(--leather-d), 0 0 12px #000; word-spacing: 0.3em; }
.intro-line:first-child { font-family: var(--pixel); color: var(--gold); }

/* --------------------------------------------------------------- duels */
.quiz-head, .master-head, .master-foot { font-family: var(--pixel); word-spacing: 0.3em; }
.quiz-head > *, .master-head > * {
  padding: 0.2em 0.7em; border-radius: 6px; background: var(--paper); color: var(--ink); box-shadow: 0 0 0 2px var(--leather), 0 3px 0 2px var(--leather-d);
}
.quiz-prog, .m-prog { color: var(--ink); }
.quiz-cat, .m-name { color: var(--ink-soft); }
.quiz-q h2, .m-q h2 { font-family: var(--pixel); font-weight: normal; color: var(--ink); word-spacing: 0.3em; }
.quiz-choice {
  border: none; border-radius: 10px; color: var(--ink); font-family: var(--pixel); font-size: 1.1em; word-spacing: 0.3em;
  background: linear-gradient(180deg, #fff, var(--paper-2)); box-shadow: 0 0 0 3px var(--leather), 0 4px 0 3px var(--leather-d);
}
.quiz-choice:hover { background: #fff3c8; border: none; }
.quiz-screen.wrong .quiz-choice { box-shadow: 0 0 0 3px #a03028, 0 4px 0 3px #5a140e; }
.master-input {
  border: none; border-radius: 10px; background: var(--scr); color: var(--scr-ink); font-family: var(--pixel); font-size: 1.3em;
  box-shadow: var(--frame); text-shadow: 0 0 6px rgba(127, 255, 200, 0.6); word-spacing: 0.3em;
}
.master-input::placeholder { color: rgba(127, 255, 200, 0.35); }
.master-foot { color: var(--paper); text-shadow: 0 2px 4px #000; }
.m-track .seg { background: rgba(251, 244, 226, 0.25); }
.m-track .seg.cur { background: var(--paper); }
.quiz-screen.result, .master-screen.result { background: rgba(20, 10, 6, 0.6); }
.res-title { font-family: var(--pixel); color: var(--paper); text-shadow: 0 4px 0 var(--leather-d); word-spacing: 0.3em; }
.res-stats span { color: var(--ink-soft); font-family: var(--serif); text-transform: none; letter-spacing: 0; }
.res-stats b { color: var(--ink); font-family: var(--pixel); }
.res-name, .res-medal { color: var(--paper); font-family: var(--pixel); text-shadow: 0 2px 0 var(--leather-d); }

/* ---------------------------------------------------------------- fin */
.end-title { font-family: var(--pixel); color: var(--paper); text-shadow: 0 4px 0 var(--leather-d); word-spacing: 0.3em; }
.end-body { color: var(--paper-2); font-family: var(--serif); text-shadow: 0 1px 4px #000; }
.end-screen h3 { color: var(--gold); font-family: var(--pixel); text-transform: none; letter-spacing: 0.04em; word-spacing: 0.3em; }
.end-cell b, .end-badge em, .end-student { font-family: var(--pixel); color: var(--ink) !important; }
.end-cell span { color: var(--ink-soft); font-family: var(--serif); text-transform: none; }

/* ------------------------------------------------- HUD : coins de l'écran */
.hud-esc {
  font-family: var(--pixel); background: var(--paper); color: var(--ink); border: none; border-radius: 8px;
  box-shadow: 0 0 0 2px var(--leather), 0 3px 0 2px var(--leather-d);
}
.hud-keys { gap: 6px; }
.keyrow {
  padding: 4px 10px 4px 6px; border-radius: 8px; background: var(--paper); color: var(--ink);
  box-shadow: 0 0 0 2px var(--leather), 0 3px 0 2px var(--leather-d); cursor: pointer; pointer-events: auto;
}
.keyrow .kl { color: var(--ink); }
.keyrow.locked { display: none; }
.keyrow.fresh { animation: key-new 1.6s ease 3; }
@keyframes key-new { 50% { box-shadow: 0 0 0 3px var(--gold), 0 3px 0 3px var(--gold-d), 0 0 18px var(--gold); } }

/* ---------------------------------------- Traducteur : en haut au centre */
.trad {
  left: 50%; bottom: auto; top: 10px; transform: translateX(-50%);
  width: auto; display: flex; align-items: center; gap: 10px;
  padding: 6px 10px 6px 12px; border-radius: 12px;
}
.trad.flash { animation: trad-flash-c 0.5s ease; }
@keyframes trad-flash-c { 30% { transform: translateX(-50%) translateY(3px); box-shadow: 0 4px 0 #0c1016, 0 0 0 4px var(--scr-ink); } }
.trad-top { flex-direction: column; gap: 3px; margin: 0; }
.trad-brand { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 0.56em; }
.trad-screen { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 5px 10px; min-width: 210px; }
.trad-zone { grid-column: 1; grid-row: 1; }
.trad-count { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: 1.5em; }
.trad-bars { grid-column: 1; grid-row: 2; width: 120px; }
.trad-key { margin: 0; flex-direction: column; gap: 2px; font-size: 0.66em; }
/* les notifications s'empilent SOUS le Traducteur */
.toasts { top: 92px; }
.trad.hidden ~ .toasts, #ui:not(:has(.trad:not(.hidden))) .toasts { top: 14px; }
.place-banner { top: 18px; left: 18px; }

/* ------------------------------------------- « Nouveau ! » : un outil débloqué */
.unlock-wrap { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; pointer-events: auto; background: rgba(20, 10, 6, 0.55); animation: fade-in 0.25s ease; }
@keyframes fade-in { from { opacity: 0; } }
.unlock {
  width: min(440px, 90vw); padding: 18px 22px 16px; text-align: center; border-radius: 14px;
  background: linear-gradient(180deg, var(--paper), var(--paper-2)); color: var(--ink); box-shadow: var(--frame);
  font-family: var(--pixel); word-spacing: 0.3em; animation: unlock-pop 0.45s cubic-bezier(.3, 1.6, .5, 1);
}
@keyframes unlock-pop { from { transform: scale(0.6) rotate(-4deg); opacity: 0; } }
.unlock-kicker { display: inline-block; padding: 2px 10px; border-radius: 6px; background: var(--gold); color: var(--ink); font-size: 0.8em; box-shadow: 0 2px 0 var(--gold-d); }
.unlock-icon { font-size: 3em; margin: 10px 0 2px; filter: drop-shadow(0 3px 0 rgba(78, 39, 22, 0.35)); }
.unlock-icon.trad-mini { display: inline-block; font-size: 1em; padding: 10px 14px; border-radius: 10px; background: linear-gradient(160deg, #3b4a5c, #1c2430); box-shadow: 0 0 0 3px #121820, 0 4px 0 3px #0c1016; }
.unlock-icon.trad-mini span { display: block; padding: 6px 14px; border-radius: 6px; background: var(--scr); color: var(--scr-ink); font-size: 1.6em; text-shadow: 0 0 8px var(--scr-ink); }
.unlock-title { font-size: 1.5em; margin: 4px 0; }
.unlock-text { font-family: var(--serif); font-size: 0.98em; color: var(--ink-soft); word-spacing: normal; line-height: 1.45; margin: 6px 0 12px; }
.unlock-key { display: flex; justify-content: center; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--ink-soft); font-size: 0.85em; }
.unlock-key kbd { font-size: 1.1em; }

/* pendant un duel, une leçon, la fin : le Traducteur se range */
#ui:has(.screen-layer.in:not(.hidden)) .trad { display: none; }
#ui:has(.screen-layer.in:not(.hidden)) .toasts { top: 14px; }
.end-student { gap: 6px; padding: 4px 8px 4px 4px !important; text-transform: none; }
.end-student img { width: 28px; height: 28px; image-rendering: pixelated; border-radius: 4px; background: #e8d6b0; }
.end-student .stars i.on { background: #e8a72c; }

/* langues à écriture non latine : romanisation sous le mot ; polices de secours */
.entry-roman, .lesson-roman { display: block; font-family: var(--serif); font-style: italic; color: var(--ink-soft); font-size: 0.78em; word-spacing: normal; }
.lesson-roman { font-size: 1em; margin-top: -4px; }
:root { --pixel: "LQPixel", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Hiragino Sans", "Yu Gothic", "Malgun Gothic", "Microsoft YaHei", ui-monospace, monospace; }

/* dix langues : deux rangées de cinq boutons */
.lang-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.lang-row .lang { padding: 6px 4px; font-size: 0.82em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.title-card { max-width: min(640px, 94vw); }