/* MAIN */

@font-face {
  font-family: 'PaluiSP';
  src: url(../fonts/PaluiSPDemo-Bold.woff2) format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'HelveticaNeueL';
  src: url(../fonts/HelveticaNeueLTW1G-Blk.woff2) format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

h1,
h3,
caption {
  font-family: 'PaluiSP';
  transform: skewX(-26deg);
  text-indent: 5px;
  align-self: auto;
}

p,
h4,
button {
  font-family: 'HelveticaNeueL';
}

input {
  font-family: 'HelveticaNeuel';
  padding: 5px;
}

form,
form * {
  cursor: default;
}

form button,
form a,
form [role='button'] {
  cursor: pointer;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #fff;
}

.hidden {
  display: none !important;
}

.server-list,
.leaderboard,
.stats,
.news,
#gameComingSoon {
  transition: opacity var(--game-transition) ease;
  will-change: opacity;
}

.game-fade {
  opacity: 0;
  pointer-events: none;
}

.units [data-sort-key],
.leaderboard-modal-units [data-sort-key],
.server-players .units [data-sort-key] {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.sort-arrow {
  display: inline-block;
  width: 14px;
  opacity: 0;
  transition: opacity var(--theme-transition) ease;
}

.sort-active .sort-arrow {
  opacity: 1;
}

body.theme-light .leaderboard-modal-units p,
body.theme-light .leaderboard-modal-units span,
body.theme-light .leaderboard-modal-current p,
body.theme-light .leaderboard-modal-table td {
  color: #111827;
}

::-webkit-scrollbar {
  width: 6px;
}

html,
body {
  height: 100%;
}

body {
  background-color: black;
  overflow: hidden;
}

:root {
  --theme-transition: 300ms;
  --game-transition: 320ms;
  --page-transition: 300ms;
  --lbm-col-place: 70px;
  --lbm-col-name: 220px;
  --lbm-col-stat: 100px;
  --lbm-table-width: calc(var(--lbm-col-place) + var(--lbm-col-name) + (var(--lbm-col-stat) * 4));
  --srv-col-place: 60px;
  --srv-col-avatar: 86px;
  --srv-col-name: 220px;
  --srv-col-stat: 100px;
  --srv-col-kd: 70px;
  --srv-table-width: calc(var(--srv-col-place) + var(--srv-col-avatar) + var(--srv-col-name) + (var(--srv-col-stat) * 3) + var(--srv-col-kd));
}

body {
  opacity: 1;
  transition: opacity var(--page-transition) ease;
}

body.page-fadeout {
  opacity: 0;
}

html.from-auth body {
  opacity: 0;
}

html.from-auth .nav-overlay {
  opacity: 1;
  visibility: visible;
  transition: none !important;
}

.nav-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--page-transition) ease, visibility 0s linear var(--page-transition);
  z-index: 5000;
}

body.theme-light .nav-overlay {
  background-color: #b8c1cf;
}

.nav-overlay.show {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transition: opacity var(--page-transition) ease, visibility 0s linear 0s;
}

.nav-overlay.instant {
  opacity: 1;
  visibility: visible;
  transition: none !important;
}

.nav-logo {
  font-family: 'PaluiSP';
  transform: skewX(-26deg);
  font-size: 50px;
  color: #fff;
  text-indent: 5px;
  line-height: 1;
  letter-spacing: normal;
  display: inline-block;
}

body.theme-light .nav-logo {
  color: #111827;
}

.nav-logo span {
  color: #EC6E20;
  font-size: 66px;
}

body,
header,
.game-choise,
.server-list,
.leaderboard,
.stats,
.news,
.modal-content,
.modal-window,
#language,
#mode,
#goToProfile,
#logoutBtn,
.leaderboard-header button,
.server-list .server,
.units,
.leaderboard td,
.stats .upper-panels div,
.lower-panels div,
.profile-content button,
.profile-content input,
.server-players .units,
.server-players .server-table td,
.server-players .server-footer button,
.copy,
.play,
.modal-content .close {
  transition: background-color var(--theme-transition) ease, color var(--theme-transition) ease, box-shadow var(--theme-transition) ease;
}

