:root {
  --bg: #060708;
  --panel: #171719;
  --panel-2: #222225;
  --text: #ffffff;
  --muted: #b8c7cd;
  --pink: #b78cff;
  --pink-2: #7a57d1;
  --accent-glow: rgba(183, 140, 255, .24);
  --cyan: #50d8c8;
  --amber: #d79a42;
  --red: #d45a55;
  --stone: #9ca3a8;
  --violet-muted: #8f78c7;
  --button-muted: #2d3335;
  --line: rgba(255, 255, 255, .17);
  --max: 1320px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  overflow-x: hidden;
}

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

button {
  font: inherit;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(5, 9, 13, .94);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(16px);
}

.nav {
  min-height: 66px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 30px;
}

.nav a {
  padding: 20px 0;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .35);
}

.nav-logo {
  width: 62px;
  height: 66px;
  padding: 0;
  display: grid;
  place-items: center;
  overflow: visible;
  align-self: center;
  transform: translateY(-13px);
}

.nav-logo img {
  width: 38px;
  height: 56px;
  object-fit: contain;
  object-position: center top;
}

.nav-spacer {
  flex: 1;
}

.search-button {
  width: 38px;
  height: 38px;
  border: 0;
  background: transparent;
  position: relative;
  cursor: pointer;
}

.search-button::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 8px;
  width: 12px;
  height: 12px;
  border: 3px solid #fff;
  border-radius: 50%;
}

.search-button::after {
  content: "";
  position: absolute;
  left: 23px;
  top: 23px;
  width: 10px;
  height: 3px;
  border-radius: 2px;
  background: #fff;
  transform: rotate(45deg);
}

.discord-button {
  min-width: 98px;
  min-height: 38px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #4850a8;
  box-shadow: 0 0 18px rgba(86, 97, 216, .18);
  text-transform: uppercase;
  font-size: 11px !important;
  letter-spacing: 1px !important;
}

.nav a.active,
.nav a:hover {
  color: var(--violet-muted);
}

.discord-button:hover {
  color: #fff !important;
  background: #545db6;
}

.server-bar {
  min-height: 70px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 24px;
  padding: 12px max(28px, calc((100vw - var(--max)) / 2 + 28px));
  background: linear-gradient(90deg, rgba(153, 114, 221, .52), rgba(255, 255, 255, .30), rgba(167, 135, 190, .43));
  border-top: 1px solid rgba(255, 255, 255, .18);
}

.copy-ip {
  display: grid;
  gap: 2px;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 1px;
}

.copy-ip small {
  color: white;
  font-size: 9px;
  letter-spacing: 1px;
}

.copy-ip {
  border: 0;
  background: transparent;
  color: var(--stone);
  cursor: pointer;
  text-align: right;
}

.copy-ip span {
  font-size: 16px;
}

.hero {
  position: relative;
  min-height: 660px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .18) 52%, rgba(0, 0, 0, .74) 100%),
    radial-gradient(circle at 50% 46%, rgba(0, 0, 0, .04), rgba(0, 0, 0, .34) 54%, rgba(0, 0, 0, .62) 100%),
    url("ChatGPT Image 25. Juni 2026, 19_43_55.png") center center / cover no-repeat,
    #07090d;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.1) 52%, rgba(0,0,0,.48) 100%),
    radial-gradient(circle at 50% 48%, transparent 0 18%, rgba(0,0,0,.16) 52%, rgba(0,0,0,.42) 100%);
}

.portal-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: none;
}

.portal-scene::before,
.portal-scene::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 380px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 2px, transparent 2px 44px),
    linear-gradient(180deg, rgba(70, 82, 76, .72), rgba(25, 32, 30, .94));
  filter: blur(.4px);
  opacity: .75;
}

.portal-scene::before {
  left: 22%;
  width: 28%;
  clip-path: polygon(0 100%, 0 18%, 28% 8%, 42% 0, 58% 14%, 76% 8%, 100% 20%, 100% 100%);
}

.portal-scene::after {
  right: -2%;
  width: 36%;
  clip-path: polygon(0 72%, 16% 52%, 34% 44%, 48% 58%, 62% 34%, 82% 28%, 100% 50%, 100% 100%, 0 100%);
}

