/* Eclipse compact game UI override. Load after site-pages.css. */
body.eclipse-page {
  --egui-panel: rgba(8, 10, 11, 0.78);
  --egui-panel-2: rgba(17, 19, 20, 0.86);
  --egui-row: rgba(255, 255, 255, 0.04);
  --egui-line: rgba(255, 244, 198, 0.08);
  --egui-line-hot: rgba(255, 214, 118, 0.18);
  --egui-text: #f2e9d2;
  --egui-muted: #b7a985;
  --egui-dim: #756d5a;
  --egui-gold: #d7aa3e;
  --egui-green: #36d977;
  --egui-red: #b45137;
  --egui-radius: 6px;
  --egui-shadow: 0 16px 34px rgba(0, 0, 0, 0.34);
}

.eclipse-modern :where(.guild-card, .death-panel.guild-card, .character-card, .raid-card, .buff-card, .grave-card) {
  border: 1px solid var(--egui-line);
  border-radius: var(--egui-radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 38%),
    linear-gradient(180deg, var(--egui-panel-2), var(--egui-panel));
  box-shadow: var(--egui-shadow);
}

.eclipse-modern :where(.guild-card, .death-panel.guild-card, .character-card, .raid-card, .buff-card, .grave-card):hover {
  border-color: var(--egui-line-hot);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}

.eclipse-modern .guild-dashboard {
  grid-template-columns: minmax(360px, 1.25fr) minmax(230px, 0.7fr) minmax(240px, 0.75fr);
  gap: 8px;
}

.eclipse-modern :is(.roster-card, .progression-card, .death-panel.guild-card) {
  padding: 12px;
}

.eclipse-modern .card-head {
  min-height: 0;
  margin-bottom: 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(255, 244, 198, 0.07);
}

.eclipse-modern .card-head strong {
  color: var(--egui-text);
  font-family: "LifeCraft", Georgia, "Times New Roman", serif;
  font-size: 1.42rem;
  font-weight: 400;
  line-height: 0.95;
}

.eclipse-modern .card-head span {
  color: rgba(54, 217, 119, 0.88);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
}

.eclipse-modern .member-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.eclipse-modern .member-row {
  --role-color: var(--egui-gold);
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  min-height: 44px;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(255, 244, 198, 0.07);
  border-left-color: color-mix(in srgb, var(--role-color) 60%, transparent);
  border-radius: 5px;
  padding: 6px 7px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--role-color) 18%, transparent), transparent 46%),
    var(--egui-row);
}

.eclipse-modern .member-row.senior { --role-color: #f4c153; }
.eclipse-modern .member-row.lead { --role-color: #36d977; }
.eclipse-modern .member-row.officer { --role-color: #6eb8ff; }

.eclipse-modern .member-row i {
  width: 28px;
  height: 28px;
  border: 1px solid color-mix(in srgb, var(--role-color) 45%, transparent);
  border-radius: 5px;
  background:
    radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.26), transparent 46%),
    color-mix(in srgb, var(--role-color) 20%, rgba(0, 0, 0, 0.82));
  color: var(--egui-text);
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0.04em;
}

.eclipse-modern .member-row strong,
.eclipse-modern .death-row b {
  color: var(--egui-text);
  font-size: 0.86rem;
  line-height: 1.05;
}

.eclipse-modern .member-row em,
.eclipse-modern .death-row em {
  color: var(--egui-muted);
  font-size: 0.68rem;
  line-height: 1.15;
}

.eclipse-modern .member-row b {
  color: #83f0a8;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
}

.eclipse-modern .boss-track {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}

.eclipse-modern .boss-track span {
  min-height: 30px;
  border: 1px solid rgba(255, 244, 198, 0.08);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--egui-muted);
  font-size: 0.7rem;
  box-shadow: none;
}

.eclipse-modern .boss-track span.done {
  border-color: rgba(54, 217, 119, 0.22);
  background: linear-gradient(180deg, rgba(54, 217, 119, 0.16), rgba(54, 217, 119, 0.055));
  color: #9cf7ba;
}

.eclipse-modern .boss-track span.current {
  border-color: rgba(215, 170, 62, 0.3);
  background: linear-gradient(180deg, rgba(215, 170, 62, 0.18), rgba(215, 170, 62, 0.06));
  color: #f6d981;
}

