/* La Légende: the played scenes (legende_scene.js) and the Légende's own rows. */
.lg-scene { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; background: rgba(8, 9, 10, .88);
  padding: calc(var(--safe-top, 0px) + 12px) 12px calc(var(--safe-bottom, 0px) + 12px); animation: lg-in .35s ease-out; }
.lg-frame { width: min(100%, 520px); display: flex; flex-direction: column; gap: 0; border: 3px solid var(--edge); background: var(--bg); box-shadow: 0 0 0 2px #3a3328, 0 18px 40px rgba(0,0,0,.6); }
.lg-canvas { width: 100%; height: auto; display: block; image-rendering: pixelated; }
.lg-box { min-height: 7.2em; padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 4px; background: #1d1a17; border-top: 3px solid #3a3328; }
.lg-box b { font-family: var(--pixel); font-size: 14px; color: var(--legend); letter-spacing: .04em; }
.lg-box p { margin: 0; font-family: var(--text); font-size: 17px; line-height: 1.4; color: var(--ink); }
.lg-box p.narrator { font-style: italic; color: #d8cbb0; }
.lg-box small { margin-top: auto; align-self: flex-end; color: var(--muted); font-size: 12px; }
.lg-skip { position: absolute; top: calc(var(--safe-top, 0px) + 10px); right: 12px; background: none; border: 1px solid #4a4238; color: var(--muted); font-family: var(--pixel);
  padding: 6px 10px; border-radius: 4px; }
.lg-scene.long .lg-frame { box-shadow: 0 0 0 2px #6a5530, 0 0 28px rgba(255,179,71,.25), 0 18px 40px rgba(0,0,0,.6); }
@keyframes lg-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lg-scene { animation: none; } }
.lg-trail { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.lg-trail .bar { height: 6px; }
.lg-steps { display: flex; gap: 4px; align-items: center; }
.lg-steps i { width: 10px; height: 10px; border: 2px solid var(--edge); background: var(--panel-2); transform: rotate(45deg); }
.lg-steps i.done { background: var(--legend); }
.lg-steps i.now { background: var(--panel-3); box-shadow: 0 0 6px var(--legend); }
.lg-replay { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lg-test { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 10px; }
.place-head .test-level { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
.place-head .test-level .quarter-back { min-width: 34px; padding-left: 0; padding-right: 0; }
.place-head .test-level .quarter-back:disabled { opacity: .4; }
.lg-bless { font-size: .85rem; margin: 6px 0 10px; color: var(--muted, #b9a98a); }
.lg-bless.on { color: var(--gold, #e8b54a); }
.lg-flame { display: flex; align-items: center; gap: 8px; margin: 6px 0; color: var(--flame); font-weight: 600; }
.lg-flame i { width: 10px; height: 14px; background: var(--flame); box-shadow: 0 0 8px var(--flame); clip-path: polygon(50% 0, 100% 60%, 80% 100%, 20% 100%, 0 60%); }
.lg-veille { margin: 4px 0 14px; }
.lg-flames { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.lg-flames span { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; padding: 3px 7px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.2); }
.lg-flames span i { width: 7px; height: 10px; background: var(--flame, #555); clip-path: polygon(50% 0, 100% 60%, 80% 100%, 20% 100%, 0 60%); }
.lg-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.lg-choice .btn { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 3px; text-align: left; white-space: normal; padding: 8px 10px; }
.lg-choice .btn small { margin: 0; align-self: flex-start; text-align: left; font-size: 11px; line-height: 1.3; color: var(--muted); font-family: var(--text); }
.lg-pact { color: #c9a6e8; }
/* Odile at the bastion's door when a step of the Légende is open */
.odile-visit { position: absolute; left: 6px; bottom: 46px; z-index: 3; display: flex; align-items: flex-end; gap: 6px; padding: 4px 10px 4px 6px; border: 2px solid var(--legend, #e8b54a);
  background: rgba(24, 22, 28, .9); color: var(--ink); box-shadow: 0 0 0 2px rgba(0,0,0,.4), 0 0 14px rgba(255, 200, 90, .35); animation: ov-in .6s ease-out; }
.odile-visit .ov-pic { width: 30px; height: 40px; image-rendering: pixelated; position: relative; }
.odile-visit .ov-glow { position: absolute; left: 22px; bottom: 10px; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(rgba(255, 210, 120, .55), rgba(255, 210, 120, 0) 70%);
  animation: ov-glow 2.4s ease-in-out infinite; pointer-events: none; }
.odile-visit.gaspard .ov-glow { display: none; }
.odile-visit .ov-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.odile-visit b { font-family: var(--pixel); font-size: .8rem; color: var(--legend, #e8b54a); }
.odile-visit small { font-size: .72rem; color: var(--muted); }
@keyframes ov-glow { 50% { opacity: .45; transform: scale(.85); } }
@keyframes ov-in { from { transform: translateX(-40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .odile-visit, .odile-visit .ov-glow { animation: none; } }
/* The act sheet sits on parchment: dark ink for the story and the tags */
.lib-book .book-page .story { color: #5a3f24; }
.lib-book .book-page .lg-bless { color: #6a5034; }
.lib-book .book-page .lg-bless.on { color: #8a5310; }
.lib-book .book-page .lg-pact { color: #6a3a8a; }
.lib-book .book-page .danger.d-ok { background: rgba(60, 140, 70, .16); color: #2c6a36; }
.lib-book .book-page .danger.d-hard { background: rgba(200, 120, 30, .16); color: #8a4a0a; }
.lib-book .book-page .danger.d-danger { background: rgba(190, 50, 50, .16); color: #9a1f1f; }
.lg-req { margin: 8px 0 4px; padding: 10px 12px; background: rgba(122, 42, 26, .08); border-left: 3px solid #7a2a1a; display: flex; flex-direction: column; gap: 8px; }
.lg-req-title { font-family: var(--pixel); font-weight: 400; font-size: .82rem; color: #7a2a1a; }
.lg-req-item { display: flex; gap: 8px; align-items: flex-start; line-height: 1.35; }
.lg-req-mark { color: #7a2a1a; flex: none; width: 1em; }
.lg-req-item.ok .lg-req-mark { color: #2c6a36; }
.lg-req-body { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.lg-req-body small { color: #6a5034; font-style: italic; }
.lg-req-bar { position: relative; display: block; height: 14px; background: rgba(90, 53, 25, .18); border: 1px solid rgba(90, 53, 25, .35); }
.lg-req-bar i { position: absolute; inset: 0 auto 0 0; background: #b0782a; }
.lg-req-bar em { position: absolute; inset: 0; text-align: center; font: 400 .7rem/14px var(--pixel); font-style: normal; color: #3a2412; }
.lg-req-hint { color: #6a5034; font-size: .78rem; }
/* The trail on the expedition hub, the présages that advance it, and the banner after a fight that did */
.place-row .pr-text .trail-row { display: flex; flex-direction: column; gap: 5px; white-space: normal; overflow: visible; margin-top: 2px; }
.place-row .pr-text .trail-row span { white-space: normal; overflow: visible; }
.place-row .pr-text .trail-line { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; align-items: center; color: var(--text, #f0e6d0); }
.place-row .pr-text .trail-line > span:first-child { grid-column: 1 / -1; }
.place-row .pr-text .trail-bar { display: block; height: 8px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(0, 0, 0, .4); position: relative; }
.trail-bar i { position: absolute; inset: 0 auto 0 0; background: var(--gold); }
.trail-line em { font: 400 .72rem var(--pixel); font-style: normal; color: var(--gold); }
.trail-hint { color: var(--gold); opacity: .85; }
.place-row .pr-text .trail-mark { display: inline; margin: 0 4px 0 0; }
.trail-mark { margin-left: 6px; padding: 0 5px; border: 1px solid var(--gold); color: var(--gold); font-family: var(--pixel); font-size: .7rem; }
.trail-pop { position: fixed; z-index: 450; top: calc(env(safe-area-inset-top, 0px) + 10px); left: 50%; width: min(340px, calc(100% - 32px)); display: flex; gap: 10px; align-items: center;
  padding: 9px 12px; background: #2a1e12; border: 3px solid #d4a640; box-shadow: 0 4px 0 rgba(0, 0, 0, .4); transform: translate(-50%, -140%); transition: transform .35s ease-out; pointer-events: none; }
.trail-pop.on { transform: translate(-50%, 0); }
.trail-pop .tp-glyph { color: #ffd76a; font-size: 1.4rem; text-shadow: 0 0 8px #ffb02e; }
.trail-pop .tp-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.trail-pop small { color: #d4a640; font-family: var(--pixel); font-size: .68rem; }
.trail-pop b { color: #fff3d6; font-size: .9rem; }
.trail-pop .tp-bar { position: relative; height: 13px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(0, 0, 0, .5); }
.trail-pop .tp-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#ffd76a, #c98a1e); transition: width .9s ease-out; }
.trail-pop .tp-bar em { position: absolute; inset: 0; text-align: center; font: 400 .66rem/13px var(--pixel); font-style: normal; color: #fff; text-shadow: 0 1px 0 #000; }
.trail-pop.full { border-color: #ffd76a; }
@media (prefers-reduced-motion: reduce) { .trail-pop, .trail-pop .tp-bar i { transition: none; } }