/*
 * guide.css — WordFront board geometry + motion on the shared _shared/base.css.
 *
 * The palette mirrors the real play surface (WFPalette in
 * WordFrontGamePlayCustomizer.swift) so the guide looks like the screen: seat blue,
 * seat red, near-white cells, dark walls. Those seat colours are named ONCE here as
 * --wf-* tokens; nothing else hardcodes a colour.
 *
 * Every figure is a LEGAL board state showing the EXACT engine rule: pressure counts
 * ORTHOGONAL contacts only (same letter 2, different 1); defence = own home line plus
 * distinct friendly words touching orthogonally (floor 1, cap 3), breaking when
 * pressure exceeds it; supply is 8-connected back to a home edge.
 */

.gc-guide {
  --wf-mine: #3388f2;      /* WFPalette seat 0 — blue  */
  --wf-foe:  #eb5c4d;      /* WFPalette seat 1 — red   */
  --wf-foe2: #4dbf73;      /* WFPalette seat 2 — green */
  --wf-foe3: #f2a633;      /* WFPalette seat 3 — amber */
  --wf-foe4: #a673e6;      /* WFPalette seat 4 — purple*/
  --wf-ally: #26bfc7;      /* WFPalette seat 6 — teal  */
  --wf-empty: #f6fbff;     /* WFPalette.empty          */
  --wf-blocked: #29363f;   /* WFPalette.blocked        */
  --wf-grid: #6b8fb3;      /* WFPalette.gridLine       */
  --wf-ink: #142e52;       /* WFPalette.ink            */
}

/* ---- Board + cells ------------------------------------------------------- */
.wf-b {
  display: grid;
  gap: 4px;
  padding: 8px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--wf-grid) 30%, transparent);
  width: 100%;
}
.wf-b.c3 { grid-template-columns: repeat(3, 1fr); max-width: 160px; }
.wf-b.c4 { grid-template-columns: repeat(4, 1fr); max-width: 204px; }
.wf-b.c5 { grid-template-columns: repeat(5, 1fr); max-width: 246px; }
.wf-b.c6 { grid-template-columns: repeat(6, 1fr); max-width: 282px; }
.wf-b.c7 { grid-template-columns: repeat(7, 1fr); max-width: 316px; }