.eclipse-modern .progression-card p {
  margin-top: 9px;
  color: var(--egui-muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.eclipse-modern #eclipse-honor-roll {
  gap: 6px;
}

.eclipse-modern .death-row {
  min-height: 42px;
  border: 1px solid rgba(180, 72, 45, 0.2);
  border-left-color: rgba(255, 113, 82, 0.45);
  border-radius: 5px;
  padding: 7px 8px;
  background: linear-gradient(90deg, rgba(94, 29, 20, 0.34), rgba(255, 255, 255, 0.025));
}

.eclipse-modern .characters-body {
  gap: 7px;
}

.eclipse-modern .class-stack {
  padding: 8px;
  border-color: rgba(255, 244, 198, 0.07);
  background: rgba(0, 0, 0, 0.28);
}

.eclipse-modern .class-meter {
  --class-color: var(--egui-gold);
  grid-template-columns: 84px minmax(70px, 1fr) 28px;
  min-height: 18px;
  gap: 7px;
}

.eclipse-modern .class-meter span {
  color: var(--egui-muted);
  font-size: 0.68rem;
}

.eclipse-modern .class-meter i {
  height: 6px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--class-color), color-mix(in srgb, var(--class-color) 42%, transparent));
  box-shadow: 0 0 14px color-mix(in srgb, var(--class-color) 18%, transparent);
}

.eclipse-modern .class-meter b {
  color: color-mix(in srgb, var(--class-color) 74%, #ffffff);
  font-size: 0.68rem;
}

.eclipse-modern .character-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.eclipse-modern .character-card {
  --class-color: var(--egui-gold);
  --class-icon: none;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-areas: "icon meta" "icon name" "icon detail";
  min-height: 58px;
  gap: 2px 8px;
  overflow: hidden;
  padding: 8px;
  border-left-color: color-mix(in srgb, var(--class-color) 55%, transparent);
  text-decoration: none;
}

.eclipse-modern .character-card::before {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.12)),
    var(--class-icon) center / cover no-repeat,
    radial-gradient(circle, color-mix(in srgb, var(--class-color) 30%, #111) 0, rgba(0, 0, 0, 0.9) 68%);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.45),
    0 0 18px color-mix(in srgb, var(--class-color) 18%, transparent);
}

.eclipse-modern .character-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--class-color) 12%, transparent), transparent 54%);
  opacity: 0.75;
  pointer-events: none;
}

.eclipse-modern .character-card > * {
  position: relative;
  z-index: 1;
}

