/* Instant Action (docs/INSTANT.md). Loaded after bt10x.css (site fonts,
   palette, #legal, .link-button, #lang) and tui.css. The app is a fixed 100×32
   cell screen at the player's font size (header A− / A+ / Fit), centred
   between the header and the footer. */

:root {
  /* header height, as on the terminal page; taller on touch screens */
  --topbar-h: 36px;
  --tui-font: "Bt10x Mono", ui-monospace, Menlo, monospace;
  /* map palette: terrain faces, overlays, banners */
  --ia-map-bg: #101410;
  --ia-map-edge: #6f8f6f;
  --ia-map-wall: #070907;
  --ia-map-label: #5f7a5f;
  --ia-map-mark: #e8f5e8;
  --ia-t-clear: #182018;
  --ia-t-pavement: #2a2c2a;
  --ia-t-lightWoods: #1f4a22;
  --ia-t-heavyWoods: #133a17;
  --ia-t-rough: #4a4432;
  --ia-t-rubble: #3f3528;
  --ia-t-water1: #1f3d5c;
  --ia-t-water2: #18324f;
  --ia-t-water3: #112743;
  --ia-t-lightBuilding: #5a4a2a;
  --ia-t-mediumBuilding: #4f3f24;
  --ia-t-heavyBuilding: #45361f;
  --ia-t-hardenedBuilding: #3a2c18;
  --ia-team1: #5aaaff;
  --ia-team2: #ff7a5a;
  --ia-hull: #8a8a8a;
  --ia-reach: #7ee787;
  --ia-target: #ffd24a;
  --ia-select: #ffffff;
  --ia-banner-bg: #0b0d0b;
  --ia-banner-ink: #0b0d0b;
}

/* bt10x: Instant Action's only theme (<html data-theme="bt10x">; the app has
   no theme switch). The TUI tokens are copied from tui.css's "green" theme, so
   the app keeps that look but owns its values; the map and site tokens are
   mapped onto them. */
[data-theme="bt10x"] {
  color-scheme: dark;
  /* TUI tokens (tui.css "green") */
  --tui-page: #0c0f0c;
  --tui-fg: #b8c9b8;
  --tui-bright: #d7e4d7;
  --tui-dim: #5a6a5a;
  --tui-accent: #8fd08f;
  --tui-accent-ink: #0c0f0c;
  --tui-line: #6f8a6f;
  --tui-surface: #141a14;
  --tui-surface-2: #1b241b;
  --tui-field: #16301b;
  --tui-sel-bg: #8fd08f;
  --tui-sel-fg: #0c0f0c;
  --tui-shadow: rgba(0, 0, 0, 0.55);
  --tui-overlay: rgba(4, 8, 4, 0.6);
  --tui-red: #e07a6a;
  --tui-yellow: #d8c26a;
  --tui-blue: #7aa7d8;
  --tui-cyan: #6ac9c0;
  --tui-red-bg: #3a1712;
  --tui-yellow-bg: #383012;
  --tui-blue-bg: #152838;
  /* header and footer (bt10x.css tokens) */
  --c-bg: #0c0f0c; /* --tui-page */
  --c-text: #b8c9b8; /* --tui-fg */
  --c-white: #d7e4d7; /* --tui-bright */
  --c-dim: #5a6a5a; /* --tui-dim */
  --c-green: #8fd08f; /* --tui-accent */
  /* map frame, labels and overlays; terrain faces, walls and hulls stay on :root */
  --ia-map-bg: #0c0f0c; /* --tui-page */
  --ia-map-edge: #6f8a6f; /* --tui-line */
  --ia-map-label: #5a6a5a; /* --tui-dim */
  --ia-map-mark: #d7e4d7; /* --tui-bright */
  --ia-team1: #7aa7d8; /* --tui-blue */
  --ia-team2: #e07a6a; /* --tui-red */
  --ia-reach: #8fd08f; /* --tui-accent */
  --ia-target: #d8c26a; /* --tui-yellow */
  --ia-orange: #e09a4f;
  --ia-select: #d7e4d7; /* --tui-bright */
  --ia-banner-bg: #0c0f0c; /* --tui-page */
  --ia-banner-ink: #0c0f0c; /* --tui-accent-ink */
}

