/* Shared modal infrastructure — backdrop, container, header, close.
   Each individual modal's content also pulls main game styling
   (action buttons, inputs, error text, etc.) from ui/styles.css. */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(42, 36, 30, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 100;
}

.modal-container {
  position: relative;
  /* Aged-parchment surface — same texture as the main game panel, so a
     modal reads as a layer of the same material. Applies to BOTH the
     small (base) modals and the fullscreen variant (which doesn't
     override the background). Cream background-color stays as the
     pre-load / fallback fill. */
  background-color: var(--background-color-1);
  background-image: url('/assets/backgrounds/background02.png');
  background-size: cover;
  background-position: center;
  border: 1px solid #c8b890;
  border-radius: 4px;
  /* Roomier padding so content clears the inset ornate gold frame drawn
     by ::before/::after below. */
  padding: 2.4rem 2.4rem 2rem;
  max-width: 360px;
  width: 100%;
  max-height: calc(100vh - 2rem);
  /* Container itself never scrolls — the inner .modal-body scrolls
     instead (see below). This keeps the absolutely-positioned ornate
     frame pinned to the modal edges rather than scrolling away with tall
     content. Flex column so the title stays put above the scrolling body
     (same structure the fullscreen variant already uses). */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 28px rgba(70, 50, 30, 0.18);
  /* Body tier — Lora. The modal title overrides to family-1; other
     header-tier elements inside modals (NPC modal h2, end-of-dynasty
     legacy number, etc.) override individually. */
  font-family: var(--font-family-3);
  color: var(--font-color-1);
}

/* ===== Gold frame =====
   A double-rule golden border inset a few px from the modal edge. Shared
   by BOTH small and fullscreen modals (both are .modal-container). Drawn
   on ::before: a thin outer gold rule + a hairline inner rule (a classic
   double frame). pointer-events: none so it never blocks clicks; it pins
   to the container box via inset. The --gold / --gold-soft /
   --modal-frame-inset variables live at :root (ui/styles.css) so the
   login screen reuses the same treatment. */
.modal-container::before {
  content: '';
  position: absolute;
  inset: var(--modal-frame-inset);
  pointer-events: none;
  z-index: 3;
  border: 2px solid var(--gold);
  border-radius: 2px;
  /* Inner hairline rule, offset inward — the second line of the double
     frame. box-shadow draws it without needing a third element. */
  box-shadow: inset 0 0 0 1px var(--background-color-1),
              inset 0 0 0 3px var(--gold-soft);
}

/* ---------- Fullscreen modal — exactly tracks the <main> panel.

   Opt in by passing containerClass: 'modal-fullscreen' to openModal().
   modals.js measures <main>'s bounding rect on open and on every
   resize / content reflow, writing it to the backdrop as the
   --fs-top/left/width/height custom properties. The container then
   positions itself from those vars — same width, same height, same
   spot on screen as the game container. If `main`'s padding or
   max-width ever changes, fullscreen modals follow automatically.

   The backdrop's gray wash is suppressed when a fullscreen modal is
   present: the modal already covers the only meaningful UI surface
   (the main panel), so dimming the page background just adds noise.
   The backdrop still captures clicks for click-outside-to-close. */
.modal-backdrop:has(.modal-fullscreen) {
  background: transparent;
}

.modal-container.modal-fullscreen {
  position: fixed;
  top: var(--fs-top, 1rem);
  left: var(--fs-left, 1rem);
  width: var(--fs-width, calc(100% - 2rem));
  height: var(--fs-height, auto);
  max-width: none;       /* override base .modal-container 360px cap */
  max-height: none;      /* width/height are exact; no extra cap */
  margin: 0;
  /* A bit more than the main panel's --game-padding (1.25rem 1rem 1rem)
     on all sides, so content clears the inset gold frame with breathing
     room. */
  padding: 1.9rem 1.6rem 1.6rem;
  /* Flex column so the title pins to the top while the body scrolls
     internally. The container itself never scrolls — that would let
     the title drift out of view alongside the content. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Slightly heavier shadow than `main`'s base so it reads as a layer
     above, not as the main panel itself. */
  box-shadow: 0 8px 28px rgba(70, 50, 30, 0.25);
}

