/* L2HUB Hybrid Classic + Modern — responsive redesign */
:root {
  --l2-bg: #080a0f;
  --l2-bg-soft: #0d1118;
  --l2-panel: rgba(15, 19, 28, .88);
  --l2-panel-2: rgba(21, 27, 38, .78);
  --l2-panel-3: rgba(10, 14, 21, .68);
  --l2-text: #f5f1e8;
  --l2-muted: #a8b0be;
  --l2-gold: #d8aa4a;
  --l2-gold-2: #f2d17d;
  --l2-cyan: #57d5d8;
  --l2-red: #e9685b;
  --l2-line: rgba(232, 190, 99, .18);
  --l2-line-soft: rgba(255,255,255,.08);
  --l2-shadow: 0 24px 70px rgba(0, 0, 0, .42);
  --l2-radius: 22px;
  --l2-radius-sm: 14px;
  --l2-max: 1280px;
}

html { scroll-behavior: smooth; background: var(--l2-bg); }
body.l2hub-modern {
  min-width: 0 !important;
  overflow-x: hidden !important;
  background: var(--l2-bg) !important;
  color: var(--l2-text) !important;
  font-family: "beaufort-for-lol-bold", Georgia, "Times New Roman", serif !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  -webkit-font-smoothing: antialiased;
}
body.l2hub-modern::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(180deg, rgba(7,9,14,.18) 0%, rgba(7,9,14,.72) 48%, #080a0f 92%),
    url("../images/bg-1.jpg") center top / cover no-repeat;
  opacity: .82;
  pointer-events: none;
}
body.l2hub-modern::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 50% 8%, rgba(226,166,80,.12), transparent 38%),
    linear-gradient(90deg, rgba(0,0,0,.55), transparent 24%, transparent 76%, rgba(0,0,0,.55));
  pointer-events: none;
}

body.l2hub-modern *, body.l2hub-modern *::before, body.l2hub-modern *::after { box-sizing: border-box; }
body.l2hub-modern img { max-width: 100%; height: auto; }
body.l2hub-modern a { color: inherit; }
body.l2hub-modern p, body.l2hub-modern li { color: #d8dce3; }
body.l2hub-modern .l2Blue { color: var(--l2-cyan) !important; }
body.l2hub-modern .hubYellow, body.l2hub-modern .yellow { color: var(--l2-gold-2) !important; }

/* ---------- shared top navigation ---------- */
body.l2hub-modern .menu {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: 76px !important;
  z-index: 5000 !important;
  background: rgba(8, 11, 17, .78) !important;
  border-bottom: 1px solid var(--l2-line) !important;
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  box-shadow: 0 12px 35px rgba(0,0,0,.22);
}
body.l2hub-modern .menu .wrapper {
  position: relative !important;
  top: auto !important;
  transform: none !important;
  width: min(calc(100% - 32px), var(--l2-max)) !important;
  max-width: var(--l2-max) !important;
  height: 76px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
}
body.l2hub-modern .menu .wrapper::before {
  content: "L2HUB";
  flex: 0 0 auto;
  color: var(--l2-gold-2);
  font-size: 22px;
  letter-spacing: .16em;
  text-shadow: 0 0 22px rgba(216,170,74,.35);
}
body.l2hub-modern .menu ul {
  position: static !important;
  inset: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  list-style: none !important;
}
body.l2hub-modern .menu ul li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
body.l2hub-modern .menu ul li.children:empty { display: none !important; }
body.l2hub-modern .menu ul li a {
  display: flex !important;
  align-items: center !important;
  min-height: 42px !important;
  padding: 0 13px !important;
  color: #d9dce3 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  letter-spacing: .015em !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  background: transparent !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
body.l2hub-modern .menu ul li a:hover,
body.l2hub-modern .menu ul li a.is-active {
  color: var(--l2-text) !important;
  background: rgba(255,255,255,.055) !important;
  border-color: var(--l2-line-soft) !important;
}
body.l2hub-modern .menu ul li a.yellow,
body.l2hub-modern .menu ul li a[href*="paymono"] {
  color: #17120a !important;
  background: linear-gradient(135deg, #c99434, #f1d076) !important;
  border-color: rgba(255,225,151,.58) !important;
  box-shadow: 0 10px 28px rgba(216,170,74,.18);
}
body.l2hub-modern .menu .language-switcher {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
}
body.l2hub-modern .menu .lang-button {
  width: 36px !important;
  height: 36px !important;
  border-radius: 11px !important;
  border: 1px solid var(--l2-line-soft) !important;
  background: rgba(255,255,255,.045) !important;
  box-shadow: none !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}
body.l2hub-modern .menu .lang-icon { width: 18px !important; height: 18px !important; object-fit: cover !important; border-radius: 50% !important; margin: 0 !important; }
body.l2hub-modern .menu .lang-text { display: none !important; }
body.l2hub-modern .show-menu { display: none !important; }

/* ---------- main shell ---------- */
body.l2hub-modern #main-content {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 112px 0 0 !important;
  overflow: visible !important;
  background: transparent !important;
}
body.l2hub-modern #main-content::before { display: none !important; }
body.l2hub-modern #main-content .wrapper {
  width: min(calc(100% - 40px), var(--l2-max)) !important;
  max-width: var(--l2-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body.l2hub-modern #main-content .wrapper > .inner { width: 100% !important; }
body.l2hub-modern .wrapper.content { padding: 22px 0 56px !important; }
body.l2hub-modern .wrapper.content > .inner {
  background: linear-gradient(180deg, rgba(16,20,29,.82), rgba(9,13,20,.89)) !important;
  border: 1px solid var(--l2-line) !important;
  border-radius: var(--l2-radius) !important;
  box-shadow: var(--l2-shadow) !important;
  overflow: hidden !important;
}
body.l2hub-modern .wrapper.content .content-flex {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  min-width: 0 !important;
  gap: 0 !important;
}

/* ---------- static content pages ---------- */
body.l2hub-modern:not(.page-home) .wrapper.content > .inner { padding: clamp(22px, 4vw, 54px) !important; }
body.l2hub-modern:not(.page-home) .content-flex > * { width: 100% !important; max-width: none !important; min-width: 0 !important; }
body.l2hub-modern #downloadMainDiv,
body.l2hub-modern .fullDescriptionServer { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }

body.l2hub-modern #downloadHeadTittle,
body.l2hub-modern #aboutHeadTittle {
  position: relative !important;
  margin: 0 0 18px !important;
  padding: 0 0 18px !important;
  color: var(--l2-text) !important;
  font-size: clamp(30px, 5vw, 56px) !important;
  line-height: 1.06 !important;
  letter-spacing: -.025em !important;
  text-align: left !important;
  border-bottom: 1px solid var(--l2-line) !important;
}
body.l2hub-modern #downloadHeadTittle::after,
body.l2hub-modern #aboutHeadTittle::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 92px;
  height: 2px;
  background: linear-gradient(90deg, var(--l2-gold), var(--l2-cyan));
  box-shadow: 0 0 20px rgba(87,213,216,.25);
}
body.l2hub-modern #firstDeskUnderTittle,
body.l2hub-modern #aboveDeskDiv {
  max-width: 880px !important;
  margin: 0 0 28px !important;
  color: var(--l2-muted) !important;
  font-size: clamp(15px, 1.7vw, 18px) !important;
  line-height: 1.75 !important;
  text-align: left !important;
}
body.l2hub-modern .blockInsideDesk,
body.l2hub-modern #downloadDeskDiv,
body.l2hub-modern .container {
  min-width: 0 !important;
}
body.l2hub-modern .fullDescriptionServer > .blockInsideDesk,
body.l2hub-modern .page-farm .blockInsideDesk,
body.l2hub-modern .page-pvp .blockInsideDesk {
  margin: 18px 0 !important;
  padding: clamp(18px, 2.7vw, 30px) !important;
  border: 1px solid var(--l2-line-soft) !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.015)) !important;
  box-shadow: 0 14px 38px rgba(0,0,0,.18) !important;
}
body.l2hub-modern .aboveDeskTittle,
body.l2hub-modern .deskAboutTittle {
  margin: 0 0 16px !important;
  color: var(--l2-text) !important;
  font-size: clamp(18px, 2.2vw, 24px) !important;
  line-height: 1.25 !important;
  text-align: left !important;
}
body.l2hub-modern .deskAboutTittle { color: var(--l2-muted) !important; font-size: 14px !important; text-transform: uppercase; letter-spacing: .12em; }
body.l2hub-modern .mainDeskSpanFirst,
body.l2hub-modern .mainDeskSpan {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  color: #dfe3e8 !important;
  border-bottom: 1px solid rgba(255,255,255,.055) !important;
  line-height: 1.45 !important;
  text-align: left !important;
}
body.l2hub-modern .mainDeskSpanFirst:last-child,
body.l2hub-modern .mainDeskSpan:last-child { border-bottom: 0 !important; }
body.l2hub-modern .mainDeskSpanFirst { display: inline-flex !important; width: auto !important; margin: 4px 5px 4px 0 !important; border: 1px solid var(--l2-line-soft) !important; border-radius: 12px !important; background: rgba(0,0,0,.16) !important; }
body.l2hub-modern .deskrImg,
body.l2hub-modern .deskrTableImg {
  flex: 0 0 36px !important;
  width: 36px !important;
  height: 36px !important;
  object-fit: cover !important;
  border-radius: 9px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.25) !important;
}
body.l2hub-modern .littleMarginSpan { margin: 0 !important; }

