/* ======================================================================
   Computer Bismarck -- the chart room

   Materials: an Admiralty chart in blue-black, brass plotting marks for
   what you own, red chinagraph for what you only think you know, and a
   signal pad in typewriter face down the left-hand side. The whole
   palette comes off the plotting table; nothing here is decoration.
   ====================================================================== */

:root {
  --sea:        #0b1720;
  --chart:      #142c3b;
  --land:       #2b382f;
  --coast:      #6d7f6c;
  --ice:        #aebfc4;
  --rule:       #2f5062;
  --grat:       #4a707f;
  --mine:       #7d5f3a;
  --fog:        #b7c6cb;
  --squall:     #91a7b1;
  --route:      #6f8f86;
  --air:        #7f9fc4;

  --ink:        #d7e2e5;
  --ink-dim:    #8ea3ab;
  --brass:      #d3a83c;
  --brass-dim:  #8a7233;
  --oxide:      #c8492f;
  --oxide-dim:  #8c3623;
  --signal:     #86b7a4;

  --counter:    #16323f;
  --panel:      #0f202b;
  --panel-2:    #142935;
  --edge:       #23404f;

  --face-chart: 'Bahnschrift', 'DIN Alternate', 'Roboto Condensed', 'Arial Narrow', sans-serif;
  --face-signal: 'Courier New', 'Nimbus Mono PS', Courier, monospace;
}

* { box-sizing: border-box; }

/* An id selector carrying display:flex beats the user agent's [hidden]
   rule on specificity, so a panel marked hidden stays on screen and sits
   over everything behind it. Both full-screen cards in this game did
   exactly that, and the chart room was being drawn perfectly underneath
   them for a whole session. State the rule once, loudly, here. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--sea);
  color: var(--ink);
  font-family: var(--face-chart);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}
button:focus-visible,
input:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

h1, h2, h3 { margin: 0; font-weight: 600; }

.quiet { color: var(--ink-dim); }

/* ---- the opening card ---------------------------------------------- */

#title-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 32px;
  overflow-y: auto;
  background:
    radial-gradient(120% 90% at 30% 10%, #16303f 0%, var(--sea) 62%);
}

.title-mark {
  font-size: clamp(30px, 6vw, 58px);
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: center;
  line-height: 1.05;
}
.title-rule {
  width: min(560px, 84vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--grat), transparent);
}
.title-sub {
  color: var(--ink-dim);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 12px;
  text-align: center;
}
.title-blurb {
  max-width: 62ch;
  text-align: center;
  color: var(--ink-dim);
  line-height: 1.6;
  font-family: var(--face-signal);
  font-size: 13px;
}

#scenario-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  width: min(980px, 94vw);
}

.scenario {
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-align: left;
  padding: 18px 18px 16px;
  background: var(--panel);
  border: 1px solid var(--edge);
  transition: border-color .15s, background .15s, transform .15s;
}
.scenario:hover { border-color: var(--brass); background: var(--panel-2); transform: translateY(-2px); }
.scenario-name { font-size: 19px; letter-spacing: 0.06em; }
.scenario-dates { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass); }
.scenario-note { font-family: var(--face-signal); font-size: 12px; line-height: 1.55; color: var(--ink-dim); }
.scenario-len { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); }

#btn-resume {
  padding: 12px 26px;
  border: 1px solid var(--brass);
  color: var(--brass);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 12px;
}
#btn-resume:hover { background: var(--brass); color: var(--sea); }

.disclosure {
  max-width: 68ch;
  text-align: center;
  font-family: var(--face-signal);
  font-size: 11px;
  line-height: 1.6;
  color: #5f757e;
}

/* ---- the side card -------------------------------------------------- */

