:root {
  --bg: #101112;
  --panel: #17191c;
  --panel-2: #0c0d0f;
  --line: #2b2f35;
  --text: #e8edf3;
  --muted: #8b95a3;
  --accent: #f2a51a;
  --blue: #1787ff;
  --blue-2: #58bdff;
  --danger: #c63939;
  --shell-bg: #1f2329;
  --shadow: 0 18px 45px rgba(0, 0, 0, .55);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font: 14px/1.5 Arial, Helvetica, sans-serif;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .08), transparent 28rem),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(#202225, #0d0e10 34rem, #08090a);
  background-size: auto, 48px 48px, auto;
}

a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; object-fit: cover; }

.page-shell {
  width: min(1180px, calc(100% - 28px));
  margin: 0 auto;
  padding: 34px 0 22px;
}

.site-header {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 150px;
  aspect-ratio: 1440 / 250;
  padding: 16px 14px;
  border: 1px solid rgba(84, 96, 112, .28);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  overflow: visible;
  background:
    linear-gradient(180deg, rgba(8, 10, 13, .18), rgba(8, 10, 13, .72)),
    url("../../banner.png") center / cover no-repeat,
    var(--shell-bg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    inset 0 0 38px rgba(255, 255, 255, .025);
}

.main-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

.main-nav a {
  position: relative;
  padding: 18px 18px;
  min-width: 92px;
  text-align: center;
  color: #d8e2ec;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  border: 1px solid rgba(92, 106, 124, .28);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(35, 40, 48, .72), rgba(17, 20, 25, .58));
  box-shadow:
    0 8px 18px rgba(0, 0, 0, .20),
    inset 0 1px 0 rgba(255, 255, 255, .07);
  transition: color .18s ease, text-shadow .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.main-nav a:first-child {
  border-left-color: rgba(92, 106, 124, .28);
}

.main-nav a:hover {
  border-color: rgba(88, 189, 255, .42);
  background: linear-gradient(180deg, rgba(42, 53, 64, .88), rgba(18, 42, 70, .70));
  box-shadow:
    0 10px 24px rgba(0, 0, 0, .30),
    0 0 18px rgba(23, 135, 255, .18),
    inset 0 1px 0 rgba(255, 255, 255, .10);
}

.main-nav a:hover,
.btn:hover {
  color: #fff;
  text-shadow: 0 0 12px rgba(88, 189, 255, .95), 0 0 24px rgba(23, 135, 255, .72);
}

.main-nav a::after,
.btn::after {
  content: "";
  position: absolute;
  inset: auto 12px 10px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--blue-2), transparent);
  opacity: 0;
  transform: scaleX(.4);
  transition: opacity .18s ease, transform .18s ease;
}

.main-nav a:hover::after,
.btn:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 24px;
  margin-top: 0;
  padding: 22px;
  border: 1px solid rgba(84, 96, 112, .28);
  border-top: 0;
  border-radius: 8px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  background: var(--shell-bg);
  box-shadow:
    0 26px 70px rgba(0, 0, 0, .58),
    inset 0 0 38px rgba(255, 255, 255, .025);
}

.panel,
.side-panel,
.hero,
.form-card,
.admin-nav {
  border: 1px solid #252a31;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(33,36,41,.96), rgba(11,12,14,.98));
  box-shadow:
    0 18px 42px rgba(0, 0, 0, .48),
    0 2px 0 rgba(255, 255, 255, .025),
    inset 0 1px 0 rgba(255, 255, 255, .055);
}

.hero {
  min-height: 260px;
  display: flex;
  align-items: end;
  padding: 34px;
  margin-bottom: 24px;
  background:
    linear-gradient(90deg, rgba(7,8,9,.55), rgba(7,8,9,.1)),
    url("https://images.unsplash.com/photo-1542751371-adc38448a05e?auto=format&fit=crop&w=1400&q=80") center/cover;
}

.hero h1 {
  max-width: 620px;
  margin: 0 0 10px;
  font-size: clamp(34px, 5vw, 58px);
  line-height: .95;
  text-transform: uppercase;
}

