/* Brembozio90 — charcoal table, ivory cards, rust-orange markers.
   Presentation only. Original illustrations and game rules are untouched.
   Loaded last: shared tokens, screens, viewport layout, then responsive rules. */
:root {
  color-scheme: dark;
  font-family: "Segoe UI", system-ui, sans-serif;
  --bg: #161819;
  --panel: #222526;
  --panel2: #2c3031;
  --line: #424646;
  --text: #eeeae1;
  --muted: #b0b3ae;
  --accent: #e5915d;
  --accent2: #f2b388;
  --paper: #e9e2d2;
  --ink: #292b29;
  --green: #a8c5ae;
  --red: #e7998f;
  --radius: 5px;
  --nav-height: 50px;
  --table-gap: 10px;
  --table-padding: 12px;
  --hand-height: 112px;
  --heading-font: "Bahnschrift", "Arial Narrow", "Segoe UI", sans-serif;
}
html { background: var(--bg); }
body, body.in-mission {
  background: radial-gradient(ellipse at 50% 0, #31343444, transparent 70%), var(--bg);
  color: var(--text);
}
body, button, input, select { font-family: "Segoe UI", system-ui, sans-serif; }
h1, h2, h3 { font-family: var(--heading-font); letter-spacing: -.025em; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent2); outline-offset: 3px;
}
button, input, select, summary { touch-action: manipulation; }
button { transition: background-color .15s, border-color .15s, box-shadow .15s; }
* { scrollbar-width: thin; scrollbar-color: #757a74 #1b1e1f; }
[hidden] { display: none !important; }
.eyebrow, .section-eyebrow { color: var(--accent); letter-spacing: .14em; }
.field-label, .mini-label, .field-hint, .fineprint, .tiny, .tip-line { color: var(--muted); }
.btn {
  border: 1px solid #565a57; border-radius: var(--radius);
  background: #303435; color: var(--text); box-shadow: none;
}
.btn:hover:not(:disabled) { background: #404544; border-color: #9b9d90; }
.btn-primary, .btn-end {
  background: var(--accent); border-color: var(--accent); color: #251b14;
}
.btn-primary:hover:not(:disabled), .btn-end:hover:not(:disabled) {
  background: var(--accent2); border-color: var(--accent2); color: #251b14;
}
.btn-ghost { background: transparent; color: #dadbd3; border-color: var(--line); }
.btn:disabled { opacity: .5; filter: none; }
.control, .select-target { background: #191c1d; color: var(--text); border-color: #5a605b; border-radius: 4px; }
.control:focus { border-color: var(--accent); }
.pill, .counter {
  font-family: inherit; border: 1px solid var(--line); background: #2b2f2f;
  color: #d5d6cc; border-radius: 3px; letter-spacing: .025em;
}
.pill.outline { color: var(--muted); border-color: var(--line); }
.top-nav, .in-mission .top-nav {
  background: #1c1f20; border-bottom: 1px solid var(--line); box-shadow: none;
}
.brand { gap: 11px; }
.brand-mark {
  background: var(--accent); color: #252626; transform: none;
  border-radius: 2px; box-shadow: none; font-family: Impact, sans-serif;
}
.brand-mark span { background: var(--paper); color: var(--ink); font-family: inherit; }
.brand-name { font-family: Impact, "Arial Narrow", sans-serif; font-weight: 400; letter-spacing: .04em; color: var(--paper); }
.brand-name span { color: var(--accent); }
.brand-sub { color: #a6aaa5; letter-spacing: .18em; }
.fullscreen-hint { display: inline-flex; gap: 6px; align-items: center; color: var(--muted); font-size: 10px; white-space: nowrap; }
kbd { font: 10px "Segoe UI", sans-serif; border: 1px solid #5e635e; border-radius: 3px; padding: 2px 5px; color: #d7d8ce; }
.save-status { color: #b4c7b5; }

/* Menu: survivor dossiers, with clear selected / unselected states. */
.setup-wrap { max-width: 1640px; padding: 30px clamp(20px,3vw,48px) 40px; }
.hero-intro { padding: 0 0 24px; border-color: var(--line); }
.hero-intro h1 {
  font-family: Impact, "Arial Narrow", sans-serif; font-weight: 400;
  font-size: clamp(38px,4.1vw,68px); line-height: 1.03; letter-spacing: .015em;
  margin: 12px 0 16px; color: var(--paper);
}
.hero-intro h1 span { color: var(--accent); }
.hero-intro p { color: var(--muted); max-width: 720px; }
.intro-chips { margin-top: 14px; }
.setup-cols { margin-top: 24px; grid-template-columns: 300px minmax(0,1fr); gap: 24px; }
.panel, .setup-config { border: 1px solid var(--line); background: var(--panel); box-shadow: none; border-radius: var(--radius); }
.setup-config { padding: 22px; border-top: 3px solid var(--accent); }
.setup-config h2, .roster-heading h2 { font-size: 27px; }
.config-bottom { border-color: var(--line); padding-top: 18px; margin-top: 18px; }
.config-bottom .btn { min-width: 145px; }
.team-count { font-family: var(--heading-font); color: var(--paper); }
.team-count span, .counter { color: var(--muted); }
.survivor-grid { gap: 12px; }
.survivor-card, .survivor-card.chosen {
  padding: 16px; border: 1px solid #65685f; background: var(--paper); color: var(--ink);
  border-radius: 4px; box-shadow: 0 3px 0 #0005; min-height: 240px;
}
.survivor-card.chosen { border: 2px solid var(--accent); padding: 15px; box-shadow: 0 0 0 1px #e5915d44, 0 3px 0 #0005; }
.setup-wrap .survivor-card:hover { background: #f3ecdc; border-color: var(--accent2); }
.survivor-card h3 { font-size: 24px; }
.survivor-card p { color: #55584e; font-size: 12px; line-height: 1.5; }
.survivor-card .survivor-role { color: #865230; font-size: 10px; }
.survivor-card .survivor-status { color: #64675d; font-size: 9px; }
.survivor-card.chosen .survivor-status { color: #663b20; }
.survivor-card .avatar.large { width: 68px; height: 76px; background: #d0ccbd; border-radius: 3px; }
.survivor-card .mini-label { color: #54584e; }
.survivor-card .control { color-scheme: light; background: #f7f1e5; color: var(--ink); border-color: #a6a292; font-size: 11px; }
.tip-line { border-color: var(--line); border-radius: 4px; }
.resume-banner { background: #28352d; border: 1px solid #5c7560; border-radius: 4px; }
.resume-banner p { color: #c0d0c0; }

/* The desktop grid uses the viewport, including F11 and browser resize.
   Side rails span both board and hand rows; nothing has a fixed board minimum. */
.in-mission { overflow: hidden; }
.in-mission #app { min-height: 0; height: 100dvh; }
.in-mission .top-nav {
  height: var(--nav-height); min-height: 0; padding: 0 16px; gap: 16px; flex-wrap: nowrap;
}
.in-mission .brand-name { font-size: 23px; }
.in-mission .brand-mark { width: 28px; height: 30px; font-size: 24px; }
.in-mission .brand-sub { font-size: 7px; }
.in-mission .top-right { gap: 8px; flex-wrap: nowrap; }
.in-mission .top-right .btn { min-height: 31px; font-size: 11px; padding: 5px 10px; }
.in-mission .save-status { font-size: 10px; }
.in-mission .top-right > .pill { font-size: 9px; }
.in-mission .top-right > [data-action="export"] { display: none; } /* Export remains in the journal. */
.command-table {
  width: 100%; max-width: none; margin: 0;
  height: calc(100dvh - var(--nav-height)); padding: var(--table-padding);
  display: grid; gap: var(--table-gap);
  grid-template-columns: clamp(210px,16vw,280px) minmax(0,1fr) clamp(310px,23vw,390px);
  grid-template-rows: 46px minmax(0,1fr) var(--hand-height);
  grid-template-areas: "status status status" "briefing board operator" "briefing hand operator";
}
.command-table > *, .tactical-workspace > * { min-width: 0; min-height: 0; }
.tactical-workspace { display: contents; }
.mission-bar {
  grid-area: status; gap: 20px; padding: 5px 14px; background: #25292a;
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none;
}
.round-counter { border-color: #53574f; padding-right: 16px; gap: 9px; }
.round-counter b { font: 700 28px var(--heading-font); color: var(--accent2); font-variant-numeric: tabular-nums; }
.round-counter small, .mission-status span, .pressure-stat > span { color: var(--muted); font-size: 10px; letter-spacing: .07em; }
.mission-status { gap: 3px; }
.mission-status strong { font-size: 12px; letter-spacing: .025em; }
.pressure-stat { gap: 9px; }
.pressure-stat > b { color: var(--paper); font-size: 23px; font-variant-numeric: tabular-nums; }
.pressure-stat small { color: var(--muted); font-size: 11px; }
.journal-button { color: var(--paper); border: 1px solid #64695e; border-radius: 4px; background: #303534; padding: 7px 10px; font-size: 11px; }
.journal-button b { color: var(--accent2); margin-left: 9px; }
.journal-button:hover { background: #424843; }

/* Left rail: roster and objectives scroll together; supplies stay reachable. */
.briefing-column {
  grid-area: briefing; display: flex; flex-direction: column; gap: 0; overflow: hidden;
  padding: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
}
.squad-heading { flex: none; padding: 13px 12px; color: var(--paper); font-size: 11px; border-bottom: 1px solid var(--line); }
.squad-heading span { color: var(--muted); font-size: 11px; }
.briefing-scroll { min-height: 0; flex: 1; overflow-y: auto; padding: 10px; overscroll-behavior: contain; scrollbar-gutter: stable; }
.briefing-column .roster-panel { background: transparent; }
.briefing-column .roster-item, .waiting-turn .roster-item {
  background: #2c3030; border: 1px solid #4c524c; border-radius: 4px;
  gap: 8px; padding: 9px 7px; margin-bottom: 7px;
}
.briefing-column .roster-item.active { background: #44362c; border-color: var(--accent); box-shadow: inset 3px 0 var(--accent); }
.roster-item.clickable:hover { background: #3d4340; border-color: #919986; }
.briefing-column .roster-item:disabled:not(.active) { opacity: .7; }
.briefing-column .roster-name, .waiting-turn .roster-name { font-size: 12px; color: var(--paper); }
.briefing-column .roster-meta, .waiting-turn .roster-meta { color: #c0c1b7; font-size: 10px; line-height: 1.4; }
.briefing-column .roster-ap { color: var(--accent2); font: 700 12px var(--heading-font); min-width: 27px; }
.briefing-column .avatar { width: 42px; height: 51px; border-radius: 3px; background: #222627; }
.bar { background: #171b1a; border-radius: 1px; }
.bar span { border-radius: 1px; }
.bar.hp span { background: #abbd9b; }
.bar.xp span { background: var(--accent); }
.mission-tracker { margin-top: 13px; border-top: 1px solid #63665a; }
.mission-tracker > header { color: var(--paper); font-size: 11px; padding: 13px 3px 8px; }
.mission-tracker > header b { color: var(--accent2); }
.mission-step { padding: 11px 5px; color: #e5e2d8; border-color: #3c423e; gap: 8px; }
.mission-step:hover { background: #343a36; }
.mission-step b { font-size: 12px; line-height: 1.4; }
.mission-step small { color: #b8bcb0; font-size: 10px; line-height: 1.5; }
.mission-step i { color: var(--accent2); border-color: #746956; border-radius: 3px; width: 23px; height: 23px; }
.mission-step.current { background: #35332b; border-left-color: var(--accent); }
.mission-step.done { color: #b8d4b9; }
.mission-step.done i { background: #405641; color: #e0efd8; border-color: #6d8962; }
.mission-step.locked { opacity: .68; }
.briefing-supplies { flex: none; padding: 10px; border-top: 1px solid var(--line); background: #1d2121; }
.supply-pile {
  background: #2e3230; border: 1px solid #6a6d5b; border-radius: 4px;
  padding: 10px; gap: 4px; box-shadow: 2px 2px 0 #1118;
}
.supply-pile > span, .draw-reveal > span { color: #babdaf; font-size: 9px; letter-spacing: .1em; }
.supply-pile > div { gap: 8px; }
.supply-pile b { color: var(--paper); font: 700 27px var(--heading-font); }
.supply-pile small { color: #c0c4b6; font-size: 10px; }
.supply-pile button { color: #f1e5d4; background: #494335; border: 1px solid #8d765b; border-radius: 3px; font-size: 11px; min-height: 30px; }
.supply-pile button:hover:not(:disabled) { background: #6b5139; border-color: var(--accent); }
.supply-pile button:disabled { opacity: .55; }
.draw-reveal { margin-top: 8px; width: 100%; border: 0; border-left: 2px solid #787a68; border-radius: 0; background: transparent; padding: 5px 9px; gap: 3px; color: var(--paper); }
.draw-reveal b { font-size: 12px; }
.draw-reveal small { color: var(--muted); font-size: 10px; }
.draw-reveal:disabled { opacity: .65; }

/* Board: compact heading and toolbar; legend/help appear on demand. */
.board-stage, .board-stage:has(.map-navigation) {
  grid-area: board; min-height: 0; height: auto; padding: 12px; border: 1px solid #666a5e;
  border-radius: var(--radius); background: #292d2c; box-shadow: 0 3px 12px #0002;
}
.stage-heading { flex-wrap: nowrap; gap: 12px; }
.stage-heading > div:first-child { min-width: 0; }
.stage-heading > div > span { display: block; color: #aeb3a6; font-size: 9px; letter-spacing: .12em; }
.stage-heading h2 { font-size: clamp(24px,1.8vw,33px); margin: 3px 0 0; color: var(--paper); line-height: 1.05; }
.board-tabs { flex: none; gap: 0; padding: 2px; border: 1px solid #555d51; border-radius: 5px; background: #1d2220; }
.board-tabs button { border: 0; background: transparent; color: #c8cbbb; border-radius: 3px; padding: 7px 10px; font-size: 11px; }
.board-tabs button[aria-pressed=true] { background: var(--paper); color: var(--ink); }
.board-context { display: flex; align-items: center; gap: 8px; margin: 8px 0; flex: none; }
.location-banner {
  flex: 1; min-width: 0; margin: 0; gap: 8px; padding: 6px 8px;
  background: #1d2320; border-left: 2px solid #a9b99c; font-size: 10px; line-height: 1.4;
}
.location-banner b { color: var(--paper); }
.location-banner span { color: #bfd0b5; text-align: right; }
.board-key { position: relative; flex: none; }
.board-key summary { color: #d2d3c4; font-size: 11px; padding: 6px; cursor: pointer; border-radius: 3px; }
.board-key[open] summary { background: #424b3e; }
.board-key .board-legend {
  position: absolute; right: 0; top: 100%; z-index: 8; width: 210px;
  padding: 13px; margin: 5px 0 0; display: grid; gap: 10px;
  background: #202823; border: 1px solid #7d8973; border-radius: 4px;
  color: #e4e8d9; font-size: 11px; box-shadow: 0 8px 24px #0007;
}
.board-legend .legend-move { background: #b5cc9d; }
.board-legend .legend-attack { background: #e59e8e; }
.board-legend .legend-selected { background: var(--accent); }
.map-navigation {
  gap: 5px; padding: 0; margin: 0 0 8px; flex-wrap: wrap;
}
.map-navigation button {
  min-width: 30px; min-height: 29px; padding: 4px 8px; font-size: 11px;
  border: 1px solid #5e6859; border-radius: 3px; color: #e4e6d6; background: #363e33;
}
.map-navigation button:hover:not(:disabled) { background: #4a5543; border-color: #a7b595; }
.map-navigation button[aria-pressed=true] { background: var(--accent); border-color: var(--accent); color: #292019; outline: none; }
.map-navigation output { color: var(--paper); font: 11px "Segoe UI",sans-serif; min-width: 37px; font-variant-numeric: tabular-nums; }
.map-pan-buttons { gap: 3px; margin-left: auto; }
.map-help-toggle { position: relative; margin-left: 2px; }
.map-help-toggle summary { list-style: none; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #626b59; border-radius: 50%; color: #c8d0bb; cursor: pointer; }
.map-help-toggle small {
  position: absolute; right: 0; top: 33px; z-index: 8; width: 230px; padding: 12px;
  background: #202823; border: 1px solid #7d8973; border-radius: 4px;
  color: #e4e8d9; font-size: 11px; line-height: 1.5; box-shadow: 0 8px 24px #0007;
}
.board-surface { background: #1c211e; border: 1px solid #464f43; border-radius: 3px; }
.map-viewport { scrollbar-color: #939f84 #20281f; }
.board-stage .map-viewport .map-frame { border: 2px solid #8b9077; padding: 3px; background: #555b4b; box-shadow: none; }
.board-stage .map-grid { gap: 2px; }
.board-stage .tile { border-color: #7b8069; }
.board-stage .tile.selected { outline: 3px solid #f4b482; outline-offset: -4px; box-shadow: inset 0 0 0 5px #2d201aaa; }
.board-stage .tile.reachable:not(.selected) { border-color: #bed89e; box-shadow: inset 0 0 0 1px #bed89e; }
.board-stage .tile.can-attack:not(.selected) { border-color: #eca58c; box-shadow: inset 0 0 0 2px #eca58c; }
.board-stage .tile-coord { background: #18201ce8; color: #f1ebd9; border-radius: 2px; font-size: 10px; }
.board-stage .door-label { background: #18201ce8; color: #ede0ad; }
.board-stage .map-overflow { background: #202820; color: #f6e0b8; border-color: #a8b18c; }
.board-feedback { margin-top: 7px; min-height: 0; max-height: 94px; overflow-y: auto; }
.last-event { border-color: #4c5547; padding-top: 6px; font-size: 11px; color: #c6cbbb; }
.roll-inline { font-size: 11px; padding: 3px 0 6px; color: #ede7cf; }
.roll-inline > span { color: #bfc8b1; }
.roll-inline .die { width: 25px; height: 25px; font-size: 14px; }
.building-board { padding: 12px; gap: 12px; max-height: 100%; overflow-y: auto; }
.building-chooser button { background: #2b352b; color: #d7deca; border-color: #66755c; border-radius: 3px; font-size: 11px; }
.building-chooser button[aria-pressed=true] { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.building-layout .room-sector { background: #263025; border-color: #718260; border-radius: 3px; }
.building-layout .room-sector.occupied { background: #464a31; border-color: var(--accent2); }
.building-layout h4 { font-size: 10px; color: #d9cfac; }
.building-layout .room-sector > span { color: #e2dec6; font-size: 11px; }
.building-route, .building-board > p { color: #cad1b9; font-size: 11px; line-height: 1.5; }
.building-route { border-color: #657259; }

/* Right rail: persistent identity, tab bar and end-turn control. */
.operator-console { grid-area: operator; background: var(--panel); border: 1px solid #6c6a5d; border-radius: var(--radius); box-shadow: none; }
.operator-identity { padding: 13px; gap: 12px; background: var(--paper); color: var(--ink); border-bottom: 3px solid #b7835c; }
.operator-identity > div { min-width: 0; }
.operator-identity > div > span { color: #626052; font-size: 9px; letter-spacing: .1em; }
.operator-identity h3 { color: #272b26; font-size: 27px; margin: 5px 0; line-height: 1.05; }
.operator-identity small { color: #51574b; font-size: 11px; line-height: 1.4; }
.operator-identity .avatar.large { width: 64px; height: 78px; border-radius: 3px; border-color: #85846f; background: #ceccbb; }
.ap-track { margin-top: 8px; gap: 5px; }
.ap-track i { width: 22px; height: 15px; transform: none; background: #b8b7a7; border: 1px solid #9c9f8b; border-radius: 2px; }
.ap-track i.filled { background: #a11414; border-color: #232b1b; }
.ap-track b { font-size: 11px; color: #3e4d30; }
.equipped-summary { background: #30352f; border-color: #555e4c; padding: 9px 13px; gap: 12px; color: var(--paper); }
.equipped-art { width: 58px; height: 38px; }
.equipped-summary b { font-size: 12px; }
.equipped-summary small { font-size: 10px; color: #bdc4b1; }
.progression-shortcut { background: #222822; border-color: #495440; color: #bcc6ae; font-size: 10px; padding: 8px 13px; }
.progression-shortcut b { color: var(--accent2); font-weight: 600; }
.console-tabs { background: #191f1b; }
.console-tabs button { font-size: 12px; color: #bdc5b1; padding: 11px 5px; border-bottom-width: 2px; }
.console-tabs button[aria-pressed=true] { color: var(--paper); background: #32392e; border-bottom-color: var(--accent); }
.console-content { padding: 13px; overscroll-behavior: contain; scrollbar-gutter: stable; }
.target-summary { background: #30362d; border-left-color: #c8ad7e; padding: 9px; }
.target-summary > span { color: #bfc5af; font-size: 9px; }
.target-summary strong { font-size: 14px; }
.target-summary small { color: #c5cbbb; font-size: 10px; }
.tactic-grid { gap: 8px; margin-top: 10px; }
.tactic-action { min-height: 74px; padding: 10px; gap: 5px; border: 1px solid #879273; border-radius: 4px; background: #3b4832; color: #f4efde; }
.tactic-action > span { font-size: 12px; line-height: 1.3; }
.tactic-action > b { font-size: 10px; color: #f1d3a0; }
.tactic-action > small { font-size: 11px; color: #d0d7bf; line-height: 1.4; }
.tactic-action.ready:hover { background: #4b5d3c; border-color: #c2d39f; box-shadow: inset 0 0 0 1px #c2d39f; }
.tactic-action[data-action="attack"].ready { background: #5c3930; border-color: #c78c72; }
.tactic-action[data-action="attack"].ready:hover { background: #774c3d; }
.tactic-action:disabled { opacity: 1; background: #262c26; border-color: #414a3b; box-shadow: none; }
.tactic-action:disabled > span, .tactic-action:disabled > b { color: #9fa794; }
.tactic-action:disabled > small { color: #a2aa97; }
.local-action-heading { color: #c8c5ab; font-size: 9px; margin-top: 15px; padding-top: 12px; border-color: #515a47; }
.shot-preview { background: #41372a; border-color: var(--accent); font-size: 11px; padding: 10px; }
.shot-preview strong { color: #f3b39a; }
.operator-console .utility-actions summary { font-size: 12px; padding: 8px 0; color: #c8ceba; }
.operator-console .undo-action { width: 100%; min-height: 0; margin-top: 10px; }
.operator-console .mini-label { color: #bfc7b1; font-size: 9px; }
.operator-console .control { font-size: 12px; min-height: 35px; background: #1d241d; border-color: #667359; }
.building-travel { background: #343b2d; border-color: #8f8e62; border-radius: 4px; }
.building-travel > span { color: #e7dcc0; font-size: 11px; }
.building-travel button { background: #c8b68b; color: #272e20; border-color: #dac99d; border-radius: 3px; font-size: 12px; }
.building-travel > small { color: #c1cbb1; font-size: 10px; }
.activation-footer { padding: 12px 13px; background: #1c221c; border-color: #58604c; }
.activation-footer > span { color: #c5cbb7; font-size: 11px; line-height: 1.4; }
.activation-footer .btn-end { min-height: 41px; font-size: 12px; background: var(--accent); color: #291d13; border-color: var(--accent); }
.activation-footer .btn-end:hover { background: var(--accent2); }
.waiting-turn h3 { color: var(--paper); font-size: 28px; }
.waiting-turn p, .empty-inventory { color: #c2c9b5; font-size: 12px; }
.waiting-turn .roster-panel { padding: 0; }
.inventory-selector button { border-color: #5f7152; background: #263022; color: #c9d3bb; border-radius: 3px; font-size: 11px; }
.inventory-selector button.selected { background: #443b29; border-color: var(--accent); color: #efd4ac; }
.intel-console h3 { font-size: 25px; color: var(--paper); }
.intel-note { color: #c7d1ba; background: #2b3527; border-color: #506344; font-size: 12px; border-radius: 3px; }
.ally-inspect { background: #34422d; color: #dfdec5; border-color: #6d8056; font-size: 12px; border-radius: 3px; }
.enemy-dossier { border-color: #4f5e42; gap: 12px; }
.enemy-dossier b { font-size: 13px; }
.enemy-dossier span { color: #c8d0b9; font-size: 11px; line-height: 1.5; }
.enemy-dossier strong, .enemy-open-name small { color: var(--accent2); font-size: 11px; }
.enemy-portrait { background: #353f2c; border-color: #71825a; border-radius: 3px; }
.text-button { font-size: 11px; color: var(--accent2); }

/* Four cards under the board. Draw piles live in the left rail. */
.hand-strip {
  grid-area: hand; display: grid; grid-template-columns: 92px minmax(0,1fr);
  gap: 10px; padding: 8px; margin: 0; overflow: hidden;
  background: #222725; border: 1px solid #535c4c; border-radius: var(--radius);
}
.hand-heading { display: flex; flex-direction: column; justify-content: center; gap: 7px; padding-left: 4px; }
.hand-heading > span { font-size: 9px; color: var(--accent2); letter-spacing: .12em; }
.hand-heading b { font-size: 12px; color: var(--paper); line-height: 1.3; }
.hand-heading small { font-size: 10px; color: #aebaa3; line-height: 1.4; }
.hand-cards { gap: 8px; min-height: 0; overflow-x: auto; }
.hand-card {
  min-width: 0; width: calc((100% - 24px)/4); padding: 6px 8px; gap: 3px;
  border: 1px solid #a8a58b; border-radius: 4px; background: var(--paper); color: var(--ink);
  box-shadow: 0 2px 0 #0005; overflow: hidden;
}
.hand-card > span { font-size: 9px; letter-spacing: .04em; color: #66654f; }
.hand-card > b { font-size: 11px; font-weight: 600; }
.hand-card.equipped { border: 2px solid var(--accent); padding: 5px 7px; }
.hand-card.selected { border-color: var(--accent2); box-shadow: inset 0 0 0 2px #b47a46; }
.hand-card:not(:disabled):hover { background: #fff4df; border-color: var(--accent2); }
.hand-art { height: 46px; min-height: 0; max-width: 100%; flex: 1; object-fit: contain; }
.hand-card:disabled { border: 1px dashed #58664c; background: #262f24; color: #aebba0; }
.hand-card:disabled > span { color: #aebba0; }
.hand-symbol { color: #a7b58f; font-size: 26px; }
.hand-empty { font-size: 12px; color: #c2cbb4; }

/* Inspectors and manual share the new palette; cards remain paper objects. */
.modal-backdrop { background: #101413df; }
.modal, .inspector-modal { color: var(--text); border: 1px solid #7a806d; background: #272d26; border-radius: 6px; }
.modal h2 { color: var(--paper); font-size: 33px; line-height: 1.1; }
.modal p { color: #d4dac5; font-size: 13px; }
.help-modal b { color: var(--accent2); }
.inspector-modal { padding: 38px 18px 18px; max-height: calc(100dvh - 32px); }
.inspector-close { top: 5px; right: 8px; color: var(--paper); width: 30px; height: 30px; border-radius: 3px; background: #3d4536; font-size: 25px; line-height: 1; }
.character-card, .equipment-card {
  background: var(--paper); color: var(--ink); border: 4px solid #9f9e88;
  border-radius: 5px; outline: none; box-shadow: 0 3px 0 #1117;
}
.equipment-card header { background: #373e32; color: var(--paper); padding: 13px; }
.equipment-card header span { font-size: 10px; }
.equipment-card h3 { font-size: 26px; letter-spacing: -.02em; }
.card-illustration, .enemy-detail .card-illustration { background: #d4d0bc; border-color: #aaa58d; }
.card-stats div { border-color: #b9b39b; padding: 9px 4px; }
.card-stats dt { color: #67634f; }
.card-stats dd { color: #282e24; }
.modal .card-effect, .modal .enemy-description, .modal .enemy-intent, .modal .enemy-abilities p { color: #3e4735; }
.card-effect, .enemy-description { border-color: #b9b39b; }
.rarity-uncommon { border-color: #84956d; }
.rarity-rare { border-color: #7d98a1; }
.rarity-exceptional { border-color: #c59b52; }
.character-card h3 { color: #283122; }
.character-card .section-eyebrow { color: #6c654b; }
.character-card .xp-heading span, .character-card .progression > small { color: #5c624d; }
.character-card .level-seal { color: #594222; background: #d6c28d; border-color: #a48c54; }
.character-card .character-counters b, .character-slots span { border-color: #a7a185; }
.character-card .base-perk { color: #e3e7d3; background: #394a2d; border-color: #93a66d; }
.perk-track li { background: #303e27; border-color: #6b7c52; color: #e3e6d1; }
.perk-track p { color: inherit; }
.perk-track .acquired { background: #435535; border-color: #91a26e; }
.perk-track .next { background: #574b2d; border-color: #bfa064; }
.perk-track .locked { background: #353c2e; color: #c7cbb8; }
.journal-entries p { color: #d3dac4; border-color: #536146; }
.journal-entries b { color: var(--accent2); }
.enemy-intent { background: #d2c9ab; border-color: #978052; }
.result-stats > div { background: #20291e; border-color: #5f6b51; }
.result-stats span { color: #bcc7ac; }
.result-stats b { color: var(--accent2); font-family: var(--heading-font); }
.toast { background: #2c412e; border-color: #8fa77b; color: #ebedda; border-radius: 4px; }
.toast.error { background: #57372f; border-color: #c78c72; color: #ffe1cc; }

/* Narrative archive: same materials as the dossiers. */
.lore-screen { background: radial-gradient(ellipse at 15% 20%,#65664b22,transparent 65%), var(--bg); color: var(--paper); }
.lore-top > b { font-family: Impact,sans-serif; font-weight: 400; letter-spacing: .06em; }
.lore-top > b span { color: var(--accent); }
.lore-sheet { background: var(--paper); border-color: #a19e83; box-shadow: 8px 10px 0 #0004; border-radius: 4px; overflow: hidden; }
.lore-art { background: #373e31; border-color: #9d9e7d; }
.lore-year { color: #e4d3a6; font-family: var(--heading-font); }
.lore-emblem { color: #d9cb99; border-color: #adab7b; box-shadow: 0 0 0 14px #a8ac7412; }
.lore-copy { color: #30392a; }
.lore-copy h1 { letter-spacing: -.03em; }
.lore-copy p { color: #4b5340; }
.lore-controls { border-color: #b1af92; }
.lore-controls .btn-ghost { color: #4a533b; border-color: #8d9379; background: transparent; }
.lore-timeline { color: #a2aa93; border-color: #535b47; }
.lore-timeline .current { color: var(--accent2); }

/* Smaller desktop / laptop: preserve readable labels, reduce empty space. */
@media (min-width: 1101px) and (max-height: 850px) {
  :root { --nav-height: 44px; --table-padding: 8px; --table-gap: 8px; --hand-height: 84px; }
  .command-table { grid-template-rows: 42px minmax(0,1fr) var(--hand-height); }
  .in-mission .brand-sub { display: none; }
  .stage-heading > div > span { display: none; }
  .stage-heading h2 { font-size: 24px; }
  .board-stage, .board-stage:has(.map-navigation) { padding: 8px; }
  .board-context { margin: 5px 0; }
  .location-banner { padding: 4px 7px; }
  .map-navigation { margin-bottom: 5px; }
  .board-tabs button { padding: 5px 9px; }
  .board-feedback { margin-top: 4px; max-height: 68px; }
  .last-event { font-size: 10px; padding-top: 4px; }
  .operator-identity { padding: 9px 11px; gap: 10px; }
  .operator-identity .avatar.large { width: 47px; height: 57px; }
  .operator-identity h3 { font-size: 23px; margin: 3px 0; }
  .operator-identity > div > span { font-size: 8px; }
  .ap-track { margin-top: 5px; }
  .equipped-summary { padding: 5px 11px; }
  .equipped-art { height: 29px; width: 48px; }
  .progression-shortcut { padding: 6px 11px; }
  .console-tabs button { padding: 8px 5px; }
  .console-content { padding: 10px; }
  .tactic-action { min-height: 62px; padding: 8px; }
  .tactic-action > small { font-size: 10px; }
  .activation-footer { padding: 9px 11px; }
  .activation-footer .btn-end { min-height: 35px; }
  .activation-footer > span { font-size: 10px; margin-bottom: 5px; }
  .squad-heading { padding: 10px; }
  .briefing-scroll { padding: 8px; }
  .briefing-column .avatar { width: 35px; height: 43px; }
  .briefing-column .roster-item { padding: 7px 5px; gap: 6px; }
  .mission-step { padding: 8px 4px; }
  .briefing-supplies { padding: 8px; }
  .supply-pile { padding: 7px 9px; gap: 3px; }
  .supply-pile b { font-size: 22px; }
  .draw-reveal small { display: none; }
  .hand-strip { padding: 5px; gap: 8px; grid-template-columns: 78px minmax(0,1fr); }
  .hand-heading { gap: 4px; }
  .hand-heading b { font-size: 11px; }
  .hand-card { padding: 4px 6px; }
  .hand-card.equipped { padding: 3px 5px; }
  .hand-card > span { font-size: 8px; }
  .hand-card > b { font-size: 10px; }
  .hand-art { height: 28px; }
}
@media (min-width: 1101px) and (max-width: 1450px) {
  .command-table { grid-template-columns: 215px minmax(0,1fr) 318px; }
  .in-mission .save-status { display: none; }
  .briefing-column .roster-name { font-size: 11px; }
  .map-navigation { gap: 4px; }
  .map-navigation button { padding: 4px 6px; min-width: 28px; }
}
@media (min-width: 2000px) and (min-height: 1000px) {
  :root { --hand-height: 132px; --table-gap: 14px; --table-padding: 16px; }
  .command-table { grid-template-columns: 290px minmax(0,1fr) 410px; }
  .tactic-action { min-height: 82px; }
  .tactic-action > span { font-size: 14px; }
  .tactic-action > small { font-size: 12px; }
  .hand-art { height: 62px; }
  .hand-card > b { font-size: 13px; }
}

/* Tablet and phone: allow page scroll instead of clipping the board or controls. */
@media (max-width: 1100px), (max-height: 600px) {
  body.in-mission { overflow: auto; }
  .in-mission #app { height: auto; min-height: 100dvh; }
  .in-mission .top-nav { height: auto; min-height: 50px; flex-wrap: wrap; padding: 10px 12px; gap: 10px; }
  .in-mission .top-right { flex-wrap: wrap; margin-left: auto; gap: 6px; }
  .in-mission .save-status, .fullscreen-hint { display: none; }
  .command-table {
    height: auto; padding: 10px; gap: 10px;
    grid-template-columns: minmax(0,1fr) 310px;
    grid-template-rows: auto minmax(470px,70dvh) 108px auto;
    grid-template-areas: "status status" "board operator" "hand operator" "briefing briefing";
  }
  .mission-bar { min-height: 48px; flex-wrap: wrap; gap: 12px; padding: 8px 12px; }
  .mission-status { min-width: 140px; }
  .board-stage, .board-stage:has(.map-navigation), .board-stage:has(.building-board:not([hidden])) { height: auto; min-height: 0; }
  .stage-heading { flex-wrap: wrap; gap: 8px; }
  .stage-heading h2 { font-size: 25px; }
  .operator-console { max-height: none; }
  .console-content { max-height: none; }
  .briefing-column { display: flex; overflow: visible; }
  .briefing-scroll { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; overflow: visible; }
  .mission-tracker { margin-top: 0; }
  .briefing-supplies { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .draw-reveal { margin: 0; }
  .hand-strip { min-height: 0; grid-template-columns: 1fr; }
  .hand-heading { display: none; }
  .hand-cards { min-height: 0; }
  .hand-card { min-width: 0; }
  .in-mission .mobile-jump { display: inline-flex; text-decoration: none; }
  .building-layout { gap: 7px; }
  .building-board { padding: 8px; }
  .building-route { flex-direction: column; gap: 5px; }
  .setup-cols { grid-template-columns: 270px minmax(0,1fr); gap: 18px; }
  .survivor-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .command-table {
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: auto auto 106px auto auto;
    grid-template-areas: "status" "board" "hand" "operator" "briefing";
    padding: 7px; gap: 8px;
  }
  .in-mission .top-right > .pill { display: none; }
  .mission-bar { padding: 9px; gap: 10px; }
  .mission-status span { font-size: 9px; }
  .mission-status strong { font-size: 11px; }
  .pressure-stat > span { font-size: 9px; }
  .pressure-stat > b { font-size: 20px; }
  .round-counter { padding-right: 10px; }
  .journal-button { margin-left: auto; }
  .board-stage, .board-stage:has(.map-navigation) { height: calc(100vw + 185px); max-height: 780px; min-height: 460px; padding: 9px; }
  .board-stage:has(.building-board:not([hidden])) { height: auto; min-height: 510px; }
  .board-stage:has(.building-board:not([hidden])) .board-surface { min-height: 330px; }
  .stage-heading { flex-wrap: nowrap; gap: 8px; }
  .stage-heading h2 { font-size: 23px; }
  .stage-heading > div > span { font-size: 8px; }
  .board-tabs button { font-size: 10px; padding: 7px; }
  .location-banner { font-size: 10px; flex-wrap: wrap; gap: 3px; }
  .board-key summary { font-size: 10px; }
  .map-navigation button { min-height: 32px; min-width: 30px; padding: 5px 7px; }
  .map-pan-buttons { margin-left: 0; }
  .map-help-toggle { margin-left: auto; }
  .board-stage .tile-coord { font-size: 9px; }
  .operator-console .console-content { max-height: none; overflow: visible; }
  .console-tabs { position: sticky; top: 0; z-index: 4; }
  .console-content .tactic-action { min-height: 74px; }
  .tactic-action > small { font-size: 11px; }
  .hand-card { padding: 6px; }
  .hand-card > b { font-size: 10px; }
  .hand-card > span { font-size: 8px; }
  .hand-art { height: 42px; }
  .draw-reveal { flex-direction: column; align-items: start; }
  .setup-wrap { padding: 24px 14px; }
  .setup-cols { display: flex; flex-direction: column; }
  .setup-config { width: 100%; }
  .hero-intro h1 { font-size: clamp(34px,7vw,54px); }
  .survivor-card, .survivor-card.chosen { min-height: 235px; }
  .modal-backdrop { padding: 10px; }
  .inspector-modal { padding: 37px 10px 10px; }
}
@media (max-width: 430px) {
  .briefing-scroll { grid-template-columns: 1fr; gap: 12px; }
  .briefing-supplies { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; }
  .survivor-grid { grid-template-columns: 1fr; }
  .survivor-card, .survivor-card.chosen { min-height: 0; }
  .top-nav { padding: 12px; }
  .in-mission .brand-name { font-size: 21px; }
  .in-mission .brand-sub { display: none; }
  .hand-cards { gap: 5px; }
  .hand-card { width: calc((100% - 15px)/4); }
  .building-layout { grid-template-columns: 1fr; }
  .building-layout .room-sector { display: grid; grid-template-columns: 90px 1fr; gap: 6px 12px; align-items: center; }
  .building-layout .room-sector h4 { grid-column: 2; margin: 0; align-self: end; }
  .building-layout .room-sector .tile { grid-column: 1; grid-row: 1 / 3; }
  .building-layout .room-sector > span { grid-column: 2; margin: 0; }
  .board-stage:has(.building-board:not([hidden])) .board-surface { min-height: 540px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}