#action-card {
  position: absolute; inset: 0; z-index: 45;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(6, 14, 20, 0.93);
}
.action-inner {
  width: min(760px, 94vw); max-height: 88vh; overflow-y: auto;
  border: 1px solid var(--edge); background: var(--panel);
  padding: 22px 24px 24px;
}
.action-inner .card-title { margin: 4px 0 8px; }
#action-when, #action-sides, #action-range {
  margin: 0 0 4px; font-family: var(--face-signal); font-size: 12px; color: var(--ink-dim);
}
#action-sides { color: var(--ink); letter-spacing: 0.04em; }
#action-rounds {
  margin: 16px 0; border-top: 1px solid var(--edge);
  font-family: var(--face-signal); font-size: 12px;
}
.round {
  display: grid; grid-template-columns: 28px 74px 1fr; gap: 10px;
  padding: 7px 2px; border-bottom: 1px solid rgba(35, 64, 79, 0.6);
}
.round-n { color: #5f757e; }
.round-range { color: var(--ink-dim); }
.round.broke { grid-template-columns: 28px 1fr; }
.round-note { color: var(--oxide); }
.shot {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
  color: var(--ink-dim); padding: 1px 0;
}
.shot.hit { color: var(--ink); }
.shot-from { color: var(--brass); }
.shot.hit .shot-to { color: var(--oxide); }
.shot-arrow { color: #5f757e; }
.shot-ladder { color: #5f757e; font-size: 11px; }
.shot-note { color: var(--oxide); font-size: 11px; }
.action-sunk { color: var(--oxide); font-family: var(--face-signal); font-size: 13px; margin: 4px 0; }
#btn-close-action {
  margin-top: 14px; padding: 10px 22px; border: 1px solid var(--brass);
  color: var(--brass); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
}
#btn-close-action:hover { background: var(--brass); color: var(--sea); }
#btn-last-action {
  padding: 10px 14px; border: 1px solid var(--edge); color: var(--ink-dim);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
}
#btn-last-action:hover { border-color: var(--brass); color: var(--brass); }

#side-card, #end-card {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 32px;
  overflow-y: auto;
  background: rgba(6, 14, 20, 0.94);
}
#side-card[hidden], #end-card[hidden] { display: none; }

#side-buttons { display: grid; gap: 12px; width: min(620px, 92vw); }
.side-choice {
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  padding: 16px 18px; background: var(--panel); border: 1px solid var(--edge);
}
.side-choice:hover { border-color: var(--brass); }
.side-name { font-size: 18px; letter-spacing: 0.08em; }
.side-note { font-family: var(--face-signal); font-size: 12px; color: var(--ink-dim); line-height: 1.5; }

#temper-buttons { display: flex; gap: 8px; }
.temper {
  padding: 7px 16px; border: 1px solid var(--edge);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim);
}
.temper.on { border-color: var(--brass); color: var(--brass); }

.card-label { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-dim); }
.card-title { font-size: 26px; letter-spacing: 0.1em; }

/* ---- the chart room ------------------------------------------------- */

#chart-room {
  position: absolute;
  inset: 0;
  display: grid;
  /* minmax(0, 1fr), NOT 1fr. A 1fr track's automatic minimum is the
     MIN-CONTENT of what is in it, so one panel with a long unbreakable
     line pushes the whole grid wider than the screen and the page
     scrolls sideways. The Coastal Command board did exactly that on a
     phone: 390px of viewport, 404px of layout. */
  grid-template-columns: 300px minmax(0, 1fr) 320px;
  grid-template-rows: minmax(0, 1fr) 54px;
  grid-template-areas: "pad plot rail" "bar bar bar";
}
#chart-room[hidden] { display: none; }

