/* main.css */
:root{
  --bg: #0b0f14;
  --bg2:#0f1620;
  --card:#121c28;
  --muted:#a9b4c2;
  --text:#e9eef5;
  --line: rgba(255,255,255,.10);
  --line2: rgba(255,255,255,.14);
  --accent:#57bff2;
  --accent2:#49a1d6;
  --shadow: 0 12px 30px rgba(0,0,0,.35);
  --radius: 16px;
  --radius2: 12px;
  --container: 1280px;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:
    radial-gradient(1000px 500px at 20% -10%, rgba(87, 180, 242, 0.16), transparent 60%),
    radial-gradient(800px 400px at 85% 0%, rgba(90,180,255,.12), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  color: var(--text);
}

a{ color:inherit; text-decoration:none; }
p{ line-height:1.55; color: var(--muted); }
h1,h2,h3{ margin:0 0 10px 0; line-height:1.1; color: var(--text); }
h1{ font-size: clamp(28px, 3.2vw, 44px); letter-spacing: -0.02em; }
h2{ font-size: 18px; }
h3{ font-size: 18px; }

.container{
  width: min(var(--container), calc(100% - 32px));
  margin: 0 auto;
}

.site-header{
  position: sticky;
  top:0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(10,14,19,.70);
  border-bottom: 1px solid var(--line);
}

.header-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 12px;
}

.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  user-select:none;
}


/* nav */
.hamburger{
  display:none;
  width: 44px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  cursor:pointer;
  padding: 10px;
}
.hamburger span{
  display:block;
  height:2px;
  background: rgba(255,255,255,.75);
  margin: 5px 0;
  border-radius: 2px;
}

.nav{ display:block; }
.nav-list{
  display:flex;
  align-items:center;
  gap: 2px;
  list-style:none;
  margin:0;
  padding:0;
}
.nav-link{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 10px 10px;
  border-radius: 12px;
  color: rgba(255,255,255,.86);
  border: 1px solid transparent;
  background: transparent;
  cursor:pointer;
  font: inherit;
}
.nav-link:hover{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.06);
}
.chev{ opacity:.75; font-size: 12px; }

/* right side */
.header-right{
  display:flex;
  align-items:center;
  gap: 10px;
}

.lang-btn{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid var(--line2);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.88);
  cursor:pointer;
  font: inherit;
}

.user-chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  cursor:pointer;
  font: inherit;
  color: #eee;
}
.user-name{ max-width: 180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.avatar{
  width: 26px;
  height: 26px;
  border-radius: 9px;
  object-fit: cover;
}
.avatar.placeholder{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.06);
}
.flag{
  width: 18px;
  height: 12px;
  border-radius: 2px;
  object-fit: cover;
}

/* dropdowns */
.dropdown{ position:relative; }
.dropdown-menu{
  position:absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 250px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(14, 20, 28, 0.99);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  z-index: 500;
  display:none;
}
.dropdown-menu.right{
  right:0;
  left:auto;
}
.dropdown.open .dropdown-menu{ display:block; }

.dropdown-link{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  color: rgba(255,255,255,.88);
}
.dropdown-link:hover{
  background: rgba(255,255,255,.05);
}
.dropdown-link.active{
  border: 1px solid rgba(87, 180, 242, 0.25);
  background: rgba(87, 172, 242, 0.08);
}

/* Ensure dropdown items look the same whether they're <a> or <button> */
button.dropdown-link{
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
button.dropdown-link:focus{ outline: none; }

.dropdown-left{
  display:inline-flex;
  align-items:center;
  gap: 10px;
}

.dd-ico{
  font-size: 16px;
  opacity: .9;
  width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* main content */
main.container{
  padding: 26px 0 60px;
}

.page{
  padding-top: 10px;
}

.prose{
  margin: 0 auto;
}

.prose .meta{
  margin-top: 6px;
  font-size: 13px;
  color: rgba(255,255,255,.55);
}

.prose h2{
  margin-top: 16px;
  font-size: 16px;
}

.prose ul{
  margin: 10px 0 14px;
  padding-left: 18px;
}

.prose li{
  margin: 6px 0;
  color: var(--muted);
  line-height: 1.55;
}

.prose strong{
  color: rgba(255,255,255,.85);
  font-weight: 700;
}

.hero{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  align-items: stretch;
}

.lead{
  font-size: 16px;
  /*! max-width: 131ch; */
}

.hero-actions{
  display:flex;
  gap: 10px;
  margin: 16px 0 10px;
  flex-wrap: wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--line2);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.9);
}
.btn:hover{ background: rgba(255,255,255,.05); }
.btn.primary{
  border-color: rgba(87, 172, 242, 0.25);
  background: linear-gradient(135deg, rgba(87, 167, 242, 0.1rgba(87, 172, 242, 0.06).06));
  color: var(--text);
}
.btn.primary:hover{
  border-color: rgba(87, 180, 242, 0.35);
}
.btn.subtle{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}

.hero-meta{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.pill{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  color: rgba(255,255,255,.82);
}

.glass-card{
  height: 100%;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(400px 200px at 30% 0%, rgba(87, 185, 242, 0.1), transparent 60%),
    rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  padding: 16px;
}
.card-title{
  font-weight: 800;
  letter-spacing: .02em;
  margin-bottom: 10px;
}
.card-list{
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.card-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.14);
}
.card-row:hover{
  border-color: rgba(87, 154, 242, 0.22);
}
.arrow{ opacity:.8; }
.card-note{
  margin-top: 12px;
  font-size: 13px;
  color: rgba(255,255,255,.62);
}

.grid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.panel{
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(18, 20, 26, 0.83);
  padding: 16px;
}
.text-link{
  display:inline-flex;
  margin-top: 10px;
  color: rgba(87, 237, 242, 0.9);
}

.divider{
  height: 1px;
  background: var(--line);
  margin: 22px 0;
}

.callout-inner{
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(135deg, rgba(87, 167, 242, 0.1), rgba(255,255,255,.02));
  padding: 18px;
}

/* ===== Footer ===== */
.site-footer{
  height: 150px;
  border-top: 1px solid var(--line);
  background: rgba(10,14,19,.65);
  display: flex;
}

