.fm-workspace {
  --fm-front: #426447;
  --fm-middle: #7e5f27;
  --fm-back: #456777;
  --fm-board-light: #b8cbaa;
  --fm-board-dark: #a9bf9e;
  color: var(--ink, #20322d);
  min-width: 0;
}
.fm-workspace *, .fm-workspace *::before, .fm-workspace *::after { box-sizing: border-box; }
.fm-workspace button, .fm-workspace input { font: inherit; }
.fm-workspace button { cursor: pointer; }
.fm-workspace button:focus-visible, .fm-workspace input:focus-visible { outline: 3px solid #477d61; outline-offset: 4px; }
.fm-workspace h3, .fm-workspace h4, .fm-workspace p, .fm-workspace ul, .fm-workspace ol, .fm-workspace dl, .fm-workspace dd { margin: 0; }
.fm-icon { width: 18px; height: 18px; flex: 0 0 auto; vertical-align: middle; }
.fm-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.fm-view-tabs { display: inline-flex; gap: 5px; padding: 5px; border: 1px solid var(--line, #e0e5db); border-radius: 12px; background: #eaeee5; }
.fm-view-tab { min-height: 42px; padding: 10px 22px; border: 0; border-radius: 8px; background: transparent; color: var(--muted, #6d7870); font-size: 14px !important; font-weight: 600 !important; white-space: nowrap; transition: color .16s, background .16s, box-shadow .16s; }
.fm-view-tab:hover { color: var(--ink, #20322d); background: #f4f6ef; }
.fm-view-tab[aria-selected="true"] { background: var(--surface, #fff); color: var(--accent, #2c694f); box-shadow: 0 2px 5px #20322d09; }
.fm-name-toggle { display: flex; align-items: center; gap: 8px; position: relative; font-size: 13px; color: var(--muted, #6d7870); cursor: pointer; white-space: nowrap; min-height: 44px; }
.fm-name-toggle input { width: 38px; height: 22px; position: absolute; left: 0; opacity: 0; margin: 0; cursor: pointer; }
.fm-switch { display: inline-block; width: 36px; height: 21px; padding: 3px; background: #c9d1c5; border-radius: 20px; transition: background .16s; }
.fm-switch::after { content: ''; display: block; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #20322d20; transition: transform .16s; }
.fm-name-toggle input:checked + .fm-switch { background: var(--accent, #2c694f); }
.fm-name-toggle input:checked + .fm-switch::after { transform: translateX(15px); }
.fm-name-toggle input:focus-visible + .fm-switch { outline: 3px solid #477d61; outline-offset: 4px; }
.fm-layout { display: grid; grid-template-columns: minmax(0, 1fr) 296px; gap: 20px; align-items: start; }
.fm-board-card, .fm-inspector, .fm-range-panel, .fm-tips { border: 1px solid var(--line, #e0e5db); border-radius: 16px; background: var(--surface, #fff); }
.fm-board-card { min-width: 0; padding: 24px 20px 18px; }
.fm-board-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 19px; padding: 0 4px; }
.fm-board-heading h3 { font-size: 19px; line-height: 1.4; font-weight: 700; letter-spacing: -.03em; }
.fm-board-heading p { color: var(--muted, #6d7870); font-size: 12px; margin-top: 5px; line-height: 1.5; }
.fm-scale { flex-shrink: 0; padding: 7px 9px; background: #f3f5ef; border: 1px solid #e7ebe1; border-radius: 6px; color: #5b6a5e; font-size: 11px; font-variant-numeric: tabular-nums; }
.fm-scale span { padding: 0 3px; color: #98a391; }
.fm-board-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #b6c3b2 #f1f4eb; }
.fm-field { min-width: 444px; max-width: 780px; margin: 0 auto; padding-bottom: 1px; }
.fm-direction { min-height: 30px; display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 11px; font-weight: 600; letter-spacing: .17em; }
.fm-direction .fm-icon { width: 14px; height: 14px; }
.fm-entry { color: #8b5c48; }
.fm-base { color: var(--accent, #2c694f); padding-top: 5px; }
.fm-column-axis { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); height: 23px; margin: 0 24px; align-items: center; text-align: center; color: #63715d; font-size: 10px; font-variant-numeric: tabular-nums; }
.fm-board-axes { display: grid; grid-template-columns: 24px minmax(396px, 1fr) 24px; }
.fm-row-axis { display: grid; grid-template-rows: repeat(10, minmax(0, 1fr)); justify-content: center; align-items: center; color: #63715d; font-size: 10px; font-variant-numeric: tabular-nums; }
.fm-arena { position: relative; width: 100%; overflow: hidden; isolation: isolate; border-radius: 6px; outline: 1px solid #819776; background-color: var(--fm-board-light); background-image: conic-gradient(var(--fm-board-light) 25%, var(--fm-board-dark) 0 50%, var(--fm-board-light) 0 75%, var(--fm-board-dark) 0); background-size: calc(200% / var(--board-columns)) calc(200% / var(--board-rows)); }
.fm-grid { position: absolute; z-index: 2; inset: 0; display: grid; grid-template-rows: repeat(var(--board-rows), minmax(0, 1fr)); }
.fm-grid-row { display: grid; grid-template-columns: repeat(var(--board-columns), minmax(0, 1fr)); min-height: 0; }
.fm-grid-square { min-width: 0; min-height: 0; position: relative; box-shadow: inset -1px -1px 0 #71836521; }
.fm-cell { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: relative; padding: 0; border: 0; border-radius: 0; background: transparent; color: #193526; -webkit-tap-highlight-color: transparent; touch-action: manipulation; scroll-margin-block: 90px; transition: background .15s; }
.fm-cell:hover { background: #f7ffe93b; }
.fm-cell.fm-selected { background: #fff9d929; box-shadow: inset 0 0 0 2px #24543f; z-index: 4; }
.fm-cell.fm-selected::after { content: ''; position: absolute; inset: 3px; border: 1px solid #effbb9d9; pointer-events: none; }
.fm-cell:focus-visible { outline: 3px solid #fff !important; outline-offset: -5px !important; z-index: 5; box-shadow: inset 0 0 0 3px #183f2c; }
.fm-avatar { position: relative; width: 77%; height: 77%; display: flex; align-items: center; justify-content: center; border: 2px solid var(--unit-color); border-radius: 50%; background: #f7fff33d; box-shadow: 0 1px 3px #28412119, inset 0 0 0 1px #ffffff85; }
.fm-avatar img { display: block; width: 116%; height: 116%; max-width: none; object-fit: contain; flex: 0 0 auto; filter: drop-shadow(0 2px 1px #1f352128); pointer-events: none; user-select: none; }
.fm-image-placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: #36593d; font-size: 19px; font-weight: 600; line-height: 1; }
.fm-has-image .fm-image-placeholder { display: none; }
.fm-type-mark { position: absolute; bottom: 3px; right: 3px; min-width: 15px; height: 15px; border: 1px solid var(--unit-color); border-radius: 50%; background: color-mix(in srgb, var(--unit-color) 28%, white); color: #183325; font-size: 8px; font-weight: 700; line-height: 13px; text-align: center; box-shadow: 0 1px 2px #34493033; }
.fm-enemy .fm-avatar { border-style: dashed; border-width: 2px; background: #eee1d9aa; }
.fm-enemy .fm-avatar img { filter: grayscale(.35) drop-shadow(0 2px 1px #1f352128); }
.fm-enemy-mark { position: absolute; top: 2px; left: 2px; padding: 0 3px; border: 1px solid #fef2e6; border-radius: 3px; color: #fff; background: #964c3a; font-size: 9px; line-height: 14px; }
.fm-empty-dot { display: block; width: 3px; height: 3px; border-radius: 50%; background: #42643b3d; }
.fm-unit-name { display: none; }
.fm-show-names .fm-avatar { width: 66%; height: 66%; transform: translateY(-8%); }
.fm-show-names .fm-type-mark { bottom: auto; top: 2px; right: 2px; }
.fm-show-names .fm-unit-name { position: absolute; display: block; bottom: 2px; right: 2px; left: 2px; padding: 1px 2px; border-radius: 3px; color: #193526; background: #faffefe8; font-size: 9px; line-height: 12px; text-align: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.fm-zone-rail { padding-left: 7px; display: grid; grid-template-rows: 2fr 4fr 4fr; gap: 3px; }
.fm-zone-rail span { display: flex; align-items: center; justify-content: center; border-left: 2px solid currentColor; border-radius: 0 3px 3px 0; font-size: 9px; font-weight: 500; writing-mode: vertical-rl; letter-spacing: .25em; }
.fm-zone-front { color: var(--fm-front); background-color: #e8efe5; }
.fm-zone-middle { color: var(--fm-middle); background-color: #f5f0e3; }
.fm-zone-back { color: var(--fm-back); background-color: #e9f0f1; }
.fm-zone-boundary { position: absolute; left: 0; right: 0; border-top: 1px dashed #47673d5c; z-index: 0; pointer-events: none; }
.fm-boundary-front { top: 20%; }
.fm-boundary-back { top: 60%; }
.fm-range-overlay { position: absolute; z-index: 1; display: block; width: 100%; height: 100%; inset: 0; overflow: hidden; pointer-events: none; }
.fm-board-instruction { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding: 15px 4px 16px; color: var(--muted, #6d7870); font-size: 11px; line-height: 1.6; border-bottom: 1px solid var(--line, #e0e5db); }
.fm-board-instruction .fm-icon { width: 15px; height: 15px; }
.fm-selection-coordinate { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--accent, #2c694f); font-size: 10px; font-weight: 600; }
.fm-board-legends { display: grid; grid-template-columns: minmax(0, 1fr) 148px; gap: 18px; padding: 18px 4px 0; }
.fm-legend-block h4 { font-size: 11px; font-weight: 600; color: #5f6e56; margin-bottom: 11px; }
.fm-type-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; list-style: none; padding: 0; }
.fm-type-legend li { display: flex; align-items: center; gap: 5px; color: #5f6b60; font-size: 10px; line-height: 18px; }
.fm-type-swatch { display: inline-block; width: 17px; height: 17px; border: 1px solid var(--unit-color); border-radius: 50%; color: #183325; background: color-mix(in srgb, var(--unit-color) 28%, white); font-size: 8px; font-weight: 700; text-align: center; line-height: 15px; }
.fm-zones-legend { padding-left: 18px; border-left: 1px solid var(--line, #e0e5db); }
.fm-zones-legend ul { display: grid; gap: 6px; padding: 0; list-style: none; }
.fm-zones-legend li { display: flex; gap: 6px; align-items: center; font-size: 10px; color: #5f6b60; white-space: nowrap; }
.fm-zone-key { width: 14px; height: 12px; border-left: 3px solid currentColor; border-radius: 2px; }
.fm-zones-legend small { font-size: 9px; color: #69775e; margin-left: auto; }
.fm-enemy-legend { display: flex; align-items: center; gap: 7px; margin: 14px 4px 0 !important; color: #7d695d; font-size: 10px; }
.fm-enemy-legend[hidden] { display: none; }
.fm-enemy-swatch { display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1px dashed #94614b; border-radius: 50%; font-size: 9px; }
.fm-fidelity-note { padding: 14px 4px 0; color: #65735c; font-size: 10px; line-height: 1.8; }
.fm-scroll-hint { display: none; }
.fm-sidebar { display: grid; gap: 16px; min-width: 0; }
.fm-inspector { padding: 20px; overflow: hidden; }
.fm-panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.fm-panel-heading h3 { font-size: 13px; font-weight: 700; }
.fm-panel-heading > span { font-size: 10px; color: var(--muted, #6d7870); }
.fm-panel-heading > .fm-icon { color: #84937b; width: 16px; height: 16px; }
.fm-selected-art { position: relative; display: flex; align-items: center; justify-content: center; height: 151px; margin: 12px -4px 16px; border-radius: 11px; background-color: #f1f5eb; background-image: linear-gradient(#dde6d833 1px, transparent 1px), linear-gradient(90deg, #dde6d833 1px, transparent 1px); background-size: 18px 18px; }
.fm-selected-art::after { position: absolute; content: ''; width: 120px; height: 120px; border: 1px solid #d3dfca; border-radius: 50%; pointer-events: none; }
.fm-large-avatar { width: 98px; height: 98px; border: 1px solid var(--unit-color); background: #f9fcf277; box-shadow: none; z-index: 1; }
.fm-large-avatar img { width: 144px; height: 144px; filter: drop-shadow(0 6px 3px #37523418); }
.fm-large-avatar .fm-image-placeholder { font-size: 36px; }
.fm-art-coordinate { position: absolute; bottom: 9px; right: 10px; font-variant-numeric: tabular-nums; font-size: 9px; color: #607252; letter-spacing: .12em; }
.fm-selected-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; align-items: center; }
.fm-type-label { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: #627157; }
.fm-type-label i { display: inline-block; height: 7px; width: 7px; border-radius: 50%; }
.fm-hostile-label, .fm-uncertain-label { display: inline-block; padding: 1px 5px; border-radius: 4px; color: #935d45; background: #f9eee5; font-size: 9px; }
.fm-uncertain-label { color: #79672f; background: #f6f2e6; }
.fm-selected-name { font-size: 23px; line-height: 1.3; font-weight: 700; letter-spacing: -.025em; overflow-wrap: anywhere; }
.fm-unit-coordinate { color: #617252; font-size: 11px; font-variant-numeric: tabular-nums; margin-top: 6px !important; line-height: 1.5; }
.fm-selected-note { font-size: 12px; line-height: 1.9; color: #66715f; margin-top: 15px !important; }
.fm-unit-facts { border-top: 1px solid var(--line, #e0e5db); margin-top: 17px !important; padding-top: 12px; display: grid; gap: 7px; }
.fm-unit-facts > div { display: flex; align-items: flex-start; gap: 8px; justify-content: space-between; font-size: 10px; line-height: 1.5; }
.fm-unit-facts dt { color: #617351; flex-shrink: 0; }
.fm-unit-facts dd { text-align: right; color: #516449; }
.fm-open-unit { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid #d5dfcc; border-radius: 8px; margin-top: 18px; color: var(--accent, #2c694f); background: #f4f7ef; font-size: 12px !important; font-weight: 600 !important; transition: border-color .15s, background .15s; }
.fm-open-unit:hover { background: #e9f0e0; border-color: #a6bb95; }
.fm-open-unit .fm-icon { width: 16px; height: 16px; }
.fm-identity-note { margin-top: 12px !important; padding: 8px 10px; border-left: 2px solid #d6c385; background: #faf7ed; font-size: 10px; line-height: 1.7; color: #756332; }
.fm-empty-preview { display: grid; place-items: center; height: 142px; margin-bottom: 16px; color: #aec09f; }
.fm-empty-preview .fm-icon { width: 54px; height: 54px; stroke-width: .8; }
.fm-range-panel { padding: 19px 16px 16px; }
.fm-range-panel .fm-panel-heading { padding: 0 3px; }
.fm-range-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 3px; margin-top: 13px; background: #f0f3ea; border-radius: 7px; }
.fm-range-modes button { min-height: 33px; padding: 5px 2px; border: 0; border-radius: 5px; color: #5f6c57; background: transparent; font-size: 10px !important; white-space: nowrap; }
.fm-range-modes button[aria-pressed="true"] { color: var(--accent, #2c694f); background: #fff; box-shadow: 0 1px 3px #27452c0b; font-weight: 600; }
.fm-range-modes button:hover { color: var(--ink, #20322d); }
.fm-range-list { margin-top: 7px; }
.fm-range-option { display: grid; grid-template-columns: 14px 23px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 12px 3px; border-bottom: 1px solid #edf0e8; cursor: pointer; }
.fm-range-option:last-child { border-bottom: 0; }
.fm-range-option input { width: 13px; height: 13px; padding: 0; margin: 0; accent-color: var(--range-color); cursor: pointer; }
.fm-range-swatch { width: 23px; height: 14px; border: 2px var(--range-style) var(--range-color); border-radius: 50%; opacity: .6; }
.fm-range-active .fm-range-swatch { background: color-mix(in srgb, var(--range-color) 12%, transparent); opacity: 1; }
.fm-range-description { display: flex; flex-direction: column; gap: 3px; }
.fm-range-description strong { color: #59674f; font-size: 11px; line-height: 1.4; font-weight: 600; overflow-wrap: anywhere; }
.fm-range-active .fm-range-description strong { color: var(--ink, #20322d); }
.fm-range-description > span { color: #637457; font-size: 9px; line-height: 1.5; }
.fm-range-description > small { color: #66775b; font-size: 9px; font-variant-numeric: tabular-nums; }
.fm-radius { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 500; line-height: 1.3; color: #536746; }
.fm-radius small { color: #63745a; font-size: 9px; font-weight: 400; }
.fm-range-hint { margin: 9px 3px 0 !important; padding-top: 11px; border-top: 1px solid #e8ede1; color: #65775a; font-size: 10px; line-height: 1.7; }
.fm-tips { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 25px; margin-top: 20px; padding: 27px; }
.fm-eyebrow { display: block; color: #637650; font-size: 10px; font-weight: 600; letter-spacing: .12em; margin-bottom: 8px; }
.fm-tips-heading h3 { color: var(--ink, #20322d); font-size: 21px; line-height: 1.4; font-weight: 700; letter-spacing: -.02em; }
.fm-tips-heading p { margin-top: 10px; color: #65775a; font-size: 11px; line-height: 1.7; max-width: 150px; }
.fm-tips-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 26px; list-style: none; padding: 0; counter-reset: fm-tip; }
.fm-tips-list li { position: relative; padding-left: 25px; color: #647456; font-size: 11px; line-height: 1.85; counter-increment: fm-tip; }
.fm-tips-list li::before { content: counter(fm-tip, decimal-leading-zero); position: absolute; left: 0; top: 0; color: #62734f; font-size: 10px; font-variant-numeric: tabular-nums; }
.fm-tips-list strong { color: #425939; font-weight: 600; }
.fm-sr-only { width: 1px; height: 1px; padding: 0; position: absolute; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (min-width: 1450px) {
  .fm-layout { grid-template-columns: minmax(0, 1fr) 315px; gap: 24px; }
  .fm-inspector { padding: 23px; }
  .fm-selected-art { height: 170px; }
}
@media (max-width: 1100px) {
  .fm-layout { grid-template-columns: minmax(0, 1fr); }
  .fm-sidebar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .fm-selected-art { height: 142px; }
  .fm-tips { grid-template-columns: 1fr; gap: 19px; }
  .fm-tips-heading p { max-width: none; }
  .fm-tips-heading { padding-bottom: 16px; border-bottom: 1px solid var(--line, #e0e5db); }
  .fm-board-legends { grid-template-columns: minmax(0, 1fr) 166px; }
}
@media (max-width: 700px) {
  .fm-toolbar { flex-wrap: wrap; gap: 8px; margin-bottom: 15px; }
  .fm-view-tabs { width: 100%; }
  .fm-view-tab { flex: 1; padding: 8px 7px; font-size: 12px !important; min-height: 40px; }
  .fm-name-toggle { margin-left: auto; min-height: 32px; font-size: 11px; }
  .fm-board-card { padding: 18px 12px 14px; }
  .fm-board-heading { margin-bottom: 13px; padding: 0 3px; }
  .fm-board-heading h3 { font-size: 17px; }
  .fm-board-heading p { font-size: 10px; }
  .fm-scale { font-size: 9px; padding: 6px; }
  .fm-scale span { padding: 0 1px; }
  .fm-scroll-hint { display: flex; gap: 6px; align-items: center; padding: 0 3px 9px; color: #617351; font-size: 10px; }
  .fm-scroll-hint .fm-icon { width: 14px; height: 14px; }
  .fm-board-instruction { font-size: 10px; gap: 5px; }
  .fm-selection-coordinate { width: 100%; margin-left: 20px; }
  .fm-sidebar { grid-template-columns: 1fr; }
  .fm-board-legends { grid-template-columns: 1fr; gap: 18px; }
  .fm-zones-legend { padding: 0; border: 0; }
  .fm-zones-legend ul { display: flex; flex-wrap: wrap; gap: 8px 16px; }
  .fm-zones-legend small { margin-left: 0; }
  .fm-type-legend { gap: 8px 13px; }
  .fm-tips { padding: 21px 19px; }
  .fm-tips-list { grid-template-columns: 1fr; gap: 16px; }
  .fm-tips-list li { font-size: 12px; }
  .fm-inspector { padding: 20px; }
  .fm-selected-art { height: 151px; }
  .fm-range-panel { padding: 20px; }
  .fm-range-option { grid-template-columns: 18px 25px minmax(0, 1fr) auto; gap: 11px; padding: 13px 2px; }
  .fm-range-description strong { font-size: 12px; }
  .fm-range-description > span, .fm-range-description > small { font-size: 10px; }
  .fm-range-modes button { min-height: 38px; font-size: 11px !important; }
  .fm-selected-note { font-size: 13px; }
  .fm-unit-facts > div { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .fm-workspace *, .fm-workspace *::before, .fm-workspace *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}