/* Statistics pages: main_statistic, top30*, top_guild*, vote* (shared by RU and EN skins) */

body.inner .pw-grid:has(.st) > .pw-server,
body.inner .pw-grid:has(.st) > .pw-top { display: none; }
body.inner .pw-grid:has(.st) > .pw-main {
  grid-column: 1 / -1; grid-row: auto;
  padding: 0; border: 0; background: none; overflow: visible;
}
body.inner .pw-main #page-content:has(.st) { display: block; }

.st { --st-accent: var(--pw-lime); display: grid; gap: 12px; color: var(--pw-ink); font-family: var(--pw-font); }
.st--refresh { --st-accent: var(--pw-refresh); }
.st--x100 { --st-accent: var(--pw-x100); }
#page-content .st h1,
#page-content .st h2 { margin: 0; padding: 0; border: 0; background: none; color: var(--pw-ink) !important; font-family: var(--pw-font); letter-spacing: -.02em; text-transform: none; text-shadow: none; }
#page-content .st p { margin: 0; }
#page-content .st ol,
#page-content .st li { margin: 0; padding: 0; list-style: none; background: none; border: 0; box-shadow: none; }
#page-content .st li::before { content: none; }
#page-content .st a { color: inherit; text-decoration: none; }
.st [data-race="bellato"], .st .is-bellato { --race: var(--pw-bellato); }
.st [data-race="cora"], .st .is-cora { --race: var(--pw-cora); }
.st [data-race="acretia"], .st .is-acretia { --race: var(--pw-acretia); }
.st-fmt, .st-num, .st-rank { font-family: var(--pw-mono); font-variant-numeric: tabular-nums; }

.st-head, .st-tile, .st-race-card, .st-server {
  border: 1px solid var(--pw-line); border-radius: var(--pw-r); background: var(--pw-tile);
}

/* Header */
.st-head {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  padding: 28px;
  background:
    radial-gradient(90% 120% at 100% 0%, color-mix(in srgb, var(--st-accent) 18%, transparent), transparent 60%),
    var(--pw-tile);
}
.st-head__main { display: grid; gap: 8px; max-width: 720px; }
#page-content .st-head h1 { font: 900 clamp(32px, 4vw, 52px)/1 var(--pw-font); letter-spacing: -.04em; }
.st-head p { color: #b8bdca; font-size: 15.5px; line-height: 1.5; }
.st-head__side { display: grid; justify-items: end; gap: 10px; flex: none; }
.st-updated { display: inline-flex; align-items: center; gap: 8px; color: var(--pw-muted); font-size: 13px; }
.st-updated::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--st-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--st-accent) 22%, transparent); }
.st-switch { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--pw-tile2); }
.st-switch a { padding: 9px 18px; border-radius: 999px; color: var(--pw-muted) !important; font-weight: 700; transition: color .15s ease, background .15s ease; }
.st-switch a:hover { color: var(--pw-ink) !important; }
.st-switch a.is-active { background: var(--st-accent); color: #111 !important; }

/* Rating tabs */
.st-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 6px; border: 1px solid var(--pw-line); border-radius: 999px; background: var(--pw-tile); scrollbar-width: none; }
.st-tabs::-webkit-scrollbar { display: none; }
.st-tabs a { flex: none; padding: 10px 18px; border-radius: 999px; color: var(--pw-muted) !important; font-weight: 600; white-space: nowrap; transition: color .15s ease, background .15s ease; }
.st-tabs a:hover { background: var(--pw-tile2); color: var(--pw-ink) !important; }
.st-tabs a.is-active { background: var(--pw-ink); color: #111 !important; }

/* Race badge */
.st-race { display: inline-flex; align-items: center; gap: 7px; color: #c9cdd8; font-size: 13px; font-weight: 600; white-space: nowrap; }
.st-race::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--race, var(--pw-muted)); }

