/* Use local system fonts; remove external Google Fonts dependency. */

:root {
  --rank-factions-slayer: #00AA00;
  --rank-skyblock-slayer: #00AA00;
  --rank-prison-slayer: #00AA00;
  --rank-survival-slayer: #00AA00;
  --content-width: 1200px;
  --bg:#0c1214;
  --panel:#101c22;
  --panel2:#0f1a20;
  --text:#f4f7ff;
  --muted:#c3cedc;
  --accent:#33d2c2;
  --accent2:#ffb347;
  --accent3:#ff6b4a;
  --border: rgba(255,255,255,.12);
  --shadow: 0 18px 40px rgba(0,0,0,.35);
  --radius: 18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background:
    linear-gradient(rgba(10,15,20,.55), rgba(10,15,20,.55)),
    url("../images/FSG%20Gaming.jpg") center/cover no-repeat fixed,
    var(--bg);
  color:var(--text);
  line-height:1.55;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

h1,h2,h3,.brand strong{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing:.2px;
}

a{color:inherit;text-decoration:none}
.container{width:min(var(--content-width), calc(100% - 32px)); margin:0 auto}
.btn{
  display:inline-flex; gap:10px; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:999px; border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  box-shadow: var(--shadow);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.btn.ip-copy{
  font-weight:700;
  color:#fff;
}
.btn:hover{transform: translateY(-1px); border-color: rgba(255,179,71,.6)}
.btn.primary{
  border-color: rgba(255,107,74,.7);
  background: linear-gradient(135deg, rgba(255,107,74,.35), rgba(255,179,71,.25));
}
.badge{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background: rgba(51,210,194,.15); border:1px solid rgba(51,210,194,.35);
  color: var(--text); font-size:12px;
}
.badge[href]:hover,
a.badge:hover{
  background: rgba(51,210,194,.28);
  border-color: rgba(51,210,194,.6);
}
.badge[href]:focus-visible,
a.badge:focus-visible{
  outline:2px solid rgba(255,179,71,.6);
  outline-offset:2px;
}
.badge-warm{
  background: rgba(255,179,71,.18);
  border-color: rgba(255,179,71,.45);
}

/* NAV */
header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(12px);
  background: rgba(11,15,23,.65);
  border-bottom:1px solid var(--border);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.brand{display:flex; align-items:center; gap:12px}
.logo{
  width:38px; height:38px; border-radius:12px;
  background: linear-gradient(135deg, rgba(51,210,194,.9), rgba(255,179,71,.9));
  box-shadow: 0 10px 30px rgba(255,179,71,.18);
}
.brand strong{letter-spacing:.3px}
.navlinks{display:flex; align-items:center; gap:10px}
.navlinks a{
  padding:10px 12px;
  border-radius:12px;
  color: var(--muted);
  border:1px solid transparent;
}
.navlinks a:hover{color:var(--text); border-color: var(--border); background: rgba(255,255,255,.04)}
.navlinks a.active{
  color:var(--text);
  border-color: rgba(255,179,71,.45);
  background: rgba(255,179,71,.12);
}
.nav-right{display:flex; align-items:center; gap:10px}
.burger{
  display:none;
  width:44px; height:44px; border-radius:12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  color:var(--text);
}

/* MOBILE MENU */
.mobile-menu{
  display:none;
  padding:10px 0 16px;
}
.mobile-menu a{
  display:block;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  margin-top:10px;
  color: var(--muted);
}
.mobile-menu a.active{color:var(--text); border-color: rgba(255,179,71,.45); background: rgba(255,179,71,.12)}

/* HEAD BANNER */
.head-banner{
  position:relative;
  padding:78px 0 64px;
  background: none;
  overflow:hidden;
}
.head-banner-inner{position:relative; z-index:1}
.head-banner-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:24px;
  align-items:stretch;
}
.head-banner-content{
  max-width:none;
  padding:26px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.25);
  background: rgba(10,14,18,.88);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:20px;
}
.hero-left{
  display:flex;
  flex-direction:column;
}
.head-banner h1{margin:10px 0 12px; font-size: clamp(32px, 3.6vw, 50px); line-height:1.05}
.head-banner p{margin:0 0 16px; color:var(--muted)}
.head-banner-card{
  display:flex;
}
.server-card{
  width:100%;
  padding:22px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.25);
  background: rgba(10,14,18,.9);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
  gap:12px;
}
.server-card-title{
  font-weight:700;
  text-transform: uppercase;
  letter-spacing:.8px;
  font-size:12px;
  color: rgba(255,255,255,.7);
  margin-bottom:8px;
}
.server-card-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.server-card-meta{
  margin-top:6px;
  color:var(--muted);
  font-size:13px;
}
.server-inline{
  width:100%;
  padding-left:18px;
  border-left:1px solid rgba(255,255,255,.2);
}
.join-steps{
  display:grid;
  gap:10px;
  margin-top:14px;
}
.join-step{
  display:flex; gap:10px; align-items:center;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.2);
  background: rgba(10,14,18,.78);
}
.join-step span{
  width:26px; height:26px; border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center;
  background: rgba(255,179,71,.2);
  border:1px solid rgba(255,179,71,.45);
  font-weight:700;
  font-size:12px;
}
.mode-strip{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:auto;
}
.mode-pill{
  padding:10px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.05);
  font-size:14px;
  letter-spacing:.2px;
}
.mode-survival{border-color: rgba(51,210,194,.6); color:#c7f6ef}
.mode-prison{border-color: rgba(255,179,71,.7); color:#ffe0b0}
.mode-skyblock{border-color: rgba(86,194,255,.7); color:#d6f0ff}
.mode-citybuild{border-color: rgba(255,107,74,.7); color:#ffd0c4}
.mode-factions{border-color: rgba(156,255,129,.7); color:#e1ffd1}

/* HERO */
.panel{
  background: linear-gradient(180deg, rgba(12,18,20,.92), rgba(12,18,20,.78));
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.hero-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.kpis{padding:22px; display:grid; gap:12px}
.kpi{
  padding:14px; border-radius:14px;
  background: rgba(12,18,20,.65);
  border:1px solid var(--border);
}
.kpi b{display:block; font-size:18px}
.kpi span{color:var(--muted); font-size:13px}

/* SECTIONS */
.section{padding:22px 0 44px}
.section h2{margin:0 0 12px}
.section p.lead{margin:0 0 18px; color:var(--muted)}
.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
.card{
  padding:18px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.2);
  background: rgba(10,14,18,.88);
  backdrop-filter: blur(8px);
  box-shadow: 0 14px 28px rgba(0,0,0,.35);
  transition: transform .15s ease, border-color .15s ease;
}
.card:hover{transform: translateY(-2px); border-color: rgba(255,179,71,.45)}
.card h3{margin:6px 0 6px}
.card p{margin:0; color:var(--muted)}
.card .meta{margin-top:10px; display:flex; gap:8px; flex-wrap:wrap}
.highlights-card{
  padding:20px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.25);
  background: rgba(10,14,18,.9);
  backdrop-filter: blur(8px);
  box-shadow: 0 16px 32px rgba(0,0,0,.35);
}
.highlights-card h2{
  margin:0 0 10px;
}
.highlights-card .lead{
  margin:0 0 20px;
}
.highlights-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
.highlight-item{
  padding:16px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(8,12,16,.86);
}
.highlight-item h3{margin:6px 0 8px}
.highlight-item p{margin:0 0 10px; color:#dbe4f1}
.highlight-item .meta{gap:10px}
@media (max-width: 900px){
  .highlights-grid{grid-template-columns: 1fr}
}
.ranks-overview-grid{
  grid-template-columns: repeat(4, 1fr);
}
.ranks-overview-grid .card{
  display:grid;
  grid-template-rows: auto auto auto 1fr;
}
.ranks-overview-grid .card h3{
  margin:0 0 8px;
}
.ranks-overview-grid .card p.small{
  margin:0;
  min-height:auto;
}
.ranks-list-spacer{
  height:49px;
}
@media (max-width: 1200px){
  .ranks-overview-grid{grid-template-columns: repeat(2, 1fr)}
}

.table{
  width:100%;
  border-collapse: collapse;
  overflow:hidden;
  border-radius: var(--radius);
  border:1px solid var(--border);
}
.table th, .table td{
  padding:12px 12px;
  border-bottom:1px solid var(--border);
}
.table th{background: rgba(12,18,20,.7); text-align:left; color: var(--muted); font-weight:600}
.table tr:last-child td{border-bottom:none}
.small{color:var(--muted); font-size:13px}
.contact-discord{
  font-size:15px;
}
.contact-discord .badge{
  font-size:13px;
  padding:7px 12px;
}

.faq details{
  border:1px solid rgba(255,255,255,.2);
  background: rgba(10,14,18,.86);
  backdrop-filter: blur(8px);
  border-radius: var(--radius);
  padding:14px 16px;
  margin-top:10px;
}
.faq summary{cursor:pointer; font-weight:700}
.faq p{margin:10px 0 0; color:var(--muted)}

/* MODES */
.modes-card{
  padding:18px 22px 22px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.22);
  background: rgba(10,14,18,.88);
  backdrop-filter: blur(8px);
  box-shadow: 0 14px 28px rgba(0,0,0,.35);
  min-height: calc(100vh - 340px);
}
.modes-page{
  padding:16px 0 24px;
}
.modes-page .modes-card{
  padding:18px;
}
.modes-page .mode-item{
  padding:14px 0;
}
.mode-item{
  display:grid;
  grid-template-columns: 130px 1fr auto;
  gap:16px 20px;
  padding:18px 0;
}
.mode-item + .mode-item{
  border-top:1px solid rgba(255,255,255,.16);
}
.mode-item h3{margin:0 0 6px}
.mode-item p{margin:0 0 10px; color:var(--muted)}
.mode-media img{
  width:100%;
  height:auto;
  display:block;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.18);
}
.mode-media{
  max-width:130px;
}
.mode-actions{
  display:flex;
  align-items:flex-start;
}
.mode-actions-stack{
  flex-direction:column;
  gap:10px;
  align-items:flex-start;
}
.mode-actions .btn{
  min-width: 180px;
  justify-content:center;
}
.ranks-grid .btn{
  width:100%;
  max-width:140px;
  justify-content:center;
}
.ranks-grid .meta{
  justify-content:center;
}
@media (max-width: 900px){
  .mode-item{grid-template-columns:1fr}
  .mode-media{max-width:100%}
  .mode-actions{margin-top:6px}
}

/* SPOTLIGHT */
.spotlight{padding-top:10px}
.spotlight-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:24px;
  align-items:stretch;
}
.spotlight-copy h2{margin:10px 0 12px; font-size: clamp(26px, 2.4vw, 38px)}
.spotlight-copy{
  position:relative;
  overflow:hidden;
  padding:52px 22px 22px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.22);
  background: rgba(10,14,18,.86);
  backdrop-filter: blur(8px);
  box-shadow: 0 14px 28px rgba(0,0,0,.35);
  display:flex;
  flex-direction:column;
  height:100%;
}
.news-banner{
  position:absolute;
  top: 20px;
  left: -58px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px 58px;
  background:#d32020;
  color:#ffffff;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-align:center;
  transform: rotate(-45deg);
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
}
.spotlight-copy .hero-actions{
  margin-top:auto;
  padding-top:14px;
}
.spotlight-cards{
  display:grid;
  gap:12px;
}
.spot-card{
  padding:18px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.22);
  background: rgba(10,14,18,.86);
  backdrop-filter: blur(8px);
}
.spot-card h3{margin:0 0 8px}
.spot-card p{margin:0; color:var(--muted)}

