* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 75% 35%, rgba(0, 119, 255, 0.18), transparent 30%),
    #05070d;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}

.navbar {
  position: relative;
  z-index: 10;

  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  padding: 24px 7%;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.logo {
  color: #3da5ff;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 4px;
}
.logo:hover {
  color: white;
  text-shadow: 0 0 20px #3da5ff;
  transition: 0.3s;
  cursor: pointer;
}

nav {
  display: flex;
  gap: 34px;
}

nav a {
  color: #aeb8c7;
  font-size: 14px;
  text-decoration: none;
  transition: 0.2s;
}

nav a:hover {
  color: white;
}

.login-button,
.primary-button,
.secondary-button {
  cursor: pointer;
  border: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.login-button {
  padding: 11px 22px;
  border: 1px solid rgba(61, 165, 255, 0.6);
  background: transparent;
  color: white;
}

.hero {
  position: relative;

  display: flex;
  align-items: center;

  min-height: 650px;
  padding: 80px 7%;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
}

.eyebrow {
  margin-bottom: 22px;
  color: #3da5ff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 5px;
}

h1 {
  margin-bottom: 26px;
  font-size: clamp(54px, 8vw, 105px);
  line-height: 0.95;
  letter-spacing: -5px;
  text-transform: uppercase;
}

.hero-text {
  max-width: 600px;
  color: #aeb8c7;
  font-size: 18px;
  line-height: 1.7;
}

.hero-buttons {
  display: flex;
  gap: 16px;
  margin-top: 38px;
}

.primary-button,
.secondary-button {
  padding: 16px 28px;
}

.primary-button {
  background: #168bff;
  color: white;
  box-shadow: 0 0 30px rgba(22, 139, 255, 0.35);
}

.primary-button:hover {
  background: #41a2ff;
}

.secondary-button {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.04);
  color: white;
}

.secondary-button:hover {
  background: rgba(255, 255, 255, 0.09);
}

.wind-glow {
  position: absolute;
  top: 90px;
  right: -100px;

  width: 650px;
  height: 650px;

  border: 3px solid rgba(61, 165, 255, 0.16);
  border-radius: 50%;

  box-shadow:
    0 0 80px rgba(0, 110, 255, 0.22),
    inset 0 0 80px rgba(0, 110, 255, 0.12);

  transform: rotate(-20deg);
}

.wind-glow::before,
.wind-glow::after {
  position: absolute;
  content: "";
  border-radius: 50%;
}

.wind-glow::before {
  inset: 80px;
  border: 2px solid rgba(61, 165, 255, 0.18);
}

.wind-glow::after {
  inset: 170px;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.features {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;

  padding: 0 7% 80px;
}

.feature-card {
  min-height: 210px;
  padding: 30px;

  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
}

.feature-card span {
  color: #3da5ff;
  font-size: 13px;
  font-weight: 800;
}

.feature-card h2 {
  margin: 24px 0 14px;
  font-size: 22px;
}

.feature-card p {
  color: #98a4b5;
  line-height: 1.6;
}

@media (max-width: 850px) {
  nav {
    display: none;
  }

  h1 {
    letter-spacing: -3px;
  }

  .wind-glow {
    opacity: 0.45;
  }

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

@media (max-width: 550px) {
  .navbar {
    padding: 20px;
  }

  .hero {
    min-height: 600px;
    padding: 70px 20px;
  }

  .login-button {
    display: none;
  }

  .hero-buttons {
    flex-direction: column;
  }

  .features {
    padding: 0 20px 50px;
  }
}
.stats {
  position: absolute;
  z-index: 3;
  right: 7%;
  bottom: 55px;

  display: flex;
  gap: 45px;

  padding: 22px 28px;

  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(5, 7, 13, 0.65);
  backdrop-filter: blur(12px);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.stat strong {
  color: white;
  font-size: 24px;
}

.stat span {
  color: #8d99aa;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

@media (max-width: 1000px) {
  .stats {
    position: relative;
    right: auto;
    bottom: auto;

    flex-wrap: wrap;
    margin-top: 55px;
  }
}

@media (max-width: 550px) {
  .stats {
    gap: 25px;
    padding: 18px;
  }

  .stat {
    width: 100%;
  }
}
/* ========================= */
/* VENTUS WIND ANIMATION */
/* ========================= */

.wind-effect {
    position: absolute;
    top: 50%;
    right: 5%;
    width: 600px;
    height: 600px;
    transform: translateY(-50%);
    pointer-events: none;
}

.wind-line {
    position: absolute;
    left: 0;

    width: 350px;
    height: 3px;

    background: linear-gradient(
        90deg,
        transparent,
        #4eb7ff,
        white,
        transparent
    );

    border-radius: 999px;

    opacity: 0.7;

    animation: windMove 5s linear infinite;
}

.line-1 {
    top: 120px;
    animation-delay: 0s;
}

.line-2 {
    top: 220px;
    width: 420px;
    animation-delay: 1.2s;
}

.line-3 {
    top: 330px;
    width: 300px;
    animation-delay: 2.3s;
}

.line-4 {
    top: 450px;
    width: 390px;
    animation-delay: 3.1s;
}

@keyframes windMove {

    0% {
        transform: translateX(-120px);
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    85% {
        opacity: 1;
    }

    100% {
        transform: translateX(170px);
        opacity: 0;
    }

}
.navbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:28px 70px;
}

.logo{
    display:flex;
    align-items:center;
    gap:12px;

    font-size:28px;
    font-weight:700;
    color:white;
}

.logo-icon{
    font-size:30px;
}

.nav-links{
    display:flex;
    gap:40px;
}

.nav-links a{
    color:#a7b2c5;
    text-decoration:none;
    transition:.3s;
}

.nav-links a:hover{
    color:white;
}

.nav-buttons{
    display:flex;
    gap:15px;
}

.login-button{
    background:transparent;
    border:1px solid rgba(255,255,255,.15);
    color:white;
    padding:12px 24px;
    border-radius:12px;
    cursor:pointer;
    transition:.3s;
}

.login-button:hover{
    background:rgba(255,255,255,.08);
}
/* ========================= */
/* VENTUS BACKGROUND */
/* ========================= */

body {
    background: #030506;
}

body::after{
    content:"";

    position:fixed;
    inset:0;

    background:
        radial-gradient(circle at center,
        transparent 0%,
        transparent 45%,
        rgba(0,0,0,.45) 100%);

    pointer-events:none;

    z-index:-1;
}
/* ========================= */
/* VENTUS LOGIN PAGE */
/* ========================= */

.login-page {
    min-height: 100vh;
    overflow-x: hidden;
}

.logo {
    text-decoration: none;
}

.back-home {
    color: #9aa7ba;
    text-decoration: none;
    font-size: 14px;
    transition: 0.25s;
}

.back-home:hover {
    color: white;
}

.login-main {
    min-height: calc(100vh - 100px);
    display: grid;
    grid-template-columns: minmax(360px, 500px) minmax(420px, 1fr);
    align-items: center;
    gap: 70px;

    max-width: 1250px;
    margin: 0 auto;
    padding: 45px 60px 80px;
}

.login-card {
    position: relative;
    z-index: 2;

    padding: 42px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 22px;

    background: rgba(8, 12, 21, 0.78);
    backdrop-filter: blur(18px);

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.login-heading {
    margin-bottom: 32px;
}

.login-label,
.showcase-label {
    color: #4eb7ff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}

.login-heading h1 {
    margin: 12px 0 10px;
    color: white;
    font-size: 38px;
}

.login-heading p {
    color: #8d99aa;
    line-height: 1.7;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.input-group label {
    color: #cbd4e1;
    font-size: 14px;
    font-weight: 600;
}

.input-group input {
    width: 100%;
    padding: 15px 16px;

    color: white;
    font-size: 15px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 11px;
    outline: none;

    background: rgba(255, 255, 255, 0.045);

    transition: 0.25s;
}

.input-group input::placeholder {
    color: #667185;
}

.input-group input:focus {
    border-color: #4eb7ff;
    background: rgba(78, 183, 255, 0.06);

    box-shadow: 0 0 0 4px rgba(78, 183, 255, 0.1);
}

.login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;

    color: #8d99aa;
    font-size: 13px;
}

.remember-me {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.login-options a,
.register-text a {
    color: #4eb7ff;
    text-decoration: none;
}

.login-options a:hover,
.register-text a:hover {
    text-decoration: underline;
}

.login-submit,
.steam-login {
    width: 100%;
    padding: 15px;

    border-radius: 11px;
    cursor: pointer;

    color: white;
    font-size: 15px;
    font-weight: 700;

    transition: 0.25s;
}

.login-submit {
    border: none;
    background: linear-gradient(135deg, #2c9df0, #66c5ff);

    box-shadow: 0 12px 35px rgba(78, 183, 255, 0.22);
}

.login-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 42px rgba(78, 183, 255, 0.34);
}

.login-divider {
    display: flex;
    align-items: center;
    gap: 14px;

    margin: 27px 0;
}

.login-divider span {
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.login-divider p {
    color: #68758a;
    font-size: 11px;
    letter-spacing: 1px;
}

.steam-login {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.045);
}

.steam-login:hover {
    border-color: rgba(78, 183, 255, 0.55);
    background: rgba(78, 183, 255, 0.08);
}

.register-text {
    margin-top: 25px;

    color: #8d99aa;
    font-size: 14px;
    text-align: center;
}

.login-showcase {
    position: relative;
    z-index: 1;

    max-width: 600px;
    padding: 40px;
}

.login-showcase h2 {
    max-width: 600px;
    margin: 18px 0;

    color: white;
    font-size: clamp(42px, 6vw, 72px);
    line-height: 1.02;
}

.login-showcase > p {
    max-width: 540px;

    color: #98a5b8;
    font-size: 17px;
    line-height: 1.8;
}

.showcase-glow {
    position: absolute;
    z-index: -1;

    top: 50%;
    left: 45%;

    width: 520px;
    height: 520px;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: rgba(78, 183, 255, 0.13);
    filter: blur(100px);
}

.showcase-stats {
    display: flex;
    gap: 45px;

    margin-top: 45px;
}

.showcase-stats div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.showcase-stats strong {
    color: white;
    font-size: 26px;
}

.showcase-stats span {
    color: #6f7c90;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

@media (max-width: 950px) {
    .login-main {
        grid-template-columns: 1fr;
        max-width: 620px;
    }

    .login-showcase {
        display: none;
    }
}

@media (max-width: 600px) {
    .navbar {
        padding: 22px;
    }

    .back-home {
        display: none;
    }

    .login-main {
        padding: 25px 18px 60px;
    }

    .login-card {
        padding: 28px 22px;
    }

    .login-heading h1 {
        font-size: 31px;
    }

    .login-options {
        align-items: flex-start;
        gap: 14px;
        flex-direction: column;
    }
}
.login-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
/* ========================= */
/* VENTUS DASHBOARD */
/* ========================= */

.dashboard-page {
    min-height: 100vh;
}

.dashboard {
    max-width: 1250px;
    margin: 0 auto;
    padding: 70px;
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 35px;
}

.profile-card,
.stat-box {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(8, 12, 21, 0.75);
    backdrop-filter: blur(16px);

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.profile-card {
    padding: 35px;
    border-radius: 22px;
    text-align: center;
}

.avatar {
    width: 110px;
    height: 110px;
    margin: 0 auto 22px;

    border-radius: 50%;
    border: 3px solid #4eb7ff;

    background-color: #09111f;
    background-image:
        radial-gradient(circle at 35% 30%, #9edbff, transparent 20%),
        linear-gradient(135deg, #18324f, #09111f);

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    box-shadow:
        0 0 0 8px rgba(78, 183, 255, 0.08),
        0 0 35px rgba(78, 183, 255, 0.3);
}

.profile-card h2 {
    color: white;
    font-size: 30px;
    margin-bottom: 7px;
}

.profile-card > p {
    color: #8290a4;
    font-size: 14px;
}

.elo {
    margin-top: 30px;
    padding: 20px;

    display: flex;
    flex-direction: column;
    gap: 5px;

    border-radius: 15px;
    border: 1px solid rgba(78, 183, 255, 0.18);

    background: rgba(78, 183, 255, 0.07);
}

.elo span {
    color: #7e8a9d;
    font-size: 12px;
    letter-spacing: 2px;
}

.elo strong {
    color: white;
    font-size: 38px;
}

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

.stat-box {
    position: relative;
    overflow: hidden;

    min-height: 190px;
    padding: 30px;

    border-radius: 20px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    transition: 0.25s;
}

.stat-box::after {
    content: "";
    position: absolute;

    right: -50px;
    bottom: -70px;

    width: 180px;
    height: 180px;

    border-radius: 50%;
    background: rgba(78, 183, 255, 0.1);
    filter: blur(25px);
}

.stat-box:hover {
    transform: translateY(-5px);
    border-color: rgba(78, 183, 255, 0.35);
}

.stat-box h3 {
    color: #8491a5;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.stat-box strong {
    position: relative;
    z-index: 1;

    color: white;
    font-size: 42px;
}

.dashboard-page .primary-button {
    min-width: 120px;
    padding: 13px 26px;
    border: none;
    border-radius: 12px;

    color: white;
    font-weight: 800;
    letter-spacing: 1px;

    background: linear-gradient(135deg, #2c9df0, #66c5ff);

    cursor: pointer;

    box-shadow: 0 12px 35px rgba(78, 183, 255, 0.25);
    transition: 0.25s;
}

.dashboard-page .primary-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(78, 183, 255, 0.38);
}

@media (max-width: 900px) {
    .dashboard {
        grid-template-columns: 1fr;
        padding: 45px 30px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .dashboard {
        padding: 30px 18px;
    }

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

    .dashboard-page .nav-links {
        display: none;
    }
}
/* ========================= */
/* DASHBOARD EXPANSION */
/* ========================= */

.dashboard-content {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.online-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 25px;
    padding: 8px 12px;

    color: #83f3ba;
    font-size: 12px;
    font-weight: 700;

    border: 1px solid rgba(85, 235, 158, 0.2);
    border-radius: 999px;

    background: rgba(85, 235, 158, 0.07);
}

.online-badge span,
.status-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;
    background: #55eb9e;

    box-shadow: 0 0 12px rgba(85, 235, 158, 0.75);
}

.elo small {
    margin-top: 6px;
    color: #55eb9e;
    font-size: 12px;
}

.matchmaking-card {
    position: relative;
    overflow: hidden;

    min-height: 260px;
    padding: 38px;

    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 30px;

    border: 1px solid rgba(78, 183, 255, 0.22);
    border-radius: 22px;

    background:
        radial-gradient(
            circle at 85% 50%,
            rgba(78, 183, 255, 0.2),
            transparent 35%
        ),
        rgba(8, 12, 21, 0.82);

    backdrop-filter: blur(18px);

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.matchmaking-card::after {
    content: "";

    position: absolute;
    right: -60px;
    top: 50%;

    width: 260px;
    height: 260px;

    transform: translateY(-50%);
    border-radius: 50%;

    border: 1px solid rgba(78, 183, 255, 0.15);

    box-shadow:
        0 0 0 35px rgba(78, 183, 255, 0.025),
        0 0 0 70px rgba(78, 183, 255, 0.015);
}

.section-label {
    color: #4eb7ff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.matchmaking-card h1 {
    margin: 12px 0 10px;

    color: white;
    font-size: clamp(30px, 4vw, 48px);
}

.matchmaking-card p {
    max-width: 520px;

    color: #8f9caf;
    line-height: 1.7;
}

.queue-button {
    position: relative;
    z-index: 2;

    min-width: 230px;
    padding: 18px 24px;

    color: white;
    font-weight: 800;
    letter-spacing: 0.8px;

    border: none;
    border-radius: 13px;

    background: linear-gradient(135deg, #2c9df0, #66c5ff);

    box-shadow:
        0 14px 40px rgba(78, 183, 255, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);

    cursor: pointer;
    transition: 0.25s;
}

.queue-button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 18px 48px rgba(78, 183, 255, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.queue-button.searching {
    background: linear-gradient(135deg, #d68a28, #f1bd52);
    box-shadow: 0 14px 40px rgba(241, 189, 82, 0.25);
}

.queue-status {
    grid-column: 1 / -1;

    display: flex;
    align-items: center;
    gap: 9px;

    color: #7f8ca0;
    font-size: 13px;
}

.stats-grid .stat-box span {
    color: #718096;
    font-size: 12px;
}

.dashboard-lower {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(270px, 0.8fr);
    gap: 25px;
}

.recent-matches,
.mini-leaderboard {
    padding: 28px;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 20px;

    background: rgba(8, 12, 21, 0.76);
    backdrop-filter: blur(16px);

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 22px;
}

.section-heading h2 {
    margin-top: 7px;
    color: white;
    font-size: 22px;
}

.section-heading a {
    color: #4eb7ff;
    font-size: 13px;
    text-decoration: none;
}

.match-row {
    display: grid;
    grid-template-columns: 44px 1fr auto auto;
    align-items: center;
    gap: 16px;

    padding: 17px 0;

    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.result-icon {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    font-weight: 900;
}

.match-row.win .result-icon {
    color: #55eb9e;
    background: rgba(85, 235, 158, 0.1);
}

.match-row.loss .result-icon {
    color: #ff6475;
    background: rgba(255, 100, 117, 0.1);
}

.match-info,
.match-stats {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.match-info strong,
.match-stats strong {
    color: white;
    font-size: 14px;
}

.match-info span,
.match-stats span {
    color: #718096;
    font-size: 11px;
}

.match-stats {
    text-align: right;
}

.elo-change {
    min-width: 70px;
    text-align: right;
    font-size: 13px;
    font-weight: 800;
}

.elo-change.positive {
    color: #55eb9e;
}

.elo-change.negative {
    color: #ff6475;
}

.leader-player {
    display: grid;
    grid-template-columns: 30px 40px 1fr auto;
    align-items: center;
    gap: 12px;

    padding: 15px 0;

    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.position {
    color: #758196;
    font-size: 14px;
    font-weight: 800;
}

.position.first {
    color: #ffd75e;
}

.small-avatar {
    width: 38px;
    height: 38px;

    border-radius: 50%;

    background:
        radial-gradient(circle at 35% 30%, #8bd5ff, transparent 22%),
        linear-gradient(135deg, #244868, #0c1726);

    border: 1px solid rgba(78, 183, 255, 0.3);
}

.player-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.player-details strong {
    color: white;
    font-size: 14px;
}

.player-details span {
    color: #718096;
    font-size: 11px;
}

.player-elo {
    color: #4eb7ff;
    font-size: 14px;
}

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

    .queue-button {
        width: 100%;
    }

    .dashboard-lower {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .matchmaking-card {
        padding: 27px 22px;
    }

    .match-row {
        grid-template-columns: 40px 1fr auto;
    }

    .match-stats {
        display: none;
    }

    .recent-matches,
    .mini-leaderboard {
        padding: 22px 18px;
    }
}
.auth-message {
    min-height: 20px;
    margin: 2px 0 4px;

    color: #a7b2c5;
    font-size: 13px;
    line-height: 1.5;
}

.auth-message.error {
    color: #ff6475;
}

.auth-message.success {
    color: #55eb9e;
}
.logout-button {
    padding: 10px 18px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;

    background: transparent;
    color: white;

    font-family: inherit;
    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
    transition: 0.2s ease;
}

.logout-button:hover {
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.07);
}

.logout-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.queue-button.in-queue {
    background: rgba(255, 80, 80, 0.12);
    border-color: rgba(255, 80, 80, 0.7);
    color: #ff7070;
}

.queue-button.in-queue:hover {
    background: rgba(255, 80, 80, 0.22);
}

.queue-players-box {
    margin-top: 24px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
}

.queue-players-box h3 {
    margin: 0 0 16px;
}

#queue-players {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.queue-player {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
}

.queue-position {
    width: 34px;
    font-weight: 700;
    opacity: 0.65;
}

.queue-player-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.queue-player-info span {
    font-size: 13px;
    opacity: 0.65;
}

.queue-empty {
    margin: 0;
    opacity: 0.6;
}
.match-page {
    width: min(1100px, calc(100% - 40px));
    margin: 0 auto;
    padding: 60px 0;
}

.match-header {
    text-align: center;
    margin-bottom: 40px;
}

.match-header p {
    margin: 0 0 8px;
    opacity: 0.6;
}

.match-header h1 {
    margin: 0 0 12px;
    font-size: clamp(36px, 6vw, 64px);
}

#match-status {
    display: block;
    margin-bottom: 10px;
}

#match-id {
    opacity: 0.5;
    word-break: break-all;
}

.match-teams {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-bottom: 30px;
}

.team-card {
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
}

.team-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.team-heading h2 {
    margin: 0;
}

.team-heading span {
    font-size: 14px;
    opacity: 0.7;
}

#team-a-players,
#team-b-players {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.match-player {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
}

.match-player-position {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    font-weight: 700;
}

.match-player-details {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.match-player-details span {
    font-size: 13px;
    opacity: 0.65;
}

@media (max-width: 750px) {
    .match-teams {
        grid-template-columns: 1fr;
    }
}
.match-player {
    display: grid;
    grid-template-columns: 34px 1fr auto;
}

.match-player.ready {
    border: 1px solid rgba(85, 235, 158, 0.35);
    background: rgba(85, 235, 158, 0.08);
}

.match-player.current-player {
    box-shadow:
        inset 3px 0 0 #4eb7ff;
}

.player-ready-state {
    color: #718096;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
}

.match-player.ready .player-ready-state {
    color: #55eb9e;
}

.ready-button.is-ready,
#ready-button.is-ready {
    color: #ff8a97;
    border-color: rgba(255, 100, 117, 0.5);
    background: rgba(255, 100, 117, 0.1);
}
/* =========================
   QUEUE INFORMATION
========================= */

.queue-information {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.queue-progress-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 10px;
}

.queue-progress-track {
    width: 100%;
    height: 12px;

    background: rgba(255,255,255,.08);

    border-radius: 999px;

    overflow: hidden;
}

.queue-progress-fill {
    width: 0%;

    height: 100%;

    background: linear-gradient(
        90deg,
        #35d6ff,
        #6c63ff
    );

    border-radius: 999px;

    transition: width .35s ease;
}

.queue-details {
    display: grid;
    grid-template-columns: repeat(3,1fr);

    gap: 18px;
}

.queue-details div {
    padding: 14px;

    border-radius: 12px;

    background: rgba(255,255,255,.04);

    border: 1px solid rgba(255,255,255,.06);
}

.queue-details span {
    display: block;

    font-size: 12px;

    opacity: .6;

    margin-bottom: 6px;
}

.queue-details strong {
    font-size: 18px;
}

#queue-status-text {
    font-weight: 600;
}

@media (max-width:800px){

.queue-details{
grid-template-columns:1fr;
}

}

/* =========================
   MATCH FOUND
========================= */

.match-found-overlay{

position:fixed;

inset:0;

background:rgba(5,8,18,.96);

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

transition:.35s;

}

.match-found-overlay.hidden{

opacity:0;

pointer-events:none;

}

.match-found-box{

text-align:center;

animation:pop .45s ease;

}

.match-found-box h1{

font-size:72px;

margin:20px 0;

color:#35d6ff;

letter-spacing:3px;

}

.match-found-box p{

font-size:22px;

opacity:.8;

margin-bottom:30px;

}

.countdown{

font-size:90px;

font-weight:900;

margin-bottom:20px;

}

@keyframes pop{

0%{

transform:scale(.8);

opacity:0;

}

100%{

transform:scale(1);

opacity:1;

}

}

/* =========================
   MATCH FOUND TEAM ANIMATION
========================= */

.team-animation {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 35px;

    width: min(700px, 90vw);
    margin: 35px auto;
}

.animation-team {
    padding: 22px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;

    background: rgba(255, 255, 255, 0.035);
}

.animation-team > span {
    display: block;
    margin-bottom: 18px;

    color: #8d99aa;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.animation-players {
    display: flex;
    justify-content: center;
    gap: 9px;
}

.animation-players i {
    width: 34px;
    height: 34px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #b9e8ff,
            transparent 22%
        ),
        linear-gradient(
            135deg,
            #27577d,
            #0b1727
        );

    border: 1px solid rgba(78, 183, 255, 0.45);

    opacity: 0;
    transform: translateY(40px) scale(0.6);

    animation:
        playerArrive 0.55s ease forwards;
}

.team-right .animation-players i {
    border-color: rgba(255, 255, 255, 0.35);

    background:
        radial-gradient(
            circle at 35% 30%,
            white,
            transparent 22%
        ),
        linear-gradient(
            135deg,
            #535e70,
            #151a23
        );
}

.animation-players i:nth-child(1) {
    animation-delay: 0.15s;
}

.animation-players i:nth-child(2) {
    animation-delay: 0.3s;
}

.animation-players i:nth-child(3) {
    animation-delay: 0.45s;
}

.animation-players i:nth-child(4) {
    animation-delay: 0.6s;
}

.animation-players i:nth-child(5) {
    animation-delay: 0.75s;
}

.animation-versus {
    color: white;
    font-size: 25px;
    font-weight: 900;

    text-shadow:
        0 0 22px rgba(78, 183, 255, 0.65);

    animation: versusPulse 1.2s ease-in-out infinite;
}

@keyframes playerArrive {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.6);
    }

    70% {
        opacity: 1;
        transform: translateY(-5px) scale(1.08);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes versusPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.65;
    }

    50% {
        transform: scale(1.15);
        opacity: 1;
    }
}

@media (max-width: 650px) {
    .match-found-box h1 {
        font-size: 45px;
    }

    .team-animation {
        gap: 12px;
    }

    .animation-team {
        padding: 15px 8px;
    }

    .animation-players {
        gap: 4px;
    }

    .animation-players i {
        width: 23px;
        height: 23px;
    }

    .animation-versus {
        font-size: 18px;
    }
}
/* =========================
   LEADERBOARD
========================= */

.leaderboard-main {
    width: min(1100px, calc(100% - 40px));
    margin: 0 auto;
    padding: 60px 0 90px;
}

.leaderboard-header {
    margin-bottom: 35px;
}

.leaderboard-header h1 {
    margin: 12px 0;
    font-size: clamp(44px, 7vw, 78px);
}

.leaderboard-header p {
    color: #8d99aa;
    font-size: 17px;
}

.leaderboard-card {
    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 20px;

    background: rgba(8, 12, 21, 0.78);
    backdrop-filter: blur(16px);
}

.leaderboard-table-heading,
.leaderboard-row {
    display: grid;
    grid-template-columns:
        80px
        minmax(220px, 1fr)
        120px
        120px
        100px;

    align-items: center;
    gap: 15px;
}

.leaderboard-table-heading {
    padding: 18px 24px;

    color: #718096;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.07);
}

.leaderboard-row {
    padding: 18px 24px;

    color: #cbd4e1;
    text-decoration: none;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.06);

    transition: 0.2s;
}

.leaderboard-row:hover {
    background: rgba(78, 183, 255, 0.07);
    transform: translateX(3px);
}

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

.leaderboard-rank {
    color: #758196;
    font-weight: 900;
}

.leaderboard-row:first-child
.leaderboard-rank {
    color: #ffd75e;
}

.leaderboard-player {
    display: flex;
    align-items: center;
    gap: 13px;
}

.leaderboard-avatar {
    width: 40px;
    height: 40px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #b9e8ff,
            transparent 22%
        ),
        linear-gradient(
            135deg,
            #27577d,
            #0b1727
        );

    border:
        1px solid rgba(78, 183, 255, 0.35);
}

.leaderboard-elo {
    color: #4eb7ff;
}

.leaderboard-loading {
    padding: 30px;
    color: #8d99aa;
}

@media (max-width: 750px) {
    .leaderboard-table-heading {
        display: none;
    }

    .leaderboard-row {
        grid-template-columns:
            45px
            minmax(150px, 1fr)
            70px;
    }

    .leaderboard-row > span:nth-child(3),
    .leaderboard-row > span:nth-child(4) {
        display: none;
    }
}
/* =========================
   PLAYER PROFILE
========================= */

.profile-main {
    width: min(1100px, calc(100% - 40px));
    margin: 0 auto;
    padding: 70px 0 100px;
}

.profile-main > .profile-card {
    max-width: none;
    margin-bottom: 30px;
}

.large-avatar {
    width: 140px;
    height: 140px;
}

.profile-main .profile-card h1 {
    margin: 22px 0 8px;
    color: white;
    font-size: clamp(38px, 6vw, 64px);
}

#profile-rank {
    color: #4eb7ff;
    font-size: 15px;
    font-weight: 700;
}

.profile-main .stats-grid {
    grid-template-columns:
        repeat(5, minmax(0, 1fr));
}

@media (max-width: 950px) {
    .profile-main .stats-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 550px) {
    .profile-main .stats-grid {
        grid-template-columns: 1fr;
    }
}
/* =========================
   PROFILE MATCH HISTORY
========================= */

.profile-history {
    margin-top: 30px;
    padding: 28px;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 20px;

    background: rgba(8, 12, 21, 0.78);
    backdrop-filter: blur(16px);
}

#profile-match-history {
    display: flex;
    flex-direction: column;
}

.profile-history-row {
    display: grid;
    grid-template-columns:
        minmax(160px, 1fr)
        minmax(150px, 1fr)
        110px;

    align-items: center;
    gap: 20px;

    padding: 18px 14px;

    color: white;
    text-decoration: none;

    border-top:
        1px solid rgba(255, 255, 255, 0.07);

    transition: 0.2s;
}

.profile-history-row:hover {
    background: rgba(255, 255, 255, 0.04);
    transform: translateX(3px);
}

.profile-history-row.history-win {
    box-shadow:
        inset 3px 0 0 rgba(85, 235, 158, 0.8);
}

.profile-history-row.history-loss {
    box-shadow:
        inset 3px 0 0 rgba(255, 100, 117, 0.8);
}

.history-result,
.history-score {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.history-result strong {
    font-size: 13px;
    letter-spacing: 1px;
}

.history-win .history-result strong {
    color: #55eb9e;
}

.history-loss .history-result strong {
    color: #ff6475;
}

.history-result span,
.history-score span {
    color: #718096;
    font-size: 12px;
}

.history-score strong {
    font-size: 22px;
}

.history-elo {
    text-align: right;
    font-weight: 800;
}

.history-elo.positive {
    color: #55eb9e;
}

.history-elo.negative {
    color: #ff6475;
}

.history-empty {
    margin: 0;
    padding: 20px 0;

    color: #718096;
}

@media (max-width: 650px) {
    .profile-history-row {
        grid-template-columns: 1fr auto;
    }

    .history-score {
        display: none;
    }
}
/* =========================
   SERVER CARD
========================= */

.server-card{

margin:30px 0;

padding:28px;

border-radius:20px;

background:rgba(10,15,25,.75);

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(16px);

}

.server-card h2{

margin:12px 0 28px;

font-size:34px;

color:#4eb7ff;

}

.server-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:18px;

}

.server-item{

padding:18px;

border-radius:14px;

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.06);

}

.server-item span{

display:block;

margin-bottom:8px;

font-size:12px;

letter-spacing:1px;

text-transform:uppercase;

color:#7d8a9c;

}

.server-item strong{

font-size:18px;

color:white;

word-break:break-word;

}

@media(max-width:900px){

.server-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:550px){

.server-grid{

grid-template-columns:1fr;

}

}
/* =========================
   MATCH ACCEPT
========================= */

.accept-overlay {

    position: fixed;

    inset: 0;

    background: rgba(5, 8, 15, .85);

    backdrop-filter: blur(12px);

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 9999;

}

.accept-overlay.hidden {

    display: none;

}

.accept-card {

    width: min(520px, calc(100% - 40px));

    padding: 40px;

    border-radius: 22px;

    background: rgba(15,20,35,.96);

    border: 1px solid rgba(255,255,255,.08);

    text-align: center;

    box-shadow: 0 0 60px rgba(0,0,0,.45);

}

.accept-card h1 {

    margin: 20px 0 10px;

    color: white;

    font-size: 42px;

}

.accept-card p {

    color: #9aa8bb;

    margin-bottom: 30px;

}

.accept-progress {

    margin: 25px 0;

}

.accept-progress strong {

    display: block;

    font-size: 42px;

    color: #4eb7ff;

}

.accept-progress span {

    color: #8d98a8;

}

.accept-timer {

    margin-bottom: 30px;

    font-size: 22px;

    color: white;

}

.accept-timer span {

    color: #55eb9e;

    font-size: 48px;

    font-weight: 700;

}
/* =========================
   MATCH READY
========================= */

.ready-wrapper{

margin-top:35px;

display:flex;

justify-content:center;

}

#ready-button{

min-width:280px;

font-size:20px;

padding:18px 40px;

transition:.25s;

}

#ready-button:hover{

transform:translateY(-3px);

}

#ready-button.is-ready{

background:#21c46b;

box-shadow:0 0 25px rgba(33,196,107,.45);

}

.match-header h2{

margin-top:12px;

font-size:30px;

font-weight:700;

color:#4eb7ff;

}

.match-player.ready{

border-left:4px solid #21c46b;

}

.player-ready-state{

font-weight:700;

}

.match-player.ready .player-ready-state{

color:#21c46b;

}

.match-player.current-player{

background:rgba(78,183,255,.08);

border:1px solid rgba(78,183,255,.25);

}
/* =========================
   RANK BADGES
========================= */

.rank-badge{

display:inline-flex;

align-items:center;

justify-content:center;

margin-top:15px;

padding:8px 18px;

border-radius:999px;

font-weight:700;

font-size:15px;

letter-spacing:.5px;

color:white;

}

.rank-badge.bronze{

background:#7b4f28;

}

.rank-badge.silver{

background:#9098a6;

}

.rank-badge.gold{

background:#cfa92a;

}

.rank-badge.platinum{

background:#21b69d;

}

.rank-badge.diamond{

background:#3b7cff;

}

.rank-badge.master{

background:#9d3cff;

}

.rank-badge.elite{

background:linear-gradient(
90deg,
#00d2ff,
#4eb7ff,
#8f5cff
);

}
/* =========================
   FRIEND REQUESTS
========================= */

.notifications-card{

margin-top:40px;

padding:30px;

border-radius:20px;

background:rgba(255,255,255,.03);

border:1px solid rgba(255,255,255,.08);

}

.friend-request{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 0;

border-bottom:1px solid rgba(255,255,255,.08);

}

.friend-request:last-child{

border-bottom:none;

}

.friend-request-buttons{

display:flex;

gap:10px;

}
.friend-request-player {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.friend-request-player a {
    color: white;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
}

.friend-request-player a:hover {
    color: #4eb7ff;
}

.friend-request-player span {
    color: #7d8a9c;
    font-size: 13px;
}

.friend-accept-button,
.friend-decline-button {
    padding: 10px 15px;
    border-radius: 8px;
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
}

.friend-accept-button {
    color: #55eb9e;
    background: rgba(85, 235, 158, 0.1);
    border: 1px solid rgba(85, 235, 158, 0.35);
}

.friend-accept-button:hover {
    background: rgba(85, 235, 158, 0.2);
}

.friend-decline-button {
    color: #ff6475;
    background: rgba(255, 100, 117, 0.1);
    border: 1px solid rgba(255, 100, 117, 0.35);
}

.friend-decline-button:hover {
    background: rgba(255, 100, 117, 0.2);
}

.friend-accept-button:disabled,
.friend-decline-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
/* =========================
   FRIENDS
========================= */

.friends-card {

    margin-top: 30px;

    padding: 30px;

    border-radius: 20px;

    background: rgba(255,255,255,.03);

    border: 1px solid rgba(255,255,255,.08);

}

.friend-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 14px 0;

    border-bottom: 1px solid rgba(255,255,255,.08);

}

.friend-row:last-child {

    border-bottom: none;

}

.friend-online {

    color: #55eb9e;

    font-weight: 700;

}

.friend-offline {

    color: #8d98a8;

}
/* =========================
   PARTY
========================= */

.party-card {
    margin-top: 30px;
    padding: 30px;
    border-radius: 20px;

    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

#party-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

.party-member {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 14px 0;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.08);
}

.party-member:last-child {
    border-bottom: none;
}

.party-member-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.party-member-info strong {
    color: white;
}

.party-member-info span {
    color: #7d8a9c;
    font-size: 13px;
}

.party-leader-badge {
    color: #ffd75e;
    font-size: 13px;
    font-weight: 700;
}
#party-invites {

    margin-top: 25px;

}

#party-invites .section-heading {

    margin-bottom: 15px;

}
.ready-check-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
}

.ready-check-overlay.hidden {
    display: none;
}

.ready-check-card {
    width: min(440px, 90vw);
    padding: 40px;

    text-align: center;

    background: #111827;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
}

.ready-check-card h2 {
    margin: 10px 0;
    font-size: 32px;
}

.ready-check-timer {
    margin: 25px 0 10px;

    font-size: 64px;
    font-weight: 800;
}

.ready-check-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;

    margin-top: 25px;
}