.hero p { max-width: 560px; color: #d8dde5; }
.eyebrow { color: var(--accent); text-transform: uppercase; font-weight: 800; letter-spacing: 0; }

.panel,
.side-panel { padding: 18px; margin-bottom: 24px; }

.content-column > :last-child,
.right-column > :last-child {
  margin-bottom: 0;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

h1, h2, h3 { margin: 0; text-transform: uppercase; }
h2 { font-size: 17px; }
h3 { font-size: 13px; }
p { color: var(--muted); }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.gallery-grid.wide { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.inline-form + .gallery-grid { margin-top: 28px; }
.gallery-grid article { min-width: 0; }
.gallery-grid img { height: 118px; border: 1px solid #30343a; box-shadow: 0 12px 22px rgba(0,0,0,.42); }
.gallery-lightbox-link {
  display: block;
  cursor: zoom-in;
}
.gallery-grid h3 { color: var(--accent); margin-top: 10px; }
.gallery-grid p { margin: 4px 0 0; }

.gallery-slideshow {
  position: relative;
  height: 270px;
  border: 1px solid #2a3038;
  border-radius: 6px;
  overflow: hidden;
  background: #06070a;
  box-shadow: 0 14px 28px rgba(0,0,0,.38);
}

.gallery-slideshow .slide-track {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.gallery-slideshow .slide-item {
  position: absolute;
  inset: 0;
  display: none;
  overflow: hidden;
}

.gallery-slideshow .slide-item.active {
  display: block;
  z-index: 2;
  animation: gallerySlideIn .55s ease;
}

.gallery-slideshow .slide-item.leaving {
  display: block;
  z-index: 1;
  animation: gallerySlideOut .55s ease forwards;
}

.gallery-slideshow .slide-item a {
  display: block;
  width: 100%;
  height: 100%;
}

.gallery-slideshow .slide-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #050607;
}

.gallery-slideshow .slide-caption {
  position: absolute;
  inset: auto 0 0;
  padding: 16px 18px;
  background: linear-gradient(transparent, rgba(0,0,0,.82));
}

.gallery-slideshow .slide-caption h3 {
  color: var(--accent);
}

.gallery-slideshow .slide-caption p {
  margin: 3px 0 0;
}

.slide-btn {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 52px;
  border: 1px solid #343b45;
  color: #fff;
  background: rgba(5, 7, 10, .72);
  cursor: pointer;
  font-size: 32px;
}

.slide-btn.prev { left: 10px; }
.slide-btn.next { right: 10px; }

.slide-dots {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 10px;
  display: flex;
  gap: 7px;
  transform: translateX(-50%);
}

.slide-dots button {
  width: 9px;
  height: 9px;
  border: 1px solid #9aa6b4;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.slide-dots button.active {
  background: var(--blue-2);
  box-shadow: 0 0 10px rgba(88, 189, 255, .85);
}

@keyframes gallerySlideIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes gallerySlideOut {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.gallery-votes {
  margin-top: 10px;
}

.gallery-votes form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.gallery-votes span,
.vote-btn {
  min-height: 30px;
  border: 1px solid #343b45;
  border-radius: 4px;
  padding: 5px 9px;
  color: #cdd8e4;
  background: #0b0d10;
  font-size: 12px;
  font-weight: 800;
}

.vote-btn {
  cursor: pointer;
}

.vote-btn.active {
  border-color: #197bd8;
  color: #fff;
  background: linear-gradient(#1168b8, #07355f);
}

.vote-btn.active.dislike {
  border-color: #963737;
  background: linear-gradient(#943232, #351010);
}

.heart-rating {
  display: inline-flex;
  gap: 3px;
}

.heart-btn {
  width: 28px;
  height: 30px;
  border: 1px solid #343b45;
  border-radius: 4px;
  color: #68717d;
  background: #0b0d10;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.heart-btn.active {
  border-color: #a93456;
  color: #ff5f8a;
  background: linear-gradient(#4a1525, #16070c);
  text-shadow: 0 0 10px rgba(255, 95, 138, .7);
}

.rating-summary {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  color: #cdd8e4;
  font-size: 12px;
  font-weight: 800;
}

.lightbox {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 26px;
  background: rgba(0, 0, 0, .88);
  overflow: auto;
}

.lightbox img {
  width: auto;
  height: auto;
  max-width: min(100%, 1400px);
  max-height: 92vh;
  object-fit: contain;
  border: 1px solid #3a424c;
  box-shadow: 0 22px 60px rgba(0,0,0,.75);
  cursor: zoom-in;
  transition: transform .12s ease;
}

.lightbox.is-original {
  place-items: start;
}

.lightbox.is-original img {
  max-width: none;
  max-height: none;
  cursor: zoom-out;
}

.lightbox-tools {
  position: fixed;
  top: 18px;
  right: 20px;
  z-index: 1001;
  display: flex;
  gap: 8px;
}

.lightbox-close,
.lightbox-zoom,
.lightbox-scale {
  width: 42px;
  height: 42px;
  border: 1px solid #4a5360;
  border-radius: 4px;
  color: #fff;
  background: #101318;
  cursor: pointer;
}

.lightbox-close {
  font-size: 30px;
  line-height: 1;
}

.lightbox-zoom {
  width: auto;
  padding: 0 12px;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}

.lightbox-scale {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 64px;
  padding: 0 10px;
  color: #5fb9ff;
  background: #080a0d;
  font-weight: 800;
}

.lightbox-open { overflow: hidden; }

.news-list { display: grid; gap: 18px; }
.news-card {
  padding: 16px;
  border: 1px solid #2d333b;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(28,31,36,.9), rgba(8,9,11,.92));
  box-shadow: 0 14px 28px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04);
}

.news-card.has-image {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.news-card.no-image {
  display: block;
}

.news-card img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 155px;
  justify-self: start;
  border: 0;
  background: transparent;
  box-shadow: none;
  object-fit: contain;
}

.news-image-link {
  display: inline-flex;
  justify-self: start;
  align-self: start;
  line-height: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.news-image-link:hover img {
  filter: drop-shadow(0 0 18px rgba(0, 159, 255, .35));
}
.news-card span { color: var(--accent); font-size: 12px; font-weight: 700; }
.news-card h3 { margin: 5px 0 6px; }
.news-card p { margin-bottom: 0; }

.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
}

.pagination a {
  min-width: 38px;
  padding: 8px 12px;
  border: 1px solid #313944;
  border-radius: 4px;
  color: #d7e2ef;
  text-align: center;
  font-weight: 700;
  background: linear-gradient(180deg, rgba(35, 40, 48, .78), rgba(13, 16, 20, .72));
  box-shadow: 0 8px 18px rgba(0, 0, 0, .25);
}

.pagination a:hover,
.pagination a.active {
  border-color: rgba(88, 189, 255, .48);
  color: #fff;
  background: linear-gradient(#126bc2, #06294b);
  text-shadow: 0 0 12px rgba(88, 189, 255, .85);
}

.news-comments {
  grid-column: 1 / -1;
  margin-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 12px;
}

.comment-toggle {
  min-height: 34px;
  border: 1px solid #2d333b;
  border-radius: 4px;
  padding: 0 12px;
  color: #dce7f3;
  background: linear-gradient(#191d22, #08090b);
  cursor: pointer;
  font-weight: 800;
  text-transform: uppercase;
}

.comment-toggle:hover {
  color: #fff;
  text-shadow: 0 0 12px rgba(88, 189, 255, .9);
}

.comment-panel {
  display: none;
  margin-top: 12px;
}

.news-comments.is-open .comment-panel {
  display: grid;
  gap: 12px;
}

.comment-list {
  display: grid;
  gap: 10px;
}

.comment-item {
  padding: 12px;
  border: 1px solid #2a3038;
  border-radius: 5px;
  background: rgba(0,0,0,.22);
}

.comment-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.comment-meta strong {
  color: var(--accent);
}

.comment-meta time {
  color: #5fb9ff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.comment-item p {
  color: #c8d2df;
  overflow-wrap: anywhere;
}

.comment-delete-form {
  margin-top: 10px;
}

.tiny-danger {
  min-height: 28px;
  border: 1px solid #743030;
  border-radius: 4px;
  padding: 0 9px;
  color: #fff;
  background: linear-gradient(#943232, #320c0c);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.comment-form {
  display: grid;
  gap: 10px;
}

.comment-form textarea {
  min-height: 92px;
}

.side-panel h2 {
  margin: -18px -18px 16px;
  padding: 13px 18px;
  background: linear-gradient(#17191d, #030405);
  border-bottom: 1px solid #262a30;
}

.rank-item,
.server-line {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.rank-item strong { color: var(--accent); }
.rank-item p, .server-line small { margin: 2px 0 0; color: var(--muted); }
.server-copy-name {
  display: inline;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}
.server-copy-name:hover,
.server-copy-name.is-copied {
  color: var(--accent);
  text-shadow: 0 0 12px rgba(0, 159, 255, .35);
}
.server-copy-hint {
  display: block;
  max-width: 260px;
  font-size: 11px;
  line-height: 1.35;
}
.game-highscore-list {
  display: grid;
  gap: 10px;
}
.game-highscore-item {
  padding: 12px 12px 11px;
  border: 1px solid rgba(68, 201, 255, .16);
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(18, 107, 194, .13), rgba(255, 159, 22, .04)),
    rgba(0, 0, 0, .22);
}
.game-highscore-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}
.game-highscore-head strong {
  color: var(--accent);
  font-size: 14px;
}
.game-highscore-head span {
  color: #6ad0ff;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.game-highscore-body {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}
.game-highscore-name {
  min-width: 0;
  color: #e8f1fb;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.game-highscore-score {
  color: #5fb9ff;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}
.game-highscore-item small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.counter-intro {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
  padding: 14px 12px;
  border: 1px solid rgba(68, 201, 255, .18);
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(0, 159, 255, .12), rgba(255, 159, 22, .06)),
    rgba(0, 0, 0, .20);
  text-align: center;
}
.counter-intro strong {
  position: relative;
  display: inline-flex;
  justify-content: center;
  justify-self: center;
  padding: 0 18px 8px;
  color: var(--blue-2);
  font-size: 15px;
  letter-spacing: .4px;
  text-shadow: 0 0 16px rgba(68, 201, 255, .28);
  text-transform: uppercase;
}
.counter-intro strong::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(68, 201, 255, .75), transparent);
}
.counter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.counter-grid article {
  padding: 12px 10px;
  border: 1px solid rgba(68, 201, 255, .22);
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(0, 159, 255, .10), transparent 55%),
    rgba(0, 0, 0, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  text-align: center;
}
.counter-grid strong {
  display: block;
  color: var(--accent);
  font-size: 22px;
  line-height: 1;
}
.counter-grid span {
  display: block;
  margin-top: 5px;
  color: #aebdcc;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}
.counter-subhead {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
.content-counter {
  margin-top: 4px;
}
.content-counter div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.content-counter span {
  color: #aebdcc;
}
.content-counter strong {
  color: var(--blue-2);
}
.admin-counter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}
.admin-counter-grid article {
  padding: 18px;
  border: 1px solid rgba(68, 201, 255, .24);
  border-radius: 7px;
  background:
    linear-gradient(135deg, rgba(0, 159, 255, .12), transparent 55%),
    rgba(0, 0, 0, .22);
}
.admin-counter-grid strong {
  display: block;
  color: var(--accent);
  font-size: 34px;
  line-height: 1;
}
.admin-counter-grid span {
  display: block;
  margin-top: 8px;
  color: #d8e6f7;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
.counter-admin-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 20px 0 24px;
  padding: 18px;
  border: 1px solid rgba(255, 159, 22, .28);
  border-radius: 7px;
  background:
    linear-gradient(135deg, rgba(255, 159, 22, .11), transparent 52%),
    rgba(0, 0, 0, .22);
}
.counter-admin-box h2 {
  margin-bottom: 8px;
}

.status { width: 11px; height: 11px; border-radius: 50%; margin-top: 4px; background: #777; box-shadow: 0 0 14px currentColor; }
.status.online { color: #2ee77d; background: #2ee77d; }
.status.offline { color: #d54343; background: #d54343; }

.btn {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 39px;
  padding: 0 16px;
  border: 1px solid #2d333b;
  border-radius: 4px;
  color: #e8edf3;
  background: linear-gradient(#252b32, #070809);
  box-shadow: 0 10px 18px rgba(0,0,0,.38);
  cursor: pointer;
  font-weight: 800;
  text-transform: uppercase;
  overflow: hidden;
}

.btn.primary { border-color: #185c9f; background: linear-gradient(#126bc2, #06294b); }
.btn.danger { border-color: #743030; background: linear-gradient(#943232, #320c0c); }

.shoutbox .shout-list {
  max-height: 500px;
  overflow-y: auto;
  padding-right: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.shoutbox .shout-list::-webkit-scrollbar { display: none; }
.shoutbox .shout-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  width: 100%;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.shoutbox .shout-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  width: 100%;
  margin-bottom: 5px;
}
.shoutbox .shout-meta time {
  color: #5fb9ff;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.shoutbox .shout-meta strong {
  min-width: 0;
  color: var(--accent);
  overflow-wrap: break-word;
}
.shoutbox .shout-item p {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  grid-column: 1 / -1;
  color: #d3dce7;
  line-height: 1.45;
  text-align: left;
  text-align-last: left;
  overflow: visible;
  overflow-wrap: break-word;
  word-break: normal;
  white-space: normal;
  hyphens: auto;
}
.shout-form textarea { height: 78px; margin: 10px 0; }
.login-hint {
  margin: 12px 0 0;
  color: var(--accent);
  text-align: center;
  font-weight: 800;
}
.smilies {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 12px;
}
.smilies button {
  border: 1px solid #343941;
  border-radius: 4px;
  width: 32px;
  height: 32px;
  color: #fff;
  background: #121417;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.auth-wrap,
.single-layout {
  width: 100%;
  max-width: none;
  margin: 0;
}

.single-layout > .panel {
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

.profile-layout {
  grid-template-columns: 1fr;
}

.main-nav a.has-unread-messages {
  animation: unreadPulse 1.4s ease-in-out infinite;
  color: #fff;
}

@keyframes unreadPulse {
  0%, 100% {
    background:
      linear-gradient(135deg, rgba(0, 159, 255, .38), rgba(255, 159, 22, .10)),
      linear-gradient(180deg, rgba(16, 47, 74, .86), rgba(4, 13, 22, .76));
    box-shadow: inset 0 0 0 1px rgba(68, 201, 255, .15);
  }
  50% {
    background:
      linear-gradient(135deg, rgba(255, 159, 22, .52), rgba(0, 159, 255, .22)),
      linear-gradient(180deg, rgba(45, 68, 90, .96), rgba(8, 20, 32, .9));
    box-shadow: 0 0 24px rgba(255, 159, 22, .38), inset 0 0 0 1px rgba(255, 220, 130, .25);
  }
}

.profile-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr);
  gap: 20px;
  align-items: stretch;
  margin-bottom: 20px;
  padding: 18px;
  border: 1px solid rgba(68, 201, 255, .25);
  border-radius: 8px;
  background:
    radial-gradient(circle at 10% 0%, rgba(0, 159, 255, .16), transparent 18rem),
    rgba(1, 7, 12, .72);
}

.profile-hero > div:first-child span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.profile-hero > div:first-child strong {
  display: block;
  margin: 5px 0;
  color: #fff;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1;
  text-transform: uppercase;
}

.profile-hero > div:first-child p {
  margin: 0;
  color: #b9c9d8;
}

.profile-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.profile-status-grid article {
  padding: 14px;
  border: 1px solid rgba(45, 108, 152, .36);
  border-radius: 7px;
  background: rgba(1, 8, 14, .72);
}

.profile-status-grid strong {
  display: block;
  color: var(--accent);
  font-size: 22px;
}

.profile-status-grid span {
  color: #aebdcc;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.profile-status-grid .profile-alert {
  border-color: rgba(255, 159, 22, .55);
  box-shadow: 0 0 20px rgba(255, 159, 22, .14);
}

.profile-self-kick-box {
  margin-bottom: 20px;
  padding: 18px;
  border: 1px solid rgba(255, 159, 22, .34);
  border-radius: 8px;
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 159, 22, .18), transparent 18rem),
    linear-gradient(135deg, rgba(10, 23, 35, .92), rgba(3, 8, 13, .97));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .045),
    0 18px 42px rgba(0, 0, 0, .32);
}

.profile-self-kick-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 18px;
  align-items: center;
}

.profile-self-kick-content > span {
  grid-column: 1 / -1;
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.profile-self-kick-content h2 {
  margin: 0;
  color: #fff;
  font-size: 22px;
  text-transform: uppercase;
}

.profile-self-kick-content p {
  grid-column: 1 / 2;
  margin: 0;
  color: #bfd1de;
  line-height: 1.6;
}

.profile-self-kick-content form,
.profile-self-kick-content > .btn {
  grid-column: 2 / 3;
  grid-row: 2 / span 3;
}

.profile-steam-state,
.profile-steam-warning {
  padding: 10px 12px;
  border: 1px solid rgba(45, 108, 152, .36);
  border-radius: 6px;
  background: rgba(1, 8, 14, .55);
}

.profile-steam-state code {
  color: var(--blue-2);
  font-weight: 900;
}

.profile-steam-warning {
  border-color: rgba(255, 159, 22, .34);
  color: #ffd88a !important;
}

.profile-account-box {
  border: 1px solid rgba(45, 108, 152, .42);
  border-radius: 8px;
  background:
    radial-gradient(circle at 15% 0%, rgba(0, 159, 255, .11), transparent 18rem),
    linear-gradient(180deg, rgba(10, 23, 35, .88), rgba(3, 8, 13, .96)),
    #060c12;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .045),
    0 18px 42px rgba(0, 0, 0, .35);
  overflow: hidden;
}

.profile-account-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(74, 135, 184, .22);
  background: linear-gradient(90deg, rgba(0, 159, 255, .08), transparent 55%, rgba(255, 159, 22, .07));
}

.profile-account-head h2 {
  margin: 0 0 5px;
  color: #fff;
  font-size: 20px;
  text-transform: uppercase;
}

.profile-account-head p {
  margin: 0;
  color: #aebdcc;
}

.profile-account-head span {
  flex: 0 0 auto;
  padding: 8px 11px;
  border: 1px solid rgba(68, 201, 255, .34);
  border-radius: 999px;
  color: var(--blue-2);
  background: rgba(0, 159, 255, .07);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.profile-card {
  display: grid;
  align-content: start;
  gap: 14px;
  max-width: none;
  margin: 0;
  padding: 22px;
  background: transparent;
}

.profile-card + .profile-card {
  border-left: 1px solid rgba(74, 135, 184, .18);
}

.profile-steam-card {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(74, 135, 184, .18);
}

.profile-card + .profile-steam-card {
  border-left: 0;
}

.profile-card h3 {
  margin: 0 0 4px;
  color: #fff;
  font-size: 17px;
  text-transform: uppercase;
}

.profile-card .btn {
  justify-self: start;
  min-width: 190px;
}

.profile-comment-link {
  display: inline-flex;
  margin-top: 8px;
  color: #5fb9ff;
  font-weight: 800;
}

.profile-messages .section-head p {
  margin: 6px 0 0;
  color: #aebdcc;
}

.message-compose-card,
.message-box {
  padding: 16px;
  border: 1px solid rgba(45, 108, 152, .36);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(10, 23, 35, .86), rgba(3, 8, 13, .94)),
    #060c12;
}

.message-form {
  display: grid;
  gap: 14px;
}

.recipient-picker {
  position: relative;
}

.recipient-picker summary {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(68, 201, 255, .32);
  border-radius: 6px;
  color: #fff;
  background: rgba(0, 159, 255, .08);
  cursor: pointer;
  list-style: none;
}

.recipient-picker summary::-webkit-details-marker { display: none; }
.recipient-picker summary strong { color: var(--accent); }

.recipient-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(68, 201, 255, .18);
  border-radius: 6px;
  background: rgba(1, 6, 11, .86);
}

.recipient-option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 9px;
  border: 1px solid rgba(68, 201, 255, .14);
  border-radius: 5px;
  background: rgba(255, 255, 255, .025);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.recipient-option:hover,
.recipient-option:has(input:checked) {
  border-color: rgba(255, 159, 22, .62);
  background: rgba(255, 159, 22, .09);
  transform: translateY(-1px);
}

.recipient-option input {
  width: auto;
  box-shadow: none;
}

.recipient-option span {
  color: #fff;
  font-weight: 900;
}

.recipient-option small {
  color: var(--blue-2);
  font-weight: 800;
}

.message-write-box {
  padding: 14px;
  border: 1px solid rgba(68, 201, 255, .16);
  border-radius: 7px;
  background: rgba(0, 0, 0, .22);
}

.profile-smilies {
  justify-content: center;
  margin-top: 0;
}

.message-write-box textarea {
  min-height: 130px;
  margin-top: 12px;
}

.message-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.message-box h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  color: #fff;
  text-transform: uppercase;
}

.message-box h3 span {
  color: var(--accent);
  font-size: 13px;
}

.message-list {
  display: grid;
  gap: 10px;
}

.private-message {
  padding: 13px;
  border: 1px solid rgba(68, 201, 255, .14);
  border-radius: 6px;
  background: rgba(1, 7, 12, .76);
}

.private-message.is-unread {
  border-color: rgba(255, 159, 22, .48);
  box-shadow: inset 3px 0 0 rgba(255, 159, 22, .9);
}

.message-meta,
.message-recipients {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
}

.message-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(68, 201, 255, .12);
}

.message-actions form {
  margin: 0;
}

.message-pagination {
  margin-top: 14px;
}

.message-meta strong {
  color: var(--accent);
}

.message-meta time,
.message-status,
.message-recipients span {
  color: var(--blue-2);
  font-size: 12px;
  font-weight: 800;
}

.message-recipient-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border: 1px solid rgba(68, 201, 255, .18);
  border-radius: 999px;
  background: rgba(0, 0, 0, .2);
}

.message-recipient-status i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  box-shadow: 0 0 12px currentColor;
}

.message-recipient-status b {
  color: #fff;
  font-size: 12px;
}

.message-recipient-status em {
  color: #aebdcc;
  font-style: normal;
  font-size: 11px;
}

.message-recipient-status.status-sent {
  color: #ffbf38;
  border-color: rgba(255, 191, 56, .35);
}

.message-recipient-status.status-read {
  color: #3ee782;
  border-color: rgba(62, 231, 130, .35);
}

.message-recipient-status.status-error {
  color: #ff5757;
  border-color: rgba(255, 87, 87, .42);
}

.message-recipient-status.status-sent i { background: #ffbf38; }
.message-recipient-status.status-read i { background: #3ee782; }
.message-recipient-status.status-error i { background: #ff5757; }

.private-message p {
  margin: 10px 0;
  color: #e4edf7;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.form-card,
.editor-form,
.inline-form {
  display: grid;
  gap: 14px;
}

.form-card { max-width: 430px; margin: 0 auto; padding: 24px; }

label { display: grid; gap: 7px; color: #cdd4dc; font-weight: 700; }
input, textarea, select {
  width: 100%;
  border: 1px solid #333941;
  border-radius: 4px;
  padding: 11px 12px;
  color: var(--text);
  background: #0b0c0f;
  box-shadow: inset 0 1px 8px rgba(0,0,0,.5);
}
textarea { min-height: 130px; resize: vertical; }

.flash {
  margin: 12px 0;
  padding: 12px 16px;
  border: 1px solid #285f33;
  border-radius: 4px;
  background: #102816;
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.flash.error { border-color: #753333; background: #2b1010; }
.flash.is-hiding {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}
.muted { color: var(--muted); }

.server-grid,
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
}

.server-card,
.stat-grid article {
  padding: 18px;
  border: 1px solid #2a3038;
  border-radius: 6px;
  background: rgba(0,0,0,.24);
  box-shadow: 0 12px 24px rgba(0,0,0,.35);
}

.ark-live-card {
  display: grid;
  gap: 16px;
  min-height: 178px;
  border-color: rgba(68, 201, 255, .30);
  background:
    radial-gradient(circle at 18% 20%, rgba(46, 231, 125, .13), transparent 26%),
    linear-gradient(145deg, rgba(5, 18, 29, .96), rgba(1, 8, 14, .98));
  box-shadow: 0 18px 38px rgba(0, 0, 0, .38), inset 0 0 36px rgba(68, 201, 255, .05);
}

.ark-server-title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}

.ark-server-title .status {
  position: absolute;
  left: 0;
  width: 13px;
  height: 13px;
  margin-top: 2px;
}

.ark-server-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--blue-2);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.ark-server-title h2 {
  margin: 0;
  color: #fff;
  font-size: 21px;
  text-transform: uppercase;
}

.ark-map-day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 8px;
  color: var(--blue-2);
  font-size: 21px;
  font-weight: 900;
  text-transform: uppercase;
}

.ark-map-day strong {
  color: #fff;
}

.ark-server-address-wrap {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(68, 201, 255, .16);
  border-radius: 6px;
  background: rgba(0, 0, 0, .18);
}

.ark-server-address-wrap span,
.ark-server-status-row span {
  color: #8fb6d6;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.ark-server-address {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 320px;
  padding: 12px 22px;
  border: 1px solid rgba(68, 201, 255, .38);
  border-radius: 5px;
  color: var(--blue-2);
  font: inherit;
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  background: rgba(0, 0, 0, .34);
  box-shadow: 0 0 20px rgba(68, 201, 255, .10);
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease;
}

.ark-server-address span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-transform: none;
}

.ark-address-change {
  display: none;
}

.ark-server-address.has-new-address {
  border-color: rgba(255, 159, 22, .72);
  color: var(--accent);
  box-shadow: 0 0 26px rgba(255, 159, 22, .18), 0 0 22px rgba(68, 201, 255, .12);
}

.ark-server-address.has-new-address .ark-address-value {
  animation: arkAddressValueCycle 20s infinite;
}

.ark-server-address.has-new-address .ark-address-change {
  display: inline-flex;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  animation: arkAddressNoticeCycle 20s infinite;
}

.ark-server-address.has-new-address:hover .ark-address-value,
.ark-server-address.has-new-address:hover .ark-address-change,
.ark-server-address.has-new-address.is-copied .ark-address-value,
.ark-server-address.has-new-address.is-copied .ark-address-change {
  animation-play-state: paused;
}

@keyframes arkAddressValueCycle {
  0%, 49% { opacity: 1; transform: translateY(0); }
  50%, 99% { opacity: 0; transform: translateY(-5px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes arkAddressNoticeCycle {
  0%, 49% { opacity: 0; transform: translateY(5px); }
  50%, 99% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(5px); }
}

.ark-server-address:hover,
.ark-server-address.is-copied {
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 24px rgba(255, 159, 22, .18), 0 0 22px rgba(68, 201, 255, .16);
}

.ark-server-address:hover {
  transform: translateY(-1px);
}

.ark-maintenance-note {
  max-width: 780px;
  margin-top: 6px;
  color: #c6d8e8;
  font-size: 14px;
  line-height: 1.55;
}

.ark-chat-note {
  max-width: 780px;
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid rgba(255, 159, 22, .24);
  color: #ffd27a;
  font-size: 14px;
  line-height: 1.6;
}

.ark-chat-note code {
  display: inline-flex;
  padding: 2px 7px;
  border: 1px solid rgba(255, 159, 22, .34);
  border-radius: 4px;
  color: #fff;
  background: rgba(255, 159, 22, .12);
}

.ark-server-status-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.ark-server-status-row strong {
  color: #fff;
  text-transform: uppercase;
}

.ark-player-panel {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(68, 201, 255, .16);
}

.ark-player-panel .section-head span {
  color: var(--accent);
  font-weight: 900;
}

.ark-player-panel .section-head .ark-player-count-blue {
  color: var(--blue-2);
}

.ark-player-list {
  display: grid;
  gap: 12px;
  max-height: 516px;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.ark-player-list::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.ark-player-card {
  display: grid;
  grid-template-columns: minmax(145px, 1.1fr) minmax(130px, .9fr) minmax(155px, 1fr) minmax(128px, .8fr) minmax(112px, .75fr) 54px;
  gap: 10px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(68, 201, 255, .22);
  border-radius: 6px;
  background: rgba(1, 11, 19, .76);
  box-shadow: 0 12px 24px rgba(0, 0, 0, .26);
}

.ark-player-field {
  min-width: 0;
}

.ark-player-field span {
  display: block;
  margin-bottom: 4px;
  color: #8fb6d6;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.ark-player-field strong {
  display: block;
  overflow-wrap: anywhere;
  color: #fff;
}

.ark-player-country {
  text-align: center;
}

.ark-player-country strong {
  font-size: 24px;
  line-height: 1;
  filter: drop-shadow(0 0 8px rgba(68, 201, 255, .45));
}

.ark-player-empty {
  margin: 0;
  padding: 14px;
  border: 1px solid rgba(68, 201, 255, .18);
  border-radius: 6px;
  color: #b8c6d7;
  background: rgba(0, 0, 0, .18);
}

.server-settings-panel {
  margin-top: 0;
}

.server-settings-panel .section-head span {
  color: var(--accent);
  font-weight: 900;
  text-transform: uppercase;
}

.server-protection-card {
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
  padding: 20px;
  border: 1px solid rgba(255, 159, 22, .52);
  border-radius: 7px;
  background:
    radial-gradient(circle at 12% 20%, rgba(255, 159, 22, .20), transparent 26%),
    linear-gradient(145deg, rgba(24, 18, 8, .96), rgba(4, 10, 15, .98));
  box-shadow: 0 20px 40px rgba(0, 0, 0, .36), inset 0 0 34px rgba(255, 159, 22, .07);
}

.server-protection-card::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 130px;
  height: 130px;
  border: 18px solid rgba(255, 159, 22, .13);
  transform: rotate(35deg);
}

.server-protection-card span,
.server-setting-value {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 9px;
  padding: 4px 9px;
  border: 1px solid rgba(255, 159, 22, .36);
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  background: rgba(0, 0, 0, .24);
}

.server-protection-card h3 {
  position: relative;
  margin: 0 0 9px;
  color: #fff;
  font-size: 24px;
  line-height: 1.2;
  text-transform: uppercase;
}

.server-protection-card p {
  position: relative;
  max-width: 850px;
  margin: 0;
  color: #d6e3ef;
  line-height: 1.55;
}

.server-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

.server-setting-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 10px;
  min-height: 190px;
  padding: 16px;
  border: 1px solid rgba(68, 201, 255, .22);
  border-radius: 6px;
  background: linear-gradient(145deg, rgba(7, 18, 28, .95), rgba(2, 8, 13, .98));
  box-shadow: 0 14px 32px rgba(0, 0, 0, .24);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}

.server-setting-card:hover {
  transform: translateY(-3px);
  border-color: rgba(68, 201, 255, .72);
  background: linear-gradient(145deg, rgba(9, 28, 43, .98), rgba(2, 10, 16, .99));
  box-shadow:
    0 0 0 1px rgba(255, 159, 22, .18),
    0 0 24px rgba(68, 201, 255, .24),
    0 18px 38px rgba(0, 0, 0, .42);
}

.server-setting-card h3 {
  margin: 0;
  color: #fff;
  font-size: 16px;
  line-height: 1.25;
  text-transform: uppercase;
}

.server-setting-card code {
  display: block;
  overflow-wrap: anywhere;
  padding: 8px 10px;
  border: 1px solid rgba(68, 201, 255, .18);
  border-radius: 5px;
  color: var(--blue-2);
  background: rgba(0, 0, 0, .24);
}

.server-setting-card p {
  margin: 0;
  color: #b8c6d7;
  line-height: 1.45;
}

.server-mod-panel {
  margin-top: 0;
}

.server-mod-intro {
  margin: 0 0 18px;
  color: var(--muted);
}

.server-mod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.server-mod-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-content: start;
  gap: 12px;
  min-height: 205px;
  padding: 16px;
  border: 1px solid rgba(68, 201, 255, .22);
  border-radius: 6px;
  background: linear-gradient(145deg, rgba(7, 18, 28, .96), rgba(3, 8, 13, .98));
  box-shadow: 0 14px 32px rgba(0, 0, 0, .28);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}

.server-mod-card:hover {
  transform: translateY(-3px);
  border-color: rgba(68, 201, 255, .72);
  background: linear-gradient(145deg, rgba(9, 28, 43, .98), rgba(3, 10, 16, .99));
  box-shadow:
    0 0 0 1px rgba(255, 159, 22, .18),
    0 0 24px rgba(68, 201, 255, .24),
    0 18px 38px rgba(0, 0, 0, .42);
}

.server-mod-id {
  display: inline-flex;
  width: fit-content;
  padding: 4px 8px;
  border: 1px solid rgba(255, 159, 22, .35);
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
}

.server-mod-card h3 {
  margin: 9px 0 0;
  color: #fff;
  font-size: 16px;
  line-height: 1.25;
}

.server-mod-card p {
  margin: 0;
  color: #b8c6d7;
  line-height: 1.45;
}

.server-mod-link {
  align-self: end;
  width: fit-content;
  padding: 8px 12px;
  border: 1px solid rgba(68, 201, 255, .45);
  color: var(--blue-2);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .03em;
  background: rgba(4, 12, 20, .72);
}

.server-mod-link:hover {
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 18px rgba(255, 159, 22, .18);
}

.admin-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 16px;
  margin-top: 0;
  padding: 14px;
  border: 1px solid rgba(36, 169, 255, .20);
  border-top: 0;
  border-radius: 0 0 6px 6px;
  background:
    radial-gradient(circle at 20% 0%, rgba(0, 159, 255, .09), transparent 24rem),
    linear-gradient(180deg, rgba(7, 17, 27, .94), rgba(3, 6, 10, .96));
  box-shadow:
    0 26px 80px rgba(0, 0, 0, .7),
    inset 0 1px 0 rgba(255, 255, 255, .035);
}

.admin-nav {
  align-self: start;
  display: grid;
  padding: 10px;
}

.admin-nav a {
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  color: #d5dce5;
}

.admin-nav a:hover { color: var(--blue-2); }
.admin-nav .wireguard-nav-link {
  color: var(--blue-2);
  border-left: 3px solid var(--accent);
  background: linear-gradient(90deg, rgba(242, 165, 26, .12), transparent);
}
.admin-panel {
  min-width: 0;
  margin-bottom: 0;
}

.permission-locked {
  place-items: center;
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.wireguard-admin { display: grid; gap: 20px; }
.wireguard-heading,
.wireguard-toolbar,
.wireguard-row-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.wireguard-heading h1,
.wireguard-toolbar h2 { margin-bottom: 6px; }
.wireguard-state,
.wireguard-pending {
  display: inline-flex;
  padding: 7px 10px;
  border: 1px solid rgba(242, 165, 26, .42);
  border-radius: 999px;
  color: var(--accent);
  background: rgba(242, 165, 26, .08);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}
.wireguard-notice,
.wireguard-empty {
  padding: 14px;
  border: 1px solid rgba(68, 201, 255, .3);
  border-radius: 6px;
  color: #cfe8f8;
  background: rgba(0, 159, 255, .07);
  line-height: 1.55;
}
.wireguard-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 12px;
  align-items: end;
}
.wireguard-create-rules { display: grid; gap: 10px; grid-column: 1 / -1; }
.wireguard-create-rule {
  display: grid;
  grid-template-columns: .8fr .7fr .7fr auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid rgba(45, 108, 152, .38);
  border-radius: 6px;
  background: rgba(0, 0, 0, .2);
}
.wireguard-server-description { grid-column: 1 / -1; }
.wireguard-list { margin-top: 0; }
.wireguard-form-hint { margin-top: -10px; }
.wireguard-server-group {
  overflow: hidden;
  border: 1px solid rgba(45, 108, 152, .48);
  border-radius: 8px;
  background: rgba(2, 8, 13, .72);
}
.wireguard-server-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(45, 108, 152, .34);
  background: linear-gradient(90deg, rgba(0, 159, 255, .12), rgba(242, 165, 26, .06));
}
.wireguard-server-head h3 { margin: 0 0 4px; color: var(--accent); }
.wireguard-server-head span { color: var(--blue-2); font-weight: 800; }
.wireguard-server-head strong {
  padding: 6px 9px;
  border: 1px solid rgba(68, 201, 255, .3);
  border-radius: 999px;
  color: #d8efff;
  font-size: 11px;
  white-space: nowrap;
}
.wireguard-server-meta {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(160px, .8fr);
  gap: 10px;
  flex: 1;
}
.wireguard-server-head-actions { display: grid; gap: 10px; justify-items: end; }
.wireguard-server-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 12px 12px;
}
.wireguard-rule-list { display: grid; gap: 10px; padding: 12px; }
.wireguard-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr .8fr .7fr .7fr;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(45, 108, 152, .42);
  border-radius: 7px;
  background: rgba(0, 0, 0, .24);
}
.wireguard-rule-row {
  grid-template-columns: .8fr .7fr .7fr auto;
  align-items: end;
  padding: 12px;
}
.wireguard-rule-row .wireguard-notes { grid-column: auto; }
.wireguard-rule-row .wireguard-row-actions { grid-column: 1 / -1; }
.wireguard-row .wireguard-notes { grid-column: span 3; }
.wireguard-row-actions { grid-column: 1 / -1; justify-content: flex-end; }

@media (max-width: 1100px) {
  .wireguard-form,
  .wireguard-row,
  .wireguard-rule-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wireguard-create-rule { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wireguard-form .wireguard-notes,
  .wireguard-row .wireguard-notes { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .wireguard-heading,
  .wireguard-toolbar,
  .wireguard-row-actions { align-items: stretch; flex-direction: column; }
  .wireguard-form,
  .wireguard-row,
  .wireguard-rule-row { grid-template-columns: 1fr; }
  .wireguard-create-rule { grid-template-columns: 1fr; }
  .wireguard-server-meta { grid-template-columns: 1fr; width: 100%; }
  .wireguard-server-head-actions { justify-items: stretch; width: 100%; }
  .wireguard-server-actions { flex-direction: column; }
  .wireguard-form .wireguard-notes,
  .wireguard-row .wireguard-notes { grid-column: auto; }
}
.stat-grid strong { display: block; font-size: 36px; color: var(--accent); }

.admin-launchpad {
  min-height: 130px;
  display: grid;
  place-items: center;
  margin-top: 14px;
}

.serverpanel-launch {
  display: block;
  width: min(360px, 100%);
  padding: 18px 22px;
  border: 1px solid rgba(36, 169, 255, .45);
  border-radius: 8px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background:
    linear-gradient(135deg, rgba(0, 159, 255, .18), transparent 34%),
    linear-gradient(180deg, rgba(10, 25, 40, .98), rgba(2, 7, 12, .98));
  box-shadow: 0 20px 45px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255,255,255,.06);
}

.serverpanel-launch span,
.serverpanel-launch small {
  display: block;
  color: var(--blue-2);
  font-weight: 800;
  text-transform: uppercase;
}

.serverpanel-launch strong {
  display: block;
  margin: 7px 0;
  color: var(--accent);
  font-size: clamp(20px, 2.4vw, 30px);
  text-transform: uppercase;
}

.serverpanel-launch:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.admin-list {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.edit-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(180px, 2fr) 170px auto auto;
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid #2a3038;
  border-radius: 6px;
  background: rgba(0,0,0,.24);
}

.admin-comment-row {
  display: grid;
  gap: 9px;
  padding: 14px;
  border: 1px solid #2a3038;
  border-radius: 6px;
  background: rgba(0,0,0,.24);
}

.admin-comment-row p {
  margin: 0;
  color: #c8d2df;
}

.admin-shout-meta {
  display: grid;
  gap: 3px;
}

.admin-shout-meta strong {
  color: var(--accent);
}

.admin-shout-meta time {
  color: #5fb9ff;
  font-size: 12px;
  font-weight: 700;
}

.permissions-form {
  display: grid;
  gap: 16px;
}

.permissions-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(100px, .4fr));
  border: 1px solid #2a3038;
  border-radius: 6px;
  overflow: hidden;
}

.permission-head,
.permission-label,
.permission-check {
  padding: 12px;
  border-bottom: 1px solid #2a3038;
  border-right: 1px solid #2a3038;
  background: rgba(0,0,0,.18);
}

.permission-head {
  color: var(--accent);
  font-weight: 800;
  text-transform: uppercase;
}

.permission-check {
  display: flex;
  align-items: center;
  justify-content: center;
}

.permission-check input {
  width: 18px;
  height: 18px;
}

.admin-news-item {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #2a3038;
  border-radius: 6px;
  background: rgba(0,0,0,.18);
}

.admin-news-item .edit-row {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.admin-news-comments {
  margin-top: 0;
}

.editor-form.compact,
.edit-row.compact {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  color: #dbe8f5;
  font-weight: 800;
}

.checkbox-inline input {
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
}

.user-row {
  grid-template-columns: repeat(2, minmax(170px, 1fr)) minmax(120px, .7fr) minmax(150px, 1fr);
}

.check-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.check-label input {
  width: auto;
}

.user-meta {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 12px;
}

.btn:disabled,
input:disabled,
select:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 22px;
  padding: 20px 0;
  color: var(--muted);
  border-top: 1px solid rgba(255,255,255,.08);
}

@media (max-width: 920px) {
  .main-nav { padding: 0 8px; }
  .layout,
  .admin-layout { grid-template-columns: 1fr; }
  .layout { padding: 14px; }
  .admin-counter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .counter-admin-box { align-items: stretch; flex-direction: column; }
  .news-card.has-image { grid-template-columns: 1fr; }
  .news-card .news-image-link { min-height: 0; padding: 10px; }
  .profile-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .page-shell { width: min(100% - 18px, 1180px); padding-top: 20px; }
  .main-nav a { min-width: 50%; padding: 14px 8px; }
  .main-nav .nav-item { min-width: 50%; }
  .nav-submenu {
    left: 0;
    right: 0;
    min-width: 100%;
  }
  .home-game-frame iframe {
    height: 720px;
    min-height: 720px;
  }
  .hero { padding: 22px; min-height: 300px; }
  .admin-counter-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .edit-row,
  .user-row { grid-template-columns: 1fr; }
  .site-footer { display: grid; }
}

/* Design direction: bold gaming portal inspired by mockup 3 */
:root {
  --bg: #05080c;
  --panel: #08111a;
  --panel-2: #04070b;
  --line: #18304a;
  --text: #f1f6ff;
  --muted: #9aa9ba;
  --accent: #ff9f16;
  --blue: #079dff;
  --blue-2: #44c9ff;
  --shell-bg: #07111b;
  --shadow: 0 22px 60px rgba(0, 0, 0, .62);
}

body {
  background:
    radial-gradient(circle at 16% 0%, rgba(0, 159, 255, .20), transparent 25rem),
    radial-gradient(circle at 84% 0%, rgba(255, 143, 23, .15), transparent 22rem),
    linear-gradient(120deg, rgba(0, 159, 255, .045) 0 1px, transparent 1px 120px),
    linear-gradient(180deg, #081019 0, #030508 42rem, #020305 100%);
  background-size: auto, auto, 120px 120px, auto;
}

.page-shell {
  width: min(1360px, calc(100% - 28px));
  padding-top: 18px;
}

.site-header {
  min-height: 260px;
  align-items: flex-end;
  justify-content: stretch;
  padding: 0;
  border-color: rgba(36, 169, 255, .35);
  border-radius: 4px 4px 0 0;
  background:
    linear-gradient(90deg, rgba(1, 4, 8, .94) 0%, rgba(1, 4, 8, .68) 30%, rgba(1, 4, 8, .18) 58%, rgba(1, 4, 8, .76) 100%),
    linear-gradient(180deg, rgba(5, 9, 14, .02), rgba(5, 9, 14, .74)),
    url("../../banner-gaming-v2.png") center / cover no-repeat,
    #06101a;
  box-shadow:
    0 0 42px rgba(0, 159, 255, .12),
    0 22px 70px rgba(0, 0, 0, .65),
    inset 0 0 0 1px rgba(255, 255, 255, .035),
    inset 0 -42px 70px rgba(0, 0, 0, .62);
}

.site-header::before,
.site-header::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.site-header::before {
  left: 20px;
  top: 20px;
  width: 190px;
  height: 132px;
  border-left: 4px solid rgba(255, 159, 22, .88);
  border-top: 4px solid rgba(255, 159, 22, .82);
  transform: skewX(-24deg);
  filter: drop-shadow(0 0 14px rgba(255, 159, 22, .42));
}

.site-header::after {
  right: 22px;
  top: 24px;
  width: 210px;
  height: 142px;
  border-right: 3px solid rgba(0, 159, 255, .76);
  border-top: 3px solid rgba(0, 159, 255, .56);
  transform: skewX(-24deg);
  filter: drop-shadow(0 0 16px rgba(0, 159, 255, .38));
}

.header-brand {
  position: absolute;
  z-index: 1;
  left: 92px;
  top: 78px;
  display: grid;
  line-height: .86;
  text-transform: none;
  text-shadow: 0 8px 22px rgba(0, 0, 0, .78);
}

.header-brand::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -20px -38px -20px -30px;
  background:
    linear-gradient(135deg, rgba(0, 159, 255, .16), transparent 40%),
    rgba(1, 5, 9, .58);
  border-left: 3px solid rgba(255, 159, 22, .85);
  clip-path: polygon(0 0, 82% 0, 100% 50%, 82% 100%, 0 100%, 12% 50%);
  box-shadow:
    0 0 24px rgba(0, 159, 255, .18),
    inset 0 0 34px rgba(0, 0, 0, .42);
}

.header-brand span,
.header-brand strong {
  font-size: clamp(46px, 6.2vw, 86px);
  font-weight: 900;
  letter-spacing: 0;
}

.header-brand span { color: #fff; }

.header-brand strong {
  color: var(--blue);
  font-style: italic;
  text-shadow: 0 0 22px rgba(0, 159, 255, .5);
}

.header-brand small {
  margin-top: 18px;
  color: var(--accent);
  font-size: clamp(18px, 1.7vw, 26px);
  font-weight: 900;
  text-transform: none;
}

.main-nav {
  position: relative;
  z-index: 3;
  justify-content: stretch;
  gap: 0;
  padding: 0 22px 0 54px;
  border-top: 1px solid rgba(55, 190, 255, .38);
  background:
    linear-gradient(90deg, rgba(0, 159, 255, .18), transparent 18%, transparent 82%, rgba(255, 159, 22, .12)),
    rgba(2, 8, 14, .88);
  box-shadow:
    0 -1px 0 rgba(255, 255, 255, .04),
    0 -18px 44px rgba(0, 0, 0, .42);
}

.main-nav::before,
.main-nav::after {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 62px;
  pointer-events: none;
}

.main-nav::before {
  left: 0;
  background: linear-gradient(135deg, transparent 0 44%, rgba(0, 159, 255, .86) 45% 49%, transparent 50%);
  filter: drop-shadow(0 0 10px rgba(0, 159, 255, .55));
}

.main-nav::after {
  right: 0;
  background: linear-gradient(315deg, transparent 0 44%, rgba(255, 159, 22, .72) 45% 49%, transparent 50%);
  filter: drop-shadow(0 0 10px rgba(255, 159, 22, .36));
}

.main-nav a {
  flex: 1 1 auto;
  min-width: 104px;
  padding: 18px 16px;
  border: 0;
  border-right: 1px solid rgba(85, 150, 200, .16);
  border-radius: 0;
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  margin-left: -8px;
  background:
    linear-gradient(135deg, rgba(0, 159, 255, .08), transparent 45%),
    linear-gradient(180deg, rgba(11, 21, 32, .82), rgba(2, 7, 12, .72));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .045),
    inset 0 -1px 0 rgba(0, 159, 255, .08);
}

.main-nav a::before {
  content: attr(data-icon);
  display: inline-block;
  margin-right: 9px;
  color: rgba(141, 185, 218, .82);
  font-size: 16px;
  line-height: 1;
  text-shadow: 0 0 12px rgba(0, 159, 255, .24);
  transform: translateY(1px);
}

.main-nav a:first-child::before,
.main-nav a:hover::before {
  color: #7fdcff;
}

.main-nav a:first-child {
  border-left: 1px solid rgba(85, 150, 200, .16);
  margin-left: 0;
  background:
    linear-gradient(135deg, rgba(0, 159, 255, .58), rgba(0, 81, 150, .18)),
    linear-gradient(180deg, rgba(16, 47, 74, .86), rgba(4, 13, 22, .76));
  box-shadow:
    0 0 22px rgba(0, 159, 255, .30),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}

.main-nav a:hover {
  background:
    linear-gradient(135deg, rgba(0, 159, 255, .34), rgba(255, 159, 22, .10)),
    linear-gradient(180deg, rgba(16, 47, 74, .92), rgba(4, 13, 22, .82));
}

.layout {
  gap: 16px;
  padding: 14px;
  border-color: rgba(36, 169, 255, .20);
  border-radius: 0 0 6px 6px;
  background:
    radial-gradient(circle at 20% 0%, rgba(0, 159, 255, .09), transparent 24rem),
    linear-gradient(180deg, rgba(7, 17, 27, .94), rgba(3, 6, 10, .96));
  box-shadow:
    0 26px 80px rgba(0, 0, 0, .7),
    inset 0 1px 0 rgba(255, 255, 255, .035);
}

.panel,
.side-panel,
.form-card,
.admin-nav,
.server-card,
.stat-grid article,
.comment-item,
.admin-comment-row,
.admin-news-item {
  border-color: rgba(45, 108, 152, .36);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(10, 23, 35, .94), rgba(3, 8, 13, .96)),
    #060c12;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, .52),
    inset 0 1px 0 rgba(255, 255, 255, .045),
    inset 0 0 34px rgba(0, 159, 255, .035);
}

.panel,
.side-panel {
  position: relative;
  overflow: hidden;
}

.panel::before,
.side-panel::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 16px;
  width: 6px;
  height: 24px;
  background: linear-gradient(180deg, var(--blue-2), var(--blue));
  transform: skewX(-24deg);
  box-shadow: 0 0 14px rgba(68, 201, 255, .55);
}

.section-head {
  margin: -2px 0 16px;
  padding: 0 0 13px 26px;
  border-bottom-color: rgba(74, 135, 184, .22);
}

.section-head h1,
.section-head h2,
.side-panel h2 {
  font-size: 19px;
  color: #fff;
  text-shadow: 0 0 14px rgba(0, 159, 255, .18);
}

.section-head a {
  color: var(--blue-2);
  font-weight: 900;
  text-transform: uppercase;
}

.home-welcome {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  margin: 0;
  padding: 34px 50px;
  border-color: rgba(45, 161, 225, .46);
  background:
    radial-gradient(circle at 12% 26%, rgba(0, 159, 255, .18), transparent 20rem),
    radial-gradient(circle at 86% 18%, rgba(255, 159, 22, .12), transparent 18rem),
    linear-gradient(135deg, rgba(8, 22, 34, .96), rgba(3, 8, 13, .98)),
    #060b11;
}

.home-welcome::before {
  top: 28px;
  height: 34px;
}

.home-welcome-copy {
  max-width: 100%;
  margin: 0;
}

.home-welcome-copy h1 {
  margin: 0 auto 22px;
  color: #fff;
  font-size: clamp(30px, 3.35vw, 43px);
  line-height: 1.02;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 24px rgba(0, 159, 255, .18);
  white-space: nowrap;
}

.home-welcome-copy p {
  max-width: 1040px;
  margin: 0 auto 15px;
  color: #d5e1ef;
  font-size: 15px;
  line-height: 1.7;
}

.home-welcome-copy strong {
  display: block;
  max-width: 1040px;
  margin: 18px auto 0;
  color: var(--accent);
  font-size: 16px;
  line-height: 1.45;
  text-align: center;
  text-transform: uppercase;
}

.home-news-list {
  grid-template-columns: 1fr;
  gap: 8px;
}

.home-news-list .news-card { min-height: 128px; }

.home-news-list .news-card.is-featured {
  grid-column: 1 / -1;
  min-height: 260px;
  padding: 12px;
}

.news-card {
  position: relative;
  border-color: rgba(47, 93, 127, .55);
  background:
    linear-gradient(135deg, rgba(12, 24, 36, .92), rgba(5, 10, 15, .96)),
    #060b11;
}

.news-card::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -1px;
  width: 46px;
  height: 46px;
  background: linear-gradient(135deg, var(--accent) 50%, transparent 51%);
  opacity: .95;
}

.news-card.has-image {
  grid-template-columns: minmax(240px, 50%) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.home-news-list .news-card:not(.is-featured).has-image {
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 16px;
}

.news-card img {
  width: 100%;
  max-height: 260px;
  border: 0;
  object-fit: contain;
  background: transparent;
  box-shadow: none;
}

.news-card .news-image-link {
  width: 100%;
  min-height: 240px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 159, 255, .08), transparent 70%),
    rgba(0, 0, 0, .10);
}