/* info tables */
body.l2hub-modern #customTabble,
body.l2hub-modern .anotherCustomTabble,
body.l2hub-modern .oneMoreCustomTabble {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 12px 0 0 !important;
}
body.l2hub-modern .customTabbleRow,
body.l2hub-modern .anotherCustomRow,
body.l2hub-modern .oneMoreCustomRow {
  display: grid !important;
  grid-template-columns: minmax(120px, .8fr) minmax(0, 1.6fr) !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  padding: 14px !important;
  border: 1px solid var(--l2-line-soft) !important;
  border-radius: 14px !important;
  background: rgba(0,0,0,.17) !important;
}
body.l2hub-modern .howToSpend,
body.l2hub-modern .placeForTake,
body.l2hub-modern .anotherFirstCol,
body.l2hub-modern .anotherSecondCol,
body.l2hub-modern .oneMoreFirstCol,
body.l2hub-modern .oneMoreSecondCol,
body.l2hub-modern .oneMorerSecondCol { min-width: 0 !important; width: auto !important; padding: 0 !important; }

/* Rules */
body.l2hub-modern.page-rules .container { max-width: none !important; padding: 0 !important; }
body.l2hub-modern.page-rules .container > h1 {
  margin: 8px 0 24px !important;
  color: var(--l2-gold-2) !important;
  font-size: 22px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
body.l2hub-modern.page-rules .container > h2,
body.l2hub-modern.page-rules #downloadDeskDiv > h2 {
  margin: 28px 0 10px !important;
  padding: 15px 18px !important;
  color: var(--l2-text) !important;
  font-size: clamp(18px, 2vw, 23px) !important;
  line-height: 1.3 !important;
  border: 1px solid var(--l2-line) !important;
  border-radius: 14px 14px 6px 6px !important;
  background: linear-gradient(90deg, rgba(216,170,74,.12), rgba(87,213,216,.035)) !important;
}
body.l2hub-modern.page-rules .container > ul,
body.l2hub-modern.page-rules #downloadDeskDiv > ul,
body.l2hub-modern.page-rules #downloadDeskDiv > p {
  margin: 0 0 14px !important;
  padding: 18px 22px 18px 40px !important;
  border: 1px solid var(--l2-line-soft) !important;
  border-radius: 6px 6px 14px 14px !important;
  background: rgba(0,0,0,.18) !important;
}
body.l2hub-modern.page-rules #downloadDeskDiv > p { padding-left: 22px !important; }
body.l2hub-modern.page-rules li { margin: 7px 0 !important; line-height: 1.62 !important; }

/* Files */
body.l2hub-modern.page-files #downloadDeskDiv {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin: 18px 0 28px !important;
  padding: 18px !important;
  border: 1px solid var(--l2-line-soft) !important;
  border-radius: 18px !important;
  background: rgba(0,0,0,.16) !important;
}
body.l2hub-modern.page-files #downloadDeskDiv > * { min-width: 0 !important; }
body.l2hub-modern.page-files #downloadClient,
body.l2hub-modern.page-files #downloadPatch,
body.l2hub-modern.page-files #downloadDeskDiv > h1,
body.l2hub-modern.page-files #downloadDeskDiv > p { grid-column: 1 / -1 !important; text-align: left !important; }
body.l2hub-modern.page-files .btn,
body.l2hub-modern.page-files .btnDownload,
body.l2hub-modern.page-files .button,
body.l2hub-modern.page-files .download-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 180px !important;
  min-height: 50px !important;
  padding: 0 22px !important;
  border: 1px solid rgba(244,209,125,.45) !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg, #b87b26, #efd17f) !important;
  color: #17110a !important;
  font: inherit !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  box-shadow: 0 12px 28px rgba(210,155,65,.15) !important;
  transform: none !important;
}
body.l2hub-modern.page-files .btn:hover,
body.l2hub-modern.page-files .btnDownload:hover,
body.l2hub-modern.page-files .button:hover,
body.l2hub-modern.page-files .download-button:hover { filter: brightness(1.07); transform: translateY(-2px) !important; }
body.l2hub-modern.page-files .download-section { margin: 18px 0 !important; padding: 18px !important; border: 1px solid var(--l2-line-soft) !important; border-radius: 16px !important; background: rgba(0,0,0,.16) !important; }

/* Farm / PvP guides */
body.l2hub-modern.page-farm .container,
body.l2hub-modern.page-pvp .container { max-width: none !important; padding: 0 !important; }
body.l2hub-modern.page-farm .blockInsideDesk,
body.l2hub-modern.page-pvp .blockInsideDesk {
  display: grid !important;
  grid-template-columns: minmax(220px, .75fr) minmax(0, 1.25fr) !important;
  align-items: start !important;
  gap: 24px !important;
}
body.l2hub-modern.page-farm .blockInsideDesk > img,
body.l2hub-modern.page-pvp .blockInsideDesk > img {
  width: 100% !important;
  max-width: 460px !important;
  height: auto !important;
  margin: 0 !important;
  border-radius: 14px !important;
  border: 1px solid var(--l2-line-soft) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.32) !important;
}
body.l2hub-modern.page-farm .blockInsideDesk > img + img,
body.l2hub-modern.page-pvp .blockInsideDesk > img + img { margin-top: 10px !important; }
body.l2hub-modern.page-farm h1,
body.l2hub-modern.page-pvp h1 { color: var(--l2-text) !important; font-size: clamp(22px, 3vw, 34px) !important; line-height: 1.2 !important; }
body.l2hub-modern.page-farm h2,
body.l2hub-modern.page-pvp h2 { color: var(--l2-gold-2) !important; font-size: clamp(18px, 2.1vw, 24px) !important; line-height: 1.35 !important; }