.ready-check-buttons button {
    min-width: 140px;
}
.server-connect-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    margin: 28px 0;
    padding: 28px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    background: rgba(12, 20, 32, 0.9);
}

.server-connect-panel h2 {
    margin: 8px 0;
}

.server-connect-panel p {
    margin: 0;
    color: #94a3b8;
}

.server-connect-panel.hidden {
    display: none;
}
/* =========================
   MATCH HISTORY PAGE
========================= */

.matches-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 70px 30px;
}

.matches-page-heading {
    margin-bottom: 35px;
}

.matches-page-heading h1 {
    font-size: 42px;
    margin: 8px 0 10px;
}

.matches-page-heading p {
    color: #8d99aa;
}

.matches-history {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.full-match-card {
    display: grid;

    grid-template-columns:
        1.7fr
        repeat(4, 1fr)
        1fr;

    align-items: center;

    padding: 22px 25px;

    background: #080f18;

    border: 1px solid
        rgba(255,255,255,0.08);

    border-radius: 14px;
}

.full-match-card:hover {
    border-color:
        rgba(76, 181, 255, 0.35);
}

.full-match-result {
    display: flex;
    align-items: center;
    gap: 18px;
}

.full-match-result > div {
    display: flex;
    flex-direction: column;
}

.full-match-result strong {
    font-size: 20px;
}

.full-match-result span {
    color: #8491a3;
}

.full-match-stat {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.full-match-stat strong {
    font-size: 16px;
}

.full-match-stat span {
    margin-top: 4px;
    color: #738094;
    font-size: 12px;
}

.full-match-elo {
    text-align: right;
    font-weight: 700;
}

.full-match-elo.positive {
    color: #48f0a4;
}

.full-match-elo.negative {
    color: #ff607b;
}
.match-player-result {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    text-align: right;
}

.match-player-result strong {
    font-size: 15px;
}

.match-player-result span {
    font-size: 12px;
    color: #7f8b9d;
}

.match-player-result .player-elo-positive {
    color: #48f0a4;
    font-weight: 700;
}

.match-player-result .player-elo-negative {
    color: #ff607b;
    font-weight: 700;
}
/* =========================
   FINISHED MATCH
========================= */

.finished-match-summary {
    margin: 32px auto;
    padding: 34px 42px;

    max-width: 1100px;

    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            rgba(11, 22, 34, 0.98),
            rgba(5, 11, 18, 0.98)
        );

    text-align: center;
}

.result-overline {
    color: #48b8ff;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
}

.result-map {
    margin-top: 8px;

    color: #8c9aae;

    font-size: 15px;
}

.result-scoreboard {
    margin-top: 26px;

    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    gap: 45px;
}

.result-team {
    display: flex;
    flex-direction: column;

    text-align: left;
}

.result-team.right {
    text-align: right;
}

.result-team span {
    color: #6e7c90;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.result-team strong {
    margin-top: 5px;

    font-size: 25px;
}

.result-team.winner strong {
    color: #50d7ff;
}

.result-team.loser {
    opacity: 0.55;
}

.result-score {
    display: flex;
    align-items: center;
    gap: 18px;
}

.result-score strong {
    font-size: 64px;
    line-height: 1;
}

.result-score span {
    color: #576476;
    font-size: 28px;
}

.result-winner {
    margin-top: 25px;

    color: #57efa9;

    font-weight: 800;
    font-size: 15px;
}


/* RESULT PLAYER ROW */

.match-player-result {
    margin-left: auto;

    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 4px;

    text-align: right;
}

.match-player-result strong {
    font-size: 17px;
}

.match-player-result span {
    color: #7d899a;
    font-size: 12px;
}

.player-elo-positive {
    color: #4cf0a4 !important;
    font-weight: 800;
}

.player-elo-negative {
    color: #ff627b !important;
    font-weight: 800;
}
.result-personal {
    margin-top: 24px;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: 4px;
}

.result-personal.victory {
    color: #4cf0a4;
}

.result-personal.defeat {
    color: #ff627b;
}
.match-stat-header {
    font-size: 9px !important;
    letter-spacing: 1.5px;
    color: #566477 !important;
    font-weight: 700;
}
.match-player.current-player {
    border-color: rgba(75, 190, 255, 0.55);
    background: rgba(55, 150, 220, 0.08);
}

.match-player.current-player::before {
    content: "YOU";
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
    color: #54c8ff;
}
.result-back-button {
    display: inline-block;
    margin-top: 22px;
    padding: 10px 18px;

    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;

    color: #b8c4d2;
    text-decoration: none;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
}

.result-back-button:hover {
    border-color: #45baff;
    color: #45baff;
}
.match-scoreboard-header {
    display: grid;
    grid-template-columns: 1fr 120px 80px 70px 70px 80px;
    align-items: center;

    padding: 8px 16px;
    margin-bottom: 5px;

    color: #59677a;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}

.match-scoreboard-header span:not(:first-child) {
    text-align: center;
}

.match-player-result.finished {
    margin-left: auto;

    display: grid;
    grid-template-columns: 120px 80px 70px 70px 80px;
    align-items: center;

    gap: 0;

    min-width: 420px;
}

.match-player-result.finished > * {
    text-align: center;
}
.result-match-mvp {
    margin: 24px auto 0;
    padding: 14px 24px;

    width: fit-content;
    min-width: 220px;

    display: flex;
    flex-direction: column;
    gap: 3px;

    border: 1px solid rgba(80, 210, 255, 0.18);
    border-radius: 10px;

    background: rgba(50, 170, 230, 0.06);
}

.result-match-mvp span {
    color: #54c8ff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2px;
}

.result-match-mvp strong {
    font-size: 18px;
}

.result-match-mvp small {
    color: #78879a;
    font-size: 10px;
}
.result-meta {
    margin-top: 7px;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;

    color: #5f6e82;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.result-meta span {
    color: #354357;
}
.result-personal {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.personal-score {
    padding-left: 12px;

    border-left: 1px solid rgba(255,255,255,0.15);

    color: #aab6c5;

    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0;
}
.dashboard-profile-link {
    color: inherit;
    text-decoration: none;
}

.dashboard-profile-link:hover h2 {
    color: #54c8ff;
}
.dashboard-profile-link {
    color: inherit;
    text-decoration: none;
}

.dashboard-profile-link:hover h2 {
    color: #54c8ff;
}
.match-player strong:hover {
    color: #54c8ff;
}
.map-veto-panel {
    margin: 28px 0;
    padding: 24px;

    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;

    background: #08111b;
}

.map-veto-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(130px, 1fr));

    gap: 12px;
    margin-top: 18px;
}

.map-veto-button {
    padding: 18px 12px;

    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 10px;

    background: #0d1824;
    color: white;

    font-weight: 800;
    letter-spacing: 1px;

    cursor: pointer;
}

.map-veto-button:hover:not(:disabled) {
    border-color: #54c8ff;
    color: #54c8ff;
}

.map-veto-button:disabled {
    opacity: 0.35;
    cursor: default;
}
/* =========================
   PLAYER SEARCH
========================= */

.player-search {
    position: relative;
    width: 240px;
}

#player-search-input {
    width: 100%;
    box-sizing: border-box;

    padding: 10px 14px;

    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 8px;

    background: #08111b;
    color: white;

    outline: none;
}