.news-card .news-image-link img {
  width: auto;
  max-width: 100%;
}

.home-news-list .news-card:not(.is-featured) img { max-height: 104px; }

.home-news-list .news-card img {
  object-fit: contain;
}

.news-card span {
  color: var(--accent);
  font-weight: 900;
}

.news-card h3 {
  font-size: 20px;
  line-height: 1.2;
}

.home-news-list .news-card:not(.is-featured) h3 { font-size: 15px; }
.news-card p { color: #c5d0dc; }

.btn.ghost {
  margin-top: 18px;
  border-color: rgba(68, 201, 255, .75);
  color: var(--blue-2);
  background: rgba(0, 159, 255, .06);
}

.gallery-slideshow {
  height: 194px;
  border-color: rgba(55, 138, 196, .45);
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 159, 255, .13), transparent 22rem),
    #03070b;
}

.gallery-slideshow .slide-item img { object-fit: cover; }
.slide-caption { text-shadow: 0 2px 12px rgba(0, 0, 0, .8); }

.slide-btn {
  border-color: rgba(68, 201, 255, .46);
  color: var(--blue-2);
  background: rgba(2, 8, 14, .84);
}

.slide-btn:hover {
  color: #fff;
  box-shadow: 0 0 20px rgba(68, 201, 255, .32);
}

