/*
 * mind.css — schematic WordFront board motifs for the "For your mind" Tab B
 * figures. Layout + motion only; every colour comes from the --gc-* theme vars
 * (aligned to WFPalette: seat blue = accent, seat red = error, seat green =
 * success, amber = warning, near-white cells, dark walls).
 * No baked-in text drives meaning (captions/labels are data-i18n; the single
 * letters inside tiles are locale-agnostic MARKUP, like the how-to-play guide).
 *
 * Every figure is a LEGAL board state and depicts the EXACT engine rules:
 *   • pressure and defence count ORTHOGONAL contacts only — a diagonal neighbour
 *     never attacks and never defends (the diagonal cross was REMOVED);
 *   • defence = min(3, max(1, own-home-line + distinct friendly words touching
 *     orthogonally)) + 1, so a word backed only by its home line still falls to
 *     two pressure — "one friendly word and it survives" is FALSE;
 *   • a same-letter contact presses 2, any other contact presses 1;
 *   • supply is 8-connected: territory lives only while it reaches a home cell
 *     (a UNITED team reaches EITHER partner's home; every other mode is per-seat);
 *   • Siege/Siege Duos home is a NARROW CENTRAL GATE, not a whole edge.
 * This file is a superset copied verbatim into each variant folder so each page
 * deploys standalone.
 */

/* ---- Board + cells ------------------------------------------------------- */
.wf-b {
  display: grid;
  gap: 5px;
  padding: 10px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--gc-text) 6%, transparent);
  width: 100%;
}
.wf-b.c3 { grid-template-columns: repeat(3, 1fr); max-width: 168px; }
.wf-b.c4 { grid-template-columns: repeat(4, 1fr); max-width: 214px; }
.wf-b.c5 { grid-template-columns: repeat(5, 1fr); max-width: 250px; }
.wf-b.c6 { grid-template-columns: repeat(6, 1fr); max-width: 288px; }
.wf-b.c7 { grid-template-columns: repeat(7, 1fr); max-width: 322px; }

.wf-c {
  aspect-ratio: 1;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: clamp(11px, 3.4vw, 16px);
  background: color-mix(in srgb, var(--gc-text) 9%, transparent);
  color: var(--gc-text);
  transition: background 0.5s var(--gc-ease), transform 0.4s var(--gc-ease);
}
/* Core colours. `empty` is open ground — the plain .wf-c look, named so the
   markup states its intent. */
