/*
  A Bridge of Gold: Monmouth, June 28, 1778
  Copyright (c) 2026 Alyssa I. Agard. Licensed CC BY-NC 4.0.
  Presentation layer: period palette, typography, layout.
*/

:root{
  --parchment:#EAE0C6;
  --parchment-deep:#DDCFA9;
  --paper:#F2EAD3;
  --ink:#241F14;
  --ink-soft:#4A4232;
  --blue:#1E3C64;
  --blue-deep:#142A47;
  --buff:#A9812F;
  --buff-pale:#E4D5A6;
  --scarlet:#8C2A22;
  --scarlet-pale:#E8CFC5;
  --smoke:#6B6353;
  --good:#3F5E2E;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--parchment)}
body{
  font-family:'EB Garamond',Georgia,serif;
  color:var(--ink);
  background:
    radial-gradient(ellipse 120% 60% at 50% -10%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(ellipse 140% 90% at 50% 115%, rgba(90,70,30,.18), transparent 55%),
    var(--parchment);
  min-height:100vh;
  font-size:18px;
  line-height:1.6;
}
.wrap{max-width:780px;margin:0 auto;padding:0 20px 90px}

/* ---------- HUD ---------- */
#hud{
  position:sticky;top:0;z-index:50;display:none;
  background:var(--blue-deep);
  color:var(--buff-pale);
  border-bottom:3px double var(--buff);
  padding:8px 14px;
}
#hud .hud-inner{max-width:780px;margin:0 auto;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.hud-role{font-family:'IM Fell English SC',serif;font-size:.95rem;letter-spacing:.06em;flex:1 1 auto;min-width:140px}
.stat{display:flex;align-items:center;gap:7px;font-size:.82rem;letter-spacing:.05em;text-transform:uppercase}
.bar{width:74px;height:9px;background:rgba(0,0,0,.45);border:1px solid var(--buff);overflow:hidden}
.bar i{display:block;height:100%;background:var(--buff-pale);transition:width .45s ease, background .45s}
.bar.vigor i.low{background:var(--scarlet)}
.canteen{display:flex;gap:3px}
.drop{width:9px;height:13px;border:1px solid var(--buff);background:transparent;border-radius:0 0 5px 5px}
.drop.full{background:#7FA6C9}
#drinkBtn{
  font-family:'EB Garamond',serif;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;
  background:transparent;color:var(--buff-pale);border:1px solid var(--buff);
  padding:4px 10px;cursor:pointer;transition:background .2s;
}
#drinkBtn:hover{background:rgba(169,129,47,.3)}
#drinkBtn:disabled{opacity:.35;cursor:default}
/* thermometer: the signature element */
.thermo{display:flex;align-items:center;gap:6px}
.thermo svg{display:block}
.thermo-label{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}

/* ---------- Title screen ---------- */
header.title{
  text-align:center;padding:64px 12px 34px;
  border-bottom:3px double var(--smoke);
  margin-bottom:34px;
}
.eyebrow{
  font-family:'EB Garamond',serif;font-size:.85rem;letter-spacing:.35em;text-transform:uppercase;
  color:var(--scarlet);margin-bottom:16px;
}
h1{
  font-family:'IM Fell English',serif;font-weight:400;
  font-size:clamp(2.5rem,7vw,4.1rem);line-height:1.03;color:var(--ink);
}
h1 .amp{font-style:italic;color:var(--blue)}
.subtitle{
  font-family:'IM Fell English',serif;font-style:italic;font-size:1.18rem;color:var(--ink-soft);
  margin-top:16px;
}
.rule-orn{margin:22px auto 0;width:180px;height:1px;background:var(--smoke);position:relative}
.rule-orn::after{
  content:"✶";position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);
  background:var(--parchment);padding:0 12px;color:var(--scarlet);font-size:.8rem;
}
.preamble{max-width:620px;margin:0 auto 30px;text-align:center;font-size:1.05rem;color:var(--ink-soft)}
.preamble em{color:var(--ink)}

