/* Late-loading Eclipse parchment polish. Keep this file scoped and additive. */
body.eclipse-page {
  --eclipse-paper-url: url("/assets/eclipse/eclipse-parchment-texture.png");
  --eclipse-paper-soft-url: url("/assets/eclipse/eclipse-parchment-soft.png");
  --eclipse-paper-edge-url: url("/assets/eclipse/eclipse-parchment-edge-mask.png");
  --eclipse-paper-base: #d9bd77;
  --eclipse-paper-warm: #edd49a;
  --eclipse-paper-edge: rgba(87, 51, 17, 0.28);
  --eclipse-paper-line: rgba(86, 52, 19, 0.34);
  --eclipse-paper-ink: #160f08;
  --eclipse-paper-muted: #3b2815;
  --eclipse-paper-soft-ink: #65431f;
  --eclipse-paper-green: #05562f;
}

body.eclipse-page .realm-intel-section,
body.eclipse-page .news-card,
body.eclipse-page .guild-info-section,
body.eclipse-page .apply-band {
  border-color: rgba(210, 166, 89, 0.42);
  border-radius: 6px;
  background:
    radial-gradient(ellipse at 48% 14%, rgba(255, 246, 205, 0.4), transparent 56%),
    linear-gradient(90deg, rgba(91, 53, 17, 0.16), transparent 8%, transparent 92%, rgba(91, 53, 17, 0.18)),
    linear-gradient(180deg, rgba(255, 239, 186, 0.34), rgba(164, 105, 39, 0.12)),
    var(--eclipse-paper-url) center / cover no-repeat,
    var(--eclipse-paper-base);
  box-shadow:
    inset 0 0 0 1px rgba(255, 239, 179, 0.48),
    inset 0 18px 42px rgba(255, 246, 206, 0.2),
    inset 0 -26px 56px rgba(76, 43, 14, 0.2),
    0 0 0 1px rgba(0, 0, 0, 0.42),
    0 24px 58px rgba(0, 0, 0, 0.38);
}

body.eclipse-page .apply-band {
  background:
    radial-gradient(ellipse at 28% 12%, rgba(255, 246, 203, 0.48), transparent 56%),
    linear-gradient(90deg, rgba(229, 199, 130, 0.72), rgba(202, 151, 75, 0.52)),
    linear-gradient(180deg, rgba(255, 247, 214, 0.28), rgba(103, 60, 20, 0.12)),
    var(--eclipse-paper-url) center / cover no-repeat,
    var(--eclipse-paper-base);
}

body.eclipse-page .realm-intel-section::before,
body.eclipse-page .news-card::before,
body.eclipse-page .guild-info-section::before,
body.eclipse-page .apply-band::before {
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(58, 32, 10, 0.34), transparent 6%, transparent 94%, rgba(58, 32, 10, 0.34)),
    linear-gradient(180deg, rgba(58, 32, 10, 0.24), transparent 8%, transparent 90%, rgba(58, 32, 10, 0.3)),
    var(--eclipse-paper-edge-url) center / 100% 100% no-repeat;
  mix-blend-mode: multiply;
  opacity: 0.34;
}

body.eclipse-page .realm-intel-section::after,
body.eclipse-page .news-card::after,
body.eclipse-page .guild-info-section::after,
body.eclipse-page .apply-band::after {
  inset: 7px;
  z-index: -1;
  border-color: rgba(54, 33, 13, 0.34);
  background:
    linear-gradient(90deg, rgba(255, 239, 182, 0.2), transparent 9%, transparent 91%, rgba(72, 41, 13, 0.12)),
    repeating-linear-gradient(0deg, rgba(64, 38, 13, 0.035) 0 1px, transparent 1px 12px),
    radial-gradient(circle at 17% 28%, rgba(73, 43, 15, 0.1) 0 1px, transparent 2px),
    radial-gradient(circle at 79% 68%, rgba(255, 232, 160, 0.14) 0 1px, transparent 2px);
  background-size: auto, auto, 46px 39px, 67px 57px;
  opacity: 0.82;
}

body.eclipse-page .realm-intel-copy,
body.eclipse-page .news-card .card-head,
body.eclipse-page .guild-info-head,
body.eclipse-page .apply-band > div {
  border-bottom-color: rgba(48, 30, 13, 0.3);
}

body.eclipse-page .realm-intel-copy h2,
body.eclipse-page .news-card .card-head strong,
body.eclipse-page .guild-info-head h2,
body.eclipse-page .apply-band h2 {
  color: #24170a;
  text-shadow:
    0 1px 0 rgba(255, 238, 181, 0.52),
    0 0 12px rgba(255, 222, 145, 0.12);
}

body.eclipse-page .realm-intel-copy p,
body.eclipse-page .news-card p,
body.eclipse-page .feed-row em,
body.eclipse-page .guild-info-head p,
body.eclipse-page .guild-info-columns ol,
body.eclipse-page .info-list,
body.eclipse-page .apply-band p {
  color: var(--eclipse-paper-muted);
  text-shadow: 0 1px 0 rgba(255, 232, 169, 0.2);
}

body.eclipse-page .phase-map b,
body.eclipse-page .source-strip a,
body.eclipse-page .feed-row,
body.eclipse-page .guild-info-columns article,
body.eclipse-page .apply-form {
  border-color: rgba(57, 35, 14, 0.5);
  background:
    linear-gradient(180deg, rgba(255, 239, 183, 0.42), rgba(151, 91, 31, 0.12)),
    rgba(237, 203, 133, 0.28);
  box-shadow:
    inset 0 0 0 1px rgba(255, 239, 179, 0.22),
    inset 0 -18px 28px rgba(78, 45, 14, 0.08),
    0 10px 26px rgba(30, 18, 7, 0.2);
}