.side-panel h2 {
  margin: -18px -18px 16px;
  padding: 15px 18px 15px 44px;
  border-bottom-color: rgba(74, 135, 184, .24);
  background: linear-gradient(180deg, rgba(8, 20, 32, .98), rgba(2, 7, 12, .98));
}

.rank-item strong {
  min-width: 36px;
  color: var(--accent);
  font-size: 20px;
}

.server-line .status {
  width: 13px;
  height: 13px;
  margin-top: 6px;
}

.shout-item p,
.comment-item p { color: #d3dce7; }

.login-hint {
  color: var(--accent);
  text-shadow: 0 0 12px rgba(255, 159, 22, .18);
}

.site-footer { border-top-color: rgba(68, 201, 255, .18); }

@media (max-width: 920px) {
  .header-brand { left: 34px; top: 34px; }
  .home-news-list { grid-template-columns: 1fr; }
  .home-news-list .news-card.is-featured { min-height: auto; }
  .home-news-list .news-card:not(.is-featured).has-image { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .site-header { min-height: 260px; }
  .main-nav a { min-width: 50%; }
  .header-brand { left: 22px; top: 24px; }
  .header-brand span,
  .header-brand strong { font-size: 36px; }
}

/* Header size tuning */
.page-shell {
  width: min(1240px, calc(100% - 28px));
}

.site-header {
  height: 430px;
  min-height: 430px;
  aspect-ratio: auto;
  background:
    linear-gradient(90deg, rgba(1, 4, 8, .96) 0%, rgba(1, 4, 8, .70) 30%, rgba(1, 4, 8, .16) 58%, rgba(1, 4, 8, .78) 100%),
    linear-gradient(180deg, rgba(5, 9, 14, .04), rgba(5, 9, 14, .76)),
    url("../../banner-gaming-v2.png") center 46% / cover no-repeat,
    #06101a;
}

@media (max-width: 620px) {
.site-header {
    height: auto;
    min-height: 340px;
  }
}

/* Logo header */
.header-brand {
  left: 62px;
  top: 42px;
  width: min(310px, 30vw);
  display: block;
  line-height: 1;
  filter:
    drop-shadow(0 0 18px rgba(0, 159, 255, .32))
    drop-shadow(0 18px 28px rgba(0, 0, 0, .72));
}

.header-brand::before {
  display: none;
}

.header-brand img {
  display: block;
  width: 100%;
  height: auto;
}

.header-title {
  position: absolute;
  z-index: 2;
  top: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 10px 28px;
  min-width: min(520px, 54vw);
  border-top: 1px solid rgba(68, 201, 255, .38);
  border-bottom: 1px solid rgba(255, 159, 22, .28);
  background: linear-gradient(90deg, transparent, rgba(1, 7, 13, .62), transparent);
  text-align: center;
  text-shadow: 0 3px 12px rgba(0, 0, 0, .8), 0 0 18px rgba(0, 159, 255, .28);
}

.header-title strong {
  color: #fff;
  font-size: clamp(20px, 2.5vw, 34px);
  font-weight: 900;
  text-transform: uppercase;
}

.header-title span {
  color: var(--accent);
  font-size: clamp(12px, 1.1vw, 16px);
  font-weight: 900;
  text-transform: uppercase;
}

@media (max-width: 920px) {
  .header-brand {
    left: 28px;
    top: 78px;
    width: min(250px, 45vw);
  }

  .header-title {
    top: 24px;
    min-width: min(520px, 76vw);
  }

  .home-welcome { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .header-brand {
    left: 50%;
    top: 78px;
    width: min(245px, 72vw);
    transform: translateX(-50%);
  }

  .header-title {
    top: 18px;
    width: calc(100% - 34px);
    min-width: 0;
    padding-inline: 16px;
  }

  .home-welcome {
    padding: 22px;
  }

  .home-welcome-copy {
    margin-left: 0;
  }

  .home-welcome-copy h1 {
    white-space: normal;
  }
}

/* Home gallery card should match the news container style */
.gallery-strip .gallery-slideshow {
  height: 236px;
  padding: 12px;
  border: 1px solid rgba(47, 93, 127, .55);
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(12, 24, 36, .92), rgba(5, 10, 15, .96)),
    #060b11;
  box-shadow:
    0 14px 28px rgba(0, 0, 0, .4),
    inset 0 1px 0 rgba(255, 255, 255, .04);
}

.gallery-strip .gallery-slideshow::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -1px;
  z-index: 4;
  width: 46px;
  height: 46px;
  background: linear-gradient(135deg, var(--accent) 50%, transparent 51%);
  opacity: .95;
  pointer-events: none;
}

.gallery-strip .slide-track {
  inset: 12px;
  border: 1px solid rgba(72, 146, 196, .42);
  background: #03070b;
}

.gallery-strip .slide-item img {
  object-fit: cover;
}

.gallery-strip .slide-caption {
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 16px 18px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .84));
}

