:root{--orange:#ff5a1f;--orange-dark:#e7470f;--ink:#24282c;--muted:#858b90;--line:#e4e6e8;--soft:#f5f6f7;--green:#48a564}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:0;color:var(--ink);background:#111 url('../images/background3.jpg') center top/cover fixed no-repeat;font-family:Inter,Arial,sans-serif;font-size:12px}
button,input{font:inherit}button{color:inherit}a{color:inherit;text-decoration:none}img{max-width:100%}
.page-width,.site-shell{width:min(calc(100% - 28px),1100px);margin-inline:auto}
.background-ad{position:fixed;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.2),transparent 30%,transparent 70%,rgba(0,0,0,.2))}
.top-advertising{min-height:145px;display:grid;grid-template-columns:repeat(2,468px);align-content:center;justify-content:center;gap:14px}
.top-ad{width:468px;height:100px;padding:0;overflow:hidden;background:rgba(8,15,22,.86);border:1px solid rgba(255,255,255,.15);cursor:pointer}
.top-ad img,.side-ad img{display:block;width:100%;height:100%;object-fit:cover}.placeholder-ad{display:grid;place-items:center;color:rgba(255,255,255,.45);font-weight:800;letter-spacing:.08em}
.site-shell{background:#fff;box-shadow:0 0 40px rgba(0,0,0,.4)}
.site-header{background:#fff;border-bottom:1px solid var(--line)}
.navbar{height:62px;display:grid;grid-template-columns:190px 1fr auto;align-items:center;padding:0 20px;border-bottom:1px solid #eceeef}
.site-brand{display:flex;align-items:center;gap:9px}.brand-mark{width:31px;height:35px;display:grid;place-items:center;color:#231a0d;background:#d7ad58;clip-path:polygon(50% 0,100% 19%,88% 80%,50% 100%,12% 80%,0 19%);font:800 10px/1 Cinzel,serif}
.brand-copy strong,.brand-copy small{display:block}.brand-copy strong{font:800 17px/1 Cinzel,serif}.brand-copy small{margin-top:3px;color:#9a9da0;font-size:7px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.main-nav{height:100%;display:flex;align-items:stretch}.main-nav a{position:relative;display:flex;align-items:center;padding:0 13px;color:#565b60;font-size:10px;font-weight:600}.main-nav a:hover,.main-nav a.active{color:#111}.main-nav a.active:after{content:"";position:absolute;right:13px;bottom:0;left:13px;height:2px;background:var(--orange)}
.header-actions{display:flex;align-items:center;gap:13px;color:#5e6367;font-size:9px;font-weight:700}.add-server{padding:9px 11px;color:#fff;background:var(--orange);text-transform:uppercase}.add-server:hover{background:var(--orange-dark)}
.category-nav{height:43px;display:flex;align-items:center;padding:0 20px;border-bottom:1px solid var(--line)}
.category-toggle{height:43px;padding:0 16px 0 0;margin-right:23px;background:transparent;border:0;cursor:pointer;color:#5d6266;font-size:9px}.category-toggle span{margin-left:5px;color:#a8acae}
.header-search{margin-left:auto;display:flex;align-items:center;gap:7px}.header-search span{position:absolute;width:1px;height:1px;overflow:hidden}.header-search input{width:175px;height:29px;padding:0 9px 0 28px;color:#333;background:#fafafa;border:1px solid #e4e6e8;outline:0;font-size:9px;background-image:radial-gradient(circle at 14px 12px,transparent 4px,#9ba0a3 5px,transparent 6px)}.header-search input:focus{border-color:#b8bdc0}
.content-layout{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:20px;padding:20px}
.main-content{min-width:0}.breadcrumbs{display:flex;gap:6px;margin-bottom:15px;color:#a2a6a9;font-size:8px}.breadcrumbs strong{color:#70767a}
.page-heading{padding-bottom:13px}.game-label{display:block;margin-bottom:4px;color:var(--orange);font-size:8px;font-weight:800;letter-spacing:.09em}.page-heading h1{margin:0;color:#24272a;font:800 23px/1.2 Cinzel,serif;letter-spacing:0}.page-heading p{margin:6px 0 0;color:#858b8f;font-size:9px;line-height:1.5}
.chronicle-tabs{display:flex;align-items:center;gap:4px;padding-bottom:12px;border-bottom:1px solid #eceeef}.chronicle-tab{height:25px;padding:0 10px;color:#81868a;background:#f3f4f5;border:1px solid transparent;cursor:pointer;font-size:8px;font-weight:700}.chronicle-tab:hover,.chronicle-tab.active{color:#fff;background:var(--orange);border-color:var(--orange-dark)}.chronicle-tab small{margin-left:3px;font-size:7px;opacity:.75}
.ranking-subnav{min-height:43px;display:flex;align-items:center;justify-content:space-between;gap:10px}.rate-filter{display:flex;flex-wrap:wrap;gap:5px}.rate-chip{padding:5px 8px;color:#7b8185;background:#fff;border:1px solid #e1e4e6;cursor:pointer;font-size:7px;font-weight:700}.rate-chip:hover,.rate-chip.active{color:var(--orange);border-color:#ffc3aa}.ranking-subnav>span{color:#9ca1a4;font-size:8px;white-space:nowrap}
.ranking-board{border-top:1px solid #e8eaec}.ranking-list{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding-top:13px}.server-group{min-width:0}.server-group h2{height:27px;display:flex;align-items:center;justify-content:center;gap:6px;margin:0;color:#4d5256;font-size:9px;font-weight:800;text-transform:uppercase}.server-group h2 span{color:var(--orange);font-size:8px}
.group-columns,.server-line{display:grid;grid-template-columns:28px minmax(0,1fr) 45px 65px 35px;align-items:center}.group-columns{height:22px;padding:0 5px;color:#adb1b4;background:#f5f6f7;border-top:1px solid #eceeef;border-bottom:1px solid #eceeef;font-size:6px;font-weight:800;text-transform:uppercase}.group-columns span:not(:nth-child(2)){text-align:center}
.server-line{width:100%;min-height:31px;padding:0 5px;color:#666c70;background:#fff;border:0;border-bottom:1px solid #eceeef;cursor:pointer;text-align:left;font-size:7px}.server-line:hover{background:#fff8f5}.server-line span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.server-line span:not(.line-name){text-align:center}.line-rank{color:#aaaeb1;font-size:6px}.line-name{color:#50565a;font-weight:700}.line-rate,.line-version,.line-clicks{color:#858b8f}
.server-line.featured{min-height:33px;color:#fff;background:linear-gradient(90deg,#ff4a16,#ff7728);border-bottom:2px solid #fff}.server-line.featured:hover{background:linear-gradient(90deg,#ef3d0a,#f8661e)}.server-line.featured .line-name,.server-line.featured .line-rank,.server-line.featured .line-rate,.server-line.featured .line-version,.server-line.featured .line-clicks{color:#fff}.server-line.featured .line-name:before{content:"◆";margin-right:5px;font-size:5px}
.group-empty{padding:28px 12px;color:#a0a5a8;background:#fafafa;border:1px solid #eceeef;text-align:center;font-size:8px}.empty-state{grid-column:1/-1;padding:55px 20px;text-align:center;border:1px solid #eceeef}.empty-state strong,.empty-state span{display:block}.empty-state strong{font-size:12px}.empty-state span{margin-top:5px;color:#959a9d;font-size:9px}
.pagination{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px;margin:22px 0 16px;padding:14px 0;border-top:1px solid #e8eaec;border-bottom:1px solid #e8eaec}
.pagination .pagination-info{width:100%;text-align:center;font-size:11px;font-weight:700;color:#7b8185;margin-bottom:6px}
.pagination .page-numbers{display:inline-flex;align-items:center;gap:5px}
.pagination .page-link{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 10px;font-size:12px;font-weight:700;color:#50565a;background:#fff;border:1px solid #dce0e4;border-radius:5px;text-decoration:none;transition:all .15s ease}
.pagination .page-link:hover{color:var(--orange);border-color:var(--orange);background:#fff8f5}
.pagination .page-link.active{color:#fff;background:linear-gradient(135deg,#ff4a16,#ff7728);border-color:#ff4a16;box-shadow:0 2px 6px rgba(255,74,22,.25)}
.pagination .page-dots{padding:0 4px;color:#959a9d;font-size:12px;font-weight:700}
.pagination .prev-page,.pagination .next-page{padding:0 14px;font-size:11px}
.side-column{display:grid;align-content:start;gap:12px}.side-ad{width:160px;height:600px;padding:0;overflow:hidden;background:#0d274d;border:0;cursor:pointer}.advertise-card{width:160px;padding:11px;background:#f4f5f6;border-top:2px solid var(--orange)}.advertise-card span,.advertise-card strong{display:block}.advertise-card span{color:var(--orange);font-size:7px;font-weight:800}.advertise-card strong{margin-top:5px;color:#656b6f;font-size:8px;line-height:1.4}.advertise-card a{display:block;margin-top:9px;padding:7px;color:#fff;background:var(--orange);text-align:center;font-size:7px;font-weight:800;text-transform:uppercase}
.site-footer{min-height:76px;display:flex;align-items:center;gap:12px;padding:18px 20px;color:#9ba0a3;background:#f6f7f8;border-top:1px solid #e4e6e8;font-size:8px}.site-footer strong{color:#555b5f;font:800 11px Cinzel,serif}.site-footer small{margin-left:auto}
@media(max-width:900px){.page-width,.site-shell{width:min(calc(100% - 16px),720px)}.top-advertising{grid-template-columns:minmax(0,468px);min-height:120px}.top-ad:nth-child(2){display:none}.navbar{grid-template-columns:160px 1fr}.main-nav{display:none}.header-actions{justify-self:end}.content-layout{grid-template-columns:1fr}.side-column{display:none}.ranking-list{gap:12px}.group-columns,.server-line{grid-template-columns:25px minmax(0,1fr) 42px 58px 31px}}
@media(max-width:600px){body{background-attachment:scroll}.page-width,.site-shell{width:100%}.top-advertising{width:calc(100% - 16px);padding:10px 0}.top-ad{width:100%;height:auto;aspect-ratio:468/100}.site-shell{box-shadow:none}.navbar{height:54px;padding:0 12px}.brand-mark{width:27px;height:31px}.brand-copy strong{font-size:14px}.header-actions>a:first-child{display:none}.add-server{padding:8px;font-size:8px}.category-nav{height:auto;display:grid;grid-template-columns:repeat(3,1fr);padding:0 10px}.category-toggle{height:35px;margin:0;padding:0;text-align:left}.header-search{grid-column:1/-1;width:100%;padding-bottom:9px}.header-search input{width:100%}.content-layout{padding:14px 10px}.page-heading h1{font-size:19px}.chronicle-tabs{overflow-x:auto}.chronicle-tab{flex:0 0 auto}.ranking-list{grid-template-columns:1fr;gap:18px}.server-group h2{justify-content:flex-start}.group-columns,.server-line{grid-template-columns:26px minmax(0,1fr) 46px 66px 34px}.server-line{min-height:34px}.site-footer{flex-wrap:wrap}.site-footer small{width:100%;margin:0}}
@media(max-width:370px){.add-server{display:none}.navbar{grid-template-columns:1fr}.group-columns,.server-line{grid-template-columns:24px minmax(0,1fr) 42px 58px}.group-columns span:last-child,.line-clicks{display:none}}
/* Reference fidelity pass */
.page-width,.site-shell{width:min(calc(100% - 24px),1122px)}
.navbar{height:60px;grid-template-columns:195px 1fr auto;padding:0 22px}
.brand-copy strong{font-size:19px}.brand-copy small{font-size:8px}
.main-nav a{padding-inline:15px;font-size:12px}.header-actions{font-size:11px}.add-server{padding:10px 13px;font-size:10px}
.category-nav{height:42px;padding-inline:22px}.category-toggle{height:42px;font-size:11px;font-weight:600}.header-search input{width:190px;height:30px;font-size:10px}
.content-layout{grid-template-columns:minmax(0,1fr) 200px;gap:22px;padding:23px 22px 28px}
.breadcrumbs{margin-bottom:20px;font-size:10px}.page-heading{padding-bottom:18px}.game-label{font-size:9px}.page-heading h1{font:800 26px/1.2 Inter,Arial,sans-serif}.page-heading p{max-width:760px;margin-top:7px;font-size:12px;line-height:1.45}
.chronicle-tabs{gap:8px;padding-bottom:15px}.chronicle-tab{height:33px;padding:0 13px;font-size:10px;border-radius:8px;background:#f4f7fb}.chronicle-tab small{font-size:8px}
.ranking-subnav{min-height:51px}.rate-chip{padding:6px 9px;font-size:9px}.ranking-subnav>span{font-size:10px}
.ranking-list{gap:24px;padding-top:11px}.server-group h2{height:40px;font-size:15px;letter-spacing:.02em}.server-group h2 span{font-size:12px}
.group-columns{display:none}.server-line{grid-template-columns:27px minmax(0,1fr) 48px 72px 54px;min-height:31px;padding:0 7px;font-size:11px}.server-line.featured{min-height:31px;border-radius:6px;border-bottom:2px solid #fff;font-size:11px}.server-line.featured .line-name:before{font-size:8px}
.line-rank{font-size:9px}.line-name{font-size:11px}.line-rate,.line-version,.line-date{font-size:9px}.server-line span:not(.line-name){text-align:center}
.period-title{height:46px;display:flex;align-items:center;justify-content:center;gap:7px;margin:0;color:#17191b;font-size:13px;font-weight:800;text-transform:uppercase}.period-title span{color:#777;font-size:11px}
.side-ad{width:200px;height:648px;border-radius:6px}.advertise-card{width:200px;padding:14px}.advertise-card span{font-size:8px}.advertise-card strong{font-size:10px}.advertise-card a{padding:9px;font-size:8px}
.site-footer{font-size:9px}
@media(max-width:900px){.page-width,.site-shell{width:min(calc(100% - 16px),760px)}.content-layout{grid-template-columns:1fr}.ranking-list{gap:18px}.server-line{grid-template-columns:27px minmax(0,1fr) 48px 68px 50px}}
@media(max-width:600px){.page-width,.site-shell{width:100%}.navbar{height:56px;padding-inline:12px}.content-layout{padding:16px 12px 24px}.page-heading h1{font-size:23px}.page-heading p{font-size:11px}.server-group h2{height:36px;font-size:13px}.server-line,.server-line.featured{grid-template-columns:25px minmax(0,1fr) 43px 64px 48px;min-height:34px;font-size:10px}.line-name{font-size:10px}.line-rate,.line-version,.line-date{font-size:8px}.period-title{height:42px;font-size:12px}}
@media(max-width:370px){.server-line,.server-line.featured{grid-template-columns:24px minmax(0,1fr) 42px 58px}.server-line .line-date{display:none}}
/* TopServers reference colors and readable scale */
body{color:#101214;background:#fff;font-family:Inter,Arial,sans-serif;font-size:14px}
.background-ad,.top-advertising{display:none!important}
.page-width,.site-shell{width:min(100%,1122px);margin-inline:auto}
.site-shell{box-shadow:none}
.site-header{border-right:1px solid #dde2e7;border-left:1px solid #dde2e7}
.navbar{height:59px;padding:0 22px;border-bottom:1px solid #e7ebef}
.brand-mark{width:27px;height:27px;color:#fff;background:#35a7f2;clip-path:polygon(50% 0,100% 25%,82% 82%,50% 100%,18% 82%,0 25%);font:800 12px/1 Inter,Arial,sans-serif}
.brand-copy strong{color:#1c232a;font:800 18px/1 Inter,Arial,sans-serif}.brand-copy small{display:none}
.main-nav a{padding-inline:14px;color:#090b0d;font-size:12px;font-weight:700}.main-nav a.active:after{display:none}
.header-actions{color:#111;font-size:11px}.add-server{color:#fff;background:#ff4c2f;border-radius:3px}
.category-nav{height:37px;padding:0 22px;background:#fff}.category-toggle{height:37px;color:#24282c;font-size:12px;font-weight:600}.header-search input{height:28px;color:#1d2328;background-color:#fff;border:0;font-size:11px;font-weight:600}
.content-layout{grid-template-columns:minmax(0,1fr) 200px;gap:22px;padding:14px 22px 30px;border-right:1px solid #dde2e7;border-left:1px solid #dde2e7}
.breadcrumbs{margin:7px 0 19px;color:#66789a;font-size:11px}.breadcrumbs strong{color:#1f2a36}
.page-heading{padding-bottom:17px}.game-label{display:none}.page-heading h1{color:#050607;font:800 25px/1.22 Inter,Arial,sans-serif}.page-heading p{max-width:780px;margin-top:7px;color:#5e6f92;font-size:13px;line-height:1.35}
.chronicle-tabs{gap:12px;padding-bottom:14px;border:0}.chronicle-tab{height:32px;padding:0 13px;color:#53658b;background:#fff;border:0;border-radius:8px;font-size:11px;font-weight:600}.chronicle-tab:hover,.chronicle-tab.active{color:#315cff;background:#eef3ff;border:0}.chronicle-tab small{color:inherit;font-size:9px}
.ranking-subnav{min-height:34px;border-bottom:0}.rate-filter{display:none}.ranking-subnav>span{color:#91999f;font-size:10px}
.ranking-board{border-top:0}.ranking-list{gap:20px;padding-top:0}.server-group h2{height:48px;justify-content:center;color:#07090b;font-size:18px;font-weight:800}.server-group h2 span{color:#ffad00;font-size:15px}
.server-group:nth-child(2) h2 span{color:#ff4c42}
.server-line{grid-template-columns:36px minmax(0,1fr) 50px 72px 59px;min-height:30px;padding:0 6px;color:#111;background:#fff;border:0;border-bottom:1px solid #e7ebef;border-radius:0;font-size:12px}
.server-line:hover{background:#f7f9fb}.line-rank{color:#a4a8ac;font-size:11px}.line-name{color:#5a6f98;font-size:13px;font-weight:500;letter-spacing:.02em}.line-rate,.line-version,.line-date{color:#090b0d;font-size:11px}
.server-line.diamond{min-height:30px;color:#fff;background:linear-gradient(90deg,#ff3111,#ff8a08);border-bottom:2px solid #fff;border-radius:6px;font-weight:700}.server-line.diamond:hover{background:linear-gradient(90deg,#ee270b,#f87900)}.server-line.diamond .line-rank,.server-line.diamond .line-name,.server-line.diamond .line-rate,.server-line.diamond .line-version,.server-line.diamond .line-date{color:#fff;font-weight:700}.server-line.diamond .line-rank{font-size:17px}
.server-line.vip .line-rank{width:34px;padding:5px 3px;color:#fff;background:#ff9700;border-radius:6px;font-size:12px;font-weight:800;text-align:center}.server-line.vip .line-name{color:#ff8400;font-weight:700}
.period-title{height:54px;justify-content:center;color:#080a0c;font-size:16px;font-weight:800;letter-spacing:.02em}.period-title span{color:#85898d;font-size:13px}
.group-empty{padding:32px 12px;color:#7c858c;background:#fafbfc;border:1px solid #e8ecef;font-size:11px}
.side-ad{width:200px;height:650px;border-radius:6px}.advertise-card{width:200px}
.site-footer{font-size:10px}
@media(max-width:900px){.page-width,.site-shell{width:100%}.content-layout{grid-template-columns:1fr}.server-line{grid-template-columns:36px minmax(0,1fr) 50px 72px 59px}}
@media(max-width:600px){.navbar{padding-inline:13px}.content-layout{padding:13px}.page-heading h1{font-size:22px}.page-heading p{font-size:12px}.chronicle-tabs{overflow-x:auto}.server-group h2{height:44px;font-size:16px}.server-line{grid-template-columns:34px minmax(0,1fr) 46px 65px 55px;min-height:34px}.line-name{font-size:12px}.line-rate,.line-version,.line-date{font-size:10px}.period-title{height:48px;font-size:14px}}
@media(max-width:370px){.server-line{grid-template-columns:33px minmax(0,1fr) 45px 58px}.server-line .line-date{display:none}}
/* MMORPG background skin */
body{
  min-height:100vh;
  background-color:#050b14;
  background-image:url('../images/background3.jpg');
  background-position:center top;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
.site-shell{
  margin-top:190px;
  margin-bottom:0;
  background:#fff;
}
@media(max-width:1400px){
  body{background-size:auto 1000px}
  .site-shell{margin-top:150px}
}
@media(max-width:900px){
  body{background-size:auto 760px;background-attachment:scroll}
  .site-shell{margin-top:90px}
}
@media(max-width:600px){
  body{background-image:none;background-color:#fff}
  .site-shell{margin-top:0}
}
/* Functional header filters */
.category-nav{overflow:visible;position:relative;z-index:30}
.nav-dropdown{position:relative;height:37px;margin-right:23px}
.nav-dropdown .category-toggle{margin-right:0;padding-right:4px}
.nav-dropdown.open .category-toggle{color:#246da5}
.nav-dropdown.open .category-toggle span{display:inline-block;transform:rotate(180deg)}
.dropdown-menu{position:absolute;top:36px;left:0;z-index:50;width:190px;display:none;padding:7px;background:#fff;border:1px solid #dfe4e8;box-shadow:0 10px 24px rgba(20,31,40,.16)}
.nav-dropdown.open .dropdown-menu{display:grid}
.dropdown-menu button{width:100%;min-height:34px;padding:0 10px;color:#37434d;background:#fff;border:0;border-radius:0;cursor:pointer;text-align:left;font-size:11px;font-weight:600}
.dropdown-menu button:hover{color:#176da8;background:#f0f7fc}
.dropdown-menu button.active{color:#176da8;background:#e8f3fb}
.dropdown-menu.rate-dropdown{grid-template-columns:1fr 1fr;gap:3px;width:210px}
.dropdown-menu .rate-chip{display:block;margin:0;border:0}
@media(max-width:600px){
  .nav-dropdown{height:35px;margin:0}
  .dropdown-menu{top:34px;width:min(190px,calc(100vw - 24px))}
  .nav-dropdown:nth-child(2) .dropdown-menu{left:50%;transform:translateX(-50%)}
  .nav-dropdown:nth-child(3) .dropdown-menu{right:0;left:auto}
}
/* Server website favicons */
.line-rank{display:grid;place-items:center}
.line-rank img{width:18px;height:18px;display:block;object-fit:contain;border-radius:3px;background:#fff}
.line-rank b{width:18px;height:18px;display:grid;place-items:center;color:#6d7680;background:#edf1f4;border:1px solid #dce2e6;border-radius:3px;font-size:9px;font-weight:800}
.server-line.diamond .line-rank,.server-line.vip .line-rank{width:auto;padding:0;background:transparent;border-radius:0}
.server-line.diamond .line-rank img,.server-line.vip .line-rank img{box-shadow:0 0 0 1px rgba(255,255,255,.55)}
.server-line.diamond .line-rank b,.server-line.vip .line-rank b{color:#8c3b12;background:#fff3e9;border-color:#ffd3bb}
/* Semantic section icons */
.server-group h2 .group-icon{width:18px;height:18px;display:inline-grid;place-items:center;color:#f2a900}
.server-group:nth-child(2) h2 .group-icon{color:#35a663}
.group-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Desktop hover dropdowns */
.menu-title{display:block;padding:8px 12px 6px;color:#97a1b4;font-size:11px;font-weight:500}
.dropdown-menu>div{display:grid}
.dropdown-menu .menu-option{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:32px;padding:0 12px;color:#242a31;background:#fff;border:0;font-size:13px;font-weight:700}
.dropdown-menu .menu-option:hover,.dropdown-menu .menu-option.active{color:#315cff;background:#f2f6ff}
.menu-option b{color:#8491ac;font-size:11px;font-weight:500}
.tall-menu{width:270px}
.tall-menu>div{max-height:320px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d8dde2 #f4f5f6}
.rate-dropdown{width:160px!important}
.rate-dropdown>div{display:grid;grid-template-columns:1fr}
.criteria-dropdown{width:170px}
@media(hover:hover) and (pointer:fine){
  .nav-dropdown:hover>.dropdown-menu{display:grid}
  .nav-dropdown:hover>.category-toggle{color:#315cff}
  .nav-dropdown:hover>.category-toggle span{display:inline-block;transform:rotate(180deg)}
}
@media(max-width:600px){
  .tall-menu{width:min(270px,calc(100vw - 24px))}
  .rate-dropdown,.criteria-dropdown{width:min(190px,calc(100vw - 24px))!important}
}
/* Restored Diamond and VIP badges */
.line-rank{display:grid;place-items:center;color:#a4a8ac;font-weight:800}
.diamond-icon{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.server-line.diamond .line-rank{width:auto;padding:0;color:#fff;background:transparent}
.server-line.vip .line-rank{width:34px;padding:5px 3px;color:#fff;background:#ff9700;border-radius:6px;font-size:12px;font-weight:800}
/* Dropdowns de filtro: lista unica, legivel e sem chips duplicados */
.ranking-note{color:#74808b;font-size:11px}.dropdown-menu{top:37px;width:238px;padding:8px 0 9px;border:1px solid #dce2e7;border-radius:0 0 4px 4px;box-shadow:0 12px 28px rgba(18,30,42,.18)}.dropdown-menu.rate-dropdown{display:none;grid-template-columns:1fr;width:210px}.nav-dropdown.open .dropdown-menu.rate-dropdown{display:grid}.dropdown-menu .menu-title{padding:4px 14px 7px;color:#8994a0;font-size:10px;font-weight:600}.dropdown-menu>div{max-height:310px;overflow:auto;padding:0 5px}.dropdown-menu .menu-option{min-height:36px;padding:0 10px;border-left:2px solid transparent;font-size:12px}.dropdown-menu .menu-option span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown-menu .menu-option b{min-width:20px;color:#8793a3;text-align:right;font-size:10px;font-weight:500}.dropdown-menu .menu-option:hover{color:#202832;background:#f4f6f8;border-left-color:#a8b5bf}.dropdown-menu .menu-option.active{color:#176da8;background:#eaf3f9;border-left-color:#176da8}.rate-dropdown .menu-option span{text-transform:lowercase}.rate-dropdown .menu-option span:first-letter{text-transform:lowercase}@media(max-width:600px){.dropdown-menu{position:fixed;top:94px;right:12px!important;left:12px!important;width:auto!important;transform:none!important}.dropdown-menu>div{max-height:55vh}.ranking-note{display:none}}
.brand-logo{display:block;width:31px;height:31px;flex:0 0 31px;object-fit:contain;border-radius:50%}

.server-line.blue-vip{color:#235b84;background:#eaf3f9}.server-line.blue-vip .line-rank{color:#fff;background:#3a7eaa;border-radius:3px;font-size:9px;font-weight:800}

/* Alinhamento consistente dos níveis VIP */
.server-line{grid-template-columns:40px minmax(0,1fr) 50px 72px 59px;column-gap:4px;padding:0 7px}.line-rank{width:34px;height:24px;justify-self:center;padding:0;border-radius:4px}.server-line.diamond .line-rank,.server-line.vip .line-rank,.server-line.blue-vip .line-rank{width:34px;height:24px;padding:0;border-radius:4px}.server-line.diamond .line-rank{background:rgba(255,255,255,.12)}.server-line.vip .line-rank{color:#fff;background:#ff9700;font-size:11px}.server-line.blue-vip .line-rank{color:#fff;background:#3a7eaa;font-size:10px}.server-line:not(.diamond):not(.vip):not(.blue-vip) .line-rank{color:#a4a8ac;background:transparent}.server-line .line-name{padding-left:1px}.diamond-icon{width:18px;height:18px}@media(max-width:600px){.server-line,.server-line.featured{grid-template-columns:38px minmax(0,1fr) 44px 62px 51px;column-gap:2px;padding-inline:5px}.line-rank,.server-line.diamond .line-rank,.server-line.vip .line-rank,.server-line.blue-vip .line-rank{width:32px}}
/* Hierarquia visual e comercial dos planos VIP */
.server-line.diamond{color:#fff;background:linear-gradient(90deg,#ed2f18 0%,#ff6419 62%,#ff8612 100%);border-bottom:2px solid #fff;border-radius:5px;box-shadow:inset 3px 0 0 #b8190b}.server-line.diamond:hover{background:linear-gradient(90deg,#d92512,#f25713 62%,#f27b08)}.server-line.vip{color:#4d3300;background:linear-gradient(90deg,#ffb000 0%,#ffc83d 62%,#ffdc73 100%);border-bottom:2px solid #fff;border-radius:5px;box-shadow:inset 3px 0 0 #d58900}.server-line.vip:hover{background:linear-gradient(90deg,#f2a300,#f5bd27 62%,#f8d25e)}.server-line.blue-vip{color:#fff;background:linear-gradient(90deg,#256a9a 0%,#3b85b5 62%,#67a8cf 100%);border-bottom:2px solid #fff;border-radius:5px;box-shadow:inset 3px 0 0 #174b70}.server-line.blue-vip:hover{background:linear-gradient(90deg,#1e5d89,#3579a7 62%,#5799c1)}.server-line.diamond .line-name,.server-line.diamond .line-rate,.server-line.diamond .line-version,.server-line.diamond .line-date,.server-line.blue-vip .line-name,.server-line.blue-vip .line-rate,.server-line.blue-vip .line-version,.server-line.blue-vip .line-date{color:#fff;font-weight:700}.server-line.vip .line-name,.server-line.vip .line-rate,.server-line.vip .line-version,.server-line.vip .line-date{color:#4d3300;font-weight:700}.server-line.vip .line-rank{color:#5f3d00;background:#ffe7a1;border:1px solid rgba(126,79,0,.18)}.server-line.blue-vip .line-rank{color:#1e587f;background:#e4f3fc;border:1px solid rgba(17,69,104,.18)}
/* Inventário publicitário: exibe somente campanhas ativas */
.top-advertising.has-ads{position:absolute;top:35px;left:50%;z-index:6;width:min(100%,1122px);min-height:110px;display:flex!important;align-items:center;justify-content:center;gap:14px;transform:translateX(-50%);pointer-events:none}.top-advertising.has-ads .top-ad{width:468px;height:100px;flex:0 0 468px;pointer-events:auto}.side-column{justify-items:center}.side-ad{width:160px;height:600px;border-radius:4px}.fixed-banner-layer{position:fixed;inset:0;z-index:2;pointer-events:none}.fixed-skin-ad{position:absolute;top:190px;width:428px;height:1000px;padding:0;overflow:hidden;background:#0b1d31;border:0;cursor:pointer;pointer-events:auto}.fixed-skin-ad img{display:block;width:100%;height:100%;object-fit:cover}.fixed-skin-left{right:calc(50% + 581px)}.fixed-skin-right{left:calc(50% + 581px)}.site-shell{position:relative;z-index:3}@media(max-width:1760px){.fixed-banner-layer{display:none}}@media(max-width:1000px){.top-advertising.has-ads{top:18px;min-height:100px}.top-advertising.has-ads .top-ad{width:min(468px,calc(100vw - 24px));height:auto;aspect-ratio:468/100}.top-advertising.has-ads .top-ad:nth-child(2){display:none}}@media(max-width:900px){.top-advertising.has-ads{display:none!important}}
/* Inventário livre: banners padrão visíveis no ranking */
.default-ad{position:relative;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:7px;overflow:hidden;color:#d7e8f8!important;background:#0d2032!important;border:1px solid #527b9a!important;box-shadow:inset 0 0 0 4px #122b40,inset 0 0 0 5px rgba(160,205,235,.24),0 5px 18px rgba(0,0,0,.18);text-align:center;text-decoration:none;transition:border-color .18s ease,background-color .18s ease}.default-ad:before{content:"";position:absolute;inset:18% 12%;z-index:0;background:url("../images/topservers-logo.png") center/contain no-repeat;opacity:.11;filter:grayscale(1)}.default-ad:after{content:"";position:absolute;inset:9px;z-index:0;border:1px solid rgba(151,198,230,.18);pointer-events:none}.default-ad>*{position:relative;z-index:1}.default-ad:hover{background:#112a40!important;border-color:#8dc8ed!important}.default-ad span{padding:4px 7px;color:#081727;background:#7bc7ff;border-radius:2px;font-size:9px;font-weight:900;letter-spacing:.08em}.default-ad strong{color:#fff;font-size:22px;font-weight:800}.default-ad b{color:#68bdf8;font-size:15px}.default-ad small{color:#9fb6ca;font-size:10px}.top-ad.default-ad{gap:3px}.top-ad.default-ad span{padding:2px 5px;font-size:7px}.top-ad.default-ad strong{font-size:17px}.top-ad.default-ad b{font-size:11px}.top-ad.default-ad small{font-size:8px}.available-slot-note{width:160px;padding:10px;border:1px dashed #81a9c6;color:#385b75;background:#edf6fc;text-align:center}.available-slot-note span,.available-slot-note strong{display:block}.available-slot-note span{font-size:9px;font-weight:700}.available-slot-note strong{margin-top:3px;font-size:11px}/* Chevron estável dos filtros */.category-toggle{display:inline-flex;align-items:center;gap:7px}.category-toggle .nav-chevron{width:6px;height:6px;display:block!important;flex:0 0 6px;margin:0;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;color:#8b969f;transform:rotate(45deg);transform-origin:50% 50%;transition:transform .14s ease,color .14s ease}.nav-dropdown.open .category-toggle .nav-chevron,.nav-dropdown:hover>.category-toggle .nav-chevron{color:currentColor;transform:rotate(225deg)}
/* VIP badges: texto consistente em todos os niveis */
.server-line.diamond .line-rank{color:#d92b18!important;background:#fff!important;border:1px solid rgba(180,35,20,.18)!important;font-size:10px!important;font-weight:800!important;letter-spacing:.02em}
.server-line.vip .line-rank,.server-line.blue-vip .line-rank{font-weight:800;letter-spacing:.02em}

/* Paleta VIP final: Red > Yellow > Blue */
.server-line.diamond{background:linear-gradient(90deg,#f02b18 0%,#ff5714 52%,#ff8a08 100%)!important;box-shadow:inset 4px 0 0 #c7190d!important}
.server-line.diamond:hover{background:linear-gradient(90deg,#df2414 0%,#ef4b10 52%,#f47b05 100%)!important}
.server-line.diamond .line-rank{color:#fff!important;background:#d92716!important;border:1px solid rgba(255,255,255,.28)!important;font-size:10px!important;font-weight:900!important}
.server-line.vip{background:linear-gradient(90deg,#ffb000 0%,#ffc62c 58%,#ffdf72 100%)!important;box-shadow:inset 4px 0 0 #d78d00!important}
.server-line.vip .line-rank{color:#4b3300!important;background:#ffe7a0!important;border:1px solid rgba(120,78,0,.18)!important}
.server-line.blue-vip{background:linear-gradient(90deg,#176f9e 0%,#1593bd 55%,#4fc0e0 100%)!important;box-shadow:inset 4px 0 0 #0e5278!important}
.server-line.blue-vip .line-rank{color:#155b82!important;background:#e4f4fb!important;border:1px solid rgba(14,82,120,.18)!important}

/* Banner lateral interno padrao do site: 160 x 600 */
.side-column .side-ad{
  width:160px !important;
  height:600px !important;
  flex:0 0 160px;
}
.side-column .side-ad img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.side-column .available-slot-note,
.side-column .advertise-card{
  width:160px;
}

/* SEO category navigation */
.seo-category-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:10px;border:1px solid rgba(120,145,175,.22);border-radius:10px;background:rgba(255,255,255,.025)}
.seo-category-nav a{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:7px 13px;border-radius:7px;color:var(--text-muted,#aeb9c8);font-size:13px;font-weight:700;text-decoration:none;border:1px solid rgba(120,145,175,.18)}
.seo-category-nav a:hover,.seo-category-nav a.active{background:#246b9f;color:#fff;border-color:#246b9f}
@media(max-width:700px){.seo-category-nav{gap:6px}.seo-category-nav a{flex:1 1 calc(50% - 6px)}}

/* Tag <a> semântica para os servidores do ranking */
a.server-line{
  display:grid !important;
  text-decoration:none !important;
  color:inherit !important;
  box-sizing:border-box !important;
}

/* Seção de Guia SEO e Perguntas Frequentes sobre Lineage 2 */
.seo-guide-section{
  margin:28px 0 12px;
  padding:22px 24px;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:10px;
  color:#334155;
  font-size:13px;
  line-height:1.6;
}
.seo-guide-section h2{
  font-size:17px;
  font-weight:800;
  color:#0f172a;
  margin:24px 0 10px;
  display:flex;
  align-items:center;
  gap:8px;
}
.seo-guide-section h2:first-of-type{margin-top:0}
.seo-guide-section p{margin:0 0 14px;color:#475569}
.seo-chronicles-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;
  margin:14px 0 20px;
}
.seo-chronicle-card{
  padding:14px 16px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:8px;
  transition:border-color .15s ease;
}
.seo-chronicle-card:hover{
  border-color:#2563eb;
}
.seo-chronicle-card h3{
  margin:0 0 6px;
  font-size:14px;
  font-weight:700;
  color:#1e293b;
}
.seo-chronicle-card h3 a{
  color:#2563eb;
  text-decoration:none;
}
.seo-chronicle-card h3 a:hover{text-decoration:underline}
.seo-chronicle-card p{margin:0;font-size:12px;color:#64748b;line-height:1.5}
.seo-faq-list{
  display:flex;
  flex-direction:column;
  gap:9px;
  margin:14px 0 0;
}
.seo-faq-item{
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:8px;
  overflow:hidden;
}
.seo-faq-item summary{
  padding:12px 16px;
  font-weight:700;
  font-size:13px;
  color:#1e293b;
  cursor:pointer;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.seo-faq-item summary::-webkit-details-marker{display:none}
.seo-faq-item summary:after{
  content:"+";
  font-size:16px;
  font-weight:800;
  color:#2563eb;
  margin-left:10px;
}
.seo-faq-item[open] summary:after{content:"−"}
.seo-faq-item p{
  margin:0;
  padding:0 16px 14px;
  font-size:12.5px;
  color:#475569;
  line-height:1.6;
}
.seo-faq-item p a{color:#2563eb;font-weight:600;text-decoration:none}
.seo-faq-item p a:hover{text-decoration:underline}