.portal-frame {
  position: absolute;
  left: 0;
  top: 0;
  width: 34%;
  height: 100%;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 10px, rgba(0,0,0,.12) 10px 22px),
    linear-gradient(180deg, rgba(80, 90, 84, .84), rgba(31, 37, 35, .94));
  box-shadow: inset -28px 0 80px rgba(0,0,0,.58), 0 0 70px rgba(255, 126, 36, .16);
  clip-path: polygon(0 0, 86% 0, 100% 18%, 82% 46%, 94% 72%, 70% 100%, 0 100%);
}

.portal-glow {
  position: absolute;
  left: 2%;
  top: 10%;
  width: 24%;
  height: 64%;
  background:
    repeating-linear-gradient(0deg, rgba(255, 170, 64, .18) 0 3px, transparent 3px 12px),
    radial-gradient(circle, rgba(255, 170, 54, .7), rgba(147, 56, 17, .22) 60%, transparent 72%);
  box-shadow: 0 0 90px rgba(255, 127, 38, .32);
  border-radius: 12px;
  opacity: .78;
}

.floating-island {
  content: "";
  position: absolute;
  display: block;
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), transparent 24%),
    linear-gradient(180deg, rgba(69, 91, 78, .8), rgba(30, 43, 39, .95));
  opacity: .85;
  filter: blur(.2px);
  clip-path: polygon(0 44%, 20% 18%, 46% 22%, 62% 4%, 100% 28%, 86% 70%, 44% 92%, 12% 80%);
}

.torch {
  position: absolute;
  display: block;
}

.island-a { right: 8%; top: 250px; width: 180px; height: 82px; }
.island-b { right: -2%; top: 360px; width: 230px; height: 95px; transform: scaleX(-1); }

.torch {
  width: 9px;
  height: 124px;
  bottom: 142px;
  background: #562a18;
  box-shadow: 0 0 28px var(--amber);
}

.torch::before {
  content: "";
  position: absolute;
  left: -14px;
  top: -34px;
  width: 36px;
  height: 42px;
  border-radius: 50% 50% 42% 42%;
  background: radial-gradient(circle, #fff86a 0 20%, #ff9d20 46%, #f04418 75%, transparent 78%);
}

.torch-a { left: 44%; transform: rotate(-6deg); }
.torch-b { right: 36%; transform: rotate(5deg); }

.hero-content {
  position: relative;
  z-index: 2;
  min-height: 660px;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 34px 28px 24px;
  display: grid;
  justify-items: center;
  align-content: center;
  text-align: center;
}

.hero-content .brand-logo {
  width: min(430px, 62vw);
  max-width: 430px;
  max-height: 285px;
  margin-bottom: 8px;
  object-fit: contain;
  filter: drop-shadow(0 0 28px rgba(255, 126, 36, .35)) drop-shadow(0 24px 28px rgba(0,0,0,.58));
}

.hero-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.hero-kicker span {
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 87, 93, .95));
}

.hero-kicker span:last-child {
  background: linear-gradient(90deg, rgba(255, 87, 93, .95), transparent);
}

.hero h1 {
  margin: 8px 0 24px;
  color: #c9ced2;
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: clamp(54px, 9vw, 92px);
  line-height: .9;
  text-transform: uppercase;
  letter-spacing: 0;
  -webkit-text-stroke: 2px rgba(38, 42, 46, .95);
  text-shadow:
    0 3px 0 rgba(10, 12, 15, .95),
    0 0 14px rgba(126, 92, 226, .26),
    0 0 22px rgba(215, 154, 66, .14);
}

.season-pill {
  min-height: 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  padding: 0 24px;
  color: #fff;
  background: linear-gradient(90deg, #b9423f, #d79043);
  border: 1px solid rgba(255,255,255,.34);
  box-shadow: 0 0 18px rgba(215, 144, 67, .24);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.hero-content p {
  margin: 58px 0 32px;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,.42);
}

.hero-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px;
  width: min(520px, 100%);
}

