/* ================= Étape E2 : suivi de quête, dialogues, journal =================
   Style pixel : panneaux .px, unité var(--u), Pixelify (texte) et Silk (titres). Pas d'arrondi, pas de flou. */
body:not([data-scene="game"]) :is(#qtrack, #qdlg, #qjournal) { display: none !important; }
body:has(#perf-panel.show) #qtrack { display: none !important; }

/* suivi discret en haut à droite */
#qtrack { right: calc(var(--u) * 4); top: calc(var(--u) * 17); width: calc(var(--u) * 104); display: none; padding: calc(var(--u) * 2.5) calc(var(--u) * 4) calc(var(--u) * 3); pointer-events: none; }
#qtrack.show { display: block; }
#qtrack .qt-head { display: flex; align-items: baseline; gap: calc(var(--u) * 2); }
#qtrack .qt-head .t { font-size: calc(var(--u) * 3.4); color: var(--dim); flex: none; }
#qtrack .qt-head kbd { margin: 0 0 0 auto; font-size: calc(var(--u) * 3.4); flex: none; }
#qtrack .qt-title { font: calc(var(--u) * 4.4)/1.15 'Silk', monospace; color: var(--sun); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#qtrack .qt-obj { margin-top: calc(var(--u) * 1.5); font-size: calc(var(--u) * 4.6); line-height: 1.2; }
#qtrack .qt-obj b { color: var(--sun); font-weight: 400; font-family: 'Silk', monospace; font-size: calc(var(--u) * 3.6); }
#qtrack .qt-arrow { display: inline-block; width: calc(var(--u) * 2); height: calc(var(--u) * 3); margin-right: calc(var(--u) * 2); background: var(--sun); clip-path: polygon(0 0, 100% 50%, 0 100%); animation: nudge .6s steps(2) infinite; }
#qtrack .qt-dist { color: var(--dim); font-size: calc(var(--u) * 3.8); white-space: nowrap; }
#qtrack .qt-hint { margin-top: calc(var(--u) * 1.5); font-size: calc(var(--u) * 3.9); color: var(--dim); line-height: 1.3; }
#qtrack .qt-hint b.ok, #qjournal b.ok { color: var(--green); font-weight: 400; } #qtrack .qt-hint b.ko, #qjournal b.ko { color: var(--red); font-weight: 400; }
#qtrack .qt-hint b.mid { color: var(--orange); font-weight: 400; }
#qtrack .qt-hint kbd { font-size: calc(var(--u) * 3.4); margin-right: var(--u); }
#qtrack .qt-side { margin-top: calc(var(--u) * 1.5); padding-top: calc(var(--u) * 1.5); box-shadow: 0 calc(var(--u) * -1) 0 var(--hi); font-size: calc(var(--u) * 3.8); color: #a6e3a8; }
#qtrack .qt-side + .qt-side { box-shadow: none; padding-top: 0; }
#qtrack.pulse { animation: pulse .4s steps(3); }

/* dialogue : panneau en bas, portrait à gauche, choix numérotés */
#qdlg { left: 50%; bottom: calc(var(--u) * 6); transform: translateX(-50%); width: min(calc(var(--u) * 210), 92vw); display: none; z-index: 8;
  grid-template-columns: auto 1fr; gap: calc(var(--u) * 5); padding: calc(var(--u) * 4) calc(var(--u) * 6) calc(var(--u) * 4) calc(var(--u) * 4); cursor: default; }
#qdlg.show { display: grid; }
#qdlg .qd-face { image-rendering: pixelated; box-shadow: 0 0 0 var(--u) var(--ink), calc(var(--u) * 2) calc(var(--u) * 2) 0 var(--ink); align-self: start; }
#qdlg .qd-head { display: flex; align-items: baseline; gap: calc(var(--u) * 3); margin-bottom: calc(var(--u) * 2); }
#qdlg .qd-who { color: var(--sun); font-size: calc(var(--u) * 6); }
#qdlg .qd-role { color: var(--dim); font-size: calc(var(--u) * 4); }
#qdlg .qd-text { font-size: calc(var(--u) * 5.2); line-height: 1.35; min-height: calc(var(--u) * 14); }
#qdlg .qd-text em { color: var(--sun); font-style: normal; }
#qdlg .qd-text small { display: block; color: var(--dim); font-size: calc(var(--u) * 4.2); margin-top: calc(var(--u) * 1.5); }
#qdlg.narr .qd-text { color: #e8dcc0; }
#qdlg .qd-choices { display: flex; flex-direction: column; gap: calc(var(--u) * 1.5); margin-top: calc(var(--u) * 3); }
#qdlg .qd-c { display: flex; align-items: baseline; gap: calc(var(--u) * 1); text-align: left; width: 100%; font: calc(var(--u) * 4.8)/1.3 'Pixelify', monospace; text-transform: none;
  color: var(--paper); background: var(--bg2); padding: calc(var(--u) * 1.5) calc(var(--u) * 3); box-shadow: inset 0 0 0 var(--u) var(--ink), 0 var(--u) 0 var(--ink); }