.gallery-strip .slide-btn.prev { left: 18px; }
.gallery-strip .slide-btn.next { right: 18px; }
.gallery-strip .slide-dots { bottom: 20px; }

/* Professional gallery page */
.gallery-page-head {
  align-items: flex-start;
}

.gallery-page-head p {
  margin: 6px 0 0;
  color: #aebdcc;
}

.gallery-page-head span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(68, 201, 255, .34);
  border-radius: 4px;
  color: var(--blue-2);
  background: rgba(0, 159, 255, .08);
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.gallery-upload {
  margin: 0;
  padding: 16px;
  border: 1px solid rgba(45, 108, 152, .34);
  border-radius: 7px;
  background: rgba(0, 0, 0, .22);
}

.limited-text {
  display: grid;
  gap: 7px;
}

.limited-text textarea {
  width: 100%;
}

.limited-text span {
  justify-self: end;
  color: #8da2b6;
  font-size: 11px;
  font-weight: 800;
}

.limited-text strong {
  color: var(--blue-2);
}

.limited-text.is-low span,
.limited-text.is-low strong {
  color: var(--accent);
}

.gallery-login {
  margin: 0;
}

.gallery-grid.professional {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.gallery-card {
  position: relative;
  min-width: 0;
  border: 1px solid rgba(45, 108, 152, .42);
  border-radius: 7px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(9, 20, 31, .96), rgba(3, 7, 12, .98)),
    #05090e;
  box-shadow:
    0 18px 34px rgba(0, 0, 0, .42),
    inset 0 1px 0 rgba(255, 255, 255, .045);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.gallery-card:hover {
  transform: translateY(-3px);
  border-color: rgba(68, 201, 255, .62);
  box-shadow:
    0 24px 44px rgba(0, 0, 0, .50),
    0 0 24px rgba(0, 159, 255, .14),
    inset 0 1px 0 rgba(255, 255, 255, .06);
}

.gallery-card::before {
  content: "";
  position: absolute;
  z-index: 2;
  right: -1px;
  top: -1px;
  width: 34px;
  height: 34px;
  background: linear-gradient(135deg, var(--accent) 50%, transparent 51%);
  opacity: .9;
  pointer-events: none;
}

.gallery-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 159, 255, .14), transparent 14rem),
    #020508;
  cursor: zoom-in;
}

