/*
 * guide.css — Eleusis Express geometry on top of the shared
 * _shared/base.css. GEOMETRY AND MOTION ONLY: every colour comes from the
 * --gc-* theme variables, so the guide matches the player's theme in-app and
 * on aiorion.it.
 *
 * The figures mirror the real play surface: a MAINLINE of accepted cards with
 * a REJECTED row underneath (CardGamePlayCustomizer renders the sideline in
 * full for Eleusis — `showFullDiscardPile`), a hand fan at the bottom, and the
 * floating "Declare prophecy" button above it.
 */

/* ---- Mainline / sideline rows ------------------------------------------- */

/* A labelled row: tag on the left, cards on the right. */
.el-linerow {
  display: grid;
  grid-template-columns: minmax(58px, auto) 1fr;
  gap: 10px;
  align-items: center;
  width: 100%;
}

/* Accepted/rejected cards read as a SEQUENCE, so spread them instead of
   fanning: the shared .gc-cardrow overlap is for a hand you hold. */
.el-spread { --overlap: 4px; justify-content: flex-start; padding: 2px; }

/* Row labels. */
.el-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  text-align: center;
  white-space: nowrap;
}
.el-tag-good { background: color-mix(in srgb, var(--gc-success) 20%, transparent); color: var(--gc-success); }
.el-tag-bad  { background: color-mix(in srgb, var(--gc-error) 18%, transparent);  color: var(--gc-error); }

/* Rejected cards are dimmed and outlined exactly as the play table draws them. */
.el-linerow:has(.el-tag-bad) .gc-cardimg {
  opacity: 0.72;
  outline: 1px solid color-mix(in srgb, var(--gc-error) 45%, transparent);
  outline-offset: -1px;
}

/* ---- The hidden-rule scene ---------------------------------------------- */

.el-scene { display: grid; gap: 12px; justify-items: center; width: 100%; }

/* The gold medallion standing for the rule the app is holding. */
.el-badge {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  font-size: 24px;
  font-weight: 800;
  color: var(--gc-bg);
  background: var(--gc-warning);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--gc-highlight) 80%, transparent),
    0 6px 16px -8px color-mix(in srgb, var(--gc-warning) 70%, transparent);
}

/* "previous card → candidate" pairing inside a contrast frame. */
.el-pair { display: flex; align-items: center; gap: 8px; }
.el-arrow { font-size: 22px; font-weight: 800; color: var(--gc-text); opacity: 0.55; }

/* Seat label under a card in the seat-dependent-rule figure. */
.el-seat {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gc-text) 10%, transparent);
  color: color-mix(in srgb, var(--gc-text) 75%, transparent);
}

/* ---- Before → after card counts ----------------------------------------- */

/* Numerals live in the markup (never in a localized string), so this chip is
   pure presentation. */
.el-count {
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 800;
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
.el-count-good { background: color-mix(in srgb, var(--gc-success) 18%, transparent); color: var(--gc-success); }
.el-count-bad  { background: color-mix(in srgb, var(--gc-error) 16%, transparent);   color: var(--gc-error); }

/* ---- The faux play screen ------------------------------------------------ */

.el-ui {
  display: grid;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border-radius: var(--gc-radius);
  background: color-mix(in srgb, var(--gc-text) 5%, transparent);
  border: 1px solid var(--gc-border);
}
.el-ui-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; }
.el-ui-felt { padding: 12px; gap: 10px; }

/* Small status pill (opponent card count, deck count). */
.el-chip {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gc-text) 12%, transparent);
  color: color-mix(in srgb, var(--gc-text) 80%, transparent);
  white-space: nowrap;
}
.el-chip-num { font-variant-numeric: tabular-nums; font-weight: 800; }

/* A non-interactive stand-in for a real button. */
.el-fauxbtn {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gc-text) 12%, transparent);
  color: var(--gc-text);
}
.el-fauxbtn.accent {
  background: var(--gc-accent);
  color: var(--gc-bg);
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--gc-accent) 70%, transparent);
}

/* The hand fan keeps an overlap — it IS a hand you hold. */
.el-hand { --overlap: calc(var(--gc-card-w) * -0.34); }

/* ---- The prophecy sheet -------------------------------------------------- */

.el-quiz {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 12px;
  border-radius: var(--gc-radius);
  background: color-mix(in srgb, var(--gc-text) 5%, transparent);
  border: 1px solid var(--gc-border);
}
.el-quiz-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--gc-border);
}
.el-quiz-row { display: flex; align-items: center; gap: 8px; }
.el-quiz-row .gc-cardimg { flex: 0 0 auto; }

/* One half of the accept/reject segmented control; `.on` is the chosen side. */
.el-seg {
  flex: 1 1 0;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 6px;
  border-radius: var(--gc-radius-sm);
  background: color-mix(in srgb, var(--gc-text) 8%, transparent);
  color: color-mix(in srgb, var(--gc-text) 70%, transparent);
}
.el-seg.on { background: var(--gc-accent); color: var(--gc-bg); }
.el-quiz .el-fauxbtn { justify-self: stretch; justify-content: center; }

/* ---- The worked scoring table ------------------------------------------- */

.el-score {
  display: grid;
  gap: 4px;
  width: 100%;
  font-size: 13px;
}
.el-score-head,
.el-score-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--gc-radius-sm);
}
.el-score-head {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--gc-text) 60%, transparent);
}
.el-score-row { background: color-mix(in srgb, var(--gc-text) 6%, transparent); font-weight: 600; }
.el-num { font-variant-numeric: tabular-nums; font-weight: 800; white-space: nowrap; }
.el-num-win { color: var(--gc-success); }

/* ---- The end-of-round reveal card --------------------------------------- */

.el-reveal {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 100%;
  padding: 18px 14px;
  border-radius: var(--gc-radius);
  text-align: center;
  background: color-mix(in srgb, var(--gc-warning) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--gc-warning) 40%, transparent);
}
.el-reveal-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--gc-warning);
}
.el-reveal-text { font-size: 16px; font-weight: 700; }

/* ---- Narrow screens ------------------------------------------------------ */

@media (max-width: 380px) {
  .el-linerow { grid-template-columns: 1fr; gap: 4px; }
  .el-quiz-row { flex-wrap: wrap; }
}