#qdlg .qd-c:hover { background: var(--hi); }
#qdlg .qd-c kbd { flex: none; }
#qdlg .qd-next { margin-top: calc(var(--u) * 3); text-align: right; font-size: calc(var(--u) * 4); color: var(--dim); animation: blink 1s steps(2) infinite; }

/* journal (J) */
#qjournal { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(calc(var(--u) * 240), 94vw); max-height: 86vh; overflow: hidden; display: none; z-index: 7; padding: calc(var(--u) * 5) calc(var(--u) * 7); }
#qjournal.show { display: block; }
#qjournal .qj-head { display: flex; align-items: baseline; gap: calc(var(--u) * 4); margin-bottom: calc(var(--u) * 3); }
#qjournal .qj-head .t { color: var(--paper); font-size: calc(var(--u) * 8); text-shadow: var(--u) var(--u) 0 var(--ink), calc(var(--u) * 2) calc(var(--u) * 2) 0 #96202a; }
#qjournal .qj-head kbd { margin: 0 0 0 auto; cursor: pointer; }
#qjournal .qj-cols { display: grid; grid-template-columns: 1.25fr 1fr; gap: calc(var(--u) * 8); }
#qjournal h3.pxt { margin: calc(var(--u) * 3) 0 calc(var(--u) * 1.5); font-size: calc(var(--u) * 4.4); }
#qjournal .qj-list { list-style: none; margin: 0; padding: 0; font-size: calc(var(--u) * 4.4); }
#qjournal .qj-list > li { margin: 0 0 calc(var(--u) * 2.5); padding-left: calc(var(--u) * 4); position: relative; }
#qjournal .qj-list > li::before { content: ''; position: absolute; left: 0; top: calc(var(--u) * 2); width: calc(var(--u) * 2); height: calc(var(--u) * 2); background: var(--dim); }
#qjournal .qj-list > li.main::before { background: var(--sun); }
#qjournal .qj-list > li.done::before { background: var(--green); }
#qjournal .qj-list > li.fail::before { background: var(--red); }
#qjournal .qj-list > li.done b { color: #a6e3a8; }
#qjournal .qj-list > li.fail b { color: #ffb4a8; text-decoration: line-through; }
#qjournal .qj-list b { font-weight: 400; color: var(--paper); }
#qjournal .qj-list em { font-style: normal; color: #a6e3a8; font-size: calc(var(--u) * 3.4); font-family: 'Silk', monospace; margin-left: calc(var(--u) * 2); }
#qjournal .qj-list .dim { font-size: calc(var(--u) * 3.9); }
#qjournal .steps { list-style: none; margin: var(--u) 0 0; padding: 0; }
#qjournal .steps li { color: var(--dim); font-size: calc(var(--u) * 4); padding-left: calc(var(--u) * 5); position: relative; }
#qjournal .steps li.ok { color: #8fbf91; }
#qjournal .steps li.ok::before { content: ''; position: absolute; left: var(--u); top: calc(var(--u) * 1.2); width: calc(var(--u) * 2); height: var(--u); box-shadow: var(--u) var(--u) 0 #8fbf91, calc(var(--u) * 2) 0 0 #8fbf91, calc(var(--u) * 3) calc(var(--u) * -1) 0 #8fbf91; }
#qjournal .steps li.cur { color: var(--paper); }
#qjournal .steps li.cur::before { content: ''; position: absolute; left: var(--u); top: calc(var(--u) * 1.2); width: calc(var(--u) * 2); height: calc(var(--u) * 3); background: var(--sun); clip-path: polygon(0 0, 100% 50%, 0 100%); }
#qjournal .choix li { color: var(--paper); }
#qjournal .choix li.good::before { background: var(--green); } #qjournal .choix li.bad::before { background: var(--red); }
#qjournal i.bang { font-style: normal; color: var(--ink); background: var(--sun); padding: 0 var(--u); font-family: 'Silk', monospace; }

/* bilan : les choix de la journée */
#bilan-box .choix-list li { color: var(--paper); }