/*
 * mind.css — aiTMW "For your mind" Tab B geometry.
 *
 * Identical copy in every variant folder (skirmish / border / grand), because
 * each page is served as its own root. Only layout here; every colour comes
 * from the --gc-* theme variables and every real object (unit, officer) is the
 * game's own art through data-piece — the schematic hex kit is used only for
 * claim/front/city diagrams (GUIDE_REVIEW_STANDARD §10).
 *
 * The one structural addition: `.tmw-pin`. SPEC_FOR_YOUR_MIND §9 requires the
 * war caveat to be visible on Tab B — not on its first chapter only. The pin
 * sits between the chapter stage and the pager INSIDE the game deck, so it is
 * on screen for every chapter of this variant's note and never appears on the
 * shared essay tab.
 */

/* ---- The permanently-visible war caveat ---------------------------------- */

.tmw-pin {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 clamp(16px, 5vw, 32px) 4px;
  padding: 9px 12px;
  border-radius: 13px;
  font-size: 12.5px;
  line-height: 1.4;
  color: color-mix(in srgb, var(--gc-text) 88%, transparent);
  background: var(--gc-glass);
  border: 1px solid color-mix(in srgb, var(--gc-warning) 60%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.tmw-pin-icon {
  flex: 0 0 auto;
  font-size: 15px;
  line-height: 1.2;
  color: var(--gc-warning);
}
.tmw-pin b { color: var(--gc-text); }

/* ---- Schematic map kit (claim shading only) ------------------------------ */

.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; }
.tmw-row.odd { transform: translateX(20px); }
.tmw-map .gc-tile {
  width: 30px;
  aspect-ratio: 1;
  border-radius: 4px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  font-size: 15px;
}

/* ---- Real objects: unit sprites and officer portraits -------------------- */

.tmw-sprites {
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center; justify-content: center;
}
.tmw-scene { display: inline-flex; align-items: center; gap: 8px; }
.tmw-ghost { filter: grayscale(1); opacity: 0.42; }
.tmw-eye { font-size: 15px; }
.tmw-eye.off { opacity: 0.3; }
.tmw-arrow { font-size: 18px; color: var(--gc-accent); font-weight: 800; }

.tmw-face {
  width: 36px; height: 36px; 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-staff { display: flex; gap: 10px; justify-content: center; align-items: center; }

/* ---- The order storyboard (Skirmish) ------------------------------------- */

.tmw-flow {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.tmw-flow .gc-math-op { font-size: 17px; }
.tmw-chip {
  padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 800;
  background: var(--gc-glass);
  border: 1px solid var(--gc-border);
}
.tmw-chip.accent { background: var(--gc-accent); color: var(--gc-bg); border-color: transparent; }

/* ---- The five-layer theatre (Grand) -------------------------------------- */

.tmw-layers {
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: 330px;
  margin-inline: auto;
  padding: 10px;
  border-radius: var(--gc-radius-sm);
  background: color-mix(in srgb, var(--gc-text) 6%, transparent);
}
.tmw-layer {
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: center;
  gap: 10px;
}
.tmw-layer-name {
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.03em;
  text-align: end;
  color: color-mix(in srgb, var(--gc-text) 62%, transparent);
}
.tmw-layer-art {
  display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
}
.tmw-layer-art .gc-tile {
  width: 22px; aspect-ratio: 1; font-size: 12px;
  border-radius: 3px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.tmw-layer-art .tmw-face { width: 26px; height: 26px; }

html[dir="rtl"] .tmw-layer-name { text-align: start; }

/* ---- The border figure: two facing fronts above the mobile reserve -------- */

.tmw-front {
  display: flex;
  flex-direction: column;
  align-items: center;
}