/* Diablo2 theme. Load after style.css and responsive.css. */
:root {
  --theme__color1: #a71f31;
  --theme__color2: #f0b6ae;
  --font1: Arial, Helvetica, sans-serif;
  --font2: 'Trajan Pro', Georgia, serif;
  --font3: Arial, Helvetica, sans-serif;
  --font4: Georgia, serif;
  --diablo-bg: #101013;
  --diablo-panel: #1a191d;
  --diablo-border: #393035;
  --diablo-muted: #bdb4b5;
  --diablo-red: #d13a46;
}
body {
  background: var(--diablo-bg);
  color: #f3eeea;
  font-family: var(--font1);
  font-size: 14px;
  line-height: 1.55;
}
body a:focus-visible,
body button:focus-visible,
body input:focus-visible,
body select:focus-visible,
body textarea:focus-visible,
body .nice-select:focus-visible {
  outline: 2px solid #f0b6ae;
  outline-offset: 4px;
}
p { font-size: 14px; line-height: 1.7; }
.main-wrap { overflow: clip; }
.container { max-width: 1320px; }
.header-section {
  position: relative;
  padding: 0;
  background: #141316;
  border-bottom: 1px solid #493034;
}
.header-section-inner { min-height: 94px; gap: 24px; }
.main-menu ul { gap: 18px; }
.main-menu ul li a { font-size: 13px; font-weight: 600; color: #d6cccc; }
.main-menu ul li a:hover { color: #fff; }
.main-menu ul li a:not(.header-logo) { padding: 14px 0; display: inline-block; }
.header-logo { width: auto; min-width: 210px; text-align: center; margin: 0 14px; }
.diablo-wordmark {
  display: inline-block;
  font-family: var(--font2);
  font-weight: 700;
  font-size: 33px;
  line-height: 1.2;
  letter-spacing: 3px;
  color: #f4ded5;
  text-shadow: 0 2px 20px #a9193b55;
}
.diablo-wordmark span { color: #dc4a55; }
.lan-select {
  margin-left: 12px;
  flex-shrink: 0;
  border: 1px solid var(--diablo-border);
  border-radius: 4px;
  background: #211b1f;
  padding: 2px 9px;
}
.lan-select img { height: 16px; }
.lan-select .nice-select { color: #e6dadd; min-width: 88px; font-size: 12px; }
.lan-select .nice-select::after { border-color: #cbb9b9; }
.lan-select .nice-select .list { background: #211b1f; color: #e6dadd; border: 1px solid var(--diablo-border); }
.nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus { background: #43262e; }
.offcanvas-open { min-width: 44px; min-height: 44px; align-content: center; text-align: center; cursor: pointer; }
.offcanvas-menu .offmenu { background: #19151a; border-right: 1px solid #68303c; max-width: 310px; padding-top: 76px; }
.offcanvas-menu ul li a { color: #f2e9e5; text-align: left; padding: 14px; border-bottom: 1px solid #35232b; }
.offcanvas-menu ul li a:hover { background: #34202a; }
.offcanvas-overlay { background: #000a; }
#preloader { background: #101013; }
#preloader::before { border-color: #392029; border-top-color: #d13a46; }
.hero-section {
  position: relative;
  margin: 0;
  background: linear-gradient(90deg, #111013f2 0%, #111013d4 29%, #11101328 65%), url('../images/diablo2-hero.webp') center 46% / cover no-repeat;
  border-bottom: 1px solid #62262e;
}
.hero-section::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, #101013 0%, #10101300 28%);
}
.hero-section-inner { position: relative; z-index: 1; height: auto; min-height: 610px; padding: 88px 0 46px; }
.diablo-hero-copy { max-width: 620px; }
.diablo-eyebrow { display: flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 700; letter-spacing: 3px; color: #e59195; margin-bottom: 22px; }
.diablo-eyebrow::before { content: ''; width: 34px; height: 1px; background: #df4859; }
.diablo-hero-copy h1 { font-family: var(--font2); font-size: clamp(50px, 6.5vw, 86px); font-weight: 700; letter-spacing: 4px; line-height: 1.05; margin: 0 0 20px; color: #f3e7dc; text-shadow: 0 4px 38px #000; }
.diablo-hero-copy h1 span { color: #dc4a55; }
.diablo-hero-copy p { color: #dbceca; font-size: 19px; line-height: 1.65; max-width: 430px; margin-bottom: 28px; }
.diablo-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.diablo-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 49px; padding: 14px 25px; border: 1px solid #b12f3e; border-radius: 3px; background: linear-gradient(135deg, #be293d, #841627); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .3px; box-shadow: 0 8px 32px #8c133133; transition: background .2s, border-color .2s, transform .2s; }
.diablo-cta:hover { color: #fff; border-color: #ed6972; background: #bd3041; transform: translateY(-1px); }
.diablo-cta-secondary { background: #171319a6; border-color: #70504f; box-shadow: none; color: #efded9; }
.diablo-cta-secondary:hover { background: #352027; }
.hero-cont1 { margin: 46px 0 0; padding: 0; gap: 28px; flex-wrap: wrap; }
.hero-cont1 .single-cont { margin: 0; padding: 0; gap: 11px; }
.hero-cont1 .single-cont .image { width: 38px; margin: 0; opacity: .85; }
.hero-cont1 .single-cont .image img { width: 38px; }
.hero-cont1 .single-cont .txt-c h4 { font-family: var(--font1); font-size: 20px; line-height: 1.35; font-weight: 700; }
.hero-cont1 .single-cont .txt-c h3 { font-family: var(--font1); font-size: 11px; color: #c2b2ad; }
.hero-cont1 .single-cont .txt-c h3 .dc { color: #d2b1ad; }
.section-wrapper1 { background: radial-gradient(ellipse at 50% 0, #57202a22, transparent 65%), #101013; padding: 0 0 70px; }
.main-section .h-0 { display: none; }
.main-section-inner { display: grid; grid-template-columns: minmax(230px, 1fr) minmax(0, 2.15fr) minmax(230px, 1fr); gap: 22px; margin-top: 0; align-items: start; }
.m-sidebar, .m-main-part { width: auto; min-width: 0; margin: 0; }
.s-box { background: linear-gradient(135deg, #211b20, #19181c); border: 1px solid var(--diablo-border); border-radius: 5px; height: auto; padding: 0 16px 22px; margin: 0 0 22px; box-shadow: 0 12px 35px #0003; }
.s-box .border-img, .s-box-header .bg-img, .m-box-border { display: none; }
.s-box-header { position: relative; margin: 0 -16px 16px; width: calc(100% + 32px); min-height: 58px; border-bottom: 1px solid var(--diablo-border); border-top: 2px solid #8c2736; background: #261c23; }
.s-box-header .header-cont { position: static; padding: 17px 18px; }
.s-box-header h3 { font-size: 13px; font-weight: 700; letter-spacing: 1px; color: #f2ddd6; text-align: left; }
.s-box-form { padding: 2px 0; }
.single-input-x-input { background: #121115; color: #e4d9d4; border: 1px solid #47333d; border-radius: 3px; box-shadow: none; height: 43px; font-size: 12px; }
.single-input-x-input::placeholder { color: #aa979c; }
.single-input-x-input:focus { border-color: #dd5964; }
.form-control, textarea, .form-select { background: #151217; color: #e7ddd6; border-color: #4b3640; }
.form-control:focus, textarea:focus, .form-select:focus { background: #19151b; color: #fff; border-color: #d65b66; box-shadow: 0 0 0 3px #bb3b4933; }
.form-control::placeholder { color: #b8a5aa; }
.form-fgt { background: transparent; color: #ceb7b4; box-shadow: none; font-size: 11px; }
.form-fgt a:hover { color: #fff; }
.s-box-form .bt-row { width: 100%; }
.s-box .login-captcha { margin-left: 0; }
.default-button, button.default-button, .default-button--small { width: auto; min-width: 125px; height: auto; min-height: 39px; background: linear-gradient(135deg, #a72336, #731425); border: 1px solid #af3343; border-radius: 3px; color: #fff; font-family: var(--font1); font-size: 12px; font-weight: 700; padding: 10px 17px; transition: background .2s ease !important; }
.default-button:hover { background: #bb3042; filter: none; color: #fff; }
.default-button--small { min-height: 34px; min-width: 100px; padding: 8px 13px; font-size: 11px; }
.gold-player { margin: 7px 0 13px; padding: 13px 10px; gap: 12px; background: #35222b; border: 1px solid #53303b; border-radius: 3px; box-shadow: none; }
.gold-player__content { min-width: 0; }
.gold-player__content h4 { font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
.gold-player__content h5 { font-size: 10px; line-height: 1.5; }
.table-st1-str1, .table-sm-st-str1 { padding: 0; }
.table-st1 tbody tr, .table-user a { background: #1d191f; }
.table-st1 tbody tr:nth-child(odd), .table-user a:nth-child(odd) { background: #292029; }
.table-st1 tbody tr:hover, .table-user a:hover { background: #3d2530; }
.table-st1 table td { padding: 10px 5px; font-size: 11px; color: #e1d6d3; border-bottom: 1px solid #352a33; overflow-wrap: anywhere; }
.table-st1 table td:first-child { padding-left: 8px; }
.table-st1-str1 table td:nth-child(1) { width: 12%; }
.table-st1-str1 table td:nth-child(2) { width: 34%; }
.table-st1-str1 table td:nth-child(3) { width: 26%; padding-right: 5px; }
.table-st1-str1 table td:last-child { padding-right: 8px; }
.table-sm-st td { color: #c6b8bc; font-size: 12px; }
.table-user a { display: block; padding: 9px 10px; margin-bottom: 3px; border-radius: 3px; }
.table-user .column { font-size: 12px; }
.table-user .column i { margin-right: 7px; color: #d67780; }
.table-update-time__outer { border-color: #54313d; }
.table-update-time { background: #2c2128; color: #cbb8bd; border-radius: 3px; font-size: 10px; }
.m-box { border: 1px solid var(--diablo-border); border-radius: 5px; color: #e9ded9; background: var(--diablo-panel); margin-bottom: 22px; overflow: hidden; }
.m-box-full-height { height: auto; }
.m-slider { margin-bottom: 22px; }
.m-slide .m-box { background: #1e171f; }
.m-box-design1 { height: 190px; }
.m-slide .content-ud { background-image: linear-gradient(90deg, #21121dbb, #14131633), url('../images/diablo2-hero.webp') !important; background-position: 80% 65% !important; }
.m-slide-caption { top: auto; bottom: 0; padding: 20px 22px; background: linear-gradient(0deg, #171119, #17111988); }
.m-slide-caption h3 { font-family: var(--font2); font-size: 22px; color: #f2ded4; margin-bottom: 6px; }
.m-slide-caption h4 { color: #c8b7b5; font-size: 12px; }
.m-slider .owl-nav { top: 15px; right: 15px; }
.slider-arrow-1 .owl-nav button { background: #492430 !important; border: 1px solid #75414d !important; width: 28px; height: 28px; border-radius: 3px; }
.slider-arrow-1 .owl-nav button:hover { background: #973144 !important; }
.xy-news-part { padding-bottom: 18px; }
.xy-news-header, .page-hd { margin: 0; padding: 0 22px; min-height: 64px; border-bottom: 1px solid #49323d; background: #231c24; }
.xy-news-header h3, .pre-social { font-size: 16px; margin: 0; color: #f1ded7; }
.xy-nh-ul li { padding: 0 12px; }
.xy-nh-ul li a { color: #c6aab2; padding: 22px 0; font-size: 11px; }
.xy-nh-ul li a.active, .xy-nh-ul li a:hover { color: #fff; border-bottom-color: #d64757; }
.content-xy { padding: 22px 22px 8px; }
.content-xy .xy-title { background: #33212b; border: 1px solid #59303f; border-left: 3px solid #c8364b; border-radius: 3px; padding: 13px 15px; box-shadow: none; gap: 12px; }
.content-xy .xy-title .left h3 { font-size: 15px; line-height: 1.5; color: #f0dfdc; }
.content-xy .xy-title .left h4 { font-size: 11px; color: #c6a3ab; margin-bottom: 3px; }
.content-xy .xy-title .right ul.xy { flex-wrap: wrap; gap: 4px; }
.content-xy .xy-title .right ul.xy li { font-size: 10px; color: #cfafb5; border-color: #79525a; }
.xy-text-cont p { font-size: 13px; line-height: 1.8; color: #d2c4c2; text-align: left; }
.xy-text-bottom .f-line { background: #46333b; }
.pagination { padding: 14px 0 22px; }
.pagination ul li a, .pagination .buttons a, .pagination .buttons span { width: 30px; height: 30px; background: #211a22; border: 1px solid #54313f; border-radius: 3px; font-size: 12px; }
.pagination ul li a.active, .pagination ul li a:hover, .pagination .buttons a:hover, .pagination .buttons span { background: #8e2438; height: 30px; border-color: #c73f53; }
.heading-op { padding: 24px 16px; border-bottom: 1px solid #49323d; background: #231c24; }
.heading-op h2 { font-size: 18px; font-family: var(--font2); }
.download-game { padding: 32px 24px; }
.download-game .title h3, .account-form-row1 p, .download-game-requirement table td { color: #c6b7bb; font-family: var(--font1); }
.download-game .download-row1 { gap: 12px; flex-wrap: wrap; }
.download-game .download-button { flex: 1 1 170px; width: auto; }
.download-game .download-row2, .download-game .download-row3 { margin-bottom: 36px; }
.download-game-requirement { padding: 0; }
.download-game-requirement table td { padding: 8px 4px; font-size: 12px; border-bottom: 1px solid #3a2c35; }
.create-account { padding: 35px 24px 20px; }
.account-form { max-width: 350px; margin-bottom: 25px; }
.account-form-row1 { margin-bottom: 25px; }
.footer-section { background: #151115; border-top: 1px solid #3c2631; }
.footer-bottom { padding: 25px 0; }
.footer-p { font-size: 11px; color: #b5a1a9; }
.footer-p .blue-c { color: #e08e96; }
@media (max-width: 1199px) {
  .header-section { padding: 0; }
  .header-section-inner { min-height: 80px; gap: 12px; }
  .header-logo { order: -1; min-width: 180px; width: auto; margin: 0 auto 0 0 !important; text-align: left; }
  .lan-select { margin-left: auto; }
  .offcanvas-open { margin-left: 0 !important; }
  .hero-section-inner { min-height: 540px; padding-top: 68px; }
  .main-section-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; margin-top: 0; }
  .m-main-part { order: initial; grid-column: 1 / -1; grid-row: 1; margin-bottom: 0; }
  .m-sidebar-left, .m-sidebar-right { margin: 0; }
  .table-st1 table td { font-size: 12px; }
}
@media (max-width: 767px) {
  .hero-section { background-position: 60% center; background-image: linear-gradient(90deg, #111013ef, #11101385), url('../images/diablo2-hero.webp'); }
  .hero-section-inner { min-height: 505px; padding: 52px 8px 40px; }
  .diablo-hero-copy h1 { font-size: 61px; letter-spacing: 2px; }
  .diablo-hero-copy p { font-size: 17px; }
  .diablo-eyebrow { font-size: 10px; letter-spacing: 2px; }
  .hero-cont1 { margin-top: 35px; gap: 22px; }
  .hero-cont1 .single-cont { margin: 0; }
  .main-section-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .m-main-part { grid-column: 1; }
  .m-sidebar { width: 100%; }
  .s-box { margin-bottom: 22px; }
  .xy-news-header { flex-direction: row; padding: 0 18px; gap: 10px; }
  .xy-news-header h3 { font-size: 14px; }
  .xy-nh-ul li { padding: 0 7px; }
  .xy-nh-ul li:last-child { padding-right: 0; }
  .content-xy { padding: 18px 16px 8px; }
  .content-xy .xy-title { align-items: flex-start; flex-direction: column; gap: 6px; }
  .section-wrapper1 { padding-bottom: 28px; }
}
@media (max-width: 460px) {
  .header-section-inner { gap: 6px; min-height: 72px; }
  .header-logo { min-width: 135px; }
  .diablo-wordmark { font-size: 25px; letter-spacing: 1px; }
  .lan-select { padding: 1px 4px; gap: 3px; }
  .lan-select .nice-select { min-width: 70px; padding-left: 4px; padding-right: 19px; font-size: 11px; }
  .lan-select img { height: 13px; }
  .offcanvas-open { min-width: 35px; font-size: 20px; }
  .hero-section-inner { min-height: 465px; padding-top: 46px; }
  .diablo-hero-copy h1 { font-size: 53px; }
  .diablo-hero-copy p { font-size: 15px; }
  .diablo-hero-actions { gap: 8px; }
  .diablo-cta { padding: 12px 17px; min-height: 44px; font-size: 12px; }
  .hero-cont1 { margin: 28px 0 0; justify-content: flex-start; gap: 16px; }
  .hero-cont1 .single-cont .image { width: 29px; }
  .hero-cont1 .single-cont .image img { width: 29px; }
  .hero-cont1 .single-cont .txt-c h4 { font-size: 18px; }
  .hero-cont1 .single-cont .txt-c h3 { font-size: 10px; }
  .m-box-design1 { height: 160px; }
  .xy-news-header { flex-wrap: wrap; gap: 0; padding-top: 15px; }
  .xy-nh-ul li a { padding: 12px 0; }
  .download-game { padding: 24px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .diablo-cta, .default-button, .header-logo, .offcanvas-menu, .offcanvas-overlay { transition: none !important; }
  .diablo-cta:hover { transform: none; }
}