/* Keep the original battlefield art; clarify controls and roster states. */
.build-toolbar {
  flex-wrap: nowrap;
  align-items: center;
  padding: 8px;
  gap: 6px;
}
.build-toolbar .tool-group {
  flex: 1 1 0;
  min-width: 0;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
}
.build-toolbar .tool-group > .tool { flex: none; }
.build-toolbar .tool-divider { flex: none; }
.build-toolbar .utility-tools { flex: none; align-self: center; }
.build-toolbar .deploy-tools {
  flex: 1 1 0;
  min-width: 0;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 3px;
  overflow-x: auto;
  padding: 3px 2px 7px;
  scrollbar-width: thin;
  scrollbar-color: #b5c6ab #f0f4ed;
  scroll-snap-type: x proximity;
}
.tool-group .tool.deploy-tool {
  flex: 0 0 64px;
  width: 64px;
  height: 74px;
  grid-template-rows: 34px 14px 14px;
  gap: 1px;
  padding: 5px 2px;
  border: 1px solid #e0e6da;
  border-radius: 6px;
  background: #f8faf4;
  scroll-snap-align: start;
}
.deploy-tool .deploy-tool-count { color: #65755e; font-variant-numeric: tabular-nums; }
.deploy-tool.available .deploy-tool-status { color: #397158; font-weight: 600; }
.tool-group .tool.deploy-tool.mounted { background: #f2f5ee; border-color: #dce3d6; }
.deploy-tool.mounted .deploy-tool-status { color: #6b7e64; font-weight: 400; }
.tool-group .tool.deploy-tool.full { background: #fcf4e4; border-color: #dcca9d; }
.deploy-tool.full .deploy-tool-status { color: #926735; }
.tool-group .tool.deploy-tool.active {
  background: #e8f1e0;
  border-color: #709064;
  box-shadow: inset 0 -3px #709064;
}
.tool-group .tool.deploy-tool.locked { opacity: 1; background: #f1f3ee; border-style: dashed; }
.deploy-tool.locked canvas, .deploy-tool.locked > svg { opacity: .5; }
.deploy-tool.locked .deploy-tool-status { color: #6c7866; }
.build-toolbar .tool:focus-visible { outline-offset: -3px; }
.deployment-summary { padding: 9px 12px; color: #586d56; background: #f7f9f3; }

.sidebar .category-tabs { padding: 3px; gap: 2px; background: #eaf0e5; }
.sidebar .category-tabs button {
  height: 34px;
  font-size: 12px;
  color: #61725e;
  border: 1px solid transparent;
}
.sidebar .category-tabs button[aria-selected=true] {
  color: #315d48;
  border-color: #cfdbc7;
  font-weight: 700;
  box-shadow: 0 1px 2px #2943320a;
}
.sidebar .inner-tabs { gap: 6px; }
.sidebar .inner-tabs button { min-height: 34px; padding: 7px 12px; color: #6a7b64; }
.sidebar .inner-tabs button[aria-selected=true] { color: #315d48; font-weight: 700; }
.sidebar .category-intro { padding-bottom: 9px; }
.sidebar .category-intro span { color: #63735e; }
.sidebar .deployment-group { padding-bottom: 11px; border-bottom: 1px solid #e7ecdf; margin-bottom: 11px; }
.sidebar .deployment-group:last-child { border-bottom: 0; }
.sidebar .deployment-heading { align-items: baseline; gap: 8px; margin-bottom: 6px; }
.sidebar .deployment-heading span { color: #6e7c67; }
.sidebar .member-button { border: 1px solid #dce4d4; background: #f2f6eb; }
.sidebar .member-button.selected { border-color: #709064; background: #e8f1e0; box-shadow: inset 0 -2px #709064; }
.sidebar .member-button:not(.placed) { opacity: .75; }
.sidebar .upgrade-row {
  grid-template-columns: 40px minmax(0,1fr) 82px;
  gap: 8px;
  padding: 11px 0;
  margin-bottom: 0;
  border-bottom: 1px solid #e7ecdf;
}
.sidebar .upgrade-row > div { min-width: 0; }
.sidebar .portrait { width: 40px; height: 42px; }
.sidebar .upgrade-name { gap: 6px; line-height: 1.5; }
.sidebar .upgrade-name span { color: #6d7e64; font-variant-numeric: tabular-nums; }
.sidebar .upgrade-button, .sidebar .recruit-row > button {
  min-height: 36px;
  height: auto;
  padding: 7px 4px;
  background: #e9f1e3;
  border: 1px solid #cdddc3;
  color: #315d48;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  flex-wrap: wrap;
  overflow-wrap: anywhere;
}
.sidebar .bulk-upgrade-button { border-color: #b8ccaa; background: #e4efda; font-weight: 600; min-height: 38px; }
.sidebar #camp-upgrade { flex-wrap: nowrap; height: auto; min-height: 50px; }
.sidebar .upgrade-button:disabled, .sidebar .recruit-row > button:disabled,
.sidebar .bulk-upgrade-button:disabled {
  opacity: 1;
  color: #74806c;
  background: #f0f3eb;
  border-color: #dfe5d7;
}
.sidebar .recruit-row { grid-template-columns: 40px minmax(0,1fr) 82px; }
.sidebar .growth-summary, .sidebar .bulk-upgrade-preview { color: #5d7257; line-height: 1.65; }
.sidebar .growth-current { color: #65775e; }
.sidebar .growth-next { color: #33796e; }
.sidebar .growth-details summary { color: #6b7c63; min-height: 24px; padding-top: 3px; }
.sidebar .device-list { flex-wrap: wrap; gap: 6px; }
.sidebar .device-slot.active { border-color: #709064; outline-color: #709064; background: #e8f1e0; }
.sidebar .squad > [role=tabpanel] { scrollbar-gutter: stable; }
.sidebar .squad > [role=tabpanel]::-webkit-scrollbar { width: 5px; }
.sidebar .squad > [role=tabpanel]::-webkit-scrollbar-thumb { background: #bdcbb3; border-radius: 4px; }
.sidebar .squad > [role=tabpanel]::-webkit-scrollbar-track { background: #f0f4ea; }
.sidebar button:focus-visible, .sidebar summary:focus-visible { outline: 2px solid #b58a39; outline-offset: 2px; }
@media (max-width:600px) {
  .build-toolbar { padding: 6px; gap: 3px; }
  .build-toolbar .tool-group { gap: 2px; }
  .build-toolbar .tool-group > .tool:not(.deploy-tool) { min-width: 30px; padding: 0 4px; }
  .build-toolbar .tool[data-tool=wall] { flex-direction: column; gap: 3px; font-size: 9px; }
  .build-toolbar .utility-tools { flex-direction: column; gap: 2px; }
  .build-toolbar .utility-tools .icon-button { width: 27px; height: 30px; }
  .tool-group .tool.deploy-tool { flex-basis: 60px; width: 60px; }
  .sidebar .category-tabs button { font-size: 11px; }
  .sidebar .upgrade-row, .sidebar .recruit-row { grid-template-columns: 36px minmax(0,1fr) 78px; gap: 7px; }
  .sidebar .portrait { width: 36px; }
  .sidebar .portrait canvas { width: 38px; height: 38px; }
}

/* v68: a clear chapter header, one command area, and quieter supporting copy. */
.topbar { height: 76px; }
.header-right { gap: 12px; }
.header-right .wallet { padding-left: 16px; }
.chapterbar {
  display: grid;
  grid-template-columns: minmax(200px,1fr) auto auto;
  align-items: center;
  gap: 14px 24px;
  padding: 20px 0 18px;
}
.chapterbar .chapter-title { grid-column: 1; grid-row: 1; }
.chapter-title h2 { margin-top: 5px; }
.chapterbar .map-navigation { grid-column: 2; grid-row: 1; flex-wrap: nowrap; }
.chapterbar .chapter-progress { grid-column: 3; grid-row: 1; }
.chapterbar .level-list {
  grid-column: 1/-1;
  grid-row: 2;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  padding: 5px;
  scrollbar-width: thin;
}
.level-list .level-button { flex: 0 0 34px; width: 34px; height: 34px; font-size: 11px; }
.level-list .level-button:not(:last-child)::after { left: 34px; width: 10px; top: 16px; }
.sidebar { gap: 16px; padding-left: 18px; }
.sidebar .squad { border-top: 0; padding-top: 0; }
.command-panel { min-width: 0; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.command-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.command-heading strong { color: var(--green); font-size: 13px; }
.command-heading span { font-size: 10px; color: #74836d; }
.command-panel .battle-controls { display: flex; flex-direction: column-reverse; gap: 10px; border: 0; margin: 0; padding: 0; }
.command-panel .battle-controls .start-button { flex: none; height: 44px; }
.command-panel .playback { width: 100%; margin: 0; }
.command-panel .practice-mode { margin: 8px 0; min-height: 26px; }
.battle-rules { color: #6c7e64; font-size: 11px; }
.battle-rules summary { cursor: pointer; min-height: 28px; padding: 5px 0; }
.command-panel .star-rules { display: grid; gap: 5px; margin: 0 0 8px; padding: 8px 10px; border: 0; background: #f1f5eb; }
.command-panel .star-rules > strong { display: none; }
.command-panel .logistics-bar { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 0 0; margin: 8px 0 0; border-bottom: 0; }
.command-panel .stamina-summary { gap: 5px; }
.command-panel .stamina-summary small { margin-left: auto; }
.command-panel .logistics-actions { width: 100%; }
.command-panel .supply-button { flex: 1; min-width: 0; justify-content: center; padding: 7px 5px; }
.battlefield .layout-row { padding: 9px 12px; gap: 6px; background: #fcfdf9; }
.battlefield .layout-actions button { border: 0; background: transparent; color: #78856f; }
.battlefield .deployment-summary { padding-top: 7px; padding-bottom: 7px; font-size: 10px; }
.sidebar .camp-status { padding: 0 0 12px; margin-bottom: 14px; }
.sidebar .small-stats { margin-bottom: 0; }
.sidebar .category-intro { font-size: 11px; padding-bottom: 8px; }
.sidebar .category-tabs { margin-bottom: 10px; }
.sidebar .squad > [role=tabpanel] { min-height: 220px; max-height: 420px; }
#help-dialog { text-align: left; width: 460px; padding: 24px; }
#help-dialog .dialog-head h2 { margin: 0; font-size: 22px; }
#help-dialog .help-intro { margin: 12px 0 18px; color: #64765d; }
.help-steps { margin: 0; padding-left: 24px; color: #819174; }
.help-steps li { padding-left: 5px; margin-bottom: 16px; }
.help-steps strong { display: block; color: #315d48; font-size: 13px; margin-bottom: 4px; }
.help-steps span { color: #65775f; font-size: 12px; line-height: 1.7; }
.help-scope { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 4px; }
.help-scope strong { font-size: 12px; color: #526c50; }
#help-dialog .help-scope p { margin: 7px 0 18px; color: #7a8772; font-size: 11px; }
@media (max-width:1200px) and (min-width:951px) {
  .chapterbar { grid-template-columns: 1fr auto; gap: 12px; }
  .chapterbar .chapter-progress { display: none; }
  .map-navigation select { max-width: 180px; }
  .command-heading { flex-direction: column; gap: 4px; }
}
@media (max-width:950px) {
  .sidebar { border: 0; padding: 0; gap: 16px; }
  .sidebar .squad { background: #fff; padding: 16px; border: 1px solid var(--line); border-radius: 8px; }
  .command-panel { padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
  .command-panel .battle-controls { flex-direction: row; align-items: center; }
  .command-panel .playback { width: auto; flex: none; }
  .command-panel .battle-controls .start-button { flex: 1; }
  .sidebar .squad > [role=tabpanel] { min-height: 0; max-height: none; overflow: visible; scrollbar-gutter: auto; }
  .chapterbar { grid-template-columns: 1fr auto; gap: 12px; }
  .chapterbar .chapter-progress { display: none; }
}
@media (max-width:600px) {
  body { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
  .topbar { height: 64px; }
  .header-right { gap: 3px; }
  .header-right .wallet { padding-left: 0; gap: 3px; }
  .header-right .icon-button { width: 28px; height: 32px; }
  .brand h1 { font-size: 17px; }
  .brand-mark { width: 31px; height: 34px; }
  .brand span:not(.brand-mark) { font-size: 8px; }
  .chapterbar { grid-template-columns: minmax(0,1fr); gap: 10px; padding: 14px 0; }
  .chapterbar .chapter-title { width: auto; }
  .chapter-title h2 { font-size: 20px; }
  .chapterbar .map-navigation { grid-column: 1; grid-row: 3; gap: 6px; }
  .chapterbar .map-navigation select { flex: 1; width: 0; min-width: 0; min-height: 32px; font-size: 11px; }
  .chapterbar .chapter-map-button { min-height: 32px; padding: 6px 8px; }
  .chapterbar .chapter-map-button span { display: inline; font-size: 10px; }
  .chapterbar .chapter-switch { min-height: 32px; padding: 6px 8px; }
  .chapterbar .level-list { gap: 6px; padding: 4px; }
  .level-list .level-button { flex-basis: 28px; height: 28px; width: 28px; font-size: 10px; }
  .level-list .level-button:not(:last-child)::after { left: 28px; width: 6px; top: 13px; }
  .command-heading { margin-bottom: 6px; }
  .command-panel .battle-controls {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: #fbfcf7; border-top: 1px solid #d6e1d0;
    box-shadow: 0 -3px 12px #263f2b0b; gap: 10px;
  }
  .command-panel .battle-controls .start-button { min-width: 0; height: 42px; font-size: 12px; }
  .command-panel .battle-controls .playback { width: 154px; }
  .command-panel .practice-mode { margin-top: 4px; }
  .command-panel .logistics-bar { margin-top: 6px; }
  .sidebar .squad { padding: 14px 12px; }
  .battlefield .layout-row { padding: 8px 10px; }
  .battlefield .layout-row > small { display: none; }
  .battlefield .layout-actions { width: auto; flex: 1; margin-left: auto; gap: 2px; }
  .battlefield .layout-actions button { padding: 5px; font-size: 10px; min-height: 30px; }
  .battlefield .layout-row > span { font-size: 10px; }
  .battlefield .deployment-summary { font-size: 9px; }
  footer { gap: 8px; flex-wrap: wrap; line-height: 1.6; }
  #help-dialog { padding: 20px; max-height: calc(100dvh - 32px); overflow: auto; }
}
@media (max-width:600px) {
  #toast { bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 7; }
}
.help-steps span, .help-scope p { text-wrap: pretty; }

/* v69: accurate finger taps and a scrollable map with 45px cells. */
.map-viewport { min-width: 0; }
.map-zoom-button, .mobile-map-hint { display: none; }
.map-zoom-button {
  align-items: center; justify-content: center; gap: 4px;
  min-height: 40px; padding: 6px 8px; border-radius: 5px;
  border: 1px solid #ceddc5; background: #edf4e7; color: #315d48; font-size: 11px;
}
.map-zoom-button svg { width: 16px; height: 16px; }
.map-zoom-button[aria-pressed=true] { background: #315d48; border-color: #315d48; color: #fff; }
@media (max-width:950px), (pointer:coarse) {
  .map-zoom-button { display: inline-flex; }
  .map-tools .icon-button { width: 40px; height: 40px; }
  .map-head { min-height: 48px; height: auto; padding-top: 4px; padding-bottom: 4px; gap: 6px; }
  .map-location { min-width: 0; }
  .map-location span { overflow-wrap: anywhere; }
  .map-tools { flex: none; }
  .mobile-map-hint { display: block; padding: 7px 10px; color: #667c56; font-size: 10px; line-height: 1.5; border-bottom: 1px solid #e3e8e1; background: #f6f8ef; }
  #map { touch-action: pan-x pan-y pinch-zoom; }
  .canvas-wrap { aspect-ratio: 1120/760; }
  .map-viewport.zoomed { overflow: auto; max-height: 62vh; max-height: 62svh; overscroll-behavior-x: contain; }
  .map-viewport.zoomed .canvas-wrap { width: max(100%,840px); aspect-ratio: 1120/760; }
  .map-viewport.zoomed #map { min-height: 0; }
  .sidebar .category-tabs button, .sidebar .inner-tabs button { min-height: 44px; }
  .sidebar .member-button { min-width: 44px; min-height: 44px; }
  .sidebar .member-button canvas { width: 36px; height: 36px; }
  .sidebar .device-slot { min-width: 52px; min-height: 52px; }
  .layout-row button { min-width: 40px; min-height: 40px; }
  .command-panel .supply-button { min-height: 40px; }
  .battle-rules summary, .practice-mode { min-height: 40px; }
  .command-panel .practice-mode { min-height: 36px; }
  .command-panel .battle-controls .icon-button { min-width: 38px; min-height: 42px; }
  .speed-group button { min-height: 36px; min-width: 30px; padding-left: 6px; padding-right: 6px; }
}
@media (max-width:600px) {
  .header-right .icon-button { width: 36px; height: 40px; }
  .chapterbar .map-navigation select, .chapterbar .chapter-map-button, .chapterbar .chapter-switch { min-height: 40px; }
  .level-list .level-button { flex-basis: 34px; width: 34px; height: 38px; }
  .level-list .level-button:not(:last-child)::after { left: 34px; top: 18px; }
  .map-location { gap: 4px; font-size: 11px; }
  .map-location svg { display: none; }
  .map-tools { gap: 0; }
  .map-tools .icon-button { width: 34px; }
  .map-zoom-button { padding: 6px; font-size: 10px; }
  .battlefield .layout-row { flex-wrap: wrap; }
  .battlefield .layout-actions button { min-height: 40px; }
  .command-panel .battle-controls { gap: 6px; }
  .command-panel .battle-controls .playback { width: 174px; }
  .command-panel .battle-controls .start-button { height: 44px; padding: 0 5px; gap: 4px; font-size: 11px; }
  .command-panel .battle-controls .start-button svg { width: 14px; }
  .command-panel .battle-controls .playback .icon-button { width: 38px; }
  .placement-banner { max-width: calc(100% - 16px); }
}
@media (max-width:360px) {
  .brand span:not(.brand-mark) { display: none; }
  .brand h1 { font-size: 15px; }
  .brand-mark { width: 27px; height: 32px; }
  .brand { gap: 5px; }
  .header-right { gap: 1px; }
  .wallet strong, .crystal-wallet strong { font-size: 13px; }
  .header-right .icon-button { width: 32px; }
  .header-right .wallet svg, .crystal-wallet svg { width: 14px; }
  .command-panel .battle-controls .playback { width: 164px; }
  .speed-group button { min-width: 28px; padding-left: 5px; padding-right: 5px; }
  .command-panel .battle-controls .icon-button { min-width: 34px; }
}