/* =========================
   DASHBOARD
========================= */

.grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 20px;
}

.hero-card,
.stat-card,
.mentor-card,
.wide-card,
.mission-panel,
.terminal-panel,
.right-panel,
.debrief,
.mission-item,
.empty-box {
  background: rgba(15, 23, 42, 0.76);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(18px);
}

.hero-card {
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-card h2 {
  font-size: 42px;
}

.wide-card {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.big {
  font-size: 34px;
  color: white;
  font-weight: bold;
}

.small-big {
  font-size: 28px;
}


.app {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 290px;
  padding: 24px;
  background: rgba(2, 6, 23, 0.82);
  border-right: 1px solid rgba(148, 163, 184, 0.2);
  backdrop-filter: blur(18px);
}


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

.logo {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 35px;
}


.logo strong {
  display: block;
  color: white;
  font-size: 19px;
}

.logo small {
  color: #94a3b8;
}

.brand-icon {

    width: 56px;
    height: 56px;

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

    flex-shrink: 0;

}

.brand-icon img {

    width: 100%;
    height: 100%;

    object-fit: contain;

}

.nav {
  width: 100%;
  display: block;
  text-align: left;
  margin-bottom: 12px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  color: #cbd5e1;
  cursor: pointer;
  font-size: 15px;
  transition: 0.2s ease;
}

.nav:hover,
.nav.active {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.4);
  color: white;
}

.profile {
  margin-top: 70px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.profile p {
  margin-top: 0;
}

.profile select {
  width: 100%;
  margin: 8px 0 16px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: white;
  background: #020617;
}

.mini-stat {
  display: flex;
  justify-content: space-between;
  color: #cbd5e1;
  font-size: 13px;
  margin-bottom: 10px;
}
@keyframes levelTextGlow{

    0%{

        color:white;

        text-shadow:none;

    }

    50%{

        color:#67e8f9;

        text-shadow:
            0 0 10px #22d3ee,
            0 0 20px #22d3ee;

    }

    100%{

        color:white;

        text-shadow:none;

    }

}

.level-text-glow{

    animation:levelTextGlow 1.2s ease;

}
.xp-bar,
.progress,
.world-progress {
  height: 9px;
  background: #1e293b;
  border-radius: 999px;
  overflow: hidden;
}

.xp-bar span {
  display: block;
  width: 48%;
  height: 100%;
  background: linear-gradient(90deg, #22d3ee, #a78bfa);
  transition: 0.4s ease;
}
@keyframes xpLevelUp{

    0%{

        filter:brightness(1);

    }

    25%{

        filter:brightness(2.3);

    }

    50%{

        filter:brightness(1.8);

    }

    100%{

        filter:brightness(1);

    }

}

.xp-level-up{

    animation:xpLevelUp .9s ease;

}

.level-up-glow{

    animation:levelUpGlow 1.8s ease;

}
.main {
  flex: 1;
  padding: 30px;
  overflow-x: hidden;
}

.topbar,
.section-head,
.skillmap-header,
.world-title-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 30px;
}

.eyebrow,
.tag {
  color: #67e8f9;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 1.5px;
  font-weight: bold;
}

h1 {
  font-size: 36px;
  margin: 5px 0;
}

h2 {
  font-size: 30px;
  margin-top: 0;
}

.view {
  display: none;
  animation: fade 0.25s ease;
}

.view.active {
  display: block;
}

@keyframes fade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* achievements */

.inventory-heading{

    margin-top:40px;

    margin-bottom:18px;

    font-size:26px;

}

.achievement-list{

    display:grid;

    gap:16px;

}

.achievement-card{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 22px;

    min-height:80px;

    border-radius:20px;

    background:rgba(15,23,42,.82);

    border:1px solid rgba(148,163,184,.18);

    transition:.25s;

}

.achievement-card:hover{

    transform:translateY(-3px);

}

.achievement-left{

    display:flex;

    align-items:center;

    gap:16px;

}

.achievement-left{

    font-size:34px;

}

.achievement-card strong{

    display:block;

    font-size:20px;

    margin-bottom:4px;

}


.achievement-card p{

    margin:0;

    font-size:15px;

    color:#94a3b8;

}

.achievement-card.locked{

    opacity:.45;

}

.achievement-card.unlocked{

    border-color:rgba(34,197,94,.55);

    box-shadow:0 0 24px rgba(34,197,94,.12);

}

.achievement-card span{

    font-weight:bold;

    color:#67e8f9;

}


.topbar-actions{

    display:flex;

    align-items:center;

    gap:12px;

}

.settings-button{

    width:52px;

    height:52px;

    border-radius:14px;

    background:#11192b;

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

    color:#67e8f9;

    font-size:24px;

    cursor:pointer;

    transition:.25s;

}

.settings-button:hover{

    transform:translateY(-2px);

    box-shadow:0 0 18px rgba(103,232,249,.35);

    border-color:#22d3ee;

}.settings-grid{

    display:grid;

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

    gap:24px;

    margin-top:30px;

}

.settings-card{

    background:rgba(15,23,42,.76);

    border:1px solid rgba(148,163,184,.2);

    border-radius:24px;

    padding:32px;

    min-height:260px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

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

}

.settings-card h3{

    display:flex;

    align-items:center;

    font-size:24px;

    margin-bottom:14px;

}

.settings-card p{

    color:#94a3b8;

    line-height:1.7;

}

.settings-icon{

    font-size:28px;

    margin-right:12px;

}

.toggle{

    margin-top:24px;

}

.danger{

    border:1px solid rgba(239,68,68,.45);

    background:linear-gradient(

        180deg,

        rgba(80,20,20,.18),

        rgba(15,23,42,.95)

    );

}

.danger-button{

    display:inline-block;

    width:auto;

    padding:12px 24px;

    background:#ef4444;

    color:white;

    border:none;

    border-radius:10px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

.danger-button:hover{

    background:#dc2626;

}