/* ---------- home page ---------- */
body.l2hub-modern.page-home #main-content { padding-top: 76px !important; }
body.l2hub-modern.page-home .header { padding: 48px 0 18px !important; }
body.l2hub-modern.page-home .header .box {
  min-height: 390px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 28px !important;
  border: 1px solid var(--l2-line) !important;
  border-radius: 26px !important;
  background: linear-gradient(135deg, rgba(8,12,18,.2), rgba(8,12,18,.72)) !important;
  box-shadow: var(--l2-shadow) !important;
  overflow: hidden !important;
}
body.l2hub-modern.page-home .header .box::before {
  content: "HIGH FIVE · x17 · PvP / PvE";
  position: absolute;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--l2-cyan);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
}
body.l2hub-modern.page-home .header .box .logo {
  width: min(72vw, 520px) !important;
  max-width: 520px !important;
  height: 260px !important;
  margin: 28px auto 0 !important;
}
body.l2hub-modern.page-home .header .box .logo a,
body.l2hub-modern.page-home .header .box .logo a::before,
body.l2hub-modern.page-home .header .box .logo a::after {
  width: 100% !important;
  height: 100% !important;
  background-position: center !important;
  background-size: contain !important;
}
body.l2hub-modern.page-home .header .box .logo a span {
  top: auto !important;
  bottom: -10px !important;
  font-size: clamp(22px, 3vw, 34px) !important;
  color: #fff4df !important;
}
body.l2hub-modern.page-home .header .nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 0 !important;
  margin: 16px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  gap: 10px !important;
}
body.l2hub-modern.page-home .header .nav::before { display: none !important; }
body.l2hub-modern.page-home .header .nav .side { display: flex !important; gap: 10px !important; }
body.l2hub-modern.page-home .header .nav a {
  min-height: 48px !important;
  padding: 0 18px !important;
  border: 1px solid var(--l2-line-soft) !important;
  border-radius: 13px !important;
  background: rgba(10,14,21,.75) !important;
  color: var(--l2-text) !important;
}
body.l2hub-modern.page-home .header .nav .link-2 {
  color: #17110a !important;
  background: linear-gradient(135deg, #c98b32, #f0d27f) !important;
  border-color: rgba(255,225,151,.55) !important;
}
body.l2hub-modern.page-home .wrapper.content > .inner { padding: 28px !important; }
body.l2hub-modern.page-home .content-flex {
  grid-template-columns: minmax(0, 1.55fr) minmax(290px, .75fr) !important;
  gap: 22px !important;
}
body.l2hub-modern.page-home .flex-left,
body.l2hub-modern.page-home .flex-right { width: 100% !important; min-width: 0 !important; }
body.l2hub-modern.page-home .shortDescriptionServer {
  padding: clamp(20px, 3vw, 34px) !important;
  border: 1px solid var(--l2-line-soft) !important;
  border-radius: 18px !important;
  background: rgba(0,0,0,.18) !important;
  color: #d8dce3 !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
}
body.l2hub-modern.page-home .shortDescriptionServer h3 {
  margin: 0 0 14px !important;
  color: var(--l2-text) !important;
  font-size: clamp(22px, 2.4vw, 32px) !important;
  line-height: 1.2 !important;
}
body.l2hub-modern.page-home .shortDescriptionServer ul { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 10px !important; margin: 18px 0 !important; padding: 0 !important; list-style: none !important; }
body.l2hub-modern.page-home .shortDescriptionServer li {
  margin: 0 !important;
  padding: 14px 14px 14px 38px !important;
  border: 1px solid var(--l2-line-soft) !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,.028) !important;
  position: relative !important;
}
body.l2hub-modern.page-home .shortDescriptionServer li::before { content: "✦"; position: absolute; left: 15px; top: 13px; color: var(--l2-gold-2); }
body.l2hub-modern.page-home #linkForFullDesk {
  display: inline-flex !important;
  min-height: 46px !important;
  align-items: center !important;
  padding: 0 18px !important;
  margin: 8px 0 !important;
  border: 1px solid var(--l2-line) !important;
  border-radius: 12px !important;
  color: var(--l2-gold-2) !important;
  background: rgba(216,170,74,.06) !important;
}
body.l2hub-modern.page-home .flex-right { display: grid !important; gap: 14px !important; align-content: start !important; }
body.l2hub-modern.page-home .side-item {
  margin: 0 !important;
  border: 1px solid var(--l2-line-soft) !important;
  border-radius: 16px !important;
  background: rgba(0,0,0,.21) !important;
  overflow: hidden !important;
}
body.l2hub-modern.page-home .side-item .main-title,
body.l2hub-modern.page-home .animated-gradient-text {
  margin: 0 !important;
  padding: 14px 16px !important;
  color: var(--l2-gold-2) !important;
  font-size: 16px !important;
  text-align: left !important;
  border-bottom: 1px solid var(--l2-line-soft) !important;
  background: rgba(255,255,255,.025) !important;
}
body.l2hub-modern.page-home .side-body { padding: 10px !important; }
body.l2hub-modern.page-home .top-box .item {
  min-height: 36px !important;
  margin: 0 0 5px !important;
  padding: 7px 9px !important;
  border-radius: 9px !important;
  background: rgba(255,255,255,.025) !important;
}
body.l2hub-modern.page-home iframe[src*="discord.com/widget"] {
  display: block !important;
  width: min(calc(100% - 40px), var(--l2-max)) !important;
  max-width: var(--l2-max) !important;
  height: 330px !important;
  margin: 0 auto 36px !important;
  border: 1px solid var(--l2-line) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}
body.l2hub-modern.page-home .card { margin-top: 18px !important; background: rgba(255,255,255,.08) !important; border: 1px solid var(--l2-line-soft) !important; }

/* external vote badges: less intrusive */
body.l2hub-modern.page-home > .overlay > a[style*="position: fixed"],
body.l2hub-modern.page-home .img-vote-server,
body.l2hub-modern.page-home #d5e6f777fa72Obi6324bx,
body.l2hub-modern.page-home a[href*="l2list.com"][style*="fixed"],
body.l2hub-modern.page-home a[href*="l2elo.com"][style*="fixed"],
body.l2hub-modern.page-home a[href*="hopzone.net"] img[style*="fixed"] { opacity: .48 !important; transform: scale(.72) !important; transform-origin: bottom right !important; transition: opacity .2s ease !important; }
body.l2hub-modern.page-home > .overlay > a[style*="position: fixed"]:hover,
body.l2hub-modern.page-home .img-vote-server:hover { opacity: 1 !important; }

/* ---------- footer ---------- */
body.l2hub-modern .wrapper.footer {
  width: min(calc(100% - 40px), var(--l2-max)) !important;
  max-width: var(--l2-max) !important;
  margin: 0 auto !important;
  padding: 0 0 30px !important;
}
body.l2hub-modern .wrapper.footer > .inner {
  padding: 22px !important;
  border-top: 1px solid var(--l2-line) !important;
  color: var(--l2-muted) !important;
}
body.l2hub-modern .footer .box { display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; gap: 20px !important; align-items: center !important; }
body.l2hub-modern .footer .text { color: var(--l2-muted) !important; font-size: 12px !important; line-height: 1.6 !important; }
body.l2hub-modern .footer .logo { display: none !important; }
body.l2hub-modern .footer .navi ul { display: flex !important; gap: 10px !important; flex-wrap: wrap !important; list-style: none !important; }
body.l2hub-modern .footer .navi a { color: #d8dce3 !important; }

/* ---------- reveal & utility ---------- */
body.l2hub-modern .l2-reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
body.l2hub-modern .l2-reveal.is-visible { opacity: 1; transform: none; }
.l2hub-backtop {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 4900;
  width: 44px;
  height: 44px;
  border: 1px solid var(--l2-line);
  border-radius: 13px;
  background: rgba(11,15,22,.88);
  color: var(--l2-gold-2);
  backdrop-filter: blur(12px);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: .2s ease;
}
.l2hub-backtop.is-visible { opacity: 1; visibility: visible; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  body.l2hub-modern .menu .wrapper::before { font-size: 18px; }
  body.l2hub-modern .menu ul li a { padding: 0 9px !important; font-size: 12px !important; }
  body.l2hub-modern.page-home .content-flex { grid-template-columns: 1fr !important; }
  body.l2hub-modern.page-home .flex-right { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}

@media (max-width: 900px) {
  body.l2hub-modern { font-size: 15px !important; }
  body.l2hub-modern .menu { height: 68px !important; }
  body.l2hub-modern .menu .wrapper { height: 68px !important; width: min(calc(100% - 24px), var(--l2-max)) !important; }
  body.l2hub-modern .show-menu {
    order: 3 !important;
    position: relative !important;
    display: flex !important;
    width: 42px !important;
    height: 42px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--l2-line-soft) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.045) !important;
  }
  body.l2hub-modern .show-menu span,
  body.l2hub-modern .show-menu span::before,
  body.l2hub-modern .show-menu span::after {
    display: block !important;
    position: absolute !important;
    width: 18px !important;
    height: 2px !important;
    border-radius: 99px !important;
    background: var(--l2-text) !important;
    content: "" !important;
  }
  body.l2hub-modern .show-menu span::before { transform: translateY(-6px); }
  body.l2hub-modern .show-menu span::after { transform: translateY(6px); }
  body.l2hub-modern .show-menu.toggle span { background: transparent !important; opacity: 1 !important; visibility: visible !important; transform: none !important; }
  body.l2hub-modern .show-menu.toggle span::before { transform: rotate(45deg); }
  body.l2hub-modern .show-menu.toggle span::after { transform: rotate(-45deg); }
  body.l2hub-modern .menu ul {
    position: absolute !important;
    top: 60px !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-height: calc(100vh - 82px) !important;
    overflow: auto !important;
    padding: 10px !important;
    display: grid !important;
    gap: 4px !important;
    border: 1px solid var(--l2-line) !important;
    border-radius: 16px !important;
    background: rgba(8,11,17,.97) !important;
    box-shadow: 0 24px 55px rgba(0,0,0,.45) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-8px) !important;
    transition: .2s ease !important;
  }
  body.l2hub-modern .menu ul.toggle { opacity: 1 !important; visibility: visible !important; transform: none !important; }
  body.l2hub-modern .menu ul li a { min-height: 46px !important; padding: 0 14px !important; font-size: 14px !important; }
  body.l2hub-modern .menu .language-switcher { margin-left: auto !important; }
  body.l2hub-modern #main-content { padding-top: 88px !important; }
  body.l2hub-modern.page-home #main-content { padding-top: 68px !important; }
  body.l2hub-modern #main-content .wrapper,
  body.l2hub-modern .wrapper.footer,
  body.l2hub-modern.page-home iframe[src*="discord.com/widget"] { width: min(calc(100% - 24px), var(--l2-max)) !important; }
  body.l2hub-modern:not(.page-home) .wrapper.content > .inner { padding: 24px !important; }
  body.l2hub-modern #customTabble,
  body.l2hub-modern .anotherCustomTabble,
  body.l2hub-modern .oneMoreCustomTabble { grid-template-columns: 1fr !important; }
  body.l2hub-modern.page-files #downloadDeskDiv { grid-template-columns: 1fr !important; }
  body.l2hub-modern.page-farm .blockInsideDesk,
  body.l2hub-modern.page-pvp .blockInsideDesk { grid-template-columns: 1fr !important; }
  body.l2hub-modern.page-home .flex-right { grid-template-columns: 1fr !important; }
  body.l2hub-modern.page-home .shortDescriptionServer ul { grid-template-columns: 1fr !important; }
}

