/* Shared lore-card modal shell.
   Used by race.html lore cards and index.html universal-card reader;
   page-specific modal variants live in their page modules, and arrow chrome lives in arrow-controls.css. */

/* ─── LORE CARD MODAL ────────────────────────── */

.lore-modal {
  --lore-modal-padding: clamp(12px, 3vw, 28px);
  --lore-modal-inner-padding: 0 28px 42px 6px;
  --lore-modal-arrow-size: clamp(56px, 5vw, 72px);
  --lore-modal-arrow-local-offset: max(14px, calc(var(--lore-frame-pad-x) - 92px));
  --lore-modal-arrow-fixed-offset: clamp(54px, 6.4vw, 118px);
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: var(--lore-modal-padding);
  overflow: hidden;
}

.lore-modal.is-open { display: flex; }

.lore-modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(4,4,8,0.86);
  backdrop-filter: blur(3px);
}

.lore-modal__panel {
  --lore-frame-pad-x: clamp(112px, 8.5vw, 152px);
  --lore-frame-pad-top: clamp(96px, 10vh, 128px);
  --lore-frame-pad-bottom: clamp(108px, 12vh, 156px);
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  width: min(1120px, 94vw);
  height: min(82vh, 880px);
  max-height: calc(100vh - 28px);
  border: 1px solid var(--border-hover);
  border-radius: 10px;
  color: var(--text-body);
  background-image:
    linear-gradient(rgba(7,7,12,0.52), rgba(7,7,12,0.72)),
    url('../assets/card-ui/SFTL_empty_text_background_modal_16x10_1600x1000.webp');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 24px 90px rgba(0,0,0,0.72), 0 0 32px rgba(200,191,176,0.10);
}

.lore-modal__inner {
  position: absolute;
  top: var(--lore-frame-pad-top);
  right: var(--lore-frame-pad-x);
  bottom: var(--lore-frame-pad-bottom);
  left: var(--lore-frame-pad-x);
  box-sizing: border-box;
  max-width: none;
  padding: var(--lore-modal-inner-padding);
  overflow-y: auto;
  overflow-x: hidden;
  overflow-wrap: break-word;
  word-break: normal;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-color: rgba(200,191,176,0.45) rgba(8,8,14,0.35);
}

.lore-modal__inner::-webkit-scrollbar { width: 10px; }
.lore-modal__inner::-webkit-scrollbar-track { background: rgba(8,8,14,0.35); }
.lore-modal__inner::-webkit-scrollbar-thumb {
  background: rgba(200,191,176,0.35);
  border-radius: 999px;
}

.lore-modal__close {
  --lore-modal-close-size: 34px;
  --lore-modal-close-top: max(36px, calc(var(--lore-frame-pad-top) - 44px));
  --lore-modal-close-right: max(34px, calc(var(--lore-frame-pad-x) - 58px));
  position: absolute;
  top: var(--lore-modal-close-top);
  right: var(--lore-modal-close-right);
  z-index: 12;
  width: var(--lore-modal-close-size);
  height: var(--lore-modal-close-size);
  border: 1px solid var(--border);
  border-radius: 50%;
  background: rgba(8,8,14,0.88);
  color: var(--gold-light);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  box-shadow: 0 4px 18px rgba(0,0,0,0.45);
}

.lore-modal__close:hover { border-color: var(--gold); }

.lore-modal__arrow {
  z-index: 5;
  width: var(--lore-modal-arrow-size);
  height: var(--lore-modal-arrow-size);
  border: none;
  color: var(--gold-light);
  opacity: 0.9;
  box-shadow: 0 10px 32px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(200,191,176,0.06);
  transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.lore-modal__arrow--prev {
  left: var(--lore-modal-arrow-local-offset);
}

.lore-modal__arrow--next {
  right: var(--lore-modal-arrow-local-offset);
}

.lore-modal__arrow:is(:hover, :focus-visible) {
  opacity: 1;
  outline: none;
  box-shadow: 0 12px 34px rgba(0,0,0,0.62), 0 0 18px rgba(200,191,176,0.18), inset 0 0 0 1px rgba(200,191,176,0.16);
}

/* Keep modal arrows viewport-anchored while the lore panel scrolls. */
.lore-modal.is-open .lore-modal__arrow {
  position: fixed !important;
  top: 50vh !important;
  transform: translateY(-50%) !important;
  z-index: 12 !important;
  margin: 0 !important;
}

.lore-modal.is-open .lore-modal__arrow--prev {
  left: var(--lore-modal-arrow-fixed-offset) !important;
  right: auto !important;
}

.lore-modal.is-open .lore-modal__arrow--next {
  right: var(--lore-modal-arrow-fixed-offset) !important;
  left: auto !important;
}

@media (max-width: 700px) {
  .lore-modal {
    --lore-modal-arrow-fixed-offset: 12px;
  }
}

.lore-modal__meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-right: 46px;
  color: var(--gold);
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.lore-modal__meta img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

#loreModalTitle {
  font-family: var(--font-heading);
  color: var(--gold-light);
  font-size: clamp(1.25rem, 3vw, 2.2rem);
  line-height: 1.08;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
  padding-right: 48px;
  overflow-wrap: anywhere;
}

.lore-modal__description {
  color: var(--text-body);
  font-size: 1.08rem;
  line-height: 1.55;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  overflow-wrap: anywhere;
}

