/* The table this is played on. Two inks carry the whole design and both of
   them are semantic rather than decorative: field grey-green is the German
   command, oxide red is the Soviet one, and nothing else on the page is
   allowed to use either. Everything typed on the slip is monospaced, because
   an umpire's slip is typed. */
:root {
  --table:   #23211d;
  --table-2: #2b2823;
  --rule:    #3d3931;
  --card:    #d5cdb6;
  --slip:    #e9e3cf;
  --slip-2:  #ded7c0;
  --ink:     #1b1a17;
  --ink-2:   #4a463b;
  --pencil:  #8e8878;
  --feld:    #5f6b57;
  --feld-lt: #8fa084;
  --oxide:   #a03e2c;
  --oxide-lt:#cf7059;
  --stamp:   #96301f;
  --mono: ui-monospace, "DejaVu Sans Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --sans: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  background: var(--table);
  color: #ddd6c4;
  font-family: var(--sans);
  -webkit-text-size-adjust: 100%;
}
body { overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, .action:focus-visible { outline: 2px solid var(--feld-lt); outline-offset: 2px; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }

/* ------------------------------------------------------------ title screen */
#title-screen {
  position: absolute; inset: 0; overflow-y: auto;
  padding: 30px 20px 60px;
  background:
    radial-gradient(120% 80% at 50% -10%, #302c25 0%, var(--table) 60%);
}
.masthead { max-width: 780px; margin: 0 auto 26px; }
.masthead .eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .32em;
  text-transform: uppercase; color: var(--pencil); margin: 0 0 10px;
}
.masthead h1 {
  font-family: var(--serif); font-size: clamp(38px, 8vw, 62px);
  line-height: .95; letter-spacing: -.015em; color: #f0e9d5;
}
.masthead .sub {
  font-family: var(--serif); font-style: italic;
  color: #a9a290; margin: 10px 0 0; font-size: 17px;
}
.masthead hr { border: 0; border-top: 1px solid var(--rule); margin: 22px 0 0; }