/* CTA STRIP */
.cta-strip{
  margin:18px 0 32px;
}
.cta-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  padding:22px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.25);
  background: rgba(10,14,18,.86);
  backdrop-filter: blur(8px);
  box-shadow: 0 16px 34px rgba(0,0,0,.35);
}
.cta-inner h3{margin:0 0 6px}
.cta-inner p{margin:0; color:var(--muted)}
.cta-actions{display:flex; flex-wrap:wrap; gap:10px}

/* FOOTER */
footer{
  border-top:1px solid var(--border);
  padding:22px 0 30px;
  color:var(--muted);
  margin-top:auto;
}

/* RESPONSIVE */
@media (max-width: 900px){
  .head-banner{padding:56px 0 40px}
  .head-banner-content{padding:20px; grid-template-columns:1fr}
  .head-banner-grid{grid-template-columns:1fr}
  .server-inline{padding-left:0; border-left:none; border-top:1px solid rgba(255,255,255,.2); padding-top:16px}
  .spotlight-grid{grid-template-columns:1fr}
  .cta-inner{flex-direction:column; align-items:flex-start}
  .grid{grid-template-columns: 1fr}
  .navlinks{display:none}
  .burger{display:inline-flex; align-items:center; justify-content:center}
  .mobile-menu.open{display:block}
}


