/*
 * guide.css — aiTMW ("This Means War") layout on top of the shared
 * _shared/base.css. Only board geometry here; all colours come from the
 * --gc-* theme variables. The map reads as a hex field: rows are flex
 * strips, odd rows are nudged half a cell, tiles are clipped to hexagons.
 */

.tmw-map {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border-radius: var(--gc-radius-sm);
  background: color-mix(in srgb, var(--gc-text) 6%, transparent);
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
}
.tmw-row {
  display: flex;
  gap: 6px;
  justify-content: center;
}
/* Offset alternate rows so the field reads as a hex grid. */
.tmw-row.odd { transform: translateX(20px); }

.tmw-map .gc-tile {
  width: 34px;
  aspect-ratio: 1;
  border-radius: 4px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  font-size: 16px;
}

/* Legend: your ground / enemy ground / no-man's-land / a city. */
.tmw-legend {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  justify-content: center;
}
.tmw-legend li { display: inline-flex; align-items: center; gap: 8px; }
.tmw-swatch {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  font-weight: 800;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: color-mix(in srgb, var(--gc-text) 10%, transparent);
}
.tmw-swatch.mine { background: var(--gc-accent); color: var(--gc-bg); }
.tmw-swatch.foe  { background: var(--gc-error);  color: #fff; }
.tmw-swatch.gold { background: var(--gc-warning); color: var(--gc-bg); }

/* ---- rebuilt 2026-07: real art, contrast pairs, screen mock, worked maths ---- */

/* No-man's-land swatch (the unclaimed band between the two front lines). */
.tmw-swatch.empty { background: color-mix(in srgb, var(--gc-text) 10%, transparent); }

/* Water and high ground read as --gc-* mixes; never a raw colour. */
.tmw-map .gc-tile.river { background: color-mix(in srgb, var(--gc-accent) 26%, transparent); }
.tmw-map .gc-tile.river.cross { background: color-mix(in srgb, var(--gc-warning) 40%, transparent); }
.tmw-map .gc-tile.ridge { background: color-mix(in srgb, var(--gc-text) 24%, transparent); }
.tmw-map .gc-tile.sel { outline: 2px solid var(--gc-accent); outline-offset: 1px; }

/* Grand Theater fits a six-wide front. */
.tmw-map.grand { max-width: 340px; }
.tmw-map.grand .gc-tile { width: 26px; font-size: 13px; }
.tmw-map.grand .tmw-row.odd { transform: translateX(16px); }

/* Sprite rows. */
.tmw-sprites {
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center; justify-content: center;
}
.tmw-duels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; justify-items: center; }
.tmw-duel { display: inline-flex; align-items: center; gap: 4px; }
.tmw-mult {
  font-weight: 800; font-size: 13px; color: var(--gc-accent);
  font-variant-numeric: tabular-nums;
}

/* A stale contact: the frozen grey ghost at its last seen position. */
.tmw-ghost { filter: grayscale(1); opacity: 0.42; }

/* Struck off: someone who did not come home from a permanent-stakes war. */
.tmw-officer.is-lost, .gc-pieceimg.is-lost { filter: grayscale(1); opacity: 0.35; }
.tmw-scene { display: inline-flex; align-items: center; gap: 8px; }
.tmw-gone { display: inline-block; width: 40px; }
.tmw-eye { font-size: 15px; }
.tmw-eye.off { opacity: 0.3; }
.tmw-vs-cap { font-size: 12px; opacity: 0.85; }

/* Officer portraits with their command-rank rings. */
.tmw-face {
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; display: block;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gc-text) 30%, transparent);
}
.tmw-face.cap { box-shadow: 0 0 0 2px color-mix(in srgb, var(--gc-warning) 55%, var(--gc-text)); }
.tmw-face.col { box-shadow: 0 0 0 2px color-mix(in srgb, var(--gc-text) 55%, transparent); }
.tmw-face.gen { box-shadow: 0 0 0 3px var(--gc-warning); }
.tmw-face.is-sel { outline: 2px solid var(--gc-accent); outline-offset: 2px; }
.tmw-staff { display: flex; gap: 14px; justify-content: center; align-items: flex-end; }
.tmw-staff.mini { gap: 8px; }
.tmw-officer { display: grid; justify-items: center; gap: 4px; }
.tmw-rank { width: 22px; height: 3px; border-radius: 2px; display: block; }
.tmw-rank.cap { background: color-mix(in srgb, var(--gc-warning) 60%, var(--gc-text)); }
.tmw-rank.col { background: color-mix(in srgb, var(--gc-text) 60%, transparent); }
.tmw-rank.gen { background: var(--gc-warning); }

