/* HUD v8.1 : viseur du Traducteur, gros caractères ja/zh/ko, mini-Carnet,
   bandeau des mots récents. (fichier à part : n'écrase rien des autres feuilles) */

/* ------------------------------------------------ viseur (souris, ordinateur) */
html.lq-aim canvas { cursor: none; }
.lq-reticle {
  position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none;
  width: 0; height: 0;
}
.lq-reticle.hidden { display: none; }
.lq-reticle i {                              /* v10.14 : une petite croix pixel (plus d'anneau ni de pulsation) */
  position: absolute; left: -9px; top: -9px; width: 18px; height: 18px;
  background: linear-gradient(#fff, #fff) center / 2px 100% no-repeat, linear-gradient(#fff, #fff) center / 100% 2px no-repeat;
  filter: drop-shadow(1px 0 0 #1a1a1a) drop-shadow(-1px 0 0 #1a1a1a) drop-shadow(0 1px 0 #1a1a1a) drop-shadow(0 -1px 0 #1a1a1a);
}
.lq-reticle b { display: none; }
.lq-reticle.on i {                           /* une chose à portée (elle est entourée de jaune) : la croix devient jaune */
  background: linear-gradient(#ffd84a, #ffd84a) center / 2px 100% no-repeat, linear-gradient(#ffd84a, #ffd84a) center / 100% 2px no-repeat;
}
.lq-reticle.far i { opacity: 0.5; }          /* visée trop loin : la croix pâlit */

/* ------------------------------------- japonais / chinois / coréen : gros et net */
html:is([data-learn="ja"], [data-learn="zh"], [data-learn="ko"]) .wtag {
  font-size: 1.05em; font-weight: 700; color: #fff; padding: 2px 8px 3px;
  background: rgba(8, 26, 24, 0.92); border-color: rgba(127, 255, 210, 0.75);
  text-shadow: 0 1px 0 #000; letter-spacing: 0.04em;
}
html:is([data-learn="ja"], [data-learn="zh"], [data-learn="ko"]) .wlabel .wl-main { font-size: 1.4em; font-weight: 700; }
html:is([data-learn="ja"], [data-learn="zh"], [data-learn="ko"]) .wf-word { font-size: 2.1em; font-weight: 700; }
html:is([data-learn="ja"], [data-learn="zh"], [data-learn="ko"]) .feed-card.k-scan .feed-title { font-size: 1.35em; font-weight: 700; }
html:is([data-learn="ja"], [data-learn="zh"], [data-learn="ko"]) .dlg-text.foreign { font-size: 1.5em; font-weight: 700; }
html:is([data-learn="ja"], [data-learn="zh"], [data-learn="ko"]) .entry-target { font-size: 1.6em; font-weight: 700; }
html:is([data-learn="ja"], [data-learn="zh"], [data-learn="ko"]) .lq-learn { font-weight: 700; }
html:is([data-learn="ja"], [data-learn="zh"], [data-learn="ko"]) .tl-roman { font-weight: normal; }

/* ------------------------------------------------ bouton Carnet : plus gros */
.keyrow[data-tool="book"] { font-size: 1.15em; padding: 7px 14px 7px 8px; gap: 0.5em; }
.keyrow[data-tool="book"] .kl::before { content: "📖 "; }
.keyrow[data-tool="book"].active { box-shadow: 0 0 0 3px var(--gold, #e8b830), 0 3px 0 3px var(--gold-d, #9a6a10); }

/* --------------------------- bouton « Scanner » + panneau des mots de la zone */
.zb-btn { font-size: 1.15em; padding: 7px 12px 7px 10px; gap: 0.5em; }
.zb-btn .zb-btn-n { font-style: normal; font-size: 0.78em; opacity: 0.75; }
.zb-btn.active, .keyrow[data-tool="book"].active { box-shadow: 0 0 0 3px var(--gold, #e8b830), 0 3px 0 3px var(--gold-d, #9a6a10); }
.zonebook {
  /* le boîtier du Traducteur (même matière que l'appareil en haut de l'écran) */
  position: absolute; right: 14px; bottom: 190px; z-index: 6;
  width: min(272px, 40vw); max-height: min(calc(100vh - 190px - 196px), 540px);
  display: flex; flex-direction: column; gap: 6px; padding: 7px 8px 6px;
  font-family: var(--pixel); word-spacing: 0.1em; color: var(--scr-ink, #8fffd0);
  border-radius: 14px 14px 22px 14px; border: 3px solid #121820;
  background: linear-gradient(160deg, #3b4a5c, #263240 60%, #1c2430);
  box-shadow: 0 4px 0 #0c1016, 0 6px 14px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  pointer-events: auto; animation: zbIn 0.2s cubic-bezier(.2, 1.4, .4, 1) both;
}
.zonebook.hidden, .hud.hidden ~ .zonebook, #ui.panel-open .zonebook, #ui:has(.dialogue:not(.hidden)) .zonebook, body.mp-on .zonebook { display: none; }
@keyframes zbIn { from { opacity: 0; transform: translateY(14px) scale(0.97); } }
/* haut du boîtier : voyants, nom, total, bouton */
.zb-head { display: flex; align-items: center; gap: 7px; padding: 0 2px; color: #c8d4e0; }
.zb-leds { display: flex; gap: 3px; }
.zb-leds i { width: 7px; height: 7px; border-radius: 50%; background: #2a4a3a; box-shadow: inset 0 0 0 1px #0c1016; }
.zb-leds i.on { background: #8fffd0; box-shadow: 0 0 6px #8fffd0; animation: zbLed 2.4s ease-in-out infinite; }
@keyframes zbLed { 50% { opacity: 0.45; } }
.zb-title { flex: 1; font-weight: normal; font-size: 0.82em; letter-spacing: 0.12em; text-transform: uppercase; color: #9fb0c4; }
.zb-total { font-size: 0.72em; color: #f0c860; }
.zb-x { font: inherit; font-size: 0.7em; cursor: pointer; border: none; border-radius: 6px; padding: 3px 7px; color: #2a1a10; background: #f0c04a; box-shadow: 0 2px 0 #8a5a1c; }
.zb-x:hover { background: #ffd860; }
.zb-x:active { transform: translateY(2px); box-shadow: none; }
/* l'écran vert, avec ses lignes de balayage */
.zb-screen { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 0; padding: 7px 6px 6px; border-radius: 7px;
  background: var(--scr, #0f2a26); box-shadow: inset 0 0 0 2px #0a1a18, inset 0 0 22px rgba(127, 255, 200, 0.14); overflow: hidden; }
.zb-screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: 7px;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, 0.16) 2px 3px); }
.zb-screen::before { content: ''; position: absolute; left: 0; right: 0; top: -30%; height: 30%; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(143, 255, 208, 0.07), transparent); animation: zbSweep 3.6s linear infinite; }
@keyframes zbSweep { to { top: 100%; } }
.zb-tabs { display: flex; gap: 4px; }
.zb-tab { flex: 1; font: inherit; font-size: 0.68em; cursor: pointer; border: none; border-radius: 5px; padding: 4px 5px; color: #8fffd0; background: rgba(143, 255, 208, 0.08); box-shadow: inset 0 0 0 1px rgba(143, 255, 208, 0.25); }
.zb-tab:hover { background: rgba(143, 255, 208, 0.16); }
.zb-tab.on { background: #8fffd0; color: #0f2a26; box-shadow: 0 0 8px rgba(143, 255, 208, 0.5); }
.zb-back { align-self: flex-start; font: inherit; font-size: 0.66em; cursor: pointer; border: none; border-radius: 5px; padding: 3px 7px; color: #8fffd0; background: rgba(143, 255, 208, 0.1); }
.zb-zone { display: flex; flex-direction: column; gap: 5px; min-height: 0; }
.zb-zhead { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; align-items: baseline; text-shadow: 0 0 6px rgba(127, 255, 200, 0.5); }
.zb-zhead b { font-weight: normal; font-size: 0.85em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zb-zhead span { font-size: 0.78em; color: #f0e08a; }
.zb-zhead .zb-bar { grid-column: 1 / -1; }
.zb-bar { display: block; height: 5px; border-radius: 1px; background: rgba(143, 255, 208, 0.12); overflow: hidden; }
.zb-bar i { display: block; height: 100%; background: repeating-linear-gradient(90deg, #8fffd0 0 5px, #5fd8a8 5px 6px); box-shadow: 0 0 6px #8fffd0; }
.zb-bar.done i { background: repeating-linear-gradient(90deg, #f0e08a 0 5px, #d8b84a 5px 6px); box-shadow: 0 0 6px #f0e08a; }
.zb-body { overflow-y: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: rgba(143, 255, 208, 0.4) transparent; }
/* une seule colonne : une ligne par mot */
.zb-list { display: flex; flex-direction: column; gap: 3px; padding-right: 2px; }
.zb-word { position: relative; display: flex; align-items: center; gap: 7px; padding: 3px 26px 3px 3px; border: none; border-radius: 5px; font: inherit; color: inherit; text-align: left;
  cursor: default; background: rgba(143, 255, 208, 0.06); box-shadow: inset 2px 0 0 var(--accent); min-width: 0; }
.zb-word.got { cursor: pointer; }
.zb-word.got:hover { background: rgba(143, 255, 208, 0.16); }
.zb-word.missing { box-shadow: inset 2px 0 0 rgba(143, 255, 208, 0.18); }
.zb-word.missing .zb-pic { opacity: 0.35; }
.zb-pic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 4px; background: #e8f4ec; box-shadow: inset 0 0 0 1px #0a1a18; }
.zb-word.missing .zb-pic { background: rgba(143, 255, 208, 0.12); }
.zb-pic canvas { image-rendering: pixelated; width: 30px; height: 30px; }
.zb-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.zb-target { font-weight: normal; font-size: 0.92em; color: #dfffee; text-shadow: 0 0 6px rgba(127, 255, 200, 0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zb-word.missing .zb-target { color: rgba(143, 255, 208, 0.45); text-shadow: none; letter-spacing: 0.15em; }
.zb-native { font-style: normal; font-size: 0.66em; color: #7fbfa8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1em; }
.zb-num { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 0.62em; color: #f0c860; opacity: 0.8; }
.zb-empty { font-size: 0.75em; opacity: 0.7; padding: 8px 4px; }
.zb-places { display: flex; flex-direction: column; gap: 3px; padding-right: 2px; }
.zb-place { display: grid; grid-template-columns: minmax(0, 1fr) 54px 3em; gap: 6px; align-items: center; padding: 5px 6px; border: none; border-radius: 5px; font: inherit; color: inherit; text-align: left; cursor: pointer; background: rgba(143, 255, 208, 0.06); }
.zb-place:hover { background: rgba(143, 255, 208, 0.16); }
.zb-place.here { box-shadow: inset 0 0 0 1px #8fffd0; }
.zb-place.done .zb-pname { color: #f0e08a; }
.zb-pname { font-size: 0.72em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zb-pcount { font-size: 0.66em; text-align: right; color: #f0e08a; }
/* bas du boîtier : marque et grille du haut-parleur */
.zb-foot { display: flex; align-items: center; gap: 3px; padding: 0 4px; height: 9px; }
.zb-foot span { flex: 1; font-size: 0.5em; letter-spacing: 0.25em; color: #6a7a8c; }
.zb-foot i { width: 14px; height: 3px; border-radius: 2px; background: #121820; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08); }
html:is([data-learn="ja"], [data-learn="zh"], [data-learn="ko"]) .zb-target { font-size: 1.15em; font-weight: 700; }

/* tactile : sous le Traducteur, au-dessus des boutons Scanner / Parler */
body.touch .zonebook { top: calc(56px + env(safe-area-inset-top)); bottom: auto; right: calc(10px + env(safe-area-inset-right)); width: min(260px, 46vw); font-size: 0.9em;
  gap: 4px; padding: 6px 6px 5px; max-height: calc(100vh - 56px - 118px - env(safe-area-inset-bottom)); }
body.touch .zb-btn, body.touch .keyrow[data-tool="book"] { font-size: inherit; padding: 6px 10px; }
/* tactile : la fiche de quête (même coin) s'efface tant que le panneau est ouvert */
body.touch #ui:has(.zonebook:not(.hidden)) .hud-right { visibility: hidden; }
body.touch .zb-pic { width: 28px; height: 28px; }
body.touch .zb-pic canvas { width: 24px; height: 24px; }

/* ------------------------------------- bandeau des mots récents (bas, centré ; ui/recentWords.js) */
.recent-words {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 3;
  width: min(640px, calc(100vw - 2 * 340px)); display: flex; align-items: center; gap: 8px;
  padding: 4px 5px 4px 10px; border-radius: 10px; border: 2px solid #121820;
  background: linear-gradient(160deg, #3b4a5c, #263240 60%, #1c2430);
  box-shadow: 0 3px 0 #0c1016, 0 8px 18px rgba(0, 0, 0, 0.3); pointer-events: auto;
}
.recent-words.hidden, .recent-words.off, body.touch .recent-words, body.mp-on .recent-words { display: none; }
#ui.panel-open .recent-words, #ui:has(.dialogue:not(.hidden)) .recent-words, .hud.hidden ~ .recent-words, #ui:has(.screen-layer.in:not(.hidden)) .recent-words { display: none; }
@media (max-width: 1000px) { .recent-words { display: none; } }
.rw-kicker { flex: none; font-family: var(--pixel); font-size: 0.58em; color: #9fb0c4; text-transform: uppercase; letter-spacing: 0.1em; max-width: 5.5em; line-height: 1.15; }
/* l'écran du bandeau : vert, le plus récent à gauche, la fin s'efface */
.rw-view { flex: 1; min-width: 0; overflow: hidden; padding: 4px 0; border-radius: 6px; background: var(--scr, #0f2a26); box-shadow: inset 0 0 0 2px #0a1a18;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.rw-track { display: flex; gap: 6px; width: max-content; padding: 0 6px; }
.rw-chip { flex: none; display: flex; align-items: center; gap: 5px; padding: 2px 8px 2px 5px; border-radius: 5px; cursor: pointer;
  background: rgba(143, 255, 208, 0.07); box-shadow: inset 2px 0 0 var(--accent); }
.rw-chip:hover { background: rgba(143, 255, 208, 0.18); }
.rw-chip:first-child { background: rgba(143, 255, 208, 0.14); }
.rw-chip.fresh { animation: rwIn 0.5s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes rwIn { from { opacity: 0; transform: translateX(-24px); } 60% { box-shadow: inset 2px 0 0 var(--accent), 0 0 12px #8fffd0; } }
.rw-ico { font-size: 0.85em; }
.rw-word { font-family: var(--pixel); font-weight: normal; font-size: 0.95em; color: #dfffee; text-shadow: 0 0 6px rgba(127, 255, 200, 0.5); white-space: nowrap; }
.rw-num { font-family: var(--pixel); font-size: 0.6em; color: #f0c860; opacity: 0.8; }
html:is([data-learn="ja"], [data-learn="zh"], [data-learn="ko"]) .rw-word { font-size: 1.2em; font-weight: 700; }
/* l'invite du bas (« Parler »…) passe au-dessus du bandeau */
#ui:has(.recent-words:not(.hidden):not(.off)) .prompt { bottom: 62px; }

/* ------------------------------------------------------------------
   Japonais / chinois / coréen EN GRAS PARTOUT (quiz, fil des découvertes, duels,
   carnet, dialogues…) : une police « gras » réservée aux caractères CJK
   (unicode-range), placée juste après la police pixel. Le texte latin ne change pas.
   Seulement quand la langue apprise est ja/zh/ko et que l'interface ne l'est pas. */
@font-face { font-family: "LQBoldJA"; font-weight: 100 900; font-display: swap; unicode-range: U+2E80-2FDF, U+3000-30FF, U+3100-312F, U+3130-318F, U+31F0-31FF, U+3400-4DBF, U+4E00-9FFF, U+AC00-D7AF, U+F900-FAFF, U+FF00-FFEF; src: local("Hiragino Sans W6"), local("HiraginoSans-W6"), local("Hiragino Kaku Gothic ProN W6"), local("HiraKakuProN-W6"), local("Yu Gothic Bold"), local("YuGothic-Bold"), local("Meiryo Bold"), local("Meiryo-Bold"), local("Noto Sans JP Bold"), local("NotoSansJP-Bold"), local("Noto Sans CJK JP Bold"), local("NotoSansCJKjp-Bold"), local("Source Han Sans JP Bold"), local("SourceHanSansJP-Bold"), local("MS Gothic"); }
@font-face { font-family: "LQBoldZH"; font-weight: 100 900; font-display: swap; unicode-range: U+2E80-2FDF, U+3000-30FF, U+3100-312F, U+3130-318F, U+31F0-31FF, U+3400-4DBF, U+4E00-9FFF, U+AC00-D7AF, U+F900-FAFF, U+FF00-FFEF; src: local("PingFang SC Semibold"), local("PingFangSC-Semibold"), local("Microsoft YaHei Bold"), local("MicrosoftYaHei-Bold"), local("Noto Sans SC Bold"), local("NotoSansSC-Bold"), local("Noto Sans CJK SC Bold"), local("NotoSansCJKsc-Bold"), local("Source Han Sans SC Bold"), local("SourceHanSansSC-Bold"), local("Hiragino Sans GB W6"), local("HiraginoSansGB-W6"); }
@font-face { font-family: "LQBoldKO"; font-weight: 100 900; font-display: swap; unicode-range: U+2E80-2FDF, U+3000-30FF, U+3100-312F, U+3130-318F, U+31F0-31FF, U+3400-4DBF, U+4E00-9FFF, U+AC00-D7AF, U+F900-FAFF, U+FF00-FFEF; src: local("Apple SD Gothic Neo Bold"), local("AppleSDGothicNeo-Bold"), local("Malgun Gothic Bold"), local("MalgunGothicBold"), local("Noto Sans KR Bold"), local("NotoSansKR-Bold"), local("Noto Sans CJK KR Bold"), local("NotoSansCJKkr-Bold"), local("Source Han Sans KR Bold"), local("SourceHanSansKR-Bold"); }
html[data-learn="ja"]:not([lang="ja"]):not([lang="zh"]):not([lang="ko"]) { --pixel: "LQPixel", "LQBoldJA", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Hiragino Sans", "Yu Gothic", "Malgun Gothic", "Microsoft YaHei", ui-monospace, monospace; --serif: Georgia, "LQBoldJA", "Times New Roman", serif; --sans: "LQBoldJA", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "LQBoldJA", "SFMono-Regular", Menlo, Consolas, monospace; }
html[data-learn="zh"]:not([lang="ja"]):not([lang="zh"]):not([lang="ko"]) { --pixel: "LQPixel", "LQBoldZH", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Hiragino Sans", "Yu Gothic", "Malgun Gothic", "Microsoft YaHei", ui-monospace, monospace; --serif: Georgia, "LQBoldZH", "Times New Roman", serif; --sans: "LQBoldZH", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "LQBoldZH", "SFMono-Regular", Menlo, Consolas, monospace; }
html[data-learn="ko"]:not([lang="ja"]):not([lang="zh"]):not([lang="ko"]) { --pixel: "LQPixel", "LQBoldKO", "Noto Sans JP", "Noto Sans KR", "Noto Sans SC", "Hiragino Sans", "Yu Gothic", "Malgun Gothic", "Microsoft YaHei", ui-monospace, monospace; --serif: Georgia, "LQBoldKO", "Times New Roman", serif; --sans: "LQBoldKO", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "LQBoldKO", "SFMono-Regular", Menlo, Consolas, monospace; }
html:is([data-learn="ja"], [data-learn="zh"], [data-learn="ko"]):not([lang="ja"]):not([lang="zh"]):not([lang="ko"]) :is(.tl-main, .feed-title, .qz-target, .qz-prompt, .quiz-q, .order-ask, .order-choice, .phrase-target, .fc-target, .lesson-word, .sc-word, .dlg-text.foreign, .wl-main, .wtag, .wf-word, .entry-target, .zb-target) { font-weight: 700; }
/* furigana / pinyin (au-dessus des caractères) : PAS en gras — police normale, sans la police grasse CJK */
html:is([data-learn="ja"], [data-learn="zh"], [data-learn="ko"]) rt { font-family: Georgia, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", "Noto Sans JP", "Noto Sans SC", "Noto Sans KR", "PingFang SC", "Microsoft YaHei", "Malgun Gothic", serif; font-weight: normal; }