/* ---------- Role menu ---------- */
.menu-head{
  font-family:'IM Fell English SC',serif;font-size:1.25rem;letter-spacing:.08em;text-align:center;
  margin:34px 0 6px;color:var(--blue-deep);
}
.menu-sub{text-align:center;font-style:italic;color:var(--smoke);margin-bottom:22px;font-size:.98rem}
.roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:16px}
.role-card{
  background:var(--paper);border:1px solid var(--smoke);
  border-left:5px solid var(--blue);
  padding:18px 20px 16px;cursor:pointer;text-align:left;width:100%;
  font-family:inherit;color:inherit;font-size:inherit;
  transition:transform .15s ease, box-shadow .15s ease;
  position:relative;
}
.role-card:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(36,31,20,.18)}
.role-card:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.role-rank{
  font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--scarlet);margin-bottom:5px;
}
.role-name{font-family:'IM Fell English',serif;font-size:1.42rem;line-height:1.15;margin-bottom:7px}
.role-desc{font-size:.96rem;color:var(--ink-soft);line-height:1.5}
.role-tag{
  position:absolute;top:16px;right:16px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--smoke);
}

/* ---------- Scene ---------- */
#game{display:none}
.scene-meta{
  display:flex;gap:14px;flex-wrap:wrap;align-items:baseline;
  border-bottom:1px solid var(--smoke);padding:26px 0 10px;margin-bottom:20px;
}
.scene-time{
  font-family:'IM Fell English SC',serif;font-size:1.3rem;color:var(--scarlet);letter-spacing:.04em;
}
.scene-place{font-style:italic;color:var(--ink-soft);font-size:1.02rem}
.scene-text p{margin-bottom:1em}
.scene-text p:last-child{margin-bottom:0}
.scene-text .spoken{font-style:italic}

.note{
  margin:26px 0 8px;background:var(--paper);border:1px solid var(--parchment-deep);
  padding:14px 18px 13px;font-size:.94rem;color:var(--ink-soft);line-height:1.55;
}
.note-tag{
  display:inline-block;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  padding:2px 9px;margin-bottom:7px;border:1px solid;
}
.tag-doc{color:var(--blue);border-color:var(--blue)}
.tag-rec{color:var(--buff);border-color:var(--buff)}
.tag-leg{color:var(--scarlet);border-color:var(--scarlet)}
.note b{color:var(--ink)}

.choices{margin-top:26px;display:flex;flex-direction:column;gap:12px}
.choices-head{
  font-size:.78rem;letter-spacing:.26em;text-transform:uppercase;color:var(--smoke);
  margin-bottom:2px;
}
.choice{
  text-align:left;font-family:inherit;font-size:1.04rem;color:var(--ink);
  background:transparent;border:1px solid var(--smoke);border-left:4px solid var(--scarlet);
  padding:13px 18px;cursor:pointer;line-height:1.45;
  transition:background .18s,border-color .18s;
}
.choice:hover{background:var(--paper);border-left-color:var(--blue)}
.choice:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.choice small{display:block;color:var(--smoke);font-size:.85rem;margin-top:3px;font-style:italic}
.choice.disabled{opacity:.45;cursor:default;border-left-color:var(--smoke)}

/* ---------- Effects toast ---------- */
#fx{min-height:24px;margin-top:10px;font-size:.9rem;color:var(--smoke);font-style:italic}