#player-search-input:focus {
    border-color: #54c8ff;
}

.player-search-results {
    display: none;

    position: absolute;
    top: calc(100% + 8px);
    left: 0;

    width: 100%;

    z-index: 1000;

    overflow: hidden;

    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 10px;

    background: #08111b;

    box-shadow:
        0 18px 45px rgba(0,0,0,0.45);
}

.player-search-result {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 15px;

    padding: 12px 14px;

    color: white;
    text-decoration: none;

    border-bottom:
        1px solid rgba(255,255,255,0.06);
}

.player-search-result:last-child {
    border-bottom: none;
}

.player-search-result:hover {
    background:
        rgba(84,200,255,0.08);
}

.player-search-result div {
    display: flex;
    flex-direction: column;
}

.player-search-result span {
    margin-top: 2px;

    color: #728197;
    font-size: 11px;
}

.player-search-result > strong {
    color: #54c8ff;
    font-size: 12px;
}

.player-search-empty {
    padding: 14px;

    color: #77869a;
    font-size: 12px;
}
/* =========================
   VENTUS RANKS
========================= */

.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: fit-content;

    padding: 7px 13px;

    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;

    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.3px;
}

.rank-unranked {
    color: #7c8796;
    background: rgba(120,130,145,0.08);
}

.rank-onyx {
    color: #aab0ba;
    border-color: rgba(150,160,175,0.30);
    background: rgba(70,75,85,0.20);
}