/* Inside a fullscreen modal the body owns the scroll, not the container.
   `min-height: 0` is required so the flex child can shrink below its
   intrinsic content size and the overflow takes effect. */
.modal-container.modal-fullscreen > .modal-title {
  flex: 0 0 auto;
}
.modal-container.modal-fullscreen > .modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.modal-title {
  /* Header tier — Metamorphous. Modal-container is now body-tier
     (Lora), so the title needs an explicit family override. */
  font-family: var(--font-family-1);
  margin: 0 0 1.25rem;
  text-align: center;
  font-weight: normal;
  font-size: 1.5rem;
  /* Stays put above the scrolling .modal-body (container is now a flex
     column for both small + fullscreen modals). */
  flex: 0 0 auto;
}

.modal-close {
  position: absolute;
  /* Nudged inside the inset gold frame so it doesn't collide with the
     top-right corner flourish; z-index above the frame so it stays
     visible + clickable over the ornament. */
  top: 0.7rem;
  right: 0.85rem;
  z-index: 5;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--font-color-2);
  font-family: inherit;
  padding: 0.25rem 0.5rem;
}

.modal-close:hover {
  color: var(--font-color-1);
}

.modal-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* The container caps its height and doesn't scroll (so the ornate
     frame stays pinned); the body takes the scroll when content is tall.
     min-height: 0 lets this flex child shrink below its content size so
     overflow actually engages. The fullscreen variant overrides flex to
     1 1 auto (it should fill the panel height). */
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* Keep scroll momentum inside the modal body — don't chain out to the
     (locked) page or rubber-band at the ends. */
  overscroll-behavior: contain;
}

/* ---------- Settings modal — pieces shared with any future modal that
   needs label/control rows or toggle rows. */

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.settings-row label {
  color: var(--font-color-1);
}

.settings-row select {
  padding: 0.4rem 0.5rem;
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--background-color-3);
  border: 1px solid #c8b890;
  border-radius: 3px;
  color: inherit;
}

.settings-toggle {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  user-select: none;
}

.settings-toggle input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: #2a241e;
  cursor: pointer;
}

.settings-divider {
  height: 1px;
  background: #c8b890;
  margin: 0.25rem 0;
}

/* ---------- Settings: profile section (icon picker + username + password) */

.settings-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.settings-section-title {
  /* Sub-header tier — Cardo. Uppercase settings group label. */
  font-family: var(--font-family-2);
  margin: 0;
  font-size: 1rem;
  font-weight: normal;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--font-color-2);
}

/* Profile tab "Settings" sub-heading: same type treatment as
   .settings-section-title but centered and with breathing room.
   Sits between the divider above and the second-tier action rows
   below. Small margin around so the divider doesn't kiss the
   title and the title doesn't kiss the action row. */
.profile-subsection-title {
  text-align: center;
  margin: 0.6rem 0 0.5rem;
}

/* Small italicized hint paragraph that sits below a settings control
   to explain dev-only or otherwise non-obvious affordances. Quieter
   than body text via --font-color-2, italic for "annotation" feel. */
.settings-hint {
  margin: 0.25rem 0 0;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--font-color-2);
}

.settings-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* Two settings-fields sitting side by side. Each takes equal width and
   the column itself behaves like a normal settings-field (vertical
   stack of label + input). The Geoapify dropdown stays anchored to its
   own column thanks to .geoapify-autocomplete { position: relative }. */
.settings-row-pair {
  display: flex;
  gap: 0.75rem;
}
.settings-row-pair > .settings-field,
.settings-row-pair > .settings-toggle {
  flex: 1 1 0;
  min-width: 0;       /* let inner inputs shrink below intrinsic width */
}

.settings-field label {
  font-size: 0.85rem;
  color: #6a5a4a;
}