.gallery-media img {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  box-shadow: none;
  transition: transform .22s ease, filter .22s ease;
}

.gallery-card:hover .gallery-media img {
  transform: scale(1.04);
  filter: saturate(1.12) contrast(1.05);
}

.gallery-media span {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  justify-content: center;
  padding: 7px 9px;
  border: 1px solid rgba(68, 201, 255, .48);
  border-radius: 4px;
  color: #fff;
  background: rgba(2, 8, 14, .78);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
}

.gallery-card:hover .gallery-media span {
  opacity: 1;
  transform: translateY(0);
}

.gallery-card-body {
  display: grid;
  gap: 10px;
  padding: 13px;
}

.gallery-card-title {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: start;
}

.gallery-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
  color: var(--blue-2);
  font-size: 11px;
  font-weight: 900;
}

.gallery-card-meta div {
  display: grid;
  gap: 3px;
}

.gallery-card-meta span {
  color: var(--blue-2);
}

.gallery-card-meta time {
  color: #8da2b6;
  white-space: nowrap;
}

.gallery-card h3 {
  margin: 0;
  color: var(--accent);
  font-size: 14px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.gallery-card small {
  color: var(--blue-2);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.gallery-card p {
  margin: 0;
  min-height: 38px;
  color: #b8c5d3;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.gallery-card .gallery-votes {
  margin-top: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(74, 135, 184, .18);
}

.gallery-card .gallery-votes form {
  display: grid;
  gap: 8px;
}

.gallery-card .heart-rating {
  justify-content: space-between;
  gap: 4px;
}

.gallery-card .heart-btn {
  width: 100%;
  min-width: 0;
}

.gallery-card .rating-summary {
  justify-content: center;
  width: 100%;
  border-color: rgba(45, 108, 152, .42);
  color: #dce9f7;
  background: rgba(0, 0, 0, .24);
}

@media (max-width: 1180px) {
  .gallery-grid.professional { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 920px) {
  .gallery-grid.professional { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .gallery-grid.professional { grid-template-columns: 1fr; }
  .gallery-card-title { display: grid; }
}

.gallery-submit-area {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid rgba(74, 135, 184, .22);
}

.gallery-submit-head {
  margin-bottom: 14px;
}

.gallery-submit-area + .pagination {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid rgba(74, 135, 184, .16);
}

/* Active navigation and gallery rating meter */
.main-nav a:first-child:not(.active) {
  background:
    linear-gradient(135deg, rgba(0, 159, 255, .08), transparent 45%),
    linear-gradient(180deg, rgba(11, 21, 32, .82), rgba(2, 7, 12, .72));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .045),
    inset 0 -1px 0 rgba(0, 159, 255, .08);
}

.main-nav a.active {
  color: #fff4c8;
  background:
    linear-gradient(135deg, rgba(255, 159, 22, .46), rgba(0, 159, 255, .16)),
    linear-gradient(180deg, rgba(55, 38, 10, .90), rgba(12, 18, 24, .82));
  text-shadow: 0 0 14px rgba(255, 159, 22, .55);
  box-shadow:
    0 0 24px rgba(255, 159, 22, .22),
    inset 0 1px 0 rgba(255, 255, 255, .10),
    inset 0 -2px 0 rgba(255, 159, 22, .70);
}

.main-nav a.active::before {
  color: #ffd36b;
}

.main-nav .nav-item {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-width: 104px;
}

.main-nav .nav-item > a {
  width: 100%;
}

.nav-submenu {
  position: absolute;
  left: -8px;
  top: calc(100% + 1px);
  z-index: 30;
  display: grid;
  min-width: 190px;
  padding: 8px;
  border: 1px solid rgba(68, 201, 255, .30);
  border-radius: 0 0 7px 7px;
  background:
    linear-gradient(180deg, rgba(8, 20, 31, .98), rgba(2, 7, 12, .98)),
    #05090e;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .58), 0 0 24px rgba(0, 159, 255, .14);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .16s ease, transform .16s ease;
}

.nav-item:hover .nav-submenu,
.nav-item.is-open .nav-submenu,
.nav-item:focus-within .nav-submenu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.main-nav .nav-submenu a {
  min-width: 0;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(85, 150, 200, .16);
  border-radius: 4px;
  clip-path: none;
  background:
    linear-gradient(135deg, rgba(255, 159, 22, .14), rgba(0, 159, 255, .10)),
    rgba(3, 9, 15, .92);
  text-align: left;
}

.main-nav .nav-submenu a::before {
  content: "";
  display: none;
}

.home-game-panel {
  overflow: visible;
}

.home-game-frame {
  overflow: hidden;
  border: 1px solid rgba(68, 201, 255, .28);
  border-radius: 8px;
  background:
    radial-gradient(circle at 28% 10%, rgba(0, 159, 255, .14), transparent 22rem),
    linear-gradient(180deg, rgba(3, 10, 17, .96), rgba(1, 5, 9, .98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05),
    0 20px 55px rgba(0, 0, 0, .45);
}

.home-game-frame iframe {
  display: block;
  width: 100%;
  height: min(760px, 78vw);
  min-height: 560px;
  border: 0;
}

.gallery-card {
  display: flex;
  flex-direction: column;
}

.gallery-card-body {
  flex: 1;
  grid-template-rows: auto auto 1fr;
}

.gallery-card .gallery-votes {
  align-self: stretch;
  margin-top: auto;
}

.gallery-card .gallery-votes form {
  gap: 7px;
}

.gallery-card .rating-summary {
  display: block;
  width: 100%;
  min-height: 18px;
  padding: 0;
  border: 0;
  color: var(--blue-2);
  background: transparent;
  font-size: 12px;
  font-weight: 900;
  text-transform: none;
  text-align: left;
}

.rating-meter {
  display: flex;
  gap: 5px;
  align-items: center;
}

.rating-box {
  display: block;
  flex: 0 0 23px !important;
  width: 23px !important;
  min-width: 23px !important;
  max-width: 23px !important;
  height: 13px !important;
  min-height: 13px !important;
  padding: 0 !important;
  border: 1px solid rgba(72, 146, 196, .46);
  border-radius: 2px;
  background: rgba(2, 8, 14, .90);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, .48);
}

button.rating-box {
  cursor: pointer;
}

.rating-box.active {
  border-color: rgba(255, 159, 22, .82);
  background: linear-gradient(180deg, #ffc042, #ff8f16);
  box-shadow:
    0 0 10px rgba(255, 159, 22, .32),
    inset 0 1px 0 rgba(255, 255, 255, .32);
}

.rating-box.mine {
  border-color: #ffef9d;
  box-shadow:
    0 0 13px rgba(255, 220, 90, .58),
    inset 0 1px 0 rgba(255, 255, 255, .38);
}

.gallery-card .heart-rating,
.gallery-card .heart-btn {
  display: none;
}

.history-list {
  gap: 12px;
}

.history-type {
  display: inline-flex;
  margin-right: 8px;
  padding: 3px 7px;
  border: 1px solid rgba(68, 201, 255, .32);
  border-radius: 4px;
  color: var(--accent);
  background: rgba(0, 159, 255, .08);
  font-size: 11px;
  text-transform: uppercase;
}

.history-pagination {
  margin-top: 18px;
}

.shoutbox .shout-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  width: 100%;
}

.shoutbox .shout-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  width: 100%;
}

.shoutbox .shout-meta strong {
  min-width: 0;
  overflow-wrap: break-word;
}

.shoutbox .shout-item p {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  grid-column: 1 / -1;
  color: #d3dce7;
  line-height: 1.45;
  text-align: left;
  text-align-last: left;
  overflow: visible;
  overflow-wrap: break-word;
  word-break: normal;
  white-space: normal;
  hyphens: auto;
}

.shoutbox .smilies {
  justify-content: center;
}

.shoutbox .shout-form {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding: 15px 16px 17px;
  border: 1px solid rgba(68, 201, 255, .26);
  border-radius: 7px;
  background:
    linear-gradient(135deg, rgba(0, 159, 255, .08), transparent 60%),
    rgba(0, 0, 0, .24);
  box-shadow:
    0 14px 28px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .045);
}

.shoutbox .shout-form .smilies {
  margin: 0;
}

.shoutbox .shout-form textarea {
  margin: 0;
  min-height: 118px;
}

.shoutbox .shout-form .btn {
  justify-self: start;
}

.contact-page .section-head p {
  margin: 6px 0 0;
  color: #aebdcc;
}

.contact-page .section-head span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(68, 201, 255, .34);
  border-radius: 4px;
  color: var(--blue-2);
  background: rgba(0, 159, 255, .08);
  font-weight: 900;
  white-space: nowrap;
}