.rank-cyan {
    color: #42d8ff;
    border-color: rgba(66,216,255,0.35);
    background: rgba(30,170,220,0.10);
}

.rank-obsidian {
    color: #9c72ff;
    border-color: rgba(156,114,255,0.38);
    background: rgba(105,65,190,0.12);
}

.rank-emerald {
    color: #59efa0;
    border-color: rgba(89,239,160,0.38);
    background: rgba(40,180,105,0.10);
}

.rank-elite {
    color: #a9f6ff;
    border-color: rgba(120,235,255,0.55);

    background:
        linear-gradient(
            135deg,
            rgba(40,170,220,0.15),
            rgba(125,240,255,0.08)
        );

    box-shadow:
        0 0 18px rgba(80,220,255,0.12);
}
/* =========================
   RANKS PAGE
========================= */

.ranks-main {
    width: min(1180px, 92%);
    margin: 0 auto;
    padding: 70px 0 100px;
}

.ranks-hero {
    margin-bottom: 40px;
}

.ranks-hero h1 {
    margin: 7px 0 10px;
    font-size: 42px;
}

.ranks-hero p {
    max-width: 600px;
    color: #77869a;
    line-height: 1.7;
}


/* CURRENT RANK */

.current-rank-card {
    padding: 28px;
    margin-bottom: 50px;

    border:
        1px solid rgba(84,200,255,0.18);

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            rgba(8,17,27,0.95),
            rgba(12,30,44,0.95)
        );
}

.current-rank-card h2 {
    margin: 8px 0 5px;
    font-size: 28px;
}

.current-rank-card > strong {
    color: #54c8ff;
}

.current-rank-card p {
    color: #8190a3;
}


/* PROGRESS */

.rank-progress-track {
    width: 100%;
    height: 7px;

    margin-top: 18px;

    overflow: hidden;

    border-radius: 999px;

    background:
        rgba(255,255,255,0.07);
}

.rank-progress-fill {
    width: 0;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #36aeea,
            #68efff
        );

    transition:
        width 0.4s ease;
}


/* LADDER */

.rank-ladder-section {
    margin-top: 30px;
}

.rank-ladder {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 14px;

    margin-top: 24px;
}

@media (max-width: 1000px) {

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

}

@media (max-width: 650px) {

    .rank-ladder {
        grid-template-columns:
            1fr;
    }

}

.rank-ladder-card {
    position: relative;

    display: flex;
    align-items: center;

    gap: 22px;

    min-height: 130px;

    padding: 22px 24px;

    overflow: hidden;

    border:
        1px solid rgba(255,255,255,0.07);

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            rgba(10, 19, 29, 0.98),
            rgba(6, 13, 21, 0.98)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.025);

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.rank-ladder-card:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(255,255,255,0.14);

    box-shadow:
        0 12px 30px rgba(0,0,0,0.20),
        inset 0 1px 0 rgba(255,255,255,0.04);
}

.rank-ladder-card.current {
    border-color:
        rgba(84,200,255,0.65);

    background:
        linear-gradient(
            135deg,
            rgba(11, 30, 43, 0.98),
            rgba(6, 16, 25, 0.98)
        );

    box-shadow:
        0 0 0 1px rgba(84,200,255,0.08),
        0 12px 35px rgba(0,0,0,0.22),
        0 0 28px rgba(84,200,255,0.08);
}


/* TEMP CRYSTALS */

.rank-crystal-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 82px;
    height: 82px;
}
/* ONYX */
/* CYAN */
/* OBSIDIAN */
/* EMERALD */
/* ELITE */

/* TEXT */

.rank-ladder-info {
    position: relative;

    display: flex;
    flex-direction: column;

    flex: 1;
    min-width: 0;
}
.rank-ladder-info::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -10px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.08),
            transparent
        );
}

.rank-ladder-number {
    color: #526174;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.rank-ladder-info h3 {
    margin: 5px 0 6px;

    color: #f3f7fb;

    font-size: 19px;
    font-weight: 800;

    letter-spacing: -0.25px;
}

.rank-ladder-info strong {
    color: #8291a4;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.35px;
}

.rank-ladder-info h3 {
    margin: 3px 0 5px;
}

.rank-ladder-info strong {
    color: #8190a3;
    font-size: 11px;
}
/* =========================
   PLACEMENT INFO
========================= */

.placement-info {
    margin-bottom: 50px;
}

.placement-info > div:first-child {
    margin-bottom: 20px;
}

.placement-info h2 {
    margin-top: 6px;
}

.placement-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.placement-info-grid > div {
    padding: 22px;

    border: 1px solid
        rgba(255,255,255,0.07);

    border-radius: 13px;

    background: #08111b;
}

.placement-info-grid > div > strong {
    color: #54c8ff;
    font-size: 12px;
    letter-spacing: 1px;
}

.placement-info-grid h3 {
    margin: 10px 0 7px;
    font-size: 15px;
}

.placement-info-grid p {
    margin: 0;

    color: #718096;
    font-size: 12px;
    line-height: 1.6;
}

@media (max-width: 800px) {
    .placement-info-grid {
        grid-template-columns: 1fr;
    }
}
.rank-crystal-image {
    width: 100%;
    height: 100%;

    object-fit: contain;

    filter:
        drop-shadow(
            0 0 10px
            rgba(100,220,255,0.20)
        );
}

.rank-crystal-fallback {
    display: none;

    width: 100%;
    height: 100%;

    align-items: center;
    justify-content: center;

    font-weight: 900;
}

/* =========================
   CURRENT RANK ICON
========================= */

.current-rank-icon {
    width: 150px;
    height: 150px;

    margin: 18px auto 12px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.current-rank-image {
    width: 100%;
    height: 100%;

    object-fit: contain;

    filter:
        drop-shadow(0 0 12px rgba(70, 210, 255, 0.18))
        drop-shadow(0 0 28px rgba(70, 210, 255, 0.08));
}
/* =========================
   CURRENT RANK CARD POLISH
========================= */

.current-rank-card {
    position: relative;
    overflow: hidden;

    text-align: center;

    padding: 36px 32px 30px;

    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(70, 210, 255, 0.10),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            rgba(10, 20, 31, 0.98),
            rgba(6, 13, 22, 0.98)
        );

    border: 1px solid rgba(255,255,255,0.08);

    box-shadow:
        0 22px 60px rgba(0,0,0,0.24),
        inset 0 1px 0 rgba(255,255,255,0.035);
}

.current-rank-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 50%;

    width: 220px;
    height: 1px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(84, 200, 255, 0.75),
            transparent
        );
}

.current-rank-card .section-label {
    display: block;
    margin-bottom: 4px;
}

.current-rank-icon {
    width: 165px;
    height: 165px;

    margin: 18px auto 8px;
}

.current-rank-card h2 {
    margin: 4px 0 5px;

    font-size: 32px;
    letter-spacing: -0.6px;
}

.current-rank-card > strong {
    display: block;

    color: #8bdcff;

    font-size: 14px;
    letter-spacing: 1.3px;
}

#current-rank-progress-text {
    margin-top: 23px;

    color: #a1adbd;

    font-size: 12px;
    font-weight: 700;
}

.rank-progress-track {
    max-width: 560px;

    height: 6px;

    margin: 11px auto 0;

    background: rgba(255,255,255,0.065);
}

.rank-progress-fill {
    box-shadow:
        0 0 15px rgba(70, 210, 255, 0.30);
}

.current-rank-next {
    margin-top: 12px;

    color: #667589;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.7px;
}
/* =========================
   RANK FAMILY ACCENTS
========================= */

.rank-ladder-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 22px;
    right: 22px;

    height: 1px;

    opacity: 0.55;
}

/* ONYX */

.rank-card-onyx::before {
    background:
        linear-gradient(
            90deg,
            transparent,
            #aeb6c2,
            transparent
        );
}

/* CYAN */

.rank-card-cyan::before {
    background:
        linear-gradient(
            90deg,
            transparent,
            #54c8ff,
            transparent
        );
}

/* OBSIDIAN */

.rank-card-obsidian::before {
    background:
        linear-gradient(
            90deg,
            transparent,
            #9b7cff,
            transparent
        );
}

/* EMERALD */

.rank-card-emerald::before {
    background:
        linear-gradient(
            90deg,
            transparent,
            #58d99b,
            transparent
        );
}

/* VENTUS ELITE */

.rank-card-elite::before {
    height: 2px;

    opacity: 0.8;

    background:
        linear-gradient(
            90deg,
            transparent,
            #7cecff,
            #d8fbff,
            #7cecff,
            transparent
        );
}

/* VENTUS ELITE CARD */

.rank-card-elite {
    border-color:
        rgba(124, 236, 255, 0.16);

    background:
        radial-gradient(
            circle at 18% 50%,
            rgba(124, 236, 255, 0.07),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            rgba(10, 24, 34, 0.98),
            rgba(5, 13, 21, 0.98)
        );
}

.rank-card-elite .rank-ladder-info h3 {
    color: #d8fbff;
}

.rank-card-elite .rank-crystal-image {
    filter:
        drop-shadow(
            0 0 12px
            rgba(124, 236, 255, 0.18)
        );
}

