/* Index-only universal/race-core rule-card modal sizing and actions. */

.universal-card-modal {
  --universal-action-bottom: clamp(272px, 30vh, 340px);
  --universal-action-inner-padding-bottom: clamp(185px, 22vh, 230px);
  --universal-action-text-padding-bottom: clamp(160px, 19vh, 205px);
  --universal-full-rule-icon-size: 74px;
  --universal-full-inner-padding-bottom: 48px;
  --universal-full-text-padding-bottom: 18px;
  --universal-summary-inner-padding-bottom: 24px;
  --universal-summary-text-padding-bottom: 0;
  --universal-summary-return-min-height: 108px;
  --universal-summary-return-margin-top: clamp(30px, 4.5vh, 52px);
  --universal-summary-return-margin-bottom: clamp(8px, 2vh, 22px);
}

.universal-card-modal__text p {
  margin: 0 0 1.15em;
}

.universal-card-modal .lore-modal__panel--short {
  --lore-frame-pad-x: clamp(86px, 7vw, 122px);
  --lore-frame-pad-top: clamp(70px, 8vh, 98px);
  --lore-frame-pad-bottom: clamp(78px, 8.5vh, 110px);
  width: min(980px, 94vw);
  height: min(56vh, 560px);
  min-height: 430px;
}

.universal-card-modal .lore-modal__panel--medium {
  --lore-frame-pad-x: clamp(100px, 8vw, 142px);
  --lore-frame-pad-top: clamp(84px, 9vh, 116px);
  --lore-frame-pad-bottom: clamp(92px, 10vh, 130px);
  width: min(1040px, 94vw);
  height: min(70vh, 720px);
  background-image:
    linear-gradient(rgba(7,7,12,0.52), rgba(7,7,12,0.70)),
    url('../assets/card-ui/SFTL_empty_text_background_modal_16x10_1600x1000.webp');
}

.universal-card-modal .lore-modal__panel--long {
  --lore-frame-pad-x: clamp(112px, 8.5vw, 154px);
  --lore-frame-pad-top: clamp(94px, 10vh, 130px);
  --lore-frame-pad-bottom: clamp(106px, 11vh, 148px);
  width: min(1120px, 95vw);
  height: min(82vh, 840px);
}

.universal-card-modal .lore-modal__panel--very-long {
  --lore-frame-pad-x: clamp(122px, 9vw, 170px);
  --lore-frame-pad-top: clamp(98px, 10vh, 134px);
  --lore-frame-pad-bottom: clamp(112px, 12vh, 162px);
  width: min(1280px, 96vw);
  height: min(88vh, 900px);
}

.universal-full-rule-action {
  display: flex;
  justify-content: center;
}

.universal-full-rule-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: var(--gold-dim);
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.25;
  text-transform: uppercase;
  transition: color 0.18s ease, transform 0.18s ease, filter 0.18s ease;
}

.universal-full-rule-btn img {
  width: var(--universal-full-rule-icon-size, 74px);
  height: var(--universal-full-rule-icon-size, 74px);
  object-fit: contain;
  filter: brightness(0.88) saturate(0.9);
}

.universal-full-rule-btn:is(:hover, :focus-visible) {
  color: var(--gold-light);
  transform: translateY(-2px);
  outline: none;
}

.universal-full-rule-btn:is(:hover, :focus-visible) img {
  filter: brightness(1) saturate(1) drop-shadow(0 0 14px rgba(200,191,176,0.16));
}

.universal-card-modal .universal-full-rule-action {
  position: fixed;
  left: 50vw;
  right: auto;
  bottom: var(--universal-action-bottom);
  transform: translateX(-50%);
  z-index: 8;
  margin: 0;
  width: max-content;
  max-width: max-content;
  align-items: center;
  pointer-events: none;
}

.universal-card-modal .universal-full-rule-btn {
  pointer-events: auto;
}

.universal-card-modal .lore-modal__inner {
  padding-bottom: var(--universal-action-inner-padding-bottom);
}

.universal-card-modal .lore-modal__text {
  padding-bottom: var(--universal-action-text-padding-bottom);
}

.universal-card-modal.is-universal-full-view .universal-summary-return-action {
  position: relative;
  left: var(--summary-center-offset, 50%);
  right: auto;
  top: auto;
  bottom: auto;
  transform: translateX(-50%);

  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  z-index: 5;

  min-width: 0;
  min-height: var(--universal-summary-return-min-height);

  margin-top: var(--universal-summary-return-margin-top);
  margin-bottom: var(--universal-summary-return-margin-bottom);
  margin-left: 0;
  margin-right: 0;

  padding: 0;
  clear: both;
}

.universal-card-modal.is-universal-full-view .universal-summary-return-btn {
  visibility: visible;
  opacity: 1;
  position: relative;
  transform: none;
}

.universal-card-modal.is-universal-full-view .lore-modal__inner {
  padding-bottom: var(--universal-full-inner-padding-bottom);
}

.universal-card-modal.is-universal-full-view .lore-modal__text {
  padding-bottom: var(--universal-full-text-padding-bottom);
}

.universal-card-modal.is-universal-summary-view .lore-modal__inner {
  padding-bottom: var(--universal-summary-inner-padding-bottom);
}

.universal-card-modal.is-universal-summary-view .lore-modal__text {
  padding-bottom: var(--universal-summary-text-padding-bottom);
}

@media (max-width: 700px) {
  .universal-card-modal {
    --universal-action-bottom: clamp(168px, 22vh, 208px);
    --universal-action-inner-padding-bottom: 166px;
    --universal-action-text-padding-bottom: 142px;
    --universal-full-rule-icon-size: 58px;
    --universal-full-inner-padding-bottom: 38px;
    --universal-full-text-padding-bottom: 14px;
    --universal-summary-inner-padding-bottom: 18px;
    --universal-summary-return-min-height: 96px;
    --universal-summary-return-margin-top: 28px;
    --universal-summary-return-margin-bottom: 10px;
  }

  .universal-card-modal .lore-modal__panel--short,
  .universal-card-modal .lore-modal__panel--medium,
  .universal-card-modal .lore-modal__panel--long,
  .universal-card-modal .lore-modal__panel--very-long {
    --lore-frame-pad-x: clamp(28px, 7vw, 54px);
    --lore-frame-pad-top: clamp(58px, 8vh, 84px);
    --lore-frame-pad-bottom: clamp(58px, 9vh, 88px);
    width: min(96vw, 720px);
    height: min(78vh, 680px);
    min-height: 420px;
    background-image:
      linear-gradient(rgba(7,7,12,0.54), rgba(7,7,12,0.74)),
      url('../assets/card-ui/SFTL_empty_text_background_mobile_square_1200x1200.webp');
  }

}