/* v6 : Traducteur, étiquettes du monde, sous-titres, leçons, commandes,
   sommaire du Carnet, rivaux. Même langage visuel : papier, cuir, encre, pixel. */

/* ------------------------------------------------------------ Traducteur */
.trad {
  position: absolute; left: 14px; bottom: 54px; z-index: 3; width: 168px;
  padding: 8px 10px 9px; border-radius: 14px 14px 14px 22px;
  background: linear-gradient(160deg, #3b4a5c, #263240 60%, #1c2430);
  border: 3px solid #121820; box-shadow: 0 4px 0 #0c1016, 0 10px 24px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  font-family: var(--pixel); word-spacing: 0.3em; pointer-events: none; transition: transform 0.15s;
}
.trad.hidden { display: none; }
.trad.flash { animation: trad-flash 0.5s ease; }
@keyframes trad-flash { 30% { transform: translateY(-4px) rotate(-2deg); box-shadow: 0 4px 0 #0c1016, 0 0 0 4px #7ff0ff; } }
.trad-top { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.trad-led { width: 8px; height: 8px; border-radius: 50%; background: #2a4a3a; box-shadow: inset 0 0 0 1px #0c1016; }
.trad-led.blink { animation: led 0.25s ease; }
@keyframes led { 0%, 60% { background: #7fff9a; box-shadow: 0 0 8px #7fff9a; } }
.trad-brand { font-size: 0.66em; color: #9fb0c4; letter-spacing: 0.15em; }
.trad-screen {
  padding: 6px 8px; border-radius: 6px; background: #0f2a26; color: #8fffd0;
  box-shadow: inset 0 0 0 2px #0a1a18, inset 0 0 18px rgba(127, 255, 200, 0.12);
  text-shadow: 0 0 6px rgba(127, 255, 200, 0.6);
}
.trad-zone { font-size: 0.78em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trad-count { font-size: 1.25em; margin: 2px 0 4px; }
.trad.done .trad-count::after { content: " ✓"; color: #f0e08a; }
.trad-bars { display: flex; gap: 3px; align-items: flex-end; height: 14px; }
.trad-bars i { flex: 1; background: rgba(127, 255, 200, 0.15); border-radius: 1px; }
.trad-bars i:nth-child(1) { height: 30%; } .trad-bars i:nth-child(2) { height: 45%; } .trad-bars i:nth-child(3) { height: 60%; }
.trad-bars i:nth-child(4) { height: 80%; } .trad-bars i:nth-child(5) { height: 100%; }
.trad-bars i.on { background: #8fffd0; box-shadow: 0 0 6px #8fffd0; }
.trad-key { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 0.72em; color: #c8d4e0; }
.trad-key kbd { background: #f0c04a; color: #2a1a10; border-radius: 5px; padding: 0 6px; box-shadow: 0 2px 0 #8a5a1c; font-family: var(--pixel); }

/* ---------------------------------------- étiquettes du monde traduit, « ! » */
.tag-layer { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.wtag {
  position: absolute; left: 0; top: 0; padding: 1px 6px 2px; border-radius: 4px;
  background: rgba(15, 42, 38, 0.82); color: #c8ffe8; font-family: var(--pixel); font-size: 0.78em; word-spacing: 0.25em;
  border: 1px solid rgba(127, 255, 200, 0.45); white-space: nowrap; transition: opacity 0.2s;
}
.exclaim {
  position: absolute; left: 0; top: 0; width: 34px; height: 40px; display: grid; place-items: center;
  background: #fff8e8; color: #c0392b; border: 3px solid #2a1a10; border-radius: 8px;
  font-family: var(--pixel); font-size: 1.6em; box-shadow: 0 3px 0 #2a1a10;
  animation: bang 0.35s cubic-bezier(.3, 1.8, .5, 1);
}
@keyframes bang { from { transform: scale(0.2); } }

/* -------------------------------------------- sous-titres du Traducteur */
.dlg-text.foreign { font-size: 1.22em; color: #1e2a4a; }
.dlg-sub {
  display: flex; gap: 8px; align-items: baseline; margin-top: 6px; padding: 5px 9px; border-radius: 6px;
  background: #0f2a26; color: #8fffd0; font-family: var(--serif); font-style: italic; font-size: 0.92em;
  opacity: 0; transform: translateY(4px); transition: opacity 0.25s, transform 0.25s;
}
.dlg-sub.in { opacity: 1; transform: none; }
.dlg-sub-dev { font-family: var(--pixel); font-style: normal; font-size: 0.7em; color: #6fd8b0; letter-spacing: 0.1em; }

/* -------------------------------------------------- toasts scan / phrase */
.toast.scan { border-color: #1e6a7a; background: linear-gradient(180deg, #f2fffc, #d8f4ee); }
.toast.scan .toast-title { font-size: 1.25em; }
.toast.scan .toast-title::before { content: "◉ "; color: #1e9a8a; font-size: 0.7em; }
.toast.phrase { border-color: #5d7592; }
.toast.phrase .toast-title { font-size: 0.9em; }

/* ----------------------------------------------------------------- leçon */
.lesson-screen { pointer-events: auto; }
.lesson {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(520px, 92vw); padding: 14px 18px 16px; border-radius: 16px;
  background: linear-gradient(180deg, var(--paper), var(--paper-2)); color: var(--ink);
  border: 4px solid var(--leather); box-shadow: 0 0 0 3px #2a120a, 0 6px 0 4px #241008, 0 30px 70px rgba(0, 0, 0, 0.7);
  font-family: var(--pixel); word-spacing: 0.3em; text-align: center;
}
.lesson-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 0.85em; color: var(--ink-soft); }
.lesson-dev { color: #1e9a8a; }
.lesson-card { margin: 14px auto 10px; padding: 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.55); box-shadow: inset 0 0 0 3px var(--accent); animation: lesson-in 0.35s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes lesson-in { from { transform: scale(0.85) rotate(-3deg); opacity: 0; } }
.lesson-pic canvas { image-rendering: pixelated; width: 96px; height: 96px; }
.lesson-word { font-size: 2.2em; color: var(--ink); margin-top: 4px; }
.lesson-native { font-family: var(--serif); font-style: italic; font-size: 1.1em; color: var(--ink-soft); word-spacing: normal; }
.lesson-swatch { width: 60px; height: 10px; margin: 8px auto 0; border-radius: 5px; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2); }
.lesson-dots { display: flex; justify-content: center; gap: 4px; margin: 6px 0 10px; }
.lesson-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(90, 60, 30, 0.2); }
.lesson-dots i.on { background: #1e9a8a; }
.lesson-actions { display: flex; justify-content: center; gap: 10px; }
.lesson .btn, .order .btn { font-family: var(--pixel); }

/* --------------------------------------------------------- commandes */
.order-screen { pointer-events: auto; }
.order {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(600px, 94vw);
  padding: 16px 18px; border-radius: 16px; background: linear-gradient(180deg, var(--paper), var(--paper-2)); color: var(--ink);
  border: 4px solid var(--leather); box-shadow: 0 0 0 3px #2a120a, 0 6px 0 4px #241008, 0 30px 70px rgba(0, 0, 0, 0.7);
  font-family: var(--pixel); word-spacing: 0.3em;
}
.order-head { display: flex; align-items: center; gap: 12px; }
.order-face { width: 64px; height: 64px; image-rendering: pixelated; border-radius: 8px; border: 3px solid var(--leather); background: #e8d6b0; }
.order-bubble { flex: 1; padding: 8px 12px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 2px rgba(90, 60, 30, 0.25); }
.order-ask { font-size: 1.25em; color: #1e2a4a; }
.order-hint { font-family: var(--serif); font-style: italic; font-size: 0.8em; color: var(--ink-soft); word-spacing: normal; }
.order-count { font-size: 0.85em; color: var(--ink-soft); }
.order-choices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 16px 0 10px; }
.order-choice { padding: 10px 0; border: none; border-radius: 10px; background: rgba(255, 255, 255, 0.6); box-shadow: inset 0 0 0 2px rgba(90, 60, 30, 0.25), 0 3px 0 rgba(90, 60, 30, 0.3); cursor: pointer; }
.order-choice:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 3px #e0a030, 0 5px 0 rgba(90, 60, 30, 0.3); }
.order-choice canvas { image-rendering: pixelated; width: 64px; height: 64px; }
.order-feedback { text-align: center; margin-bottom: 8px; }
.order-feedback.ok { color: #2f8a3e; } .order-feedback.ko { color: #b8372e; }
.order-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* -------------------------------------------------- sommaire du Carnet */
.sum-big { display: flex; align-items: center; gap: 14px; margin: 6px 6px 14px; }
.sum-num { font-family: var(--pixel); font-size: 3.4em; color: var(--ink); line-height: 1; }
.sum-label { flex: 1; display: flex; flex-direction: column; gap: 5px; font-family: var(--serif); color: var(--ink-soft); }
.sum-label b { font-family: var(--pixel); font-weight: normal; color: var(--ink); word-spacing: 0.3em; }
.sum-goal { font-size: 0.82em; font-style: italic; }
.chapter-bar.thin { height: 4px; max-width: none; }
.chapter-bar.thin i { background: #7a5e44; }
.sum-row { display: flex; gap: 10px; margin: 4px 8px; font-family: var(--pixel); color: var(--ink); word-spacing: 0.3em; }
.sum-tracked { margin: 14px 6px 0; padding: 10px 12px; border-radius: 8px; background: rgba(255, 248, 220, 0.85); box-shadow: inset 0 0 0 2px var(--accent); }
.sum-tracked.big { margin: 0 0 12px; }
.sum-tracked-label { font-family: var(--pixel); color: var(--ink); word-spacing: 0.3em; margin: 2px 0; }
.sum-chapter { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.sum-open {
  flex: 1; display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: none; border-radius: 8px; cursor: pointer; text-align: left;
  background: rgba(255, 255, 255, 0.45); box-shadow: inset 4px 0 0 var(--accent), inset 0 0 0 2px rgba(120, 85, 50, 0.15);
  font: inherit; color: var(--ink);
}
.sum-open:hover { background: rgba(255, 248, 220, 0.9); }
.sum-icon { font-size: 1.3em; width: 26px; text-align: center; }
.sum-name { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.sum-name b { font-family: var(--pixel); font-weight: normal; word-spacing: 0.3em; }
.sum-name .chapter-bar { max-width: none; }
.sum-name .chapter-bar i { background: var(--accent); }
.sum-count { font-family: var(--pixel); font-size: 0.85em; color: var(--ink-soft); }
.sum-chapter.done .sum-count { color: #2f8a3e; }
.pin { width: 34px; height: 34px; border: none; border-radius: 8px; cursor: pointer; background: rgba(255, 255, 255, 0.45); opacity: 0.45; filter: grayscale(1); }
.pin.on, .pin:hover { opacity: 1; filter: none; background: #fff3c8; box-shadow: inset 0 0 0 2px #e0a030; }
.pin-btn { border: none; border-radius: 6px; padding: 3px 8px; cursor: pointer; background: rgba(255, 255, 255, 0.55); font-family: var(--pixel); font-size: 0.85em; color: var(--ink-soft); word-spacing: 0.3em; box-shadow: inset 0 0 0 2px rgba(120, 85, 50, 0.25); }
.pin-btn.on { background: #fff3c8; color: var(--ink); box-shadow: inset 0 0 0 2px #e0a030; }
.entry-hint { font-family: var(--serif); font-style: normal; font-size: 0.78em; color: #a0703c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* signets compacts (11 chapitres) */
.ribbons.compact { gap: 4px; top: 30px; right: -164px; }
.panel.panel-book.book-panel { width: min(calc(96vw - 180px), 1000px); margin-right: 170px; }
.panel.panel-quests.book-panel { width: min(96vw, 1060px); margin-right: 0; }
/* un panneau ouvert : les notifications attendent derrière */
#ui:has(.panel-wrap:not(.hidden)) .toasts { opacity: 0; }
.ribbons.compact .ribbon { padding: 4px 24px 4px 10px; font-size: 0.7em; flex-direction: row; justify-content: space-between; gap: 8px; width: 160px; }

/* phrases */
.phrases { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 2px 6px; }
.phrase { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 6px 8px 6px 22px; border: none; border-radius: 6px; background: none; text-align: left; font: inherit; color: inherit; }
.phrase.got { cursor: pointer; }
.phrase.got:hover { background: rgba(232, 184, 92, 0.18); }
.phrase-target { font-family: var(--pixel); font-weight: normal; font-size: 1em; color: #1e2a4a; word-spacing: 0.3em; }
.phrase-native { font-family: var(--serif); font-size: 0.85em; color: var(--ink-soft); }
.phrase.missing .phrase-target { color: rgba(90, 65, 40, 0.35); }
.phrase .entry-num { top: 8px; left: 2px; }

/* rivaux */
.rivals { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.rival { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 8px; background: rgba(255, 255, 255, 0.4); box-shadow: inset 4px 0 0 var(--accent), inset 0 0 0 2px rgba(120, 85, 50, 0.15); }
.rival img { width: 40px; height: 40px; image-rendering: pixelated; border-radius: 6px; background: #e8d6b0; }
.rival-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.rival-body b { font-family: var(--pixel); font-weight: normal; color: var(--ink); }
.rival-cat, .rival-status { font-family: var(--serif); font-size: 0.75em; color: var(--ink-soft); }
.rival.ready { box-shadow: inset 4px 0 0 var(--accent), inset 0 0 0 2px #e0a030; }
.rival.ready .rival-status { color: #b8372e; font-weight: bold; }
.rival.wait { opacity: 0.6; }
.rival .stars i.on { background: #e8a72c; }