/* Owner's compact reference: reuse Phase 1 artwork, components and listing data. */
.header-inner,.hero-inner,.page-wrap { width:min(1440px,calc(100% - 64px)); }
.site-header { height:82px; background:linear-gradient(115deg,#0c1018,#06090e); }
.header-inner { gap:24px; }
.brand-word { color:#eccb83; text-shadow:0 2px 0 #66431d,0 0 16px #c28a2520; }
.brand-dot { display:none; }
.brand img { width:52px; height:52px; }
.main-nav { gap:9px; flex:1; justify-content:flex-end; font-size:10px; }
.main-nav>a:not(.button) { flex-direction:column; justify-content:center; gap:7px; height:60px; padding:8px 12px; border:1px solid transparent; border-radius:7px; }
.main-nav>a>.icon { width:19px; height:19px; color:#848da1; }
.main-nav>a.nav-active { background:linear-gradient(#b8812024,#9266190a); border-color:#8d632a; box-shadow:inset 0 1px #eec56924,0 0 15px #d7971b12; }
.main-nav>a.nav-active>.icon,.main-nav>a:hover>.icon { color:#f2b83e; }
.main-nav>a.nav-active::after,.nav-divider { display:none; }
.main-nav .login-button { margin-left:auto; gap:9px; min-height:38px; }
@media(min-width:901px) {
  .main-nav>a:first-child { margin-left:auto; }
}
.login-button>.icon:last-child { transform:rotate(90deg); width:11px; }
.hero { height:110px; border-bottom:1px solid #70522d66; }
.hero-art { background:linear-gradient(90deg,#05080deb 0%,#080b13bf 34%,#090b131a 68%,#05080d66),url('art/hero-banner.webp') center 44%/cover no-repeat; }
.hero-inner { height:100%; display:flex; flex-direction:column; justify-content:center; padding:0 32px; }
.hero .hero-title { font:600 clamp(19px,1.8vw,27px)/1.4 var(--font); text-transform:uppercase; letter-spacing:.3px; margin:0; }
.hero .hero-title>span { color:#efbd60; }
.hero-subtitle { font-size:11px; margin:7px 0 0; color:#d0d3db; letter-spacing:0; }
.hero-subtitle i { margin:0 4px; color:#e3b556; }
.hero-motto { position:absolute; right:25px; top:50%; transform:translateY(-50%) rotate(-6deg); color:#f3cb71; font:italic 23px/1.2 Georgia,serif; text-align:right; text-shadow:0 2px 6px #000; margin:0; }
.banner-section { padding:12px 0 16px; }
.banner-heading { margin-bottom:7px; }
.banner-heading .eyebrow,.sponsored-label { font-size:7px; letter-spacing:1.2px; }
/* Match the game row edges and distribute complete banners across the viewport. */
@media(min-width:901px) {
  .banner-frame { grid-template-columns:minmax(0,1fr); }
  .banner-window { grid-column:1; container-type:inline-size; }
  .ads-track { gap:12px!important; }
  /* Distribute complete 270px banners across the row without a clipped sliver. */
  @container(min-width:552px) { .ads-track { gap:calc(100cqw - 540px)!important; } }
  @container(min-width:834px) { .ads-track { gap:calc((100cqw - 810px)/2)!important; } }
  @container(min-width:1116px) { .ads-track { gap:calc((100cqw - 1080px)/3)!important; } }
  @container(min-width:1398px) { .ads-track { gap:calc((100cqw - 1350px)/4)!important; } }
}
.games-section { margin-bottom:20px; }
/* Keep a semantic section heading without spending a second row on navigation. */
.games-section>.section-heading { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.game-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; padding:12px; border:1px solid #28313e; border-radius:12px; background:linear-gradient(#10151e99,#080c13); overflow:visible; }
.game-card { height:235px; border-radius:7px; background:#0a101a; border-color:#344051; }
.game-card>img { position:absolute; inset:0; width:100%; height:100%; object-position:center 28%; }
.game-card::after { background:linear-gradient(0deg,#060a10 0%,#060a10eb 23%,#060a1033 70%); box-shadow:inset 0 0 15px #0005; }
.game-card-content { inset:auto 10px 16px; justify-content:flex-end; align-items:center; text-align:center; gap:0; }
.game-title,.game-warcraft .game-title { font:700 15px/1.5 var(--font); white-space:normal; }
.game-count { display:inline-flex; justify-content:center; gap:8px; padding:3px 7px; margin:7px 0 0; border:1px solid #303b49; border-radius:5px; background:#101824d9; color:#c0cadb; font-size:9px; line-height:1.5; }
.game-count .icon { display:block; width:11px; height:11px; }
.game-genre { display:block; font-size:7px; letter-spacing:1px; margin-bottom:3px; }
.game-status { display:flex; }
.game-card .category-game-symbol { display:inline-flex; position:static; width:34px; height:34px; margin:4px 0 5px; border:1px solid #9b7a3b88; background:#0a101ad9; box-shadow:inset 0 0 9px #0008; }
.game-card:hover { transform:translateY(-2px); }
.game-card[aria-pressed=true]::before { left:20%; right:20%; height:2px; }
.game-card[aria-pressed=true] { border-color:#f8cd75; box-shadow:inset 0 0 16px #edb54324,0 0 13px #edb54348; }
.game-all>img { opacity:1; object-position:57% center; }
.game-all::after { background:linear-gradient(0deg,#100d08 1%,#181007d9 28%,#090b1233 85%); }
.game-all .category-game-symbol { transform:none; }
.game-all .category-game-symbol>.icon { width:24px; height:24px; color:#f5e9cd; fill:none; stroke-width:1.5; }
.discovery-grid { grid-template-columns:minmax(0,1fr) 360px; gap:20px; margin-bottom:28px; }
.discovery-main { display:flex; flex-direction:column; gap:14px; min-width:0; }
.upcoming-section,.featured-opened-section,.ranking-section { margin:0; padding:13px 11px 9px; border-radius:8px; }
.featured-opened-section { border-color:#51422c; }
.discovery-grid .dashboard-heading { min-height:38px; margin:0 0 10px; gap:10px; }
.discovery-grid .dashboard-heading h2 { font:600 15px/1.4 var(--font); letter-spacing:.1px; }
.discovery-grid .dashboard-heading h2>.icon { display:inline-block; width:18px; height:18px; margin-right:5px; color:#eaba53; vertical-align:-3px; }
.discovery-grid .dashboard-heading p { font-size:9px; text-transform:none; margin:3px 0 0 28px; letter-spacing:0; }
.calendar-button { min-height:31px; padding:7px 10px; border-radius:6px; font-size:8px; gap:6px; }
.featured-shortcut { margin-bottom:8px; padding:5px 8px; font-size:9px; }
.featured-shortcut>span { font-size:8px; }
.launch-table-wrap { border-color:#29313d; border-radius:6px; }
.launch-table th { height:25px; font-size:8px; padding:5px 7px; }
.launch-table th:first-child { width:26px; padding-left:9px; }
.launch-table th:nth-child(2),.featured-opened-section .launch-table th:nth-child(2) { width:30%; }
.launch-table th:nth-child(3) { width:14%; }
.launch-table th:nth-child(4) { width:13%; }
.launch-table th:nth-child(5) { width:19%; }
.launch-table th:last-child { width:124px; padding-right:8px; }
.launch-table td { height:51px; padding:7px; }
.launch-table .position { padding-left:9px!important; font-size:12px!important; }
.server-identity { gap:7px; }
.server-identity>.realm-symbol { width:26px; height:28px; }
.server-name { font-size:10px; letter-spacing:0; line-height:1.4; }
.game-chip { gap:4px; font-size:9px; }
.game-chip .game-symbol { width:19px; height:21px; }
.rate-cell strong { font-size:10px; }
.rate-cell>span { font-size:9px; margin-top:2px; }
.launch-cell .countdown { font-size:10px; margin-bottom:3px; }
.launch-cell time { font-size:9px; }
.server-actions { gap:5px; }
.server-social-link { width:26px; height:27px; border-radius:4px; }
.server-social-link .icon { width:13px; height:13px; }
.view-button { width:49px; height:27px; font-size:9px; border-radius:4px; }
.upcoming-panel .panel-footer { min-height:25px; padding:7px 1px 0; font-size:8px; }
.data-note { margin-top:6px; font-size:8px; line-height:1.5; }
.premium-legend { gap:5px; font-size:8px; justify-content:flex-end; }
.premium-legend>.badge { font-size:8px; padding:2px 4px; }
.premium-legend>#featuredCount { margin-left:0; }
.featured-opened-section .launch-table td { height:43px; padding-block:5px; }
.featured-opened-section .server-identity>.realm-symbol { width:23px; height:25px; }
.open-status { font-size:8px; gap:4px; margin-bottom:2px; }
.featured-footnote { font-size:8px; margin-top:8px; }
.featured-footnote .text-button { font-size:9px; }
.ranking-section { background:linear-gradient(130deg,#0e1521,#070c14); }
.discovery-grid .ranking-section .dashboard-heading { padding:0 1px 10px; min-height:38px; margin-bottom:7px; }
.discovery-grid .ranking-section h2 { font-size:14px; }
.ranking-list { display:block; }
.ranking-list li { min-height:47px; padding:8px 3px; gap:8px; }
.rank-number { width:23px; min-width:23px; font-size:14px; }
.ranking-symbol { width:23px; height:26px; }
.rank-server>a { font-size:10px; }
.vote-count { min-width:51px; height:27px; font-size:10px; padding:4px 6px; }
.ranking-footer { min-height:33px; font-size:9px; }

@media(max-width:1320px) {
  .main-nav { gap:3px; }
  .main-nav>a:not(.button) { padding-inline:8px; font-size:9px; }
  .brand-subtitle { font-size:6px; letter-spacing:.4px; }
  .brand-word { font-size:28px; }
  .brand { gap:7px; }
  .main-nav .login-button { padding-inline:12px; }
  .discovery-grid { grid-template-columns:minmax(0,1fr) 310px; gap:14px; }
  .discovery-grid .dashboard-heading h2 { font-size:13px; }
  .server-name { font-size:9px; }
  .server-identity { gap:5px; }
  .server-identity>.realm-symbol { width:22px; height:25px; }
  .game-chip { font-size:8px; }
  .game-chip .game-symbol { width:15px; height:18px; }
  .launch-table th:nth-child(3) { width:12%; }
  .launch-table th:last-child { width:114px; }
  .server-social-link { width:23px; }
  .view-button { width:43px; }
  .game-grid { gap:9px; }
  .game-title,.game-warcraft .game-title { font-size:13px; }
  .game-count { font-size:8px; }
}
@media(max-width:1100px) {
  .discovery-grid { grid-template-columns:minmax(0,1fr); }
  .ranking-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:24px; }
  .game-grid { grid-template-columns:repeat(6,minmax(180px,1fr)); overflow-x:auto; padding:12px; margin:0; scrollbar-width:thin; }
  .game-title,.game-warcraft .game-title { font-size:14px; }
  .game-count { font-size:9px; }
  .hero-motto { font-size:20px; }
  .hero-inner { padding-inline:12px; }
  .discovery-grid .dashboard-heading h2 { font-size:15px; }
  .server-name { font-size:11px; }
  .game-chip { font-size:9px; }
  .main-nav>a:not(.button) { padding-inline:6px; font-size:8px; }
  .header-inner { gap:12px; }
  .brand-subtitle { display:none; }
  .brand-word { font-size:25px; }
}
@media(max-width:900px) {
  .header-inner,.hero-inner,.page-wrap { width:calc(100% - 40px); }
  .site-header { height:74px; }
  .main-nav { top:74px; }
  .main-nav>a:not(.button) { padding:12px 7px; font-size:11px; height:66px; }
  .main-nav .login-button { margin:4px 0 0; }
  .brand-subtitle { display:block; font-size:6px; }
  .hero .hero-title { max-width:75%; font-size:21px; }
  .hero-subtitle { font-size:9px; max-width:75%; line-height:1.8; }
  .hero-motto { right:0; font-size:19px; }
}
@media(max-width:700px) {
  .header-inner,.hero-inner,.page-wrap { width:calc(100% - 28px); }
  .site-header { height:70px; }
  .main-nav { top:70px; }
  .brand img { width:42px; height:42px; }
  .hero { height:124px; }
  .hero-inner { padding:0 8px; }
  .hero .hero-title { font-size:19px; max-width:100%; }
  .hero .hero-title>span { display:block; }
  .hero-subtitle { max-width:100%; margin-top:6px; font-size:9px; }
  .hero-motto { display:none; }
  .hero-art { background:linear-gradient(90deg,#05080de8,#080b1399),url('art/hero-banner.webp') 62% 44%/cover no-repeat; }
  .banner-section { padding-top:10px; }
  .games-section { margin-bottom:17px; }
  .game-grid { grid-template-columns:repeat(6,180px); }
  .upcoming-section,.featured-opened-section,.ranking-section { padding:12px 10px 9px; }
  .discovery-main { gap:14px; }
  .discovery-grid .dashboard-heading h2 { font-size:14px; }
  .discovery-grid .dashboard-heading p { margin-left:0; font-size:9px; line-height:1.5; }
  .discovery-grid .dashboard-heading { flex-wrap:wrap; gap:9px; }
  .calendar-button { min-height:36px; }
  .featured-shortcut { font-size:9px; gap:5px; }
  .featured-shortcut>span { display:none; }
  .featured-opened-section .dashboard-heading { flex-direction:row; }
  .premium-legend { justify-content:flex-start; }
  .launch-table tbody tr { padding:12px 9px; grid-template-columns:16px minmax(0,1fr) 48px; }
  .launch-table td,.featured-opened-section .launch-table td { height:auto; padding:0; }
  .launch-table .server-name-cell { padding-bottom:5px; }
  .listing-row .server-identity .server-name { font-size:11px; }
  .server-identity { gap:7px; }
  .launch-table .launch-cell { padding-top:3px; }
  .launch-table .view-cell { padding-top:7px; }
  .server-social-link { width:32px; height:32px; }
  .server-actions { gap:7px; }
  .view-button { width:57px; height:32px; }
  .open-status { font-size:9px; margin:0; }
  .featured-footnote { line-height:1.7; gap:8px; }
  .ranking-list { display:block; }
  .ranking-list li { min-height:48px; }
  .discovery-grid .ranking-section h2 { font-size:14px; }
  .rank-server>a { font-size:10px; }
}