/* Cachefeste Gestaltungsschicht fuer die EIA-Serverzentrale. */
body[data-stat-page="teamspeak"] .ts-page-hero::after {
  content: "PASSWÖRTER BLEIBEN PRIVAT  //  INTERNE ADRESSEN BLEIBEN INTERN";
}

.game-server-section {
  max-width: none;
  padding-top: 104px;
  padding-bottom: 96px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  background:
    radial-gradient(circle at 83% 8%, rgba(255, 140, 55, .12), transparent 31rem),
    linear-gradient(180deg, #0b0d0f, #060809);
}

.game-server-section > * {
  width: min(100%, 1380px);
  margin-right: auto;
  margin-left: auto;
}

.game-server-intro em {
  color: #ff9e57;
  font-style: normal;
}

.game-server-intro > p,
.ts-section-intro > p {
  max-width: 520px;
  color: #aaa9a4;
}

.game-server-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, .13);
  background:
    radial-gradient(circle at 93% -8%, rgba(255, 139, 54, .18), transparent 39%),
    linear-gradient(145deg, rgba(22, 27, 30, .99), rgba(7, 9, 10, .99));
  box-shadow: 0 30px 76px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .025);
}

.game-server-card::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(#ffb168, #ff5a1f);
  box-shadow: 0 0 30px rgba(255, 90, 31, .48);
}

.game-server-card-detail {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(520px, 1.2fr);
  grid-template-areas:
    "head head"
    "title metrics"
    "title connect"
    "stale stale";
  gap: 0 40px;
  padding: 38px 42px 40px;
}

.game-server-card-detail::after {
  content: "ENS";
  position: absolute;
  right: 20px;
  bottom: -72px;
  color: rgba(255, 255, 255, .024);
  font-family: Impact, "Arial Black", sans-serif;
  font-size: 220px;
  letter-spacing: 7px;
  pointer-events: none;
}

.game-server-card[data-state="online"] {
  border-color: rgba(101, 223, 114, .24);
}

.game-live-head {
  grid-area: head;
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.game-live-identity {
  display: flex;
  align-items: center;
  gap: 14px;
}

.game-live-identity small,
.game-server-title small {
  display: block;
  color: #ffab68;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1.8px;
}

.game-live-identity strong {
  display: block;
  margin-top: 3px;
  font-size: 18px;
  letter-spacing: 1.8px;
}

.game-live-slots {
  display: flex;
  align-items: baseline;
  white-space: nowrap;
}

.game-live-slots strong {
  color: #fff4e9;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1;
  text-shadow: 0 0 28px rgba(255, 120, 45, .28);
}

.game-live-slots span {
  color: #9ca0a2;
  font-size: 11px;
  font-weight: 800;
}

.game-server-title {
  grid-area: title;
  position: relative;
  z-index: 1;
  align-self: center;
  min-width: 0;
  padding: 31px 0 18px;
}

.game-server-title h2,
.game-server-title h3 {
  margin: 6px 0 12px;
  text-wrap: balance;
}

.game-server-title h2 {
  font-size: clamp(42px, 4.7vw, 68px);
  line-height: .95;
  letter-spacing: -2.5px;
}

.game-server-title h3 {
  font-size: clamp(28px, 3.2vw, 39px);
  letter-spacing: -1.2px;
}

.game-server-title p {
  max-width: 430px;
  margin: 0;
  color: #b6b8b5;
}

.game-server-metrics {
  grid-area: metrics;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-self: end;
  margin-top: 28px;
}

.game-server-metric {
  min-width: 0;
  min-height: 78px;
  padding: 15px 16px;
  border: 1px solid rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .03);
}

.game-server-metric span {
  display: block;
  color: #848a8d;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 1.4px;
}

.game-server-metric strong {
  display: block;
  overflow: hidden;
  margin-top: 7px;
  color: #f1ede5;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-server-connect {
  grid-area: connect;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 18px;
  margin-top: 10px;
  padding: 16px;
  border: 1px solid rgba(118, 220, 232, .18);
  background: rgba(7, 17, 19, .7);
}

.game-server-connect > div { min-width: 0; }

.game-server-connect span {
  display: block;
  color: #858c8f;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 1.2px;
}

.game-server-connect code {
  display: block;
  overflow: hidden;
  margin-top: 5px;
  color: #dce7e4;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-copy-button {
  min-height: 48px;
  color: #fff;
}

.game-copy-button:disabled {
  cursor: not-allowed;
  opacity: .48;
}

.game-copy-feedback {
  grid-column: 1 / -1;
  color: #9ba19e !important;
  letter-spacing: .45px !important;
}

.game-server-stale {
  grid-area: stale;
  margin: 16px 0 0;
  color: #f0ae75;
  font-size: 11px;
}

