/* HUD v5 : fiche de quête (haut droite), notifications (haut centre),
   journal de quêtes (même carnet que le livre). Couleurs papier/encre du livre. */

:root { --paper: #fbf4e2; --paper-2: #f0e2c0; --ink: #2e1f14; --ink-soft: #7a5e44; --leather: #4e2716; }

/* ------------------------------------------------------- fiche de quête */
.hud-right { top: 14px; right: 14px; gap: 8px; }
.quest-track {
  position: relative; width: 268px; padding: 9px 12px 10px 16px;
  background: linear-gradient(180deg, var(--paper), var(--paper-2));
  color: var(--ink); border-radius: 8px;
  border: 3px solid var(--leather);
  box-shadow: 0 3px 0 #241008, 0 10px 22px rgba(0, 0, 0, 0.35);
  font-family: var(--pixel); word-spacing: 0.3em;
}
.quest-track::before {               /* liseré de la couleur de la catégorie */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; border-radius: 4px 0 0 4px; background: var(--accent);
}
.qt-kicker { font-family: var(--serif); font-style: italic; font-size: 0.72em; color: var(--ink-soft); word-spacing: normal; }
.qt-label { font-size: 0.92em; line-height: 1.25; margin: 2px 0 4px; }
.qt-where { display: flex; gap: 5px; align-items: baseline; font-family: var(--serif); font-size: 0.74em; color: var(--ink-soft); word-spacing: normal; }
.qt-progress { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.qt-bar { flex: 1; height: 8px; border-radius: 4px; background: rgba(90, 60, 30, 0.18); overflow: hidden; box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.15); }
.qt-bar i { display: block; height: 100%; background: var(--accent); transition: width 0.5s ease; }
.qt-count { font-size: 0.8em; color: var(--ink); }
.quest-track.bump { animation: qt-bump 0.6s ease; }
@keyframes qt-bump { 0% { transform: scale(1); } 30% { transform: scale(1.05) rotate(-1deg); box-shadow: 0 3px 0 #241008, 0 0 0 4px var(--accent); } 100% { transform: none; } }

.badge-chip { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--leather); background: #3a2418; display: grid; place-items: center; box-shadow: 0 2px 0 #241008; }
.badge-chip i { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); }
.badge-chip.owned { background: var(--paper); }
.badge-chip.owned i { background: var(--accent); box-shadow: 0 0 0 2px #f0c04a; }

/* ------------------------------------------------ notifications, haut centre */
.toasts {
  left: 50%; right: auto; bottom: auto; top: 14px; transform: translateX(-50%);
  max-width: min(460px, 60vw); flex-direction: column; align-items: center; gap: 6px; z-index: 4; pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 10px; min-width: 240px;
  padding: 7px 14px 7px 8px;
  background: linear-gradient(180deg, var(--paper), var(--paper-2)); color: var(--ink);
  border: 3px solid var(--leather); border-radius: 10px; border-left-width: 3px;
  box-shadow: 0 3px 0 #241008, 0 10px 22px rgba(0, 0, 0, 0.35);
  font-family: var(--pixel); word-spacing: 0.3em;
  opacity: 0; transform: translateY(-14px) scale(0.96); transition: opacity 0.22s, transform 0.22s;
}
.toast.in { opacity: 1; transform: none; }
.toast-icon { font-size: 1.3em; width: 34px; text-align: center; }
.toast-pic { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 6px; background: rgba(255, 255, 255, 0.55); box-shadow: inset 0 0 0 2px rgba(120, 85, 50, 0.3); }
.toast-pic canvas { image-rendering: pixelated; width: 40px; height: 40px; }
.toast-title { color: var(--ink); font-size: 1em; }
.toast-sub { color: var(--ink-soft); font-family: var(--serif); font-size: 0.8em; word-spacing: normal; }
.toast.word { border-color: #2f6e3a; box-shadow: 0 3px 0 #1a3a20, 0 10px 22px rgba(0, 0, 0, 0.35); }
.toast.word .toast-title::before { content: "+ "; color: #2f8a3e; }
.toast.locked { border-color: #8a2a24; }
.toast.gold { border-color: #b07a1c; background: linear-gradient(180deg, #fff6d8, #f6dc9a); }

/* ----------------------------------------------------- journal de quêtes */
.qscroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 6px 6px 6px; }
.qscroll::-webkit-scrollbar { width: 6px; }
.qscroll::-webkit-scrollbar-thumb { background: rgba(120, 80, 40, 0.3); border-radius: 3px; }
.qh { margin: 4px 6px 10px; font-family: var(--pixel); font-weight: normal; font-size: 1.15em; color: var(--ink); word-spacing: 0.3em; }
.qscroll .qh { margin-top: 18px; }

.act { position: relative; margin: 0 0 12px; padding: 8px 10px 6px 14px; border-radius: 8px; background: rgba(255, 255, 255, 0.4); box-shadow: inset 0 0 0 2px rgba(120, 85, 50, 0.18); }
.act::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 5px; border-radius: 3px; background: var(--accent); }
.act.active { background: rgba(255, 248, 220, 0.85); box-shadow: inset 0 0 0 2px var(--accent), 0 3px 0 rgba(90, 60, 30, 0.15); }
.act.later { opacity: 0.62; }
.act-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.act-num { font-family: var(--serif); font-style: italic; font-size: 0.8em; color: var(--ink-soft); }
.act-name { flex: 1; font-family: var(--pixel); font-size: 1.05em; color: var(--ink); word-spacing: 0.3em; }
.act-seal { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #b8372e; color: #fff; font-size: 0.8em; transform: rotate(-10deg); }
.act-now { color: var(--accent); animation: pk-bob 0.8s steps(2) infinite; }

.qstep, .qside { display: flex; align-items: flex-start; gap: 10px; padding: 6px 2px; }
.qstep + .qstep { border-top: 1px dashed rgba(120, 85, 50, 0.25); }
.qcheck, .qside-icon {
  flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid rgba(120, 85, 50, 0.45); font-family: var(--pixel); font-size: 0.8em; color: var(--ink-soft); background: var(--paper);
}
.qstep.done .qcheck, .qside.done .qside-icon { background: #2f8a3e; border-color: #2f8a3e; color: #fff; }
.qstep-body { flex: 1; min-width: 0; }
.qstep-label { font-family: var(--pixel); font-size: 0.95em; color: var(--ink); word-spacing: 0.3em; }
.qstep.done .qstep-label, .qside.done .qstep-label { text-decoration: line-through; text-decoration-color: rgba(46, 31, 20, 0.5); color: var(--ink-soft); }
.qstep-where { font-family: var(--serif); font-style: italic; font-size: 0.78em; color: var(--ink-soft); margin: 1px 0 4px; }
.qstep-tip { font-family: var(--serif); font-size: 0.76em; color: #a05a2c; }
.qstep-count { flex: none; font-family: var(--pixel); font-size: 0.8em; color: var(--ink-soft); padding-top: 2px; }
.qside { margin-bottom: 6px; padding: 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.4); box-shadow: inset 0 0 0 2px rgba(120, 85, 50, 0.15); }

.qpips { display: flex; flex-wrap: wrap; gap: 3px; }
.qpips i { width: 9px; height: 9px; border-radius: 2px; background: rgba(90, 60, 30, 0.15); box-shadow: inset 0 0 0 1px rgba(90, 60, 30, 0.2); }
.qpips i.on { background: var(--accent); box-shadow: none; }
.qbar { display: block; height: 8px; border-radius: 4px; background: rgba(90, 60, 30, 0.15); overflow: hidden; }
.qbar i { display: block; height: 100%; background: var(--accent); }

.qstudents { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.qstud { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border-radius: 8px; background: rgba(255, 255, 255, 0.4); box-shadow: inset 0 0 0 2px rgba(120, 85, 50, 0.15); }
.qstud img { width: 44px; height: 44px; image-rendering: pixelated; border-radius: 6px; background: #e8d6b0; }
.qstud.perfect { box-shadow: inset 0 0 0 2px #e8b85c, 0 0 12px rgba(232, 184, 92, 0.5); }
.qstud .stars i { background: rgba(90, 60, 30, 0.2); }
.qstud-time { font-family: var(--serif); font-size: 0.72em; color: var(--ink-soft); }

/* l'ancien style (style.css) alignait à droite et écrivait en clair : on l'écrase */
.hud .quest-track { text-align: left; }
.hud .quest-track .qt-label { color: var(--ink); font-size: 0.92em; letter-spacing: 0; text-transform: none; max-width: none; }
.hud .quest-track .qt-count { color: var(--ink); font-family: var(--pixel); font-size: 0.8em; }
.qstud .stars i.on { background: #e8a72c; filter: none; }

/* ------------------------------------- badges et réglages : même papier, même cuir */
.panel:not(.book-panel) {
  background: linear-gradient(180deg, var(--paper), var(--paper-2));
  color: var(--ink);
  border: 4px solid var(--leather); border-radius: 12px;
  box-shadow: 0 0 0 3px #2a120a, 0 5px 0 4px #241008, 0 30px 70px rgba(0, 0, 0, 0.7);
}
.panel:not(.book-panel) .panel-head { border-bottom: 2px dashed rgba(120, 85, 50, 0.3); }
.panel:not(.book-panel) .panel-head h2 { font-family: var(--pixel); color: var(--ink); letter-spacing: 0.04em; text-transform: none; font-size: 1.3em; word-spacing: 0.3em; }
.panel:not(.book-panel) .btn.ghost { color: var(--ink); border-color: rgba(120, 85, 50, 0.4); background: rgba(255, 255, 255, 0.5); }
.panel:not(.book-panel) .head-count { color: var(--ink-soft); font-family: var(--pixel); }
.badge-card { background: rgba(255, 255, 255, 0.45); border: none; box-shadow: inset 0 0 0 2px rgba(120, 85, 50, 0.2); }
.badge-card.owned { box-shadow: inset 0 0 0 2px var(--accent), 0 3px 0 rgba(90, 60, 30, 0.15); }
.badge-emblem { border: 4px solid #3a2418; background: #e8d6b0; }
.badge-emblem i { background: rgba(90, 60, 30, 0.15); }
.badge-name { color: var(--ink); font-family: var(--pixel); font-size: 1em; word-spacing: 0.3em; }
.badge-stats { color: var(--ink-soft); font-family: var(--serif); font-size: 0.8em; }
.set-row { border-bottom: 1px dashed rgba(120, 85, 50, 0.25); color: var(--ink); font-family: var(--pixel); word-spacing: 0.3em; }
.toggle { background: rgba(90, 60, 30, 0.15); border-color: rgba(120, 85, 50, 0.4); }
.toggle.on { background: #f0c04a; border-color: #8a5a1c; }
.toggle.on i { background: #fff; }
.slider { accent-color: #b8772e; }
.panel:not(.book-panel) h3 { color: var(--ink-soft); }
.panel:not(.book-panel) .panel-head { background: none; }
.panel:not(.book-panel) .btn { font-family: var(--pixel); word-spacing: 0.3em; }
.badge-strip { align-items: center; flex-wrap: wrap; max-width: 300px; justify-content: flex-end; }
.badge-count { font-family: var(--pixel); font-size: 0.8em; padding: 3px 8px; border-radius: 6px; background: var(--paper, #f6ead0); color: var(--ink, #3a2418); box-shadow: inset 0 0 0 2px var(--leather, #6a3e22); word-spacing: 0.2em; }
.badge-strip .badge-chip { width: 20px; height: 20px; border-width: 2px; }