/* ============================================

   L2 Emerge - Main Stylesheet

   Based on similar design language as l2reborn

   ============================================ */



/* --- Reset & Base --- */

*, *::before, *::after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



body {

  font-family: 'Onest', sans-serif;

  background-color: #1C1816;

  color: #FFF;

  /* Layers (top -> bottom):
     1. Vertical fade-out so the image dissolves into #1C1816 instead of cutting off hard.
     2. Horizontal edge vignette.
     3. Warm atmospheric tint.
     4. The actual background photo.
     All layers are aligned to the viewport (100vh) so the fade always lines up with the image
     edge regardless of how tall the page is. */
  background-image:

  linear-gradient(rgba(43, 34, 28, 0.72), rgba(37, 28, 23, 1) 35%, #1e1b18 62%),

  linear-gradient(90deg, #000000 0%, rgba(0, 0, 0, 0.6) 10%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0) 72%, rgba(0, 0, 0, 0.6) 90%, #000000 100%),

  linear-gradient(rgba(54, 50, 44, 0.22), rgba(40, 35, 32, 0.18)),

  url('../images/background/bk_main.jpg');

  background-position: top center;

  background-repeat: no-repeat;

  background-size: 100% auto;

  opacity: 0;

  transition: opacity 0.5s ease;

  display: flex;

  flex-direction: column;

  min-height: 100vh;

}

body.fade-in {

  opacity: 1;

}

a {

  text-decoration: none;

  color: inherit;

}

img {

  max-width: 100%;

}

.lock-scroll {

  overflow: hidden;

}



/* --- Typography --- */

.text_32_home {
  color: #FFFFFF;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
}

.text_18_home {
  color: #EAEAEA;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
}

.text_18_home_resp {
  color: #EAEAEA;
  font-size: 18px;
  font-weight: 400;
  margin-top: 8px;
  display: none;
}

.text_24_server {

  font-size: 24px;

  font-weight: 700;

  margin-top: 40px;

  margin-bottom: 24px;

}

.text_14_medium {

  font-size: 14px;

  font-weight: 500;

}

.text_14_regular_srv {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  max-width: 240px;
  min-height: 100px; /* keeps all descriptions same height */
  color: #D5CAC4;
}

.text_11_brown {

  color: #9A877E;

  font-size: 11px;

  font-weight: 400;

}

.text_12_medium {

  font-size: 12px;

  font-weight: 500;

}

.text_12_medium_footer {

  font-size: 12px;

  font-weight: 500;

}

.text_12_bold_menu {

  font-size: 12px;

  font-weight: 700;

  color: #9A877E;

}

.text_14_servers {

  font-size: 14px;

  font-weight: 500;

  margin-right: 8px;

}

.text_18_server {

  font-size: 18px;

  font-weight: 600;

}

.txt_brown { color: #9A877E; }

.txt_brown2 { color: #7D6B62; }

.txt_brown3 { color: #B3A59E; }

.txt_brown4 { color: #7D6B62; }

.txt_yellow { color: #FAC459; }

.txt_green { color: #5CB814; }

.top_8 { margin-top: 8px; }

.align_left { text-align: left; }

.align_right { margin-left: auto; }

.opacity_05 { opacity: 0.5; }

.no_wrap_text { white-space: nowrap; }

.mg_right_4 { margin-right: 4px; }

.lineheight18 { line-height: 18px; }

.text_10_regular { font-size: 10px; font-weight: 400; }

.text_11_white { font-size: 13px; color: #FFF; font-weight: 500; }

.spacer_8 { margin-top: 8px; }



/* --- Layout --- */

.full_wrap {

  width: 1400px;

  max-width: 100%;

  margin: 2em auto;

  text-align: center;

}

.div_flex {

  display: flex;

  align-items: center;

  gap: 8px;

}



/* --- Header --- */

.bk_header {

  position: sticky;

  top: 0;

  z-index: 99;

  height: 55px;


  transition: background 0.3s ease;

}

.sticky_header {

  background: rgba(38, 33, 30, 0.95);

}

.sticky_header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.sticky2_header {

  background: rgba(38, 33, 30, 0.98);

}

.header_wrap {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 8px 0;

  width: 1400px;

  max-width: 100%;

  margin: 0 auto;

}

.top_menu_left {

  display: flex;

  align-items: center;

  gap: 0px;

}

.top_menu_right {

  display: flex;

  align-items: center;

  gap: 8px;

}

.logo_emerge {

  background: url('../images/icons/logo_emerge.svg') no-repeat;

  background-size: contain;

  width: 140px;

  height: 32px;

}

.line_v_20 {

  width: 1px;

  height: 20px;

  background-color: #3C342F;

  margin: 0 12px;

}

.line_v_20_menu {

  width: 1px;

  height: 20px;

  background-color: #3C342F;

}



/* --- Top Menu Items --- */

.top_menu_content {

  display: flex;

  padding: 10px 18px;

  justify-content: center;

  align-items: center;

  gap: 8px;

  border-radius: 6px;

  color: #CCC3BF;

  text-align: center;

  font-size: 14px;

  font-weight: 500;

  cursor: pointer;

  transition: .5s ease;

}

.top_menu_content:hover {

  color: #FFCE6D;

  background: #3C342F;

}

.btn_menu_top {

  display: flex;

  padding: 10px 16px;

  justify-content: center;

  align-items: center;

  gap: 8px;

  border-radius: 6px;

  color: #CCC3BF;

  text-align: center;

  font-size: 13px;

  font-weight: 500;

  cursor: pointer;

  transition: .5s ease;

}

.btn_menu_top:hover {

  color: #FFCE6D;

}



/* Menu icons */

.logo_servers {

  width: 16px;

  height: 16px;

  background: url('../images/badges/Eclipse.png') no-repeat center;

  background-size: contain;

}

.logo_community {

  width: 16px;

  height: 16px;

  background: url('../images/icons/community.svg') no-repeat center;

  background-size: contain;

}

.logo_news {

  width: 16px;

  height: 16px;

  background: url('../images/icons/news.svg') no-repeat center;

  background-size: contain;

}

.logo_wiki {

  width: 16px;

  height: 16px;

  background: url('../images/icons/wiki.svg') no-repeat center;

  background-size: contain;

}



/* Secondary/dropdown arrows */

.secondary3_down {

  width: 0;

  height: 0;

  border-left: 4px solid transparent;

  border-right: 4px solid transparent;

  border-top: 4px solid #CCC3BF;

}

.secondary_down {

  width: 0;

  height: 0;

  border-left: 4px solid transparent;

  border-right: 4px solid transparent;

  border-top: 4px solid #CCC3BF;

}

.account_down {

  width: 0;

  height: 0;

  border-left: 4px solid transparent;

  border-right: 4px solid transparent;

  border-top: 4px solid #CCC3BF;

}

.secondary_link_small {

  font-size: 12px;

  font-weight: 400;

  color: #CCC3BF;

  cursor: pointer;

  transition: .5s ease;

}

.secondary_link_small:hover {

  color: #FFCE6D;

}



/* --- Download Button --- */

.btn_download {

  display: flex;

  padding: 7px 20px;

  justify-content: center;

  align-items: center;

  gap: 8px;

  border-radius: 8px;

  background: #FAC459;

  color: #26211E;

  text-align: center;

  font-size: 13px;

  font-weight: 600;

  cursor: pointer;

  transition: .5s ease;

}

.btn_download:hover {

  background: #FFCE6D;

}

.icon_dld {

  width: 16px;

  height: 16px;

  background: url('../images/icons/download.svg') no-repeat center;

  background-size: contain;

}



/* --- Account Button --- */

.btn_account {

  display: flex;

  padding: 10px 16px;

  justify-content: center;

  align-items: center;

  gap: 8px;

  border-radius: 6px;

  color: #CCC3BF;

  font-size: 13px;

  font-weight: 500;

  cursor: pointer;

  transition: .5s ease;

}

.btn_account:hover {

  color: #FFCE6D;

  background: #3C342F;

}

.icon_user {

  width: 16px;

  height: 16px;

  background: url('../images/icons/user_24.svg') no-repeat center;

  background-size: contain;

}

.wrap_btn_account_open {

  position: relative;

}



/* Account dropdown */

.account_wrap {

  position: absolute;

  top: 40px;

  right: 0;

  display: flex;

  padding: 12px;

  flex-direction: column;

  align-items: flex-start;

  gap: 4px;

  border-radius: 12px;

  background: #26211E;

  border: 1px solid #3C342F;

  min-width: 200px;

  z-index: 200;

}

.pop_up_arrow_account {

  position: absolute;

  top: -6px;

  right: 20px;

  width: 0;

  height: 0;

  border-left: 6px solid transparent;

  border-right: 6px solid transparent;

  border-bottom: 6px solid #26211E;

}

.btn2_account {

  display: flex;

  padding: 8px 12px;

  align-items: center;

  gap: 8px;

  align-self: stretch;

  border-radius: 6px;

  color: #CCC3BF;

  font-size: 12px;

  font-weight: 400;

  cursor: pointer;

  transition: .5s ease;

}

.btn2_account:hover {

  background: #3C342F;

  color: #FFCE6D;

}

.icon_login {

  width: 16px;

  height: 16px;

  background: url('../images/icons/login.svg') no-repeat center;

  background-size: contain;

}

.icon_signup {

  width: 16px;

  height: 16px;

  background: url('../images/icons/signup.svg') no-repeat center;

  background-size: contain;

}



/* Mobile-only elements hidden on desktop */

.content_server_mobile,

.icon_menu,

.icon_user_mob,

.menu_nav_mobile,

.bk_mobile_menu,

.server_list_wrap_mob,

.servers_bottom_wrap_mobile,

.btn_menu_mobile,

.content_link_footer_mobile,

.header_log_mobile { display: none; }



/* Language dropdown */

.top_menu_content_lang {

  position: relative;

}

.wrap_btn_lang {

  display: flex;

  padding: 10px 16px;

  align-items: center;

  gap: 8px;

  border-radius: 6px;

  color: #CCC3BF;

  font-size: 13px;

  font-weight: 500;

  cursor: pointer;

  transition: .5s ease;

}

.wrap_btn_lang:hover {

  color: #FFCE6D;

  background: #3C342F;

}

.icon_flag {

  width: 16px;

  height: 16px;

  border-radius: 50%;

  overflow: hidden;

}

.icon_flag img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.language_wrap {

  position: absolute;

  top: 40px;

  right: 0;

  z-index: 200;

}

.language_list_wrap {

  display: flex;

  flex-direction: column;

  gap: 4px;

  padding: 12px;

  border-radius: 12px;

  background: #26211E;

  border: 1px solid #3C342F;

  position: relative;

  min-width: 170px;

}

.pop_up_arrow_language {

  position: absolute;

  top: -6px;

  right: 20px;

  width: 0;

  height: 0;

  border-left: 6px solid transparent;

  border-right: 6px solid transparent;

  border-bottom: 6px solid #26211E;

}

.btn_language {

  display: flex;

  padding: 8px;

  align-items: center;

  gap: 8px;

  border-radius: 6px;

  cursor: pointer;

  transition: .5s ease;

}

.btn_language:hover {

  background: #3C342F;

}

.content_btn_language {

  display: flex;

  align-items: center;

  gap: 8px;

}

/* --- Server List Dropdown (Desktop) --- */

.servers_dropdown_wrap {
  position: relative;
}

.btn_servers_toggle {
  position: relative;
  z-index: 100;
}

/* invisible hover bridge between button and dropdown */
.servers_dropdown_wrap::after {
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 24px;
  z-index: 99;
}

/* Full-width transparent dropdown like Reborn */
.dropdown_header_servers {
  position: fixed;
  top: 55px;
  left: 0;
  width: 100vw;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 98;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

.hide_list_servers {
}

.show_list_server {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* KEEP DROPDOWN OPEN ONLY WHEN HOVERING SERVERS AREA OR DROPDOWN */
.servers_dropdown_wrap:hover .dropdown_header_servers,
.servers_dropdown_wrap .dropdown_header_servers:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.servers_dropdown_wrap:hover .btn_servers_toggle {
  color: #FFCE6D;
  background: #3C342F;
}

.servers_dropdown_wrap:hover .secondary3_down {
  border-top-color: #FFCE6D;
}

/* dark transparent full bar */
.wrap_server_list {
  width: 100%;
  padding: 22px 0 28px;
  background: rgba(10, 9, 9, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.servers_tabs_header {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 1400px;
  max-width: calc(100% - 48px);
  margin: 0 auto;
  padding: 0 0 18px;
  overflow-x: auto;
  border-bottom: 1px solid rgba(154, 135, 126, 0.22);
}

.btn3_server_list {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
  white-space: nowrap;
  flex: 0 0 auto;
}

.btn3_server_list:hover,
.btn3_server_list_active {
  background: rgba(255, 255, 255, 0.06);
}

.spacer_btn_server {
  display: none;
}

.wrap1_btn_srv {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wrap2_btn_srv {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wrap3_btn_srv {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon_server {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}

.icon_server img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.content_servers_tabs {
  width: 1400px;
  max-width: calc(100% - 48px);
  margin: 0 auto;
  padding: 18px 0 0;
}

.wrap_infos_btn_srv {
  display: none;
  gap: 72px;
}

.show_infos_btn_srv {
  display: flex;
}

.wrap4_btn_srv {
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: repeat(2, auto);
  column-gap: 24px;
  row-gap: 10px;
  min-width: 280px;
  text-align: left;
}

.link_srv {
  color: #CCC3BF;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  transition: color 0.25s ease;
}

.link_srv:hover {
  color: #FFCE6D;
}

.link_srv a {
  color: inherit;
}

.link_srv a:hover {
  color: #FFCE6D;
}

/* Labels */

.label_servers {

  display: inline-flex;

  padding: 2px 6px;

  border-radius: 4px;

  background: #3C342F;

  color: #FAC459;

  font-size: 10px;

  font-weight: 500;

  margin-left: 8px;

  position: relative;

  cursor: default;

}

.label_servers .tooltiptext6 {

  visibility: hidden;

  opacity: 0;

  width: 200px;

  background-color: #1C1816;

  color: #FFF;

  text-align: left;

  border-radius: 6px;

  padding: 8px;

  position: absolute;

  z-index: 1;

  bottom: 125%;

  left: 50%;

  margin-left: -100px;

  font-size: 11px;

  font-weight: 400;

  transition: opacity 0.3s;

  border: 1px solid #3C342F;

}

.label_servers:hover .tooltiptext6 {

  visibility: visible;

  opacity: 1;

}

.btn_new {

  display: inline-flex;

  padding: 2px 6px;

  border-radius: 4px;

  background: #5CB814;

  color: #FFF;

  font-size: 10px;

  font-weight: 500;

  margin-left: 8px;

  position: relative;

  cursor: default;

}

.btn_new .tooltiptext6 {

  visibility: hidden;

  opacity: 0;

  width: 200px;

  background-color: #1C1816;

  color: #FFF;

  text-align: left;

  border-radius: 6px;

  padding: 8px;

  position: absolute;

  z-index: 1;

  bottom: 125%;

  left: 50%;

  margin-left: -100px;

  font-size: 11px;

  font-weight: 400;

  transition: opacity 0.3s;

  border: 1px solid #3C342F;

}

.btn_new:hover .tooltiptext6 {

  visibility: visible;

  opacity: 1;

}

/* --- Coming Soon label (header dropdown) --- */
.label_coming_soon {
  display: inline-flex;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(250,196,89,.10);
  color: #FAC459;
  font-size: 10px;
  font-weight: 600;
  margin-left: 8px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* --- Eclipse countdown chip (header dropdown) --- */
.hdr_countdown {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(250,196,89,.10);
  color: #FAC459;
  font-size: 10px;
  font-weight: 700;
  margin-left: 8px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .03em;
}




.top_div_home {
  position: relative;
  display: flex;
  width: 100%;
  height: 400px;
  border-radius: 12px;
  /* Allow the hero character to break out above AND below the banner */
  overflow: visible;
  clip-path: inset(-9999px 0 -9999px 0);
  /* Pull the hero up so it sits behind the transparent header — avoids the
     body background (brown band) leaking between header and hero. The header
     is 55px tall (see .bk_header). */
  margin-top: 80px;
  background: rgba(28, 24, 22, 0.55);
}

.img1_home {
  position: absolute;
  inset: 0;
  background:
  linear-gradient(
    90deg,
    rgba(28, 24, 22, 0.75) 0%,   /* dark left */
    rgba(28, 24, 22, 0.45) 30%,  /* medium */
    rgba(28, 24, 22, 0.25) 55%,  /* lighter center */
    rgba(28, 24, 22, 0.55) 100%  /* darker right (text area) */
  ),
  url('../images/hero/emergehero.png') no-repeat center 30%;
  background-size: cover;
  z-index: 1;
  opacity: 0.4;
  border-radius: 12px;
}

/* Hero character standing out of the banner (head/shoulders above the frame) */
.hero_char_home {
  position: absolute;
  left: -20%;
  top: -40%;
  bottom: 0;
  width: 90%;
  height: 204%;
  z-index: 2;
  background: url('../images/hero/emergehero-character.png') no-repeat center bottom;
  background-size: contain;
  pointer-events: none;
}

@media (max-width: 900px) {
  .hero_char_home {
      position: absolute;
      left: -40%;
      top: -40%;
      bottom: 0;
      width: 90%;
      height: 204%;
      z-index: 2;
      background: url(../images/hero/emergehero-character.png) no-repeat center bottom;
      background-size: contain;
      pointer-events: none;
  }

}

.right_div_home {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 500px;
  margin-right: 60px;
  margin-left: auto;
  gap: 24px;
  text-align: left;
}

/* Icons row */

.iconset_home {
  display: flex;
  align-items: center;
  gap: 16px;
}

.btn_icons_home {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #EDEDED;
  font-size: 12px;
  font-weight: 500;
  text-shadow: 0 1px 6px rgba(0,0,0,0.7);
}

.btn_icons_home span {
  color: #FFFFFF;
}

.icons_home {

  display: flex;

  align-items: center;

  gap: 4px;

}

.ic_nodual {

  background: url('../images/icons/no_dualbox.svg') no-repeat;

  width: 20px;

  height: 20px;

  background-size: contain;

}

.ic_no_wipe {

  background: url('../images/icons/no_wipe.svg') no-repeat;

  width: 20px;

  height: 20px;

  background-size: contain;

}

.ic_nopaytowin {

  background: url('../images/icons/no_paytowin.svg') no-repeat;

  width: 20px;

  height: 16px;

  background-size: contain;

}



/* Big download button */

.btn_big_download {

  display: flex;

  padding: 14px 32px;

  justify-content: center;

  align-items: center;

  gap: 10px;

  border-radius: 12px;

  background: #FAC459;

  color: #26211E;

  font-size: 15px;

  font-weight: 400;

  cursor: pointer;

  transition: .5s ease;

  width: fit-content;

}

.btn_big_download:hover {

  background: #FFCE6D;

}

.icon_win {

  width: 16px;

  height: 16px;

  background: url('../images/icons/windows.svg') no-repeat center;

  background-size: contain;

}



/* --- Servers Grid --- */

.servers_frame {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 16px;

  margin-top: 0;

}

.servers_wrap {

  border-radius: 12px;

  overflow: hidden;

  background: #26211E;

  border: 1px solid #3C342F;

}

.bk_server {
  width: 100%;
  height: 280px;
  border-radius: 12px 12px 0 0;
  position: relative;
  display: flex;
  overflow: hidden;
}

.server_bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity:0.2;
}

.server_eclipse {
  background-image: url('../images/servercards/Interlude.png');
}

.server_interlude {
  background-image: url('../images/servercards/Interlude.png');
}

.server_classic {
  background-image: url('../images/servercards/Interlude.png');
}

.hero_server {
  position: absolute;
  bottom: 0;
  z-index: 5;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left bottom;
  pointer-events: none;
}

/* Per-character placement — each art has different proportions / whitespace,
   so we tune left/top/width/height individually. */

/* Eclipse — male warrior with sword (tall full-body, lots of bottom padding) */
.hero_eclipse {
  background-image: url('../images/characters/eclipse.png');
  left: -10%;
  top: -15%;
  width: 199%;
  height: 400px;
}

/* Interlude (uses nexus.png) — slim elf with polearm, narrow & less whitespace */
.hero_interlude {
  background-image: url('../images/characters/nexus.png');
  left: -35%;
  top: -25%;
  width: 350px;
  height: 380px;
  background-position: center bottom;
}

/* Classic (uses origin.png) — dark-elf swordsman, wider stance, lots of bottom whitespace */
.hero_classic {
  background-image: url('../images/characters/origin.png');
  left: -34%;
  top: -22%;
  width: 450px;
  height: 450px;
  background-position: center bottom;
}

/* Allow the character to break out of the top of the card, but clip at the bottom edge */
.bk_server {
  overflow: visible !important;
  /* clip-path with negative top inset = unlimited overflow ABOVE,
     0 inset on the other sides = hard clip at left/right/bottom of the card */
  clip-path: inset(-9999px 0 0 0);
}
.servers_wrap { overflow: visible !important; }
/* Give the row enough top space so the protruding heads aren't clipped by section above */
.servers_frame { margin-top: 55px; }

.right_div_server {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;

  width: 46%;
  height: 100%;
  margin-left: auto;
  margin-right: 18px;

  padding-top: 25px;
  padding-bottom: 24px;

  text-align: right;
}

.btn_play_now {
  display: flex;
  padding: 10px 20px;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  background: #FAC459;
  color: #26211E;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: .5s ease;
  width: fit-content;
  margin-top: 8px;
}

.logo_container {

  display: flex;

}

.srv_card_game_logo {
  height: 72px;
  width: auto;
  object-fit: contain;
  margin-top:1.25em;
}

.btn_play_now {

  display: flex;

  padding: 10px 20px;

  justify-content: center;

  align-items: center;

  border-radius: 8px;

  background: #FAC459;

  color: #26211E;

  font-size: 13px;

  font-weight: 600;

  cursor: pointer;

  transition: .5s ease;

  width: fit-content;


}

.btn_play_now:hover {

  background: #FFCE6D;

}



/* Server logos */

.logo_emerge_hf {

  width: 120px;

  height: 55px;

  background: url('../images/servers/') no-repeat;

  background-size: contain;

}

.logo_emerge_il {

  width: 120px;

  height: 55px;

  background: url('../images/servers/logo_interlude.svg') no-repeat;

  background-size: contain;

}

.logo_emerge_c5 {

  width: 120px;

  height: 55px;

  background: url('../images/servers/logo_chronicle.svg') no-repeat;

  background-size: contain;

}



/* Servers bottom info */

.servers_bottom_wrap {

  display: flex;

  padding: 8px 16px;

  gap: 16px;

  align-items: center;

  background: rgba(28, 24, 22, 0.5);

}

.content1_servers_desktop {

  display: flex;

  justify-content: space-between;

  align-items: center;

  width: 100%;

  padding: 4px 0;

}

.content_icon_page {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 24px;

  height: 24px;

  border-radius: 4px;

  background: #3C342F;

  cursor: pointer;

  transition: .5s ease;

}

.content_icon_page:hover {

  background: #5C4F49;

}

.icon_page_txt {

  width: 16px;

  height: 16px;

  background: url('../images/icons/doc.svg') no-repeat center;

  background-size: contain;

}

.btn_features {

  display: flex;

  padding: 10px 16px;

  align-items: center;

  gap: 8px;

  border-radius: 8px;

  border: 1px solid #CCC3BF;

  color: #CCC3BF;

  font-size: 12px;

  font-weight: 500;

  cursor: pointer;

  transition: .5s ease;

}

.btn_features:hover {

  background: #5C4F49;

  border-color: #5C4F49;

  color: #FFCE6D;

}

.btn_features_disable {

  display: flex;

  padding: 10px 16px;

  align-items: center;

  gap: 8px;

  border-radius: 8px;

  border: 1px solid #5C4F49;

  color: #5C4F49;

  font-size: 12px;

  font-weight: 500;

}

.icon_page {

  width: 16px;

  height: 16px;

  background: url('../images/icons/doc.svg') no-repeat center;

  background-size: contain;

}

.icon_page_disabled {

  width: 16px;

  height: 16px;

  background: url('../images/icons/doc.svg') no-repeat center;

  background-size: contain;

  opacity: 0.4;

}



/* Content on servers mobile (hidden by default) */

.servers_bottom_wrap_mobile {

  display: none;

}

.content1_servers_mobile {

  display: inline-flex;

  padding: 2px 0;

  justify-content: space-between;

  align-items: center;

  width: 100%;

  gap: 4px;

}

/* --- Server bottom bar info --- */

.srv_bottom_info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.srv_bottom_name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: #FFF;
}

.srv_bottom_rate {
  font-size: 13px;
  font-weight: 600;
  color: #B3A59E;
}

.srv_bottom_chr {
  font-size: 12px;
  color: #9A877E;
  font-weight: 500;
  text-align: left;
}

.srv_bottom_badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 600;
}

.srv_bottom_badge_main {
  background: #3C342F;
  color: #B3A59E;
}

.srv_bottom_badge_soon {
  background: rgba(250,196,89,.12);
  color: #FAC459;
}

.btn_feat_icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid #CCC3BF;
  flex-shrink: 0;
  color: #CCC3BF;
  font: 600 12px 'Onest', sans-serif;
  text-decoration: none;
  transition: .3s ease;
}

.btn_feat_icon .btn_feat_label {
  white-space: nowrap;
  letter-spacing: .02em;
}

.btn_feat_icon:hover {
  background: #5C4F49;
  border-color: #5C4F49;
  color: #FFF;
}

.btn_feat_icon_disabled {
  border-color: #3C342F;
  cursor: default;
}

/* --- Game Guide Section --- */

.div_wiki {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 320px;
  margin-top: 60px;
  margin-bottom: 60px;
  padding: 56px 48px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #3C342F;
  background: #1C1816;
}

.div_wiki::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;

  background:
  url('../images/wiki/wiki2.png') no-repeat;

  background-size: 100%;
  background-position: center bottom;

  filter: blur(0px); /* 🔥 THIS IS THE MAGIC */
  transform: scale(0.9991); /* prevents blur edges cut */
}

.left_wiki,
.right_wiki {
  position: relative;
  z-index: 2;
}

.left_wiki {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  width: 44%;
  max-width: 520px;
  text-align: left;
}

.right_wiki {
  width: 56%;
}

.text_32_wiki {
  color: #FFFFFF;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.35); /* softer shadow */
}

.text_18_wiki {
  color: #FFFFFF; /* FULL WHITE */
  font-size: 17px;
  font-weight: 400;
  line-height: 1.45;
  max-width: 440px;
  text-align: left;
  opacity: 0.92; /* subtle fade like reborn */
}

.text_18_wiki2 {
  color: #FFFFFF; /* FULL WHITE */
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  max-width: 500px;
  text-align: left;
  opacity: 0.75; /* secondary text effect */
}

.btn_wiki {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-top: 10px;
  padding: 13px 26px;
  border-radius: 10px;
  background: #E2B65F;
  color: #1C1816;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}

.btn_wiki:hover {
  background: #F2C86F;
  transform: translateY(-1px);
}

.wiki_logo,
.content_logo_servers,
.ic_logo_interulde,
.ic_logo_kamael,
.logo_five_wiki,
.ic_logo_essence {
  display: none;
}

/* --- Launcher/Download Section --- */

.wrap_launcher {

  position: relative;

  /* Blend top & bottom edges seamlessly into the page background:
     transparent at the very top & bottom, slightly darker in the middle. */
  background: linear-gradient(180deg,
    rgba(28,24,22,0)   0%,
    rgba(28,24,22,0.55) 18%,
    rgba(38,33,30,0.85) 50%,
    rgba(28,24,22,0.55) 82%,
    rgba(28,24,22,0)   100%);

  margin-top: 0;

  padding: 80px 0;

  border-top: 0;

  overflow: hidden;

}

.wrap_launcher::before {

  content: '';

  position: absolute;

  inset: 0;

  background: url('../images/client/client.png') no-repeat center center;

  background-size: contain;

  opacity: 0.04;

  pointer-events: none;

}


.div_launcher {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 24px;

  position: relative;

  z-index: 3;

  width: 1400px;

  max-width: 100%;

  margin: 0 auto;

}

.img_app_client {

  width: 520px;

  max-width: 90vw;

  height: auto;

  display: block;

  border-radius: 14px;

  border: 1px solid #3C342F;


  position: relative;

  z-index: 1;

}

.btn_win_download .ic_windows_small {
  filter: brightness(0) saturate(100%) invert(78%) sepia(56%) saturate(660%) hue-rotate(340deg) brightness(103%);
}
.btn_win_download {

  background: #E2B65F;
  display: flex;

  padding: 12px 22px;

  justify-content: center;

  align-items: center;

  gap: 10px;

  border-radius: 12px;

  border: 1px solid #FAC459;

  color: #1C1816;

  font-size: 15px;

  font-weight: 300;

  cursor: pointer;

  transition: .5s ease;

}



/* --- Footer --- */

.footer_content {
  background: #1f1a17;
  padding: 54px 0 64px;
  border-top: none;
  position: relative;
  isolation: isolate;
}

.footer_content::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 360px;
  background: linear-gradient(to bottom, rgba(31, 26, 23, 0) 0%, rgba(31, 26, 23, 0.42) 55%, rgba(31, 26, 23, 0.76) 82%, #1f1a17 100%);
  pointer-events: none;
  z-index: 0;
}

.footer_top_divider,
.full_wrap {
  position: relative;
  z-index: 1;
}

.footer_wrap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 1400px;
  max-width: calc(100% - 48px);
  margin: 0 auto;
  gap: 48px;
}

.left_footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  min-width: 210px;
}

.footer_logo_link {
  display: inline-flex;
  align-items: center;
}

.footer_logo_img {
  height: 33px;
  width: auto;
  display: block;
  object-fit: contain;
}

.footer_copy {
  color: #665B55;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
}

.center_footer {
  display: flex;
  flex-direction: column;
  gap: 26px;
  flex: 1;
  padding-top: 8px;
}

.footer_links_row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  row-gap: 10px;
}

.footer_label {
  color: #8F7F76;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.footer_separator {
  width: 1px;
  height: 14px;
  background: rgba(143, 127, 118, 0.22);
  margin: 0 4px;
}

.secondary_link2_small {
  color: #CFC6C1;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  transition: color 0.25s ease, opacity 0.25s ease;
}

.secondary_link2_small:hover {
  color: #F3C867;
}

.right_footer {
  display: flex;
  justify-content: flex-end;
  min-width: 150px;
  padding-top: 2px;
}

.content_media {
  display: flex;
  align-items: center;
  gap: 14px;
}

.footer_social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border-radius: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.footer_social:hover {
  opacity: 0.8;
  transform: translateY(-1px);
}

.ic_discord,
.ic_insta,
.ic_yt,
.ic_fb {
  width: 22px;
  height: 22px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.95;
}

.ic_discord { background-image: url('../images/icons/discord.svg'); }
.ic_insta { background-image: url('../images/icons/instagram.svg'); }
.ic_yt { background-image: url('../images/icons/youtube.svg'); }
.ic_fb { background-image: url('../images/icons/facebook.svg'); }

/* old footer parts hidden */
.content_link_footer_desktop,
.content_link_footer_mobile,
.logo_media,
.logo_footer,
.line_v_15_footer,
.text_12_medium_footer {
  display: none;
}



/* Documentation links */

.secondary_link2_small {

  font-size: 12px;

  font-weight: 400;

  color: #CCC3BF;

  cursor: pointer;

  transition: .5s ease;

}

.secondary_link2_small:hover {

  color: #FFCE6D;

}



/* Line separators */

.line_h_menu {

  width: 100%;

  height: 1px;

  background: #3C342F;

}

.inputfield_expand_expand {

  width: 100%;

  height: 1px;

}



/* Ic right arrow */

.ic_right {

  width: 16px;

  height: 16px;

  background: url('../images/icons/arrow_right.svg') no-repeat center;

  background-size: contain;

}

.ic_right_brown {

  width: 16px;

  height: 16px;

  background: url('../images/icons/arrow_right.svg') no-repeat center;

  background-size: contain;

  opacity: 0.5;

}



/* Hidden elements */

.account_wrap_loged { display: none; }