.hero-action {
  min-height: 66px;
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  column-gap: 12px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  padding: 10px 16px;
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.discord-action {
  background: linear-gradient(135deg, #4850a8, #30396f);
  box-shadow: 0 0 28px rgba(86, 97, 216, .18);
}

.copy-ip.hero-action {
  background: linear-gradient(135deg, #48b6aa, #28745c);
  box-shadow: 0 0 28px rgba(80, 216, 200, .16);
  border-color: rgba(255,255,255,.34);
}

.hero-action strong {
  align-self: end;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0;
}

.hero-action small {
  grid-column: 2;
  align-self: start;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.action-icon {
  position: relative;
  grid-row: span 2;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255,255,255,.25);
}

.copy-icon::before,
.copy-icon::after {
  content: "";
  display: block;
  width: 16px;
  height: 20px;
  border: 3px solid #fff;
  border-radius: 3px;
}

.copy-icon::after {
  position: absolute;
  transform: translate(6px, 5px);
  opacity: .55;
}

.hero-grid {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  min-height: 430px;
  margin: 0 auto;
  padding: 40px 28px 0;
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(360px, 620px) minmax(250px, 1fr);
  align-items: center;
  gap: 24px;
}

.brand-stage {
  align-self: end;
  display: grid;
  place-items: center;
  min-width: 0;
  width: 100%;
}

.brand-logo {
  width: 100%;
  max-width: 680px;
  max-height: 390px;
  height: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 28px 35px rgba(0, 0, 0, .55));
}

.hero-card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 82px;
}

.hero-card strong {
  display: block;
  color: var(--violet-muted);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.hero-card span {
  color: #fff;
  font-weight: 800;
  font-size: 13px;
}

.square-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, .14);
  border-radius: 8px;
  color: var(--violet-muted);
}

.user-icon::before,
.user-icon::after,
.discord-icon::before,
.discord-icon::after {
  content: "";
  display: block;
}

.user-icon::before {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--violet-muted);
  transform: translateY(2px);
}

.user-icon::after {
  width: 26px;
  height: 14px;
  border-radius: 14px 14px 4px 4px;
  background: var(--violet-muted);
  transform: translateY(-1px);
}

.discord-icon::before {
  width: 24px;
  height: 18px;
  border-radius: 6px;
  background: var(--violet-muted);
}

.discord-icon::after {
  width: 16px;
  height: 5px;
  border-radius: 0 0 7px 7px;
  border-bottom: 3px solid var(--panel);
  transform: translateY(-13px);
}

.quick-panel,
.section,
.footer {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: 28px;
  padding-right: 28px;
}

