/* Fog of Command. Built on shared/css/tsm.css tokens only (light and dark come from there).
   Your side's colour is --mine, the enemy's --foe: Blue/Red when defending, swapped when attacking. */
body { --mine: var(--blue); --foe: var(--red); --bound: color-mix(in srgb, #c77a2e 62%, var(--muted)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body { --bound: color-mix(in srgb, #e29a52 65%, var(--muted)); } }
:root[data-theme="dark"] body { --bound: color-mix(in srgb, #e29a52 65%, var(--muted)); }
body[data-side="red"] { --mine: var(--red); --foe: var(--blue); }
.fc-actions { max-width: 1400px; margin: 12px auto 0; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.fc-actions > div { display: flex; gap: 8px; flex-wrap: wrap; }
.fc-flag { margin: 0; font-size: 13px; padding: 5px 10px; border: 1px dashed var(--warn); border-radius: 4px; max-width: 80ch; }
.fc-flag b { color: var(--warn); }
.mt { margin-top: 14px !important; }
[hidden] { display: none !important; }

/* Start screen */
.fc-start { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; border-left: 4px solid var(--accent); }
.fc-start h2 { margin: 0; font-size: 22px; }
.fc-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fc-side { text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 2px solid var(--rule); border-radius: 4px; background: var(--panel); cursor: pointer; }
.fc-side b { font: 700 22px var(--display); }
.fc-side span { font-weight: 600; }
.fc-side small { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.fc-side.blue b { color: var(--blue); } .fc-side.red b { color: var(--red); }
.fc-side.blue:hover { border-color: var(--blue); background: var(--blue-soft); }
.fc-side.red:hover { border-color: var(--red); background: var(--red-soft); }
.fc-rules { margin: 0; font-size: 14.5px; max-width: 90ch; }
/* Offense-defense slider (start screen) */
.fc-od { display: flex; flex-direction: column; gap: 4px; max-width: 560px; padding: 8px 12px; border: 1px solid var(--rule); border-radius: 4px; background: var(--panel); }
.fc-od .slider { font-size: 14px; }
.fc-od .sl-h > span { font-weight: 600; }
.fc-od .sl-h { flex-wrap: wrap; }
.fc-od output { font-size: 13px; white-space: nowrap; }
.fc-od input[type="range"] { min-height: 28px; margin: 0; }
.fc-od input[type="range"]:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; }
.fc-od-ends { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; }
.fc-od p { margin: 0; }
.fc-odfx { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.fc-odfx[data-e="easier"] { color: var(--good); }
.fc-odfx[data-e="harder"] { color: var(--warn); }
@media (max-width: 520px) { .fc-sides { grid-template-columns: minmax(0, 1fr); } }

/* Play area: a sticky order bar, then the unit list beside the map (wide), or tabs (phone). */
.fc-play { display: flex; flex-direction: column; gap: 8px; }
.fc-obar { position: sticky; top: 0; z-index: 30; padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; border-top: 3px solid var(--mine); box-shadow: 0 6px 14px -12px rgba(0, 0, 0, .5); }
.fc-obar.done .fc-go .btn { opacity: .55; }
/* Game over: the bar stops following the page, so it does not cover the review, and offers a new game. */
body.fc-over .fc-obar { position: static; }
body.fc-over .fc-obar.done .fc-go .btn { opacity: 1; }
body.fc-over #undo, body.fc-over #end, body.fc-over .fc-tabs, #again { display: none; }
body.fc-over #again { display: inline-block; }
.fc-bar-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.fc-clock, .fc-mission, .fc-delay { margin: 0; }
.fc-clock b { font: 700 24px var(--display); margin-right: 4px; }
.fc-clock span { font-size: 12.5px; }
.fc-mission { font-size: 13.5px; font-weight: 600; flex: 1 1 180px; }
.fc-delay { font-size: 12.5px; padding: 3px 8px; border: 1px solid var(--rule); border-radius: 3px; }
.fc-delay:empty { display: none; }
.fc-delay.late { border-color: var(--warn); color: var(--warn); font-weight: 600; }
.fc-late { margin: 0; padding: 6px 10px; font-size: 13.5px; line-height: 1.4; border: 1px solid var(--warn); border-left-width: 5px; border-radius: 3px; background: color-mix(in srgb, var(--warn) 12%, var(--panel)); display: flex; gap: 8px; align-items: center; }
.fc-late svg { flex: none; width: 18px; height: 18px; }
.fc-go { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-left: auto; }
.fc-end { padding: 8px 20px; font-size: 14px; }
.fc-tabs { display: none; }
.fc-board { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: start; }
.fc-board:has(> .fc-ucol:not([hidden])) { grid-template-columns: 250px minmax(0, 1fr); }
.fc-ucol { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fc-uh { margin: 0; }
.fc-mcol { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fc-units { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; }
.fc-units button { text-align: left; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 6px; align-items: center; padding: 3px 7px 4px; min-height: 36px; border: 1px solid var(--rule); border-left: 3px solid var(--mine); border-radius: 3px; background: var(--panel); color: var(--ink); cursor: pointer; font-size: 12.5px; line-height: 1.2; position: relative; }
.fc-units button:hover { border-color: var(--muted); border-left-color: var(--mine); }
.fc-units button[aria-pressed="true"] { background: color-mix(in srgb, var(--mine) 14%, var(--panel)); border-color: var(--mine); outline: 2px solid var(--mine); outline-offset: -1px; }
.fc-units button:disabled { opacity: .4; cursor: default; }
.fc-units button.fc-arty { border-left-color: var(--c3); }
.fc-units button.idle { border-color: var(--warn); border-left-color: var(--warn); }
.fc-units .fc-key { grid-row: 1 / span 2; }
.fc-units b { font-size: 13px; display: flex; gap: 5px; align-items: center; min-width: 0; }
.fc-units small { color: var(--muted); font-size: 11px; grid-column: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-units small.warn { color: var(--warn); font-weight: 600; }
.fc-key { display: inline-block; font: 600 11px var(--mono); border: 1px solid var(--rule); border-radius: 3px; padding: 1px 5px; color: var(--muted); min-width: 1.6em; text-align: center; }
/* Strength bars, both teams alike: green is strength left, red is strength lost. */
:root { --hp: #2f9e44; --hp-lost: #d63a3a; }
.fc-ub { position: absolute; left: 3px; right: 3px; bottom: 1px; height: 5px; border-radius: 2px; background: var(--hp-lost); overflow: hidden; }
.fc-ub i { display: block; height: 100%; background: var(--hp); }
.fc-bclk { width: 13px; height: 13px; flex: none; }
.fc-bclk circle, .lg-clk circle, .fc-late svg circle { fill: var(--panel); stroke: var(--warn); stroke-width: 1.6; }
.fc-bclk path, .lg-clk path, .fc-late svg path { fill: none; stroke: var(--warn); stroke-width: 1.6; stroke-linecap: round; }
.fc-sel { font-size: 12.5px; line-height: 1.4; display: flex; flex-direction: column; gap: 6px; padding: 6px 8px; border: 1px solid var(--rule); border-radius: 3px; background: var(--panel); }
.fc-sel:empty { display: none; }
.fc-stance { display: inline-flex; gap: 4px; }
.fc-stance .btn { padding: 4px 10px; font-size: 12.5px; }
.fc-keys { margin: 0; font-size: 11.5px; }
.fc-say { margin: 0; padding: 6px 10px; font-size: 13.5px; line-height: 1.45; border-left: 3px solid var(--mine); background: var(--panel); border-radius: 0 3px 3px 0; min-height: 2.2em; }
.fc-say:empty { visibility: hidden; }
.fc-bad { color: var(--bad); }
@media (min-width: 1021px) and (max-width: 1500px) { .layout { grid-template-columns: minmax(0, 1fr) 300px; } }
@media (min-width: 1021px) { .fc-side-panel { position: sticky; top: 8px; max-height: calc(100vh - 16px); } .fc-side-panel .fc-feedsec { min-height: 0; flex: 1; } .fc-side-panel .fc-feed { max-height: none; flex: 1; } }
/* The map fits the screen height, so the order bar, units and map are all in view. */
.fc-mapbox svg { max-height: calc(100vh - 150px); }
@media (max-width: 760px) { .fc-board:has(> .fc-ucol:not([hidden])) { grid-template-columns: minmax(0, 1fr); } .fc-units { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
/* Phone: tabs switch between the map, the unit list and the reports while a game is on. */
@media (max-width: 640px) {
  .fc-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .fc-tabs button { padding: 7px 4px; font: 600 13.5px var(--body); border: 1px solid var(--rule); border-radius: 3px; background: var(--panel); color: var(--ink); cursor: pointer; }
  .fc-tabs button[aria-selected="true"] { background: var(--mine); color: var(--panel); border-color: var(--mine); }
  .fc-obar { padding: 6px 8px; gap: 5px; }
  .fc-clock b { font-size: 20px; }
  .fc-clock span { display: none; }
  .fc-bar-top { flex-wrap: nowrap; gap: 6px; }
  .fc-delay { font-size: 11.5px; padding: 2px 5px; white-space: nowrap; }
  .fc-go { gap: 5px; flex-wrap: nowrap; }
  #undo { padding: 6px 8px; }
  .fc-late { font-size: 12.5px; padding: 4px 8px; }
  .fc-mission, .fc-wide { display: none; }
  .fc-go { margin-left: auto; }
  .fc-end { padding: 7px 14px; }
  body.fc-live[data-tab="map"] .fc-ucol, body.fc-live[data-tab="units"] .fc-mapbox, body.fc-live[data-tab="units"] .fc-legend,
  body.fc-live[data-tab="reports"] .fc-board, body.fc-live:not([data-tab="reports"]) .fc-side-panel { display: none !important; }
  .fc-mapbox svg { max-height: none; }
  .fc-units { grid-template-columns: minmax(0, 1fr); }
  .fc-units button { min-height: 44px; }
  .fc-say { font-size: 13px; min-height: 0; }
  .fc-stance .btn { min-height: 40px; padding: 6px 14px; }
  .fc-replay input[type="range"] { height: 40px; margin: 0; }
}

/* Map */
.fc-mapbox { background: var(--land); }
.fc-ground { fill: var(--land); }
.fc-redzone { fill: color-mix(in srgb, var(--red) 7%, var(--land)); }
.fc-zone { font: italic 13px var(--body); fill: var(--faint); letter-spacing: .06em; }
.fc-ridge { fill: none; stroke: var(--coast); stroke-width: 7; stroke-linecap: round; opacity: .6; stroke-dasharray: 1 6; }
.fc-wood { fill: color-mix(in srgb, var(--good) 25%, var(--land)); }
.fc-marsh { stroke: color-mix(in srgb, var(--c7) 55%, var(--land)); stroke-width: 1.6; }
.fc-field { fill: none; stroke: color-mix(in srgb, var(--c5) 45%, var(--land)); stroke-width: 1.4; }
.fc-contour { fill: none; stroke: var(--coast); stroke-width: 1.1; opacity: .8; }
.fc-house { fill: var(--chip); stroke: var(--coast); }
.fc-river { fill: var(--sea); stroke: var(--coast); stroke-width: 1; }
.fc-bridge { fill: var(--panel); stroke: var(--muted); stroke-width: 1.5; }
.fc-road-case { stroke: var(--coast); stroke-width: 6; fill: none; opacity: .45; stroke-linecap: round; }
.fc-road { stroke: var(--land); stroke-width: 3; fill: none; stroke-linecap: round; }
.fc-road-case.slow { opacity: .3; }
.fc-road.slow { stroke-dasharray: 5 5; }
.fc-hub { fill: var(--land); stroke: var(--coast); stroke-width: 1.6; opacity: .9; }
.fc-tray { fill: color-mix(in srgb, var(--mine) 6%, var(--panel)); }
.fc-trayedge { stroke: var(--mine); stroke-width: 2; stroke-dasharray: 8 5; opacity: .7; }
.fc-trayh { font: 600 12px var(--body); fill: var(--muted); letter-spacing: .03em; }
.fc-trayt { font: 600 12px var(--mono); fill: var(--ink); }
.fc-trayn { font: italic 13px var(--body); fill: var(--muted); }
.fc-ghost { cursor: pointer; }
.fc-ghost rect { fill: color-mix(in srgb, var(--mine) 10%, var(--panel)); stroke: var(--mine); stroke-width: 1.4; stroke-dasharray: 4 3; }
.fc-ghost text { font: 600 11px var(--mono); fill: var(--mine); }
.fc-ghost.sel rect { stroke: var(--focus); stroke-width: 2.6; stroke-dasharray: none; }
.fc-ghost:hover rect { stroke-width: 2.2; }
.fc-ghost rect.fc-ghit { fill: transparent; stroke: none; }   /* the larger, invisible tap area */
.fc-clk circle { fill: var(--panel); stroke: var(--warn); stroke-width: 1.8; }
.fc-clk path { fill: none; stroke: var(--warn); stroke-width: 1.6; stroke-linecap: round; }
.fc-idle circle { fill: var(--warn); stroke: var(--panel); stroke-width: 1.4; }
.fc-idle text { font: 700 10px var(--body); fill: var(--panel); }
.fc-unit.idle .fc-ubox { stroke: var(--warn); }
.fc-unit[data-pick] { cursor: pointer; }
.fc-unit[data-pick]:hover .fc-ubox { stroke-width: 3; }
.fc-firetag rect { fill: var(--panel); stroke: var(--c3); stroke-width: 1.4; opacity: .96; }
.fc-ft1 { font: 700 11.5px var(--body); fill: var(--ink); }
.fc-ft2 { font: 500 10.5px var(--body); fill: var(--muted); }
body.fc-armed #map, body.fc-armed #map .fc-sec, body.fc-armed #map .fc-unit[data-pick], body.fc-armed #map .fc-ghost { cursor: crosshair; }
body.fc-armed .fc-sec:hover rect { fill: color-mix(in srgb, var(--c3) 14%, transparent); stroke: var(--c3); stroke-dasharray: 5 3; }
.fc-sec { cursor: pointer; outline: none; }
.fc-sec rect { fill: transparent; stroke: transparent; stroke-width: 1.2; transition: fill .12s; }
.fc-bound { fill: none; stroke: var(--bound); stroke-width: 1.5; stroke-dasharray: 6 4; pointer-events: none; }
.fc-bound.row { stroke-width: 2; opacity: 1; }
.fc-bound.col { opacity: .8; }
.fc-bound.edge { stroke-width: 1.5; opacity: .8; }
.fc-sec:hover rect { fill: color-mix(in srgb, var(--mine) 6%, transparent); }
.fc-sec.sel-can:hover rect { fill: color-mix(in srgb, var(--mine) 12%, transparent); stroke: var(--mine); }
.fc-sec:focus { outline: none; }
.fc-sec:focus-visible rect { stroke: var(--focus); stroke-width: 3.5; }
.fc-obj rect { stroke: var(--ink); stroke-width: 2; fill: color-mix(in srgb, var(--panel) 55%, transparent); }
.fc-name { font: 600 13px var(--body); fill: var(--muted); paint-order: stroke; stroke: var(--land); stroke-width: 3px; pointer-events: none; }
.fc-obj .fc-name { fill: var(--ink); font-size: 15px; }
#map { touch-action: manipulation; }
.fc-trk path { fill: color-mix(in srgb, var(--foe) 14%, var(--panel)); stroke: var(--foe); stroke-width: 2; }
.fc-trk.rough path { stroke-dasharray: 4 2.5; }
.fc-trk.old { opacity: .5; }
.fc-trk.truth path { fill: var(--foe); stroke-dasharray: none; }
.fc-trk.truth .fc-trk-l { fill: var(--panel); }
.fc-trk.decoy path { fill: none; stroke-dasharray: 2 3; }
.fc-trk-l { font: 700 12.5px var(--mono); fill: var(--foe); pointer-events: none; }
.fc-trk-n { font: 500 11px var(--mono); fill: var(--ink); paint-order: stroke; stroke: var(--land); stroke-width: 3px; pointer-events: none; }
.fc-move circle { fill: none; stroke: var(--foe); stroke-width: 1.8; stroke-dasharray: 3 3; }
.fc-move .fc-trk-l { fill: var(--foe); }
.fc-unit .fc-ubox { stroke-width: 2; }
.fc-unit.blue .fc-ubox { fill: color-mix(in srgb, var(--blue) 14%, var(--panel)); stroke: var(--blue); }
.fc-unit.red .fc-ubox { fill: color-mix(in srgb, var(--red) 14%, var(--panel)); stroke: var(--red); }
.fc-unit .glyph { fill: none; stroke-width: 1.5; }
.fc-unit.blue .glyph { stroke: var(--blue); } .fc-unit.red .glyph { stroke: var(--red); }
.fc-unit.give .fc-ubox { stroke-dasharray: 5 3; }
.fc-unit.sel .fc-ubox { stroke: var(--focus); stroke-width: 3.5; }
.fc-unit.moving { opacity: .8; }
.fc-ukey { font: 600 9.5px var(--mono); fill: var(--muted); }
.fc-dl { font: 700 13px var(--mono); fill: var(--red); }
.fc-ulab { font: 600 10.5px var(--body); fill: var(--ink); paint-order: stroke; stroke: var(--land); stroke-width: 3px; pointer-events: none; }
.fc-bar0 { fill: var(--hp-lost); }
.fc-bar { fill: var(--hp); }
.fc-route { fill: none; stroke: var(--mine); stroke-width: 2.4; opacity: .75; stroke-linejoin: round; }
.fc-route.pending { stroke-dasharray: 7 5; }
.fc-route.sel { opacity: 1; stroke-width: 3.2; }
.fc-headp { fill: var(--mine); }
.fc-fight circle { fill: color-mix(in srgb, var(--accent) 25%, var(--panel)); stroke: var(--accent); stroke-width: 2; }
.fc-fight path { stroke: var(--accent); stroke-width: 2.5; }
.fc-hit path { fill: color-mix(in srgb, var(--warn) 35%, var(--panel)); stroke: var(--warn); stroke-width: 1.5; }
.fc-target circle { fill: none; stroke: var(--c3); stroke-width: 2.2; }
.fc-target path { stroke: var(--c3); stroke-width: 2.2; }
#map text { user-select: none; -webkit-user-select: none; }
.fc-viewbar { display: flex; justify-content: center; }
.fc-views { display: flex; gap: 4px; background: var(--panel); padding: 4px; border-radius: 4px; border: 1px solid var(--rule); pointer-events: auto; }
@media (max-width: 640px) { .fc-name { font-size: 16px; } .fc-obj .fc-name { font-size: 18px; } .fc-zone { font-size: 15px; } .fc-ulab { font-size: 12.5px; } .fc-ukey { font-size: 12.5px; } .fc-trk-n { font-size: 12px; } .fc-trk-l { font-size: 13px; } .fc-ghost text { font-size: 11.5px; } .fc-trayh, .fc-trayt { font-size: 15px; } .fc-ft1 { font-size: 14px; } .fc-ft2 { font-size: 13px; } }
.fc-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; padding: 0 2px; color: var(--muted); }
.fc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.fc-legend i { display: inline-block; width: 14px; height: 10px; flex: none; }
.lg-hp { width: 28px !important; height: 6px !important; border-radius: 2px; background: linear-gradient(90deg, var(--hp) 0 65%, var(--hp-lost) 65% 100%); }
.lg-mine { border: 2px solid var(--mine); background: color-mix(in srgb, var(--mine) 14%, transparent); }
.lg-foe { width: 10px !important; height: 10px !important; border: 2px solid var(--foe); transform: rotate(45deg); }
.lg-move { border: 1.8px dashed var(--foe); border-radius: 50%; width: 12px !important; height: 12px !important; }
.lg-route { height: 0 !important; width: 22px !important; border-top: 2.4px dashed var(--mine); }
.lg-target { border: 2px solid var(--c3); border-radius: 50%; }
.lg-fight { border: 2px solid var(--accent); border-radius: 50%; }
.lg-bound { height: 0 !important; width: 22px !important; border-top: 2px dashed var(--bound); }
.lg-clk { width: 14px; height: 14px; flex: none; }
.lg-idle { width: 13px !important; height: 13px !important; border-radius: 50%; background: var(--warn); color: var(--panel); font: 700 10px/13px var(--body); font-style: normal; text-align: center; }

/* Panel: status and reports */
.fc-feedsec { gap: 6px; }
.fc-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; line-height: 1.42; max-height: 620px; overflow-y: auto; }
.fc-fh > span { display: block; font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.fc-fh ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.fc-fh li { border-left: 3px solid var(--rule); padding: 1px 8px; }
.fc-fh li.bad { border-left-color: var(--bad); }
.fc-fh li.good { border-left-color: var(--good); }
.fc-fh li.seen { border-left-color: var(--foe); }
.fc-fh li.muted { color: var(--muted); }
.fc-fh:first-child li { background: color-mix(in srgb, var(--chip) 60%, transparent); }
.fc-fh li.warn { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.fc-old details > summary { cursor: pointer; font-size: 11px; color: var(--muted); list-style-position: inside; padding: 2px 0; }
.fc-old details > summary small { font-size: 11px; margin-left: 6px; }
.fc-old details[open] > summary { margin-bottom: 3px; }
@media (max-width: 640px) { .fc-old details > summary { padding: 10px 0; } }   /* a thumb-sized fold toggle */

/* Review */
.fc-aar { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.fc-moments { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; line-height: 1.45; }
.fc-moments li { border-left: 3px solid var(--rule); padding: 2px 10px; }
.fc-moments li.good { border-left-color: var(--good); } .fc-moments li.bad { border-left-color: var(--bad); }
.fc-moments .num { color: var(--muted); font-size: 12px; margin-right: 6px; }
.fc-replay { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: end; }
.fc-chart { width: 100%; height: auto; }
.fc-grid { stroke: var(--rule); }
.fc-l { fill: none; stroke-width: 2.2; }
.fc-l.true { stroke: var(--foe); }
.fc-l.bel { stroke: var(--mine); stroke-dasharray: 6 4; }
.fc-now { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 2 3; }
.fc-ctitle { font: 600 12.5px var(--body); fill: var(--ink); }
.fc-ctitle.main { fill: var(--foe); }
.fc-axt { font: 500 11px var(--body); fill: var(--muted); }
.fc-lgt { font: 500 12px var(--body); fill: var(--ink); }
.fc-aar-cols { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 16px; }
.fc-aar-cols .eyebrow { margin-bottom: 6px; }
.fc-fog { display: flex; flex-direction: column; gap: 6px; min-height: 236px; }
@media (max-width: 720px) { .fc-fog { min-height: 330px; } }
.fc-fogrow { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 56px; gap: 10px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--rule); }
.fc-fogrow.you .fc-fogl b { color: var(--mine); }
.fc-fogl { display: flex; flex-direction: column; font-size: 12.5px; }
.fc-fogl small, .fc-fogn small { color: var(--muted); font-size: 11px; }
.fc-fogbar { height: 10px; background: var(--rule); border-radius: 5px; overflow: hidden; }
.fc-fogbar i { display: block; height: 100%; background: var(--good); }
.fc-fogn { display: flex; flex-direction: column; text-align: right; }
.fc-fogn b { font: 700 17px var(--display); }
.fc-fogsum { margin: 0; font-size: 14px; line-height: 1.5; border-left: 4px solid var(--accent); padding: 4px 10px; }
.fc-fogsum { min-height: 4.6em; }
.fc-aar .fc-go { margin-left: 0; }
@media (max-width: 720px) { .fc-aar-cols { grid-template-columns: minmax(0, 1fr); } .fc-fogrow { grid-template-columns: minmax(0, 1fr) 56px; } .fc-fogbar { grid-column: 1 / -1; grid-row: 2; } .fc-replay { grid-template-columns: minmax(0, 1fr); } }

/* Below */
.fc-more { margin-top: 10px; }
.fc-more summary { cursor: pointer; font-family: var(--display); font-weight: 600; font-size: 17px; padding: 6px 0; }
.fc-more[open] summary { margin-bottom: 8px; }
.fc-more h3 { margin: 16px 0 6px; font-size: 17px; }
.fc-more .tablewrap { margin: 8px 0; }
.fc-quotes { font-size: 13.5px; padding-left: 1.1em; margin: 0; display: flex; flex-direction: column; gap: 8px; }


/* Your artillery, fixed on the map (bottom-right, behind your side). */
.fc-bat { cursor: pointer; outline: none; }
.fc-bat .fc-batdot { fill: var(--mine); stroke: none; }
.fc-bat.fired { opacity: .7; }
.fc-bat:focus-visible .fc-ubox { stroke: var(--focus); stroke-width: 3.5; }
.fc-bat:hover .fc-ubox { stroke-width: 3; }
.lg-bat { border: 2px solid var(--mine); background: radial-gradient(circle, var(--mine) 0 2.5px, transparent 3px); }

/* Motion (js/fx.js). The pop and light-up animate the marker's shape, never its position. */
@keyframes fc-pop { from { opacity: 0; transform: scale(.35); } to { opacity: 1; transform: none; } }
.fc-trk.fc-pop > * { transform-box: fill-box; transform-origin: center; animation: fc-pop .45s cubic-bezier(.2, .9, .3, 1.2) var(--d, 0ms) both; }
@keyframes fc-lit { 0% { stroke-width: 2; } 30% { stroke-width: 5; filter: drop-shadow(0 0 6px var(--foe)); } 100% { stroke-width: 2; } }
.fc-trk.fc-lit path { animation: fc-lit .9s ease-out; }
@media (prefers-reduced-motion: reduce) { .fc-trk.fc-pop > *, .fc-trk.fc-lit path { animation: none; } }

/* Trailer look (Interactive Deterrence games, when the player picks it). The shared tokens are remapped by
   shared/css/trailer.css; these are the tool's own: the dark-mode data palette whatever the OS setting, the
   orange sector lines, mono plotting labels, and glow on the moments that matter. */
:root[data-skin="trailer"] { --c1: #72a0ff; --c2: #ff8a3d; --c3: #2cc2ac; --c4: #d77ab0; --c5: #efc12f; --c6: #a68ef0; --c7: #63b3d6; --c8: #c8b48a; }
:root[data-skin="trailer"] body { --bound: color-mix(in srgb, #e29a52 72%, var(--muted)); }
:root[data-skin="trailer"] .fc-mapbox { background: var(--land); box-shadow: 0 24px 60px -30px #000, inset 0 0 0 1px var(--rule); }
:root[data-skin="trailer"] .fc-ground { fill: #0e1f17; }
:root[data-skin="trailer"] .fc-redzone { fill: color-mix(in srgb, var(--red) 9%, #0e1f17); }
:root[data-skin="trailer"] .fc-road { stroke: #0e1f17; }
:root[data-skin="trailer"] .fc-name { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; stroke: #0e1f17; }
:root[data-skin="trailer"] .fc-obj .fc-name { font: italic 500 17px var(--display); letter-spacing: 0; text-transform: none; fill: var(--accent); }
:root[data-skin="trailer"] .fc-obj rect { stroke: var(--accent); stroke-width: 1.6; fill: color-mix(in srgb, var(--accent) 7%, transparent); }
:root[data-skin="trailer"] .fc-zone { font: italic 15px var(--display); fill: var(--muted); }
:root[data-skin="trailer"] .fc-ulab, :root[data-skin="trailer"] .fc-trk-n { stroke: #0e1f17; }
:root[data-skin="trailer"] .fc-ulab { font: 500 9.5px var(--mono); }
:root[data-skin="trailer"] .fc-unit.sel .fc-ubox, :root[data-skin="trailer"] .fc-bat:focus-visible .fc-ubox { filter: drop-shadow(0 0 5px var(--focus)); }
:root[data-skin="trailer"] .fc-fight, :root[data-skin="trailer"] .fc-target { filter: drop-shadow(0 0 5px var(--accent)); }
:root[data-skin="trailer"] .fc-target circle, :root[data-skin="trailer"] .fc-target path { stroke: var(--accent); }
:root[data-skin="trailer"] .lg-target { border-color: var(--accent); }
:root[data-skin="trailer"] .fc-trk.truth path { filter: drop-shadow(0 0 4px var(--foe)); }
:root[data-skin="trailer"] .fc-fx > * { filter: drop-shadow(0 0 4px rgba(240, 169, 59, .55)); }
:root[data-skin="trailer"] .fc-say { background: color-mix(in srgb, var(--bg) 70%, transparent); }
:root[data-skin="trailer"] .fc-clock b { color: var(--accent); text-shadow: 0 0 18px rgba(240, 169, 59, .35); }
:root[data-skin="trailer"] .fc-start { border-left-color: var(--accent); }
:root[data-skin="trailer"] .fc-side { background: color-mix(in srgb, var(--chip) 80%, transparent); }
:root[data-skin="trailer"] .fc-side b { font: italic 500 26px var(--display); }
:root[data-skin="trailer"] .fc-od { background: color-mix(in srgb, var(--chip) 80%, transparent); }
:root[data-skin="trailer"] .fc-od input[type="range"] { accent-color: var(--accent); }
:root[data-skin="trailer"] .fc-fogbar i { background: var(--good); box-shadow: 0 0 10px -2px var(--good); }
:root[data-skin="trailer"] .fc-fogn b { font: 600 16px var(--mono); }
:root[data-skin="trailer"] .fc-fh:first-child li { background: color-mix(in srgb, var(--accent) 6%, transparent); }
:root[data-skin="trailer"] #aar-arty dd { white-space: nowrap; }
@media (max-width: 640px) { :root[data-skin="trailer"] .fc-name { font-size: 16px; letter-spacing: .02em; } :root[data-skin="trailer"] .fc-obj .fc-name { font-size: 21px; } :root[data-skin="trailer"] .fc-zone { font-size: 16px; } :root[data-skin="trailer"] .fc-ulab { font-size: 12.5px; } }

/* The decoy note at the start of a game: Red's how-to, or Blue's warning. */
.fc-decoy { position: relative; margin: 0 0 8px; padding: 8px 36px 8px 10px; font-size: 13px; line-height: 1.4; border: 1px solid var(--warn); border-left-width: 5px; border-radius: 3px; background: color-mix(in srgb, var(--warn) 10%, var(--panel)); }
.fc-decoy[hidden] { display: none; }
.fc-decoy b { color: var(--warn); }
.fc-decoy-x { position: absolute; top: 0; right: 0; width: 36px; height: 36px; border: 0; background: none; font-size: 20px; line-height: 1; cursor: pointer; color: var(--muted); padding: 0; }
.fc-mcol > .fc-decoy { margin: 0; }   /* on a phone the note sits above the map (moved there by app.js) */