.server-list,
.leaderboard,
.stats,
.news {
  transition: opacity var(--game-transition) ease, background-color var(--theme-transition) ease, color var(--theme-transition) ease, box-shadow var(--theme-transition) ease;
}

body.theme-light {
  background-color: #b8c1cf;
}

/* === Light theme: глобальные оверрайды + иконки === */
body.theme-light,
body.theme-light p,
body.theme-light h1,
body.theme-light h2,
body.theme-light h3,
body.theme-light h4,
body.theme-light button,
body.theme-light td,
body.theme-light th,
body.theme-light a {
  color: #111827;
}

body.theme-light input {
  color: #111827;
}

body.theme-light input::placeholder {
  color: rgba(17, 24, 39, 0.65);
}

body.theme-light #language span,
body.theme-light #sortName span,
body.theme-light #sortFilter span {
  color: #111827;
}

body.theme-light #sortName:hover span,
body.theme-light #sortFilter:hover span {
  color: #EC6E20;
}

/* Active sort (light theme): ids are more specific than generic `.sort-active` */
body.theme-light #sortPlace.sort-active,
body.theme-light #sortName.sort-active,
body.theme-light #sortFilter.sort-active {
  color: #EC6E20;
}

body.theme-light #sortPlace.sort-active span,
body.theme-light #sortName.sort-active span,
body.theme-light #sortFilter.sort-active span {
  color: #EC6E20;
}

body.theme-light #sortPlace.sort-active .sort-arrow,
body.theme-light #sortName.sort-active .sort-arrow,
body.theme-light #sortFilter.sort-active .sort-arrow {
  color: #EC6E20;
}

body.theme-light .sort-arrow {
  color: #111827;
}

body.theme-light header,
body.theme-light .game-choise,
body.theme-light .server-list,
body.theme-light .leaderboard,
body.theme-light .stats,
body.theme-light .news,
body.theme-light .modal-content {
  background-color: #d6dbe6;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

body.theme-light #language,
body.theme-light #mode,
body.theme-light #goToProfile,
body.theme-light #logoutBtn,
body.theme-light .leaderboard-header button,
body.theme-light .server-list .server,
body.theme-light .units,
body.theme-light .leaderboard td,
body.theme-light .stats-panels > div,
body.theme-light .profile-content button,
body.theme-light .profile-content input,
body.theme-light .server-players .units,
body.theme-light .server-players .server-table td,
body.theme-light .server-players .server-footer button {
  background-color: #b8c1cf;
}

body.theme-light .modal-window {
  background-color: rgba(17, 24, 39, 0.35);
}

body.theme-light .copy,
body.theme-light .play,
body.theme-light .modal-content .close {
  background-color: #111827;
}

body.theme-light header h1 span,
body.theme-light .teamspeak-news span {
  color: #EC6E20;
}

body.theme-light .teamspeak-news,
body.theme-light .teamspeak-news p,
body.theme-light .teamspeak-news h3,
body.theme-light .teamspeak-news .dot {
  color: #fff;
}

body.theme-light .server-players .units p,
body.theme-light .server-players .units span,
body.theme-light .server-players .server-table td {
  color: #111827 !important;
}

body.theme-light .server-players .units .sort-active,
body.theme-light .server-players .units .sort-active span,
body.theme-light .server-players .units .sort-active .sort-arrow {
  color: #EC6E20 !important;
}

/* Light theme: hover must override !important base color */
body.theme-light .server-players .units [data-sort-key]:hover,
body.theme-light .server-players .units [data-sort-key]:hover span {
  color: #EC6E20 !important;
}

body.theme-light #language:hover,
body.theme-light #mode:hover,
body.theme-light #goToProfile:hover,
body.theme-light #logoutBtn:hover,
body.theme-light .leaderboard-header button:hover,
body.theme-light .profile-content button:hover,
body.theme-light .server-players .server-footer button:hover {
  background-color: #EC6E20;
}

.copy {
  grid-column: 4;
  grid-row: 2;
  mask: url('../images/copy.png') no-repeat center / contain;
  -webkit-mask: url('../images/copy.png') no-repeat center / contain;
  width: 26px;
  height: 26px;
  background-color: #fff;
}

.play {
  grid-column: 4;
  grid-row: 1;
  mask: url('../images/play.png') no-repeat center / contain;
  -webkit-mask: url('../images/play.png') no-repeat center / contain;
  width: 25px;
  height: 25px;
  background-color: #fff;
}

.play:hover {
  background-color: #EC6E20;
}

.copy:hover {
  background-color: #EC6E20;
}

body.theme-light .server-list .play:hover,
body.theme-light .server-list .copy:hover {
  background-color: #EC6E20;
}

/* === Header === */
header {
  width: 100%;
  height: 100px;
  display: grid;
  grid-template-columns: auto auto 298px 97px;
  background-color: #141414ff;
  padding: 0px 0px 0px 100px;
}

header h1 {
  margin: 0px 0px 0px 20px;
  font-size: 50px;
}

header h1 span {
  color: #EC6E20;
  font-size: 66px;
}

header h1 p {
  font-size: 22px;
  font-family: 'PaluiSP';
}

.profile {
  grid-column: 3;
  margin-left: 10px;
  padding-bottom: 10px;
  padding-top: 10px;
  display: grid;
  grid-template-columns: 64px auto;
  grid-template-rows: auto auto;
  gap: 10px;
  row-gap: 0;
  align-items: center;
}

.profile img {
  border-radius: 6px;
  grid-row: span 2;
  align-self: flex-end;
}

.profile p {
  justify-self: start;
  align-self: flex-end;
  font-size: 16px;
}

#headerNickname {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}

.profile-actions {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  gap: 8px;
  align-self: end;
}

.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;
}