.legal-page .section-head p {
  margin: 6px 0 0;
  color: #aebdcc;
}

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

.legal-card {
  padding: 16px;
  border: 1px solid rgba(45, 108, 152, .36);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(10, 23, 35, .86), rgba(3, 8, 13, .94)),
    #060c12;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .04),
    0 12px 30px rgba(0, 0, 0, .32);
}

.legal-card-wide {
  grid-column: 1 / -1;
}

.legal-card h2 {
  margin: 0 0 10px;
  color: var(--accent);
  font-size: 15px;
  text-transform: uppercase;
}

.legal-card p {
  margin: 0;
  color: #d5e1ef;
  line-height: 1.65;
}

.legal-card a {
  color: var(--blue-2);
  font-weight: 800;
}

@media (max-width: 720px) {
  .legal-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 920px) {
  .profile-hero,
  .message-columns {
    grid-template-columns: 1fr;
  }

  .profile-grid {
    grid-template-columns: 1fr;
  }

  .profile-card + .profile-card {
    border-left: 0;
    border-top: 1px solid rgba(74, 135, 184, .18);
  }
}

@media (max-width: 620px) {
  .profile-status-grid,
  .recipient-list {
    grid-template-columns: 1fr;
  }

  .ark-player-card {
    grid-template-columns: 1fr;
  }

  .profile-account-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
}