/* Header and footer match the terminal page (web/terminal.css). */
#topbar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: calc(var(--topbar-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) calc(12px + env(safe-area-inset-right)) 0
    calc(12px + env(safe-area-inset-left));
  border-bottom: 1px solid var(--c-line);
}
#topbar-title {
  color: var(--c-green);
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#topbar-version {
  color: var(--c-dim);
  font-size: 11px;
  font-weight: normal;
}
/* font size: A− 16 A+ Fit, styled like the language toggle */
#fontsize {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
#fontsize button {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}
/* A (smaller) and A (larger): the letter size shows the meaning. The boxes
   are pinned (height above, fixed width) so the letter size can't change
   them; both letters stand on the same baseline near the bottom edge. */
#fontsize button[data-fs="-1"],
#fontsize button[data-fs="1"] {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  width: 24px;
  /* less room under the larger letter: its descent is larger */
  padding: 0 0 calc(3.5px - 0.15em);
}
#fontsize button[data-fs="-1"] {
  font-size: 9px;
}
#fontsize button[data-fs="1"] {
  font-size: 14px;
}
#fontsize button:disabled {
  opacity: 0.4;
  cursor: default;
}
#fontsize-value {
  min-width: 2ch;
  color: var(--c-dim);
  font-size: 11px;
  text-align: center;
}
#home-link {
  display: flex;
  align-items: center;
  flex: none;
  height: calc(var(--topbar-h) - 10px);
  padding: 0 10px;
  font-size: 12px;
  font-weight: bold;
  white-space: nowrap;
}
/* MOTD button and dialog, as on the terminal page (web/terminal.css). */
#motd-open {
  display: flex;
  align-items: center;
  flex: none;
  gap: 6px;
  height: calc(var(--topbar-h) - 10px);
  padding: 0 10px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
}
/* Unread marker: MOTD changed since this browser last opened it. */
#motd-dot {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--c-yellow);
}
#motd-dot[hidden] {
  display: none;
}
/* A modal <dialog> in the browser top layer, anchored under the header
   button. Only its body scrolls. */
#motd {
  --motd-top: calc(env(safe-area-inset-top) + var(--topbar-h) + 8px);
  position: fixed;
  /* --motd-right lines the right edge up with the MOTD button, which sits
     left of #home-link; instant.ts sets it on open. */
  inset: var(--motd-top) var(--motd-right, calc(12px + env(safe-area-inset-right))) auto auto;
  margin: 0;
  padding: 0;
  width: min(520px, calc(100vw - 24px));
  max-width: none;
  overflow: hidden;
  max-height: min(60vh, calc(100vh - var(--motd-top) - env(safe-area-inset-bottom) - 8px));
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  color: var(--c-text);
  font-size: 12px;
}
@supports (height: 100dvh) {
  #motd {
    max-height: min(60dvh, calc(100dvh - var(--motd-top) - env(safe-area-inset-bottom) - 8px));
  }
}
#motd[open] {
  display: flex;
  flex-direction: column;
}
#motd::backdrop {
  background: rgba(4, 6, 4, 0.55);
}
#motd-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 4px 10px;
  border-bottom: 1px solid var(--c-line);
}
#motd-title {
  color: var(--c-green);
  font-weight: bold;
}
#motd-close {
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: inherit;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
#motd-close:hover {
  color: var(--c-white);
  border-color: var(--c-line);
}
#motd-close:focus-visible {
  outline: none;
  border-color: var(--c-yellow);
}
#motd-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 12px 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
#motd-body .banner {
  color: var(--c-green);
  font-weight: bold;
}
#legal {
  padding: 4px calc(12px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom))
    calc(12px + env(safe-area-inset-left));
}
@media (pointer: coarse) {
  :root {
    --topbar-h: 44px;
  }
  #motd-close {
    width: 44px;
    height: 44px;
    font-size: 16px;
  }
  #motd-head {
    padding: 0 0 0 12px;
  }
}
/* Phone: the MOTD becomes a sheet from under the header to above the home bar. */
@media (max-width: 480px) {
  #motd {
    inset: var(--motd-top) calc(8px + env(safe-area-inset-right))
      calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left));
    width: auto;
    height: auto;
    max-height: none;
    font-size: 13px;
  }
}
/* narrow headers: the title gives way to the controls */
@media (max-width: 560px) {
  #topbar-title {
    display: none;
  }
}
/* phone: tighter header buttons, so 한국어 stays on one line beside MOTD */
@media (max-width: 400px) {
  #topbar {
    gap: 8px;
  }
  #lang button {
    white-space: nowrap;
  }
  #motd-open,
  #home-link {
    padding: 0 6px;
  }
}