/* The play-screen mock: the real vertical composition of the command screen. */
.tmw-ui {
  display: grid; gap: 6px; width: 100%; max-width: 300px; margin-inline: auto;
  padding: 8px; border-radius: var(--gc-radius-sm);
  background: color-mix(in srgb, var(--gc-text) 6%, transparent);
}
.tmw-ui-bar, .tmw-ui-head { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.tmw-ui-tag, .tmw-ui-btn {
  font-size: 11px; padding: 2px 6px; border-radius: 6px;
  background: color-mix(in srgb, var(--gc-text) 12%, transparent);
}
.tmw-ui-tag.dim { opacity: 0.5; }
.tmw-ui-btn.accent { background: var(--gc-accent); color: var(--gc-bg); }
.tmw-ui-map { position: relative; display: grid; gap: 4px; padding: 6px 0; }
.tmw-ui-map .gc-tile { width: 26px; font-size: 12px; }
.tmw-ui-nav {
  position: absolute; right: 0; top: 0; display: grid; gap: 2px; font-size: 10px;
}
.tmw-ui-nav span {
  background: color-mix(in srgb, var(--gc-text) 12%, transparent);
  border-radius: 4px; padding: 1px 3px;
}
.tmw-ui-staff { display: flex; gap: 6px; justify-content: center; }
.tmw-ui-staff .tmw-face { width: 26px; height: 26px; }
.tmw-ui-panel {
  display: grid; gap: 4px; padding: 6px; border-radius: var(--gc-radius-sm);
  background: color-mix(in srgb, var(--gc-text) 8%, transparent);
}
.tmw-ui-row { display: flex; align-items: center; gap: 6px; }
.tmw-ui-bar-mini {
  height: 5px; border-radius: 3px; flex: 1;
  background: linear-gradient(to right, var(--gc-success) 78%, transparent 78%);
}
.tmw-ui-bar-mini.short { background: linear-gradient(to right, var(--gc-warning) 42%, transparent 42%); }

/* The order storyboard: officer → target → menu → confirm banner. */
.tmw-story { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; align-items: center; }
@media (max-width: 380px) { .tmw-story { grid-template-columns: repeat(2, 1fr); } }
.tmw-frame {
  position: relative; display: grid; place-items: center; gap: 4px;
  padding: 10px 4px; border-radius: var(--gc-radius-sm); min-height: 70px;
  background: color-mix(in srgb, var(--gc-text) 7%, transparent);
}
.tmw-num {
  position: absolute; top: 3px; left: 5px; font-size: 10px; font-weight: 800;
  opacity: 0.55;
}
.tmw-frame .gc-tile { width: 22px; font-size: 11px; }
.tmw-menu { display: grid; gap: 3px; width: 100%; padding-inline: 8px; }
.tmw-mi {
  height: 7px; border-radius: 3px; font-size: 0;
  background: color-mix(in srgb, var(--gc-text) 18%, transparent);
}
.tmw-mi.hot { background: var(--gc-accent); }
.tmw-banner { display: flex; align-items: center; gap: 5px; }
.tmw-line {
  width: 34px; height: 7px; border-radius: 3px;
  background: color-mix(in srgb, var(--gc-text) 24%, transparent);
}
.tmw-ok { color: var(--gc-success); font-weight: 800; }
.tmw-no { color: var(--gc-error); font-weight: 800; }

/* The worked economy example. */
.tmw-econ { display: grid; gap: 8px; }
.tmw-chip {
  padding: 3px 8px; border-radius: 999px; font-weight: 700; font-size: 13px;
  font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--gc-text) 12%, transparent);
}
.tmw-chip.gold { background: color-mix(in srgb, var(--gc-warning) 35%, transparent); }
.tmw-side { font-size: 12px; font-weight: 700; color: var(--gc-accent); min-width: 44px; }
.tmw-side.foe { color: var(--gc-error); }

/* Border War's reserve: one free hand, three uses. */
.tmw-reserve { display: grid; gap: 6px; justify-items: center; }
.tmw-arrows { display: flex; gap: 20px; font-size: 22px; color: var(--gc-accent); }

/* Tiles outside .tmw-map (screen mock, storyboard) keep the same hex shape. */
.tmw-ui-map .gc-tile, .tmw-frame .gc-tile {
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  border-radius: 4px;
}
.tmw-ui-map .tmw-row { display: flex; gap: 5px; justify-content: center; }
.tmw-ui-map .tmw-row.odd { transform: translateX(15px); }
.tmw-frame .tmw-row { display: flex; gap: 4px; justify-content: center; }