#goToProfile {
  width: 100px;
  height: 35px;
  padding: 5px 10px 5px 10px;
  background-color: #0a0a0aff;
  border-radius: 6px;
  border: none;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#goToProfile:hover {
  background-color: #EC6E20;
}

#logoutBtn {
  width: 72px;
  height: 35px;
  padding: 5px 10px 5px 10px;
  background-color: #0a0a0aff;
  border-radius: 6px;
  border: none;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#logoutBtn:hover {
  background-color: #EC6E20;
}

.logout-icon {
  width: 18px;
  height: 18px;
  mask: url('../images/logout.png') no-repeat center / contain;
  -webkit-mask: url('../images/logout.png') no-repeat center / contain;
  background-color: #fff;
}

body.theme-light .logout-icon {
  background-color: #111827;
}

#logoutBtn:hover .logout-icon {
  background-color: #fff;
}

body.theme-light #logoutBtn:hover .logout-icon {
  background-color: #111827;
}

header .buttons {
  grid-column: 4;
  margin: 0px 25px 0px 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

#language {
  width: 72px;
  padding: 5px 10px 5px 10px;
  border: none;
  display: flex;
  align-items: end;
  gap: 5px;
  border-radius: 6px;
  font-size: 16px;
  background-color: #0a0a0aff;
}

#language:hover {
  background-color: #EC6E20;
}

#mode {
  width: 72px;
  padding: 5px 10px 5px 10px;
  border: none;
  display: flex;
  justify-content: center;
  gap: 5px;
  border-radius: 6px;
  font-size: 16px;
  background-color: #0a0a0aff;
}

#mode:hover {
  background-color: #EC6E20;
}

/* === Фон/лейаут/выбор игры === */
.background-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  opacity: 1;
  pointer-events: none;
  transition: opacity var(--theme-transition) ease;
}

.game-coming-soon {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) skewX(-26deg);
  z-index: 2;
  font-family: 'PaluiSP';
  font-size: 42px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 1;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity var(--game-transition) ease;
  text-shadow: -2px -2px 0 #000, 0 -2px 0 #000, 2px -2px 0 #000, -2px 0 0 #000, 2px 0 0 #000, -2px 2px 0 #000, 0 2px 0 #000, 2px 2px 0 #000;
}

