/*
 * mind.css — small Tressette motifs for the "For your mind" Tab B figures.
 * Copied byte-for-byte into each variant folder (tresette.standard,
 * tresette.ciapano). Colours come only from the --gc-* theme vars. No baked-in
 * text: seat/panel labels are data-i18n; glyphs are locale-agnostic Unicode.
 */

/* ---- Partnership-seat diagram (Partners to 21) -------------------------- *
 * A cross of four seats: you and your partner face each other (the same team);
 * the two opponents sit across the other axis. The centre marks the partner
 * axis that no trump can cut.
 */
.tm-seats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto;
  gap: 8px;
  align-items: center;
  justify-items: center;
  width: 100%;
  max-width: 300px;
}
.tm-seat {
  width: 84px;
  padding: 10px 6px;
  border-radius: 12px;
  text-align: center;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.15;
  color: var(--gc-text);
  background: var(--gc-bg-2);
  border: 1px solid var(--gc-border);
}
.tm-seat.mine {
  border-color: color-mix(in srgb, var(--gc-accent) 60%, transparent);
  background: color-mix(in srgb, var(--gc-accent) 14%, transparent);
}
.tm-seat.foe { opacity: 0.9; }
.tm-top    { grid-column: 2; grid-row: 1; }
.tm-left   { grid-column: 1; grid-row: 2; }
.tm-right  { grid-column: 3; grid-row: 2; }
.tm-bottom { grid-column: 2; grid-row: 3; }
.tm-bond {
  grid-column: 2; grid-row: 2;
  font-size: 24px; line-height: 1;
  color: color-mix(in srgb, var(--gc-accent) 80%, var(--gc-text));
}

/* ---- Match to the target (Partners to 21) ------------------------------ *
 * The deals really do repeat until a side reaches the agreed target (the
 * shipped templates play to twenty-one, or to thirty-one in the tournament
 * form). Schematic score line; every numeral lives in the markup.
 */
.tm-line { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tm-lrow { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.tm-llabel {
  font-size: 12px; font-weight: 700;
  min-width: 52px; text-align: end;
  color: color-mix(in srgb, var(--gc-text) 68%, transparent);
}
.tm-step {
  font-size: 16px; font-weight: 800;
  min-width: 42px; height: 42px; 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);
}
.tm-step.mine { color: var(--gc-bg); background: var(--gc-accent); border-color: transparent; }
.tm-flag {
  font-size: 15px; font-weight: 800;
  padding: 0 12px; height: 42px; border-radius: 21px;
  display: grid; place-items: center;
  color: var(--gc-bg); background: var(--gc-warning);
}
.tm-lgap { font-size: 17px; color: color-mix(in srgb, var(--gc-text) 50%, transparent); }
html[dir="rtl"] .tm-lgap { transform: scaleX(-1); }

/* ---- Seek / shed pair (Ciapanò) ---------------------------------------- *
 * The same REAL card is a prize when you seek points and a hazard when you
 * shed tricks. One panel pulls it in, the other pushes it away.
 */
.tm-swap { display: flex; align-items: center; gap: 16px; }
.tm-pan { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tm-stock { display: flex; align-items: center; }
.tm-stock .gc-cardimg + .gc-cardimg { margin-inline-start: -46px; }
.tm-chip {
  width: 64px; height: 88px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 30px; line-height: 1;
  color: var(--gc-text);
  background: var(--gc-bg-2);
  border: 1px solid var(--gc-border);
  box-shadow: 0 6px 18px var(--gc-glass);
}
.tm-arrow { font-size: 22px; font-weight: 800; line-height: 1; }
.tm-seek .tm-arrow { color: var(--gc-success); }
.tm-shed .tm-arrow { color: var(--gc-warning); }
.tm-label {
  font-size: 12.5px; font-weight: 700;
  color: color-mix(in srgb, var(--gc-text) 70%, transparent);
}
.tm-vs {
  font-size: 24px; font-weight: 700;
  color: color-mix(in srgb, var(--gc-text) 55%, transparent);
}
html[dir="rtl"] .tm-vs { transform: scaleX(-1); }