/* MUOGG bundle (includes/ui/bootstrap.php asset_bundle), do not edit: fonts.css, style.css, dashboard.css, compact.css, discovery.css, pages.css, site.css */
/* ---- fonts.css ---- */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/font-1.woff2) format('woff2'), url(fonts/font-1.ttf) format('truetype');
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/font-2.woff2) format('woff2'), url(fonts/font-2.ttf) format('truetype');
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/font-3.woff2) format('woff2'), url(fonts/font-3.ttf) format('truetype');
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/font-4.woff2) format('woff2'), url(fonts/font-4.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/font-5.woff2) format('woff2'), url(fonts/font-5.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/font-6.woff2) format('woff2'), url(fonts/font-6.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/font-7.woff2) format('woff2'), url(fonts/font-7.ttf) format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/font-8.woff2) format('woff2'), url(fonts/font-8.ttf) format('truetype');
}

/* ---- style.css ---- */
:root {
  --bg:#07090f;
  --panel:#10141f;
  --panel-2:#171c29;
  --gold:#e5aa3d;
  --gold-light:#ffca63;
  --text:#f2f2f5;
  --muted:#9da4b5;
  --line:#252936;
  --gold-line:#49391f;
  --radius:7px;
  --font:'Inter',Arial,sans-serif;
  --display:'Cinzel',Georgia,serif
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:100px
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:13px/1.6 var(--font);
  -webkit-font-smoothing:antialiased
}

body::before {
  content:'';
  position:absolute;
  inset:400px 0 auto;
  height:1200px;
  background:radial-gradient(ellipse at 50% 0,#7550260c,transparent 65%);
  pointer-events:none
}

a {
  color:inherit;
  text-decoration:none
}

button,select {
  font:inherit
}

button,a,select {
  -webkit-tap-highlight-color:transparent
}

button {
  cursor:pointer
}

button:disabled {
  cursor:default
}

button {
  color:inherit
}

button,select {
  border-radius:4px
}

img {
  max-width:100%;
  display:block
}

button:focus-visible,a:focus-visible,select:focus-visible {
  outline:2px solid var(--gold-light);
  outline-offset:4px
}

button {
  border:0
}

h1,h2,h3,p {
  margin:0
}

button .icon,a .icon {
  flex-shrink:0
}

.icon {
  width:18px;
  height:18px;
  display:inline-block;
  vertical-align:middle;
  flex-shrink:0;
  /* Drawing style for the icon sprite (icon() in includes/ui/bootstrap.php), 2026-11-11 */
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round
}

.page-wrap {
  width:min(1440px,calc(100% - 88px));
  margin-inline:auto;
  position:relative
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

.skip-link {
  position:fixed;
  top:-100px;
  left:20px;
  padding:12px 20px;
  background:var(--gold);
  color:#111;
  z-index:100
}

.skip-link:focus {
  top:10px
}

[hidden] {
  display:none!important
}

.muted {
  color:var(--muted)
}

.small {
  font-size:11px
}

.eyebrow {
  font-size:10px;
  font-weight:600;
  letter-spacing:2px;
  color:var(--gold)
}

.site-header {
  height:88px;
  border-bottom:1px solid #ffffff0c;
  background:#080b12;
  position:relative;
  z-index:20
}

.header-inner {
  width:min(1530px,calc(100% - 64px));
  height:100%;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}

.brand {
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0
}

.brand img {
  object-fit:contain
}

.brand-word {
  display:block;
  font-family:var(--display);
  font-size:30px;
  font-weight:800;
  letter-spacing:2px;
  line-height:1.15;
  color:#f4ede0
}

.brand-dot {
  color:var(--gold)
}

.brand-subtitle {
  display:block;
  font-size:7px;
  letter-spacing:.85px;
  color:#a6a5a6;
  margin-top:5px
}

.main-nav {
  display:flex;
  align-items:center;
  gap:24px;
  height:100%;
  font-size:11px;
  font-weight:500
}

.main-nav>a:not(.button) {
  display:flex;
  align-items:center;
  height:100%;
  position:relative;
  color:#acafba;
  white-space:nowrap;
  transition:color .2s
}

.main-nav>a:hover,.main-nav>a.nav-active {
  color:var(--gold-light)
}

.main-nav>a.nav-active::after {
  content:'';
  position:absolute;
  height:2px;
  background:var(--gold);
  bottom:0;
  left:0;
  right:0;
  box-shadow:0 -3px 16px #e5aa3d40
}

.nav-divider {
  height:20px;
  width:1px;
  background:#ffffff13
}

.main-nav .register-link {
  color:#e0d3b9!important
}

.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  min-height:44px;
  padding:12px 22px;
  text-transform:uppercase;
  letter-spacing:.8px;
  font-size:10px;
  line-height:1.5;
  font-weight:700;
  border:1px solid transparent;
  border-radius:4px;
  transition:background .2s,border-color .2s,transform .2s;
  white-space:nowrap
}

.button-gold {
  color:#201606;
  background:linear-gradient(110deg,#f6c466,#d99d35);
  border-color:#f6c870;
  box-shadow:inset 0 1px #ffffff30,0 4px 22px #dc9f2720
}

.button-gold:hover {
  background:linear-gradient(110deg,#ffda90,#e5aa3d);
  transform:translateY(-1px)
}

.button-outline {
  border-color:#9d794a65;
  background:#1011168c;
  color:#d8c39e
}

.button-outline:hover {
  background:#32281e;
  border-color:#b08950
}

.login-button {
  min-height:35px;
  padding:8px 18px;
  gap:12px
}

.login-button .icon {
  width:14px;
  height:14px
}

.menu-toggle {
  display:none
}

.hero {
  height:425px;
  position:relative;
  overflow:hidden;
  background:#101215
}

.hero-art {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#080b11e8 0%,#090c129c 35%,#0a0c1230 62%,#090b1330),linear-gradient(0deg,#07090f 0%,transparent 35%),url('art/hero.webp') center 44%/cover no-repeat
}

.hero::after {
  content:'';
  position:absolute;
  inset:0;
  box-shadow:inset 0 30px 60px #06080d20,inset 0 -30px 60px #06080d80;
  pointer-events:none
}

.hero-inner {
  width:min(1440px,calc(100% - 88px));
  margin:auto;
  position:relative;
  z-index:2;
  padding-top:64px
}

.hero-eyebrow {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:10px;
  letter-spacing:3px
}

.hero-eyebrow>span {
  height:1px;
  width:28px;
  background:var(--gold)
}

h1 {
  font:600 clamp(27px,2.55vw,39px)/1.38 var(--display);
  text-transform:uppercase;
  letter-spacing:.4px;
  margin-top:19px;
  text-shadow:0 2px 20px #000b
}

h1>span {
  color:#f0bd60
}

.hero-subtitle {
  font-size:11px;
  color:#c1bcb5;
  letter-spacing:.2px;
  margin-top:17px
}

.hero-subtitle i {
  font-style:normal;
  color:#a77c3d;
  margin-inline:8px
}

.hero-actions {
  display:flex;
  gap:13px;
  margin-top:25px
}

.hero-actions .icon {
  width:16px
}

.hero-meta {
  display:flex;
  gap:25px;
  margin-top:30px;
  color:#a7a3a0;
  font-size:10px
}

.hero-meta>span {
  display:flex;
  align-items:center;
  gap:7px
}

.hero-meta .icon {
  color:#b28c50;
  width:14px;
  height:14px
}

.hero-bottom {
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:min(1440px,94%);
  display:flex;
  align-items:center;
  gap:14px;
  z-index:3;
  color:#aa7b36;
  font-size:13px
}

.hero-bottom span {
  height:1px;
  background:linear-gradient(90deg,transparent,#806031);
  flex:1
}

.hero-bottom span:last-child {
  transform:rotate(180deg)
}

.banner-section {
  padding:24px 0 30px
}

.banner-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px
}

.banner-heading .eyebrow {
  font-size:9px;
  color:#988568;
  letter-spacing:1.6px
}

.sponsored-label {
  font-size:8px;
  color:#626573;
  letter-spacing:1.5px
}

.banner-frame {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:8px;
  align-items:center
}

.banner-window {
  grid-column:1;
  grid-row:1;
  min-width:0;
  overflow:hidden;
  padding-block:1px
}

.ads-track {
  display:flex;
  gap:18px!important;
  position:relative
}

.ad {
  display:block;
  flex:0 0 270px;
  width:270px;
  height:100px;
  overflow:hidden;
  outline:1px solid #72604470;
  outline-offset:-1px;
  border-radius:4px;
  background:#0c0e15;
  transition:outline-color .2s
}

.ad img {
  width:270px;
  height:100px;
  max-width:none;
  object-fit:contain
}

/* An animated banner stored as video (CASE-063): the same box as the picture, no gap under it. */
.ad video {
  display:block;
  width:270px;
  height:100px;
  max-width:none;
  object-fit:contain;
  background:#0c0e15
}

.ad:hover {
  outline-color:var(--gold-light)
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:18px
}

.section-heading h2 {
  font:600 17px/1.5 var(--display);
  text-transform:uppercase;
  letter-spacing:.35px;
  color:#e8e6e4;
  display:flex;
  align-items:center;
  gap:9px
}

.section-heading h2>.icon {
  color:#b28c4e;
  width:19px;
  height:19px
}

.section-heading p {
  font-size:11px;
  color:var(--muted);
  margin-top:4px
}

.section-note {
  font-size:8px;
  letter-spacing:1.7px;
  color:#6c6d77
}

.games-section {
  scroll-margin-top:25px;
  margin-bottom:36px
}

.game-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:15px
}

.game-card {
  min-width:0;
  height:210px;
  padding:0;
  position:relative;
  overflow:hidden;
  text-align:left;
  border:1px solid #63513b70;
  border-radius:5px;
  background:#12141e;
  box-shadow:0 10px 30px #0003;
  transition:border-color .2s,transform .2s,box-shadow .2s
}

.game-card img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 28%;
  transition:transform .5s
}

.game-card::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,#080a10 1%,#080a10d9 15%,#090b1210 77%);
  box-shadow:inset 0 0 35px #0003;
  pointer-events:none
}

.game-card:hover,.game-card[aria-pressed=true] {
  border-color:var(--gold);
  box-shadow:0 0 18px #c3831624;
  transform:translateY(-3px)
}

.game-card:hover img {
  transform:scale(1.04)
}

.game-card[aria-pressed=true]::before {
  content:'';
  position:absolute;
  bottom:0;
  left:20%;
  right:20%;
  height:2px;
  background:var(--gold);
  z-index:3;
  box-shadow:0 0 16px var(--gold)
}

.game-card-content {
  position:absolute;
  bottom:14px;
  left:17px;
  right:15px;
  z-index:2;
  display:flex;
  flex-direction:column
}

.game-genre {
  color:#c1a678;
  font-size:7px;
  letter-spacing:1.8px;
  margin-bottom:3px
}

.game-title {
  font:600 clamp(14px,1.45vw,21px)/1.6 var(--display);
  color:#f6efe3;
  text-shadow:0 2px 8px #000;
  white-space:nowrap
}

.game-count {
  font-size:9px;
  color:#a0a2ad;
  margin-top:4px;
  display:flex;
  align-items:center;
  justify-content:space-between
}

.game-count .icon {
  height:13px;
  width:13px;
  color:#bf9a5c
}

.game-status {
  position:absolute;
  top:11px;
  left:12px;
  display:flex;
  align-items:center;
  gap:5px;
  z-index:3;
  font-size:7px;
  font-weight:600;
  letter-spacing:1px;
  background:#0b1214bd;
  padding:3px 7px;
  border:1px solid #719d673e;
  border-radius:3px;
  color:#c1d7ac
}

.live-dot {
  display:inline-block;
  width:5px;
  height:5px;
  background:#94b46e;
  border-radius:50%;
  box-shadow:0 0 5px #8fba7040;
  flex-shrink:0
}

.coming-status {
  border-color:#cead7945;
  color:#ddc8a0;
  background:#0e101bd1
}

.game-warcraft .game-title {
  font-size:clamp(12px,1.16vw,18px)
}

.discovery-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) 337px;
  gap:26px;
  scroll-margin-top:30px;
  margin-bottom:34px
}

.discovery-grid>.upcoming-section,.discovery-grid>.ranking-section {
  min-width:0
}

.discovery-grid .section-heading h2 {
  font-size:15px
}

.discovery-grid .section-heading p {
  font-size:10px
}

.discovery-grid .section-heading {
  min-height:51px;
  align-items:flex-start;
  margin-bottom:14px
}