.rank-card-elite:hover {
    border-color:
        rgba(124, 236, 255, 0.35);

    box-shadow:
        0 14px 36px rgba(0,0,0,0.24),
        0 0 26px rgba(124,236,255,0.07);
}
/* =========================
   CURRENT RANK TAG
========================= */

.current-rank-tag {
    position: absolute;

    top: 12px;
    right: 14px;

    padding: 5px 8px;

    border:
        1px solid rgba(84, 200, 255, 0.28);

    border-radius: 5px;

    background:
        rgba(84, 200, 255, 0.07);

    color: #7dd8ff;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1.1px;

    line-height: 1;
}
/* =========================
   NEW ARENA ACCENTS
========================= */

.rank-card-arena-1::before {
    background:
        linear-gradient(
            90deg,
            transparent,
            #8f99a6,
            transparent
        );
}

.rank-card-arena-2::before {
    background:
        linear-gradient(
            90deg,
            transparent,
            #4ea8ff,
            transparent
        );
}

.rank-card-arena-3::before {
    background:
        linear-gradient(
            90deg,
            transparent,
            #9b7cff,
            transparent
        );
}

.rank-card-arena-4::before {
    background:
        linear-gradient(
            90deg,
            transparent,
            #55d89b,
            transparent
        );
}

.rank-card-arena-5::before {
    background:
        linear-gradient(
            90deg,
            transparent,
            #62e7ff,
            transparent
        );
}

.arena-elo-range {
    margin-top: 7px;

    color: #536174;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.4px;
}
.rank-crystal-image {
    width: 150px;
    height: 150px;
    object-fit: contain;
    display: block;
}

.rank-crystal-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}
.rank-crystal-image,
.current-rank-image {
    width: 190px;
    height: 190px;
    object-fit: contain;
    display: block;
}

#current-rank-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px auto 4px;
}

.current-rank-image {
    filter: drop-shadow(0 0 24px rgba(70, 190, 255, 0.15));
}
/* =========================================================
   VENTUS DASHBOARD V2
   ========================================================= */

.dashboard-page {
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(25, 145, 255, 0.07),
            transparent 32%
        ),
        #05080c;

    min-height: 100vh;
}


/* MAIN WIDTH */

.dashboard-page .dashboard {
    width: min(1500px, calc(100% - 64px));
    max-width: none;

    margin: 0 auto;

    padding:
        48px
        0
        100px;

    display: block;
}


/* =========================================================
   TOP AREA
   ========================================================= */

.dashboard-top {
    display: flex;
    flex-direction: column;
    gap: 18px;
}


/* =========================================================
   PLAYER / RANK BAR
   ========================================================= */

.player-rank-bar {
    min-height: 108px;

    display: grid;

    grid-template-columns:
        280px
        150px
        160px
        1fr;

    align-items: center;

    padding: 18px 24px;

    background: #090d12;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 12px;
}


.rank-bar-profile {
    display: flex;
    align-items: center;
    gap: 14px;

    color: white;
    text-decoration: none;
}


.rank-bar-avatar {
    position: relative;

    width: 64px;
    height: 64px;

    flex-shrink: 0;
}


.rank-bar-avatar .avatar {
    width: 64px;
    height: 64px;

    margin: 0;

    border-width: 2px;
}


.online-dot {
    position: absolute;

    right: 1px;
    bottom: 3px;

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background: #42e6a4;

    border: 3px solid #090d12;
}


.rank-bar-user {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}


.rank-bar-label,
.rank-bar-elo > span,
.rank-bar-position > span,
.rank-progress-heading span {
    color: #647184;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.3px;
}


.rank-bar-user > strong {
    font-size: 18px;
}


.rank-bar-user .rank-badge {
    margin: 2px 0 0;

    padding: 3px 8px;

    font-size: 9px;
}


/* ELO + GLOBAL */

.rank-bar-elo,
.rank-bar-position {
    min-height: 60px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding-left: 22px;

    border-left:
        1px solid
        rgba(255, 255, 255, 0.07);
}


.rank-bar-elo strong,
.rank-bar-position strong {
    margin-top: 2px;

    color: #ffffff;

    font-size: 25px;
}


.rank-bar-elo small,
.rank-bar-position small {
    margin-top: 2px;

    color: #586678;

    font-size: 10px;
}


/* RANK PROGRESS */

.rank-progress-area {
    padding-left: 32px;
}


.rank-progress-heading {
    display: flex;
    justify-content: space-between;

    margin-bottom: 10px;
}


.rank-progress-heading strong {
    color: #9ca8b7;

    font-size: 11px;
}


.rank-progress-track {
    width: 100%;
    height: 7px;

    overflow: hidden;

    border-radius: 20px;

    background: #171d25;
}


.rank-progress-value {
    width: 42%;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #2099ff,
            #67dcff
        );

    box-shadow:
        0 0 16px
        rgba(43, 169, 255, 0.35);
}


/* =========================================================
   MATCHMAKING BOARD
   ========================================================= */

.matchmaking-board {
    position: relative;

    overflow: hidden;

    padding: 28px 34px 32px;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(34, 155, 255, 0.08),
            transparent 35%
        ),
        #080b0f;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 12px;
}


.matchmaking-board::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(58, 177, 255, 0.025),
            transparent
        );
}


.matchmaking-board-header {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    padding-bottom: 24px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);
}


.matchmaking-board-header h1 {
    margin: 5px 0 4px;

    color: white;

    font-size: 27px;
}


.matchmaking-board-header p {
    margin: 0;

    color: #667386;

    font-size: 12px;
}


/* =========================================================
   PARTY SLOTS
   ========================================================= */

.party-stage {
    position: relative;
    z-index: 1;

    display: flex;

    align-items: flex-end;
    justify-content: center;

    gap: 18px;

    padding:
        42px
        20px
        30px;
}


.party-slot {
    width: 180px;
    height: 215px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(255, 255, 255, 0.10);

    border-radius: 12px;

    background: #0d1116;

    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
}


.party-slot.empty {
    cursor: pointer;
}


.party-slot.empty:hover {
    transform: translateY(-3px);

    border-color:
        rgba(55, 174, 255, 0.40);

    background: #10161d;
}


.party-plus {
    color: #5f6874;

    font-size: 54px;
    font-weight: 200;

    line-height: 1;
}


.party-slot small {
    margin-top: 14px;

    color: #596574;

    font-size: 11px;
}


/* CURRENT PLAYER */

.player-slot {
    height: 240px;

    border-color:
        rgba(56, 177, 255, 0.35);

    background:
        linear-gradient(
            180deg,
            rgba(31, 151, 235, 0.08),
            rgba(255, 255, 255, 0.015)
        ),
        #0d1116;

    box-shadow:
        0 16px 40px
        rgba(0, 0, 0, 0.25);
}


.party-player-avatar {
    width: 92px;
    height: 92px;

    margin-bottom: 15px;
}


.party-player-avatar .avatar {
    width: 92px;
    height: 92px;

    margin: 0;

    border-width: 2px;
}


.player-slot > strong {
    color: white;

    font-size: 16px;
}


.party-player-rank {
    margin-top: 7px;

    color: #54c7ff;

    font-size: 11px;
    font-weight: 800;
}


.party-leader {
    margin-top: 13px;

    padding: 4px 8px;

    border-radius: 4px;

    background:
        rgba(52, 171, 255, 0.08);

    color: #77899c;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 1px;
}


/* =========================================================
   FIND MATCH
   ========================================================= */

.matchmaking-action {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;
    align-items: center;
}


.find-match-button {
    width: 300px;
    height: 54px;

    border-radius: 6px;

    font-size: 13px;

    letter-spacing: 0.5px;
}


.matchmaking-meta {
    width: min(680px, 100%);

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    margin-top: 18px;

    background: #0b0f14;

    border:
        1px solid
        rgba(255, 255, 255, 0.06);

    border-radius: 7px;
}


.matchmaking-meta > div {
    padding: 12px 18px;

    display: flex;
    flex-direction: column;

    border-right:
        1px solid
        rgba(255, 255, 255, 0.06);
}


.matchmaking-meta > div:last-child {
    border-right: 0;
}


.matchmaking-meta span {
    color: #596676;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1px;
}


.matchmaking-meta strong {
    margin-top: 3px;

    color: white;

    font-size: 12px;
}


/* QUEUE PROGRESS */

.matchmaking-board > .queue-progress {
    width: min(680px, 100%);

    margin:
        12px
        auto
        0;
}


.matchmaking-board .queue-progress-track {
    height: 3px;

    background: #171c22;
}


/* QUEUE PLAYER LIST */

.matchmaking-board .queue-players-box {
    width: min(680px, 100%);

    min-height: auto;

    margin:
        15px
        auto
        0;

    padding: 12px 16px;

    background: #0b0f14;

    border:
        1px solid
        rgba(255, 255, 255, 0.06);

    border-radius: 7px;
}


.matchmaking-board .queue-players-box h3 {
    margin: 0 0 7px;

    color: #778596;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 1px;
}


/* =========================================================
   OLD CONTENT UNDER MATCHMAKING
   ========================================================= */

.dashboard-content {
    margin-top: 18px;
}


.dashboard-page .stats-grid {
    grid-template-columns:
        repeat(4, 1fr);

    gap: 12px;
}


.dashboard-page .stat-box {
    min-height: 125px;

    padding: 22px;

    background: #090d12;

    border-color:
        rgba(255, 255, 255, 0.07);

    border-radius: 9px;
}


.dashboard-page .dashboard-lower {
    margin-top: 12px;

    grid-template-columns:
        2fr 1fr;

    gap: 12px;
}


.dashboard-page .recent-matches,
.dashboard-page .mini-leaderboard,
.dashboard-page .notifications-card,
.dashboard-page .friends-card,
.dashboard-page .party-card {
    background: #090d12;

    border-color:
        rgba(255, 255, 255, 0.07);
}


/* RESPONSIVE */

@media (max-width: 1050px) {

    .player-rank-bar {
        grid-template-columns:
            1fr
            120px
            120px;
    }

    .rank-progress-area {
        display: none;
    }

    .party-slot {
        width: 150px;
    }
}


@media (max-width: 800px) {

    .dashboard-page .dashboard {
        width: calc(100% - 28px);

        padding-top: 25px;
    }

    .player-rank-bar {
        grid-template-columns: 1fr 1fr;

        gap: 20px;
    }

    .rank-bar-profile {
        grid-column: 1 / -1;
    }

    .party-stage {
        overflow-x: auto;

        justify-content: flex-start;
    }

    .party-slot {
        min-width: 145px;
    }

    .dashboard-page .stats-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }
}
/* PARTY STAGE - 5 PLAYER SLOTS */

#party-stage-slots {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

#party-stage-slots .party-slot {
    flex: 0 0 180px;
}

#party-stage-slots .player-slot {
    flex: 0 0 180px;
}
/* =========================================================
   VENTUS EXPANDING SIDEBAR
   ========================================================= */

:root {
    --sidebar-closed: 76px;
    --sidebar-open: 235px;
}

/* Dölj gamla top-navbar om någon gammal styling ligger kvar */
.dashboard-page > .navbar {
    display: none;
}


/* SIDEBAR */

.ventus-sidebar {
    position: fixed;
    z-index: 1000;

    top: 0;
    left: 0;

    width: var(--sidebar-closed);
    height: 100vh;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: #080b0f;

    border-right: 1px solid rgba(255, 255, 255, 0.07);

    box-shadow: 8px 0 30px rgba(0, 0, 0, 0.18);

    transition:
        width 0.25s ease,
        box-shadow 0.25s ease;
}

.ventus-sidebar:hover {
    width: var(--sidebar-open);

    box-shadow:
        15px 0 45px rgba(0, 0, 0, 0.38);
}


/* =========================================================
   LOGO
   ========================================================= */

.sidebar-logo {
    height: 82px;
    min-height: 82px;

    display: flex;
    align-items: center;

    padding: 0 18px;

    gap: 16px;

    color: white;
    text-decoration: none;

    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar-logo-icon {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            #158cff,
            #55d8ff
        );

    color: white;

    font-size: 19px;
    font-weight: 900;

    box-shadow:
        0 0 22px rgba(40, 164, 255, 0.18);
}

.sidebar-logo-text {
    min-width: 140px;

    display: flex;
    flex-direction: column;

    opacity: 0;
    transform: translateX(-8px);

    transition:
        opacity 0.18s ease,
        transform 0.22s ease;
}

.ventus-sidebar:hover .sidebar-logo-text {
    opacity: 1;
    transform: translateX(0);
}

.sidebar-logo-text strong {
    color: white;

    font-size: 16px;
    letter-spacing: 1.5px;
}

.sidebar-logo-text small {
    margin-top: 2px;

    color: #526071;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1px;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.sidebar-nav {
    display: flex;
    flex-direction: column;

    gap: 5px;

    padding: 20px 10px;
}

.sidebar-link,
.sidebar-logout {
    position: relative;

    width: 100%;
    height: 52px;

    display: flex;
    align-items: center;

    gap: 16px;

    padding: 0 15px;

    border: 0;
    border-radius: 8px;

    background: transparent;

    color: #657283;

    text-decoration: none;

    cursor: pointer;

    font-family: inherit;

    transition:
        color 0.18s ease,
        background 0.18s ease;
}

.sidebar-link:hover,
.sidebar-logout:hover {
    color: #ffffff;

    background: rgba(255, 255, 255, 0.045);
}


/* ACTIVE PAGE */

.sidebar-link.active {
    color: #5acbff;

    background:
        linear-gradient(
            90deg,
            rgba(37, 157, 255, 0.13),
            rgba(37, 157, 255, 0.035)
        );
}

