/*
 * mind.css — small Briscola card motif for the "For your mind" Tab B figure.
 * Colours come only from the --gc-* theme vars. Cards are REAL faces
 * (gc-cardimg + data-card); no baked-in text.
 */

.bm-duel { display: flex; align-items: center; gap: 14px; }

/* Real card faces (gc-cardimg + data-card) — the trump marker rides a wrap. */
.bm-trumpmark { position: relative; display: inline-block; }
.bm-crown {
  position: absolute; top: -10px; right: -8px;
  font-size: 16px;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--gc-bg); background: var(--gc-warning);
  box-shadow: 0 2px 8px var(--gc-glass);
}
.bm-vs { font-size: 26px; font-weight: 700; color: color-mix(in srgb, var(--gc-text) 55%, transparent); }
html[dir="rtl"] .bm-vs { transform: scaleX(-1); }
html[dir="rtl"] .bm-crown { right: auto; left: -8px; }

/* ---- An evenly split deal is a draw (schematic score split) -------------- */
.bm-split { display: flex; align-items: center; justify-content: center; gap: 14px; }
.bm-side {
  font-size: 22px; font-weight: 800;
  min-width: 74px; height: 56px; border-radius: 16px;
  display: grid; place-items: center;
  color: var(--gc-bg); background: var(--gc-accent);
}
.bm-side.foe { background: color-mix(in srgb, var(--gc-text) 42%, transparent); }
.bm-eq { font-size: 24px; font-weight: 800; color: color-mix(in srgb, var(--gc-text) 55%, transparent); }

/* ---- Four seats, two partnerships (schematic seat map) ------------------- */
.bm-seats {
  position: relative;
  width: 210px; height: 176px; margin: 0 auto;
}
.bm-seat {
  position: absolute;
  min-width: 74px; padding: 8px 10px; border-radius: 14px;
  font-size: 12.5px; font-weight: 700; text-align: center;
  color: var(--gc-text);
  background: color-mix(in srgb, var(--gc-text) 10%, transparent);
  border: 1px solid var(--gc-border);
}
.bm-seat.mine {
  color: var(--gc-bg); background: var(--gc-accent); border-color: transparent;
}
.bm-top { top: 0; left: 50%; transform: translateX(-50%); }
.bm-bottom { bottom: 0; left: 50%; transform: translateX(-50%); }
.bm-left { left: 0; top: 50%; transform: translateY(-50%); }
.bm-right { right: 0; top: 50%; transform: translateY(-50%); }
.bm-bond {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: 22px; font-weight: 800; color: var(--gc-accent);
}

/* ---- The longer match: three deals, or a race to a target ---------------- */
.bm-match { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.bm-row { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.bm-rowlabel {
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: color-mix(in srgb, var(--gc-text) 68%, transparent);
}
.bm-deal {
  font-size: 17px; font-weight: 800;
  min-width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center;
  color: var(--gc-text);
  background: color-mix(in srgb, var(--gc-text) 12%, transparent);
  border: 1px solid var(--gc-border);
}
.bm-arrow { font-size: 18px; color: color-mix(in srgb, var(--gc-text) 50%, transparent); }
html[dir="rtl"] .bm-arrow { transform: scaleX(-1); }
.bm-run {
  font-size: 15px; font-weight: 800;
  padding: 0 12px; height: 40px; border-radius: 20px;
  display: grid; place-items: center;
  color: var(--gc-text);
  background: color-mix(in srgb, var(--gc-text) 12%, transparent);
}
.bm-target {
  font-size: 16px; font-weight: 800;
  padding: 0 14px; height: 44px; border-radius: 22px;
  display: grid; place-items: center;
  color: var(--gc-bg); background: var(--gc-warning);
}