/* ---------- Ending ---------- */
.end-banner{
  font-family:'IM Fell English',serif;font-size:2rem;text-align:center;
  margin:30px 0 8px;color:var(--blue-deep);
}
.end-verdict{text-align:center;font-style:italic;color:var(--scarlet);margin-bottom:24px;font-size:1.08rem}
.aftermath{
  border-top:3px double var(--smoke);margin-top:30px;padding-top:20px;
}
.aftermath h3{
  font-family:'IM Fell English SC',serif;font-weight:400;font-size:1.15rem;letter-spacing:.06em;
  color:var(--scarlet);margin-bottom:10px;
}
.aftermath p{margin-bottom:.9em;font-size:.99rem;color:var(--ink-soft)}
.end-actions{display:flex;gap:12px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.btn-again{
  font-family:'IM Fell English SC',serif;font-size:1rem;letter-spacing:.08em;
  background:var(--blue-deep);color:var(--buff-pale);border:1px solid var(--buff);
  padding:11px 26px;cursor:pointer;
}
.btn-again:hover{background:var(--blue)}
footer.credits{
  margin-top:60px;padding-top:16px;border-top:1px solid var(--parchment-deep);
  font-size:.82rem;color:var(--smoke);text-align:center;line-height:1.6;
}
/* ---------- Maps ---------- */
.map-panel{
  margin:0 0 22px;background:var(--paper);border:1px solid var(--smoke);
}
.map-panel summary{
  cursor:pointer;list-style:none;padding:9px 16px;
  font-family:'IM Fell English SC',serif;font-size:1.02rem;letter-spacing:.07em;color:var(--blue-deep);
  border-bottom:1px solid var(--parchment-deep);display:flex;justify-content:space-between;align-items:baseline;
}
.map-panel summary::-webkit-details-marker{display:none}
.map-panel summary .phase-name{font-family:'EB Garamond',serif;font-style:italic;font-size:.9rem;color:var(--scarlet);letter-spacing:0}
.map-body{padding:10px 12px 12px}
.map-body svg{display:block;width:100%;height:auto}
.map-caption{font-size:.82rem;color:var(--smoke);font-style:italic;margin-top:6px;line-height:1.5}
.menu-map{margin:34px 0 6px;background:var(--paper);border:1px solid var(--smoke);padding:14px 14px 12px}
.menu-map h2{
  font-family:'IM Fell English SC',serif;font-weight:400;font-size:1.15rem;letter-spacing:.07em;
  color:var(--blue-deep);text-align:center;margin-bottom:10px;
}
.menu-map svg{display:block;width:100%;height:auto}
/* svg text classes */
.mt{font-family:'EB Garamond',serif;font-size:12.5px;fill:#4A4232}
.mt-it{font-family:'EB Garamond',serif;font-style:italic;font-size:11.5px;fill:#5E6E76}
.mt-sc{font-family:'IM Fell English SC',serif;font-size:13px;fill:#241F14;letter-spacing:.05em}
.mt-blue{font-family:'EB Garamond',serif;font-size:11.5px;fill:#1E3C64;font-weight:600}
.mt-red{font-family:'EB Garamond',serif;font-size:11.5px;fill:#8C2A22;font-weight:600}
.mt-tiny{font-family:'EB Garamond',serif;font-size:10.5px;fill:#6B6353}
.ph{transition:opacity .3s}
/* ---------- Armory ---------- */
.armory{margin:26px 0 6px;display:grid;gap:14px}
.arm-card{background:var(--paper);border:1px solid var(--smoke);padding:14px 18px 12px}
.arm-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.arm-name{font-family:'IM Fell English',serif;font-size:1.22rem;color:var(--ink)}
.arm-user{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--scarlet)}
.arm-card svg{display:block;width:100%;height:auto;margin:6px 0 8px}
.arm-specs{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.88rem;color:var(--ink-soft);margin-bottom:7px}
.arm-specs span::before{content:"\2726";color:var(--buff);margin-right:6px;font-size:.7rem}
.arm-note{font-size:.92rem;color:var(--ink-soft);font-style:italic;line-height:1.5;border-top:1px solid var(--parchment-deep);padding-top:7px}
@media (max-width:560px){
  body{font-size:16.5px}
  .stat .bar{width:56px}
  .hud-role{width:100%;flex-basis:100%}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important}
}