body.theme-light .game-coming-soon {
  color: #111827;
  text-shadow: -2px -2px 0 #d6dbe6, 0 -2px 0 #d6dbe6, 2px -2px 0 #d6dbe6, -2px 0 0 #d6dbe6, 2px 0 0 #d6dbe6, -2px 2px 0 #d6dbe6, 0 2px 0 #d6dbe6, 2px 2px 0 #d6dbe6;
}

.content {
  width: 100%;
  height: calc(100vh - 100px);
  min-height: 0;
  display: grid;
  padding: 15px;
  gap: 15px;
  grid-template-columns: 70px 380px auto 380px;
  grid-template-rows: 200px minmax(0, 1fr);
  overflow: hidden;
}

.game-choise,
.server-list,
.leaderboard,
.leaderboard-table,
.stats,
.news {
  min-height: 0;
}

.game-choise {
  width: 100%;
  height: 100%;
  padding: 5px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-items: start;
  grid-row: span 2;
  gap: 5px;
  background-color: #141414ff;
}

.game-choise button {
  background: none;
  border: none;
}

.game-choise button img:hover {
  box-shadow: 0 0 0 3px rgba(236, 110, 32, 1);
}

.game-choise button img {
  border-radius: 6px;
  box-shadow: 0 0 0 0 rgba(236, 110, 32, 0);
  transition: box-shadow var(--theme-transition) ease;
}

/* === ServerList === */
.server-list {
  width: 380px;
  height: 100%;
  padding: 10px;
  grid-column: 2;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #141414ff;
  color: #ffffff;
}

.server-list .server {
  width: 100%;
  height: 60px;
  border-radius: 6px;
  background-color: #0a0a0aff;
  display: flex;
  flex-direction: row;
  box-shadow: 0 0 0 0 rgba(236, 110, 32, 0);
  transition: box-shadow var(--theme-transition) ease;
}

.server-list .server:hover {
  box-shadow: 0 0 0 3px rgba(236, 110, 32, 1);
}

.server-list .server .info {
  width: 100%;
  height: 70px;
  display: grid;
  grid-template-columns: 40px auto auto;
  grid-template-rows: auto auto;
  padding: 10px;
  align-items: center;
}

.server-list .server .info .ping {
  grid-column: 1;
  grid-row: 1;
}

.server-list .server .info .server-name {
  grid-column: 2;
  grid-row: 1;
}

.server-list .server .info .map-name {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  align-items: center;
}

.server-list .server .info .map-name .map {
  margin-bottom: 6px;
}

.server-list .server .info .players {
  grid-column: 3;
  grid-row: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: auto;
}

.server-list .server .info .players img {
  margin-bottom: 6px;
}

.server-list .server .buttons {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 5px;
}

.server-soon {
  height: 60px;
}

.server-list .server.server-soon .info {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  grid-template-columns: none;
  grid-template-rows: none;
}

.server-soon-text {
  font-family: 'PaluiSP';
  transform: skewX(-26deg);
  text-indent: 5px;
  font-size: 18px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffffff;
  white-space: nowrap;
  text-align: center;
  line-height: 1;
}

body.theme-light .server-soon-text {
  color: #111827;
}

/* === Leaderboard === */
.leaderboard {
  width: 100%;
  height: 100%;
  grid-column: 2;
  grid-row: 2;
  border-radius: 6px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  background-color: #141414ff;
}

.leaderboard-header {
  display: grid;
  grid-template-columns: repeat(2, auto);
  margin: 0;
  gap: 12px;
  width: 100%;
}

.leaderboard-header h3 {
  padding-bottom: 5px;
}

.leaderboard-header button {
  border-radius: 6px;
  background-color: #0a0a0aff;
  border: none;
}

.leaderboard-header button:hover {
  background-color: #EC6E20;
}

.units {
  height: 24px;
  grid-column: span 2;
  display: grid;
  grid-template-columns: 85px 180px 88px;
  text-align: center;
  align-items: center;
  background-color: #0a0a0aff;
  border-radius: 6px;
}