.wf-c.empty { background: color-mix(in srgb, var(--gc-text) 9%, transparent); }
.wf-c.mine  { background: var(--gc-accent); color: var(--gc-bg); }
.wf-c.foe   { background: var(--gc-error);  color: #fff; }
.wf-c.ally  { background: var(--gc-success); color: var(--gc-bg); }
/* Empty HOME-LINE cells — your own (base), a partner's (allybase) and a rival's
   (foebase). In Siege and Siege Duos only the short central GATE carries these;
   the rest of the edge is ordinary ground. */
.wf-c.base     { background: color-mix(in srgb, var(--gc-accent) 30%, transparent);
                 box-shadow: inset 0 0 0 2px var(--gc-accent); }
.wf-c.allybase { background: color-mix(in srgb, var(--gc-success) 28%, transparent);
                 box-shadow: inset 0 0 0 2px var(--gc-success); }
.wf-c.foebase  { background: color-mix(in srgb, var(--gc-error) 26%, transparent);
                 box-shadow: inset 0 0 0 2px var(--gc-error); }
/* A blocked square (corner walls): never played on, never crossed. */
.wf-c.wall  { background: color-mix(in srgb, var(--gc-text) 45%, transparent); }
.wf-c.hit   { box-shadow: inset 0 0 0 3px var(--gc-warning); }
/* A word the drawn attack actually breaks — the pressure meets its defence, so
   these cells are about to be cleared. Never used for a word that survives. */
.wf-c.doomed { opacity: 0.45; }
.wf-c.flag::after { content: "⚑"; }

/* Multi-player palettes, mixed from the theme so light & dark both read.
   p1..p8 = eight individual colours (Grand Conquest threat map). */
.wf-c.p1 { background: var(--gc-accent); color: var(--gc-bg); }
.wf-c.p2 { background: var(--gc-error); color: #fff; }
.wf-c.p3 { background: var(--gc-success); color: var(--gc-bg); }
.wf-c.p4 { background: var(--gc-warning); color: var(--gc-bg); }
.wf-c.p5 { background: color-mix(in srgb, var(--gc-accent) 55%, var(--gc-text)); color: var(--gc-bg); }
.wf-c.p6 { background: color-mix(in srgb, var(--gc-error) 60%, var(--gc-warning)); color: #fff; }
.wf-c.p7 { background: color-mix(in srgb, var(--gc-success) 60%, var(--gc-warning)); color: var(--gc-bg); }
.wf-c.p8 { background: color-mix(in srgb, var(--gc-warning) 55%, var(--gc-error)); color: var(--gc-bg); }

/* Team shades (Grand Conquest Teams): a1..a4 = one team's four seats (bottom +
   top edges), b1..b4 = the other team's four (left + right edges). Eight
   colours stay distinct — that team mode is INDEPENDENT, not united. */
.wf-c.a1 { background: var(--gc-accent); color: var(--gc-bg); }
.wf-c.a2 { background: color-mix(in srgb, var(--gc-accent) 70%, var(--gc-text)); color: var(--gc-bg); }
.wf-c.a3 { background: color-mix(in srgb, var(--gc-accent) 80%, #fff); color: var(--gc-bg); }
.wf-c.a4 { background: color-mix(in srgb, var(--gc-accent) 55%, var(--gc-success)); color: var(--gc-bg); }
.wf-c.b1 { background: var(--gc-error); color: #fff; }
.wf-c.b2 { background: color-mix(in srgb, var(--gc-error) 65%, var(--gc-warning)); color: #fff; }
.wf-c.b3 { background: color-mix(in srgb, var(--gc-error) 70%, var(--gc-text)); color: #fff; }
.wf-c.b4 { background: color-mix(in srgb, var(--gc-error) 60%, #fff); color: var(--gc-bg); }

/* Side-by-side "before / after" figure pair. Every collapse, absorption and
   reinforcement lesson is drawn as a PAIR rather than an animation, so the
   reduced-motion resting frame still teaches both halves of the idea. */
.wf-pair { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; align-items: start; }
.wf-case { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.wf-tag  { font-size: 12px; font-weight: 700; color: color-mix(in srgb, var(--gc-text) 60%, transparent); text-align: center; max-width: 22ch; }
.wf-tag.good { color: var(--gc-success); }
.wf-tag.warn { color: var(--gc-error); }

/* ---- Motion (only while the owning chapter is active) -------------------- */

/* The planted beachhead flag holds through the rivals' turn, then wins.
   Resting frame = the flag in place, which is the state the caption describes. */
.gc-chapter.is-active .wf-hold { animation: wfHold 3.4s ease-in-out infinite; }
@keyframes wfHold {
  0%, 100% { transform: none; box-shadow: none; }
  50%      { transform: scale(1.08); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gc-success) 60%, transparent); }
}

/* A contested square where fronts meet. The MARK is static (base.css kills every
   animation under prefers-reduced-motion, so the resting frame must still teach);
   the animation only makes it breathe. */
.wf-c.wf-zone { box-shadow: inset 0 0 0 3px var(--gc-warning); }
.gc-chapter.is-active .wf-zone { animation: wfZone 3.6s ease-in-out infinite; }
@keyframes wfZone {
  0%, 100% { box-shadow: inset 0 0 0 3px var(--gc-warning); }
  50%      { box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--gc-warning) 40%, transparent); }
}