/*
 * guide.css — Rubamazzo-specific pile & play-screen geometry on top of
 * _shared/base.css. Only layout/shape 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.
 */

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

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

/* A capture pile: a stack of real card images, offset by their --s index
   (top card = highest --s). Heights via the rb-hN helpers. */
.rb-pile {
  position: relative;
  flex: 0 0 auto;
  --rb-card: calc(var(--gc-card-w) * 0.72);
  width: calc(var(--rb-card) + 22px);
}
.rb-pile .gc-cardimg {
  position: absolute;
  left: calc(var(--s, 0) * 4px);
  bottom: calc(var(--s, 0) * 5px);
}
/* Container heights: card height (5:7 ratio) + the stack offsets. */
.rb-h2 { height: calc(var(--rb-card) * 1.4 + 10px); }
.rb-h3 { height: calc(var(--rb-card) * 1.4 + 15px); }
.rb-h4 { height: calc(var(--rb-card) * 1.4 + 20px); }
.rb-h5 { height: calc(var(--rb-card) * 1.4 + 25px); }

.rb-your-card { flex: 0 0 auto; }

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

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

/* Four-player glimpse: four seats, each a dot avatar over a small pile. */
.rb-seats {
  display: flex;
  justify-content: center;
  gap: clamp(10px, 4vw, 20px);
  flex-wrap: wrap;
}
.rb-seat-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.rb-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gc-text) 45%, var(--gc-bg));
}
.rb-dot.mine { background: var(--gc-accent); }

/* The play-screen mock (chapter 5): opponent seat on top, deck + table card in
   the middle, your pile + hand at the bottom. UI chrome is schematic; cards
   are real images. */
.rb-screen { gap: 14px; }
.rb-seatrow,
.rb-midrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 4vw, 24px);
  flex-wrap: wrap;
}
.rb-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);
}
.rb-oppo-hand { display: flex; }
.rb-oppo-hand .gc-cardimg { width: calc(var(--gc-card-w) * 0.5); }
.rb-oppo-hand .gc-cardimg + .gc-cardimg { margin-left: calc(var(--gc-card-w) * -0.3); }
/* A seat's face-up pile-top card peeks out beside the pile back. */
.gc-cardwrap .rb-pile-top {
  position: absolute;
  left: 45%;
  top: 8%;
  transform: rotate(90deg);
  z-index: 1;
}
/* The hint glow on the suggested card (Show Hint Move). */
.rb-hinted {
  outline: 3px solid var(--gc-warning);
  outline-offset: 2px;
}