@media (max-width: 620px) {
  body.l2hub-modern .menu .wrapper::before { content: "L2HUB"; font-size: 16px; }
  body.l2hub-modern .menu .lang-button { width: 34px !important; height: 34px !important; }
  body.l2hub-modern:not(.page-home) .wrapper.content > .inner { padding: 18px !important; border-radius: 18px !important; }
  body.l2hub-modern #downloadHeadTittle,
  body.l2hub-modern #aboutHeadTittle { font-size: 34px !important; }
  body.l2hub-modern .fullDescriptionServer > .blockInsideDesk,
  body.l2hub-modern .page-farm .blockInsideDesk,
  body.l2hub-modern .page-pvp .blockInsideDesk { padding: 16px !important; border-radius: 15px !important; }
  body.l2hub-modern .mainDeskSpanFirst { display: flex !important; width: 100% !important; }
  body.l2hub-modern .mainDeskSpan { align-items: flex-start !important; font-size: 14px !important; padding-left: 0 !important; padding-right: 0 !important; }
  body.l2hub-modern .customTabbleRow,
  body.l2hub-modern .anotherCustomRow,
  body.l2hub-modern .oneMoreCustomRow { grid-template-columns: 1fr !important; gap: 5px !important; }
  body.l2hub-modern.page-rules .container > ul,
  body.l2hub-modern.page-rules #downloadDeskDiv > ul { padding-left: 32px !important; padding-right: 14px !important; }
  body.l2hub-modern.page-home .header { padding-top: 24px !important; }
  body.l2hub-modern.page-home .header .box { min-height: 315px !important; padding: 20px !important; border-radius: 18px !important; }
  body.l2hub-modern.page-home .header .box::before { top: 20px; font-size: 10px; letter-spacing: .14em; }
  body.l2hub-modern.page-home .header .box .logo { width: min(88vw, 440px) !important; height: 210px !important; }
  body.l2hub-modern.page-home .header .box .logo a span { bottom: -12px !important; font-size: 21px !important; }
  body.l2hub-modern.page-home .header .nav { flex-direction: column !important; align-items: stretch !important; }
  body.l2hub-modern.page-home .header .nav .side { display: grid !important; grid-template-columns: 1fr !important; width: 100% !important; }
  body.l2hub-modern.page-home .header .nav a { width: 100% !important; justify-content: center !important; }
  body.l2hub-modern.page-home .wrapper.content > .inner { padding: 14px !important; border-radius: 18px !important; }
  body.l2hub-modern.page-home .shortDescriptionServer { padding: 18px !important; }
  body.l2hub-modern .footer .box { grid-template-columns: 1fr !important; }
  body.l2hub-modern .footer .navi ul { padding: 0 !important; }
  .l2hub-backtop { right: 12px; bottom: 12px; }
}

/* final content refinements */
body.l2hub-modern .fullDescriptionServer > .blockInsideDesk > h1,
body.l2hub-modern.page-files #downloadMainDiv > h1 {
  margin: 0 0 16px !important;
  font-size: clamp(24px, 3vw, 36px) !important;
  line-height: 1.18 !important;
  text-align: left !important;
}
body.l2hub-modern.page-files #downloadMainDiv,
body.l2hub-modern.page-files #downloadDeskDiv,
body.l2hub-modern.page-files #downloadClient,
body.l2hub-modern.page-files #downloadPatch,
body.l2hub-modern.page-files .download-section {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  left: auto !important;
  right: auto !important;
}
body.l2hub-modern.page-files #downloadMainDiv {
  margin-top: 0 !important;
  padding: 0 !important;
  align-items: stretch !important;
  background: transparent !important;
  border-radius: 0 !important;
}
body.l2hub-modern.page-files #downloadMainDiv h1,
body.l2hub-modern.page-files #downloadMainDiv h2,
body.l2hub-modern.page-files #downloadMainDiv h3,
body.l2hub-modern.page-files #downloadMainDiv p {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}
body.l2hub-modern.page-files #downloadDeskDiv a {
  display: flex !important;
  max-width: 100% !important;
  justify-content: flex-start !important;
  text-decoration: none !important;
}
body.l2hub-modern.page-files .download-button { margin: 0 !important; }

@media (max-width: 620px) {
  body.l2hub-modern .fullDescriptionServer > .blockInsideDesk > h1,
  body.l2hub-modern.page-files #downloadMainDiv > h1 {
    font-size: 26px !important;
  }
  body.l2hub-modern.page-files #downloadDeskDiv {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 14px !important;
  }
  body.l2hub-modern.page-files #downloadDeskDiv > * {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  body.l2hub-modern.page-files #downloadDeskDiv a,
  body.l2hub-modern.page-files .download-section a {
    width: 100% !important;
  }
  body.l2hub-modern.page-files .btn,
  body.l2hub-modern.page-files .btnDownload,
  body.l2hub-modern.page-files .button,
  body.l2hub-modern.page-files .download-button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    letter-spacing: .08em !important;
  }
}

