: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 panel (sidebar). Each mission is a compact card with its score. */
#missionsPanel{margin-bottom:.9em;padding-bottom:.7em;
  border-bottom:1px solid var(--line)}
#missionsList{margin-top:.4em;display:flex;flex-direction:column;gap:.45em}
.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(0,1.3fr) minmax(280px,.7fr);
  gap:1em;padding:1em;max-width:1220px;margin:0 auto}
@media(max-width:900px){main{grid-template-columns:1fr}}
.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}
#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}