/* The 100×32 screen between header and footer: centred horizontally, its
   overflow clipped equally on both sides; middle-aligned vertically, scrolling
   down when the window is too short. #stage scrolls only vertically;
   #stage-inner clips (not a scroll container, so focus and scrollIntoView
   can't shift the screen sideways). */
#stage {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--tui-page);
}
#stage-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow-x: clip;
}

#screen {
  flex: none;
  /* auto margins take only free space: overflow goes down, never up */
  margin-block: auto;
  /* centred, overflowing both sides alike */
  align-self: center;
  position: relative;
  /* bounding line drawn outside the box: takes no layout space */
  outline: 1px solid var(--c-text);
  width: calc(100 * var(--cw));
  height: calc(32 * var(--ch));
  overflow: hidden;
  color: var(--tui-fg);
}

.ia-root {
  position: relative;
  width: calc(100 * var(--cw));
  height: calc(32 * var(--ch));
}

.ia-root > .tui-statusbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--ch);
}

/* one text row; a cursor row is reverse video */
.ia-row {
  white-space: pre;
  height: var(--ch);
  line-height: var(--ch);
  cursor: default;
}
.ia-row.sel {
  background: var(--tui-sel-bg);
  color: var(--tui-sel-fg);
}
.ia-row.dim,
.ia-dim {
  color: var(--tui-dim);
}
.ia-row.hot {
  color: var(--tui-bright);
}
.ia-row[data-click] {
  cursor: pointer;
}
.ia-bright {
  color: var(--tui-bright);
}
.ia-accent {
  color: var(--tui-accent);
}
.ia-team1 {
  color: var(--ia-team1);
}
.ia-team2 {
  color: var(--ia-team2);
}
.ia-err {
  color: var(--tui-red);
}
/* Record sheet levels: green, white, yellow, orange, red (then dim at 0). */
.ia-lv-green {
  color: var(--tui-accent);
}
.ia-lv-white {
  color: var(--tui-bright);
}
.ia-lv-yellow {
  color: var(--tui-yellow);
}
.ia-lv-orange {
  color: var(--ia-orange);
}
.ia-lv-red {
  color: var(--tui-red);
}

.ia-center {
  text-align: center;
}

/* map slot: the persistent canvas is moved in here after each render */
.ia-mapslot {
  position: relative;
  width: 100%;
  height: 100%;
}
.ia-mapslot > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

/* modal windows sit centred on the screen over a dimmed backdrop */
.ia-modal {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--tui-overlay);
  z-index: 10;
}

/* log lines */
.ia-log .ia-row.hit {
  color: var(--tui-bright);
}
.ia-log .ia-row.miss,
.ia-log .ia-row.dim {
  color: var(--tui-dim);
}
.ia-log .ia-row.crit,
.ia-log .ia-row.err {
  color: var(--tui-red);
}
.ia-log .ia-row.banner {
  color: var(--tui-accent);
}
.ia-log .ia-row.prompt {
  color: var(--tui-yellow);
}

.ia-title-art {
  color: var(--tui-accent);
  text-align: center;
  white-space: pre;
}

.ia-tab[data-click] {
  cursor: pointer;
}
.ia-logscroll {
  overflow-y: auto;
  overflow-x: hidden;
}
/* debrief tab body: scrolls when a tab is taller than its rows */
.ia-scroll {
  overflow-y: auto;
  overflow-x: hidden;
}

.ia-hint[data-click] {
  cursor: pointer;
}
.ia-hint[data-click]:hover {
  color: var(--tui-bright);
}

/* New Battle: side titles in team colours, BV comparison */
.ia-side1 > .tui-frame .tui-title {
  color: var(--ia-team1);
}
.ia-side2 > .tui-frame .tui-title {
  color: var(--ia-team2);
}
.ia-bv-even {
  color: var(--c-green);
}
.ia-bv-high {
  color: var(--tui-blue);
}
.ia-bv-low {
  color: var(--tui-red);
}
.ia-mechlist .ia-row[data-click] {
  cursor: pointer;
}
/* inline fields keep their cell width inside boxes (the kit stretches them) */
.tui-box .ia-row > .tui-input {
  width: calc(var(--cols, 20) * var(--cw));
}