.sidebar-link.active::before {
    content: "";

    position: absolute;

    left: -10px;
    top: 11px;
    bottom: 11px;

    width: 3px;

    border-radius: 0 4px 4px 0;

    background: #38b9ff;

    box-shadow:
        0 0 12px rgba(56, 185, 255, 0.55);
}


/* ICON */

.sidebar-icon {
    width: 26px;
    min-width: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 19px;

    text-align: center;
}


/* TEXT */

.sidebar-label {
    min-width: 130px;

    opacity: 0;

    transform: translateX(-7px);

    white-space: nowrap;

    font-size: 12px;
    font-weight: 700;

    transition:
        opacity 0.15s ease,
        transform 0.2s ease;
}

.ventus-sidebar:hover .sidebar-label {
    opacity: 1;
    transform: translateX(0);
}


/* =========================================================
   BOTTOM
   ========================================================= */

.sidebar-bottom {
    margin-top: auto;

    display: flex;
    flex-direction: column;

    gap: 5px;

    padding: 10px;

    border-top: 1px solid rgba(255, 255, 255, 0.06);
}


/* PROFILE */

.sidebar-profile {
    height: 64px;

    display: flex;
    align-items: center;

    gap: 13px;

    padding: 7px;

    overflow: hidden;

    border-radius: 9px;

    color: white;
    text-decoration: none;

    transition: background 0.18s ease;
}

.sidebar-profile:hover {
    background: rgba(255, 255, 255, 0.045);
}

.sidebar-avatar {
    position: relative;

    width: 42px;
    height: 42px;

    flex: 0 0 42px;
}

.sidebar-avatar .avatar {
    width: 42px;
    height: 42px;

    margin: 0;

    border-width: 2px;

    box-shadow: none;
}

.sidebar-online-dot {
    position: absolute;

    right: -1px;
    bottom: 1px;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: #42e6a4;

    border: 2px solid #080b0f;
}

.sidebar-profile-info {
    min-width: 130px;

    display: flex;
    flex-direction: column;

    opacity: 0;

    transform: translateX(-7px);

    transition:
        opacity 0.15s ease,
        transform 0.2s ease;
}

.ventus-sidebar:hover .sidebar-profile-info {
    opacity: 1;
    transform: translateX(0);
}

.sidebar-profile-info strong {
    overflow: hidden;

    color: white;

    font-size: 12px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-profile-info > span {
    margin-top: 3px;

    color: #5c6a7b;

    font-size: 9px;
    font-weight: 700;
}


/* LOGOUT */

.sidebar-logout {
    text-align: left;
}

.sidebar-logout:hover {
    color: #ff7272;

    background: rgba(255, 85, 85, 0.06);
}


/* =========================================================
   MOVE DASHBOARD AWAY FROM CLOSED SIDEBAR
   ========================================================= */

.dashboard-page .dashboard {
    width: min(
        1500px,
        calc(100% - var(--sidebar-closed) - 64px)
    );

    margin:
        0
        auto
        0
        calc(
            var(--sidebar-closed) +
            (
                100vw -
                var(--sidebar-closed) -
                min(
                    1500px,
                    calc(
                        100vw -
                        var(--sidebar-closed) -
                        64px
                    )
                )
            ) / 2
        );
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 800px) {

    .ventus-sidebar {
        display: none;
    }

    .dashboard-page .dashboard {
        width: calc(100% - 28px);
        margin: 0 auto;
    }
}
/* =========================================================
   SIDEBAR - COMING SOON ITEMS
   ========================================================= */

.sidebar-disabled {
    font-family: inherit;
    text-align: left;
}

/* Lite svagare när sidebaren är stängd */
.sidebar-disabled .sidebar-icon {
    opacity: 0.65;
}

/* Men känns fortfarande som riktiga delar av Ventus */
.sidebar-disabled:hover .sidebar-icon {
    opacity: 1;
}
/* SIDEBAR GROUPS */

.sidebar-nav {
    gap: 0;
}

.sidebar-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Mellan Play / Discover / Competitive */
.sidebar-group + .sidebar-group {
    margin-top: 16px;
}

/* Lucide icons */
.sidebar-icon svg {
    width: 19px;
    height: 19px;

    stroke-width: 1.8;

    transition:
        transform 0.18s ease,
        stroke 0.18s ease;
}

.sidebar-link:hover .sidebar-icon svg {
    transform: scale(1.08);
}


/* PLAY - viktigaste delen av Ventus */

.sidebar-play {
    color: #48bdff;

    background: rgba(38, 157, 255, 0.08);
}

.sidebar-play:hover {
    color: #75d0ff;

    background: rgba(38, 157, 255, 0.14);
}

.sidebar-play .sidebar-icon {
    color: #48bdff;
}
/* =========================================================
   VENTUS SOCIAL SIDEBAR
   ========================================================= */

:root {
    --social-width: 285px;
}

.social-sidebar {
    position: fixed;

    z-index: 900;

    top: 0;
    right: 0;

    width: var(--social-width);
    height: 100vh;

    display: flex;
    flex-direction: column;

    overflow-y: auto;

    background: #080b0f;

    border-left: 1px solid rgba(255,255,255,.07);

    box-shadow: -10px 0 35px rgba(0,0,0,.16);
}


/* HEADER */

.social-header {
    height: 82px;
    min-height: 82px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 18px 0 20px;

    border-bottom: 1px solid rgba(255,255,255,.06);
}

.social-header > div {
    display: flex;
    flex-direction: column;
}

.social-eyebrow {
    color: #38b9ff;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1.5px;
}

.social-header strong {
    margin-top: 3px;

    color: #fff;

    font-size: 15px;
}

.social-collapse-button {
    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255,255,255,.07);
    border-radius: 7px;

    background: rgba(255,255,255,.025);

    color: #687789;

    font-size: 22px;

    cursor: pointer;
}


/* SECTIONS */

.social-section {
    padding: 20px 16px;

    border-bottom: 1px solid rgba(255,255,255,.055);
}

.social-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 13px;
}

.social-section-header span {
    color: #697789;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.4px;
}

.social-section-header small {
    color: #38b9ff;

    font-size: 9px;
    font-weight: 800;
}


/* PLAYER */

.social-list {
    display: flex;
    flex-direction: column;

    gap: 5px;
}

.social-player {
    display: flex;
    align-items: center;

    min-height: 52px;

    padding: 6px 7px;

    border-radius: 8px;

    transition: background .15s ease;
}

.social-player:hover {
    background: rgba(255,255,255,.04);
}

.social-avatar {
    position: relative;

    width: 36px;
    height: 36px;

    flex: 0 0 36px;
}

.social-avatar .avatar {
    width: 36px;
    height: 36px;

    margin: 0;

    border-width: 1px;

    box-shadow: none;
}

.social-online {
    position: absolute;

    right: -1px;
    bottom: 0;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #42e6a4;

    border: 2px solid #080b0f;
}

.social-player-info {
    min-width: 0;

    display: flex;
    flex-direction: column;

    margin-left: 11px;
}

.social-player-info strong {
    overflow: hidden;

    color: #dce5ef;

    font-size: 11px;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.social-player-info span {
    margin-top: 3px;

    color: #566476;

    font-size: 9px;
}


/* INVITE */

.social-invite-button {
    width: 100%;
    height: 38px;

    display: flex;
    align-items: center;

    gap: 10px;

    margin-top: 9px;
    padding: 0 10px;

    border: 1px dashed rgba(67,184,255,.2);
    border-radius: 7px;

    background: rgba(36,150,255,.035);

    color: #6f8294;

    font-family: inherit;
    font-size: 10px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background .15s ease,
        color .15s ease,
        border-color .15s ease;
}

.social-invite-button span {
    color: #38b9ff;

    font-size: 17px;
}

.social-invite-button:hover {
    color: #b9dfff;

    border-color: rgba(67,184,255,.4);

    background: rgba(36,150,255,.08);
}


/* SEARCH */

.social-search {
    height: 36px;

    display: flex;
    align-items: center;

    gap: 8px;

    margin-bottom: 11px;
    padding: 0 10px;

    border: 1px solid rgba(255,255,255,.065);
    border-radius: 7px;

    background: #0b0f14;
}

.social-search svg {
    width: 14px;
    height: 14px;

    color: #566476;
}

.social-search input {
    width: 100%;

    border: 0;
    outline: 0;

    background: transparent;

    color: #dce5ef;

    font-family: inherit;
    font-size: 10px;
}

.social-search input::placeholder {
    color: #465362;
}


/* EMPTY */

.social-empty {
    margin: 4px 0;

    color: #4e5c6c;

    font-size: 10px;
}


/* =========================================================
   MAKE ROOM FOR BOTH SIDEBARS
   ========================================================= */

.dashboard-page .dashboard {
    width: auto;

    max-width: 1500px;

    margin-left: calc(var(--sidebar-closed) + 32px);
    margin-right: calc(var(--social-width) + 32px);
}


/* Smaller screens */

@media (max-width: 1200px) {

    .social-sidebar {
        display: none;
    }

    .dashboard-page .dashboard {
        margin-right: 32px;
    }
}
/* =========================================================
   PLAY MODE NAVIGATION
   ========================================================= */

.play-mode-nav {
    width: 100%;
    height: 62px;

    display: flex;
    align-items: stretch;

    gap: 6px;

    margin-bottom: 24px;
    padding: 0 6px;

    background: #080b0f;

    border: 1px solid rgba(255, 255, 255, 0.065);
    border-radius: 9px;
}

.play-mode {
    position: relative;

    min-width: 125px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    padding: 0 20px;

    border: 0;

    background: transparent;

    color: #657283;

    font-family: inherit;
    font-size: 11px;
    font-weight: 800;

    cursor: pointer;

    transition:
        color .18s ease,
        background .18s ease;
}

.play-mode svg {
    width: 16px;
    height: 16px;

    stroke-width: 1.8;
}

.play-mode:hover {
    color: #d8e3ed;

    background: rgba(255,255,255,.025);
}


/* ACTIVE MODE */

.play-mode.active {
    color: #55c6ff;

    background:
        linear-gradient(
            180deg,
            rgba(43,166,255,.035),
            rgba(43,166,255,.075)
        );
}

.play-mode.active::after {
    content: "";

    position: absolute;

    left: 20px;
    right: 20px;
    bottom: -1px;

    height: 2px;

    border-radius: 3px 3px 0 0;

    background: #38b9ff;

    box-shadow:
        0 0 12px rgba(56,185,255,.45);
}

.play-mode.active svg {
    color: #38b9ff;
}
/* =========================================================
   DASHBOARD QUICK ACTIONS
   ========================================================= */

.dashboard-quick-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;

    margin-top: 18px;
    margin-bottom: 20px;
}

.dashboard-feature-card {
    min-height: 185px;

    display: flex;
    align-items: flex-start;
    gap: 18px;

    padding: 24px;

    border: 1px solid rgba(255,255,255,.065);
    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            rgba(18,25,33,.96),
            rgba(9,13,18,.96)
        );

    color: inherit;
    text-decoration: none;

    transition:
        border-color .2s ease,
        transform .2s ease,
        background .2s ease;
}

.dashboard-feature-card:hover {
    transform: translateY(-2px);

    border-color: rgba(56,185,255,.22);

    background:
        linear-gradient(
            135deg,
            rgba(20,29,39,.98),
            rgba(10,15,21,.98)
        );
}

.feature-card-icon {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(56,185,255,.16);
    border-radius: 9px;

    background: rgba(56,185,255,.07);

    color: #42bdff;
}

.feature-card-icon svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.8;
}

.feature-card-content h2 {
    margin: 7px 0 7px;

    color: #fff;

    font-size: 18px;
}

.feature-card-content p {
    max-width: 340px;

    margin: 0;

    color: #637183;

    font-size: 11px;
    line-height: 1.6;
}

.feature-card-link {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-top: 18px;

    color: #43beff;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .8px;
}

.feature-card-link svg {
    width: 13px;
    height: 13px;
}