.quick-panel {
  margin-top: -26px;
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.quick-panel a,
.news-card,
.rank-card,
.member-card {
  background: var(--panel-2);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
}

.quick-panel a {
  min-height: 86px;
  padding: 18px 20px;
  display: grid;
  align-content: center;
  gap: 4px;
  box-shadow: 0 18px 45px rgba(0,0,0,.34);
}

.quick-panel strong {
  color: var(--violet-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.quick-panel span,
.section-title p,
.news-card p,
.forum-row small,
.footer span {
  color: var(--muted);
}

.section {
  padding-top: 64px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}

.section-title.centered {
  justify-content: center;
  text-align: center;
}

.section-title h1,
.section-title h2 {
  margin: 0;
  color: var(--stone);
  font-size: 32px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.section-title p {
  margin: 12px 0 0;
  font-size: 14px;
}

.crest,
.shield {
  width: 34px;
  height: 40px;
  display: inline-block;
  background: linear-gradient(135deg, #7f9096, var(--violet-muted));
  clip-path: polygon(50% 0, 92% 16%, 82% 72%, 50% 100%, 18% 72%, 8% 16%);
  box-shadow: 0 0 26px var(--accent-glow);
}

.crest.store { background: linear-gradient(135deg, var(--amber), #728482); }

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

.store-closed {
  min-height: 210px;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  padding: 26px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(215, 154, 66, .13), transparent 38%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 8px, transparent 8px 18px),
    var(--panel-2);
}

.lock-icon {
  width: 64px;
  height: 64px;
  position: relative;
  display: block;
  border-radius: 8px;
  background: rgba(215, 154, 66, .18);
  border: 1px solid rgba(215, 154, 66, .38);
}

.lock-icon::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 12px;
  width: 28px;
  height: 26px;
  border: 5px solid var(--amber);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
}

.lock-icon::after {
  content: "";
  position: absolute;
  left: 15px;
  bottom: 13px;
  width: 34px;
  height: 30px;
  border-radius: 5px;
  background: var(--amber);
  box-shadow: 0 0 20px rgba(215, 154, 66, .28);
}

.store-closed h3 {
  margin: 8px 0 8px;
  font-size: 28px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.store-closed p {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.store-closed button {
  min-width: 120px;
  min-height: 34px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 5px;
  color: #c2c8ca;
  background: var(--button-muted);
  font-weight: 900;
  text-transform: uppercase;
  cursor: not-allowed;
}

.rank-card {
  padding: 22px;
  min-height: 166px;
}

.tag {
  color: var(--violet-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 900;
  font-size: 12px;
}

.tag.cyan { color: var(--cyan); }
.tag.amber { color: var(--amber); }

.updates-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.updates-filter {
  position: sticky;
  top: 184px;
  display: grid;
  gap: 28px;
}

.update-search {
  display: grid;
  gap: 8px;
}

.update-search span,
.filter-block h3 {
  color: var(--violet-muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.update-search input {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 5px;
  padding: 0 14px;
  color: var(--stone);
  background: #1d1d20;
  font: inherit;
}

.filter-block {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.filter-block h3 {
  margin: 0 0 12px;
}

.filter-button,
.month-block a {
  min-height: 36px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 9px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .11);
  color: var(--muted);
  background: transparent;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.filter-button.active,
.filter-button:hover,
.month-block a:hover {
  color: var(--text);
}

.filter-button em,
.month-block em {
  color: #8e989c;
  font-style: normal;
  font-size: 12px;
}

.filter-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--violet-muted);
}

.filter-dot.all { background: var(--stone); }
.filter-dot.feature { background: #5aa99e; }
.filter-dot.improvement { background: #7187ad; }
.filter-dot.bug { background: #b45a56; }
.filter-dot.technical { background: var(--violet-muted); }

.month-block a {
  grid-template-columns: 1fr auto;
}

.month-list {
  display: grid;
}

.empty-months {
  margin: 0;
  min-height: 36px;
  display: grid;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.updates-board {
  min-width: 0;
}

.update-month {
  display: grid;
  gap: 8px;
  scroll-margin-top: 90px;
}

.month-heading {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--line);
}

.month-heading h2 {
  margin: 0;
  font-size: 25px;
}

.month-heading span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.update-list {
  display: grid;
  gap: 24px;
}

.month-updates {
  display: grid;
  gap: 8px;
}

.update-entry {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 116px;
  gap: 22px;
  min-height: 86px;
  padding: 18px 16px 18px 24px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: #222224;
}

.update-entry.highlight {
  border-left: 4px solid var(--violet-muted);
  padding-left: 20px;
}

.update-date {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 1px;
  color: var(--text);
  text-transform: uppercase;
}

.update-date small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
}

.update-date strong {
  font-size: 27px;
  line-height: 1;
}

.update-content h3 {
  margin: 0 0 10px;
  font-size: 16px;
}

.update-content ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 7px;
  line-height: 1.45;
  font-size: 13px;
}

.update-badge {
  justify-self: end;
  align-self: start;
  min-width: 80px;
  min-height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 0 9px;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.update-badge.feature { color: #74beb3; background: rgba(80, 216, 200, .06); }
.update-badge.improvement { color: #8fa2c6; background: rgba(126, 158, 216, .07); }
.update-badge.bug { color: #c77470; background: rgba(212, 90, 85, .07); }
.update-badge.technical { color: #aa94db; background: rgba(183, 140, 255, .07); }

.empty-updates {
  padding: 24px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: var(--panel-2);
}

.role-heading h3 span {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--rank-color, var(--violet-muted));
  box-shadow: 0 0 14px color-mix(in srgb, var(--rank-color, var(--violet-muted)) 34%, transparent);
}

.thread-card,
.theme-picker {
  background: var(--panel-2);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
}

.thread-card strong {
  display: block;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.thread-card small {
  color: var(--muted);
  font-size: 13px;
}

.forum-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
}

.forum-toolbar h3 {
  margin: 6px 0 0;
  font-size: 26px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

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

.thread-card {
  min-height: 76px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 74px 74px;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--panel);
}

.thread-card > span {
  display: grid;
  place-items: center;
  color: var(--violet-muted);
  font-weight: 900;
}

.thread-card > span small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
}

.rank-card {
  display: grid;
  gap: 12px;
  align-content: start;
  background:
    linear-gradient(145deg, rgba(255, 102, 242, .18), transparent 45%),
    var(--panel-2);
}

.rank-card.featured {
  border-color: rgba(255, 189, 56, .52);
  box-shadow: 0 0 30px rgba(255, 189, 56, .14);
}

.rank-card span {
  color: var(--amber);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.rank-card strong {
  font-size: 24px;
}

.rank-card button {
  width: 86px;
  min-height: 38px;
  border: 0;
  border-radius: 6px;
  color: #070708;
  background: #728482;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}

.staff-section {
  padding-bottom: 20px;
}

.staff-list {
  display: grid;
  gap: 34px;
}

.role-block {
  margin-top: 34px;
  --rank-color: var(--violet-muted);
}

.staff-list .role-block:first-child {
  margin-top: 0;
}

.role-block.owner { --rank-color: #c77470; }
.role-block.admin { --rank-color: #d45a55; }
.role-block.moderator { --rank-color: #d79a42; }
.role-block.developer { --rank-color: #50d8c8; }
.role-block.builder { --rank-color: #8fd46a; }
.role-block.helper { --rank-color: #b78cff; }

.role-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.role-heading h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--rank-color);
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.role-heading small {
  color: var(--muted);
}

.members {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 14px;
}

.member-card {
  width: 176px;
  height: 158px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
}

.avatar {
  width: 72px;
  height: 72px;
  border-radius: 4px;
  background:
    linear-gradient(90deg, transparent 0 30%, rgba(0,0,0,.2) 30% 70%, transparent 70%),
    linear-gradient(#f4f4f4 0 74%, #2a2b30 74% 100%);
  image-rendering: pixelated;
}

.minecraft-head {
  display: block;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, .18);
  background: #101012;
}

.avatar-two {
  background:
    linear-gradient(90deg, transparent 0 26%, #12e8ef 26% 38%, transparent 38% 62%, #12e8ef 62% 74%, transparent 74%),
    linear-gradient(#f6f6f6 0 74%, #35363b 74% 100%);
}

.avatar-three {
  background:
    linear-gradient(90deg, transparent 0 20%, #62ff6a 20% 38%, transparent 38% 62%, #62ff6a 62% 80%, transparent 80%),
    linear-gradient(#f8f8f8 0 56%, #dfb98c 56% 76%, #222 76% 100%);
}

.member-card strong {
  font-size: 14px;
  text-shadow: 0 2px 0 #000;
}

.member-card span {
  color: var(--rank-color);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.footer {
  min-height: 92px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--line);
  color: var(--stone);
}

.theme-section {
  padding-bottom: 62px;
}

.crest.theme {
  background: linear-gradient(135deg, #728482, var(--violet-muted));
}

.theme-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px;
}

.theme-swatch {
  min-width: 104px;
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 6px;
  color: var(--text);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--swatch) 60%, #2b3031) 0 24%, transparent 24%),
    #151719;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
}

.theme-swatch.active,
.theme-swatch:hover {
  border-color: color-mix(in srgb, var(--swatch) 52%, #8a8f92);
  box-shadow: 0 0 16px color-mix(in srgb, var(--swatch) 16%, transparent);
}

.admin-nav {
  grid-template-columns: repeat(3, minmax(120px, 1fr));
}

.admin-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 102, 242, .16), transparent 24%),
    radial-gradient(circle at 82% 20%, rgba(103, 247, 255, .13), transparent 24%),
    var(--bg);
}

.admin-hero {
  padding-top: 74px;
  padding-bottom: 84px;
}

.admin-status,
.admin-form,
.admin-list {
  background: var(--panel-2);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 8px;
}

.admin-status {
  margin-bottom: 18px;
  padding: 18px;
}

.admin-status strong {
  display: block;
  color: var(--violet-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.admin-status p {
  margin: 8px 0 0;
  color: var(--muted);
}

.admin-login,
.admin-status button,
.admin-form button,
.admin-update-card button,
.admin-staff-card button,
.admin-access-card button {
  min-height: 34px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 5px;
  margin-top: 14px;
  padding: 0 13px;
  color: #070708;
  background: var(--button-muted);
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}

.code-login-form {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.code-login-form input {
  min-width: 260px;
  min-height: 40px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 6px;
  padding: 0 12px;
  color: var(--text);
  background: #101012;
  font: inherit;
}

.admin-login.secondary {
  margin-left: 10px;
  background: #3d4648;
}

.admin-grid {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 18px;
}

.admin-tools {
  display: grid;
  gap: 18px;
}

.is-hidden {
  display: none;
}

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

.admin-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.admin-form-row {
  display: grid;
  grid-template-columns: 1.4fr .8fr .8fr;
  gap: 12px;
}

.admin-form input,
.admin-form textarea,
.admin-form select {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 6px;
  padding: 12px;
  color: var(--text);
  background: #101012;
  font: inherit;
}

.checkbox-label {
  grid-template-columns: auto 1fr;
  align-items: center;
  justify-content: start;
}

.checkbox-label input {
  width: 18px;
  height: 18px;
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-actions button + button,
.admin-update-card button + button,
.admin-staff-card button + button,
.admin-access-card button + button,
.admin-status button {
  background: #3d4648;
}

.admin-list {
  padding: 18px;
}

.admin-update-card {
  grid-template-columns: minmax(0, 1fr) 74px 82px;
}

.admin-access-card {
  grid-template-columns: minmax(0, 1fr) 74px 82px;
}

.admin-staff-card {
  grid-template-columns: 48px minmax(0, 1fr) 74px 82px;
}

.admin-staff-head {
  width: 46px;
  height: 46px;
  border-radius: 4px;
  image-rendering: pixelated;
  background: #101012;
}

.admin-update-card button,
.admin-staff-card button,
.admin-access-card button {
  min-height: 34px;
  margin: 0;
  padding: 0 10px;
  font-size: 12px;
}

@media (max-width: 900px) {
  .nav {
    min-height: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    gap: 6px 10px;
    padding: 10px 14px;
  }

  .nav a {
    font-size: 12px;
    padding: 10px 4px;
    text-align: center;
  }

  .nav-logo {
    width: 54px;
    height: 58px;
    transform: translateY(-11px);
  }

  .nav-logo img {
    width: 34px;
    height: 50px;
  }

  .nav-logo {
    justify-self: center;
  }

  .nav-spacer {
    display: none;
  }

  .search-button {
    display: none;
  }

  .discord-button {
    justify-self: center;
    min-width: 88px;
    min-height: 34px;
  }

  .server-bar {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .copy-ip {
    text-align: left;
  }

  .hero-grid {
    min-height: 610px;
    grid-template-columns: minmax(0, 1fr);
    padding: 24px 18px 72px;
    gap: 10px;
    align-content: start;
  }

  .hero,
  .hero-content {
    min-height: 760px;
  }

  .portal-frame {
    width: 52%;
    opacity: .72;
  }

  .portal-glow {
    width: 38%;
  }

  .hero-content {
    padding: 24px 18px 24px;
  }

  .hero-content .brand-logo {
    width: min(230px, 62vw);
  }

  .hero-kicker {
    font-size: 12px;
    gap: 10px;
  }

  .hero-kicker span {
    width: 34px;
  }

  .hero-content p {
    margin-top: 38px;
    max-width: 320px;
    line-height: 1.35;
  }

  .hero-actions {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: min(310px, calc(100vw - 72px));
  }

  .hero-action {
    min-height: 64px;
    padding: 10px 12px;
  }

  .brand-stage {
    order: -1;
    max-width: 100%;
    overflow: hidden;
  }

  .brand-logo {
    width: min(330px, calc(100vw - 60px));
    max-width: calc(100vw - 60px);
  }

  .hero-card {
    justify-content: center;
    text-align: center;
    min-width: 0;
    flex-wrap: wrap;
  }

  .hero-card div {
    min-width: 0;
  }

  .hero-card strong,
  .hero-card span {
    overflow-wrap: anywhere;
  }

  .quick-panel,
  .store-grid,
  .updates-layout {
    grid-template-columns: 1fr;
  }

  .store-closed {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .updates-filter {
    position: static;
  }

  .update-entry {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 14px;
  }

  .update-badge {
    grid-column: 2;
    justify-self: start;
  }

  .thread-card {
    grid-template-columns: minmax(0, 1fr) 58px 58px;
  }

  .forum-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-grid,
  .admin-form-row {
    grid-template-columns: 1fr;
  }

  .admin-update-card,
  .admin-staff-card,
  .admin-access-card {
    grid-template-columns: 1fr;
  }

  .admin-staff-head {
    width: 56px;
    height: 56px;
  }
}

@media (max-width: 520px) {
  .server-bar,
  .quick-panel,
  .section,
  .footer {
    padding-left: 18px;
    padding-right: 18px;
  }

  .section-title,
  .section-title.centered {
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
  }

  .section-title h1,
  .section-title h2 {
    font-size: 26px;
  }

  .member-card {
    width: calc(50% - 7px);
    min-width: 142px;
  }
}