/*
 * guide.css — Scopa-family scene geometry on top of _shared/base.css.
 * Only layout/shape lives here; every colour comes from the --gc-* theme
 * variables. All card faces/backs are REAL images resolved via the data-card
 * contract (gc-cardimg) — no tile stand-ins for cards (GUIDE_REVIEW_STANDARD
 * §10). The same file ships in the top-level guide and in each variant folder.
 */

/* A horizontal scene: rows, piles, played cards and arrows side by side. */
.sc-scene {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(10px, 4vw, 22px);
  width: 100%;
}
.sc-scene.sc-tight { gap: 8px; }
.sc-col { display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* Rows of loose face-up cards (the table). */
.sc-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; align-items: center; }

/* Operators between cards in capture demos. */
.sc-op {
  font-size: clamp(20px, 6vw, 26px);
  font-weight: 800;
  color: color-mix(in srgb, var(--gc-text) 55%, transparent);
}

/* A scoring pile: a stack of real card images offset by their --s index
   (top card = highest --s). Heights via the sc-hN helpers. */
.sc-pile {
  position: relative;
  flex: 0 0 auto;
  --sc-card: calc(var(--gc-card-w) * 0.72);
  width: calc(var(--sc-card) + 22px);
}
.sc-pile .gc-cardimg {
  position: absolute;
  left: calc(var(--s, 0) * 4px);
  bottom: calc(var(--s, 0) * 5px);
}
.sc-h2 { height: calc(var(--sc-card) * 1.4 + 10px); }
.sc-h3 { height: calc(var(--sc-card) * 1.4 + 15px); }
.sc-h4 { height: calc(var(--sc-card) * 1.4 + 20px); }
.sc-h5 { height: calc(var(--sc-card) * 1.4 + 25px); }
/* The classic scopa marker: one card left face up ACROSS the face-down pile. */
.sc-pile .sc-marker { transform: rotate(90deg); z-index: 1; }

/* The flow arrow between a played card and its destination. */
.sc-arrow {
  font-size: clamp(22px, 6vw, 30px);
  font-weight: 800;
  color: var(--gc-accent);
  flex: 0 0 auto;
}
.sc-dim { opacity: 0.45; }
.sc-dimmed { opacity: 0.55; }
.sc-vs-label { margin: 6px 0 0; font-size: 13px; text-align: center; }

/* The deck stock: two slightly offset backs + a count badge. */
.sc-deck .gc-cardwrap .sc-deck-top {
  position: absolute;
  left: 3px;
  top: -3px;
}

/* An explicitly EMPTY table slot (Scopone scientifico deal). */
.sc-empty {
  border: 2px dashed var(--gc-border);
  border-radius: 12px;
  min-width: clamp(120px, 40vw, 220px);
  min-height: calc(var(--gc-card-w) * 0.9);
  display: grid;
  place-items: center;
  font-size: 13px;
  color: color-mix(in srgb, var(--gc-text) 65%, transparent);
  padding: 8px 12px;
  text-align: center;
}

/* Partnership seats: four dots around a mini felt, partners matching. */
.sc-seats {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  justify-content: center;
  gap: 8px 20px;
}
.sc-seat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}
.sc-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gc-text) 45%, var(--gc-bg));
}
.sc-dot.team-a { background: var(--gc-accent); }
.sc-dot.team-b { background: color-mix(in srgb, var(--gc-text) 60%, var(--gc-bg)); }
.sc-minifelt {
  width: clamp(70px, 18vw, 110px);
  height: clamp(46px, 12vw, 70px);
  border-radius: 12px;
  background: color-mix(in srgb, var(--gc-accent) 18%, var(--gc-bg));
  border: 2px solid var(--gc-border);
}

/* The capture-choice chooser: a schematic dialog panel over real card rows. */
.sc-chooser {
  border: 2px solid var(--gc-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--gc-bg) 85%, var(--gc-text) 4%);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  min-width: clamp(150px, 46vw, 240px);
}
.sc-chooser-title { font-size: 12px; text-align: center; opacity: 0.75; }
.sc-chooser-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1.5px solid var(--gc-border);
  border-radius: 10px;
  padding: 6px 10px;
}
.sc-chooser-opt.is-best { border-color: var(--gc-accent); }
.sc-star { color: var(--gc-warning); font-size: 16px; }

/* The play-screen mock: opponent seat on top, deck + table in the middle,
   your pile + hand at the bottom. UI chrome is schematic; cards are real. */
.sc-screen { gap: 14px; }
.sc-seatrow,
.sc-midrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 4vw, 24px);
  flex-wrap: wrap;
}
.sc-avatar {
  font-size: 26px;
  line-height: 1;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gc-text) 12%, transparent);
  border: 2px solid var(--gc-border);
}
.sc-oppo-hand { display: flex; }
.sc-oppo-hand .gc-cardimg { width: calc(var(--gc-card-w) * 0.5); }
.sc-oppo-hand .gc-cardimg + .gc-cardimg { margin-left: calc(var(--gc-card-w) * -0.3); }

/* The hint glow on the suggested card (Show Hint Move). */
.sc-hinted {
  outline: 3px solid var(--gc-warning);
  outline-offset: 2px;
}

/* Big ten-card fan (Scopone scientifico) — tighter overlap so it fits. */
.sc-fan10 { --overlap: -56px; flex-wrap: nowrap; }
.sc-fan10 .gc-cardimg { width: calc(var(--gc-card-w) * 0.62); }

/* Target badges (points to win). */
.sc-targets { display: flex; gap: 14px; justify-content: center; }
.sc-target-chip {
  min-width: 58px;
  padding: 12px 10px;
  border-radius: 14px;
  border: 2px solid var(--gc-accent);
  font-size: 24px;
  font-weight: 800;
  text-align: center;
  color: var(--gc-accent);
}
.sc-target-chip.alt { opacity: 0.65; border-style: dashed; }

/* End-of-mano tally strip: two sides with score chips. */
.sc-tally {
  display: flex;
  gap: clamp(12px, 6vw, 30px);
  justify-content: center;
  align-items: center;
}
.sc-score-chip {
  min-width: 44px;
  padding: 8px;
  border-radius: 12px;
  font-size: 22px;
  font-weight: 800;
  text-align: center;
  border: 2px solid var(--gc-border);
}
.sc-score-chip.mine { border-color: var(--gc-accent); color: var(--gc-accent); }

/* Settebello badge inside a scoring step (numeral + suit glyph as ART). */
.gc-step-badge.sc-seven {
  width: auto;
  min-width: 30px;
  padding: 0 7px;
  border-radius: 9px;
  font-size: 13px;
  gap: 1px;
}
.gc-step-badge.sc-seven .sc-suit { font-size: 0.8em; }