/* DuelModal — shared styling for the three duel beats (Challenge, Hire
   your second, Victory). The Hire-second modal carries the bulk of the
   structural rules; Challenge + Victory just reuse the shared
   .duel-prompt + .duel-action-row primitives.

   Visual vocabulary references the play tab's meter cell + gift-carousel
   icon directly (.meter-label, .meter-value, .gift-count-badge) so the
   "you have" / "commit" widgets read as the same UI primitives the
   player already knows from the main HUD. */

/* ----- Shared duel chrome ----- */
.duel-prompt {
  margin: 0 0 1rem;
  line-height: 1.5;
  color: var(--font-color-1);
  text-align: center;
}
.duel-action-row {
  margin-top: 1rem;
}

/* Victory gift line + icon — "You've been gifted {name}", then the era's
   knights-gift icon (Knights / Legionary / Samurai / Cossacks) on the next
   row. Centered under the victory prose, above the Continue button. */
.duel-victory-gifted {
  margin: 0.25rem 0 0;
  text-align: center;
  color: var(--font-color-1);
}
/* 'the Terrible' pill row — sits between the "gifted" line and the Knights icon
   when the tripled-Knights bonus fires. Centered, with breathing room on both
   sides so the pill and the icon never crowd each other. */
.duel-victory-epithet {
  display: flex;
  justify-content: center;
  margin: 0.75rem 0 0;
}
/* Wrapper around the awarded-gift icon — an inline-block so it both centers the
   icon and serves as the positioning host for the gift rays (attachIconRays) AND
   the x{N} count badge. The generous top margin gives the icon clear separation
   from the gifted line / epithet pill above (previously too crowded). */
.duel-victory-gift {
  position: relative;
  display: block;
  width: max-content;
  margin: 1rem auto 0;
}
.duel-victory-gift-icon {
  display: block;
  width: 3rem;
  height: 3rem;
  object-fit: contain;
  margin: 0 auto;
}
/* x{N} count badge pinned to the icon's lower-right corner (mirrors the streak
   reward gift badge). Shown when the Knights gift is >1 (the Terrible's x3). */
.duel-victory-gift-qty {
  position: absolute;
  right: -0.45rem;
  bottom: -0.2rem;
  min-width: 1.4rem;
  padding: 0.05rem 0.3rem;
  border-radius: 0.8rem;
  background: var(--font-color-1);
  color: var(--background-color-3);
  font-family: var(--font-family-1);
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 700;
  text-align: center;
}

/* Challenge modal — rival face icon centered above the prompt. Uses the
   same renderRulerIcon glyph as FuneralModal / NPCModal, sized to give
   the rival presence without dominating the modal. */
.duel-rival-icon {
  text-align: center;
  font-size: 3.6rem;
  line-height: 1;
  margin: 0.25rem 0 0.6rem;
}

/* ===== Dramatic challenge container =====
   Opt-in via containerClass: 'duel-challenge-container' in
   DuelChallengeModal.js. Swaps the parchment surface for the damask
   backdrop (same texture the body uses behind the game panel, with the
   same dark wine overlay) and flips text colour to white so the duel
   announcement reads as a high-drama moment — not just another beige
   modal. The Hire-Second + Victory modals are unaffected; they keep
   the standard parchment look. The gold double-rule frame inherited
   from .modal-container::before stays — it's the brand frame and reads
   beautifully against the deep wine. */
.modal-container.duel-challenge-container {
  /* Same damask + overlay recipe the body uses (see body { ... } in
     ui/styles.css). The 35% wine wash darkens the pattern enough that
     white type sits cleanly on top without losing the texture. */
  background-color: #2a0d10;
  background-image:
    linear-gradient(rgba(40, 10, 14, 0.55), rgba(40, 10, 14, 0.55)),
    url('../../assets/backgrounds/background_Violent.png');
  background-size: cover;
  background-position: center;
}
/* Flip every text node inside the dramatic container to white. Scoped
   to the container so other modals (which may also render
   .modal-title / .duel-prompt under different containers) are untouched. */
.modal-container.duel-challenge-container,
.modal-container.duel-challenge-container .modal-title,
.modal-container.duel-challenge-container .duel-prompt,
.modal-container.duel-challenge-container .modal-close {
  color: #fff;
}
/* Soften the close-button hover so the brightening still reads (white
   has nowhere brighter to go). */