.settings-field input {
  padding: 0.5rem 0.6rem;
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--background-color-3);
  border: 1px solid #c8b890;
  border-radius: 3px;
  color: inherit;
}

.settings-field input:focus {
  outline: none;
  border-color: #2a241e;
}

/* Inactive "No password set" placeholder shown in the Change Password
   modal when the account has no real password yet (e.g. Google-auth
   signup). Uses font-color-2 so it reads as informational rather than
   user-typed input, and looks disabled by softening the background. */
.settings-field input.no-password-placeholder {
  color: var(--font-color-2);
  font-style: italic;
  background: var(--background-color-2);
  cursor: not-allowed;
}
.settings-field input.no-password-placeholder:focus {
  border-color: #c8b890;       /* don't darken on focus — field isn't editable */
}

/* Legacy 6-column grid picker — kept for any non-profile uses. The
   Profile tab now uses the horizontal .icon-carousel below. */
.icon-picker {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.4rem;
}

/* Profile-tab horizontal carousel: single row of square-ish icon
   buttons that scroll horizontally. Arrow buttons on either side
   scroll the track ~3 icons per press; the track also accepts native
   touch/wheel scrolling. The arrows shrink-to-content; the track
   takes the remaining width. */
.icon-carousel {
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
}
.icon-carousel-arrow {
  flex: 0 0 auto;
  width: 1.8rem;
  /* Borderless, transparent — the chevron floats over whatever
     background the carousel sits on. Same affordance vocabulary as
     .dice-trigger / .ftree-trigger / .help-trigger. */
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--font-color-1);
}
.icon-carousel-arrow:hover { opacity: 0.7; }
.icon-carousel-arrow:focus { outline: none; opacity: 0.7; }
.icon-carousel-track {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  /* Hide the native scrollbar — the arrow buttons are the affordance,
     and a visible scrollbar under a one-row carousel reads as clutter.
     Mobile browsers already auto-hide their scrollbars. */
  scrollbar-width: none;
}
.icon-carousel-track::-webkit-scrollbar { display: none; }

.icon-option {
  /* Squarer footprint than the old grid version — fixed-width so each
     icon reads as a discrete tile in the carousel, not a flex-stretched
     bar. The 2.4rem width roughly matches the icon-row height
     (font-size 1.6rem + padding), so each tile is near-square. */
  flex: 0 0 auto;
  width: 2.4rem;
  font-size: 1.6rem;
  line-height: 1;
  padding: 0.35rem 0;
  background: var(--background-color-3);
  border: 1px solid #c8b890;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
}

.icon-option:hover {
  background: var(--background-color-2);
}

.icon-option.selected {
  border-color: #2a241e;
  background: var(--background-color-2);
  box-shadow: inset 0 0 0 1px #2a241e;
}

/* Primary-button styling lives in ui/buttons.css under .button-primary.
   This file no longer carries variant-specific button rules. */

.settings-success {
  margin: 0;
  color: var(--font-color-positive);
  font-size: 0.875rem;
  min-height: 1.2em;
}

/* ---------- Action rows ----------

   Generic two-or-three-button row used in the Profile tab and in modal
   footers (ChangePassword, ChangeLanguage). Buttons grow equally to
   fill the row so [Cancel] and [Confirm] sit balanced. */
.action-row {
  display: flex;
  gap: 0.6rem;
  margin: 0.5rem 0;
}
.action-row .button-primary,
.action-row .button-secondary,
.action-row .button-danger {
  flex: 1 1 0;
}

/* ---------- Modal status line ----------

   Fixed-height status slot used by ChangePasswordModal and
   ChangeLanguageModal so showing/hiding error or success messages
   doesn't change the modal's height (per design.md UX rule). The
   reserved line keeps the modal footprint stable even when empty. */
.modal-status {
  margin: 0.25rem 0 0;
  height: 1.4rem;
  line-height: 1.4rem;
  font-size: 0.9rem;
  text-align: center;
  color: var(--font-color-2);
}
.modal-status.error {
  color: var(--font-color-danger);
}
.modal-status.success {
  color: var(--font-color-positive);
}

