/* =========================================================
   MUELEON - BOSSES
   HELIOS DARK / LIGHT
   ========================================================= */

:root,
:root[data-theme="light"] {
  --boss-bg: #ffffff;
  --boss-bg-soft: #f7f8fa;
  --boss-bg-hover: #fafbfc;

  --boss-border: #e2e4e9;
  --boss-border-hover: #cdd4df;

  --boss-text: #18181b;
  --boss-muted: #666d79;
  --boss-subtle: #9299a6;

  --boss-blue: #356fd6;
  --boss-blue-bg: rgba(53,111,214,.075);
  --boss-blue-border: rgba(53,111,214,.20);

  --boss-red: #dc3545;
  --boss-red-bg: rgba(220,53,69,.07);

  --boss-green: #168447;
  --boss-green-bg: rgba(22,132,71,.08);

  --boss-gold: #b77900;
  --boss-gold-bg: rgba(183,121,0,.08);

  --boss-purple: #7c3aed;
  --boss-purple-bg: rgba(124,58,237,.075);

  --boss-shadow: 0 8px 24px rgba(15,23,42,.05);
}

/* Earrings cleanup: hide base stats and suppress theme list markers. */
.earrings-page .earring-stats {
  display: none !important;
}

.earrings-page .earring-ancient-options,
.earrings-page .earring-ancient-options li {
  list-style: none !important;
  list-style-type: none !important;
}

.earrings-page .earring-ancient-options li {
  margin: 0 !important;
}

.earrings-page .earring-ancient-options li::before,
.earrings-page .earring-ancient-options li::after,
.earrings-page .earring-ancient-options li::marker {
  content: none !important;
  display: none !important;
}


:root[data-theme="dark"] {
  --boss-bg: #1a1a1d;
  --boss-bg-soft: #202126;
  --boss-bg-hover: #1f2024;

  --boss-border: #303137;
  --boss-border-hover: #444752;

  --boss-text: #f4f4f5;
  --boss-muted: #b3b6bf;
  --boss-subtle: #888d98;

  --boss-blue: #72a6ff;
  --boss-blue-bg: rgba(91,140,255,.09);
  --boss-blue-border: rgba(113,165,255,.20);

  --boss-red: #fb7185;
  --boss-red-bg: rgba(244,63,94,.075);

  --boss-green: #4ade80;
  --boss-green-bg: rgba(34,197,94,.075);

  --boss-gold: #fbbf24;
  --boss-gold-bg: rgba(245,158,11,.075);

  --boss-purple: #c084fc;
  --boss-purple-bg: rgba(168,85,247,.075);

  --boss-shadow: 0 12px 30px rgba(0,0,0,.16);
}


/* PAGE */

.bosses-page {
  width: 100%;
  max-width: none;
  color: var(--boss-text);
}

.bosses-page *,
.bosses-page *::before,
.bosses-page *::after {
  box-sizing: border-box;
}


/* HERO */

.bosses-hero {
  position: relative;
  overflow: hidden;

  margin: 0 0 38px;
  padding: 30px;

  border: 1px solid var(--boss-blue-border);
  border-radius: 16px;

  background:
    radial-gradient(
      circle at 85% 0,
      color-mix(in srgb, var(--boss-red) 10%, transparent),
      transparent 38%
    ),
    radial-gradient(
      circle at 0 100%,
      var(--boss-blue-bg),
      transparent 38%
    ),
    var(--boss-bg);
}

.bosses-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  margin: 0 0 9px;

  color: var(--boss-red);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;

  text-transform: uppercase;
}

.bosses-hero h1 {
  margin: 0 0 10px !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--boss-text) !important;

  font-size: 34px !important;
  line-height: 1.15 !important;
  font-weight: 720 !important;

  text-shadow: none !important;
}

.bosses-hero p {
  max-width: 100% !important;

  margin: 0 !important;

  color: var(--boss-muted) !important;

  font-size: 14px;
  line-height: 1.72;
}


/* SECTION */

.bosses-section {
  margin: 0 0 44px;
}

.bosses-section-head {
  display: flex;
  align-items: center;
  gap: 13px;

  margin: 0 0 18px;
  padding-bottom: 14px;

  border-bottom: 1px solid var(--boss-border);
}

.bosses-section-icon {
  display: grid;
  place-items: center;

  width: 40px;
  height: 40px;
  flex: 0 0 40px;

  border-radius: 10px;

  color: var(--boss-red);
  background: var(--boss-red-bg);
}

.bosses-section-head h2 {
  margin: 2px 0 0 !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--boss-text) !important;

  font-size: 21px !important;
  font-weight: 660 !important;
}

.bosses-section-head .bosses-kicker {
  margin: 0;
}


/* GRID */

.bosses-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
}


/* CARD */

.boss-card {
  display: grid;
  grid-template-columns: 150px minmax(0,1fr);

  min-width: 0;

  overflow: hidden;

  border: 1px solid var(--boss-border);
  border-radius: 14px;

  background: var(--boss-bg);

  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    background-color .2s ease;
}

.boss-card:hover {
  transform: translateY(-2px);

  border-color: var(--boss-border-hover);
  background: var(--boss-bg-hover);

  box-shadow: var(--boss-shadow);
}


/* IMAGE */

.boss-image {
  position: relative;

  min-height: 100%;

  overflow: hidden;

  background: #090b0e;
}

.boss-image img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  min-height: 230px;

  margin: 0 !important;

  object-fit: cover;
  object-position: center;

  border: 0 !important;
  border-radius: 0 !important;

  transition:
    transform .28s ease,
    filter .28s ease;
}

.boss-card:hover .boss-image img {
  transform: scale(1.035);
  filter: brightness(1.05);
}

.boss-image::after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      to right,
      transparent 65%,
      rgba(0,0,0,.16)
    );
}


/* CONTENT */

.boss-content {
  min-width: 0;

  padding: 18px;
}

.boss-title {
  display: flex;
  align-items: center;
  gap: 9px;

  margin: 0 0 14px;
}

.boss-title i {
  color: var(--boss-red);
}

.boss-title h3 {
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--boss-text) !important;

  font-size: 17px !important;
  line-height: 1.3 !important;
  font-weight: 680 !important;

  text-shadow: none !important;
}


/* INFO */

.boss-info {
  overflow: hidden;

  border: 1px solid var(--boss-border);
  border-radius: 9px;
}

.boss-row {
  display: grid;
  grid-template-columns: 115px minmax(0,1fr);

  gap: 14px;

  padding: 9px 11px;

  border-top: 1px solid var(--boss-border);

  font-size: 12px;
  line-height: 1.55;
}

.boss-row:first-child {
  border-top: 0;
}

.boss-label {
  color: var(--boss-subtle);

  font-weight: 600;
}

.boss-value {
  min-width: 0;

  color: var(--boss-muted);

  overflow-wrap: anywhere;
}

.boss-value strong {
  color: var(--boss-text);
}


/* SPECIAL ROWS */

.boss-row-location .boss-label {
  color: var(--boss-blue);
}

.boss-row-drop .boss-label {
  color: var(--boss-green);
}

.boss-row-respawn .boss-label {
  color: var(--boss-gold);
}

.boss-row-announce .boss-value {
  color: var(--boss-green);
  font-weight: 650;
}


/* TAGS */

.boss-tag {
  display: inline-flex;
  align-items: center;

  padding: 3px 7px;
  margin: 2px 3px 2px 0;

  border-radius: 5px;

  background: var(--boss-purple-bg);

  color: var(--boss-purple);

  font-size: 11px;
  font-weight: 650;
}

.boss-tag.green {
  background: var(--boss-green-bg);
  color: var(--boss-green);
}

.boss-tag.gold {
  background: var(--boss-gold-bg);
  color: var(--boss-gold);
}


/* FINAL */

.bosses-final {
  display: flex;
  align-items: flex-start;
  gap: 14px;

  padding: 18px;

  border: 1px solid var(--boss-blue-border);
  border-radius: 12px;

  background: var(--boss-blue-bg);
}

.bosses-final > i {
  margin-top: 2px;

  color: var(--boss-blue);

  font-size: 18px;
}

.bosses-final strong {
  color: var(--boss-blue);

  font-size: 13px;
}

.bosses-final p {
  margin: 5px 0 0 !important;

  color: var(--boss-muted) !important;

  font-size: 13px;
  line-height: 1.65;
}


/* RESPONSIVE */

@media (max-width: 1180px) {
  .bosses-grid {
    grid-template-columns: 1fr;
  }

  .boss-card {
    grid-template-columns: 180px minmax(0,1fr);
  }
}

@media (max-width: 700px) {
  .bosses-hero {
    padding: 22px;
  }

  .bosses-hero h1 {
    font-size: 28px !important;
  }

  .boss-card {
    grid-template-columns: 1fr;
  }

  .boss-image {
    height: 210px;
  }

  .boss-image img {
    min-height: 210px;
  }

  .boss-row {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}

/* =========================================================
   MUELEON - CRAFTING / COMBINATIONS
   HELIOS DARK + LIGHT
   ========================================================= */

:root,
:root[data-theme="light"] {
  --craft-bg: #ffffff;
  --craft-bg-soft: #f7f8fa;
  --craft-bg-hover: #fafbfc;

  --craft-border: #e2e4e9;
  --craft-border-hover: #ccd3df;

  --craft-text: #18181b;
  --craft-muted: #686f7b;
  --craft-subtle: #9299a6;

  --craft-blue: #356fd6;
  --craft-blue-bg: rgba(53,111,214,.075);
  --craft-blue-border: rgba(53,111,214,.20);

  --craft-green: #168447;
  --craft-green-bg: rgba(22,132,71,.08);

  --craft-yellow: #b77900;
  --craft-yellow-bg: rgba(183,121,0,.08);

  --craft-red: #dc3545;
  --craft-red-bg: rgba(220,53,69,.07);

  --craft-purple: #7c3aed;
  --craft-purple-bg: rgba(124,58,237,.075);

  --craft-shadow:
    0 8px 24px rgba(15,23,42,.05);
}


:root[data-theme="dark"] {
  --craft-bg: #1a1a1d;
  --craft-bg-soft: #202126;
  --craft-bg-hover: #1f2024;

  --craft-border: #303137;
  --craft-border-hover: #444752;

  --craft-text: #f4f4f5;
  --craft-muted: #b3b6bf;
  --craft-subtle: #888d98;

  --craft-blue: #72a6ff;
  --craft-blue-bg: rgba(91,140,255,.09);
  --craft-blue-border: rgba(113,165,255,.20);

  --craft-green: #4ade80;
  --craft-green-bg: rgba(34,197,94,.075);

  --craft-yellow: #fbbf24;
  --craft-yellow-bg: rgba(245,158,11,.075);

  --craft-red: #fb7185;
  --craft-red-bg: rgba(244,63,94,.075);

  --craft-purple: #c084fc;
  --craft-purple-bg: rgba(168,85,247,.075);

  --craft-shadow:
    0 12px 30px rgba(0,0,0,.16);
}


/* PAGE */

.craft-page {
  width: 100%;
  max-width: none;

  color: var(--craft-text);
}

.craft-page *,
.craft-page *::before,
.craft-page *::after {
  box-sizing: border-box;
}


/* HERO */

.craft-hero {
  position: relative;

  overflow: hidden;

  margin: 0 0 38px;
  padding: 30px;

  border: 1px solid var(--craft-blue-border);
  border-radius: 16px;

  background:
    radial-gradient(
      circle at 85% 0,
      color-mix(in srgb, var(--craft-purple) 10%, transparent),
      transparent 36%
    ),
    radial-gradient(
      circle at 0 100%,
      var(--craft-blue-bg),
      transparent 38%
    ),
    var(--craft-bg);
}

.craft-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  margin: 0 0 9px;

  color: var(--craft-purple);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;

  text-transform: uppercase;
}

.craft-hero h1 {
  margin: 0 0 10px !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--craft-text) !important;

  font-size: 34px !important;
  line-height: 1.15 !important;
  font-weight: 720 !important;

  text-shadow: none !important;
}

.craft-hero p {
  max-width: 100% !important;

  margin: 0 !important;

  color: var(--craft-muted) !important;

  font-size: 14px;
  line-height: 1.72;
}


/* SECTION */

.craft-section {
  margin: 0 0 44px;
}

.craft-section-head {
  display: flex;
  align-items: center;
  gap: 13px;

  margin: 0 0 18px;
  padding-bottom: 14px;

  border-bottom: 1px solid var(--craft-border);
}

.craft-section-icon {
  display: grid;
  place-items: center;

  width: 40px;
  height: 40px;
  flex: 0 0 40px;

  border-radius: 10px;

  color: var(--craft-purple);
  background: var(--craft-purple-bg);
}

.craft-section-head .craft-kicker {
  margin: 0;
}

.craft-section-head h2 {
  margin: 2px 0 0 !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--craft-text) !important;

  font-size: 21px !important;
  font-weight: 660 !important;

  text-shadow: none !important;
}


/* GRID */

.craft-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));

  gap: 16px;
}


/* CARD */

.craft-card {
  display: grid;
  grid-template-columns: 76px minmax(0,1fr);

  gap: 16px;

  min-width: 0;

  padding: 18px;

  border: 1px solid var(--craft-border);
  border-radius: 13px;

  background: var(--craft-bg);

  transition:
    transform .2s ease,
    border-color .2s ease,
    background-color .2s ease,
    box-shadow .2s ease;
}

.craft-card:hover {
  transform: translateY(-2px);

  border-color: var(--craft-border-hover);
  background: var(--craft-bg-hover);

  box-shadow: var(--craft-shadow);
}


/* IMAGE */

.craft-image {
  display: grid;
  place-items: center;

  width: 76px;
  height: 76px;

  overflow: hidden;

  border: 1px solid var(--craft-border);
  border-radius: 12px;

  background: var(--craft-bg-soft);
}

.craft-image img {
  display: block !important;

  width: auto !important;
  height: auto !important;

  max-width: 62px !important;
  max-height: 62px !important;

  margin: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  object-fit: contain;
}


/* CONTENT */

.craft-content {
  min-width: 0;
}

.craft-title {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 13px;
}

.craft-title h3 {
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--craft-text) !important;

  font-size: 16px !important;
  line-height: 1.3 !important;
  font-weight: 680 !important;

  text-shadow: none !important;
}

.craft-price {
  flex: 0 0 auto;

  padding: 5px 8px;

  border-radius: 6px;

  background: var(--craft-yellow-bg);

  color: var(--craft-yellow);

  font-size: 10.5px;
  font-weight: 700;
}


/* REQUIREMENTS */

.craft-requirements {
  display: grid;

  overflow: hidden;

  border: 1px solid var(--craft-border);
  border-radius: 9px;
}

.craft-row {
  display: grid;
  grid-template-columns: 105px minmax(0,1fr);

  gap: 14px;

  padding: 8px 10px;

  border-top: 1px solid var(--craft-border);

  font-size: 12px;
  line-height: 1.5;
}

.craft-row:first-child {
  border-top: 0;
}

.craft-label {
  color: var(--craft-subtle);

  font-weight: 600;
}

.craft-value {
  min-width: 0;

  color: var(--craft-muted);

  overflow-wrap: anywhere;
}

.craft-value strong {
  color: var(--craft-text);
}


/* SUCCESS */

.craft-success {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  margin-top: 12px;
  padding: 10px 11px;

  border: 1px solid
    color-mix(
      in srgb,
      var(--craft-green) 24%,
      var(--craft-border)
    );

  border-radius: 9px;

  background: var(--craft-green-bg);
}

.craft-success > i {
  margin-top: 2px;

  color: var(--craft-green);
}

.craft-success div {
  color: var(--craft-muted);

  font-size: 12px;
  line-height: 1.55;
}

.craft-success strong {
  color: var(--craft-green);
}


/* CHANCE COLORS */

.craft-success.medium {
  border-color:
    color-mix(
      in srgb,
      var(--craft-yellow) 28%,
      var(--craft-border)
    );

  background: var(--craft-yellow-bg);
}

.craft-success.medium > i,
.craft-success.medium strong {
  color: var(--craft-yellow);
}


/* FINAL */

.craft-final {
  display: flex;
  align-items: flex-start;
  gap: 14px;

  padding: 18px;

  border: 1px solid var(--craft-blue-border);
  border-radius: 12px;

  background: var(--craft-blue-bg);
}

.craft-final > i {
  margin-top: 2px;

  color: var(--craft-blue);

  font-size: 18px;
}

.craft-final strong {
  color: var(--craft-blue);

  font-size: 13px;
}

.craft-final p {
  margin: 5px 0 0 !important;

  color: var(--craft-muted) !important;

  font-size: 13px;
  line-height: 1.65;
}


/* RESPONSIVE */

@media (max-width: 1050px) {
  .craft-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .craft-hero {
    padding: 22px;
  }

  .craft-hero h1 {
    font-size: 28px !important;
  }

  .craft-card {
    grid-template-columns: 58px minmax(0,1fr);

    gap: 13px;

    padding: 14px;
  }

  .craft-image {
    width: 58px;
    height: 58px;
  }

  .craft-image img {
    max-width: 48px !important;
    max-height: 48px !important;
  }

  .craft-title {
    align-items: flex-start;
    flex-direction: column;

    gap: 7px;
  }

  .craft-row {
    grid-template-columns: 1fr;

    gap: 3px;
  }
}

/* =========================================================
   MUELEON - DUNGEON GUIDE
   HELIOS DARK + LIGHT
   ========================================================= */


/* =========================================================
   LIGHT MODE
   ========================================================= */

:root,
:root[data-theme="light"] {
  --dungeon-bg: #ffffff;
  --dungeon-bg-soft: #f7f8fa;
  --dungeon-bg-hover: #fafbfc;

  --dungeon-border: #e2e4e9;
  --dungeon-border-hover: #cdd4df;

  --dungeon-text: #18181b;
  --dungeon-muted: #676e79;
  --dungeon-subtle: #9299a6;

  --dungeon-blue: #356fd6;
  --dungeon-blue-bg: rgba(53,111,214,.075);
  --dungeon-blue-border: rgba(53,111,214,.20);

  --dungeon-green: #168447;
  --dungeon-green-bg: rgba(22,132,71,.08);

  --dungeon-yellow: #b77900;
  --dungeon-yellow-bg: rgba(183,121,0,.08);

  --dungeon-red: #dc3545;
  --dungeon-red-bg: rgba(220,53,69,.07);

  --dungeon-purple: #7c3aed;
  --dungeon-purple-bg: rgba(124,58,237,.075);

  --dungeon-shadow:
    0 8px 24px rgba(15,23,42,.05);
}


/* =========================================================
   DARK MODE
   ========================================================= */

:root[data-theme="dark"] {
  --dungeon-bg: #1a1a1d;
  --dungeon-bg-soft: #202126;
  --dungeon-bg-hover: #1f2024;

  --dungeon-border: #303137;
  --dungeon-border-hover: #444752;

  --dungeon-text: #f4f4f5;
  --dungeon-muted: #b3b6bf;
  --dungeon-subtle: #888d98;

  --dungeon-blue: #72a6ff;
  --dungeon-blue-bg: rgba(91,140,255,.09);
  --dungeon-blue-border: rgba(113,165,255,.20);

  --dungeon-green: #4ade80;
  --dungeon-green-bg: rgba(34,197,94,.075);

  --dungeon-yellow: #fbbf24;
  --dungeon-yellow-bg: rgba(245,158,11,.075);

  --dungeon-red: #fb7185;
  --dungeon-red-bg: rgba(244,63,94,.075);

  --dungeon-purple: #c084fc;
  --dungeon-purple-bg: rgba(168,85,247,.075);

  --dungeon-shadow:
    0 12px 30px rgba(0,0,0,.16);
}


/* =========================================================
   PAGE
   ========================================================= */

.dungeon-page {
  width: 100%;
  max-width: none;

  color: var(--dungeon-text);
}

.dungeon-page *,
.dungeon-page *::before,
.dungeon-page *::after {
  box-sizing: border-box;
}


/* =========================================================
   HERO
   ========================================================= */

.dungeon-hero {
  margin: 0 0 36px;
  padding: 28px;

  border: 1px solid var(--dungeon-blue-border);
  border-radius: 16px;

  background:
    radial-gradient(
      circle at 85% 0,
      color-mix(
        in srgb,
        var(--dungeon-purple) 10%,
        transparent
      ),
      transparent 38%
    ),
    radial-gradient(
      circle at 0 100%,
      var(--dungeon-blue-bg),
      transparent 38%
    ),
    var(--dungeon-bg);
}


.dungeon-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  margin: 0 0 8px;

  color: var(--dungeon-blue);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;

  text-transform: uppercase;
}


.dungeon-hero h1 {
  margin: 0 0 10px !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--dungeon-text) !important;

  font-size: 34px !important;
  line-height: 1.15 !important;
  font-weight: 720 !important;

  text-shadow: none !important;
}


.dungeon-hero p {
  max-width: 100% !important;

  margin: 0 !important;

  color: var(--dungeon-muted) !important;

  font-size: 14px;
  line-height: 1.72;
}


/* =========================================================
   MAP
   ========================================================= */

.dungeon-feature-image {
  position: relative;
  display: block;
  width: min(760px, 30%);
  margin: 0 auto 38px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--dungeon-border);
  border-radius: 14px;
  background: var(--dungeon-bg);
  box-shadow: var(--dungeon-shadow);
  cursor: zoom-in;
  appearance: none;
  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}


.dungeon-feature-image:hover {
  transform: translateY(-2px);

  border-color: var(--dungeon-border-hover);
}


.dungeon-feature-image img {
  display: block !important;

  width: 100% !important;
  height: auto !important;

  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;

  object-fit: contain;

  border: 0 !important;
  border-radius: 0 !important;

  transition: transform .3s ease;
}


.dungeon-feature-image:hover img {
  transform: scale(1.01);
}


/* MAP ZOOM BUTTON */

.dungeon-map-zoom {
  position: absolute;

  left: 50%;
  bottom: 14px;

  transform: translateX(-50%);

  display: inline-flex;
  align-items: center;
  gap: 7px;

  padding: 8px 11px;

  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;

  background: rgba(12,15,21,.74);

  color: #fff;

  font-size: 11px;
  font-weight: 650;

  white-space: nowrap;

  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);

  pointer-events: none;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.dungeon-section {
  margin: 0 0 44px;
}


.dungeon-section-head {
  display: flex;
  align-items: center;
  gap: 13px;

  margin: 0 0 18px;
  padding-bottom: 14px;

  border-bottom: 1px solid var(--dungeon-border);
}


.dungeon-section-icon {
  display: grid;
  place-items: center;

  width: 40px;
  height: 40px;
  flex: 0 0 40px;

  border-radius: 10px;

  color: var(--dungeon-blue);
  background: var(--dungeon-blue-bg);
}


.dungeon-section-head > div {
  min-width: 0;
  flex: 1;
}


.dungeon-section-head .dungeon-kicker {
  margin: 0;
}


.dungeon-section-head h2 {
  margin: 2px 0 0 !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--dungeon-text) !important;

  font-size: 21px !important;
  line-height: 1.25 !important;
  font-weight: 660 !important;

  text-shadow: none !important;
}


/* =========================================================
   MAIN BOSS
   ========================================================= */

.dungeon-boss {
  display: grid;

  grid-template-columns:
    260px minmax(0,1fr);

  overflow: hidden;

  border: 1px solid var(--dungeon-border);
  border-radius: 14px;

  background: var(--dungeon-bg);
}


.dungeon-boss-image {
  height: 100%;
  min-height: 320px;

  overflow: hidden;

  background: #0b0d11;
}


.dungeon-boss-image img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  min-height: 320px;

  margin: 0 !important;

  object-fit: cover;
  object-position: center top;

  border: 0 !important;
  border-radius: 0 !important;
}


.dungeon-boss-content {
  min-width: 0;

  padding: 22px;
}


.dungeon-boss-title {
  display: flex;
  align-items: center;
  gap: 10px;

  margin-bottom: 12px;
}


.dungeon-boss-title i {
  color: var(--dungeon-red);
}


.dungeon-boss-title h3 {
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--dungeon-text) !important;

  font-size: 20px !important;
  line-height: 1.3 !important;
  font-weight: 680 !important;

  text-shadow: none !important;
}


.dungeon-boss-content > p {
  margin: 0 0 15px !important;

  color: var(--dungeon-muted) !important;

  font-size: 13px;
  line-height: 1.65;
}


/* =========================================================
   BOSS INFO
   ========================================================= */

.dungeon-info {
  overflow: hidden;

  border: 1px solid var(--dungeon-border);
  border-radius: 9px;
}


.dungeon-info-row {
  display: grid;

  grid-template-columns:
    125px minmax(0,1fr);

  gap: 16px;

  padding: 9px 11px;

  border-top: 1px solid var(--dungeon-border);

  font-size: 12px;
  line-height: 1.55;
}


.dungeon-info-row:first-child {
  border-top: 0;
}


.dungeon-info-label {
  color: var(--dungeon-subtle);

  font-weight: 600;
}


.dungeon-info-value {
  color: var(--dungeon-muted);
}


/* =========================================================
   ORC SLAYER DROP
   ========================================================= */

.dungeon-drop-list {
  display: grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap: 8px;

  margin-top: 14px;
}


.dungeon-drop-list span {
  display: flex;
  align-items: center;
  gap: 8px;

  min-width: 0;

  padding: 9px 10px;

  border: 1px solid
    color-mix(
      in srgb,
      var(--dungeon-green) 17%,
      transparent
    );

  border-radius: 8px;

  background: var(--dungeon-green-bg);

  color: var(--dungeon-green);

  font-size: 12px;
  font-weight: 600;
}


.dungeon-drop-list span::before {
  content: "\2713";

  flex: 0 0 auto;

  font-weight: 800;
}


/* =========================================================
   MINI BOSSES GRID
   ========================================================= */

.dungeon-mini-grid {
  display: grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap: 16px;
}


/* =========================================================
   MINI BOSS CARD
   ========================================================= */

.dungeon-mini-card {
  display: grid;

  grid-template-columns:
    170px minmax(0,1fr);

  align-items: start;

  min-width: 0;

  overflow: hidden;

  border: 1px solid var(--dungeon-border);
  border-radius: 13px;

  background: var(--dungeon-bg);

  transition:
    transform .18s ease,
    border-color .18s ease,
    background-color .18s ease,
    box-shadow .18s ease;
}


.dungeon-mini-card:hover {
  transform: translateY(-2px);

  border-color: var(--dungeon-border-hover);

  background: var(--dungeon-bg-hover);

  box-shadow: var(--dungeon-shadow);
}


/* =========================================================
   MINI BOSS IMAGE
   ========================================================= */

.dungeon-mini-image {
  width: 100%;
  height: 280px;
  min-height: 280px;

  overflow: hidden;

  background: #0b0d11;
}


.dungeon-mini-image img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  min-height: 0 !important;
  max-height: none !important;

  margin: 0 !important;

  object-fit: cover;
  object-position: center top;

  border: 0 !important;
  border-radius: 0 !important;
}


/* =========================================================
   MINI BOSS CONTENT
   ========================================================= */

.dungeon-mini-content {
  min-width: 0;

  padding: 16px;
}


.dungeon-mini-content > h3 {
  margin: 0 0 12px !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--dungeon-text) !important;

  font-size: 16px !important;
  line-height: 1.3 !important;
  font-weight: 670 !important;

  text-shadow: none !important;
}


.dungeon-mini-content > p {
  margin: 0 !important;

  color: var(--dungeon-muted) !important;

  font-size: 12px;
  line-height: 1.6;
}


/* =========================================================
   DROP GROUP
   ========================================================= */

.dungeon-drop-group {
  margin-top: 10px;

  overflow: hidden;

  border: 1px solid var(--dungeon-border);
  border-radius: 9px;

  background: var(--dungeon-bg-soft);
}


.dungeon-drop-group:first-of-type {
  margin-top: 0;
}


/* =========================================================
   DROP HEADER
   ========================================================= */

.dungeon-drop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  min-height: 38px;

  padding: 8px 10px;

  border-bottom: 1px solid var(--dungeon-border);

  color: var(--dungeon-text);

  font-size: 11.5px;
  font-weight: 650;
}


/* =========================================================
   DROP CHANCE
   ========================================================= */

.dungeon-chance {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  min-width: 42px;

  margin: 0;
  padding: 4px 7px;

  border-radius: 6px;

  background: var(--dungeon-yellow-bg);

  color: var(--dungeon-yellow);

  font-size: 10px;
  font-weight: 750;
}


/* =========================================================
   DROP ITEMS - TWO COLUMNS
   ========================================================= */

.dungeon-drop-items {
  display: grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
}


.dungeon-drop-items li {
  position: relative;

  min-width: 0;

  margin: 0 !important;
  padding: 8px 10px 8px 28px;

  border-top: 1px solid var(--dungeon-border);

  color: var(--dungeon-muted);

  font-size: 11.5px;
  line-height: 1.45;

  overflow-wrap: anywhere;
}


/* vertical separator */

.dungeon-drop-items li:nth-child(even) {
  border-left: 1px solid var(--dungeon-border);
}


/* first row */

.dungeon-drop-items li:nth-child(1),
.dungeon-drop-items li:nth-child(2) {
  border-top: 0;
}


/* bullet */

.dungeon-drop-items li::before {
  content: "";

  position: absolute;

  left: 12px;
  top: 50%;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: var(--dungeon-green);

  transform: translateY(-50%);
}


/* =========================================================
   SINGLE DROP
   ========================================================= */

.dungeon-drop-single {
  padding: 10px 11px;

  color: var(--dungeon-muted);

  font-size: 11.5px;
  line-height: 1.5;
}


/* =========================================================
   ZEN DROP
   ========================================================= */

.dungeon-drop-zen {
  display: flex;
  align-items: center;

  gap: 8px;

  padding: 10px 11px;

  color: var(--dungeon-yellow);

  font-size: 12px;
}


.dungeon-drop-zen i {
  color: var(--dungeon-yellow);
}


.dungeon-drop-zen strong {
  color: var(--dungeon-text);
}


/* =========================================================
   NOTE
   ========================================================= */

.dungeon-note {
  display: flex;
  align-items: flex-start;

  gap: 10px;

  margin-bottom: 14px;
  padding: 11px 12px;

  border: 1px solid var(--dungeon-blue-border);
  border-radius: 9px;

  background: var(--dungeon-blue-bg);

  color: var(--dungeon-muted);

  font-size: 12px;
  line-height: 1.55;
}


.dungeon-note i {
  margin-top: 2px;

  color: var(--dungeon-blue);
}


/* =========================================================
   ADDITIONAL MONSTERS
   ========================================================= */

.dungeon-monsters {
  display: grid;

  gap: 9px;
}


.dungeon-monster {
  display: grid;

  grid-template-columns:
    minmax(190px,.65fr)
    minmax(0,1.35fr);

  gap: 20px;

  padding: 12px 14px;

  border: 1px solid var(--dungeon-border);
  border-radius: 9px;

  background: var(--dungeon-bg);

  transition:
    border-color .18s ease,
    background-color .18s ease;
}


.dungeon-monster:hover {
  border-color: var(--dungeon-border-hover);

  background: var(--dungeon-bg-hover);
}


.dungeon-monster strong {
  color: var(--dungeon-text);

  font-size: 12.5px;
}


.dungeon-monster span {
  color: var(--dungeon-muted);

  font-size: 12px;
  line-height: 1.55;
}


/* =========================================================
   MAP LIGHTBOX
   ========================================================= */

.dungeon-map-lightbox {
  position: fixed;

  inset: 0;

  z-index: 99999;

  display: grid;
  place-items: center;

  padding: 20px;

  visibility: hidden;
  opacity: 0;

  background: rgba(3,5,9,.90);

  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  transition:
    opacity .25s ease,
    visibility .25s ease;
}


.dungeon-map-lightbox.is-open {
  visibility: visible;
  opacity: 1;
}


/* =========================================================
   LIGHTBOX DIALOG
   ========================================================= */

.dungeon-map-lightbox-dialog {
  position: relative;

  display: flex;
  flex-direction: column;

  width: min(1600px,98vw);
  height: min(94vh,1100px);

  overflow: hidden;

  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;

  background: #0d1015;

  box-shadow:
    0 30px 100px rgba(0,0,0,.65);

  transform: scale(.98);

  transition:
    transform .28s
    cubic-bezier(.2,.8,.2,1);
}


.dungeon-map-lightbox.is-open
.dungeon-map-lightbox-dialog {
  transform: scale(1);
}


/* =========================================================
   LIGHTBOX MEDIA
   ========================================================= */

.dungeon-map-lightbox-media {
  display: flex;

  align-items: center;
  justify-content: center;

  flex: 1;

  min-height: 0;

  overflow: auto;

  background: #05070a;
}


.dungeon-map-lightbox-media img {
  display: block !important;

  width: auto !important;
  height: auto !important;

  max-width: 100% !important;
  max-height: 100% !important;

  margin: auto !important;

  object-fit: contain;

  border: 0 !important;
  border-radius: 0 !important;
}


/* =========================================================
   LIGHTBOX CAPTION
   ========================================================= */

.dungeon-map-lightbox-caption {
  flex: 0 0 auto;

  padding: 13px 17px;

  border-top: 1px solid rgba(255,255,255,.08);

  background: #12161c;

  color: #c4c9d2;

  font-size: 12px;
  font-weight: 600;
}


/* =========================================================
   LIGHTBOX CLOSE BUTTON
   ========================================================= */

.dungeon-map-lightbox-close {
  position: absolute;

  top: 12px;
  right: 12px;

  z-index: 10;

  width: 42px;
  height: 42px;

  margin: 0;
  padding: 0;

  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;

  background: rgba(16,19,25,.86);

  color: #fff;

  cursor: pointer;

  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);

  transition:
    transform .18s ease,
    background-color .18s ease;
}


.dungeon-map-lightbox-close::before,
.dungeon-map-lightbox-close::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width: 16px;
  height: 2px;

  border-radius: 2px;

  background: currentColor;
}


.dungeon-map-lightbox-close::before {
  transform:
    translate(-50%,-50%)
    rotate(45deg);
}


.dungeon-map-lightbox-close::after {
  transform:
    translate(-50%,-50%)
    rotate(-45deg);
}


.dungeon-map-lightbox-close:hover {
  transform: scale(1.06);

  background: rgba(40,45,56,.96);
}


body.dungeon-map-opened {
  overflow: hidden;
}


/* =========================================================
   RESPONSIVE - TABLET
   ========================================================= */

@media (max-width: 1150px) {

  .dungeon-mini-grid {
    grid-template-columns: 1fr;
  }


  .dungeon-mini-card {
    grid-template-columns:
      190px minmax(0,1fr);
  }

}


/* =========================================================
   RESPONSIVE - SMALL TABLET
   ========================================================= */

@media (max-width: 800px) {

  .dungeon-boss {
    grid-template-columns: 1fr;
  }


  .dungeon-boss-image {
    height: 280px;
    min-height: 280px;
  }


  .dungeon-boss-image img {
    min-height: 280px;
  }

}


/* =========================================================
   RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .dungeon-hero {
    padding: 21px;
  }


  .dungeon-hero h1 {
    font-size: 28px !important;
  }


  .dungeon-feature-image {
    width: 100%;
  }


  .dungeon-mini-card {
    grid-template-columns: 1fr;
  }


  .dungeon-mini-image {
    height: 240px;
    min-height: 240px;
  }


  .dungeon-mini-image img {
    min-height: 0 !important;
  }


  .dungeon-drop-items {
    grid-template-columns: 1fr;
  }


  .dungeon-drop-items li {
    border-left: 0 !important;
  }


  .dungeon-drop-items li:nth-child(2) {
    border-top:
      1px solid var(--dungeon-border);
  }


  .dungeon-info-row,
  .dungeon-monster {
    grid-template-columns: 1fr;

    gap: 4px;
  }


  .dungeon-drop-list {
    grid-template-columns: 1fr;
  }


  .dungeon-map-lightbox {
    padding: 8px;
  }


  .dungeon-map-lightbox-dialog {
    width: 100%;
    height: 92vh;

    border-radius: 12px;
  }


  .dungeon-map-lightbox-close {
    width: 38px;
    height: 38px;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .dungeon-feature-image,
  .dungeon-feature-image img,
  .dungeon-mini-card,
  .dungeon-map-lightbox,
  .dungeon-map-lightbox-dialog,
  .dungeon-map-lightbox-close {
    transition: none !important;
  }

}

/* =========================================================
   DUNGEON HERO WITH MAP
   ========================================================= */

.dungeon-hero {
  position: relative;
  overflow: hidden;

  padding: 28px;

  border: 1px solid var(--dungeon-border);
  border-radius: 18px;

  background:
    radial-gradient(
      circle at 88% 8%,
      rgba(124,58,237,.08),
      transparent 34%
    ),
    radial-gradient(
      circle at 0 100%,
      rgba(53,111,214,.08),
      transparent 38%
    ),
    var(--dungeon-bg);

  box-shadow: var(--dungeon-shadow);
}


/* TWO COLUMNS */

.dungeon-hero-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) 300px;

  gap: 30px;

  align-items: center;
}

.dungeon-hero-content {
  min-width: 0;
}


/* RIGHT MAP */

.dungeon-hero-map {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
}


/* MAP PREVIEW */

.dungeon-feature-image {
  position: relative;

  display: block;

  width: 300px;
  max-width: 100%;

  padding: 0;
  margin: 0;

  overflow: hidden;

  cursor: zoom-in;

  border: 1px solid var(--dungeon-border);
  border-radius: 14px;

  background: var(--dungeon-card);

  box-shadow: 0 12px 30px rgba(0,0,0,.22);

  appearance: none;
  -webkit-appearance: none;
}


/* MAP IMAGE */

.dungeon-feature-image img {
  display: block !important;

  width: 300px !important;
  max-width: 100% !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: cover;

  border: 0 !important;
  border-radius: 0 !important;

  transition: transform .25s ease;
}

.dungeon-feature-image:hover img {
  transform: scale(1.025);
}


/* VIEW FULL MAP */

.dungeon-map-zoom {
  position: absolute;

  left: 50%;
  bottom: 11px;

  transform: translateX(-50%);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  padding: 8px 11px;

  border: 1px solid rgba(255,255,255,.14);
  border-radius: 9px;

  background: rgba(10,12,17,.88);

  color: #fff;

  font-size: 10px;
  line-height: 1;
  font-weight: 750;

  white-space: nowrap;

  pointer-events: none;

  box-shadow: 0 5px 18px rgba(0,0,0,.28);
}


/* RESPONSIVE */

@media (max-width: 900px) {

  .dungeon-hero-grid {
    grid-template-columns: 1fr;
  }

  .dungeon-hero-map {
    margin-top: 6px;
  }

}


@media (max-width: 520px) {

  .dungeon-feature-image,
  .dungeon-feature-image img {
    width: 270px !important;
  }

}


/* =========================================================
   MUELEON - HUNT POINT SYSTEM
   HELIOS DARK + LIGHT
   ========================================================= */

:root,
:root[data-theme="light"] {
  --hunt-bg: #ffffff;
  --hunt-bg-soft: #f7f8fa;
  --hunt-bg-hover: #fafbfc;

  --hunt-border: #e2e4e9;
  --hunt-border-hover: #cdd4df;

  --hunt-text: #18181b;
  --hunt-muted: #676e79;
  --hunt-subtle: #9299a6;

  --hunt-blue: #356fd6;
  --hunt-blue-bg: rgba(53,111,214,.075);
  --hunt-blue-border: rgba(53,111,214,.20);

  --hunt-green: #168447;
  --hunt-green-bg: rgba(22,132,71,.08);

  --hunt-yellow: #b77900;
  --hunt-yellow-bg: rgba(183,121,0,.08);

  --hunt-red: #dc3545;
  --hunt-red-bg: rgba(220,53,69,.07);

  --hunt-purple: #7c3aed;
  --hunt-purple-bg: rgba(124,58,237,.075);

  --hunt-shadow:
    0 8px 24px rgba(15,23,42,.05);
}

:root[data-theme="dark"] {
  --hunt-bg: #1a1a1d;
  --hunt-bg-soft: #202126;
  --hunt-bg-hover: #1f2024;

  --hunt-border: #303137;
  --hunt-border-hover: #444752;

  --hunt-text: #f4f4f5;
  --hunt-muted: #b3b6bf;
  --hunt-subtle: #888d98;

  --hunt-blue: #72a6ff;
  --hunt-blue-bg: rgba(91,140,255,.09);
  --hunt-blue-border: rgba(113,165,255,.20);

  --hunt-green: #4ade80;
  --hunt-green-bg: rgba(34,197,94,.075);

  --hunt-yellow: #fbbf24;
  --hunt-yellow-bg: rgba(245,158,11,.075);

  --hunt-red: #fb7185;
  --hunt-red-bg: rgba(244,63,94,.075);

  --hunt-purple: #c084fc;
  --hunt-purple-bg: rgba(168,85,247,.075);

  --hunt-shadow:
    0 12px 30px rgba(0,0,0,.16);
}


/* PAGE */

.hunt-page {
  width: 100%;
  max-width: none;

  color: var(--hunt-text);
}

.hunt-page *,
.hunt-page *::before,
.hunt-page *::after {
  box-sizing: border-box;
}


/* HERO */

.hunt-hero {
  margin: 0 0 36px;
  padding: 28px;

  border: 1px solid var(--hunt-blue-border);
  border-radius: 16px;

  background:
    radial-gradient(
      circle at 85% 0,
      color-mix(in srgb, var(--hunt-yellow) 10%, transparent),
      transparent 38%
    ),
    radial-gradient(
      circle at 0 100%,
      var(--hunt-blue-bg),
      transparent 38%
    ),
    var(--hunt-bg);
}

.hunt-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  margin: 0 0 8px;

  color: var(--hunt-blue);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;

  text-transform: uppercase;
}

.hunt-hero h1 {
  margin: 0 0 10px !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--hunt-text) !important;

  font-size: 34px !important;
  line-height: 1.15 !important;
  font-weight: 720 !important;

  text-shadow: none !important;
}

.hunt-hero p {
  max-width: 100% !important;

  margin: 0 !important;

  color: var(--hunt-muted) !important;

  font-size: 14px;
  line-height: 1.72;
}


/* ONLINE REWARD */

.hunt-online {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin: 0 0 38px;
  padding: 18px;

  border: 1px solid var(--hunt-border);
  border-radius: 12px;

  background: var(--hunt-bg);
}

.hunt-online-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hunt-online-icon {
  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;
  flex: 0 0 42px;

  border-radius: 10px;

  color: var(--hunt-blue);
  background: var(--hunt-blue-bg);
}

.hunt-online-title {
  color: var(--hunt-text);

  font-size: 13px;
  font-weight: 700;
}

.hunt-online-desc {
  margin-top: 3px;

  color: var(--hunt-muted);

  font-size: 12px;
}

.hunt-online-reward {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  padding: 7px 10px;

  border-radius: 8px;

  background: var(--hunt-yellow-bg);

  color: var(--hunt-yellow);

  font-size: 12px;
  font-weight: 750;
}


/* SECTION */

.hunt-section {
  margin: 0 0 44px;
}

.hunt-section-head {
  display: flex;
  align-items: center;
  gap: 13px;

  margin: 0 0 18px;
  padding-bottom: 14px;

  border-bottom: 1px solid var(--hunt-border);
}

.hunt-section-icon {
  display: grid;
  place-items: center;

  width: 40px;
  height: 40px;
  flex: 0 0 40px;

  border-radius: 10px;

  color: var(--hunt-blue);
  background: var(--hunt-blue-bg);
}

.hunt-section-head > div {
  min-width: 0;
  flex: 1;
}

.hunt-section-head .hunt-kicker {
  margin: 0;
}

.hunt-section-head h2 {
  margin: 2px 0 0 !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--hunt-text) !important;

  font-size: 21px !important;
  line-height: 1.25 !important;
  font-weight: 660 !important;

  text-shadow: none !important;
}


/* GRID */

.hunt-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));

  gap: 16px;
}


/* CARD */

.hunt-card {
  overflow: hidden;

  border: 1px solid var(--hunt-border);
  border-radius: 12px;

  background: var(--hunt-bg);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background-color .18s ease;
}

.hunt-card:hover {
  transform: translateY(-1px);

  border-color: var(--hunt-border-hover);

  background: var(--hunt-bg-hover);

  box-shadow: var(--hunt-shadow);
}

.hunt-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding: 13px 15px;

  border-bottom: 1px solid var(--hunt-border);

  background: var(--hunt-bg-soft);
}

.hunt-card-title {
  display: flex;
  align-items: center;
  gap: 9px;

  color: var(--hunt-text);

  font-size: 13px;
  font-weight: 700;
}

.hunt-card-title i {
  color: var(--hunt-blue);
}

.hunt-card-count {
  color: var(--hunt-subtle);

  font-size: 10px;
  font-weight: 700;
}


/* REWARD LIST */

.hunt-list {
  display: grid;

  margin: 0;
  padding: 0;

  list-style: none;
}

.hunt-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;

  gap: 18px;

  align-items: center;

  min-height: 42px;

  padding: 9px 12px;

  border-top: 1px solid var(--hunt-border);
}

.hunt-row:first-child {
  border-top: 0;
}

.hunt-name {
  min-width: 0;

  color: var(--hunt-muted);

  font-size: 12px;
  line-height: 1.45;

  overflow-wrap: anywhere;
}

.hunt-points {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 76px;

  padding: 5px 8px;

  border-radius: 7px;

  background: var(--hunt-yellow-bg);

  color: var(--hunt-yellow);

  font-size: 11px;
  font-weight: 750;
}

.hunt-points.high {
  background: var(--hunt-red-bg);
  color: var(--hunt-red);
}

.hunt-points.medium {
  background: var(--hunt-purple-bg);
  color: var(--hunt-purple);
}

.hunt-points.low {
  background: var(--hunt-green-bg);
  color: var(--hunt-green);
}


/* EVENT CARD */

.hunt-event-card .hunt-card-title i {
  color: var(--hunt-purple);
}


/* INFO NOTE */

.hunt-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  margin-top: 18px;
  padding: 12px 13px;

  border: 1px solid var(--hunt-blue-border);
  border-radius: 9px;

  background: var(--hunt-blue-bg);

  color: var(--hunt-muted);

  font-size: 12px;
  line-height: 1.55;
}

.hunt-note i {
  margin-top: 2px;

  color: var(--hunt-blue);
}


/* RESPONSIVE */

@media (max-width: 1050px) {
  .hunt-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .hunt-hero {
    padding: 21px;
  }

  .hunt-hero h1 {
    font-size: 28px !important;
  }

  .hunt-online {
    align-items: flex-start;
    flex-direction: column;
  }

  .hunt-row {
    grid-template-columns: minmax(0,1fr) auto;
  }
}

/* =========================================================
   MUELEON - EARRINGS
   HELIOS DARK + LIGHT
   ========================================================= */

:root,
:root[data-theme="light"] {
  --ear-bg: #ffffff;
  --ear-bg-soft: #f7f8fa;
  --ear-bg-hover: #fafbfc;

  --ear-border: #e2e4e9;
  --ear-border-hover: #cdd4df;

  --ear-text: #18181b;
  --ear-muted: #686f7b;
  --ear-subtle: #9299a6;

  --ear-blue: #356fd6;
  --ear-blue-bg: rgba(53,111,214,.075);
  --ear-blue-border: rgba(53,111,214,.20);

  --ear-gold: #b77900;
  --ear-gold-bg: rgba(183,121,0,.08);

  --ear-purple: #7c3aed;
  --ear-purple-bg: rgba(124,58,237,.075);

  --ear-green: #168447;
  --ear-green-bg: rgba(22,132,71,.08);

  --ear-shadow:
    0 8px 24px rgba(15,23,42,.05);
}


:root[data-theme="dark"] {
  --ear-bg: #1a1a1d;
  --ear-bg-soft: #202126;
  --ear-bg-hover: #1f2024;

  --ear-border: #303137;
  --ear-border-hover: #444752;

  --ear-text: #f4f4f5;
  --ear-muted: #b3b6bf;
  --ear-subtle: #888d98;

  --ear-blue: #72a6ff;
  --ear-blue-bg: rgba(91,140,255,.09);
  --ear-blue-border: rgba(113,165,255,.20);

  --ear-gold: #fbbf24;
  --ear-gold-bg: rgba(245,158,11,.075);

  --ear-purple: #c084fc;
  --ear-purple-bg: rgba(168,85,247,.075);

  --ear-green: #4ade80;
  --ear-green-bg: rgba(34,197,94,.075);

  --ear-shadow:
    0 12px 30px rgba(0,0,0,.16);
}


/* PAGE */

.earrings-page {
  width: 100%;
  max-width: none;

  color: var(--ear-text);
}

.earrings-page *,
.earrings-page *::before,
.earrings-page *::after {
  box-sizing: border-box;
}


/* HERO */

.earrings-hero {
  margin: 0 0 36px;
  padding: 28px;

  border: 1px solid var(--ear-blue-border);
  border-radius: 16px;

  background:
    radial-gradient(
      circle at 85% 0,
      color-mix(in srgb, var(--ear-purple) 10%, transparent),
      transparent 38%
    ),
    radial-gradient(
      circle at 0 100%,
      var(--ear-blue-bg),
      transparent 38%
    ),
    var(--ear-bg);
}

.earrings-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  margin: 0 0 8px;

  color: var(--ear-blue);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;

  text-transform: uppercase;
}

.earrings-hero h1 {
  margin: 0 0 10px !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--ear-text) !important;

  font-size: 34px !important;
  line-height: 1.15 !important;
  font-weight: 720 !important;

  text-shadow: none !important;
}

.earrings-hero p {
  max-width: 920px !important;

  margin: 0 !important;

  color: var(--ear-muted) !important;

  font-size: 14px;
  line-height: 1.72;
}


/* GRID */

.earrings-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));

  gap: 18px;
}


/* SET CARD */

.earrings-set {
  overflow: hidden;

  border: 1px solid var(--ear-border);
  border-radius: 14px;

  background: var(--ear-bg);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.earrings-set:hover {
  transform: translateY(-2px);

  border-color: var(--ear-border-hover);

  box-shadow: var(--ear-shadow);
}


/* SET HEADER */

.earrings-set-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 15px;

  padding: 14px 16px;

  border-bottom: 1px solid var(--ear-border);

  background: var(--ear-bg-soft);
}

.earrings-set-title {
  display: flex;
  align-items: center;
  gap: 9px;

  color: var(--ear-text);

  font-size: 15px;
  font-weight: 700;
}

.earrings-set-title i {
  color: var(--ear-purple);
}

.earrings-level {
  display: inline-flex;
  align-items: center;

  padding: 4px 7px;

  border-radius: 6px;

  background: var(--ear-gold-bg);

  color: var(--ear-gold);

  font-size: 10px;
  font-weight: 750;
}


/* PAIR */

.earrings-pair {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
}


/* SIDE */

.earring-item {
  min-width: 0;

  padding: 16px;
}

.earring-item + .earring-item {
  border-left: 1px solid var(--ear-border);
}

.earring-side {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 13px;
}

.earring-side strong {
  color: var(--ear-text);

  font-size: 13px;
}

.earring-side span {
  color: var(--ear-subtle);

  font-size: 10px;
  font-weight: 700;

  text-transform: uppercase;
}


/* IMAGE */

.earring-image {
  display: grid;
  place-items: center;

  width: 76px;
  height: 76px;

  margin: 0 auto 14px;

  border: 1px solid var(--ear-border);
  border-radius: 12px;

  background: var(--ear-bg-soft);
}

.earring-image img {
  display: block !important;

  width: auto !important;
  height: auto !important;

  max-width: 62px !important;
  max-height: 62px !important;

  margin: 0 !important;

  object-fit: contain;

  border: 0 !important;
  border-radius: 0 !important;
}


/* OPTIONS */

.earring-options-title {
  display: flex;
  align-items: center;
  gap: 6px;

  margin-bottom: 7px;

  color: var(--ear-gold);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;

  text-transform: uppercase;
}

.earring-options {
  display: grid;

  margin: 0 0 12px;
  padding: 0;

  overflow: hidden;

  border: 1px solid var(--ear-border);
  border-radius: 8px;

  list-style: none;
}

.earring-options li {
  position: relative;

  padding: 7px 9px 7px 25px;

  border-top: 1px solid var(--ear-border);

  color: var(--ear-muted);

  font-size: 11px;
  line-height: 1.45;
}

.earring-options li:first-child {
  border-top: 0;
}

.earring-options li::before {
  content: "";

  position: absolute;

  left: 10px;
  top: 50%;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: var(--ear-green);

  transform: translateY(-50%);
}


/* BASE STATS */

.earring-stats {
  display: grid;

  overflow: hidden;

  border: 1px solid var(--ear-border);
  border-radius: 8px;
}

.earring-stat {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;

  gap: 10px;

  padding: 7px 9px;

  border-top: 1px solid var(--ear-border);

  font-size: 10.5px;
}

.earring-stat:first-child {
  border-top: 0;
}

.earring-stat-label {
  color: var(--ear-subtle);
}

.earring-stat-value {
  color: var(--ear-text);

  font-weight: 700;
}


/* RESPONSIVE */

@media (max-width: 1150px) {
  .earrings-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .earrings-hero {
    padding: 21px;
  }

  .earrings-hero h1 {
    font-size: 28px !important;
  }

  .earrings-pair {
    grid-template-columns: 1fr;
  }

  .earring-item + .earring-item {
    border-left: 0;
    border-top: 1px solid var(--ear-border);
  }
}

/* EARRINGS — ANCIENT SET PANEL */

.earring-ancient {
  position: relative;
  margin: 14px 16px 0;
  padding: 13px 14px 14px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ear-gold) 28%, var(--ear-border));
  border-radius: 11px;
  background:
    radial-gradient(circle at 100% 0, var(--ear-gold-bg), transparent 46%),
    linear-gradient(135deg, var(--ear-gold-bg), transparent 62%),
    var(--ear-bg-soft);
}

.earring-ancient::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--ear-gold), var(--ear-purple));
}

.earring-ancient-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
}

.earring-ancient-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ear-gold);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.earring-ancient-name {
  padding: 4px 9px;
  border: 1px solid color-mix(in srgb, var(--ear-purple) 24%, var(--ear-border));
  border-radius: 999px;
  background: var(--ear-purple-bg);
  color: var(--ear-purple);
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: .02em;
}

.earring-ancient-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.earring-ancient-options li {
  padding: 5px 8px;
  border: 1px solid var(--ear-border);
  border-radius: 6px;
  background: color-mix(in srgb, var(--ear-bg) 78%, transparent);
  color: var(--ear-muted);
  font-size: 10.5px;
  line-height: 1.35;
}

.earring-ancient-options li strong {
  color: var(--ear-green);
  font-weight: 800;
}

@media (max-width: 650px) {
  .earring-ancient {
    margin: 12px 12px 0;
  }

  .earring-ancient-options {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   MUELEON - GOLDEN MONSTERS
   HELIOS DARK + LIGHT
   ========================================================= */

:root,
:root[data-theme="light"] {
  --golden-bg: #ffffff;
  --golden-bg-soft: #f7f8fa;
  --golden-bg-hover: #fafbfc;

  --golden-border: #e2e4e9;
  --golden-border-hover: #cdd4df;

  --golden-text: #18181b;
  --golden-muted: #686f7b;
  --golden-subtle: #9299a6;

  --golden-blue: #356fd6;
  --golden-blue-bg: rgba(53,111,214,.075);

  --golden-gold: #b77900;
  --golden-gold-bg: rgba(183,121,0,.09);

  --golden-green: #168447;
  --golden-green-bg: rgba(22,132,71,.08);

  --golden-purple: #7c3aed;
  --golden-purple-bg: rgba(124,58,237,.075);

  --golden-shadow:
    0 8px 24px rgba(15,23,42,.05);
}

:root[data-theme="dark"] {
  --golden-bg: #1a1a1d;
  --golden-bg-soft: #202126;
  --golden-bg-hover: #1f2024;

  --golden-border: #303137;
  --golden-border-hover: #444752;

  --golden-text: #f4f4f5;
  --golden-muted: #b3b6bf;
  --golden-subtle: #888d98;

  --golden-blue: #72a6ff;
  --golden-blue-bg: rgba(91,140,255,.09);

  --golden-gold: #fbbf24;
  --golden-gold-bg: rgba(245,158,11,.08);

  --golden-green: #4ade80;
  --golden-green-bg: rgba(34,197,94,.075);

  --golden-purple: #c084fc;
  --golden-purple-bg: rgba(168,85,247,.075);

  --golden-shadow:
    0 12px 30px rgba(0,0,0,.16);
}


/* PAGE */

.golden-page {
  width: 100%;
  max-width: none;

  color: var(--golden-text);
}

.golden-page *,
.golden-page *::before,
.golden-page *::after {
  box-sizing: border-box;
}


/* HERO */

.golden-hero {
  margin: 0 0 36px;
  padding: 28px;

  border: 1px solid var(--golden-border);
  border-radius: 16px;

  background:
    radial-gradient(
      circle at 85% 0,
      color-mix(in srgb, var(--golden-gold) 10%, transparent),
      transparent 38%
    ),
    var(--golden-bg);
}

.golden-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  margin: 0 0 8px;

  color: var(--golden-gold);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.golden-hero h1 {
  margin: 0 0 10px !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--golden-text) !important;

  font-size: 34px !important;
  line-height: 1.15 !important;
  font-weight: 720 !important;
}

.golden-hero p {
  max-width: 100% !important;

  margin: 0 !important;

  color: var(--golden-muted) !important;

  font-size: 14px;
  line-height: 1.72;
}


/* GRID */

.golden-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));

  gap: 16px;
}


/* CARD */

.golden-card {
  display: grid;
  grid-template-columns: 150px minmax(0,1fr);

  min-width: 0;

  overflow: hidden;

  border: 1px solid var(--golden-border);
  border-radius: 13px;

  background: var(--golden-bg);

  transition:
    transform .18s ease,
    border-color .18s ease,
    background-color .18s ease,
    box-shadow .18s ease;
}

.golden-card:hover {
  transform: translateY(-2px);

  border-color: var(--golden-border-hover);
  background: var(--golden-bg-hover);

  box-shadow: var(--golden-shadow);
}


/* IMAGE */

.golden-image {
  height: 190px;

  overflow: hidden;

  background: #0b0d11;
}

.golden-image img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;

  object-fit: cover;
  object-position: center top;

  border: 0 !important;
  border-radius: 0 !important;
}


/* CONTENT */

.golden-content {
  min-width: 0;

  padding: 16px;
}

.golden-title {
  display: flex;
  align-items: center;
  gap: 9px;

  margin-bottom: 12px;
}

.golden-title i {
  color: var(--golden-gold);
}

.golden-title h3 {
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--golden-text) !important;

  font-size: 16px !important;
  line-height: 1.3 !important;
  font-weight: 680 !important;
}


/* INFO */

.golden-info {
  overflow: hidden;

  border: 1px solid var(--golden-border);
  border-radius: 9px;
}

.golden-row {
  display: grid;
  grid-template-columns: 105px minmax(0,1fr);

  gap: 14px;

  padding: 8px 10px;

  border-top: 1px solid var(--golden-border);

  font-size: 11.5px;
  line-height: 1.5;
}

.golden-row:first-child {
  border-top: 0;
}

.golden-label {
  color: var(--golden-subtle);

  font-weight: 600;
}

.golden-value {
  color: var(--golden-muted);

  overflow-wrap: anywhere;
}


/* SPECIAL LABELS */

.golden-row.location .golden-label {
  color: var(--golden-blue);
}

.golden-row.drop .golden-label {
  color: var(--golden-gold);
}

.golden-row.quantity .golden-label {
  color: var(--golden-green);
}


/* BADGES */

.golden-badge {
  display: inline-flex;
  align-items: center;

  padding: 3px 7px;

  border-radius: 6px;

  background: var(--golden-gold-bg);

  color: var(--golden-gold);

  font-size: 10.5px;
  font-weight: 700;
}


/* RESPONSIVE */

@media (max-width: 1050px) {
  .golden-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .golden-hero {
    padding: 21px;
  }

  .golden-hero h1 {
    font-size: 28px !important;
  }

  .golden-card {
    grid-template-columns: 115px minmax(0,1fr);
  }

  .golden-image {
    height: 170px;
  }

  .golden-row {
    grid-template-columns: 1fr;

    gap: 3px;
  }
}

/* =========================================================
   MUELEON - BLOOD CASTLE
   HELIOS DARK + LIGHT
   ========================================================= */

:root,
:root[data-theme="light"] {
  --bc-bg: #ffffff;
  --bc-bg-soft: #f7f8fa;
  --bc-bg-hover: #fafbfc;

  --bc-border: #e2e4e9;
  --bc-border-hover: #cdd4df;

  --bc-text: #18181b;
  --bc-muted: #686f7b;
  --bc-subtle: #9299a6;

  --bc-red: #dc3545;
  --bc-red-bg: rgba(220,53,69,.075);

  --bc-blue: #356fd6;
  --bc-blue-bg: rgba(53,111,214,.075);
  --bc-blue-border: rgba(53,111,214,.20);

  --bc-green: #168447;
  --bc-green-bg: rgba(22,132,71,.08);

  --bc-gold: #b77900;
  --bc-gold-bg: rgba(183,121,0,.08);

  --bc-purple: #7c3aed;
  --bc-purple-bg: rgba(124,58,237,.075);

  --bc-shadow:
    0 8px 24px rgba(15,23,42,.05);
}

:root[data-theme="dark"] {
  --bc-bg: #1a1a1d;
  --bc-bg-soft: #202126;
  --bc-bg-hover: #1f2024;

  --bc-border: #303137;
  --bc-border-hover: #444752;

  --bc-text: #f4f4f5;
  --bc-muted: #b3b6bf;
  --bc-subtle: #888d98;

  --bc-red: #fb7185;
  --bc-red-bg: rgba(244,63,94,.08);

  --bc-blue: #72a6ff;
  --bc-blue-bg: rgba(91,140,255,.09);
  --bc-blue-border: rgba(113,165,255,.20);

  --bc-green: #4ade80;
  --bc-green-bg: rgba(34,197,94,.08);

  --bc-gold: #fbbf24;
  --bc-gold-bg: rgba(245,158,11,.08);

  --bc-purple: #c084fc;
  --bc-purple-bg: rgba(168,85,247,.08);

  --bc-shadow:
    0 12px 30px rgba(0,0,0,.16);
}


/* PAGE */

.bc-page {
  width: 100%;
  max-width: none;
  color: var(--bc-text);
}

.bc-page *,
.bc-page *::before,
.bc-page *::after {
  box-sizing: border-box;
}


/* HERO */

.bc-hero {
  margin: 0 0 34px;
  padding: 28px;

  border: 1px solid var(--bc-border);
  border-radius: 16px;

  background:
    radial-gradient(
      circle at 85% 0,
      color-mix(in srgb, var(--bc-red) 10%, transparent),
      transparent 38%
    ),
    radial-gradient(
      circle at 0 100%,
      var(--bc-blue-bg),
      transparent 38%
    ),
    var(--bc-bg);
}

.bc-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  margin: 0 0 8px;

  color: var(--bc-red);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.bc-hero h1 {
  margin: 0 0 10px !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--bc-text) !important;

  font-size: 34px !important;
  line-height: 1.15 !important;
  font-weight: 720 !important;
}

.bc-hero p {
  margin: 0 !important;
  max-width: 900px !important;

  color: var(--bc-muted) !important;

  font-size: 14px;
  line-height: 1.72;
}


/* OVERVIEW */

.bc-overview {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));

  gap: 10px;

  margin: 0 0 38px;
}

.bc-overview-item {
  padding: 13px;

  border: 1px solid var(--bc-border);
  border-radius: 10px;

  background: var(--bc-bg);
}

.bc-overview-label {
  display: block;

  margin-bottom: 4px;

  color: var(--bc-subtle);

  font-size: 9px;
  font-weight: 800;
  letter-spacing: .07em;

  text-transform: uppercase;
}

.bc-overview-value {
  color: var(--bc-text);

  font-size: 12px;
  font-weight: 650;
}


/* SECTION */

.bc-section {
  margin: 0 0 42px;
}

.bc-section-head {
  display: flex;
  align-items: center;
  gap: 13px;

  margin: 0 0 18px;
  padding-bottom: 14px;

  border-bottom: 1px solid var(--bc-border);
}

.bc-section-icon {
  display: grid;
  place-items: center;

  width: 40px;
  height: 40px;
  flex: 0 0 40px;

  border-radius: 10px;

  color: var(--bc-red);
  background: var(--bc-red-bg);
}

.bc-section-head h2 {
  margin: 2px 0 0 !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--bc-text) !important;

  font-size: 21px !important;
  font-weight: 660 !important;
}

.bc-section-head .bc-kicker {
  margin: 0;
}


/* GRID */

.bc-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));

  gap: 16px;
}


/* CARD */

.bc-card {
  overflow: hidden;

  border: 1px solid var(--bc-border);
  border-radius: 13px;

  background: var(--bc-bg);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.bc-card:hover {
  transform: translateY(-2px);

  border-color: var(--bc-border-hover);

  box-shadow: var(--bc-shadow);
}

.bc-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding: 13px 15px;

  border-bottom: 1px solid var(--bc-border);

  background: var(--bc-bg-soft);
}

.bc-card-title {
  display: flex;
  align-items: center;
  gap: 9px;

  color: var(--bc-text);

  font-size: 14px;
  font-weight: 700;
}

.bc-card-title i {
  color: var(--bc-red);
}


/* RESET BADGE */

.bc-reset {
  display: inline-flex;
  align-items: center;

  padding: 4px 7px;

  border-radius: 6px;

  background: var(--bc-blue-bg);

  color: var(--bc-blue);

  font-size: 10px;
  font-weight: 750;
}


/* BODY */

.bc-card-body {
  padding: 14px;
}


/* REWARD GRID */

.bc-rewards-title {
  display: flex;
  align-items: center;
  gap: 7px;

  margin-bottom: 8px;

  color: var(--bc-gold);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;

  text-transform: uppercase;
}

.bc-rewards {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));

  overflow: hidden;

  border: 1px solid var(--bc-border);
  border-radius: 9px;
}

.bc-reward {
  position: relative;

  padding: 8px 10px 8px 27px;

  border-top: 1px solid var(--bc-border);

  color: var(--bc-muted);

  font-size: 11.5px;
  line-height: 1.45;
}

.bc-reward:nth-child(even) {
  border-left: 1px solid var(--bc-border);
}

.bc-reward:nth-child(1),
.bc-reward:nth-child(2) {
  border-top: 0;
}

.bc-reward::before {
  content: "";

  position: absolute;

  left: 11px;
  top: 50%;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: var(--bc-green);

  transform: translateY(-50%);
}


/* BUNDLE REWARDS */

.bc-reward.bundle::before {
  background: var(--bc-gold);
}


/* WARN */

.bc-warning {
  display: flex;
  align-items: flex-start;
  gap: 9px;

  margin-top: 10px;
  padding: 9px 10px;

  border: 1px solid
    color-mix(in srgb, var(--bc-red) 22%, var(--bc-border));

  border-radius: 8px;

  background: var(--bc-red-bg);

  color: var(--bc-muted);

  font-size: 11px;
  line-height: 1.5;
}

.bc-warning i {
  margin-top: 2px;

  color: var(--bc-red);
}


/* SPECIAL BC8 */

.bc-card.master .bc-card-title i {
  color: var(--bc-purple);
}

.bc-card.master .bc-reset {
  background: var(--bc-purple-bg);
  color: var(--bc-purple);
}


/* RESPONSIVE */

@media (max-width: 1150px) {
  .bc-overview {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }

  .bc-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .bc-hero {
    padding: 21px;
  }

  .bc-hero h1 {
    font-size: 28px !important;
  }

  .bc-overview {
    grid-template-columns: 1fr 1fr;
  }

  .bc-rewards {
    grid-template-columns: 1fr;
  }

  .bc-reward {
    border-left: 0 !important;
  }

  .bc-reward:nth-child(2) {
    border-top: 1px solid var(--bc-border);
  }
}

/* =========================================================
   ENDLESS TOWER - HELIOS DARK / LIGHT
   ========================================================= */

:root,
:root[data-theme="light"] {
  --et-bg: #ffffff;
  --et-bg-soft: #f7f8fb;
  --et-bg-soft-2: #f2f4f8;
  --et-card: #ffffff;
  --et-border: #e3e7ef;
  --et-text: #101828;
  --et-muted: #5f6b7a;
  --et-heading: #0f172a;

  --et-primary: #3b82f6;
  --et-primary-soft: rgba(59, 130, 246, 0.10);

  --et-purple: #8b5cf6;
  --et-purple-soft: rgba(139, 92, 246, 0.10);

  --et-green: #16a34a;
  --et-green-soft: rgba(22, 163, 74, 0.10);

  --et-red: #dc2626;
  --et-red-soft: rgba(220, 38, 38, 0.10);

  --et-orange: #ea580c;
  --et-orange-soft: rgba(234, 88, 12, 0.10);

  --et-gold: #ca8a04;
  --et-gold-soft: rgba(202, 138, 4, 0.10);

  --et-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

:root[data-theme="dark"] {
  --et-bg: #111318;
  --et-bg-soft: #171a21;
  --et-bg-soft-2: #1b1f27;
  --et-card: #141821;
  --et-border: #262b36;
  --et-text: #eef2f7;
  --et-muted: #a8b0bf;
  --et-heading: #ffffff;

  --et-primary: #6ea8ff;
  --et-primary-soft: rgba(110, 168, 255, 0.10);

  --et-purple: #b592ff;
  --et-purple-soft: rgba(181, 146, 255, 0.10);

  --et-green: #4ade80;
  --et-green-soft: rgba(74, 222, 128, 0.10);

  --et-red: #fb7185;
  --et-red-soft: rgba(251, 113, 133, 0.10);

  --et-orange: #fb923c;
  --et-orange-soft: rgba(251, 146, 60, 0.10);

  --et-gold: #facc15;
  --et-gold-soft: rgba(250, 204, 21, 0.10);

  --et-shadow: 0 14px 36px rgba(0, 0, 0, 0.24);
}

.endless-tower-page {
  width: 100%;
  color: var(--et-text);
}

.endless-tower-page *,
.endless-tower-page *::before,
.endless-tower-page *::after {
  box-sizing: border-box;
}

.endless-tower-page h1,
.endless-tower-page h2,
.endless-tower-page h3,
.endless-tower-page h4 {
  color: var(--et-heading);
}

.endless-tower-page p {
  color: var(--et-muted);
  line-height: 1.75;
}

.et-section {
  margin: 0 0 38px;
}

.et-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--et-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.et-kicker i {
  font-size: 12px;
}

.et-hero {
  position: relative;
  overflow: hidden;
  padding: 30px;
  border: 1px solid var(--et-border);
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, var(--et-primary-soft), transparent 34%),
    radial-gradient(circle at bottom left, var(--et-purple-soft), transparent 35%),
    var(--et-bg);
  box-shadow: var(--et-shadow);
}

.et-hero-grid {
  display: grid;
  grid-template-columns: 1.25fr .95fr;
  gap: 28px;
  align-items: center;
}

.et-hero h1 {
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 40px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
}

.et-hero p {
  margin: 0 0 18px !important;
  max-width: 760px;
  font-size: 15px;
}

.et-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.et-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border: 1px solid var(--et-border);
  border-radius: 999px;
  background: var(--et-bg-soft);
  color: var(--et-text);
  font-size: 12px;
  font-weight: 700;
}

.et-hero-media {
  overflow: hidden;
  border: 1px solid var(--et-border);
  border-radius: 18px;
  background: var(--et-bg-soft);
  min-height: 280px;
}

.et-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
}

.et-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.et-stat {
  padding: 16px;
  border: 1px solid var(--et-border);
  border-radius: 14px;
  background: var(--et-card);
}

.et-stat-label {
  display: block;
  margin-bottom: 6px;
  color: var(--et-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.et-stat-value {
  color: var(--et-heading);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
}

.et-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--et-border);
}

.et-head-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--et-primary-soft);
  color: var(--et-primary);
  flex: 0 0 42px;
}

.et-head h2 {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

.et-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.et-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.et-card {
  padding: 22px;
  border: 1px solid var(--et-border);
  border-radius: 18px;
  background: var(--et-card);
  box-shadow: var(--et-shadow);
}

.et-card h3 {
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 22px !important;
  font-weight: 800 !important;
}

.et-card p:last-child {
  margin-bottom: 0;
}

.et-info-list {
  display: grid;
  gap: 12px;
}

.et-info-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--et-border);
}

.et-info-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.et-info-label {
  color: var(--et-muted);
  font-size: 13px;
  font-weight: 700;
}

.et-info-value {
  text-align: right;
  color: var(--et-heading);
  font-size: 13px;
  font-weight: 700;
}

.et-note {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  margin-top: 14px;
  border: 1px solid var(--et-border);
  border-radius: 14px;
  background: var(--et-bg-soft);
}

.et-note i {
  margin-top: 2px;
  color: var(--et-gold);
}

.et-note strong {
  color: var(--et-heading);
}

.et-media-card {
  overflow: hidden;
  border: 1px solid var(--et-border);
  border-radius: 18px;
  background: var(--et-bg-soft);
}

.et-media-card img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
}

.et-wave-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.et-mini {
  padding: 18px;
  border: 1px solid var(--et-border);
  border-radius: 16px;
  background: var(--et-card);
}

.et-mini h4 {
  margin: 0 0 10px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

.et-mini p {
  margin: 0;
  font-size: 14px;
}

.et-emphasis {
  color: var(--et-primary);
  font-weight: 800;
}

.et-highlight {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.et-highlight.red {
  background: var(--et-red-soft);
  color: var(--et-red);
}

.et-highlight.green {
  background: var(--et-green-soft);
  color: var(--et-green);
}

.et-highlight.orange {
  background: var(--et-orange-soft);
  color: var(--et-orange);
}

.et-highlight.purple {
  background: var(--et-purple-soft);
  color: var(--et-purple);
}

.et-rules-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.et-rule-box {
  padding: 18px;
  border: 1px solid var(--et-border);
  border-radius: 16px;
  background: var(--et-card);
}

.et-rule-box h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

.et-rule-box h4 i {
  color: var(--et-red);
}

.et-checks,
.et-bullets {
  display: grid;
  gap: 9px;

  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
}

.et-checks li,
.et-bullets li {
  position: relative;

  margin: 0 !important;
  padding-left: 24px !important;

  list-style: none !important;

  color: var(--et-muted);

  font-size: 14px;
  line-height: 1.65;
}

.et-checks li::marker,
.et-bullets li::marker {
  content: "";
}

/* Normal bullet */

.et-bullets li::before {
  content: "";

  position: absolute;
  left: 3px;
  top: 10px;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: var(--et-primary);
}


/* Checklist */

.et-checks li::before {
  content: "\2713";

  position: absolute;
  left: 0;
  top: 0;

  color: var(--et-green);

  font-family: Arial, sans-serif;
  font-size: 13px;
  line-height: 1.65;
  font-weight: 800;
}

.et-reward-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.et-reward-card {
  padding: 20px;
  border: 1px solid var(--et-border);
  border-radius: 16px;
  background: var(--et-card);
}

.et-reward-card h4 {
  margin: 0 0 10px !important;
  font-size: 17px !important;
  font-weight: 800 !important;
}

.et-reward-card p {
  margin: 0 0 12px;
}

.et-reward-card .et-highlight {
  margin-bottom: 10px;
}

.et-scaling-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.et-scale-card {
  padding: 18px;
  border: 1px solid var(--et-border);
  border-radius: 16px;
  background: var(--et-card);
}

.et-scale-card h4 {
  margin: 0 0 10px !important;
  font-size: 17px !important;
  font-weight: 800 !important;
}

.et-scale-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.et-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border-radius: 999px;
  border: 1px solid var(--et-border);
  background: var(--et-bg-soft);
  color: var(--et-heading);
  font-size: 12px;
  font-weight: 800;
}

.et-skill-off {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.et-skill-tag {
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--et-red-soft);
  color: var(--et-red);
  font-size: 12px;
  font-weight: 800;
}

.et-final {
  padding: 26px;
  border: 1px solid var(--et-border);
  border-radius: 20px;
  background:
    radial-gradient(circle at right center, var(--et-purple-soft), transparent 34%),
    radial-gradient(circle at left bottom, var(--et-primary-soft), transparent 35%),
    var(--et-card);
  box-shadow: var(--et-shadow);
}

.et-final h2 {
  margin: 0 0 14px !important;
  font-size: 30px !important;
  font-weight: 800 !important;
}

.et-final p {
  margin: 0 0 16px;
  max-width: 100%;
}

.et-quote {
  padding: 18px 20px;
  border-left: 4px solid var(--et-primary);
  border-radius: 12px;
  background: var(--et-bg-soft);
  color: var(--et-heading);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.75;
}

/* =========================================================
   ENDLESS TOWER - REWARD ITEM LIST
   ========================================================= */

.et-reward-items {
  display: grid;
  gap: 7px;

  margin-top: 14px;
}

.et-reward-item {
  display: flex;
  align-items: center;

  gap: 9px;

  min-height: 38px;

  padding: 7px 9px;

  border: 1px solid var(--et-border);
  border-radius: 9px;

  background: var(--et-bg-soft);

  color: var(--et-muted);

  font-size: 11.5px;
  font-weight: 600;

  transition:
    border-color .18s ease,
    background-color .18s ease,
    transform .18s ease;
}

.et-reward-item:hover {
  transform: translateX(2px);

  border-color:
    color-mix(
      in srgb,
      var(--et-primary) 25%,
      var(--et-border)
    );
}

.et-reward-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;
  flex: 0 0 28px;

  border-radius: 8px;

  color: var(--et-red);
  background: var(--et-red-soft);

  font-size: 11px;
  line-height: 1;
}

.et-reward-item-icon.mana {
  color: var(--et-primary);
  background: var(--et-primary-soft);
}

.et-reward-item-icon i {
  margin: 0;
  padding: 0;

  line-height: 1;
}


/* LIGHT */

:root[data-theme="light"] .et-reward-item {
  background: rgba(0,0,0,.015);
}


/* MOBILE */

@media (max-width: 700px) {

  .et-reward-item {
    min-height: 36px;
  }

}

@media (max-width: 1200px) {
  .et-hero-grid,
  .et-grid-2,
  .et-rules-grid,
  .et-scaling-box {
    grid-template-columns: 1fr;
  }

  .et-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .et-wave-grid,
  .et-reward-grid,
  .et-grid-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .et-hero {
    padding: 22px;
  }

  .et-hero h1 {
    font-size: 32px !important;
  }

  .et-overview {
    grid-template-columns: 1fr;
  }

  .et-info-row {
    flex-direction: column;
    gap: 6px;
  }

  .et-info-value {
    text-align: left;
  }
}

/* =========================================================
   MUELEON - BATTLE ROYALE
   HELIOS DARK + LIGHT
   ========================================================= */

:root,
:root[data-theme="light"] {
  --br-bg: #ffffff;
  --br-bg-soft: #f7f8fb;
  --br-card: #ffffff;
  --br-border: #e3e7ef;
  --br-text: #101828;
  --br-muted: #667085;

  --br-green: #16a34a;
  --br-green-soft: rgba(22,163,74,.10);

  --br-red: #dc2626;
  --br-red-soft: rgba(220,38,38,.10);

  --br-blue: #2563eb;
  --br-blue-soft: rgba(37,99,235,.10);

  --br-gold: #ca8a04;
  --br-gold-soft: rgba(202,138,4,.10);

  --br-purple: #7c3aed;
  --br-purple-soft: rgba(124,58,237,.10);

  --br-shadow: 0 10px 30px rgba(15,23,42,.06);
}

:root[data-theme="dark"] {
  --br-bg: #111318;
  --br-bg-soft: #171a21;
  --br-card: #141821;
  --br-border: #262b36;
  --br-text: #f3f4f6;
  --br-muted: #a8b0bf;

  --br-green: #4ade80;
  --br-green-soft: rgba(74,222,128,.10);

  --br-red: #fb7185;
  --br-red-soft: rgba(251,113,133,.10);

  --br-blue: #72a6ff;
  --br-blue-soft: rgba(114,166,255,.10);

  --br-gold: #facc15;
  --br-gold-soft: rgba(250,204,21,.10);

  --br-purple: #c084fc;
  --br-purple-soft: rgba(192,132,252,.10);

  --br-shadow: 0 14px 36px rgba(0,0,0,.24);
}

.battle-royale-page {
  width: 100%;
  color: var(--br-text);
}

.battle-royale-page *,
.battle-royale-page *::before,
.battle-royale-page *::after {
  box-sizing: border-box;
}

.br-section {
  margin-bottom: 40px;
}

.br-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin-bottom: 9px;

  color: var(--br-green);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}


/* HERO */

.br-hero {
  padding: 30px;

  border: 1px solid var(--br-border);
  border-radius: 20px;

  background:
    radial-gradient(circle at 85% 0, var(--br-green-soft), transparent 35%),
    radial-gradient(circle at 0 100%, var(--br-purple-soft), transparent 35%),
    var(--br-bg);

  box-shadow: var(--br-shadow);
}

.br-hero-grid {
  display: grid;
  grid-template-columns: 1.2fr .9fr;

  gap: 28px;
  align-items: center;
}

.br-hero h1 {
  margin: 0 0 12px !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--br-text) !important;

  font-size: 40px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
}

.br-hero p {
  margin: 0 0 18px !important;

  color: var(--br-muted) !important;

  font-size: 15px;
  line-height: 1.72;
}

.br-hero-media {
  overflow: hidden;

  min-height: 280px;

  border: 1px solid var(--br-border);
  border-radius: 18px;

  background: var(--br-bg-soft);
}

.br-hero-media img {
  display: block;

  width: 100%;
  height: 100%;
  min-height: 280px;

  object-fit: cover;
}


/* BADGES */

.br-badges {
  display: flex;
  flex-wrap: wrap;

  gap: 10px;
}

.br-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  padding: 8px 11px;

  border: 1px solid var(--br-border);
  border-radius: 999px;

  background: var(--br-bg-soft);

  color: var(--br-text);

  font-size: 12px;
  font-weight: 700;
}


/* OVERVIEW */

.br-overview {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));

  gap: 14px;

  margin-top: 22px;
}

.br-stat {
  padding: 15px;

  border: 1px solid var(--br-border);
  border-radius: 13px;

  background: var(--br-card);
}

.br-stat-label {
  display: block;

  margin-bottom: 5px;

  color: var(--br-muted);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.br-stat-value {
  color: var(--br-text);

  font-size: 17px;
  font-weight: 800;
}


/* SECTION HEAD */

.br-head {
  display: flex;
  align-items: center;

  gap: 13px;

  margin-bottom: 18px;
  padding-bottom: 14px;

  border-bottom: 1px solid var(--br-border);
}

.br-head-icon {
  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;
  flex: 0 0 42px;

  border-radius: 12px;

  color: var(--br-green);
  background: var(--br-green-soft);
}

.br-head h2 {
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--br-text) !important;

  font-size: 27px !important;
  font-weight: 800 !important;
}


/* GRID */

.br-grid-2 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));

  gap: 18px;
}

.br-grid-3 {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));

  gap: 16px;
}


/* CARD */

.br-card {
  padding: 21px;

  border: 1px solid var(--br-border);
  border-radius: 17px;

  background: var(--br-card);

  box-shadow: var(--br-shadow);
}

.br-card h3 {
  margin: 0 0 11px !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--br-text) !important;

  font-size: 20px !important;
  font-weight: 800 !important;
}

.br-card p {
  margin: 0 0 14px !important;

  color: var(--br-muted) !important;

  font-size: 14px;
  line-height: 1.68;
}


/* MEDIA */

.br-media {
  overflow: hidden;

  border: 1px solid var(--br-border);
  border-radius: 17px;

  background: var(--br-bg-soft);
}

.br-media img {
  display: block;

  width: 100%;
  height: 100%;
  min-height: 260px;

  object-fit: cover;
}


/* INFO */

.br-info-list {
  overflow: hidden;

  border: 1px solid var(--br-border);
  border-radius: 10px;
}

.br-info-row {
  display: grid;
  grid-template-columns: 150px minmax(0,1fr);

  gap: 15px;

  padding: 10px 12px;

  border-top: 1px solid var(--br-border);

  font-size: 12px;
}

.br-info-row:first-child {
  border-top: 0;
}

.br-info-label {
  color: var(--br-muted);
  font-weight: 650;
}

.br-info-value {
  color: var(--br-text);
  font-weight: 700;
}


/* NOTE */

.br-note {
  display: flex;
  align-items: flex-start;

  gap: 10px;

  margin-top: 14px;
  padding: 12px 13px;

  border: 1px solid var(--br-border);
  border-radius: 10px;

  background: var(--br-bg-soft);

  color: var(--br-muted);

  font-size: 12px;
  line-height: 1.55;
}

.br-note i {
  margin-top: 2px;

  color: var(--br-gold);
}


/* ZONE */

.br-zone-card {
  padding: 20px;

  border: 1px solid var(--br-border);
  border-radius: 17px;

  background:
    radial-gradient(circle at center, var(--br-green-soft), transparent 55%),
    var(--br-card);
}

.br-zone-values {
  display: flex;
  flex-wrap: wrap;

  gap: 10px;

  margin-top: 14px;
}

.br-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  padding: 8px 11px;

  border-radius: 999px;

  background: var(--br-bg-soft);

  color: var(--br-text);

  font-size: 12px;
  font-weight: 750;
}


/* RULES */

.br-rule-list {
  display: grid;

  gap: 9px;

  margin: 0;
  padding: 0;

  list-style: none !important;
}

.br-rule-list li {
  position: relative;

  padding-left: 23px;

  color: var(--br-muted);

  font-size: 13px;
  line-height: 1.6;

  list-style: none !important;
}

.br-rule-list li::marker {
  content: "";
}

.br-rule-list li::before {
  content: "\2713";

  position: absolute;
  left: 0;

  color: var(--br-green);

  font-weight: 800;
}


/* DANGER */

.br-danger {
  border-color: color-mix(in srgb, var(--br-red) 25%, var(--br-border));
  background: var(--br-red-soft);
}

.br-danger i {
  color: var(--br-red);
}


/* ITEM DROP */

.br-drop-card {
  padding: 18px;

  border: 1px solid var(--br-border);
  border-radius: 15px;

  background: var(--br-card);
}

.br-drop-card h4 {
  margin: 0 0 8px !important;

  color: var(--br-text);

  font-size: 16px !important;
  font-weight: 800 !important;
}

.br-drop-card p {
  margin: 0 !important;

  color: var(--br-muted);

  font-size: 13px;
  line-height: 1.6;
}

.br-drop-value {
  display: inline-flex;
  align-items: center;

  margin-top: 10px;
  padding: 6px 9px;

  border-radius: 8px;

  background: var(--br-blue-soft);

  color: var(--br-blue);

  font-size: 11px;
  font-weight: 800;
}


/* FINAL */

.br-final {
  padding: 26px;

  border: 1px solid var(--br-border);
  border-radius: 20px;

  background:
    radial-gradient(circle at right, var(--br-green-soft), transparent 35%),
    radial-gradient(circle at left, var(--br-purple-soft), transparent 35%),
    var(--br-card);

  box-shadow: var(--br-shadow);
}

.br-final h2 {
  margin: 0 0 12px !important;

  color: var(--br-text) !important;

  font-size: 30px !important;
  font-weight: 800 !important;
}

.br-final p {
  color: var(--br-muted);
  line-height: 1.7;
}

.br-quote {
  margin-top: 15px;
  padding: 16px 18px;

  border-left: 4px solid var(--br-green);
  border-radius: 10px;

  background: var(--br-bg-soft);

  color: var(--br-text);

  font-size: 14px;
  font-weight: 750;
}

/* =========================================================
   BATTLE ROYALE - WINNER REWARD
   ========================================================= */

.br-drop-card-winner {
  position: relative;
  overflow: hidden;
}

.br-drop-card-winner::after {
  content: "";

  position: absolute;
  top: -45px;
  right: -45px;

  width: 120px;
  height: 120px;

  border-radius: 50%;

  background: rgba(245, 158, 11, .08);

  pointer-events: none;
}


.br-drop-card-head {
  display: flex;
  align-items: center;

  gap: 11px;

  margin-bottom: 12px;
}


.br-drop-card-icon {
  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;
  flex: 0 0 38px;

  border-radius: 10px;

  color: #fbbf24;
  background: rgba(245, 158, 11, .10);
}


.br-drop-label {
  display: block;

  margin-bottom: 2px;

  color: #fbbf24;

  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
}


.br-drop-card-head h4 {
  margin: 0 !important;
}


/* REWARD LIST */

.br-reward-list {
  display: grid;

  gap: 8px;

  margin-top: 15px;
}


.br-reward-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding: 10px 11px;

  border: 1px solid var(--br-border, rgba(255,255,255,.08));
  border-radius: 9px;

  background: rgba(255,255,255,.025);
}


.br-reward-info {
  display: flex;
  align-items: center;

  gap: 10px;

  min-width: 0;
}


.br-reward-icon {
  display: grid;
  place-items: center;

  width: 30px;
  height: 30px;
  flex: 0 0 30px;

  border-radius: 8px;

  color: #8fb2ff;
  background: rgba(91,140,255,.10);
}


.br-reward-info strong {
  display: block;

  color: inherit;

  font-size: 12px;
  font-weight: 750;
}


.br-reward-info > div > span {
  display: block;

  margin-top: 2px;

  opacity: .62;

  font-size: 10px;
}


/* DROP RATE */

.br-reward-rate {
  flex: 0 0 auto;

  min-width: 48px;

  padding: 5px 8px;

  border-radius: 7px;

  text-align: center;

  font-size: 10px;
  font-weight: 800;
}


.br-reward-rate-100 {
  color: #4ade80;
  background: rgba(34,197,94,.11);
}


.br-reward-rate-50 {
  color: #facc15;
  background: rgba(234,179,8,.11);
}


.br-reward-rate-25 {
  color: #fb923c;
  background: rgba(249,115,22,.11);
}


/* LIGHT MODE */

:root[data-theme="light"] .br-reward-row {
  background: rgba(0,0,0,.015);
}

:root[data-theme="light"] .br-reward-rate-100 {
  color: #168447;
}

:root[data-theme="light"] .br-reward-rate-50 {
  color: #a16207;
}

:root[data-theme="light"] .br-reward-rate-25 {
  color: #c2410c;
}


/* RESPONSIVE */

@media (max-width: 1100px) {
  .br-hero-grid,
  .br-grid-2 {
    grid-template-columns: 1fr;
  }

  .br-overview {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .br-grid-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .br-hero {
    padding: 21px;
  }

  .br-hero h1 {
    font-size: 31px !important;
  }

  .br-overview {
    grid-template-columns: 1fr;
  }

  .br-info-row {
    grid-template-columns: 1fr;

    gap: 4px;
  }
}

/* =========================================================
   MUELEON - SET BONUS SYSTEM
   HELIOS DARK + LIGHT
   ========================================================= */

:root,
:root[data-theme="light"] {
  --sb-bg: #ffffff;
  --sb-bg-soft: #f7f8fb;
  --sb-card: #ffffff;

  --sb-border: #e2e6ed;
  --sb-border-hover: #ccd3de;

  --sb-text: #17181c;
  --sb-muted: #687180;
  --sb-subtle: #9199a6;

  --sb-blue: #356fd6;
  --sb-blue-soft: rgba(53,111,214,.09);

  --sb-green: #168447;
  --sb-green-soft: rgba(22,132,71,.09);

  --sb-purple: #7c3aed;
  --sb-purple-soft: rgba(124,58,237,.09);

  --sb-gold: #b77900;
  --sb-gold-soft: rgba(183,121,0,.09);

  --sb-red: #dc3545;
  --sb-red-soft: rgba(220,53,69,.09);

  --sb-shadow: 0 10px 28px rgba(15,23,42,.055);
}


:root[data-theme="dark"] {
  --sb-bg: #15171c;
  --sb-bg-soft: #1b1e25;
  --sb-card: #181b21;

  --sb-border: #2b3039;
  --sb-border-hover: #414854;

  --sb-text: #f4f5f7;
  --sb-muted: #adb4c0;
  --sb-subtle: #858d9b;

  --sb-blue: #72a6ff;
  --sb-blue-soft: rgba(91,140,255,.10);

  --sb-green: #4ade80;
  --sb-green-soft: rgba(34,197,94,.09);

  --sb-purple: #c084fc;
  --sb-purple-soft: rgba(168,85,247,.09);

  --sb-gold: #fbbf24;
  --sb-gold-soft: rgba(245,158,11,.09);

  --sb-red: #fb7185;
  --sb-red-soft: rgba(244,63,94,.09);

  --sb-shadow: 0 14px 34px rgba(0,0,0,.20);
}


/* =========================================================
   PAGE
   ========================================================= */

.setbonus-page {
  width: 100%;
  color: var(--sb-text);
}

.setbonus-page *,
.setbonus-page *::before,
.setbonus-page *::after {
  box-sizing: border-box;
}

.setbonus-section {
  margin: 0 0 40px;
}


/* =========================================================
   HERO
   ========================================================= */

.setbonus-hero {
  position: relative;
  overflow: hidden;

  padding: 30px;

  border: 1px solid var(--sb-border);
  border-radius: 18px;

  background:
    radial-gradient(
      circle at 88% 5%,
      var(--sb-purple-soft),
      transparent 34%
    ),
    radial-gradient(
      circle at 0 100%,
      var(--sb-blue-soft),
      transparent 38%
    ),
    var(--sb-bg);

  box-shadow: var(--sb-shadow);
}


/* HERO GRID */

.setbonus-hero-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) 310px;

  gap: 34px;

  align-items: center;
}

.setbonus-hero-content {
  min-width: 0;
}


/* KICKER */

.setbonus-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  margin-bottom: 9px;

  color: var(--sb-purple);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;

  text-transform: uppercase;
}


/* TITLE */

.setbonus-hero h1 {
  margin: 0 0 11px !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--sb-text) !important;

  font-size: 36px !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
}


/* TEXT */

.setbonus-hero p {
  max-width: 850px;

  margin: 0 !important;

  color: var(--sb-muted) !important;

  font-size: 14px;
  line-height: 1.75;
}


/* HERO IMAGE */

.setbonus-hero-media {
  position: relative;

  width: 100%;
  max-width: 283px;

  aspect-ratio: 283 / 252;

  margin-left: auto;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  padding: 12px;

  border: 1px solid var(--sb-border);
  border-radius: 16px;

  background:
    radial-gradient(
      circle at center,
      var(--sb-purple-soft),
      transparent 62%
    ),
    var(--sb-bg-soft);
}

.setbonus-hero-media::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.035),
      transparent 45%
    );
}

.setbonus-hero-media img {
  position: relative;
  z-index: 1;

  display: block !important;

  width: 100% !important;
  height: 100% !important;

  max-width: 283px;

  margin: 0 !important;

  object-fit: contain;
  object-position: center;

  border: 0 !important;
  border-radius: 10px !important;

  transition: transform .25s ease;
}

.setbonus-hero-media:hover img {
  transform: scale(1.025);
}


/* =========================================================
   HERO OVERVIEW
   ========================================================= */

.setbonus-overview {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));

  gap: 12px;

  margin-top: 24px;
}

.setbonus-stat {
  padding: 14px;

  border: 1px solid var(--sb-border);
  border-radius: 12px;

  background: var(--sb-card);
}

.setbonus-stat-label {
  display: block;

  margin-bottom: 5px;

  color: var(--sb-subtle);

  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;

  text-transform: uppercase;
}

.setbonus-stat-value {
  color: var(--sb-text);

  font-size: 14px;
  font-weight: 750;
}


/* =========================================================
   SECTION HEAD
   ========================================================= */

.setbonus-head {
  display: flex;
  align-items: center;

  gap: 13px;

  margin-bottom: 18px;
  padding-bottom: 14px;

  border-bottom: 1px solid var(--sb-border);
}

.setbonus-head-icon {
  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;

  flex: 0 0 42px;

  border-radius: 11px;

  color: var(--sb-purple);
  background: var(--sb-purple-soft);
}

.setbonus-head h2 {
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--sb-text) !important;

  font-size: 24px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}


/* =========================================================
   GRIDS
   ========================================================= */

.setbonus-grid-2 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));

  gap: 16px;
}

.setbonus-grid-4 {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));

  gap: 14px;
}


/* =========================================================
   CARD
   ========================================================= */

.setbonus-card {
  padding: 19px;

  border: 1px solid var(--sb-border);
  border-radius: 14px;

  background: var(--sb-card);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.setbonus-card:hover {
  transform: translateY(-2px);

  border-color: var(--sb-border-hover);

  box-shadow: var(--sb-shadow);
}

.setbonus-card h3 {
  margin: 0 0 10px !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--sb-text) !important;

  font-size: 17px !important;
  font-weight: 750 !important;
}

.setbonus-card p {
  margin: 0 !important;

  color: var(--sb-muted) !important;

  font-size: 13px;
  line-height: 1.65;
}


/* =========================================================
   SCORE ITEMS
   ========================================================= */

.setbonus-score {
  display: flex;
  align-items: center;

  gap: 13px;

  padding: 15px;

  border: 1px solid var(--sb-border);
  border-radius: 12px;

  background: var(--sb-card);
}

.setbonus-score-icon {
  display: grid;
  place-items: center;

  width: 40px;
  height: 40px;
  flex: 0 0 40px;

  border-radius: 10px;

  background: var(--sb-blue-soft);

  color: var(--sb-blue);
}

.setbonus-score-info {
  min-width: 0;
  flex: 1;
}

.setbonus-score-name {
  display: block;

  margin-bottom: 3px;

  color: var(--sb-text);

  font-size: 12px;
  font-weight: 700;
}

.setbonus-score-desc {
  color: var(--sb-muted);

  font-size: 10.5px;
}

.setbonus-score-value {
  flex: 0 0 auto;

  color: var(--sb-green);

  font-size: 13px;
  font-weight: 800;
}


/* =========================================================
   BONUSES
   ========================================================= */

.setbonus-bonus {
  position: relative;

  overflow: hidden;

  padding: 18px;

  border: 1px solid var(--sb-border);
  border-radius: 14px;

  background: var(--sb-card);
}

.setbonus-bonus::after {
  content: "";

  position: absolute;
  right: -35px;
  top: -35px;

  width: 90px;
  height: 90px;

  border-radius: 50%;

  background: var(--sb-blue-soft);
}

.setbonus-bonus-icon {
  display: grid;
  place-items: center;

  width: 37px;
  height: 37px;

  margin-bottom: 12px;

  border-radius: 9px;

  background: var(--sb-blue-soft);

  color: var(--sb-blue);
}

.setbonus-bonus h3 {
  margin: 0 0 5px !important;

  color: var(--sb-text) !important;

  font-size: 14px !important;
  font-weight: 750 !important;
}

.setbonus-bonus-rate {
  display: block;

  margin-bottom: 10px;

  color: var(--sb-green);

  font-size: 11px;
  font-weight: 800;
}

.setbonus-bonus-max {
  color: var(--sb-muted);

  font-size: 11px;
}

.setbonus-bonus.hp .setbonus-bonus-icon {
  color: var(--sb-red);
  background: var(--sb-red-soft);
}

.setbonus-bonus.excellent .setbonus-bonus-icon {
  color: var(--sb-gold);
  background: var(--sb-gold-soft);
}


/* =========================================================
   FORMULA
   ========================================================= */

.setbonus-formula {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap: 8px;

  padding: 18px;

  border: 1px solid var(--sb-border);
  border-radius: 14px;

  background: var(--sb-bg-soft);
}

.setbonus-formula-part {
  display: inline-flex;
  align-items: center;

  padding: 7px 10px;

  border: 1px solid var(--sb-border);
  border-radius: 8px;

  background: var(--sb-card);

  color: var(--sb-text);

  font-size: 11px;
  font-weight: 700;
}

.setbonus-formula-plus {
  color: var(--sb-subtle);

  font-weight: 800;
}


/* =========================================================
   TABLE
   ========================================================= */

.setbonus-table {
  width: 100%;

  overflow: hidden;

  border: 1px solid var(--sb-border);
  border-radius: 13px;
}

.setbonus-table-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 140px;

  border-top: 1px solid var(--sb-border);
}

.setbonus-table-row:first-child {
  border-top: 0;
}

.setbonus-table-row > div {
  padding: 11px 13px;

  color: var(--sb-muted);

  font-size: 12px;
}

.setbonus-table-row > div + div {
  border-left: 1px solid var(--sb-border);

  color: var(--sb-text);

  font-weight: 750;
}

.setbonus-table-head {
  background: var(--sb-bg-soft);
}

.setbonus-table-head > div {
  color: var(--sb-text);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;

  text-transform: uppercase;
}


/* =========================================================
   NOTE
   ========================================================= */

.setbonus-note {
  display: flex;
  align-items: flex-start;

  gap: 10px;

  margin-top: 14px;
  padding: 12px 14px;

  border: 1px solid var(--sb-border);
  border-radius: 11px;

  background: var(--sb-bg-soft);

  color: var(--sb-muted);

  font-size: 12px;
  line-height: 1.6;
}

.setbonus-note i {
  margin-top: 2px;

  color: var(--sb-gold);
}


/* =========================================================
   CLASSES
   ========================================================= */

.setbonus-classes {
  display: flex;
  flex-wrap: wrap;

  gap: 8px;
}

.setbonus-class {
  display: inline-flex;
  align-items: center;

  padding: 6px 9px;

  border: 1px solid var(--sb-border);
  border-radius: 7px;

  background: var(--sb-bg-soft);

  color: var(--sb-text);

  font-size: 11px;
  font-weight: 750;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

  .setbonus-overview {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .setbonus-grid-4 {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

}


@media (max-width: 900px) {

  .setbonus-hero-grid {
    grid-template-columns: 1fr;
  }

  .setbonus-hero-media {
    margin: 4px auto 0;
  }

}


@media (max-width: 750px) {

  .setbonus-grid-2,
  .setbonus-grid-4 {
    grid-template-columns: 1fr;
  }

  .setbonus-hero {
    padding: 22px;
  }

  .setbonus-hero h1 {
    font-size: 29px !important;
  }

}


@media (max-width: 520px) {

  .setbonus-overview {
    grid-template-columns: 1fr;
  }

  .setbonus-hero-media {
    max-width: 260px;
  }

  .setbonus-table-row {
    grid-template-columns: 1fr;
  }

  .setbonus-table-row > div + div {
    border-left: 0;
    border-top: 1px solid var(--sb-border);
  }

}

/* =========================================================
   MUELEON - CATCH-UP EXP SYSTEM
   HELIOS DARK + LIGHT
   ========================================================= */

:root,
:root[data-theme="light"] {
  --cu-bg: #ffffff;
  --cu-bg-soft: #f7f8fb;
  --cu-card: #ffffff;

  --cu-border: #e3e7ef;
  --cu-border-hover: #ccd3de;

  --cu-text: #15171c;
  --cu-muted: #687180;
  --cu-subtle: #9299a6;

  --cu-blue: #356fd6;
  --cu-blue-soft: rgba(53,111,214,.09);

  --cu-green: #168447;
  --cu-green-soft: rgba(22,132,71,.09);

  --cu-purple: #7c3aed;
  --cu-purple-soft: rgba(124,58,237,.09);

  --cu-gold: #b77900;
  --cu-gold-soft: rgba(183,121,0,.09);

  --cu-red: #dc3545;
  --cu-red-soft: rgba(220,53,69,.09);

  --cu-shadow: 0 10px 28px rgba(15,23,42,.055);
}


:root[data-theme="dark"] {
  --cu-bg: #15171c;
  --cu-bg-soft: #1b1e25;
  --cu-card: #181b21;

  --cu-border: #2b3039;
  --cu-border-hover: #414854;

  --cu-text: #f4f5f7;
  --cu-muted: #adb4c0;
  --cu-subtle: #858d9b;

  --cu-blue: #72a6ff;
  --cu-blue-soft: rgba(91,140,255,.10);

  --cu-green: #4ade80;
  --cu-green-soft: rgba(34,197,94,.09);

  --cu-purple: #c084fc;
  --cu-purple-soft: rgba(168,85,247,.09);

  --cu-gold: #fbbf24;
  --cu-gold-soft: rgba(245,158,11,.09);

  --cu-red: #fb7185;
  --cu-red-soft: rgba(244,63,94,.09);

  --cu-shadow: 0 14px 34px rgba(0,0,0,.20);
}


/* =========================================================
   PAGE
   ========================================================= */

.catchup-page {
  width: 100%;
  color: var(--cu-text);
}

.catchup-page *,
.catchup-page *::before,
.catchup-page *::after {
  box-sizing: border-box;
}

.catchup-section {
  margin: 0 0 40px;
}


/* =========================================================
   HERO
   ========================================================= */

.catchup-hero {
  position: relative;
  overflow: hidden;

  padding: 30px;

  border: 1px solid var(--cu-border);
  border-radius: 18px;

  background:
    radial-gradient(
      circle at 88% 5%,
      var(--cu-green-soft),
      transparent 34%
    ),
    radial-gradient(
      circle at 0 100%,
      var(--cu-blue-soft),
      transparent 38%
    ),
    var(--cu-bg);

  box-shadow: var(--cu-shadow);
}


/* HERO GRID */

.catchup-hero-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) 310px;

  gap: 34px;

  align-items: center;
}

.catchup-hero-content {
  min-width: 0;
}


/* KICKER */

.catchup-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  margin-bottom: 9px;

  color: var(--cu-green);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;

  text-transform: uppercase;
}


/* HERO TITLE */

.catchup-hero h1 {
  margin: 0 0 11px !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--cu-text) !important;

  font-size: 36px !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
}


/* HERO TEXT */

.catchup-hero p {
  max-width: 850px;

  margin: 0 !important;

  color: var(--cu-muted) !important;

  font-size: 14px;
  line-height: 1.75;
}


/* HERO IMAGE */

.catchup-hero-media {
  position: relative;

  width: 100%;
  max-width: 283px;

  aspect-ratio: 283 / 252;

  margin-left: auto;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  padding: 12px;

  border: 1px solid var(--cu-border);
  border-radius: 16px;

  background:
    radial-gradient(
      circle at center,
      var(--cu-green-soft),
      transparent 62%
    ),
    var(--cu-bg-soft);
}

.catchup-hero-media::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.035),
      transparent 45%
    );
}

.catchup-hero-media img {
  position: relative;
  z-index: 1;

  display: block !important;

  width: 100% !important;
  height: 100% !important;

  max-width: 283px;

  margin: 0 !important;

  object-fit: contain;
  object-position: center;

  border: 0 !important;
  border-radius: 10px !important;

  transition: transform .25s ease;
}

.catchup-hero-media:hover img {
  transform: scale(1.025);
}


/* =========================================================
   HERO OVERVIEW
   ========================================================= */

.catchup-overview {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));

  gap: 12px;

  margin-top: 24px;
}

.catchup-stat {
  padding: 14px;

  border: 1px solid var(--cu-border);
  border-radius: 12px;

  background: var(--cu-card);
}

.catchup-stat-label {
  display: block;

  margin-bottom: 5px;

  color: var(--cu-subtle);

  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;

  text-transform: uppercase;
}

.catchup-stat-value {
  color: var(--cu-text);

  font-size: 14px;
  font-weight: 750;
}


/* =========================================================
   SECTION HEADER
   ========================================================= */

.catchup-head {
  display: flex;
  align-items: center;

  gap: 13px;

  margin-bottom: 18px;
  padding-bottom: 14px;

  border-bottom: 1px solid var(--cu-border);
}

.catchup-head-icon {
  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;

  flex: 0 0 42px;

  border-radius: 11px;

  color: var(--cu-green);
  background: var(--cu-green-soft);
}

.catchup-head h2 {
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--cu-text) !important;

  font-size: 24px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}


/* =========================================================
   GRIDS
   ========================================================= */

.catchup-grid-2 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));

  gap: 16px;
}

.catchup-grid-3 {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));

  gap: 14px;
}


/* =========================================================
   CARDS
   ========================================================= */

.catchup-card {
  padding: 19px;

  border: 1px solid var(--cu-border);
  border-radius: 14px;

  background: var(--cu-card);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.catchup-card:hover {
  transform: translateY(-2px);

  border-color: var(--cu-border-hover);

  box-shadow: var(--cu-shadow);
}

.catchup-card h3 {
  margin: 0 0 10px !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--cu-text) !important;

  font-size: 17px !important;
  font-weight: 750 !important;
}

.catchup-card p {
  margin: 0 !important;

  color: var(--cu-muted) !important;

  font-size: 13px;
  line-height: 1.65;
}


/* =========================================================
   FORMULA
   ========================================================= */

.catchup-formula {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap: 8px;

  padding: 18px;

  border: 1px solid var(--cu-border);
  border-radius: 14px;

  background: var(--cu-bg-soft);
}

.catchup-formula-part {
  display: inline-flex;
  align-items: center;

  padding: 7px 10px;

  border: 1px solid var(--cu-border);
  border-radius: 8px;

  background: var(--cu-card);

  color: var(--cu-text);

  font-size: 11px;
  font-weight: 700;
}

.catchup-formula-op {
  color: var(--cu-subtle);

  font-weight: 800;
}


/* =========================================================
   BONUS GAP
   ========================================================= */

.catchup-gap {
  overflow: hidden;

  border: 1px solid var(--cu-border);
  border-radius: 13px;

  background: var(--cu-card);
}

.catchup-gap-row {
  display: grid;
  grid-template-columns: 150px minmax(0,1fr) 90px;

  gap: 12px;

  align-items: center;

  padding: 11px 13px;

  border-top: 1px solid var(--cu-border);
}

.catchup-gap-row:first-child {
  border-top: 0;
}

.catchup-gap-label {
  color: var(--cu-text);

  font-size: 12px;
  font-weight: 700;
}

.catchup-gap-bar {
  height: 7px;

  overflow: hidden;

  border-radius: 999px;

  background: var(--cu-bg-soft);
}

.catchup-gap-fill {
  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      var(--cu-blue),
      var(--cu-green)
    );
}

.catchup-gap-value {
  color: var(--cu-green);

  text-align: right;

  font-size: 12px;
  font-weight: 800;
}


/* =========================================================
   TABLE
   ========================================================= */

.catchup-table {
  overflow: hidden;

  border: 1px solid var(--cu-border);
  border-radius: 13px;
}

.catchup-table-row {
  display: grid;
  grid-template-columns: 120px 160px 160px 1fr;

  border-top: 1px solid var(--cu-border);
}

.catchup-table-row:first-child {
  border-top: 0;
}

.catchup-table-row > div {
  padding: 10px 12px;

  color: var(--cu-muted);

  font-size: 11.5px;
}

.catchup-table-row > div + div {
  border-left: 1px solid var(--cu-border);
}

.catchup-table-head {
  background: var(--cu-bg-soft);
}

.catchup-table-head > div {
  color: var(--cu-text);

  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .06em;

  text-transform: uppercase;
}


/* =========================================================
   NOTES
   ========================================================= */

.catchup-note {
  display: flex;
  align-items: flex-start;

  gap: 10px;

  margin-top: 14px;
  padding: 12px 14px;

  border: 1px solid var(--cu-border);
  border-radius: 11px;

  background: var(--cu-bg-soft);

  color: var(--cu-muted);

  font-size: 12px;
  line-height: 1.6;
}

.catchup-note i {
  margin-top: 2px;

  color: var(--cu-gold);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

  .catchup-overview {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .catchup-grid-3 {
    grid-template-columns: 1fr;
  }

  .catchup-table-row {
    grid-template-columns: 100px 130px 130px 1fr;
  }

}


@media (max-width: 900px) {

  .catchup-hero-grid {
    grid-template-columns: 1fr;
  }

  .catchup-hero-media {
    margin: 4px auto 0;
  }

}


@media (max-width: 750px) {

  .catchup-grid-2 {
    grid-template-columns: 1fr;
  }

  .catchup-hero {
    padding: 22px;
  }

  .catchup-hero h1 {
    font-size: 29px !important;
  }

  .catchup-gap-row {
    grid-template-columns: 1fr;
  }

  .catchup-gap-value {
    text-align: left;
  }

  .catchup-table-row {
    grid-template-columns: 1fr;
  }

  .catchup-table-row > div + div {
    border-left: 0;
    border-top: 1px solid var(--cu-border);
  }

}


@media (max-width: 520px) {

  .catchup-overview {
    grid-template-columns: 1fr;
  }

  .catchup-hero-media {
    max-width: 260px;
  }

}

/* =========================================================
   MUELEON - TOP PROGRESS LOCK
   HELIOS DARK + LIGHT
   ========================================================= */

:root,
:root[data-theme="light"] {
  --tpl-bg: #ffffff;
  --tpl-bg-soft: #f7f8fb;
  --tpl-card: #ffffff;

  --tpl-border: #e3e7ef;
  --tpl-border-hover: #ccd3de;

  --tpl-text: #15171c;
  --tpl-muted: #687180;
  --tpl-subtle: #9299a6;

  --tpl-blue: #356fd6;
  --tpl-blue-soft: rgba(53,111,214,.09);

  --tpl-green: #168447;
  --tpl-green-soft: rgba(22,132,71,.09);

  --tpl-purple: #7c3aed;
  --tpl-purple-soft: rgba(124,58,237,.09);

  --tpl-gold: #b77900;
  --tpl-gold-soft: rgba(183,121,0,.09);

  --tpl-red: #dc3545;
  --tpl-red-soft: rgba(220,53,69,.09);

  --tpl-shadow: 0 10px 28px rgba(15,23,42,.055);
}

:root[data-theme="dark"] {
  --tpl-bg: #15171c;
  --tpl-bg-soft: #1b1e25;
  --tpl-card: #181b21;

  --tpl-border: #2b3039;
  --tpl-border-hover: #414854;

  --tpl-text: #f4f5f7;
  --tpl-muted: #adb4c0;
  --tpl-subtle: #858d9b;

  --tpl-blue: #72a6ff;
  --tpl-blue-soft: rgba(91,140,255,.10);

  --tpl-green: #4ade80;
  --tpl-green-soft: rgba(34,197,94,.09);

  --tpl-purple: #c084fc;
  --tpl-purple-soft: rgba(168,85,247,.09);

  --tpl-gold: #fbbf24;
  --tpl-gold-soft: rgba(245,158,11,.09);

  --tpl-red: #fb7185;
  --tpl-red-soft: rgba(244,63,94,.09);

  --tpl-shadow: 0 14px 34px rgba(0,0,0,.20);
}


/* =========================================================
   PAGE
   ========================================================= */

.toplock-page {
  width: 100%;
  color: var(--tpl-text);
}

.toplock-page *,
.toplock-page *::before,
.toplock-page *::after {
  box-sizing: border-box;
}

.toplock-section {
  margin: 0 0 40px;
}


/* =========================================================
   HERO
   ========================================================= */

.toplock-hero {
  position: relative;
  overflow: hidden;

  padding: 30px;

  border: 1px solid var(--tpl-border);
  border-radius: 18px;

  background:
    radial-gradient(
      circle at 88% 5%,
      var(--tpl-gold-soft),
      transparent 34%
    ),
    radial-gradient(
      circle at 0 100%,
      var(--tpl-blue-soft),
      transparent 38%
    ),
    var(--tpl-bg);

  box-shadow: var(--tpl-shadow);
}

.toplock-hero-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) 310px;
  gap: 34px;
  align-items: center;
}

.toplock-hero-content {
  min-width: 0;
}

.toplock-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  margin-bottom: 9px;

  color: var(--tpl-gold);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.toplock-hero h1 {
  margin: 0 0 11px !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--tpl-text) !important;

  font-size: 36px !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
}

.toplock-hero p {
  max-width: 860px;

  margin: 0 !important;

  color: var(--tpl-muted) !important;

  font-size: 14px;
  line-height: 1.75;
}


/* HERO IMAGE */

.toplock-hero-media {
  position: relative;

  width: 100%;
  max-width: 283px;
  aspect-ratio: 283 / 252;

  margin-left: auto;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  padding: 12px;

  border: 1px solid var(--tpl-border);
  border-radius: 16px;

  background:
    radial-gradient(
      circle at center,
      var(--tpl-gold-soft),
      transparent 62%
    ),
    var(--tpl-bg-soft);
}

.toplock-hero-media::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.035),
      transparent 45%
    );
}

.toplock-hero-media img {
  position: relative;
  z-index: 1;

  display: block !important;

  width: 100% !important;
  height: 100% !important;

  max-width: 283px;

  margin: 0 !important;

  object-fit: contain;
  object-position: center;

  border: 0 !important;
  border-radius: 10px !important;

  transition: transform .25s ease;
}

.toplock-hero-media:hover img {
  transform: scale(1.025);
}


/* =========================================================
   OVERVIEW
   ========================================================= */

.toplock-overview {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));

  gap: 12px;

  margin-top: 24px;
}

.toplock-stat {
  padding: 14px;

  border: 1px solid var(--tpl-border);
  border-radius: 12px;

  background: var(--tpl-card);
}

.toplock-stat-label {
  display: block;

  margin-bottom: 5px;

  color: var(--tpl-subtle);

  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.toplock-stat-value {
  color: var(--tpl-text);

  font-size: 14px;
  font-weight: 750;
}


/* =========================================================
   SECTION HEAD
   ========================================================= */

.toplock-head {
  display: flex;
  align-items: center;

  gap: 13px;

  margin-bottom: 18px;
  padding-bottom: 14px;

  border-bottom: 1px solid var(--tpl-border);
}

.toplock-head-icon {
  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;
  flex: 0 0 42px;

  border-radius: 11px;

  color: var(--tpl-gold);
  background: var(--tpl-gold-soft);
}

.toplock-head h2 {
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--tpl-text) !important;

  font-size: 24px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}


/* =========================================================
   GRIDS
   ========================================================= */

.toplock-grid-2 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));

  gap: 16px;
}

.toplock-grid-3 {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));

  gap: 14px;
}


/* =========================================================
   CARDS
   ========================================================= */

.toplock-card {
  padding: 19px;

  border: 1px solid var(--tpl-border);
  border-radius: 14px;

  background: var(--tpl-card);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.toplock-card:hover {
  transform: translateY(-2px);

  border-color: var(--tpl-border-hover);

  box-shadow: var(--tpl-shadow);
}

.toplock-card h3 {
  margin: 0 0 10px !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--tpl-text) !important;

  font-size: 17px !important;
  font-weight: 750 !important;
}

.toplock-card p {
  margin: 0 !important;

  color: var(--tpl-muted) !important;

  font-size: 13px;
  line-height: 1.65;
}


/* =========================================================
   FLOW
   ========================================================= */

.toplock-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap: 8px;

  padding: 18px;

  border: 1px solid var(--tpl-border);
  border-radius: 14px;

  background: var(--tpl-bg-soft);
}

.toplock-flow-part {
  display: inline-flex;
  align-items: center;

  padding: 7px 10px;

  border: 1px solid var(--tpl-border);
  border-radius: 8px;

  background: var(--tpl-card);

  color: var(--tpl-text);

  font-size: 11px;
  font-weight: 700;
}

.toplock-flow-op {
  color: var(--tpl-subtle);

  font-weight: 800;
}


/* =========================================================
   TABLE
   ========================================================= */

.toplock-table {
  overflow: hidden;

  border: 1px solid var(--tpl-border);
  border-radius: 13px;
}

.toplock-table-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 180px;

  border-top: 1px solid var(--tpl-border);
}

.toplock-table-row:first-child {
  border-top: 0;
}

.toplock-table-row > div {
  padding: 11px 13px;

  color: var(--tpl-muted);

  font-size: 12px;
}

.toplock-table-row > div + div {
  border-left: 1px solid var(--tpl-border);

  color: var(--tpl-text);

  font-weight: 750;
}

.toplock-table-head {
  background: var(--tpl-bg-soft);
}

.toplock-table-head > div {
  color: var(--tpl-text);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}


/* =========================================================
   BADGES
   ========================================================= */

.toplock-badges {
  display: flex;
  flex-wrap: wrap;

  gap: 8px;
}

.toplock-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 7px 10px;

  border: 1px solid var(--tpl-border);
  border-radius: 999px;

  background: var(--tpl-bg-soft);

  color: var(--tpl-text);

  font-size: 11px;
  font-weight: 750;
}

.toplock-badge.green {
  color: var(--tpl-green);
  background: var(--tpl-green-soft);
}

.toplock-badge.gold {
  color: var(--tpl-gold);
  background: var(--tpl-gold-soft);
}

.toplock-badge.red {
  color: var(--tpl-red);
  background: var(--tpl-red-soft);
}


/* =========================================================
   NOTE
   ========================================================= */

.toplock-note {
  display: flex;
  align-items: flex-start;

  gap: 10px;

  margin-top: 14px;
  padding: 12px 14px;

  border: 1px solid var(--tpl-border);
  border-radius: 11px;

  background: var(--tpl-bg-soft);

  color: var(--tpl-muted);

  font-size: 12px;
  line-height: 1.6;
}

.toplock-note i {
  margin-top: 2px;

  color: var(--tpl-gold);
}


/* =========================================================
   BENEFIT CARDS
   ========================================================= */

.toplock-benefit {
  padding: 18px;

  border: 1px solid var(--tpl-border);
  border-radius: 14px;

  background: var(--tpl-card);
}

.toplock-benefit-icon {
  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;

  margin-bottom: 12px;

  border-radius: 10px;

  color: var(--tpl-green);
  background: var(--tpl-green-soft);
}

.toplock-benefit h3 {
  margin: 0 0 8px !important;

  color: var(--tpl-text) !important;

  font-size: 15px !important;
  font-weight: 750 !important;
}

.toplock-benefit p {
  margin: 0 !important;

  color: var(--tpl-muted) !important;

  font-size: 12px;
  line-height: 1.6;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

  .toplock-overview {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .toplock-grid-3 {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 900px) {

  .toplock-hero-grid {
    grid-template-columns: 1fr;
  }

  .toplock-hero-media {
    margin: 4px auto 0;
  }

}

@media (max-width: 750px) {

  .toplock-grid-2 {
    grid-template-columns: 1fr;
  }

  .toplock-hero {
    padding: 22px;
  }

  .toplock-hero h1 {
    font-size: 29px !important;
  }

}

@media (max-width: 520px) {

  .toplock-overview {
    grid-template-columns: 1fr;
  }

  .toplock-table-row {
    grid-template-columns: 1fr;
  }

  .toplock-table-row > div + div {
    border-left: 0;
    border-top: 1px solid var(--tpl-border);
  }

  .toplock-hero-media {
    max-width: 260px;
  }

}

/* =========================================================
   MUELEON - SCRAMBLE EVENT
   HELIOS DARK + LIGHT
   ========================================================= */

:root,
:root[data-theme="light"] {
  --scr-bg: #ffffff;
  --scr-bg-soft: #f7f8fb;
  --scr-card: #ffffff;

  --scr-border: #e3e7ef;
  --scr-border-hover: #ccd3de;

  --scr-text: #15171c;
  --scr-muted: #687180;
  --scr-subtle: #9299a6;

  --scr-blue: #356fd6;
  --scr-blue-soft: rgba(53,111,214,.09);

  --scr-green: #168447;
  --scr-green-soft: rgba(22,132,71,.09);

  --scr-yellow: #b77900;
  --scr-yellow-soft: rgba(183,121,0,.09);

  --scr-red: #dc3545;
  --scr-red-soft: rgba(220,53,69,.09);

  --scr-purple: #7c3aed;
  --scr-purple-soft: rgba(124,58,237,.09);

  --scr-shadow: 0 10px 28px rgba(15,23,42,.055);
}

:root[data-theme="dark"] {
  --scr-bg: #15171c;
  --scr-bg-soft: #1b1e25;
  --scr-card: #181b21;

  --scr-border: #2b3039;
  --scr-border-hover: #414854;

  --scr-text: #f4f5f7;
  --scr-muted: #adb4c0;
  --scr-subtle: #858d9b;

  --scr-blue: #72a6ff;
  --scr-blue-soft: rgba(91,140,255,.10);

  --scr-green: #4ade80;
  --scr-green-soft: rgba(34,197,94,.09);

  --scr-yellow: #fbbf24;
  --scr-yellow-soft: rgba(245,158,11,.09);

  --scr-red: #fb7185;
  --scr-red-soft: rgba(244,63,94,.09);

  --scr-purple: #c084fc;
  --scr-purple-soft: rgba(168,85,247,.09);

  --scr-shadow: 0 14px 34px rgba(0,0,0,.20);
}


/* =========================================================
   PAGE
   ========================================================= */

.scramble-page {
  width: 100%;
  color: var(--scr-text);
}

.scramble-page *,
.scramble-page *::before,
.scramble-page *::after {
  box-sizing: border-box;
}

.scramble-section {
  margin: 0 0 40px;
}


/* =========================================================
   HERO
   ========================================================= */

.scramble-hero {
  position: relative;
  overflow: hidden;

  padding: 30px;

  border: 1px solid var(--scr-border);
  border-radius: 20px;

  background:
    radial-gradient(circle at 85% 10%, var(--scr-purple-soft), transparent 30%),
    radial-gradient(circle at 0 100%, var(--scr-blue-soft), transparent 36%),
    var(--scr-bg);

  box-shadow: var(--scr-shadow);
}

.scramble-hero-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) 420px;
  gap: 30px;
  align-items: center;
}

.scramble-hero-content {
  min-width: 0;
}

.scramble-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  margin-bottom: 10px;

  color: var(--scr-purple);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.scramble-hero h1 {
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;

  color: var(--scr-text) !important;

  font-size: 36px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
}

.scramble-hero p {
  margin: 0 !important;
  max-width: 760px;

  color: var(--scr-muted) !important;

  font-size: 14px;
  line-height: 1.75;
}

.scramble-hero-media {
  position: relative;

  width: 100%;
  min-height: 280px;

  overflow: hidden;

  border: 1px solid var(--scr-border);
  border-radius: 18px;

  background: var(--scr-bg-soft);
}

.scramble-hero-media::after {
  content: "";

  position: absolute;
  inset: 0;

  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.05));
  pointer-events: none;
}

.scramble-hero-media img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 280px;

  object-fit: cover;
  object-position: center;

  border: 0 !important;
  margin: 0 !important;
}

.scramble-overview {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 12px;

  margin-top: 22px;
}

.scramble-stat {
  padding: 14px;

  border: 1px solid var(--scr-border);
  border-radius: 12px;

  background: var(--scr-card);
}

.scramble-stat-label {
  display: block;
  margin-bottom: 5px;

  color: var(--scr-subtle);

  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.scramble-stat-value {
  color: var(--scr-text);

  font-size: 14px;
  font-weight: 750;
}


/* =========================================================
   HEAD
   ========================================================= */

.scramble-head {
  display: flex;
  align-items: center;
  gap: 13px;

  margin-bottom: 18px;
  padding-bottom: 14px;

  border-bottom: 1px solid var(--scr-border);
}

.scramble-head-icon {
  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;
  flex: 0 0 42px;

  border-radius: 11px;

  color: var(--scr-purple);
  background: var(--scr-purple-soft);
}

.scramble-head h2 {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;

  color: var(--scr-text) !important;

  font-size: 24px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}


/* =========================================================
   GRID / CARD
   ========================================================= */

.scramble-grid-2 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 16px;
}

.scramble-grid-3 {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 16px;
}

.scramble-card {
  padding: 20px;

  border: 1px solid var(--scr-border);
  border-radius: 16px;

  background: var(--scr-card);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.scramble-card:hover {
  transform: translateY(-2px);
  border-color: var(--scr-border-hover);
  box-shadow: var(--scr-shadow);
}

.scramble-card h3 {
  margin: 0 0 10px !important;
  padding: 0 !important;
  border: 0 !important;

  color: var(--scr-text) !important;

  font-size: 18px !important;
  font-weight: 750 !important;
}

.scramble-card p {
  margin: 0 !important;

  color: var(--scr-muted) !important;

  font-size: 13px;
  line-height: 1.7;
}


/* =========================================================
   DIFFICULTY CARDS
   ========================================================= */

.scramble-difficulty {
  position: relative;
  overflow: hidden;

  padding: 20px;

  border: 1px solid var(--scr-border);
  border-radius: 16px;

  background: var(--scr-card);
}

.scramble-difficulty::after {
  content: "";

  position: absolute;
  right: -35px;
  top: -35px;

  width: 90px;
  height: 90px;
  border-radius: 50%;
  opacity: .9;
}

.scramble-difficulty.low::after {
  background: var(--scr-green-soft);
}

.scramble-difficulty.medium::after {
  background: var(--scr-yellow-soft);
}

.scramble-difficulty.hard::after {
  background: var(--scr-red-soft);
}

.scramble-tier {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin-bottom: 10px;
  padding: 6px 10px;

  border-radius: 999px;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.scramble-tier.low {
  color: var(--scr-green);
  background: var(--scr-green-soft);
}

.scramble-tier.medium {
  color: var(--scr-yellow);
  background: var(--scr-yellow-soft);
}

.scramble-tier.hard {
  color: var(--scr-red);
  background: var(--scr-red-soft);
}

.scramble-difficulty h3 {
  margin: 0 0 14px !important;

  color: var(--scr-text) !important;

  font-size: 22px !important;
  font-weight: 800 !important;
}

.scramble-list {
  display: grid;
  gap: 10px;
}

.scramble-list-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;

  padding: 10px 12px;

  border: 1px solid var(--scr-border);
  border-radius: 10px;

  background: var(--scr-bg-soft);
}

.scramble-list-label {
  color: var(--scr-muted);
  font-size: 12px;
}

.scramble-list-value {
  color: var(--scr-text);
  font-size: 12px;
  font-weight: 750;
  text-align: right;
}


/* =========================================================
   FLOW
   ========================================================= */

.scramble-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;

  padding: 18px;

  border: 1px solid var(--scr-border);
  border-radius: 14px;

  background: var(--scr-bg-soft);
}

.scramble-flow-part {
  display: inline-flex;
  align-items: center;

  padding: 8px 11px;

  border: 1px solid var(--scr-border);
  border-radius: 8px;

  background: var(--scr-card);

  color: var(--scr-text);

  font-size: 11px;
  font-weight: 700;
}

.scramble-flow-op {
  color: var(--scr-subtle);
  font-weight: 800;
}


/* =========================================================
   REWARD / TIP / SUMMARY BLOCKS
   ========================================================= */

.scramble-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.scramble-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  padding: 8px 12px;

  border: 1px solid var(--scr-border);
  border-radius: 999px;

  background: var(--scr-bg-soft);

  color: var(--scr-text);

  font-size: 11px;
  font-weight: 750;
}

.scramble-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  margin-top: 14px;
  padding: 13px 14px;

  border: 1px solid var(--scr-border);
  border-radius: 12px;

  background: var(--scr-bg-soft);

  color: var(--scr-muted);

  font-size: 12px;
  line-height: 1.65;
}

.scramble-note i {
  margin-top: 2px;
  color: var(--scr-blue);
}

.scramble-tips {
  display: grid;
  gap: 12px;
}

.scramble-tip {
  display: flex;
  align-items: flex-start;
  gap: 12px;

  padding: 14px 15px;

  border: 1px solid var(--scr-border);
  border-radius: 12px;

  background: var(--scr-card);
}

.scramble-tip-icon {
  display: grid;
  place-items: center;

  width: 34px;
  height: 34px;
  flex: 0 0 34px;

  border-radius: 9px;

  color: var(--scr-blue);
  background: var(--scr-blue-soft);
}

.scramble-tip strong {
  display: block;
  margin-bottom: 4px;

  color: var(--scr-text);
  font-size: 13px;
}

.scramble-tip span {
  color: var(--scr-muted);
  font-size: 12px;
  line-height: 1.6;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {
  .scramble-overview {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .scramble-grid-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 920px) {
  .scramble-hero-grid {
    grid-template-columns: 1fr;
  }

  .scramble-hero-media {
    min-height: 240px;
  }
}

@media (max-width: 750px) {
  .scramble-grid-2 {
    grid-template-columns: 1fr;
  }

  .scramble-hero {
    padding: 22px;
  }

  .scramble-hero h1 {
    font-size: 29px !important;
  }
}

@media (max-width: 520px) {
  .scramble-overview {
    grid-template-columns: 1fr;
  }

  .scramble-list-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .scramble-list-value {
    text-align: left;
  }
}

/* =========================================================
   MUELEON - DUNGEON SYSTEM
   HELIOS DARK + LIGHT
   ========================================================= */

:root,
:root[data-theme="light"] {
  --dg-bg: #ffffff;
  --dg-bg-soft: #f7f8fb;
  --dg-card: #ffffff;

  --dg-border: #e2e6ed;
  --dg-border-hover: #cbd2dd;

  --dg-text: #17181c;
  --dg-muted: #687180;
  --dg-subtle: #9098a6;

  --dg-blue: #356fd6;
  --dg-blue-soft: rgba(53,111,214,.09);

  --dg-green: #168447;
  --dg-green-soft: rgba(22,132,71,.09);

  --dg-gold: #b77900;
  --dg-gold-soft: rgba(183,121,0,.09);

  --dg-purple: #7c3aed;
  --dg-purple-soft: rgba(124,58,237,.09);

  --dg-red: #dc3545;
  --dg-red-soft: rgba(220,53,69,.09);

  --dg-shadow: 0 10px 28px rgba(15,23,42,.055);
}

:root[data-theme="dark"] {
  --dg-bg: #15171c;
  --dg-bg-soft: #1b1e25;
  --dg-card: #181b21;

  --dg-border: #2b3039;
  --dg-border-hover: #414854;

  --dg-text: #f4f5f7;
  --dg-muted: #adb4c0;
  --dg-subtle: #858d9b;

  --dg-blue: #72a6ff;
  --dg-blue-soft: rgba(91,140,255,.10);

  --dg-green: #4ade80;
  --dg-green-soft: rgba(34,197,94,.09);

  --dg-gold: #fbbf24;
  --dg-gold-soft: rgba(245,158,11,.09);

  --dg-purple: #c084fc;
  --dg-purple-soft: rgba(168,85,247,.09);

  --dg-red: #fb7185;
  --dg-red-soft: rgba(244,63,94,.09);

  --dg-shadow: 0 14px 34px rgba(0,0,0,.20);
}


/* PAGE */

.dgs-page {
  width: 100%;
  color: var(--dg-text);
}

.dgs-page *,
.dgs-page *::before,
.dgs-page *::after {
  box-sizing: border-box;
}

.dgs-section {
  margin: 0 0 42px;
}


/* HERO */

.dgs-hero {
  position: relative;
  overflow: hidden;

  padding: 30px;

  border: 1px solid var(--dg-border);
  border-radius: 20px;

  background:
    radial-gradient(circle at 88% 5%, var(--dg-purple-soft), transparent 34%),
    radial-gradient(circle at 0 100%, var(--dg-blue-soft), transparent 38%),
    var(--dg-bg);

  box-shadow: var(--dg-shadow);
}

.dgs-hero-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) 430px;
  gap: 30px;
  align-items: center;
}

.dgs-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  margin-bottom: 9px;

  color: var(--dg-purple);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.dgs-hero h1 {
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;

  color: var(--dg-text) !important;

  font-size: 38px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
}

.dgs-hero p {
  max-width: 820px;

  margin: 0 !important;

  color: var(--dg-muted) !important;

  font-size: 14px;
  line-height: 1.75;
}

.dgs-hero-media {
  overflow: hidden;

  min-height: 270px;

  border: 1px solid var(--dg-border);
  border-radius: 18px;

  background: var(--dg-bg-soft);
}

.dgs-hero-media img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;
  min-height: 270px;

  margin: 0 !important;

  object-fit: cover;
  object-position: center;

  border: 0 !important;
}


/* OVERVIEW */

.dgs-overview {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));

  gap: 12px;

  margin-top: 24px;
}

.dgs-stat {
  padding: 14px;

  border: 1px solid var(--dg-border);
  border-radius: 12px;

  background: var(--dg-card);
}

.dgs-stat-label {
  display: block;

  margin-bottom: 5px;

  color: var(--dg-subtle);

  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.dgs-stat-value {
  color: var(--dg-text);

  font-size: 14px;
  font-weight: 750;
}


/* SECTION HEAD */

.dgs-head {
  display: flex;
  align-items: center;
  gap: 13px;

  margin-bottom: 18px;
  padding-bottom: 14px;

  border-bottom: 1px solid var(--dg-border);
}

.dgs-head-icon {
  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;
  flex: 0 0 42px;

  border-radius: 11px;

  color: var(--dg-purple);
  background: var(--dg-purple-soft);
}

.dgs-head h2 {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;

  color: var(--dg-text) !important;

  font-size: 25px !important;
  font-weight: 800 !important;
}


/* GRID */

.dgs-grid-2 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 16px;
}

.dgs-grid-3 {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 16px;
}

.dgs-grid-4 {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 14px;
}


/* CARD */

.dgs-card {
  padding: 19px;

  border: 1px solid var(--dg-border);
  border-radius: 15px;

  background: var(--dg-card);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.dgs-card:hover {
  transform: translateY(-2px);
  border-color: var(--dg-border-hover);
  box-shadow: var(--dg-shadow);
}

.dgs-card h3 {
  margin: 0 0 10px !important;
  padding: 0 !important;

  color: var(--dg-text) !important;

  font-size: 17px !important;
  font-weight: 750 !important;
}

.dgs-card p {
  margin: 0 !important;

  color: var(--dg-muted) !important;

  font-size: 13px;
  line-height: 1.7;
}


/* MEDIA */

.dgs-media {
  overflow: hidden;

  border: 1px solid var(--dg-border);
  border-radius: 17px;

  background: var(--dg-bg-soft);
}

.dgs-media img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;
  min-height: 270px;

  margin: 0 !important;

  object-fit: cover;
  object-position: center;

  border: 0 !important;
}


/* DUNGEON CARDS */

.dgs-dungeon {
  overflow: hidden;

  border: 1px solid var(--dg-border);
  border-radius: 16px;

  background: var(--dg-card);
}

.dgs-dungeon-image {
  height: 150px;

  overflow: hidden;

  background: var(--dg-bg-soft);
}

.dgs-dungeon-image img {
  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;

  object-fit: cover;

  border: 0 !important;
}

.dgs-dungeon-content {
  padding: 17px;
}

.dgs-dungeon-content h3 {
  margin: 0 0 6px !important;

  color: var(--dg-text) !important;

  font-size: 17px !important;
  font-weight: 800 !important;
}

.dgs-dungeon-content p {
  margin: 0 0 13px !important;

  color: var(--dg-muted) !important;

  font-size: 12px;
  line-height: 1.6;
}

.dgs-dungeon-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.dgs-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 6px 9px;

  border: 1px solid var(--dg-border);
  border-radius: 999px;

  background: var(--dg-bg-soft);

  color: var(--dg-text);

  font-size: 10.5px;
  font-weight: 700;
}


/* DIFFICULTY */

.dgs-tier {
  padding: 18px;

  border: 1px solid var(--dg-border);
  border-radius: 14px;

  background: var(--dg-card);
}

.dgs-tier-name {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  margin-bottom: 12px;
  padding: 6px 9px;

  border-radius: 999px;

  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.dgs-tier.normal .dgs-tier-name {
  color: var(--dg-green);
  background: var(--dg-green-soft);
}

.dgs-tier.expert .dgs-tier-name {
  color: var(--dg-gold);
  background: var(--dg-gold-soft);
}

.dgs-tier.nightmare .dgs-tier-name {
  color: var(--dg-red);
  background: var(--dg-red-soft);
}

.dgs-tier h3 {
  margin: 0 0 12px !important;

  color: var(--dg-text) !important;

  font-size: 18px !important;
  font-weight: 800 !important;
}

.dgs-tier-list {
  display: grid;
  gap: 8px;
}

.dgs-tier-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;

  padding: 9px 10px;

  border: 1px solid var(--dg-border);
  border-radius: 9px;

  background: var(--dg-bg-soft);

  font-size: 11px;
}

.dgs-tier-row span:first-child {
  color: var(--dg-muted);
}

.dgs-tier-row span:last-child {
  color: var(--dg-text);
  font-weight: 750;
}


/* PARTY EXP */

.dgs-exp-table {
  overflow: hidden;

  border: 1px solid var(--dg-border);
  border-radius: 13px;
}

.dgs-exp-row {
  display: grid;
  grid-template-columns: 150px repeat(5,minmax(80px,1fr));

  border-top: 1px solid var(--dg-border);
}

.dgs-exp-row:first-child {
  border-top: 0;
}

.dgs-exp-row > div {
  padding: 10px 12px;

  color: var(--dg-muted);

  font-size: 11px;
  text-align: center;
}

.dgs-exp-row > div:first-child {
  text-align: left;
}

.dgs-exp-row > div + div {
  border-left: 1px solid var(--dg-border);
}

.dgs-exp-head {
  background: var(--dg-bg-soft);
}

.dgs-exp-head > div {
  color: var(--dg-text);

  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.dgs-exp-boost {
  color: var(--dg-green) !important;
  font-weight: 800;
}


/* FLOW */

.dgs-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;

  padding: 18px;

  border: 1px solid var(--dg-border);
  border-radius: 14px;

  background: var(--dg-bg-soft);
}

.dgs-flow-part {
  display: inline-flex;
  align-items: center;

  padding: 7px 10px;

  border: 1px solid var(--dg-border);
  border-radius: 8px;

  background: var(--dg-card);

  color: var(--dg-text);

  font-size: 11px;
  font-weight: 700;
}

.dgs-flow-op {
  color: var(--dg-subtle);
  font-weight: 800;
}


/* TABLE */

.dgs-table {
  overflow: hidden;

  border: 1px solid var(--dg-border);
  border-radius: 13px;
}

.dgs-table-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 380px;
  border-top: 1px solid var(--dg-border);
}

.dgs-table-row:first-child {
  border-top: 0;
}

.dgs-table-row > div {
  padding: 11px 13px;

  color: var(--dg-muted);

  font-size: 12px;
}

.dgs-table-row > div + div {
  border-left: 1px solid var(--dg-border);

  color: var(--dg-text);

  font-weight: 750;
}

.dgs-table-head {
  background: var(--dg-bg-soft);
}

.dgs-table-head > div {
  color: var(--dg-text);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}


/* NOTE */

.dgs-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  margin-top: 14px;
  padding: 12px 14px;

  border: 1px solid var(--dg-border);
  border-radius: 11px;

  background: var(--dg-bg-soft);

  color: var(--dg-muted);

  font-size: 12px;
  line-height: 1.65;
}

.dgs-note i {
  margin-top: 2px;
  color: var(--dg-gold);
}


/* AFFIX */

.dgs-affix {
  padding: 17px;

  border: 1px solid var(--dg-border);
  border-radius: 14px;

  background: var(--dg-card);
}

.dgs-affix-icon {
  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;

  margin-bottom: 11px;

  border-radius: 10px;

  color: var(--dg-purple);
  background: var(--dg-purple-soft);
}

.dgs-affix h3 {
  margin: 0 0 6px !important;

  color: var(--dg-text) !important;

  font-size: 15px !important;
  font-weight: 800 !important;
}

.dgs-affix p {
  margin: 0 !important;

  color: var(--dg-muted) !important;

  font-size: 11.5px;
  line-height: 1.6;
}


/* RESPONSIVE */

@media (max-width: 1150px) {
  .dgs-overview {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .dgs-grid-4 {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .dgs-exp-row {
    grid-template-columns: 130px repeat(5,1fr);
  }
}

@media (max-width: 950px) {
  .dgs-hero-grid,
  .dgs-grid-2 {
    grid-template-columns: 1fr;
  }

  .dgs-grid-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .dgs-hero {
    padding: 22px;
  }

  .dgs-hero h1 {
    font-size: 30px !important;
  }

  .dgs-overview,
  .dgs-grid-4 {
    grid-template-columns: 1fr;
  }

  .dgs-exp-table {
    overflow-x: auto;
  }

  .dgs-exp-row {
    min-width: 680px;
  }

  .dgs-table-row {
    grid-template-columns: 1fr;
  }

  .dgs-table-row > div + div {
    border-left: 0;
    border-top: 1px solid var(--dg-border);
  }
}

.dgs-compact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.dgs-compact-card{overflow:hidden;border:1px solid color-mix(in srgb,currentColor 14%,transparent);border-radius:14px;background:color-mix(in srgb,currentColor 3.5%,transparent);box-shadow:0 10px 28px color-mix(in srgb,#000 12%,transparent)}
.dgs-compact-cover{position:relative;height:150px;overflow:hidden}
.dgs-compact-cover img{width:100%;height:100%;object-fit:cover;display:block}
.dgs-compact-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,color-mix(in srgb,#000 72%,transparent),transparent 68%)}
.dgs-compact-title{position:absolute;left:16px;right:16px;bottom:13px;z-index:2;color:#fff;text-shadow:0 2px 12px #000}
.dgs-compact-title .dgs-kicker{color:#d58cff!important}
.dgs-compact-title h3{margin:3px 0 0!important;color:#fff!important;font-size:18px!important}
.dgs-compact-body{padding:14px}
.dgs-compact-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:12px}
.dgs-compact-stat{padding:8px 6px;text-align:center;border:1px solid color-mix(in srgb,currentColor 12%,transparent);border-radius:9px;background:color-mix(in srgb,currentColor 4%,transparent)}
.dgs-compact-stat b{display:block;font-size:13px;line-height:1.2}
.dgs-compact-stat span{display:block;margin-top:3px;font-size:10px;opacity:.62;text-transform:uppercase;letter-spacing:.05em}
.dgs-compact-entry{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px}
.dgs-compact-line{display:flex;justify-content:space-between;gap:10px;padding:7px 9px;border-radius:8px;background:color-mix(in srgb,currentColor 4%,transparent);font-size:11px}
.dgs-compact-line span:first-child{opacity:.62}.dgs-compact-line strong{text-align:right;font-weight:700}
.dgs-compact-diff{display:grid;gap:7px}.dgs-compact-diff-row{display:grid;grid-template-columns:minmax(74px,.75fr) 1.35fr .7fr .7fr;gap:7px;align-items:center;padding:8px 9px;border:1px solid color-mix(in srgb,currentColor 11%,transparent);border-radius:9px;font-size:11px}
.dgs-compact-diff-row.is-head{padding:0 9px;border:0;background:none;font-size:9px;opacity:.55;text-transform:uppercase;letter-spacing:.05em}
.dgs-compact-diff-row strong{font-size:11px}.dgs-compact-exp{font-weight:800;text-align:center}
.dgs-compact-note{margin-top:14px;display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border:1px solid color-mix(in srgb,currentColor 12%,transparent);border-radius:10px;background:color-mix(in srgb,currentColor 4%,transparent);font-size:11px}
@media(max-width:1100px){.dgs-compact-grid{grid-template-columns:1fr}.dgs-compact-cover{height:190px}}
@media(max-width:620px){.dgs-compact-entry{grid-template-columns:1fr}.dgs-compact-diff-row{grid-template-columns:1fr 1.35fr .8fr .8fr}.dgs-compact-cover{height:160px}}

/* ==========================================================
   DUNGEON REWARDS
   Helios Dark / Light compatible
   ========================================================== */

.dgr-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}


/* Main card */

.dgr-card {
    padding: 20px;

    border: 1px solid
        color-mix(in srgb, currentColor 12%, transparent);

    border-radius: 16px;

    background:
        color-mix(in srgb, currentColor 2.5%, transparent);

    overflow: hidden;
}


.dgr-card-wide {
    grid-column: 1 / -1;
}


/* ==========================================================
   Header
   ========================================================== */

.dgr-title {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 16px;
}


.dgr-title h3 {
    margin: 2px 0 0 !important;

    font-size: 18px !important;
}


.dgr-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    background:
        color-mix(in srgb, #a855f7 14%, transparent);

    color: #c084fc;

    font-size: 16px;
}


/* ==========================================================
   Information
   ========================================================== */

.dgr-info {
    display: flex;

    gap: 10px;

    align-items: flex-start;

    margin-bottom: 16px;

    padding: 11px 13px;

    border-radius: 10px;

    background:
        color-mix(in srgb, currentColor 4%, transparent);

    font-size: 12px;

    line-height: 1.55;
}


.dgr-info i {
    color: #a855f7;

    margin-top: 3px;
}


/* ==========================================================
   Boss box
   ========================================================== */

.dgr-boss {
    display: flex;

    gap: 11px;

    padding: 12px 14px;

    margin-bottom: 16px;

    border: 1px solid
        color-mix(in srgb, currentColor 11%, transparent);

    border-radius: 11px;

    background:
        color-mix(in srgb, currentColor 3%, transparent);
}


.dgr-boss-icon {
    color: #b967ff;

    font-size: 14px;

    margin-top: 2px;
}


.dgr-boss strong {
    font-size: 12px;
}


.dgr-boss p {
    margin: 3px 0 0 !important;

    font-size: 11px;

    opacity: .72;

    line-height: 1.45;
}


/* ==========================================================
   Difficulty cards
   ========================================================== */

.dgr-tier-list {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;
}


.dgr-tier-list-3 {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}


.dgr-tier {
    position: relative;

    padding: 13px;

    border: 1px solid
        color-mix(in srgb, currentColor 11%, transparent);

    border-radius: 12px;

    background:
        color-mix(in srgb, currentColor 3%, transparent);
}


/* subtle difficulty accent */

.dgr-tier.normal {
    box-shadow:
        inset 0 2px 0 rgba(80, 160, 255, .38);
}


.dgr-tier.expert,
.dgr-tier.hard {
    box-shadow:
        inset 0 2px 0 rgba(170, 90, 255, .42);
}


.dgr-tier.nightmare {
    box-shadow:
        inset 0 2px 0 rgba(255, 75, 145, .42);
}


/* Difficulty name */

.dgr-tier-name {
    display: inline-flex;

    margin-bottom: 12px;

    padding: 4px 8px;

    border-radius: 6px;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .08em;

    text-transform: uppercase;
}


.normal .dgr-tier-name {
    color: #69b4ff;

    background:
        rgba(70, 145, 255, .10);
}


.expert .dgr-tier-name,
.hard .dgr-tier-name {
    color: #c27aff;

    background:
        rgba(160, 75, 255, .10);
}


.nightmare .dgr-tier-name {
    color: #ff6ca8;

    background:
        rgba(255, 75, 140, .10);
}


/* ==========================================================
   Reward rows
   ========================================================== */

.dgr-reward {
    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 12px;

    padding: 7px 0;

    border-bottom: 1px solid
        color-mix(in srgb, currentColor 7%, transparent);

    font-size: 11px;
}


.dgr-reward:last-child {
    border-bottom: 0;

    padding-bottom: 0;
}


.dgr-reward span {
    opacity: .62;
}


.dgr-reward strong {
    text-align: right;

    font-size: 11px;

    line-height: 1.4;
}


/* ==========================================================
   Crywolf common boss rewards
   ========================================================== */

.dgr-global-rewards {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 9px;

    margin-bottom: 18px;
}


.dgr-global-rewards > div {
    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 10px;

    padding: 11px 12px;

    border: 1px solid
        color-mix(in srgb, currentColor 10%, transparent);

    border-radius: 10px;

    background:
        color-mix(in srgb, currentColor 3%, transparent);

    font-size: 11px;
}


.dgr-global-rewards span {
    opacity: .62;
}


.dgr-global-rewards strong {
    text-align: right;
}


.dgr-global-rewards em {
    font-style: normal;

    font-weight: 800;

    color: #8ee7b2;
}


/* ==========================================================
   Sub title
   ========================================================== */

.dgr-subtitle {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 10px;

    margin: 4px 0 10px;
}


.dgr-subtitle > span {
    font-size: 12px;

    font-weight: 700;
}


.dgr-subtitle i {
    margin-right: 5px;

    color: #b967ff;
}


.dgr-subtitle small {
    font-size: 10px;

    opacity: .55;
}


/* ==========================================================
   Main Crywolf reward
   ========================================================== */

.dgr-main-reward {
    display: flex;

    align-items: baseline;

    gap: 6px;

    padding-bottom: 10px;

    margin-bottom: 7px;

    border-bottom: 1px solid
        color-mix(in srgb, currentColor 8%, transparent);
}


.dgr-main-reward strong {
    font-size: 18px;

    line-height: 1;
}


.dgr-main-reward span {
    font-size: 11px;

    font-weight: 700;
}


/* ==========================================================
   Chance
   ========================================================== */

.dgr-chance {
    display: flex;

    justify-content: space-between;

    gap: 10px;

    padding: 4px 0;

    font-size: 10px;
}


.dgr-chance span {
    opacity: .62;
}


.dgr-chance strong {
    font-size: 11px;
}


/* ==========================================================
   Responsive
   ========================================================== */

@media (max-width: 1100px) {

    .dgr-grid {
        grid-template-columns: 1fr;
    }


    .dgr-card-wide {
        grid-column: auto;
    }

}


@media (max-width: 720px) {

    .dgr-tier-list,
    .dgr-tier-list-3,
    .dgr-global-rewards {
        grid-template-columns: 1fr;
    }


    .dgr-subtitle {
        align-items: flex-start;

        flex-direction: column;
    }

}
/* ==========================================================
   CRYWOLF PARTY CHANCE
   ========================================================== */

.dgr-party-chance {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 8px;

    margin-bottom: 14px;
}


.dgr-party-chance > div {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 3px;

    padding: 9px 6px;

    border: 1px solid
        color-mix(in srgb, currentColor 10%, transparent);

    border-radius: 9px;

    background:
        color-mix(in srgb, currentColor 3%, transparent);
}


.dgr-party-chance span {
    font-size: 9px;

    opacity: .58;

    text-transform: uppercase;

    letter-spacing: .04em;
}


.dgr-party-chance strong {
    font-size: 14px;

    color: #c084fc;
}


/* Karutan uses the same compact party-chance pattern as Crywolf. */

.dgr-card-karutan > .dgr-reward-section {
    display: none;
}


.dgr-card-karutan > .dgr-karutan-current {
    display: block;
}


.dgr-card-karutan .dgr-mold-pool-title {
    margin-top: 16px;
}


.dgr-card-karutan .dgr-karutan-molds {
    padding: 14px;

    border: 1px solid
        color-mix(in srgb, #a855f7 18%, transparent);

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, #a855f7 6%, transparent),
            transparent 65%
        );
}


.dgr-card-karutan .dgr-mold-pool {
    grid-template-columns: 1fr;

    gap: 7px;
}


.dgr-card-karutan .dgr-mold-pool > div {
    grid-template-columns: auto minmax(0, 1fr);
}


.dgr-card-karutan .dgr-mold-pool strong {
    overflow-wrap: anywhere;
}


/* Multiple rewards inside one difficulty */

.dgr-tier .dgr-main-reward + .dgr-main-reward {
    margin-top: 7px;
}


@media (max-width: 720px) {

    .dgr-party-chance {
        grid-template-columns:
            repeat(5, minmax(72px, 1fr));

        overflow-x: auto;

        padding-bottom: 4px;
    }

}

/* ==========================================================
   REWARD SECTIONS
   ========================================================== */

.dgr-reward-section {
    margin-top: 16px;
}


.dgr-reward-section + .dgr-reward-section {
    padding-top: 16px;

    border-top: 1px solid
        color-mix(in srgb, currentColor 10%, transparent);
}


/* Section header */

.dgr-section-title {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 12px;

    margin-bottom: 10px;
}


.dgr-section-title > span {
    display: flex;

    align-items: center;

    gap: 7px;

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .05em;
}


.dgr-section-title > span i {
    color: #b967ff;
}


.dgr-section-title small {
    padding: 4px 7px;

    border-radius: 6px;

    background:
        color-mix(in srgb, currentColor 5%, transparent);

    font-size: 9px;

    opacity: .65;
}


/* ==========================================================
   SIMPLE STAGE REWARD
   ========================================================== */

.dgr-special-reward {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 8px;
}


.dgr-special-reward > div {
    display: flex;

    flex-direction: column;

    gap: 4px;

    padding: 10px;

    border: 1px solid
        color-mix(in srgb, currentColor 10%, transparent);

    border-radius: 9px;

    background:
        color-mix(in srgb, currentColor 3%, transparent);
}


.dgr-special-reward span {
    font-size: 9px;

    opacity: .55;

    text-transform: uppercase;
}


.dgr-special-reward strong {
    font-size: 11px;
}


/* ==========================================================
   CONFIG WARNING
   ========================================================== */

.dgr-warning {
    display: flex;

    gap: 9px;

    align-items: flex-start;

    margin-top: 10px;

    padding: 9px 11px;

    border-radius: 8px;

    border: 1px solid
        color-mix(in srgb, #ffb020 22%, transparent);

    background:
        color-mix(in srgb, #ffb020 7%, transparent);

    font-size: 10px;

    line-height: 1.45;
}


.dgr-warning i {
    margin-top: 2px;

    color: #ffb020;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 720px) {

    .dgr-special-reward {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   ABOUT ELEON - QUEST SYSTEM
   ========================================================= */

.eleon-feature-main {
  min-width: 0;
}

.eleon-number-card-icon {
  display: grid;
  place-items: center;

  width: 34px;
  height: 34px;

  margin-bottom: 10px;

  border-radius: 9px;

  color: var(--eleon-accent, #72a6ff);
  background: rgba(91, 140, 255, .10);
}

.eleon-quest-types {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 16px;

  margin-top: 22px;
}

.eleon-quest-type {
  display: flex;
  align-items: flex-start;

  gap: 13px;

  padding: 18px;

  border: 1px solid var(--border-color, rgba(255,255,255,.10));
  border-radius: 14px;

  background: var(--card-bg, rgba(255,255,255,.025));
}

.eleon-quest-type-icon {
  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;
  flex: 0 0 38px;

  border-radius: 10px;

  color: var(--eleon-accent, #72a6ff);
  background: rgba(91, 140, 255, .10);
}

.eleon-quest-type-label {
  display: block;

  margin-bottom: 4px;

  color: var(--eleon-accent, #72a6ff);

  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.eleon-quest-type h3,
.eleon-quest-extra h3 {
  margin: 0 0 7px !important;

  color: inherit;

  font-size: 16px !important;
  font-weight: 750 !important;
}

.eleon-quest-type p,
.eleon-quest-extra p {
  margin: 0 !important;

  opacity: .76;

  font-size: 12px;
  line-height: 1.65;
}

.eleon-quest-extra {
  display: flex;
  align-items: flex-start;

  gap: 14px;

  margin-top: 14px;
  padding: 17px 18px;

  border: 1px solid var(--border-color, rgba(255,255,255,.10));
  border-radius: 14px;

  background: var(--card-bg, rgba(255,255,255,.025));
}

.eleon-quest-extra-icon {
  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;
  flex: 0 0 38px;

  border-radius: 10px;

  color: #4ade80;
  background: rgba(34,197,94,.10);
}

@media (max-width: 900px) {
  .eleon-quest-types {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   ABOUT ELEON - QUEST HERO
   ========================================================= */

.eleon-quest-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(480px, .85fr);
  gap: 28px;
  align-items: stretch;
}

.eleon-quest-intro {
  min-width: 0;
}

.eleon-quest-intro h2 {
  margin-top: 0 !important;
}

.eleon-quest-intro p {
  max-width: 760px;
}


/* RIGHT SIDE 2x2 */

.eleon-quest-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));

  gap: 14px;

  align-self: stretch;
}


/* SAME CARD SIZE */

.eleon-quest-stats .eleon-number-card {
  width: 100%;
  height: 100%;
  min-height: 205px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  padding: 20px;

  border: 1px solid rgba(91, 140, 255, .28);
  border-radius: 14px;

  background: rgba(91, 140, 255, .12);
}


/* ICON */

.eleon-quest-stats .eleon-number-card-icon {
  display: grid;
  place-items: center;

  width: 35px;
  height: 35px;
  flex: 0 0 35px;

  margin-bottom: 11px;

  border-radius: 9px;

  color: #8fb2ff;
  background: rgba(91, 140, 255, .14);
}


/* BIG NUMBER / TITLE */

.eleon-quest-stats .eleon-number-card strong {
  display: block;

  margin: 0 0 6px;

  color: #5f83ff;

  font-size: 40px;
  line-height: 1;
  font-weight: 750;
  letter-spacing: -.03em;
}


/* DESCRIPTION */

.eleon-quest-stats .eleon-number-card > span:last-child {
  display: block;

  margin-top: auto;

  color: inherit;

  font-size: 12px;
  line-height: 1.45;

  opacity: .9;
}


/* LIGHT THEME */

:root[data-theme="light"] .eleon-quest-stats .eleon-number-card {
  border-color: rgba(53, 111, 214, .22);
  background: rgba(53, 111, 214, .07);
}

:root[data-theme="light"] .eleon-quest-stats .eleon-number-card-icon {
  color: #356fd6;
  background: rgba(53, 111, 214, .10);
}

:root[data-theme="light"] .eleon-quest-stats .eleon-number-card strong {
  color: #356fd6;
}


/* RESPONSIVE */

@media (max-width: 1050px) {

  .eleon-quest-hero {
    grid-template-columns: 1fr;
  }

  .eleon-quest-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 620px) {

  .eleon-quest-stats {
    grid-template-columns: 1fr;
  }

  .eleon-quest-stats .eleon-number-card {
    min-height: 170px;
  }

}

/* =========================================================
   MUELEON - ITEM RANK & GEAR SCORE SYSTEM
   HELIOS DARK + LIGHT
   ========================================================= */

:root,
:root[data-theme="light"] {
  --ir-bg: #ffffff;
  --ir-bg-soft: #f7f8fb;
  --ir-card: #ffffff;

  --ir-border: #e3e7ef;
  --ir-border-hover: #ccd3de;

  --ir-text: #15171c;
  --ir-muted: #687180;
  --ir-subtle: #9299a6;

  --ir-common: #7c8796;
  --ir-common-soft: rgba(124,135,150,.10);

  --ir-rare: #356fd6;
  --ir-rare-soft: rgba(53,111,214,.10);

  --ir-epic: #8b5cf6;
  --ir-epic-soft: rgba(139,92,246,.10);

  --ir-legendary: #d97706;
  --ir-legendary-soft: rgba(217,119,6,.10);

  --ir-mythic: #dc3545;
  --ir-mythic-soft: rgba(220,53,69,.10);

  --ir-green: #168447;
  --ir-green-soft: rgba(22,132,71,.10);

  --ir-gold: #b77900;
  --ir-gold-soft: rgba(183,121,0,.10);

  --ir-shadow: 0 10px 28px rgba(15,23,42,.055);
}


:root[data-theme="dark"] {
  --ir-bg: #15171c;
  --ir-bg-soft: #1b1e25;
  --ir-card: #181b21;

  --ir-border: #2b3039;
  --ir-border-hover: #414854;

  --ir-text: #f4f5f7;
  --ir-muted: #adb4c0;
  --ir-subtle: #858d9b;

  --ir-common: #c8c8c8;
  --ir-common-soft: rgba(200,200,200,.08);

  --ir-rare: #50a0ff;
  --ir-rare-soft: rgba(80,160,255,.10);

  --ir-epic: #c878ff;
  --ir-epic-soft: rgba(200,120,255,.10);

  --ir-legendary: #ffaa3c;
  --ir-legendary-soft: rgba(255,170,60,.10);

  --ir-mythic: #ff5050;
  --ir-mythic-soft: rgba(255,80,80,.10);

  --ir-green: #4ade80;
  --ir-green-soft: rgba(34,197,94,.10);

  --ir-gold: #fbbf24;
  --ir-gold-soft: rgba(245,158,11,.10);

  --ir-shadow: 0 14px 34px rgba(0,0,0,.20);
}


/* =========================================================
   PAGE
   ========================================================= */

.itemrank-page {
  width: 100%;
  color: var(--ir-text);
}

.itemrank-page *,
.itemrank-page *::before,
.itemrank-page *::after {
  box-sizing: border-box;
}

.itemrank-section {
  margin: 0 0 40px;
}


/* =========================================================
   HERO
   ========================================================= */

.itemrank-hero {
  position: relative;
  overflow: hidden;

  padding: 30px;

  border: 1px solid var(--ir-border);
  border-radius: 20px;

  background:
    radial-gradient(circle at 88% 5%, var(--ir-epic-soft), transparent 34%),
    radial-gradient(circle at 0 100%, var(--ir-rare-soft), transparent 38%),
    var(--ir-bg);

  box-shadow: var(--ir-shadow);
}

.itemrank-hero-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) 420px;
  gap: 30px;
  align-items: center;
}

.itemrank-hero-content {
  min-width: 0;
}

.itemrank-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  margin-bottom: 9px;

  color: var(--ir-epic);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.itemrank-hero h1 {
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;

  color: var(--ir-text) !important;

  font-size: 38px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
}

.itemrank-hero p {
  max-width: 820px;

  margin: 0 !important;

  color: var(--ir-muted) !important;

  font-size: 14px;
  line-height: 1.75;
}

.itemrank-hero-media {
  overflow: hidden;

  min-height: 270px;

  border: 1px solid var(--ir-border);
  border-radius: 18px;

  background: var(--ir-bg-soft);
}

.itemrank-hero-media img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;
  min-height: 270px;

  margin: 0 !important;

  object-fit: cover;
  object-position: center;

  border: 0 !important;
}


/* =========================================================
   OVERVIEW
   ========================================================= */

.itemrank-overview {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));

  gap: 12px;

  margin-top: 24px;
}

.itemrank-stat {
  padding: 14px;

  border: 1px solid var(--ir-border);
  border-radius: 12px;

  background: var(--ir-card);
}

.itemrank-stat-label {
  display: block;

  margin-bottom: 5px;

  color: var(--ir-subtle);

  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.itemrank-stat-value {
  color: var(--ir-text);

  font-size: 14px;
  font-weight: 750;
}


/* =========================================================
   SECTION HEADER
   ========================================================= */

.itemrank-head {
  display: flex;
  align-items: center;

  gap: 13px;

  margin-bottom: 18px;
  padding-bottom: 14px;

  border-bottom: 1px solid var(--ir-border);
}

.itemrank-head-icon {
  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;
  flex: 0 0 42px;

  border-radius: 11px;

  color: var(--ir-epic);
  background: var(--ir-epic-soft);
}

.itemrank-head h2 {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;

  color: var(--ir-text) !important;

  font-size: 25px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}


/* =========================================================
   GRIDS
   ========================================================= */

.itemrank-grid-2 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 16px;
}

.itemrank-grid-3 {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 16px;
}

.itemrank-grid-5 {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 12px;
}


/* =========================================================
   CARD
   ========================================================= */

.itemrank-card {
  padding: 19px;

  border: 1px solid var(--ir-border);
  border-radius: 15px;

  background: var(--ir-card);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.itemrank-card:hover {
  transform: translateY(-2px);
  border-color: var(--ir-border-hover);
  box-shadow: var(--ir-shadow);
}

.itemrank-card h3 {
  margin: 0 0 10px !important;
  padding: 0 !important;

  color: var(--ir-text) !important;

  font-size: 17px !important;
  font-weight: 750 !important;
}

.itemrank-card p {
  margin: 0 !important;

  color: var(--ir-muted) !important;

  font-size: 13px;
  line-height: 1.7;
}


/* =========================================================
   RANK CARDS
   ========================================================= */

.itemrank-rank {
  position: relative;
  overflow: hidden;

  padding: 18px;

  border: 1px solid var(--ir-border);
  border-radius: 14px;

  background: var(--ir-card);
}

.itemrank-rank::after {
  content: "";

  position: absolute;
  right: -35px;
  top: -35px;

  width: 90px;
  height: 90px;

  border-radius: 50%;
}

.itemrank-rank.common::after {
  background: var(--ir-common-soft);
}

.itemrank-rank.rare::after {
  background: var(--ir-rare-soft);
}

.itemrank-rank.epic::after {
  background: var(--ir-epic-soft);
}

.itemrank-rank.legendary::after {
  background: var(--ir-legendary-soft);
}

.itemrank-rank.mythic::after {
  background: var(--ir-mythic-soft);
}

.itemrank-rank-icon {
  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;

  margin-bottom: 12px;

  border-radius: 10px;
}

.itemrank-rank.common .itemrank-rank-icon {
  color: var(--ir-common);
  background: var(--ir-common-soft);
}

.itemrank-rank.rare .itemrank-rank-icon {
  color: var(--ir-rare);
  background: var(--ir-rare-soft);
}

.itemrank-rank.epic .itemrank-rank-icon {
  color: var(--ir-epic);
  background: var(--ir-epic-soft);
}

.itemrank-rank.legendary .itemrank-rank-icon {
  color: var(--ir-legendary);
  background: var(--ir-legendary-soft);
}

.itemrank-rank.mythic .itemrank-rank-icon {
  color: var(--ir-mythic);
  background: var(--ir-mythic-soft);
}

.itemrank-rank-name {
  display: block;

  margin-bottom: 4px;

  font-size: 16px;
  font-weight: 800;
}

.itemrank-rank.common .itemrank-rank-name {
  color: var(--ir-common);
}

.itemrank-rank.rare .itemrank-rank-name {
  color: var(--ir-rare);
}

.itemrank-rank.epic .itemrank-rank-name {
  color: var(--ir-epic);
}

.itemrank-rank.legendary .itemrank-rank-name {
  color: var(--ir-legendary);
}

.itemrank-rank.mythic .itemrank-rank-name {
  color: var(--ir-mythic);
}

.itemrank-rank span:last-child {
  color: var(--ir-muted);

  font-size: 11px;
  line-height: 1.5;
}


/* =========================================================
   ITEM OPTIONS
   ========================================================= */

.itemrank-option {
  display: flex;
  align-items: center;

  gap: 13px;

  padding: 15px;

  border: 1px solid var(--ir-border);
  border-radius: 12px;

  background: var(--ir-card);
}

.itemrank-option-icon {
  display: grid;
  place-items: center;

  width: 40px;
  height: 40px;
  flex: 0 0 40px;

  border-radius: 10px;

  color: var(--ir-rare);
  background: var(--ir-rare-soft);
}

.itemrank-option-info {
  min-width: 0;
  flex: 1;
}

.itemrank-option-name {
  display: block;

  margin-bottom: 3px;

  color: var(--ir-text);

  font-size: 12px;
  font-weight: 750;
}

.itemrank-option-desc {
  color: var(--ir-muted);

  font-size: 10.5px;
}


/* =========================================================
   FLOW
   ========================================================= */

.itemrank-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap: 8px;

  padding: 18px;

  border: 1px solid var(--ir-border);
  border-radius: 14px;

  background: var(--ir-bg-soft);
}

.itemrank-flow-part {
  display: inline-flex;
  align-items: center;

  padding: 7px 10px;

  border: 1px solid var(--ir-border);
  border-radius: 8px;

  background: var(--ir-card);

  color: var(--ir-text);

  font-size: 11px;
  font-weight: 700;
}

.itemrank-flow-op {
  color: var(--ir-subtle);

  font-weight: 800;
}


/* =========================================================
   TABLE
   ========================================================= */

.itemrank-table {
  overflow: hidden;

  border: 1px solid var(--ir-border);
  border-radius: 13px;
}

.itemrank-table-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 180px;

  border-top: 1px solid var(--ir-border);
}

.itemrank-table-row:first-child {
  border-top: 0;
}

.itemrank-table-row > div {
  padding: 11px 13px;

  color: var(--ir-muted);

  font-size: 12px;
}

.itemrank-table-row > div + div {
  border-left: 1px solid var(--ir-border);

  color: var(--ir-text);

  font-weight: 750;
}

.itemrank-table-head {
  background: var(--ir-bg-soft);
}

.itemrank-table-head > div {
  color: var(--ir-text);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}


/* =========================================================
   MASTERY
   ========================================================= */

.itemrank-mastery {
  position: relative;

  padding: 20px;

  border: 1px solid var(--ir-border);
  border-radius: 15px;

  background: var(--ir-card);
}

.itemrank-mastery-icon {
  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;

  margin-bottom: 12px;

  border-radius: 11px;
}

.itemrank-mastery.epic .itemrank-mastery-icon {
  color: var(--ir-epic);
  background: var(--ir-epic-soft);
}

.itemrank-mastery.legendary .itemrank-mastery-icon {
  color: var(--ir-legendary);
  background: var(--ir-legendary-soft);
}

.itemrank-mastery h3 {
  margin: 0 0 7px !important;

  color: var(--ir-text) !important;

  font-size: 18px !important;
  font-weight: 800 !important;
}

.itemrank-mastery-value {
  display: inline-flex;

  margin-bottom: 11px;
  padding: 6px 9px;

  border-radius: 8px;

  font-size: 11px;
  font-weight: 800;
}

.itemrank-mastery.epic .itemrank-mastery-value {
  color: var(--ir-epic);
  background: var(--ir-epic-soft);
}

.itemrank-mastery.legendary .itemrank-mastery-value {
  color: var(--ir-legendary);
  background: var(--ir-legendary-soft);
}

.itemrank-mastery p {
  margin: 0 !important;

  color: var(--ir-muted) !important;

  font-size: 12px;
  line-height: 1.65;
}


/* =========================================================
   NOTE
   ========================================================= */

.itemrank-note {
  display: flex;
  align-items: flex-start;

  gap: 10px;

  margin-top: 14px;
  padding: 12px 14px;

  border: 1px solid var(--ir-border);
  border-radius: 11px;

  background: var(--ir-bg-soft);

  color: var(--ir-muted);

  font-size: 12px;
  line-height: 1.65;
}

.itemrank-note i {
  margin-top: 2px;

  color: var(--ir-gold);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1150px) {

  .itemrank-grid-5 {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }

  .itemrank-overview {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

}

@media (max-width: 950px) {

  .itemrank-hero-grid,
  .itemrank-grid-2,
  .itemrank-grid-3 {
    grid-template-columns: 1fr;
  }

  .itemrank-grid-5 {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

}

@media (max-width: 650px) {

  .itemrank-hero {
    padding: 22px;
  }

  .itemrank-hero h1 {
    font-size: 30px !important;
  }

  .itemrank-overview,
  .itemrank-grid-5 {
    grid-template-columns: 1fr;
  }

  .itemrank-table-row {
    grid-template-columns: 1fr;
  }

  .itemrank-table-row > div + div {
    border-left: 0;
    border-top: 1px solid var(--ir-border);
  }

}

/* =========================================================
   ITEM RANK FEATURE IMAGE
   ========================================================= */

.itemrank-feature-wrap {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
}


/* IMAGE ON PAGE */

.itemrank-feature-image {
  position: relative;

  display: block;

  width: 250px;
  max-width: 100%;

  padding: 0;
  margin: 0;

  overflow: hidden;

  cursor: zoom-in;

  border: 1px solid var(--ir-border);
  border-radius: 16px;

  background: var(--ir-card);

  box-shadow: var(--ir-shadow);

  appearance: none;
  -webkit-appearance: none;
}

.itemrank-feature-image img {
  display: block !important;

  width: 300px !important;
  max-width: 100% !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  object-fit: contain;

  transition: transform .25s ease;
}

.itemrank-feature-image:hover img {
  transform: scale(1.025);
}


/* VIEW FULL IMAGE */

.itemrank-image-zoom {
  position: absolute;

  left: 50%;
  bottom: 12px;

  transform: translateX(-50%);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  padding: 8px 11px;

  border: 1px solid rgba(255,255,255,.15);
  border-radius: 9px;

  background: rgba(10,12,17,.88);

  color: #fff;

  font-size: 10px;
  line-height: 1;
  font-weight: 750;

  white-space: nowrap;

  pointer-events: none;

  box-shadow: 0 5px 18px rgba(0,0,0,.30);
}


/* =========================================================
   ITEM RANK LIGHTBOX
   ========================================================= */

.itemrank-lightbox {
  position: fixed;
  inset: 0;

  z-index: 999999;

  display: none;
  align-items: center;
  justify-content: center;

  width: 100vw;
  height: 100vh;

  padding: 24px;

  background: rgba(4,6,9,.94);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}


/* OPEN */

.itemrank-lightbox.is-open {
  display: flex !important;
}


/* DIALOG */

.itemrank-lightbox-dialog {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;
}


/* FULL SIZE IMAGE */

.itemrank-lightbox-media {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;
}

.itemrank-lightbox-media img {
  display: block !important;

  width: auto !important;
  height: auto !important;

  max-width: 94vw !important;
  max-height: 90vh !important;

  margin: 0 !important;

  object-fit: contain;

  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 12px !important;

  background: #0b0d11;

  box-shadow:
    0 25px 80px rgba(0,0,0,.65);
}


/* CLOSE BUTTON */

.itemrank-lightbox-close {
  position: fixed;

  top: 20px;
  right: 22px;

  z-index: 10;

  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;

  padding: 0;

  cursor: pointer;

  border: 1px solid rgba(255,255,255,.16);
  border-radius: 11px;

  background: rgba(20,23,29,.95);

  color: #fff;

  font-size: 18px;

  transition:
    transform .18s ease,
    background .18s ease;
}

.itemrank-lightbox-close:hover {
  transform: scale(1.06);

  background: rgba(42,47,57,.98);
}


/* PREVENT PAGE SCROLL */

body.itemrank-lightbox-open {
  overflow: hidden !important;
}


/* MOBILE */

@media (max-width: 700px) {

  .itemrank-feature-image,
  .itemrank-feature-image img {
    width: 280px !important;
  }

  .itemrank-lightbox {
    padding: 10px;
  }

  .itemrank-lightbox-close {
    top: 10px;
    right: 10px;
  }

}

/* =========================================================
   MUELEON - GLOBAL ICON / CHECKMARK ALIGNMENT FIXES
   ========================================================= */

/* Dungeon check icons */
.dungeon-drop-list span::before {
  content: "\2713" !important;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--dungeon-green);
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

/* Endless Tower checklist */
.et-checks li {
  position: relative;
  min-height: 24px;
}

.et-checks li::before {
  content: "\2713" !important;
  position: absolute;
  left: 0;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--et-green);
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  transform: translateY(-50%);
}

/* Battle Royale rule checklist */
.br-rule-list li {
  position: relative;
  min-height: 24px;
}

.br-rule-list li::before {
  content: "\2713" !important;
  position: absolute;
  left: 0;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--br-green);
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  transform: translateY(-50%);
}

/* Battle Royale winner reward rows */
.br-reward-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 62px;
}

.br-reward-info {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  flex: 1;
}

.br-reward-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  flex: 0 0 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  line-height: 1 !important;
}

.br-reward-icon i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.br-reward-info > div {
  min-width: 0;
}

.br-reward-info > div > span {
  display: block;
  margin-top: 3px;
  opacity: .72;
  font-size: 10px;
  line-height: 1.35;
}

.br-reward-rate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 48px;
  min-height: 28px;
  line-height: 1;
}


/* =========================================================
   QUEST SYSTEM
   HELIOS DARK / LIGHT
   ========================================================= */

.qs-page {
  --qs-border: var(--hd-border);
  --qs-surface: var(--hd-surface);
  --qs-surface-soft:
    color-mix(
      in srgb,
      var(--hd-surface) 94%,
      var(--hd-text) 6%
    );

  --qs-text: var(--hd-text);
  --qs-muted: var(--hd-subtle);

  --qs-blue: #6697ff;
  --qs-green: #48d781;
  --qs-orange: #ffad4d;
  --qs-purple: #a985ff;
  --qs-red: #ff6978;
  --qs-gold: #ffc94d;

  display: flex;
  flex-direction: column;

  gap: 42px;

  width: 100%;
}

/* Episode quest catalog */
.quest-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
  padding: 26px;
  border: 1px solid var(--qs-border);
  border-radius: 16px;
  background: radial-gradient(circle at 90% 10%, rgba(102,151,255,.13), transparent 35%), var(--qs-surface);
}

.quest-header .eyebrow {
  color: var(--qs-blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
}

.quest-header h1 { margin: 7px 0; color: var(--qs-text); font-size: clamp(28px, 4vw, 42px); }
.quest-header p { margin: 0; color: var(--qs-muted); font-size: 14px; }

.quest-total {
  display: grid;
  min-width: 100px;
  padding: 14px;
  border: 1px solid var(--qs-border);
  border-radius: 12px;
  background: var(--qs-surface-soft);
  text-align: center;
}

.quest-total strong { color: var(--qs-gold); font-size: 24px; }
.quest-total span { color: var(--qs-muted); font-size: 11px; text-transform: uppercase; }

.qs-catalog-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  padding: 13px 15px;
  border: 1px solid rgba(255, 201, 77, .2);
  border-radius: 11px;
  background: rgba(255, 201, 77, .06);
  color: var(--qs-muted);
}

.qs-catalog-note i { margin-top: 4px; color: var(--qs-gold); }
.qs-catalog-note p { margin: 0; font-size: 13px; line-height: 1.6; }

.qs-catalog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.qs-catalog-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(100%, 460px);
  padding: 0 14px;
  border: 1px solid var(--qs-border);
  border-radius: 10px;
  background: var(--qs-surface);
  color: var(--qs-muted);
}

.qs-catalog-search input {
  width: 100%;
  padding: 12px 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--qs-text);
  font: inherit;
}

.qs-catalog-count { color: var(--qs-muted); font-size: 12px; white-space: nowrap; }
.qs-catalog-count strong { color: var(--qs-gold); }

.qs-catalog-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--qs-border);
  border-radius: 14px;
  background: var(--qs-surface);
}

.qs-catalog-table {
  width: 100%;
  min-width: 1080px;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-collapse: collapse;
  color: var(--qs-text);
  font-size: 12px;
}

.helios-article-body .qs-catalog-table {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.qs-catalog-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 13px 12px;
  border-right: 0 !important;
  border-bottom: 1px solid var(--qs-border);
  outline: 0 !important;
  box-shadow: none !important;
  background: var(--qs-surface-soft);
  color: var(--qs-muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .045em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.qs-catalog-table th::before,
.qs-catalog-table th::after {
  display: none !important;
  content: none !important;
}

.qs-catalog-table td {
  padding: 12px;
  border-bottom: 0;
  background: var(--hd-surface);
  color: var(--qs-muted);
  line-height: 1.55;
  text-align: center;
  vertical-align: middle;
}

.qs-catalog-table tbody tr:last-child td { border-bottom: 0; }
.qs-catalog-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--hd-surface) 98%, var(--hd-text) 2%);
}
.qs-catalog-table tbody tr:hover td {
  background: color-mix(in srgb, var(--hd-surface) 94%, var(--qs-blue) 6%);
}
.qs-catalog-table td:first-child strong { color: var(--qs-muted); }
.qs-catalog-table td:nth-child(2) {
  color: var(--qs-text);
  font-weight: 400;
}
.qs-catalog-table td:nth-child(7) { color: var(--qs-text); font-weight: 400; }
.qs-catalog-table .qs-reward-value {
  color: var(--qs-gold) !important;
  font-weight: 850 !important;
}

.helios-article-body .qs-catalog-table .qs-reward-value {
  color: #8fa9cc !important;
  font-weight: 400 !important;
}

.helios-article-body .qs-catalog-table td[data-label="Zen"] > strong,
.helios-article-body .qs-catalog-table td[data-label="Level Up Points"] > strong,
.helios-article-body .qs-catalog-table td[data-label="Item Reward"] > strong {
  color: #8fa9cc !important;
  font-weight: 400 !important;
}

.helios-article-body .qs-catalog-table td.qs-has-reward,
.helios-article-body .qs-catalog-table td.qs-has-reward strong {
  color: #8fa9cc !important;
  font-weight: 400 !important;
}
.qs-catalog-table td:nth-child(3),
.qs-catalog-table td:nth-child(5),
.qs-catalog-table td:nth-child(6) { text-align: center; }

.qs-personal-badge {
  display: inline-flex;
  padding: 4px 8px;
  border: 1px solid rgba(169, 133, 255, .22);
  border-radius: 999px;
  background: rgba(169, 133, 255, .09);
  color: var(--qs-purple);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.qs-catalog-empty {
  margin: 12px 0 0;
  padding: 18px;
  border: 1px dashed var(--qs-border);
  border-radius: 11px;
  color: var(--qs-muted);
  text-align: center;
}

@media (max-width: 700px) {
  .qs-catalog-toolbar { align-items: stretch; flex-direction: column; }
  .qs-catalog-count { align-self: flex-end; }
  .qs-catalog-table-wrap { overflow: visible; border: 0; background: transparent; }
  .qs-catalog-table { min-width: 0; }
  .qs-catalog-table thead { display: none; }
  .qs-catalog-table,
  .qs-catalog-table tbody,
  .qs-catalog-table tr,
  .qs-catalog-table td { display: block; width: 100%; }
  .qs-catalog-table tr {
    margin-bottom: 12px;
    overflow: hidden;
    border: 1px solid var(--qs-border);
    border-radius: 12px;
    background: var(--qs-surface);
  }
  .qs-catalog-table td {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 12px;
    padding: 9px 12px;
    text-align: left !important;
  }
  .qs-catalog-table td::before {
    content: attr(data-label);
    color: var(--qs-muted);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
}


/* =========================================================
   HERO
   ========================================================= */

.qs-hero {
  position: relative;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    290px;

  gap: 34px;

  align-items: center;

  padding: 28px;

  border:
    1px solid
    var(--qs-border);

  border-radius: 18px;

  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(102,151,255,.11),
      transparent 36%
    ),
    var(--qs-surface);

  overflow: hidden;
}


.qs-hero-content {
  min-width: 0;
}


.qs-kicker,
.qs-section-kicker {
  display: inline-flex;
  align-items: center;

  gap: 7px;

  color:
    var(--qs-blue);

  font-size: 11px;
  font-weight: 850;
  line-height: 1;

  letter-spacing: .08em;

  text-transform: uppercase;
}


.qs-kicker i {
  font-size: 10px;
}


.qs-hero h1 {
  margin:
    10px
    0
    10px;

  color:
    var(--qs-text);

  font-size: clamp(
    30px,
    4vw,
    43px
  );

  font-weight: 850;
  line-height: 1.05;
}


.qs-hero p {
  max-width: 880px;

  margin:
    0
    0
    9px;

  color:
    var(--qs-muted);

  font-size: 14px;
  line-height: 1.72;
}


.qs-hero p strong {
  color:
    var(--qs-text);
}


/* =========================================================
   HERO IMAGE
   ========================================================= */

.qs-hero-image {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 290px;

  padding: 14px;

  border:
    1px solid
    var(--qs-border);

  border-radius: 16px;

  background:
    var(--qs-surface-soft);
}


.qs-hero-image img {
  display: block;

  width: 100%;
  max-width: 250px;
  max-height: 320px;

  border-radius: 10px;

  object-fit: cover;

  cursor: zoom-in;
}


/* =========================================================
   HERO STATS
   ========================================================= */

.qs-hero-stats {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0,1fr));

  gap: 10px;

  margin-top: 22px;
}


.qs-stat {
  padding: 12px 13px;

  border:
    1px solid
    var(--qs-border);

  border-radius: 11px;

  background:
    var(--qs-surface-soft);
}


.qs-stat span {
  display: block;

  margin-bottom: 5px;

  color:
    var(--qs-muted);

  font-size: 10px;
  font-weight: 800;

  letter-spacing: .06em;
}


.qs-stat strong {
  display: block;

  color:
    var(--qs-text);

  font-size: 13px;
  font-weight: 750;
}


/* =========================================================
   SECTION
   ========================================================= */

.qs-section {
  width: 100%;
}


.qs-section-head {
  display: flex;
  align-items: center;

  gap: 13px;

  margin-bottom: 18px;

  padding-bottom: 14px;

  border-bottom:
    1px solid
    var(--qs-border);
}


.qs-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;

  flex: 0 0 40px;

  border-radius: 11px;

  background:
    rgba(102,151,255,.10);

  color:
    var(--qs-blue);
}


.qs-section-icon.blue {
  color:
    var(--qs-blue);
}


.qs-section-icon.orange {
  color:
    var(--qs-orange);

  background:
    rgba(255,173,77,.09);
}


.qs-section-icon.purple {
  color:
    var(--qs-purple);

  background:
    rgba(169,133,255,.09);
}


.qs-section-icon.red {
  color:
    var(--qs-red);

  background:
    rgba(255,105,120,.09);
}


.qs-section-icon.green {
  color:
    var(--qs-green);

  background:
    rgba(72,215,129,.09);
}


.qs-section-icon.gold {
  color:
    var(--qs-gold);

  background:
    rgba(255,201,77,.09);
}


.qs-section-head h2 {
  margin:
    5px
    0
    0;

  color:
    var(--qs-text);

  font-size: 24px;
  font-weight: 820;
  line-height: 1.1;
}


/* =========================================================
   INTRO
   ========================================================= */

.qs-intro-card {
  margin-bottom: 18px;

  padding: 15px 17px;

  border:
    1px solid
    var(--qs-border);

  border-radius: 12px;

  background:
    var(--qs-surface);
}


.qs-intro-card p {
  margin: 0;

  color:
    var(--qs-muted);

  font-size: 14px;
  line-height: 1.7;
}


/* =========================================================
   FLOW
   ========================================================= */

.qs-flow {
  display: flex;
  align-items: stretch;

  gap: 8px;
}


.qs-flow-step {
  position: relative;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  min-width: 0;

  flex: 1;

  padding:
    18px
    12px;

  border:
    1px solid
    var(--qs-border);

  border-radius: 12px;

  background:
    var(--qs-surface);

  text-align: center;
}


.qs-flow-number {
  position: absolute;

  top: 8px;
  left: 9px;

  color:
    var(--qs-muted);

  font-size: 9px;
  font-weight: 800;
}


.qs-flow-step > i {
  margin-bottom: 9px;

  color:
    var(--qs-blue);

  font-size: 18px;
}


.qs-flow-step strong {
  margin-bottom: 5px;

  color:
    var(--qs-text);

  font-size: 12px;
  font-weight: 750;
}


.qs-flow-step small {
  color:
    var(--qs-muted);

  font-size: 11px;
  line-height: 1.5;
}


.qs-flow-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  color:
    var(--qs-muted);

  font-size: 10px;
}


/* =========================================================
   FEATURE IMAGE / TEXT
   ========================================================= */

.qs-feature {
  display: grid;
  grid-template-columns:
    minmax(260px, .75fr)
    minmax(0, 1.25fr);

  gap: 22px;

  padding: 18px;

  border:
    1px solid
    var(--qs-border);

  border-radius: 15px;

  background:
    var(--qs-surface);
}


.qs-feature-reverse {
  grid-template-columns:
    minmax(0, 1.25fr)
    minmax(260px, .75fr);
}


.qs-feature-image {
  overflow: hidden;

  min-height: 250px;

  border:
    1px solid
    var(--qs-border);

  border-radius: 12px;

  background:
    var(--qs-surface-soft);
}


.qs-feature-image img {
  display: block;

  width: 100%;
  height: 100%;

  min-height: 250px;

  object-fit: cover;

  cursor: zoom-in;
}


.qs-feature-content {
  align-self: center;
}


.qs-feature-content h3 {
  margin:
    0
    0
    10px;

  color:
    var(--qs-text);

  font-size: 20px;
  font-weight: 800;
}


.qs-feature-content p {
  margin:
    0
    0
    10px;

  color:
    var(--qs-muted);

  font-size: 14px;
  line-height: 1.7;
}


/* =========================================================
   NOTE
   ========================================================= */

.qs-note {
  display: flex;
  align-items: flex-start;

  gap: 10px;

  margin-top: 16px;

  padding: 12px 13px;

  border:
    1px solid
    rgba(102,151,255,.20);

  border-radius: 10px;

  background:
    rgba(102,151,255,.06);
}


.qs-note-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;

  flex: 0 0 28px;

  border-radius: 8px;

  color:
    var(--qs-blue);

  background:
    rgba(102,151,255,.10);
}


.qs-note strong {
  display: block;

  margin-bottom: 3px;

  color:
    var(--qs-text);

  font-size: 12px;
}


.qs-note p {
  margin: 0;

  color:
    var(--qs-muted);

  font-size: 12px;
  line-height: 1.55;
}


/* =========================================================
   OBJECTIVES
   ========================================================= */

.qs-grid-3 {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0,1fr));

  gap: 12px;
}


.qs-objective-card {
  padding: 16px;

  border:
    1px solid
    var(--qs-border);

  border-radius: 12px;

  background:
    var(--qs-surface);

  transition:
    border-color .18s ease,
    transform .18s ease,
    background-color .18s ease;
}


.qs-objective-card:hover {
  border-color:
    rgba(102,151,255,.30);

  background:
    var(--qs-surface-soft);

  transform:
    translateY(-2px);
}


.qs-objective-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  margin-bottom: 12px;

  border-radius: 9px;

  background:
    rgba(102,151,255,.09);

  color:
    var(--qs-blue);
}


.qs-objective-card h4 {
  margin:
    0
    0
    7px;

  color:
    var(--qs-text);

  font-size: 14px;
  font-weight: 760;
}


.qs-objective-card p {
  margin: 0;

  color:
    var(--qs-muted);

  font-size: 12px;
  line-height: 1.55;
}


/* =========================================================
   CHECK LIST
   ========================================================= */

.qs-check-list {
  display: flex;
  flex-direction: column;

  gap: 11px;

  margin:
    16px
    0
    0;

  padding: 0;

  list-style: none;
}


.qs-check-list li {
  display: flex;
  align-items: flex-start;

  gap: 9px;

  color:
    var(--qs-muted);

  font-size: 12px;
  line-height: 1.55;
}


.qs-check-list i {
  margin-top: 4px;

  color:
    var(--qs-green);

  font-size: 9px;
}


/* =========================================================
   REQUIREMENTS
   ========================================================= */

.qs-requirements {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0,1fr));

  gap: 11px;
}


.qs-requirement {
  display: flex;
  align-items: center;

  gap: 11px;

  padding: 13px;

  border:
    1px solid
    var(--qs-border);

  border-radius: 11px;

  background:
    var(--qs-surface);
}


.qs-requirement > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 31px;
  height: 31px;

  flex: 0 0 31px;

  border-radius: 8px;

  color:
    var(--qs-red);

  background:
    rgba(255,105,120,.08);
}


.qs-requirement span {
  display: block;

  margin-bottom: 3px;

  color:
    var(--qs-muted);

  font-size: 10px;
  font-weight: 750;

  text-transform: uppercase;
}


.qs-requirement strong {
  color:
    var(--qs-text);

  font-size: 12px;
  font-weight: 700;
}


/* =========================================================
   WARNING
   ========================================================= */

.qs-warning {
  display: flex;
  align-items: center;

  gap: 10px;

  margin-top: 13px;

  padding: 12px 14px;

  border:
    1px solid
    rgba(255,173,77,.20);

  border-radius: 10px;

  background:
    rgba(255,173,77,.06);
}


.qs-warning i {
  color:
    var(--qs-orange);
}


.qs-warning p {
  margin: 0;

  color:
    var(--qs-muted);

  font-size: 12px;
  line-height: 1.55;
}


/* =========================================================
   QUEST CHAIN
   ========================================================= */

.qs-chain-card {
  padding: 17px;

  border:
    1px solid
    var(--qs-border);

  border-radius: 13px;

  background:
    var(--qs-surface);
}


.qs-chain-card > p {
  margin:
    0
    0
    15px;

  color:
    var(--qs-muted);

  font-size: 13px;
  line-height: 1.65;
}


.qs-chain {
  display: flex;
  align-items: center;

  gap: 8px;

  flex-wrap: wrap;
}


.qs-chain span {
  display: inline-flex;
  align-items: center;

  min-height: 34px;

  padding:
    7px
    11px;

  border:
    1px solid
    var(--qs-border);

  border-radius: 8px;

  background:
    var(--qs-surface-soft);

  color:
    var(--qs-text);

  font-size: 11px;
  font-weight: 700;
}


.qs-chain > i {
  color:
    var(--qs-muted);

  font-size: 9px;
}


/* =========================================================
   REWARDS
   ========================================================= */

.qs-reward-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0,1fr));

  gap: 11px;
}


.qs-reward {
  display: flex;
  align-items: center;

  gap: 11px;

  padding: 13px;

  border:
    1px solid
    var(--qs-border);

  border-radius: 11px;

  background:
    var(--qs-surface);
}


.qs-reward-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;

  flex: 0 0 36px;

  border-radius: 9px;

  color:
    var(--qs-gold);

  background:
    rgba(255,201,77,.085);
}


.qs-reward strong {
  display: block;

  margin-bottom: 3px;

  color:
    var(--qs-text);

  font-size: 13px;
}


.qs-reward small {
  display: block;

  color:
    var(--qs-muted);

  font-size: 11px;
  line-height: 1.4;
}


/* =========================================================
   CHECKLIST
   ========================================================= */

.qs-checklist {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0,1fr));

  gap: 10px;
}


.qs-checklist > div {
  display: flex;
  align-items: center;

  gap: 9px;

  min-height: 46px;

  padding: 11px 12px;

  border:
    1px solid
    var(--qs-border);

  border-radius: 10px;

  background:
    var(--qs-surface);

  color:
    var(--qs-muted);

  font-size: 12px;
  line-height: 1.5;
}


.qs-checklist i {
  color:
    var(--qs-green);

  font-size: 9px;
}


/* =========================================================
   FINAL
   ========================================================= */

.qs-final {
  display: flex;
  align-items: flex-start;

  gap: 16px;

  padding: 23px;

  border:
    1px solid
    rgba(102,151,255,.20);

  border-radius: 16px;

  background:
    radial-gradient(
      circle at 10% 20%,
      rgba(102,151,255,.10),
      transparent 34%
    ),
    var(--qs-surface);
}


.qs-final-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;

  flex: 0 0 44px;

  border-radius: 12px;

  background:
    rgba(102,151,255,.10);

  color:
    var(--qs-blue);
}


.qs-final h2 {
  margin:
    6px
    0
    8px;

  color:
    var(--qs-text);

  font-size: 22px;
  font-weight: 820;
}


.qs-final p {
  max-width: 900px;

  margin:
    0
    0
    14px;

  color:
    var(--qs-muted);

  font-size: 13px;
  line-height: 1.65;
}


.qs-final-line {
  display: flex;
  align-items: center;

  gap: 8px;

  flex-wrap: wrap;
}


.qs-final-line span {
  display: inline-flex;

  padding:
    7px
    10px;

  border:
    1px solid
    var(--qs-border);

  border-radius: 7px;

  background:
    var(--qs-surface-soft);

  color:
    var(--qs-text);

  font-size: 10px;
  font-weight: 700;
}


.qs-final-line i {
  color:
    var(--qs-muted);

  font-size: 8px;
}


/* =========================================================
   GLOBAL TEXT SAFETY
   ========================================================= */

.qs-page p,
.qs-page li {
  font-size: 12px;
}


.qs-page h4 {
  font-size: 14px;
}


.qs-page small {
  font-size: 11px;
}


/* =========================================================
   LIGHT MODE REFINEMENTS
   ========================================================= */

:root[data-theme="light"] .qs-page {
  --qs-surface-soft:
    color-mix(
      in srgb,
      var(--hd-surface) 94%,
      #6e9cff 6%
    );
}


:root[data-theme="light"] .qs-hero,
:root[data-theme="light"] .qs-final {
  box-shadow:
    0 10px 30px
    rgba(35,45,70,.06);
}


:root[data-theme="light"] .qs-objective-card,
:root[data-theme="light"] .qs-feature,
:root[data-theme="light"] .qs-intro-card,
:root[data-theme="light"] .qs-chain-card,
:root[data-theme="light"] .qs-reward,
:root[data-theme="light"] .qs-requirement,
:root[data-theme="light"] .qs-checklist > div {
  box-shadow:
    0 6px 18px
    rgba(35,45,70,.035);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {

  .qs-hero {
    grid-template-columns:
      minmax(0,1fr)
      230px;
  }


  .qs-hero-stats {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .qs-grid-3,
  .qs-requirements,
  .qs-reward-grid {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


@media (max-width: 760px) {

  .qs-page {
    gap: 30px;
  }


  .qs-hero {
    grid-template-columns:
      1fr;

    padding: 20px;
  }


  .qs-hero-image {
    min-height: 0;
  }


  .qs-hero-image img {
    max-width: 100%;
  }


  .qs-feature,
  .qs-feature-reverse {
    grid-template-columns:
      1fr;
  }


  .qs-flow {
    display: grid;
    grid-template-columns:
      1fr;
  }


  .qs-flow-arrow {
    transform:
      rotate(90deg);

    min-height: 18px;
  }


  .qs-grid-3,
  .qs-requirements,
  .qs-reward-grid,
  .qs-checklist {
    grid-template-columns:
      1fr;
  }


  .qs-objective-card p,
  .qs-check-list li,
  .qs-feature-content p,
  .qs-chain-card > p,
  .qs-final p {
    font-size: 13px;
  }

}


@media (max-width: 480px) {

  .qs-hero {
    padding: 16px;
  }


  .qs-hero-stats {
    grid-template-columns:
      1fr;
  }


  .qs-section-head h2 {
    font-size: 20px;
  }


  .qs-final {
    padding: 17px;
  }

}

/* =========================================================
   MUELEON - BOSSES
   HELIOS DARK / LIGHT
   ========================================================= */

:root,
:root[data-theme="light"] {
  --boss-bg: #ffffff;
  --boss-bg-soft: #f7f8fa;
  --boss-bg-hover: #fafbfc;

  --boss-border: #e2e4e9;
  --boss-border-hover: #cdd4df;

  --boss-text: #18181b;
  --boss-muted: #666d79;
  --boss-subtle: #9299a6;

  --boss-blue: #356fd6;
  --boss-blue-bg: rgba(53,111,214,.075);
  --boss-blue-border: rgba(53,111,214,.20);

  --boss-red: #dc3545;
  --boss-red-bg: rgba(220,53,69,.07);

  --boss-green: #168447;
  --boss-green-bg: rgba(22,132,71,.08);

  --boss-gold: #b77900;
  --boss-gold-bg: rgba(183,121,0,.08);

  --boss-purple: #7c3aed;
  --boss-purple-bg: rgba(124,58,237,.075);

  --boss-shadow: 0 8px 24px rgba(15,23,42,.05);
}


:root[data-theme="dark"] {
  --boss-bg: #1a1a1d;
  --boss-bg-soft: #202126;
  --boss-bg-hover: #1f2024;

  --boss-border: #303137;
  --boss-border-hover: #444752;

  --boss-text: #f4f4f5;
  --boss-muted: #b3b6bf;
  --boss-subtle: #888d98;

  --boss-blue: #72a6ff;
  --boss-blue-bg: rgba(91,140,255,.09);
  --boss-blue-border: rgba(113,165,255,.20);

  --boss-red: #fb7185;
  --boss-red-bg: rgba(244,63,94,.075);

  --boss-green: #4ade80;
  --boss-green-bg: rgba(34,197,94,.075);

  --boss-gold: #fbbf24;
  --boss-gold-bg: rgba(245,158,11,.075);

  --boss-purple: #c084fc;
  --boss-purple-bg: rgba(168,85,247,.075);

  --boss-shadow: 0 12px 30px rgba(0,0,0,.16);
}


/* PAGE */

.bosses-page {
  width: 100%;
  max-width: none;
  color: var(--boss-text);
}

.bosses-page *,
.bosses-page *::before,
.bosses-page *::after {
  box-sizing: border-box;
}


/* HERO */

.bosses-hero {
  position: relative;
  overflow: hidden;

  margin: 0 0 38px;
  padding: 30px;

  border: 1px solid var(--boss-blue-border);
  border-radius: 16px;

  background:
    radial-gradient(
      circle at 85% 0,
      color-mix(in srgb, var(--boss-red) 10%, transparent),
      transparent 38%
    ),
    radial-gradient(
      circle at 0 100%,
      var(--boss-blue-bg),
      transparent 38%
    ),
    var(--boss-bg);
}

.bosses-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  margin: 0 0 9px;

  color: var(--boss-red);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;

  text-transform: uppercase;
}

.bosses-hero h1 {
  margin: 0 0 10px !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--boss-text) !important;

  font-size: 34px !important;
  line-height: 1.15 !important;
  font-weight: 720 !important;

  text-shadow: none !important;
}

.bosses-hero p {
  max-width: 100% !important;

  margin: 0 !important;

  color: var(--boss-muted) !important;

  font-size: 14px;
  line-height: 1.72;
}


/* SECTION */

.bosses-section {
  margin: 0 0 44px;
}

.bosses-section-head {
  display: flex;
  align-items: center;
  gap: 13px;

  margin: 0 0 18px;
  padding-bottom: 14px;

  border-bottom: 1px solid var(--boss-border);
}

.bosses-section-icon {
  display: grid;
  place-items: center;

  width: 40px;
  height: 40px;
  flex: 0 0 40px;

  border-radius: 10px;

  color: var(--boss-red);
  background: var(--boss-red-bg);
}

.bosses-section-head h2 {
  margin: 2px 0 0 !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--boss-text) !important;

  font-size: 21px !important;
  font-weight: 660 !important;
}

.bosses-section-head .bosses-kicker {
  margin: 0;
}


/* GRID */

.bosses-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px;
}


/* CARD */

.boss-card {
  display: grid;
  grid-template-columns: 150px minmax(0,1fr);

  min-width: 0;

  overflow: hidden;

  border: 1px solid var(--boss-border);
  border-radius: 14px;

  background: var(--boss-bg);

  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    background-color .2s ease;
}

.boss-card:hover {
  transform: translateY(-2px);

  border-color: var(--boss-border-hover);
  background: var(--boss-bg-hover);

  box-shadow: var(--boss-shadow);
}


/* IMAGE */

.boss-image {
  position: relative;

  min-height: 100%;

  overflow: hidden;

  background: #090b0e;
}

.boss-image img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  min-height: 230px;

  margin: 0 !important;

  object-fit: cover;
  object-position: center;

  border: 0 !important;
  border-radius: 0 !important;

  transition:
    transform .28s ease,
    filter .28s ease;
}

.boss-card:hover .boss-image img {
  transform: scale(1.035);
  filter: brightness(1.05);
}

.boss-image::after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      to right,
      transparent 65%,
      rgba(0,0,0,.16)
    );
}


/* CONTENT */

.boss-content {
  min-width: 0;

  padding: 18px;
}

.boss-title {
  display: flex;
  align-items: center;
  gap: 9px;

  margin: 0 0 14px;
}

.boss-title i {
  color: var(--boss-red);
}

.boss-title h3 {
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--boss-text) !important;

  font-size: 17px !important;
  line-height: 1.3 !important;
  font-weight: 680 !important;

  text-shadow: none !important;
}


/* INFO */

.boss-info {
  overflow: hidden;

  border: 1px solid var(--boss-border);
  border-radius: 9px;
}

.boss-row {
  display: grid;
  grid-template-columns: 115px minmax(0,1fr);

  gap: 14px;

  padding: 9px 11px;

  border-top: 1px solid var(--boss-border);

  font-size: 12px;
  line-height: 1.55;
}

.boss-row:first-child {
  border-top: 0;
}

.boss-label {
  color: var(--boss-subtle);

  font-weight: 600;
}

.boss-value {
  min-width: 0;

  color: var(--boss-muted);

  overflow-wrap: anywhere;
}

.boss-value strong {
  color: var(--boss-text);
}


/* SPECIAL ROWS */

.boss-row-location .boss-label {
  color: var(--boss-blue);
}

.boss-row-drop .boss-label {
  color: var(--boss-green);
}

.boss-row-respawn .boss-label {
  color: var(--boss-gold);
}

.boss-row-announce .boss-value {
  color: var(--boss-green);
  font-weight: 650;
}


/* TAGS */

.boss-tag {
  display: inline-flex;
  align-items: center;

  padding: 3px 7px;
  margin: 2px 3px 2px 0;

  border-radius: 5px;

  background: var(--boss-purple-bg);

  color: var(--boss-purple);

  font-size: 11px;
  font-weight: 650;
}

.boss-tag.green {
  background: var(--boss-green-bg);
  color: var(--boss-green);
}

.boss-tag.gold {
  background: var(--boss-gold-bg);
  color: var(--boss-gold);
}


/* FINAL */

.bosses-final {
  display: flex;
  align-items: flex-start;
  gap: 14px;

  padding: 18px;

  border: 1px solid var(--boss-blue-border);
  border-radius: 12px;

  background: var(--boss-blue-bg);
}

.bosses-final > i {
  margin-top: 2px;

  color: var(--boss-blue);

  font-size: 18px;
}

.bosses-final strong {
  color: var(--boss-blue);

  font-size: 13px;
}

.bosses-final p {
  margin: 5px 0 0 !important;

  color: var(--boss-muted) !important;

  font-size: 13px;
  line-height: 1.65;
}


/* RESPONSIVE */

@media (max-width: 1180px) {
  .bosses-grid {
    grid-template-columns: 1fr;
  }

  .boss-card {
    grid-template-columns: 180px minmax(0,1fr);
  }
}

@media (max-width: 700px) {
  .bosses-hero {
    padding: 22px;
  }

  .bosses-hero h1 {
    font-size: 28px !important;
  }

  .boss-card {
    grid-template-columns: 1fr;
  }

  .boss-image {
    height: 210px;
  }

  .boss-image img {
    min-height: 210px;
  }

  .boss-row {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}

/* =========================================================
   MUELEON - CRAFTING / COMBINATIONS
   HELIOS DARK + LIGHT
   ========================================================= */

:root,
:root[data-theme="light"] {
  --craft-bg: #ffffff;
  --craft-bg-soft: #f7f8fa;
  --craft-bg-hover: #fafbfc;

  --craft-border: #e2e4e9;
  --craft-border-hover: #ccd3df;

  --craft-text: #18181b;
  --craft-muted: #686f7b;
  --craft-subtle: #9299a6;

  --craft-blue: #356fd6;
  --craft-blue-bg: rgba(53,111,214,.075);
  --craft-blue-border: rgba(53,111,214,.20);

  --craft-green: #168447;
  --craft-green-bg: rgba(22,132,71,.08);

  --craft-yellow: #b77900;
  --craft-yellow-bg: rgba(183,121,0,.08);

  --craft-red: #dc3545;
  --craft-red-bg: rgba(220,53,69,.07);

  --craft-purple: #7c3aed;
  --craft-purple-bg: rgba(124,58,237,.075);

  --craft-shadow:
    0 8px 24px rgba(15,23,42,.05);
}


:root[data-theme="dark"] {
  --craft-bg: #1a1a1d;
  --craft-bg-soft: #202126;
  --craft-bg-hover: #1f2024;

  --craft-border: #303137;
  --craft-border-hover: #444752;

  --craft-text: #f4f4f5;
  --craft-muted: #b3b6bf;
  --craft-subtle: #888d98;

  --craft-blue: #72a6ff;
  --craft-blue-bg: rgba(91,140,255,.09);
  --craft-blue-border: rgba(113,165,255,.20);

  --craft-green: #4ade80;
  --craft-green-bg: rgba(34,197,94,.075);

  --craft-yellow: #fbbf24;
  --craft-yellow-bg: rgba(245,158,11,.075);

  --craft-red: #fb7185;
  --craft-red-bg: rgba(244,63,94,.075);

  --craft-purple: #c084fc;
  --craft-purple-bg: rgba(168,85,247,.075);

  --craft-shadow:
    0 12px 30px rgba(0,0,0,.16);
}


/* PAGE */

.craft-page {
  width: 100%;
  max-width: none;

  color: var(--craft-text);
}

.craft-page *,
.craft-page *::before,
.craft-page *::after {
  box-sizing: border-box;
}


/* HERO */

.craft-hero {
  position: relative;

  overflow: hidden;

  margin: 0 0 38px;
  padding: 30px;

  border: 1px solid var(--craft-blue-border);
  border-radius: 16px;

  background:
    radial-gradient(
      circle at 85% 0,
      color-mix(in srgb, var(--craft-purple) 10%, transparent),
      transparent 36%
    ),
    radial-gradient(
      circle at 0 100%,
      var(--craft-blue-bg),
      transparent 38%
    ),
    var(--craft-bg);
}

.craft-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  margin: 0 0 9px;

  color: var(--craft-purple);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;

  text-transform: uppercase;
}

.craft-hero h1 {
  margin: 0 0 10px !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--craft-text) !important;

  font-size: 34px !important;
  line-height: 1.15 !important;
  font-weight: 720 !important;

  text-shadow: none !important;
}

.craft-hero p {
  max-width: 100% !important;

  margin: 0 !important;

  color: var(--craft-muted) !important;

  font-size: 14px;
  line-height: 1.72;
}


/* SECTION */

.craft-section {
  margin: 0 0 44px;
}

.craft-section-head {
  display: flex;
  align-items: center;
  gap: 13px;

  margin: 0 0 18px;
  padding-bottom: 14px;

  border-bottom: 1px solid var(--craft-border);
}

.craft-section-icon {
  display: grid;
  place-items: center;

  width: 40px;
  height: 40px;
  flex: 0 0 40px;

  border-radius: 10px;

  color: var(--craft-purple);
  background: var(--craft-purple-bg);
}

.craft-section-head .craft-kicker {
  margin: 0;
}

.craft-section-head h2 {
  margin: 2px 0 0 !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--craft-text) !important;

  font-size: 21px !important;
  font-weight: 660 !important;

  text-shadow: none !important;
}


/* GRID */

.craft-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));

  gap: 16px;
}


/* CARD */

.craft-card {
  display: grid;
  grid-template-columns: 76px minmax(0,1fr);

  gap: 16px;

  min-width: 0;

  padding: 18px;

  border: 1px solid var(--craft-border);
  border-radius: 13px;

  background: var(--craft-bg);

  transition:
    transform .2s ease,
    border-color .2s ease,
    background-color .2s ease,
    box-shadow .2s ease;
}

.craft-card:hover {
  transform: translateY(-2px);

  border-color: var(--craft-border-hover);
  background: var(--craft-bg-hover);

  box-shadow: var(--craft-shadow);
}


/* IMAGE */

.craft-image {
  display: grid;
  place-items: center;

  width: 76px;
  height: 76px;

  overflow: hidden;

  border: 1px solid var(--craft-border);
  border-radius: 12px;

  background: var(--craft-bg-soft);
}

.craft-image img {
  display: block !important;

  width: auto !important;
  height: auto !important;

  max-width: 62px !important;
  max-height: 62px !important;

  margin: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  object-fit: contain;
}


/* CONTENT */

.craft-content {
  min-width: 0;
}

.craft-title {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 13px;
}

.craft-title h3 {
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--craft-text) !important;

  font-size: 16px !important;
  line-height: 1.3 !important;
  font-weight: 680 !important;

  text-shadow: none !important;
}

.craft-price {
  flex: 0 0 auto;

  padding: 5px 8px;

  border-radius: 6px;

  background: var(--craft-yellow-bg);

  color: var(--craft-yellow);

  font-size: 10.5px;
  font-weight: 700;
}


/* REQUIREMENTS */

.craft-requirements {
  display: grid;

  overflow: hidden;

  border: 1px solid var(--craft-border);
  border-radius: 9px;
}

.craft-row {
  display: grid;
  grid-template-columns: 105px minmax(0,1fr);

  gap: 14px;

  padding: 8px 10px;

  border-top: 1px solid var(--craft-border);

  font-size: 12px;
  line-height: 1.5;
}

.craft-row:first-child {
  border-top: 0;
}

.craft-label {
  color: var(--craft-subtle);

  font-weight: 600;
}

.craft-value {
  min-width: 0;

  color: var(--craft-muted);

  overflow-wrap: anywhere;
}

.craft-value strong {
  color: var(--craft-text);
}


/* SUCCESS */

.craft-success {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  margin-top: 12px;
  padding: 10px 11px;

  border: 1px solid
    color-mix(
      in srgb,
      var(--craft-green) 24%,
      var(--craft-border)
    );

  border-radius: 9px;

  background: var(--craft-green-bg);
}

.craft-success > i {
  margin-top: 2px;

  color: var(--craft-green);
}

.craft-success div {
  color: var(--craft-muted);

  font-size: 12px;
  line-height: 1.55;
}

.craft-success strong {
  color: var(--craft-green);
}


/* CHANCE COLORS */

.craft-success.medium {
  border-color:
    color-mix(
      in srgb,
      var(--craft-yellow) 28%,
      var(--craft-border)
    );

  background: var(--craft-yellow-bg);
}

.craft-success.medium > i,
.craft-success.medium strong {
  color: var(--craft-yellow);
}


/* FINAL */

.craft-final {
  display: flex;
  align-items: flex-start;
  gap: 14px;

  padding: 18px;

  border: 1px solid var(--craft-blue-border);
  border-radius: 12px;

  background: var(--craft-blue-bg);
}

.craft-final > i {
  margin-top: 2px;

  color: var(--craft-blue);

  font-size: 18px;
}

.craft-final strong {
  color: var(--craft-blue);

  font-size: 13px;
}

.craft-final p {
  margin: 5px 0 0 !important;

  color: var(--craft-muted) !important;

  font-size: 13px;
  line-height: 1.65;
}


/* RESPONSIVE */

@media (max-width: 1050px) {
  .craft-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .craft-hero {
    padding: 22px;
  }

  .craft-hero h1 {
    font-size: 28px !important;
  }

  .craft-card {
    grid-template-columns: 58px minmax(0,1fr);

    gap: 13px;

    padding: 14px;
  }

  .craft-image {
    width: 58px;
    height: 58px;
  }

  .craft-image img {
    max-width: 48px !important;
    max-height: 48px !important;
  }

  .craft-title {
    align-items: flex-start;
    flex-direction: column;

    gap: 7px;
  }

  .craft-row {
    grid-template-columns: 1fr;

    gap: 3px;
  }
}

/* =========================================================
   MUELEON - DUNGEON GUIDE
   HELIOS DARK + LIGHT
   ========================================================= */


/* =========================================================
   LIGHT MODE
   ========================================================= */

:root,
:root[data-theme="light"] {
  --dungeon-bg: #ffffff;
  --dungeon-bg-soft: #f7f8fa;
  --dungeon-bg-hover: #fafbfc;

  --dungeon-border: #e2e4e9;
  --dungeon-border-hover: #cdd4df;

  --dungeon-text: #18181b;
  --dungeon-muted: #676e79;
  --dungeon-subtle: #9299a6;

  --dungeon-blue: #356fd6;
  --dungeon-blue-bg: rgba(53,111,214,.075);
  --dungeon-blue-border: rgba(53,111,214,.20);

  --dungeon-green: #168447;
  --dungeon-green-bg: rgba(22,132,71,.08);

  --dungeon-yellow: #b77900;
  --dungeon-yellow-bg: rgba(183,121,0,.08);

  --dungeon-red: #dc3545;
  --dungeon-red-bg: rgba(220,53,69,.07);

  --dungeon-purple: #7c3aed;
  --dungeon-purple-bg: rgba(124,58,237,.075);

  --dungeon-shadow:
    0 8px 24px rgba(15,23,42,.05);
}


/* =========================================================
   DARK MODE
   ========================================================= */

:root[data-theme="dark"] {
  --dungeon-bg: #1a1a1d;
  --dungeon-bg-soft: #202126;
  --dungeon-bg-hover: #1f2024;

  --dungeon-border: #303137;
  --dungeon-border-hover: #444752;

  --dungeon-text: #f4f4f5;
  --dungeon-muted: #b3b6bf;
  --dungeon-subtle: #888d98;

  --dungeon-blue: #72a6ff;
  --dungeon-blue-bg: rgba(91,140,255,.09);
  --dungeon-blue-border: rgba(113,165,255,.20);

  --dungeon-green: #4ade80;
  --dungeon-green-bg: rgba(34,197,94,.075);

  --dungeon-yellow: #fbbf24;
  --dungeon-yellow-bg: rgba(245,158,11,.075);

  --dungeon-red: #fb7185;
  --dungeon-red-bg: rgba(244,63,94,.075);

  --dungeon-purple: #c084fc;
  --dungeon-purple-bg: rgba(168,85,247,.075);

  --dungeon-shadow:
    0 12px 30px rgba(0,0,0,.16);
}


/* =========================================================
   PAGE
   ========================================================= */

.dungeon-page {
  width: 100%;
  max-width: none;

  color: var(--dungeon-text);
}

.dungeon-page *,
.dungeon-page *::before,
.dungeon-page *::after {
  box-sizing: border-box;
}


/* =========================================================
   HERO
   ========================================================= */

.dungeon-hero {
  margin: 0 0 36px;
  padding: 28px;

  border: 1px solid var(--dungeon-blue-border);
  border-radius: 16px;

  background:
    radial-gradient(
      circle at 85% 0,
      color-mix(
        in srgb,
        var(--dungeon-purple) 10%,
        transparent
      ),
      transparent 38%
    ),
    radial-gradient(
      circle at 0 100%,
      var(--dungeon-blue-bg),
      transparent 38%
    ),
    var(--dungeon-bg);
}


.dungeon-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  margin: 0 0 8px;

  color: var(--dungeon-blue);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;

  text-transform: uppercase;
}


.dungeon-hero h1 {
  margin: 0 0 10px !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--dungeon-text) !important;

  font-size: 34px !important;
  line-height: 1.15 !important;
  font-weight: 720 !important;

  text-shadow: none !important;
}


.dungeon-hero p {
  max-width: 100% !important;

  margin: 0 !important;

  color: var(--dungeon-muted) !important;

  font-size: 14px;
  line-height: 1.72;
}


/* =========================================================
   MAP
   ========================================================= */

.dungeon-feature-image {
  position: relative;
  display: block;
  width: min(760px, 30%);
  margin: 0 auto 38px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--dungeon-border);
  border-radius: 14px;
  background: var(--dungeon-bg);
  box-shadow: var(--dungeon-shadow);
  cursor: zoom-in;
  appearance: none;
  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}


.dungeon-feature-image:hover {
  transform: translateY(-2px);

  border-color: var(--dungeon-border-hover);
}


.dungeon-feature-image img {
  display: block !important;

  width: 100% !important;
  height: auto !important;

  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;

  object-fit: contain;

  border: 0 !important;
  border-radius: 0 !important;

  transition: transform .3s ease;
}


.dungeon-feature-image:hover img {
  transform: scale(1.01);
}


/* MAP ZOOM BUTTON */

.dungeon-map-zoom {
  position: absolute;

  left: 50%;
  bottom: 14px;

  transform: translateX(-50%);

  display: inline-flex;
  align-items: center;
  gap: 7px;

  padding: 8px 11px;

  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;

  background: rgba(12,15,21,.74);

  color: #fff;

  font-size: 11px;
  font-weight: 650;

  white-space: nowrap;

  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);

  pointer-events: none;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.dungeon-section {
  margin: 0 0 44px;
}


.dungeon-section-head {
  display: flex;
  align-items: center;
  gap: 13px;

  margin: 0 0 18px;
  padding-bottom: 14px;

  border-bottom: 1px solid var(--dungeon-border);
}


.dungeon-section-icon {
  display: grid;
  place-items: center;

  width: 40px;
  height: 40px;
  flex: 0 0 40px;

  border-radius: 10px;

  color: var(--dungeon-blue);
  background: var(--dungeon-blue-bg);
}


.dungeon-section-head > div {
  min-width: 0;
  flex: 1;
}


.dungeon-section-head .dungeon-kicker {
  margin: 0;
}


.dungeon-section-head h2 {
  margin: 2px 0 0 !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--dungeon-text) !important;

  font-size: 21px !important;
  line-height: 1.25 !important;
  font-weight: 660 !important;

  text-shadow: none !important;
}


/* =========================================================
   MAIN BOSS
   ========================================================= */

.dungeon-boss {
  display: grid;

  grid-template-columns:
    260px minmax(0,1fr);

  overflow: hidden;

  border: 1px solid var(--dungeon-border);
  border-radius: 14px;

  background: var(--dungeon-bg);
}


.dungeon-boss-image {
  height: 100%;
  min-height: 320px;

  overflow: hidden;

  background: #0b0d11;
}


.dungeon-boss-image img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  min-height: 320px;

  margin: 0 !important;

  object-fit: cover;
  object-position: center top;

  border: 0 !important;
  border-radius: 0 !important;
}


.dungeon-boss-content {
  min-width: 0;

  padding: 22px;
}


.dungeon-boss-title {
  display: flex;
  align-items: center;
  gap: 10px;

  margin-bottom: 12px;
}


.dungeon-boss-title i {
  color: var(--dungeon-red);
}


.dungeon-boss-title h3 {
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--dungeon-text) !important;

  font-size: 20px !important;
  line-height: 1.3 !important;
  font-weight: 680 !important;

  text-shadow: none !important;
}


.dungeon-boss-content > p {
  margin: 0 0 15px !important;

  color: var(--dungeon-muted) !important;

  font-size: 13px;
  line-height: 1.65;
}


/* =========================================================
   BOSS INFO
   ========================================================= */

.dungeon-info {
  overflow: hidden;

  border: 1px solid var(--dungeon-border);
  border-radius: 9px;
}


.dungeon-info-row {
  display: grid;

  grid-template-columns:
    125px minmax(0,1fr);

  gap: 16px;

  padding: 9px 11px;

  border-top: 1px solid var(--dungeon-border);

  font-size: 12px;
  line-height: 1.55;
}


.dungeon-info-row:first-child {
  border-top: 0;
}


.dungeon-info-label {
  color: var(--dungeon-subtle);

  font-weight: 600;
}


.dungeon-info-value {
  color: var(--dungeon-muted);
}


/* =========================================================
   ORC SLAYER DROP
   ========================================================= */

.dungeon-drop-list {
  display: grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap: 8px;

  margin-top: 14px;
}


.dungeon-drop-list span {
  display: flex;
  align-items: center;
  gap: 8px;

  min-width: 0;

  padding: 9px 10px;

  border: 1px solid
    color-mix(
      in srgb,
      var(--dungeon-green) 17%,
      transparent
    );

  border-radius: 8px;

  background: var(--dungeon-green-bg);

  color: var(--dungeon-green);

  font-size: 12px;
  font-weight: 600;
}


.dungeon-drop-list span::before {
  content: "\2713";

  flex: 0 0 auto;

  font-weight: 800;
}


/* =========================================================
   MINI BOSSES GRID
   ========================================================= */

.dungeon-mini-grid {
  display: grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap: 16px;
}


/* =========================================================
   MINI BOSS CARD
   ========================================================= */

.dungeon-mini-card {
  display: grid;

  grid-template-columns:
    170px minmax(0,1fr);

  align-items: start;

  min-width: 0;

  overflow: hidden;

  border: 1px solid var(--dungeon-border);
  border-radius: 13px;

  background: var(--dungeon-bg);

  transition:
    transform .18s ease,
    border-color .18s ease,
    background-color .18s ease,
    box-shadow .18s ease;
}


.dungeon-mini-card:hover {
  transform: translateY(-2px);

  border-color: var(--dungeon-border-hover);

  background: var(--dungeon-bg-hover);

  box-shadow: var(--dungeon-shadow);
}


/* =========================================================
   MINI BOSS IMAGE
   ========================================================= */

.dungeon-mini-image {
  width: 100%;
  height: 280px;
  min-height: 280px;

  overflow: hidden;

  background: #0b0d11;
}


.dungeon-mini-image img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  min-height: 0 !important;
  max-height: none !important;

  margin: 0 !important;

  object-fit: cover;
  object-position: center top;

  border: 0 !important;
  border-radius: 0 !important;
}


/* =========================================================
   MINI BOSS CONTENT
   ========================================================= */

.dungeon-mini-content {
  min-width: 0;

  padding: 16px;
}


.dungeon-mini-content > h3 {
  margin: 0 0 12px !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--dungeon-text) !important;

  font-size: 16px !important;
  line-height: 1.3 !important;
  font-weight: 670 !important;

  text-shadow: none !important;
}


.dungeon-mini-content > p {
  margin: 0 !important;

  color: var(--dungeon-muted) !important;

  font-size: 12px;
  line-height: 1.6;
}


/* =========================================================
   DROP GROUP
   ========================================================= */

.dungeon-drop-group {
  margin-top: 10px;

  overflow: hidden;

  border: 1px solid var(--dungeon-border);
  border-radius: 9px;

  background: var(--dungeon-bg-soft);
}


.dungeon-drop-group:first-of-type {
  margin-top: 0;
}


/* =========================================================
   DROP HEADER
   ========================================================= */

.dungeon-drop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  min-height: 38px;

  padding: 8px 10px;

  border-bottom: 1px solid var(--dungeon-border);

  color: var(--dungeon-text);

  font-size: 11.5px;
  font-weight: 650;
}


/* =========================================================
   DROP CHANCE
   ========================================================= */

.dungeon-chance {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  min-width: 42px;

  margin: 0;
  padding: 4px 7px;

  border-radius: 6px;

  background: var(--dungeon-yellow-bg);

  color: var(--dungeon-yellow);

  font-size: 10px;
  font-weight: 750;
}


/* =========================================================
   DROP ITEMS - TWO COLUMNS
   ========================================================= */

.dungeon-drop-items {
  display: grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
}


.dungeon-drop-items li {
  position: relative;

  min-width: 0;

  margin: 0 !important;
  padding: 8px 10px 8px 28px;

  border-top: 1px solid var(--dungeon-border);

  color: var(--dungeon-muted);

  font-size: 11.5px;
  line-height: 1.45;

  overflow-wrap: anywhere;
}


/* vertical separator */

.dungeon-drop-items li:nth-child(even) {
  border-left: 1px solid var(--dungeon-border);
}


/* first row */

.dungeon-drop-items li:nth-child(1),
.dungeon-drop-items li:nth-child(2) {
  border-top: 0;
}


/* bullet */

.dungeon-drop-items li::before {
  content: "";

  position: absolute;

  left: 12px;
  top: 50%;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: var(--dungeon-green);

  transform: translateY(-50%);
}


/* =========================================================
   SINGLE DROP
   ========================================================= */

.dungeon-drop-single {
  padding: 10px 11px;

  color: var(--dungeon-muted);

  font-size: 11.5px;
  line-height: 1.5;
}


/* =========================================================
   ZEN DROP
   ========================================================= */

.dungeon-drop-zen {
  display: flex;
  align-items: center;

  gap: 8px;

  padding: 10px 11px;

  color: var(--dungeon-yellow);

  font-size: 12px;
}


.dungeon-drop-zen i {
  color: var(--dungeon-yellow);
}


.dungeon-drop-zen strong {
  color: var(--dungeon-text);
}


/* =========================================================
   NOTE
   ========================================================= */

.dungeon-note {
  display: flex;
  align-items: flex-start;

  gap: 10px;

  margin-bottom: 14px;
  padding: 11px 12px;

  border: 1px solid var(--dungeon-blue-border);
  border-radius: 9px;

  background: var(--dungeon-blue-bg);

  color: var(--dungeon-muted);

  font-size: 12px;
  line-height: 1.55;
}


.dungeon-note i {
  margin-top: 2px;

  color: var(--dungeon-blue);
}


/* =========================================================
   ADDITIONAL MONSTERS
   ========================================================= */

.dungeon-monsters {
  display: grid;

  gap: 9px;
}


.dungeon-monster {
  display: grid;

  grid-template-columns:
    minmax(190px,.65fr)
    minmax(0,1.35fr);

  gap: 20px;

  padding: 12px 14px;

  border: 1px solid var(--dungeon-border);
  border-radius: 9px;

  background: var(--dungeon-bg);

  transition:
    border-color .18s ease,
    background-color .18s ease;
}


.dungeon-monster:hover {
  border-color: var(--dungeon-border-hover);

  background: var(--dungeon-bg-hover);
}


.dungeon-monster strong {
  color: var(--dungeon-text);

  font-size: 12.5px;
}


.dungeon-monster span {
  color: var(--dungeon-muted);

  font-size: 12px;
  line-height: 1.55;
}


/* =========================================================
   MAP LIGHTBOX
   ========================================================= */

.dungeon-map-lightbox {
  position: fixed;

  inset: 0;

  z-index: 99999;

  display: grid;
  place-items: center;

  padding: 20px;

  visibility: hidden;
  opacity: 0;

  background: rgba(3,5,9,.90);

  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  transition:
    opacity .25s ease,
    visibility .25s ease;
}


.dungeon-map-lightbox.is-open {
  visibility: visible;
  opacity: 1;
}


/* =========================================================
   LIGHTBOX DIALOG
   ========================================================= */

.dungeon-map-lightbox-dialog {
  position: relative;

  display: flex;
  flex-direction: column;

  width: min(1600px,98vw);
  height: min(94vh,1100px);

  overflow: hidden;

  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;

  background: #0d1015;

  box-shadow:
    0 30px 100px rgba(0,0,0,.65);

  transform: scale(.98);

  transition:
    transform .28s
    cubic-bezier(.2,.8,.2,1);
}


.dungeon-map-lightbox.is-open
.dungeon-map-lightbox-dialog {
  transform: scale(1);
}


/* =========================================================
   LIGHTBOX MEDIA
   ========================================================= */

.dungeon-map-lightbox-media {
  display: flex;

  align-items: center;
  justify-content: center;

  flex: 1;

  min-height: 0;

  overflow: auto;

  background: #05070a;
}


.dungeon-map-lightbox-media img {
  display: block !important;

  width: auto !important;
  height: auto !important;

  max-width: 100% !important;
  max-height: 100% !important;

  margin: auto !important;

  object-fit: contain;

  border: 0 !important;
  border-radius: 0 !important;
}


/* =========================================================
   LIGHTBOX CAPTION
   ========================================================= */

.dungeon-map-lightbox-caption {
  flex: 0 0 auto;

  padding: 13px 17px;

  border-top: 1px solid rgba(255,255,255,.08);

  background: #12161c;

  color: #c4c9d2;

  font-size: 12px;
  font-weight: 600;
}


/* =========================================================
   LIGHTBOX CLOSE BUTTON
   ========================================================= */

.dungeon-map-lightbox-close {
  position: absolute;

  top: 12px;
  right: 12px;

  z-index: 10;

  width: 42px;
  height: 42px;

  margin: 0;
  padding: 0;

  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;

  background: rgba(16,19,25,.86);

  color: #fff;

  cursor: pointer;

  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);

  transition:
    transform .18s ease,
    background-color .18s ease;
}


.dungeon-map-lightbox-close::before,
.dungeon-map-lightbox-close::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width: 16px;
  height: 2px;

  border-radius: 2px;

  background: currentColor;
}


.dungeon-map-lightbox-close::before {
  transform:
    translate(-50%,-50%)
    rotate(45deg);
}


.dungeon-map-lightbox-close::after {
  transform:
    translate(-50%,-50%)
    rotate(-45deg);
}


.dungeon-map-lightbox-close:hover {
  transform: scale(1.06);

  background: rgba(40,45,56,.96);
}


body.dungeon-map-opened {
  overflow: hidden;
}


/* =========================================================
   RESPONSIVE - TABLET
   ========================================================= */

@media (max-width: 1150px) {

  .dungeon-mini-grid {
    grid-template-columns: 1fr;
  }


  .dungeon-mini-card {
    grid-template-columns:
      190px minmax(0,1fr);
  }

}


/* =========================================================
   RESPONSIVE - SMALL TABLET
   ========================================================= */

@media (max-width: 800px) {

  .dungeon-boss {
    grid-template-columns: 1fr;
  }


  .dungeon-boss-image {
    height: 280px;
    min-height: 280px;
  }


  .dungeon-boss-image img {
    min-height: 280px;
  }

}


/* =========================================================
   RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .dungeon-hero {
    padding: 21px;
  }


  .dungeon-hero h1 {
    font-size: 28px !important;
  }


  .dungeon-feature-image {
    width: 100%;
  }


  .dungeon-mini-card {
    grid-template-columns: 1fr;
  }


  .dungeon-mini-image {
    height: 240px;
    min-height: 240px;
  }


  .dungeon-mini-image img {
    min-height: 0 !important;
  }


  .dungeon-drop-items {
    grid-template-columns: 1fr;
  }


  .dungeon-drop-items li {
    border-left: 0 !important;
  }


  .dungeon-drop-items li:nth-child(2) {
    border-top:
      1px solid var(--dungeon-border);
  }


  .dungeon-info-row,
  .dungeon-monster {
    grid-template-columns: 1fr;

    gap: 4px;
  }


  .dungeon-drop-list {
    grid-template-columns: 1fr;
  }


  .dungeon-map-lightbox {
    padding: 8px;
  }


  .dungeon-map-lightbox-dialog {
    width: 100%;
    height: 92vh;

    border-radius: 12px;
  }


  .dungeon-map-lightbox-close {
    width: 38px;
    height: 38px;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .dungeon-feature-image,
  .dungeon-feature-image img,
  .dungeon-mini-card,
  .dungeon-map-lightbox,
  .dungeon-map-lightbox-dialog,
  .dungeon-map-lightbox-close {
    transition: none !important;
  }

}

/* =========================================================
   DUNGEON HERO WITH MAP
   ========================================================= */

.dungeon-hero {
  position: relative;
  overflow: hidden;

  padding: 28px;

  border: 1px solid var(--dungeon-border);
  border-radius: 18px;

  background:
    radial-gradient(
      circle at 88% 8%,
      rgba(124,58,237,.08),
      transparent 34%
    ),
    radial-gradient(
      circle at 0 100%,
      rgba(53,111,214,.08),
      transparent 38%
    ),
    var(--dungeon-bg);

  box-shadow: var(--dungeon-shadow);
}


/* TWO COLUMNS */

.dungeon-hero-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) 300px;

  gap: 30px;

  align-items: center;
}

.dungeon-hero-content {
  min-width: 0;
}


/* RIGHT MAP */

.dungeon-hero-map {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
}


/* MAP PREVIEW */

.dungeon-feature-image {
  position: relative;

  display: block;

  width: 300px;
  max-width: 100%;

  padding: 0;
  margin: 0;

  overflow: hidden;

  cursor: zoom-in;

  border: 1px solid var(--dungeon-border);
  border-radius: 14px;

  background: var(--dungeon-card);

  box-shadow: 0 12px 30px rgba(0,0,0,.22);

  appearance: none;
  -webkit-appearance: none;
}


/* MAP IMAGE */

.dungeon-feature-image img {
  display: block !important;

  width: 300px !important;
  max-width: 100% !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: cover;

  border: 0 !important;
  border-radius: 0 !important;

  transition: transform .25s ease;
}

.dungeon-feature-image:hover img {
  transform: scale(1.025);
}


/* VIEW FULL MAP */

.dungeon-map-zoom {
  position: absolute;

  left: 50%;
  bottom: 11px;

  transform: translateX(-50%);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  padding: 8px 11px;

  border: 1px solid rgba(255,255,255,.14);
  border-radius: 9px;

  background: rgba(10,12,17,.88);

  color: #fff;

  font-size: 10px;
  line-height: 1;
  font-weight: 750;

  white-space: nowrap;

  pointer-events: none;

  box-shadow: 0 5px 18px rgba(0,0,0,.28);
}


/* RESPONSIVE */

@media (max-width: 900px) {

  .dungeon-hero-grid {
    grid-template-columns: 1fr;
  }

  .dungeon-hero-map {
    margin-top: 6px;
  }

}


@media (max-width: 520px) {

  .dungeon-feature-image,
  .dungeon-feature-image img {
    width: 270px !important;
  }

}


/* =========================================================
   MUELEON - HUNT POINT SYSTEM
   HELIOS DARK + LIGHT
   ========================================================= */

:root,
:root[data-theme="light"] {
  --hunt-bg: #ffffff;
  --hunt-bg-soft: #f7f8fa;
  --hunt-bg-hover: #fafbfc;

  --hunt-border: #e2e4e9;
  --hunt-border-hover: #cdd4df;

  --hunt-text: #18181b;
  --hunt-muted: #676e79;
  --hunt-subtle: #9299a6;

  --hunt-blue: #356fd6;
  --hunt-blue-bg: rgba(53,111,214,.075);
  --hunt-blue-border: rgba(53,111,214,.20);

  --hunt-green: #168447;
  --hunt-green-bg: rgba(22,132,71,.08);

  --hunt-yellow: #b77900;
  --hunt-yellow-bg: rgba(183,121,0,.08);

  --hunt-red: #dc3545;
  --hunt-red-bg: rgba(220,53,69,.07);

  --hunt-purple: #7c3aed;
  --hunt-purple-bg: rgba(124,58,237,.075);

  --hunt-shadow:
    0 8px 24px rgba(15,23,42,.05);
}

:root[data-theme="dark"] {
  --hunt-bg: #1a1a1d;
  --hunt-bg-soft: #202126;
  --hunt-bg-hover: #1f2024;

  --hunt-border: #303137;
  --hunt-border-hover: #444752;

  --hunt-text: #f4f4f5;
  --hunt-muted: #b3b6bf;
  --hunt-subtle: #888d98;

  --hunt-blue: #72a6ff;
  --hunt-blue-bg: rgba(91,140,255,.09);
  --hunt-blue-border: rgba(113,165,255,.20);

  --hunt-green: #4ade80;
  --hunt-green-bg: rgba(34,197,94,.075);

  --hunt-yellow: #fbbf24;
  --hunt-yellow-bg: rgba(245,158,11,.075);

  --hunt-red: #fb7185;
  --hunt-red-bg: rgba(244,63,94,.075);

  --hunt-purple: #c084fc;
  --hunt-purple-bg: rgba(168,85,247,.075);

  --hunt-shadow:
    0 12px 30px rgba(0,0,0,.16);
}


/* PAGE */

.hunt-page {
  width: 100%;
  max-width: none;

  color: var(--hunt-text);
}

.hunt-page *,
.hunt-page *::before,
.hunt-page *::after {
  box-sizing: border-box;
}


/* HERO */

.hunt-hero {
  margin: 0 0 36px;
  padding: 28px;

  border: 1px solid var(--hunt-blue-border);
  border-radius: 16px;

  background:
    radial-gradient(
      circle at 85% 0,
      color-mix(in srgb, var(--hunt-yellow) 10%, transparent),
      transparent 38%
    ),
    radial-gradient(
      circle at 0 100%,
      var(--hunt-blue-bg),
      transparent 38%
    ),
    var(--hunt-bg);
}

.hunt-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  margin: 0 0 8px;

  color: var(--hunt-blue);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;

  text-transform: uppercase;
}

.hunt-hero h1 {
  margin: 0 0 10px !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--hunt-text) !important;

  font-size: 34px !important;
  line-height: 1.15 !important;
  font-weight: 720 !important;

  text-shadow: none !important;
}

.hunt-hero p {
  max-width: 100% !important;

  margin: 0 !important;

  color: var(--hunt-muted) !important;

  font-size: 14px;
  line-height: 1.72;
}


/* ONLINE REWARD */

.hunt-online {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin: 0 0 38px;
  padding: 18px;

  border: 1px solid var(--hunt-border);
  border-radius: 12px;

  background: var(--hunt-bg);
}

.hunt-online-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hunt-online-icon {
  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;
  flex: 0 0 42px;

  border-radius: 10px;

  color: var(--hunt-blue);
  background: var(--hunt-blue-bg);
}

.hunt-online-title {
  color: var(--hunt-text);

  font-size: 13px;
  font-weight: 700;
}

.hunt-online-desc {
  margin-top: 3px;

  color: var(--hunt-muted);

  font-size: 12px;
}

.hunt-online-reward {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  padding: 7px 10px;

  border-radius: 8px;

  background: var(--hunt-yellow-bg);

  color: var(--hunt-yellow);

  font-size: 12px;
  font-weight: 750;
}


/* SECTION */

.hunt-section {
  margin: 0 0 44px;
}

.hunt-section-head {
  display: flex;
  align-items: center;
  gap: 13px;

  margin: 0 0 18px;
  padding-bottom: 14px;

  border-bottom: 1px solid var(--hunt-border);
}

.hunt-section-icon {
  display: grid;
  place-items: center;

  width: 40px;
  height: 40px;
  flex: 0 0 40px;

  border-radius: 10px;

  color: var(--hunt-blue);
  background: var(--hunt-blue-bg);
}

.hunt-section-head > div {
  min-width: 0;
  flex: 1;
}

.hunt-section-head .hunt-kicker {
  margin: 0;
}

.hunt-section-head h2 {
  margin: 2px 0 0 !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--hunt-text) !important;

  font-size: 21px !important;
  line-height: 1.25 !important;
  font-weight: 660 !important;

  text-shadow: none !important;
}


/* GRID */

.hunt-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));

  gap: 16px;
}


/* CARD */

.hunt-card {
  overflow: hidden;

  border: 1px solid var(--hunt-border);
  border-radius: 12px;

  background: var(--hunt-bg);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background-color .18s ease;
}

.hunt-card:hover {
  transform: translateY(-1px);

  border-color: var(--hunt-border-hover);

  background: var(--hunt-bg-hover);

  box-shadow: var(--hunt-shadow);
}

.hunt-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding: 13px 15px;

  border-bottom: 1px solid var(--hunt-border);

  background: var(--hunt-bg-soft);
}

.hunt-card-title {
  display: flex;
  align-items: center;
  gap: 9px;

  color: var(--hunt-text);

  font-size: 13px;
  font-weight: 700;
}

.hunt-card-title i {
  color: var(--hunt-blue);
}

.hunt-card-count {
  color: var(--hunt-subtle);

  font-size: 10px;
  font-weight: 700;
}


/* REWARD LIST */

.hunt-list {
  display: grid;

  margin: 0;
  padding: 0;

  list-style: none;
}

.hunt-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;

  gap: 18px;

  align-items: center;

  min-height: 42px;

  padding: 9px 12px;

  border-top: 1px solid var(--hunt-border);
}

.hunt-row:first-child {
  border-top: 0;
}

.hunt-name {
  min-width: 0;

  color: var(--hunt-muted);

  font-size: 12px;
  line-height: 1.45;

  overflow-wrap: anywhere;
}

.hunt-points {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 76px;

  padding: 5px 8px;

  border-radius: 7px;

  background: var(--hunt-yellow-bg);

  color: var(--hunt-yellow);

  font-size: 11px;
  font-weight: 750;
}

.hunt-points.high {
  background: var(--hunt-red-bg);
  color: var(--hunt-red);
}

.hunt-points.medium {
  background: var(--hunt-purple-bg);
  color: var(--hunt-purple);
}

.hunt-points.low {
  background: var(--hunt-green-bg);
  color: var(--hunt-green);
}


/* EVENT CARD */

.hunt-event-card .hunt-card-title i {
  color: var(--hunt-purple);
}


/* INFO NOTE */

.hunt-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  margin-top: 18px;
  padding: 12px 13px;

  border: 1px solid var(--hunt-blue-border);
  border-radius: 9px;

  background: var(--hunt-blue-bg);

  color: var(--hunt-muted);

  font-size: 12px;
  line-height: 1.55;
}

.hunt-note i {
  margin-top: 2px;

  color: var(--hunt-blue);
}


/* RESPONSIVE */

@media (max-width: 1050px) {
  .hunt-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .hunt-hero {
    padding: 21px;
  }

  .hunt-hero h1 {
    font-size: 28px !important;
  }

  .hunt-online {
    align-items: flex-start;
    flex-direction: column;
  }

  .hunt-row {
    grid-template-columns: minmax(0,1fr) auto;
  }
}

/* =========================================================
   MUELEON - EARRINGS
   HELIOS DARK + LIGHT
   ========================================================= */

:root,
:root[data-theme="light"] {
  --ear-bg: #ffffff;
  --ear-bg-soft: #f7f8fa;
  --ear-bg-hover: #fafbfc;

  --ear-border: #e2e4e9;
  --ear-border-hover: #cdd4df;

  --ear-text: #18181b;
  --ear-muted: #686f7b;
  --ear-subtle: #9299a6;

  --ear-blue: #356fd6;
  --ear-blue-bg: rgba(53,111,214,.075);
  --ear-blue-border: rgba(53,111,214,.20);

  --ear-gold: #b77900;
  --ear-gold-bg: rgba(183,121,0,.08);

  --ear-purple: #7c3aed;
  --ear-purple-bg: rgba(124,58,237,.075);

  --ear-green: #168447;
  --ear-green-bg: rgba(22,132,71,.08);

  --ear-shadow:
    0 8px 24px rgba(15,23,42,.05);
}


:root[data-theme="dark"] {
  --ear-bg: #1a1a1d;
  --ear-bg-soft: #202126;
  --ear-bg-hover: #1f2024;

  --ear-border: #303137;
  --ear-border-hover: #444752;

  --ear-text: #f4f4f5;
  --ear-muted: #b3b6bf;
  --ear-subtle: #888d98;

  --ear-blue: #72a6ff;
  --ear-blue-bg: rgba(91,140,255,.09);
  --ear-blue-border: rgba(113,165,255,.20);

  --ear-gold: #fbbf24;
  --ear-gold-bg: rgba(245,158,11,.075);

  --ear-purple: #c084fc;
  --ear-purple-bg: rgba(168,85,247,.075);

  --ear-green: #4ade80;
  --ear-green-bg: rgba(34,197,94,.075);

  --ear-shadow:
    0 12px 30px rgba(0,0,0,.16);
}


/* PAGE */

.earrings-page {
  width: 100%;
  max-width: none;

  color: var(--ear-text);
}

.earrings-page *,
.earrings-page *::before,
.earrings-page *::after {
  box-sizing: border-box;
}


/* HERO */

.earrings-hero {
  margin: 0 0 36px;
  padding: 28px;

  border: 1px solid var(--ear-blue-border);
  border-radius: 16px;

  background:
    radial-gradient(
      circle at 85% 0,
      color-mix(in srgb, var(--ear-purple) 10%, transparent),
      transparent 38%
    ),
    radial-gradient(
      circle at 0 100%,
      var(--ear-blue-bg),
      transparent 38%
    ),
    var(--ear-bg);
}

.earrings-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  margin: 0 0 8px;

  color: var(--ear-blue);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;

  text-transform: uppercase;
}

.earrings-hero h1 {
  margin: 0 0 10px !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--ear-text) !important;

  font-size: 34px !important;
  line-height: 1.15 !important;
  font-weight: 720 !important;

  text-shadow: none !important;
}

.earrings-hero p {
  max-width: 920px !important;

  margin: 0 !important;

  color: var(--ear-muted) !important;

  font-size: 14px;
  line-height: 1.72;
}


/* GRID */

.earrings-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));

  gap: 18px;
}


/* SET CARD */

.earrings-set {
  overflow: hidden;

  border: 1px solid var(--ear-border);
  border-radius: 14px;

  background: var(--ear-bg);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.earrings-set:hover {
  transform: translateY(-2px);

  border-color: var(--ear-border-hover);

  box-shadow: var(--ear-shadow);
}


/* SET HEADER */

.earrings-set-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 15px;

  padding: 14px 16px;

  border-bottom: 1px solid var(--ear-border);

  background: var(--ear-bg-soft);
}

.earrings-set-title {
  display: flex;
  align-items: center;
  gap: 9px;

  color: var(--ear-text);

  font-size: 15px;
  font-weight: 700;
}

.earrings-set-title i {
  color: var(--ear-purple);
}

.earrings-level {
  display: inline-flex;
  align-items: center;

  padding: 4px 7px;

  border-radius: 6px;

  background: var(--ear-gold-bg);

  color: var(--ear-gold);

  font-size: 10px;
  font-weight: 750;
}


/* PAIR */

.earrings-pair {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
}


/* SIDE */

.earring-item {
  min-width: 0;

  padding: 16px;
}

.earring-item + .earring-item {
  border-left: 1px solid var(--ear-border);
}

.earring-side {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 13px;
}

.earring-side strong {
  color: var(--ear-text);

  font-size: 13px;
}

.earring-side span {
  color: var(--ear-subtle);

  font-size: 10px;
  font-weight: 700;

  text-transform: uppercase;
}


/* IMAGE */

.earring-image {
  display: grid;
  place-items: center;

  width: 76px;
  height: 76px;

  margin: 0 auto 14px;

  border: 1px solid var(--ear-border);
  border-radius: 12px;

  background: var(--ear-bg-soft);
}

.earring-image img {
  display: block !important;

  width: auto !important;
  height: auto !important;

  max-width: 62px !important;
  max-height: 62px !important;

  margin: 0 !important;

  object-fit: contain;

  border: 0 !important;
  border-radius: 0 !important;
}


/* OPTIONS */

.earring-options-title {
  display: flex;
  align-items: center;
  gap: 6px;

  margin-bottom: 7px;

  color: var(--ear-gold);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;

  text-transform: uppercase;
}

.earring-options {
  display: grid;

  margin: 0 0 12px;
  padding: 0;

  overflow: hidden;

  border: 1px solid var(--ear-border);
  border-radius: 8px;

  list-style: none;
}

.earring-options li {
  position: relative;

  padding: 7px 9px 7px 25px;

  border-top: 1px solid var(--ear-border);

  color: var(--ear-muted);

  font-size: 11px;
  line-height: 1.45;
}

.earring-options li:first-child {
  border-top: 0;
}

.earring-options li::before {
  content: "";

  position: absolute;

  left: 10px;
  top: 50%;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: var(--ear-green);

  transform: translateY(-50%);
}


/* BASE STATS */

.earring-stats {
  display: grid;

  overflow: hidden;

  border: 1px solid var(--ear-border);
  border-radius: 8px;
}

.earring-stat {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;

  gap: 10px;

  padding: 7px 9px;

  border-top: 1px solid var(--ear-border);

  font-size: 10.5px;
}

.earring-stat:first-child {
  border-top: 0;
}

.earring-stat-label {
  color: var(--ear-subtle);
}

.earring-stat-value {
  color: var(--ear-text);

  font-weight: 700;
}


/* RESPONSIVE */

@media (max-width: 1150px) {
  .earrings-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .earrings-hero {
    padding: 21px;
  }

  .earrings-hero h1 {
    font-size: 28px !important;
  }

  .earrings-pair {
    grid-template-columns: 1fr;
  }

  .earring-item + .earring-item {
    border-left: 0;
    border-top: 1px solid var(--ear-border);
  }
}

/* =========================================================
   MUELEON - GOLDEN MONSTERS
   HELIOS DARK + LIGHT
   ========================================================= */

:root,
:root[data-theme="light"] {
  --golden-bg: #ffffff;
  --golden-bg-soft: #f7f8fa;
  --golden-bg-hover: #fafbfc;

  --golden-border: #e2e4e9;
  --golden-border-hover: #cdd4df;

  --golden-text: #18181b;
  --golden-muted: #686f7b;
  --golden-subtle: #9299a6;

  --golden-blue: #356fd6;
  --golden-blue-bg: rgba(53,111,214,.075);

  --golden-gold: #b77900;
  --golden-gold-bg: rgba(183,121,0,.09);

  --golden-green: #168447;
  --golden-green-bg: rgba(22,132,71,.08);

  --golden-purple: #7c3aed;
  --golden-purple-bg: rgba(124,58,237,.075);

  --golden-shadow:
    0 8px 24px rgba(15,23,42,.05);
}

:root[data-theme="dark"] {
  --golden-bg: #1a1a1d;
  --golden-bg-soft: #202126;
  --golden-bg-hover: #1f2024;

  --golden-border: #303137;
  --golden-border-hover: #444752;

  --golden-text: #f4f4f5;
  --golden-muted: #b3b6bf;
  --golden-subtle: #888d98;

  --golden-blue: #72a6ff;
  --golden-blue-bg: rgba(91,140,255,.09);

  --golden-gold: #fbbf24;
  --golden-gold-bg: rgba(245,158,11,.08);

  --golden-green: #4ade80;
  --golden-green-bg: rgba(34,197,94,.075);

  --golden-purple: #c084fc;
  --golden-purple-bg: rgba(168,85,247,.075);

  --golden-shadow:
    0 12px 30px rgba(0,0,0,.16);
}


/* PAGE */

.golden-page {
  width: 100%;
  max-width: none;

  color: var(--golden-text);
}

.golden-page *,
.golden-page *::before,
.golden-page *::after {
  box-sizing: border-box;
}


/* HERO */

.golden-hero {
  margin: 0 0 36px;
  padding: 28px;

  border: 1px solid var(--golden-border);
  border-radius: 16px;

  background:
    radial-gradient(
      circle at 85% 0,
      color-mix(in srgb, var(--golden-gold) 10%, transparent),
      transparent 38%
    ),
    var(--golden-bg);
}

.golden-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  margin: 0 0 8px;

  color: var(--golden-gold);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.golden-hero h1 {
  margin: 0 0 10px !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--golden-text) !important;

  font-size: 34px !important;
  line-height: 1.15 !important;
  font-weight: 720 !important;
}

.golden-hero p {
  max-width: 100% !important;

  margin: 0 !important;

  color: var(--golden-muted) !important;

  font-size: 14px;
  line-height: 1.72;
}


/* GRID */

.golden-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));

  gap: 16px;
}


/* CARD */

.golden-card {
  display: grid;
  grid-template-columns: 150px minmax(0,1fr);

  min-width: 0;

  overflow: hidden;

  border: 1px solid var(--golden-border);
  border-radius: 13px;

  background: var(--golden-bg);

  transition:
    transform .18s ease,
    border-color .18s ease,
    background-color .18s ease,
    box-shadow .18s ease;
}

.golden-card:hover {
  transform: translateY(-2px);

  border-color: var(--golden-border-hover);
  background: var(--golden-bg-hover);

  box-shadow: var(--golden-shadow);
}


/* IMAGE */

.golden-image {
  height: 190px;

  overflow: hidden;

  background: #0b0d11;
}

.golden-image img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;

  object-fit: cover;
  object-position: center top;

  border: 0 !important;
  border-radius: 0 !important;
}


/* CONTENT */

.golden-content {
  min-width: 0;

  padding: 16px;
}

.golden-title {
  display: flex;
  align-items: center;
  gap: 9px;

  margin-bottom: 12px;
}

.golden-title i {
  color: var(--golden-gold);
}

.golden-title h3 {
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--golden-text) !important;

  font-size: 16px !important;
  line-height: 1.3 !important;
  font-weight: 680 !important;
}


/* INFO */

.golden-info {
  overflow: hidden;

  border: 1px solid var(--golden-border);
  border-radius: 9px;
}

.golden-row {
  display: grid;
  grid-template-columns: 105px minmax(0,1fr);

  gap: 14px;

  padding: 8px 10px;

  border-top: 1px solid var(--golden-border);

  font-size: 11.5px;
  line-height: 1.5;
}

.golden-row:first-child {
  border-top: 0;
}

.golden-label {
  color: var(--golden-subtle);

  font-weight: 600;
}

.golden-value {
  color: var(--golden-muted);

  overflow-wrap: anywhere;
}


/* SPECIAL LABELS */

.golden-row.location .golden-label {
  color: var(--golden-blue);
}

.golden-row.drop .golden-label {
  color: var(--golden-gold);
}

.golden-row.quantity .golden-label {
  color: var(--golden-green);
}


/* BADGES */

.golden-badge {
  display: inline-flex;
  align-items: center;

  padding: 3px 7px;

  border-radius: 6px;

  background: var(--golden-gold-bg);

  color: var(--golden-gold);

  font-size: 10.5px;
  font-weight: 700;
}


/* RESPONSIVE */

@media (max-width: 1050px) {
  .golden-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .golden-hero {
    padding: 21px;
  }

  .golden-hero h1 {
    font-size: 28px !important;
  }

  .golden-card {
    grid-template-columns: 115px minmax(0,1fr);
  }

  .golden-image {
    height: 170px;
  }

  .golden-row {
    grid-template-columns: 1fr;

    gap: 3px;
  }
}

/* =========================================================
   MUELEON - BLOOD CASTLE
   HELIOS DARK + LIGHT
   ========================================================= */

:root,
:root[data-theme="light"] {
  --bc-bg: #ffffff;
  --bc-bg-soft: #f7f8fa;
  --bc-bg-hover: #fafbfc;

  --bc-border: #e2e4e9;
  --bc-border-hover: #cdd4df;

  --bc-text: #18181b;
  --bc-muted: #686f7b;
  --bc-subtle: #9299a6;

  --bc-red: #dc3545;
  --bc-red-bg: rgba(220,53,69,.075);

  --bc-blue: #356fd6;
  --bc-blue-bg: rgba(53,111,214,.075);
  --bc-blue-border: rgba(53,111,214,.20);

  --bc-green: #168447;
  --bc-green-bg: rgba(22,132,71,.08);

  --bc-gold: #b77900;
  --bc-gold-bg: rgba(183,121,0,.08);

  --bc-purple: #7c3aed;
  --bc-purple-bg: rgba(124,58,237,.075);

  --bc-shadow:
    0 8px 24px rgba(15,23,42,.05);
}

:root[data-theme="dark"] {
  --bc-bg: #1a1a1d;
  --bc-bg-soft: #202126;
  --bc-bg-hover: #1f2024;

  --bc-border: #303137;
  --bc-border-hover: #444752;

  --bc-text: #f4f4f5;
  --bc-muted: #b3b6bf;
  --bc-subtle: #888d98;

  --bc-red: #fb7185;
  --bc-red-bg: rgba(244,63,94,.08);

  --bc-blue: #72a6ff;
  --bc-blue-bg: rgba(91,140,255,.09);
  --bc-blue-border: rgba(113,165,255,.20);

  --bc-green: #4ade80;
  --bc-green-bg: rgba(34,197,94,.08);

  --bc-gold: #fbbf24;
  --bc-gold-bg: rgba(245,158,11,.08);

  --bc-purple: #c084fc;
  --bc-purple-bg: rgba(168,85,247,.08);

  --bc-shadow:
    0 12px 30px rgba(0,0,0,.16);
}


/* PAGE */

.bc-page {
  width: 100%;
  max-width: none;
  color: var(--bc-text);
}

.bc-page *,
.bc-page *::before,
.bc-page *::after {
  box-sizing: border-box;
}


/* HERO */

.bc-hero {
  margin: 0 0 34px;
  padding: 28px;

  border: 1px solid var(--bc-border);
  border-radius: 16px;

  background:
    radial-gradient(
      circle at 85% 0,
      color-mix(in srgb, var(--bc-red) 10%, transparent),
      transparent 38%
    ),
    radial-gradient(
      circle at 0 100%,
      var(--bc-blue-bg),
      transparent 38%
    ),
    var(--bc-bg);
}

.bc-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  margin: 0 0 8px;

  color: var(--bc-red);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.bc-hero h1 {
  margin: 0 0 10px !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--bc-text) !important;

  font-size: 34px !important;
  line-height: 1.15 !important;
  font-weight: 720 !important;
}

.bc-hero p {
  margin: 0 !important;
  max-width: 900px !important;

  color: var(--bc-muted) !important;

  font-size: 14px;
  line-height: 1.72;
}


/* OVERVIEW */

.bc-overview {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));

  gap: 10px;

  margin: 0 0 38px;
}

.bc-overview-item {
  padding: 13px;

  border: 1px solid var(--bc-border);
  border-radius: 10px;

  background: var(--bc-bg);
}

.bc-overview-label {
  display: block;

  margin-bottom: 4px;

  color: var(--bc-subtle);

  font-size: 9px;
  font-weight: 800;
  letter-spacing: .07em;

  text-transform: uppercase;
}

.bc-overview-value {
  color: var(--bc-text);

  font-size: 12px;
  font-weight: 650;
}


/* SECTION */

.bc-section {
  margin: 0 0 42px;
}

.bc-section-head {
  display: flex;
  align-items: center;
  gap: 13px;

  margin: 0 0 18px;
  padding-bottom: 14px;

  border-bottom: 1px solid var(--bc-border);
}

.bc-section-icon {
  display: grid;
  place-items: center;

  width: 40px;
  height: 40px;
  flex: 0 0 40px;

  border-radius: 10px;

  color: var(--bc-red);
  background: var(--bc-red-bg);
}

.bc-section-head h2 {
  margin: 2px 0 0 !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--bc-text) !important;

  font-size: 21px !important;
  font-weight: 660 !important;
}

.bc-section-head .bc-kicker {
  margin: 0;
}


/* GRID */

.bc-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));

  gap: 16px;
}


/* CARD */

.bc-card {
  overflow: hidden;

  border: 1px solid var(--bc-border);
  border-radius: 13px;

  background: var(--bc-bg);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.bc-card:hover {
  transform: translateY(-2px);

  border-color: var(--bc-border-hover);

  box-shadow: var(--bc-shadow);
}

.bc-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding: 13px 15px;

  border-bottom: 1px solid var(--bc-border);

  background: var(--bc-bg-soft);
}

.bc-card-title {
  display: flex;
  align-items: center;
  gap: 9px;

  color: var(--bc-text);

  font-size: 14px;
  font-weight: 700;
}

.bc-card-title i {
  color: var(--bc-red);
}


/* RESET BADGE */

.bc-reset {
  display: inline-flex;
  align-items: center;

  padding: 4px 7px;

  border-radius: 6px;

  background: var(--bc-blue-bg);

  color: var(--bc-blue);

  font-size: 10px;
  font-weight: 750;
}


/* BODY */

.bc-card-body {
  padding: 14px;
}


/* REWARD GRID */

.bc-rewards-title {
  display: flex;
  align-items: center;
  gap: 7px;

  margin-bottom: 8px;

  color: var(--bc-gold);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;

  text-transform: uppercase;
}

.bc-rewards {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));

  overflow: hidden;

  border: 1px solid var(--bc-border);
  border-radius: 9px;
}

.bc-reward {
  position: relative;

  padding: 8px 10px 8px 27px;

  border-top: 1px solid var(--bc-border);

  color: var(--bc-muted);

  font-size: 11.5px;
  line-height: 1.45;
}

.bc-reward:nth-child(even) {
  border-left: 1px solid var(--bc-border);
}

.bc-reward:nth-child(1),
.bc-reward:nth-child(2) {
  border-top: 0;
}

.bc-reward::before {
  content: "";

  position: absolute;

  left: 11px;
  top: 50%;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: var(--bc-green);

  transform: translateY(-50%);
}


/* BUNDLE REWARDS */

.bc-reward.bundle::before {
  background: var(--bc-gold);
}


/* WARN */

.bc-warning {
  display: flex;
  align-items: flex-start;
  gap: 9px;

  margin-top: 10px;
  padding: 9px 10px;

  border: 1px solid
    color-mix(in srgb, var(--bc-red) 22%, var(--bc-border));

  border-radius: 8px;

  background: var(--bc-red-bg);

  color: var(--bc-muted);

  font-size: 11px;
  line-height: 1.5;
}

.bc-warning i {
  margin-top: 2px;

  color: var(--bc-red);
}


/* SPECIAL BC8 */

.bc-card.master .bc-card-title i {
  color: var(--bc-purple);
}

.bc-card.master .bc-reset {
  background: var(--bc-purple-bg);
  color: var(--bc-purple);
}


/* RESPONSIVE */

@media (max-width: 1150px) {
  .bc-overview {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }

  .bc-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .bc-hero {
    padding: 21px;
  }

  .bc-hero h1 {
    font-size: 28px !important;
  }

  .bc-overview {
    grid-template-columns: 1fr 1fr;
  }

  .bc-rewards {
    grid-template-columns: 1fr;
  }

  .bc-reward {
    border-left: 0 !important;
  }

  .bc-reward:nth-child(2) {
    border-top: 1px solid var(--bc-border);
  }
}

/* =========================================================
   ENDLESS TOWER - HELIOS DARK / LIGHT
   ========================================================= */

:root,
:root[data-theme="light"] {
  --et-bg: #ffffff;
  --et-bg-soft: #f7f8fb;
  --et-bg-soft-2: #f2f4f8;
  --et-card: #ffffff;
  --et-border: #e3e7ef;
  --et-text: #101828;
  --et-muted: #5f6b7a;
  --et-heading: #0f172a;

  --et-primary: #3b82f6;
  --et-primary-soft: rgba(59, 130, 246, 0.10);

  --et-purple: #8b5cf6;
  --et-purple-soft: rgba(139, 92, 246, 0.10);

  --et-green: #16a34a;
  --et-green-soft: rgba(22, 163, 74, 0.10);

  --et-red: #dc2626;
  --et-red-soft: rgba(220, 38, 38, 0.10);

  --et-orange: #ea580c;
  --et-orange-soft: rgba(234, 88, 12, 0.10);

  --et-gold: #ca8a04;
  --et-gold-soft: rgba(202, 138, 4, 0.10);

  --et-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

:root[data-theme="dark"] {
  --et-bg: #111318;
  --et-bg-soft: #171a21;
  --et-bg-soft-2: #1b1f27;
  --et-card: #141821;
  --et-border: #262b36;
  --et-text: #eef2f7;
  --et-muted: #a8b0bf;
  --et-heading: #ffffff;

  --et-primary: #6ea8ff;
  --et-primary-soft: rgba(110, 168, 255, 0.10);

  --et-purple: #b592ff;
  --et-purple-soft: rgba(181, 146, 255, 0.10);

  --et-green: #4ade80;
  --et-green-soft: rgba(74, 222, 128, 0.10);

  --et-red: #fb7185;
  --et-red-soft: rgba(251, 113, 133, 0.10);

  --et-orange: #fb923c;
  --et-orange-soft: rgba(251, 146, 60, 0.10);

  --et-gold: #facc15;
  --et-gold-soft: rgba(250, 204, 21, 0.10);

  --et-shadow: 0 14px 36px rgba(0, 0, 0, 0.24);
}

.endless-tower-page {
  width: 100%;
  color: var(--et-text);
}

.endless-tower-page *,
.endless-tower-page *::before,
.endless-tower-page *::after {
  box-sizing: border-box;
}

.endless-tower-page h1,
.endless-tower-page h2,
.endless-tower-page h3,
.endless-tower-page h4 {
  color: var(--et-heading);
}

.endless-tower-page p {
  color: var(--et-muted);
  line-height: 1.75;
}

.et-section {
  margin: 0 0 38px;
}

.et-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--et-primary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.et-kicker i {
  font-size: 12px;
}

.et-hero {
  position: relative;
  overflow: hidden;
  padding: 30px;
  border: 1px solid var(--et-border);
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, var(--et-primary-soft), transparent 34%),
    radial-gradient(circle at bottom left, var(--et-purple-soft), transparent 35%),
    var(--et-bg);
  box-shadow: var(--et-shadow);
}

.et-hero-grid {
  display: grid;
  grid-template-columns: 1.25fr .95fr;
  gap: 28px;
  align-items: center;
}

.et-hero h1 {
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 40px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
}

.et-hero p {
  margin: 0 0 18px !important;
  max-width: 760px;
  font-size: 15px;
}

.et-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.et-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border: 1px solid var(--et-border);
  border-radius: 999px;
  background: var(--et-bg-soft);
  color: var(--et-text);
  font-size: 12px;
  font-weight: 700;
}

.et-hero-media {
  overflow: hidden;
  border: 1px solid var(--et-border);
  border-radius: 18px;
  background: var(--et-bg-soft);
  min-height: 280px;
}

.et-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
}

.et-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.et-stat {
  padding: 16px;
  border: 1px solid var(--et-border);
  border-radius: 14px;
  background: var(--et-card);
}

.et-stat-label {
  display: block;
  margin-bottom: 6px;
  color: var(--et-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.et-stat-value {
  color: var(--et-heading);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
}

.et-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--et-border);
}

.et-head-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--et-primary-soft);
  color: var(--et-primary);
  flex: 0 0 42px;
}

.et-head h2 {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

.et-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.et-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.et-card {
  padding: 22px;
  border: 1px solid var(--et-border);
  border-radius: 18px;
  background: var(--et-card);
  box-shadow: var(--et-shadow);
}

.et-card h3 {
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 22px !important;
  font-weight: 800 !important;
}

.et-card p:last-child {
  margin-bottom: 0;
}

.et-info-list {
  display: grid;
  gap: 12px;
}

.et-info-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--et-border);
}

.et-info-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.et-info-label {
  color: var(--et-muted);
  font-size: 13px;
  font-weight: 700;
}

.et-info-value {
  text-align: right;
  color: var(--et-heading);
  font-size: 13px;
  font-weight: 700;
}

.et-note {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  margin-top: 14px;
  border: 1px solid var(--et-border);
  border-radius: 14px;
  background: var(--et-bg-soft);
}

.et-note i {
  margin-top: 2px;
  color: var(--et-gold);
}

.et-note strong {
  color: var(--et-heading);
}

.et-media-card {
  overflow: hidden;
  border: 1px solid var(--et-border);
  border-radius: 18px;
  background: var(--et-bg-soft);
}

.et-media-card img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
}

.et-wave-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.et-mini {
  padding: 18px;
  border: 1px solid var(--et-border);
  border-radius: 16px;
  background: var(--et-card);
}

.et-mini h4 {
  margin: 0 0 10px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

.et-mini p {
  margin: 0;
  font-size: 14px;
}

.et-emphasis {
  color: var(--et-primary);
  font-weight: 800;
}

.et-highlight {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.et-highlight.red {
  background: var(--et-red-soft);
  color: var(--et-red);
}

.et-highlight.green {
  background: var(--et-green-soft);
  color: var(--et-green);
}

.et-highlight.orange {
  background: var(--et-orange-soft);
  color: var(--et-orange);
}

.et-highlight.purple {
  background: var(--et-purple-soft);
  color: var(--et-purple);
}

.et-rules-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.et-rule-box {
  padding: 18px;
  border: 1px solid var(--et-border);
  border-radius: 16px;
  background: var(--et-card);
}

.et-rule-box h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

.et-rule-box h4 i {
  color: var(--et-red);
}

.et-checks,
.et-bullets {
  display: grid;
  gap: 9px;

  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
}

.et-checks li,
.et-bullets li {
  position: relative;

  margin: 0 !important;
  padding-left: 24px !important;

  list-style: none !important;

  color: var(--et-muted);

  font-size: 14px;
  line-height: 1.65;
}

.et-checks li::marker,
.et-bullets li::marker {
  content: "";
}

/* Normal bullet */

.et-bullets li::before {
  content: "";

  position: absolute;
  left: 3px;
  top: 10px;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: var(--et-primary);
}


/* Checklist */

.et-checks li::before {
  content: "\2713";

  position: absolute;
  left: 0;
  top: 0;

  color: var(--et-green);

  font-family: Arial, sans-serif;
  font-size: 13px;
  line-height: 1.65;
  font-weight: 800;
}

.et-reward-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.et-reward-card {
  padding: 20px;
  border: 1px solid var(--et-border);
  border-radius: 16px;
  background: var(--et-card);
}

.et-reward-card h4 {
  margin: 0 0 10px !important;
  font-size: 17px !important;
  font-weight: 800 !important;
}

.et-reward-card p {
  margin: 0 0 12px;
}

.et-reward-card .et-highlight {
  margin-bottom: 10px;
}

.et-scaling-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.et-scale-card {
  padding: 18px;
  border: 1px solid var(--et-border);
  border-radius: 16px;
  background: var(--et-card);
}

.et-scale-card h4 {
  margin: 0 0 10px !important;
  font-size: 17px !important;
  font-weight: 800 !important;
}

.et-scale-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.et-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border-radius: 999px;
  border: 1px solid var(--et-border);
  background: var(--et-bg-soft);
  color: var(--et-heading);
  font-size: 12px;
  font-weight: 800;
}

.et-skill-off {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.et-skill-tag {
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--et-red-soft);
  color: var(--et-red);
  font-size: 12px;
  font-weight: 800;
}

.et-final {
  padding: 26px;
  border: 1px solid var(--et-border);
  border-radius: 20px;
  background:
    radial-gradient(circle at right center, var(--et-purple-soft), transparent 34%),
    radial-gradient(circle at left bottom, var(--et-primary-soft), transparent 35%),
    var(--et-card);
  box-shadow: var(--et-shadow);
}

.et-final h2 {
  margin: 0 0 14px !important;
  font-size: 30px !important;
  font-weight: 800 !important;
}

.et-final p {
  margin: 0 0 16px;
  max-width: 100%;
}

.et-quote {
  padding: 18px 20px;
  border-left: 4px solid var(--et-primary);
  border-radius: 12px;
  background: var(--et-bg-soft);
  color: var(--et-heading);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.75;
}

/* =========================================================
   ENDLESS TOWER - REWARD ITEM LIST
   ========================================================= */

.et-reward-items {
  display: grid;
  gap: 7px;

  margin-top: 14px;
}

.et-reward-item {
  display: flex;
  align-items: center;

  gap: 9px;

  min-height: 38px;

  padding: 7px 9px;

  border: 1px solid var(--et-border);
  border-radius: 9px;

  background: var(--et-bg-soft);

  color: var(--et-muted);

  font-size: 11.5px;
  font-weight: 600;

  transition:
    border-color .18s ease,
    background-color .18s ease,
    transform .18s ease;
}

.et-reward-item:hover {
  transform: translateX(2px);

  border-color:
    color-mix(
      in srgb,
      var(--et-primary) 25%,
      var(--et-border)
    );
}

.et-reward-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;
  flex: 0 0 28px;

  border-radius: 8px;

  color: var(--et-red);
  background: var(--et-red-soft);

  font-size: 11px;
  line-height: 1;
}

.et-reward-item-icon.mana {
  color: var(--et-primary);
  background: var(--et-primary-soft);
}

.et-reward-item-icon i {
  margin: 0;
  padding: 0;

  line-height: 1;
}


/* LIGHT */

:root[data-theme="light"] .et-reward-item {
  background: rgba(0,0,0,.015);
}


/* MOBILE */

@media (max-width: 700px) {

  .et-reward-item {
    min-height: 36px;
  }

}

@media (max-width: 1200px) {
  .et-hero-grid,
  .et-grid-2,
  .et-rules-grid,
  .et-scaling-box {
    grid-template-columns: 1fr;
  }

  .et-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .et-wave-grid,
  .et-reward-grid,
  .et-grid-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .et-hero {
    padding: 22px;
  }

  .et-hero h1 {
    font-size: 32px !important;
  }

  .et-overview {
    grid-template-columns: 1fr;
  }

  .et-info-row {
    flex-direction: column;
    gap: 6px;
  }

  .et-info-value {
    text-align: left;
  }
}

/* =========================================================
   MUELEON - BATTLE ROYALE
   HELIOS DARK + LIGHT
   ========================================================= */

:root,
:root[data-theme="light"] {
  --br-bg: #ffffff;
  --br-bg-soft: #f7f8fb;
  --br-card: #ffffff;
  --br-border: #e3e7ef;
  --br-text: #101828;
  --br-muted: #667085;

  --br-green: #16a34a;
  --br-green-soft: rgba(22,163,74,.10);

  --br-red: #dc2626;
  --br-red-soft: rgba(220,38,38,.10);

  --br-blue: #2563eb;
  --br-blue-soft: rgba(37,99,235,.10);

  --br-gold: #ca8a04;
  --br-gold-soft: rgba(202,138,4,.10);

  --br-purple: #7c3aed;
  --br-purple-soft: rgba(124,58,237,.10);

  --br-shadow: 0 10px 30px rgba(15,23,42,.06);
}

:root[data-theme="dark"] {
  --br-bg: #111318;
  --br-bg-soft: #171a21;
  --br-card: #141821;
  --br-border: #262b36;
  --br-text: #f3f4f6;
  --br-muted: #a8b0bf;

  --br-green: #4ade80;
  --br-green-soft: rgba(74,222,128,.10);

  --br-red: #fb7185;
  --br-red-soft: rgba(251,113,133,.10);

  --br-blue: #72a6ff;
  --br-blue-soft: rgba(114,166,255,.10);

  --br-gold: #facc15;
  --br-gold-soft: rgba(250,204,21,.10);

  --br-purple: #c084fc;
  --br-purple-soft: rgba(192,132,252,.10);

  --br-shadow: 0 14px 36px rgba(0,0,0,.24);
}

.battle-royale-page {
  width: 100%;
  color: var(--br-text);
}

.battle-royale-page *,
.battle-royale-page *::before,
.battle-royale-page *::after {
  box-sizing: border-box;
}

.br-section {
  margin-bottom: 40px;
}

.br-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin-bottom: 9px;

  color: var(--br-green);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}


/* HERO */

.br-hero {
  padding: 30px;

  border: 1px solid var(--br-border);
  border-radius: 20px;

  background:
    radial-gradient(circle at 85% 0, var(--br-green-soft), transparent 35%),
    radial-gradient(circle at 0 100%, var(--br-purple-soft), transparent 35%),
    var(--br-bg);

  box-shadow: var(--br-shadow);
}

.br-hero-grid {
  display: grid;
  grid-template-columns: 1.2fr .9fr;

  gap: 28px;
  align-items: center;
}

.br-hero h1 {
  margin: 0 0 12px !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--br-text) !important;

  font-size: 40px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
}

.br-hero p {
  margin: 0 0 18px !important;

  color: var(--br-muted) !important;

  font-size: 15px;
  line-height: 1.72;
}

.br-hero-media {
  overflow: hidden;

  min-height: 280px;

  border: 1px solid var(--br-border);
  border-radius: 18px;

  background: var(--br-bg-soft);
}

.br-hero-media img {
  display: block;

  width: 100%;
  height: 100%;
  min-height: 280px;

  object-fit: cover;
}


/* BADGES */

.br-badges {
  display: flex;
  flex-wrap: wrap;

  gap: 10px;
}

.br-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  padding: 8px 11px;

  border: 1px solid var(--br-border);
  border-radius: 999px;

  background: var(--br-bg-soft);

  color: var(--br-text);

  font-size: 12px;
  font-weight: 700;
}


/* OVERVIEW */

.br-overview {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));

  gap: 14px;

  margin-top: 22px;
}

.br-stat {
  padding: 15px;

  border: 1px solid var(--br-border);
  border-radius: 13px;

  background: var(--br-card);
}

.br-stat-label {
  display: block;

  margin-bottom: 5px;

  color: var(--br-muted);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.br-stat-value {
  color: var(--br-text);

  font-size: 17px;
  font-weight: 800;
}


/* SECTION HEAD */

.br-head {
  display: flex;
  align-items: center;

  gap: 13px;

  margin-bottom: 18px;
  padding-bottom: 14px;

  border-bottom: 1px solid var(--br-border);
}

.br-head-icon {
  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;
  flex: 0 0 42px;

  border-radius: 12px;

  color: var(--br-green);
  background: var(--br-green-soft);
}

.br-head h2 {
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--br-text) !important;

  font-size: 27px !important;
  font-weight: 800 !important;
}


/* GRID */

.br-grid-2 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));

  gap: 18px;
}

.br-grid-3 {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));

  gap: 16px;
}


/* CARD */

.br-card {
  padding: 21px;

  border: 1px solid var(--br-border);
  border-radius: 17px;

  background: var(--br-card);

  box-shadow: var(--br-shadow);
}

.br-card h3 {
  margin: 0 0 11px !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--br-text) !important;

  font-size: 20px !important;
  font-weight: 800 !important;
}

.br-card p {
  margin: 0 0 14px !important;

  color: var(--br-muted) !important;

  font-size: 14px;
  line-height: 1.68;
}


/* MEDIA */

.br-media {
  overflow: hidden;

  border: 1px solid var(--br-border);
  border-radius: 17px;

  background: var(--br-bg-soft);
}

.br-media img {
  display: block;

  width: 100%;
  height: 100%;
  min-height: 260px;

  object-fit: cover;
}


/* INFO */

.br-info-list {
  overflow: hidden;

  border: 1px solid var(--br-border);
  border-radius: 10px;
}

.br-info-row {
  display: grid;
  grid-template-columns: 150px minmax(0,1fr);

  gap: 15px;

  padding: 10px 12px;

  border-top: 1px solid var(--br-border);

  font-size: 12px;
}

.br-info-row:first-child {
  border-top: 0;
}

.br-info-label {
  color: var(--br-muted);
  font-weight: 650;
}

.br-info-value {
  color: var(--br-text);
  font-weight: 700;
}


/* NOTE */

.br-note {
  display: flex;
  align-items: flex-start;

  gap: 10px;

  margin-top: 14px;
  padding: 12px 13px;

  border: 1px solid var(--br-border);
  border-radius: 10px;

  background: var(--br-bg-soft);

  color: var(--br-muted);

  font-size: 12px;
  line-height: 1.55;
}

.br-note i {
  margin-top: 2px;

  color: var(--br-gold);
}


/* ZONE */

.br-zone-card {
  padding: 20px;

  border: 1px solid var(--br-border);
  border-radius: 17px;

  background:
    radial-gradient(circle at center, var(--br-green-soft), transparent 55%),
    var(--br-card);
}

.br-zone-values {
  display: flex;
  flex-wrap: wrap;

  gap: 10px;

  margin-top: 14px;
}

.br-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  padding: 8px 11px;

  border-radius: 999px;

  background: var(--br-bg-soft);

  color: var(--br-text);

  font-size: 12px;
  font-weight: 750;
}


/* RULES */

.br-rule-list {
  display: grid;

  gap: 9px;

  margin: 0;
  padding: 0;

  list-style: none !important;
}

.br-rule-list li {
  position: relative;

  padding-left: 23px;

  color: var(--br-muted);

  font-size: 13px;
  line-height: 1.6;

  list-style: none !important;
}

.br-rule-list li::marker {
  content: "";
}

.br-rule-list li::before {
  content: "\2713";

  position: absolute;
  left: 0;

  color: var(--br-green);

  font-weight: 800;
}


/* DANGER */

.br-danger {
  border-color: color-mix(in srgb, var(--br-red) 25%, var(--br-border));
  background: var(--br-red-soft);
}

.br-danger i {
  color: var(--br-red);
}


/* ITEM DROP */

.br-drop-card {
  padding: 18px;

  border: 1px solid var(--br-border);
  border-radius: 15px;

  background: var(--br-card);
}

.br-drop-card h4 {
  margin: 0 0 8px !important;

  color: var(--br-text);

  font-size: 16px !important;
  font-weight: 800 !important;
}

.br-drop-card p {
  margin: 0 !important;

  color: var(--br-muted);

  font-size: 13px;
  line-height: 1.6;
}

.br-drop-value {
  display: inline-flex;
  align-items: center;

  margin-top: 10px;
  padding: 6px 9px;

  border-radius: 8px;

  background: var(--br-blue-soft);

  color: var(--br-blue);

  font-size: 11px;
  font-weight: 800;
}


/* FINAL */

.br-final {
  padding: 26px;

  border: 1px solid var(--br-border);
  border-radius: 20px;

  background:
    radial-gradient(circle at right, var(--br-green-soft), transparent 35%),
    radial-gradient(circle at left, var(--br-purple-soft), transparent 35%),
    var(--br-card);

  box-shadow: var(--br-shadow);
}

.br-final h2 {
  margin: 0 0 12px !important;

  color: var(--br-text) !important;

  font-size: 30px !important;
  font-weight: 800 !important;
}

.br-final p {
  color: var(--br-muted);
  line-height: 1.7;
}

.br-quote {
  margin-top: 15px;
  padding: 16px 18px;

  border-left: 4px solid var(--br-green);
  border-radius: 10px;

  background: var(--br-bg-soft);

  color: var(--br-text);

  font-size: 14px;
  font-weight: 750;
}

/* =========================================================
   BATTLE ROYALE - WINNER REWARD
   ========================================================= */

.br-drop-card-winner {
  position: relative;
  overflow: hidden;
}

.br-drop-card-winner::after {
  content: "";

  position: absolute;
  top: -45px;
  right: -45px;

  width: 120px;
  height: 120px;

  border-radius: 50%;

  background: rgba(245, 158, 11, .08);

  pointer-events: none;
}


.br-drop-card-head {
  display: flex;
  align-items: center;

  gap: 11px;

  margin-bottom: 12px;
}


.br-drop-card-icon {
  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;
  flex: 0 0 38px;

  border-radius: 10px;

  color: #fbbf24;
  background: rgba(245, 158, 11, .10);
}


.br-drop-label {
  display: block;

  margin-bottom: 2px;

  color: #fbbf24;

  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
}


.br-drop-card-head h4 {
  margin: 0 !important;
}


/* REWARD LIST */

.br-reward-list {
  display: grid;

  gap: 8px;

  margin-top: 15px;
}


.br-reward-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding: 10px 11px;

  border: 1px solid var(--br-border, rgba(255,255,255,.08));
  border-radius: 9px;

  background: rgba(255,255,255,.025);
}


.br-reward-info {
  display: flex;
  align-items: center;

  gap: 10px;

  min-width: 0;
}


.br-reward-icon {
  display: grid;
  place-items: center;

  width: 30px;
  height: 30px;
  flex: 0 0 30px;

  border-radius: 8px;

  color: #8fb2ff;
  background: rgba(91,140,255,.10);
}


.br-reward-info strong {
  display: block;

  color: inherit;

  font-size: 12px;
  font-weight: 750;
}


.br-reward-info > div > span {
  display: block;

  margin-top: 2px;

  opacity: .62;

  font-size: 10px;
}


/* DROP RATE */

.br-reward-rate {
  flex: 0 0 auto;

  min-width: 48px;

  padding: 5px 8px;

  border-radius: 7px;

  text-align: center;

  font-size: 10px;
  font-weight: 800;
}


.br-reward-rate-100 {
  color: #4ade80;
  background: rgba(34,197,94,.11);
}


.br-reward-rate-50 {
  color: #facc15;
  background: rgba(234,179,8,.11);
}


.br-reward-rate-25 {
  color: #fb923c;
  background: rgba(249,115,22,.11);
}


/* LIGHT MODE */

:root[data-theme="light"] .br-reward-row {
  background: rgba(0,0,0,.015);
}

:root[data-theme="light"] .br-reward-rate-100 {
  color: #168447;
}

:root[data-theme="light"] .br-reward-rate-50 {
  color: #a16207;
}

:root[data-theme="light"] .br-reward-rate-25 {
  color: #c2410c;
}


/* RESPONSIVE */

@media (max-width: 1100px) {
  .br-hero-grid,
  .br-grid-2 {
    grid-template-columns: 1fr;
  }

  .br-overview {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .br-grid-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .br-hero {
    padding: 21px;
  }

  .br-hero h1 {
    font-size: 31px !important;
  }

  .br-overview {
    grid-template-columns: 1fr;
  }

  .br-info-row {
    grid-template-columns: 1fr;

    gap: 4px;
  }
}

/* =========================================================
   MUELEON - SET BONUS SYSTEM
   HELIOS DARK + LIGHT
   ========================================================= */

:root,
:root[data-theme="light"] {
  --sb-bg: #ffffff;
  --sb-bg-soft: #f7f8fb;
  --sb-card: #ffffff;

  --sb-border: #e2e6ed;
  --sb-border-hover: #ccd3de;

  --sb-text: #17181c;
  --sb-muted: #687180;
  --sb-subtle: #9199a6;

  --sb-blue: #356fd6;
  --sb-blue-soft: rgba(53,111,214,.09);

  --sb-green: #168447;
  --sb-green-soft: rgba(22,132,71,.09);

  --sb-purple: #7c3aed;
  --sb-purple-soft: rgba(124,58,237,.09);

  --sb-gold: #b77900;
  --sb-gold-soft: rgba(183,121,0,.09);

  --sb-red: #dc3545;
  --sb-red-soft: rgba(220,53,69,.09);

  --sb-shadow: 0 10px 28px rgba(15,23,42,.055);
}


:root[data-theme="dark"] {
  --sb-bg: #15171c;
  --sb-bg-soft: #1b1e25;
  --sb-card: #181b21;

  --sb-border: #2b3039;
  --sb-border-hover: #414854;

  --sb-text: #f4f5f7;
  --sb-muted: #adb4c0;
  --sb-subtle: #858d9b;

  --sb-blue: #72a6ff;
  --sb-blue-soft: rgba(91,140,255,.10);

  --sb-green: #4ade80;
  --sb-green-soft: rgba(34,197,94,.09);

  --sb-purple: #c084fc;
  --sb-purple-soft: rgba(168,85,247,.09);

  --sb-gold: #fbbf24;
  --sb-gold-soft: rgba(245,158,11,.09);

  --sb-red: #fb7185;
  --sb-red-soft: rgba(244,63,94,.09);

  --sb-shadow: 0 14px 34px rgba(0,0,0,.20);
}


/* =========================================================
   PAGE
   ========================================================= */

.setbonus-page {
  width: 100%;
  color: var(--sb-text);
}

.setbonus-page *,
.setbonus-page *::before,
.setbonus-page *::after {
  box-sizing: border-box;
}

.setbonus-section {
  margin: 0 0 40px;
}


/* =========================================================
   HERO
   ========================================================= */

.setbonus-hero {
  position: relative;
  overflow: hidden;

  padding: 30px;

  border: 1px solid var(--sb-border);
  border-radius: 18px;

  background:
    radial-gradient(
      circle at 88% 5%,
      var(--sb-purple-soft),
      transparent 34%
    ),
    radial-gradient(
      circle at 0 100%,
      var(--sb-blue-soft),
      transparent 38%
    ),
    var(--sb-bg);

  box-shadow: var(--sb-shadow);
}


/* HERO GRID */

.setbonus-hero-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) 310px;

  gap: 34px;

  align-items: center;
}

.setbonus-hero-content {
  min-width: 0;
}


/* KICKER */

.setbonus-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  margin-bottom: 9px;

  color: var(--sb-purple);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;

  text-transform: uppercase;
}


/* TITLE */

.setbonus-hero h1 {
  margin: 0 0 11px !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--sb-text) !important;

  font-size: 36px !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
}


/* TEXT */

.setbonus-hero p {
  max-width: 850px;

  margin: 0 !important;

  color: var(--sb-muted) !important;

  font-size: 14px;
  line-height: 1.75;
}


/* HERO IMAGE */

.setbonus-hero-media {
  position: relative;

  width: 100%;
  max-width: 283px;

  aspect-ratio: 283 / 252;

  margin-left: auto;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  padding: 12px;

  border: 1px solid var(--sb-border);
  border-radius: 16px;

  background:
    radial-gradient(
      circle at center,
      var(--sb-purple-soft),
      transparent 62%
    ),
    var(--sb-bg-soft);
}

.setbonus-hero-media::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.035),
      transparent 45%
    );
}

.setbonus-hero-media img {
  position: relative;
  z-index: 1;

  display: block !important;

  width: 100% !important;
  height: 100% !important;

  max-width: 283px;

  margin: 0 !important;

  object-fit: contain;
  object-position: center;

  border: 0 !important;
  border-radius: 10px !important;

  transition: transform .25s ease;
}

.setbonus-hero-media:hover img {
  transform: scale(1.025);
}


/* =========================================================
   HERO OVERVIEW
   ========================================================= */

.setbonus-overview {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));

  gap: 12px;

  margin-top: 24px;
}

.setbonus-stat {
  padding: 14px;

  border: 1px solid var(--sb-border);
  border-radius: 12px;

  background: var(--sb-card);
}

.setbonus-stat-label {
  display: block;

  margin-bottom: 5px;

  color: var(--sb-subtle);

  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;

  text-transform: uppercase;
}

.setbonus-stat-value {
  color: var(--sb-text);

  font-size: 14px;
  font-weight: 750;
}


/* =========================================================
   SECTION HEAD
   ========================================================= */

.setbonus-head {
  display: flex;
  align-items: center;

  gap: 13px;

  margin-bottom: 18px;
  padding-bottom: 14px;

  border-bottom: 1px solid var(--sb-border);
}

.setbonus-head-icon {
  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;

  flex: 0 0 42px;

  border-radius: 11px;

  color: var(--sb-purple);
  background: var(--sb-purple-soft);
}

.setbonus-head h2 {
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--sb-text) !important;

  font-size: 24px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}


/* =========================================================
   GRIDS
   ========================================================= */

.setbonus-grid-2 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));

  gap: 16px;
}

.setbonus-grid-4 {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));

  gap: 14px;
}


/* =========================================================
   CARD
   ========================================================= */

.setbonus-card {
  padding: 19px;

  border: 1px solid var(--sb-border);
  border-radius: 14px;

  background: var(--sb-card);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.setbonus-card:hover {
  transform: translateY(-2px);

  border-color: var(--sb-border-hover);

  box-shadow: var(--sb-shadow);
}

.setbonus-card h3 {
  margin: 0 0 10px !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--sb-text) !important;

  font-size: 17px !important;
  font-weight: 750 !important;
}

.setbonus-card p {
  margin: 0 !important;

  color: var(--sb-muted) !important;

  font-size: 13px;
  line-height: 1.65;
}


/* =========================================================
   SCORE ITEMS
   ========================================================= */

.setbonus-score {
  display: flex;
  align-items: center;

  gap: 13px;

  padding: 15px;

  border: 1px solid var(--sb-border);
  border-radius: 12px;

  background: var(--sb-card);
}

.setbonus-score-icon {
  display: grid;
  place-items: center;

  width: 40px;
  height: 40px;
  flex: 0 0 40px;

  border-radius: 10px;

  background: var(--sb-blue-soft);

  color: var(--sb-blue);
}

.setbonus-score-info {
  min-width: 0;
  flex: 1;
}

.setbonus-score-name {
  display: block;

  margin-bottom: 3px;

  color: var(--sb-text);

  font-size: 12px;
  font-weight: 700;
}

.setbonus-score-desc {
  color: var(--sb-muted);

  font-size: 10.5px;
}

.setbonus-score-value {
  flex: 0 0 auto;

  color: var(--sb-green);

  font-size: 13px;
  font-weight: 800;
}


/* =========================================================
   BONUSES
   ========================================================= */

.setbonus-bonus {
  position: relative;

  overflow: hidden;

  padding: 18px;

  border: 1px solid var(--sb-border);
  border-radius: 14px;

  background: var(--sb-card);
}

.setbonus-bonus::after {
  content: "";

  position: absolute;
  right: -35px;
  top: -35px;

  width: 90px;
  height: 90px;

  border-radius: 50%;

  background: var(--sb-blue-soft);
}

.setbonus-bonus-icon {
  display: grid;
  place-items: center;

  width: 37px;
  height: 37px;

  margin-bottom: 12px;

  border-radius: 9px;

  background: var(--sb-blue-soft);

  color: var(--sb-blue);
}

.setbonus-bonus h3 {
  margin: 0 0 5px !important;

  color: var(--sb-text) !important;

  font-size: 14px !important;
  font-weight: 750 !important;
}

.setbonus-bonus-rate {
  display: block;

  margin-bottom: 10px;

  color: var(--sb-green);

  font-size: 11px;
  font-weight: 800;
}

.setbonus-bonus-max {
  color: var(--sb-muted);

  font-size: 11px;
}

.setbonus-bonus.hp .setbonus-bonus-icon {
  color: var(--sb-red);
  background: var(--sb-red-soft);
}

.setbonus-bonus.excellent .setbonus-bonus-icon {
  color: var(--sb-gold);
  background: var(--sb-gold-soft);
}


/* =========================================================
   FORMULA
   ========================================================= */

.setbonus-formula {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap: 8px;

  padding: 18px;

  border: 1px solid var(--sb-border);
  border-radius: 14px;

  background: var(--sb-bg-soft);
}

.setbonus-formula-part {
  display: inline-flex;
  align-items: center;

  padding: 7px 10px;

  border: 1px solid var(--sb-border);
  border-radius: 8px;

  background: var(--sb-card);

  color: var(--sb-text);

  font-size: 11px;
  font-weight: 700;
}

.setbonus-formula-plus {
  color: var(--sb-subtle);

  font-weight: 800;
}


/* =========================================================
   TABLE
   ========================================================= */

.setbonus-table {
  width: 100%;

  overflow: hidden;

  border: 1px solid var(--sb-border);
  border-radius: 13px;
}

.setbonus-table-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 140px;

  border-top: 1px solid var(--sb-border);
}

.setbonus-table-row:first-child {
  border-top: 0;
}

.setbonus-table-row > div {
  padding: 11px 13px;

  color: var(--sb-muted);

  font-size: 12px;
}

.setbonus-table-row > div + div {
  border-left: 1px solid var(--sb-border);

  color: var(--sb-text);

  font-weight: 750;
}

.setbonus-table-head {
  background: var(--sb-bg-soft);
}

.setbonus-table-head > div {
  color: var(--sb-text);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;

  text-transform: uppercase;
}


/* =========================================================
   NOTE
   ========================================================= */

.setbonus-note {
  display: flex;
  align-items: flex-start;

  gap: 10px;

  margin-top: 14px;
  padding: 12px 14px;

  border: 1px solid var(--sb-border);
  border-radius: 11px;

  background: var(--sb-bg-soft);

  color: var(--sb-muted);

  font-size: 12px;
  line-height: 1.6;
}

.setbonus-note i {
  margin-top: 2px;

  color: var(--sb-gold);
}


/* =========================================================
   CLASSES
   ========================================================= */

.setbonus-classes {
  display: flex;
  flex-wrap: wrap;

  gap: 8px;
}

.setbonus-class {
  display: inline-flex;
  align-items: center;

  padding: 6px 9px;

  border: 1px solid var(--sb-border);
  border-radius: 7px;

  background: var(--sb-bg-soft);

  color: var(--sb-text);

  font-size: 11px;
  font-weight: 750;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

  .setbonus-overview {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .setbonus-grid-4 {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

}


@media (max-width: 900px) {

  .setbonus-hero-grid {
    grid-template-columns: 1fr;
  }

  .setbonus-hero-media {
    margin: 4px auto 0;
  }

}


@media (max-width: 750px) {

  .setbonus-grid-2,
  .setbonus-grid-4 {
    grid-template-columns: 1fr;
  }

  .setbonus-hero {
    padding: 22px;
  }

  .setbonus-hero h1 {
    font-size: 29px !important;
  }

}


@media (max-width: 520px) {

  .setbonus-overview {
    grid-template-columns: 1fr;
  }

  .setbonus-hero-media {
    max-width: 260px;
  }

  .setbonus-table-row {
    grid-template-columns: 1fr;
  }

  .setbonus-table-row > div + div {
    border-left: 0;
    border-top: 1px solid var(--sb-border);
  }

}

/* =========================================================
   MUELEON - CATCH-UP EXP SYSTEM
   HELIOS DARK + LIGHT
   ========================================================= */

:root,
:root[data-theme="light"] {
  --cu-bg: #ffffff;
  --cu-bg-soft: #f7f8fb;
  --cu-card: #ffffff;

  --cu-border: #e3e7ef;
  --cu-border-hover: #ccd3de;

  --cu-text: #15171c;
  --cu-muted: #687180;
  --cu-subtle: #9299a6;

  --cu-blue: #356fd6;
  --cu-blue-soft: rgba(53,111,214,.09);

  --cu-green: #168447;
  --cu-green-soft: rgba(22,132,71,.09);

  --cu-purple: #7c3aed;
  --cu-purple-soft: rgba(124,58,237,.09);

  --cu-gold: #b77900;
  --cu-gold-soft: rgba(183,121,0,.09);

  --cu-red: #dc3545;
  --cu-red-soft: rgba(220,53,69,.09);

  --cu-shadow: 0 10px 28px rgba(15,23,42,.055);
}


:root[data-theme="dark"] {
  --cu-bg: #15171c;
  --cu-bg-soft: #1b1e25;
  --cu-card: #181b21;

  --cu-border: #2b3039;
  --cu-border-hover: #414854;

  --cu-text: #f4f5f7;
  --cu-muted: #adb4c0;
  --cu-subtle: #858d9b;

  --cu-blue: #72a6ff;
  --cu-blue-soft: rgba(91,140,255,.10);

  --cu-green: #4ade80;
  --cu-green-soft: rgba(34,197,94,.09);

  --cu-purple: #c084fc;
  --cu-purple-soft: rgba(168,85,247,.09);

  --cu-gold: #fbbf24;
  --cu-gold-soft: rgba(245,158,11,.09);

  --cu-red: #fb7185;
  --cu-red-soft: rgba(244,63,94,.09);

  --cu-shadow: 0 14px 34px rgba(0,0,0,.20);
}


/* =========================================================
   PAGE
   ========================================================= */

.catchup-page {
  width: 100%;
  color: var(--cu-text);
}

.catchup-page *,
.catchup-page *::before,
.catchup-page *::after {
  box-sizing: border-box;
}

.catchup-section {
  margin: 0 0 40px;
}


/* =========================================================
   HERO
   ========================================================= */

.catchup-hero {
  position: relative;
  overflow: hidden;

  padding: 30px;

  border: 1px solid var(--cu-border);
  border-radius: 18px;

  background:
    radial-gradient(
      circle at 88% 5%,
      var(--cu-green-soft),
      transparent 34%
    ),
    radial-gradient(
      circle at 0 100%,
      var(--cu-blue-soft),
      transparent 38%
    ),
    var(--cu-bg);

  box-shadow: var(--cu-shadow);
}


/* HERO GRID */

.catchup-hero-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) 310px;

  gap: 34px;

  align-items: center;
}

.catchup-hero-content {
  min-width: 0;
}


/* KICKER */

.catchup-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  margin-bottom: 9px;

  color: var(--cu-green);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;

  text-transform: uppercase;
}


/* HERO TITLE */

.catchup-hero h1 {
  margin: 0 0 11px !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--cu-text) !important;

  font-size: 36px !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
}


/* HERO TEXT */

.catchup-hero p {
  max-width: 850px;

  margin: 0 !important;

  color: var(--cu-muted) !important;

  font-size: 14px;
  line-height: 1.75;
}


/* HERO IMAGE */

.catchup-hero-media {
  position: relative;

  width: 100%;
  max-width: 283px;

  aspect-ratio: 283 / 252;

  margin-left: auto;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  padding: 12px;

  border: 1px solid var(--cu-border);
  border-radius: 16px;

  background:
    radial-gradient(
      circle at center,
      var(--cu-green-soft),
      transparent 62%
    ),
    var(--cu-bg-soft);
}

.catchup-hero-media::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.035),
      transparent 45%
    );
}

.catchup-hero-media img {
  position: relative;
  z-index: 1;

  display: block !important;

  width: 100% !important;
  height: 100% !important;

  max-width: 283px;

  margin: 0 !important;

  object-fit: contain;
  object-position: center;

  border: 0 !important;
  border-radius: 10px !important;

  transition: transform .25s ease;
}

.catchup-hero-media:hover img {
  transform: scale(1.025);
}


/* =========================================================
   HERO OVERVIEW
   ========================================================= */

.catchup-overview {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));

  gap: 12px;

  margin-top: 24px;
}

.catchup-stat {
  padding: 14px;

  border: 1px solid var(--cu-border);
  border-radius: 12px;

  background: var(--cu-card);
}

.catchup-stat-label {
  display: block;

  margin-bottom: 5px;

  color: var(--cu-subtle);

  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;

  text-transform: uppercase;
}

.catchup-stat-value {
  color: var(--cu-text);

  font-size: 14px;
  font-weight: 750;
}


/* =========================================================
   SECTION HEADER
   ========================================================= */

.catchup-head {
  display: flex;
  align-items: center;

  gap: 13px;

  margin-bottom: 18px;
  padding-bottom: 14px;

  border-bottom: 1px solid var(--cu-border);
}

.catchup-head-icon {
  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;

  flex: 0 0 42px;

  border-radius: 11px;

  color: var(--cu-green);
  background: var(--cu-green-soft);
}

.catchup-head h2 {
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--cu-text) !important;

  font-size: 24px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}


/* =========================================================
   GRIDS
   ========================================================= */

.catchup-grid-2 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));

  gap: 16px;
}

.catchup-grid-3 {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));

  gap: 14px;
}


/* =========================================================
   CARDS
   ========================================================= */

.catchup-card {
  padding: 19px;

  border: 1px solid var(--cu-border);
  border-radius: 14px;

  background: var(--cu-card);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.catchup-card:hover {
  transform: translateY(-2px);

  border-color: var(--cu-border-hover);

  box-shadow: var(--cu-shadow);
}

.catchup-card h3 {
  margin: 0 0 10px !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--cu-text) !important;

  font-size: 17px !important;
  font-weight: 750 !important;
}

.catchup-card p {
  margin: 0 !important;

  color: var(--cu-muted) !important;

  font-size: 13px;
  line-height: 1.65;
}


/* =========================================================
   FORMULA
   ========================================================= */

.catchup-formula {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap: 8px;

  padding: 18px;

  border: 1px solid var(--cu-border);
  border-radius: 14px;

  background: var(--cu-bg-soft);
}

.catchup-formula-part {
  display: inline-flex;
  align-items: center;

  padding: 7px 10px;

  border: 1px solid var(--cu-border);
  border-radius: 8px;

  background: var(--cu-card);

  color: var(--cu-text);

  font-size: 11px;
  font-weight: 700;
}

.catchup-formula-op {
  color: var(--cu-subtle);

  font-weight: 800;
}


/* =========================================================
   BONUS GAP
   ========================================================= */

.catchup-gap {
  overflow: hidden;

  border: 1px solid var(--cu-border);
  border-radius: 13px;

  background: var(--cu-card);
}

.catchup-gap-row {
  display: grid;
  grid-template-columns: 150px minmax(0,1fr) 90px;

  gap: 12px;

  align-items: center;

  padding: 11px 13px;

  border-top: 1px solid var(--cu-border);
}

.catchup-gap-row:first-child {
  border-top: 0;
}

.catchup-gap-label {
  color: var(--cu-text);

  font-size: 12px;
  font-weight: 700;
}

.catchup-gap-bar {
  height: 7px;

  overflow: hidden;

  border-radius: 999px;

  background: var(--cu-bg-soft);
}

.catchup-gap-fill {
  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      var(--cu-blue),
      var(--cu-green)
    );
}

.catchup-gap-value {
  color: var(--cu-green);

  text-align: right;

  font-size: 12px;
  font-weight: 800;
}


/* =========================================================
   TABLE
   ========================================================= */

.catchup-table {
  overflow: hidden;

  border: 1px solid var(--cu-border);
  border-radius: 13px;
}

.catchup-table-row {
  display: grid;
  grid-template-columns: 120px 160px 160px 1fr;

  border-top: 1px solid var(--cu-border);
}

.catchup-table-row:first-child {
  border-top: 0;
}

.catchup-table-row > div {
  padding: 10px 12px;

  color: var(--cu-muted);

  font-size: 11.5px;
}

.catchup-table-row > div + div {
  border-left: 1px solid var(--cu-border);
}

.catchup-table-head {
  background: var(--cu-bg-soft);
}

.catchup-table-head > div {
  color: var(--cu-text);

  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .06em;

  text-transform: uppercase;
}


/* =========================================================
   NOTES
   ========================================================= */

.catchup-note {
  display: flex;
  align-items: flex-start;

  gap: 10px;

  margin-top: 14px;
  padding: 12px 14px;

  border: 1px solid var(--cu-border);
  border-radius: 11px;

  background: var(--cu-bg-soft);

  color: var(--cu-muted);

  font-size: 12px;
  line-height: 1.6;
}

.catchup-note i {
  margin-top: 2px;

  color: var(--cu-gold);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

  .catchup-overview {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .catchup-grid-3 {
    grid-template-columns: 1fr;
  }

  .catchup-table-row {
    grid-template-columns: 100px 130px 130px 1fr;
  }

}


@media (max-width: 900px) {

  .catchup-hero-grid {
    grid-template-columns: 1fr;
  }

  .catchup-hero-media {
    margin: 4px auto 0;
  }

}


@media (max-width: 750px) {

  .catchup-grid-2 {
    grid-template-columns: 1fr;
  }

  .catchup-hero {
    padding: 22px;
  }

  .catchup-hero h1 {
    font-size: 29px !important;
  }

  .catchup-gap-row {
    grid-template-columns: 1fr;
  }

  .catchup-gap-value {
    text-align: left;
  }

  .catchup-table-row {
    grid-template-columns: 1fr;
  }

  .catchup-table-row > div + div {
    border-left: 0;
    border-top: 1px solid var(--cu-border);
  }

}


@media (max-width: 520px) {

  .catchup-overview {
    grid-template-columns: 1fr;
  }

  .catchup-hero-media {
    max-width: 260px;
  }

}

/* =========================================================
   MUELEON - TOP PROGRESS LOCK
   HELIOS DARK + LIGHT
   ========================================================= */

:root,
:root[data-theme="light"] {
  --tpl-bg: #ffffff;
  --tpl-bg-soft: #f7f8fb;
  --tpl-card: #ffffff;

  --tpl-border: #e3e7ef;
  --tpl-border-hover: #ccd3de;

  --tpl-text: #15171c;
  --tpl-muted: #687180;
  --tpl-subtle: #9299a6;

  --tpl-blue: #356fd6;
  --tpl-blue-soft: rgba(53,111,214,.09);

  --tpl-green: #168447;
  --tpl-green-soft: rgba(22,132,71,.09);

  --tpl-purple: #7c3aed;
  --tpl-purple-soft: rgba(124,58,237,.09);

  --tpl-gold: #b77900;
  --tpl-gold-soft: rgba(183,121,0,.09);

  --tpl-red: #dc3545;
  --tpl-red-soft: rgba(220,53,69,.09);

  --tpl-shadow: 0 10px 28px rgba(15,23,42,.055);
}

:root[data-theme="dark"] {
  --tpl-bg: #15171c;
  --tpl-bg-soft: #1b1e25;
  --tpl-card: #181b21;

  --tpl-border: #2b3039;
  --tpl-border-hover: #414854;

  --tpl-text: #f4f5f7;
  --tpl-muted: #adb4c0;
  --tpl-subtle: #858d9b;

  --tpl-blue: #72a6ff;
  --tpl-blue-soft: rgba(91,140,255,.10);

  --tpl-green: #4ade80;
  --tpl-green-soft: rgba(34,197,94,.09);

  --tpl-purple: #c084fc;
  --tpl-purple-soft: rgba(168,85,247,.09);

  --tpl-gold: #fbbf24;
  --tpl-gold-soft: rgba(245,158,11,.09);

  --tpl-red: #fb7185;
  --tpl-red-soft: rgba(244,63,94,.09);

  --tpl-shadow: 0 14px 34px rgba(0,0,0,.20);
}


/* =========================================================
   PAGE
   ========================================================= */

.toplock-page {
  width: 100%;
  color: var(--tpl-text);
}

.toplock-page *,
.toplock-page *::before,
.toplock-page *::after {
  box-sizing: border-box;
}

.toplock-section {
  margin: 0 0 40px;
}


/* =========================================================
   HERO
   ========================================================= */

.toplock-hero {
  position: relative;
  overflow: hidden;

  padding: 30px;

  border: 1px solid var(--tpl-border);
  border-radius: 18px;

  background:
    radial-gradient(
      circle at 88% 5%,
      var(--tpl-gold-soft),
      transparent 34%
    ),
    radial-gradient(
      circle at 0 100%,
      var(--tpl-blue-soft),
      transparent 38%
    ),
    var(--tpl-bg);

  box-shadow: var(--tpl-shadow);
}

.toplock-hero-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) 310px;
  gap: 34px;
  align-items: center;
}

.toplock-hero-content {
  min-width: 0;
}

.toplock-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  margin-bottom: 9px;

  color: var(--tpl-gold);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.toplock-hero h1 {
  margin: 0 0 11px !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--tpl-text) !important;

  font-size: 36px !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
}

.toplock-hero p {
  max-width: 860px;

  margin: 0 !important;

  color: var(--tpl-muted) !important;

  font-size: 14px;
  line-height: 1.75;
}


/* HERO IMAGE */

.toplock-hero-media {
  position: relative;

  width: 100%;
  max-width: 283px;
  aspect-ratio: 283 / 252;

  margin-left: auto;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  padding: 12px;

  border: 1px solid var(--tpl-border);
  border-radius: 16px;

  background:
    radial-gradient(
      circle at center,
      var(--tpl-gold-soft),
      transparent 62%
    ),
    var(--tpl-bg-soft);
}

.toplock-hero-media::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.035),
      transparent 45%
    );
}

.toplock-hero-media img {
  position: relative;
  z-index: 1;

  display: block !important;

  width: 100% !important;
  height: 100% !important;

  max-width: 283px;

  margin: 0 !important;

  object-fit: contain;
  object-position: center;

  border: 0 !important;
  border-radius: 10px !important;

  transition: transform .25s ease;
}

.toplock-hero-media:hover img {
  transform: scale(1.025);
}


/* =========================================================
   OVERVIEW
   ========================================================= */

.toplock-overview {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));

  gap: 12px;

  margin-top: 24px;
}

.toplock-stat {
  padding: 14px;

  border: 1px solid var(--tpl-border);
  border-radius: 12px;

  background: var(--tpl-card);
}

.toplock-stat-label {
  display: block;

  margin-bottom: 5px;

  color: var(--tpl-subtle);

  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.toplock-stat-value {
  color: var(--tpl-text);

  font-size: 14px;
  font-weight: 750;
}


/* =========================================================
   SECTION HEAD
   ========================================================= */

.toplock-head {
  display: flex;
  align-items: center;

  gap: 13px;

  margin-bottom: 18px;
  padding-bottom: 14px;

  border-bottom: 1px solid var(--tpl-border);
}

.toplock-head-icon {
  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;
  flex: 0 0 42px;

  border-radius: 11px;

  color: var(--tpl-gold);
  background: var(--tpl-gold-soft);
}

.toplock-head h2 {
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--tpl-text) !important;

  font-size: 24px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}


/* =========================================================
   GRIDS
   ========================================================= */

.toplock-grid-2 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));

  gap: 16px;
}

.toplock-grid-3 {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));

  gap: 14px;
}


/* =========================================================
   CARDS
   ========================================================= */

.toplock-card {
  padding: 19px;

  border: 1px solid var(--tpl-border);
  border-radius: 14px;

  background: var(--tpl-card);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.toplock-card:hover {
  transform: translateY(-2px);

  border-color: var(--tpl-border-hover);

  box-shadow: var(--tpl-shadow);
}

.toplock-card h3 {
  margin: 0 0 10px !important;
  padding: 0 !important;

  border: 0 !important;

  color: var(--tpl-text) !important;

  font-size: 17px !important;
  font-weight: 750 !important;
}

.toplock-card p {
  margin: 0 !important;

  color: var(--tpl-muted) !important;

  font-size: 13px;
  line-height: 1.65;
}


/* =========================================================
   FLOW
   ========================================================= */

.toplock-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap: 8px;

  padding: 18px;

  border: 1px solid var(--tpl-border);
  border-radius: 14px;

  background: var(--tpl-bg-soft);
}

.toplock-flow-part {
  display: inline-flex;
  align-items: center;

  padding: 7px 10px;

  border: 1px solid var(--tpl-border);
  border-radius: 8px;

  background: var(--tpl-card);

  color: var(--tpl-text);

  font-size: 11px;
  font-weight: 700;
}

.toplock-flow-op {
  color: var(--tpl-subtle);

  font-weight: 800;
}


/* =========================================================
   TABLE
   ========================================================= */

.toplock-table {
  overflow: hidden;

  border: 1px solid var(--tpl-border);
  border-radius: 13px;
}

.toplock-table-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 180px;

  border-top: 1px solid var(--tpl-border);
}

.toplock-table-row:first-child {
  border-top: 0;
}

.toplock-table-row > div {
  padding: 11px 13px;

  color: var(--tpl-muted);

  font-size: 12px;
}

.toplock-table-row > div + div {
  border-left: 1px solid var(--tpl-border);

  color: var(--tpl-text);

  font-weight: 750;
}

.toplock-table-head {
  background: var(--tpl-bg-soft);
}

.toplock-table-head > div {
  color: var(--tpl-text);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}


/* =========================================================
   BADGES
   ========================================================= */

.toplock-badges {
  display: flex;
  flex-wrap: wrap;

  gap: 8px;
}

.toplock-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 7px 10px;

  border: 1px solid var(--tpl-border);
  border-radius: 999px;

  background: var(--tpl-bg-soft);

  color: var(--tpl-text);

  font-size: 11px;
  font-weight: 750;
}

.toplock-badge.green {
  color: var(--tpl-green);
  background: var(--tpl-green-soft);
}

.toplock-badge.gold {
  color: var(--tpl-gold);
  background: var(--tpl-gold-soft);
}

.toplock-badge.red {
  color: var(--tpl-red);
  background: var(--tpl-red-soft);
}


/* =========================================================
   NOTE
   ========================================================= */

.toplock-note {
  display: flex;
  align-items: flex-start;

  gap: 10px;

  margin-top: 14px;
  padding: 12px 14px;

  border: 1px solid var(--tpl-border);
  border-radius: 11px;

  background: var(--tpl-bg-soft);

  color: var(--tpl-muted);

  font-size: 12px;
  line-height: 1.6;
}

.toplock-note i {
  margin-top: 2px;

  color: var(--tpl-gold);
}


/* =========================================================
   BENEFIT CARDS
   ========================================================= */

.toplock-benefit {
  padding: 18px;

  border: 1px solid var(--tpl-border);
  border-radius: 14px;

  background: var(--tpl-card);
}

.toplock-benefit-icon {
  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;

  margin-bottom: 12px;

  border-radius: 10px;

  color: var(--tpl-green);
  background: var(--tpl-green-soft);
}

.toplock-benefit h3 {
  margin: 0 0 8px !important;

  color: var(--tpl-text) !important;

  font-size: 15px !important;
  font-weight: 750 !important;
}

.toplock-benefit p {
  margin: 0 !important;

  color: var(--tpl-muted) !important;

  font-size: 12px;
  line-height: 1.6;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

  .toplock-overview {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .toplock-grid-3 {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 900px) {

  .toplock-hero-grid {
    grid-template-columns: 1fr;
  }

  .toplock-hero-media {
    margin: 4px auto 0;
  }

}

@media (max-width: 750px) {

  .toplock-grid-2 {
    grid-template-columns: 1fr;
  }

  .toplock-hero {
    padding: 22px;
  }

  .toplock-hero h1 {
    font-size: 29px !important;
  }

}

@media (max-width: 520px) {

  .toplock-overview {
    grid-template-columns: 1fr;
  }

  .toplock-table-row {
    grid-template-columns: 1fr;
  }

  .toplock-table-row > div + div {
    border-left: 0;
    border-top: 1px solid var(--tpl-border);
  }

  .toplock-hero-media {
    max-width: 260px;
  }

}

/* =========================================================
   MUELEON - SCRAMBLE EVENT
   HELIOS DARK + LIGHT
   ========================================================= */

:root,
:root[data-theme="light"] {
  --scr-bg: #ffffff;
  --scr-bg-soft: #f7f8fb;
  --scr-card: #ffffff;

  --scr-border: #e3e7ef;
  --scr-border-hover: #ccd3de;

  --scr-text: #15171c;
  --scr-muted: #687180;
  --scr-subtle: #9299a6;

  --scr-blue: #356fd6;
  --scr-blue-soft: rgba(53,111,214,.09);

  --scr-green: #168447;
  --scr-green-soft: rgba(22,132,71,.09);

  --scr-yellow: #b77900;
  --scr-yellow-soft: rgba(183,121,0,.09);

  --scr-red: #dc3545;
  --scr-red-soft: rgba(220,53,69,.09);

  --scr-purple: #7c3aed;
  --scr-purple-soft: rgba(124,58,237,.09);

  --scr-shadow: 0 10px 28px rgba(15,23,42,.055);
}

:root[data-theme="dark"] {
  --scr-bg: #15171c;
  --scr-bg-soft: #1b1e25;
  --scr-card: #181b21;

  --scr-border: #2b3039;
  --scr-border-hover: #414854;

  --scr-text: #f4f5f7;
  --scr-muted: #adb4c0;
  --scr-subtle: #858d9b;

  --scr-blue: #72a6ff;
  --scr-blue-soft: rgba(91,140,255,.10);

  --scr-green: #4ade80;
  --scr-green-soft: rgba(34,197,94,.09);

  --scr-yellow: #fbbf24;
  --scr-yellow-soft: rgba(245,158,11,.09);

  --scr-red: #fb7185;
  --scr-red-soft: rgba(244,63,94,.09);

  --scr-purple: #c084fc;
  --scr-purple-soft: rgba(168,85,247,.09);

  --scr-shadow: 0 14px 34px rgba(0,0,0,.20);
}


/* =========================================================
   PAGE
   ========================================================= */

.scramble-page {
  width: 100%;
  color: var(--scr-text);
}

.scramble-page *,
.scramble-page *::before,
.scramble-page *::after {
  box-sizing: border-box;
}

.scramble-section {
  margin: 0 0 40px;
}


/* =========================================================
   HERO
   ========================================================= */

.scramble-hero {
  position: relative;
  overflow: hidden;

  padding: 30px;

  border: 1px solid var(--scr-border);
  border-radius: 20px;

  background:
    radial-gradient(circle at 85% 10%, var(--scr-purple-soft), transparent 30%),
    radial-gradient(circle at 0 100%, var(--scr-blue-soft), transparent 36%),
    var(--scr-bg);

  box-shadow: var(--scr-shadow);
}

.scramble-hero-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) 420px;
  gap: 30px;
  align-items: center;
}

.scramble-hero-content {
  min-width: 0;
}

.scramble-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  margin-bottom: 10px;

  color: var(--scr-purple);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.scramble-hero h1 {
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;

  color: var(--scr-text) !important;

  font-size: 36px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
}

.scramble-hero p {
  margin: 0 !important;
  max-width: 760px;

  color: var(--scr-muted) !important;

  font-size: 14px;
  line-height: 1.75;
}

.scramble-hero-media {
  position: relative;

  width: 100%;
  min-height: 280px;

  overflow: hidden;

  border: 1px solid var(--scr-border);
  border-radius: 18px;

  background: var(--scr-bg-soft);
}

.scramble-hero-media::after {
  content: "";

  position: absolute;
  inset: 0;

  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.05));
  pointer-events: none;
}

.scramble-hero-media img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 280px;

  object-fit: cover;
  object-position: center;

  border: 0 !important;
  margin: 0 !important;
}

.scramble-overview {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 12px;

  margin-top: 22px;
}

.scramble-stat {
  padding: 14px;

  border: 1px solid var(--scr-border);
  border-radius: 12px;

  background: var(--scr-card);
}

.scramble-stat-label {
  display: block;
  margin-bottom: 5px;

  color: var(--scr-subtle);

  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.scramble-stat-value {
  color: var(--scr-text);

  font-size: 14px;
  font-weight: 750;
}


/* =========================================================
   HEAD
   ========================================================= */

.scramble-head {
  display: flex;
  align-items: center;
  gap: 13px;

  margin-bottom: 18px;
  padding-bottom: 14px;

  border-bottom: 1px solid var(--scr-border);
}

.scramble-head-icon {
  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;
  flex: 0 0 42px;

  border-radius: 11px;

  color: var(--scr-purple);
  background: var(--scr-purple-soft);
}

.scramble-head h2 {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;

  color: var(--scr-text) !important;

  font-size: 24px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}


/* =========================================================
   GRID / CARD
   ========================================================= */

.scramble-grid-2 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 16px;
}

.scramble-grid-3 {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 16px;
}

.scramble-card {
  padding: 20px;

  border: 1px solid var(--scr-border);
  border-radius: 16px;

  background: var(--scr-card);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.scramble-card:hover {
  transform: translateY(-2px);
  border-color: var(--scr-border-hover);
  box-shadow: var(--scr-shadow);
}

.scramble-card h3 {
  margin: 0 0 10px !important;
  padding: 0 !important;
  border: 0 !important;

  color: var(--scr-text) !important;

  font-size: 18px !important;
  font-weight: 750 !important;
}

.scramble-card p {
  margin: 0 !important;

  color: var(--scr-muted) !important;

  font-size: 13px;
  line-height: 1.7;
}


/* =========================================================
   DIFFICULTY CARDS
   ========================================================= */

.scramble-difficulty {
  position: relative;
  overflow: hidden;

  padding: 20px;

  border: 1px solid var(--scr-border);
  border-radius: 16px;

  background: var(--scr-card);
}

.scramble-difficulty::after {
  content: "";

  position: absolute;
  right: -35px;
  top: -35px;

  width: 90px;
  height: 90px;
  border-radius: 50%;
  opacity: .9;
}

.scramble-difficulty.low::after {
  background: var(--scr-green-soft);
}

.scramble-difficulty.medium::after {
  background: var(--scr-yellow-soft);
}

.scramble-difficulty.hard::after {
  background: var(--scr-red-soft);
}

.scramble-tier {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin-bottom: 10px;
  padding: 6px 10px;

  border-radius: 999px;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.scramble-tier.low {
  color: var(--scr-green);
  background: var(--scr-green-soft);
}

.scramble-tier.medium {
  color: var(--scr-yellow);
  background: var(--scr-yellow-soft);
}

.scramble-tier.hard {
  color: var(--scr-red);
  background: var(--scr-red-soft);
}

.scramble-difficulty h3 {
  margin: 0 0 14px !important;

  color: var(--scr-text) !important;

  font-size: 22px !important;
  font-weight: 800 !important;
}

.scramble-list {
  display: grid;
  gap: 10px;
}

.scramble-list-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;

  padding: 10px 12px;

  border: 1px solid var(--scr-border);
  border-radius: 10px;

  background: var(--scr-bg-soft);
}

.scramble-list-label {
  color: var(--scr-muted);
  font-size: 12px;
}

.scramble-list-value {
  color: var(--scr-text);
  font-size: 12px;
  font-weight: 750;
  text-align: right;
}


/* =========================================================
   FLOW
   ========================================================= */

.scramble-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;

  padding: 18px;

  border: 1px solid var(--scr-border);
  border-radius: 14px;

  background: var(--scr-bg-soft);
}

.scramble-flow-part {
  display: inline-flex;
  align-items: center;

  padding: 8px 11px;

  border: 1px solid var(--scr-border);
  border-radius: 8px;

  background: var(--scr-card);

  color: var(--scr-text);

  font-size: 11px;
  font-weight: 700;
}

.scramble-flow-op {
  color: var(--scr-subtle);
  font-weight: 800;
}


/* =========================================================
   REWARD / TIP / SUMMARY BLOCKS
   ========================================================= */

.scramble-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.scramble-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  padding: 8px 12px;

  border: 1px solid var(--scr-border);
  border-radius: 999px;

  background: var(--scr-bg-soft);

  color: var(--scr-text);

  font-size: 11px;
  font-weight: 750;
}

.scramble-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  margin-top: 14px;
  padding: 13px 14px;

  border: 1px solid var(--scr-border);
  border-radius: 12px;

  background: var(--scr-bg-soft);

  color: var(--scr-muted);

  font-size: 12px;
  line-height: 1.65;
}

.scramble-note i {
  margin-top: 2px;
  color: var(--scr-blue);
}

.scramble-tips {
  display: grid;
  gap: 12px;
}

.scramble-tip {
  display: flex;
  align-items: flex-start;
  gap: 12px;

  padding: 14px 15px;

  border: 1px solid var(--scr-border);
  border-radius: 12px;

  background: var(--scr-card);
}

.scramble-tip-icon {
  display: grid;
  place-items: center;

  width: 34px;
  height: 34px;
  flex: 0 0 34px;

  border-radius: 9px;

  color: var(--scr-blue);
  background: var(--scr-blue-soft);
}

.scramble-tip strong {
  display: block;
  margin-bottom: 4px;

  color: var(--scr-text);
  font-size: 13px;
}

.scramble-tip span {
  color: var(--scr-muted);
  font-size: 12px;
  line-height: 1.6;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {
  .scramble-overview {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .scramble-grid-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 920px) {
  .scramble-hero-grid {
    grid-template-columns: 1fr;
  }

  .scramble-hero-media {
    min-height: 240px;
  }
}

@media (max-width: 750px) {
  .scramble-grid-2 {
    grid-template-columns: 1fr;
  }

  .scramble-hero {
    padding: 22px;
  }

  .scramble-hero h1 {
    font-size: 29px !important;
  }
}

@media (max-width: 520px) {
  .scramble-overview {
    grid-template-columns: 1fr;
  }

  .scramble-list-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .scramble-list-value {
    text-align: left;
  }
}

/* =========================================================
   MUELEON - DUNGEON SYSTEM
   HELIOS DARK + LIGHT
   ========================================================= */

:root,
:root[data-theme="light"] {
  --dg-bg: #ffffff;
  --dg-bg-soft: #f7f8fb;
  --dg-card: #ffffff;

  --dg-border: #e2e6ed;
  --dg-border-hover: #cbd2dd;

  --dg-text: #17181c;
  --dg-muted: #687180;
  --dg-subtle: #9098a6;

  --dg-blue: #356fd6;
  --dg-blue-soft: rgba(53,111,214,.09);

  --dg-green: #168447;
  --dg-green-soft: rgba(22,132,71,.09);

  --dg-gold: #b77900;
  --dg-gold-soft: rgba(183,121,0,.09);

  --dg-purple: #7c3aed;
  --dg-purple-soft: rgba(124,58,237,.09);

  --dg-red: #dc3545;
  --dg-red-soft: rgba(220,53,69,.09);

  --dg-shadow: 0 10px 28px rgba(15,23,42,.055);
}

:root[data-theme="dark"] {
  --dg-bg: #15171c;
  --dg-bg-soft: #1b1e25;
  --dg-card: #181b21;

  --dg-border: #2b3039;
  --dg-border-hover: #414854;

  --dg-text: #f4f5f7;
  --dg-muted: #adb4c0;
  --dg-subtle: #858d9b;

  --dg-blue: #72a6ff;
  --dg-blue-soft: rgba(91,140,255,.10);

  --dg-green: #4ade80;
  --dg-green-soft: rgba(34,197,94,.09);

  --dg-gold: #fbbf24;
  --dg-gold-soft: rgba(245,158,11,.09);

  --dg-purple: #c084fc;
  --dg-purple-soft: rgba(168,85,247,.09);

  --dg-red: #fb7185;
  --dg-red-soft: rgba(244,63,94,.09);

  --dg-shadow: 0 14px 34px rgba(0,0,0,.20);
}


/* PAGE */

.dgs-page {
  width: 100%;
  color: var(--dg-text);
}

.dgs-page *,
.dgs-page *::before,
.dgs-page *::after {
  box-sizing: border-box;
}

.dgs-section {
  margin: 0 0 42px;
}


/* HERO */

.dgs-hero {
  position: relative;
  overflow: hidden;

  padding: 30px;

  border: 1px solid var(--dg-border);
  border-radius: 20px;

  background:
    radial-gradient(circle at 88% 5%, var(--dg-purple-soft), transparent 34%),
    radial-gradient(circle at 0 100%, var(--dg-blue-soft), transparent 38%),
    var(--dg-bg);

  box-shadow: var(--dg-shadow);
}

.dgs-hero-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) 430px;
  gap: 30px;
  align-items: center;
}

.dgs-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  margin-bottom: 9px;

  color: var(--dg-purple);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.dgs-hero h1 {
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;

  color: var(--dg-text) !important;

  font-size: 38px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
}

.dgs-hero p {
  max-width: 820px;

  margin: 0 !important;

  color: var(--dg-muted) !important;

  font-size: 14px;
  line-height: 1.75;
}

.dgs-hero-media {
  overflow: hidden;

  min-height: 270px;

  border: 1px solid var(--dg-border);
  border-radius: 18px;

  background: var(--dg-bg-soft);
}

.dgs-hero-media img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;
  min-height: 270px;

  margin: 0 !important;

  object-fit: cover;
  object-position: center;

  border: 0 !important;
}


/* OVERVIEW */

.dgs-overview {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));

  gap: 12px;

  margin-top: 24px;
}

.dgs-stat {
  padding: 14px;

  border: 1px solid var(--dg-border);
  border-radius: 12px;

  background: var(--dg-card);
}

.dgs-stat-label {
  display: block;

  margin-bottom: 5px;

  color: var(--dg-subtle);

  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.dgs-stat-value {
  color: var(--dg-text);

  font-size: 14px;
  font-weight: 750;
}


/* SECTION HEAD */

.dgs-head {
  display: flex;
  align-items: center;
  gap: 13px;

  margin-bottom: 18px;
  padding-bottom: 14px;

  border-bottom: 1px solid var(--dg-border);
}

.dgs-head-icon {
  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;
  flex: 0 0 42px;

  border-radius: 11px;

  color: var(--dg-purple);
  background: var(--dg-purple-soft);
}

.dgs-head h2 {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;

  color: var(--dg-text) !important;

  font-size: 25px !important;
  font-weight: 800 !important;
}


/* GRID */

.dgs-grid-2 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 16px;
}

.dgs-grid-3 {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 16px;
}

.dgs-grid-4 {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 14px;
}


/* CARD */

.dgs-card {
  padding: 19px;

  border: 1px solid var(--dg-border);
  border-radius: 15px;

  background: var(--dg-card);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.dgs-card:hover {
  transform: translateY(-2px);
  border-color: var(--dg-border-hover);
  box-shadow: var(--dg-shadow);
}

.dgs-card h3 {
  margin: 0 0 10px !important;
  padding: 0 !important;

  color: var(--dg-text) !important;

  font-size: 17px !important;
  font-weight: 750 !important;
}

.dgs-card p {
  margin: 0 !important;

  color: var(--dg-muted) !important;

  font-size: 13px;
  line-height: 1.7;
}


/* MEDIA */

.dgs-media {
  overflow: hidden;

  border: 1px solid var(--dg-border);
  border-radius: 17px;

  background: var(--dg-bg-soft);
}

.dgs-media img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;
  min-height: 270px;

  margin: 0 !important;

  object-fit: cover;
  object-position: center;

  border: 0 !important;
}


/* DUNGEON CARDS */

.dgs-dungeon {
  overflow: hidden;

  border: 1px solid var(--dg-border);
  border-radius: 16px;

  background: var(--dg-card);
}

.dgs-dungeon-image {
  height: 150px;

  overflow: hidden;

  background: var(--dg-bg-soft);
}

.dgs-dungeon-image img {
  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;

  object-fit: cover;

  border: 0 !important;
}

.dgs-dungeon-content {
  padding: 17px;
}

.dgs-dungeon-content h3 {
  margin: 0 0 6px !important;

  color: var(--dg-text) !important;

  font-size: 17px !important;
  font-weight: 800 !important;
}

.dgs-dungeon-content p {
  margin: 0 0 13px !important;

  color: var(--dg-muted) !important;

  font-size: 12px;
  line-height: 1.6;
}

.dgs-dungeon-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.dgs-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  padding: 6px 9px;

  border: 1px solid var(--dg-border);
  border-radius: 999px;

  background: var(--dg-bg-soft);

  color: var(--dg-text);

  font-size: 10.5px;
  font-weight: 700;
}


/* DIFFICULTY */

.dgs-tier {
  padding: 18px;

  border: 1px solid var(--dg-border);
  border-radius: 14px;

  background: var(--dg-card);
}

.dgs-tier-name {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  margin-bottom: 12px;
  padding: 6px 9px;

  border-radius: 999px;

  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.dgs-tier.normal .dgs-tier-name {
  color: var(--dg-green);
  background: var(--dg-green-soft);
}

.dgs-tier.expert .dgs-tier-name {
  color: var(--dg-gold);
  background: var(--dg-gold-soft);
}

.dgs-tier.nightmare .dgs-tier-name {
  color: var(--dg-red);
  background: var(--dg-red-soft);
}

.dgs-tier h3 {
  margin: 0 0 12px !important;

  color: var(--dg-text) !important;

  font-size: 18px !important;
  font-weight: 800 !important;
}

.dgs-tier-list {
  display: grid;
  gap: 8px;
}

.dgs-tier-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;

  padding: 9px 10px;

  border: 1px solid var(--dg-border);
  border-radius: 9px;

  background: var(--dg-bg-soft);

  font-size: 11px;
}

.dgs-tier-row span:first-child {
  color: var(--dg-muted);
}

.dgs-tier-row span:last-child {
  color: var(--dg-text);
  font-weight: 750;
}


/* PARTY EXP */

.dgs-exp-table {
  overflow: hidden;

  border: 1px solid var(--dg-border);
  border-radius: 13px;
}

.dgs-exp-row {
  display: grid;
  grid-template-columns: 150px repeat(5,minmax(80px,1fr));

  border-top: 1px solid var(--dg-border);
}

.dgs-exp-row:first-child {
  border-top: 0;
}

.dgs-exp-row > div {
  padding: 10px 12px;

  color: var(--dg-muted);

  font-size: 11px;
  text-align: center;
}

.dgs-exp-row > div:first-child {
  text-align: left;
}

.dgs-exp-row > div + div {
  border-left: 1px solid var(--dg-border);
}

.dgs-exp-head {
  background: var(--dg-bg-soft);
}

.dgs-exp-head > div {
  color: var(--dg-text);

  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.dgs-exp-boost {
  color: var(--dg-green) !important;
  font-weight: 800;
}


/* FLOW */

.dgs-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;

  padding: 18px;

  border: 1px solid var(--dg-border);
  border-radius: 14px;

  background: var(--dg-bg-soft);
}

.dgs-flow-part {
  display: inline-flex;
  align-items: center;

  padding: 7px 10px;

  border: 1px solid var(--dg-border);
  border-radius: 8px;

  background: var(--dg-card);

  color: var(--dg-text);

  font-size: 11px;
  font-weight: 700;
}

.dgs-flow-op {
  color: var(--dg-subtle);
  font-weight: 800;
}


/* TABLE */

.dgs-table {
  overflow: hidden;

  border: 1px solid var(--dg-border);
  border-radius: 13px;
}

.dgs-table-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 380px;
  border-top: 1px solid var(--dg-border);
}

.dgs-table-row:first-child {
  border-top: 0;
}

.dgs-table-row > div {
  padding: 11px 13px;

  color: var(--dg-muted);

  font-size: 12px;
}

.dgs-table-row > div + div {
  border-left: 1px solid var(--dg-border);

  color: var(--dg-text);

  font-weight: 750;
}

.dgs-table-head {
  background: var(--dg-bg-soft);
}

.dgs-table-head > div {
  color: var(--dg-text);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}


/* NOTE */

.dgs-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  margin-top: 14px;
  padding: 12px 14px;

  border: 1px solid var(--dg-border);
  border-radius: 11px;

  background: var(--dg-bg-soft);

  color: var(--dg-muted);

  font-size: 12px;
  line-height: 1.65;
}

.dgs-note i {
  margin-top: 2px;
  color: var(--dg-gold);
}


/* AFFIX */

.dgs-affix {
  padding: 17px;

  border: 1px solid var(--dg-border);
  border-radius: 14px;

  background: var(--dg-card);
}

.dgs-affix-icon {
  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;

  margin-bottom: 11px;

  border-radius: 10px;

  color: var(--dg-purple);
  background: var(--dg-purple-soft);
}

.dgs-affix h3 {
  margin: 0 0 6px !important;

  color: var(--dg-text) !important;

  font-size: 15px !important;
  font-weight: 800 !important;
}

.dgs-affix p {
  margin: 0 !important;

  color: var(--dg-muted) !important;

  font-size: 11.5px;
  line-height: 1.6;
}


/* RESPONSIVE */

@media (max-width: 1150px) {
  .dgs-overview {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .dgs-grid-4 {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .dgs-exp-row {
    grid-template-columns: 130px repeat(5,1fr);
  }
}

@media (max-width: 950px) {
  .dgs-hero-grid,
  .dgs-grid-2 {
    grid-template-columns: 1fr;
  }

  .dgs-grid-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .dgs-hero {
    padding: 22px;
  }

  .dgs-hero h1 {
    font-size: 30px !important;
  }

  .dgs-overview,
  .dgs-grid-4 {
    grid-template-columns: 1fr;
  }

  .dgs-exp-table {
    overflow-x: auto;
  }

  .dgs-exp-row {
    min-width: 680px;
  }

  .dgs-table-row {
    grid-template-columns: 1fr;
  }

  .dgs-table-row > div + div {
    border-left: 0;
    border-top: 1px solid var(--dg-border);
  }
}

/* =========================================================
   ABOUT ELEON - QUEST SYSTEM
   ========================================================= */

.eleon-feature-main {
  min-width: 0;
}

.eleon-number-card-icon {
  display: grid;
  place-items: center;

  width: 34px;
  height: 34px;

  margin-bottom: 10px;

  border-radius: 9px;

  color: var(--eleon-accent, #72a6ff);
  background: rgba(91, 140, 255, .10);
}

.eleon-quest-types {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 16px;

  margin-top: 22px;
}

.eleon-quest-type {
  display: flex;
  align-items: flex-start;

  gap: 13px;

  padding: 18px;

  border: 1px solid var(--border-color, rgba(255,255,255,.10));
  border-radius: 14px;

  background: var(--card-bg, rgba(255,255,255,.025));
}

.eleon-quest-type-icon {
  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;
  flex: 0 0 38px;

  border-radius: 10px;

  color: var(--eleon-accent, #72a6ff);
  background: rgba(91, 140, 255, .10);
}

.eleon-quest-type-label {
  display: block;

  margin-bottom: 4px;

  color: var(--eleon-accent, #72a6ff);

  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.eleon-quest-type h3,
.eleon-quest-extra h3 {
  margin: 0 0 7px !important;

  color: inherit;

  font-size: 16px !important;
  font-weight: 750 !important;
}

.eleon-quest-type p,
.eleon-quest-extra p {
  margin: 0 !important;

  opacity: .76;

  font-size: 12px;
  line-height: 1.65;
}

.eleon-quest-extra {
  display: flex;
  align-items: flex-start;

  gap: 14px;

  margin-top: 14px;
  padding: 17px 18px;

  border: 1px solid var(--border-color, rgba(255,255,255,.10));
  border-radius: 14px;

  background: var(--card-bg, rgba(255,255,255,.025));
}

.eleon-quest-extra-icon {
  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;
  flex: 0 0 38px;

  border-radius: 10px;

  color: #4ade80;
  background: rgba(34,197,94,.10);
}

@media (max-width: 900px) {
  .eleon-quest-types {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   ABOUT ELEON - QUEST HERO
   ========================================================= */

.eleon-quest-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(480px, .85fr);
  gap: 28px;
  align-items: stretch;
}

.eleon-quest-intro {
  min-width: 0;
}

.eleon-quest-intro h2 {
  margin-top: 0 !important;
}

.eleon-quest-intro p {
  max-width: 760px;
}


/* RIGHT SIDE 2x2 */

.eleon-quest-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));

  gap: 14px;

  align-self: stretch;
}


/* SAME CARD SIZE */

.eleon-quest-stats .eleon-number-card {
  width: 100%;
  height: 100%;
  min-height: 205px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  padding: 20px;

  border: 1px solid rgba(91, 140, 255, .28);
  border-radius: 14px;

  background: rgba(91, 140, 255, .12);
}


/* ICON */

.eleon-quest-stats .eleon-number-card-icon {
  display: grid;
  place-items: center;

  width: 35px;
  height: 35px;
  flex: 0 0 35px;

  margin-bottom: 11px;

  border-radius: 9px;

  color: #8fb2ff;
  background: rgba(91, 140, 255, .14);
}


/* BIG NUMBER / TITLE */

.eleon-quest-stats .eleon-number-card strong {
  display: block;

  margin: 0 0 6px;

  color: #5f83ff;

  font-size: 40px;
  line-height: 1;
  font-weight: 750;
  letter-spacing: -.03em;
}


/* DESCRIPTION */

.eleon-quest-stats .eleon-number-card > span:last-child {
  display: block;

  margin-top: auto;

  color: inherit;

  font-size: 12px;
  line-height: 1.45;

  opacity: .9;
}


/* LIGHT THEME */

:root[data-theme="light"] .eleon-quest-stats .eleon-number-card {
  border-color: rgba(53, 111, 214, .22);
  background: rgba(53, 111, 214, .07);
}

:root[data-theme="light"] .eleon-quest-stats .eleon-number-card-icon {
  color: #356fd6;
  background: rgba(53, 111, 214, .10);
}

:root[data-theme="light"] .eleon-quest-stats .eleon-number-card strong {
  color: #356fd6;
}


/* RESPONSIVE */

@media (max-width: 1050px) {

  .eleon-quest-hero {
    grid-template-columns: 1fr;
  }

  .eleon-quest-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 620px) {

  .eleon-quest-stats {
    grid-template-columns: 1fr;
  }

  .eleon-quest-stats .eleon-number-card {
    min-height: 170px;
  }

}

/* =========================================================
   MUELEON - ITEM RANK & GEAR SCORE SYSTEM
   HELIOS DARK + LIGHT
   ========================================================= */

:root,
:root[data-theme="light"] {
  --ir-bg: #ffffff;
  --ir-bg-soft: #f7f8fb;
  --ir-card: #ffffff;

  --ir-border: #e3e7ef;
  --ir-border-hover: #ccd3de;

  --ir-text: #15171c;
  --ir-muted: #687180;
  --ir-subtle: #9299a6;

  --ir-common: #7c8796;
  --ir-common-soft: rgba(124,135,150,.10);

  --ir-rare: #356fd6;
  --ir-rare-soft: rgba(53,111,214,.10);

  --ir-epic: #8b5cf6;
  --ir-epic-soft: rgba(139,92,246,.10);

  --ir-legendary: #d97706;
  --ir-legendary-soft: rgba(217,119,6,.10);

  --ir-mythic: #dc3545;
  --ir-mythic-soft: rgba(220,53,69,.10);

  --ir-green: #168447;
  --ir-green-soft: rgba(22,132,71,.10);

  --ir-gold: #b77900;
  --ir-gold-soft: rgba(183,121,0,.10);

  --ir-shadow: 0 10px 28px rgba(15,23,42,.055);
}


:root[data-theme="dark"] {
  --ir-bg: #15171c;
  --ir-bg-soft: #1b1e25;
  --ir-card: #181b21;

  --ir-border: #2b3039;
  --ir-border-hover: #414854;

  --ir-text: #f4f5f7;
  --ir-muted: #adb4c0;
  --ir-subtle: #858d9b;

  --ir-common: #c8c8c8;
  --ir-common-soft: rgba(200,200,200,.08);

  --ir-rare: #50a0ff;
  --ir-rare-soft: rgba(80,160,255,.10);

  --ir-epic: #c878ff;
  --ir-epic-soft: rgba(200,120,255,.10);

  --ir-legendary: #ffaa3c;
  --ir-legendary-soft: rgba(255,170,60,.10);

  --ir-mythic: #ff5050;
  --ir-mythic-soft: rgba(255,80,80,.10);

  --ir-green: #4ade80;
  --ir-green-soft: rgba(34,197,94,.10);

  --ir-gold: #fbbf24;
  --ir-gold-soft: rgba(245,158,11,.10);

  --ir-shadow: 0 14px 34px rgba(0,0,0,.20);
}


/* =========================================================
   PAGE
   ========================================================= */

.itemrank-page {
  width: 100%;
  color: var(--ir-text);
}

.itemrank-page *,
.itemrank-page *::before,
.itemrank-page *::after {
  box-sizing: border-box;
}

.itemrank-section {
  margin: 0 0 40px;
}


/* =========================================================
   HERO
   ========================================================= */

.itemrank-hero {
  position: relative;
  overflow: hidden;

  padding: 30px;

  border: 1px solid var(--ir-border);
  border-radius: 20px;

  background:
    radial-gradient(circle at 88% 5%, var(--ir-epic-soft), transparent 34%),
    radial-gradient(circle at 0 100%, var(--ir-rare-soft), transparent 38%),
    var(--ir-bg);

  box-shadow: var(--ir-shadow);
}

.itemrank-hero-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) 420px;
  gap: 30px;
  align-items: center;
}

.itemrank-hero-content {
  min-width: 0;
}

.itemrank-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  margin-bottom: 9px;

  color: var(--ir-epic);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.itemrank-hero h1 {
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;

  color: var(--ir-text) !important;

  font-size: 38px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
}

.itemrank-hero p {
  max-width: 820px;

  margin: 0 !important;

  color: var(--ir-muted) !important;

  font-size: 14px;
  line-height: 1.75;
}

.itemrank-hero-media {
  overflow: hidden;

  min-height: 270px;

  border: 1px solid var(--ir-border);
  border-radius: 18px;

  background: var(--ir-bg-soft);
}

.itemrank-hero-media img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;
  min-height: 270px;

  margin: 0 !important;

  object-fit: cover;
  object-position: center;

  border: 0 !important;
}


/* =========================================================
   OVERVIEW
   ========================================================= */

.itemrank-overview {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));

  gap: 12px;

  margin-top: 24px;
}

.itemrank-stat {
  padding: 14px;

  border: 1px solid var(--ir-border);
  border-radius: 12px;

  background: var(--ir-card);
}

.itemrank-stat-label {
  display: block;

  margin-bottom: 5px;

  color: var(--ir-subtle);

  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.itemrank-stat-value {
  color: var(--ir-text);

  font-size: 14px;
  font-weight: 750;
}


/* =========================================================
   SECTION HEADER
   ========================================================= */

.itemrank-head {
  display: flex;
  align-items: center;

  gap: 13px;

  margin-bottom: 18px;
  padding-bottom: 14px;

  border-bottom: 1px solid var(--ir-border);
}

.itemrank-head-icon {
  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;
  flex: 0 0 42px;

  border-radius: 11px;

  color: var(--ir-epic);
  background: var(--ir-epic-soft);
}

.itemrank-head h2 {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;

  color: var(--ir-text) !important;

  font-size: 25px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}


/* =========================================================
   GRIDS
   ========================================================= */

.itemrank-grid-2 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 16px;
}

.itemrank-grid-3 {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 16px;
}

.itemrank-grid-5 {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 12px;
}


/* =========================================================
   CARD
   ========================================================= */

.itemrank-card {
  padding: 19px;

  border: 1px solid var(--ir-border);
  border-radius: 15px;

  background: var(--ir-card);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.itemrank-card:hover {
  transform: translateY(-2px);
  border-color: var(--ir-border-hover);
  box-shadow: var(--ir-shadow);
}

.itemrank-card h3 {
  margin: 0 0 10px !important;
  padding: 0 !important;

  color: var(--ir-text) !important;

  font-size: 17px !important;
  font-weight: 750 !important;
}

.itemrank-card p {
  margin: 0 !important;

  color: var(--ir-muted) !important;

  font-size: 13px;
  line-height: 1.7;
}


/* =========================================================
   RANK CARDS
   ========================================================= */

.itemrank-rank {
  position: relative;
  overflow: hidden;

  padding: 18px;

  border: 1px solid var(--ir-border);
  border-radius: 14px;

  background: var(--ir-card);
}

.itemrank-rank::after {
  content: "";

  position: absolute;
  right: -35px;
  top: -35px;

  width: 90px;
  height: 90px;

  border-radius: 50%;
}

.itemrank-rank.common::after {
  background: var(--ir-common-soft);
}

.itemrank-rank.rare::after {
  background: var(--ir-rare-soft);
}

.itemrank-rank.epic::after {
  background: var(--ir-epic-soft);
}

.itemrank-rank.legendary::after {
  background: var(--ir-legendary-soft);
}

.itemrank-rank.mythic::after {
  background: var(--ir-mythic-soft);
}

.itemrank-rank-icon {
  display: grid;
  place-items: center;

  width: 38px;
  height: 38px;

  margin-bottom: 12px;

  border-radius: 10px;
}

.itemrank-rank.common .itemrank-rank-icon {
  color: var(--ir-common);
  background: var(--ir-common-soft);
}

.itemrank-rank.rare .itemrank-rank-icon {
  color: var(--ir-rare);
  background: var(--ir-rare-soft);
}

.itemrank-rank.epic .itemrank-rank-icon {
  color: var(--ir-epic);
  background: var(--ir-epic-soft);
}

.itemrank-rank.legendary .itemrank-rank-icon {
  color: var(--ir-legendary);
  background: var(--ir-legendary-soft);
}

.itemrank-rank.mythic .itemrank-rank-icon {
  color: var(--ir-mythic);
  background: var(--ir-mythic-soft);
}

.itemrank-rank-name {
  display: block;

  margin-bottom: 4px;

  font-size: 16px;
  font-weight: 800;
}

.itemrank-rank.common .itemrank-rank-name {
  color: var(--ir-common);
}

.itemrank-rank.rare .itemrank-rank-name {
  color: var(--ir-rare);
}

.itemrank-rank.epic .itemrank-rank-name {
  color: var(--ir-epic);
}

.itemrank-rank.legendary .itemrank-rank-name {
  color: var(--ir-legendary);
}

.itemrank-rank.mythic .itemrank-rank-name {
  color: var(--ir-mythic);
}

.itemrank-rank span:last-child {
  color: var(--ir-muted);

  font-size: 11px;
  line-height: 1.5;
}


/* =========================================================
   ITEM OPTIONS
   ========================================================= */

.itemrank-option {
  display: flex;
  align-items: center;

  gap: 13px;

  padding: 15px;

  border: 1px solid var(--ir-border);
  border-radius: 12px;

  background: var(--ir-card);
}

.itemrank-option-icon {
  display: grid;
  place-items: center;

  width: 40px;
  height: 40px;
  flex: 0 0 40px;

  border-radius: 10px;

  color: var(--ir-rare);
  background: var(--ir-rare-soft);
}

.itemrank-option-info {
  min-width: 0;
  flex: 1;
}

.itemrank-option-name {
  display: block;

  margin-bottom: 3px;

  color: var(--ir-text);

  font-size: 12px;
  font-weight: 750;
}

.itemrank-option-desc {
  color: var(--ir-muted);

  font-size: 10.5px;
}


/* =========================================================
   FLOW
   ========================================================= */

.itemrank-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap: 8px;

  padding: 18px;

  border: 1px solid var(--ir-border);
  border-radius: 14px;

  background: var(--ir-bg-soft);
}

.itemrank-flow-part {
  display: inline-flex;
  align-items: center;

  padding: 7px 10px;

  border: 1px solid var(--ir-border);
  border-radius: 8px;

  background: var(--ir-card);

  color: var(--ir-text);

  font-size: 11px;
  font-weight: 700;
}

.itemrank-flow-op {
  color: var(--ir-subtle);

  font-weight: 800;
}


/* =========================================================
   TABLE
   ========================================================= */

.itemrank-table {
  overflow: hidden;

  border: 1px solid var(--ir-border);
  border-radius: 13px;
}

.itemrank-table-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) 180px;

  border-top: 1px solid var(--ir-border);
}

.itemrank-table-row:first-child {
  border-top: 0;
}

.itemrank-table-row > div {
  padding: 11px 13px;

  color: var(--ir-muted);

  font-size: 12px;
}

.itemrank-table-row > div + div {
  border-left: 1px solid var(--ir-border);

  color: var(--ir-text);

  font-weight: 750;
}

.itemrank-table-head {
  background: var(--ir-bg-soft);
}

.itemrank-table-head > div {
  color: var(--ir-text);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}


/* =========================================================
   MASTERY
   ========================================================= */

.itemrank-mastery {
  position: relative;

  padding: 20px;

  border: 1px solid var(--ir-border);
  border-radius: 15px;

  background: var(--ir-card);
}

.itemrank-mastery-icon {
  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;

  margin-bottom: 12px;

  border-radius: 11px;
}

.itemrank-mastery.epic .itemrank-mastery-icon {
  color: var(--ir-epic);
  background: var(--ir-epic-soft);
}

.itemrank-mastery.legendary .itemrank-mastery-icon {
  color: var(--ir-legendary);
  background: var(--ir-legendary-soft);
}

.itemrank-mastery h3 {
  margin: 0 0 7px !important;

  color: var(--ir-text) !important;

  font-size: 18px !important;
  font-weight: 800 !important;
}

.itemrank-mastery-value {
  display: inline-flex;

  margin-bottom: 11px;
  padding: 6px 9px;

  border-radius: 8px;

  font-size: 11px;
  font-weight: 800;
}

.itemrank-mastery.epic .itemrank-mastery-value {
  color: var(--ir-epic);
  background: var(--ir-epic-soft);
}

.itemrank-mastery.legendary .itemrank-mastery-value {
  color: var(--ir-legendary);
  background: var(--ir-legendary-soft);
}

.itemrank-mastery p {
  margin: 0 !important;

  color: var(--ir-muted) !important;

  font-size: 12px;
  line-height: 1.65;
}


/* =========================================================
   NOTE
   ========================================================= */

.itemrank-note {
  display: flex;
  align-items: flex-start;

  gap: 10px;

  margin-top: 14px;
  padding: 12px 14px;

  border: 1px solid var(--ir-border);
  border-radius: 11px;

  background: var(--ir-bg-soft);

  color: var(--ir-muted);

  font-size: 12px;
  line-height: 1.65;
}

.itemrank-note i {
  margin-top: 2px;

  color: var(--ir-gold);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1150px) {

  .itemrank-grid-5 {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }

  .itemrank-overview {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

}

@media (max-width: 950px) {

  .itemrank-hero-grid,
  .itemrank-grid-2,
  .itemrank-grid-3 {
    grid-template-columns: 1fr;
  }

  .itemrank-grid-5 {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

}

@media (max-width: 650px) {

  .itemrank-hero {
    padding: 22px;
  }

  .itemrank-hero h1 {
    font-size: 30px !important;
  }

  .itemrank-overview,
  .itemrank-grid-5 {
    grid-template-columns: 1fr;
  }

  .itemrank-table-row {
    grid-template-columns: 1fr;
  }

  .itemrank-table-row > div + div {
    border-left: 0;
    border-top: 1px solid var(--ir-border);
  }

}

/* =========================================================
   ITEM RANK FEATURE IMAGE
   ========================================================= */

.itemrank-feature-wrap {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
}


/* IMAGE ON PAGE */

.itemrank-feature-image {
  position: relative;

  display: block;

  width: 250px;
  max-width: 100%;

  padding: 0;
  margin: 0;

  overflow: hidden;

  cursor: zoom-in;

  border: 1px solid var(--ir-border);
  border-radius: 16px;

  background: var(--ir-card);

  box-shadow: var(--ir-shadow);

  appearance: none;
  -webkit-appearance: none;
}

.itemrank-feature-image img {
  display: block !important;

  width: 300px !important;
  max-width: 100% !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  object-fit: contain;

  transition: transform .25s ease;
}

.itemrank-feature-image:hover img {
  transform: scale(1.025);
}


/* VIEW FULL IMAGE */

.itemrank-image-zoom {
  position: absolute;

  left: 50%;
  bottom: 12px;

  transform: translateX(-50%);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  padding: 8px 11px;

  border: 1px solid rgba(255,255,255,.15);
  border-radius: 9px;

  background: rgba(10,12,17,.88);

  color: #fff;

  font-size: 10px;
  line-height: 1;
  font-weight: 750;

  white-space: nowrap;

  pointer-events: none;

  box-shadow: 0 5px 18px rgba(0,0,0,.30);
}


/* =========================================================
   ITEM RANK LIGHTBOX
   ========================================================= */

.itemrank-lightbox {
  position: fixed;
  inset: 0;

  z-index: 999999;

  display: none;
  align-items: center;
  justify-content: center;

  width: 100vw;
  height: 100vh;

  padding: 24px;

  background: rgba(4,6,9,.94);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}


/* OPEN */

.itemrank-lightbox.is-open {
  display: flex !important;
}


/* DIALOG */

.itemrank-lightbox-dialog {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;
}


/* FULL SIZE IMAGE */

.itemrank-lightbox-media {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;
}

.itemrank-lightbox-media img {
  display: block !important;

  width: auto !important;
  height: auto !important;

  max-width: 94vw !important;
  max-height: 90vh !important;

  margin: 0 !important;

  object-fit: contain;

  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 12px !important;

  background: #0b0d11;

  box-shadow:
    0 25px 80px rgba(0,0,0,.65);
}


/* CLOSE BUTTON */

.itemrank-lightbox-close {
  position: fixed;

  top: 20px;
  right: 22px;

  z-index: 10;

  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;

  padding: 0;

  cursor: pointer;

  border: 1px solid rgba(255,255,255,.16);
  border-radius: 11px;

  background: rgba(20,23,29,.95);

  color: #fff;

  font-size: 18px;

  transition:
    transform .18s ease,
    background .18s ease;
}

.itemrank-lightbox-close:hover {
  transform: scale(1.06);

  background: rgba(42,47,57,.98);
}


/* PREVENT PAGE SCROLL */

body.itemrank-lightbox-open {
  overflow: hidden !important;
}


/* MOBILE */

@media (max-width: 700px) {

  .itemrank-feature-image,
  .itemrank-feature-image img {
    width: 280px !important;
  }

  .itemrank-lightbox {
    padding: 10px;
  }

  .itemrank-lightbox-close {
    top: 10px;
    right: 10px;
  }

}

/* =========================================================
   MUELEON - GLOBAL ICON / CHECKMARK ALIGNMENT FIXES
   ========================================================= */

/* Dungeon check icons */
.dungeon-drop-list span::before {
  content: "\2713" !important;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--dungeon-green);
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

/* Endless Tower checklist */
.et-checks li {
  position: relative;
  min-height: 24px;
}

.et-checks li::before {
  content: "\2713" !important;
  position: absolute;
  left: 0;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--et-green);
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  transform: translateY(-50%);
}

/* Battle Royale rule checklist */
.br-rule-list li {
  position: relative;
  min-height: 24px;
}

.br-rule-list li::before {
  content: "\2713" !important;
  position: absolute;
  left: 0;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--br-green);
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  transform: translateY(-50%);
}

/* Battle Royale winner reward rows */
.br-reward-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 62px;
}

.br-reward-info {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  flex: 1;
}

.br-reward-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  flex: 0 0 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  line-height: 1 !important;
}

.br-reward-icon i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.br-reward-info > div {
  min-width: 0;
}

.br-reward-info > div > span {
  display: block;
  margin-top: 3px;
  opacity: .72;
  font-size: 10px;
  line-height: 1.35;
}

.br-reward-rate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 48px;
  min-height: 28px;
  line-height: 1;
}


/* =========================================================
   QUEST SYSTEM
   HELIOS DARK / LIGHT
   ========================================================= */

.qs-page {
  --qs-border: var(--hd-border);
  --qs-surface: var(--hd-surface);
  --qs-surface-soft:
    color-mix(
      in srgb,
      var(--hd-surface) 94%,
      var(--hd-text) 6%
    );

  --qs-text: var(--hd-text);
  --qs-muted: var(--hd-subtle);

  --qs-blue: #6697ff;
  --qs-green: #48d781;
  --qs-orange: #ffad4d;
  --qs-purple: #a985ff;
  --qs-red: #ff6978;
  --qs-gold: #ffc94d;

  display: flex;
  flex-direction: column;

  gap: 42px;

  width: 100%;
}


/* =========================================================
   HERO
   ========================================================= */

.qs-hero {
  position: relative;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    290px;

  gap: 34px;

  align-items: center;

  padding: 28px;

  border:
    1px solid
    var(--qs-border);

  border-radius: 18px;

  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(102,151,255,.11),
      transparent 36%
    ),
    var(--qs-surface);

  overflow: hidden;
}


.qs-hero-content {
  min-width: 0;
}


.qs-kicker,
.qs-section-kicker {
  display: inline-flex;
  align-items: center;

  gap: 7px;

  color:
    var(--qs-blue);

  font-size: 11px;
  font-weight: 850;
  line-height: 1;

  letter-spacing: .08em;

  text-transform: uppercase;
}


.qs-kicker i {
  font-size: 10px;
}


.qs-hero h1 {
  margin:
    10px
    0
    10px;

  color:
    var(--qs-text);

  font-size: clamp(
    30px,
    4vw,
    43px
  );

  font-weight: 850;
  line-height: 1.05;
}


.qs-hero p {
  max-width: 880px;

  margin:
    0
    0
    9px;

  color:
    var(--qs-muted);

  font-size: 14px;
  line-height: 1.72;
}


.qs-hero p strong {
  color:
    var(--qs-text);
}


/* =========================================================
   HERO IMAGE
   ========================================================= */

.qs-hero-image {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 290px;

  padding: 14px;

  border:
    1px solid
    var(--qs-border);

  border-radius: 16px;

  background:
    var(--qs-surface-soft);
}


.qs-hero-image img {
  display: block;

  width: 100%;
  max-width: 250px;
  max-height: 320px;

  border-radius: 10px;

  object-fit: cover;

  cursor: zoom-in;
}


/* =========================================================
   HERO STATS
   ========================================================= */

.qs-hero-stats {
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0,1fr));

  gap: 10px;

  margin-top: 22px;
}


.qs-stat {
  padding: 12px 13px;

  border:
    1px solid
    var(--qs-border);

  border-radius: 11px;

  background:
    var(--qs-surface-soft);
}


.qs-stat span {
  display: block;

  margin-bottom: 5px;

  color:
    var(--qs-muted);

  font-size: 10px;
  font-weight: 800;

  letter-spacing: .06em;
}


.qs-stat strong {
  display: block;

  color:
    var(--qs-text);

  font-size: 13px;
  font-weight: 750;
}


/* =========================================================
   SECTION
   ========================================================= */

.qs-section {
  width: 100%;
}


.qs-section-head {
  display: flex;
  align-items: center;

  gap: 13px;

  margin-bottom: 18px;

  padding-bottom: 14px;

  border-bottom:
    1px solid
    var(--qs-border);
}


.qs-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;

  flex: 0 0 40px;

  border-radius: 11px;

  background:
    rgba(102,151,255,.10);

  color:
    var(--qs-blue);
}


.qs-section-icon.blue {
  color:
    var(--qs-blue);
}


.qs-section-icon.orange {
  color:
    var(--qs-orange);

  background:
    rgba(255,173,77,.09);
}


.qs-section-icon.purple {
  color:
    var(--qs-purple);

  background:
    rgba(169,133,255,.09);
}


.qs-section-icon.red {
  color:
    var(--qs-red);

  background:
    rgba(255,105,120,.09);
}


.qs-section-icon.green {
  color:
    var(--qs-green);

  background:
    rgba(72,215,129,.09);
}


.qs-section-icon.gold {
  color:
    var(--qs-gold);

  background:
    rgba(255,201,77,.09);
}


.qs-section-head h2 {
  margin:
    5px
    0
    0;

  color:
    var(--qs-text);

  font-size: 24px;
  font-weight: 820;
  line-height: 1.1;
}


/* =========================================================
   INTRO
   ========================================================= */

.qs-intro-card {
  margin-bottom: 18px;

  padding: 15px 17px;

  border:
    1px solid
    var(--qs-border);

  border-radius: 12px;

  background:
    var(--qs-surface);
}


.qs-intro-card p {
  margin: 0;

  color:
    var(--qs-muted);

  font-size: 14px;
  line-height: 1.7;
}


/* =========================================================
   FLOW
   ========================================================= */

.qs-flow {
  display: flex;
  align-items: stretch;

  gap: 8px;
}


.qs-flow-step {
  position: relative;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  min-width: 0;

  flex: 1;

  padding:
    18px
    12px;

  border:
    1px solid
    var(--qs-border);

  border-radius: 12px;

  background:
    var(--qs-surface);

  text-align: center;
}


.qs-flow-number {
  position: absolute;

  top: 8px;
  left: 9px;

  color:
    var(--qs-muted);

  font-size: 9px;
  font-weight: 800;
}


.qs-flow-step > i {
  margin-bottom: 9px;

  color:
    var(--qs-blue);

  font-size: 18px;
}


.qs-flow-step strong {
  margin-bottom: 5px;

  color:
    var(--qs-text);

  font-size: 12px;
  font-weight: 750;
}


.qs-flow-step small {
  color:
    var(--qs-muted);

  font-size: 11px;
  line-height: 1.5;
}


.qs-flow-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  color:
    var(--qs-muted);

  font-size: 10px;
}


/* =========================================================
   FEATURE IMAGE / TEXT
   ========================================================= */

.qs-feature {
  display: grid;
  grid-template-columns:
    minmax(260px, .75fr)
    minmax(0, 1.25fr);

  gap: 22px;

  padding: 18px;

  border:
    1px solid
    var(--qs-border);

  border-radius: 15px;

  background:
    var(--qs-surface);
}


.qs-feature-reverse {
  grid-template-columns:
    minmax(0, 1.25fr)
    minmax(260px, .75fr);
}


.qs-feature-image {
  overflow: hidden;

  min-height: 250px;

  border:
    1px solid
    var(--qs-border);

  border-radius: 12px;

  background:
    var(--qs-surface-soft);
}


.qs-feature-image img {
  display: block;

  width: 100%;
  height: 100%;

  min-height: 250px;

  object-fit: cover;

  cursor: zoom-in;
}


.qs-feature-content {
  align-self: center;
}


.qs-feature-content h3 {
  margin:
    0
    0
    10px;

  color:
    var(--qs-text);

  font-size: 20px;
  font-weight: 800;
}


.qs-feature-content p {
  margin:
    0
    0
    10px;

  color:
    var(--qs-muted);

  font-size: 14px;
  line-height: 1.7;
}


/* =========================================================
   NOTE
   ========================================================= */

.qs-note {
  display: flex;
  align-items: flex-start;

  gap: 10px;

  margin-top: 16px;

  padding: 12px 13px;

  border:
    1px solid
    rgba(102,151,255,.20);

  border-radius: 10px;

  background:
    rgba(102,151,255,.06);
}


.qs-note-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;

  flex: 0 0 28px;

  border-radius: 8px;

  color:
    var(--qs-blue);

  background:
    rgba(102,151,255,.10);
}


.qs-note strong {
  display: block;

  margin-bottom: 3px;

  color:
    var(--qs-text);

  font-size: 12px;
}


.qs-note p {
  margin: 0;

  color:
    var(--qs-muted);

  font-size: 12px;
  line-height: 1.55;
}


/* =========================================================
   OBJECTIVES
   ========================================================= */

.qs-grid-3 {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0,1fr));

  gap: 12px;
}


.qs-objective-card {
  padding: 16px;

  border:
    1px solid
    var(--qs-border);

  border-radius: 12px;

  background:
    var(--qs-surface);

  transition:
    border-color .18s ease,
    transform .18s ease,
    background-color .18s ease;
}


.qs-objective-card:hover {
  border-color:
    rgba(102,151,255,.30);

  background:
    var(--qs-surface-soft);

  transform:
    translateY(-2px);
}


.qs-objective-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  margin-bottom: 12px;

  border-radius: 9px;

  background:
    rgba(102,151,255,.09);

  color:
    var(--qs-blue);
}


.qs-objective-card h4 {
  margin:
    0
    0
    7px;

  color:
    var(--qs-text);

  font-size: 14px;
  font-weight: 760;
}


.qs-objective-card p {
  margin: 0;

  color:
    var(--qs-muted);

  font-size: 12px;
  line-height: 1.55;
}


/* =========================================================
   CHECK LIST
   ========================================================= */

.qs-check-list {
  display: flex;
  flex-direction: column;

  gap: 11px;

  margin:
    16px
    0
    0;

  padding: 0;

  list-style: none;
}


.qs-check-list li {
  display: flex;
  align-items: flex-start;

  gap: 9px;

  color:
    var(--qs-muted);

  font-size: 12px;
  line-height: 1.55;
}


.qs-check-list i {
  margin-top: 4px;

  color:
    var(--qs-green);

  font-size: 9px;
}


/* =========================================================
   REQUIREMENTS
   ========================================================= */

.qs-requirements {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0,1fr));

  gap: 11px;
}


.qs-requirement {
  display: flex;
  align-items: center;

  gap: 11px;

  padding: 13px;

  border:
    1px solid
    var(--qs-border);

  border-radius: 11px;

  background:
    var(--qs-surface);
}


.qs-requirement > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 31px;
  height: 31px;

  flex: 0 0 31px;

  border-radius: 8px;

  color:
    var(--qs-red);

  background:
    rgba(255,105,120,.08);
}


.qs-requirement span {
  display: block;

  margin-bottom: 3px;

  color:
    var(--qs-muted);

  font-size: 10px;
  font-weight: 750;

  text-transform: uppercase;
}


.qs-requirement strong {
  color:
    var(--qs-text);

  font-size: 12px;
  font-weight: 700;
}


/* =========================================================
   WARNING
   ========================================================= */

.qs-warning {
  display: flex;
  align-items: center;

  gap: 10px;

  margin-top: 13px;

  padding: 12px 14px;

  border:
    1px solid
    rgba(255,173,77,.20);

  border-radius: 10px;

  background:
    rgba(255,173,77,.06);
}


.qs-warning i {
  color:
    var(--qs-orange);
}


.qs-warning p {
  margin: 0;

  color:
    var(--qs-muted);

  font-size: 12px;
  line-height: 1.55;
}


/* =========================================================
   QUEST CHAIN
   ========================================================= */

.qs-chain-card {
  padding: 17px;

  border:
    1px solid
    var(--qs-border);

  border-radius: 13px;

  background:
    var(--qs-surface);
}


.qs-chain-card > p {
  margin:
    0
    0
    15px;

  color:
    var(--qs-muted);

  font-size: 13px;
  line-height: 1.65;
}


.qs-chain {
  display: flex;
  align-items: center;

  gap: 8px;

  flex-wrap: wrap;
}


.qs-chain span {
  display: inline-flex;
  align-items: center;

  min-height: 34px;

  padding:
    7px
    11px;

  border:
    1px solid
    var(--qs-border);

  border-radius: 8px;

  background:
    var(--qs-surface-soft);

  color:
    var(--qs-text);

  font-size: 11px;
  font-weight: 700;
}


.qs-chain > i {
  color:
    var(--qs-muted);

  font-size: 9px;
}


/* =========================================================
   REWARDS
   ========================================================= */

.qs-reward-grid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0,1fr));

  gap: 11px;
}


.qs-reward {
  display: flex;
  align-items: center;

  gap: 11px;

  padding: 13px;

  border:
    1px solid
    var(--qs-border);

  border-radius: 11px;

  background:
    var(--qs-surface);
}


.qs-reward-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;

  flex: 0 0 36px;

  border-radius: 9px;

  color:
    var(--qs-gold);

  background:
    rgba(255,201,77,.085);
}


.qs-reward strong {
  display: block;

  margin-bottom: 3px;

  color:
    var(--qs-text);

  font-size: 13px;
}


.qs-reward small {
  display: block;

  color:
    var(--qs-muted);

  font-size: 11px;
  line-height: 1.4;
}


/* =========================================================
   CHECKLIST
   ========================================================= */

.qs-checklist {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0,1fr));

  gap: 10px;
}


.qs-checklist > div {
  display: flex;
  align-items: center;

  gap: 9px;

  min-height: 46px;

  padding: 11px 12px;

  border:
    1px solid
    var(--qs-border);

  border-radius: 10px;

  background:
    var(--qs-surface);

  color:
    var(--qs-muted);

  font-size: 12px;
  line-height: 1.5;
}


.qs-checklist i {
  color:
    var(--qs-green);

  font-size: 9px;
}


/* =========================================================
   FINAL
   ========================================================= */

.qs-final {
  display: flex;
  align-items: flex-start;

  gap: 16px;

  padding: 23px;

  border:
    1px solid
    rgba(102,151,255,.20);

  border-radius: 16px;

  background:
    radial-gradient(
      circle at 10% 20%,
      rgba(102,151,255,.10),
      transparent 34%
    ),
    var(--qs-surface);
}


.qs-final-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;

  flex: 0 0 44px;

  border-radius: 12px;

  background:
    rgba(102,151,255,.10);

  color:
    var(--qs-blue);
}


.qs-final h2 {
  margin:
    6px
    0
    8px;

  color:
    var(--qs-text);

  font-size: 22px;
  font-weight: 820;
}


.qs-final p {
  max-width: 900px;

  margin:
    0
    0
    14px;

  color:
    var(--qs-muted);

  font-size: 13px;
  line-height: 1.65;
}


.qs-final-line {
  display: flex;
  align-items: center;

  gap: 8px;

  flex-wrap: wrap;
}


.qs-final-line span {
  display: inline-flex;

  padding:
    7px
    10px;

  border:
    1px solid
    var(--qs-border);

  border-radius: 7px;

  background:
    var(--qs-surface-soft);

  color:
    var(--qs-text);

  font-size: 10px;
  font-weight: 700;
}


.qs-final-line i {
  color:
    var(--qs-muted);

  font-size: 8px;
}


/* =========================================================
   GLOBAL TEXT SAFETY
   ========================================================= */

.qs-page p,
.qs-page li {
  font-size: 12px;
}


.qs-page h4 {
  font-size: 14px;
}


.qs-page small {
  font-size: 11px;
}


/* =========================================================
   LIGHT MODE REFINEMENTS
   ========================================================= */

:root[data-theme="light"] .qs-page {
  --qs-surface-soft:
    color-mix(
      in srgb,
      var(--hd-surface) 94%,
      #6e9cff 6%
    );
}


:root[data-theme="light"] .qs-hero,
:root[data-theme="light"] .qs-final {
  box-shadow:
    0 10px 30px
    rgba(35,45,70,.06);
}


:root[data-theme="light"] .qs-objective-card,
:root[data-theme="light"] .qs-feature,
:root[data-theme="light"] .qs-intro-card,
:root[data-theme="light"] .qs-chain-card,
:root[data-theme="light"] .qs-reward,
:root[data-theme="light"] .qs-requirement,
:root[data-theme="light"] .qs-checklist > div {
  box-shadow:
    0 6px 18px
    rgba(35,45,70,.035);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {

  .qs-hero {
    grid-template-columns:
      minmax(0,1fr)
      230px;
  }


  .qs-hero-stats {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .qs-grid-3,
  .qs-requirements,
  .qs-reward-grid {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


@media (max-width: 760px) {

  .qs-page {
    gap: 30px;
  }


  .qs-hero {
    grid-template-columns:
      1fr;

    padding: 20px;
  }


  .qs-hero-image {
    min-height: 0;
  }


  .qs-hero-image img {
    max-width: 100%;
  }


  .qs-feature,
  .qs-feature-reverse {
    grid-template-columns:
      1fr;
  }


  .qs-flow {
    display: grid;
    grid-template-columns:
      1fr;
  }


  .qs-flow-arrow {
    transform:
      rotate(90deg);

    min-height: 18px;
  }


  .qs-grid-3,
  .qs-requirements,
  .qs-reward-grid,
  .qs-checklist {
    grid-template-columns:
      1fr;
  }


  .qs-objective-card p,
  .qs-check-list li,
  .qs-feature-content p,
  .qs-chain-card > p,
  .qs-final p {
    font-size: 13px;
  }

}


@media (max-width: 480px) {

  .qs-hero {
    padding: 16px;
  }


  .qs-hero-stats {
    grid-template-columns:
      1fr;
  }


  .qs-section-head h2 {
    font-size: 20px;
  }


  .qs-final {
    padding: 17px;
  }

}

/* =========================================================
   LOST WORDS - HELIOS DARK / LIGHT
   ========================================================= */

:root,
:root[data-theme="light"] {
  --lw-bg: #ffffff;
  --lw-bg-soft: #f7f8fb;
  --lw-bg-soft-2: #f2f4f8;
  --lw-card: #ffffff;
  --lw-border: #e3e7ef;
  --lw-text: #101828;
  --lw-muted: #5f6b7a;
  --lw-heading: #0f172a;

  --lw-primary: #3b82f6;
  --lw-primary-soft: rgba(59, 130, 246, 0.10);

  --lw-purple: #8b5cf6;
  --lw-purple-soft: rgba(139, 92, 246, 0.10);

  --lw-green: #16a34a;
  --lw-green-soft: rgba(22, 163, 74, 0.10);

  --lw-red: #dc2626;
  --lw-red-soft: rgba(220, 38, 38, 0.10);

  --lw-orange: #ea580c;
  --lw-orange-soft: rgba(234, 88, 12, 0.10);

  --lw-gold: #ca8a04;
  --lw-gold-soft: rgba(202, 138, 4, 0.10);

  --lw-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

:root[data-theme="dark"] {
  --lw-bg: #111318;
  --lw-bg-soft: #171a21;
  --lw-bg-soft-2: #1b1f27;
  --lw-card: #141821;
  --lw-border: #262b36;
  --lw-text: #eef2f7;
  --lw-muted: #a8b0bf;
  --lw-heading: #ffffff;

  --lw-primary: #6ea8ff;
  --lw-primary-soft: rgba(110, 168, 255, 0.10);

  --lw-purple: #b592ff;
  --lw-purple-soft: rgba(181, 146, 255, 0.10);

  --lw-green: #4ade80;
  --lw-green-soft: rgba(74, 222, 128, 0.10);

  --lw-red: #fb7185;
  --lw-red-soft: rgba(251, 113, 133, 0.10);

  --lw-orange: #fb923c;
  --lw-orange-soft: rgba(251, 146, 60, 0.10);

  --lw-gold: #facc15;
  --lw-gold-soft: rgba(250, 204, 21, 0.10);

  --lw-shadow: 0 14px 36px rgba(0, 0, 0, 0.24);
}

.lost-words-page {
  width: 100%;
  color: var(--lw-text);
}

.lost-words-page *,
.lost-words-page *::before,
.lost-words-page *::after {
  box-sizing: border-box;
}

.lost-words-page h1,
.lost-words-page h2,
.lost-words-page h3,
.lost-words-page h4 {
  color: var(--lw-heading);
}

.lost-words-page p {
  color: var(--lw-muted);
  line-height: 1.75;
}

.lw-section {
  margin: 0 0 38px;
}

.lw-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--lw-primary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.lw-kicker i {
  font-size: 12px;
}

.lw-hero {
  position: relative;
  overflow: hidden;
  padding: 30px;
  border: 1px solid var(--lw-border);
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, var(--lw-primary-soft), transparent 34%),
    radial-gradient(circle at bottom left, var(--lw-purple-soft), transparent 35%),
    var(--lw-bg);
  box-shadow: var(--lw-shadow);
}

.lw-hero-grid {
  display: grid;
  grid-template-columns: 1.25fr .95fr;
  gap: 28px;
  align-items: center;
}

.lw-hero h1 {
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 40px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
}

.lw-hero p {
  margin: 0 0 18px !important;
  max-width: 100%;
  font-size: 15px;
}

.lw-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.lw-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border: 1px solid var(--lw-border);
  border-radius: 999px;
  background: var(--lw-bg-soft);
  color: var(--lw-text);
  font-size: 12px;
  font-weight: 700;
}

.lw-hero-media {
  overflow: hidden;
  border: 1px solid var(--lw-border);
  border-radius: 18px;
  background: var(--lw-bg-soft);
  min-height: 280px;
}

.lw-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
}

.lw-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.lw-stat {
  padding: 16px;
  border: 1px solid var(--lw-border);
  border-radius: 14px;
  background: var(--lw-card);
}

.lw-stat-label {
  display: block;
  margin-bottom: 6px;
  color: var(--lw-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.lw-stat-value {
  color: var(--lw-heading);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
}

.lw-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--lw-border);
}

.lw-head-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--lw-primary-soft);
  color: var(--lw-primary);
  flex: 0 0 42px;
}

.lw-head h2 {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

.lw-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.lw-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.lw-card {
  padding: 12px 22px 22px 22px;
  border: 1px solid var(--lw-border);
  border-radius: 18px;
  background: var(--lw-card);
  box-shadow: var(--lw-shadow);
}

.lw-card h3 {
  margin: 10px 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 22px !important;
  font-weight: 800 !important;
}

.lw-card p:last-child {
  margin-bottom: 0;
}

.lw-info-list {
  display: grid;
  gap: 12px;
}

.lw-info-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--lw-border);
}

.lw-info-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.lw-info-label {
  color: var(--lw-muted);
  font-size: 13px;
  font-weight: 700;
}

.lw-info-value {
  text-align: right;
  color: var(--lw-heading);
  font-size: 13px;
  font-weight: 700;
}

.lw-note {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  margin-top: 14px;
  border: 1px solid var(--lw-border);
  border-radius: 14px;
  background: var(--lw-bg-soft);
}

.lw-note i {
  margin-top: 2px;
  color: var(--lw-gold);
}

.lw-note strong {
  color: var(--lw-heading);
}

.lw-media-card {
  overflow: hidden;
  border: 1px solid var(--lw-border);
  border-radius: 18px;
  background: var(--lw-bg-soft);
}

.lw-media-card img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
}

.lw-wave-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.lw-mini {
  padding: 18px;
  border: 1px solid var(--lw-border);
  border-radius: 16px;
  background: var(--lw-card);
}

.lw-mini h4 {
  margin: 0 0 10px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

.lw-mini p {
  margin: 0;
  font-size: 14px;
}

.lw-emphasis {
  color: var(--lw-primary);
  font-weight: 800;
}

.lw-highlight {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
}

.lw-highlight.red {
  background: var(--lw-red-soft);
  color: var(--lw-red);
}

.lw-highlight.green {
  background: var(--lw-green-soft);
  color: var(--lw-green);
}

.lw-highlight.orange {
  background: var(--lw-orange-soft);
  color: var(--lw-orange);
}

.lw-highlight.purple {
  background: var(--lw-purple-soft);
  color: var(--lw-purple);
}

.lw-rules-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.lw-rule-box {
  padding: 18px;
  border: 1px solid var(--lw-border);
  border-radius: 16px;
  background: var(--lw-card);
}

.lw-rule-box h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

.lw-rule-box h4 i {
  color: var(--lw-red);
}

.lw-checks,
.lw-bullets {
  display: grid;
  gap: 9px;

  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
}

.lw-checks li,
.lw-bullets li {
  position: relative;

  margin: 0 !important;
  padding-left: 24px !important;

  list-style: none !important;

  color: var(--lw-muted);

  font-size: 14px;
  line-height: 1.65;
}

.lw-checks li::marker,
.lw-bullets li::marker {
  content: "";
}

/* Normal bullet */

.lw-bullets li::before {
  content: "";

  position: absolute;
  left: 3px;
  top: 10px;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: var(--lw-primary);
}


/* Checklist */

.lw-checks li::before {
  content: "\2713";

  position: absolute;
  left: 0;
  top: 0;

  color: var(--lw-green);

  font-family: Arial, sans-serif;
  font-size: 13px;
  line-height: 1.65;
  font-weight: 800;
}

.lw-reward-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.lw-reward-card {
  padding: 20px;
  border: 1px solid var(--lw-border);
  border-radius: 16px;
  background: var(--lw-card);
}

.lw-reward-card h4 {
  margin: 0 0 10px !important;
  font-size: 17px !important;
  font-weight: 800 !important;
}

.lw-reward-card p {
  margin: 0 0 12px;
}

.lw-reward-card .lw-highlight {
  margin-bottom: 10px;
}

.lw-reward-item-icon.item {
  color: var(--lw-orange);
  background: var(--lw-orange-soft);
}

.lw-scaling-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.lw-scale-card {
  padding: 18px;
  border: 1px solid var(--lw-border);
  border-radius: 16px;
  background: var(--lw-card);
}

.lw-scale-card h4 {
  margin: 0 0 10px !important;
  font-size: 17px !important;
  font-weight: 800 !important;
}

.lw-scale-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.lw-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border-radius: 999px;
  border: 1px solid var(--lw-border);
  background: var(--lw-bg-soft);
  color: var(--lw-heading);
  font-size: 12px;
  font-weight: 800;
}

.lw-skill-off {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.lw-skill-tag {
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--lw-red-soft);
  color: var(--lw-red);
  font-size: 12px;
  font-weight: 800;
}

.lw-final {
  padding: 26px;
  border: 1px solid var(--lw-border);
  border-radius: 20px;
  background:
    radial-gradient(circle at right center, var(--lw-purple-soft), transparent 34%),
    radial-gradient(circle at left bottom, var(--lw-primary-soft), transparent 35%),
    var(--lw-card);
  box-shadow: var(--lw-shadow);
}

.lw-final h2 {
  margin: 0 0 14px !important;
  font-size: 30px !important;
  font-weight: 800 !important;
}

.lw-final p {
  margin: 0 0 16px;
  max-width: 100%;
}

.lw-quote {
  padding: 18px 20px;
  border-left: 4px solid var(--lw-primary);
  border-radius: 12px;
  background: var(--lw-bg-soft);
  color: var(--lw-heading);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.75;
}

/* =========================================================
   LOST WORDS - REWARD ITEM LIST
   ========================================================= */

.lw-reward-items {
  display: grid;
  gap: 7px;

  margin-top: 14px;
}

.lw-reward-item {
  display: flex;
  align-items: center;

  gap: 9px;

  min-height: 38px;

  padding: 7px 9px;

  border: 1px solid var(--lw-border);
  border-radius: 9px;

  background: var(--lw-bg-soft);

  color: var(--lw-muted);

  font-size: 11.5px;
  font-weight: 600;

  transition:
    border-color .18s ease,
    background-color .18s ease,
    transform .18s ease;
}

.lw-reward-item:hover {
  transform: translateX(2px);

  border-color:
    color-mix(
      in srgb,
      var(--lw-primary) 25%,
      var(--lw-border)
    );
}

.lw-reward-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;
  flex: 0 0 28px;

  border-radius: 8px;

  color: var(--lw-red);
  background: var(--lw-red-soft);

  font-size: 11px;
  line-height: 1;
}

.lw-reward-item-icon.mana {
  color: var(--lw-primary);
  background: var(--lw-primary-soft);
}

.lw-reward-item-icon i {
  margin: 0;
  padding: 0;

  line-height: 1;
}


/* LIGHT */

:root[data-theme="light"] .lw-reward-item {
  background: rgba(0,0,0,.015);
}


/* MOBILE */

@media (max-width: 700px) {

  .lw-reward-item {
    min-height: 36px;
  }

}

@media (max-width: 1200px) {
  .lw-hero-grid,
  .lw-grid-2,
  .lw-rules-grid,
  .lw-scaling-box {
    grid-template-columns: 1fr;
  }

  .lw-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lw-wave-grid,
  .lw-reward-grid,
  .lw-grid-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .lw-hero {
    padding: 22px;
  }

  .lw-hero h1 {
    font-size: 32px !important;
  }

  .lw-overview {
    grid-template-columns: 1fr;
  }

  .lw-info-row {
    flex-direction: column;
    gap: 6px;
  }

  .lw-info-value {
    text-align: left;
  }
}

/* =========================================================
   LORD OF FEREA - HELIOS DARK / LIGHT
   ========================================================= */

:root,
:root[data-theme="light"] {

  --lf-bg: #ffffff;
  --lf-bg-soft: #f7f8fb;
  --lf-bg-soft-2: #f2f4f8;
  --lf-card: #ffffff;

  --lf-border: #e3e7ef;

  --lf-text: #101828;
  --lf-muted: #5f6b7a;
  --lf-heading: #0f172a;

  --lf-primary: #3b82f6;
  --lf-primary-soft: rgba(59,130,246,.10);

  --lf-purple: #8b5cf6;
  --lf-purple-soft: rgba(139,92,246,.10);

  --lf-green: #16a34a;
  --lf-green-soft: rgba(22,163,74,.10);

  --lf-red: #dc2626;
  --lf-red-soft: rgba(220,38,38,.10);

  --lf-orange: #ea580c;
  --lf-orange-soft: rgba(234,88,12,.10);

  --lf-gold: #ca8a04;
  --lf-gold-soft: rgba(202,138,4,.10);

  --lf-shadow:
    0 10px 30px rgba(15,23,42,.06);
}


:root[data-theme="dark"] {

  --lf-bg: #111318;
  --lf-bg-soft: #171a21;
  --lf-bg-soft-2: #1b1f27;
  --lf-card: #141821;

  --lf-border: #262b36;

  --lf-text: #eef2f7;
  --lf-muted: #a8b0bf;
  --lf-heading: #ffffff;

  --lf-primary: #6ea8ff;
  --lf-primary-soft: rgba(110,168,255,.10);

  --lf-purple: #b592ff;
  --lf-purple-soft: rgba(181,146,255,.10);

  --lf-green: #4ade80;
  --lf-green-soft: rgba(74,222,128,.10);

  --lf-red: #fb7185;
  --lf-red-soft: rgba(251,113,133,.10);

  --lf-orange: #fb923c;
  --lf-orange-soft: rgba(251,146,60,.10);

  --lf-gold: #facc15;
  --lf-gold-soft: rgba(250,204,21,.10);

  --lf-shadow:
    0 14px 36px rgba(0,0,0,.24);
}


/* =========================================================
   BASE
   ========================================================= */

.lord-ferea-page {
  width: 100%;
  color: var(--lf-text);
}


.lord-ferea-page *,
.lord-ferea-page *::before,
.lord-ferea-page *::after {
  box-sizing: border-box;
}


.lord-ferea-page h1,
.lord-ferea-page h2,
.lord-ferea-page h3,
.lord-ferea-page h4 {
  color: var(--lf-heading);
}


.lord-ferea-page p {
  color: var(--lf-muted);
  line-height: 1.75;
}


.lf-section {
  margin: 0 0 38px;
}


/* =========================================================
   KICKER
   ========================================================= */

.lf-kicker {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 10px;

  color: var(--lf-primary);

  font-size: 11px;

  font-weight: 800;

  letter-spacing: .12em;

  text-transform: uppercase;
}


.lf-kicker.purple {
  color: var(--lf-purple);
}


.lf-kicker.green {
  color: var(--lf-green);
}


.lf-kicker.red {
  color: var(--lf-red);
}


.lf-kicker.gold {
  color: var(--lf-gold);
}


/* =========================================================
   HERO
   ========================================================= */

.lf-hero {
  position: relative;

  overflow: hidden;

  padding: 30px;

  border: 1px solid var(--lf-border);

  border-radius: 20px;

  background:
    radial-gradient(
      circle at top right,
      var(--lf-red-soft),
      transparent 34%
    ),
    radial-gradient(
      circle at bottom left,
      var(--lf-purple-soft),
      transparent 35%
    ),
    var(--lf-bg);

  box-shadow: var(--lf-shadow);
}


.lf-hero-grid {
  display: grid;

  grid-template-columns:
    1.25fr .95fr;

  gap: 28px;

  align-items: center;
}


.lf-hero h1 {
  margin: 0 0 12px !important;

  padding: 0 !important;

  border: 0 !important;

  font-size: 40px !important;

  line-height: 1.1 !important;

  font-weight: 800 !important;
}


.lf-hero p {
  margin: 0 0 16px !important;

  max-width: 760px;

  font-size: 15px;
}


.lf-hero-badges {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: 18px;
}


.lf-badge {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  padding: 9px 12px;

  border: 1px solid var(--lf-border);

  border-radius: 999px;

  background: var(--lf-bg-soft);

  color: var(--lf-text);

  font-size: 12px;

  font-weight: 700;
}


.lf-badge i {
  color: var(--lf-primary);
}


/* =========================================================
   MEDIA
   ========================================================= */

.lf-hero-media,
.lf-media-card {
  overflow: hidden;

  border: 1px solid var(--lf-border);

  border-radius: 18px;

  background: var(--lf-bg-soft);
}


.lf-hero-media {
  min-height: 310px;
}


.lf-hero-media img,
.lf-media-card img {
  display: block;

  width: 100%;

  height: 100%;

  min-height: 280px;

  object-fit: cover;
}


/* =========================================================
   OVERVIEW
   ========================================================= */

.lf-overview {
  display: grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap: 14px;

  margin-top: 22px;
}


.lf-stat {
  padding: 16px;

  border: 1px solid var(--lf-border);

  border-radius: 14px;

  background: var(--lf-card);
}


.lf-stat-label {
  display: block;

  margin-bottom: 6px;

  color: var(--lf-muted);

  font-size: 11px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: .08em;
}


.lf-stat-value {
  color: var(--lf-heading);

  font-size: 18px;

  font-weight: 800;

  line-height: 1.25;
}


/* =========================================================
   HEAD
   ========================================================= */

.lf-head {
  display: flex;

  align-items: center;

  gap: 14px;

  margin-bottom: 18px;

  padding-bottom: 14px;

  border-bottom:
    1px solid var(--lf-border);
}


.lf-head-icon {
  display: grid;

  place-items: center;

  width: 42px;

  height: 42px;

  flex: 0 0 42px;

  border-radius: 12px;

  background: var(--lf-primary-soft);

  color: var(--lf-primary);
}


.lf-head-icon.purple {
  background: var(--lf-purple-soft);
  color: var(--lf-purple);
}


.lf-head-icon.red {
  background: var(--lf-red-soft);
  color: var(--lf-red);
}


.lf-head-icon.green {
  background: var(--lf-green-soft);
  color: var(--lf-green);
}


.lf-head-icon.gold {
  background: var(--lf-gold-soft);
  color: var(--lf-gold);
}


.lf-head h2 {
  margin: 0 !important;

  padding: 0 !important;

  border: 0 !important;

  font-size: 28px !important;

  font-weight: 800 !important;

  line-height: 1.2 !important;
}


/* =========================================================
   GRIDS
   ========================================================= */

.lf-grid-2 {
  display: grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap: 18px;
}


/* =========================================================
   CARD
   ========================================================= */

.lf-card {
  padding: 22px;

  border: 1px solid var(--lf-border);

  border-radius: 18px;

  background: var(--lf-card);

  box-shadow: var(--lf-shadow);
}


.lf-card h3 {
  margin: 0 0 12px !important;

  font-size: 22px !important;

  font-weight: 800 !important;
}


/* =========================================================
   INFO
   ========================================================= */

.lf-info-list {
  display: grid;

  gap: 12px;

  margin-top: 16px;
}


.lf-info-row {
  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 18px;

  padding: 12px 0;

  border-bottom:
    1px solid var(--lf-border);
}


.lf-info-row:last-child {
  border-bottom: 0;
}


.lf-info-label {
  color: var(--lf-muted);

  font-size: 13px;

  font-weight: 700;
}


.lf-info-value {
  text-align: right;

  color: var(--lf-heading);

  font-size: 13px;

  font-weight: 700;
}


/* =========================================================
   NOTES
   ========================================================= */

.lf-note {
  display: flex;

  gap: 12px;

  padding: 14px 16px;

  margin-top: 14px;

  border: 1px solid var(--lf-border);

  border-radius: 14px;

  background: var(--lf-bg-soft);

  color: var(--lf-muted);

  line-height: 1.65;
}


.lf-note i {
  margin-top: 2px;

  color: var(--lf-gold);
}


.lf-note strong {
  color: var(--lf-heading);
}


.lf-note-red i {
  color: var(--lf-red);
}


/* =========================================================
   SCHEDULE
   ========================================================= */

.lf-schedule {
  display: grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap: 16px;
}


.lf-schedule-card {
  display: flex;

  align-items: center;

  gap: 14px;

  padding: 18px;

  border: 1px solid var(--lf-border);

  border-radius: 16px;

  background: var(--lf-card);

  box-shadow: var(--lf-shadow);
}


.lf-schedule-icon {
  display: grid;

  place-items: center;

  width: 46px;

  height: 46px;

  flex: 0 0 46px;

  border-radius: 12px;

  background: var(--lf-gold-soft);

  color: var(--lf-gold);
}


.lf-schedule-card small {
  display: block;

  margin-bottom: 4px;

  color: var(--lf-muted);

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: .08em;
}


.lf-schedule-card strong {
  color: var(--lf-heading);

  font-size: 22px;

  font-weight: 800;
}


/* =========================================================
   STEPS
   ========================================================= */

.lf-steps {
  display: grid;

  gap: 12px;

  margin-top: 18px;
}


.lf-step {
  display: flex;

  gap: 13px;

  padding: 13px;

  border: 1px solid var(--lf-border);

  border-radius: 12px;

  background: var(--lf-bg-soft);
}


.lf-step > span {
  display: grid;

  place-items: center;

  width: 36px;

  height: 36px;

  flex: 0 0 36px;

  border-radius: 9px;

  background: var(--lf-purple-soft);

  color: var(--lf-purple);

  font-size: 12px;

  font-weight: 800;
}


.lf-step strong {
  color: var(--lf-heading);
}


.lf-step p {
  margin: 3px 0 0;

  font-size: 13px;
}


/* =========================================================
   ROLE
   ========================================================= */

.lf-role-grid {
  display: grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap: 16px;

  margin-top: 18px;
}


.lf-mini {
  padding: 18px;

  border: 1px solid var(--lf-border);

  border-radius: 16px;

  background: var(--lf-bg-soft);
}


.lf-mini-icon {
  display: grid;

  place-items: center;

  width: 40px;

  height: 40px;

  margin-bottom: 12px;

  border-radius: 10px;

  background: var(--lf-primary-soft);

  color: var(--lf-primary);
}


.lf-mini h4 {
  margin: 0 0 8px !important;

  font-size: 16px !important;

  font-weight: 800 !important;
}


.lf-mini p {
  margin: 0;

  font-size: 14px;
}


/* =========================================================
   REWARDS
   ========================================================= */

.lf-reward-layout {
  display: grid;

  grid-template-columns:
    .9fr 1.1fr;

  gap: 18px;
}


.lf-reward-grid {
  display: grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap: 12px;
}


.lf-reward-item {
  display: flex;

  align-items: center;

  gap: 11px;

  min-height: 72px;

  padding: 13px;

  border: 1px solid var(--lf-border);

  border-radius: 13px;

  background: var(--lf-card);

  transition:
    transform .18s ease,
    border-color .18s ease;
}


.lf-reward-item:hover {
  transform: translateX(2px);

  border-color:
    color-mix(
      in srgb,
      var(--lf-primary) 26%,
      var(--lf-border)
    );
}


.lf-reward-icon {
  display: grid;

  place-items: center;

  width: 40px;

  height: 40px;

  flex: 0 0 40px;

  border-radius: 10px;
}


.lf-reward-icon.blue {
  background: var(--lf-primary-soft);
  color: var(--lf-primary);
}


.lf-reward-icon.gold {
  background: var(--lf-gold-soft);
  color: var(--lf-gold);
}


.lf-reward-icon.orange {
  background: var(--lf-orange-soft);
  color: var(--lf-orange);
}


.lf-reward-icon.purple {
  background: var(--lf-purple-soft);
  color: var(--lf-purple);
}


.lf-reward-icon.green {
  background: var(--lf-green-soft);
  color: var(--lf-green);
}


.lf-reward-icon.red {
  background: var(--lf-red-soft);
  color: var(--lf-red);
}


.lf-reward-item small {
  display: block;

  margin-bottom: 3px;

  color: var(--lf-muted);

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: .07em;
}


.lf-reward-item strong {
  color: var(--lf-heading);

  font-size: 13px;
}


/* =========================================================
   FINAL
   ========================================================= */

.lf-final {
  padding: 26px;

  border: 1px solid var(--lf-border);

  border-radius: 20px;

  background:
    radial-gradient(
      circle at right center,
      var(--lf-red-soft),
      transparent 34%
    ),
    radial-gradient(
      circle at left bottom,
      var(--lf-purple-soft),
      transparent 35%
    ),
    var(--lf-card);

  box-shadow: var(--lf-shadow);
}


.lf-final h2 {
  margin: 0 0 14px !important;

  font-size: 30px !important;

  font-weight: 800 !important;
}


.lf-final p {
  margin: 0 0 16px;
}


.lf-quote {
  padding: 18px 20px;

  border-left:
    4px solid var(--lf-red);

  border-radius: 12px;

  background: var(--lf-bg-soft);

  color: var(--lf-heading);

  font-size: 15px;

  font-weight: 700;

  line-height: 1.75;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:1200px) {

  .lf-hero-grid,
  .lf-grid-2,
  .lf-reward-layout {
    grid-template-columns: 1fr;
  }


  .lf-overview {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .lf-role-grid {
    grid-template-columns: 1fr;
  }


  .lf-schedule {
    grid-template-columns:
      repeat(3,minmax(0,1fr));
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:700px) {

  .lf-hero {
    padding: 22px;
  }


  .lf-hero h1 {
    font-size: 32px !important;
  }


  .lf-overview {
    grid-template-columns: 1fr;
  }


  .lf-schedule {
    grid-template-columns: 1fr;
  }


  .lf-info-row {
    flex-direction: column;

    gap: 6px;
  }


  .lf-info-value {
    text-align: left;
  }


  .lf-reward-grid {
    grid-template-columns: 1fr;
  }


  .lf-hero-media img,
  .lf-media-card img {
    min-height: 220px;
  }

}/* =========================================================
   DEATH JOURNAL - HELIOS DARK / LIGHT
   ========================================================= */

:root,
:root[data-theme="light"] {

  --dj-bg: #ffffff;
  --dj-bg-soft: #f7f8fb;
  --dj-bg-soft-2: #f2f4f8;
  --dj-card: #ffffff;

  --dj-border: #e3e7ef;

  --dj-text: #101828;
  --dj-muted: #5f6b7a;
  --dj-heading: #0f172a;

  --dj-primary: #3b82f6;
  --dj-primary-soft: rgba(59,130,246,.10);

  --dj-purple: #8b5cf6;
  --dj-purple-soft: rgba(139,92,246,.10);

  --dj-green: #16a34a;
  --dj-green-soft: rgba(22,163,74,.10);

  --dj-red: #dc2626;
  --dj-red-soft: rgba(220,38,38,.10);

  --dj-shadow:
    0 10px 30px rgba(15,23,42,.06);
}


:root[data-theme="dark"] {

  --dj-bg: #111318;
  --dj-bg-soft: #171a21;
  --dj-bg-soft-2: #1b1f27;
  --dj-card: #141821;

  --dj-border: #262b36;

  --dj-text: #eef2f7;
  --dj-muted: #a8b0bf;
  --dj-heading: #ffffff;

  --dj-primary: #6ea8ff;
  --dj-primary-soft: rgba(110,168,255,.10);

  --dj-purple: #b592ff;
  --dj-purple-soft: rgba(181,146,255,.10);

  --dj-green: #4ade80;
  --dj-green-soft: rgba(74,222,128,.10);

  --dj-red: #fb7185;
  --dj-red-soft: rgba(251,113,133,.10);

  --dj-shadow:
    0 14px 36px rgba(0,0,0,.24);
}


/* =========================================================
   BASE
   ========================================================= */

.death-journal-page {
  width: 100%;
  color: var(--dj-text);
}


.death-journal-page *,
.death-journal-page *::before,
.death-journal-page *::after {
  box-sizing: border-box;
}


.death-journal-page h1,
.death-journal-page h2,
.death-journal-page h3,
.death-journal-page h4 {
  color: var(--dj-heading);
}


.death-journal-page p {
  color: var(--dj-muted);
  line-height: 1.75;
}


.dj-section {
  margin: 0 0 38px;
}


/* =========================================================
   KICKER
   ========================================================= */

.dj-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin-bottom: 10px;

  color: var(--dj-primary);

  font-size: 11px;
  font-weight: 800;

  letter-spacing: .12em;
  text-transform: uppercase;
}


.dj-kicker.purple {
  color: var(--dj-purple);
}


.dj-kicker.green {
  color: var(--dj-green);
}


.dj-kicker.red {
  color: var(--dj-red);
}


/* =========================================================
   HERO
   ========================================================= */

.dj-hero {
  position: relative;
  overflow: hidden;

  padding: 30px;

  border: 1px solid var(--dj-border);
  border-radius: 20px;

  background:
    radial-gradient(
      circle at top right,
      var(--dj-red-soft),
      transparent 34%
    ),
    radial-gradient(
      circle at bottom left,
      var(--dj-primary-soft),
      transparent 35%
    ),
    var(--dj-bg);

  box-shadow: var(--dj-shadow);
}


.dj-hero-grid {
  display: grid;
  grid-template-columns: 1.25fr .95fr;

  gap: 28px;

  align-items: center;
}


.dj-hero h1 {
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;

  font-size: 40px !important;
  line-height: 1.1 !important;

  font-weight: 800 !important;
}


.dj-hero p {
  margin: 0 0 16px !important;

  max-width: 760px;

  font-size: 15px;
}


.dj-hero-badges {
  display: flex;
  flex-wrap: wrap;

  gap: 10px;

  margin-top: 18px;
}


.dj-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  padding: 9px 12px;

  border: 1px solid var(--dj-border);
  border-radius: 999px;

  background: var(--dj-bg-soft);

  color: var(--dj-text);

  font-size: 12px;
  font-weight: 700;
}


.dj-badge i {
  color: var(--dj-primary);
}


/* =========================================================
   MAIN IMAGE
   ========================================================= */

.dj-hero-media {
  overflow: hidden;

  min-height: 310px;

  border: 1px solid var(--dj-border);
  border-radius: 18px;

  background: var(--dj-bg-soft);
}


.dj-hero-media img {
  display: block;

  width: 100%;
  height: 100%;

  min-height: 310px;

  object-fit: cover;
}


/* =========================================================
   OVERVIEW
   ========================================================= */

.dj-overview {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));

  gap: 14px;

  margin-top: 22px;
}


.dj-stat {
  padding: 16px;

  border: 1px solid var(--dj-border);
  border-radius: 14px;

  background: var(--dj-card);
}


.dj-stat-label {
  display: block;

  margin-bottom: 6px;

  color: var(--dj-muted);

  font-size: 11px;
  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: .08em;
}


.dj-stat-value {
  color: var(--dj-heading);

  font-size: 18px;
  font-weight: 800;

  line-height: 1.25;
}


/* =========================================================
   SECTION HEAD
   ========================================================= */

.dj-head {
  display: flex;

  align-items: center;

  gap: 14px;

  margin-bottom: 18px;

  padding-bottom: 14px;

  border-bottom: 1px solid var(--dj-border);
}


.dj-head-icon {
  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;

  flex: 0 0 42px;

  border-radius: 12px;

  background: var(--dj-primary-soft);

  color: var(--dj-primary);
}


.dj-head-icon.purple {
  background: var(--dj-purple-soft);
  color: var(--dj-purple);
}


.dj-head-icon.green {
  background: var(--dj-green-soft);
  color: var(--dj-green);
}


.dj-head-icon.red {
  background: var(--dj-red-soft);
  color: var(--dj-red);
}


.dj-head h2 {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;

  font-size: 28px !important;
  font-weight: 800 !important;

  line-height: 1.2 !important;
}


/* =========================================================
   GRIDS
   ========================================================= */

.dj-grid-2 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));

  gap: 18px;
}


.dj-grid-3 {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));

  gap: 16px;
}


/* =========================================================
   CARDS
   ========================================================= */

.dj-card {
  padding: 22px;

  border: 1px solid var(--dj-border);
  border-radius: 18px;

  background: var(--dj-card);

  box-shadow: var(--dj-shadow);
}


.dj-card h3 {
  margin: 0 0 12px !important;

  font-size: 22px !important;
  font-weight: 800 !important;
}


/* =========================================================
   INFO
   ========================================================= */

.dj-info-list {
  display: grid;

  gap: 12px;

  margin-top: 16px;
}


.dj-info-row {
  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 18px;

  padding: 12px 0;

  border-bottom: 1px solid var(--dj-border);
}


.dj-info-row:last-child {
  border-bottom: 0;
}


.dj-info-label {
  color: var(--dj-muted);

  font-size: 13px;
  font-weight: 700;
}


.dj-info-value {
  text-align: right;

  color: var(--dj-heading);

  font-size: 13px;
  font-weight: 700;
}


/* =========================================================
   NOTE
   ========================================================= */

.dj-note {
  display: flex;

  gap: 12px;

  padding: 14px 16px;

  margin-top: 14px;

  border: 1px solid var(--dj-border);
  border-radius: 14px;

  background: var(--dj-bg-soft);

  color: var(--dj-muted);

  line-height: 1.65;
}


.dj-note i {
  margin-top: 2px;

  color: var(--dj-primary);
}


.dj-note strong {
  color: var(--dj-heading);
}


/* =========================================================
   MINI CARDS
   ========================================================= */

.dj-mini {
  padding: 18px;

  border: 1px solid var(--dj-border);
  border-radius: 16px;

  background: var(--dj-card);
}


.dj-mini-icon {
  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;

  margin-bottom: 12px;

  border-radius: 11px;

  background: var(--dj-primary-soft);

  color: var(--dj-primary);
}


.dj-mini h4 {
  margin: 0 0 9px !important;

  font-size: 16px !important;
  font-weight: 800 !important;
}


.dj-mini p {
  margin: 0;

  font-size: 14px;
}


/* =========================================================
   DEATH / KILL
   ========================================================= */

.dj-highlight {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 7px 10px;

  margin-bottom: 12px;

  border-radius: 999px;

  font-size: 12px;
  font-weight: 800;
}


.dj-highlight.red {
  color: var(--dj-red);
  background: var(--dj-red-soft);
}


.dj-highlight.green {
  color: var(--dj-green);
  background: var(--dj-green-soft);
}


.dj-death-card {
  border-color:
    color-mix(
      in srgb,
      var(--dj-red) 22%,
      var(--dj-border)
    );
}


.dj-kill-card {
  border-color:
    color-mix(
      in srgb,
      var(--dj-green) 22%,
      var(--dj-border)
    );
}


.dj-stat-box {
  display: flex;

  justify-content: space-between;

  gap: 14px;

  margin-top: 16px;

  padding: 13px 14px;

  border-radius: 12px;

  background: var(--dj-bg-soft);
}


.dj-stat-box span {
  color: var(--dj-muted);

  font-size: 13px;
}


.dj-stat-box strong {
  color: var(--dj-heading);

  font-size: 13px;
}


/* =========================================================
   CHECK LIST
   ========================================================= */

.dj-checks {
  display: grid;

  gap: 10px;

  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
}


.dj-checks li {
  position: relative;

  margin: 0 !important;

  padding-left: 25px !important;

  list-style: none !important;

  color: var(--dj-muted);

  font-size: 14px;

  line-height: 1.65;
}


.dj-checks li::before {
  content: "\2713";

  position: absolute;

  left: 0;
  top: 0;

  color: var(--dj-green);

  font-family: Arial,sans-serif;

  font-size: 13px;
  font-weight: 800;

  line-height: 1.65;
}


/* =========================================================
   FINAL
   ========================================================= */

.dj-final {
  padding: 26px;

  border: 1px solid var(--dj-border);
  border-radius: 20px;

  background:
    radial-gradient(
      circle at right center,
      var(--dj-red-soft),
      transparent 34%
    ),
    radial-gradient(
      circle at left bottom,
      var(--dj-primary-soft),
      transparent 35%
    ),
    var(--dj-card);

  box-shadow: var(--dj-shadow);
}


.dj-final h2 {
  margin: 0 0 14px !important;

  font-size: 30px !important;
  font-weight: 800 !important;
}


.dj-final p {
  margin: 0 0 14px;
}


.dj-quote {
  padding: 18px 20px;

  border-left: 4px solid var(--dj-primary);

  border-radius: 12px;

  background: var(--dj-bg-soft);

  color: var(--dj-heading);

  font-size: 15px;
  font-weight: 700;

  line-height: 1.75;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:1200px) {

  .dj-hero-grid,
  .dj-grid-2 {
    grid-template-columns: 1fr;
  }


  .dj-overview {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }


  .dj-grid-3 {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:700px) {

  .dj-hero {
    padding: 22px;
  }


  .dj-hero h1 {
    font-size: 32px !important;
  }


  .dj-overview,
  .dj-grid-3 {
    grid-template-columns: 1fr;
  }


  .dj-info-row,
  .dj-stat-box {
    flex-direction: column;

    gap: 6px;
  }


  .dj-info-value {
    text-align: left;
  }


  .dj-hero-media,
  .dj-hero-media img {
    min-height: 220px;
  }

}

/* =========================================================
   VOICE PARTY - HELIOS DARK / LIGHT
   ========================================================= */

:root,
:root[data-theme="light"] {

  --vp-bg: #ffffff;
  --vp-bg-soft: #f7f8fb;
  --vp-bg-soft-2: #f2f4f8;
  --vp-card: #ffffff;

  --vp-border: #e3e7ef;

  --vp-text: #101828;
  --vp-muted: #5f6b7a;
  --vp-heading: #0f172a;

  --vp-primary: #3b82f6;
  --vp-primary-soft: rgba(59,130,246,.10);

  --vp-purple: #8b5cf6;
  --vp-purple-soft: rgba(139,92,246,.10);

  --vp-green: #16a34a;
  --vp-green-soft: rgba(22,163,74,.10);

  --vp-red: #dc2626;
  --vp-red-soft: rgba(220,38,38,.10);

  --vp-gold: #ca8a04;
  --vp-gold-soft: rgba(202,138,4,.10);

  --vp-shadow:
    0 10px 30px rgba(15,23,42,.06);
}


:root[data-theme="dark"] {

  --vp-bg: #111318;
  --vp-bg-soft: #171a21;
  --vp-bg-soft-2: #1b1f27;
  --vp-card: #141821;

  --vp-border: #262b36;

  --vp-text: #eef2f7;
  --vp-muted: #a8b0bf;
  --vp-heading: #ffffff;

  --vp-primary: #6ea8ff;
  --vp-primary-soft: rgba(110,168,255,.10);

  --vp-purple: #b592ff;
  --vp-purple-soft: rgba(181,146,255,.10);

  --vp-green: #4ade80;
  --vp-green-soft: rgba(74,222,128,.10);

  --vp-red: #fb7185;
  --vp-red-soft: rgba(251,113,133,.10);

  --vp-gold: #facc15;
  --vp-gold-soft: rgba(250,204,21,.10);

  --vp-shadow:
    0 14px 36px rgba(0,0,0,.24);
}


/* =========================================================
   BASE
   ========================================================= */

.voice-party-page {
  width: 100%;

  color: var(--vp-text);
}


.voice-party-page *,
.voice-party-page *::before,
.voice-party-page *::after {
  box-sizing: border-box;
}


.voice-party-page h1,
.voice-party-page h2,
.voice-party-page h3,
.voice-party-page h4 {
  color: var(--vp-heading);
}


.voice-party-page p {
  color: var(--vp-muted);

  line-height: 1.75;
}


.vp-section {
  margin: 0 0 38px;
}


/* =========================================================
   KICKER
   ========================================================= */

.vp-kicker {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 10px;

  color: var(--vp-primary);

  font-size: 11px;

  font-weight: 800;

  letter-spacing: .12em;

  text-transform: uppercase;
}


.vp-kicker.purple {
  color: var(--vp-purple);
}


.vp-kicker.green {
  color: var(--vp-green);
}


.vp-kicker.red {
  color: var(--vp-red);
}


.vp-kicker.gold {
  color: var(--vp-gold);
}


/* =========================================================
   HERO
   ========================================================= */

.vp-hero {
  position: relative;

  overflow: hidden;

  padding: 30px;

  border: 1px solid var(--vp-border);

  border-radius: 20px;

  background:
    radial-gradient(
      circle at top right,
      var(--vp-primary-soft),
      transparent 34%
    ),
    radial-gradient(
      circle at bottom left,
      var(--vp-purple-soft),
      transparent 35%
    ),
    var(--vp-bg);

  box-shadow: var(--vp-shadow);
}


.vp-hero-grid {
  display: grid;

  grid-template-columns:
    1.25fr .95fr;

  gap: 28px;

  align-items: center;
}


.vp-hero h1 {
  margin: 0 0 12px !important;

  padding: 0 !important;

  border: 0 !important;

  font-size: 40px !important;

  line-height: 1.1 !important;

  font-weight: 800 !important;
}


.vp-hero p {
  margin: 0 0 16px !important;

  max-width: 760px;

  font-size: 15px;
}


.vp-hero-badges {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: 18px;
}


.vp-badge {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  padding: 9px 12px;

  border: 1px solid var(--vp-border);

  border-radius: 999px;

  background: var(--vp-bg-soft);

  color: var(--vp-text);

  font-size: 12px;

  font-weight: 700;
}


.vp-badge i {
  color: var(--vp-primary);
}


/* =========================================================
   IMAGES
   ========================================================= */

.vp-hero-media,
.vp-media-card {
  overflow: hidden;

  border: 1px solid var(--vp-border);

  border-radius: 18px;

  background: var(--vp-bg-soft);
}


.vp-hero-media {
  min-height: 300px;
}


.vp-hero-media img,
.vp-media-card img {
  display: block;

  width: 100%;

  height: 100%;

  min-height: 280px;

  object-fit: cover;
}


/* =========================================================
   OVERVIEW
   ========================================================= */

.vp-overview {
  display: grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap: 14px;

  margin-top: 22px;
}


.vp-stat {
  padding: 16px;

  border: 1px solid var(--vp-border);

  border-radius: 14px;

  background: var(--vp-card);
}


.vp-stat-label {
  display: block;

  margin-bottom: 6px;

  color: var(--vp-muted);

  font-size: 11px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: .08em;
}


.vp-stat-value {
  color: var(--vp-heading);

  font-size: 18px;

  font-weight: 800;

  line-height: 1.25;
}


/* =========================================================
   HEAD
   ========================================================= */

.vp-head {
  display: flex;

  align-items: center;

  gap: 14px;

  margin-bottom: 18px;

  padding-bottom: 14px;

  border-bottom:
    1px solid var(--vp-border);
}


.vp-head-icon {
  display: grid;

  place-items: center;

  width: 42px;

  height: 42px;

  flex: 0 0 42px;

  border-radius: 12px;

  background: var(--vp-primary-soft);

  color: var(--vp-primary);
}


.vp-head-icon.purple {
  background: var(--vp-purple-soft);

  color: var(--vp-purple);
}


.vp-head-icon.green {
  background: var(--vp-green-soft);

  color: var(--vp-green);
}


.vp-head-icon.red {
  background: var(--vp-red-soft);

  color: var(--vp-red);
}


.vp-head-icon.gold {
  background: var(--vp-gold-soft);

  color: var(--vp-gold);
}


.vp-head h2 {
  margin: 0 !important;

  padding: 0 !important;

  border: 0 !important;

  font-size: 28px !important;

  font-weight: 800 !important;

  line-height: 1.2 !important;
}


/* =========================================================
   GRIDS
   ========================================================= */

.vp-grid-2 {
  display: grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap: 18px;
}


.vp-grid-4 {
  display: grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap: 16px;
}


/* =========================================================
   CARDS
   ========================================================= */

.vp-card {
  padding: 22px;

  border: 1px solid var(--vp-border);

  border-radius: 18px;

  background: var(--vp-card);

  box-shadow: var(--vp-shadow);
}


.vp-card h3 {
  margin: 0 0 12px !important;

  font-size: 22px !important;

  font-weight: 800 !important;
}


/* =========================================================
   INFO LIST
   ========================================================= */

.vp-info-list {
  display: grid;

  gap: 12px;

  margin-top: 16px;
}


.vp-info-row {
  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 18px;

  padding: 12px 0;

  border-bottom:
    1px solid var(--vp-border);
}


.vp-info-row:last-child {
  border-bottom: 0;
}


.vp-info-label {
  color: var(--vp-muted);

  font-size: 13px;

  font-weight: 700;
}


.vp-info-value {
  text-align: right;

  color: var(--vp-heading);

  font-size: 13px;

  font-weight: 700;
}


.vp-key {
  display: inline-flex;

  padding: 4px 9px;

  border: 1px solid var(--vp-border);

  border-radius: 7px;

  background: var(--vp-bg-soft);

  font-family: monospace;
}


/* =========================================================
   NOTE
   ========================================================= */

.vp-note {
  display: flex;

  gap: 12px;

  padding: 14px 16px;

  margin-top: 14px;

  border: 1px solid var(--vp-border);

  border-radius: 14px;

  background: var(--vp-bg-soft);

  color: var(--vp-muted);

  line-height: 1.65;
}


.vp-note i {
  margin-top: 2px;

  color: var(--vp-gold);
}


.vp-note strong {
  color: var(--vp-heading);
}


/* =========================================================
   STEPS
   ========================================================= */

.vp-steps {
  display: grid;

  gap: 11px;
}


.vp-step {
  display: flex;

  gap: 13px;

  padding: 13px;

  border: 1px solid var(--vp-border);

  border-radius: 12px;

  background: var(--vp-bg-soft);
}


.vp-step > span {
  display: grid;

  place-items: center;

  width: 36px;

  height: 36px;

  flex: 0 0 36px;

  border-radius: 9px;

  background: var(--vp-primary-soft);

  color: var(--vp-primary);

  font-size: 12px;

  font-weight: 800;
}


.vp-step strong {
  color: var(--vp-heading);
}


.vp-step p {
  margin: 3px 0 0;

  font-size: 13px;
}


/* =========================================================
   MINI FEATURES
   ========================================================= */

.vp-mini {
  padding: 18px;

  border: 1px solid var(--vp-border);

  border-radius: 16px;

  background: var(--vp-card);
}


.vp-mini-icon {
  display: grid;

  place-items: center;

  width: 42px;

  height: 42px;

  margin-bottom: 12px;

  border-radius: 11px;

  background: var(--vp-primary-soft);

  color: var(--vp-primary);
}


.vp-mini-icon.green {
  color: var(--vp-green);

  background: var(--vp-green-soft);
}


.vp-mini-icon.purple {
  color: var(--vp-purple);

  background: var(--vp-purple-soft);
}


.vp-mini-icon.red {
  color: var(--vp-red);

  background: var(--vp-red-soft);
}


.vp-mini h4 {
  margin: 0 0 9px !important;

  font-size: 16px !important;

  font-weight: 800 !important;
}


.vp-mini p {
  margin: 0;

  font-size: 14px;
}


/* =========================================================
   HIGHLIGHT
   ========================================================= */

.vp-highlight {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 7px 10px;

  margin-bottom: 12px;

  border-radius: 999px;

  font-size: 12px;

  font-weight: 800;
}


.vp-highlight.green {
  color: var(--vp-green);

  background: var(--vp-green-soft);
}


.vp-highlight.purple {
  color: var(--vp-purple);

  background: var(--vp-purple-soft);
}


.vp-highlight.red {
  color: var(--vp-red);

  background: var(--vp-red-soft);
}


/* =========================================================
   SETTINGS
   ========================================================= */

.vp-settings-grid {
  display: grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap: 14px;
}


.vp-setting {
  display: flex;

  align-items: flex-start;

  gap: 13px;

  padding: 17px;

  border: 1px solid var(--vp-border);

  border-radius: 14px;

  background: var(--vp-card);
}


.vp-setting > i {
  display: grid;

  place-items: center;

  width: 36px;

  height: 36px;

  flex: 0 0 36px;

  border-radius: 9px;

  background: var(--vp-primary-soft);

  color: var(--vp-primary);
}


.vp-setting strong {
  display: block;

  margin-bottom: 4px;

  color: var(--vp-heading);

  font-size: 14px;
}


.vp-setting span {
  display: block;

  color: var(--vp-muted);

  font-size: 12px;

  line-height: 1.55;
}


/* =========================================================
   MICROPHONE METER
   ========================================================= */

.vp-mic-meter {
  display: flex;

  align-items: flex-end;

  gap: 5px;

  height: 65px;

  margin: 20px 0;

  padding: 10px 12px;

  border: 1px solid var(--vp-border);

  border-radius: 12px;

  background: var(--vp-bg-soft);
}


.vp-mic-meter span {
  flex: 1;

  min-width: 5px;

  border-radius: 4px;

  background: var(--vp-green);
}


.vp-mic-meter span:nth-child(1) { height: 18%; }
.vp-mic-meter span:nth-child(2) { height: 31%; }
.vp-mic-meter span:nth-child(3) { height: 48%; }
.vp-mic-meter span:nth-child(4) { height: 74%; }
.vp-mic-meter span:nth-child(5) { height: 92%; }
.vp-mic-meter span:nth-child(6) { height: 65%; }
.vp-mic-meter span:nth-child(7) { height: 42%; }
.vp-mic-meter span:nth-child(8) { height: 25%; }


/* =========================================================
   AUDIO QUALITY
   ========================================================= */

.vp-audio-grid {
  display: grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap: 14px;
}


.vp-audio-card {
  padding: 19px;

  border: 1px solid var(--vp-border);

  border-radius: 16px;

  background: var(--vp-card);
}


.vp-audio-icon {
  display: grid;

  place-items: center;

  width: 42px;

  height: 42px;

  margin-bottom: 13px;

  border-radius: 11px;

  color: var(--vp-purple);

  background: var(--vp-purple-soft);
}


.vp-audio-card small {
  display: block;

  margin-bottom: 4px;

  color: var(--vp-muted);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: .08em;

  text-transform: uppercase;
}


.vp-audio-card strong {
  display: block;

  margin-bottom: 8px;

  color: var(--vp-heading);

  font-size: 18px;
}


.vp-audio-card p {
  margin: 0;

  font-size: 13px;
}


/* =========================================================
   FINAL
   ========================================================= */

.vp-final {
  padding: 26px;

  border: 1px solid var(--vp-border);

  border-radius: 20px;

  background:
    radial-gradient(
      circle at right center,
      var(--vp-purple-soft),
      transparent 34%
    ),
    radial-gradient(
      circle at left bottom,
      var(--vp-primary-soft),
      transparent 35%
    ),
    var(--vp-card);

  box-shadow: var(--vp-shadow);
}


.vp-final h2 {
  margin: 0 0 14px !important;

  font-size: 30px !important;

  font-weight: 800 !important;
}


.vp-final p {
  margin: 0 0 16px;
}


.vp-quote {
  padding: 18px 20px;

  border-left:
    4px solid var(--vp-primary);

  border-radius: 12px;

  background: var(--vp-bg-soft);

  color: var(--vp-heading);

  font-size: 15px;

  font-weight: 700;

  line-height: 1.75;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:1200px) {

  .vp-hero-grid,
  .vp-grid-2 {
    grid-template-columns: 1fr;
  }


  .vp-overview {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .vp-grid-4 {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .vp-settings-grid,
  .vp-audio-grid {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:700px) {

  .vp-hero {
    padding: 22px;
  }


  .vp-hero h1 {
    font-size: 32px !important;
  }


  .vp-overview,
  .vp-grid-4,
  .vp-settings-grid,
  .vp-audio-grid {
    grid-template-columns: 1fr;
  }


  .vp-info-row {
    flex-direction: column;

    gap: 6px;
  }


  .vp-info-value {
    text-align: left;
  }


  .vp-hero-media,
  .vp-hero-media img,
  .vp-media-card img {
    min-height: 220px;
  }

}