.leaderboard-header .units p:hover {
  color: #EC6E20;
}

.leaderboard-header .units p:hover span {
  color: #EC6E20;
}

body.theme-light .leaderboard-header .units p:hover,
body.theme-light .leaderboard-header .units p:hover span {
  color: #EC6E20;
}

/* Active sort highlight (like server modal) */
.units .sort-active,
.units .sort-active span,
.units .sort-active .sort-arrow {
  color: #EC6E20;
}

.leaderboard-modal-units .sort-active,
.leaderboard-modal-units .sort-active span,
.leaderboard-modal-units .sort-active .sort-arrow {
  color: #EC6E20;
}

/* Light theme: span color overrides are more specific */
body.theme-light .leaderboard-modal-units .sort-active,
body.theme-light .leaderboard-modal-units .sort-active span,
body.theme-light .leaderboard-modal-units .sort-active .sort-arrow {
  color: #EC6E20;
}

.current-place {
  height: 24px;
  grid-column: span 2;
  display: grid;
  grid-template-columns: 85px 180px 88px;
  text-align: center;
  align-items: center;
  background-color: #EC6E20;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  opacity: 1;
  max-height: 24px;
  transition: opacity var(--theme-transition) ease, max-height var(--theme-transition) ease;
}

.current-place.out-of-view {
  opacity: 0;
  max-height: 0;
  pointer-events: none;
}

