/*
 * mind.css — Obiettivi objective-path motif for the "For your mind" Tab B figure.
 * Colours come only from the --gc-* theme vars. No baked-in text (suit glyphs are
 * Unicode; the rival label is data-i18n). No numerals are shown here. The figure
 * is a legal state: a seven-goal path — two already freed, the third face-up and
 * in reach, the last four still FACE-DOWN (only the top Objective is ever
 * visible) — beside a rival's single visible next objective.
 */

.ob-track { display: flex; flex-direction: column; align-items: center; gap: 16px; }

.ob-path {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 8px;
}

.ob-goal {
  position: relative;
  width: 40px; height: 56px;
  border-radius: 9px;
  display: grid; place-items: center;
  background: var(--gc-bg-2);
  border: 1px solid var(--gc-border);
  color: color-mix(in srgb, var(--gc-text) 45%, transparent);
  box-shadow: 0 4px 12px var(--gc-glass);
}
.ob-mark { font-size: 18px; font-weight: 800; line-height: 1; }

/* A goal card that is still face-down: you know it exists, not what it is. */
.ob-goal.is-hidden {
  background: color-mix(in srgb, var(--gc-text) 8%, var(--gc-bg-2));
  color: color-mix(in srgb, var(--gc-text) 45%, transparent);
}

/* Real card faces inside a goal slot fill it exactly. */
.ob-goal .gc-cardimg { width: 100%; border-radius: 8px; }

/* Goals already freed, in order. */
.ob-goal.is-done {
  background: color-mix(in srgb, var(--gc-accent) 22%, var(--gc-bg-2));
  border-color: color-mix(in srgb, var(--gc-accent) 55%, transparent);
  color: var(--gc-text);
}

/* The current bottleneck — the goal now in reach. */
.ob-goal.is-now {
  border-color: var(--gc-warning);
  color: var(--gc-text);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gc-warning) 55%, transparent),
              0 4px 12px var(--gc-glass);
}

/* The rival's one visible next objective. */
.ob-goal.is-foe {
  background: color-mix(in srgb, var(--gc-error) 20%, var(--gc-bg-2));
  border-color: color-mix(in srgb, var(--gc-error) 55%, transparent);
  color: var(--gc-text);
}

/* Connector arrows sit in the gap between consecutive goals. */
.ob-path li:not(:last-child)::after {
  content: "›";
  position: absolute; right: -9px; top: 50%; transform: translateY(-50%);
  font-size: 14px; color: color-mix(in srgb, var(--gc-text) 40%, transparent);
}
html[dir="rtl"] .ob-path li:not(:last-child)::after {
  right: auto; left: -9px; transform: translateY(-50%) scaleX(-1);
}

.ob-rival { display: flex; align-items: center; gap: 10px; }
.ob-rival-tag {
  font-size: 12px; font-weight: 700; letter-spacing: 0.3px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--gc-text) 60%, transparent);
}