@media (max-width: 950px) {
    .dashboard-quick-actions {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   DASHBOARD DISCOVER
   ========================================================= */

.dashboard-discover {
    margin-top: 22px;
    margin-bottom: 32px;
}

.discover-heading {
    margin-bottom: 14px;
}

.discover-heading h2 {
    margin: 5px 0 0;

    color: #fff;
    font-size: 18px;
}

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

.discover-item {
    min-width: 0;
    height: 82px;

    display: flex;
    align-items: center;

    padding: 0 16px;

    border: 1px solid rgba(255,255,255,.06);
    border-radius: 9px;

    background: #0b1016;

    color: inherit;
    text-align: left;

    font-family: inherit;
    cursor: pointer;

    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

.discover-item:hover {
    transform: translateY(-2px);

    background: #0d131a;
    border-color: rgba(56,185,255,.2);
}

.discover-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-right: 12px;

    border-radius: 8px;

    background: rgba(56,185,255,.07);

    color: #42bdff;
}

.discover-icon svg {
    width: 17px;
    height: 17px;
    stroke-width: 1.8;
}

.discover-info {
    min-width: 0;

    display: flex;
    flex: 1;
    flex-direction: column;
}

.discover-info strong {
    color: #e7edf3;
    font-size: 11px;
}

.discover-info span {
    overflow: hidden;

    margin-top: 4px;

    color: #586779;
    font-size: 9px;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.discover-arrow {
    width: 14px;
    height: 14px;

    margin-left: 10px;

    color: #405061;

    transition:
        color .18s ease,
        transform .18s ease;
}

.discover-item:hover .discover-arrow {
    color: #42bdff;
    transform: translateX(3px);
}

@media (max-width: 1000px) {
    .discover-grid {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   VENTUS CORE THEME
   Black UI + Ventus Blue Accent
   ========================================================= */

:root {
    --ventus-bg: #030405;
    --ventus-panel: #080b0e;
    --ventus-panel-2: #0b0f13;

    --ventus-border: rgba(255, 255, 255, 0.07);
    --ventus-border-hover: rgba(56, 185, 255, 0.25);

    --ventus-blue: #38b9ff;
    --ventus-blue-hover: #62c8ff;

    --ventus-text: #f2f5f7;
    --ventus-muted: #697687;
}


/* PAGE */

body,
.dashboard-page {
    background: var(--ventus-bg);
}


/* MAIN DASHBOARD PANELS */

.player-rank-bar,
.dashboard-feature-card,
.stat-box,
.recent-matches,
.mini-leaderboard,
.dashboard-discover,
.matchmaking-board {
    background: var(--ventus-panel);

    border-color: var(--ventus-border);

    box-shadow: none;

    backdrop-filter: none;
}


/* REMOVE OLD BLUE GLOW FROM STAT CARDS */

.stat-box::after {
    display: none;
}


/* FEATURE CARDS */

.dashboard-feature-card {
    background: var(--ventus-panel);
}

.dashboard-feature-card:hover {
    background: var(--ventus-panel-2);

    border-color: var(--ventus-border-hover);
}


/* SIDEBARS */

.ventus-sidebar,
.social-sidebar {
    background: #050709;

    border-color: var(--ventus-border);

    box-shadow: none;
}


/* SMALL UI ELEMENTS */

.social-search,
.discover-item {
    background: var(--ventus-panel-2);

    border-color: var(--ventus-border);
}


/* VENTUS ACCENT */

.section-label,
.feature-card-link,
.player-elo,
.social-eyebrow {
    color: var(--ventus-blue);
}


/* RANK PROGRESS */

.rank-progress-value {
    background: var(--ventus-blue);

    box-shadow: none;
}
/* =========================================================
   PLAY - MATCHMAKING ACTION AREA
   ========================================================= */

.matchmaking-action {
    width: min(680px, calc(100% - 70px));

    margin: 28px auto 0;

    display: flex;
    flex-direction: column;
    align-items: stretch;
}


/* MAIN MATCHMAKING BUTTON */

.find-match-button {
    width: 100%;
    height: 54px;

    border: 0;
    border-radius: 7px;

    background: #38b9ff;

    color: #031018;

    font-family: inherit;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .7px;

    cursor: pointer;

    box-shadow: none;

    transition:
        background .18s ease,
        transform .18s ease;
}

.find-match-button:hover {
    background: #62c8ff;
    transform: translateY(-1px);
}


/* QUEUE INFORMATION */

.matchmaking-meta {
    width: 100%;

    display: grid;
    grid-template-columns: repeat(4, 1fr);

    margin-top: 10px;

    overflow: hidden;

    border: 1px solid rgba(255,255,255,.07);
    border-radius: 7px;

    background: #080b0e;
}

.matchmaking-meta > div {
    min-height: 52px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 0 17px;

    border-right: 1px solid rgba(255,255,255,.06);
}

.matchmaking-meta > div:last-child {
    border-right: 0;
}

.matchmaking-meta span {
    color: #596777;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1px;
}

.matchmaking-meta strong {
    margin-top: 4px;

    color: #e8edf2;

    font-size: 10px;
    font-weight: 800;
}


/* PLAYERS VALUE */

.matchmaking-meta #queue-count {
    color: #38b9ff;
}


/* MOBILE */

@media (max-width: 750px) {

    .matchmaking-action {
        width: calc(100% - 30px);
    }

    .matchmaking-meta {
        grid-template-columns: repeat(2, 1fr);
    }

    .matchmaking-meta > div:nth-child(2) {
        border-right: 0;
    }

    .matchmaking-meta > div:nth-child(-n+2) {
        border-bottom: 1px solid rgba(255,255,255,.06);
    }
}
/* =========================================================
   PLAY - 5V5 BOARD STRUCTURE
   ========================================================= */

.matchmaking-board {
    min-height: 0;
    height: auto;

    padding: 30px 34px 26px;

    overflow: visible;
}

.party-stage {
    min-height: 280px;
    height: auto;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 28px 0 22px;
}

#party-stage-slots {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}


/* KEEP ACTION AREA INSIDE BOARD */

.matchmaking-action {
    position: relative;

    width: min(680px, 100%);

    margin: 6px auto 0;
}


/* QUEUE PROGRESS */

.queue-progress {
    width: min(680px, 100%);
    margin: 14px auto 0;
}


/* PLAYERS IN QUEUE */

.queue-players-box {
    width: min(680px, 100%);
    margin: 14px auto 0;
}
/* =========================================================
   PLAY - TOP GAME MODE NAVIGATION
   ========================================================= */

.play-mode-nav {
    width: 100%;
    height: 48px;

    display: flex;
    align-items: stretch;
    justify-content: center;

    gap: 38px;

    margin: 0 0 18px;
    padding: 0;

    background: transparent;

    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.07);
    border-radius: 0;
}

.play-mode {
    position: relative;

    flex: 0 0 auto;
    min-width: 105px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;
    padding: 0 10px;

    border: 0;
    background: transparent;

    color: #687482;

    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .2px;

    cursor: pointer;

    transition: color .18s ease;
}

.play-mode:hover {
    color: #dce5ec;
    background: transparent;
}

.play-mode.active {
    color: #ffffff;
    background: transparent;
}

.play-mode svg {
    width: 17px;
    height: 17px;
    stroke-width: 2;
}

.play-mode.active svg {
    color: #38b9ff;
}

.play-mode.active::after {
    content: "";

    position: absolute;

    left: 10px;
    right: 10px;
    bottom: -1px;

    height: 2px;

    background: #38b9ff;
    border-radius: 2px 2px 0 0;
}
/* ========================================
   VENTUS CHALLENGES
======================================== */

.ventus-challenges {
    width: 100%;
    margin-top: 38px;
    padding-bottom: 55px;
}

.challenges-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 16px;
}

.challenges-heading h2 {
    margin-top: 5px;
    color: #ffffff;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.4px;
}

.challenges-view-all {
    padding: 0 2px 3px;

    border: none;
    background: transparent;

    color: #a9b6c8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;

    cursor: pointer;
    transition: 0.2s ease;
}

.challenges-view-all:hover {
    color: #42b8ff;
}


/* GRID */

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


/* CARD */

.challenge-card {
    overflow: hidden;

    min-width: 0;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;

    background: #0b0f14;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}

.challenge-card:hover {
    transform: translateY(-3px);

    border-color:
        rgba(62, 183, 255, 0.35);

    background: #0d1218;
}


/* ==============================
   MONTHLY ARENA GRIND IMAGE AREA
============================== */

.challenge-visual {
    position: relative;
    overflow: hidden;

    height: 160px;
    padding: 18px;

    background-image:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.12),
            rgba(0, 0, 0, 0.02)
        ),
        url("../assets/ranks/monthly background.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* subtle diagonal background */

.challenge-visual::before {
    content: "";

    position: absolute;
    inset: -80px;

    background:
        repeating-linear-gradient(
            125deg,
            transparent 0,
            transparent 38px,
            rgba(255, 255, 255, 0.025) 39px,
            rgba(255, 255, 255, 0.025) 72px
        );

    transform: rotate(-5deg);

    pointer-events: none;
}


/* ACTIVE */

.challenge-live {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 5px 8px;

    border-radius: 999px;

    background: rgba(3, 8, 12, 0.72);

    color: #dce8f5;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.challenge-live span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #4df0a4;

    box-shadow:
        0 0 8px rgba(77, 240, 164, 0.65);
}


/* MONTH */

.challenge-month {
    position: absolute;
    z-index: 2;

    top: 19px;
    right: 18px;

    color: rgba(255, 255, 255, 0.45);

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.3px;
}


/* TITLE */

.challenge-visual-content {
    position: absolute;
    z-index: 2;

    left: 18px;
    bottom: 17px;
}

.challenge-visual-content > span {
    display: block;

    margin-bottom: 2px;

    color: #40baff;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.challenge-visual-content strong {
    display: block;

    color: white;

    font-size: 27px;
    font-weight: 900;
    line-height: 0.88;
    letter-spacing: -1px;
}


/* TROPHY */

.challenge-trophy {
    position: absolute;
    z-index: 1;

    right: 25px;
    bottom: 16px;

    width: 62px;
    height: 62px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(69, 187, 255, 0.2);
    border-radius: 50%;

    background: rgba(55, 178, 255, 0.08);

    color: #43bbff;
}

.challenge-trophy svg {
    width: 30px;
    height: 30px;

    stroke-width: 1.5;
}


/* ==============================
   INFORMATION
============================== */

.challenge-info {
    padding: 16px 17px 15px;
}

.challenge-type {
    display: block;

    margin-bottom: 5px;

    color: #42b8ff;

    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.3px;
}

.challenge-info h3 {
    margin: 0 0 6px;

    color: #ffffff;

    font-size: 15px;
    font-weight: 800;
}

.challenge-info > p {
    min-height: 28px;

    color: #718095;

    font-size: 10px;
    line-height: 1.4;
}


/* PLAYER STATS */

.challenge-player-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;

    margin-top: 13px;

    border-top:
        1px solid rgba(255, 255, 255, 0.065);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.065);
}

.challenge-player-stats > div {
    padding: 10px 0;
}

.challenge-player-stats > div + div {
    padding-left: 14px;

    border-left:
        1px solid rgba(255, 255, 255, 0.065);
}

.challenge-player-stats span {
    display: block;

    margin-bottom: 4px;

    color: #596779;

    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1px;
}

.challenge-player-stats strong {
    color: #ffffff;

    font-size: 13px;
}


/* FOOTER */

.challenge-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    margin-top: 12px;

    color: #8190a4;

    font-size: 9px;
}

.challenge-footer strong {
    flex-shrink: 0;

    color: #42b8ff;

    font-size: 9px;
    letter-spacing: 0.5px;
}


/* ==============================
   COMING SOON
============================== */

.challenge-coming-soon {
    opacity: 0.62;
}

.challenge-coming-soon:hover {
    opacity: 0.85;
}

.challenge-placeholder {
    position: relative;

    height: 142px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding: 18px;

    background:
        radial-gradient(
            circle at 75% 30%,
            rgba(255, 255, 255, 0.055),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #11161d,
            #090c11
        );
}

.challenge-placeholder > span {
    margin-bottom: 3px;

    color: #667487;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.challenge-placeholder > strong {
    color: #8c98a8;

    font-size: 24px;
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.7px;
}

.challenge-lock {
    position: absolute;

    top: 18px;
    right: 18px;

    width: 35px;
    height: 35px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(255, 255, 255, 0.07);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.025);

    color: #647184;
}

.challenge-lock svg {
    width: 15px;
}


/* RESPONSIVE */

@media (max-width: 950px) {

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

    .challenge-card {
        max-width: none;
    }
}
.sidebar-logo-icon img {
    width: 46px;
    height: 46px;
    display: block;
    object-fit: contain;
    border-radius: 11px;
}
.sidebar-logo-icon img {
    width: 46px;
    height: 46px;
    display: block;
    object-fit: contain;
    border-radius: 11px;
}
/* MONTHLY ARENA GRIND CLEANUP */

.challenge-premium {
    display: block;
    margin-bottom: 5px;

    color: #b7ff20 !important;
    font-size: 11px !important;
    font-weight: 900;
    letter-spacing: 0.7px !important;
}

.challenge-monthly {
    display: block;
    margin-bottom: 2px;

    color: #42b8ff !important;
    font-size: 9px !important;
    font-weight: 900;
    letter-spacing: 1.5px !important;
}

.challenge-expiry {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 14px;
    padding-top: 12px;

    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.challenge-expiry span {
    color: #748296;
    font-size: 10px;
}

.challenge-expiry strong {
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
}
/* =========================================================
   VENTUS - MONTHLY ARENA GRIND PAGE
========================================================= */

.challenge-page {
    background: #06090d;
    color: #ffffff;
}


/* =========================
   MAIN
========================= */

.challenge-main {
    width: auto;
    min-height: 100vh;

    margin-left: var(--sidebar-closed);
    margin-right: var(--social-width, 285px);

    padding: 28px 34px 70px;
}


/* =========================
   BACK BUTTON
========================= */

.challenge-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 18px;

    color: #78879a;
    font-size: 11px;
    font-weight: 700;

    text-decoration: none;

    transition: 0.2s ease;
}

.challenge-back svg {
    width: 15px;
    height: 15px;
}

.challenge-back:hover {
    color: #ffffff;
}


/* =========================================================
   HERO
========================================================= */

.challenge-hero {
    position: relative;
    overflow: hidden;

    min-height: 330px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;

    background: #e9e9e9;
}


/* SAME IMAGE AS PLAY CARD */

.challenge-hero-bg {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            90deg,
            rgba(238, 238, 238, 0.98) 0%,
            rgba(238, 238, 238, 0.93) 40%,
            rgba(238, 238, 238, 0.32) 72%,
            rgba(238, 238, 238, 0.08) 100%
        ),
        url("../assets/ranks/monthly background.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


.challenge-hero-content {
    position: relative;
    z-index: 2;

    width: min(570px, 70%);

    padding: 38px 42px;
}


/* ACTIVE + PREMIUM */

.challenge-hero-top {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 30px;
}


.challenge-active,
.challenge-premium-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    min-height: 25px;

    padding: 0 9px;

    border-radius: 4px;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.7px;
}


.challenge-active {
    color: #182129;

    background: rgba(255, 255, 255, 0.65);

    border: 1px solid rgba(0, 0, 0, 0.11);
}


.challenge-active > span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #18b56b;

    box-shadow: 0 0 7px rgba(24, 181, 107, 0.35);
}


.challenge-premium-badge {
    color: #182000;

    background: #b7ff20;
}


/* HERO TEXT */

.challenge-hero-label {
    display: block;

    margin-bottom: 6px;

    color: #238cc8;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 1.8px;
}