.contact-form {
  border: 1px solid rgba(45, 108, 152, .34);
  border-radius: 7px;
  background:
    linear-gradient(135deg, rgba(0, 159, 255, .08), transparent 58%),
    rgba(0, 0, 0, .22);
  box-shadow:
    0 18px 34px rgba(0, 0, 0, .32),
    inset 0 1px 0 rgba(255, 255, 255, .04);
}

.contact-form {
  display: grid;
  gap: 14px;
  padding: 18px;
}

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

.contact-message-box {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(68, 201, 255, .24);
  border-radius: 7px;
  background: rgba(0, 0, 0, .24);
}

.contact-smilies {
  justify-content: center;
  margin: 0;
}

.contact-message-box textarea {
  min-height: 190px;
  margin: 0;
}

.contact-attachment span {
  color: #8da2b6;
  font-size: 12px;
}

.contact-form .btn {
  justify-self: start;
}

@media (max-width: 920px) {
  .contact-layout,
  .contact-fields {
    grid-template-columns: 1fr;
  }
}

/* Private-Homepage-Karte in der Sidebar (unter Shoutbox) */
.private-homepage-karte { text-align: center; }
.private-homepage-karte h2 { text-align: center; }
.private-homepage-link { display: block; text-align: center; margin: 12px 0 10px; }
.private-homepage-logo { display: block; max-width: 280px; width: 100%; height: auto; margin: 0 auto; border-radius: 8px; transition: transform .15s ease; }
.private-homepage-link:hover .private-homepage-logo { transform: scale(1.03); }
.private-homepage-text { margin: 0; text-align: center; font-size: 14px; line-height: 1.45; color: rgba(255,255,255,.85); }