@media (max-width: 620px) {
  body.l2hub-modern.page-files #downloadDeskDiv h1 { font-size: 24px !important; line-height: 1.25 !important; }
  body.l2hub-modern.page-home .header .nav {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 10px !important;
  }
  body.l2hub-modern.page-home .header .nav .side,
  body.l2hub-modern.page-home .header .nav .side.left,
  body.l2hub-modern.page-home .header .nav .side.right {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    gap: 10px !important;
  }
  body.l2hub-modern.page-home .header .nav .side a,
  body.l2hub-modern.page-home .header .nav .side .link-1,
  body.l2hub-modern.page-home .header .nav .side .link-2 {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

@media (max-width: 900px) {
  body.l2hub-modern.page-home > .overlay > a[style*="position: fixed"],
  body.l2hub-modern.page-home .img-vote-server,
  body.l2hub-modern.page-home #d5e6f777fa72Obi6324bx,
  body.l2hub-modern.page-home a[href*="l2list.com"][style*="fixed"],
  body.l2hub-modern.page-home a[href*="l2elo.com"][style*="fixed"],
  body.l2hub-modern.page-home a[href*="hopzone.net"] img[style*="fixed"] {
    display: none !important;
  }
}

@media (max-width: 620px) {
  body.l2hub-modern.page-home .header .nav .side.left,
  body.l2hub-modern.page-home .header .nav .side.right {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}


/* ===== v4.1 refresh fixes ===== */
/* hide external vote/announce badges in all corners */
body.l2hub-modern a[href*="l2top.org"],
body.l2hub-modern a[href*="l2list.com"],
body.l2hub-modern a[href*="l2elo.com"],
body.l2hub-modern a[href*="l2anons"],
body.l2hub-modern a[href*="hopzone"],
body.l2hub-modern .img-vote-server,
body.l2hub-modern [id*="Obi6324bx"] {
  display: none !important;
}

/* better header buttons */
body.l2hub-modern .menu ul li a.menu-download {
  color: #f2e3bf !important;
  background: linear-gradient(180deg, rgba(22,30,44,.92), rgba(12,18,28,.92)) !important;
  border-color: rgba(236, 196, 107, .28) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 20px rgba(0,0,0,.18) !important;
}
body.l2hub-modern .menu ul li a.menu-download:hover,
body.l2hub-modern .menu ul li a.menu-download.is-active {
  color: #fff3d1 !important;
  border-color: rgba(236, 196, 107, .46) !important;
  background: linear-gradient(180deg, rgba(34,44,62,.96), rgba(15,22,33,.96)) !important;
}
body.l2hub-modern .menu ul li a.menu-support,
body.l2hub-modern .menu ul li a.yellow,
body.l2hub-modern .menu ul li a[href*="paymono"] {
  color: #191208 !important;
  background: linear-gradient(180deg, #e0c06f 0%, #c99231 100%) !important;
  border-color: rgba(255,225,151,.55) !important;
  box-shadow: 0 10px 26px rgba(190,132,38,.16), inset 0 1px 0 rgba(255,255,255,.28) !important;
}
body.l2hub-modern .menu ul li a.menu-support:hover,
body.l2hub-modern .menu ul li a.yellow:hover,
body.l2hub-modern .menu ul li a[href*="paymono"]:hover {
  filter: brightness(1.04);
}

/* top compact online strip on home */
body.l2hub-modern.page-home .top-online-strip {
  width: min(calc(100% - 40px), var(--l2-max));
  max-width: var(--l2-max);
  margin: 8px auto 14px;
  display: flex;
  justify-content: center;
}
body.l2hub-modern.page-home .top-online-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border: 1px solid var(--l2-line);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(14,20,29,.84), rgba(8,12,18,.92));
  box-shadow: 0 18px 38px rgba(0,0,0,.22);
  color: #e4e8ef;
  font-size: 13px;
}
body.l2hub-modern.page-home .top-online-pill .server { color: var(--l2-gold-2); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
body.l2hub-modern.page-home .top-online-pill .status-on { color: #57f28b; font-weight: 700; }
body.l2hub-modern.page-home .top-online-pill .status-off { color: #ff7a69; font-weight: 700; }
body.l2hub-modern.page-home .top-online-pill .divider { width: 1px; height: 18px; background: rgba(255,255,255,.12); }
body.l2hub-modern.page-home .top-online-pill .count { color: #fff3d1; font-size: 18px; font-weight: 800; }
body.l2hub-modern.page-home .top-online-pill .sub { color: var(--l2-muted); }
body.l2hub-modern.page-home .flex-right .side-item:first-child { display: none !important; }

/* prettier home hero buttons */
body.l2hub-modern.page-home .header .nav a {
  min-height: 52px !important;
  padding: 0 20px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.18) !important;
}
body.l2hub-modern.page-home .header .nav .link-1 {
  background: linear-gradient(180deg, #5c8dff 0%, #3e65d5 100%) !important;
  color: #f6fbff !important;
  border-color: rgba(125,163,255,.55) !important;
}
body.l2hub-modern.page-home .header .nav .link-2 {
  color: #191208 !important;
  background: linear-gradient(180deg, #eed084 0%, #d5a84b 100%) !important;
  border-color: rgba(255,225,151,.58) !important;
}

/* files page download buttons - remove green tint */
body.l2hub-modern.page-files .btn,
body.l2hub-modern.page-files .btnDownload,
body.l2hub-modern.page-files .button,
body.l2hub-modern.page-files .download-button {
  text-shadow: none !important;
  letter-spacing: .04em !important;
  border: 1px solid rgba(245,211,127,.50) !important;
  box-shadow: 0 12px 26px rgba(187,130,42,.14), inset 0 1px 0 rgba(255,255,255,.22) !important;
  background: linear-gradient(180deg, #efd07f 0%, #c58f34 100%) !important;
  color: #191208 !important;
}
body.l2hub-modern.page-files .btn:hover,
body.l2hub-modern.page-files .btnDownload:hover,
body.l2hub-modern.page-files .button:hover,
body.l2hub-modern.page-files .download-button:hover {
  text-shadow: none !important;
}

/* fix footer alignment */
body.l2hub-modern .wrapper.footer > .inner {
  margin-top: 18px !important;
}
body.l2hub-modern .footer .box {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
}
body.l2hub-modern .footer .text {
  flex: 1 1 420px !important;
  min-width: 260px !important;
}
body.l2hub-modern .footer .navi {
  flex: 0 1 360px !important;
}
body.l2hub-modern .footer .navi ul {
  justify-content: flex-end !important;
  margin: 0 !important;
}

/* keep tier icons like S80 readable */
body.l2hub-modern .mainDeskSpan .deskrImg[src*="S"],
body.l2hub-modern .mainDeskSpanFirst .deskrImg[src*="S"] {
  width: 42px !important;
  height: 22px !important;
  object-fit: contain !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}

@media (max-width: 900px) {
  body.l2hub-modern.page-home .top-online-strip {
    width: min(calc(100% - 24px), var(--l2-max));
    margin-top: 4px;
  }
}
@media (max-width: 620px) {
  body.l2hub-modern .footer .navi ul { justify-content: flex-start !important; }
  body.l2hub-modern.page-home .top-online-pill {
    width: 100%;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    border-radius: 18px;
  }
}


/* ===== v4.2 home layout + footer alignment ===== */
body.l2hub-modern.page-home .header {
  padding-top: 34px !important;
}
body.l2hub-modern.page-home .header .box {
  position: relative !important;
  min-height: 350px !important;
  background:
    linear-gradient(90deg, rgba(5,8,13,.94) 0%, rgba(5,8,13,.54) 50%, rgba(5,8,13,.94) 100%),
    linear-gradient(180deg, rgba(5,8,13,.18), rgba(5,8,13,.88)),
    url("../images/bg-1.jpg") center 38% / cover no-repeat !important;
  box-shadow: 0 30px 70px rgba(0,0,0,.38) !important;
}
body.l2hub-modern.page-home .header .box::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(242,209,125,.65), transparent);
}
body.l2hub-modern.page-home .header .box .logo {
  width: min(68vw, 450px) !important;
  max-width: 450px !important;
  height: 225px !important;
  margin-top: 22px !important;
}
body.l2hub-modern.page-home .header .box .logo a span {
  bottom: -2px !important;
  font-size: clamp(24px, 2.6vw, 32px) !important;
}

body.l2hub-modern.page-home .wrapper.content > .inner {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
body.l2hub-modern.page-home .content-flex {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 20px !important;
}
body.l2hub-modern.page-home .flex-left,
body.l2hub-modern.page-home .flex-right {
  width: 100% !important;
  max-width: none !important;
}
body.l2hub-modern.page-home .home-overview {
  position: relative;
  padding: clamp(26px, 4vw, 48px);
  border: 1px solid var(--l2-line);
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 0%, rgba(216,170,74,.08), transparent 28%),
    linear-gradient(180deg, rgba(15,20,29,.94), rgba(9,13,20,.96));
  box-shadow: var(--l2-shadow);
  overflow: hidden;
}
body.l2hub-modern.page-home .home-overview::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 190px;
  height: 2px;
  background: linear-gradient(90deg, var(--l2-gold), var(--l2-cyan), transparent);
}
body.l2hub-modern.page-home .home-overview-head {
  max-width: 900px;
  margin: 0 auto 28px;
  text-align: center;
}
body.l2hub-modern.page-home .home-kicker {
  display: inline-flex;
  margin-bottom: 10px;
  color: var(--l2-cyan);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase;
}
body.l2hub-modern.page-home .home-overview-head h2 {
  margin: 0 0 14px;
  color: var(--l2-text);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.08;
}
body.l2hub-modern.page-home .home-overview-head p {
  margin: 0;
  color: #c9cfd9;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.75;
}
body.l2hub-modern.page-home .home-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
body.l2hub-modern.page-home .home-feature-card {
  position: relative;
  min-height: 170px;
  padding: 22px 20px 20px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
body.l2hub-modern.page-home .home-feature-card:hover {
  transform: translateY(-3px);
  border-color: rgba(216,170,74,.30);
  background: linear-gradient(145deg, rgba(216,170,74,.07), rgba(255,255,255,.018));
}
body.l2hub-modern.page-home .home-feature-no {
  display: inline-flex;
  min-width: 34px;
  height: 28px;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  border: 1px solid rgba(216,170,74,.32);
  border-radius: 9px;
  color: var(--l2-gold-2);
  background: rgba(216,170,74,.06);
  font-size: 11px;
  letter-spacing: .08em;
}
body.l2hub-modern.page-home .home-feature-card h3 {
  margin: 0 0 8px;
  color: #f1eadc;
  font-size: 18px;
  line-height: 1.3;
}
body.l2hub-modern.page-home .home-feature-card p {
  margin: 0;
  color: #aeb6c4;
  font-size: 14px;
  line-height: 1.65;
}
body.l2hub-modern.page-home .home-overview-footer {
  max-width: 980px;
  margin: 30px auto 0;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.07);
  text-align: center;
}
body.l2hub-modern.page-home .home-overview-footer > p {
  margin: 0 auto 22px;
  color: #c7cdd7;
  line-height: 1.75;
}
body.l2hub-modern.page-home .home-overview-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
body.l2hub-modern.page-home .home-main-cta {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border: 1px solid rgba(242,209,125,.40);
  border-radius: 13px;
  color: #181106 !important;
  background: linear-gradient(180deg, #efd17f, #c99434);
  box-shadow: 0 12px 28px rgba(190,132,38,.16);
  font-weight: 800;
  text-decoration: none;
}
body.l2hub-modern.page-home .home-social-mini {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
body.l2hub-modern.page-home .home-social-mini a {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  color: #d9dee8;
  background: rgba(255,255,255,.025);
  text-decoration: none;
  font-size: 13px;
}
body.l2hub-modern.page-home .home-social-mini a:hover {
  color: #fff3d1;
  border-color: rgba(216,170,74,.28);
}
body.l2hub-modern.page-home .flex-right {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
}
body.l2hub-modern.page-home .flex-right .side-item {
  height: 100%;
}
body.l2hub-modern.page-home .flex-right .side-item:first-child {
  display: none !important;
}

/* footer: one centered flow on every page */
body.l2hub-modern .wrapper.footer {
  padding-top: 26px !important;
}
body.l2hub-modern .wrapper.footer > .inner {
  padding: 26px 18px 30px !important;
}
body.l2hub-modern .footer .box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  width: 100% !important;
  text-align: center !important;
}
body.l2hub-modern .footer .text {
  width: 100% !important;
  max-width: 920px !important;
  margin: 0 auto !important;
  text-align: center !important;
  line-height: 1.7 !important;
}
body.l2hub-modern .footer .navi {
  width: 100% !important;
  max-width: 920px !important;
  margin: 0 auto !important;
}
body.l2hub-modern .footer .navi ul {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 900px) {
  body.l2hub-modern.page-home .home-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.l2hub-modern.page-home .flex-right {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 620px) {
  body.l2hub-modern.page-home .header .box {
    min-height: 290px !important;
  }
  body.l2hub-modern.page-home .header .box .logo {
    width: min(86vw, 380px) !important;
    height: 180px !important;
  }
  body.l2hub-modern.page-home .header .box .logo a span {
    font-size: 20px !important;
  }
  body.l2hub-modern.page-home .home-overview {
    padding: 22px 16px;
    border-radius: 18px;
  }
  body.l2hub-modern.page-home .home-feature-grid {
    grid-template-columns: 1fr;
  }
  body.l2hub-modern.page-home .home-feature-card {
    min-height: 0;
  }
  body.l2hub-modern .footer .text {
    font-size: 11px !important;
  }
}


/* ===== v4.2.1 structural footer fix ===== */
body.l2hub-modern .footer .footer-copy {
  color: #e8e1d3;
  font-size: 13px;
  font-weight: 700;
}
body.l2hub-modern .footer .footer-email {
  margin-top: 6px;
}
body.l2hub-modern .footer .footer-email a {
  color: var(--l2-gold-2) !important;
  text-decoration: none;
}
body.l2hub-modern .footer .footer-disclaimer {
  max-width: 900px;
  margin: 12px auto 0;
  color: #7f8795;
  font-size: 10px;
  line-height: 1.65;
  letter-spacing: .025em;
}
body.l2hub-modern .footer .navi li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
body.l2hub-modern .footer .navi a {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 0 10px;
  border-radius: 9px;
  color: #cdd3dc !important;
  text-decoration: none;
  font-size: 12px;
}
body.l2hub-modern .footer .navi a:hover {
  color: #fff3d1 !important;
  background: rgba(255,255,255,.035);
}


/* ===== v4.3 encoding + real social icons ===== */
body.l2hub-modern.page-home .home-social-mini a {
  gap: 8px;
  min-width: 112px;
  justify-content: center;
  font-weight: 700;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
body.l2hub-modern.page-home .home-social-mini a:hover {
  transform: translateY(-2px);
}
body.l2hub-modern.page-home .home-social-mini svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: currentColor;
}
body.l2hub-modern.page-home .home-social-mini .social-youtube {
  color: #ff4b4b;
  border-color: rgba(255,75,75,.24);
  background: rgba(255,0,0,.045);
}
body.l2hub-modern.page-home .home-social-mini .social-youtube:hover {
  color: #ff6363;
  border-color: rgba(255,75,75,.44);
  background: rgba(255,0,0,.075);
}
body.l2hub-modern.page-home .home-social-mini .social-tiktok {
  color: #f7f7f7;
  border-color: rgba(37,244,238,.22);
  background: linear-gradient(135deg, rgba(37,244,238,.04), rgba(254,44,85,.05));
}
body.l2hub-modern.page-home .home-social-mini .social-tiktok svg {
  filter: drop-shadow(-1px 0 0 #25f4ee) drop-shadow(1px 0 0 #fe2c55);
}
body.l2hub-modern.page-home .home-social-mini .social-tiktok:hover {
  border-color: rgba(37,244,238,.42);
}
body.l2hub-modern.page-home .home-social-mini .social-discord {
  color: #8b9cff;
  border-color: rgba(88,101,242,.30);
  background: rgba(88,101,242,.065);
}
body.l2hub-modern.page-home .home-social-mini .social-discord:hover {
  color: #aeb8ff;
  border-color: rgba(88,101,242,.50);
  background: rgba(88,101,242,.10);
}
@media (max-width: 480px) {
  body.l2hub-modern.page-home .home-social-mini {
    display: grid;
    grid-template-columns: 1fr;
    width: min(100%, 320px);
  }
  body.l2hub-modern.page-home .home-social-mini a {
    width: 100%;
    min-height: 44px;
  }
}

/* ===== v4.4 compact full-info layout ===== */
/* Wider information canvas on desktop, without changing other pages. */
body.l2hub-modern.page-info #main-content .wrapper.content,
body.l2hub-modern.page-info .wrapper.footer {
  width: min(calc(100% - 36px), 1480px) !important;
  max-width: 1480px !important;
}
body.l2hub-modern.page-info .wrapper.content > .inner {
  padding: clamp(22px, 2.4vw, 38px) !important;
}

/* Smaller section spacing. */
body.l2hub-modern.page-info .fullDescriptionServer > .blockInsideDesk {
  margin: 12px 0 !important;
  padding: clamp(16px, 1.8vw, 24px) !important;
  border-radius: 16px !important;
}
body.l2hub-modern.page-info .aboveDeskTittle {
  margin-bottom: 12px !important;
  font-size: clamp(19px, 1.8vw, 25px) !important;
}

/* Currency cards: hide the old header card and use a true 3-column card layout. */
body.l2hub-modern.page-info #customTabble {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(410px, 1fr)) !important;
  gap: 10px !important;
  margin-top: 10px !important;
}
body.l2hub-modern.page-info #customTabble > .customTabbleRow:first-child {
  display: none !important;
}
body.l2hub-modern.page-info .customTabbleRow {
  display: grid !important;
  grid-template-columns: minmax(108px, .75fr) minmax(0, 1.25fr) minmax(0, .95fr) !important;
  align-items: start !important;
  gap: 12px !important;
  min-height: 0 !important;
  padding: 13px 14px !important;
  border-radius: 13px !important;
}
body.l2hub-modern.page-info .customTabbleRow > * {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.45 !important;
  overflow-wrap: anywhere !important;
}
body.l2hub-modern.page-info .customTabbleRow .valueRow {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  font-weight: 800 !important;
}
body.l2hub-modern.page-info .customTabbleRow .placeForTake,
body.l2hub-modern.page-info .customTabbleRow .howToSpend {
  font-size: 13px !important;
}
body.l2hub-modern.page-info .customTabbleRow .deskrTableImg {
  flex: 0 0 30px !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
}

/* Mechanics: compact 3-up cards, title above description. */
body.l2hub-modern.page-info .anotherCustomTabble {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)) !important;
  gap: 10px !important;
  margin-top: 10px !important;
}
body.l2hub-modern.page-info .anotherCustomRow {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-content: start !important;
  gap: 7px !important;
  min-height: 0 !important;
  padding: 14px 15px !important;
  border-radius: 13px !important;
}
body.l2hub-modern.page-info .anotherCustomRow > * {
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.l2hub-modern.page-info .anotherFirstCol {
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}
body.l2hub-modern.page-info .anotherSecondCol {
  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* Olympiad: compact responsive tiles. */
body.l2hub-modern.page-info .oneMoreCustomTabble {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  gap: 10px !important;
  margin-top: 10px !important;
}
body.l2hub-modern.page-info .oneMoreCustomRow {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-content: center !important;
  gap: 6px !important;
  min-height: 82px !important;
  padding: 13px 14px !important;
  border-radius: 13px !important;
}
body.l2hub-modern.page-info .oneMoreCustomRow > * {
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
}
body.l2hub-modern.page-info .oneMoreCustomRow .l2Blue {
  font-weight: 800 !important;
}

/* General list rows are less tall. */
body.l2hub-modern.page-info .mainDeskSpan,
body.l2hub-modern.page-info .mainDeskSpanFirst {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

@media (max-width: 1100px) {
  body.l2hub-modern.page-info #customTabble {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  body.l2hub-modern.page-info #main-content .wrapper.content,
  body.l2hub-modern.page-info .wrapper.footer {
    width: min(calc(100% - 20px), 1480px) !important;
  }
  body.l2hub-modern.page-info .wrapper.content > .inner {
    padding: 16px !important;
  }
  body.l2hub-modern.page-info .fullDescriptionServer > .blockInsideDesk {
    padding: 14px !important;
  }
  body.l2hub-modern.page-info .customTabbleRow {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  body.l2hub-modern.page-info .customTabbleRow .placeForTake,
  body.l2hub-modern.page-info .customTabbleRow .howToSpend {
    font-size: 14px !important;
  }
  body.l2hub-modern.page-info .anotherCustomTabble,
  body.l2hub-modern.page-info .oneMoreCustomTabble {
    grid-template-columns: 1fr !important;
  }
  body.l2hub-modern.page-info .oneMoreCustomRow {
    min-height: 0 !important;
  }
}


/* ===== v4.5 online placement, wider Olympiad note, English pages ===== */
/* Olympiad fifth note: use the whole row instead of a tiny orphan tile. */
body.l2hub-modern.page-info .oneMoreCustomTabble > .oneMoreCustomRow:last-child {
  grid-column: 1 / -1 !important;
  min-height: 58px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 14px 20px !important;
}
body.l2hub-modern.page-info .oneMoreCustomTabble > .oneMoreCustomRow:last-child > * {
  width: auto !important;
  max-width: 100% !important;
}

/* Home hero: live online block on the right side, larger and easier to read. */
body.l2hub-modern.page-home .header .box {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 230px !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 28px 38px !important;
}
body.l2hub-modern.page-home .header .box .logo {
  grid-column: 1 !important;
  justify-self: center !important;
  margin-left: min(9vw, 110px) !important;
}
body.l2hub-modern.page-home .hero-online-card {
  grid-column: 2 !important;
  align-self: center !important;
  justify-self: stretch !important;
  min-width: 0 !important;
  padding: 22px 20px !important;
  border: 1px solid rgba(232,190,99,.22) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(14,20,29,.90), rgba(7,11,17,.94)) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.28) !important;
  text-align: center !important;
}
body.l2hub-modern.page-home .hero-online-label {
  display: block !important;
  margin-bottom: 10px !important;
  color: var(--l2-gold-2) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}
body.l2hub-modern.page-home .hero-online-main {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
}
body.l2hub-modern.page-home .hero-online-status {
  color: #57f28b !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}
body.l2hub-modern.page-home .hero-online-status.is-off { color: #ff7a69 !important; }
body.l2hub-modern.page-home .hero-online-count {
  color: #fff1c9 !important;
  font-size: 40px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}
body.l2hub-modern.page-home .hero-online-sub {
  display: block !important;
  margin-top: 7px !important;
  color: var(--l2-muted) !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}
body.l2hub-modern.page-home .top-online-strip { display: none !important; }

/* English static home uses the same shell. */
body.l2hub-modern.page-home-static .flex-right { display: none !important; }
body.l2hub-modern.page-home-static .content-flex { grid-template-columns: 1fr !important; }

/* Simple language chips for donation pages. */
.donate-lang-switch {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
}
.donate-lang-switch a {
  min-width: 34px;
  min-height: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: 9px;
  color: #aab3c2;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}
.donate-lang-switch a.active {
  color: #11151d;
  background: linear-gradient(180deg, #efd07f, #c58f34);
}

@media (max-width: 900px) {
  body.l2hub-modern.page-home .header .box {
    grid-template-columns: 1fr !important;
    padding: 24px !important;
  }
  body.l2hub-modern.page-home .header .box .logo {
    grid-column: 1 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body.l2hub-modern.page-home .hero-online-card {
    grid-column: 1 !important;
    width: min(100%, 360px) !important;
    justify-self: center !important;
    padding: 16px 18px !important;
  }
  body.l2hub-modern.page-home .hero-online-count { font-size: 34px !important; }
}

@media (max-width: 760px) {
  body.l2hub-modern.page-info .oneMoreCustomTabble > .oneMoreCustomRow:last-child {
    min-height: 0 !important;
    padding: 13px 14px !important;
  }
}


/* ===== v4.6 compact bottom spacing + full-page background ===== */
/* Show bg-1.jpg across the whole site, not only inside the hero card. */
html {
  background: #070a0f !important;
}
body.l2hub-modern {
  background:
    linear-gradient(180deg, rgba(4,7,12,.34) 0%, rgba(4,7,12,.44) 42%, rgba(4,7,12,.56) 100%),
    url("../images/bg-1.jpg") center 12% / cover fixed no-repeat !important;
}
/* The old pseudo layers were hiding the image behind a solid body background. */
body.l2hub-modern::before,
body.l2hub-modern::after {
  display: none !important;
}

/* Let the global background show through the panels a little more. */
body.l2hub-modern .wrapper.content > .inner {
  background: linear-gradient(180deg, rgba(14,18,27,.78), rgba(8,12,18,.82)) !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
body.l2hub-modern.page-home .wrapper.content > .inner {
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.l2hub-modern.page-home .home-overview,
body.l2hub-modern.page-home .flex-right .side-item,
body.l2hub-modern.page-info .fullDescriptionServer > .blockInsideDesk,
body.l2hub-modern.page-rules #downloadDeskDiv,
body.l2hub-modern.page-files #downloadDeskDiv,
body.l2hub-modern.page-farm .blockInsideDesk,
body.l2hub-modern.page-pvp .blockInsideDesk {
  background: linear-gradient(180deg, rgba(14,18,27,.76), rgba(8,12,18,.80)) !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* The hero now uses the same page background instead of repeating bg-1.jpg inside the box. */
body.l2hub-modern.page-home .header .box {
  background:
    linear-gradient(90deg, rgba(5,8,13,.48) 0%, rgba(5,8,13,.20) 50%, rgba(5,8,13,.48) 100%),
    linear-gradient(180deg, rgba(5,8,13,.10), rgba(5,8,13,.46)) !important;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

/* Remove artificial page-height and oversized empty space before/inside footer. */
body.l2hub-modern #main-content {
  min-height: 0 !important;
  height: auto !important;
  padding-bottom: 0 !important;
}
body.l2hub-modern .wrapper.content {
  padding-bottom: 18px !important;
}
body.l2hub-modern .wrapper.footer {
  position: static !important;
  width: min(calc(100% - 40px), var(--l2-max)) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 4px 0 16px !important;
}
body.l2hub-modern .wrapper.footer > .inner {
  position: static !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 14px 12px !important;
}
body.l2hub-modern .footer .box,
body.l2hub-modern .footer .text,
body.l2hub-modern .footer .navi,
body.l2hub-modern .footer .navi ul {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  transform: none !important;
}
body.l2hub-modern .footer .box {
  width: 100% !important;
  gap: 7px !important;
}
body.l2hub-modern .footer .text {
  width: 100% !important;
  max-width: 920px !important;
  margin: 0 auto !important;
  line-height: 1.45 !important;
}
body.l2hub-modern .footer .footer-email {
  margin-top: 3px !important;
}
body.l2hub-modern .footer .footer-disclaimer {
  margin: 5px auto 0 !important;
  line-height: 1.45 !important;
}
body.l2hub-modern .footer .navi {
  width: 100% !important;
  max-width: 920px !important;
  margin: 0 auto !important;
}
body.l2hub-modern .footer .navi ul {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.l2hub-modern .footer .navi a {
  min-height: 28px !important;
  padding: 0 7px !important;
  font-size: 11px !important;
}

/* Home: keep the Discord widget and lower section close to the footer. */
body.l2hub-modern.page-home iframe[src*="discord.com/widget"] {
  margin-bottom: 12px !important;
}
body.l2hub-modern.page-home .wrapper.content {
  padding-bottom: 12px !important;
}

/* Static pages: do not leave a viewport-sized empty tail. */
body.l2hub-modern:not(.page-home) .wrapper.content {
  padding-bottom: 12px !important;
}
body.l2hub-modern.page-info .wrapper.footer {
  margin-top: 0 !important;
}

/* Download page: neutralize old <br>-based spacing and inline layout gaps. */
body.l2hub-modern.page-files #downloadMainDiv {
  padding-bottom: 0 !important;
}
body.l2hub-modern.page-files #downloadMainDiv > br,
body.l2hub-modern.page-files #downloadMainDiv > br + br {
  display: none !important;
}
body.l2hub-modern.page-files #downloadMainDiv > h1,
body.l2hub-modern.page-files #downloadMainDiv > h2,
body.l2hub-modern.page-files #downloadMainDiv > h3,
body.l2hub-modern.page-files #downloadMainDiv > p,
body.l2hub-modern.page-files #downloadMainDiv > span {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}
body.l2hub-modern.page-files #downloadDeskDiv {
  margin-top: 12px !important;
  margin-bottom: 14px !important;
  padding: 16px !important;
}
body.l2hub-modern.page-files .download-section {
  width: 100% !important;
  margin: 12px 0 !important;
  padding: 14px !important;
}
body.l2hub-modern.page-files #downloadMainDiv [style*="display: flex"] {
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  margin: 10px 0 !important;
}

@media (max-width: 900px) {
  body.l2hub-modern {
    background-position: 48% top !important;
    background-attachment: scroll !important;
  }
  body.l2hub-modern .wrapper.footer {
    width: min(calc(100% - 24px), var(--l2-max)) !important;
  }
}

@media (max-width: 620px) {
  body.l2hub-modern .wrapper.content {
    padding-bottom: 8px !important;
  }
  body.l2hub-modern .wrapper.footer {
    padding-bottom: 10px !important;
  }
  body.l2hub-modern .wrapper.footer > .inner {
    padding: 10px 8px !important;
  }
  body.l2hub-modern .footer .navi ul {
    justify-content: center !important;
  }
}


/* ===== v4.7 compact footer + wider rounded rules page ===== */
/*
  Footer fix:
  The legacy template keeps the lower navigation as a separate visual row.
  On very tall screens this row appears hundreds of pixels below the copyright.
  Hide that duplicate row and keep a compact footer directly after content.
*/
html,
body.l2hub-modern {
  min-height: 0 !important;
  height: auto !important;
}
body.l2hub-modern #main-content,
body.l2hub-modern .wrapper.content,
body.l2hub-modern .wrapper.content > .inner,
body.l2hub-modern .wrapper.footer,
body.l2hub-modern .wrapper.footer > .inner,
body.l2hub-modern .footer .box,
body.l2hub-modern .footer .text {
  min-height: 0 !important;
  height: auto !important;
}
body.l2hub-modern .wrapper.content {
  margin-bottom: 0 !important;
  padding-bottom: 6px !important;
}
body.l2hub-modern .wrapper.footer {
  display: block !important;
  margin: 4px auto 0 !important;
  padding: 0 0 10px !important;
}
body.l2hub-modern .wrapper.footer > .inner {
  display: block !important;
  margin: 0 !important;
  padding: 8px 10px 10px !important;
  border-top: 1px solid rgba(229, 187, 89, .13) !important;
}
body.l2hub-modern .footer .box {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}
body.l2hub-modern .footer .text {
  max-width: 980px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  line-height: 1.35 !important;
}
body.l2hub-modern .footer .footer-copy {
  margin: 0 !important;
  font-size: 11px !important;
}
body.l2hub-modern .footer .footer-email {
  margin: 2px 0 0 !important;
  font-size: 10px !important;
}
body.l2hub-modern .footer .footer-disclaimer {
  margin: 3px auto 0 !important;
  font-size: 8px !important;
  line-height: 1.35 !important;
}
/* The same links already exist in the top navigation. Removing this duplicate row
   also removes the large empty vertical gap visible on desktop screens. */
body.l2hub-modern .footer .navi {
  display: none !important;
}
body.l2hub-modern.page-home iframe[src*="discord.com/widget"] {
  margin-bottom: 6px !important;
}

/* ---------- Rules page: wider, darker, rounded ---------- */
body.l2hub-modern.page-rules #main-content .wrapper.content,
body.l2hub-modern.page-rules .wrapper.footer {
  width: min(calc(100% - 36px), 1380px) !important;
  max-width: 1380px !important;
}
body.l2hub-modern.page-rules .wrapper.content {
  padding-top: 18px !important;
}
body.l2hub-modern.page-rules .wrapper.content > .inner {
  padding: 24px !important;
  border: 1px solid rgba(229, 187, 89, .22) !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, rgba(8, 11, 17, .96), rgba(5, 8, 13, .97)) !important;
  box-shadow: 0 22px 70px rgba(0, 0, 0, .36) !important;
}
body.l2hub-modern.page-rules #downloadMainDiv {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.l2hub-modern.page-rules #downloadHeadTittle {
  margin: 0 0 14px !important;
  padding: 4px 4px 18px !important;
  font-size: clamp(32px, 3.3vw, 54px) !important;
  line-height: 1.1 !important;
  border-bottom: 1px solid rgba(229, 187, 89, .22) !important;
}
body.l2hub-modern.page-rules #downloadDeskDiv {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 20px 22px 22px !important;
  border: 1px solid rgba(255, 255, 255, .07) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, rgba(8, 12, 19, .98), rgba(5, 8, 14, .99)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
}
body.l2hub-modern.page-rules .container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.l2hub-modern.page-rules .container > h1 {
  margin: 0 0 14px !important;
  padding: 0 !important;
  font-size: 15px !important;
  color: var(--l2-gold-2) !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}
body.l2hub-modern.page-rules .container > h2,
body.l2hub-modern.page-rules #downloadDeskDiv > h2 {
  margin: 16px 0 8px !important;
  padding: 12px 15px !important;
  border: 1px solid rgba(229, 187, 89, .16) !important;
  border-radius: 14px !important;
  background: linear-gradient(90deg, rgba(197, 143, 52, .12), rgba(255,255,255,.025)) !important;
  color: #f0e8d7 !important;
  font-size: 18px !important;
  line-height: 1.3 !important;
}

/* Replace default bullet dots with compact gold diamonds. */
body.l2hub-modern.page-rules .container ul,
body.l2hub-modern.page-rules #downloadDeskDiv ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 8px 12px 8px 14px !important;
}
body.l2hub-modern.page-rules .container li,
body.l2hub-modern.page-rules #downloadDeskDiv li {
  position: relative !important;
  margin: 0 !important;
  padding: 7px 8px 7px 24px !important;
  border-bottom: 1px solid rgba(255,255,255,.045) !important;
  color: #d6dbe4 !important;
  line-height: 1.55 !important;
}
body.l2hub-modern.page-rules .container li:last-child,
body.l2hub-modern.page-rules #downloadDeskDiv li:last-child {
  border-bottom: 0 !important;
}
body.l2hub-modern.page-rules .container li::before,
body.l2hub-modern.page-rules #downloadDeskDiv li::before {
  content: "◆" !important;
  position: absolute !important;
  left: 2px !important;
  top: 9px !important;
  color: #d6a84b !important;
  font-size: 8px !important;
  line-height: 1 !important;
}
body.l2hub-modern.page-rules .container li > ul,
body.l2hub-modern.page-rules #downloadDeskDiv li > ul {
  margin-top: 6px !important;
  padding: 3px 0 0 8px !important;
}
body.l2hub-modern.page-rules .container li > ul li::before,
body.l2hub-modern.page-rules #downloadDeskDiv li > ul li::before {
  content: "›" !important;
  color: #62dfe0 !important;
  font-size: 15px !important;
  top: 6px !important;
}

@media (max-width: 900px) {
  body.l2hub-modern.page-rules #main-content .wrapper.content,
  body.l2hub-modern.page-rules .wrapper.footer {
    width: min(calc(100% - 20px), 1380px) !important;
  }
  body.l2hub-modern.page-rules .wrapper.content > .inner {
    padding: 14px !important;
    border-radius: 20px !important;
  }
  body.l2hub-modern.page-rules #downloadDeskDiv {
    padding: 14px !important;
    border-radius: 16px !important;
  }
}

@media (max-width: 620px) {
  body.l2hub-modern.page-rules #downloadHeadTittle {
    font-size: 30px !important;
  }
  body.l2hub-modern.page-rules .container li,
  body.l2hub-modern.page-rules #downloadDeskDiv li {
    padding-left: 20px !important;
    font-size: 14px !important;
  }
  body.l2hub-modern .wrapper.footer > .inner {
    padding-bottom: 8px !important;
  }
}