.challenge-hero h1 {
    margin: 0;

    color: #07090c;

    font-size: clamp(40px, 4.4vw, 63px);
    font-weight: 950;

    line-height: 0.88;

    letter-spacing: -3px;
}


.challenge-hero p {
    max-width: 440px;

    margin-top: 17px;

    color: #525b64;

    font-size: 11px;
    line-height: 1.6;
}


/* COUNTDOWN */

.challenge-hero-timer {
    display: flex;
    align-items: center;
    gap: 15px;

    width: fit-content;

    margin-top: 23px;
    padding: 10px 13px;

    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 5px;

    background: rgba(255, 255, 255, 0.52);
}


.challenge-hero-timer span {
    color: #69727a;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 1.2px;
}


.challenge-hero-timer strong {
    color: #090b0e;

    font-size: 12px;
    font-weight: 900;

    letter-spacing: 0.5px;

    font-variant-numeric: tabular-nums;
}


/* =========================================================
   GENERAL SECTIONS
========================================================= */

.challenge-section {
    margin-top: 38px;
}


.challenge-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 14px;
}


.challenge-section-heading > div > span,
.challenge-panel-heading div > span {
    display: block;

    margin-bottom: 4px;

    color: #42b8ff;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 1.5px;
}


.challenge-section-heading h2,
.challenge-panel-heading h2 {
    margin: 0;

    color: #ffffff;

    font-size: 20px;
    font-weight: 800;

    letter-spacing: -0.4px;
}


/* =========================================================
   YOUR COMPETITION
========================================================= */

.challenge-player-overview {
    display: grid;

    grid-template-columns:
        minmax(230px, 1.4fr)
        repeat(3, minmax(130px, 1fr));

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 8px;

    background: #0b0f14;
}


.challenge-overview-main,
.challenge-overview-stat {
    min-height: 104px;

    padding: 20px 22px;
}


.challenge-overview-stat {
    display: flex;
    flex-direction: column;
    justify-content: center;

    border-left: 1px solid rgba(255, 255, 255, 0.065);
}


.challenge-overview-main > span,
.challenge-overview-stat > span {
    display: block;

    margin-bottom: 9px;

    color: #5f6c7d;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 1.2px;
}


.challenge-overview-main > div {
    display: flex;
    align-items: center;

    gap: 11px;
}


.challenge-arena-icon {
    width: 43px;
    height: 43px;

    object-fit: contain;
}


.challenge-overview-main strong {
    color: #ffffff;

    font-size: 18px;
    font-weight: 800;
}


.challenge-overview-stat strong {
    color: #ffffff;

    font-size: 19px;
    font-weight: 800;

    font-variant-numeric: tabular-nums;
}


/* =========================================================
   ARENA LOCK
========================================================= */

.challenge-arena-lock {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    color: #69778a;

    font-size: 9px;
    font-weight: 700;
}


.challenge-arena-lock svg {
    width: 12px;
    height: 12px;
}


/* =========================================================
   ARENA TABS
========================================================= */

.challenge-arena-tabs {
    display: flex;

    gap: 5px;

    margin-bottom: 10px;
}


.arena-tab {
    padding: 9px 15px;

    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 5px;

    background: #0b0f14;

    color: #718095;

    font-family: inherit;

    font-size: 9px;
    font-weight: 800;

    cursor: pointer;

    transition: 0.2s ease;
}


.arena-tab:hover {
    color: #ffffff;

    border-color: rgba(66, 184, 255, 0.25);
}


.arena-tab.active {
    color: #ffffff;

    border-color: rgba(66, 184, 255, 0.35);

    background: rgba(66, 184, 255, 0.11);
}


/* =========================================================
   LEADERBOARD
========================================================= */

.challenge-leaderboard {
    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 8px;

    background: #0a0e13;
}


.challenge-leaderboard-header,
.challenge-leaderboard-row {
    display: grid;

    grid-template-columns:
    55px
    minmax(220px, 1fr)
    100px
    100px
    100px
    150px;

    align-items: center;
}


.challenge-leaderboard-header {
    min-height: 39px;

    padding: 0 18px;

    background: #080b0f;

    color: #566476;

    font-size: 7px;
    font-weight: 900;

    letter-spacing: 1.2px;
}


.challenge-leaderboard-header span:last-child {
    text-align: right;
}


.challenge-leaderboard-row {
    min-height: 66px;

    padding: 0 18px;

    border-top: 1px solid rgba(255, 255, 255, 0.055);

    color: #9aa6b5;

    font-size: 10px;

    transition:
        background 0.15s ease,
        border-color 0.15s ease;
}


.challenge-leaderboard-row:hover {
    background: rgba(255, 255, 255, 0.018);
}


.challenge-leaderboard-row.podium {
    background:
        linear-gradient(
            90deg,
            rgba(66, 184, 255, 0.035),
            transparent 45%
        );
}


.challenge-position {
    color: #687689;

    font-size: 12px;
    font-weight: 900;
}


.challenge-position.first {
    color: #ffd85a;
}


.challenge-position.second {
    color: #cbd3dc;
}


.challenge-position.third {
    color: #c98955;
}


/* PLAYER */

.challenge-player {
    display: flex;
    align-items: center;

    gap: 10px;

    min-width: 0;
}


.challenge-avatar {
    width: 34px;
    height: 34px;

    flex-shrink: 0;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 50%;

    background:
        radial-gradient(
            circle at 50% 35%,
            #344252,
            #131a22
        );
}


.challenge-player > div:last-child {
    min-width: 0;
}


.challenge-player strong {
    display: block;

    overflow: hidden;

    color: #ffffff;

    font-size: 11px;
    font-weight: 800;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.challenge-player span {
    display: block;

    margin-top: 2px;

    color: #536173;

    font-size: 8px;
}


.challenge-gp {
    color: #ffffff;

    font-size: 11px;
    font-weight: 900;

    text-align: right;

    font-variant-numeric: tabular-nums;
}


/* =========================================================
   PRIZES + RULES
========================================================= */

.challenge-bottom-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;

    margin-top: 38px;
}


.challenge-info-panel {
    padding: 22px;

    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 8px;

    background: #0b0f14;
}


.challenge-panel-heading {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 19px;
}


.challenge-panel-heading > svg {
    width: 21px;
    height: 21px;

    color: #42b8ff;

    stroke-width: 1.7;
}


/* PRIZES */

.challenge-prize {
    display: flex;
    align-items: center;

    gap: 13px;

    min-height: 58px;

    border-top: 1px solid rgba(255, 255, 255, 0.055);
}


.prize-position {
    width: 29px;
    height: 29px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.025);

    color: #ffffff;

    font-size: 10px;
    font-weight: 900;
}


.challenge-prize strong {
    display: block;

    margin-bottom: 3px;

    color: #ffffff;

    font-size: 10px;
}


.challenge-prize div > span {
    color: #687689;

    font-size: 9px;
}


/* RULES */

.challenge-rule {
    display: grid;

    grid-template-columns: 105px 1fr;

    align-items: center;

    gap: 14px;

    min-height: 58px;

    border-top: 1px solid rgba(255, 255, 255, 0.055);
}


.challenge-rule strong {
    color: #42b8ff;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 0.5px;
}


.challenge-rule span {
    color: #7c899a;

    font-size: 9px;
    line-height: 1.5;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1200px) {

    .challenge-player-overview {
        grid-template-columns:
            minmax(200px, 1.3fr)
            repeat(3, 1fr);
    }

    .challenge-leaderboard {
        overflow-x: auto;
    }

    .challenge-leaderboard-header,
    .challenge-leaderboard-row {
        min-width: 760px;
    }

}


@media (max-width: 900px) {

    .challenge-main {
        margin-right: 0;

        padding-left: 22px;
        padding-right: 22px;
    }

    .challenge-player-overview {
        grid-template-columns: 1fr 1fr;
    }

    .challenge-overview-stat {
        border-left: 1px solid rgba(255, 255, 255, 0.065);
        border-top: 1px solid rgba(255, 255, 255, 0.065);
    }

    .challenge-bottom-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 650px) {

    .challenge-main {
        padding-left: 16px;
        padding-right: 16px;
    }

    .challenge-hero {
        min-height: 390px;
    }

    .challenge-hero-content {
        width: 100%;

        padding: 30px 25px;
    }

    .challenge-hero-bg {
        opacity: 0.6;
    }

    .challenge-player-overview {
        grid-template-columns: 1fr;
    }

    .challenge-overview-stat {
        border-left: 0;
    }

    .challenge-arena-tabs {
        overflow-x: auto;

        padding-bottom: 4px;
    }

    .arena-tab {
        flex-shrink: 0;
    }

}
.challenge-premium-badge {
    color: #ffffff;
    background: rgba(18, 147, 224, 0.14);
    border: 1px solid rgba(66, 184, 255, 0.35);
}

.challenge-premium-badge svg {
    width: 11px;
    height: 11px;
    color: #42b8ff;
    stroke-width: 2.2;
}
/* ========================================
   CHALLENGE - NOT JOINED
======================================== */

.challenge-join-card {
    min-height: 110px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    padding: 22px 25px;

    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 8px;

    background: #0b0f14;
}

.challenge-join-info {
    max-width: 600px;
}

.challenge-join-label {
    display: block;

    margin-bottom: 5px;

    color: #42b8ff;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 1.4px;
}

.challenge-join-info h3 {
    margin: 0 0 6px;

    color: #ffffff;

    font-size: 17px;
    font-weight: 800;
}

.challenge-join-info p {
    margin: 0;

    color: #718095;

    font-size: 10px;
    line-height: 1.5;
}

.challenge-join-button {
    flex-shrink: 0;

    min-width: 155px;
    height: 42px;

    padding: 0 20px;

    border: 1px solid #42b8ff;
    border-radius: 5px;

    background: #42b8ff;

    color: #061018;

    font-family: inherit;
    font-size: 10px;
    font-weight: 900;

    letter-spacing: 0.7px;

    cursor: pointer;

    transition: 0.2s ease;
}

.challenge-join-button:hover {
    background: #69c7ff;
    border-color: #69c7ff;
}
.challenge-leaderboard-message {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    padding: 25px;
    color: #687689;
    font-size: 10px;
    font-weight: 700;
}
/* ========================================
   PLAY PAGE - CLEANER LAYOUT
======================================== */


/* Player bar utan Global Rank */
.player-rank-bar {
    grid-template-columns:
        minmax(250px, 1fr)
        150px
        minmax(360px, 2.4fr);
}


/* Matchmaking behöver inte längre plats för headern */
.matchmaking-board {
    padding-top: 26px;
}

.party-stage {
    margin-top: 0;
}
/* =========================================================
   PROFILE AVATAR
   ========================================================= */

.profile-avatar-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

#profile-avatar {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.change-avatar-button {
    padding: 7px 11px;

    border: 1px solid rgba(56, 185, 255, .22);
    border-radius: 5px;

    background: rgba(56, 185, 255, .07);

    color: #49c1ff;

    font-family: inherit;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .8px;

    cursor: pointer;

    transition:
        background .18s ease,
        border-color .18s ease;
}

.change-avatar-button:hover {
    background: rgba(56, 185, 255, .13);
    border-color: rgba(56, 185, 255, .4);
}
.party-player-avatar .avatar {
    border: none;
    box-shadow: none;
}
/* =========================
   MATCHMAKING TYPES
========================= */

.match-type-selector {
    width: min(1000px, calc(100% - 80px));
    margin: 8px auto 24px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.match-type-card {
    position: relative;

    min-height: 150px;
    padding: 18px;

    border: 1px solid #202936;
    border-radius: 12px;

    background: #0d1218;
    color: #fff;

    text-align: left;
    cursor: pointer;

    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
}

.match-type-card:hover {
    border-color: #34465a;
    background: #101821;
    transform: translateY(-2px);
}

.match-type-card.active {
    border-color: #38bdf8;

    background:
        linear-gradient(
            180deg,
            rgba(56, 189, 248, 0.09),
            rgba(56, 189, 248, 0.025)
        ),
        #0d1218;
}

.match-type-top {
    position: relative;

    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 18px;
}

.match-type-icon {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 8px;
    background: #151d27;
    color: #38bdf8;
}

.match-type-icon svg {
    width: 19px;
    height: 19px;
}

.match-type-top > div:nth-child(2) {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.match-type-top strong {
    font-size: 13px;
    letter-spacing: 0.04em;
}

.match-type-top span {
    font-size: 10px;
    color: #69778a;
}

.match-type-features {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.match-type-features span {
    display: flex;
    align-items: center;
    gap: 8px;

    font-size: 11px;
    color: #9ba8b8;
}

.match-type-features svg {
    width: 14px;
    height: 14px;

    color: #64748b;
}

.match-type-card.active .match-type-features svg {
    color: #38bdf8;
}


/* PREMIUM */

.match-type-card.premium .match-type-icon {
    color: #5ac8ff;
    background: rgba(56, 189, 248, 0.09);
}

.match-type-premium {
    position: absolute;
    top: 0;
    right: 0;

    padding: 4px 7px;

    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 5px;

    background: rgba(56, 189, 248, 0.08);

    color: #38bdf8 !important;

    font-size: 8px !important;
    font-weight: 800;
    letter-spacing: 0.08em;
}


/* RESPONSIVE */

@media (max-width: 900px) {
    .match-type-selector {
        grid-template-columns: 1fr;
    }
}
/* =========================
   PLAY 2V2 PARTY LAYOUT
========================= */

#party-stage-slots.two-versus-two {
    justify-content: center;
    gap: 24px;
}

#party-stage-slots.two-versus-two .party-slot {
    flex: 0 1 190px;
    width: 190px;
    max-width: 190px;
}

#party-stage-slots.two-versus-two .party-slot.empty {
    border-style: dashed;
}