.footer-row{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-center{
  text-align: center;
  color: rgba(255,255,255,.70);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.footer-main{
  color: rgba(255,255,255,.70);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.footer-legacy{
  margin-top: 21px;
  font-size: 11px;
  letter-spacing: .04em;
  color: rgba(149, 146, 146, 0.45);
  line-height: 1.4;
  text-transform: none;
}

.footer-legacy-link{
  color: rgba(172, 186, 219, 0.44);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.18);
  padding-bottom: 1px;
}

.footer-legacy-link:hover{
  color: rgba(255,255,255,.75);
  border-bottom-color: rgba(255,255,255,.30);
}


/* ===========================
   Standard page components
   =========================== */

.page-layout{
  display: grid;
  gap: 14px;
  align-items: start;
}
.page-layout--2col{
  grid-template-columns: 1.25fr .75fr;
}

.hero-card{
  padding: 18px;
  border-radius: var(--radius2);
}
.hero-badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(87, 206, 242, 0.22);
  background: rgba(87, 227, 242, 0.08);
  color: rgba(255,255,255,.86);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 800;
  margin-bottom: 10px;
}

.section-card{
  padding: 16px;
  border-radius: var(--radius2);
  margin-top: 12px;
}
.section-head{
  margin-bottom: 12px;
}
.section-title{
  font-size: 14px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  font-weight: 900;
}
.section-sub{
  margin-top: 6px;
  color: rgba(255,255,255,.60);
  font-size: 13px;
  line-height: 1.45;
}

.card-grid{
  display: grid;
  gap: 10px;
}
.card-grid--2{
  grid-template-columns: repeat(2, 1fr);
}

.box{
  display:flex;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}
.box-ico{
  font-size: 18px;
  opacity: .9;
  margin-top: 2px;
}
.box-title{
  font-weight: 900;
  color: rgba(255,255,255,.88);
  margin-bottom: 2px;
}
.box-text{
  font-size: 13px;
  color: rgba(255,255,255,.60);
  line-height: 1.45;
}

.note{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255,255,255,.48);
}

.metrics{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 10px 0 12px;
}
.metric{
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
}
.metric-label{
  font-size: 12px;
  color: rgba(255,255,255,.55);
  margin-bottom: 4px;
}
.metric-value{
  font-weight: 900;
  color: rgba(255,255,255,.88);
}

.steps{
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.step{
  display:flex;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}
.step-num{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  color: rgba(255,255,255,.88);
  border: 1px solid rgba(87,242,135,.22);
  background: rgba(87,242,135,.08);
  flex: 0 0 auto;
}
.step-title{
  font-weight: 900;
  margin-bottom: 3px;
  color: rgba(255,255,255,.86);
}
.step-text{
  font-size: 13px;
  color: rgba(255,255,255,.62);
  line-height: 1.5;
}
.step code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  background: rgba(255,255,255,.06);
  padding: 2px 6px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.10);
}

.wide{ width: 100%; }

/* Responsive */
@media (max-width: 980px){
  .page-layout--2col{ grid-template-columns: 1fr; }
  .card-grid--2{ grid-template-columns: 1fr; }
}



/* Golden ticket modifier */
.ticket{
  padding: 16px;
  border-radius: var(--radius2);
}

.ticket-head{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.ticket-title{
  font-weight: 900;
  letter-spacing: .04em;
}

.ticket-sub{
  margin-top: 4px;
  color: rgba(0,0,0,.55);
  font-size: 13px;
}

.ticket-icon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.22);
}

.ticket--gold{
  border: 1px solid rgba(255, 210, 90, .35);
  background:
    radial-gradient(500px 220px at 10% 0%, rgba(255,255,255,.35), transparent 60%),
    linear-gradient(135deg, rgba(255, 215, 100, .95), rgba(255, 190, 60, .82));
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
  color: rgba(0,0,0,.82);
}

.ticket--gold .metric{
  border-color: rgba(0,0,0,.10);
  background: rgba(255,255,255,.18);
}
.ticket--gold .metric-label{ color: rgba(0,0,0,.55); }
.ticket--gold .metric-value{ color: rgba(0,0,0,.82); }

.ticket--gold .btn.primary{
  border-color: rgba(0,0,0,.12);
  background: rgba(0,0,0,.12);
  color: rgba(0,0,0,.85);
}
.ticket--gold .btn.primary:hover{
  background: rgba(0,0,0,.16);
}

.ticket--gold .legal{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(0,0,0,.55);
}
.ticket--gold .legal a{
  color: rgba(0,0,0,.70);
  border-bottom: 1px solid rgba(0,0,0,.18);
  padding-bottom: 1px;
}
.ticket--gold .legal a:hover{
  color: rgba(0,0,0,.86);
  border-bottom-color: rgba(0,0,0,.28);
}

/* ===========================
   Global reusable UI blocks
   =========================== */

.player-link{
  font-weight: 800;
  color: #85bdd2;
}
.player-link:hover{
  color: rgba(255,255,255,.98);
  border-bottom-color: rgba(255,255,255,.28);
}
.player-vip{
  color: #ffd35a;
  font-size: 1em;
  filter: drop-shadow(0 1px 6px rgba(255,210,80,.16));
}

/* Map links colored by difficulty */
.map-link{
  font-weight: 800;
}