.leaderboard-table {
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.leaderboard-table::-webkit-scrollbar {
  width: 7px;
}

.leaderboard-table::-webkit-scrollbar-thumb {
  background: #ffffff;
  border-radius: 6px;
}

body.theme-light .leaderboard-table::-webkit-scrollbar-thumb {
  background: #111827;
}

.leaderboard-modal {
  width: 740px;
  max-width: calc(100vw - 40px);
  padding: 14px;
}

.leaderboard-modal-header {
  display: grid;
  grid-template-columns: 1fr 30px;
  align-items: center;
  margin-bottom: 12px;
}

.leaderboard-modal-header h3 {
  justify-self: center;
}

.leaderboard-modal-units {
  height: 24px;
  display: grid;
  grid-template-columns: var(--lbm-col-place) var(--lbm-col-name) repeat(4, var(--lbm-col-stat));
  text-align: center;
  align-items: center;
  background-color: #0a0a0aff;
  border-radius: 6px;
  margin-bottom: 12px;
  width: var(--lbm-table-width);
  margin-left: auto;
  margin-right: auto;
}

.leaderboard-modal-units .lb-sort:hover {
  color: #EC6E20;
  cursor: pointer;
}

.leaderboard-modal-units .lb-sort:hover span {
  color: #EC6E20;
}

body.theme-light .leaderboard-modal-units .lb-sort:hover,
body.theme-light .leaderboard-modal-units .lb-sort:hover span {
  color: #EC6E20;
}

.server-players .units [data-sort-key]:hover span {
  color: #EC6E20;
}

.leaderboard-modal-current {
  height: 24px;
  display: grid;
  grid-template-columns: var(--lbm-col-place) var(--lbm-col-name) repeat(4, var(--lbm-col-stat));
  text-align: center;
  align-items: center;
  background-color: #EC6E20;
  border-radius: 6px;
  margin-bottom: 0;
  cursor: pointer;
  overflow: hidden;
  opacity: 1;
  max-height: 24px;
  transition: opacity var(--theme-transition) ease, max-height var(--theme-transition) ease;
  width: var(--lbm-table-width);
  margin-left: auto;
  margin-right: auto;
}

.leaderboard-modal-current.out-of-view {
  opacity: 0;
  max-height: 0;
  pointer-events: none;
}

.leaderboard-modal-table {
  overflow-y: auto;
  max-height: 60vh;
  scrollbar-gutter: stable;
}

.units,
.current-place,
.leaderboard-modal-units,
.leaderboard-modal-current {
  padding-right: 0;
}

.units,
.current-place {
  padding-right: var(--lb-main-scrollbar, 0px);
}

.leaderboard-modal-units,
.leaderboard-modal-current {
  padding-right: var(--lb-modal-scrollbar, 0px);
}

.leaderboard-modal-units p,
.leaderboard-modal-current p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-modal-table::-webkit-scrollbar {
  width: 7px;
}

.leaderboard-modal-table::-webkit-scrollbar-thumb {
  background: #ffffff;
  border-radius: 6px;
}

body.theme-light .leaderboard-modal-units {
  background-color: #b8c1cf;
}

body.theme-light .leaderboard-modal-table::-webkit-scrollbar-thumb {
  background: #111827;
}

.leaderboard-modal-table td {
  font-family: 'HelveticaNeuel';
  background-color: #0a0a0aff;
  padding-top: 5px;
  text-align: center;
}

body.theme-light .leaderboard-modal-table td {
  background-color: #b8c1cf;
}

.leaderboard-table tr.current-user td,
.leaderboard-modal-table tr.current-user td {
  background-color: #EC6E20 !important;
}

.current-place p,
.leaderboard-modal-current p {
  font-family: 'HelveticaNeuel';
  padding-top: 5px;
}

.leaderboard-modal-table table {
  width: var(--lbm-table-width);
  height: auto;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0px 12px;
  margin-right: 0;
  margin-left: auto;
  margin-right: auto;
}

body.theme-light .ping img,
body.theme-light .map-name img.map,
body.theme-light .players img,
body.theme-light .server-players .server-footer img {
  filter: invert(1) hue-rotate(180deg);
}

.leaderboard td,
th {
  width: auto;
  font-family: 'HelveticaNeuel';
  text-align: left;
  background-color: #0a0a0aff;
  padding-top: 5px;
  text-align: center;
}

tr th:first-child {
  border-top-left-radius: 6px;
}
tr th:first-child {
  border-bottom-left-radius: 6px;
}
tr th:last-child {
  border-top-right-radius: 6px;
}
tr th:last-child {
  border-bottom-right-radius: 6px;
}
tr td:first-child {
  border-top-left-radius: 6px;
}
tr td:first-child {
  border-bottom-left-radius: 6px;
}
tr td:last-child {
  border-top-right-radius: 6px;
}
tr td:last-child {
  border-bottom-right-radius: 6px;
}

.leaderboard table {
  border-collapse: collapse;
  margin-right: 0;
}

.leaderboard .current-place td {
  background-color: #EC6E20;
}

.leaderboard-table table {
  width: 100%;
  height: auto;
  border-collapse: separate;
  border-spacing: 0px 12px;
  margin-right: 0;
}

/* === Stats === */
.stats {
  width: 100%;
  height: 200px;
  grid-column: 4;
  grid-row: 1;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #141414ff;
  padding: 10px;
}

.stats-panels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 15px;
  margin-top: 10px;
}

.stats-panels > div {
  background-color: #0a0a0aff;
  padding: 10px;
  text-align: center;
  border-radius: 6px;
}

.stats-panels .wins-panel {
  grid-column: 2;
  grid-row: 2;
  justify-self: center;
  width: 100%;
  max-width: 220px;
}

.stats p {
  font-size: 22px;
}

/* === News + Toast === */
.news {
  width: 100%;
  height: 120px;
  grid-column: 4;
  grid-row: 2;
  border-radius: 6px;
  background-color: #141414ff;
  padding: 10px;
}

.news:hover {
  background-color: #EC6E20;
}

body.theme-light .news:hover {
  background-color: #EC6E20;
}