/* Allow cards as links */
a.card{display:block}
a.card:hover{color:inherit}


/* Minecraft-style color helpers (used for rank titles) */
.mc{display:inline-block}
.mc-0{color:#000000;}
.mc-1{color:#0000AA;}
.mc-2{color:#00AA00;}
.mc-3{color:#00AAAA;}
.mc-4{color:#AA0000;}
.mc-5{color:#AA00AA;}
.mc-6{color:#FFAA00;}
.mc-7{color:#AAAAAA;}
.mc-8{color:#555555;}
.mc-9{color:#5555FF;}
.mc-a{color:#55FF55;}
.mc-b{color:#55FFFF;}
.mc-c{color:#FF5555;}
.mc-d{color:#FF55FF;}
.mc-e{color:#FFFF55;}
.mc-f{color:#FFFFFF;}
.mc-l{font-weight:800;}
.mc-n{ text-decoration: underline; }
.mc-o{ font-style: italic; }
.mc-m{ text-decoration: line-through; }



/* Server IP pill (Startseite) */
.ip-pill{
  display:inline-flex;
  align-items:center;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color:var(--text);
}


/* === RANK COLORS (AUTO) START === */
:root {
  --rank-lobby-default: #AAAAAA;
  --rank-factions-champion: #FFFF55;
  --rank-factions-elite: #55FFFF;
  --rank-factions-exotic: #55FF55;
  --rank-factions-member: #FFFFFF;
  --rank-factions-warlord: #FF5555;
  --rank-factions-wizzard: #1fb3a8;
  --rank-lobby-elite: #5555FF;
  --rank-lobby-legend: #FF5555;
  --rank-lobby-member: #FFFFFF;
  --rank-lobby-mvp: #FFAA00;
  --rank-lobby-vip: #55FF55;
  --rank-lobby-vipplus: #55FF55;
  --rank-prison-champion: #FFFF55;
  --rank-prison-elite: #55FFFF;
  --rank-prison-exotic: #55FF55;
  --rank-prison-member: #FFFFFF;
  --rank-prison-warlord: #FF5555;
  --rank-prison-wizzard: #1fb3a8;
  --rank-skyblock-champion: #FFFF55;
  --rank-skyblock-elite: #55FFFF;
  --rank-skyblock-exotic: #55FF55;
  --rank-skyblock-member: #FFFFFF;
  --rank-skyblock-warlord: #FF5555;
  --rank-skyblock-wizzard: #1fb3a8;
  --rank-survival-champion: #FFFF55;
  --rank-survival-elite: #55FFFF;
  --rank-survival-exotic: #55FF55;
  --rank-survival-member: #FFFFFF;
  --rank-survival-warlord: #FF5555;
  --rank-survival-wizzard: #1fb3a8;
}

.rank-title { font-weight: 800; }
.rank-title-badge{
  position:relative;
  padding-right:90px;
}
.rank-title-badge-chip{
  position:absolute;
  right:0;
  top:0;
  transform: translateY(-2px);
  font-size:11px;
  padding:4px 8px;
}
.rank-factions-champion { color: var(--rank-factions-champion); }
.rank-factions-elite { color: var(--rank-factions-elite); }
.rank-factions-exotic { color: var(--rank-factions-exotic); }
.rank-factions-member { color: var(--rank-factions-member); }
.rank-factions-warlord { color: var(--rank-factions-warlord); }
.rank-factions-wizzard { color: var(--rank-factions-wizzard); }
.rank-lobby-elite { color: var(--rank-lobby-elite); }
.rank-lobby-legend { color: var(--rank-lobby-legend); }
.rank-lobby-member { color: var(--rank-lobby-member); }
.rank-lobby-mvp { color: var(--rank-lobby-mvp); }
.rank-lobby-vip { color: var(--rank-lobby-vip); }
.rank-lobby-vipplus { color: var(--rank-lobby-vipplus); }
.rank-prison-champion { color: var(--rank-prison-champion); }
.rank-prison-elite { color: var(--rank-prison-elite); }
.rank-prison-exotic { color: var(--rank-prison-exotic); }
.rank-prison-member { color: var(--rank-prison-member); }
.rank-prison-warlord { color: var(--rank-prison-warlord); }
.rank-prison-wizzard { color: var(--rank-prison-wizzard); }
.rank-skyblock-champion { color: var(--rank-skyblock-champion); }
.rank-skyblock-elite { color: var(--rank-skyblock-elite); }
.rank-skyblock-exotic { color: var(--rank-skyblock-exotic); }
.rank-skyblock-member { color: var(--rank-skyblock-member); }
.rank-skyblock-warlord { color: var(--rank-skyblock-warlord); }
.rank-skyblock-wizzard { color: var(--rank-skyblock-wizzard); }
.rank-survival-champion { color: var(--rank-survival-champion); }
.rank-survival-elite { color: var(--rank-survival-elite); }
.rank-survival-exotic { color: var(--rank-survival-exotic); }
.rank-survival-member { color: var(--rank-survival-member); }
.rank-survival-warlord { color: var(--rank-survival-warlord); }
.rank-survival-wizzard { color: var(--rank-survival-wizzard); }
/* === RANK COLORS (AUTO) END === */

.rank-lobby-default { color: var(--rank-lobby-default); }

/* === CARD LAYOUT FIX: BUTTON AT BOTTOM (STRONG) === */
.card{
  display:flex;
  flex-direction:column;
}
.card > .meta{
  margin-top:auto !important;
}
/* fallback if meta is not a direct child */
.card .meta{
  margin-top:auto !important;
}
/* === END CARD LAYOUT FIX === */

/* === CARD BUTTON ALIGN RIGHT === */
.card .meta{
  display: flex;
  justify-content: flex-end;
}
/* === END CARD BUTTON ALIGN RIGHT === */

.rank-survival-slayer { color: var(--rank-survival-slayer); }
.rank-prison-slayer { color: var(--rank-prison-slayer); }
.rank-skyblock-slayer { color: var(--rank-skyblock-slayer); }
.rank-factions-slayer { color: var(--rank-factions-slayer); }

/* === BACKGROUND SCROLL FIX === */
html, body {
  height: 100%;
}
body {
  min-height: 100vh;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}
/* If you use a gradient overlay via pseudo-element, ensure it stretches */
body::before {
  min-height: 100vh;
}
/* === END BACKGROUND SCROLL FIX === */

/* === RANK OVERVIEW PILLS === */
.rank-list{ list-style:none; padding-left:0; margin:10px 0 0; }
.rank-list li{ display:grid; grid-template-columns: 140px 1fr; column-gap:12px; align-items:center; margin:8px 0; }
.rank-badge{ display:inline-flex; align-items:center; gap:8px; }
.rank-icon{
  width:26px;
  height:26px;
  object-fit:contain;
}
.rank-image{
  width:100%;
  height:auto;
  display:block;
  border-radius: 12px;
  margin-bottom:10px;
  border:1px solid rgba(255,255,255,.18);
}
.ranks-grid .card{
  padding:14px;
}
.ranks-grid .rank-image{
  margin-bottom:8px;
}
.ranks-grid .card h3{
  margin:4px 0 6px;
}
.ranks-intro-card{
  margin-bottom:14px;
}
.ranks-intro-card h2{
  margin:0 0 8px;
}
.ranks-intro-card .lead{
  margin:0;
}
.ranks-grid{
  grid-template-columns: repeat(5, 1fr);
}
.ranks-grid .rank-card{
  display:grid;
  grid-template-rows: auto auto 70px 260px 120px auto;
}
.ranks-grid .rank-card .rank-image{grid-row:1;}
.ranks-grid .rank-card .rank-title{grid-row:2;}
.ranks-grid .rank-card .info-block{grid-row:3;}
.ranks-grid .rank-card .commands-block{grid-row:4;}
.ranks-grid .rank-card .extra-block{grid-row:5;}
.ranks-grid .rank-card .meta{
  grid-row:6;
  margin-top:110px !important;
  padding-top:0;
}
.ranks-factions .rank-card .meta{
  margin-top:70px !important;
}
.ranks-grid .rank-card .commands-block{
  margin-top:55px;
}
.ranks-grid .rank-card .extra-block{
  margin-top:42px;
}
.ranks-prison .rank-card .extra-block{
  margin-top:17px;
}
.ranks-survival .rank-card .extra-block{
  margin-top:72px;
}
.ranks-grid .rank-block{
  margin-top:2px;
}
.ranks-grid .rank-block p{
  margin:0;
}
.ranks-grid .rank-block p.small{
  margin:0 0 4px;
}
.ranks-grid .rank-block ul{
  margin:4px 0 0;
  padding-left:18px;
}
@media (max-width: 1200px){
  .ranks-grid{grid-template-columns: repeat(3, 1fr)}
}
@media (max-width: 900px){
  .ranks-grid{grid-template-columns: 1fr}
}
.rank-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:999px;
  font-weight:700;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  line-height:1;
  white-space:nowrap;
}
.ranks-overview-grid .rank-list{
  margin-top:8px;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:stretch;
}
.ranks-overview-grid .rank-list li{
  grid-template-columns: 1fr;
  justify-items:stretch;
  margin:0;
}
.ranks-overview-grid .rank-pill{
  width:100%;
  padding:12px 16px;
  font-size:15px;
}
.team-card .small{
  font-size:15px;
}

/* Lobby colors */
.rank-lobby-default{ color: var(--rank-lobby-default); }
.rank-lobby-vip{ color: var(--rank-lobby-vip); }
.rank-lobby-vipplus{ color: var(--rank-lobby-vipplus); }
.rank-lobby-mvp{ color: var(--rank-lobby-mvp); }
.rank-lobby-elite{ color: var(--rank-lobby-elite); }
.rank-lobby-legend{ color: var(--rank-lobby-legend); }

/* Gamemode overview colors (based on ingame) */
:root{
  --rank-gm-slayer:#00AA00;
  --rank-gm-warlord:#FF5555;
  --rank-gm-champion:#FFFF55;
  --rank-gm-wizzard:#1fb3a8;
  --rank-gm-elite:#55FFFF;
  --rank-gm-exotic:#55FF55;

  --rank-special-youtuber:#FF5555;
  --rank-special-famous:#55FFFF;

  --rank-team-helper:#55FFFF;
  --rank-team-moderator:#55FF55;
}

.rank-gm-slayer{ color:var(--rank-gm-slayer); }
.rank-gm-warlord{ color:var(--rank-gm-warlord); }
.rank-gm-champion{ color:var(--rank-gm-champion); }
.rank-gm-wizzard{ color:var(--rank-gm-wizzard); }
.rank-gm-elite{ color:var(--rank-gm-elite); }
.rank-gm-exotic{ color:var(--rank-gm-exotic); }

.rank-special-youtuber{ color:var(--rank-special-youtuber); }
.rank-special-famous{ color:var(--rank-special-famous); }

.rank-team-helper{ color:var(--rank-team-helper); }
.rank-team-moderator{ color:var(--rank-team-moderator); }
/* === END RANK OVERVIEW PILLS === */

/* === SERVER TEAM RANK COLORS === */
:root{
  --rank-team-owner:#FF5555;
  --rank-team-coowner:#FF5555;
  --rank-team-admin:#FFAA00;
  --rank-team-moderator:#55FFFF;
  --rank-team-helper:#55FF55;
  --rank-team-friend:#00AA00;
}
.rank-team-owner{ color:var(--rank-team-owner); }
.rank-team-coowner{ color:var(--rank-team-coowner); }
.rank-team-admin{ color:var(--rank-team-admin); }
.rank-team-moderator{ color:var(--rank-team-moderator); }
.rank-team-helper{ color:var(--rank-team-helper); }
.rank-team-friend{ color:var(--rank-team-friend); }
/* === END SERVER TEAM RANK COLORS === */

.rank-list .desc{ text-align:left; }

/* === RANK OVERVIEW LAYOUT FIXES === */
.rank-list li:empty{ display:none; }

/* Make overview cards equal height */
.section .grid{
  align-items: stretch;
}
.section .grid .card{
  height: 100%;
}
/* === END RANK OVERVIEW LAYOUT FIXES === */

/* === RANK OVERVIEW STRONG FIXES === */
.ranks-overview .rank-list{ list-style:none !important; padding-left:0 !important; margin:10px 0 0; }
.ranks-overview .rank-list li:empty{ display:none !important; }

/* Equal heights: make all cards in the overview grid the same height */
.ranks-overview .grid{
  align-items: stretch !important;
  grid-auto-rows: 1fr;
}
.ranks-overview .grid .card{
  height: 100%;
  display:flex;
  flex-direction:column;
}
.ranks-overview .grid .card .meta{
  margin-top:auto;
}
/* === END RANK OVERVIEW STRONG FIXES === */