.map-link.diff-0{  color: rgba(255,255,255,.80); }
.map-link.diff-1{  color: #75d47b; }   /* beginner */
.map-link.diff-1:hover{  color: #20bb73; }   /* beginner */
.map-link.diff-2{  color: #bcd75b; }  /* easy */
.map-link.diff-2:hover{  color: #b4a71a; }  /* easy */
.map-link.diff-3{  color: #e1cd60; }   /* easy-med */
.map-link.diff-3:hover{  color: #928b46; }   /* easy-med */
.map-link.diff-4{  color: #dd8e60; }  /* med */
.map-link.diff-4:hover{  color: #c7561e; }  /* med */
.map-link.diff-5{  color: #c6614a; }  /* med-hard */
.map-link.diff-5:hover{  color: #a85844; }  /* med-hard */
.map-link.diff-6{  color: #d75960; }  /* hard */
.map-link.diff-6:hover{  color: #b33131; }  /* hard */
.map-link.diff-7{  color: #cc6fb9; }  /* hard-extreme */
.map-link.diff-7:hover{  color: #bb40a2; }  /* hard-extreme */
.map-link.diff-8{  color: #9e61d2; }   /* extreme */
.map-link.diff-8:hover{  color: #683a8e; }   /* extreme */
.map-link.diff-9{  color: #b29acc; }   /* extreme-death */
.map-link.diff-9:hover{  color: #8a779f; }   /* extreme-death */
.map-link.diff-10{ color: #c6c6c6; }    /* death */
.map-link.diff-10:hover{ color: #8a8989; }    /* death */


/* Badges / tags */
.badges{ display:flex; flex-wrap:wrap; gap: 8px; margin-top: 10px; }
.badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  color: rgba(255,255,255,.78);
  font-size: 12px;
}
.badge strong{ color: rgba(255,255,255,.90); font-weight: 900; }

.badge.diff-0{ }
.badge.diff-1{ border-color: #75d47b; background: #75d47b24; }
.badge.diff-2{ border-color: #bcd75b; background: #bcd75b24; }
.badge.diff-3{ border-color: #e1cd60; background: #e1cd6024; }
.badge.diff-4{ border-color: #dd8e60; background: #dd8e6024; }
.badge.diff-5{ border-color: #c6614a; background: #c6614a24; }
.badge.diff-6{ border-color: #d75960; background: #d7596024; }
.badge.diff-7{ border-color: #cc6fb9; background: #cc6fb924; }
.badge.diff-8{ border-color: #9e61d2; background: #9e61d224; }
.badge.diff-9{ border-color: #b29acc; background: #b29acc24; }
.badge.diff-10{ border-color: #c6c6c6; background: #c6c6c624; }

/* Tabs */
.tabs{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 10px;
}
.tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  color: rgba(255,255,255,.80);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 12px;
}
.tab:hover{ background: rgba(255,255,255,.04); }
.tab.active{
  border-color: rgba(87,242,135,.25);
  background: rgba(87,242,135,.08);
  color: rgba(255,255,255,.92);
}

.tab-count{
  margin-left:6px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.55);
  letter-spacing: 0;
  text-transform: none;
}
.tab.active .tab-count{
  color: rgba(255,255,255,.72);
}

.sub{
  margin-left:6px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.55);
}

/* Tables */
.table-wrap{
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
}

.table{
  width:100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: rgba(0,0,0,.10);
}

.table th, .table td{
  padding: 8px 8px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 12.5px;
  color: rgba(255,255,255,.74);
  text-align:left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table th{
  font-size: 11.5px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}

.table tr:hover td{
  background: rgba(255,255,255,.03);
}
.table td.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: rgba(255,255,255,.84);
}

/* Simple 2-col page layout (map/player pages will use it) */
.page-split{
  display:grid;
  grid-template-columns: 1.7fr .9fr;
  gap: 14px;
  align-items: start;
}
.page-split > *{
  min-width: 0; /* allow columns to shrink; prevents right side panels from overflowing */
}
@media (max-width: 980px){
  .page-split{ grid-template-columns: 1fr; }
  .table{ min-width: 640px; }
}

/* Rank & League block */
.league-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.league-badge{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(87,242,135,.10), rgba(90,220,255,.06));
}
.league-badge .title{
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(255,255,255,.68);
}
.league-badge .value{
  font-size: 20px;
  font-weight: 950;
  color: rgba(255,255,255,.95);
  line-height: 1.1;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
  font-size: 12px;
  color: rgba(255,255,255,.78);
  font-weight: 800;
}
.stats-grid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}
@media (max-width: 980px){
  .stats-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.stat .k i{ margin-right: 8px; opacity: .85; }







/* ===========================
   Mobile responsiveness
   =========================== */

/* Prevent accidental horizontal scrolling */
html, body {
  overflow-x: hidden;
}

/* Make images never overflow */
img {
  max-width: 100%;
  height: auto;
}

.video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

/* Tablet breakpoint */
@media (max-width: 980px) {
  .header-row {
    gap: 10px;
  }

  .user-name {
    max-width: 120px;
  }

  /* Layout stacking */
  .hero {
    grid-template-columns: 1fr;
  }
  .grid {
    grid-template-columns: 1fr;
  }

  /* Bigger tap targets */
  .btn, .nav-link, .lang-btn, .user-chip {
    min-height: 44px;
  }

  /* Show hamburger, collapse nav */
  .hamburger {
    display: inline-block;
  }

  /* Put nav as full-width dropdown sheet */
  .nav {
    position: absolute;
    top: 64px;       /* adjust if your header height changes */
    left: 0;
    right: 0;
    display: none;
    padding: 10px 0 16px;
    background: rgba(10, 14, 19, 0.94);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(10px);
  }

  .nav.open {
    display: block;
  }

  .nav-list {
    width: min(var(--container), calc(100% - 32px));
    margin: 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 8px 0;
  }

  .nav-item {
    width: 100%;
  }

  /* Make dropdown buttons fill width */
  .nav-link {
    width: 100%;
    justify-content: space-between;
  }

  /* Dropdown menus become inline sections (no absolute positioning on mobile) */
  .dropdown-menu {
    position: static;
    min-width: unset;
    width: 100%;
    margin-top: 6px;
    display: none; /* keep closed by default */
  }

  .dropdown.open .dropdown-menu {
    display: block;
  }

  /* Slightly separate dropdown section on mobile */
  .dropdown-menu .dropdown-link {
    border: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.02);
  }

  /* Header-right compact */
  .header-right {
    gap: 8px;
  }
}

/* Phone breakpoint */
@media (max-width: 560px) {
  .header-row {
    padding: 12px 0;
  }

  .brand-name {
    display: none; /* keep logo mark only on very small screens */
  }

  .user-name {
    display: none; /* avatar + flag only */
  }

  /* Make hero spacing better on phones */
  main.container {
    padding: 18px 0 50px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn {
    width: 100%;
  }

  /* Panels a bit tighter */
  .panel, .glass-card, .callout-inner {
    padding: 14px;
    border-radius: 16px;
  }

  /* Dropdown menus for user/lang: full-width feel */
  .header-right .dropdown-menu.right {
    right: 0;
    left: auto;
    width: min(320px, calc(100vw - 16px));
  }

  /* Slightly smaller pills */
  .pill {
    font-size: 11px;
    padding: 6px 9px;
  }
}

/* Very small phones */
@media (max-width: 380px) {
  .brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 11px;
  }

  .lang-btn {
    padding: 8px 10px;
  }

  .user-chip {
    padding: 6px 8px;
  }
}


/* ===========================
   Enhancements: flags, media, sortable tables
   =========================== */

.player-link{
  display:inline-flex;
  align-items:center;
  gap: 4px;
}
.player-name{ line-height: 1.1; }
.player-vip{ font-size: 1em; }

.flag{ display:inline-block; border-radius: 3px; }
.flag-sm{ width: 18px; height: 12px; }
.flag-md{ width: 22px; height: 16px; }

/* 3/2 images */
.media{
  border-radius: 16px;
  /*! border: 1px solid rgba(255,255,255,.10); */
  background: rgba(0,0,0,.18);
  overflow: hidden;
}
.ratio-3-2{ aspect-ratio: 3 / 2; }
.media img{
  width:100%;
  height:100%;
  display:block;
}

/* Scrollable player lists (rating) */
.scroll-list{
  margin-top: 8px;
  max-height: 120px;
  overflow:auto;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
  padding: 8px;
}
.scroll-list .row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 6px;
  border-radius: 10px;
}
.scroll-list .row:hover{ background: rgba(255,255,255,.03); }

/* Sortable tables */
.table.sortable th[data-sort]{
  cursor: pointer;
  user-select: none;
}
.table.sortable th[data-sort] .sort-ico{
  opacity: .45;
  margin-left: 8px;
  font-size: 12px;
}
.table.sortable th.sorted-asc .sort-ico{ opacity: .95; }
.table.sortable th.sorted-desc .sort-ico{ opacity: .95; transform: rotate(180deg); }

/* Similar map cards */
.similar-grid{
  margin-top: 10px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.similar-card{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}
.similar-meta{
  color: rgba(255,255,255,.55);
  font-size: 12px;
  margin-top: 4px;
}

@media (max-width: 980px){
  .similar-card{ grid-template-columns: 1fr; }
}

.stat{
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}
.stat .k{
  font-size: 12px;
  color: rgba(255,255,255,.60);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
}
.stat .v{
  margin-top: 6px;
  font-size: 18px;
  font-weight: 900;
  color: rgba(255,255,255,.92);
}

/* Settings */
.settings-grid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.setting{
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}
.setting .k{
  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255,255,255,.60);
}
.setting .v{
  margin-top: 6px;
  font-weight: 950;
  font-size: 16px;
  color: rgba(255,255,255,.92);
}
.setting .v.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
}

/* League metrics */
.metrics-3{ margin-top: 12px; display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.metrics-4{ margin-top: 10px; display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.metric{
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
}
.metric .k{
  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255,255,255,.60);
  display:flex; gap:8px; align-items:center;
}
.metric .v{
  margin-top: 6px;
  font-weight: 950;
  font-size: 18px;
  color: rgba(255,255,255,.93);
}
@media (max-width: 820px){
  .metrics-4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metrics-3{ grid-template-columns: 1fr; }
  .settings-grid{ grid-template-columns: 1fr; }
}


/* Column sizing for fixed-layout tables */
.table{ table-layout: fixed; width:100%; }
.table th,.table td{ overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
.table .col-rank{ width:52px; }
.table .col-time{ width:110px; }
.table .col-gap{ width:90px; }
.table .col-ratio{ width:86px; }
.table .col-date{ width:112px; }
.table .col-cpgc{ width:86px; }
.table .col-place{ width:96px; }
.table .col-avgpro{ width:86px; }
.table .col-year{ width:86px; }
.table .col-rating{ width: 120px; }
.table .col-len{ width:86px; }
.table .col-type{ width:110px; }
.meta-list{ display:flex; flex-direction:column; gap:8px; }
.player-hero .avatar-lg{ width:192px; height:192px; border-radius: 18px; }
.steam-link{ text-decoration:none; color:#8abaee; }
.muted-sm{ color: rgba(255,255,255,.55); font-size: 12px; }


/* Player hero grid (avatar + meta + rank/league) */
.player-hero-grid{
  display:grid;
  grid-template-columns: 192px 1fr;
  gap:14px;
  align-items:start;
}

/* Meta + League live in the same right block so the league can be wider */
.player-hero-main{
  display:grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap:12px;
  align-items:start;
  min-width:0;
}
.player-hero-main > *{ min-width:0; }

/* Player profile meta should stack (name above details) */
.hero-profile{
  display:flex;
  flex-direction:column;
  gap: 12px;
  min-width:0;
}

.player-hero-main .hero-rank{
  min-width:0;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
}

/* League coloring (best-effort; based on league_class()) */
.hero-rank.league-newcomer{ border-color: #57575799; background: linear-gradient(135deg, #35353559, #3737372b); }
.hero-rank.league-bronze{ border-color: #845b4799; background: linear-gradient(135deg, #5b473b87, #332823a8); }
.hero-rank.league-silver{ border-color: #aeaeae99; background: linear-gradient(135deg, #59595987, #393939a8); }
.hero-rank.league-gold{ border-color: #dbb56c99; background: linear-gradient(135deg, #665d3ca6, #201f1cf2); }
.hero-rank.league-sapphire{ border-color: #6c73db99; background: linear-gradient(135deg, #3c4a6687, #272b39a8); }
.hero-rank.league-emerald{ border-color: #70db6c99; background: linear-gradient(135deg, #3d663c87, #1b2b1ba8); }
.hero-rank.league-ruby{ border-color: #db816c99; background: linear-gradient(135deg, #664a3c87, #201c1ca8); }
.hero-rank.league-diamond{ border-color: #6cdbcb99; background: linear-gradient(135deg, #40757587, #2f4248a8); }
.hero-rank.league-master{ border-color: #db6cc499; background: linear-gradient(135deg, #593c6687, #1e1c20a8); }
.hero-rank.league-grandmaster{ border-color: #f4819699; background: linear-gradient(135deg, #663c3c87, #291f31a8); }
.hero-rank.league-legend{ border-color: #e8e8e899; background: linear-gradient(135deg, #6f4b8c87, #602323a8); }

.hero-rank.league-bronze .rank-v{ color: #b37b63; }
.hero-rank.league-silver .rank-v{ color: #ccc; }
.hero-rank.league-gold .rank-v{ color: #dbc46c; }
.hero-rank.league-sapphire .rank-v{ color: #6c83db; }
.hero-rank.league-emerald .rank-v{ color: #70db6c; }
.hero-rank.league-ruby .rank-v{ color: #db816c; }
.hero-rank.league-diamond .rank-v{ color: #4dd8e1; }
.hero-rank.league-master .rank-v{ color: #db6cd9; }
.hero-rank.league-grandmaster .rank-v{ color: #db6c6c; }
.hero-rank.league-legend .rank-v{ color: #d7d4ae; }

.rank-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px;}
.rank-k{font-weight:900;letter-spacing:.10em;text-transform:uppercase;font-size:11px;color:rgba(255,255,255,.65);}
.rank-v{font-weight:950;font-size:28px;line-height:1.6;}
.rank-ico{opacity:.5;font-size:20px;margin-top:2px;}
.rank-chips{display:flex;flex-wrap:wrap;gap:6px;}
.rank-chips.row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;}
.rank-completion{margin-top:6px;}
.rank-completion .chip{width:100%;}
.rank-chips.row.bottom{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:6px;}
.rank-chips .chip{flex:1 1 100px;min-width:100px;padding:6px 8px;border-radius:12px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);}
.rank-chips .chip-wide{flex:2 1 190px;}
.rank-chips .chip .k{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.60);display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rank-chips .chip .v{margin-top:2px;font-weight:900;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rank-chips .chip .sub{margin-left:6px;font-weight:800;color:rgba(255,255,255,.55);font-size:11px;}
.metrics-mini{
  margin-top: 10px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 8px;
}
.metric.mini{
  padding: 8px;
  border-radius: 12px;
}
.metric.mini .k{
  font-size: 10px;
}
.metric.mini .v{
  font-size: 15px;
}
.metric.mini .sub{
  margin-left: 6px;
  font-weight: 800;
  color: rgba(255,255,255,.55);
  font-size: 12px;
}
@media (max-width: 980px){
  .player-hero-main{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .player-hero-grid{ grid-template-columns: 1fr; }
  .rank-chips.row{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}


/* Rating bars */
.rating-big{ font-size: 26px; font-weight: 900; line-height: 1; }
.rating-outof{ font-size: 13px; opacity: .55; margin-left: 4px; font-weight: 800; }
.rating-bars{ display:flex; flex-direction:column; gap:6px; }
.rating-row{ display:grid; grid-template-columns: 18px 1fr 34px; gap:10px; align-items:center; }
.rating-label{ font-weight: 900; opacity:.65; font-size: 12px; }
.rating-count{ text-align:right; opacity:.65; font-size: 12px; font-weight: 800; }
.rating-bar{ height: 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); overflow:hidden; }
.rating-fill{ height: 100%; background: rgba(255, 211, 90, .70); }

/* =========================
   Leaderboard
   ========================= */

.lb-hero{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.lb-controls{
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:wrap;
}
.lb-country{ min-width: 180px; }
.lb-label{
  display:block;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255,255,255,.60);
  margin: 0 0 6px 0;
}
.lb-country-row{
  display:flex;
  align-items:center;
  gap:10px;
}
.lb-country select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
  color: rgba(255,255,255,.90);
  font-weight: 800;
  min-width: 120px;
}
.lb-country select:focus{
  outline:none;
  border-color: rgba(87,242,135,.25);
}
.flag-md{ width:22px; height:16px; border-radius:4px; object-fit:cover; }

.table .col-medal{ width:72px; text-align:right; }
.table .col-tier{ width:140px; }
.table .col-proruns{ width:92px; }
.table .col-league{ width:160px; }

.lb-league{
  padding: 4px 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.lb-trophy{ font-size: 14px; }
.lb-trophy.t1{ color: #ee9d00; }
.lb-trophy.t2{ color: rgba(220,220,220,.90); }
.lb-trophy.t3{ color: #b37b63; }
.lb-league.league-newcomer{ border-color:#57575799; color: rgba(255,255,255,.78); background: rgba(87,87,87,.10); }
.lb-league.league-bronze{ border-color:#845b4799; color:#b37b63; background: rgba(132,91,71,.08); }
.lb-league.league-silver{ border-color:#aeaeae99; color:#ccc; background: rgba(174,174,174,.08); }
.lb-league.league-gold{ border-color:#dbb56c99; color:#dbc46c; background: rgba(219,181,108,.08); }
.lb-league.league-sapphire{ border-color:#6c73db99; color:#6c83db; background: rgba(108,115,219,.08); }
.lb-league.league-emerald{ border-color:#70db6c99; color:#70db6c; background: rgba(112,219,108,.08); }
.lb-league.league-ruby{ border-color:#db816c99; color:#db816c; background: rgba(219,129,108,.08); }
.lb-league.league-diamond{ border-color:#6cdbcb99; color:#4dd8e1; background: rgba(108,219,203,.08); }
.lb-league.league-master{ border-color:#db6cc499; color:#db6cd9; background: rgba(219,108,196,.08); }
.lb-league.league-grandmaster{ border-color:#f4819699; color:#db6c6c; background: rgba(244,129,150,.08); }
.lb-league.league-legend{ border-color:#e8e8e899; color:#d7d4ae; background: rgba(232,232,232,.08); }
.lb-league.league-unk{ border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.72); }

.table tr.lb-top1 td{ background: rgba(219, 196, 108, .10); }
.table tr.lb-top2 td{ background: rgba(255,255,255,.06); }
.table tr.lb-top3 td{ background: rgba(255,255,255,.04); }

@media (max-width: 980px){
  .lb-controls{ justify-content:flex-start; }
}

/* =========================
   Team page
   ========================= */
.team-hero .team-cta{ margin-top: 12px; }

/* Section accents */
.team-section{ position: relative; overflow: hidden; }
.team-section::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(900px 240px at 15% 0%, var(--team-accent-bg, rgba(255,255,255,.03)) 0%, rgba(0,0,0,0) 60%);
}

.team-section-management{ --team-accent:#ffd35a; --team-accent-bg: rgba(255, 211, 90, .10); }
.team-section-administration{ --team-accent:#72b7ff; --team-accent-bg: rgba(114, 183, 255, .10); }
.team-section-contributors{ --team-accent:#a78bfa; --team-accent-bg: rgba(167, 139, 250, .10); }

.team-section .section-head{
  border-left: 3px solid var(--team-accent, rgba(255,255,255,.12));
  padding-left: 12px;
}
.team-section .section-title{
  color: rgba(255,255,255,.90);
}
.team-section .section-title::after{
  content:"";
  display:block;
  width: 56px;
  height: 2px;
  border-radius: 999px;
  background: var(--team-accent, rgba(255,255,255,.18));
  margin-top: 8px;
  opacity: .65;
}

.pill-missing{
  border-color: rgba(255, 120, 120, .25);
  background: rgba(255, 120, 120, .08);
  color: rgba(255, 220, 220, .95);
  margin-left: 10px;
}

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

.team-role{
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  padding: 14px;
}

.team-role-head{
  display:flex;
  gap: 12px;
  align-items:flex-start;
}

.team-role-ico{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: var(--team-ico, rgba(255,255,255,.90));
  flex: 0 0 auto;
}
.team-role-ico i{ font-size: 20px; opacity: .92; }

.team-role-title{
  font-weight: 900;
  letter-spacing: .02em;
  display:flex;
  align-items:center;
  flex-wrap: wrap;
}

.team-role-desc{
  margin-top: 4px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.33);
  line-height: 1.35;
}

.team-members{
  margin-top: 12px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

.team-member-card{
  width: 124px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.12);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 8px;
}

.team-avatar{
  width: 60px;
  height: 60px;
  border-radius: 18px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.team-avatar.placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 20px;
}

.team-member-link{ line-height: 1.15; text-align:center; }
.team-member-card .player-link{ border-bottom-color: rgba(255,255,255,.10); }
.team-member-card .player-link:hover{ border-bottom-color: rgba(255,255,255,.22); }

.member-static{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-weight: 800;
  color: rgba(255,255,255,.86);
}

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

/* -----------------------------
   Maplist
------------------------------ */

.maplist-hero{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.maplist-title{
  margin: 0 0 6px 0;
  font-size: 26px;
  letter-spacing: .02em;
}
.maplist-sub{
  color: rgba(255,255,255,.62);
  font-size: 13px;
  line-height: 1.5;
}

.maplist-actions{
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.maplist-search{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
}
.maplist-search i{ opacity: .65; }
.maplist-search input{
  width: 240px;
  max-width: 60vw;
  border: 0;
  outline: 0;
  background: transparent;
  color: rgba(255,255,255,.92);
  font-weight: 700;
}
.maplist-search input::placeholder{ color: rgba(255,255,255,.45); }

.maplist-right{
  display:flex;
  align-items:flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.maplist-sort{
  display:flex;
  gap: 10px;
  align-items:flex-end;
}
.maplist-sort .ml-dd{
  min-width: 170px;
}

.ml-label{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .10em;
  font-weight: 900;
  color: rgba(255,255,255,.55);
  margin-bottom: 6px;
  display:block;
}

.maplist-sort select,
.maplist-filters select{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  color: rgba(255,255,255,.88);
  border-radius: 12px;
  padding: 8px 10px;
  font-weight: 800;
}

.view-toggle{
  display:flex;
  gap: 8px;
}
.view-btn{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  color: rgba(255,255,255,.84);
  font-weight: 900;
  cursor: pointer;
}
.view-btn:hover{ background: rgba(255,255,255,.03); }
.view-btn.active{
  border-color: rgba(122,190,255,.35);
  background: rgba(122,190,255,.10);
}

.maplist-filters{
  margin-top: 14px;
  display:flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items:flex-end;
}

.ml-group{
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.ml-group.ml-compact{ min-width: 160px; }

.pill-row{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  color: rgba(255,255,255,.78);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  user-select: none;
}
.pill:hover{ background: rgba(255,255,255,.03); }
.pill.active{
  border-color: rgba(122,190,255,.35);
  background: rgba(122,190,255,.10);
  color: rgba(255,255,255,.92);
}

/* Difficulty-colored pills */
.pill-diff.diff-1{ border-color: #75d47b55; color: #75d47b; }
.pill-diff.diff-2{ border-color: #bcd75b55; color: #bcd75b; }
.pill-diff.diff-3{ border-color: #e1cd6055; color: #e1cd60; }
.pill-diff.diff-4{ border-color: #dd8e6055; color: #dd8e60; }
.pill-diff.diff-5{ border-color: #c6614a55; color: #c6614a; }
.pill-diff.diff-6{ border-color: #d7596055; color: #d75960; }
.pill-diff.diff-7{ border-color: #cc6fb955; color: #cc6fb9; }
.pill-diff.diff-8{ border-color: #9e61d255; color: #9e61d2; }
.pill-diff.diff-9{ border-color: #b29acc55; color: #b29acc; }
.pill-diff.diff-10{ border-color: #c6c6c655; color: #c6c6c6; }

.pill-diff.active{ color: rgba(255,255,255,.92); }
.pill-diff.diff-1.active{ border-color: #75d47b; background: #75d47b24; }
.pill-diff.diff-2.active{ border-color: #bcd75b; background: #bcd75b24; }
.pill-diff.diff-3.active{ border-color: #e1cd60; background: #e1cd6024; }
.pill-diff.diff-4.active{ border-color: #dd8e60; background: #dd8e6024; }
.pill-diff.diff-5.active{ border-color: #c6614a; background: #c6614a24; }
.pill-diff.diff-6.active{ border-color: #d75960; background: #d7596024; }
.pill-diff.diff-7.active{ border-color: #cc6fb9; background: #cc6fb924; }
.pill-diff.diff-8.active{ border-color: #9e61d2; background: #9e61d224; }
.pill-diff.diff-9.active{ border-color: #b29acc; background: #b29acc24; }
.pill-diff.diff-10.active{ border-color: #c6c6c6; background: #c6c6c624; }

.btn-ghost{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  color: rgba(255,255,255,.80);
  font-weight: 900;
  cursor: pointer;
}
.btn-ghost:hover{ background: rgba(255,255,255,.03); }

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

/* Compact dropdown-style filters */
.maplist-filters.compact{ gap: 10px 12px; }
.ml-dd{
  display:flex;
  flex-direction: column;
  gap: 6px;
  /*! min-width: 120px; */
}
.ml-dd .ml-label{ font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); font-weight: 900; }

.ml-dd-btn{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.90);
  font-weight: 900;
  cursor: pointer;
  user-select: none;
}
.ml-dd-btn:hover{ background: rgba(255,255,255,.07); }
.ml-dd-btn .lbl{ letter-spacing: .02em; }
.ml-dd-btn .meta{ color: rgba(255,255,255,.60); font-weight: 900; }
.ml-dd-btn .chev{ color: rgba(255,255,255,.55); font-weight: 900; }
.ml-sort-row{ display:flex; gap: 8px; }
.ml-sort-row select{ width:auto; min-width: 170px; }
#ml-sort-dir{ min-width: 140px; }


.dd-actions{
  display:flex;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.dd-act{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.80);
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  cursor:pointer;
}
.dd-act:hover{ background: rgba(255,255,255,.08); }

.dd-list{
  max-height: 280px;
  overflow:auto;
  padding: 10px 12px;
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.dd-opt{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 800;
  color: rgba(255,255,255,.90);
  cursor: pointer;
}
.dd-opt input{ transform: translateY(1px); }

.pill-dot{ width: 10px; height: 10px; border-radius: 999px; background: rgba(255,255,255,.35); flex: 0 0 10px; }
.pill-dot.diff-1{ background: rgba(117,212,123,.95); }
.pill-dot.diff-2{ background: rgba(188,215,91,.95); }
.pill-dot.diff-3{ background: rgba(225,205,96,.95); }
.pill-dot.diff-4{ background: rgba(221,142,96,.95); }
.pill-dot.diff-5{ background: rgba(198,97,74,.95); }
.pill-dot.diff-6{ background: rgba(215,89,96,.95); }
.pill-dot.diff-7{ background: rgba(204,111,185,.95); }
.pill-dot.diff-8{ background: rgba(158,97,210,.95); }
.pill-dot.diff-9{ background: rgba(178,154,204,.95); }
.pill-dot.diff-10{ background: rgba(198,198,198,.95); }

/* Map card */
.map-card{
  /*! border: 1px solid rgba(255,255,255,.10); */
  border-radius: 16px;
  overflow:hidden;
  background: rgba(255,255,255,.035);
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
}

.map-card.diff-1{ background: rgba(117,212,123,.08); border-color: rgba(117,212,123,.20); }
.map-card.diff-2{ background: rgba(188,215,91,.08); border-color: rgba(188,215,91,.20); }
.map-card.diff-3{ background: rgba(225,205,96,.08); border-color: rgba(225,205,96,.20); }
.map-card.diff-4{ background: rgba(221,142,96,.08); border-color: rgba(221,142,96,.20); }
.map-card.diff-5{ background: rgba(198,97,74,.08); border-color: rgba(198,97,74,.22); }
.map-card.diff-6{ background: rgba(215,89,96,.08); border-color: rgba(215,89,96,.22); }
.map-card.diff-7{ background: rgba(204,111,185,.08); border-color: rgba(204,111,185,.22); }
.map-card.diff-8{ background: rgba(158,97,210,.08); border-color: rgba(158,97,210,.22); }
.map-card.diff-9{ background: rgba(178,154,204,.08); border-color: rgba(178,154,204,.22); }
.map-card.diff-10{ background: rgba(198,198,198,.06); border-color: rgba(198,198,198,.18); }

.map-thumb{
  display:block;
  aspect-ratio: 3/2;
  background: rgba(0,0,0,.25);
}
.map-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

.map-card-body{ padding: 12px; }

.map-title{
  display:inline-block;
  font-weight: 950;
  font-size: 18px;
  line-height: 1.15;
  margin-bottom: 8px;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  word-break: break-word;
}

.map-rating-row{
  display:flex;
  align-items:center;
  gap: 8px;
  margin: -2px 0 10px;
  color: rgba(255,255,255,.85);
}
.map-rating-row .cnt{ color: rgba(255,255,255,.55); font-weight: 900; }

.badges.compact{ display:flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

.map-meta{
  display:flex;
  align-items:center;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.map-meta .k{
  font-weight: 950;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 11px;
  color: rgba(255,255,255,.55);
  flex: 0 0 auto;
}
.map-meta .v{ flex: 1 1 auto; text-align: left; display:flex; align-items:center; gap:8px; justify-content:flex-start; flex-wrap: wrap; font-size: 11px; }

.map-wrs{ display:flex; flex-direction: column; gap: 8px; }
.wr-row{ display:flex; align-items:center; justify-content: flex-start; gap: 10px; }
.wr-row .k{ font-weight: 950; letter-spacing: .10em; text-transform: uppercase; font-size: 11px; color: rgba(255,255,255,.55); flex: 0 0 auto; }
.wr-row .v{ text-align: left; flex: 1 1 auto; display:flex; align-items:center; gap:8px; justify-content:flex-start; flex-wrap: wrap; font-size: 11px; }
.wr-row .v .time{ /*! margin-left: auto; */ }
.wr-row .sep{ color: rgba(255,255,255,.35); margin: 0 6px; }
.wr-row .time{ color: rgba(255,255,255,.88); font-weight: 950; }

/* Pager */
.ml-pager{
  margin-top: 30px;
  display:flex;
  align-items:center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ml-page{ color: rgba(255,255,255,.65); font-weight: 800; }


@media (max-width: 980px){
  .maplist-search input{ width: 200px; }
}

@media (max-width: 640px){
  .maplist-actions{ justify-content: flex-start; }
  .maplist-search input{ width: 56vw; }
  .ml-dd{ min-width: 140px; }
}

.map-card .player-link{ font-size: 11px; font-weight: 800; }
.map-card .player-vip{ font-size:.9em; }


.map-rating-row .stars i{ color: rgba(255,211,90,.95); }
.map-rating-row .stars .bi-star{ color: rgba(255,255,255,.22); }
.map-rating-row .stars .bi-star-half{ color: rgba(255,211,90,.82); }


/* ===========================
   Home page
   =========================== */
.ratio-3-2{ aspect-ratio: 3 / 2; }

.home-gallery-panel,
.home-intro-panel,
.home-servers-panel,
.home-runs-panel,
.home-top-panel,
.home-weekly-panel,
.home-socials-panel,
.home-partners-panel{
  padding:16px;
  border-radius: var(--radius2);
}

/* Hero */
.home-hero-row{
  display:grid;
  grid-template-columns: 1.45fr .95fr;
  gap:14px;
  align-items:stretch;
  margin:14px 0;
}

.home-gallery-panel,
.home-intro-panel{
  overflow:hidden;
}

.home-gallery{
  position:relative;
  min-height:380px;
  border-radius:16px;
  overflow:hidden;
  background: rgba(255,255,255,.02);
}

.home-slide{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  transition:opacity .55s ease;
}

.home-slide.active{
  opacity:1;
  pointer-events:auto;
}

.home-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:none !important;
}

.home-slide-overlay{
  position:absolute;
  inset:0;
  /*! background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.22)); */
}

.home-slide-label{
  position:absolute;
  left:18px;
  bottom:18px;
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(13,18,26,.60);
  backdrop-filter: blur(6px);
  color: rgba(255,255,255,.92);
  font-size:13px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:none;
}

.home-gallery-dots{
  margin-top:12px;
  display:flex;
  justify-content:center;
  gap:8px;
}

.home-dot{
  width:9px;
  height:9px;
  border:0;
  border-radius:999px;
  padding:0;
  cursor:pointer;
  background: rgba(255,255,255,.22);
}

.home-dot.is-active{
  background: rgba(87,191,242,.95);
}

.home-intro-panel{
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:
    radial-gradient(500px 260px at 15% -10%, rgba(87,191,242,.12), transparent 58%),
    rgba(18,20,26,.83);
}

.home-kicker{
  color: rgba(87,191,242,.95);
  font-size:12px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:10px;
}

.home-title{
  font-size: clamp(28px, 3vw, 40px);
  line-height:1.02;
  margin-bottom:12px;
}

.home-copy{
  margin:0 0 10px 0;
  font-size:15px;
}

.home-copy.muted{
  color: rgba(255,255,255,.58);
}

.home-quick-stats{
  margin-top:8px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}

.home-stat{
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}

.home-stat-v{
  font-size:26px;
  font-weight:900;
  color: rgba(255,255,255,.94);
}

.home-stat-k{
  font-size:12px;
  color: rgba(255,255,255,.56);
  text-transform:uppercase;
  letter-spacing:.08em;
}

.home-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}

/* Shared home panels */
.home-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

.home-panel-head.compact{
  align-items:flex-start;
}

.home-panel-kicker{
  font-size:12px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  color: rgba(255,255,255,.72);
}

.home-panel-sub{
  margin-top:6px;
  font-size:13px;
  color: rgba(255,255,255,.58);
}

.home-online-total-box{
  min-width:104px;
  padding:14px 12px;
  border-radius:16px;
  text-align:center;
  border:1px solid rgba(87,191,242,.24);
  background: rgba(87,191,242,.10);
}

.home-online-total-box .n{
  font-size:30px;
  font-weight:900;
  line-height:1;
  color:#8dcfff;
}

.home-online-total-box .l{
  margin-top:6px;
  font-size:11px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color: rgba(255,255,255,.68);
}

/* Servers */
.home-servers-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap:12px;
}

.home-server-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
  padding:10px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}

.home-server-title{
  text-align:center;
  font-size:12px;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  color: rgba(255,255,255,.88);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.home-server-image{
  display:block;
  overflow:hidden;
  border-radius:14px;
}

.home-server-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.home-server-map{
  min-height:20px;
}

.home-server-meta-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  color: rgba(255,255,255,.62);
}

.home-server-connect{
  color: rgba(141,207,255,.92);
  font-weight:800;
  white-space:nowrap;
}

.home-server-players-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.82);
  font:inherit;
  cursor:pointer;
}

.home-server-players{
  display:none;
  max-height:132px;
  overflow:auto;
  padding:6px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.12);
}

.home-server-card.open .home-server-players{
  display:block;
}

.home-server-player{
  padding:5px 6px;
}

.home-server-empty{
  padding:6px;
  color: rgba(255,255,255,.50);
}

/* Main split */
.home-main-grid{
  display:grid;
  grid-template-columns: minmax(0,1.55fr) minmax(320px,.95fr);
  gap:14px;
  align-items:start;
  margin:14px 0 20px;
}

.home-side-col{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
}

/* Latest runs */
.home-runs-wrap{
  max-height:980px;
  overflow:auto;
}

.home-runs-table .col-rank{ width:44px; }
.home-runs-table .col-time{ width:104px; }
.home-runs-table .col-date{ width:126px; }
.home-runs-table.home-runs-table-compact .col-run-player{ width:31%; }
.home-runs-table.home-runs-table-compact .col-run-map{ width:33%; }
.home-runs-table.home-runs-table-compact .col-run-time{ width:13%; }
.home-runs-table.home-runs-table-compact .col-run-place{ width:12%; }
.home-runs-table.home-runs-table-compact .col-run-mode{ width:10%; }
.home-runs-table.home-runs-table-compact .col-run-when{ width:13%; }

.home-mode-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:58px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
}

.home-mode-badge.pro{
  color:#7fe59d;
  background: rgba(87,242,135,.10);
  border-color: rgba(87,242,135,.18);
}

.home-mode-badge.noob{
  color:#f4c98a;
  background: rgba(244,166,90,.10);
  border-color: rgba(244,166,90,.18);
}

.home-run-podium.home-run-gold td{ background: rgba(255,211,90,.07); }
.home-run-podium.home-run-silver td{ background: rgba(200,200,200,.05); }
.home-run-podium.home-run-bronze td{ background: rgba(214,141,90,.05); }
.home-run-trophy{ margin-right:6px; }
.home-run-trophy.gold{ color:#ffd35a; }
.home-run-trophy.silver{ color:#d7d7d7; }
.home-run-trophy.bronze{ color:#c98752; }

/* Top players / weekly list */
.home-top-panel .tabs.small .tab{
  padding:6px 10px;
  min-height:auto;
}

.home-top-list{ display:none; }
.home-top-list.active{ display:block; }

.home-top-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:0;
  padding:9px 2px;
  border-bottom:1px solid rgba(255,255,255,.07);
}

.home-top-row:last-child{
  border-bottom:none;
}

.home-top-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.home-top-rank{
  width:22px;
  flex:0 0 22px;
  text-align:center;
  color: rgba(255,255,255,.58);
  font-size:12px;
  font-weight:900;
}

.home-top-row .player-link{
  min-width:0;
  border-bottom:none;
}

.home-top-row .player-name{
  max-width:180px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.home-top-row .lb-league{
  padding:4px 6px;
  font-size:11px;
  white-space:nowrap;
}

/* Weekly */
.home-weekly-prize{
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  font-size:12px;
  font-weight:900;
}

.home-weekly-maps{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
  margin-bottom:12px;
}

.home-weekly-map{
  display:block;
  padding:8px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}

.home-weekly-map .media{
  border-radius:12px;
  overflow:hidden;
}

.home-weekly-map-name{
  margin-top:8px;
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.home-weekly-map .badge.small{
  width:max-content;
  margin-top:6px;
  padding:4px 8px;
  font-size:11px;
}

.weekly-row{
  align-items:center;
}

.home-weekly-right{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}

.home-weekly-total{
  font-size:12px;
  color: rgba(255,255,255,.82);
}

.home-weekly-tag{
  padding:4px 7px;
  border-radius:999px;
  border:1px solid rgba(255,211,90,.22);
  background: rgba(255,211,90,.08);
  color:#f0d788;
  font-size:11px;
  font-weight:900;
}

.home-weekly-cta{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.07);
}

.home-missing{
  color: rgba(255,255,255,.50);
}

/* Socials / partners */
.home-socials-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
  margin-top:12px;
}

.home-social{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:74px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}

.home-social i{
  font-size:22px;
}

.home-social span{
  font-size:12px;
  font-weight:700;
}

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

.home-partner{
  min-height:94px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
  overflow:hidden;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}

.home-partner img{
  display:block;
  max-width:100%;
  max-height:72px;
  object-fit:contain;
}

.home-partner span{
  display:none;
  text-align:center;
  font-weight:800;
  color: rgba(255,255,255,.80);
}

.home-partner.text-only span{
  display:block;
}

.home-partner.text-only img{
  display:none;
}

/* Home responsive */
@media (max-width: 1200px){
  .home-servers-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 980px){
  .home-hero-row,
  .home-main-grid{
    grid-template-columns: 1fr;
  }

  .home-gallery,
  .home-intro-panel{
    min-height:320px;
  }

  .home-servers-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-weekly-maps{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-main-grid,
  .home-main-grid > section,
  .home-side-col,
  .home-side-col > section{
    min-width:0;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }

  .home-runs-panel,
  .home-top-panel,
  .home-weekly-panel,
  .home-socials-panel,
  .home-partners-panel{
    overflow:hidden;
  }

  .home-runs-wrap,
  .home-top-list,
  .home-weekly-maps,
  .home-socials-grid,
  .home-partners-grid{
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }

  .home-runs-wrap{
    overflow-y:auto;
    max-height:min(70vh, 980px);
    touch-action: pan-x pan-y;
  }

  .home-runs-wrap .table{
    min-width:720px;
  }

  .weekly-row,
  .home-top-row{
    min-width:0;
  }
}

@media (max-width: 640px){
  .home-gallery{
    min-height:260px;
  }

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

  .home-servers-grid,
  .home-weekly-maps,
  .home-socials-grid,
  .home-partners-grid{
    grid-template-columns:1fr;
  }

  .home-panel-head{
    flex-direction:column;
    align-items:flex-start;
  }

  .home-runs-wrap .table{
    min-width:680px;
  }

  .home-top-row .player-name,
  .weekly-row .player-name{
    max-width: calc(100vw - 220px);
  }

  .home-weekly-right{
    flex-shrink:0;
  }
}

.home-main-grid > section,
.home-side-col > .panel{
  min-width:0;
}