.wf-c {
  aspect-ratio: 1;
  border-radius: 5px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: clamp(11px, 3.4vw, 16px);
  background: var(--wf-empty);
  color: var(--wf-ink);
}
.wf-c.empty { background: var(--wf-empty); }
.wf-c.mine  { background: var(--wf-mine); color: #fff; }
.wf-c.foe   { background: var(--wf-foe);  color: #fff; }
.wf-c.foe2  { background: var(--wf-foe2); color: #fff; }
.wf-c.foe3  { background: var(--wf-foe3); color: var(--wf-ink); }
.wf-c.foe4  { background: var(--wf-foe4); color: #fff; }
.wf-c.ally  { background: var(--wf-ally); color: #fff; }
.wf-c.blk   { background: var(--wf-blocked); }
/* A home-line square: the app rings empty home cells in the seat colour. */
.wf-c.base  { background: var(--wf-empty); }
.wf-c.home  { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--wf-mine) 65%, transparent); }
.wf-c.foe.home, .wf-c.foe2.home, .wf-c.foe3.home, .wf-c.foe4.home,
.wf-c.ally.home, .wf-c.mine.home { box-shadow: inset 0 0 0 2px rgba(255,255,255,.75); }
.wf-c.hit   { outline: 3px solid var(--gc-warning); outline-offset: -3px; }
.wf-c.won   { background: var(--wf-mine); color: #fff; }
.wf-c.flag::after { content: "⚑"; color: #fff; }
/* Aim preview: a ringed start square and the ghosted letters of the composed word. */
.wf-c.ring  { box-shadow: inset 0 0 0 3px var(--gc-warning); }
.wf-c.ghost { background: color-mix(in srgb, var(--wf-mine) 45%, var(--wf-empty)); color: #fff; }
.wf-c.lock  { outline: 3px solid #ff9f0a; outline-offset: -3px; }

/* Side-by-side "A vs B" figure pair. */
.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: 15em; }
.wf-tag.good { color: var(--gc-success); }
.wf-tag.bad  { color: var(--gc-error); }

/* ---- Motion -------------------------------------------------------------- */
/* Undefended words loop their death; "survives" frames carry no animation, so the
   word simply stays put — the contrast IS the lesson. Every animation rests on a
   correct final frame, and base.css disables them under reduced motion. */
.gc-chapter.is-active .wf-die { animation: wfDie 3.2s var(--gc-ease) infinite; }
@keyframes wfDie {
  0%, 46%  { background: var(--wf-foe); color: #fff; transform: none; }
  58%      { transform: scale(1.13); }
  72%, 100%{ background: var(--wf-empty); color: transparent; transform: none; }
}
/* One of YOUR words being smashed (blue → empty). */
.gc-chapter.is-active .wf-diem { animation: wfDieM 3.2s var(--gc-ease) infinite; }
@keyframes wfDieM {
  0%, 46%  { background: var(--wf-mine); color: #fff; transform: none; }
  58%      { transform: scale(1.12); }
  72%, 100%{ background: var(--wf-empty); color: transparent; transform: none; }
}
/* Supply (5s): the base word and what it supplies sit → the attacker arrives →
   the base word breaks → the now-disconnected forward word collapses. */
.gc-chapter.is-active .wf-baseword { animation: wfBaseWord 5s var(--gc-ease) infinite; }
@keyframes wfBaseWord {
  0%, 45%  { opacity: 1; transform: none; }
  55%      { transform: scale(1.1); }
  62%, 100%{ background: var(--wf-empty); color: transparent; transform: none; }
}
.gc-chapter.is-active .wf-fwd { animation: wfFwd 5s var(--gc-ease) infinite; }
@keyframes wfFwd {
  0%, 62%  { opacity: 1; }
  76%, 100%{ background: var(--wf-empty); color: transparent; }
}
.gc-chapter.is-active .wf-atk { animation: wfAtk 5s var(--gc-ease) infinite; }
@keyframes wfAtk {
  0%, 20%  { opacity: 0; }
  30%, 100%{ opacity: 1; }
}
/* Beachhead: the planted flag pulses while it is held. */
.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 word advancing square by square. */
.gc-chapter.is-active .wf-adv { animation: wfAdv 3.4s var(--gc-ease) infinite; }
@keyframes wfAdv {
  0%       { background: var(--wf-empty); color: var(--wf-ink); }
  22%, 92% { background: var(--wf-mine); color: #fff; }
  100%     { background: var(--wf-empty); color: var(--wf-ink); }
}

/* ---- The play-screen mock (mirrors the real WordFront play view) ---------- */
.wf-ui { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 7px; margin: 0 auto; }
.wf-ui-panel {
  padding: 6px 10px; border-radius: 10px;
  background: var(--gc-glass); border: 1px solid var(--gc-border);
  font-size: 12px; display: flex; align-items: center; gap: 7px;
}
.wf-ui-panel .terr { font-weight: 800; color: var(--wf-mine); margin-left: auto; }
.wf-last { font-size: 11px; opacity: .65; font-weight: 600; }
.wf-infodot {
  width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 800; font-style: italic;
  border: 1.5px solid var(--wf-mine); color: var(--wf-mine);
}
.wf-clock { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--gc-text) 12%, transparent); overflow: hidden; }
.wf-clock-fill { display: block; height: 100%; width: 62%; border-radius: 3px; background: color-mix(in srgb, var(--gc-text) 42%, transparent); }
.wf-compose, .wf-rack { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; align-items: center; }
.wf-compose { padding: 5px; border-radius: 10px; background: var(--gc-glass); border: 1px solid var(--gc-border); }
.wf-key {
  width: 28px; height: 32px; border-radius: 7px; display: grid; place-items: center;
  font-weight: 800; font-size: 14px;
  background: color-mix(in srgb, var(--gc-text) 12%, transparent); color: var(--gc-text);
}
.wf-key.locked { background: #ff9f0a; color: #fff; }
.wf-key.spent  { opacity: .3; }
.wf-trash { font-size: 15px; opacity: .55; margin-left: 4px; }
.wf-dirs { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.wf-chip {
  font-size: 12.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px;
  background: var(--gc-glass); border: 1px solid var(--gc-border); color: var(--gc-text);
  display: inline-flex; align-items: center; gap: 3px;
}
.wf-chip.on { background: color-mix(in srgb, var(--gc-success) 40%, transparent); }
.wf-chip .x { color: var(--gc-error); font-size: 11px; }
.wf-btn-row { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.wf-fauxbtn {
  font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 12px;
  background: var(--gc-glass); border: 1px solid var(--gc-border); color: var(--gc-text);
}
.wf-fauxbtn.accent { background: var(--gc-success); color: #fff; border-color: transparent; }

/* ---- Worked scoring strip ------------------------------------------------ */
.wf-score { display: flex; flex-direction: column; gap: 8px; align-items: center; width: 100%; }
.wf-srow { display: flex; align-items: center; gap: 7px; font-weight: 700; }
.wf-sname { font-size: 12px; min-width: 3.6em; opacity: .75; }
.wf-schip {
  min-width: 34px; padding: 4px 8px; border-radius: 9px; text-align: center;
  font-weight: 800; font-size: 14px; color: #fff;
}
.wf-schip.mine { background: var(--wf-mine); }
.wf-schip.foe  { background: var(--wf-foe); }
.wf-schip.gold { background: var(--gc-warning); color: var(--wf-ink); }
.wf-schip.none { background: transparent; color: color-mix(in srgb, var(--gc-text) 40%, transparent); }
.wf-sop { font-size: 13px; opacity: .55; min-width: .8em; text-align: center; }
.wf-stotal { font-size: 17px; font-weight: 900; min-width: 1.9em; text-align: right; }
.wf-stotal.win { color: var(--gc-success); }