.game-server-security {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) repeat(3, auto);
  gap: 12px 28px;
  align-items: center;
  margin-top: 14px;
  padding: 15px 18px;
  border: 1px solid rgba(101, 223, 114, .16);
  background: rgba(101, 223, 114, .04);
  color: #b3bbb1;
  font-size: 9px;
  letter-spacing: 1.05px;
}

.game-server-security strong { color: #86df90; }
.game-server-security span::before { content: "✓"; margin-right: 7px; color: #65df72; }

.home-server-stack {
  min-width: 0;
  display: grid;
  gap: 13px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-top: 3px solid #ff7430;
  background: rgba(5, 8, 9, .89);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .54);
  backdrop-filter: blur(14px);
}

.home-server-stack-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 4px 18px;
  padding: 3px 4px 10px;
}

.home-server-stack-head small {
  grid-column: 1 / -1;
  color: #ff9f62;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1.8px;
}

.home-server-stack-head h3 {
  margin: 0;
  font-size: clamp(22px, 2.7vw, 33px);
  letter-spacing: -1.2px;
}

.home-server-stack-head a {
  color: #f0a26d;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1.2px;
  white-space: nowrap;
}

.home-server-stack .ts-widget,
.home-server-stack .game-server-card {
  border-top: 1px solid rgba(255, 255, 255, .13);
  box-shadow: none;
}

.home-server-stack #ts-live .ts-channel-tree { display: none; }
.home-server-stack #ts-live .ts-metrics { margin-bottom: 0; }
.game-server-card-home .game-server-metrics { grid-template-columns: 1fr 1fr; }
.game-server-card-home .game-server-connect { grid-template-columns: 1fr; }
.game-server-card-home .game-copy-button { width: 100%; }

.satisfactory-home-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px 17px;
  border: 1px solid rgba(240, 200, 79, .2);
  border-left: 4px solid #f0c84f;
  background: linear-gradient(120deg, rgba(240, 200, 79, .08), rgba(255, 255, 255, .018) 55%, transparent);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.satisfactory-home-card:is(:hover, :focus-visible) {
  transform: translateY(-2px);
  border-color: rgba(240, 200, 79, .52);
  background: linear-gradient(120deg, rgba(240, 200, 79, .13), rgba(255, 255, 255, .025) 55%, transparent);
}

.satisfactory-home-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(240, 200, 79, .5);
  color: #f3d774;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .5px;
}

.satisfactory-home-card > span:nth-child(2) { min-width: 0; display: grid; }
.satisfactory-home-card small { color: #d9bb55; font-size: 7px; font-weight: 900; letter-spacing: 1.2px; }
.satisfactory-home-card strong { margin: 3px 0; color: #f2efe6; font-size: 19px; line-height: 1; }
.satisfactory-home-card em { overflow: hidden; color: #92978f; font-size: 9px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.satisfactory-home-card > b { color: #f0ca59; font-size: 8px; letter-spacing: 1px; white-space: nowrap; }

.eia-live-bar a[data-server-state="online"] b { color: #79e383; }
.eia-live-bar a[data-server-state="offline"] b { color: #b4b6b2; }
.eia-live-bar[data-state="error"] > a[data-independent-status] { display: flex; }

@media(max-width:1050px) {
  .game-server-card-detail {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "title" "metrics" "connect" "stale";
    gap: 0;
  }
  .game-server-title { align-self: auto; }
  .home-enlist .home-server-stack { max-width: 760px; }
}

@media(max-width:790px) {
  .game-server-section { padding: 82px 20px 76px; }
  .game-server-card-detail { padding: 28px 24px; }
  .game-server-security { grid-template-columns: 1fr 1fr; }
  .game-server-security strong { grid-column: 1 / -1; }
}

@media(max-width:540px) {
  .home-server-stack { padding: 12px; }
  .home-server-stack-head { grid-template-columns: 1fr; }
  .home-server-stack-head a { white-space: normal; }
  .satisfactory-home-card { grid-template-columns: 46px minmax(0, 1fr); padding: 14px; }
  .satisfactory-home-mark { width: 40px; height: 40px; }
  .satisfactory-home-card > b { grid-column: 2; }
  .satisfactory-home-card em { white-space: normal; }
  .game-server-card { padding: 22px 19px; }
  .game-server-card-detail::after { display: none; }
  .game-live-head { align-items: flex-start; gap: 12px; }
  .game-live-slots { display: block; text-align: right; }
  .game-live-slots strong { font-size: 31px; }
  .game-live-slots span { display: block; font-size: 8px; }
  .game-server-metrics,
  .game-server-card-home .game-server-metrics { grid-template-columns: 1fr; }
  .game-server-connect { grid-template-columns: 1fr; }
  .game-copy-button { width: 100%; }
  .game-server-security { grid-template-columns: 1fr; }
  .game-server-security strong { grid-column: auto; }
}

@media(prefers-reduced-motion:reduce) {
  .game-server-card .status-light.is-online { animation: none; }
  .satisfactory-home-card { transition: none; }
}