/* Pentakeover — the war table.
   Castle Defense is carved wood; Gravity Golf is glass. This one is an engraved
   campaign plate: corners notched like a hung banner, hairline double rules,
   small-caps serif titles over a ruled survey ground, and ledger numerals for
   every figure. Steel and gold throughout, so the five faction colours stay the
   loudest thing on screen. */

:root {
  --ground: #080c11;
  --plate: #131c25;
  --plate-hi: #1b2631;
  --edge: #2e3d4c;
  --edge-soft: #1d2833;
  --gold: #e3bc68;
  --gold-hi: #ffdd8e;
  --text: #cfdae6;
  --muted: #7b8b9d;
  --dim: #5d6b7c;
  --warn: #e86a5a;

  --display: Georgia, 'Palatino Linotype', 'Book Antiqua', serif;
  --num: ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* The house shape: two opposite corners cut away. */
  --notch: 7px;
  --cut: polygon(
    var(--notch) 0, 100% 0,
    100% calc(100% - var(--notch)), calc(100% - var(--notch)) 100%,
    0 100%, 0 var(--notch));
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--ground);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  overflow: hidden;
  /* A click on the war table is a move, not a text drag. Without this the
     browser reads the same gesture as "select text" and paints a blue wash
     across every label you sweep past. */
  -webkit-user-select: none;
  user-select: none;
}

/* The seed box is real text the player types and edits, so selection stays on
   there — it is the one place the blue highlight is wanted. */
input {
  -webkit-user-select: text;
  user-select: text;
}

/* ---------- the plate ----------

   An outlined panel with notched corners. A real border cannot survive the
   clip — it gets sliced off across the diagonals — so the outline is the
   element's own background and the fill is an inset pseudo-element cut to the
   same shape. 1px of outline then shows all the way round, corners included.
   Set --fill for the face and --notch for the size of the cut; recolour
   `background` to change the rim (that is what the hover states do).

   Elements the game colours from JS (.chip, .uglyph, .logline, .banner) stay
   off this system and keep real borders, so those inline colours still land. */
.plate,
button,
.back,
.unit,
.setup-row,
.gsec,
.overlay-card {
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 0;
  background: var(--edge);
  clip-path: var(--cut);
}

.plate::before,
button::before,
.back::before,
.unit::before,
.setup-row::before,
.gsec::before,
.overlay-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: var(--fill, var(--plate));
  clip-path: var(--cut);
}

#app {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
}

/* ---------- top bar ---------- */

#topbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 10px 16px;
  background: linear-gradient(#18222d, #0d141b);
  border-bottom: 1px solid var(--edge);
  /* Engraved gold rule under the header — the one bright line on the chrome. */
  box-shadow: 0 1px 0 rgba(227, 188, 104, 0.22), 0 8px 20px rgba(0, 0, 0, 0.5);
}

/* Back to the landing page. Same corner, size and behaviour as Gravity Golf's
   and Castle Defense's; notched and small-caps so it wears this game's skin.
   It sits inside the top bar rather than pinned to the viewport, which puts it
   in the same corner without overlapping the brand. */