.lore-modal__facts {
  display: grid;
  gap: 8px;
  margin-bottom: 22px;
  color: rgba(200,191,176,0.86);
  font-size: 0.88rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.lore-modal__facts span {
  display: block;
}

.lore-modal__facts strong {
  color: var(--gold-light);
  font-family: var(--font-heading);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-right: 8px;
}

.lore-modal__text {
  white-space: pre-wrap;
  color: rgba(240,232,216,0.9);
  font-size: 1rem;
  line-height: 1.55;
  padding-bottom: 8px;
}

/* ─── LORE MODAL VARIABLE BACKGROUNDS ───── */

.lore-modal__panel--short {
  --lore-frame-pad-x: clamp(108px, 8vw, 142px);
  --lore-frame-pad-top: clamp(88px, 9vh, 116px);
  --lore-frame-pad-bottom: clamp(96px, 10vh, 136px);
  width: min(1040px, 94vw);
  height: min(72vh, 740px);
  background-image:
    linear-gradient(rgba(7,7,12,0.50), rgba(7,7,12,0.68)),
    url('../assets/card-ui/SFTL_empty_text_background_modal_compact_1400x900.webp');
}

.lore-modal__panel--medium {
  --lore-frame-pad-x: clamp(114px, 8.5vw, 152px);
  --lore-frame-pad-top: clamp(96px, 10vh, 128px);
  --lore-frame-pad-bottom: clamp(108px, 12vh, 156px);
  width: min(1120px, 94vw);
  height: min(82vh, 880px);
  background-image:
    linear-gradient(rgba(7,7,12,0.52), rgba(7,7,12,0.72)),
    url('../assets/card-ui/SFTL_empty_text_background_modal_16x10_1600x1000.webp');
}

.lore-modal__panel--long {
  --lore-frame-pad-x: clamp(122px, 9vw, 164px);
  --lore-frame-pad-top: clamp(104px, 10vh, 138px);
  --lore-frame-pad-bottom: clamp(122px, 13vh, 172px);
  width: min(1120px, 94vw);
  height: min(88vh, 940px);
  background-image:
    linear-gradient(rgba(7,7,12,0.52), rgba(7,7,12,0.74)),
    url('../assets/card-ui/SFTL_empty_text_background_modal_4x3_1600x1200.webp');
}

.lore-modal__panel--very-long {
  --lore-frame-pad-x: clamp(132px, 9vw, 176px);
  --lore-frame-pad-top: clamp(100px, 10vh, 134px);
  --lore-frame-pad-bottom: clamp(112px, 12vh, 162px);
  width: min(1280px, 96vw);
  height: min(86vh, 900px);
  background-image:
    linear-gradient(rgba(7,7,12,0.52), rgba(7,7,12,0.76)),
    url('../assets/card-ui/SFTL_empty_text_background_modal_wide_1600x900.webp');
}

#loreModalTitle,
.lore-modal__description,
.lore-modal__facts,
.lore-modal__text {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
}

@media (min-width: 901px) and (max-height: 760px) {
  :is(
    .lore-modal__panel,
    .lore-modal__panel--short,
    .lore-modal__panel--medium,
    .lore-modal__panel--long,
    .lore-modal__panel--very-long
  ) {
    --lore-frame-pad-top: 78px;
    --lore-frame-pad-bottom: 92px;
  }
}

@media (min-width: 521px) and (max-width: 900px) {
  .lore-modal {
    --lore-modal-inner-padding: 0 20px 34px 4px;
  }

  :is(
    .lore-modal__panel,
    .lore-modal__panel--short,
    .lore-modal__panel--medium,
    .lore-modal__panel--long,
    .lore-modal__panel--very-long
  ) {
    --lore-frame-pad-x: clamp(74px, 10vw, 108px);
    --lore-frame-pad-top: clamp(76px, 9vh, 102px);
    --lore-frame-pad-bottom: clamp(88px, 11vh, 120px);
    width: min(94vw, 900px);
    height: min(84vh, 760px);
  }

  :is(
    .lore-modal__panel,
    .lore-modal__panel--short,
    .lore-modal__panel--medium,
    .lore-modal__panel--very-long
  ) {
    background-image:
      linear-gradient(rgba(7,7,12,0.52), rgba(7,7,12,0.74)),
      url('../assets/card-ui/SFTL_empty_text_background_modal_4x3_1600x1200.webp');
  }

}

@media (max-width: 520px) {
  .lore-modal {
    --lore-modal-padding: 8px;
    --lore-modal-inner-padding: 0 12px 28px 2px;
  }

  :is(
    .lore-modal__panel,
    .lore-modal__panel--short,
    .lore-modal__panel--medium,
    .lore-modal__panel--long,
    .lore-modal__panel--very-long
  ) {
    --lore-frame-pad-x: clamp(42px, 12vw, 60px);
    --lore-frame-pad-top: clamp(58px, 15vw, 76px);
    --lore-frame-pad-bottom: clamp(56px, 14vw, 76px);
    width: min(96vw, 480px);
    height: min(88vh, 96vw);
    max-height: calc(100vh - 16px);
    background-image:
      linear-gradient(rgba(7,7,12,0.50), rgba(7,7,12,0.72)),
      url('../assets/card-ui/SFTL_empty_text_background_mobile_square_1200x1200.webp');
  }

  #loreModalTitle,
  .lore-modal__meta {
    padding-right: 42px;
  }

  .lore-modal__close {
    --lore-modal-close-top: 22px;
    --lore-modal-close-right: 20px;
  }
}

@media (max-width: 760px) {
  .lore-modal {
    --lore-modal-arrow-size: 46px;
    --lore-modal-arrow-local-offset: 8px;
  }

  .lore-modal__arrow {
    opacity: 0.92;
  }
}