:root {
  color-scheme:dark;
  --bg:#10110e;
  --panel:#191b16;
  --raised:#23261e;
  --line:#3b3e31;
  --text:#eee9dc;
  --muted:#aca995;
  --gold:#c7a662;
  --red:#e48a7b;
  --green:#a5bd82
}
* {
  box-sizing:border-box
}
[hidden] {
  display:none!important
}
body {
  margin:0;
  min-width:320px;
  background:radial-gradient(ellipse at top left,#55512b33,transparent 50rem),var(--bg);
  color:var(--text);
  font:15px/1.5 Arial,Helvetica,sans-serif
}
h1,h2,h3,p {
  margin:0
}
h1,h2,h3 {
  font-family:Georgia,'Times New Roman',serif;
  font-weight:500
}
h1 {
  font-size:1.75rem
}
h2 {
  font-size:1.4rem
}
h3 {
  font-size:1.15rem;
  margin:1rem 0 .6rem
}
a {
  color:var(--gold)
}
button,input,select,textarea {
  font:inherit;
  color:inherit
}
button,.mode-links a,.button {
  padding:.5rem .85rem;
  min-height:38px;
  background:var(--raised);
  border:1px solid var(--line);
  border-radius:5px;
  color:var(--text);
  text-decoration:none;
  cursor:pointer
}
button:hover,.mode-links a:hover {
  border-color:var(--gold)
}
button:disabled {
  opacity:.5;
  cursor:not-allowed
}
button.primary {
  background:#c7a662;
  color:#17190e;
  border-color:var(--gold);
  font-weight:700
}
button.danger {
  color:var(--red);
  border-color:#7d493f
}
button.small {
  padding:.2rem .6rem;
  min-height:30px
}
input,select,textarea {
  display:block;
  width:100%;
  padding:.5rem .65rem;
  background:#10120e;
  border:1px solid #494d3b;
  border-radius:4px;
  min-height:40px
}
textarea {
  resize:vertical;
  min-height:85px
}
input[type=checkbox] {
  width:auto;
  min-height:auto;
  display:inline;
  margin-right:.6rem
}
input[type=color] {
  padding:.15rem;
  max-width:100px
}
label {
  display:grid;
  gap:.3rem;
  color:var(--muted);
  font-size:.85rem
}
label.check {
  display:block
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:3px
}
.topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem max(1rem,calc((100vw - 1280px)/2));
  background:#11130ff5;
  border-bottom:1px solid var(--line)
}
.brand {
  color:var(--text);
  text-decoration:none
}
.eyebrow {
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.66rem;
  font-weight:700;
  color:var(--gold);
  display:block
}
.mode-links,.actions {
  display:flex;
  gap:.5rem;
  align-items:center;
  flex-wrap:wrap
}
main {
  max-width:1280px;
  margin:auto;
  padding:1.5rem 1rem 3rem
}
.campaign-heading {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:center;
  margin-bottom:1.2rem
}
.campaign-heading h2 {
  font-size:1.85rem
}
.player-round-command {
  margin-bottom:1.2rem
}
.player-round-command h2 {
  font-size:1.85rem;
  margin:.15rem 0 1rem
}
.player-round-command .phase-track {
  margin-bottom:0
}
.phase-finish {display:flex;align-items:center;flex-wrap:wrap;gap:.7rem;margin-top:1rem}
.phase-finish .help {margin:0}
.muted {
  color:var(--muted)
}
.badge {
  border:1px solid #5b5236;
  color:var(--gold);
  border-radius:4px;
  padding:.3rem .6rem;
  white-space:nowrap
}
.tabs {
  display:flex;
  gap:.3rem;
  overflow:auto;
  border-bottom:1px solid var(--line);
  margin-bottom:.7rem;
  padding-bottom:.5rem
}
.tabs a,.tabs button {
  white-space:nowrap;
  text-decoration:none;
  background:transparent;
  color:var(--muted);
  padding:.55rem .7rem;
  border:1px solid transparent;
  border-radius:4px
}
.tabs .active {
  color:var(--text);
  border-color:var(--line);
  background:var(--raised)
}
.notice {
  min-height:1.5rem;
  margin:.35rem 0;
  color:var(--green)
}
.notice.error {
  color:var(--red)
}
.panel {
  background:linear-gradient(135deg,#1f221a,#181a16);
  border:1px solid var(--line);
  border-radius:6px;
  padding:1.1rem;
  margin-bottom:1rem;
  min-width:0
}
.panel>h2 {
  margin-bottom:.7rem
}
.two-columns {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem
}
.status-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1rem;
  margin-bottom:1rem
}
.stat {
  padding:1rem 1.1rem;
  border:1px solid var(--line);
  border-top:2px solid #857340;
  border-radius:5px;
  background:var(--panel)
}
.stat strong {
  font:2rem Georgia,serif;
  display:block;
  margin-top:.3rem
}
.section-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1rem
}
.alliance-with-image {
  display:flex;
  align-items:center;
  gap:.7rem;
  min-width:175px
}
.alliance-image-button {
  flex:none;
  padding:2px;
  min-height:0;
  line-height:0;
  border-color:#71613d
}
.alliance-image-button img {
  display:block;
  width:64px;
  height:64px;
  object-fit:cover;
  border-radius:3px
}
.alliance-image-dialog {
  width:min(96vw,1060px);
  max-width:none;
  padding:.8rem;
  max-height:94vh
}
.alliance-image-dialog .section-title {
  margin-bottom:.6rem
}
.alliance-image-dialog img {
  display:block;
  width:100%;
  height:auto;
  max-height:calc(94vh - 6rem);
  object-fit:contain
}
.table-wrap {
  overflow:auto
}
table {
  border-collapse:collapse;
  width:100%;
  font-size:.9rem
}
th {
  text-align:left;
  color:var(--muted);
  font-size:.7rem;
  letter-spacing:.05em;
  text-transform:uppercase
}
td,th {
  padding:.7rem .6rem;
  border-bottom:1px solid var(--line);
  vertical-align:top
}
td {
  overflow-wrap:anywhere
}
td:first-child {
  color:var(--text)
}
.empty {
  padding:1.3rem .2rem;
  color:var(--muted)
}
.stack {
  display:grid;
  gap:1rem
}
.narrow {
  max-width:430px
}
.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem
}
.form-grid .full {
  grid-column:1/-1
}
/* Shared public and admin land map. */
.campaign-map {
  background:#d1c7a2;
  border:1px solid #85764f;
  border-radius:6px;
  overflow:auto;
  margin-bottom:1rem;
}
.campaign-map svg.land-map {
  display:block;
  width:100%;
  min-width:850px;
  height:auto;
}
.map-paper { fill:#d7cda7; }
.map-frame { fill:none; stroke:#786b47; stroke-width:2; }
.map-cartouche { fill:#4c5138; font:600 18px Georgia,serif; letter-spacing:3px; }
.map-scale-note { fill:#6a684c; font:10px Arial,sans-serif; letter-spacing:2px; }
.terrain-hex { pointer-events:all; stroke:#4d5635; stroke-opacity:.23; stroke-width:.8; }
.terrain-wave { fill:none; stroke:#d0e1d6; stroke-opacity:.38; stroke-width:1.2; }
.terrain-mountains { stroke:#565f49; stroke-width:1.1; stroke-linejoin:round; }
.terrain-forest { stroke:#314d33; stroke-width:1.1; stroke-linejoin:round; }
.terrain-hills { fill:none; stroke:#737951; stroke-width:1.5; stroke-opacity:.6; }
path.terrain-grass { fill:none; stroke:#536d41; stroke-width:1.2; stroke-opacity:.45; }
.terrain-scrub { fill:none; stroke:#756e50; stroke-width:1.2; stroke-opacity:.5; }
.map-rivers path { fill:none; stroke-linecap:round; stroke-linejoin:round; }
.river-bank { stroke:#d2c798; stroke-width:16; }
.river-water { stroke:#5f8994; stroke-width:10; }
.river-shine { stroke:#a8c6c5; stroke-width:2; stroke-opacity:.7; }
.river-tributary { stroke:#648f97; stroke-width:5; }
.map-routes path { fill:none; stroke-linecap:round; }
.road-edge { stroke:#71694d; stroke-width:4.5; stroke-opacity:.7; }
.map-route { stroke:#eeddb0; stroke-width:2.2; stroke-dasharray:5 4; }
.location-hex { fill-opacity:.13; stroke-width:3.2; stroke-linejoin:round; }
.location-symbol { fill:#eee5be; stroke:#343f2d; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.symbol-detail { fill:none; }
.location-banner { stroke:#35432f; stroke-width:1.1; stroke-linejoin:round; }
.location-label-bg { fill:#eee5c3; fill-opacity:.96; stroke:#8a8862; stroke-width:.7; }
.location-label { fill:#293824; font:600 13px Georgia,serif; }
.map-point-of-interest { pointer-events:none; }
.map-point-of-interest[role="button"] { pointer-events:auto; cursor:pointer; }
.map-point-of-interest[role="button"]:focus { outline:none; }
.map-point-of-interest[role="button"]:focus circle { stroke:#fff4c9; stroke-width:4; }
.map-point-of-interest circle { fill:#302a21; fill-opacity:.9; stroke:#f0d78a; stroke-width:2; }
.map-point-of-interest text { fill:#fff1bd; font:700 21px Georgia,serif; }
.map-poi-key { display:inline-flex; align-items:center; gap:.4rem; }
.map-poi-key i { display:inline-grid; place-items:center; width:1.15rem; height:1.15rem; border:1px solid #f0d78a; border-radius:50%; background:#302a21; color:#fff1bd; font:700 .8rem Georgia,serif; font-style:normal; }
.map-army-group { pointer-events:all; }
.map-army-group .map-army-group-hit { fill:transparent; stroke:none; pointer-events:all; }
.map-army-group .map-army-group-bg { fill:#354431; stroke:#e8dcae; stroke-width:1; }
.map-army-group text { fill:#f3e8c2; font:700 12px Arial,sans-serif; pointer-events:none; }
.map-army-group[role=button] { cursor:pointer; }
.map-army-group[role=button]:hover .map-army-group-bg,
.map-army-group[role=button]:focus .map-army-group-bg { fill:#526244; stroke:#fff4cf; stroke-width:2; }
.map-army-group[role=button]:focus { outline:none; }
.map-army-conflict .map-army-group-bg { fill:#612c25; stroke:#f0c78e; }
.map-army-conflict[role=button]:hover .map-army-group-bg,
.map-army-conflict[role=button]:focus .map-army-group-bg { fill:#873b30; }
.map-location[role=button] { cursor:pointer; }
.map-location[role=button]:hover .location-hex,
.map-location[role=button]:focus .location-hex { fill-opacity:.32; stroke-width:4.5; }
.map-location[role=button]:focus { outline:none; }
.map-location[data-construction-location] .location-hex {stroke:#e8cf8e;stroke-width:4;}
.map-compass { fill:#586048; stroke:#586048; stroke-width:1.2; }
.map-compass text { stroke:none; font:700 10px Georgia,serif; }
.campaign-map .map-legend { background:#252d21; border-color:#847951; color:#e0dbbf; }
.map-road-key { margin-left:auto; color:#c7c1a2; }
.map-empty {
  min-height:330px;
  display:grid;
  place-content:center;
  text-align:center;
  padding:2rem
}
.information {
  max-width:920px
}
.information p {
  color:var(--muted);
  line-height:1.7
}
.information h3 {
  color:var(--gold);
  margin-top:1.3rem
}
.preserve {
  white-space:pre-wrap;
  overflow-wrap:anywhere
}
.entry {
  padding:.8rem 0;
  border-bottom:1px solid var(--line)
}
.entry:last-child {
  border:0
}
.entry small {
  color:var(--muted)
}
dialog {
  background:var(--panel);
  border:1px solid #71613d;
  border-radius:7px;
  color:var(--text);
  padding:1.2rem;
  max-width:700px;
  width:calc(100% - 2rem);
  max-height:90vh
}
dialog::backdrop {
  background:#000b
}
.dialog-actions {
  display:flex;
  justify-content:flex-end;
  gap:.7rem;
  margin-top:1.1rem
}
.help {
  font-size:.85rem;
  color:var(--muted);
  margin:.5rem 0 1rem
}
.action-status {
  border-left:3px solid var(--muted);
  color:var(--muted);
  margin:.5rem 0;
  padding:.4rem .65rem
}
.action-status.good {
  border-left-color:var(--green);
  color:var(--green)
}
.action-status.warn {
  border-left-color:var(--gold);
  color:var(--gold)
}
.recipient-list {
  display:flex;
  flex-wrap:wrap;
  gap:1rem
}
.recipient-list label {
  display:block
}
.swatch {
  display:inline-block;
  width:.8rem;
  height:.8rem;
  border-radius:50%;
  margin-right:.5rem
}
.map-legend {
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 1.2rem;
  padding:.6rem .9rem;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:.8rem;
}
.summary {
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  color:var(--muted);
  margin:.7rem 0
}
footer {
  border-top:1px solid var(--line);
  padding:1.2rem;
  text-align:center;
  color:var(--muted);
  font-size:.75rem
}
details {
  border-bottom:1px solid var(--line);
  padding:1rem 0
}
summary {
  cursor:pointer;
  color:var(--gold)
}
details .preserve {
  margin:1rem 0
}
@media(max-width:760px) {
  .topbar {
    align-items:flex-start
  }
  .topbar .mode-links {
    justify-content:flex-end
  }
  .topbar h1 {
    font-size:1.4rem
  }
  .mode-links a,.mode-links button {
    font-size:.8rem;
    padding:.4rem .5rem
  }
  .two-columns,.form-grid {
    grid-template-columns:1fr
  }
  .status-grid {
    grid-template-columns:repeat(2,1fr);
    gap:.6rem
  }
  .campaign-heading h2,.player-round-command h2 {
    font-size:1.5rem
  }
  .section-title {
    align-items:flex-start
  }
  .tabs {
    margin-left:-.25rem
  }
  .panel {
    padding:.8rem
  }
}

.map-tile[role=button] { cursor:pointer; }
.map-tile[role=button]:hover .terrain-hex,
.map-tile[role=button]:focus .terrain-hex { pointer-events:all; stroke:#f7edc8; stroke-width:3; stroke-opacity:1; }
.map-tile[role=button]:focus { outline:none; }
.map-tile > :not(.terrain-hex),
.land-map[role=group] .map-rivers,
.land-map[role=group] .map-routes { pointer-events:none; }

.map-location[role=button], .map-tile[data-location] { touch-action:none; user-select:none; }
.map-dragging { user-select:none; }
.map-dragging .map-location { pointer-events:none; }
.drag-source { opacity:.45; }
.drop-target .terrain-hex { pointer-events:all; stroke:#fff2a8; stroke-width:5; stroke-opacity:1; }
.map-drag-label { position:fixed; pointer-events:none; z-index:100; background:#252d21; color:#f3e8c2; border:1px solid #b69b60; border-radius:4px; padding:8px 12px; }
.map-saving { pointer-events:none; opacity:.7; }
.placing-location .map-tile { cursor:crosshair; }

.hero-row,.special-item { display:grid; gap:.7rem; margin:0 0 1rem; padding:1rem; border:1px solid var(--line); }
.hero-row button { justify-self:start; }
.special-item button { justify-self:start; }
.army-row { margin:0; padding:0; border:1px solid var(--line); border-radius:5px; background:#151712; }
.army-row + .army-row { margin-top:.7rem; }
.army-panel-summary { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem; cursor:pointer; list-style:none; color:var(--text); }
.army-panel-summary::-webkit-details-marker { display:none; }
.army-panel-summary::after { content:'›'; color:var(--gold); font-size:1.6rem; line-height:1; transform:rotate(90deg); transition:transform .15s ease; }
.army-row[open]>.army-panel-summary { border-bottom:1px solid var(--line); }
.army-row[open]>.army-panel-summary::after { transform:rotate(-90deg); }
.army-panel-title { display:flex; align-items:center; gap:.6rem; min-width:0; font-family:Georgia,serif; color:var(--gold); }
.army-panel-title strong { overflow-wrap:anywhere; }
.army-panel-meta { margin-left:auto; color:var(--muted); font-size:.85rem; text-align:right; }
.army-panel-body { display:grid; gap:.8rem; padding:1rem; }
.army-panel-body>button { justify-self:start; }
.inline-action { display:flex; flex-wrap:wrap; align-items:center; gap:.7rem; margin:.7rem 0; }
.inline-action select,.inline-action input { width:auto; min-width:12rem; }
.resolution-card,.participant-card { border:1px solid var(--line); border-radius:5px; padding:1rem; margin:.75rem 0; }
.resolution-card { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.resolution-card p { margin:.3rem 0 0; }
.army-result { display:grid; grid-template-columns:minmax(12rem,1fr) minmax(6rem,8rem) minmax(6rem,8rem) minmax(6rem,8rem); align-items:end; gap:.7rem; margin:.75rem 0; }
.army-result-choice { align-self:center; display:flex; align-items:center; }
.army-result-field { display:grid; gap:.3rem; font-size:.82rem; color:var(--muted); }
.army-result input[type=number] { width:100%; }
.army-result input[readonly] { color:var(--muted); background:#181b16; }
.army-result output { align-self:center; font-size:.88rem; }
.commander-lore { min-width:220px; max-width:560px; }
.commander-lore .preserve, .hero-story { overflow-wrap:anywhere; }
.hero-story { border-top:1px solid var(--line); padding-top:.6rem; margin-top:.6rem; }
.hero-story h4 { margin:.3rem 0; }
@media(max-width:760px) {
  .army-panel-summary { align-items:flex-start; flex-wrap:wrap; gap:.35rem .7rem; }
  .army-panel-meta { order:3; width:100%; margin-left:0; text-align:left; }
  .army-result { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .army-result-choice { grid-column:1/-1; }
}

.army-marker {cursor:default;pointer-events:all;}
.army-marker path {fill:#20241f;stroke:#ead697;stroke-width:2;}
.army-marker text {fill:#fff4cf;font:bold 13px sans-serif;pointer-events:none;}
.own-army {cursor:grab;touch-action:none;}
.army-selected path {fill:#81602c;stroke:#fff;stroke-width:3;}
.army-reachable .terrain-hex {stroke:#eddb83;stroke-width:3;stroke-opacity:1;}
.army-destination .terrain-hex {stroke:#fff;stroke-width:6;stroke-opacity:1;}
.scouting-visible .terrain-hex {stroke:#77aaca;stroke-width:3;stroke-opacity:1;}
.scouting-full .terrain-hex {stroke:#f1d978;stroke-width:5;stroke-opacity:1;}
#campaignMap {touch-action:pan-y;}

.race-icon {width:1.25rem;height:1.25rem;vertical-align:middle;display:inline-block;margin-right:.35rem;}
.race-icon path,.army-marker .race-icon path {fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.army-marker .race-icon {color:#fff0cb;pointer-events:none;width:18px;height:21px;margin:0;}
.army-marker[role=button] {cursor:pointer;}
.army-marker.own-army {cursor:grab;}
#armyDetails {max-width:40rem;width:calc(100% - 2rem);}
#armyListDialog {max-width:58rem;width:calc(100% - 2rem);}
.army-list-textarea {width:100%;min-height:24rem;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;line-height:1.45;white-space:pre;tab-size:2;}
.army-group-list {display:grid;gap:.7rem;}
.army-group-entry {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding:.8rem;border:1px solid var(--line);border-radius:5px;background:#151712;}
.army-group-entry h3,.army-group-entry p {margin:.15rem 0;}
.army-group-entry button {flex:0 0 auto;}
.construction-list {display:grid;gap:.6rem;margin:.7rem 0 1rem;}
.construction-entry {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.7rem;padding:.8rem;border:1px solid var(--line);border-radius:5px;background:#151712;}
.construction-entry p {margin:.2rem 0;}
.construction-entry form {margin:0;}

.recipient-alliance { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; padding:.65rem 0; }
.recipient-alliance + .recipient-alliance { border-top:1px solid var(--line); }
.recipient-alliance > label { margin:0; }
.scouting-controls { border:1px solid var(--line); border-radius:5px; padding:1rem; margin:1rem 0; max-width:44rem; }
.phase-track { display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 1rem; }
.phase-track span { padding:.35rem .6rem; border:1px solid var(--line); border-radius:4px; color:var(--muted); text-transform:capitalize; }
.phase-track .current { color:#17190e; background:var(--gold); border-color:var(--gold); font-weight:700; }
.backup-card { border:1px solid var(--line); border-left:4px solid var(--muted); border-radius:5px; padding:1rem; margin:.7rem 0 1.2rem; }
.backup-card.current { border-left-color:var(--green); }
.backup-card.overdue { border-left-color:var(--red); }
.achievement { border-left:3px solid var(--gold); padding:.35rem 0 .35rem .7rem; margin:.5rem 0; }
.achievement p,.chronicle-entry p { margin:.25rem 0; }
.chronicle-entry { border-top:1px solid var(--line); padding:.7rem 0; }