:root{
  --font-body:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:Georgia,serif;
  --field:#2b4a38; --felt:#33553f; --paper:#f7f5f0; --ink:#1d1f23;
  --dim:#6b6f76; --red:#b3261e; --refuge:#2e6e4e; --wreck:#8a6d1f;
  --line:#d8d4c9; --danger:#8f1d17; --back:#5b3a2e;
}
*{box-sizing:border-box}
body{margin:0;background:var(--field);color:var(--ink);
  font:clamp(15px,2.4vw,17px)/1.45 var(--font-body);
  -webkit-text-size-adjust:100%}
button,input,select{touch-action:manipulation}
input,select{font-size:max(16px,1em)}
header{display:flex;flex-wrap:wrap;gap:.6em 1.2em;align-items:center;
  padding:.7em 1em;background:#1e3226;color:#cfd3da}
#mpPanel{background:#16241b;color:#cfd3da;padding:.5em 1em}
#mpPanel summary{cursor:pointer;font-weight:600;padding:.3em 0}
#mpSetup{display:flex;flex-wrap:wrap;gap:.5em 1em;align-items:center;
  padding:.5em 0}
#mpSetup label{font-size:.85em;display:flex;gap:.35em;align-items:center}
#mpSetup input{background:#2b4234;border:1px solid #46604f;color:#e9ece5;
  border-radius:4px;padding:.3em .5em;width:11em}
