@import url('/tokens.css');

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { background: var(--paper); color: var(--ink); font: 14px/1.5 var(--f-ui); }
a { color: var(--ink); }
.muted { color: var(--ink-2); font-size: 12px; }
button { background: var(--ink); color: var(--sheet); border: 0; border-radius: 4px; padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer; }
button:disabled { opacity: 0.4; cursor: default; }
button:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
button.ghost { background: transparent; border: 1px solid var(--rule); color: var(--ink); font-weight: 500; }
input, select, textarea { width: 100%; background: var(--sheet-2); color: var(--ink); border: 1px solid var(--rule); border-radius: 4px; padding: 7px 9px; font: inherit; }
textarea { resize: vertical; }
label { display: block; margin: 10px 0; color: var(--ink-2); font-size: 12px; }
label > input, label > select, label > textarea { margin-top: 4px; font-size: 14px; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
pre { background: var(--sheet-2); border: 1px solid var(--rule); border-radius: 4px; padding: 8px; white-space: pre-wrap; word-break: break-all; margin: 4px 0 10px; }
.err { color: var(--bad); }
.gold { color: var(--gold); }

/* kingdom seal: the kingdom's character in brush script on its colour */
.kseal { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 3px; background: var(--c); color: var(--on-k); font: 17px/1 var(--f-brush); flex: none; }
.kseal.sm { width: 20px; height: 20px; font-size: 13px; }
.ico { width: 15px; height: 15px; vertical-align: -2px; color: var(--c, var(--ink-2)); }

/* lobby */
.lobby { display: flex; justify-content: center; padding: 40px 16px; height: auto; }
.lobby-card { width: 100%; max-width: 560px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 6px; padding: 24px 28px; }
.lobby h1 { margin: 0 0 4px; }
.sub { color: var(--ink-2); margin-top: 0; }
.row { display: flex; gap: 12px; }
.row > * { flex: 1; }
.lobby button[type=submit] { width: 100%; margin-top: 12px; padding: 11px; }
.lobby ul { padding-left: 18px; }

/* page frame */
body.king-page { display: grid; grid-template-rows: auto 1fr; height: 100vh; }
header.top { display: flex; align-items: center; gap: 6px 14px; padding: 4px 12px; border-bottom: 1px solid var(--rule); background: var(--sheet); flex-wrap: nowrap; min-width: 0; }
header.top > * { flex: none; }
header.top #whose { white-space: nowrap; }
header.top #title { white-space: nowrap; }
header.top h1 { font-size: 15px; margin: 0; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.seal-logo { width: 26px; height: 26px; background: var(--ink); color: var(--sheet); display: inline-grid; place-items: center; font: 12px/1 var(--f-brush); white-space: nowrap; border-radius: 3px; letter-spacing: -1px; flex: none; }
.badge { padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--sheet-2); border: 1px solid var(--rule); }
.badge.active { border-color: var(--good); color: var(--good); }
.badge.awaiting_directive { border-color: var(--warn); color: var(--warn); }
.badge.awaiting_dispatch { border-color: var(--gold); color: var(--gold); }
.badge.finished { color: var(--ink-2); }
.stat b { font-size: 15px; }
.monthbar { display: inline-block; width: 120px; height: 4px; background: var(--rule); border-radius: 2px; overflow: hidden; vertical-align: middle; margin-left: 8px; }
.monthbar i { display: block; height: 100%; background: var(--ink-2); }
.themebtn { font-size: 12.5px; font-weight: 600; color: var(--ink); background: var(--sheet-2); border: 1px solid var(--rule); border-radius: 4px; padding: 4px 10px; }
.layout { display: grid; grid-template-columns: 1fr 500px; min-height: 0; }
.mapwrap { position: relative; overflow: hidden; background: var(--paper); min-height: 0; }
canvas.hexmap { position: absolute; inset: 0; display: block; cursor: grab; }
canvas.hexmap:active { cursor: grabbing; }
.mapctl { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 4px; z-index: 2; }
.mapctl button { width: 34px; height: 30px; padding: 0; background: var(--sheet); border: 1px solid var(--rule); color: var(--ink); font-weight: 600; font-size: 14px; border-radius: 4px; }
.mapctl button[data-a=coords] { font-size: 10px; }
.mapctl button.on { background: var(--ink); color: var(--sheet); }
#tip { position: fixed; pointer-events: none; background: var(--sheet); color: var(--ink); border: 1px solid var(--rule); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); padding: 6px 9px; border-radius: 4px; font-size: 12.5px; display: none; max-width: 280px; z-index: 5; }
.legend { position: absolute; left: 10px; right: 56px; bottom: 8px; display: flex; gap: 4px 12px; flex-wrap: wrap; align-items: flex-end; color: var(--ink); font-size: 11.5px; pointer-events: none; z-index: 2; }
.legtoggle { pointer-events: auto; background: color-mix(in srgb, var(--sheet) 90%, transparent); color: var(--ink-2); border: 1px solid var(--rule); padding: 2px 9px; font-size: 11.5px; font-weight: 600; }
.legitems { display: flex; gap: 4px 12px; flex-wrap: wrap; align-items: center; }
.legitems > span { display: inline-flex; align-items: center; gap: 4px; background: color-mix(in srgb, var(--sheet) 85%, transparent); padding: 1px 6px; border-radius: 3px; }
.legend > span { display: inline-flex; align-items: center; gap: 4px; background: color-mix(in srgb, var(--sheet) 85%, transparent); padding: 1px 6px; border-radius: 3px; }
.legend .sw { width: 11px; height: 11px; border-radius: 2px; background: var(--c); border: 1px solid var(--rule); }
.legend .ico { width: 13px; height: 13px; }
.legend .credit { color: var(--ink-2); }
.nomap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ink-2); padding: 30px; text-align: center; }
aside { border-left: 1px solid var(--rule); background: var(--sheet); display: flex; flex-direction: column; min-height: 0; }
.order { padding: 10px 14px; border-bottom: 1px solid var(--rule); }
.order .actions { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.order .actions select, .order .actions input { width: auto; }
.tabs { display: flex; border-bottom: 1px solid var(--rule); padding: 0 6px; }
.tabs button { flex: 1; background: none; border-radius: 0; color: var(--ink-2); font-weight: 600; padding: 9px 4px 7px; border-bottom: 2px solid transparent; }
.tabs button.on { color: var(--ink); border-bottom-color: var(--ink); }
.tabpane { flex: 1; overflow: auto; padding: 10px 14px; min-height: 0; }
.msg { border-radius: 4px; padding: 8px 10px; margin: 8px 0; border: 1px solid var(--rule); white-space: pre-wrap; background: var(--sheet-2); }
.msg.kingmsg { border-left: 3px solid var(--gold); }
.msg.agent { border-left: 3px solid var(--good); }
.msg.agent.interim { opacity: 0.85; }
.msg .meta { font-size: 11px; color: var(--ink-2); margin-bottom: 3px; font-weight: 600; letter-spacing: 0.02em; }
.ev { font-size: 12px; padding: 2px 0; border-bottom: 1px dashed var(--rule); }
.ev.l2 { color: var(--bad); }
.ev.l0 { color: var(--ink-2); }
.ev .t { color: var(--ink-2); display: inline-block; width: 34px; }
.act { font-size: 12px; padding: 3px 0; border-bottom: 1px dashed var(--rule); }
.act.bad { color: var(--bad); }
.act code { color: var(--ink-2); }
.gameover { background: var(--sheet-2); border: 1px solid var(--gold); padding: 8px 10px; border-radius: 4px; margin-bottom: 8px; font-size: 12.5px; }

/* rooms, scoreboard */
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.tag { font-size: 11px; padding: 1px 6px; border-radius: 99px; background: var(--sheet-2); border: 1px solid var(--rule); color: var(--ink-2); }
.tag.open { color: var(--warn); border-color: var(--warn); }
.tag.live { color: var(--good); border-color: var(--good); }
.tag.dead { color: var(--bad); border-color: var(--bad); }
/* scoreboard toggle: table or trend charts */
.sbtabs { display: flex; gap: 4px; margin-bottom: 6px; }
.sbtabs button { background: none; color: var(--ink-2); border: 1px solid var(--rule); border-radius: 99px; padding: 2px 12px; font-size: 12px; font-weight: 600; }
.sbtabs button.on { color: var(--ink); border-color: var(--ink); }
.trends { display: grid; gap: 6px; }
.tlegend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--ink); }
.tlegend i { display: inline-block; width: 14px; height: 2px; vertical-align: middle; margin-right: 5px; border-radius: 1px; }
.treadout table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.treadout th { text-align: left; color: var(--ink-2); font-weight: 600; font-size: 11px; padding: 1px 3px; }
.treadout td { padding: 2px 3px; border-top: 1px solid var(--rule); }
.treadout .num { text-align: right; }
.treadout small { color: var(--ink-2); }
.tchart { margin: 0; }
.tchart figcaption { font-size: 11px; font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.05em; }
.tchart svg { width: 100%; height: auto; display: block; touch-action: pan-y; }
.tgrid { stroke: var(--rule); stroke-width: 1; }
.tylab, .txlab { font-size: 9px; fill: var(--ink-2); text-anchor: end; font-variant-numeric: tabular-nums; }
.txlab { text-anchor: start; }
.txlab.end { text-anchor: end; }
.tline { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tend { font-size: 9.5px; fill: var(--ink); }
.tcross { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 2 2; }
.thit { fill: transparent; cursor: crosshair; }
.scoreboard table, table.rooms { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.scoreboard th { text-align: left; color: var(--ink-2); font-weight: 600; font-size: 11px; padding: 2px 4px; }
.scoreboard td, table.rooms td { padding: 4px; border-top: 1px solid var(--rule); }
.scoreboard .num { text-align: right; }
.scoreboard tr.active td { background: var(--sheet-2); }
.scoreboard tr.dead td { opacity: 0.5; }
.turnmark { color: var(--good); font-size: 11px; }
.lobby-room { overflow: auto; padding: 30px 16px; display: flex; justify-content: center; }
.lobby-room .lobby-card { max-width: 720px; }
.lobby-room button { margin-right: 8px; }
.lobby h2 { font-size: 16px; margin: 18px 0 4px; }
.check { display: flex; gap: 8px; align-items: center; color: var(--ink); font-size: 13px; }
.check input { width: auto; margin: 0; }
.mylink { background: var(--ink); color: var(--sheet); padding: 4px 10px; border-radius: 4px; text-decoration: none; font-weight: 600; font-size: 13px; }

/* phones & narrow screens: map on top, panel below, page scrolls */
@media (max-width: 900px) {
  body.king-page { height: auto; min-height: 100vh; display: block; }
  .layout { display: flex; flex-direction: column; }
  .mapwrap, .layout .mapcol .mapwrap { height: 92vh; height: 92svh; min-height: 420px; flex: none; }
  aside { border-left: none; border-top: 1px solid var(--rule); }
  .tabpane { max-height: none; overflow: visible; }
  header.top { gap: 6px 12px; padding: 6px 10px; flex-wrap: wrap; }
  header.top h1 { font-size: 14px; width: 100%; }
  .legend { display: none; }
  canvas.hexmap { touch-action: none; }
  html, body { overflow-x: hidden; max-width: 100vw; }
  .layout, .layout > *, aside, .order, .tabpane { min-width: 0; max-width: 100vw; box-sizing: border-box; }
  .mapwrap, .mapcol { width: 100vw; }
  .scoreboard { overflow-x: auto; }
  .scoreboard table { font-size: 12px; }
  .scoreboard td, .scoreboard th { padding: 3px 3px; white-space: nowrap; }
  .tag { font-size: 10px; padding: 0 4px; }
  #share, header.top a.muted[href="/"] { display: none; }
}

/* kingdom table: seat count is the score */
.ktable2 { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; table-layout: fixed; }
.ktable2 td, .ktable2 th { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kname > div { min-width: 0; }
.ktable2 th { text-align: right; color: var(--ink-2); font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; padding: 0 4px 5px; }
.ktable2 th:first-child { text-align: left; }
.ktable2 td { padding: 6px 4px; border-top: 1px solid var(--rule); text-align: right; vertical-align: top; }
.ktable2 td.kcell { vertical-align: middle; }
.ktable2 td.kcell { text-align: left; }
.kname { display: flex; align-items: center; gap: 9px; min-width: 0; }
/* the kingdom column is the narrow one in the sidebar: its name and player wrap to a second line rather than being cut */
.ktable2 td.kcell { white-space: normal; }
.kname b { display: block; font-weight: 700; font-size: 14px; line-height: 1.2; white-space: normal; overflow-wrap: break-word; }
.kname small { display: block; color: var(--ink); opacity: 0.8; font-size: 12px; line-height: 1.25; white-space: normal; overflow-wrap: break-word; }
.ktable2 tr.active td { background: var(--sheet-2); }
.ktable2 tr.dead td { opacity: 0.45; }
.ktable2 .warn { color: var(--bad); font-weight: 600; }
.seats b { font-size: 15px; }
.pips { display: inline-flex; gap: 3px; vertical-align: middle; margin-left: 5px; }
.pips i { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--gold); }
.pips i.on { background: var(--gold); }
.kcrown { color: var(--gold); font-size: 11px; font-weight: 700; white-space: normal; }
.kscore { display: block; color: var(--muted); font-size: 10.5px; font-weight: 600; white-space: nowrap; }
@media (max-width: 900px) {
  /* phones: names and the countdown wrap instead of being cut off */
  .kname b, .kname small { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
}
@media (max-width: 600px) {
  /* phones: four or five columns fit as a table; the seal steps aside so the name and player keep their room */
  .ktable2 .kname .kseal { display: none; }
  .ktable2 .kname b, .ktable2 .kname small { overflow-wrap: anywhere; }
}
.hegnote { margin-top: 7px; font-size: 12px; color: var(--ink-2); line-height: 1.45; }
.hegnote b { color: var(--ink); }

/* feed filter (country chips) */
.feedfilter { display: flex; gap: 5px; flex-wrap: wrap; padding: 6px 12px; border-bottom: 1px solid var(--rule); }
.fchip, .mvchip { background: var(--sheet); border: 1px solid var(--rule); color: var(--ink); border-radius: 4px; padding: 2px 9px; font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.fchip.on, .mvchip.on { background: var(--sheet-2); border-color: var(--ink-2); font-weight: 700; }
.fchip .g, .mvchip .g { font: 13px/1 var(--f-brush); color: var(--c); }

/* events: turning points, each with a seal */
.hmonth { display: flex; align-items: baseline; gap: 8px; color: var(--ink); font-weight: 700; font-size: 12.5px; margin: 12px 0 5px; border-bottom: 1px solid var(--rule); padding-bottom: 2px; }
.hl { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 9px; align-items: start; font-size: 13.5px; padding: 3px 0; line-height: 1.45; }
.seal { width: 26px; height: 26px; border-radius: 3px; background: var(--c, var(--ink-2)); color: var(--on-k); display: grid; place-items: center; font: 16px/1 var(--f-brush); }
.hl-capture, .hl-fall, .hl-hegemony, .hl-end, .hl-revolt, .hl-tribute { font-weight: 700; }
.hl-found, .hl-camp { color: var(--ink-2); }

/* council: each kingdom's month — plan, reports, orders */
.council { padding: 7px 0 9px; border-bottom: 1px dashed var(--rule); display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 9px; align-items: start; }
.council > .kseal { margin-top: 2px; }
.cbody { display: grid; gap: 5px; min-width: 0; }
.cthink { font-size: 14px; line-height: 1.55; margin: 0; }
.cgoal { font-size: 13.5px; padding: 5px 9px; border-left: 3px solid var(--gold); background: var(--sheet-2); border-radius: 3px; }
.cgoal .lbl, .creport .lbl, .cplan .lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); margin-right: 4px; }
.corders { margin: 2px 0 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--ink-2); display: grid; gap: 2px; }
.corders li::before { content: '›'; margin-right: 6px; color: var(--c); font-weight: 700; }
.creport { margin: 2px 0; font-size: 13px; border-left: 2px solid var(--ink-2); padding-left: 7px; }
.cplans { display: grid; gap: 6px; margin: 0 0 8px; }
.cplan { border-left: 3px solid var(--c); padding: 6px 9px; background: var(--sheet-2); border-radius: 3px; font-size: 13.5px; }
.cplan b { color: var(--c); }
.cplan div { margin-top: 2px; }
.council-more { display: block; margin: 10px auto; background: var(--sheet); border: 1px solid var(--rule); color: var(--ink); border-radius: 4px; padding: 5px 14px; font-size: 12px; cursor: pointer; }
.council-more:hover { border-color: var(--ink-2); }

/* map view selector (all, or one kingdom's fog of war) */
.mapcol { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.mapcol .mapwrap { flex: 1; }
/* the map-view lens sits in its own strip above the map, not over it */
/* whose eyes the map is drawn through: a small control on the map itself (not during a broadcast, which sees everything) */
.mapview { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; max-width: calc(100% - 70px); background: color-mix(in srgb, var(--sheet) 90%, transparent); border: 1px solid var(--rule); border-radius: 6px; padding: 4px 8px; font-size: 11.5px; }
.mapview:empty, body.broadcasting .mapview { display: none; }
/* whose turn it is: always its own line under the header, one line tall even when empty, so the page never jumps */
header.top #whose { font-size: 13px; color: var(--ink-2); }
@media (max-width: 900px) {
  header.top #whose { order: 10; flex-basis: 100%; min-height: 1.4em; line-height: 1.4em; overflow: hidden; text-overflow: ellipsis; }
}
.kcities { color: var(--ink-2); font-weight: 400; font-size: 11px; }

/* battle card: who attacked whom, then one row per force with its losses */
.battle { border: 1px solid var(--rule); background: var(--sheet-2); border-radius: 4px; padding: 8px 10px; margin: 6px 0; display: grid; gap: 7px; }
.bhead { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.bunit { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; background: var(--c); }
.bico { width: 16px; height: 16px; color: var(--on-k); }
.brow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px; font-size: 13px; }
.btroop { color: var(--ink-2); min-width: 0; }
.bgen { color: var(--ink); font-weight: 600; }
.bnums { font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
.blost { color: var(--bad); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 4.5em; text-align: right; }
.bhead .seal { width: 22px; height: 22px; font-size: 14px; }
.bnote { font-size: 12px; color: var(--ink-2); }
/* diplomacy card: war and peace between two kingdoms */
.dcard { border: 1px solid var(--rule); border-left: 3px solid var(--dc, var(--ink-2)); background: var(--sheet-2); border-radius: 4px; padding: 8px 10px; margin: 6px 0; display: grid; gap: 6px; font-size: 13px; }
.dcard.d-war { --dc: var(--bad); }
.dcard.d-peace { --dc: var(--good); }
.dcard.d-offer { --dc: var(--warn); }
.dhead { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.dtag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dc, var(--ink-2)); margin-right: 2px; }
.dwho { display: inline-flex; align-items: center; gap: 5px; }
.dverb { color: var(--ink-2); }
.dmonth { margin-left: auto; font-size: 12px; }
/* production: one compact row per city — name, net output, queued items as icon chips with ready time */
.production { max-height: 60vh; overflow-y: auto; }
.pking { margin: 2px 0 10px; }
.pkhead { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 2px; }
.pkhead .muted { margin-left: auto; font-size: 11.5px; }
.prow { display: grid; grid-template-columns: minmax(0, 7.5em) 2.6em minmax(0, 1fr); align-items: center; gap: 6px; padding: 2px 4px; border-top: 1px solid var(--rule); font-size: 12px; }
.pname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pnet { color: var(--ink-2); font-variant-numeric: tabular-nums; text-align: right; }
.pq { display: flex; flex-wrap: wrap; gap: 3px; }
.pchip { display: inline-flex; align-items: center; gap: 2px; padding: 0 5px 0 3px; border-radius: 3px; background: var(--sheet-2); border: 1px solid var(--rule); font-variant-numeric: tabular-nums; line-height: 18px; }
.pchip.bld { padding-left: 5px; }
.pchip i { font-style: normal; color: var(--ink-2); margin-left: 3px; }
.pico { width: 14px; height: 14px; color: var(--c); }
.dquote { font-style: italic; color: var(--ink-2); line-height: 1.5; padding-left: 8px; border-left: 2px solid var(--rule); }

/* replay: month stepper in the header */
/* the transport, under the map: live -> replay -> broadcast, like a video player's bar */
.transport { display: flex; align-items: center; gap: 8px 12px; padding: 6px 12px; border-top: 1px solid var(--rule); background: var(--sheet); font-size: 13px; min-height: 40px; flex-wrap: wrap; }
.transport:empty { display: none; }
.transport .tgroup { display: inline-flex; gap: 4px; align-items: center; }
.transport .tstatus { color: var(--ink-2); font-size: 12.5px; flex: 1 1 auto; min-width: 0; }
.transport .tstatus.waiting { color: var(--ink); font-weight: 600; }
.transport input[type=range] { flex: 1 1 200px; min-width: 120px; accent-color: var(--gold); }
.rpbtn[disabled] { opacity: .55; cursor: default; }
/* one side's part of the month, during a step-by-step month */
.stepbar { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 120px); background: color-mix(in srgb, var(--sheet) 94%, transparent); border: 1px solid var(--rule); border-radius: 8px; padding: 5px 10px; box-shadow: 0 3px 12px rgb(0 0 0 / .15); font-size: 14px; }
.stepbar[hidden] { display: none; }
.stepchip { flex: none; font-weight: 700; font-size: 12px; letter-spacing: .03em; padding: 2px 8px; border-radius: 4px; background: var(--c, #888); color: #fff; }
.steptext { color: var(--ink); line-height: 1.3; }
.steptext:empty { display: none; }
@media (max-width: 700px) { .stepbar { font-size: 12.5px; max-width: calc(100% - 60px); } }
.rpbtn { font: inherit; font-size: 13px; padding: 2px 8px; border: 1px solid var(--line, #8886); border-radius: 6px; background: var(--sheet); color: var(--ink); cursor: pointer; }
.rpbtn:hover { border-color: var(--ink-2); }

.rpmonth { min-width: 40px; text-align: center; font-variant-numeric: tabular-nums; }


/* live commentary */
.commentbar { border-bottom: 1px solid var(--rule); padding: 8px 14px 6px; background: var(--paper); }
.cmhead { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.cmhead b { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); margin-right: auto; }
.cmbtn { background: none; border: 1px solid var(--rule); color: var(--ink-2); font-size: 12px; padding: 2px 8px; border-radius: 4px; }
.cmbtn[aria-pressed="true"], .cmbtn[aria-expanded="true"] { color: var(--ink); border-color: var(--ink-2); }
.cmlines p, .cmfeed p, .cmrecap p { margin: 2px 0; line-height: 1.4; }
.cmlines p { color: var(--ink-2); font-size: 13px; }
.cmlines p:last-child { color: var(--ink); font-size: 15px; }
.cmm { display: inline-block; min-width: 38px; font-size: 11px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cmrecap, .cmbox { border: 1px solid var(--rule); border-radius: 6px; padding: 6px 10px; margin: 6px 0; font-size: 13px; }
.cmrecap small, .cmbox small { color: var(--ink-2); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.cmfeed p { font-size: 13px; }

/* broadcast captions, over the map */
.bclower { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(820px, calc(100% - 24px)); background: color-mix(in srgb, var(--sheet) 94%, transparent); border: 1px solid var(--rule); border-radius: 8px; padding: 8px 14px 10px; box-shadow: 0 4px 18px rgb(0 0 0 / .18); z-index: 3; }
.bclower[hidden] { display: none; }
.bclower p { margin: 2px 0 0; font-size: 18px; line-height: 1.35; color: var(--ink); }
.bcwho { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 1px 7px; border-radius: 4px; color: var(--on-k); }
.bcwho.pbp { background: var(--gold); }
.bcwho.analyst { background: var(--good); }
@media (max-width: 700px) { .bclower p { font-size: 15px; } }



/* the click that starts a broadcast (and lets the browser play sound) */
.bcstart { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; background: color-mix(in srgb, var(--paper) 45%, transparent); z-index: 4; }
.bcstart[hidden] { display: none; }
.bcstart button { font-size: 18px; font-weight: 700; padding: 12px 26px; border-radius: 8px; border: 0; background: var(--gold); color: var(--on-k); cursor: pointer; }
.bcstart small { color: var(--ink); background: color-mix(in srgb, var(--sheet) 85%, transparent); padding: 2px 8px; border-radius: 4px; }

/* Vietnamese column headers are longer: let them wrap */
.ktable2.vi th { white-space: normal; font-size: 10px; line-height: 1.15; letter-spacing: .02em; overflow: visible; text-overflow: clip; }

/* broadcast on a phone: the header wraps, its links step aside, and the caption
   stays pinned to the bottom of the screen (the map can be taller than the screen) */
@media (max-width: 700px) {
  .top { flex-wrap: wrap; row-gap: 6px; }
  body.broadcasting .top .mylink, body.broadcasting .top #share { display: none; }
  .bclower { position: fixed; left: 8px; right: 8px; bottom: 8px; width: auto; transform: none; padding: 6px 10px 8px; }
  .bclower p { font-size: 15px; }
  .bcstart button { font-size: 16px; padding: 11px 20px; }
}

/* the map's foot: whose eyes (map view) and the legend, side by side in one row */
.mapfoot { position: absolute; left: 10px; right: 56px; bottom: 8px; z-index: 2; display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; pointer-events: none; }
.mapfoot > .mapview { pointer-events: auto; }
.mapfoot > .legend { position: static; flex: 1 1 0; min-width: 0; }

/* the kingdom table's turn column: thinking (ticking) or orders in, the average month below */
.kturncell { font-variant-numeric: tabular-nums; font-size: 12px; white-space: nowrap; }
.kturncell small { display: block; color: var(--ink-2); font-size: 10.5px; }
.kturncell .kstate.on { color: var(--ink); font-weight: 600; }
/* the rule book (the Rules tab beside the table) */
.rulesbook { padding: 4px 2px; font-size: 13px; }
.rulesbook h3 { margin: 6px 0 4px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.rulesbook .hegnote { margin: 0 0 10px; }
.rulesbook details summary { cursor: pointer; font-weight: 600; margin: 6px 0; }
.rulesbook pre { white-space: pre-wrap; font: 11.5px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; max-height: 60vh; overflow: auto; background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; padding: 8px 10px; color: var(--ink); }

/* phones: the month's step caption covers the map, and the map-view chooser and legend take three rows: on a small
   screen the caption is left out and the chooser is one compact row (kingdom glyphs and short names, scrolling sideways) */
@media (max-width: 700px) {
  .stepbar { display: none !important; }
  .mapfoot { left: 6px; right: 48px; bottom: 6px; flex-wrap: nowrap; gap: 6px; }
  .mapview { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding: 2px 4px; gap: 3px; font-size: 11px; scrollbar-width: none; }
  .mapview::-webkit-scrollbar { display: none; }
  .mapview > .muted { display: none; }
  .mapview .mvchip { white-space: nowrap; padding: 2px 6px; flex: none; }
  .mapfoot > .legend { flex: none; }
}

/* the kingdom table: the highest number in each column (among the living) stands out */
.ktable2 td.top { font-weight: 800; color: var(--gold); }
.ktable2 td.top.warn { color: var(--bad); }
.ktable2 .ksub { display: block; font-size: 10px; font-weight: 500; line-height: 1.1; color: var(--ink-2); }
.ktable2 .klead { display: block; font-size: 10px; font-weight: 600; line-height: 1.1; color: var(--gold); opacity: 0.85; }