.back {
  --notch: 6px;
  --fill: #19212a;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 7px 11px;
  color: #9fb0c2;
  text-decoration: none;
  white-space: nowrap;
}
.back:hover {
  background: var(--gold);
  color: var(--gold-hi);
}
.back:focus-visible {
  background: var(--gold);
  color: var(--gold-hi);
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.brand {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 5px;
  color: var(--gold);
  text-shadow: 0 1px 0 #000;
  white-space: nowrap;
}
.brand span { color: #6f8196; }

.turn-info { display: flex; align-items: center; gap: 10px; }
.round {
  font-family: var(--display);
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
/* The faction chip takes its colour inline, so it stays a solid fill — notched
   by the clip alone, with no outline layer to overwrite. */
.chip {
  --notch: 5px;
  padding: 5px 14px;
  border-radius: 0;
  clip-path: var(--cut);
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  background: var(--plate-hi);
}

.stats { display: flex; gap: 6px; margin-left: auto; }
.stat {
  /* Equal-width columns, so the numbers sit on a regular grid however wide
     each value happens to render. */
  min-width: 62px;
  padding: 0 6px;
  text-align: right;
  line-height: 1.15;
}
.stat label {
  display: block;
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--dim);
}
.stat b {
  font-family: var(--num);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  color: #e8eef5;
}
.stat b.neg { color: var(--warn); }

.topbtns { display: flex; gap: 8px; margin-left: auto; }
.topbtns button { min-width: 104px; text-align: center; }

/* Orders are given in small caps — every button reads as a command. */
button {
  --notch: 6px;
  --fill: linear-gradient(#1e2a35, #151e27);
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  cursor: pointer;
  color: #b9c8d8;
  padding: 9px 14px;
}
/* Hover lights the rim rather than the face, which keeps the label legible. */
button:hover:not(:disabled) {
  background: var(--gold);
  color: var(--gold-hi);
}
button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
button:disabled { opacity: 0.4; cursor: not-allowed; }

button.primary {
  --fill: linear-gradient(#ffdf97, #e0b357);
  background: var(--gold-hi);
  color: #14181d;
}
button.primary:hover:not(:disabled) {
  --fill: linear-gradient(#ffeab5, #eec473);
  background: #fff0c4;
  color: #14181d;
}
button.primary.big { padding: 13px 28px; font-size: 15px; letter-spacing: 2px; }
button.ghost { --fill: #101820; }

kbd {
  font: 600 10px var(--num);
  border: 1px solid rgba(0,0,0,0.3);
  border-radius: 0;
  padding: 1px 4px;
  margin-left: 4px;
  background: rgba(0,0,0,0.12);
}

/* ---------- layout ---------- */

/* Both split sizes are custom properties so the drag handle can write to them
   from JS without touching any other rule: --side-w is the sidebar column on a
   wide screen, --map-h the map's height once the layout stacks. */
#main {
  --side-w: 340px;
  --map-h: 58vh;
  display: grid;
  grid-template-columns: 1fr var(--side-w);
  min-height: 0;
}

#mapWrap { position: relative; min-width: 0; }
/* One finger scrolls the page, which is the only way past a map that fills a
   phone; two fingers pan and pinch the map, and the script handles those. */
#map { display: block; cursor: pointer; touch-action: pan-y; }
#map.dragging { cursor: grabbing; }

/* ---------- map controls ---------- */

.map-tools {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
button.maptool {
  --notch: 5px;
  --fill: rgba(11, 16, 22, 0.88);
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0;
}

/* The split handle. It sits on the map's trailing edge — the right one while
   the sidebar is a column, the bottom one once the layout stacks — and draws a
   short grip rather than a full rule so it never reads as a border. */
.map-handle {
  position: absolute;
  z-index: 4;
  top: 0;
  right: 0;
  bottom: 0;
  width: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: col-resize;
  touch-action: none;
}
.map-handle span {
  display: block;
  width: 2px;
  height: 34px;
  background: var(--edge);
  transition: background 0.12s;
}
.map-handle:hover span,
.map-handle:focus-visible span,
.map-handle.dragging span { background: var(--gold); }
.map-handle:focus-visible { outline: none; }

/* Faction colour arrives inline on the border, so this keeps a real one. */
.banner {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 18px;
  border: 1px solid var(--gold);
  border-radius: 0;
  background: rgba(8, 12, 17, 0.92);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55), 0 8px 24px rgba(0, 0, 0, 0.55);
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  pointer-events: none;
}

#sidebar {
  border-left: 1px solid var(--edge);
  /* Faint survey grid — the sidebar reads as the table the map is laid on. */
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.016) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.016) 0 1px, transparent 1px 46px),
    #0b1119;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.panel {
  padding: 13px 14px;
  border-bottom: 1px solid var(--edge-soft);
}
.panel h2 {
  margin: 0 0 7px;
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: 0.5px;
  color: #e9f0f7;
}
/* Section titles are cartouches: gold small caps over a cut rule. */
.panel h3 {
  margin: 0 0 9px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--edge-soft);
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
}
.muted { color: var(--dim); font-weight: 400; }
.hint { margin: 6px 0 0; color: #7c8b9d; font-size: 12px; line-height: 1.45; }

.facts { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.facts > div { display: flex; justify-content: space-between; gap: 8px; }
.facts dt {
  font-family: var(--display);
  color: var(--dim);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.facts dd {
  margin: 0;
  font-family: var(--num);
  font-weight: 700;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* ---------- garrison ---------- */

.unit-list { display: flex; flex-direction: column; gap: 4px; }

.unit {
  --notch: 6px;
  --fill: #131c25;
  display: grid;
  grid-template-columns: auto 1fr 46px;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  background: var(--edge-soft);
}
.unit.mine { cursor: pointer; }
.unit.mine:hover { background: #4d6076; }
.unit.picked { background: var(--gold); --fill: #1f2532; }
.unit.spent { opacity: 0.5; }
.unit b { font-family: var(--display); font-size: 13px; letter-spacing: 0.3px; }
.uinfo { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.uinfo small { color: #7c8b9d; font-size: 11px; font-variant-numeric: tabular-nums; }

/* Owner colour arrives inline on the border, so this keeps a real one — a
   square sigil tile against all the cut corners around it. */
.uglyph {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 1.5px solid #4d6076;
  border-radius: 0;
  font: 700 12px var(--num);
  background: #06090d;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.uhp { height: 5px; border-radius: 0; background: #06090d; overflow: hidden; }
.uhp i { display: block; height: 100%; }

.selection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 9px;
  font-size: 12px;
  color: #9fb0c2;
}
.selbtns { display: flex; gap: 5px; }
button.tiny { --notch: 4px; padding: 4px 9px; font-size: 10px; letter-spacing: 1.2px; }

/* Move / Attack is the long label and the primary order, so it takes the wider
   column. Small caps cost it ~45% of its width, and the sidebar's scrollbar
   takes 16px more whenever the recruit list is up, so the ratio and the type
   size below are both set to clear that worst case without wrapping. */
.order-bar { display: grid; grid-template-columns: 1.45fr 1fr 1fr; gap: 5px; margin-top: 8px; }
button.order { --notch: 5px; padding: 9px 4px; font-size: 10px; letter-spacing: 0.6px; }
button.order.active {
  --fill: linear-gradient(#2a2416, #1d1a11);
  background: var(--gold);
  color: var(--gold-hi);
}

/* ---------- forecast ---------- */

.forecast-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.forecast .side label, .forecast .odds label {
  display: block;
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--dim);
}
.forecast .side b {
  font-family: var(--num);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}
.forecast .att b { color: #ff9c86; }
.forecast .def b { color: #86c4ff; }
.forecast .odds b { font-family: var(--num); font-size: 24px; font-weight: 700; }

.fcbar {
  height: 6px;
  border-radius: 0;
  background: #06090d;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  overflow: hidden;
  margin-top: 9px;
}
.fcbar span { display: block; height: 100%; width: 0; background: #6fd98a; transition: width 0.12s; }

/* ---------- recruiting ---------- */

.recruit-list { display: flex; flex-direction: column; gap: 4px; }
.recruit {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 9px;
  text-align: left;
  padding: 7px 9px;
  text-transform: none;
  letter-spacing: 0;
}
.rinfo { display: flex; flex-direction: column; line-height: 1.25; }
.rinfo b { font-family: var(--display); font-size: 13px; letter-spacing: 0.3px; }
.rinfo small {
  font-family: ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif;
  color: #7c8b9d;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.rcost {
  font-family: var(--num);
  font-weight: 700;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.recruit.broke .rcost { color: #7c8b9d; }

/* ---------- expansion ---------- */

/* Expansion rows reuse the recruit row, with a gold hairline down the left so
   the two lists never read as one when both panels are open at a station. */
button.recruit.expand { box-shadow: inset 2px 0 0 rgba(232, 195, 90, 0.55); }
button.recruit.expand .uglyph { color: var(--gold); font-weight: 700; }
button.recruit.expand.broke { box-shadow: inset 2px 0 0 rgba(232, 195, 90, 0.2); }

/* ---------- log ---------- */

.log-panel { flex: 1; display: flex; flex-direction: column; min-height: 160px; border-bottom: none; }
.log {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  font-size: 12px;
  line-height: 1.4;
}
/* Dispatches are a ruled ledger: no bubbles, just ruled rows behind a colour
   tick for whichever faction filed the report. */
.logline {
  padding: 6px 9px;
  border-left: 3px solid var(--edge);
  border-bottom: 1px solid rgba(255, 255, 255, 0.035);
  border-radius: 0;
  background: transparent;
  color: #a9b7c6;
}
.logline.turn {
  background: rgba(255, 255, 255, 0.04);
  color: #e6edf4;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.6px;
}
.logline.good { color: #a8e6bc; }
.logline.bad  { color: #f0b0a6; }
.logline.win  {
  background: rgba(227, 188, 104, 0.14);
  color: var(--gold-hi);
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.6px;
}
.logline.system { color: #8ca0b6; font-family: var(--display); font-style: italic; }

/* ---------- overlay ---------- */

/* An author `display` beats the UA stylesheet's rule for [hidden], so every
   element toggled with .hidden needs this said explicitly. */
[hidden] { display: none !important; }

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 6, 9, 0.88);
  display: grid;
  place-items: center;
  padding: 24px;
  overflow-y: auto;
  z-index: 40;
}
.overlay-card {
  --notch: 16px;
  --fill: linear-gradient(#151f2a, #0d141c);
  width: min(880px, 100%);
  padding: 28px 30px;
  /* drop-shadow rather than box-shadow, so the shadow follows the cut corners
     instead of the untouched box. */
  filter: drop-shadow(0 20px 46px rgba(0, 0, 0, 0.65));
}
/* The printed inner rule of a plate. Left square inside the notched card on
   purpose — the two shapes reading against each other is the whole look. */
.overlay-card::after {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: -1;
  border: 1px solid rgba(227, 188, 104, 0.15);
  pointer-events: none;
}

.ovtitle {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 40px;
  letter-spacing: 6px;
  color: var(--gold);
  text-align: center;
  text-shadow: 0 2px 0 #000;
}
.ovtitle span { color: #6f8196; }
.ovtitle.small { font-size: 26px; letter-spacing: 3px; }
.ovlead { margin: 0 0 20px; text-align: center; color: #a9b8c8; line-height: 1.6; }
.ovsub { margin: -12px 0 20px; text-align: center; color: var(--dim); font-size: 12px; }
.ovwarn { margin: 12px 0 0; text-align: center; color: #f0b0a6; }
.ovbtns { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }

.ovback { margin: 16px 0 0; text-align: center; font-size: 12px; }
.ovback a {
  font-family: var(--display);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
}
.ovback a:hover, .ovback a:focus-visible { color: var(--gold); }

.setup { display: flex; flex-direction: column; gap: 7px; }
.setup-row {
  --notch: 8px;
  --fill: #141d27;
  display: grid;
  grid-template-columns: 16px 1fr 130px 120px;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  background: #253040;
}
.setup-row.off { opacity: 0.45; }
.swatch { width: 14px; height: 14px; border-radius: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5); }
.fname { font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: 0.4px; }

/* Form controls cannot carry a pseudo-element fill, so they stay square —
   which reads as the same drawing-board language next to the cut plates. */
select, input[type=text] {
  font: inherit;
  padding: 7px 9px;
  border-radius: 0;
  border: 1px solid var(--edge);
  background: #0a1017;
  color: var(--text);
  width: 100%;
}
select:focus-visible, input[type=text]:focus-visible {
  border-color: var(--gold);
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
select:disabled { opacity: 0.4; }

.setup-opts {
  display: flex;
  gap: 16px;
  margin-top: 14px;
  justify-content: center;
  align-items: center;
}
.setup-opts label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
}
.setup-opts input { width: 130px; }
.setup-opts select { width: 130px; }

/* ---------- codex ---------- */

.codex { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.codex th {
  text-align: left;
  padding: 7px 8px;
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--edge);
}
.codex td {
  padding: 9px 8px;
  border-bottom: 1px solid var(--edge-soft);
  vertical-align: top;
  font-family: var(--num);
  font-variant-numeric: tabular-nums;
}
.codex .uname {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.codex .ctr { color: var(--gold); white-space: nowrap; }
.codex .ublurb {
  font-family: ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif;
  color: #93a3b5;
  line-height: 1.45;
  min-width: 240px;
  font-variant-numeric: normal;
}

.codex-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 20px;
}
.codex-notes h4 {
  margin: 0 0 4px;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--gold);
}
.codex-notes p { margin: 0; font-size: 12.5px; line-height: 1.5; color: #a1b0c1; }
.codex-notes b { color: #dfe6ee; }

/* ---------- narrow screens ---------- */

@media (max-width: 900px) {
  body { overflow: auto; }
  #app { height: auto; min-height: 100%; }
  /* Stacked the two panes are rows, and they must hug their content: stretched
     to fill a tall viewport they leave a band of nothing between the map and
     the sidebar. */
  #main { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: start; }
  #mapWrap { height: var(--map-h); }
  /* The page itself is the scroller at this width. A second scroller nested
     inside it is a trap for a thumb, so the sidebar simply runs on and the
     dispatches get a ceiling instead of a pane of their own. */
  #sidebar {
    border-left: none;
    border-top: 1px solid var(--edge);
    overflow-y: visible;
  }
  .log-panel { flex: none; min-height: 0; }
  .log { max-height: 44vh; }

  /* Stacked, the handle moves to the map's bottom edge and resizes its height. */
  .map-handle {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: 14px;
    cursor: row-resize;
  }
  .map-handle span { width: 44px; height: 2px; }
  /* No physical keyboard at this size, and dropping the hint makes all three
     top-bar buttons exactly the same width. */
  .topbtns kbd { display: none; }
  /* Stats and buttons both keep their auto left margin here, so when the bar
     wraps the two rows end on the same right edge instead of one row hugging
     left and the other hugging right. */
  .codex { display: block; overflow-x: auto; }
}

/* ---------- how to play ---------- */

.guide-lead {
  margin: 0 auto 22px;
  max-width: 620px;
  text-align: center;
  color: #a9b8c8;
  line-height: 1.6;
}
.guide-lead b { color: var(--gold); }

.guide {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 18px;
}

.gsec {
  --notch: 10px;
  --fill: #141d27;
  padding: 15px 17px;
  background: #253040;
}
.gsec h4 {
  margin: 0 0 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--edge-soft);
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--gold);
}
.gsec p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.55; color: #a1b0c1; }
.gsec p:last-child { margin-bottom: 0; }
.gsec b { color: #dfe6ee; }

/* Numbered turn sequence. */
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 10px 30px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #a1b0c1;
}
.steps li:last-child { padding-bottom: 0; }
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -1px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 0;
  background: #06090d;
  box-shadow: inset 0 0 0 1px var(--edge);
  color: var(--gold);
  font: 700 11px var(--num);
}

/* Map legend — the same marks the canvas draws. */
.legend { display: flex; flex-direction: column; gap: 9px; }
.legend-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: #a1b0c1; }
.legend-row svg { flex: none; }
.legend-row b { color: #dfe6ee; }

.tri { display: block; margin: 0 auto; max-width: 100%; height: auto; }

.keys { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; font-size: 12.5px; color: #a1b0c1; }
.keys span { display: inline-flex; align-items: center; gap: 6px; }
.keys kbd {
  margin-left: 0;
  border-color: var(--edge);
  background: #0a1017;
  color: #cfdae6;
  font-size: 10px;
  padding: 2px 5px;
}

/* ---------- phones ---------- */

@media (max-width: 560px) {
  .overlay { padding: 14px; }
  .overlay-card { padding: 22px 18px; }

  /* Thumb-sized zoom controls, and the map keeps a floor so it never collapses
     to a sliver on a short phone. */
  #main { --map-h: 52vh; }
  .map-tools { top: 10px; right: 10px; gap: 8px; }
  button.maptool { width: 40px; height: 40px; font-size: 18px; }
  .map-handle { height: 18px; }

  /* Small caps run wider than the sentence case this bar used to hold, and a
     104px floor plus the 18px flex gap no longer leaves three labels room for
     one line each. Let them share the row evenly instead. */
  .topbtns { gap: 6px; width: 100%; }
  .topbtns button { min-width: 0; flex: 1; padding: 9px 6px; letter-spacing: 1px; }

  .ovtitle { font-size: 28px; letter-spacing: 3px; }
  .ovtitle.small { font-size: 21px; letter-spacing: 2px; }

  /* Four columns do not fit a phone. Name on its own line, the two dropdowns
     side by side beneath it, so every row is the same two-line block. */
  .setup-row { grid-template-columns: 14px 1fr 1fr; gap: 8px 10px; }
  .setup-row .fname { grid-column: 2 / -1; }
  .setup-row .role  { grid-column: 2; }
  .setup-row .diff  { grid-column: 3; }

  .setup-opts { flex-direction: column; align-items: stretch; gap: 10px; }
  .setup-opts label { justify-content: space-between; }
  .setup-opts input, .setup-opts select { width: 160px; }

  .ovbtns { flex-direction: column-reverse; }
  .ovbtns button { width: 100%; }
}