/* ---------- ChangeLanguageModal ---------- */

.language-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.language-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid #c8b890;
  border-radius: 3px;
  cursor: pointer;
  background: var(--background-color-3);
}

.language-option input[type="radio"] {
  accent-color: var(--font-color-1);
  cursor: pointer;
}

/* ---------- NPC info modal — opened by clicking a name in card text. */

.npc-link {
  color: #5a3a1a;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  cursor: pointer;
  /* Keep "icon name" glued together so a child's icon and name don't
     wrap to separate lines in the play-screen children list. */
  white-space: nowrap;
}

.npc-link:hover,
.npc-link:focus {
  color: var(--font-color-1);
  background: rgba(90, 58, 26, 0.08);
  outline: none;
}

/* Play-screen kin lines (Spouse / Children) — drop the dotted underline
   on NPC names so the play surface stays clean prose; the names are
   still tappable (hover/focus tint covers the affordance). The NPC modal
   keeps the underline as its in-text link cue. */
#spouse-line .npc-link,
#children-line .npc-link {
  text-decoration: none;
}

/* Two-line full title inside the body. Lives below the npc-icon-large
   and above npc-sub. Matches the visual weight the modal-title used to
   carry, but lets us insert a <br> for the "of House X" wrap. */
.npc-title {
  margin: 0 0 0.4rem;
  text-align: center;
  font-weight: normal;
  font-size: 1.5rem;
  line-height: 1.2;
}

.npc-sub {
  margin: 0;
  color: #6a5a4a;
  font-size: 0.95rem;
  text-align: center;
}

.npc-parent {
  margin: 0;
  color: #6a5a4a;
  font-style: italic;
  font-size: 0.9rem;
  text-align: center;
}

/* .npc-traits / .npc-trait moved to ui/styles.css as shared .pill-list / .pill */

/* Kin block inside the NPC modal — reuses .kin-block markup + the
   same kinLines helpers as the play screen, but the play-screen
   version has a fixed height + a wide label column tuned to the
   play-screen's layout. Inside the modal we want the block to flow
   naturally: auto-height, a tighter label column, and a quiet
   top border that visually separates the kin section from the
   traits above. */
.npc-kin-block {
  height: auto;
  margin-top: 1rem;
  margin-bottom: 0;
  padding-top: 0.75rem;
  border-top: 1px solid #e6dcc4;
  /* Narrower label column than the play screen: the modal has less
     horizontal room and the kin values benefit from more of it. */
  grid-template-columns: 5.5rem 1fr;
  text-align: left;
}

.npc-icon-large {
  font-size: 3rem;
  line-height: 1;
  text-align: center;
  margin-bottom: 0.25rem;
}

.npc-meters {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.4rem 1rem;
  border-top: 1px solid #e6dcc4;
  padding-top: 0.75rem;
}

.npc-meter {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
}

.npc-meter-label {
  color: #6a5a4a;
}

.npc-meter-value {
  color: var(--font-color-1);
}

.npc-loading {
  margin: 0;
  text-align: center;
  color: var(--font-color-2);
}

/* ---------- Past Dynasties modal — simple list view */

.past-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.past-item {
  padding: 0.6rem 0.75rem;
  background: var(--background-color-3);
  border: 1px solid #c8b890;
  border-radius: 3px;
}

.past-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.15rem;
}

.past-house {
  font-size: 1.05rem;
  color: var(--font-color-1);
}

.past-meta {
  font-size: 0.85rem;
  color: #6a5a4a;
  font-style: italic;
}

/* Era line on a Past Dynasties row. Quieter than the house name above
   but more prominent than the italic meta line below — sits between
   them as a one-line "Era: Late Medieval Europe" tag. */
.past-era {
  font-size: 0.85rem;
  color: var(--font-color-2);
  margin: 0.05rem 0 0.1rem;
}