.modal-container.duel-challenge-container .modal-close { opacity: 0.85; }
.modal-container.duel-challenge-container .modal-close:hover { opacity: 1; color: #fff; }
/* The gold frame's inset cream hairline (set on .modal-container::before
   in modals.css via inset 0 0 0 1px var(--background-color-1)) reads as
   a beige line on the damask. Re-tint it to a darker wine so it blends
   with the new background and the gold rule stays the dominant edge. */
.modal-container.duel-challenge-container::before {
  box-shadow: inset 0 0 0 1px rgba(40, 10, 14, 0.85),
              inset 0 0 0 3px var(--gold-soft);
}
/* Both action buttons on the challenge modal — Decline AND Accept —
   render as pure white fill with black text against the dark damask.
   Higher contrast than the standard button-primary (dark fill + cream
   text) or button-secondary (off-white + muted brown), and the two
   buttons read as a matched pair of equal-weight choices (the duel is a
   real decision, not a primary-vs-secondary nudge). Scoped to the
   challenge container so production button-primary / button-secondary
   styling elsewhere is untouched. */
.modal-container.duel-challenge-container .button-primary,
.modal-container.duel-challenge-container .button-secondary {
  background: #fff;
  color: #000;
}
.modal-container.duel-challenge-container .button-primary:hover:not(:disabled),
.modal-container.duel-challenge-container .button-secondary:hover:not(:disabled) {
  background: #f0e8d6;   /* subtle warm-cream wash on hover */
  color: #000;
}

/* ----- Hire-second layout ----- */
/* One row per resource (coffers, knights). Each row is a flex pair —
   YOU HAVE cell on the left, COMMIT cell on the right, identical
   widths. The 1rem gap between rows separates resources visually. */
.duel-hire-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.duel-hire-row:last-of-type {
  margin-bottom: 0.25rem;   /* tighter to the commit button below */
}

/* Each cell stacks: cap (YOU HAVE / COMMIT) → value/icon → optional
   bottom unit label (COFFERS). Equal widths via flex: 1 1 0 so the two
   cells in a row split the available space cleanly. No background or
   border — elements float on the modal's parchment surface, matching
   the play-tab meter row's open, unboxed look. */
.duel-hire-cell {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

/* "YOU HAVE" / "COMMIT" cap above the value. Same .meter-label visual
   treatment (uppercase, Cardo, muted) — the modifier class only exists
   so a future tweak can target the cap separately from the bottom unit
   label below. */
.duel-hire-cap {
  /* All visual rules inherited from .meter-label. */
}

/* Chevron stepper — ‹ value › row. The chevrons are borderless glyph
   buttons (same vocabulary as .gift-carousel-arrow on the play tab),
   sized to balance the .meter-value number between them. */
.duel-hire-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
}
.duel-hire-chevron {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  /* Bigger hit box for mobile thumbs. The chevron glyph stays small
     and 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 on the inner row keeps the glyph
     visually centered inside 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;
  color: var(--font-color-2);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 120ms ease-out, transform 80ms ease-out;
  font-family: inherit;
  /* 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;
}
.duel-hire-chevron:hover  { opacity: 1; }
.duel-hire-chevron:active { transform: scale(0.92); }

/* Knight icon cell on the YOU HAVE side — same visual as the play tab's
   gift carousel current button. The count badge overlays the bottom-
   right corner of the icon (see .gift-count-badge in styles.css). */
.duel-hire-knight-icon {
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.duel-hire-knight-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* 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 line up
   horizontally and the unit labels beneath them do too. Mirrors the Grand
   Tournament Coffers row. Covers both the coffers row (have value) and the
   knights row (have icon); the stepper is already ~2.75rem from its chevrons. */
.duel-hire-coffers-have,
.duel-hire-stepper,
.duel-hire-knight-icon {
  min-height: 2.75rem;
}
.duel-hire-coffers-have {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== Win-chance slider =====
   Row at the bottom of the hire-second modal, just above the commit
   button. Ruler face on the left, rival face on the right, a 0-100
   track between them holding two stacked daggers — black (current
   win threshold, slides as the player adjusts commits) and red (the
   RNG roll, hidden until commit, swings then settles). When the red
   dagger lands LEFT of the black, the ruler wins; RIGHT of the black,
   the rival wins. */
.duel-odds-slider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1.25rem 0 0.5rem;
}
.duel-odds-icon {
  width: 2.4rem;
  height: 2.4rem;
  font-size: 2rem;
  line-height: 1;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.duel-odds-track {
  position: relative;
  flex: 1 1 auto;
  height: 2rem;
}
/* The line itself — a single thin rule down the vertical centre of the
   track, parchment-warm so it reads as engraved rather than drawn. The
   daggers sit ON the line; the line is the 0..100 scale they ride. */
.duel-odds-track::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 2px;
  background: var(--gold-soft, rgba(200, 155, 60, 0.55));
  border-radius: 1px;
  transform: translateY(-50%);
}
/* Endpoint pips so 0 and 100 read as real anchors, not just where the
   line happens to end. Cosmetic; same gold tint as the line. */
.duel-odds-track::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.4rem; height: 0.4rem;
  border-radius: 50%;
  background: var(--gold-soft, rgba(200, 155, 60, 0.55));
  transform: translate(-50%, -50%);
  box-shadow: calc(100% + 0.4rem) 0 0 0 var(--gold-soft, rgba(200, 155, 60, 0.55));
  /* The single pip + box-shadow trick draws TWO pips (one at each end)
     from one element. Saves a wrapper for the right-side anchor. */
}

/* Daggers — both absolutely positioned along the track, centered on
   their `left:` percentage via translateX(-50%). CSS `left` transitions
   give the black dagger smooth motion when commits change; the red
   dagger's JS sets inline transition-durations per swing leg for the
   variable-duration roulette feel. The red is z-stacked OVER the black
   per spec ("The red dagger renders OVER the black dagger"). */
.duel-odds-dagger {
  position: absolute;
  top: 50%;
  /* Width-constrained with natural height (was a 1.5rem contained square, which
     shrank the tall blade). 1.2rem reads bigger/bolder than the old square while
     staying in scale with the thin odds track. */
  width: 1.2rem;
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
  /* Default smooth slide for the black dagger as commits change.
     JS overrides per-swing for the red dagger. */
  transition: left 220ms ease-out;
}
.duel-odds-dagger img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 1px 1px rgba(70, 50, 30, 0.35));
}
.duel-odds-dagger-black { z-index: 1; }
.duel-odds-dagger-red {
  z-index: 2;
  opacity: 0;          /* hidden until the commit swing starts */
  transition: opacity 120ms ease-out;
}
.duel-odds-dagger-red.swinging { opacity: 1; }