.panel {
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(125deg,#121620,#0e111a);
  overflow:hidden;
  box-shadow:0 4px 18px #0002
}

.game-tabs {
  padding:14px 15px 0;
  border-bottom:1px solid #ffffff0b;
  display:flex;
  gap:4px;
  overflow-x:auto;
  scrollbar-width:thin
}

.game-tab {
  font-size:9px;
  white-space:nowrap;
  color:#979baa;
  padding:9px 11px 12px;
  background:none;
  border-radius:3px 3px 0 0;
  border-bottom:2px solid transparent
}

.game-tab.active {
  background:linear-gradient(0deg,#d1a35112,transparent);
  color:#e9b65f;
  border-bottom-color:#dfaa4a
}

.game-tab:hover {
  color:#e9b65f
}

.launch-table {
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  text-align:left
}

.launch-table th {
  color:#6f7789;
  font-size:8px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.5px;
  height:39px;
  border-bottom:1px solid #2529368a;
  padding:9px 10px
}

.launch-table th:first-child {
  width:40px;
  padding-left:18px
}

.launch-table th:nth-child(2) {
  width:38%
}

.launch-table th:nth-child(3) {
  width:13%
}

.launch-table th:nth-child(4) {
  width:14%
}

.launch-table th:nth-child(5) {
  width:23%
}

.launch-table th:last-child {
  width:43px
}

.launch-table td {
  height:74px;
  border-bottom:1px solid #2529368a;
  padding:12px 10px;
  font-size:10px
}

.launch-table tbody tr:last-child td {
  border-bottom:0
}

.launch-table tbody tr:hover {
  background:#e8b15406
}

.position {
  font-size:10px!important;
  color:#a68a5d;
  padding-left:18px!important
}

.server-name-cell {
  position:relative
}

.server-name-content {
  display:inline-block;
  vertical-align:middle;
  width:calc(100% - 42px)
}

.server-name {
  color:#ece5d9;
  font-size:10px;
  font-weight:600;
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.server-name:hover {
  color:var(--gold-light)
}

.server-secondary {
  display:block;
  font-size:8px;
  color:#747d8f;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  margin-top:3px
}

.server-emblem {
  display:inline-flex;
  vertical-align:middle;
  width:29px;
  height:33px;
  border-radius:3px;
  align-items:center;
  justify-content:center;
  margin-right:9px;
  background:radial-gradient(ellipse at top,#c6924855,#291e21);
  border:1px solid #ac854d52;
  color:#d1ad70
}

.server-emblem .icon {
  width:17px;
  height:17px
}

.emblem-1 {
  background:radial-gradient(ellipse at top,#5a94a655,#13202f);
  color:#86b9cc;
  border-color:#456b89
}

.emblem-2 {
  background:radial-gradient(ellipse at top,#a54c5255,#2c181f);
  color:#d48e85;
  border-color:#7b424a
}

.game-label {
  background:#d9a94d0c;
  border:1px solid #90704230;
  padding:3px 6px;
  border-radius:3px;
  font-size:8px;
  color:#baa17a;
  white-space:nowrap
}

.rate-cell strong {
  display:block;
  font-size:10px;
  color:#d3c5aa;
  font-weight:500
}

.rate-cell>span {
  font-size:8px;
  color:#81899b
}

.launch-cell time {
  display:block;
  font-size:9px;
  color:#cbd0d8
}

.countdown {
  display:block;
  font-size:8px;
  color:#c69c56;
  margin-top:4px;
  font-variant-numeric:tabular-nums
}

.view-button {
  border:1px solid #4a3d2980;
  background:#9e6d2110;
  border-radius:3px;
  display:grid;
  place-items:center;
  width:25px;
  height:26px;
  color:#d7ac60
}

.view-button:hover {
  background:#c68c3c25
}

.view-button .icon {
  height:12px;
  width:12px
}

.badge {
  display:inline-block;
  font:700 7px/1.6 var(--font);
  padding:1px 5px;
  border-radius:2px;
  letter-spacing:.6px;
  vertical-align:middle
}

.badge.vip {
  color:#24190a;
  background:linear-gradient(120deg,#ffdd88,#c28d36);
  border:1px solid #e5bd65
}

.badge.hot {
  color:#f8cdc7;
  background:linear-gradient(120deg,#aa3635,#651c29);
  border:1px solid #c0554e
}

.badge.plus {
  color:#8fcbff;
  background:transparent;
  border:1px solid #4b8fe6
}

.panel-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:49px;
  padding:12px 18px;
  border-top:1px solid #252936;
  font-size:9px;
  color:#8c94a2
}

.panel-footer>span {
  display:flex;
  align-items:center;
  gap:7px
}

.text-button {
  padding:0;
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:none;
  color:#cfaa69;
  font-size:9px
}

.text-button:hover {
  color:#ffcc75
}

.text-button .icon {
  width:13px;
  height:13px
}

.data-note {
  font-size:8px;
  color:#626b7c;
  margin:10px 1px 0
}

.empty-state {
  text-align:center;
  padding:59px 22px;
  min-height:290px
}

.empty-state>.icon {
  color:#887149;
  width:35px;
  height:35px;
  margin-bottom:16px
}

.empty-state h3 {
  font-family:var(--display);
  font-size:16px;
  color:#d7c39d
}

.empty-state p {
  color:#8f97a7;
  font-size:11px;
  max-width:380px;
  margin:10px auto 20px
}

.empty-state.compact {
  min-height:542px;
  padding-top:160px
}

.empty-state.compact h3 {
  font-size:14px
}

.ranking-filter {
  min-height:56px;
  padding:12px 15px;
  border-bottom:1px solid #252936;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px
}

.ranking-filter>span {
  display:flex;
  align-items:center;
  gap:5px;
  font-size:7px;
  letter-spacing:.5px;
  color:#a79571;
  white-space:nowrap
}

.ranking-filter .icon {
  height:13px;
  width:13px
}

.ranking-filter select {
  width:112px;
  max-width:50%;
  font-size:8px;
  color:#adadba;
  background:#181c27;
  border:1px solid #33343b;
  padding:6px 5px;
  cursor:pointer
}

.ranking-list {
  list-style:none;
  margin:0;
  padding:3px 14px
}

.ranking-list li {
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 1px;
  border-bottom:1px solid #25293685;
  min-height:49px
}

.ranking-list li:last-child {
  border-bottom:none
}

.rank-number {
  font-size:10px;
  color:#586274;
  min-width:20px;
  font-weight:600
}

.rank-1 {
  color:#e9b95e
}

.rank-2 {
  color:#b7bdc8
}

.rank-3 {
  color:#b58c69
}

.rank-server {
  display:flex;
  flex-direction:column;
  flex:1;
  min-width:0
}

.rank-server>a {
  font-size:10px;
  font-weight:500;
  color:#d5d7df;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.rank-server>a:hover {
  color:#eac17c
}

.rank-server>span {
  font-size:7px;
  color:#626f85;
  margin-top:1px
}

.vote-count {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  padding:5px 8px;
  background:#1b1f2a;
  border:1px solid #333440;
  border-radius:4px;
  min-width:57px;
  font-size:9px;
  color:#ddc99f
}

.vote-count .icon {
  width:11px;
  height:11px;
  color:#d2a150
}

.vote-count:hover {
  border-color:#a38346;
  background:#262419
}

.ranking-footer {
  min-height:48px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  border-top:1px solid #252936;
  font-size:9px;
  color:#c2a575
}

.ranking-footer .icon {
  width:13px;
  height:13px
}

.latest-section {
  margin-bottom:34px
}

.latest-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px
}

.latest-header {
  display:flex;
  align-items:center;
  gap:8px;
  padding:14px 12px;
  border-bottom:1px solid #292d36;
  min-height:53px
}

.latest-header h3 {
  font:600 12px var(--display);
  color:#ddd7cb;
  white-space:nowrap
}

.latest-header .live-dot {
  margin-left:auto
}

.mini-game-mark {
  width:24px;
  height:25px;
  display:grid;
  place-items:center;
  border:1px solid #735a3050;
  border-radius:3px;
  background:linear-gradient(120deg,#8e603c30,#201719);
  font:700 9px var(--display);
  color:#d9b574;
  flex-shrink:0
}

.mini-game-mark.lineage {
  color:#a4cbda;
  background:#25364655;
  border-color:#465767
}

.mini-game-mark.metin {
  color:#d99c8e;
  background:#47212255;
  border-color:#623c35
}

.mini-game-mark.warcraft {
  color:#bad19d;
  background:#273c2355;
  border-color:#4c5a36
}

.mini-game-mark.silkroad {
  color:#dfbb7d;
  background:#60482535
}

.latest-list {
  list-style:none;
  margin:0;
  padding:0 13px;
  min-height:218px
}

.latest-list li {
  border-bottom:1px solid #2529368a
}

.latest-list li:last-child {
  border:0
}

.latest-list a {
  display:block;
  padding:10px 0
}

.latest-list a:hover .latest-server-name {
  color:#e9bd73
}

.latest-server-name {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:3px;
  font-size:9px;
  font-weight:500;
  color:#cdd1dc;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.latest-list a>span:last-child {
  font-size:7px;
  display:flex;
  justify-content:space-between;
  color:#788397;
  margin-top:3px
}

.latest-list time {
  color:#9d9c99;
  white-space:nowrap
}

.latest-footer {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border-top:1px solid #282d38;
  background:#ffffff01;
  min-height:40px;
  padding:8px 5px;
  font-size:8px;
  color:#b69b6e
}

.latest-footer:hover {
  background:#c4a56908;
  color:#f4c678
}

.latest-footer .icon {
  width:11px;
  height:11px
}

.latest-empty {
  min-height:218px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:radial-gradient(ellipse at 50% 30%,#987e3d08,transparent 65%)
}

.empty-symbol>.icon {
  width:34px;
  height:34px;
  color:#675a4544;
  margin-bottom:8px
}

.soon-pill {
  font-size:7px;
  color:#9c8966;
  letter-spacing:1px;
  border:1px solid #4c40304d;
  background:#a88c4506;
  border-radius:3px;
  padding:3px 7px
}

.latest-empty p {
  font-size:10px;
  line-height:1.7;
  color:#697284;
  text-align:center;
  margin-top:10px
}

.advertise-panel {
  margin:0 0 42px;
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  gap:28px;
  padding:32px 38px;
  border:1px solid #80623370;
  border-radius:6px;
  background:linear-gradient(105deg,#2b211288,#131722),url('art/hero.webp') 50% 60%/cover;
  overflow:hidden
}

.advertise-panel::before {
  position:absolute;
  inset:0;
  content:'';
  background:linear-gradient(90deg,#111217e6,#15151cdd 75%,#1b1617e8);
  z-index:-1
}

.advertise-sigil {
  width:72px;
  height:80px;
  border:1px solid #b3914d3b;
  display:grid;
  place-items:center;
  transform:rotate(0deg);
  background:radial-gradient(ellipse,#a77d3929,transparent 80%);
  border-radius:6px;
  flex-shrink:0
}

.advertise-sigil>.icon {
  width:42px;
  height:42px;
  color:#c5a35f
}

.advertise-copy {
  flex:1
}

.advertise-copy>.eyebrow {
  font-size:8px
}

.advertise-copy h2 {
  font:600 24px/1.6 var(--display);
  text-transform:uppercase;
  letter-spacing:.5px;
  color:#f0d5a0;
  margin-top:4px
}

.advertise-copy p {
  font-size:11px;
  color:#aaa59d;
  margin-top:3px
}

.advertise-copy ul {
  list-style:none;
  padding:0;
  margin:14px 0 0;
  display:flex;
  gap:17px;
  flex-wrap:wrap
}

.advertise-copy li {
  display:flex;
  align-items:center;
  gap:5px;
  font-size:8px;
  color:#bbb4a6
}

.advertise-copy li .icon {
  width:11px;
  height:11px;
  color:#caa45f
}

.advertise-panel>.button {
  min-height:44px
}

.site-footer {
  position:relative;
  background:#080a10;
  border-top:1px solid #1d202a;
  padding:28px 0 15px
}

.footer-main {
  display:flex;
  align-items:center;
  gap:50px;
  padding-bottom:24px
}

.footer-main .brand-word {
  font-size:23px
}

.footer-main .brand-subtitle {
  font-size:6px
}

.footer-main>p {
  font-size:9px;
  color:#707785;
  line-height:1.8
}

.footer-main nav {
  display:flex;
  gap:24px;
  font-size:9px;
  color:#8d929e;
  margin-left:auto
}

.footer-main nav a:hover {
  color:#e3b56e
}

.footer-bottom {
  border-top:1px solid #1c202a;
  padding-top:16px;
  display:flex;
  justify-content:space-between;
  gap:15px;
  align-items:center;
  font-size:8px;
  color:#5f6676
}

.preview-label {
  display:flex;
  align-items:center;
  gap:6px;
  letter-spacing:.9px;
  color:#988367;
  font-size:7px
}

.preview-label>span {
  height:4px;
  width:4px;
  background:#b19053;
  border-radius:50%
}

.preview-note {
  text-align:center;
  font-size:8px;
  color:#505868;
  margin-top:13px
}

dialog {
  padding:36px;
  max-width:min(640px,calc(100% - 32px));
  color:var(--text);
  border:1px solid #907044;
  background:#10141f;
  border-radius:8px;
  box-shadow:0 25px 100px #000a
}

dialog::backdrop {
  background:#04060bd9;
  backdrop-filter:blur(5px)
}

dialog h2 {
  font:500 25px/1.4 var(--display);
  margin:12px 0 16px;
  color:#ead4a7
}

dialog p {
  font-size:12px;
  color:#9da4b5
}

.dialog-close {
  position:absolute;
  top:8px;
  right:12px;
  background:none;
  color:#b7a17a;
  font-size:26px
}

.calendar-list {
  padding:0;
  list-style:none;
  margin:23px 0
}

.calendar-list li {
  padding:11px 0;
  border-bottom:1px solid #252936;
  display:flex;
  flex-direction:column;
  gap:5px;
  font-size:12px
}

.calendar-list time {
  font-size:10px;
  color:#c4a05e
}

@media(min-width:1600px) {
  .hero-inner {
    padding-top:63px
  }
  .game-card {
    height:225px
  }
  .hero {
    height:440px
  }
}

@media(max-width:1320px) {
  .main-nav {
    gap:17px;
    font-size:10px
  }
  .header-inner {
    width:calc(100% - 44px);
    gap:15px
  }
  .brand-word {
    font-size:27px
  }
  .brand-subtitle {
    font-size:6px
  }
  .brand {
    gap:8px
  }
  .brand img {
    width:36px;
    height:36px
  }
  .page-wrap,.hero-inner {
    width:calc(100% - 60px)
  }
  .discovery-grid {
    grid-template-columns:minmax(0,1fr) 300px;
    gap:20px
  }
  .game-card {
    height:190px
  }
  .game-card-content {
    left:13px;
    right:12px
  }
  .game-grid {
    gap:12px
  }
  .ranking-filter>span {
    font-size:6px
  }
  .ranking-filter select {
    width:103px
  }
  .section-heading h2 {
    font-size:16px
  }
  .discovery-grid .section-heading h2 {
    font-size:13px
  }
  .launch-table th:nth-child(2) {
    width:34%
  }
  .launch-table th:nth-child(3) {
    width:14%
  }
  .launch-table th:nth-child(5) {
    width:25%
  }
  .launch-table th,.launch-table td {
    padding-inline:7px
  }
  .game-tab {
    font-size:8px;
    padding-inline:8px
  }
  .latest-header {
    padding-inline:10px;
    gap:6px
  }
  .latest-header h3 {
    font-size:10px
  }
  .advertise-copy ul {
    gap:10px
  }
  .advertise-panel {
    gap:22px;
    padding:28px
  }
  .advertise-copy li {
    font-size:7px
  }
}

@media(max-width:1100px) {
  .site-header {
    height:78px
  }
  .main-nav {
    gap:13px;
    font-size:9px
  }
  .header-inner {
    width:calc(100% - 36px)
  }
  .brand-subtitle {
    max-width:135px;
    font-size:6px;
    line-height:1.6
  }
  .brand-word {
    font-size:24px
  }
  .brand img {
    height:32px;
    width:32px
  }
  .login-button {
    padding:7px 12px;
    min-height:32px
  }
  .nav-divider {
    display:none
  }
  .hero {
    height:400px
  }
  .hero-inner {
    padding-top:57px
  }
  h1 {
    font-size:32px
  }
  .hero-subtitle {
    font-size:10px
  }
  .game-card {
    height:177px
  }
  .game-title {
    font-size:16px
  }
  .game-warcraft .game-title {
    font-size:12px
  }
  .game-count {
    font-size:8px
  }
  .game-genre {
    font-size:6px
  }
  .discovery-grid {
    grid-template-columns:minmax(0,1fr) 280px;
    gap:17px
  }
  .discovery-grid .section-heading h2 {
    font-size:12px;
    gap:6px
  }
  .section-heading h2>.icon {
    width:16px
  }
  .launch-table th:nth-child(3),.launch-table td:nth-child(3) {
    display:none
  }
  .launch-table th:nth-child(2) {
    width:44%
  }
  .launch-table th:nth-child(4) {
    width:19%
  }
  .launch-table th:nth-child(5) {
    width:27%
  }
  .launch-table th:first-child {
    width:30px;
    padding-left:10px
  }
  .launch-table .position {
    padding-left:10px!important
  }
  .launch-table th:last-child {
    width:34px
  }
  .server-name {
    font-size:9px
  }
  .server-emblem {
    width:24px;
    height:29px;
    margin-right:6px
  }
  .server-name-content {
    width:calc(100% - 33px)
  }
  .latest-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .latest-header h3 {
    font-size:13px
  }
  .latest-server-name {
    font-size:10px
  }
  .latest-list a>span:last-child {
    font-size:8px
  }
  .latest-footer {
    font-size:9px
  }
  .advertise-sigil {
    display:none
  }
  .advertise-copy h2 {
    font-size:22px
  }
  .advertise-copy ul {
    gap:12px
  }
  .advertise-copy li {
    font-size:8px
  }
  .hero-art {
    background-position:center 44%
  }
}

@media(max-width:900px) {
  .header-inner {
    width:calc(100% - 40px)
  }
  .brand-subtitle {
    max-width:none;
    font-size:7px
  }
  .brand img {
    width:38px;
    height:38px
  }
  .brand-word {
    font-size:27px
  }
  .menu-toggle {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    width:40px;
    height:38px;
    background:#e5aa3d08;
    border:1px solid #6b542e70
  }
  .menu-toggle span {
    display:block;
    width:18px;
    height:1px;
    background:#e0b15c;
    transition:transform .2s
  }
  .menu-toggle[aria-expanded=true] span:first-child {
    transform:translateY(6px) rotate(45deg)
  }
  .menu-toggle[aria-expanded=true] span:nth-child(2) {
    opacity:0
  }
  .menu-toggle[aria-expanded=true] span:last-child {
    transform:translateY(-6px) rotate(-45deg)
  }
  .main-nav {
    display:none;
    position:absolute;
    top:77px;
    left:0;
    right:0;
    height:auto;
    padding:16px 20px 20px;
    background:#0c101a;
    border-bottom:1px solid #695130;
    box-shadow:0 20px 30px #0008;
    z-index:30;
    grid-template-columns:repeat(3,1fr);
    gap:7px;
    font-size:12px
  }
  .main-nav.is-open {
    display:grid
  }
  .main-nav>a:not(.button) {
    height:auto;
    padding:10px
  }
  .main-nav>a.nav-active::after {
    display:none
  }
  .main-nav .button {
    margin-top:4px
  }
  .page-wrap,.hero-inner {
    width:calc(100% - 40px)
  }
  .hero {
    height:390px
  }
  .hero-inner {
    padding-top:52px
  }
  .hero-art {
    background-image:linear-gradient(90deg,#080b11eb 0%,#090c12ad 50%,#090b1340),linear-gradient(0deg,#07090f 0%,transparent 45%),url('art/hero.webp');
    background-position:61% 50%
  }
  .hero-meta {
    gap:18px;
    font-size:9px
  }
  .game-grid {
    grid-template-columns:repeat(5,170px);
    overflow-x:auto;
    padding:3px 1px 10px;
    scroll-snap-type:x proximity;
    scrollbar-width:thin;
    scrollbar-color:#655030 #14151c
  }
  .game-card {
    height:183px;
    scroll-snap-align:start
  }
  .game-title {
    font-size:17px
  }
  .game-warcraft .game-title {
    font-size:12px
  }
  .game-genre {
    font-size:6px
  }
  .section-note {
    display:none
  }
  .discovery-grid {
    grid-template-columns:minmax(0,1fr) 267px;
    gap:16px
  }
  .discovery-grid .section-heading h2 {
    font-size:11px;
    letter-spacing:0
  }
  .discovery-grid .section-heading h2>.icon {
    display:none
  }
  .discovery-grid .section-heading p {
    font-size:9px
  }
  .launch-table .server-emblem {
    display:none
  }
  .server-name-content {
    width:100%
  }
  .launch-table th:nth-child(2) {
    width:43%
  }
  .launch-table th:nth-child(4) {
    width:18%
  }
  .launch-table th:nth-child(5) {
    width:29%
  }
  .launch-table td {
    padding-block:10px;
    height:74px
  }
  .launch-table th {
    font-size:7px;
    padding-inline:5px
  }
  .launch-table td {
    padding-inline:5px
  }
  .position {
    font-size:9px!important
  }
  .launch-cell time {
    font-size:8px
  }
  .countdown {
    font-size:7px
  }
  .panel-footer {
    font-size:8px;
    padding-inline:10px
  }
  .panel-footer .text-button {
    font-size:8px
  }
  .game-tabs {
    padding-inline:8px
  }
  .game-tab {
    padding-inline:8px;
    font-size:8px
  }
  .ranking-list li {
    gap:7px
  }
  .ranking-list {
    padding-inline:11px
  }
  .ranking-filter {
    padding-inline:11px
  }
  .ranking-filter>span {
    font-size:6px
  }
  .rank-server>a {
    font-size:9px
  }
  .vote-count {
    padding-inline:6px;
    min-width:52px
  }
  .advertise-panel {
    gap:18px
  }
  .advertise-copy h2 {
    font-size:21px
  }
  .advertise-copy p {
    font-size:10px
  }
  .advertise-panel>.button {
    font-size:9px;
    padding-inline:16px
  }
  .footer-main {
    gap:28px
  }
  .footer-main nav {
    gap:16px
  }
  .footer-main>.brand .brand-subtitle {
    font-size:6px
  }
}

@media(max-width:700px) {
  .page-wrap,.hero-inner {
    width:calc(100% - 32px)
  }
  .site-header {
    height:72px
  }
  .main-nav {
    top:71px
  }
  .header-inner {
    width:calc(100% - 32px)
  }
  .brand-subtitle {
    font-size:6px
  }
  .brand-word {
    font-size:25px
  }
  .hero {
    height:395px
  }
  .hero-inner {
    padding-top:46px
  }
  .hero-eyebrow {
    font-size:8px;
    letter-spacing:2px
  }
  h1 {
    font-size:clamp(23px,4.8vw,33px);
    margin-top:17px;
    line-height:1.5;
    max-width:540px
  }
  .hero-subtitle {
    font-size:10px;
    max-width:350px;
    line-height:1.9;
    margin-top:13px
  }
  .hero-subtitle i {
    margin-inline:5px
  }
  .hero-actions {
    gap:9px;
    margin-top:23px
  }
  .hero-actions .button {
    font-size:8px;
    padding:11px 13px;
    gap:7px;
    min-height:41px
  }
  .hero-actions .icon {
    width:14px;
    height:14px
  }
  .hero-meta {
    font-size:8px;
    gap:15px;
    margin-top:26px
  }
  .hero-meta>span:last-child {
    display:none
  }
  .banner-section {
    padding:20px 0 25px
  }
  .ad {
    flex-basis:270px
  }
  .games-section {
    margin-bottom:29px
  }
  .section-heading {
    gap:10px;
    margin-bottom:15px
  }
  .section-heading h2 {
    font-size:15px
  }
  .section-heading p {
    font-size:10px
  }
  .game-grid {
    grid-template-columns:repeat(5,164px);
    gap:11px
  }
  .game-card {
    height:181px
  }
  .discovery-grid {
    grid-template-columns:minmax(0,1fr);
    gap:29px
  }
  .discovery-grid .section-heading h2 {
    font-size:15px
  }
  .discovery-grid .section-heading h2>.icon {
    display:inline-block
  }
  .discovery-grid .section-heading p {
    font-size:10px
  }
  .discovery-grid .section-heading {
    min-height:auto;
    margin-bottom:14px
  }
  .launch-table th:nth-child(3),.launch-table td:nth-child(3) {
    display:table-cell
  }
  .launch-table th:nth-child(2) {
    width:35%
  }
  .launch-table th:nth-child(3) {
    width:13%
  }
  .launch-table th:nth-child(4) {
    width:15%
  }
  .launch-table th:nth-child(5) {
    width:24%
  }
  .launch-table th {
    font-size:7px
  }
  .launch-table td {
    height:70px
  }
  .server-name {
    font-size:10px
  }
  .server-secondary {
    font-size:8px
  }
  .rate-cell strong {
    font-size:10px
  }
  .rate-cell>span {
    font-size:8px
  }
  .launch-cell time {
    font-size:9px
  }
  .countdown {
    font-size:8px
  }
  .game-label {
    font-size:7px;
    padding-inline:4px
  }
  .panel-footer {
    font-size:9px;
    padding:12px 13px
  }
  .panel-footer .text-button {
    font-size:9px
  }
  .game-tabs {
    padding-inline:10px
  }
  .game-tab {
    font-size:9px;
    padding-inline:10px
  }
  .data-note {
    font-size:8px
  }
  .ranking-filter {
    padding-inline:16px
  }
  .ranking-filter>span {
    font-size:8px
  }
  .ranking-filter select {
    font-size:10px;
    width:134px
  }
  .ranking-list {
    padding-inline:17px
  }
  .ranking-list li {
    gap:12px;
    padding-block:9px;
    min-height:53px
  }
  .rank-number {
    font-size:12px;
    min-width:23px
  }
  .rank-server>a {
    font-size:11px
  }
  .rank-server>span {
    font-size:8px
  }
  .vote-count {
    font-size:10px;
    padding:6px 10px;
    min-width:64px
  }
  .vote-count .icon {
    width:12px;
    height:12px
  }
  .ranking-footer {
    font-size:10px
  }
  .empty-state.compact {
    min-height:300px;
    padding-top:80px
  }
  .latest-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px
  }
  .latest-header h3 {
    font-size:12px
  }
  .latest-grid>.latest-panel:last-child {
    grid-column:1/-1
  }
  .latest-grid>.latest-panel:last-child .latest-empty {
    min-height:170px
  }
  .desktop-link {
    font-size:8px;
    white-space:nowrap
  }
  .latest-section {
    margin-bottom:27px
  }
  .advertise-panel {
    flex-direction:column;
    align-items:flex-start;
    gap:22px;
    padding:27px 23px;
    margin-bottom:29px
  }
  .advertise-copy h2 {
    font-size:23px
  }
  .advertise-copy p {
    font-size:11px;
    line-height:1.8;
    max-width:350px
  }
  .advertise-copy ul {
    gap:10px 17px
  }
  .advertise-copy li {
    font-size:9px
  }
  .advertise-panel>.button {
    font-size:10px;
    padding-inline:22px
  }
  .footer-main {
    flex-wrap:wrap;
    gap:20px
  }
  .footer-main>p {
    margin-left:auto;
    font-size:8px
  }
  .footer-main nav {
    width:100%;
    margin-left:0;
    justify-content:space-between;
    max-width:350px;
    font-size:10px
  }
  .footer-bottom {
    flex-wrap:wrap;
    gap:12px;
    font-size:8px
  }
  .footer-bottom>span:last-child {
    display:none
  }
  .preview-note {
    font-size:8px;
    text-align:left;
    margin-top:15px;
    line-height:1.8
  }
  .site-footer {
    padding-top:24px
  }
  .empty-state {
    padding:50px 20px
  }
  .empty-state h3 {
    font-size:15px
  }
}

@media(max-width:420px) {
  .brand-subtitle {
    font-size:5px;
    letter-spacing:.7px
  }
  .brand {
    gap:8px
  }
  .brand img {
    width:34px;
    height:34px
  }
  .hero {
    height:385px
  }
  .hero-inner {
    padding-top:42px
  }
  h1 {
    font-size:23px;
    letter-spacing:0
  }
  .hero-eyebrow {
    font-size:7px
  }
  .hero-subtitle {
    font-size:9px;
    max-width:300px
  }
  .hero-meta {
    font-size:7px;
    gap:12px
  }
  .hero-meta .icon {
    width:12px;
    height:12px
  }
  .hero-actions .button {
    font-size:7px;
    padding-inline:11px
  }
  .hero-actions {
    gap:8px
  }
  .section-heading h2 {
    font-size:14px
  }
  .discovery-grid .section-heading h2 {
    font-size:12px
  }
  .launch-table th:nth-child(3),.launch-table td:nth-child(3) {
    display:none
  }
  .launch-table th:nth-child(2) {
    width:44%
  }
  .launch-table th:nth-child(4) {
    width:17%
  }
  .launch-table th:nth-child(5) {
    width:27%
  }
  .server-name {
    font-size:9px
  }
  .launch-table th:first-child {
    width:26px
  }
  .launch-table th:last-child {
    width:29px
  }
  .launch-cell time {
    font-size:8px
  }
  .countdown {
    font-size:7px
  }
  .view-button {
    width:22px;
    height:25px
  }
  .position {
    font-size:8px!important
  }
  .latest-header {
    gap:6px;
    padding-inline:9px
  }
  .latest-header h3 {
    font-size:10px
  }
  .latest-server-name {
    font-size:8px
  }
  .latest-list {
    padding-inline:10px
  }
  .latest-list a>span:last-child {
    font-size:7px
  }
  .latest-footer {
    font-size:8px
  }
  .latest-header .mini-game-mark {
    width:21px;
    height:24px;
    font-size:8px
  }
  .desktop-link {
    display:none
  }
  .advertise-copy h2 {
    font-size:20px
  }
  .footer-main>.brand {
    gap:7px
  }
  .footer-main .brand-word {
    font-size:21px
  }
  .footer-main>p {
    font-size:7px
  }
  .preview-label {
    font-size:6px;
    letter-spacing:.5px
  }
}

@media(max-width:700px) {
  .server-name {
    white-space:normal;
    overflow:visible;
    overflow-wrap:anywhere;
    line-height:1.6
  }
  .server-secondary {
    white-space:normal;
    overflow:visible;
    overflow-wrap:anywhere
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
  .game-card:hover {
    transform:none
  }
}
/* CASE-068 */
/* The footer is laid out only when it comes near the screen (see discovery.css). */
.site-footer { content-visibility:auto; contain-intrinsic-size:auto 900px; }
/* /CASE-068 */

/* ---- dashboard.css ---- */
/* Phase 1 reference refinement. Banner sizing remains in style.css: 270 × 100. */
.skip-link:not(:focus) { clip-path:inset(50%); width:1px; height:1px; padding:0; overflow:hidden; white-space:nowrap; }
.game-symbol {
  display:inline-flex;
  width:28px;
  height:28px;
  flex:0 0 auto;
  overflow:hidden;
  border:1px solid #66513a;
  border-radius:5px;
  background:#11151e;
  box-shadow:inset 0 0 9px #0008;
  vertical-align:middle;
}
.game-symbol img { width:100%; height:100%; object-fit:contain; object-position:center; }
.server-symbol { position:relative; overflow:visible; }
.server-symbol>img:first-child { border-radius:inherit; object-fit:cover; }
.server-symbol .server-symbol-game { position:absolute; right:-3px; bottom:-3px; width:42%; height:42%; min-width:10px; min-height:10px; border:1px solid #0b0f17; border-radius:3px; background:#11151e; object-fit:contain; }
.category-game-symbol { width:34px; height:34px; margin:4px 0 5px; background:#0a101ad9; border-color:#9b7a3b88; }
.game-card .category-game-symbol img { width:100%; height:100%; object-fit:contain; object-position:center; transform:none; }

/* Game selection: stronger silhouettes, centered names and a legible count. */
.game-grid { padding:13px; border:1px solid #222933; border-radius:12px; background:linear-gradient(#10151e99,#080c13); gap:14px; }
.game-card { height:235px; border-radius:8px; border-color:#353b45; }
.game-card-content { align-items:center; text-align:center; bottom:16px; left:10px; right:10px; }
.game-card::after { background:linear-gradient(0deg,#060a10 0%,#060a10eb 22%,#060a1033 65%); }
.game-title,.game-warcraft .game-title { font:700 18px/1.5 var(--font); }
.game-genre { font-size:8px; letter-spacing:1.2px; margin-bottom:3px; }
.game-count { display:inline-flex; justify-content:center; gap:10px; color:#b8bec9; border:1px solid #303640; background:#111720c9; border-radius:5px; padding:3px 10px; font-size:10px; margin-top:7px; }
.game-count .icon { width:11px; height:11px; }
.game-card:hover,.game-card[aria-pressed=true] { border-color:#f5c65f; box-shadow:0 0 0 1px #d9a54588,0 0 22px #d6a13c29; }

/* Upcoming launches and community ranking share one visual hierarchy. */
.discovery-grid { grid-template-columns:minmax(0,1fr) 330px; gap:18px; align-items:start; margin-bottom:30px; }
.upcoming-section,.ranking-section { border:1px solid #28303b; border-top-color:#594830; border-radius:12px; padding:19px 17px 11px; background:radial-gradient(ellipse at top right,#a8771d08,transparent 65%),linear-gradient(120deg,#0d141d,#070c13); box-shadow:inset 0 1px #ffffff03,0 8px 30px #0003; }
.discovery-grid .dashboard-heading { align-items:center; min-height:48px; margin:0 0 18px; gap:12px; }
.discovery-grid .dashboard-heading h2 { display:block; font:600 clamp(15px,1.25vw,19px)/1.4 var(--font); text-transform:uppercase; letter-spacing:.15px; }
.dashboard-heading h2>span { color:#efc765; }
.discovery-grid .dashboard-heading p { font-size:10px; text-transform:uppercase; margin-top:5px; color:#a7b0bf; letter-spacing:.2px; }
.calendar-button { display:inline-flex; align-items:center; justify-content:center; gap:9px; flex-shrink:0; padding:10px 12px; min-height:36px; font-size:9px; font-weight:600; color:#e3bc64; text-transform:uppercase; background:linear-gradient(#211f18,#14181e); border:1px solid #725a2a; border-radius:8px; box-shadow:inset 0 1px #eac36414; }
.calendar-button .icon { width:13px; height:13px; }
.calendar-button:hover { border-color:#e1b454; background:#2c261a; }
.upcoming-panel,.ranking-panel { background:none; border:0; box-shadow:none; border-radius:0; overflow:visible; }
.launch-table-wrap { border:1px solid #252e3a; border-radius:8px; overflow:hidden; }
.launch-table { table-layout:fixed; }
.launch-table th { height:35px; padding:8px 9px; font-size:9px; letter-spacing:.3px; background:linear-gradient(110deg,#202735,#171e28); color:#a6afc0; border-bottom:1px solid #303a48; }
.launch-table th:first-child { width:32px; padding-left:13px; }
.launch-table th:nth-child(2) { width:30%; }
.launch-table th:nth-child(3) { width:17%; display:table-cell; }
.launch-table th:nth-child(4) { width:16%; }
.launch-table th:nth-child(5) { width:23%; }
.launch-table th:last-child { width:64px; }
.launch-table td { height:79px; padding:12px 9px; border-bottom:1px solid #232c37; }
.launch-table tr:nth-child(even) { background:#ffffff02; }
.launch-table tr:hover { background:#dca23e06; }
.launch-table .position { color:#c5cbd7; font-size:13px!important; padding-left:13px!important; font-weight:500; }
.launch-table tr:first-child .position { color:#f1c64c; text-shadow:0 0 12px #f0be5766; }
.server-name-cell>.realm-symbol { width:32px; height:36px; margin-right:10px; border-color:#78623a; }
.server-name-content { width:calc(100% - 45px); vertical-align:middle; }
.server-name { font-size:11px; font-weight:600; text-transform:uppercase; color:#e3e6ec; letter-spacing:.1px; }
.server-game-cell { display:table-cell!important; }
.game-chip { display:inline-flex; align-items:center; gap:5px; color:#adb6c6; font-size:10px; white-space:nowrap; }
.game-chip .game-symbol { width:21px; height:23px; border:0; border-radius:3px; }
.rate-cell strong { font-size:11px; font-weight:500; color:#d2d8e4; }
.rate-cell>span { color:#98a4b8; font-size:10px; display:block; margin-top:3px; }
.launch-cell .countdown { color:#89cf94; font-size:12px; font-weight:650; margin:0 0 4px; white-space:nowrap; letter-spacing:.1px; }
.launch-cell time { color:#a4adbd; font-size:10px; }
.view-button { width:51px; height:30px; border:1px solid #9b7738; border-radius:6px; color:#e9c16c; background:linear-gradient(#332a18,#1e201d); box-shadow:inset 0 1px #efc46612; font-size:10px; font-weight:600; text-transform:uppercase; }
.view-button:hover { border-color:#f6d072; background:#42351c; }
.launch-table th:nth-child(2) { width:28%; }
.launch-table th:nth-child(3) { width:15%; }
.launch-table th:nth-child(4) { width:14%; }
.launch-table th:nth-child(5) { width:21%; }
.launch-table th:last-child { width:132px; text-align:right; padding-right:13px; }
.server-actions { display:flex; align-items:center; justify-content:flex-end; gap:5px; }
.server-social-link { display:grid; place-items:center; width:29px; height:30px; flex-shrink:0; border:1px solid #4a5363; border-radius:6px; color:#bfcddd; background:linear-gradient(#202a38,#121b28); }
.server-social-link .icon { width:14px; height:14px; }
.server-social-link:hover { color:#ffe09a; border-color:#c09a50; }
.server-social-link.discord-link { color:#c2c9ff; background:linear-gradient(#343d74,#20294f); border-color:#646fac; }
.server-social-link.discord-link:hover { background:#454f91; border-color:#a7b0ff; color:#fff; }
.upcoming-panel .panel-footer { border:0; min-height:37px; padding:12px 2px 0; font-size:9px; color:#7e8b9d; }
.verified-note { font-size:8px; }
.verified-note .icon { width:12px; height:12px; color:#9eae8b; }
.data-note { font-size:8px; color:#677387; margin-top:11px; }

/* Real vote values; top-three medals do not change ranking order. */
.ranking-section { padding:17px 13px 11px; }
.discovery-grid .ranking-section .dashboard-heading { min-height:33px; margin-bottom:13px; justify-content:space-between; gap:7px; padding:0 1px 14px; border-bottom:1px solid #2b313a; }
.discovery-grid .ranking-section h2 { color:#edc361; font-size:13px; white-space:nowrap; }
.ranking-list { padding:0; }
.ranking-list li { gap:8px; padding:7px 2px; min-height:46px; border-bottom:1px solid #232b36; }
.rank-number { min-width:24px; width:24px; height:28px; display:grid; place-items:center; position:relative; color:#d7ad50; font-size:14px; font-variant-numeric:tabular-nums; }
.rank-number b { font-weight:600; position:relative; z-index:1; }
.rank-number>.icon { position:absolute; inset:1px auto auto; width:28px; height:25px; opacity:.3; stroke-width:1.2; }
.rank-1 { color:#ffdb61; text-shadow:0 0 10px #ffc23a88; }
.rank-2 { color:#dadfe8; }
.rank-3 { color:#c3a27a; }
.ranking-symbol { width:23px; height:26px; border-color:#493a2d; border-radius:3px; }
.rank-server>a { font-size:10px; font-weight:550; text-transform:uppercase; color:#cbd2de; }
.vote-count { min-width:54px; padding:5px 6px; gap:6px; height:28px; font-size:10px; color:#d9dfe9; background:linear-gradient(#202a37,#131c27); border:1px solid #3b4656; border-radius:5px; box-shadow:inset 0 1px #ffffff06; }
.vote-count .icon { width:13px; height:13px; color:#edbd53; fill:#e9ae3b33; }
.ranking-footer { min-height:37px; margin-top:5px; font-size:9px; border-top:0; color:#bea26c; }

/* Latest-game panels; the advertising CTA follows as its own section. */
.latest-section { margin-bottom:38px; }
.latest-section>.section-heading { margin-bottom:16px; }
.latest-section>.section-heading h2 { font:500 20px/1.4 var(--font); color:#ecc467; letter-spacing:.3px; }
.latest-section>.section-heading p { font-size:10px; margin-top:5px; }
.latest-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.latest-panel { border:1px solid #343e4a; border-top-color:#77613e; border-radius:11px; background:linear-gradient(115deg,#121923,#090f17); }
.latest-header { display:flex; align-items:center; gap:10px; padding:13px 15px; min-height:62px; border-bottom:1px solid #303844; background:linear-gradient(100deg,#1a222a88,transparent); }
.latest-header>.game-symbol { width:31px; height:33px; border-radius:4px; }
.latest-header h3 { font:650 14px/1.4 var(--font); text-transform:uppercase; letter-spacing:.3px; white-space:normal; }
.latest-view-all { margin-left:auto; display:inline-flex; flex-shrink:0; align-items:center; gap:8px; color:#d4ac58; font-size:10px; padding:0; background:none; }
.latest-view-all .icon { width:14px; height:14px; }
.latest-view-all:hover { color:#ffda80; }
.latest-list { min-height:250px; margin:0; padding:0; list-style:none; }
.latest-list li { border-bottom:1px solid #2d364144; }
.latest-list li:nth-child(odd) { background:#ffffff02; }
.latest-list a { display:flex; align-items:center; gap:9px; padding:9px 13px; min-height:50px; }
.latest-list a:hover { background:#b88d3920; }
.latest-position { width:14px; flex-shrink:0; font-size:12px; color:#bfc8d5; }
.latest-list .game-symbol { width:23px; height:26px; border-radius:3px; border-color:#483b2f; }
.latest-server-name { display:block; flex:1; min-width:0; color:#d3d9e4; font-size:11px; font-weight:550; text-transform:uppercase; }
.latest-status { flex-shrink:0; }
.latest-status .badge { font-size:8px; padding:2px 5px; }
.latest-list time { flex-shrink:0; color:#e5bc64; background:#c99d3d0a; border:1px solid #80633966; padding:4px 8px; border-radius:6px; font-size:10px; line-height:1.6; white-space:nowrap; }
.latest-empty { min-height:250px; position:relative; isolation:isolate; overflow:hidden; background:none; padding:25px 15px; }
.latest-empty::before { content:''; position:absolute; inset:0; z-index:-1; background-image:linear-gradient(90deg,#0c121af2,#0c121abf),var(--game-art); background-size:cover; background-position:center 35%; opacity:.55; }
.empty-game-symbol { height:46px; width:46px; border-color:#a5844a88; border-radius:9px; box-shadow:0 0 25px #e4b45312; margin-bottom:12px; }
.latest-empty .soon-pill { font-size:8px; padding:4px 8px; color:#c9b27f; background:#171b20; border-color:#64513299; }
.latest-empty h4 { font-size:12px; font-weight:500; color:#bdc4d0; margin:12px 0 0; }
.latest-empty p { margin-top:6px; color:#788699; font-size:10px; }
.latest-grid>.advertise-panel { min-height:312px; margin:0; padding:20px 22px; border:1px solid #88704988; border-radius:11px; display:block; background:linear-gradient(90deg,#0b111af5 0%,#0b111ae0 40%,#0b111a33 100%),url('art/mu.webp') 60% 30%/cover; }
.latest-grid>.advertise-panel::before { display:none; }
.advertise-copy { position:relative; z-index:1; }
.advertise-copy h2 { font:500 20px/1.4 var(--font); color:#efc96d; text-transform:uppercase; margin:0; max-width:100%; }
.advertise-copy>p { color:#bac2d0; font-size:10px; line-height:1.7; max-width:83%; margin-top:6px; }
.advertise-copy ul { flex-direction:column; gap:8px; margin:16px 0 19px; }
.advertise-copy li { font-size:11px; color:#ccd3df; gap:9px; }
.advertise-copy li .icon { width:14px; height:14px; color:#e8b956; }
.advertise-copy>.button { font-size:11px; min-height:43px; padding:10px 22px; min-width:215px; max-width:100%; border-radius:8px; }

@media(max-width:1320px) {
  .discovery-grid { grid-template-columns:minmax(0,1fr) 300px; gap:15px; }
  .upcoming-section { padding:17px 13px 11px; }
  .calendar-button { font-size:8px; padding-inline:8px; gap:5px; }
  .discovery-grid .dashboard-heading h2 { font-size:15px; }
  .server-name { font-size:10px; }
  .launch-table td { padding-inline:7px; }
  .launch-cell .countdown { font-size:11px; }
  .launch-table .realm-symbol { width:28px; height:32px; margin-right:7px; }
  .server-name-content { width:calc(100% - 36px); }
  .rank-server>a { font-size:9px; }
  .ranking-list li { gap:6px; }
  .discovery-grid .ranking-section h2 { font-size:12px; }
  .latest-header h3 { font-size:12px; }
  .latest-list a { gap:7px; padding-inline:10px; }
  .latest-server-name { font-size:9px; }
  .latest-list time { font-size:9px; padding-inline:6px; }
  .advertise-copy h2 { font-size:18px; }
  .game-title,.game-warcraft .game-title { font-size:15px; }
  .game-card { height:215px; }
}
@media(max-width:1100px) {
  .discovery-grid { grid-template-columns:minmax(0,1fr); gap:20px; }
  .ranking-section { max-width:none; }
  .ranking-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:25px; }
  .ranking-list li { gap:10px; }
  .rank-server>a { font-size:11px; }
  .ranking-section .dashboard-heading select { width:130px; }
  .latest-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
  .latest-header h3 { font-size:14px; }
  .latest-server-name { font-size:11px; }
  .latest-list time { font-size:10px; }
  .game-count { font-size:9px; padding-inline:7px; }
  .game-title,.game-warcraft .game-title { font-size:13px; }
  .upcoming-section .dashboard-heading h2 { font-size:18px; }
}
@media(max-width:900px) {
  .game-grid { grid-template-columns:repeat(5,180px); padding:12px; }
  .game-card { height:210px; }
  .game-title,.game-warcraft .game-title { font-size:15px; }
  .game-warcraft .game-title { font-size:13px; }
  .launch-table th:nth-child(3) { display:table-cell; }
  .upcoming-section .dashboard-heading h2 { font-size:16px; }
  .game-chip { font-size:9px; }
}
@media(max-width:700px) {
  .upcoming-section,.ranking-section { padding:16px 12px 12px; border-radius:10px; }
  .upcoming-section .dashboard-heading { flex-wrap:wrap; align-items:flex-start; gap:12px; margin-bottom:15px; }
  .upcoming-section .dashboard-heading h2 { font-size:16px; line-height:1.5; max-width:300px; }
  .discovery-grid .dashboard-heading p { font-size:9px; }
  .calendar-button { font-size:9px; min-height:33px; padding:7px 10px; }
  .launch-table thead { display:none; }
  .launch-table tbody { display:block; }
  .launch-table tbody tr { display:grid; grid-template-columns:20px minmax(0,1fr) 48px; column-gap:8px; row-gap:4px; padding:14px 10px; border-bottom:1px solid #25303e; }
  .launch-table tbody tr:last-child { border-bottom:0; }
  .launch-table td { display:block; height:auto; border:0; padding:0; }
  .launch-table td.position { grid-column:1; grid-row:1/4; padding:5px 0 0!important; font-size:12px!important; }
  .launch-table .server-name-cell { grid-column:2/4; grid-row:1; padding-bottom:5px; min-width:0; }
  .launch-table .server-game-cell { display:none!important; }
  .server-name { font-size:12px; line-height:1.5; white-space:normal; overflow-wrap:anywhere; }
  .server-name-content { width:calc(100% - 38px); }
  .launch-table .realm-symbol { width:28px; height:30px; margin-right:9px; }
  .launch-table .rate-cell { grid-column:2; grid-row:2; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
  .rate-cell strong { font-size:10px; }
  .rate-cell>span { margin:0; font-size:9px; }
  .launch-table .launch-cell { grid-column:2; grid-row:3; display:flex; flex-wrap:wrap; gap:3px 9px; padding-top:4px; }
  .launch-cell .countdown { font-size:10px; margin:0; }
  .launch-cell time { font-size:9px; }
  .launch-table .view-cell { grid-column:2/4; grid-row:4; padding-top:7px; }
  .server-actions { justify-content:flex-start; gap:7px; }
  .server-social-link { width:30px; height:30px; }
  .view-button { width:46px; height:29px; font-size:9px; }
  .verified-note { display:none!important; }
  .ranking-list { display:block; }
  .ranking-list li { min-height:47px; gap:10px; }
  .rank-server>a { font-size:11px; }
  .ranking-symbol { width:25px; height:28px; }
  .vote-count { min-width:60px; font-size:10px; padding:5px 8px; }
  .discovery-grid .ranking-section h2 { font-size:15px; }
  .latest-grid { grid-template-columns:minmax(0,1fr); gap:18px; }
  .latest-grid>.latest-panel:last-child { grid-column:auto; }
  .latest-section>.section-heading h2 { font-size:19px; }
  .latest-header { padding-inline:14px; }
  .latest-header h3 { font-size:14px; }
  .latest-list a { padding-inline:13px; gap:9px; }
  .latest-server-name { font-size:11px; }
  .latest-list time { font-size:10px; padding-inline:8px; }
  .latest-grid>.advertise-panel { min-height:325px; padding:23px; }
  .advertise-copy h2 { font-size:21px; }
  .latest-empty h4 { font-size:13px; }
}
@media(max-width:380px) {
  .latest-list a { gap:6px; padding-inline:9px; }
  .latest-list .game-symbol { width:20px; height:23px; }
  .latest-server-name { font-size:9px; }
  .latest-list time { font-size:9px; padding-inline:5px; }
  .latest-header h3 { font-size:12px; }
  .latest-view-all { font-size:9px; }
  .rank-server>a { font-size:9px; }
  .ranking-list li { gap:7px; }
  .ranking-symbol { width:21px; height:24px; }
  .discovery-grid .ranking-section h2 { font-size:13px; }
  .vote-count { min-width:52px; padding-inline:5px; }
}

/* Unified selection: one illustrated card per game, plus the aggregate view. */
.game-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; padding:12px; }
.game-card { height:210px; }
.game-title,.game-warcraft .game-title { font-size:15px; }
.game-count { font-size:9px; padding-inline:8px; }
.game-all>img { object-position:57% center; }
.game-all::after { background:linear-gradient(0deg,#100d08 1%,#181007d9 28%,#d5a34408 90%); }
.universal-game-symbol { align-items:center; justify-content:center; color:#f9d77b; background:radial-gradient(#7b582b,#191711); border-color:#d7ad50; }
.universal-game-symbol>.icon { width:24px; height:24px; }
.scope-label { color:#c6ac75; background:#b88b260d; border:1px solid #65512d66; border-radius:5px; padding:5px 7px; font-size:9px; white-space:nowrap; }
.featured-shortcut { display:flex; align-items:center; gap:8px; padding:9px 11px; margin:0 0 12px; border:1px solid #8c6c3666; border-radius:6px; background:linear-gradient(90deg,#d7a34816,#a7352a09); color:#e4c584; font-size:10px; }
.featured-shortcut>.icon { width:15px; height:15px; }
.featured-shortcut>strong { font-weight:550; }
.featured-shortcut>span { margin-left:auto; display:inline-flex; align-items:center; gap:7px; color:#b9a172; font-size:9px; }
.featured-shortcut>span>.icon { width:12px; height:12px; }
.featured-shortcut:hover { border-color:#e2b257; background:#5a402430; }
.launch-table td { height:64px; padding-block:10px; }
.server-identity { display:flex; align-items:center; gap:9px; min-width:0; }
.server-identity>.realm-symbol { width:30px; height:33px; flex-shrink:0; }
.server-identity .server-name-content { width:auto; min-width:0; flex:1; }
.server-identity .badge { flex-shrink:0; }
.ranking-list li { min-height:40px; padding-block:6px; }

/* Premium styling is attached to the complete row, using the original entitlement level. */
.listing-row.row-normal { background:#101721; }
:is(.launch-table,.latest-list) .listing-row.row-vip { background:linear-gradient(105deg,#72501d,#8b652a 39%,#704d21 72%,#3c301b); box-shadow:inset 0 1px #f8d57c,inset 0 -1px #ba8c36,inset 2px 0 #f5cf76,inset -1px 0 #b78c3d; }
:is(.launch-table,.latest-list) .listing-row.row-hot { background:linear-gradient(105deg,#67202a,#9b3334 42%,#6f222a 78%,#3f1923); box-shadow:inset 0 1px #d75c59,inset 0 -1px #ad4344,inset 2px 0 #e56b60,inset -1px 0 #9f3b41; }
:is(.launch-table,.latest-list) .listing-row.row-vip:hover { background:linear-gradient(105deg,#805b22,#97702f 39%,#7f5926 72%,#49391f); box-shadow:inset 0 1px #ffe2a2,inset 0 -1px #e9b955,0 0 12px #d2a2462e; }
:is(.launch-table,.latest-list) .listing-row.row-hot:hover { background:linear-gradient(105deg,#7e2733,#b64040 42%,#8a2a34 78%,#571f2e); box-shadow:inset 0 1px #ff9389,inset 0 -1px #db5957,0 0 12px #d84b4826; }
.listing-row.row-vip .server-name,.listing-row.row-hot .server-name,.listing-row.row-vip .latest-server-name,.listing-row.row-hot .latest-server-name { color:#fff9eb; text-shadow:0 1px 2px #0008; }
.listing-row:is(.row-vip,.row-hot) .position { color:#fff0cd!important; }
.listing-row:is(.row-vip,.row-hot) td { border-bottom-color:#0003; }
.listing-row:is(.row-vip,.row-hot) :is(.game-chip,.rate-cell strong,.rate-cell>span,.launch-cell time) { color:#f7efdf; }
.listing-row:is(.row-vip,.row-hot) .server-social-link { background:#15182777; border-color:#eee3c755; color:#fff5df; }
.listing-row:is(.row-vip,.row-hot) .discord-link { background:#3b4381b5; color:#fff; }
.listing-row:is(.row-vip,.row-hot) .view-button { color:#fff1bc; background:#221d16aa; border-color:#f9d77b99; }
.listing-row .badge { font-size:9px; padding:3px 6px; letter-spacing:.2px; border-radius:4px; box-shadow:0 2px 6px #0003; }
.listing-row .badge.vip { background:linear-gradient(#ffe397,#e5b952); color:#352104; border-color:#fff0b0; }
.listing-row .badge.hot { background:linear-gradient(#e35951,#b82730); color:#fff2de; border-color:#ff9c7a; }
.listing-row .badge.plus { background:transparent; color:#8fcbff; border-color:#4b8fe6; box-shadow:none; }
:is(.launch-table,.latest-list) .listing-row.row-plus { background:#101721; box-shadow:inset 0 1px #3f86e0,inset 0 -1px #3f86e0,inset 2px 0 #3f86e0,inset -1px 0 #3f86e0; }
:is(.launch-table,.latest-list) .listing-row.row-plus:hover { box-shadow:inset 0 1px #6aa9ff,inset 0 -1px #6aa9ff,inset 2px 0 #6aa9ff,inset -1px 0 #6aa9ff,0 0 10px #3b8cff30; }
.listing-row.row-plus :is(.server-name,.latest-server-name) { color:#8fcbff; text-shadow:0 0 6px #3b9bffb0,0 0 14px #3b9bff55; }
.listing-row .server-name { overflow-wrap:anywhere; white-space:normal; }

/* Restored premium opened listings sit directly after the main discovery grid. */
.featured-opened-section { padding:19px 17px 12px; margin:0 0 30px; border:1px solid #70562f; border-radius:12px; background:radial-gradient(ellipse at top left,#d39c2c0b,transparent 60%),#0c121b; scroll-margin-top:30px; }
.featured-opened-section .dashboard-heading { margin-bottom:14px; align-items:center; }
.featured-opened-section h2 { font:600 20px/1.45 var(--font); color:#f1cc78; text-transform:uppercase; display:block; }
.featured-opened-section .eyebrow { font-size:8px; color:#a58a5e; }
.featured-opened-section .dashboard-heading p { font-size:10px; color:#9da8ba; margin-top:3px; }
.premium-legend { display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:10px; color:#b8a17a; }
.premium-legend>.badge { font-size:9px; padding:3px 6px; }
.premium-legend>#featuredCount { margin-left:5px; }
.featured-opened-section .launch-table td { height:55px; padding-block:8px; }
.featured-opened-section .launch-table th:nth-child(2) { width:30%; }
.open-status { color:#daf0c1; display:flex; align-items:center; gap:6px; font-size:9px; margin-bottom:3px; }
.open-status .live-dot { background:#dcf5b0; }
.featured-footnote { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:12px; font-size:9px; color:#9e8b6b; }
.latest-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
.latest-panel { grid-column:span 2; }
.latest-panel:nth-last-child(-n+2) { grid-column:span 3; }
.latest-grid.is-filtered { grid-template-columns:minmax(0,1fr); }
.latest-grid.is-filtered>.latest-panel { grid-column:1 / -1; }
.page-wrap>.advertise-panel { min-height:230px; padding:27px 34px; display:block; border-radius:11px; background:linear-gradient(90deg,#0e141cf5 10%,#121720de 60%,#10151d33 100%),url('art/mu.webp') right 30%/auto 160% no-repeat; }
.page-wrap>.advertise-panel::before { display:none; }
.page-wrap>.advertise-panel h2 { font-size:25px; }
.page-wrap>.advertise-panel ul { flex-direction:row; flex-wrap:wrap; max-width:800px; gap:12px 22px; }
.page-wrap>.advertise-panel .button { margin-top:0; }

@media(max-width:1320px) {
  .game-title,.game-warcraft .game-title { font-size:13px; }
  .game-genre { font-size:6px; }
  .game-count { padding-inline:5px; font-size:8px; }
  .server-identity { gap:6px; }
  .server-identity>.realm-symbol { width:25px; height:29px; }
  .listing-row .badge { font-size:8px; padding:2px 4px; }
}
@media(max-width:1100px) {
  .game-grid { grid-template-columns:repeat(6,180px); overflow-x:auto; scrollbar-width:thin; }
  .game-genre { font-size:7px; }
  .game-count { font-size:9px; }
  .latest-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .latest-panel,.latest-panel:nth-last-child(-n+2) { grid-column:auto; }
  .latest-panel:last-child { grid-column:1 / -1; }
}
@media(max-width:700px) {
  .game-card { height:210px; }
  .game-title,.game-warcraft .game-title { font-size:14px; }
  .featured-shortcut { flex-wrap:wrap; gap:5px 8px; }
  .featured-shortcut>span { margin-left:23px; flex-basis:100%; }
  .listing-row .server-identity .server-name { font-size:11px; }
  .listing-row .server-identity>.realm-symbol { width:27px; height:30px; }
  .featured-opened-section { padding:16px 12px 12px; }
  .featured-opened-section .dashboard-heading { align-items:flex-start; flex-direction:column; gap:10px; }
  .featured-opened-section h2 { font-size:17px; }
  .featured-opened-section .launch-table td,.launch-table td { height:auto; padding-block:0; }
  .launch-table .server-name-cell { padding-bottom:5px; }
  .launch-table .view-cell { padding-top:7px; }
  .listing-row:is(.row-vip,.row-hot) { border-bottom-color:#150e0e!important; }
  .featured-footnote { align-items:flex-start; font-size:8px; }
  .latest-grid { grid-template-columns:minmax(0,1fr); }
  .latest-panel,.latest-panel:nth-last-child(-n+2) { grid-column:1 / -1; }
  .page-wrap>.advertise-panel { padding:25px 22px; background-position:70% center; }
  .page-wrap>.advertise-panel h2 { font-size:21px; }
  .page-wrap>.advertise-panel ul { flex-direction:column; gap:9px; }
}
/* CASE-064: phones get an 860 px copy of the panel art (70 KB instead of 141 KB); only the picture changes. */
@media (max-width:700px) {
  .latest-grid>.advertise-panel { background-image:linear-gradient(90deg,#0b111af5 0%,#0b111ae0 40%,#0b111a33 100%),url('art/mu-m.webp'); }
  .page-wrap>.advertise-panel { background-image:linear-gradient(90deg,#0e141cf5 10%,#121720de 60%,#10151d33 100%),url('art/mu-m.webp'); }
}

/* ---- compact.css ---- */
/* 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-banner.webp / hero-banner-m.webp (max-width:700px) are preloaded in includes/ui/document-start.php: keep the names and the 700px split in step. */
.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-m.webp') 62% 44%/cover no-repeat; } /* 1920px copy, 46 KB instead of 215 KB (2026-11-12) */
  .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; }
}

/* ---- discovery.css ---- */
/* Complete local calendar; the approved navigation, artwork and banner layout stay intact. */
.server-discovery { scroll-margin-top:20px; margin-bottom:24px; }
.server-discovery .discovery-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr) 290px; gap:16px; margin-bottom:12px; align-items:start; }
.discovery-column,.discovery-sidebar { min-width:0; }
.calendar-group { border:1px solid #283241; border-top-color:#665333; border-radius:8px; background:linear-gradient(125deg,#101722,#090f18); margin-bottom:13px; overflow:hidden; scroll-margin-top:20px; }
.calendar-group-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 11px 10px; }
.calendar-group-heading h3 { display:flex; align-items:center; gap:6px; color:#e7bb60; font:600 12px/1.45 var(--font); text-transform:uppercase; }
.calendar-group-heading h3>.icon { width:14px; height:14px; flex-shrink:0; }
.calendar-group-heading p { font-size:9px; color:#8e9bb0; margin-top:4px; line-height:1.5; }
.group-count { font-size:10px; font-variant-numeric:tabular-nums; color:#d5c394; border:1px solid #70603e66; background:#ba8c2111; border-radius:4px; padding:3px 6px; flex-shrink:0; }
.promotional-group { border-color:#796039; background:radial-gradient(ellipse at top left,#c48c2412,transparent),#0c121c; }
.promotional-group .calendar-group-heading h3 { color:#f6cf79; }
.discovery-list { list-style:none; padding:0 6px 6px; margin:0; display:grid; gap:5px; }
:is(.discovery-row,.discovery-example) { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; padding:8px; border:1px solid #303b4a; border-radius:5px; background:#121b28; }
.discovery-row-main { min-width:0; }
:is(.discovery-row,.discovery-example) .server-identity { gap:6px; }
:is(.discovery-row,.discovery-example) .realm-symbol { width:24px; height:26px; margin:0; border-radius:4px; border-color:#6b5335; }
:is(.discovery-row,.discovery-example) .server-name { font-size:11px; line-height:1.5; font-weight:600; color:#e6eaf2; overflow-wrap:anywhere; }
:is(.discovery-row,.discovery-example) .server-name:hover { color:#ffe1a1; }
:is(.discovery-row,.discovery-example) .server-name-content { width:auto; min-width:0; }
:is(.discovery-row,.discovery-example) .badge { font-size:8px; padding:2px 4px; }
.discovery-row-meta { margin:4px 0 0 30px; display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center; color:#b6c3d6; line-height:1.5; }
.row-spec { font-size:10px; font-weight:500; }
.row-spec>span { color:#7c8a9c; padding-inline:3px; }
.discovery-row-meta time { font-size:9px; color:#a9b7cd; font-variant-numeric:tabular-nums; }
:is(.discovery-row,.discovery-example) .countdown { display:block; margin:3px 0 0 30px; font-size:9px; line-height:1.4; color:#9cd89e; font-variant-numeric:tabular-nums; }
:is(.discovery-row,.discovery-example) .server-actions { gap:4px; justify-content:flex-end; }
:is(.discovery-row,.discovery-example) .server-social-link { width:25px; height:27px; border-radius:4px; }
:is(.discovery-row,.discovery-example) .view-button { width:42px; height:27px; font-size:8px; }
:is(.discovery-row,.discovery-example) .server-social-link .icon { width:13px; height:13px; }
.discovery-list .row-normal { background:linear-gradient(120deg,#141e2c,#0f1723); }
.discovery-list .row-normal:hover { background:#1a2637; border-color:#53637a; }
.discovery-list .row-vip { background:linear-gradient(110deg,#705020,#86652f 40%,#5e4525 80%,#392b18); border-color:#e4bd69; box-shadow:inset 0 1px #ffdc872e,inset 0 -1px #ad7d35; }
.discovery-list .row-vip:hover { background:linear-gradient(110deg,#856029,#977538 40%,#70532a 80%,#4b371d); border-color:#ffe09b; box-shadow:0 0 12px #d9ab4535,inset 0 1px #ffe3a355; }
.discovery-list .row-hot { background:linear-gradient(110deg,#702631,#8e3038 45%,#59202d 85%,#381624); border-color:#cc514f; box-shadow:inset 0 1px #ff8e7c30,inset 0 -1px #9f333b; }
.discovery-list .row-hot:hover { background:linear-gradient(110deg,#82303a,#a63e45 45%,#722938 85%,#501e2c); border-color:#f78a7b; box-shadow:0 0 12px #d9504d38; }
.discovery-list :is(.row-vip,.row-hot) .server-name { color:#fff9e9; }
.discovery-list :is(.row-vip,.row-hot) :is(.row-spec,.discovery-row-meta time) { color:#fff1d6; }
.discovery-list :is(.row-vip,.row-hot) .row-spec>span { color:#d6c5ab; }
.discovery-list .row-plus { background:linear-gradient(120deg,#141e2c,#0f1723); border-color:#3f86e0; box-shadow:0 0 8px #3b8cff26; }
.discovery-list .row-plus:hover { background:#1a2637; border-color:#6aa9ff; box-shadow:0 0 12px #3b8cff40; }
.discovery-list .row-plus .server-name { color:#8fcbff; text-shadow:0 0 6px #3b9bffb0,0 0 14px #3b9bff55; }
.bucket-empty,.column-empty { padding:0 12px 12px; color:#94a1b6; font-size:10px; line-height:1.6; margin:0; }
.column-empty { padding:15px 12px; border:1px solid #303b4a; background:#101925; border-radius:6px; }
.calendar-group:has(.bucket-empty:not([hidden])) .discovery-list { padding:0; }
.calendar-group:has(.bucket-empty:not([hidden])) .calendar-group-heading { padding-block:9px 6px; }
.calendar-group:has(.bucket-empty:not([hidden])) .calendar-group-heading p { display:none; }
.load-more { display:block; width:calc(100% - 12px); margin:2px 6px 7px; padding:10px 7px; border:1px solid #68532f; border-radius:5px; background:#b68e2d0e; color:#dfc27d; font-size:10px; text-align:center; }
.load-more:hover { background:#b68e2d25; border-color:#c4a159; }
.discovery-source { font-size:9px; color:#8290a6; line-height:1.7; }
.discovery-sidebar { display:grid; gap:14px; }
.server-discovery .ranking-section { padding:12px 10px 8px; border-radius:8px; }
.server-discovery .ranking-section .dashboard-heading { min-height:32px; margin-bottom:6px; gap:5px; }
.server-discovery .ranking-section h2 { font-size:12px; }
.server-discovery .ranking-section h2>.icon { width:15px; height:15px; margin-right:3px; }
.server-discovery .scope-label { font-size:8px; padding:4px 5px; }
.server-discovery .ranking-list { display:block; }
.server-discovery .ranking-list li { min-height:42px; gap:6px; padding:6px 1px; }
.server-discovery .rank-number { width:20px; min-width:20px; font-size:12px; }
.server-discovery .ranking-symbol { width:20px; height:23px; }
.server-discovery .rank-server>a { font-size:10px; overflow-wrap:anywhere; white-space:normal; }
.server-discovery .vote-count { min-width:45px; padding-inline:4px; gap:4px; font-size:10px; }
.server-discovery .vote-count .icon { width:12px; }
.server-discovery .ranking-footer { min-height:32px; }
.sidebar-panel { padding:13px 12px; border:1px solid #303a49; border-top-color:#6d5731; border-radius:8px; background:linear-gradient(130deg,#111a27,#0b111b); }
.sidebar-panel>header { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:13px; }
.sidebar-panel h2 { font:600 12px/1.6 var(--font); text-transform:uppercase; color:#edc46c; display:flex; align-items:center; gap:6px; }
.sidebar-panel h2>.icon { width:16px; height:16px; flex-shrink:0; }
.sidebar-panel>header>span { font-size:8px; color:#bdab82; }
.search-panel label { display:block; font-size:10px; color:#c2ccdc; margin-bottom:6px; }
.search-field { display:flex; align-items:center; gap:7px; padding:9px 8px; background:#080e18; border:1px solid #344258; border-radius:5px; }
.search-field:focus-within { border-color:#dbad50; box-shadow:0 0 0 2px #c3963729; }
.search-field>.icon { width:15px; height:15px; color:#9b885e; flex-shrink:0; }
.search-field input { width:100%; min-width:0; color:#eef0f5; border:0; background:none; outline:0; padding:0; font:400 11px/1.6 var(--font); }
.search-field input::placeholder { color:#8492a8; opacity:1; }
.search-submit { display:flex; justify-content:center; align-items:center; gap:10px; width:100%; margin-top:8px; min-height:35px; border:1px solid #9c7838; background:linear-gradient(#3c301c,#231e17); border-radius:5px; color:#f2cd7b; font-size:10px; }
.search-submit:hover { border-color:#e9bc61; background:#47371e; }
.search-submit>.icon { width:13px; height:13px; }
#searchHelp,.tags-scope,.tags-empty { font-size:10px; line-height:1.6; color:#9caac0; margin-top:9px; }
.search-feedback { margin-top:10px; border-top:1px solid #293447; padding-top:10px; }
#searchResults { color:#dfc58d; font-size:10px; line-height:1.6; }
.search-feedback .text-button { font-size:10px; margin-top:8px; }
.tags-panel>header { margin-bottom:0; }
.tags-scope { margin-top:4px; }
.tag-group { margin-top:12px; }
.tag-group h3 { font:500 10px/1.6 var(--font); color:#a8b7cc; margin-bottom:7px; }
.tag-list { display:flex; flex-wrap:wrap; gap:6px; }
.tag-button { display:flex; align-items:center; gap:7px; border:1px solid #3e4a5d; border-radius:4px; padding:6px 7px; background:#162131; color:#cbd5e5; font-size:10px; }
.tag-button>span { padding-left:6px; border-left:1px solid #415069; color:#a3b1c6; font-size:9px; }
.tag-button:hover,.tag-button[aria-pressed=true] { background:#72542245; border-color:#d5ac57; color:#f6d48d; }
.tag-button[aria-pressed=true]>span { color:#f6d48d; }
.page-wrap>.advertise-panel { margin-top:26px; }
.sidebar-panel h2 { scroll-margin-top:20px; }
.preview-option { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid #2e3949; color:#d8dfeb; font-size:11px; cursor:pointer; }
.preview-option small { display:block; margin-top:4px; font-size:9px; line-height:1.6; color:#94a4ba; }
.preview-option input { flex-shrink:0; width:18px; height:18px; accent-color:#e7ba59; }
#previewStatus { font-size:10px; line-height:1.7; color:#c9b17f; margin-top:11px; }
.demo-badge { color:#c4dfff; border:1px solid #8cb5e077; background:#162944; padding:2px 3px; border-radius:3px; font-size:7px; letter-spacing:.2px; flex-shrink:0; }
.demo-actions { opacity:.65; cursor:default; }
.demo-actions>span { display:inline-flex; align-items:center; justify-content:center; cursor:default; }
.is-demo-group .group-count { color:#c4dcfa; background:#172842; border-color:#6387b666; font-size:8px; }
.discovery-row-meta .countdown { margin:0; }

/* The owner can compare this compact treatment with the previous row density. */
.server-discovery.is-compact .calendar-group { margin-bottom:10px; border-radius:6px; }
.server-discovery.is-compact .calendar-group-heading { padding:9px 9px 7px; }
.server-discovery.is-compact .discovery-list { gap:3px; padding:0 5px 5px; }
.server-discovery.is-compact :is(.discovery-row,.discovery-example) { padding:5px 6px; gap:6px; border-radius:4px; }
.server-discovery.is-compact :is(.discovery-row,.discovery-example) .server-identity { gap:5px; }
.server-discovery.is-compact :is(.discovery-row,.discovery-example) .realm-symbol { width:20px; height:22px; }
.server-discovery.is-compact :is(.discovery-row,.discovery-example) .server-name { font-size:11px; line-height:1.4; }
.server-discovery.is-compact .discovery-row-meta { margin:2px 0 0 25px; gap:2px 8px; line-height:1.4; }
.server-discovery.is-compact .row-spec { font-size:9px; }
.server-discovery.is-compact :is(.discovery-row,.discovery-example) .countdown { margin:0; font-size:9px; }
.server-discovery.is-compact :is(.discovery-row,.discovery-example) .server-actions { display:flex; gap:4px; }
.server-discovery.is-compact :is(.discovery-row,.discovery-example) .server-social-link { width:25px; height:27px; }
.server-discovery.is-compact :is(.discovery-row,.discovery-example) .view-button { width:39px; height:27px; }

@media(max-width:1320px) {
  .server-discovery .discovery-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr) 270px; gap:12px; }
  .calendar-group-heading { padding-inline:9px; }
  .calendar-group-heading h3 { font-size:11px; }
  :is(.discovery-row,.discovery-example) { gap:6px; padding:7px 6px; }
  :is(.discovery-row,.discovery-example) .server-name { font-size:10px; }
  :is(.discovery-row,.discovery-example) .realm-symbol { width:21px; height:24px; }
  .discovery-row-meta,:is(.discovery-row,.discovery-example) .countdown { margin-left:27px; }
  :is(.discovery-row,.discovery-example) .server-actions { display:grid; grid-template-columns:25px 42px; gap:4px; }
  :is(.discovery-row,.discovery-example) .website-link { grid-column:1; grid-row:1; }
  :is(.discovery-row,.discovery-example) .discord-link { grid-column:1; grid-row:2; }
  :is(.discovery-row,.discovery-example) .view-button { grid-column:2; grid-row:1 / 3; align-self:center; }
}
@media(max-width:1180px) {
  .server-discovery .discovery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
  .discovery-sidebar { grid-column:1 / -1; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; align-items:start; }
  .calendar-group-heading h3 { font-size:12px; }
  :is(.discovery-row,.discovery-example) .server-name { font-size:11px; }
  :is(.discovery-row,.discovery-example) .server-actions { display:flex; }
}
@media(max-width:900px) {
  .discovery-sidebar { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .discovery-sidebar>.ranking-section { grid-row:span 2; }
  :is(.discovery-row,.discovery-example) .server-actions { display:grid; grid-template-columns:25px 42px; }
  :is(.discovery-row,.discovery-example) .server-name { font-size:10px; }
  :is(.discovery-row,.discovery-example) .realm-symbol { width:21px; height:24px; }
}
@media(max-width:760px) {
  .server-discovery .discovery-grid { grid-template-columns:minmax(0,1fr); gap:20px; }
  .calendar-group-heading h3 { font-size:12px; }
  .discovery-sidebar { grid-column:auto; grid-template-columns:minmax(0,1fr); }
  .discovery-sidebar>.ranking-section { grid-row:auto; }
  :is(.discovery-row,.discovery-example) { padding:9px 7px; gap:8px; }
  :is(.discovery-row,.discovery-example) .server-name { font-size:11px; }
  :is(.discovery-row,.discovery-example) .realm-symbol { width:24px; height:26px; }
  .discovery-row-meta,:is(.discovery-row,.discovery-example) .countdown { margin-left:30px; }
  :is(.discovery-row,.discovery-example) .server-social-link { width:31px; height:32px; }
  :is(.discovery-row,.discovery-example) .view-button { width:45px; height:32px; }
  :is(.discovery-row,.discovery-example) .server-actions { grid-template-columns:31px 45px; gap:5px; }
  .discovery-row-meta { gap:3px 8px; }
  .discovery-list { padding-inline:6px; }
  .load-more { padding:13px 8px; }
  .server-discovery .ranking-section h2 { font-size:14px; }
  .server-discovery .ranking-list li { min-height:46px; gap:8px; }
  .server-discovery .rank-server>a { font-size:11px; }
  .server-discovery .vote-count { min-width:53px; height:30px; }
  .sidebar-panel h2 { font-size:14px; }
  .search-field input { font-size:16px; }
  .search-submit { min-height:40px; font-size:11px; }
  .tag-button { padding:9px; }
}

/* VIP / HOT / PLUS as a diagonal ribbon in the top-right corner of list rows (calendar and Top 1000). */
.row-ribbon { position:absolute; top:7px; right:-24px; z-index:1; width:84px; padding:3px 0; text-align:center; transform:rotate(45deg); font:700 8px/1 var(--font); letter-spacing:.8px; text-transform:uppercase; box-shadow:0 2px 6px #0008; pointer-events:none; }
.row-ribbon--vip { background:linear-gradient(#ffe397,#e5b952); color:#352104; }
.row-ribbon--hot { background:linear-gradient(#e35951,#b82730); color:#fff2de; }
.row-ribbon--plus { background:#0f1a2b; color:#8fcbff; box-shadow:inset 0 0 0 1px #4b8fe6, 0 2px 6px #0008; }
.discovery-row { position:relative; overflow:hidden; }
.discovery-row:has(.row-ribbon) .server-actions { margin-right:30px; }
.discovery-row .server-actions { flex-wrap:nowrap; }

/* Server logo in a fixed slot just before the buttons, only in rows that have a logo. 32px stays inside the row's
   own height and the buttons keep one width, so logos line up. In the narrow multi-column calendar (761–1320px)
   there is no room for it, so the logo is hidden there and those rows look exactly as before. */
.discovery-row .row-logo { display:none; }
@media(min-width:1321px), (max-width:760px) {
  .discovery-row:has(.row-logo) { grid-template-columns:minmax(0,1fr) 32px auto; }
  .discovery-row .row-logo { display:block; width:32px; height:32px; }
  .discovery-row .row-logo img { display:block; width:100%; height:100%; object-fit:contain; border-radius:6px; filter:drop-shadow(0 2px 3px #000a); } /* shadow follows the logo shape, so transparent logos have no box */
}
@media(min-width:1321px) { .discovery-row:has(.row-logo) .server-actions { min-width:100px; } }
/* CASE-068 */
/* The calendar groups and the sidebar are below the first screen on phones: the browser lays them out only when
   they come near the screen (content-visibility). Phone, CPU x4: layout 0.49 -> 0.27 s on the home page.
   The size is a guess for the scrollbar until a group is shown once; then the browser remembers it (auto). */
.server-discovery .calendar-group { content-visibility:auto; contain-intrinsic-size:auto 480px; }
.discovery-sidebar>* { content-visibility:auto; contain-intrinsic-size:auto 600px; }
/* /CASE-068 */

/* ---- pages.css ---- */
/* Shared public pages extend the approved Phase 1 components and tokens. */
.page-heading { margin:3px 0 18px; scroll-margin-top:20px; }
.breadcrumbs { display:flex; align-items:center; gap:7px; font-size:10px; color:#8796ad; margin-bottom:10px; }
.breadcrumbs a { color:#c9af72; }
.breadcrumbs .icon { width:11px; height:11px; }
.page-heading h1 { margin:0; font:600 23px/1.4 var(--font); letter-spacing:.1px; color:#edc776; }
.page-heading h1 .heading-sub { display:block; font-size:13px; font-weight:500; letter-spacing:.3px; color:#c9d3e3; } /* server page: game, version, EXP (2026-11-12) */
.page-heading>div>p { margin-top:5px; color:#a6b2c6; font-size:11px; line-height:1.7; }
.public-page-grid { display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:18px; align-items:start; margin-bottom:28px; }
.public-page-stack,.public-sidebar { display:grid; gap:16px; min-width:0; }
.public-panel { min-width:0; border:1px solid #303a49; border-top-color:#6d5731; border-radius:8px; background:linear-gradient(130deg,#111a27,#0b111b); overflow:hidden; }
.public-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 14px; border-bottom:1px solid #293344; }
.public-panel-heading h2 { display:flex; align-items:center; gap:7px; font:600 13px/1.5 var(--font); color:#edc46c; text-transform:uppercase; }
.public-panel-heading .icon { width:17px; height:17px; flex-shrink:0; }
.panel-copy { padding:15px; font-size:12px; line-height:1.85; color:#bdc8d9; }
.panel-copy p+p { margin-top:12px; }
.panel-link { display:flex; align-items:center; gap:8px; padding:11px 0; color:#dac18a; border-bottom:1px solid #2b3546; font-size:11px; line-height:1.6; }
.panel-link:last-child { border:0; }
.panel-link>.icon { width:15px; height:15px; }
.panel-link>.icon:last-child { margin-left:auto; }
.panel-link:hover { color:#ffe2a0; }
.public-callout { padding:20px 17px; background:linear-gradient(140deg,#c3983313,#111a27 55%,#0a1019); }
.public-callout>.eyebrow { font-size:8px; line-height:1.8; color:#c5a567; letter-spacing:1px; }
.public-callout h2 { margin:11px 0 8px; font:600 23px/1.4 var(--font); color:#f1d493; }
.public-callout p { font-size:11px; color:#aab9ce; line-height:1.9; }
.public-callout .button { width:100%; margin-top:17px; padding-inline:12px; }
.public-source { font-size:9px; line-height:1.7; color:#8695ac; padding:12px 14px; }
.public-inline-note { display:flex; align-items:center; gap:7px; color:#a6b7cd; font-size:10px; margin:0 0 15px; }
.public-inline-note .icon { width:14px; height:14px; flex-shrink:0; color:#d1b574; }
.directory-tools { padding:13px 13px 10px; display:grid; grid-template-columns:minmax(0,1fr) 170px; gap:12px; }
.field-label { display:flex; flex-direction:column; gap:7px; min-width:0; font-size:11px; color:#c6d0e0; line-height:1.5; }
.field-label input,.field-label select,.field-label textarea { width:100%; min-width:0; padding:10px 11px; border:1px solid #39485e; border-radius:5px; background:#090f19; color:#e0e6ef; font:400 12px/1.5 var(--font); }
.field-label textarea { resize:vertical; min-height:110px; }
.field-label :is(input,select,textarea):focus { outline:0; border-color:#d1a64e; box-shadow:0 0 0 2px #bd8d2b21; }
.field-label :is(input,textarea)::placeholder { color:#7c8ea8; opacity:1; }
.public-search { display:flex; align-items:center; gap:8px; border:1px solid #39485e; border-radius:5px; background:#090f19; padding:0 9px; }
.public-search .icon { width:16px; height:16px; flex-shrink:0; color:#af955d; }
.public-search input { border:0; background:none; box-shadow:none!important; padding-inline:0; }
.public-search:focus-within { border-color:#d1a64e; box-shadow:0 0 0 2px #bd8d2b21; }
.directory-summary { display:flex; justify-content:space-between; align-items:center; gap:12px; color:#9facc1; padding:2px 13px 11px; font-size:10px; }
.directory-summary>span:last-child { color:#8b9bb2; font-size:9px; }
.directory-table-wrap { padding:0 7px 5px; }
.directory-table { border-collapse:separate; border-spacing:0 4px; width:100%; table-layout:fixed; }
.directory-table th { color:#9cacc5; background:#1b2636; font:500 9px/1.5 var(--font); letter-spacing:.3px; text-transform:uppercase; text-align:left; padding:7px; }
.directory-table th:first-child { width:34px; border-radius:5px 0 0 5px; }
.directory-table th:nth-child(2) { width:21%; }
.directory-table th:nth-child(4) { width:14%; }
.directory-table th.directory-banner-head { text-align:center; }
.directory-table th:nth-child(5) { width:70px; }
.directory-table th:last-child { width:158px; padding-right:34px; text-align:right; border-radius:0 5px 5px 0; }
.directory-table td { border-block:1px solid #2e3b4e; padding:6px 7px; height:52px; color:#c2cee0; font-size:11px; vertical-align:middle; }
.directory-table td:first-child { border-left:1px solid #2e3b4e; border-radius:5px 0 0 5px; }
.directory-table td:last-child { border-right:1px solid #2e3b4e; border-radius:0 5px 5px 0; }
.directory-table .row-normal { background:linear-gradient(120deg,#141e2c,#0f1723); }
.directory-table .row-vip { background:linear-gradient(110deg,#705020,#86652f 40%,#5e4525 80%,#392b18); }
.directory-table .row-hot { background:linear-gradient(110deg,#702631,#8e3038 45%,#59202d 85%,#381624); }
.directory-table .row-vip td { border-color:#d5ab57; }
.directory-table .row-hot td { border-color:#c04b4b; }
.directory-table .row-plus { background:linear-gradient(120deg,#141e2c,#0f1723); }
.directory-table .row-plus td { border-color:#3f86e0; }
.directory-table .row-plus .server-name { color:#8fcbff; text-shadow:0 0 6px #3b9bffb0,0 0 14px #3b9bff55; }
.directory-table .row-vip:hover { filter:brightness(1.1); }
.directory-table .row-hot:hover { filter:brightness(1.1); }
.directory-table .row-normal:hover { background:#1c2a3d; }
.directory-position { color:#e7c16b!important; font-variant-numeric:tabular-nums; text-align:center; }
.directory-table .server-identity { gap:7px; }
.directory-table .realm-symbol { width:25px; height:28px; }
.directory-table .server-name { font-size:11px; line-height:1.4; }
.directory-table .server-name-content small { display:block; margin-top:2px; font-size:9px; color:#a5b6cc; }
.directory-table .badge { font-size:8px; padding:2px 4px; }
.directory-spec strong { display:block; color:#e2e8f1; font-size:11px; font-weight:600; }
.directory-spec>span { display:block; font-size:9px; color:#a0b1ca; margin-top:3px; line-height:1.5; }
.directory-table :is(.row-vip,.row-hot) :is(.server-name-content small,.directory-spec>span,.directory-spec time) { color:#f0e4cc; }
.directory-table td.directory-banner { padding-block:5px; }
.directory-table .server-identity { min-width:0; }
.directory-table .server-name-content { min-width:0; flex:1; }
.directory-table .server-name-content .server-name { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; overflow-wrap:normal; }
.directory-banner .server-banner { display:block; width:100%; max-width:468px; margin:0 auto; line-height:0; border-radius:4px; overflow:hidden; box-shadow:0 2px 8px #0006; }
.directory-banner .server-banner img, .directory-banner .server-banner video { display:block; width:100%; height:auto; aspect-ratio:468/60; object-fit:cover; }
.directory-banner a.server-banner:hover { outline:1px solid #f1d491; outline-offset:1px; }
.directory-spec time { display:block; margin-top:3px; color:#c2cee0; font-size:10px; white-space:nowrap; }
.directory-spec strong .directory-spec-dot { display:inline; margin:0; color:#6f7f97; font-size:11px; }
.server-detail-banner { display:flex; justify-content:center; padding:14px 18px 0; }
.server-detail-banner .server-banner { display:block; width:100%; max-width:468px; line-height:0; border-radius:4px; overflow:hidden; box-shadow:0 4px 14px #0008; }
.server-detail-banner img, .server-detail-banner video { display:block; width:100%; height:auto; aspect-ratio:468/60; }
.server-banner video { background:#10141f; }
.directory-votes a { display:inline-flex; align-items:center; gap:5px; font-size:11px; color:#f1d491; }
.directory-votes .icon { width:13px; height:13px; }
.directory-table .server-social-link { width:25px; height:27px; }
.directory-table .view-button { width:43px; height:27px; font-size:8px; }
.directory-table .server-actions { gap:4px; }
.directory-empty { padding:40px 18px; text-align:center; }
.directory-empty>.icon { width:30px; height:30px; color:#c9a656; }
.directory-empty h3 { font:500 17px/1.5 var(--font); color:#ead09a; margin-top:12px; }
.directory-empty p { font-size:11px; color:#98a9c0; margin:7px 0 15px; }
.directory-more { width:calc(100% - 20px); margin:0 10px 2px; padding:12px; }
.faq-item { border-bottom:1px solid #2c3748; }
.faq-item:last-child { border:0; }
.faq-item summary { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:17px 16px; font-size:12px; font-weight:500; color:#d8e0eb; cursor:pointer; list-style:none; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary .icon { width:14px; height:14px; color:#c3a15d; flex-shrink:0; }
.faq-item[open] summary { color:#efcb79; background:#c18c1d08; }
.faq-item[open] summary .icon { transform:rotate(90deg); }
.faq-item>div { padding:0 16px 17px; font-size:12px; line-height:1.9; color:#aebed4; }
.faq-item .text-button { margin-top:12px; font-size:11px; }
.partner-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px; }
.partner-card { display:flex; flex-direction:column; }
.partner-logo { display:flex; align-items:center; justify-content:center; height:112px; padding:12px; border-bottom:1px solid #293447; background:radial-gradient(ellipse at center,#2c3543,#0a101b 85%); }
.partner-logo img { display:block; max-width:100%; max-height:90px; object-fit:contain; }
.partner-wordmark { color:#ead29c; text-align:center; font:700 22px/1.4 var(--display); letter-spacing:.5px; }
.partner-copy { padding:16px; display:flex; flex:1; flex-direction:column; align-items:flex-start; }
.partner-copy h2 { font:600 15px/1.5 var(--font); color:#eed19a; }
.partner-copy p { font-size:11px; line-height:1.9; margin:8px 0 16px; color:#a8bad1; overflow-wrap:anywhere; }
.partner-copy .button { margin-top:auto; min-height:35px; padding:8px 11px; font-size:9px; gap:9px; }
.partner-copy .button .icon { width:13px; height:13px; }
.partnership-cta { display:flex; align-items:center; justify-content:space-between; gap:22px; padding:21px; margin:20px 0 28px; }
.partnership-cta .eyebrow { font-size:8px; color:#b99e67; }
.partnership-cta h2 { color:#e4c17b; font:600 20px/1.5 var(--font); margin:6px 0; }
.partnership-cta p { font-size:11px; color:#9aacc3; }
.auth-layout { max-width:1080px; margin:0 auto 32px; display:grid; grid-template-columns:minmax(0,460px) minmax(0,1fr); gap:22px; align-items:stretch; }
.auth-card-body { padding:22px; }
.auth-card-body>p { font-size:12px; line-height:1.8; color:#a7b8cf; margin-bottom:20px; }
.public-form { display:flex; flex-direction:column; gap:15px; }
.password-field { display:flex; align-items:center; border:1px solid #39485e; border-radius:5px; background:#090f19; }
.password-field input { border:0; background:none; box-shadow:none!important; }
.password-field:focus-within { border-color:#d1a64e; box-shadow:0 0 0 2px #bd8d2b21; }
.password-field button { padding:10px; color:#d0b47a; border:0; background:none; font-size:10px; flex-shrink:0; }
.form-preview-note { display:flex; align-items:flex-start; gap:7px; font-size:10px; line-height:1.7; color:#b49f78; padding:10px; background:#a57d2110; border:1px solid #7e632a55; border-radius:5px; }
.form-preview-note .icon { width:14px; height:14px; flex-shrink:0; margin-top:1px; }
.form-primary { width:100%; min-height:41px; }
.form-feedback { color:#d9d9aa; font-size:11px; line-height:1.8; padding:10px 12px; background:#6f693b1a; border:1px solid #a5a36d55; border-radius:5px; }
.form-feedback.is-error { color:#f3aaa6; background:#8a32301c; border-color:#a94c4c88; }
.auth-divider { display:flex; align-items:center; gap:12px; margin:21px 0 14px; font-size:10px; color:#8e9fb7; }
.auth-divider span { height:1px; background:#344154; flex:1; }
.discord-signin { display:flex; align-items:center; justify-content:center; gap:9px; width:100%; padding:11px; border-radius:5px; border:1px solid #6d79bd; background:linear-gradient(#363f70,#262e50); color:#e0e6ff; font:500 12px/1.5 var(--font); }
.discord-signin .icon { width:19px; height:19px; }
.discord-feedback { font-size:11px; line-height:1.8; color:#b0bfd5; margin-top:10px; }
.auth-alternate { margin-top:19px; font-size:11px; color:#99abc3; text-align:center; }
.auth-alternate a { color:#e6bd6b; margin-left:4px; }
.auth-story { display:flex; align-items:center; padding:32px; background:linear-gradient(0deg,#0a111bea,#0b1119c9),url('art/hero.webp') 68% center/cover no-repeat; }
.auth-story .eyebrow { color:#d7b164; font-size:9px; }
.auth-story h2 { font:600 30px/1.45 var(--display); color:#edcf95; margin:15px 0; }
.auth-story p { color:#b6c4d8; font-size:12px; line-height:1.9; }
.auth-story ul { list-style:none; display:grid; gap:16px; margin:25px 0; padding:0; color:#c5d1e1; font-size:11px; }
.auth-story li { display:flex; align-items:center; gap:9px; }
.auth-story li .icon { color:#d1ad63; width:17px; height:17px; }
.auth-story .text-button { font-size:11px; }
.server-cover { padding:30px 22px; background:linear-gradient(90deg,#0c121df5,#101927b3 65%,#10182766),url('art/mu.webp') right 24%/cover no-repeat; border-bottom:1px solid #735a34; }
@media (max-width:700px) { .server-cover { background-image:linear-gradient(90deg,#0c121df5,#101927b3 65%,#10182766),url('art/mu-m.webp'); } } /* CASE-064: smaller art on phones */
.server-cover.has-custom-cover { background:linear-gradient(90deg,#0c121dee,#101927a0 55%,#10182722),var(--cover-image) center/cover no-repeat; }
.server-cover-content { display:flex; align-items:center; gap:15px; }
.detail-game-symbol { width:51px; height:55px; border-color:#a18047; border-radius:7px; }
.server-cover-content>div { min-width:0; flex:1; }
.server-cover .eyebrow { font-size:9px; color:#d1b274; }
.server-cover h2 { font:600 24px/1.4 var(--font); color:#f7d89b; overflow-wrap:anywhere; margin-top:5px; }
.server-cover p { font-size:11px; color:#acbcd1; margin-top:7px; line-height:1.7; }
.server-cover .badge { font-size:10px; padding:5px 9px; }
.server-detail-body { padding:18px; }
.detail-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.detail-stats>div { padding:10px 11px; border:1px solid #344156; border-radius:5px; background:#121d2c; min-width:0; }
.detail-stats span { display:block; color:#91a2bb; font-size:9px; margin-bottom:5px; }
.detail-stats strong { color:#e4c687; font-size:13px; line-height:1.5; font-weight:600; }
.detail-opening { display:flex; align-items:center; flex-wrap:wrap; gap:7px 10px; margin-top:15px; color:#bdcbe0; font-size:11px; }
.detail-opening>.icon { width:15px; height:15px; color:#d6b46e; }
.detail-opening>span { color:#8d9fb8; font-size:10px; }
.detail-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:18px; }
.detail-actions .button { min-height:36px; padding:8px 12px; font-size:9px; gap:8px; }
.detail-actions .button>.icon { width:15px; height:15px; }
.discord-button { background:linear-gradient(#343d6b,#242d4f); border-color:#6774ad; color:#d6dfff; }
.detail-tabs { display:flex; border-bottom:1px solid #354155; padding:0 15px; gap:22px; }
.detail-tabs button { padding:15px 2px; border:0; border-bottom:2px solid transparent; background:none; color:#a9bad2; font:500 12px/1.5 var(--font); }
.detail-tabs [aria-selected=true] { color:#efc976; border-bottom-color:#e5b451; }
.server-description { white-space:normal; overflow-wrap:anywhere; font-size:12px; }
.server-facts { margin:0; padding:6px 14px; }
.server-facts>div { display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid #293547; padding:12px 0; font-size:10px; line-height:1.7; }
.server-facts>div:last-child { border:0; }
.server-facts dt { color:#91a2bb; }
.server-facts dd { margin:0; color:#d3c091; text-align:right; }
.public-sidebar .ranking-section { min-width:0; border-radius:8px; padding:13px 10px 8px; }
.public-sidebar .ranking-section .section-heading { justify-content:space-between; gap:8px; margin-bottom:10px; }
.public-sidebar .ranking-section h2 { display:flex; align-items:center; gap:5px; font:600 12px/1.6 var(--font); color:#edc46c; text-transform:uppercase; white-space:nowrap; }
.public-sidebar .ranking-section h2>.icon { width:15px; height:15px; }
.public-sidebar .ranking-list { display:block; }
.public-sidebar .ranking-list li { gap:6px; min-height:42px; padding:6px 1px; }
.public-sidebar .rank-server>a { font-size:9px; }
.public-sidebar .rank-number { min-width:20px; width:20px; }
.public-sidebar .ranking-symbol { width:20px; height:23px; }
.public-sidebar .vote-count { min-width:45px; font-size:9px; padding-inline:4px; gap:4px; }
.public-sidebar .scope-label { font-size:8px; padding:4px 5px; }
.public-empty { padding:12px 0 22px; }
.public-empty h3 { color:#d9c28f; font:500 16px/1.6 var(--font); }
.public-empty p { font-size:11px; color:#98abc6; margin-top:6px; }
.review-form { max-width:650px; }
.vote-layout { display:grid; grid-template-columns:minmax(0,720px) 290px; max-width:1030px; margin:0 auto 30px; gap:20px; align-items:start; }
.vote-server-identity { display:flex; align-items:center; gap:13px; padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid #344052; }
.vote-server-identity>div { flex:1; min-width:0; }
.vote-server-identity h2 { font:600 18px/1.5 var(--font); color:#e9cf97; overflow-wrap:anywhere; }
.vote-server-identity p { font-size:11px; color:#98acc7; margin-top:4px; }
.vote-server-identity .badge { font-size:10px; padding:5px 7px; }
.field-help { color:#94a6c0; font-size:10px; line-height:1.8; margin-top:-8px; }
.check-option { display:flex; align-items:center; gap:8px; color:#a9bad0; font-size:11px; }
.check-option input { width:15px; height:15px; accent-color:#dfb55f; }
.verification-preview { display:flex; align-items:center; gap:12px; padding:15px; border:1px dashed #5a6881; background:#17223277; border-radius:6px; }
.verification-preview>.icon { width:25px; height:25px; color:#c0a669; flex-shrink:0; }
.verification-preview strong { display:block; color:#c5d1e1; font-size:11px; font-weight:500; }
.verification-preview span { display:block; color:#869cb9; font-size:10px; line-height:1.7; margin-top:4px; }
.form-action-row { display:flex; gap:10px; flex-wrap:wrap; }
.form-action-row .button { flex:1; min-width:140px; min-height:40px; padding-inline:12px; gap:8px; }
.public-callout .vote-total { font-size:42px; font-variant-numeric:tabular-nums; }
.not-found { padding:45px 22px; text-align:center; margin-bottom:30px; }
.not-found-icon { display:block; margin-bottom:15px; color:#c3a260; }
.not-found-icon .icon { width:37px; height:37px; }
.not-found>.eyebrow { font-size:9px; color:#ae9461; }
.not-found h2 { font:500 22px/1.6 var(--font); color:#e7cb92; margin-top:9px; }
.not-found p { font-size:12px; color:#9aacc6; line-height:1.9; margin:10px 0 22px; }
.not-found>div { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.postback-document { display:grid; gap:15px; min-width:0; }
.postback-document .step { min-width:0; padding:18px; border:1px solid #303a49; border-top-color:#6d5731; border-radius:8px; background:linear-gradient(130deg,#111a27,#0b111b); font-size:12px; line-height:1.9; color:#b8c7dc; }
.postback-document h2 { font:600 16px/1.6 var(--font); color:#edca80; margin-bottom:12px; }
.postback-document p { margin:10px 0; }
.postback-document :is(ol,ul) { margin:10px 0; padding-left:22px; }
.postback-document li { margin:7px 0; }
.postback-document code { font-family:Consolas,monospace; font-size:11px; color:#d9c18e; overflow-wrap:anywhere; }
.postback-document p code,.postback-document li>code { background:#a77d2910; border:1px solid #6c562d55; padding:2px 4px; border-radius:3px; }
.postback-document .note { border-left:2px solid #b28b42; padding:7px 11px; background:#9c76200d; font-size:11px; color:#b1a486; }
.postback-document pre { min-width:0; max-width:100%; overflow:auto; padding:13px; border:1px solid #35415a; border-radius:5px; background:#070e17; line-height:1.8; }
.postback-document pre code { color:#b8c9e2; white-space:pre; overflow-wrap:normal; }
.codebox { min-width:0; margin-top:13px; border:1px solid #35415a; border-radius:6px; overflow:hidden; background:#0a111c; }
.codebox__top { display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:8px; background:#182233; }
.codebox .code { margin:0; border:0; border-radius:0; max-height:230px; }
.codebox.is-expanded .code { max-height:none; }
.codebox__btn,.codebox-toggle { border:1px solid #6c5734; background:#b58a2512; border-radius:4px; color:#dbbf82; padding:6px 9px; font-size:10px; }
.codebox-toggle { margin-right:auto; }
.doc-contents { padding-top:7px; }
.doc-contents a { display:block; color:#b9c7da; font-size:10px; padding:10px 0; border-bottom:1px solid #293649; line-height:1.8; }
.doc-contents a:hover { color:#ebc371; }
.doc-contents a:last-child { border:0; }
.postback-document .step { scroll-margin-top:20px; }

@media(min-width:1190px) { .docs-sidebar { position:sticky; top:18px; } }
@media(max-width:1200px) {
  .public-page-grid { grid-template-columns:minmax(0,1fr) 265px; gap:14px; }
  .directory-table th:nth-child(2) { width:28%; }
  .directory-table th:nth-child(4) { width:19%; }
  .directory-table th:last-child { width:140px; }
  .directory-table .server-name { font-size:10px; }
  .directory-table .server-social-link { width:23px; }
  .directory-table .view-button { width:36px; }
  .directory-table .server-actions { gap:3px; }
}
@media(max-width:1000px) {
  .public-page-grid { grid-template-columns:minmax(0,1fr); }
  .public-sidebar { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
  .directory-table th:nth-child(2) { width:22%; }
  .partner-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .auth-layout { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; }
  .auth-story { padding:24px; }
  .auth-story h2 { font-size:25px; }
  .vote-layout { grid-template-columns:minmax(0,1fr); }
  .docs-sidebar { grid-row:1; grid-template-columns:minmax(0,1fr); }
  .doc-contents { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; }
}
@media(max-width:700px) {
  .page-heading { margin:3px 0 15px; }
  .page-heading h1 { font-size:20px; }
  .page-heading>div>p { font-size:11px; }
  .public-page-grid { gap:16px; }
  .public-sidebar { grid-template-columns:minmax(0,1fr); }
  .public-panel-heading { padding:12px; }
  .public-panel-heading h2 { font-size:12px; }
  .public-panel-heading .scope-label { font-size:8px; }
  .directory-tools { grid-template-columns:minmax(0,1fr); padding:12px; }
  .field-label :is(input,select,textarea) { font-size:16px; }
  .directory-summary { align-items:flex-start; flex-direction:column; gap:5px; padding:0 12px 9px; }
  .partner-grid { grid-template-columns:minmax(0,1fr); gap:14px; }
  .partner-logo { height:104px; }
  .partnership-cta { padding:18px; flex-direction:column; align-items:flex-start; }
  .partnership-cta .button { width:100%; }
  .auth-layout { grid-template-columns:minmax(0,1fr); gap:16px; }
  .auth-card-body { padding:18px 15px; }
  .auth-story { padding:24px 20px; }
  .auth-story h2 { font-size:25px; }
  .form-primary { min-height:43px; }
  .password-field button { padding-inline:12px; }
  .server-cover { padding:23px 15px; }
  .server-cover-content { gap:10px; flex-wrap:wrap; }
  .server-cover h2 { font-size:19px; }
  .server-cover p { font-size:10px; }
  .detail-game-symbol { width:38px; height:42px; }
  .server-detail-body { padding:14px; }
  .detail-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .detail-stats strong { font-size:12px; }
  .detail-actions .button { flex:1; min-height:38px; padding-inline:9px; }
  .server-facts { padding-inline:13px; }
  .vote-server-identity h2 { font-size:16px; }
  .vote-server-identity { gap:9px; flex-wrap:wrap; }
  .verification-preview { padding:12px; }
  .form-action-row .button { min-width:120px; font-size:9px; }
  .not-found { padding:30px 16px; }
  .not-found h2 { font-size:18px; }
  .postback-document .step { padding:15px 12px; }
  .postback-document h2 { font-size:14px; }
  .doc-contents { grid-template-columns:minmax(0,1fr); }
}

/* Top 1000: the ribbon sits in the corner of the links cell; on phones the whole card is the anchor. */
.directory-table td.directory-actions { position:relative; overflow:hidden; }
.directory-table td.directory-actions { padding-right:34px; } /* room for the corner ribbon, kept on every row so the buttons line up */
/* Below 1200px the banner column gets too narrow, so the table becomes one card per server (as on phones). */
@media(max-width:1200px) {
  .directory-table { display:block; border-spacing:0; }
  .directory-table thead { display:none; }
  .directory-table tbody { display:grid; gap:6px; }
  .directory-table tr { display:grid; grid-template-columns:23px minmax(0,1fr) 69px; gap:8px; padding:10px 8px; border:1px solid #344154; border-radius:5px; }
  .directory-table :is(.row-vip,.row-hot) { border-color:#c79f56; }
  .directory-table .row-hot { border-color:#c04b4b; }
  .directory-table td { display:block; padding:0; border:0!important; height:auto; }
  .directory-table .directory-position { grid-column:1; grid-row:1 / 5; padding-top:4px; font-size:11px; }
  .directory-table .directory-banner { grid-column:2 / 4; grid-row:2; }
  .directory-table td:nth-child(2) { grid-column:2 / 4; grid-row:1; }
  .directory-table .server-name { font-size:11px; }
  .directory-table .server-name-content small { font-size:9px; }
  .directory-table .directory-spec { grid-column:2; grid-row:3; display:flex; align-items:center; flex-wrap:wrap; gap:5px 10px; }
  .directory-spec time { margin:0; }
  .directory-spec>span { margin:0; }
  .directory-table .directory-votes { grid-column:3; grid-row:3; text-align:right; align-self:center; }
  .directory-table .directory-votes a { border:1px solid #62522e; padding:6px 7px; border-radius:4px; background:#10172466; }
  .directory-table .directory-actions { grid-column:2 / 4; grid-row:4; }
  .directory-table .server-actions { justify-content:flex-start; gap:7px; }
  .directory-table .server-social-link { width:32px; height:32px; }
  .directory-table .view-button { width:52px; height:32px; font-size:9px; }
}
@media(max-width:1200px) {
  .directory-table tr { position:relative; overflow:hidden; }
  .directory-table td.directory-actions { position:static; overflow:visible; }
  .directory-table td.directory-actions { padding-right:0; }
}

/* Legal pages: Privacy, Terms, Contact (2026-11-09) */
.panel-copy ul { margin:0; padding-left:18px; }
.panel-copy li + li { margin-top:8px; }
.panel-copy ul + p, .panel-copy p + ul { margin-top:12px; }
.panel-copy a:not([class]) { color:var(--gold); text-decoration:underline; text-underline-offset:2px; }
.panel-copy code { font-size:11px; padding:1px 5px; border-radius:4px; background:rgba(255,255,255,.06); }
.legal-updated { margin:4px 2px 0; font-size:11px; color:#8793a6; }

/* Games carousel (2026-11-09): the frame keeps the border; cards scroll inside it and the
   arrows sit inside the frame, never outside the border. 6 cards per view on desktop. */
.game-carousel { --gc-gap:12px; --gc-per-view:6; position:relative; padding:12px; border:1px solid #28313e; border-radius:12px; background:linear-gradient(#10151e99,#080c13); }
.game-carousel .game-grid { display:grid; grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:calc((100% - (var(--gc-per-view) - 1) * var(--gc-gap)) / var(--gc-per-view)); gap:var(--gc-gap); margin:-4px 0; padding:4px 0; border:0; border-radius:0; background:none; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; overscroll-behavior-x:contain; }
.game-carousel .game-grid::-webkit-scrollbar { display:none; }
.game-carousel .game-card { scroll-snap-align:start; }
.game-carousel-nav { position:absolute; top:50%; z-index:4; display:grid; place-items:center; width:36px; height:36px; padding:0; border:1px solid #6b5326; border-radius:50%; background:#080c13e6; color:#f5c65f; cursor:pointer; transform:translateY(-50%); box-shadow:0 4px 14px #000a; transition:opacity .2s, background .2s, border-color .2s; }
.game-carousel-nav.is-prev { left:18px; }
.game-carousel-nav.is-next { right:18px; }
.game-carousel-nav.is-prev svg { transform:rotate(180deg); }
.game-carousel-nav svg { width:16px; height:16px; }
.game-carousel-nav:hover { background:#1a1609; border-color:#f5c65f; }
.game-carousel-nav:focus-visible { outline:2px solid #f5c65f; outline-offset:2px; }
.game-carousel-nav:disabled { opacity:0; pointer-events:none; }
@media (max-width:1180px) { .game-carousel { --gc-per-view:4; } }
@media (max-width:860px)  { .game-carousel { --gc-per-view:3; } }
@media (max-width:600px)  { .game-carousel { --gc-per-view:2; --gc-gap:9px; padding:9px; } .game-carousel-nav { width:32px; height:32px; } .game-carousel-nav.is-prev { left:13px; } .game-carousel-nav.is-next { right:13px; } }
.mini-game-mark.ragnarok { color:#9cc8f5; background:#1d335255; border-color:#2f4f78; }
.mini-game-mark.perfectworld { color:#f0cf86; background:#4a381855; border-color:#6b5326; }
.mini-game-mark.aion { color:#c6b5f7; background:#2f245255; border-color:#4a3c78; }
.mini-game-mark.flyff { color:#9be3da; background:#173e3a55; border-color:#2c5f59; }
.mini-game-mark.cabal { color:#f3a28f; background:#4a1f1655; border-color:#6e3225; }

/* SEO lists (CASE-058): text under the list, sidebar links, footer links. */
.landing-about { display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:18px; align-items:start; margin-bottom:28px; }
.landing-about a { color:#edc46c; }
.landing-about a:hover { color:#ffe2a0; }
.landing-facts { color:#e6d3a6; }
.landing-faq h3 { font:600 12px/1.6 var(--font); color:#edc46c; }
.landing-faq h3+p { margin-top:4px; }
.landing-faq p+h3 { margin-top:14px; }
.landing-links .panel-copy { padding-block:4px; }
.landing-links .panel-link[aria-current="page"] { color:#ffe2a0; font-weight:600; }
.footer-lists { display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; padding-bottom:16px; font-size:9px; color:#8d929e; }
.footer-lists strong { color:#b8a274; font-weight:600; letter-spacing:.6px; text-transform:uppercase; }
.footer-lists a:hover { color:#e3b56e; }
@media(max-width:1000px) { .landing-about { grid-template-columns:minmax(0,1fr); } }
@media(max-width:700px) { .footer-lists { gap:12px 18px; font-size:11px; } }

/* ---- site.css ---- */
/* Live-site additions on top of the Phase 1 design: signed-in header, server media, votes, reviews and form states. */
.account-button { gap:8px; }
.account-button .account-avatar { width:22px; height:22px; border-radius:50%; object-fit:cover; border:1px solid #00000033; flex-shrink:0; }
.account-button .account-name { max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.server-media { border-bottom:1px solid #293344; background:#080d16; }
.server-media img,.server-media video { display:block; width:100%; height:auto; max-height:420px; object-fit:contain; }

.vote-log { list-style:none; margin:0; padding:6px 14px 10px; }
.vote-log li { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid #293547; font-size:11px; line-height:1.6; }
.vote-log li:last-child { border:0; }
.vote-log .vote-nick { display:flex; align-items:center; gap:7px; min-width:0; color:#d3c091; overflow-wrap:anywhere; }
.vote-log .vote-nick .icon { width:13px; height:13px; flex-shrink:0; color:#c0a669; }
.vote-log time { color:#91a2bb; white-space:nowrap; font-size:10px; }
.vote-log-empty { padding:14px; color:#98abc6; font-size:11px; }

.review-summary { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.review-summary strong { color:#e4c687; font-size:20px; font-weight:600; }
.review-summary span { color:#98abc6; font-size:11px; }
.review-list { display:grid; gap:10px; margin-top:18px; }
.review-item { padding:12px 13px; border:1px solid #344156; border-radius:5px; background:#121d2c; }
.review-item .review-meta { display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; color:#91a2bb; font-size:10px; margin-bottom:6px; }
.review-item .review-stars { color:#e5aa3d; letter-spacing:1px; font-size:12px; }
.review-item .review-author { color:#d3c091; font-weight:600; }
.review-item p { color:#c8d2e1; font-size:12px; line-height:1.75; overflow-wrap:anywhere; white-space:pre-line; }

.field-error { display:block; color:#f3aaa6; font-size:10px; line-height:1.6; }
.field-error:empty { display:none; }
.form-feedback.is-success { color:#a9e2b4; background:#2f6b3d1f; border-color:#4f9a6188; }
.verification-preview:has(.vote-recaptcha) { align-items:flex-start; }
.vote-recaptcha { min-height:78px; margin-top:12px; }
.vote-recaptcha .g-recaptcha { transform-origin:0 0; }
@media (max-width:380px) { .vote-recaptcha .g-recaptcha { transform:scale(.86); } }

/* Footer statistics strip: one panel, six compact tiles */
.footer-stats { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); margin-bottom:26px; border:1px solid #232a37; border-top-color:#5a4826; border-radius:8px; background:linear-gradient(180deg,#0f1520,#0a0e15); overflow:hidden; }
.footer-stat { display:flex; align-items:center; gap:11px; min-width:0; padding:14px 16px; }
.footer-stat + .footer-stat { border-left:1px solid #1d2430; }
.footer-stat-icon { display:grid; place-items:center; width:34px; height:34px; flex-shrink:0; border:1px solid #5a4826; border-radius:50%; background:radial-gradient(circle at 50% 35%,#3a2d14,#141009); color:#e5b65c; }
.footer-stat-icon .icon { width:16px; height:16px; }
.footer-stat > div { display:flex; flex-direction:column; min-width:0; }
.footer-stat-label { color:#8a93a4; font-size:9px; letter-spacing:.9px; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.footer-stat strong { color:#f3dca6; font:600 17px/1.35 var(--font); font-variant-numeric:tabular-nums; white-space:nowrap; }
.footer-stat small { color:#626b7b; font-size:9px; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#likesReset.is-soon { color:#ff9b6b; }
@media (max-width:1280px) {
  .footer-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .footer-stat:nth-child(4) { border-left:0; }
  .footer-stat:nth-child(n+4) { border-top:1px solid #1d2430; }
}
@media (max-width:640px) {
  .footer-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-stat { padding:12px; gap:9px; }
  .footer-stat:nth-child(4) { border-left:1px solid #1d2430; }
  .footer-stat:nth-child(odd) { border-left:0; }
  .footer-stat:nth-child(n+3) { border-top:1px solid #1d2430; }
  .footer-stat-icon { width:28px; height:28px; }
  .footer-stat strong { font-size:15px; }
  .footer-stat small { white-space:normal; }
}