/* Reign Investment ("The Stake") modals — three sibling modals sharing
   one stylesheet so the visual rhythm is consistent across the offer /
   commit / return beats. Loosely mirrors DuelModal.css. */

/* ---- Offer + Return modals: dark damask treatment ----
   Both the event-arrival beats use background_Invest.png + white text — the
   OFFER announces a new opportunity, the RETURN delivers the outcome of
   an earlier one. Both are moments that "arrive" with weight, so they
   share the dramatic dark backdrop. The COMMIT modal in the middle
   reverts to the standard parchment surface — same pattern as the duel
   (challenge dark, hire-second parchment, victory parchment), adapted
   to the invest flow where the return is also event-arrival-shaped. */
.modal-container.invest-offer-container,
.modal-container.invest-return-container {
  background-image: url('../../assets/backgrounds/background_Invest.png');
  background-size: cover;
  background-position: center;
}
.modal-container.invest-offer-container,
.modal-container.invest-return-container,
.modal-container.invest-offer-container .modal-title,
.modal-container.invest-return-container .modal-title,
.modal-container.invest-offer-container .invest-prompt,
.modal-container.invest-return-container .invest-prompt {
  color: #fff;
}

/* Matched-pair button treatment — both Decline AND Invest on the offer
   modal, and the single Continue button on the return modal, all render
   as white fill + black text. The default button-secondary against a
   dark damask reads as a gray smudge; the white fill gives every
   choice the same visual prominence. Scoped to offer + return only —
   the commit modal in the middle keeps the production button palette. */
.modal-container.invest-offer-container .button-primary,
.modal-container.invest-offer-container .button-secondary,
.modal-container.invest-return-container .button-primary,
.modal-container.invest-return-container .button-secondary {
  background: #fff;
  color: #000;
}
.modal-container.invest-offer-container .button-primary:hover:not(:disabled),
.modal-container.invest-offer-container .button-secondary:hover:not(:disabled),
.modal-container.invest-return-container .button-primary:hover:not(:disabled),
.modal-container.invest-return-container .button-secondary:hover:not(:disabled) {
  background: #f0e8d6;   /* subtle warm-cream wash on hover */
  color: #000;
}

/* ---- Commit modal: standard parchment ----
   The middle beat — where the player tunes their stake — reverts to the
   default modal-container parchment + dark text. Inherits everything
   from the base modal palette, no overrides needed here. */

/* ---- Shared modal body ----
   The offer + return modals are simple paragraph-and-buttons affairs.
   The prose breathes against the parchment surface, with a comfortable
   line-height for the longer return texts. */
.invest-offer-modal,
.invest-return-modal {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.25rem;
}
.invest-prompt {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--font-color-1);
  text-align: center;
}
/* 'the Golden' epithet pill riding the end of the coin-return line
   (InvestReturnModal goldenReturnPill). Centered on the text baseline so it
   sits level with "…coin returned." rather than dropping below it. */
.invest-prompt .trait-pill {
  vertical-align: middle;
}

/* Action row — uses the shared .action-row but tightens the gap to feel
   like a "pick one" rather than a "stack of options." */
.action-row.invest-action-row {
  gap: 0.6rem;
  margin: 0;
}
.action-row.invest-action-row .button-primary,
.action-row.invest-action-row .button-secondary {
  flex: 1 1 0;
}

/* ---- Commit modal ----
   Stepper rows for Coffers and (optionally) Purse gifts, plus a live
   pool readout. Layout mirrors the Duel hire-second's two-cell rows so
   players get the same visual rhythm across the two events. */
.invest-commit-modal {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.invest-commit-row {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  justify-content: space-between;
  /* Top-align the two cells so their cap / value / unit rows line up. (Was
     align-items:center, which floated the shorter YOU HAVE cell to the vertical
     middle of the taller COMMIT stepper cell, knocking the values + unit labels
     out of line.) The shared min-height on the middle-row elements below then
     keeps the value row aligned across both columns. */
  align-items: flex-start;
}
.invest-commit-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  flex: 1 1 0;
}
.invest-commit-cap {
  /* Same letter-spaced uppercase caption treatment the meter cells use
     under the play screen's big numbers — see CLAUDE.md font-size
     exception list. */
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  /* Keep the caption on ONE line. "YOU HAVE" was wrapping to two lines in the
     narrow cell while "COMMIT" stayed on one, which made the YOU HAVE column's
     value + unit sit a line lower than the COMMIT column's. */
  white-space: nowrap;
}
.invest-commit-stepper {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
}
.invest-commit-chevron {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  /* Bigger hit box for mobile thumbs — mirrors .duel-hire-chevron. The
     glyph stays small + ink-light; the padding + min-width/height grow
     the CLICKABLE area to the platform-recommended ~44px without bulking
     up what the player sees. flex-centering keeps the glyph centered in
     the expanded box. */
  padding: 0.6rem 0.9rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--font-color-1);
  transition: transform 80ms ease-out, opacity 120ms ease-out;
  /* Disable the iOS double-tap-to-zoom delay + gray tap highlight; the
     chevron's own :active scale gives the visual feedback. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.invest-commit-chevron:active { transform: scale(0.92); }
.invest-commit-chevron:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.invest-commit-gift-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.invest-commit-gift-icon img {
  display: block;
  width: 2.25rem;
  height: 2.25rem;
}

/* Row-align the YOU HAVE / COMMIT columns. The COMMIT stepper's chevron tap
   targets are 2.75rem tall, which pushed its value (and the COFFERS unit label
   below it) lower than the plain-text YOU HAVE column. Give every middle-row
   element the same height and center its contents so the values + unit labels
   line up across the columns. Mirrors the Grand Tournament + Duel fix; covers
   the coffers row (have value) and the purse row (have gift icon). */
.invest-commit-coffers-have,
.invest-commit-stepper,
.invest-commit-gift-icon {
  min-height: 2.75rem;
}
.invest-commit-coffers-have {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Pool readout — the live math the player sees as they tune the
   steppers. Larger than the small caps but smaller than the title; sits
   centered above the commit button as the closing statement of the
   form. */
.invest-pool-readout {
  margin: 0.5rem 0 0;
  font-size: 1rem;
  line-height: 1.4;
  text-align: center;
  color: var(--font-color-1);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}