/*
 * guide.css — Tressette-specific layout on top of the shared _shared/base.css
 * premium kit (real card images via data-card, gc-cardrow/gc-felt/gc-badge/
 * gc-vs/gc-math). Only geometry lives here; every colour comes from the
 * --gc-* theme variables.
 */

/* ── Goal: trick cards sweeping into the winner's face-down pile ─────────── */
.tr-goal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.tr-arrow {
  font-size: 22px;
  font-weight: 800;
  color: var(--gc-accent);
}
.tr-pile { position: relative; }
.tr-pile::before,
.tr-pile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background: var(--gc-bg-2);
  border: 1px solid var(--gc-border);
  z-index: -1;
}
.tr-pile::before { transform: translate(3px, 3px); }
.tr-pile::after  { transform: translate(6px, 6px); }

/* ── Table: four seats in a cross, partners opposite ─────────────────────── */
.tr-seats {
  position: relative;
  display: grid;
  grid-template-areas:
    ".    top    ."
    "left bond right"
    ".    bottom .";
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  justify-items: center;
  align-items: center;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
}
.tr-seat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--gc-bg-2);
  border: 1px solid var(--gc-border);
  min-width: 84px;
}
.tr-seat.mine { border-color: var(--gc-success); }
.tr-seat.foe  { opacity: 0.85; }
.tr-top    { grid-area: top; }
.tr-left   { grid-area: left; }
.tr-right  { grid-area: right; }
.tr-bottom { grid-area: bottom; }
.tr-bond {
  grid-area: bond;
  font-size: 24px;
  font-weight: 800;
  color: var(--gc-accent);
}
.tr-seat-name { font-size: 12px; font-weight: 700; }
.tr-takes {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
}
.tr-takes .gc-cardimg { width: 22px; }

/* ── Ranking: all ten of one suit on one line ────────────────────────────── */
.tr-rankrow {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.tr-rankrow::-webkit-scrollbar { display: none; }
.tr-rankrow .gc-cardimg { width: clamp(26px, 7.6vw, 40px); }

/* ── Follow suit: led card above, the legal/illegal contrast below ───────── */
.tr-follow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}
.tr-led { display: flex; justify-content: center; }

/* ── Values: two stacked rows (scoring cards above, worthless below) ─────── */
.tr-values {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}
.tr-valrow { flex-wrap: wrap; gap: 8px; }
.tr-valrow > * + * { margin-left: 0; }

/* ── Worked deal arithmetic: number chips ────────────────────────────────── */
.tr-dealmath {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  width: 100%;
}
.tr-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: 17px;
  background: var(--gc-bg-2);
  border: 1px solid var(--gc-border);
  font-weight: 800;
  font-size: 15px;
}
.tr-chip.gold { border-color: var(--gc-accent); color: var(--gc-accent); }
.tr-chip.foe  { opacity: 0.8; }
.tr-foe-total { opacity: 0.8; }

/* ── Interface: a miniature of the real play screen ──────────────────────── */
.tr-screen {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
}
.tr-screen-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.tr-mini-seat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 12px;
  background: var(--gc-bg-2);
  border: 1px solid var(--gc-border);
  font-size: 12px;
}
.tr-mini-seat.mine { border-color: var(--gc-success); }
.tr-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gc-border);
}
.tr-menu-chip {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 13px;
  background: var(--gc-bg-2);
  border: 1px solid var(--gc-border);
  font-weight: 800;
}
.tr-screen-mid { justify-content: center; }
.tr-screen-hand { justify-content: center; }

/* ── Ciapanò: danger / safe card tints and trick-count piles ─────────────── */
.tr-danger,
.tr-safe {
  position: relative;
  display: inline-block;
  border-radius: var(--gc-card-radius, 8px);
}
.tr-danger { box-shadow: 0 0 0 2px var(--gc-error); }
.tr-safe   { box-shadow: 0 0 0 2px var(--gc-success); }
.tr-danger .gc-cardimg,
.tr-safe .gc-cardimg { display: block; }

.tr-piles {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 30px;
  width: 100%;
}
.tr-pilecol {
  display: flex;
  align-items: flex-end;
}