/* Podium */
.st-podium { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 12px; }
.st-podium__card {
  position: relative; overflow: hidden;
  display: grid; align-content: start; gap: 4px;
  min-height: 210px; padding: 22px !important;
  border: 1px solid var(--pw-line) !important; border-radius: var(--pw-r);
  background: linear-gradient(160deg, color-mix(in srgb, var(--race, var(--st-accent)) 16%, transparent), transparent 60%), var(--pw-tile) !important;
}
.st-podium__card:first-child { border-color: color-mix(in srgb, var(--st-accent) 45%, transparent) !important; }
.st-podium__rank {
  position: absolute; top: 14px; right: 20px;
  color: rgba(255, 255, 255, .07); font: 900 96px/1 var(--pw-font); letter-spacing: -.06em; pointer-events: none;
}
.st-podium__card:first-child .st-podium__rank { color: color-mix(in srgb, var(--st-accent) 30%, transparent); }
.st-podium__card .st-race { margin-bottom: 10px; }
.st-podium__name { overflow: hidden; color: #fff; font-size: 24px; font-weight: 800; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.st-podium__guild { color: var(--pw-muted); font-size: 14px; }
.st-podium__val { margin-top: auto; padding-top: 18px; color: #fff; font: 700 34px/1 var(--pw-mono); }
.st-podium__card:first-child .st-podium__val { color: var(--st-accent); }
.st-podium__label { color: var(--pw-muted); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.st-podium__more { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; color: #c9cdd8; font-size: 13px; }
.st-podium__more small { color: var(--pw-muted); font-size: 12px; }

/* Table (ranks 4-30) */
.st-tile { padding: 10px; }
.st-table { --st-more: 1; display: grid; }
.st-table > li {
  display: grid; align-items: center; gap: 14px;
  grid-template-columns: 44px minmax(0, 1fr) repeat(var(--st-more), minmax(70px, 120px)) minmax(130px, 190px) 110px;
  padding: 11px 14px !important; border-radius: 14px;
}
.st-more { display: contents; }
.st-table__head { color: var(--pw-muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.st-table__head .st-num { font-family: var(--pw-font); }
.st-row { transition: background .15s ease; }
.st-table .st-row:nth-child(even) { background: rgba(255, 255, 255, .02); }
.st-row:hover { background: var(--pw-tile2) !important; }
.st-rank { color: var(--pw-muted); font-size: 14px; font-weight: 700; }
.st-player { display: grid; min-width: 0; }
.st-player b { overflow: hidden; color: var(--pw-ink); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.st-player small { overflow: hidden; color: var(--pw-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.st-num { color: #c9cdd8; font-size: 14px; text-align: right; }
.st-num b { font-weight: inherit; }
.st-main { position: relative; color: #fff; font-weight: 700; font-size: 15px; }
.st-bar { display: block; height: 3px; margin-top: 6px; border-radius: 3px; background: rgba(255, 255, 255, .06); }
.st-bar i { display: block; height: 100%; width: var(--w, 0%); margin-left: auto; border-radius: inherit; background: var(--st-accent); transition: width .6s ease; }

/* Race columns (guilds, elections) */
.st-races { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.st-race-card { overflow: hidden; padding: 0 0 8px; background: linear-gradient(180deg, color-mix(in srgb, var(--race) 12%, transparent), transparent 140px), var(--pw-tile); }
.st-race-card header { display: flex; align-items: center; gap: 10px; padding: 20px 22px 12px; }
#page-content .st-race-card h2 { font: 800 22px/1 var(--pw-font); }
.st-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--race); box-shadow: 0 0 0 5px color-mix(in srgb, var(--race) 20%, transparent); }
.st-list { display: grid; padding: 0 8px !important; }
.st-list > li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px !important; border-radius: 14px; }
.st-list > li + li { border-top: 1px solid var(--pw-line) !important; }
.st-list > li:hover + li { border-top-color: transparent !important; }
.st-list .st-main { display: grid; justify-items: end; gap: 1px; }
.st-list .st-main b { color: #fff; font-size: 17px; }
.st-list .st-main small { color: var(--pw-muted); font: 500 12px/1.3 var(--pw-font); }
.st-list .st-main small .st-fmt { color: #c9cdd8; }
.st-list > li:first-child .st-rank { color: var(--race); }
.st-list > li:not(:has(.st-rank)) { grid-template-columns: minmax(0, 1fr) auto; }
.st-role { justify-self: start; margin-bottom: 3px; padding: 3px 8px; border-radius: 999px; background: var(--pw-tile2); color: #c9cdd8; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.st-row--lead .st-role { background: var(--race); color: #111; }
.st-row--lead .st-player b { font-size: 17px; }

/* Overview */
.st-servers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.st-server { --st-accent: var(--pw-refresh); display: grid; align-content: start; gap: 20px; padding: 26px; background: linear-gradient(135deg, color-mix(in srgb, var(--st-accent) 15%, transparent), transparent 55%), var(--pw-tile); }
.st-server--x100 { --st-accent: var(--pw-x100); }
.st-server__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
#page-content .st-server h2 { margin-top: 6px; color: #fff !important; font: 900 44px/1 var(--pw-font); letter-spacing: -.04em; }
.st-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.st-kpis > div { display: grid; gap: 4px; padding: 16px 18px; border-radius: 18px; background: rgba(255, 255, 255, .035); }
.st-kpis dt { color: var(--pw-muted); font-size: 13px; }
.st-kpis dd { margin: 0; color: #fff; font: 700 30px/1.05 var(--pw-mono); font-variant-numeric: tabular-nums; }
.st-kpis small { color: var(--pw-muted); font-size: 12px; }
.st-links { display: grid; gap: 4px; }
.st-links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-radius: 14px; background: rgba(255, 255, 255, .035); font-weight: 600; transition: background .15s ease, color .15s ease; }
.st-links a i { color: var(--pw-muted); font-style: normal; transition: transform .15s ease, color .15s ease; }
.st-links a:hover { background: var(--pw-tile2); }
.st-links a:hover i { color: var(--st-accent); transform: translateX(3px); }

/* Static note and empty states */
.st-note { padding: 18px 22px; border: 1px solid var(--pw-line); border-radius: 18px; color: var(--pw-muted); font-size: 14px; line-height: 1.55; }
.st-note[hidden] { display: none; }
.st-note * { color: inherit !important; font: inherit !important; text-align: left !important; }
.st-empty { padding: 28px 16px !important; color: var(--pw-muted); text-align: center; }
.st [data-st-hidden] { display: none !important; }

/* Downloads page (download_gamefiles.tpl) */
.dl .st-head { align-items: stretch; }
.dl-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px !important; }
#page-content .dl-tags li { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .05); color: #c9cdd8; font-size: 13px; font-weight: 600; }
.dl-servers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dl-card {
  --st-accent: var(--pw-refresh);
  display: grid; align-content: start; gap: 18px; padding: 26px;
  border: 1px solid var(--pw-line); border-radius: var(--pw-r);
  background: linear-gradient(135deg, color-mix(in srgb, var(--st-accent) 15%, transparent), transparent 55%), var(--pw-tile);
}
.dl-card--x100 { --st-accent: var(--pw-x100); }
.dl-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
#page-content .dl-card h2 { margin-top: 6px; font: 900 44px/1 var(--pw-font); letter-spacing: -.04em; }
#page-content .dl-card h2 a { color: #fff; }
#page-content .dl-ver { flex: none; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .05); color: #c9cdd8; font: 600 13px/1.2 var(--pw-mono); }
#page-content .dl-ver:hover { color: var(--st-accent); }
#page-content .dl-ver:empty { display: none; }
#page-content .dl-direct {
  display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-radius: 20px;
  background: var(--st-accent); color: #111;
  box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--st-accent) 70%, transparent);
  transition: transform .15s ease, box-shadow .15s ease;
}
#page-content .dl-direct:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -12px color-mix(in srgb, var(--st-accent) 85%, transparent); }
.dl-direct svg { flex: none; width: 30px; height: 30px; padding: 9px; box-sizing: content-box; border-radius: 14px; background: rgba(0, 0, 0, .14); }
.dl-direct span { display: grid; gap: 2px; }
#page-content .dl-direct b { color: #111 !important; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
#page-content .dl-direct small { color: rgba(17, 17, 17, .68) !important; font-size: 13px; font-weight: 600; }
.dl-sub { display: block; margin-bottom: 8px; color: var(--pw-muted); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.dl-mirrors ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#page-content .dl-mirror {
  display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 16px;
  background: rgba(255, 255, 255, .04); color: var(--pw-ink); font-size: 14px; font-weight: 600;
  transition: background .15s ease;
}
#page-content .dl-mirror:hover { background: var(--pw-tile2); }
.dl-mirror__mark { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 10px; background: var(--mark); color: #fff; font: 800 14px/1 var(--pw-font); }
.dl-mirror--google { --mark: #1a73e8; }
.dl-mirror--yandex { --mark: #fc3f1d; }
.dl-mirror--mail { --mark: #005ff9; }
.dl-mirror i { margin-left: auto; color: var(--pw-muted); font-style: normal; }
#page-content .dl-win7 { padding: 12px 16px; border-left: 3px solid var(--st-accent); border-radius: 4px 14px 14px 4px; background: rgba(255, 255, 255, .03); color: #c9cdd8; font-size: 14px; line-height: 1.45; }
.dl-win7 b { color: #fff; font-family: var(--pw-mono); font-size: 13px; font-weight: 600; }
.dl-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 14px; border-top: 1px solid var(--pw-line); }
.dl-date { display: inline-flex; align-items: center; gap: 8px; color: var(--pw-muted); font-size: 13px; }
.dl-date::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--st-accent); }
.dl-card__links { display: flex; flex-wrap: wrap; gap: 4px; }
#page-content .dl-card__links a { padding: 8px 14px; border-radius: 999px; color: #c9cdd8; font-size: 14px; font-weight: 600; transition: background .15s ease, color .15s ease; }
#page-content .dl-card__links a:hover { background: var(--pw-tile2); color: #fff; }
.dl-info { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; }
.dl-info .st-tile { display: grid; align-content: start; gap: 16px; padding: 26px; }
#page-content .dl-info h2 { font: 800 22px/1.1 var(--pw-font); }
#page-content .dl-info h3 { margin: 0; padding: 0; border: 0; background: none; color: #fff !important; text-transform: none; font: 700 16px/1.3 var(--pw-font); }
#page-content .dl-info p { color: #b8bdca; font-size: 14.5px; line-height: 1.5; }
.dl-steps ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#page-content .dl-steps li { display: flex; gap: 14px; padding: 16px !important; border-radius: 18px; background: rgba(255, 255, 255, .035); }
.dl-steps li > b { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--pw-lime); color: #111; font: 800 15px/1 var(--pw-mono); }
.dl-steps li div { display: grid; gap: 4px; }
.dl-notes ul { display: grid; gap: 14px; }
#page-content .dl-notes li { display: grid; gap: 4px; }
.dl-help a { color: var(--pw-ink); }

@media (max-width: 1080px) {
  .dl-servers, .dl-info { grid-template-columns: 1fr; }
  .st-races { grid-template-columns: 1fr; }
  .st-servers { grid-template-columns: 1fr; }
  .st-podium { grid-template-columns: 1fr 1fr; }
  .st-podium__card:first-child { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .st-head { flex-direction: column; align-items: stretch; padding: 22px; }
  .st-head__side { justify-items: start; }
  .st-tabs { border-radius: 18px; }
  .st-podium { grid-template-columns: 1fr; gap: 8px; }
  .st-podium__card {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "race rank" "name val" "guild label" "more more";
    gap: 2px 12px; min-height: 0; padding: 16px 18px !important;
  }
  .st-podium__card .st-race { grid-area: race; margin: 0 0 4px; }
  .st-podium__name { grid-area: name; font-size: 19px; }
  .st-podium__guild { grid-area: guild; }
  .st-podium__val { grid-area: val; align-self: end; margin: 0; padding: 0; font-size: 24px; text-align: right; }
  .st-podium__label { grid-area: label; text-align: right; font-size: 11px; }
  .st-podium__more { grid-area: more; margin-top: 6px; }
  .st-podium__rank,
  .st-podium__card:first-child .st-podium__rank { position: static; grid-area: rank; color: var(--pw-muted); font: 700 13px/1 var(--pw-mono); text-align: right; }
  .st-podium__rank::before { content: "#"; }
  .st-table > li { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 4px 10px; padding: 12px 10px !important; }
  .st-table__head { display: none !important; }
  .st-table .st-race { display: none; }
  .st-table .st-player b::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--race, var(--pw-muted)); vertical-align: middle; }
  .st-more { display: flex; flex-wrap: wrap; gap: 2px 14px; grid-column: 2 / -1; grid-row: 2; }
  .st-more .st-num { font-size: 12.5px; text-align: left; }
  .st-more .st-num::before { content: attr(data-label) " "; color: var(--pw-muted); font-family: var(--pw-font); }
  .dl-card, .dl-info .st-tile { padding: 20px; }
  #page-content .dl-card h2 { font-size: 36px; }
  .dl-mirrors ul, .dl-steps ol { grid-template-columns: 1fr; }
  .dl-card__foot { flex-direction: column; align-items: flex-start; }
  .dl-card__links { margin-left: -14px; }
  .st-kpis dd { font-size: 24px; }
  #page-content .st-server h2 { font-size: 36px; }
}