/* Battle screen: a full-body map with the frame,
   header strip, drawers and orders placed on the cell grid over it. */
.ia-at {
  position: absolute;
  white-space: pre;
}
.ia-frame {
  color: var(--tui-bright);
}
.ia-battle span[data-click],
.ia-tab-edge,
.ia-done {
  cursor: pointer;
}
.ia-battle span[data-click]:hover,
.ia-tab-edge:hover,
.ia-done:hover {
  color: var(--tui-accent);
}
.ia-warn {
  color: var(--tui-yellow);
}

/* Action Order: done units grayed out, removed units last in rust, struck */
.ia-row .ia-q-current {
  color: var(--tui-bright);
  font-weight: bold;
}
.ia-row .ia-q-acted,
.ia-row .ia-q-idle {
  color: var(--tui-dim);
}
.ia-row .ia-q-out {
  color: #b5803f;
  text-decoration: line-through;
}

/* SHEET drawers and tabs cover the map they sit on */
.ia-tab-edge,
.ia-drawer,
.ia-done {
  color: var(--tui-bright);
}
.ia-done .tui-body-inner {
  white-space: pre;
}
.ia-drawer {
  width: calc(23 * var(--cw));
}
.ia-drawer-line {
  display: flex;
  height: var(--ch);
  line-height: var(--ch);
}
.ia-drawer-line > * {
  flex: none;
}
.ia-sheet-head {
  background: #335533;
  cursor: pointer;
}
/* the key cursor on a record sheet (Tab / X gave it the focus) or a dialog hint: reverse video */
.ia-drawer [data-hint]:focus,
.ia-tab-edge[data-hint]:focus,
.ia-modal [data-hint]:focus {
  outline: none;
  background: var(--tui-sel-bg);
  color: var(--tui-sel-fg);
}
.ia-drawer [data-hint]:focus *,
.ia-tab-edge[data-hint]:focus *,
.ia-modal [data-hint]:focus * {
  color: inherit;
}

/* LOGS drawer: drops from under the header strip over the whole body */
.ia-logdrawer {
  width: calc(100 * var(--cw));
  color: var(--tui-bright);
  z-index: 5;
  isolation: isolate;
}
/* Drawers and tabs: 75% black over the map, inset half a cell like a kit box. */
.ia-fill {
  position: absolute;
  background: rgba(0, 0, 0, 0.75);
}
.ia-logdrawer > .ia-fill {
  z-index: -1;
}
.ia-inset {
  isolation: isolate;
}
.ia-inset::before {
  content: "";
  position: absolute;
  inset: calc(var(--ch) * var(--tui-inset-y)) calc(var(--cw) * var(--tui-inset-x));
  background: rgba(0, 0, 0, 0.75);
  z-index: -1;
}
.ia-logbody {
  display: flex;
  height: calc(24 * var(--ch));
}
.ia-logside {
  flex: none;
  width: var(--cw);
  line-height: var(--ch);
  white-space: pre;
  overflow: hidden;
}
.ia-logpane {
  flex: none;
  width: calc(98 * var(--cw));
  padding-left: var(--cw);
  box-sizing: border-box;
  color: var(--tui-fg);
}

/* Orders: centred at the top of the map, opaque letters on 50% black */
.ia-topmenu {
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.ia-menu {
  pointer-events: auto;
}
.ia-menu > .tui-bg {
  background: rgba(0, 0, 0, 0.75);
}
.ia-menu .sel {
  background: var(--tui-sel-bg);
  color: var(--tui-sel-fg);
}
/* orders while a record sheet has the key focus: the cursor as dark as the sheet header */
.ia-menu.ia-unfocused .sel {
  background: #335533;
  color: var(--tui-bright);
}

/* debrief map: the board fills the tab, the legend rides its bottom row on a translucent band */
.ia-mapbox {
  position: relative;
}
.ia-maplegend {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--ch);
  line-height: var(--ch);
  padding: 0 var(--cw);
  display: flex;
  justify-content: space-between;
  white-space: pre;
  background: rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
/* Choose 'Mech: the glyph avatar in the Selected box's inset (no fill of its own). */
.ia-avatar {
  color: var(--c-white);
}