/* the signal pad */
#signal-pad {
  grid-area: pad;
  background: var(--panel);
  border-right: 1px solid var(--edge);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.pad-head {
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--edge);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
#signals {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0 16px;
  font-family: var(--face-signal);
  font-size: 12px;
  line-height: 1.5;
}
.signal {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 8px;
  padding: 6px 14px;
  border-bottom: 1px solid rgba(35, 64, 79, 0.5);
  color: var(--ink-dim);
}
.signal.fresh { color: var(--signal); background: rgba(134, 183, 164, 0.06); }
.signal.empty { display: block; color: #5f757e; }
.signal-time { color: #5f757e; font-size: 11px; }

/* the plotting table */
#plot-wrap { grid-area: plot; position: relative; min-width: 0; min-height: 0; }
#plot { display: block; width: 100%; height: 100%; cursor: crosshair; }

#plot-legend {
  position: absolute;
  left: 12px; bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 12px;
  background: rgba(11, 23, 32, 0.82);
  border: 1px solid var(--edge);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  pointer-events: none;
}
.key { display: flex; align-items: center; gap: 8px; }
.key i { width: 16px; height: 3px; display: inline-block; }
.key i.brass { background: var(--brass); }
.key i.oxide { background: var(--oxide); height: 10px; width: 10px; border-radius: 50%; border: 1px solid var(--oxide); background: none; }
.key i.route { background: var(--route); }
.key i.reach { background: none; border: 1px solid var(--brass-dim); height: 10px; width: 12px; }
.key i.air { background: none; border: 1px solid var(--air); height: 10px; width: 12px; }
.quiet-key { color: #5f757e; font-size: 10px; margin-top: 2px; }

/* The board tools live in the rail, NOT floating over the chart. A panel
   over the board swallows clicks on whatever counter is beneath it and
   does nothing visible, which is worse than refusing out loud -- Scapa
   Flow sat under this panel at the opening view and no ship in it could
   be taken in hand. */
#plot-tools {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--edge);
  background: var(--panel-2);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  flex: none;
}
#plot-tools label { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.tool-row { display: flex; gap: 5px; }
.tool-row button {
  flex: 1;
  padding: 5px 0;
  border: 1px solid var(--edge);
  color: var(--ink-dim);
  font-size: 11px;
  letter-spacing: 0.06em;
}
.tool-row button:hover { border-color: var(--brass); color: var(--brass); }
#index {
  width: 100%;
  height: 108px;
  display: block;
  border: 1px solid var(--edge);
  cursor: crosshair;
}
#zoom-line { font-size: 10px; color: #5f757e; letter-spacing: 0.1em; }

#plot.dragging { cursor: grabbing; }

/* the orders board */
#right-rail {
  grid-area: rail;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--panel);
  border-left: 1px solid var(--edge);
}
/* Coastal Command board */
#air-board {
  border-bottom: 1px solid var(--edge);
  padding: 10px 12px 12px;
  background: var(--panel-2);
  flex: none;
  max-height: 34vh;
  overflow-y: auto;
}
#air-board[hidden] { display: none !important; }
.air-head {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: 8px;
}
.air-auto {
  font-size: 10px; letter-spacing: 0.08em; text-transform: none;
  color: var(--air); border-bottom: 1px solid transparent;
}
.air-auto:hover { border-bottom-color: var(--air); }
.sqn {
  display: flex; flex-direction: column; gap: 2px; width: 100%;
  text-align: left; padding: 6px 8px; margin-bottom: 4px;
  border: 1px solid var(--edge);
}
.sqn:hover { border-color: var(--air); }
.sqn.on { border-color: var(--air); background: rgba(127, 159, 196, 0.10); }
.sqn.mine .sqn-name { color: var(--air); }
.sqn-name { font-size: 12px; }
.sqn-where { font-size: 11px; color: var(--ink-dim); font-family: var(--face-signal); }
.sqn-reach { font-size: 10px; color: #5f757e; letter-spacing: 0.06em; }
.air-hint {
  margin: 6px 0 0; font-size: 11px; line-height: 1.5;
  color: var(--air); font-family: var(--face-signal);
}

#orders {
  flex: 1;
  overflow-y: auto;
  padding: 16px 16px 28px;
  min-height: 0;
}
.orders-idle { color: var(--ink-dim); font-family: var(--face-signal); font-size: 12px; line-height: 1.6; }
.orders-idle p { margin: 0 0 14px; }
.orders-head h2 { font-size: 22px; letter-spacing: 0.06em; }
.orders-class { margin: 4px 0 0; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); }
.orders-note { margin: 8px 0 0; font-family: var(--face-signal); font-size: 12px; line-height: 1.55; color: var(--ink-dim); }

.orders-state {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 16px 0;
  padding: 12px 0;
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
  font-size: 13px;
}
.orders-state dt { color: var(--ink-dim); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; align-self: center; }
.orders-state dd { margin: 0; }
.orders-state dd.bad { color: var(--oxide); }

.orders-section { margin: 16px 0; }
.orders-section h3 { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  padding: 6px 11px;
  border: 1px solid var(--edge);
  font-size: 12px;
  color: var(--ink-dim);
}
.chip:hover { border-color: var(--brass-dim); }
.chip.on { border-color: var(--brass); color: var(--brass); }