.teamspeak-news {
  height: 100%;
  background: linear-gradient(to right, #0c2844, #11568e);
  border-radius: 3px;
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(2, auto);
}

.teamspeak-news img {
  grid-column: 1;
  grid-row: span 2;
  align-self: center;
  justify-self: center;
}

.teamspeak-news p {
  grid-column: 2;
  grid-row: 1;
  align-self: self-end;
  justify-self: center;
}

.teamspeak-news .address {
  grid-column: 2;
  grid-row: 2;
  align-self: self-start;
  justify-self: center;
  justify-content: center;
  align-items: end;
  gap: 0;
  display: flex;
  font-size: 20px;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  background-color: rgba(10, 10, 10, 0.88);
  color: #fff;
  border-radius: 8px;
  padding: 10px 14px;
  font-family: 'HelveticaNeueL';
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  transition: opacity var(--theme-transition) ease, background-color var(--theme-transition) ease, color var(--theme-transition) ease, box-shadow var(--theme-transition) ease;
  z-index: 3000;
}

.toast.show {
  opacity: 1;
}

body.theme-light .toast {
  background-color: rgba(214, 219, 230, 0.94);
  color: #111827;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

.teamspeak-news h3 {
  font-size: 20px;
}

.teamspeak-news span {
  color: #EC6E20;
  font-size: 27px;
}

.teamspeak-news .dot {
  transform: skewX(-20deg);
  font-family: 'HelveticaNeueL';
  color: #fff;
}

/* === Modal windows (base/profile/server) === */
.modal-window {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1000;
  background-color: #0a0a0acc;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--theme-transition) ease, visibility 0s linear var(--theme-transition);
}

.modal-window.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--theme-transition) ease, visibility 0s linear 0s;
}

.modal-content {
  position: relative;
  width: auto;
  height: auto;
  background-color: #141414ff;
  border-radius: 6px;
}

.modal-content .close {
  position: absolute;
  top: 0;
  right: 0;
  mask: url('../images/cross.png') no-repeat center / contain;
  -webkit-mask: url('../images/cross.png') no-repeat center / contain;
  width: 30px;
  height: 30px;
  z-index: 2000;
  background-color: #fff;
}

.modal-content a:hover {
  background-color: #EC6E20;
}

.profile-content {
  width: 380px;
  display: grid;
  grid-template-columns: 160px auto;
  grid-template-rows: 30px 160px auto;
  gap: 15px;
  margin: 20px;
}

.profile-content h3 {
  grid-column: span 3;
  grid-row: 1;
  justify-self: center;
}

.profile-content img {
  border-radius: 6px;
  grid-column: 1;
  grid-row: 2;
}