#action-list { max-width: 780px; margin: 0 auto; display: grid; gap: 12px; }
.action {
  display: block; width: 100%; text-align: left;
  background: var(--table-2); border: 1px solid var(--rule);
  border-left: 4px solid var(--feld);
  padding: 16px 18px; border-radius: 2px;
  transition: border-color .15s, transform .15s, background .15s;
}
.action:hover { background: #322e27; border-left-color: var(--oxide); transform: translateX(2px); }
.action h3 { font-family: var(--serif); font-size: 23px; color: #f0e9d5; }
.action-meta {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  color: var(--pencil); margin: 5px 0 8px; text-transform: lowercase;
}
.action-blurb { margin: 0; font-size: 14px; line-height: 1.5; color: #b6ae9b; max-width: 62ch; }

#resume, #btn-restart {
  display: block; max-width: 780px; margin: 0 auto 14px; width: 100%;
  background: #3a4436; border: 1px solid var(--feld); color: #dfe6d8;
  padding: 12px; border-radius: 2px; font-family: var(--mono); font-size: 13px;
}
#briefing {
  max-width: 780px; margin: 18px auto 0;
  border: 1px solid var(--rule); background: var(--table-2);
}
#briefing > summary {
  cursor: pointer; padding: 12px 16px; list-style: none;
  font-family: var(--mono); font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--pencil);
}
#briefing > summary::-webkit-details-marker { display: none; }
#briefing > summary::after { content: ' \002b'; float: right; }
#briefing[open] > summary::after { content: ' \2212'; }
#briefing > summary:hover { color: #ddd6c4; }
.briefing-body { padding: 0 18px 18px; border-top: 1px solid var(--rule); }
.briefing-body h4 {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--feld-lt); margin: 16px 0 6px;
}
.briefing-body p { margin: 0; font-size: 14px; line-height: 1.6; color: #b6ae9b; max-width: 66ch; }
.briefing-body em { color: #d6cfbc; font-style: italic; }

#storage-note {
  max-width: 780px; margin: 14px auto 0; font-size: 12px; color: var(--pencil);
  font-family: var(--mono); border-top: 1px dashed var(--rule); padding-top: 10px;
}

#side-choice {
  max-width: 780px; margin: 22px auto 0; padding: 18px;
  background: var(--table-2); border: 1px solid var(--rule);
}
#side-question { margin: 0 0 12px; font-family: var(--serif); font-size: 18px; color: #ece5d1; }
#side-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.side-btn {
  flex: 1 1 160px; padding: 14px; border-radius: 2px; text-align: left;
  background: #2f2c26; border: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 3px;
}
.side-btn strong { font-size: 17px; }
.side-btn span { font-family: var(--mono); font-size: 11px; color: var(--pencil); }
.side-btn.side-g { border-left: 4px solid var(--feld); }
.side-btn.side-s { border-left: 4px solid var(--oxide); }
.side-btn:hover { background: #383429; }
.opp-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--pencil); margin: 16px 0 8px;
}
#opponent-buttons { display: flex; gap: 8px; }
.temper-btn {
  flex: 1; padding: 9px; background: #2f2c26; border: 1px solid var(--rule);
  font-family: var(--mono); font-size: 12px; border-radius: 2px;
}
.temper-btn.on { background: var(--feld); border-color: var(--feld-lt); color: #f2f6ee; }

/* ------------------------------------------------------------------ table */
#table { position: absolute; inset: 0; display: flex; flex-direction: column; }

header#bar {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 12px; border-bottom: 1px solid var(--rule);
  background: var(--table-2); flex: 0 0 auto;
}
#action-name { font-family: var(--serif); font-size: 18px; color: #f0e9d5; white-space: nowrap; }
.bar-mid { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.bar-line { display: flex; gap: 10px; align-items: baseline; }
#turn-label { font-family: var(--mono); font-size: 12px; color: var(--pencil); }
#phase-label { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #e4dcc6; }
.hand { font-family: var(--mono); font-size: 11px; padding: 1px 7px; border-radius: 2px; white-space: nowrap; }
.hand.ours { background: #3c4736; color: #cfe0c4; }
.hand.theirs { background: #4a2b23; color: #e6b8a8; }
.bar-btn { background: none; border: 1px solid var(--rule); padding: 6px 10px; border-radius: 2px; font-size: 12px; font-family: var(--mono); }
.bar-btn:hover { background: #35312a; }

.scores { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; }
.scores b { font-size: 15px; font-weight: 600; }
#score-bar {
  width: 96px; height: 8px; background: #191713; border: 1px solid var(--rule);
  position: relative; overflow: hidden;
}
#score-bar::before, #score-bar::after {
  content: ''; position: absolute; left: 0; height: 3px;
}
#score-bar::before { top: 0; width: var(--mine, 2%); background: var(--feld-lt); }
#score-bar::after { bottom: 0; width: var(--theirs, 2%); background: var(--oxide-lt); }

/* --------------------------------------------------------------- the board */
/* Absolutely positioned canvas inside a clipped box: the canvas is sized in
   device pixels and must never be allowed to push the panel below it around. */
#main { flex: 1 1 auto; display: flex; min-height: 0; }
#board {
  position: relative; overflow: hidden; flex: 1 1 auto; min-width: 0;
  background: #191713;
  touch-action: none;
}
#board-canvas { position: absolute; left: 0; top: 0; display: block; }
#zoom {
  position: absolute; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 5px;
}
#zoom button {
  width: 34px; height: 34px; border-radius: 2px; font-size: 15px;
  background: rgba(30,28,23,.86); border: 1px solid var(--rule); color: #ddd6c4;
  display: flex; align-items: center; justify-content: center;
}
/* the counter picked up off the board, and the printed hex under it */
#hovercard {
  position: absolute; z-index: 6; pointer-events: none;
  width: 268px; max-width: calc(100% - 16px);
  background: var(--slip); color: var(--ink);
  font-family: var(--mono); font-size: 11.5px; line-height: 1.45;
  padding: 9px 11px 10px;
  box-shadow: 0 2px 0 rgba(0,0,0,.4), 0 12px 26px rgba(0,0,0,.42);
}
#hovercard.sticky { outline: 2px solid var(--stamp); outline-offset: -2px; }
.hc-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  border-bottom: 1.5px solid var(--ink); padding-bottom: 4px; margin-bottom: 5px;
}
.hc-ground { font-weight: 700; }
.hc-hex { color: var(--ink-2); font-size: 10.5px; }
.hc-facts { margin: 0; color: var(--ink-2); font-size: 10.5px; }
.hc-obj {
  margin: 5px 0 0; font-size: 10.5px; color: var(--stamp); font-weight: 700;
  border-top: 1px dotted rgba(27,26,23,.3); padding-top: 4px;
}
.hc-unit {
  margin-top: 7px; padding: 5px 0 0 8px;
  border-top: 1px solid rgba(27,26,23,.22); border-left: 3px solid var(--pencil);
}
.hc-unit.side-g { border-left-color: var(--feld); }
.hc-unit.side-s { border-left-color: var(--oxide); }
.hc-name { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.hc-name strong { font-size: 12px; }
.hc-side { font-size: 10px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .1em; }
.hc-nums, .hc-sw, .hc-state, .hc-cmd { margin: 3px 0 0; font-size: 10.5px; color: var(--ink-2); }
.hc-sw { color: #4d3f1c; }
.hc-state { color: var(--stamp); }
.hc-cmd { color: #2f5a34; }
.hc-rel {
  margin: 7px 0 0; padding-top: 5px; font-size: 10.5px;
  border-top: 1.5px solid var(--ink); color: #2f5a34;
}
.hc-rel.shut { color: var(--stamp); }

#umpire-note {
  position: absolute; left: 10px; right: 56px; bottom: 10px;
  background: rgba(24,22,18,.88); border-left: 3px solid var(--feld-lt);
  padding: 8px 11px; font-size: 13px; line-height: 1.4; color: #e0d9c6;
  pointer-events: none; opacity: 0;
}
#umpire-note.flash { animation: note 6s ease forwards; }
@keyframes note { 0% { opacity: 0; transform: translateY(6px); } 8% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }

/* ---------------------------------------------------------------- the desk */
#desk {
  flex: 0 0 372px; display: flex; flex-direction: column; min-height: 0;
  border-left: 1px solid var(--rule); background: var(--table-2);
}
.desk-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; }

