:root {
  --bg: #000;
  --ink: #e9e9e2;
  --dim: #8a8a86;
  --faint: #3a3a3a;
  --green: #33ff66;
  --orange: #ff8a3d;
  --violet: #ff55ee;
  --blue: #44ccff;
  --red: #ff4444;
  --panel: #050505;
  --rule: #1d4f7a;
  --font: "Apple2", "PR Number 3", "Print Char 21", "Courier New", ui-monospace, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); }
body {
  font-family: var(--font); font-size: 13px; line-height: 1.35; text-transform: uppercase;
  letter-spacing: 0.04em; overflow: hidden; -webkit-font-smoothing: none;
}
button, input { font: inherit; text-transform: inherit; letter-spacing: inherit; }
#top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 6px 12px; border-bottom: 2px solid var(--rule); height: 40px;
}
.brand { display: flex; align-items: baseline; gap: 10px; }
.title { background: var(--ink); color: #000; padding: 1px 8px; font-weight: bold; font-size: 17px; letter-spacing: 0.18em; }
.ver { color: var(--green); font-size: 12px; text-transform: none; }
.status { color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status b { color: var(--ink); font-weight: normal; }
.status .warn { color: var(--orange); }
#main { display: grid; grid-template-columns: 270px 1fr 284px; height: calc(100% - 40px); }
.side { overflow-y: auto; padding: 8px 10px 16px; background: var(--panel); scrollbar-width: thin; scrollbar-color: #333 #000; }
#info { border-right: 2px solid var(--rule); display: flex; flex-direction: column; }
#ctrl { border-left: 2px solid var(--rule); }
.side section { margin-bottom: 12px; }
.side section.grow { flex: 1; min-height: 120px; display: flex; flex-direction: column; }
h2 {
  margin: 0 0 6px; font-size: 12px; font-weight: normal; letter-spacing: 0.14em;
  background: var(--ink); color: #000; padding: 1px 6px; display: inline-block;
}
.kv { display: flex; justify-content: space-between; gap: 8px; }
.kv span:first-child { color: var(--dim); }
.muted { color: var(--dim); }
.ok { color: var(--green); }
.bad { color: var(--red); }
.warnc { color: var(--orange); }
.sw { display: inline-block; width: 9px; height: 9px; margin-right: 6px; vertical-align: baseline; }
.rival { display: flex; justify-content: space-between; }
.rival.dead { color: var(--faint); text-decoration: line-through; }
.bar { letter-spacing: 0; color: var(--blue); }
.bar .e { color: #1c3b4a; }
.tech { display: grid; grid-template-columns: 74px 22px 1fr; gap: 4px; align-items: center; }
.tech .lv { color: var(--ink); text-align: right; }
#log { flex: 1; overflow-y: auto; font-size: 12px; min-height: 80px; }
#log p { margin: 0 0 4px; color: #c8c8c0; }
#log p.old { color: var(--dim); }
#log a, .link { color: var(--blue); cursor: pointer; text-decoration: none; border-bottom: 1px dotted var(--blue); }
#log .t { color: var(--dim); margin-right: 4px; }
button {
  background: #000; color: var(--ink); border: 2px solid var(--ink); padding: 4px 6px; cursor: pointer;
  text-align: left; min-height: 28px; width: 100%;
}
button small { color: var(--dim); font-size: 10px; }
button:hover:not(:disabled), button:focus-visible { background: var(--ink); color: #000; outline: none; }
button:hover:not(:disabled) small { color: #333; }
button:disabled { color: #555; border-color: #333; cursor: not-allowed; }
button.on { background: var(--green); color: #000; border-color: var(--green); }
button.on small { color: #063; }
button.big { font-size: 15px; padding: 8px 10px; text-align: center; border-width: 3px; }
/* END TURN and its row stay at the top of the controls panel however far the panel is scrolled */
#ctrl > section:first-child { position: sticky; top: -8px; z-index: 5; background: var(--panel); margin: -8px -10px 12px; padding: 8px 10px 6px; box-shadow: 0 2px 0 var(--rule); }
#endturn { border-color: var(--green); color: var(--green); }
#endturn:hover:not(:disabled) { background: var(--green); color: #000; }
#endturn:disabled { border-color: #333; color: #555; }
.row2, .row3 { display: grid; gap: 6px; margin-top: 6px; }
.row2 { grid-template-columns: 1fr 1fr; }
.row3 { grid-template-columns: 1fr 1fr 1fr; }
.buy { display: grid; grid-template-columns: 1fr; gap: 4px; margin-top: 4px; }
.buy button { display: flex; justify-content: space-between; }
.buy .c { color: var(--orange); }
.buy button:hover:not(:disabled) .c { color: #000; }
.buy .lvl { color: var(--dim); font-size: 11px; }
.counts { display: grid; grid-template-columns: 1fr 30px 44px 30px 46px; gap: 4px; align-items: center; margin-top: 4px; }
.counts button { text-align: center; padding: 2px; min-height: 24px; }
.counts .n { text-align: center; }
.pips { display: grid; grid-template-columns: 74px repeat(4, 1fr); gap: 3px; align-items: center; margin-top: 3px; }
.pips button { min-height: 20px; padding: 0; text-align: center; font-size: 11px; }
.share { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
.share button { text-align: center; padding: 2px 0; }
.note { color: var(--dim); font-size: 11px; margin: 4px 0 0; }
#mapwrap { position: relative; overflow: hidden; background: #000; touch-action: none; }
#map { display: block; width: 100%; height: 100%; cursor: crosshair; }
#map.grab { cursor: grabbing; }
#map.aim { cursor: cell; }
.scan {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,0.22) 3px);
  mix-blend-mode: multiply;
}
#hint {
  position: absolute; left: 10px; bottom: 8px; right: 10px; color: var(--ink); background: rgba(0,0,0,.75);
  padding: 3px 6px; pointer-events: none; font-size: 12px; min-height: 1em;
}
#hint:empty { display: none; }
#tip {
  position: absolute; pointer-events: none; background: #000; border: 2px solid var(--ink); padding: 4px 6px;
  font-size: 12px; max-width: 250px; z-index: 3;
}
#flash {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #000;
  padding: 3px 10px; font-size: 13px; z-index: 4; pointer-events: none;
}
#flash.err { background: var(--red); color: #000; }
.overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center;
  z-index: 10; padding: 16px; overflow-y: auto;
}
.overlay[hidden] { display: none; }
.card { border: 3px solid var(--ink); padding: 18px 22px; max-width: 640px; width: 100%; background: #000; box-shadow: 8px 8px 0 #1d4f7a; }
.card.wide { max-width: 980px; }
.card p { margin: 0 0 10px; text-transform: none; letter-spacing: 0.01em; }
.card .sub, .card .fine { text-transform: uppercase; }
.logo { color: var(--green); font-size: 13px; line-height: 1; margin: 0 0 10px; letter-spacing: 0; text-shadow: 0 0 6px rgba(51,255,102,.45); overflow-x: auto; }
.sub { color: var(--orange); letter-spacing: 0.18em; }
.blurb { color: #c8c8c0; }
.fine { color: var(--dim); font-size: 11px; margin-top: 12px !important; }
.warn { color: var(--orange); }
.opt { display: grid; grid-template-columns: 80px 1fr; gap: 8px; align-items: center; margin: 8px 0; }
.opt > span { color: var(--dim); }
.opt > div { display: flex; flex-wrap: wrap; gap: 6px; }
.opt button { width: auto; min-width: 70px; text-align: center; }
.opt input { background: #000; color: var(--ink); border: 2px solid var(--ink); padding: 4px 6px; width: 140px; }
.go { margin-top: 14px; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.cols p { font-size: 12.5px; }
.cols b { color: var(--green); font-weight: normal; }
table.score { width: 100%; border-collapse: collapse; margin: 8px 0; }
table.score td, table.score th { padding: 3px 6px; text-align: left; border-bottom: 1px solid #222; font-weight: normal; }
table.score th { color: var(--dim); }
.orders { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin-top: 4px; }
.orders button { text-align: center; padding: 2px 0; font-size: 10px; letter-spacing: 0; min-height: 24px; }
.tabs { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.tabs button { width: auto; min-width: 90px; text-align: center; }
canvas.chart { display: block; width: 100%; height: 320px; border: 2px solid #1d4f7a; }
canvas.chart.small { height: 180px; margin: 6px 0 4px; }
#panel .card { max-height: 88vh; overflow-y: auto; }
#panel .kv h2 { margin: 0; }
table.ledger td, table.ledger th { font-size: 12px; white-space: nowrap; }
table.ledger th { cursor: pointer; user-select: none; }
table.ledger th.sorted { color: var(--ink); }
table.ledger tr[data-goto] { cursor: pointer; }
table.ledger tr[data-goto]:hover td { background: #102a40; }
table.ledger tr.tot td { color: var(--green); border-top: 2px solid #333; }
.action { border-bottom: 1px solid #222; padding: 5px 0; }
.action .side { font-size: 12px; padding-left: 10px; }
#panelbody { overflow-x: auto; }
.overlay.opaque { background: #000; }
.passwho { font-size: 16px; text-transform: uppercase !important; letter-spacing: 0.08em !important; margin: 14px 0 !important; }
button.refit { display: flex; justify-content: space-between; margin-top: 4px; }
button.refit .c { color: var(--blue); }
#advisor p { margin: 0 0 3px; font-size: 12px; }
#advisor a { color: inherit; cursor: pointer; border-bottom: 1px dotted currentColor; text-decoration: none; }
#advisor p:not(.bad):not(.ok) a { color: var(--blue); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (max-width: 980px) {
  body { overflow: auto; }
  #main { grid-template-columns: 1fr; grid-template-rows: 68vh auto auto; height: auto; }
  #mapwrap { order: 1; height: 68vh; }
  #ctrl { order: 2; border-left: none; border-top: 2px solid var(--rule); }
  #info { order: 3; border-right: none; border-top: 2px solid var(--rule); }
  #mapwrap { grid-row: 1; } #ctrl { grid-row: 2; } #info { grid-row: 3; }
  /* stacked layout: END TURN stays on screen wherever the page is scrolled */
  #endturn { position: fixed; left: 10px; right: 10px; bottom: 10px; width: auto; z-index: 30; box-shadow: 0 0 0 6px var(--bg, #000); }
  body { padding-bottom: 72px; }
  #ctrl > section:first-child { position: static; box-shadow: none; margin: 0 0 12px; padding: 0; }
  .cols { grid-template-columns: 1fr; }
  .status { display: none; }
}

body.modal-open #endturn { display: none; }

/* v2.1.0: opening artwork, responsive command access and mission control. */
.setup-card { max-width: 940px; padding: 15px; }
.setup-layout { display: grid; grid-template-columns: minmax(190px,.72fr) minmax(0,1.45fr); align-items: center; gap: 22px; }
.setup-art img { display: block; width: 100%; max-height: min(80vh,620px); object-fit: contain; border: 1px solid #1d4f7a; }
.setup-fields { min-width: 0; }
.setup-title { margin: 0 0 6px; font-size: clamp(22px,2.7vw,32px); color: var(--green); font-weight: normal; letter-spacing: .15em; text-shadow: 0 0 10px rgba(51,255,102,.42); }
.setup-fields .logo { display: none; }
.setup-fields .opt { grid-template-columns: 76px 1fr; }
.setup-fields .opt button { min-width: 62px; padding: 4px; }
#mapquick { display: none; }
.command-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin: 10px 0 15px; }
.command-stat { border: 1px solid var(--rule); padding: 10px; background: #061018; min-width: 0; }
.command-stat span { display: block; font-size: 10px; color: var(--dim); line-height: 1.4; }
.command-stat b { display: block; margin-top: 5px; font-size: 20px; color: var(--green); font-weight: normal; }
.command-contact { border-bottom: 1px solid #242424; padding: 9px 0; gap: 20px; }
.intel-track { height: 13px; border: 1px solid var(--rule); margin: 8px 0; background: #0b1018; }
.intel-track span { display: block; height: 100%; background: var(--blue); }
.registry-list { display: grid; gap: 7px; margin: 12px 0; }
.registry-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px; border-color: var(--rule); }
.registry-row > span:first-child { text-align: left; }
.registry-row b { color: var(--green); font-size: 14px; font-weight: normal; }
.registry-row small { font-size: 10px; color: var(--dim); }
.registry-course { display: block; color: var(--blue); font-size: 11px; margin-top: 3px; }
.registry-composition { white-space: nowrap; color: var(--orange); }
.orders { grid-template-columns: repeat(3,1fr); }
.orders button { min-height: 30px; font-size: 11px; }
@media (max-width: 980px) {
  #mapquick { display: grid; position: absolute; left: 7px; right: 7px; bottom: 47px; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; z-index: 4; }
  #mapquick button { text-align: center; font-size: 12px; background: rgba(0,0,0,.87); border-color: var(--blue); min-height: 35px; }
}
@media (max-width: 700px) {
  .setup-card { padding: 10px; }
  .setup-layout { grid-template-columns: 1fr; gap: 10px; }
  .setup-art { height: 100px; overflow: hidden; border: 1px solid var(--rule); }
  .setup-art img { width: 100%; height: 300px; max-height: none; object-fit: cover; object-position: center top; border: 0; }
  .setup-title { font-size: 21px; }
  .setup-fields .opt { grid-template-columns: 66px 1fr; gap: 5px; }
  .setup-fields .opt button { padding: 4px 5px; min-width: 51px; font-size: 11px; }
  .command-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .command-stat { padding: 8px; }
  .command-stat b { font-size: 16px; }
  .registry-row { gap: 7px; }
  .registry-composition { font-size: 11px; }
  .brand { min-width: 0; }
  .brand .title { font-size: 14px; letter-spacing: .08em; }
  .brand .ver { white-space: nowrap; font-size: 11px; }
}