.act {
  display: block;
  padding: 10px 14px;
  margin-top: 8px;
  border: 1px solid var(--brass);
  color: var(--brass);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-align: left;
}
.act:hover { background: var(--brass); color: var(--sea); }
.act.wide { width: 100%; }
.act.ghost { border-color: var(--edge); color: var(--ink-dim); }
.act.ghost:hover { background: none; border-color: var(--ink-dim); color: var(--ink); }

/* the watch bar */
#watch-bar {
  grid-area: bar;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 18px;
  background: var(--panel-2);
  border-top: 1px solid var(--edge);
  font-size: 12px;
  letter-spacing: 0.06em;
}
#stamp { color: var(--brass); letter-spacing: 0.14em; }
#watch-n, #weather-line, #score-line, #hover-line { color: var(--ink-dim); }
#hover-line { font-family: var(--face-signal); }
.bar-spacer { flex: 1; }

#btn-watch {
  padding: 10px 24px;
  background: var(--brass);
  color: var(--sea);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
#btn-watch:hover { background: #eec152; }
#btn-watch:disabled { opacity: 0.45; cursor: default; }
#btn-give-up {
  padding: 10px 14px;
  border: 1px solid var(--edge);
  color: var(--ink-dim);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#btn-give-up:hover { border-color: var(--oxide); color: var(--oxide); }

/* ---- the end card --------------------------------------------------- */

#end-band { font-size: clamp(24px, 5vw, 42px); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); text-align: center; }
#end-line { max-width: 60ch; text-align: center; font-family: var(--face-signal); font-size: 13px; line-height: 1.6; color: var(--ink-dim); }
#end-score { font-size: 16px; letter-spacing: 0.08em; }
#end-detail { width: min(520px, 92vw); border-top: 1px solid var(--edge); }
.end-row {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 7px 2px; border-bottom: 1px solid var(--edge);
  font-family: var(--face-signal); font-size: 12px; color: var(--ink-dim);
}
.end-pts { color: var(--brass); }
#end-opp { font-family: var(--face-signal); font-size: 12px; color: var(--ink-dim); }
#btn-new {
  padding: 12px 28px; border: 1px solid var(--brass); color: var(--brass);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
}
#btn-new:hover { background: var(--brass); color: var(--sea); }
#btn-close-side {
  border: 1px solid var(--edge); color: var(--ink-dim);
  padding: 8px 18px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
}

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

@media (max-width: 1080px) {
  #chart-room { grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "plot rail" "bar bar"; }
  #signal-pad { display: none; }
}
@media (max-width: 760px) {
  #chart-room {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto 54px;
    grid-template-areas: "plot" "rail" "bar";
  }
  #right-rail { border-left: none; border-top: 1px solid var(--edge); max-height: 46vh; }
  #plot-tools { flex-direction: row; flex-wrap: wrap; align-items: center; }
  #plot-tools .tool-row { flex: 1 1 100%; }
  #index { width: 46%; height: 66px; }
  #plot-legend { display: none; }
  #watch-bar { gap: 8px; padding: 0 8px; font-size: 11px; overflow: hidden; }
  #watch-n, #weather-line, #hover-line { display: none; }
  /* the bar is a flex row of fixed-width buttons; on a phone the last of
     them ran past the edge, so let them give ground instead */
  #watch-bar button { flex: 0 1 auto; min-width: 0; white-space: nowrap; }
  #btn-watch { padding: 10px 14px; letter-spacing: 0.08em; }
  #btn-give-up, #btn-last-action { padding: 10px 9px; letter-spacing: 0.06em; }
  #score-line { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* The gunnery report is a three-column grid with fixed widths, which on
   a phone is wider than the screen and pushes the whole page sideways.
   Stack it instead. */
@media (max-width: 760px) {
  .action-inner { padding: 16px 14px 18px; }
  .round { grid-template-columns: 24px 1fr; row-gap: 2px; }
  .round-range { grid-column: 2; }
  .round-shots { grid-column: 1 / -1; padding-left: 24px; }
  .round.broke { grid-template-columns: 24px 1fr; }
  .shot { font-size: 11px; }
  #action-rounds { font-size: 11px; }
  #air-board { max-height: 26vh; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}