/* --------------------------------------------------------------- the slip */
/* the signature: a carbon form, torn off a pad, filled in before the order to
   fire is given and stamped when it is */
#slip {
  background: var(--slip); color: var(--ink);
  padding: 14px 14px 12px; position: relative;
  font-family: var(--mono); font-size: 12px;
  box-shadow: 0 2px 0 rgba(0,0,0,.35), 0 10px 22px rgba(0,0,0,.28);
}
#slip::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: repeating-linear-gradient(90deg,
    var(--table-2) 0 3px, transparent 3px 8px);
}
#slip.pending { background: var(--slip-2); }
.slip-empty { margin: 0; color: var(--ink-2); font-size: 12px; line-height: 1.55; }
.slip-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  border-bottom: 2px solid var(--ink); padding-bottom: 6px; margin-bottom: 8px;
}
.slip-no {
  font-weight: 700; letter-spacing: .14em; color: var(--stamp);
  border: 2px solid var(--stamp); padding: 1px 6px; transform: rotate(-2.5deg);
  font-size: 11px;
}
.slip-where { color: var(--ink-2); font-size: 11px; text-align: right; }

.slip-lines, .slip-drm { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.slip-lines td, .slip-drm td { padding: 2px 0; vertical-align: top; }
.sl-name { }
.sl-note { color: var(--ink-2); font-size: 10.5px; text-align: right; padding-right: 8px !important; }
.sl-num { text-align: right; width: 48px; font-weight: 700; }
.slip-lines tr:not(:last-child) td, .slip-drm tr:not(:last-child) td { border-bottom: 1px dotted rgba(27,26,23,.28); }
tr.sl-total td { border-top: 1.5px solid var(--ink); border-bottom: none !important; padding-top: 4px; font-weight: 700; }
.slip-drm tr.good .sl-num { color: #2f6b3a; }
.slip-drm tr.bad .sl-num { color: var(--stamp); }

.odds { display: grid; gap: 3px; margin: 6px 0 4px; }
.odds-row { display: grid; grid-template-columns: 84px 1fr 34px; align-items: center; gap: 6px; font-size: 10.5px; }
.odds-lab { color: var(--ink-2); }
.odds-bar { height: 8px; background: var(--ink-2); display: block; }
.odds-bar.b-casualties { background: var(--stamp); }
.odds-bar.b-broken { background: #b5732a; }
.odds-bar.b-shaken { background: #7d7a3a; }
.odds-bar.b-nothing { background: #9d988a; }
.odds-num { text-align: right; }
.slip-wait { margin: 6px 0 0; font-style: italic; color: var(--ink-2); font-size: 11px; }

.slip-dice { display: flex; align-items: center; gap: 10px; margin: 10px 0 8px; }
.die {
  width: 34px; height: 34px; background: #f7f3e6; border: 1.5px solid var(--ink);
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  padding: 3px; gap: 1px; border-radius: 3px;
}
.pip { border-radius: 50%; }
.pip.on { background: var(--ink); }
.slip-sum { display: flex; align-items: baseline; gap: 6px; font-weight: 700; }
.sum-raw { font-size: 18px; }
.sum-op { color: var(--ink-2); }
.sum-eq { font-size: 20px; color: var(--stamp); }

.slip-result {
  border-top: 2px solid var(--ink); padding-top: 7px;
  display: flex; align-items: baseline; gap: 9px;
}
.res-code {
  font-weight: 700; font-size: 15px; letter-spacing: .06em;
  border: 2px solid var(--stamp); color: var(--stamp); padding: 0 5px; transform: rotate(-1.5deg);
}
.res-text { font-size: 12px; line-height: 1.35; }
.slip-effects { margin: 7px 0 0; padding-left: 16px; font-size: 11.5px; line-height: 1.5; color: var(--ink-2); }

/* -------------------------------------------------------------- the orders */
#orders { display: flex; flex-direction: column; gap: 10px; }
.unit-card { background: #302c25; border-left: 4px solid var(--pencil); padding: 10px 12px; }
.unit-card.side-g { border-left-color: var(--feld-lt); }
.unit-card.side-s { border-left-color: var(--oxide-lt); }
.unit-card h4 { font-family: var(--serif); font-size: 16px; color: #f0e9d5; }
.unit-line, .unit-sw, .unit-mp, .unit-cmd { margin: 4px 0 0; font-family: var(--mono); font-size: 11.5px; color: #b6ae9b; }
.unit-cmd { color: var(--feld-lt); }
.orders-hint, .orders-wait { margin: 0; font-size: 12.5px; line-height: 1.5; color: #a49d8c; }
.orders-wait { font-style: italic; }
.act-row {
  display: flex; flex-wrap: wrap; gap: 7px;
  /* the order to fire must never be the thing below the fold */
  position: sticky; bottom: -12px; z-index: 2;
  background: var(--table-2); padding: 8px 0 12px; margin-bottom: -12px;
}
.act {
  flex: 1 1 auto; padding: 10px 12px; border-radius: 2px;
  background: #35312a; border: 1px solid var(--rule); font-size: 13px;
}
.act:hover { background: #423d33; }
.act.primary { background: var(--stamp); border-color: #c05038; color: #fbeee8; font-weight: 600; }
.act.primary:hover { background: #b33b26; }

.foot { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--rule); flex: 0 0 auto; }
.foot button { flex: 1; padding: 11px; border-radius: 2px; background: #35312a; border: 1px solid var(--rule); font-size: 13px; }
.foot button:disabled { opacity: .4; cursor: default; }
#btn-done { background: var(--feld); border-color: var(--feld-lt); color: #f1f6ec; font-weight: 600; }

/* -------------------------------------------------------------- the ledger */
#ledger-toggle {
  background: none; border: 1px dashed var(--rule); width: 100%;
  padding: 8px; font-family: var(--mono); font-size: 11px; color: var(--pencil);
  letter-spacing: .08em; text-transform: uppercase;
}
#ledger { display: none; }
#ledger.open { display: block; }
#ledger-body { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.led-row {
  display: grid; grid-template-columns: 40px 28px 1fr; gap: 6px;
  font-family: var(--mono); font-size: 11px; padding: 5px 6px;
  background: #2b2823; border-left: 3px solid var(--pencil); color: #b6ae9b;
}
.led-row.side-g { border-left-color: var(--feld-lt); }
.led-row.side-s { border-left-color: var(--oxide-lt); }
.led-no { color: var(--pencil); }
.led-turn { color: var(--pencil); }
.led-eff { grid-column: 1 / -1; color: #8e8878; font-size: 10.5px; line-height: 1.4; }

/* ----------------------------------------------------------------- the end */
#end-screen {
  position: absolute; inset: 0; background: rgba(20,18,15,.94);
  display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 20;
}
.end-card { max-width: 520px; width: 100%; background: var(--table-2); border: 1px solid var(--rule); padding: 26px; }
.end-card .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--pencil); margin: 0 0 8px; }
#end-verdict { font-family: var(--serif); font-size: 30px; line-height: 1.1; color: #f0e9d5; }
#end-detail { margin: 12px 0 18px; font-size: 14px; line-height: 1.55; color: #b6ae9b; }
.end-obj { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; background: #2b2823; border-left: 3px solid var(--pencil); margin-bottom: 5px; font-size: 12.5px; }
.end-obj.side-g { border-left-color: var(--feld-lt); }
.end-obj.side-s { border-left-color: var(--oxide-lt); }
.eo-held { font-family: var(--mono); font-size: 11px; color: var(--pencil); }
#end-again { width: 100%; margin-top: 18px; padding: 12px; background: var(--feld); border: 1px solid var(--feld-lt); color: #f1f6ec; border-radius: 2px; }

[hidden] { display: none !important; }

/* ----------------------------------------------------------------- narrow */
@media (max-width: 860px) {
  /* the counter picked up off the board, and the printed hex under it */
#hovercard {
  position: absolute; z-index: 6; pointer-events: none;
  width: 268px; max-width: calc(100% - 16px);
  background: var(--slip); color: var(--ink);
  font-family: var(--mono); font-size: 11.5px; line-height: 1.45;
  padding: 9px 11px 10px;
  box-shadow: 0 2px 0 rgba(0,0,0,.4), 0 12px 26px rgba(0,0,0,.42);
}
#hovercard.sticky { outline: 2px solid var(--stamp); outline-offset: -2px; }
.hc-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  border-bottom: 1.5px solid var(--ink); padding-bottom: 4px; margin-bottom: 5px;
}
.hc-ground { font-weight: 700; }
.hc-hex { color: var(--ink-2); font-size: 10.5px; }
.hc-facts { margin: 0; color: var(--ink-2); font-size: 10.5px; }
.hc-obj {
  margin: 5px 0 0; font-size: 10.5px; color: var(--stamp); font-weight: 700;
  border-top: 1px dotted rgba(27,26,23,.3); padding-top: 4px;
}
.hc-unit {
  margin-top: 7px; padding: 5px 0 0 8px;
  border-top: 1px solid rgba(27,26,23,.22); border-left: 3px solid var(--pencil);
}
.hc-unit.side-g { border-left-color: var(--feld); }
.hc-unit.side-s { border-left-color: var(--oxide); }
.hc-name { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.hc-name strong { font-size: 12px; }
.hc-side { font-size: 10px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .1em; }
.hc-nums, .hc-sw, .hc-state, .hc-cmd { margin: 3px 0 0; font-size: 10.5px; color: var(--ink-2); }
.hc-sw { color: #4d3f1c; }
.hc-state { color: var(--stamp); }
.hc-cmd { color: #2f5a34; }
.hc-rel {
  margin: 7px 0 0; padding-top: 5px; font-size: 10.5px;
  border-top: 1.5px solid var(--ink); color: #2f5a34;
}
.hc-rel.shut { color: var(--stamp); }

#umpire-note {
    right: 10px; bottom: 52px; font-size: 12px; padding: 7px 9px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  #zoom { flex-direction: row; right: 8px; bottom: 8px; }
  #zoom button { width: 40px; height: 32px; }
  #main { flex-direction: column; }
  #board { flex: 0 0 46vh; }
  #desk { flex: 1 1 auto; border-left: none; border-top: 1px solid var(--rule); }
  header#bar { flex-wrap: wrap; gap: 8px 12px; padding: 7px 10px; }
  #action-name { font-size: 16px; }
  .scores { order: 3; width: 100%; justify-content: space-between; }
  #score-bar { flex: 1; width: auto; }
  .masthead h1 { font-size: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  #umpire-note.flash { animation: none; opacity: 1; }
  .action { transition: none; }
}