.eclipse-modern .character-card span {
  color: color-mix(in srgb, var(--class-color) 70%, #ffffff);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
}

.eclipse-modern .character-card strong {
  color: var(--egui-text);
  font-size: 0.9rem;
  line-height: 1.08;
}

.eclipse-modern .character-card p {
  color: var(--egui-muted);
  font-size: 0.72rem;
  line-height: 1.15;
}

.eclipse-modern .class-druid { --class-color: #ff7c0a; --class-icon: url("/wow-icons/classes/druid.png"); }
.eclipse-modern .class-hunter { --class-color: #aad372; --class-icon: url("/wow-icons/classes/hunter.png"); }
.eclipse-modern .class-mage { --class-color: #3fc7eb; --class-icon: url("/wow-icons/classes/mage.png"); }
.eclipse-modern .class-paladin { --class-color: #f48cba; --class-icon: url("/wow-icons/classes/paladin.png"); }
.eclipse-modern .class-priest { --class-color: #ffffff; --class-icon: url("/wow-icons/classes/priest.png"); }
.eclipse-modern .class-rogue { --class-color: #fff468; --class-icon: url("/wow-icons/classes/rogue.png"); }
.eclipse-modern .class-shaman { --class-color: #0070dd; --class-icon: url("/wow-icons/classes/shaman.png"); }
.eclipse-modern .class-warlock { --class-color: #8788ee; --class-icon: url("/wow-icons/classes/warlock.png"); }
.eclipse-modern .class-warrior { --class-color: #c69b6d; --class-icon: url("/wow-icons/classes/warrior.png"); }

.eclipse-modern .raid-board,
.eclipse-modern .buff-board,
.eclipse-modern .graveyard-grid {
  gap: 7px;
}

.eclipse-modern .raid-card,
.eclipse-modern .buff-card {
  min-height: 0;
  padding: 9px 10px;
}

.eclipse-modern .raid-card {
  border-left-color: rgba(215, 170, 62, 0.38);
}

.eclipse-modern .raid-card.upcoming {
  border-color: rgba(54, 217, 119, 0.2);
  border-left-color: rgba(54, 217, 119, 0.58);
  background:
    linear-gradient(90deg, rgba(54, 217, 119, 0.12), transparent 52%),
    linear-gradient(180deg, var(--egui-panel-2), var(--egui-panel));
}

.eclipse-modern .raid-card.ended {
  opacity: 0.82;
}

.eclipse-modern .buff-card {
  border-left-color: rgba(66, 181, 255, 0.42);
}

.eclipse-modern .buff-card.next {
  border-color: rgba(54, 217, 119, 0.2);
  border-left-color: rgba(54, 217, 119, 0.58);
  background:
    linear-gradient(90deg, rgba(54, 217, 119, 0.12), transparent 52%),
    linear-gradient(180deg, var(--egui-panel-2), var(--egui-panel));
}

.eclipse-modern .buff-card.empty {
  border-left-color: rgba(117, 109, 90, 0.5);
}

.eclipse-modern :is(.raid-card, .buff-card) span {
  color: rgba(215, 170, 62, 0.86);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
}

.eclipse-modern :is(.raid-card.upcoming, .buff-card.next) span {
  color: #83f0a8;
}

.eclipse-modern :is(.raid-card, .buff-card) strong {
  margin-top: 2px;
  color: var(--egui-text);
  font-size: 0.94rem;
  line-height: 1.12;
}

.eclipse-modern :is(.raid-card, .buff-card) time,
.eclipse-modern :is(.raid-card, .buff-card) p {
  color: var(--egui-muted);
  font-size: 0.75rem;
  line-height: 1.25;
}

.eclipse-modern .raid-links {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.eclipse-modern .raid-links a,
.eclipse-modern .grave-source,
.eclipse-modern .grave-media-link {
  border: 1px solid rgba(54, 217, 119, 0.18);
  border-radius: 4px;
  padding: 4px 6px;
  background: rgba(54, 217, 119, 0.06);
  color: #8df5b0;
  font-size: 0.62rem;
  line-height: 1;
}

.eclipse-modern .graveyard-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.eclipse-modern .grave-card {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-areas: "rip meta" "rip name" "rip status" "body body" "media media" "source source";
  min-height: 0;
  gap: 3px 8px;
  padding: 9px;
  border-color: rgba(180, 72, 45, 0.18);
  border-left-color: rgba(255, 113, 82, 0.55);
  background:
    linear-gradient(90deg, rgba(116, 39, 27, 0.18), transparent 58%),
    linear-gradient(180deg, rgba(29, 20, 17, 0.88), rgba(9, 10, 10, 0.9));
}

.eclipse-modern .grave-card.featured {
  grid-column: span 2;
}

.eclipse-modern .grave-card.tombstone > i {
  width: 26px;
  height: 30px;
  border: 1px solid rgba(255, 113, 82, 0.25);
  border-radius: 9px 9px 4px 4px;
  background: linear-gradient(180deg, rgba(173, 85, 62, 0.36), rgba(26, 20, 18, 0.94));
  color: #ffd2c3;
  font-size: 0.54rem;
}

.eclipse-modern .grave-card span {
  color: #d19784;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
}

.eclipse-modern .grave-card strong {
  color: var(--egui-text);
  font-size: 0.9rem;
  line-height: 1.12;
}

.eclipse-modern .grave-card b {
  width: max-content;
  border-radius: 4px;
  padding: 3px 6px;
  background: rgba(180, 72, 45, 0.18);
  color: #ffb197;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.eclipse-modern .grave-card p {
  margin-top: 4px;
  color: var(--egui-muted);
  font-size: 0.74rem;
  line-height: 1.28;
}

.eclipse-modern .grave-card img {
  width: 100%;
  max-height: 70px;
  object-fit: cover;
  border-radius: 4px;
  opacity: 0.9;
}

@media (max-width: 1080px) {
  .eclipse-modern .guild-dashboard,
  .eclipse-modern .characters-section,
  .eclipse-modern .raids-section,
  .eclipse-modern .world-buffs-section,
  .eclipse-modern .graveyard-section {
    grid-template-columns: 1fr;
  }

  .eclipse-modern .character-grid,
  .eclipse-modern .graveyard-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .eclipse-modern .member-list,
  .eclipse-modern .character-grid,
  .eclipse-modern .raid-board,
  .eclipse-modern .buff-board,
  .eclipse-modern .graveyard-grid {
    grid-template-columns: 1fr;
  }

  .eclipse-modern .grave-card.featured {
    grid-column: auto;
  }

  .eclipse-modern .character-card,
  .eclipse-modern .member-row {
    min-height: 50px;
  }
}