#mpStatus{font-size:.85em;padding:.3em 0;color:#b9c9bd}
#mpStatus.on{color:#8fd19e}
#mpStatus.err{color:#e08a7d}
#mpPlayers{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:.4em .8em;font-size:.85em}
#mpPlayers li{padding:.15em .5em;border-radius:3px;background:#2b4234}
#mpPlayers li.lead{background:#4b6b52;font-weight:700}
#logo{height:2.6em;width:auto;object-fit:contain;margin-right:.2em}
@media(max-width:900px){#logo{display:none!important}}
header h1{font:600 1.05em/1 var(--font-display);color:#f0ede4;
  margin:0 .6em 0 0;letter-spacing:.04em}
header label{font-size:.85em;display:flex;gap:.35em;align-items:center}
/* .optgroup now lives only inside the settings modal (styled under
   .settings-grid below). These rules govern only the show/hide of the
   sub-option, revealed when the Overlord checkbox adds .on. */
.subopt{display:none}
.optgroup.on .subopt{display:flex}
header input[type=text]{width:7.5em;background:#2b4234;border:1px solid #46604f;
  color:#e8e5dc;padding:.2em .4em;border-radius:3px}
header select{background:#2b4234;border:1px solid #46604f;color:#e8e5dc;
  padding:.15em .3em;border-radius:3px}
button{font:inherit;cursor:pointer;border-radius:6px;border:1px solid #9a958a;
  background:#efece4;color:var(--ink);padding:.4em .9em;min-height:2.3em;
  transition:transform .08s ease,box-shadow .12s ease,background .12s}
button:hover{background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.25)}
button:active{transform:translateY(1px);box-shadow:none}
button:disabled{opacity:.45;cursor:default}
button.primary{background:var(--ink);color:#f4f2ec;border-color:var(--ink)}
button.primary:hover{background:#000}
button.danger{background:var(--danger);color:#fff;border-color:var(--danger)}
/* Audio toggle: hidden until JAudio.init() adds .visible (i.e. only shown
   once Web Audio is actually available). Circular ♪ glyph button. */
/* Circular header icon buttons (settings cog, sound). Always visible. */
.iconbtn{width:2.3em;min-height:2.3em;padding:0;border-radius:50%;
  font-size:1.1em;line-height:1;text-align:center;
  display:inline-flex;align-items:center;justify-content:center}

/* Settings modal */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:100;
  display:flex;align-items:flex-start;justify-content:center;
  padding:4vh 1em;overflow:auto}
.overlay[hidden]{display:none}
.modal{background:var(--paper);color:var(--ink);border-radius:10px;
  padding:1em 1.2em 1.3em;max-width:560px;width:100%;
  box-shadow:0 12px 40px rgba(0,0,0,.4)}
.modal-head{display:flex;align-items:center;justify-content:space-between;
  gap:1em;margin-bottom:.2em}
.modal-head h2{margin:0;font:600 1.2em/1 var(--font-display)}
.modal-note{margin:.1em 0 .9em;font-size:.85em;color:var(--dim)}
.settings-grid{display:flex;flex-wrap:wrap;gap:.7em 1.2em;align-items:center}
/* A zero-height, full-width flex item forces everything after it onto a new
   line — the standard flexbox way to break mid-row while keeping the item
   after it (the Overlord chip) at its natural content width. */
.settings-grid .row-break{flex-basis:100%;height:0;margin:0;padding:0;border:0}

/* Missions & Chronicle: the left sidebar, mirroring the Journal panel.
   Each is a collapsible details whose summary reads like the Journal's
   heading; lists scroll inside a capped height so the column governs
   its own space. Open by default — the column costs the play area
   nothing. */
#goals{display:flex;flex-direction:column;gap:.9em}
#goals details{margin-top:0;padding:0}
#goals summary{cursor:pointer;font-weight:700;font-size:1em;
  padding:.1em 0;list-style-position:inside}
#missionsList{margin-top:.4em;display:flex;flex-direction:column;gap:.45em;
  max-height:34vh;overflow-y:auto}
.mission{background:#eef0ea;border:1px solid var(--line);border-radius:6px;
  padding:.4em .55em}
.mission .mtitle{font-weight:600;font-size:.9em;display:flex;
  justify-content:space-between;gap:.5em;align-items:baseline}
.mission .mscore{flex:none;background:var(--ink);color:#f4f2ec;
  border-radius:10px;padding:.05em .5em;font-size:.8em;font-weight:600}
.mission .mflavour{font-size:.8em;color:var(--dim);margin-top:.2em;
  line-height:1.35}
.mission.done{border-color:var(--refuge);background:#e6f0e9}
.mission.done .mscore{background:var(--refuge)}
.mission.missed{opacity:.6}
.mission.missed .mscore{background:var(--dim)}
.mission-summary{font-size:.88em;margin-top:.2em;padding-top:.4em;
  border-top:1px dashed var(--line)}

/* End-game reveal modal */
.reveal-result{font:600 1.05em/1.3 var(--font-display);margin:.1em 0 .8em;
  padding:.5em .7em;border-radius:6px}
.reveal-result.win{background:#e6f0e9;color:#1c3a29;border:1px solid var(--refuge)}
.reveal-result.loss{background:#f3e3e2;color:#5a1b17;border:1px solid var(--danger)}
.reveal-player{border:1px solid var(--line);border-radius:8px;padding:.5em .65em;
  margin-bottom:.6em;background:#f2f0ea}
.reveal-player.me{border-color:#b9a24a;background:#faf7ec}
.reveal-player.winner{box-shadow:0 0 0 2px #d9b64a inset}
.rphead{display:flex;align-items:center;gap:.4em;font-weight:600;
  margin-bottom:.35em}
.rphead .youtag{color:var(--dim);font-weight:400;font-size:.85em}
.rphead .rtotal{margin-left:auto;background:var(--ink);color:#f4f2ec;
  border-radius:10px;padding:.05em .55em;font-size:.85em}
.crown{color:#c99a24}
.rmission{display:flex;align-items:baseline;gap:.5em;font-size:.88em;
  padding:.12em 0}
.rmission .rmark{flex:none;width:1em;text-align:center}
.rmission .rtitle{flex:1}
.rmission .rscore{flex:none;color:var(--dim);font-size:.85em}
.rmission.done .rmark{color:var(--refuge)}
.rmission.missed{opacity:.55}
.rmission.missed .rmark{color:var(--dim)}
.rmission.counted .rtitle{font-weight:600}
.rmission.counted .rscore{color:var(--ink);font-weight:600}
.reveal-note{font-size:.82em;color:var(--dim);margin:.6em 0 0}
.settings-grid label{display:flex;gap:.35em;align-items:center;font-size:.9em}
.settings-grid input[type=text]{width:7.5em;background:#2b4234;
  border:1px solid #46604f;color:#e8e5dc;border-radius:5px;padding:.25em .4em}
.settings-grid select{background:#2b4234;border:1px solid #46604f;
  color:#e8e5dc;border-radius:5px;padding:.25em .4em}
/* Overlord group: a horizontal chip that grows rightward to reveal its
   child option (face ♠ burns 1) with a vertical divider when Overlord is
   ticked — matching the previous inline behaviour, but coloured for the
   pale modal rather than the dark felt header. */
.settings-grid .optgroup{display:inline-flex;align-items:center;gap:.55em;
  padding:.3em .6em;background:#eef0ea;border:1px solid var(--line);
  border-radius:6px}
/* Hide/show the child option. These are scoped under .settings-grid so they
   out-specify `.settings-grid label{display:flex}` (0,2,0), which otherwise
   forces the subopt <label> visible and defeats the toggle. */
.settings-grid .optgroup .subopt{display:none;margin-left:0;padding-left:.55em;
  border-left:2px solid #b9c3ba;color:var(--dim);font-size:.85em}
.settings-grid .optgroup.on .subopt{display:inline-flex}
main{display:grid;grid-template-columns:minmax(250px,.6fr) minmax(0,1.4fr) minmax(250px,.6fr);
  grid-template-areas:"goals table journal" "goals hand journal";
  gap:1em;padding:1em;max-width:1360px;margin:0 auto}
/* module off: the goals sidebar is display:none, and the grid folds back
   to the original two-column layout */
main.nogoals{grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr);
  grid-template-areas:"table journal" "hand journal"}
@media(max-width:900px){main,main.nogoals{grid-template-columns:1fr;
  grid-template-areas:"goals" "table" "hand" "journal"}}
.panel{background:var(--paper);border-radius:6px;padding:.9em 1em;
  box-shadow:0 2px 10px rgba(0,0,0,.35)}
.panel.table{background:var(--felt);color:#eef0ea;
  box-shadow:inset 0 0 40px rgba(0,0,0,.25),0 2px 10px rgba(0,0,0,.35)}
#table{display:block}
.trow{display:flex;flex-wrap:wrap;gap:1em 1.6em;align-items:flex-start}
.trow+.trow{margin-top:.9em}
.pilewrap{text-align:center}
.roadwrap{min-width:15em}
.pilelabel{font-size:.72em;letter-spacing:.08em;text-transform:uppercase;
  color:#cfe0d2;margin-bottom:.6em;font-family:var(--font-display)}
.card.hasart{background-size:cover;background-position:center top;
  color:#fff}
.card.hasart span{background:rgba(20,18,14,.62);border-radius:3px;
  padding:0 .15em;align-self:flex-start}
.card.hasart span:last-child{align-self:flex-end}
.card.hasart .p{display:none}
.advcard.hasart{background-size:cover;background-position:center top}
.advcard.hasart span{background:rgba(20,18,14,.62);border-radius:3px;
  padding:0 .15em;align-self:flex-start;color:#fff}
.advcard.hasart span:last-child{align-self:flex-end}
.advcard.hasart .pip{display:none}
#inspect{position:fixed;inset:0;background:rgba(10,14,11,.78);
  display:none;align-items:center;justify-content:center;z-index:50;
  padding:1em}
#inspect.on{display:flex}
#inspectcard{background:var(--paper);border-radius:10px;max-width:24em;
  width:100%;padding:1em;box-shadow:0 10px 40px rgba(0,0,0,.6);
  text-align:center}
#insname{font:700 1.25em/1.2 var(--font-display);margin:.4em 0 .1em}
#insrank{color:var(--dim);font-size:.85em;letter-spacing:.08em;
  text-transform:uppercase}
#insquote{font:italic .95em/1.4 var(--font-display);margin:.5em 0 .1em}
#inseffect{font-size:.8em;letter-spacing:.02em;color:var(--dim);
  margin-top:.5em;border-top:1px solid var(--line);padding-top:.4em;
  white-space:pre-line;text-align:left}
#cardtip{position:fixed;top:0;left:0;z-index:60;pointer-events:none;
  background:var(--paper);color:var(--ink);border:1px solid var(--ink);
  border-radius:6px;box-shadow:0 6px 20px rgba(0,0,0,.4);
  padding:.5em .7em;max-width:16em;
  opacity:0;transform:translateY(4px);
  transition:opacity .12s ease,transform .12s ease}
#cardtip.on{opacity:1;transform:translateY(0)}
#cardtip .tipname{font:700 1em/1.2 var(--font-display)}
#cardtip .tipquote{font:italic .85em/1.35 var(--font-display);
  color:var(--dim);margin-top:.25em}
#cardtip .tipnote{font-size:.75em;letter-spacing:.02em;
  color:var(--dim);margin-top:.35em;
  border-top:1px solid var(--line);padding-top:.25em;
  white-space:pre-line}
.pile{position:relative;width:3.6em;height:5.1em;margin:0 auto}
.pileback,.card{width:3.6em;height:5.1em;border-radius:5px}
.pileback{position:absolute;border:1.5px solid #2a1a12;
  background-color:var(--back);
  background-image:var(--pileback-img,repeating-linear-gradient(45deg,
    rgba(255,255,255,.09) 0 4px, transparent 4px 8px));
  background-size:cover;background-position:center}
.pile .pileback:last-child{top:4px;left:4px}
.pile .pileback:nth-last-child(2){top:6px;left:6px}
.pile .pileback:nth-last-child(3){top:8px;left:8px}
.pile.empty .pileback{opacity:.22;background:transparent;
  border-style:dashed;border-color:#cfe0d2}
.pilecount{margin-top:.3em;font-weight:700;color:#fff}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,240,180,.9)}
  100%{box-shadow:0 0 0 14px rgba(255,240,180,0)}}
.pile.pulse .pileback:last-child{animation:pulse .5s ease-out 1}
@media(prefers-reduced-motion:reduce){.pile.pulse .pileback{animation:none}}
.cardback-fly{width:3.6em;height:5.1em;border-radius:5px;
  border:1.5px solid #2a1a12;background-color:var(--back);
  background-image:var(--pileback-img,repeating-linear-gradient(45deg,
    rgba(255,255,255,.09) 0 4px,transparent 4px 8px));
  background-size:cover;background-position:center;
  position:fixed;pointer-events:none;z-index:60}
.defeat-particle{position:fixed;pointer-events:none;border-radius:50%;
  z-index:65;--dx:0px;--dy:0px}
@keyframes puffSmoke{
  0%{opacity:.85;transform:translate(0,0) scale(.4)}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.7)}
}
@keyframes puffFire{
  0%{opacity:.92;transform:translate(0,0) scale(.5)}
  55%{opacity:.75}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.3)}
}
.defeat-particle.smoke{background:radial-gradient(circle,
  rgba(205,205,198,.9),rgba(140,140,133,.5) 60%,transparent 75%);
  animation:puffSmoke .8s ease-out forwards}
.defeat-particle.fire{background:radial-gradient(circle,
  rgba(255,214,120,.95),rgba(214,80,42,.75) 55%,transparent 75%);
  animation:puffFire .65s ease-out forwards}
@media(prefers-reduced-motion:reduce){.defeat-particle{animation:none;display:none}}
.card{border:1.5px solid var(--ink);background:#fff;font-weight:700;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:.2em .3em;cursor:pointer;user-select:none;color:var(--ink);
  line-height:1.05;overflow:hidden;border-radius:6px;
  transition:transform .1s ease,box-shadow .12s ease,outline-color .1s;
  touch-action:manipulation}
.card:not(.inert):not(.dis):hover{transform:translateY(-3px);
  box-shadow:0 4px 10px rgba(0,0,0,.3)}
.card:not(.inert):not(.dis):active{transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.card,button{transition:none}}
.card>span{text-align:left}
.card .p{font-size:1.25em;text-align:center}
.card.red{color:var(--red);border-color:var(--red)}
.card.sel{outline:3px solid #ffd76a;outline-offset:1px}
.card.dis{opacity:.35;cursor:default}
.card.ace{border-style:double;border-width:3px}
.card.inert{cursor:default}
.mini{width:3.2em;height:4.5em;font-size:.85em;padding:.18em .28em}
.mini .p{font-size:1.1em}
.card.big{font-size:3.6em;cursor:default}
.card.big>span:not(.p){font-size:.45em}
#insface{display:flex;justify-content:center;margin-bottom:.3em}
#discardfan{display:flex;flex-wrap:wrap;gap:.3em;max-width:min(28em,86vw);
  min-height:3.9em;padding:.3em;border:1px dashed rgba(255,255,255,.35);
  border-radius:6px}
#discardfan:empty::after{content:'empty';color:#bfd3c4;font-size:.8em;
  align-self:center;margin:auto}
.advzone{display:flex;flex-direction:column;gap:.5em;min-height:6.4em}
.advgroup{display:flex;gap:.8em;align-items:flex-start;min-height:6.4em}
.advgroup.empty{min-height:6.4em;border:1px dashed rgba(255,255,255,.35);
  border-radius:6px}
.advcard-placeholder{width:3.6em;height:5.1em;flex:none;margin:4px 0 0 4px;
  border:1px dashed rgba(255,255,255,.35);border-radius:6px}
.advinfo .sublabel{display:block;font-size:.75em;opacity:.72;
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:.15em}
.advcard{width:3.6em;height:5.1em;border:1.5px solid var(--ink);
  border-radius:6px;background:#fff;padding:.25em .35em;font-weight:700;
  display:flex;flex-direction:column;justify-content:space-between;
  color:var(--ink);margin:4px 0 0 4px}
.advcard>span{text-align:left}
.advcard .pip{font-size:1.25em;text-align:center}
.advcard.red{color:var(--red);border-color:var(--red)}
.advinfo{color:#f2f4ee;font-size:.92em}
.hbar{height:.55em;background:rgba(255,255,255,.25);border-radius:3px;
  overflow:hidden;margin:.3em 0 0;width:13em;max-width:40vw}
.hbar i{display:block;height:100%;background:#e05545;
  transition:width .35s ease}
.tokenrow{display:flex;flex-wrap:wrap;gap:.5em;justify-content:center;
  min-height:3.6em;align-items:center}
.wreckwrap{position:relative;width:4.7em;height:3.4em;cursor:pointer}
.wreckwrap .card{position:absolute;left:.75em;top:-.55em;
  transform:rotate(90deg);cursor:pointer}
.wreckwrap.sel .card{outline:3px solid #ffd76a;outline-offset:1px}
.wreckval{position:absolute;right:-.2em;bottom:-.35em;z-index:2;
  background:var(--wreck);color:#fff;border-radius:50%;width:1.5em;
  height:1.5em;display:flex;align-items:center;justify-content:center;
  font-size:.8em;font-weight:700}
.token{border:1.5px solid var(--wreck);color:#ffe9a8;border-radius:50%;
  width:2.3em;height:2.3em;display:flex;align-items:center;
  justify-content:center;font-weight:700;cursor:pointer;
  background:rgba(0,0,0,.25)}
.token.sel{background:var(--wreck);color:#fff}
.roletag{font-size:.68em;color:#cfe0d2;margin-top:.2em}
/* --- The road already travelled: face-down ♥, with the place you are
   standing at played on top. Nothing about what is buried beneath them
   shows on the way out. Reversed, this stack is the Return's road. --- */
.locstack{position:relative;display:inline-block}
.locback{position:absolute;width:3.6em;height:5.1em;border-radius:5px;
  border:1.5px solid #2a1a12;background-color:var(--back);
  background-image:var(--pileback-img,repeating-linear-gradient(45deg,
    rgba(255,255,255,.09) 0 4px, transparent 4px 8px));
  background-size:cover;background-position:center}
.locstack .advcard{position:relative;z-index:1}
/* a hand card carrying something entrusted */
.card.hascache{position:relative;box-shadow:0 0 0 1.5px #e8c66a}
.card .cachebadge{position:absolute;right:-.3em;top:-.3em}
/* A mark, not a count: one card per place, so a numeral could only ever
   read '1' -- and reads as 'I' in the display face. */
.cachebadge{display:block;width:.62em;height:.62em;border-radius:50%;
  background:#e8c66a;border:1px solid #241a0c;
  box-shadow:0 1px 2px rgba(0,0,0,.4)}
.advcard .cachebadge,.advcard-placeholder .cachebadge{position:absolute;
  right:-.35em;top:-.35em}
.advcard,.advcard-placeholder{position:relative}

#prompt{font-weight:600;margin:.6em 0 .4em}
#actions{display:flex;flex-wrap:wrap;gap:.45em;margin-bottom:.7em;
  align-items:center}
#handwrap{border-top:1px solid var(--line);padding-top:.6em}
#handlabel{font-size:.75em;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);margin-bottom:.3em}
#hand{display:flex;flex-wrap:wrap;gap:.45em;min-height:5.4em;
  align-items:flex-start}
.handgap{width:1.4em}
#peek{font-size:.85em;color:var(--dim);margin-top:.3em}
#journal{max-height:30em;overflow-y:auto;
  font:.92em/1.5 var(--font-display)}
#journal p{margin:.15em 0}
#journal .turnhead{color:var(--dim);font-style:italic;margin-top:.55em}
#journal .grim{color:var(--danger);font-weight:600}
#journal .good{color:var(--refuge);font-weight:600}
details{margin-top:.8em;font-size:.88em}
details summary{cursor:pointer;font-weight:600}
details .rules{max-height:18em;overflow-y:auto;padding:.4em .2em;color:#3a3d42}
@media(pointer:coarse){
  .card,.pile,.pileback,.advcard,.advcard-placeholder,.cardback-fly{
    width:4.1em;height:5.8em}
  .mini{width:3.5em;height:4.9em}
  #hand{gap:.55em}
  .token{width:2.7em;height:2.7em}
  #actions{gap:.55em}
  button{min-height:2.7em}
}
@media(max-width:640px){
  main{padding:.6em;gap:.7em}
  .panel{padding:.7em .75em}
  #table{gap:.7em 1em}
  #journal{max-height:38vh}
  #discardfan{max-width:100%}
  header{padding:.55em .7em;gap:.45em .8em}
  header h1{width:100%;text-align:center;margin:0}
  .roadwrap{min-width:0;width:100%;order:1;text-align:left}
}
@media(max-width:900px){
  section.panel[style*="grid-column:2"]{grid-column:auto!important;
    grid-row:auto!important}
  section.panel[style*="grid-row:2"]{grid-row:auto!important}
}
textarea{width:100%;height:7em;font:.8em/1.3 ui-monospace,monospace}
/* --- Missions & Chronicles module --- */
/* A tapped face card: turned sideways, its own once-per-game record.
   Rotated in place with margin room so it doesn't overlap neighbours;
   still fully playable, so no pointer/opacity changes. */
.card.tapped{transform:rotate(90deg);margin:0 .8em}
#hand .card.tapped:hover{transform:rotate(90deg) translateX(-4px)}

/* The Chronicle list inside its chip: same capped scroll as missions.
   Entries sit dim until the game lives them. */
#chronicleList{margin-top:.4em;display:flex;flex-direction:column;gap:.4em;
  max-height:48vh;overflow-y:auto}
.chron{background:#eef0ea;border:1px solid var(--line);border-radius:6px;
  padding:.35em .55em;opacity:.55}
.chron .ctitle{font-weight:600;font-size:.88em}
.chron .cdesc{font-size:.78em;color:var(--dim);margin-top:.15em;
  line-height:1.35}
.chron.done{opacity:1;border-color:var(--refuge);background:#e6f0e9}
.chron.done .ctitle{color:var(--refuge)}
/* a beat whose tap is available right now: a live option, glowing in the
   same gold as card selection */
.chron.active{opacity:1;border-color:#c9a227;
  animation:chronGlow 1.5s ease-in-out infinite alternate}
@keyframes chronGlow{
  from{box-shadow:0 0 3px 1px rgba(255,215,106,.35)}
  to{box-shadow:0 0 9px 3px rgba(255,215,106,.75)}
}
@media(prefers-reduced-motion:reduce){
  .chron.active{animation:none;box-shadow:0 0 6px 2px rgba(255,215,106,.55)}
}

/* Chronicle line on the end-game reveal: one communal tally. */
.reveal-chronicle{margin-top:.7em;padding-top:.5em;font-size:.9em;
  border-top:1px dashed var(--line)}

/* Auto lightbox (drawn-card flash): transient and non-blocking — clicks
   pass straight through to the buttons beneath, so rapid Reveal clicking
   runs at full speed; any pointer or key dismisses it instantly. */
#inspect.auto{pointer-events:none;background:rgba(10,14,11,.45)}
@media(prefers-reduced-motion:reduce){#inspect.auto{transition:none}}

/* Lightbox open: backdrop fades while the card rises off the table and
   settles. Keyframe animations (not transitions) so they replay each time
   .on re-displays the modal. Close stays instant by design. */
#inspect.on{animation:insFade .18s ease-out}
@keyframes insFade{from{opacity:0}}

/* Draw flash (Option 2, 'The Turn'): the card arrives back-up — your
   actual pile-back art — and turns over to reveal its face. */
#insface.flip3d{perspective:1000px}
#insface.flip3d .flipinner{position:relative;transform-style:preserve-3d;
  animation:cardFlip .65s ease-in-out}
#insface.flip3d .flipinner>.card{backface-visibility:hidden}
.flipback{position:absolute;inset:0;border-radius:10px;
  border:1.5px solid #2a1a12;background-color:var(--back);
  background-image:var(--pileback-img,repeating-linear-gradient(45deg,
    rgba(255,255,255,.09) 0 4px,transparent 4px 8px));
  background-size:cover;background-position:center;
  backface-visibility:hidden;transform:rotateY(180deg)}
/* a beat of back-showing anticipation (0-25%), then a legible turn */
@keyframes cardFlip{0%,25%{transform:rotateY(-180deg)}100%{transform:rotateY(0)}}
@media(prefers-reduced-motion:reduce){
  #inspect.on{animation:none}
  #insface.flip3d .flipinner{animation:none}
}

/* ---- The Return Journey: the road strip ------------------------------- */
#road{display:flex;flex-wrap:wrap;align-items:center;gap:4px;
  margin:0 0 6px;font-family:var(--font-display,Georgia,serif);font-size:13px}
.roadstop{display:inline-block;min-width:26px;padding:2px 6px;border-radius:3px;
  border:1px solid rgba(0,0,0,.25);text-align:center;line-height:1.4}
.roadstop.past{opacity:.45;background:rgba(0,0,0,.06)}
.roadstop.cur{background:var(--paper,#f5efdf);color:var(--ink,#241f18);
  border-color:var(--ink,#241f18);font-weight:600}
.roadstop.ahead{opacity:.5;background:var(--back,#4b3527);color:transparent;
  border-style:dashed;min-width:18px}
.roadstop.peek{background:var(--back,#4b3527);color:var(--paper,#f5efdf);
  border-style:dashed;opacity:.85}
.roadstop.ruin{color:var(--red,#a5321e)}
.roadinfo{opacity:.7;font-size:12px;font-family:var(--font-body,Georgia,serif)}

/* ---- The Return Journey: the ending ----------------------------------- */
.roadresult{margin:0 0 14px;padding:10px 12px;border-radius:4px;
  background:rgba(0,0,0,.05);border:1px solid rgba(0,0,0,.12)}
.rrhead{font-family:var(--font-display,Georgia,serif);letter-spacing:.06em;
  text-transform:uppercase;font-size:12px;opacity:.7;margin-bottom:4px}
.rrline{font-size:14px;margin-bottom:8px}
.roadresult .rmission{display:flex;align-items:baseline;gap:6px;
  padding:2px 0;font-size:14px}
.roadresult .rmission.missed{opacity:.55}
.roadresult .rmk{width:1em}
.rtier{font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  padding:1px 5px;border-radius:3px;background:rgba(0,0,0,.1)}
.roadresult .rmscore{margin-left:auto;font-variant-numeric:tabular-nums}

/* ---- Return Mission in the goals sidebar ------------------------------ */
.mission.ret{border-left:3px solid var(--accent,#8a6a3b)}
.retchip{display:inline-block;font-size:10px;text-transform:uppercase;
  letter-spacing:.08em;padding:1px 5px;margin-right:4px;border-radius:3px;
  background:rgba(0,0,0,.12);vertical-align:1px}