.profile-content .change-info {
  grid-column: span 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.profile-content .change-info div {
  display: flex;
  flex-direction: column;
}

.profile-content .change-info p {
  margin-left: 5px;
  font-size: 14px;
}

.profile-content .change-info button {
  margin-top: auto;
}

.profile-content .change-info input {
  margin-bottom: 5px;
}

.profile-content button {
  height: 30px;
  background-color: #0a0a0aff;
  border: none;
  border-radius: 6px;
  padding: 6px;
}

.profile-content button:hover {
  background-color: #EC6E20;
}

.profile-content input {
  height: 30px;
  background-color: #0a0a0aff;
  border: none;
  border-radius: 6px;
  outline: none;
  cursor: default;
  user-select: text;
  -webkit-user-select: text;
  box-shadow: 0 0 0 0 rgba(236, 110, 32, 0);
  transition: box-shadow 300ms ease, background-color var(--theme-transition) ease;
}

body.theme-light .profile-content input {
  color: #111827;
}

.profile-content input:hover {
  background-color: #0a0a0aff;
  box-shadow: 0 0 0 3px rgba(236, 110, 32, 1);
}

.profile-content input:focus {
  background-color: #0a0a0aff;
  box-shadow: 0 0 0 3px rgba(236, 110, 32, 1);
}

.profile-content .connect-steam input:focus {
  background-color: #0a0a0aff;
  box-shadow: 0 0 0 3px rgba(236, 110, 32, 1);
}

.theme-light .profile-content input:hover {
  background-color: #b8c1cf;
  box-shadow: 0 0 0 3px rgba(236, 110, 32, 1);
}

body.theme-light .profile-content input:focus,
html.theme-light .profile-content input:focus {
  background-color: #b8c1cf;
  box-shadow: 0 0 0 3px rgba(236, 110, 32, 1);
}

body.theme-light .profile-content .connect-steam input:focus {
  background-color: #b8c1cf;
  box-shadow: 0 0 0 3px rgba(236, 110, 32, 1);
}

.profile-content .change-nickname input:focus {
  background-color: #0a0a0aff;
  box-shadow: 0 0 0 3px rgba(236, 110, 32, 1);
}

body.theme-light .profile-content .change-nickname input:focus {
  background-color: #b8c1cf;
  box-shadow: 0 0 0 3px rgba(236, 110, 32, 1);
}

.profile-content .show-id input:focus {
  background-color: #0a0a0aff;
  outline: none;
  box-shadow: 0 0 0 0 rgba(236, 110, 32, 0);
}

body.theme-light .profile-content .show-id input:focus {
  background-color: #b8c1cf;
  outline: none;
}

body.theme-light .profile-content .show-id input:focus {
  box-shadow: 0 0 0 0 rgba(236, 110, 32, 0);
}

.profile-content .connect-steam {
  grid-column: span 3;
  grid-row: 3;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.modal-inline-message {
  min-height: 18px;
  margin-top: 4px;
  font-family: 'HelveticaNeueL';
  font-size: 14px;
  color: #ff7a7a; /* default: error */
}

/* Light theme can be applied either on <body> or <html> (defensive selectors). */
body.theme-light .modal-inline-message,
html.theme-light .modal-inline-message,
.theme-light .modal-inline-message {
  color: #b91c1c;
}

/* Steam save feedback */
.modal-inline-message.success {
  color: #4ade80;
}

body.theme-light .modal-inline-message.success,
html.theme-light .modal-inline-message.success,
.theme-light .modal-inline-message.success {
  color: #15803d;
}

.profile-content .connect-steam p {
  align-self: center;
  margin-top: 20px;
}

.profile-content .connect-steam #inputContainer {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.profile-content .connect-steam .input-wrapper {
  display: flex;
  align-self: center;
  gap: 10px;
  width: 100%;
}

.profile-content .connect-steam button {
  width: 36px;
  align-self: self-end;
}

.profile-content .connect-steam input {
  width: 334px;
}

.server-players {
  display: flex;
  flex-direction: column;
  margin: 20px;
}

.server-players .server-header {
  display: grid;
  grid-template-rows: 30px auto;
  gap: 12px;
  align-items: start;
}

.server-players .server-header h3 {
  grid-column: 2;
}

.server-players .units {
  height: 24px;
  grid-column: span 3;
  grid-row: 2;
  display: grid;
  grid-template-columns: var(--srv-col-place) var(--srv-col-avatar) var(--srv-col-name) repeat(3, var(--srv-col-stat)) var(--srv-col-kd);
  text-align: center;
  align-items: center;
  background-color: #0a0a0aff;
  border-radius: 6px;
  width: var(--srv-table-width);
  margin-left: auto;
  margin-right: auto;
}

.server-players .units [data-sort-key]:hover {
  color: #EC6E20;
}

.server-players .units p,
.server-players .units span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.server-players .server-table {
  overflow-y: auto;
  height: 100%;
  scrollbar-gutter: stable;
}

.server-players .server-table::-webkit-scrollbar {
  width: 7px;
}

.server-players .server-table::-webkit-scrollbar-thumb {
  background: #ffffff;
  border-radius: 6px;
}

.server-players .server-table td {
  height: auto;
  font-family: 'HelveticaNeuel';
  background-color: #0a0a0aff;
  text-align: center;
  vertical-align: middle;
}

/* Server modal: status rows (loading/no players/no data) */
.server-players .server-table tr.status-row td.status-cell {
  padding: 10px 0;
  text-align: center;
}

.server-players .server-table img {
  display: block;
  margin: auto;
}

.server-players .server-table table {
  width: var(--srv-table-width);
  height: auto;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0px 12px;
  margin-right: 0;
  margin-left: auto;
  margin-right: auto;
}

.server-players .server-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.server-players .server-footer button {
  display: flex;
  align-items: center;
  text-align: center;
  background-color: #0a0a0acc;
  border-radius: 6px;
  border: none;
  padding: 5px;
}

.server-players .server-footer button:hover {
  background-color: #EC6E20;
}