body.eclipse-page .apply-form {
  overflow: auto;
  max-height: min(760px, calc(100vh - 120px));
  scrollbar-gutter: stable;
}

body.eclipse-page .apply-form input,
body.eclipse-page .apply-form select,
body.eclipse-page .apply-form textarea {
  border-color: rgba(53, 32, 12, 0.55);
  background:
    linear-gradient(180deg, rgba(255, 241, 191, 0.56), rgba(177, 108, 39, 0.12)),
    rgba(245, 213, 151, 0.48);
  color: #201306;
  box-shadow:
    inset 0 1px 2px rgba(43, 25, 8, 0.18),
    0 1px 0 rgba(255, 224, 147, 0.12);
}

body.eclipse-page .apply-form input::placeholder,
body.eclipse-page .apply-form textarea::placeholder {
  color: rgba(62, 39, 18, 0.78);
}

body.eclipse-page .apply-form input:focus,
body.eclipse-page .apply-form select:focus,
body.eclipse-page .apply-form textarea:focus {
  border-color: rgba(25, 100, 57, 0.76);
  outline: 2px solid rgba(25, 100, 57, 0.22);
  box-shadow:
    inset 0 1px 2px rgba(43, 25, 8, 0.16),
    0 0 0 4px rgba(16, 74, 44, 0.11);
}

body.eclipse-page .apply-form button {
  border-color: rgba(50, 31, 13, 0.68);
  color: #fff3d0;
  background:
    linear-gradient(180deg, rgba(45, 119, 73, 0.98), rgba(12, 61, 34, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 238, 177, 0.25),
    0 12px 28px rgba(20, 45, 26, 0.26);
}

body.eclipse-page .apply-form button:hover,
body.eclipse-page .apply-form button:focus-visible {
  background:
    linear-gradient(180deg, rgba(57, 139, 87, 0.98), rgba(16, 78, 43, 0.98));
}

body.eclipse-page :is(
  .member-list,
  #eclipse-honor-roll,
  .eclipse-feed,
  .character-grid,
  .raid-board,
  .buff-board,
  .graveyard-grid,
  .chronicle-rail,
  .guild-info-columns article,
  .apply-form,
  .apply-form textarea
) {
  scrollbar-color: rgba(167, 119, 52, 0.78) rgba(40, 24, 10, 0.52);
  scrollbar-width: thin;
}

body.eclipse-page :is(.member-list, #eclipse-honor-roll, .eclipse-feed) {
  max-height: 360px;
  overflow: auto;
  padding-right: 4px;
  scrollbar-gutter: stable;
}

body.eclipse-page :is(.character-grid, .raid-board, .buff-board, .graveyard-grid, .chronicle-rail) {
  max-height: 560px;
  overflow: auto;
  padding-right: 4px;
  scrollbar-gutter: stable;
}

body.eclipse-page .guild-info-columns article {
  max-height: 420px;
  overflow: auto;
  scrollbar-gutter: stable;
}

body.eclipse-page :is(
  .member-list,
  #eclipse-honor-roll,
  .eclipse-feed,
  .character-grid,
  .raid-board,
  .buff-board,
  .graveyard-grid,
  .chronicle-rail,
  .guild-info-columns article,
  .apply-form,
  .apply-form textarea
)::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

body.eclipse-page :is(
  .member-list,
  #eclipse-honor-roll,
  .eclipse-feed,
  .character-grid,
  .raid-board,
  .buff-board,
  .graveyard-grid,
  .chronicle-rail,
  .guild-info-columns article,
  .apply-form,
  .apply-form textarea
)::-webkit-scrollbar-track {
  border: 1px solid rgba(220, 166, 76, 0.12);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.38), rgba(82, 50, 20, 0.32)),
    rgba(34, 22, 10, 0.66);
}

body.eclipse-page :is(
  .member-list,
  #eclipse-honor-roll,
  .eclipse-feed,
  .character-grid,
  .raid-board,
  .buff-board,
  .graveyard-grid,
  .chronicle-rail,
  .guild-info-columns article,
  .apply-form,
  .apply-form textarea
)::-webkit-scrollbar-thumb {
  border: 2px solid rgba(36, 22, 9, 0.9);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(226, 174, 83, 0.86), rgba(103, 66, 27, 0.92));
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 155, 0.38),
    0 0 10px rgba(0, 0, 0, 0.3);
}

body.eclipse-page :is(
  .member-list,
  #eclipse-honor-roll,
  .eclipse-feed,
  .character-grid,
  .raid-board,
  .buff-board,
  .graveyard-grid,
  .chronicle-rail,
  .guild-info-columns article,
  .apply-form,
  .apply-form textarea
)::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(180deg, rgba(244, 196, 101, 0.95), rgba(127, 80, 31, 0.96));
}

@media (max-width: 720px) {
  body.eclipse-page :is(.member-list, #eclipse-honor-roll, .eclipse-feed),
  body.eclipse-page :is(.character-grid, .raid-board, .buff-board, .graveyard-grid, .chronicle-rail),
  body.eclipse-page .guild-info-columns article,
  body.eclipse-page .apply-form {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
}