:root {
  --background: #030512;
  --background-soft: #090d21;
  --surface: rgba(12, 18, 43, 0.82);
  --surface-strong: rgba(17, 24, 55, 0.95);
  --surface-light: rgba(255, 255, 255, 0.065);

  --primary: #7657ff;
  --primary-light: #9b87ff;
  --blue: #3b82f6;
  --cyan: #22d3ee;
  --purple: #9c5cff;
  --pink: #d46dff;

  --green: #25d777;
  --red: #ff6078;
  --gold: #f9c642;

  --text: #f4f7ff;
  --text-soft: #aab6dc;
  --text-muted: #7783aa;

  --border: rgba(132, 106, 255, 0.17);
  --border-strong: rgba(132, 106, 255, 0.32);

  --shadow:
    0 24px 60px rgba(0, 0, 0, 0.28);

  --sidebar-width: 260px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;

  background:
    linear-gradient(
      180deg,
      #030512,
      #070a1a 60%,
      #040615
    );

  color: var(--text);

  font-family:
    Inter,
    Arial,
    Helvetica,
    sans-serif;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline:
    3px solid rgba(59, 130, 246, 0.45);

  outline-offset: 3px;
}

.galaxy-background {
  position: fixed;
  inset: 0;
  z-index: -10;
  overflow: hidden;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 10% 20%,
      rgba(37, 99, 235, 0.2),
      transparent 24%
    ),
    radial-gradient(
      circle at 75% 18%,
      rgba(139, 92, 246, 0.23),
      transparent 26%
    ),
    radial-gradient(
      circle at 55% 80%,
      rgba(34, 211, 238, 0.09),
      transparent 25%
    ),
    linear-gradient(
      180deg,
      #02040d,
      #060a1b
    );
}

.nebula {
  position: absolute;

  border-radius: 50%;

  filter: blur(85px);

  opacity: 0.35;

  animation:
    nebulaFloat 18s ease-in-out infinite alternate;
}

.nebula-one {
  top: -140px;
  left: 20%;

  width: 520px;
  height: 320px;

  background: #264dff;
}

.nebula-two {
  top: 30%;
  right: -180px;

  width: 580px;
  height: 440px;

  background: #753bff;

  animation-delay: -5s;
}

.nebula-three {
  bottom: -230px;
  left: 20%;

  width: 650px;
  height: 450px;

  background: #1464e7;

  animation-delay: -8s;
}

@keyframes nebulaFloat {
  from {
    transform:
      translate3d(-20px, -10px, 0)
      scale(0.96);
  }

  to {
    transform:
      translate3d(40px, 25px, 0)
      scale(1.08);
  }
}

.stars-layer {
  position: absolute;
  inset: 0;
}

.dynamic-star {
  position: absolute;

  width: 2px;
  height: 2px;

  border-radius: 50%;

  background: white;

  opacity: 0.6;

  box-shadow:
    0 0 6px currentColor;

  animation:
    starTwinkle var(--duration) ease-in-out infinite alternate;
}

@keyframes starTwinkle {
  from {
    opacity: 0.15;
    transform: scale(0.7);
  }

  to {
    opacity: 1;
    transform: scale(1.45);
  }
}

.sidebar {
  position: fixed;
  inset:
    0 auto 0 0;

  z-index: 40;

  width: var(--sidebar-width);
  height: 100vh;
  padding: 24px 18px;

  display: flex;
  flex-direction: column;

  border-right:
    1px solid var(--border);

  background:
    linear-gradient(
      180deg,
      rgba(5, 9, 25, 0.97),
      rgba(9, 13, 34, 0.95)
    );

  backdrop-filter:
    blur(20px);

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

.logo {
  padding: 0 8px 24px;

  display: flex;
  align-items: center;
  gap: 13px;
}

.logo-symbol {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  border-radius: 16px;

  background:
    linear-gradient(
      135deg,
      #2169ed,
      #7657ff 55%,
      #c163ff
    );

  box-shadow:
    0 10px 30px rgba(102, 74, 255, 0.38);

  color: white;

  font-size: 25px;
  font-weight: 900;
}

.logo strong {
  display: block;

  font-size: 26px;
  line-height: 1;
}

.logo small {
  display: block;

  margin-top: 5px;

  color: var(--text-muted);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.main-navigation {
  display: grid;
  gap: 7px;
}

.navigation-button {
  width: 100%;
  padding: 14px 15px;

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

  border:
    1px solid transparent;

  border-radius: 14px;

  background: transparent;

  color: var(--text-soft);

  font-weight: 800;

  text-align: left;

  transition:
    0.2s ease;
}

.navigation-button span {
  width: 26px;

  font-size: 19px;

  text-align: center;
}

.navigation-button:hover,
.navigation-button.active {
  border-color: var(--border);

  background:
    linear-gradient(
      135deg,
      rgba(37, 99, 235, 0.15),
      rgba(118, 87, 255, 0.2)
    );

  color: white;

  transform:
    translateX(2px);
}

.audio-panel {
  margin-top: 20px;
  padding: 15px;

  border:
    1px solid var(--border);

  border-radius: 18px;

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

.audio-panel-header {
  margin-bottom: 13px;

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

  color: white;

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

.audio-panel label {
  margin-top: 10px;

  display: grid;
  grid-template-columns:
    58px 1fr;
  align-items: center;
  gap: 9px;

  color: var(--text-muted);

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

.audio-panel input {
  width: 100%;

  accent-color:
    var(--primary);
}

.icon-button {
  width: 34px;
  height: 34px;

  border:
    1px solid var(--border);

  border-radius: 10px;

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

  color: white;
}

.premium-card {
  margin-top: auto;
  padding: 18px;

  border:
    1px solid rgba(155, 135, 255, 0.25);

  border-radius: 22px;

  background:
    radial-gradient(
      circle at top right,
      rgba(94, 215, 255, 0.13),
      transparent 32%
    ),
    linear-gradient(
      150deg,
      #172049,
      #10152f
    );

  box-shadow:
    var(--shadow);
}

.premium-label {
  color: #b8aaff;

  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.5px;
}

.premium-card h3 {
  margin:
    7px 0;

  font-size: 19px;
}

.premium-card p {
  margin:
    0 0 14px;

  color: var(--text-soft);

  font-size: 12px;
  line-height: 1.55;
}

.premium-card button {
  width: 100%;
  padding: 12px;

  border: 0;
  border-radius: 13px;

  background:
    linear-gradient(
      135deg,
      white,
      #dbe6ff
    );

  color: #121731;

  font-weight: 900;
}

.main-content {
  min-height: 100vh;
  margin-left: var(--sidebar-width);
  padding-bottom: 80px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;

  min-height: 76px;
  padding:
    12px 30px;

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

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

  background:
    rgba(4, 7, 20, 0.72);

  backdrop-filter:
    blur(18px);
}

.mobile-brand {
  display: none;

  font-size: 22px;
  font-weight: 900;
}

.resource-list {
  display: flex;
  align-items: center;
  gap: 8px;
}

.resource-item {
  min-height: 45px;
  padding:
    10px 13px;

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

  border:
    1px solid var(--border);

  border-radius: 14px;

  background:
    rgba(14, 21, 48, 0.77);

  box-shadow:
    0 7px 20px rgba(0, 0, 0, 0.12);

  color: var(--text-soft);

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

.resource-item strong {
  color: white;
}

.topbar-sound-button {
  width: 45px;
  height: 45px;

  border:
    1px solid var(--border);

  border-radius: 14px;

  background:
    rgba(14, 21, 48, 0.77);

  color: white;

  font-size: 17px;
}

.page {
  display: none;

  width:
    min(1220px, 100%);

  margin: auto;
  padding:
    24px 34px 50px;
}

.page.active {
  display: block;

  animation:
    pageAppear 0.32s ease both;
}

@keyframes pageAppear {
  from {
    opacity: 0;
    transform:
      translateY(7px);
  }

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

.hero-card {
  min-height: 285px;
  padding:
    43px 48px;

  display: grid;
  grid-template-columns:
    1.45fr 0.55fr;
  align-items: center;

  border:
    1px solid rgba(161, 137, 255, 0.22);

  border-radius: 32px;

  overflow: hidden;

  position: relative;

  background:
    radial-gradient(
      circle at 82% 17%,
      rgba(255, 255, 255, 0.15),
      transparent 16%
    ),
    radial-gradient(
      circle at 22% 90%,
      rgba(34, 211, 238, 0.13),
      transparent 24%
    ),
    linear-gradient(
      135deg,
      #111d50,
      #304cb0 35%,
      #6838d8 68%,
      #25104b
    );

  box-shadow:
    0 28px 65px rgba(34, 28, 103, 0.4);
}

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

  position: absolute;
  inset: 0;

  opacity: 0.55;

  pointer-events: none;

  background-image:
    radial-gradient(
      circle at 13% 20%,
      white 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 29% 68%,
      white 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 61% 28%,
      #6be6ff 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 73% 72%,
      white 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 91% 17%,
      #d9a4ff 0 1px,
      transparent 2px
    );
}

.hero-card > * {
  position: relative;
  z-index: 2;
}

.eyebrow {
  display: inline-block;

  color: #9fc7ff;

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

.hero-content h1 {
  max-width: 700px;
  margin:
    10px 0 15px;

  font-size:
    clamp(42px, 5.4vw, 65px);

  line-height: 0.98;
}

.hero-content p {
  max-width: 660px;

  margin-bottom: 24px;

  color: #e1e8ff;

  font-size: 17px;
  line-height: 1.6;
}

.primary-button {
  min-height: 46px;
  padding:
    12px 22px;

  border: 0;
  border-radius: 14px;

  background:
    linear-gradient(
      135deg,
      #3275f6,
      #7d53ff
    );

  box-shadow:
    0 12px 28px rgba(85, 65, 222, 0.32);

  color: white;

  font-weight: 900;

  transition:
    0.2s ease;
}

.primary-button:hover:not(:disabled) {
  transform:
    translateY(-2px);

  filter:
    brightness(1.07);
}

.primary-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.hero-planet {
  position: relative;

  min-height: 220px;

  display: grid;
  place-items: center;
}

.planet-core {
  width: 135px;
  height: 135px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 35% 28%,
      #7be8ff,
      #4455dd 42%,
      #25105c 74%
    );

  box-shadow:
    inset -18px -20px 30px rgba(0, 0, 0, 0.28),
    0 0 55px rgba(98, 91, 255, 0.48);

  font-size: 68px;

  animation:
    planetFloat 4s ease-in-out infinite;
}

.planet-ring {
  position: absolute;

  width: 205px;
  height: 66px;

  border:
    10px solid rgba(202, 217, 255, 0.35);

  border-radius: 50%;

  transform:
    rotate(-17deg);

  box-shadow:
    0 0 22px rgba(92, 170, 255, 0.28);
}

.orbit-dot {
  position: absolute;

  width: 11px;
  height: 11px;

  border-radius: 50%;

  background: white;

  box-shadow:
    0 0 15px #83d9ff;
}

.orbit-dot-one {
  top: 25px;
  right: 38px;
}

.orbit-dot-two {
  bottom: 27px;
  left: 33px;

  width: 7px;
  height: 7px;

  background: #dfadff;
}

@keyframes planetFloat {
  50% {
    transform:
      translateY(-12px)
      rotate(3deg);
  }
}

.section-heading {
  margin:
    31px 0 16px;

  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}

.section-heading h2 {
  margin:
    5px 0 0;

  font-size: 29px;
}

.selected-level-badge,
.section-counter {
  padding:
    9px 14px;

  border:
    1px solid var(--border);

  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      rgba(37, 99, 235, 0.18),
      rgba(118, 87, 255, 0.25)
    );

  color: white;

  font-size: 13px;
  font-weight: 900;
}

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

.level-button {
  min-height: 55px;

  border:
    1px solid var(--border);

  border-radius: 16px;

  background:
    var(--surface);

  color: var(--text-soft);

  font-weight: 900;

  transition:
    0.2s ease;
}

.level-button:hover {
  border-color:
    var(--border-strong);

  transform:
    translateY(-2px);
}

.level-button.active {
  border-color:
    rgba(157, 130, 255, 0.55);

  background:
    linear-gradient(
      135deg,
      #2f6fe8,
      #7953f3
    );

  box-shadow:
    0 12px 26px rgba(82, 60, 211, 0.3);

  color: white;
}

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

.subject-card {
  min-height: 96px;
  padding: 17px;

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

  border:
    1px solid var(--border);

  border-radius: 21px;

  background:
    var(--surface);

  color: white;

  text-align: left;

  box-shadow:
    0 11px 28px rgba(0, 0, 0, 0.12);

  transition:
    0.22s ease;
}

.subject-card:hover {
  border-color:
    var(--border-strong);

  transform:
    translateY(-4px);

  box-shadow:
    0 18px 38px rgba(37, 52, 126, 0.2);
}

.subject-icon {
  width: 58px;
  height: 58px;

  display: grid;
  place-items: center;

  border-radius: 18px;

  font-size: 28px;
}

.subject-card strong {
  display: block;

  margin-bottom: 6px;
}

.subject-card small {
  color: var(--text-muted);
}

.subject-arrow {
  width: 35px;
  height: 35px;

  display: grid;
  place-items: center;

  border-radius: 11px;

  background:
    rgba(118, 87, 255, 0.17);

  color: #bbaeff;

  font-weight: 900;
}

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

.mission-card {
  padding: 18px;

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

  border:
    1px solid var(--border);

  border-radius: 20px;

  background:
    var(--surface);
}

.mission-icon {
  width: 50px;
  height: 50px;

  display: grid;
  place-items: center;

  border-radius: 15px;

  background:
    rgba(118, 87, 255, 0.13);

  font-size: 24px;
}

.mission-content {
  min-width: 0;
}

.mission-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  font-size: 13px;
}

.mission-title span {
  color: var(--text-muted);
}

.progress-track {
  height: 10px;
  margin-top: 10px;

  overflow: hidden;

  border-radius: 999px;

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

.progress-track span {
  display: block;

  width: 0;
  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      var(--cyan),
      var(--blue),
      var(--purple)
    );

  transition:
    width 0.35s ease;
}

.page-heading {
  margin:
    16px 0 25px;
}

.page-heading h1 {
  margin:
    8px 0;

  font-size:
    clamp(39px, 5vw, 58px);
}

.page-heading p {
  max-width: 720px;

  color: var(--text-soft);

  line-height: 1.55;
}

.league-banner {
  margin-bottom: 18px;
  padding:
    18px 22px;

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

  border:
    1px solid rgba(249, 198, 66, 0.23);

  border-radius: 22px;

  background:
    radial-gradient(
      circle at 90% 30%,
      rgba(249, 198, 66, 0.14),
      transparent 24%
    ),
    var(--surface);
}

.league-icon {
  width: 57px;
  height: 57px;

  display: grid;
  place-items: center;

  border-radius: 17px;

  background:
    rgba(249, 198, 66, 0.13);

  font-size: 29px;
}

.league-banner span {
  display: block;

  margin-bottom: 5px;

  color: var(--text-muted);

  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.4px;
}

.league-banner strong {
  font-size: 19px;
}

.league-timer {
  color: #f6dc8f;

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

.ranking-card {
  overflow: hidden;

  border:
    1px solid var(--border);

  border-radius: 24px;

  background:
    var(--surface);

  box-shadow:
    var(--shadow);
}

.ranking-row {
  padding:
    15px 21px;

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

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

.ranking-row:last-child {
  border-bottom: 0;
}

.ranking-row.current-user {
  background:
    linear-gradient(
      135deg,
      rgba(37, 99, 235, 0.15),
      rgba(118, 87, 255, 0.19)
    );
}

.ranking-position {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  border-radius: 11px;

  background:
    var(--surface-light);

  font-weight: 900;
}

.ranking-user {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ranking-avatar {
  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  border-radius: 14px;

  background:
    linear-gradient(
      135deg,
      rgba(37, 99, 235, 0.2),
      rgba(118, 87, 255, 0.26)
    );

  font-size: 25px;
}

.ranking-user small {
  display: block;

  margin-top: 4px;

  color: var(--text-muted);
}

.chests-grid {
  display: grid;
  grid-template-columns:
    repeat(4, 1fr);
  gap: 17px;
}

.chest-card {
  --rarity-color: var(--green);

  padding:
    18px 17px 20px;

  overflow: hidden;

  position: relative;

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

  border-radius: 25px;

  background:
    radial-gradient(
      circle at 50% 18%,
      color-mix(
        in srgb,
        var(--rarity-color) 17%,
        transparent
      ),
      transparent 34%
    ),
    var(--surface);

  text-align: center;

  transition:
    0.25s ease;
}

.chest-card:hover {
  border-color:
    color-mix(
      in srgb,
      var(--rarity-color) 58%,
      transparent
    );

  transform:
    translateY(-6px);

  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.25),
    0 0 28px
      color-mix(
        in srgb,
        var(--rarity-color) 24%,
        transparent
      );
}

.chest-card.commun {
  --rarity-color: #25d777;
}

.chest-card.rare {
  --rarity-color: #3b82f6;
}

.chest-card.epique {
  --rarity-color: #9c5cff;
}

.chest-card.legendaire {
  --rarity-color: #f9c642;
}

.chest-visual {
  height: 210px;

  display: grid;
  place-items: center;

  position: relative;
}

.chest-aura {
  position: absolute;

  width: 160px;
  height: 160px;

  border-radius: 50%;

  background:
    var(--rarity-color);

  filter:
    blur(45px);

  opacity: 0.3;

  animation:
    chestAuraPulse 2.7s ease-in-out infinite;
}

@keyframes chestAuraPulse {
  50% {
    opacity: 0.5;
    transform:
      scale(1.12);
  }
}

.mimic-chest {
  width: 165px;
  height: 148px;

  position: relative;
  z-index: 3;

  filter:
    drop-shadow(
      0 0 13px
      color-mix(
        in srgb,
        var(--rarity-color) 70%,
        transparent
      )
    )
    drop-shadow(
      0 18px 15px rgba(0, 0, 0, 0.4)
    );

  animation:
    chestIdle 3.2s ease-in-out infinite;
}

@keyframes chestIdle {
  50% {
    transform:
      translateY(-5px)
      rotate(1deg);
  }
}

.chest-lid {
  position: absolute;
  top: 1px;
  left: 9px;

  width: 147px;
  height: 69px;

  border:
    3px solid #362017;

  border-radius:
    33px 33px 11px 11px;

  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 28px,
      rgba(33, 14, 6, 0.18) 29px 31px
    ),
    linear-gradient(
      180deg,
      #a0693f,
      #754729 53%,
      #4d2b19
    );

  box-shadow:
    inset 0 5px 0 rgba(255, 255, 255, 0.07);

  transform:
    rotate(-7deg);

  transform-origin:
    bottom left;

  z-index: 5;
}

.chest-base {
  position: absolute;
  bottom: 0;
  left: 0;

  width: 165px;
  height: 93px;

  overflow: hidden;

  border:
    3px solid #362017;

  border-radius:
    15px 15px 22px 22px;

  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 30px,
      rgba(33, 14, 6, 0.18) 31px 33px
    ),
    linear-gradient(
      180deg,
      #8e5a36,
      #643b23 57%,
      #3f2215
    );

  box-shadow:
    inset 0 5px 0 rgba(255, 255, 255, 0.05);

  z-index: 2;
}

.chest-metal {
  position: absolute;
  top: -4px;

  width: 14px;
  height: calc(100% + 8px);

  border:
    1px solid #16100e;

  background:
    linear-gradient(
      90deg,
      #17110f,
      #5a4940 45%,
      #1a1310
    );

  z-index: 8;
}

.chest-metal.left {
  left: 19px;
}

.chest-metal.right {
  right: 19px;
}

.chest-eye {
  position: absolute;
  top: 18px;
  right: 28px;

  width: 39px;
  height: 39px;

  display: grid;
  place-items: center;

  border:
    4px solid #272018;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      #fff9d9,
      #c6b88b
    );

  box-shadow:
    0 0 14px var(--rarity-color);

  z-index: 12;
}

.chest-eye::before {
  content: "";

  width: 21px;
  height: 21px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 35% 35%,
      #fff772,
      #34d6ce 35%,
      #3277e5 62%,
      #171e55
    );

  box-shadow:
    0 0 8px #55d8ff;
}

.chest-eye::after {
  content: "";

  position: absolute;

  width: 6px;
  height: 17px;

  border-radius: 50%;

  background:
    #050507;
}

.chest-mouth {
  position: absolute;
  top: -10px;
  left: 15px;

  width: calc(100% - 30px);
  height: 35px;

  border:
    2px solid #2a170e;

  border-radius: 50%;

  background:
    #09070d;

  z-index: 6;
}

.chest-gems {
  position: absolute;
  top: 2px;
  left: 27px;

  z-index: 10;

  font-size: 19px;

  letter-spacing: -4px;

  text-shadow:
    0 0 10px var(--rarity-color);
}

.chest-teeth {
  position: absolute;
  left: 10px;

  width: calc(100% - 20px);

  color: #f2e5cd;

  font-size: 17px;
  letter-spacing: -2px;
  white-space: nowrap;

  text-shadow:
    0 2px 2px black;

  z-index: 13;
}

.chest-teeth.top {
  bottom: -13px;
}

.chest-teeth.bottom {
  top: -12px;
}

.chest-lock {
  position: absolute;
  bottom: 16px;
  left: 50%;

  width: 22px;
  height: 26px;

  transform:
    translateX(-50%);

  border:
    2px solid #17100d;

  border-radius:
    5px 5px 8px 8px;

  background:
    linear-gradient(
      #5d4b40,
      #1b1310
    );

  z-index: 12;
}

.chest-card h3 {
  margin:
    6px 0;

  color:
    var(--rarity-color);

  font-size: 23px;
}

.chest-card p {
  min-height: 44px;

  color: var(--text-soft);

  font-size: 13px;
  line-height: 1.5;
}

.chest-price-button {
  width: 100%;
  min-height: 45px;

  border:
    1px solid var(--rarity-color);

  border-radius: 14px;

  background:
    rgba(12, 18, 43, 0.8);

  color: white;

  font-weight: 900;

  transition:
    0.2s ease;
}

.chest-price-button:hover {
  background:
    var(--rarity-color);

  color:
    #090d20;

  box-shadow:
    0 0 23px var(--rarity-color);

  transform:
    translateY(-2px);
}

.probabilities-panel {
  margin-top: 22px;
  padding: 20px;

  border:
    1px solid var(--border);

  border-radius: 22px;

  background:
    var(--surface);
}

.probabilities-panel h2 {
  margin:
    0 0 14px;

  font-size: 20px;
}

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

.probability-grid div {
  padding: 14px;

  border-radius: 14px;

  background:
    var(--surface-light);
}

.probability-grid strong,
.probability-grid span {
  display: block;
}

.probability-grid span {
  margin-top: 5px;

  color: var(--text-muted);

  font-size: 12px;
}

.shop-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}

.cosmetic-count-card {
  padding:
    16px 20px;

  border:
    1px solid var(--border);

  border-radius: 19px;

  background:
    var(--surface);

  color: var(--text-muted);

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

  text-align: center;
}

.cosmetic-count-card span {
  display: block;

  color: white;

  font-size: 26px;
}

.shop-toolbar {
  margin-bottom: 18px;

  display: grid;
  grid-template-columns:
    minmax(230px, 1fr)
    210px
    190px;
  gap: 10px;
}

.search-box {
  min-height: 49px;
  padding:
    0 15px;

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

  border:
    1px solid var(--border);

  border-radius: 15px;

  background:
    var(--surface);
}

.search-box input {
  width: 100%;

  border: 0;
  outline: 0;

  background: transparent;

  color: white;
}

.search-box input::placeholder {
  color: var(--text-muted);
}

.shop-toolbar select {
  padding:
    0 14px;

  border:
    1px solid var(--border);

  border-radius: 15px;

  background:
    #101630;

  color: white;
}

.cosmetics-grid {
  display: grid;
  grid-template-columns:
    repeat(5, 1fr);
  gap: 13px;
}

.cosmetic-card {
  --cosmetic-rarity: var(--green);

  min-height: 220px;
  padding: 14px;

  display: flex;
  flex-direction: column;

  border:
    1px solid var(--border);

  border-radius: 19px;

  background:
    radial-gradient(
      circle at 50% 15%,
      color-mix(
        in srgb,
        var(--cosmetic-rarity) 13%,
        transparent
      ),
      transparent 35%
    ),
    var(--surface);

  transition:
    0.2s ease;
}

.cosmetic-card:hover {
  border-color:
    color-mix(
      in srgb,
      var(--cosmetic-rarity) 55%,
      transparent
    );

  transform:
    translateY(-4px);
}

.cosmetic-card.commun {
  --cosmetic-rarity: var(--green);
}

.cosmetic-card.rare {
  --cosmetic-rarity: var(--blue);
}

.cosmetic-card.epique {
  --cosmetic-rarity: var(--purple);
}

.cosmetic-card.legendaire {
  --cosmetic-rarity: var(--gold);
}

.cosmetic-preview {
  height: 97px;

  display: grid;
  place-items: center;

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

  border-radius: 15px;

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

  font-size: 55px;
}

.cosmetic-rarity-label {
  margin-top: 11px;

  color:
    var(--cosmetic-rarity);

  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.cosmetic-card h3 {
  min-height: 36px;

  margin:
    6px 0 9px;

  font-size: 14px;
  line-height: 1.3;
}

.cosmetic-meta {
  margin-top: auto;

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

  color: var(--text-muted);

  font-size: 10px;
}

.cosmetic-buy-button {
  margin-top: 11px;
  min-height: 38px;

  border:
    1px solid var(--cosmetic-rarity);

  border-radius: 11px;

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

  color: white;

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

.cosmetic-buy-button:hover:not(:disabled) {
  background:
    var(--cosmetic-rarity);

  color:
    #070b1b;
}

.cosmetic-buy-button:disabled {
  opacity: 0.5;
  cursor: default;
}

.pagination {
  margin-top: 20px;

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

.pagination button {
  padding:
    11px 16px;

  border:
    1px solid var(--border);

  border-radius: 13px;

  background:
    var(--surface);

  color: white;

  font-weight: 800;
}

.pagination button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.avatar-editor {
  display: grid;
  grid-template-columns:
    minmax(330px, 0.85fr)
    minmax(430px, 1.15fr);
  gap: 23px;
}

.avatar-preview-panel,
.wardrobe-panel {
  padding: 22px;

  border:
    1px solid var(--border);

  border-radius: 27px;

  background:
    var(--surface);
}

.avatar-scene {
  min-height: 480px;

  display: grid;
  place-items: center;

  position: relative;

  overflow: hidden;

  border-radius: 23px;

  background:
    radial-gradient(
      circle at 50% 25%,
      rgba(119, 199, 255, 0.22),
      transparent 26%
    ),
    radial-gradient(
      circle at 32% 80%,
      rgba(141, 92, 255, 0.25),
      transparent 27%
    ),
    linear-gradient(
      160deg,
      #10193c,
      #090e25
    );
}

.avatar-scene::before {
  content: "";

  position: absolute;
  inset: 0;

  opacity: 0.45;

  background-image:
    radial-gradient(
      circle at 15% 20%,
      white 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 78% 25%,
      white 0 1px,
      transparent 2px
    ),
    radial-gradient(
      circle at 63% 68%,
      #6be6ff 0 1px,
      transparent 2px
    );
}

.equipped-aura {
  position: absolute;

  width: 230px;
  height: 320px;

  border-radius: 50%;

  background:
    rgba(118, 87, 255, 0.2);

  filter:
    blur(33px);

  animation:
    equippedAuraPulse 2.5s ease-in-out infinite;
}

@keyframes equippedAuraPulse {
  50% {
    transform:
      scale(1.08);
    opacity: 0.75;
  }
}

.avatar-character {
  width: 240px;
  height: 365px;

  position: relative;
  z-index: 3;

  filter:
    drop-shadow(
      0 25px 20px rgba(0, 0, 0, 0.25)
    );
}

.avatar-head,
.avatar-layer,
.avatar-companion {
  position: absolute;

  display: grid;
  place-items: center;

  user-select: none;
}

.avatar-head {
  top: 35px;
  left: 70px;

  width: 100px;
  height: 105px;

  font-size: 85px;
}

.hair-layer {
  top: 11px;
  left: 65px;

  width: 110px;
  height: 78px;

  font-size: 49px;
}

.top-layer {
  top: 124px;
  left: 46px;

  width: 148px;
  height: 115px;

  font-size: 104px;
}

.bottom-layer {
  top: 218px;
  left: 58px;

  width: 125px;
  height: 78px;

  font-size: 83px;
}

.shoes-layer {
  top: 285px;
  left: 64px;

  width: 115px;
  height: 53px;

  font-size: 59px;
}

.accessory-layer {
  top: 70px;
  left: 74px;

  width: 92px;
  height: 45px;

  font-size: 39px;
}

.avatar-companion {
  top: 60px;
  right: -24px;

  width: 75px;
  height: 75px;

  font-size: 52px;

  animation:
    companionFloat 2.6s ease-in-out infinite;
}

@keyframes companionFloat {
  50% {
    transform:
      translateY(-12px)
      rotate(5deg);
  }
}

.avatar-name-card {
  margin-top: 13px;
  padding: 13px;

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

  border-radius: 15px;

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

.avatar-name-card span {
  color: var(--text-muted);

  font-size: 12px;
}

.wardrobe-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 15px;
}

.wardrobe-header h2 {
  margin:
    5px 0 0;
}

.wardrobe-header > span {
  color: var(--text-muted);

  font-size: 12px;
}

.wardrobe-categories {
  margin:
    20px 0 14px;

  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wardrobe-category-button {
  padding:
    9px 12px;

  border:
    1px solid var(--border);

  border-radius: 999px;

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

  color: var(--text-soft);

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

.wardrobe-category-button.active {
  background:
    linear-gradient(
      135deg,
      #2e70ed,
      #7657ff
    );

  color: white;
}

.owned-cosmetics-grid {
  display: grid;
  grid-template-columns:
    repeat(3, 1fr);
  gap: 10px;
}

.owned-cosmetic-button {
  min-height: 112px;
  padding: 10px;

  border:
    1px solid var(--border);

  border-radius: 14px;

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

  color: white;
}

.owned-cosmetic-button:hover,
.owned-cosmetic-button.equipped {
  border-color:
    rgba(148, 118, 255, 0.6);

  background:
    rgba(118, 87, 255, 0.15);
}

.owned-cosmetic-button span {
  display: block;

  font-size: 38px;
}

.owned-cosmetic-button strong {
  display: block;

  margin-top: 7px;

  overflow: hidden;

  font-size: 10px;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-grid {
  display: grid;
  grid-template-columns:
    repeat(4, 1fr);
  gap: 15px;
}

.profile-main-card {
  grid-column:
    1 / -1;

  padding: 25px;

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

  border:
    1px solid var(--border);

  border-radius: 25px;

  background:
    radial-gradient(
      circle at 90% 20%,
      rgba(118, 87, 255, 0.19),
      transparent 25%
    ),
    var(--surface);
}

.profile-avatar {
  width: 85px;
  height: 85px;

  display: grid;
  place-items: center;

  border-radius: 23px;

  background:
    linear-gradient(
      135deg,
      rgba(37, 99, 235, 0.25),
      rgba(118, 87, 255, 0.32)
    );

  font-size: 52px;
}

.profile-main-card span {
  color: var(--text-muted);

  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.2px;
}

.profile-main-card h2 {
  margin:
    7px 0;
}

.profile-main-card p {
  margin: 0;

  color: var(--text-soft);
}

.global-level {
  width: 90px;
  height: 90px;

  display: grid;
  place-items: center;

  border:
    1px solid rgba(118, 87, 255, 0.28);

  border-radius: 50%;

  background:
    rgba(118, 87, 255, 0.13);
}

.global-level span,
.global-level strong {
  display: block;
  text-align: center;
}

.global-level strong {
  font-size: 28px;
}

.stat-card {
  padding: 24px;

  display: grid;
  place-items: center;

  border:
    1px solid var(--border);

  border-radius: 21px;

  background:
    var(--surface);

  text-align: center;
}

.stat-card span {
  font-size: 31px;
}

.stat-card strong {
  margin:
    10px 0 4px;

  font-size: 25px;
}

.stat-card small {
  color: var(--text-muted);
}

.mobile-navigation {
  display: none;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;

  padding: 18px;

  display: grid;
  place-items: center;

  background:
    rgba(2, 4, 14, 0.82);

  backdrop-filter:
    blur(10px);
}

.hidden {
  display: none !important;
}

.lesson-modal {
  width:
    min(770px, 100%);

  min-height: 600px;
  max-height:
    calc(100vh - 36px);

  overflow: hidden;

  display: grid;
  grid-template-rows:
    auto 1fr auto;

  border:
    1px solid var(--border-strong);

  border-radius: 28px;

  background:
    linear-gradient(
      180deg,
      rgba(10, 15, 37, 0.99),
      rgba(15, 22, 48, 0.99)
    );

  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.45);
}

.lesson-header {
  padding:
    18px 22px;

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

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

.close-button {
  width: 39px;
  height: 39px;

  border:
    1px solid var(--border);

  border-radius: 12px;

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

  color: var(--text-soft);

  font-size: 18px;
}

.lesson-progress {
  height: 11px;

  overflow: hidden;

  border-radius: 999px;

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

.lesson-progress span {
  display: block;

  width: 0;
  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      var(--cyan),
      var(--blue),
      var(--purple)
    );

  transition:
    width 0.3s ease;
}

.lesson-lives {
  color: white;

  font-weight: 900;
}

.lesson-question-area {
  padding:
    40px 48px;

  overflow-y: auto;
}

.lesson-question-area h2 {
  margin:
    13px 0 25px;

  font-size:
    clamp(25px, 4vw, 34px);

  line-height: 1.25;
}

.lesson-subject-label {
  color: #9fc7ff;

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

.answers-list {
  display: grid;
  gap: 12px;
}

.answer-button {
  min-height: 59px;
  padding:
    15px 17px;

  border:
    2px solid var(--border);

  border-radius: 16px;

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

  color: white;

  text-align: left;

  font-weight: 800;
}

.answer-button:hover {
  border-color:
    var(--border-strong);
}

.answer-button.selected {
  border-color:
    var(--primary-light);

  background:
    rgba(118, 87, 255, 0.16);
}

.answer-button.correct {
  border-color:
    var(--green);

  background:
    rgba(37, 215, 119, 0.14);
}

.answer-button.wrong {
  border-color:
    var(--red);

  background:
    rgba(255, 96, 120, 0.14);
}

.lesson-footer {
  min-height: 88px;
  padding:
    17px 22px;

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

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

.lesson-feedback {
  font-weight: 800;
  line-height: 1.4;
}

.chest-opening-scene {
  --opening-color: var(--green);

  width:
    min(760px, 100%);

  min-height: 620px;

  overflow: hidden;

  position: relative;

  display: grid;
  place-items: center;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--opening-color) 35%,
      transparent
    );

  border-radius: 31px;

  background:
    radial-gradient(
      circle at center,
      color-mix(
        in srgb,
        var(--opening-color) 22%,
        transparent
      ),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      #070b1e,
      #03050e
    );

  box-shadow:
    0 0 55px
    color-mix(
      in srgb,
      var(--opening-color) 20%,
      transparent
    );
}

.chest-close-button {
  position: absolute;
  top: 17px;
  right: 17px;
  z-index: 20;
}

.opening-chest-aura {
  position: absolute;

  width: 290px;
  height: 290px;

  border-radius: 50%;

  background:
    var(--opening-color);

  filter:
    blur(75px);

  opacity: 0.32;

  animation:
    openingAuraPulse 1.8s ease-in-out infinite;
}

@keyframes openingAuraPulse {
  50% {
    transform:
      scale(1.22);

    opacity: 0.55;
  }
}

.opening-chest {
  width: 250px;
  height: 220px;

  position: relative;
  z-index: 6;

  filter:
    drop-shadow(
      0 0 25px var(--opening-color)
    )
    drop-shadow(
      0 25px 20px rgba(0, 0, 0, 0.5)
    );
}

.opening-chest.shaking {
  animation:
    chestShake 0.1s linear 12;
}

@keyframes chestShake {
  25% {
    transform:
      translateX(-5px)
      rotate(-1deg);
  }

  75% {
    transform:
      translateX(5px)
      rotate(1deg);
  }
}

.opening-chest-lid {
  position: absolute;
  top: 0;
  left: 13px;

  width: 224px;
  height: 108px;

  border:
    5px solid #302017;

  border-radius:
    48px 48px 15px 15px;

  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 42px,
      rgba(33, 14, 6, 0.2) 43px 46px
    ),
    linear-gradient(
      #a86c40,
      #744528 55%,
      #482819
    );

  transform-origin:
    bottom left;

  transition:
    transform 0.75s cubic-bezier(.2, .8, .2, 1);

  z-index: 5;
}

.opening-chest.opened .opening-chest-lid {
  transform:
    translateY(-25px)
    rotate(-32deg);
}

.opening-chest-base {
  position: absolute;
  bottom: 0;

  width: 250px;
  height: 135px;

  overflow: hidden;

  border:
    5px solid #302017;

  border-radius:
    18px 18px 30px 30px;

  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 47px,
      rgba(33, 14, 6, 0.2) 48px 51px
    ),
    linear-gradient(
      #915c36,
      #603820 58%,
      #3b2014
    );
}

.opening-eye {
  position: absolute;
  top: 28px;
  right: 45px;

  width: 58px;
  height: 58px;

  display: grid;
  place-items: center;

  border:
    6px solid #2b211a;

  border-radius: 50%;

  background:
    #efe7c8;

  box-shadow:
    0 0 18px var(--opening-color);
}

.opening-eye span {
  width: 30px;
  height: 30px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      #fff078,
      #35d6d1 38%,
      #2969df 67%,
      #14194d
    );

  position: relative;
}

.opening-eye span::after {
  content: "";

  position: absolute;
  left: 12px;
  top: 3px;

  width: 7px;
  height: 24px;

  border-radius: 50%;

  background: black;
}

.opening-teeth {
  position: absolute;
  left: 21px;

  width: calc(100% - 42px);

  color: #efe1c9;

  font-size: 25px;
  letter-spacing: -4px;

  text-align: center;
  white-space: nowrap;

  z-index: 7;
}

.top-teeth {
  bottom: -21px;
}

.bottom-teeth {
  top: -20px;
}

.opening-treasure {
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;

  color: white;

  font-size: 37px;

  text-align: center;

  text-shadow:
    0 0 18px var(--opening-color);

  opacity: 0;

  transform:
    translateY(20px);

  transition:
    0.5s ease 0.35s;
}

.opening-chest.opened .opening-treasure {
  opacity: 1;

  transform:
    translateY(0);
}

.chest-reward-container {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 32px;

  z-index: 10;

  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.reward-pill {
  padding:
    11px 15px;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--opening-color) 50%,
      transparent
    );

  border-radius: 999px;

  background:
    rgba(5, 9, 23, 0.82);

  box-shadow:
    0 0 18px
    color-mix(
      in srgb,
      var(--opening-color) 20%,
      transparent
    );

  font-weight: 900;

  opacity: 0;

  transform:
    translateY(15px)
    scale(0.8);

  animation:
    rewardAppear 0.45s ease forwards;
}

@keyframes rewardAppear {
  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }
}

.premium-modal-card {
  width:
    min(460px, 100%);

  padding: 35px;

  position: relative;

  border:
    1px solid var(--border-strong);

  border-radius: 28px;

  background:
    radial-gradient(
      circle at 80% 10%,
      rgba(34, 211, 238, 0.14),
      transparent 24%
    ),
    linear-gradient(
      155deg,
      #18204a,
      #0c112a
    );

  box-shadow:
    var(--shadow);

  text-align: center;
}

.premium-modal-card .close-button {
  position: absolute;
  top: 14px;
  right: 14px;
}

.premium-rocket {
  font-size: 75px;
}

.premium-modal-card h2 {
  margin:
    10px 0 20px;

  font-size: 31px;
}

.premium-modal-card ul {
  padding: 0;

  display: grid;
  gap: 9px;

  list-style: none;

  text-align: left;
}

.premium-modal-card li {
  padding: 12px;

  border-radius: 12px;

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

.premium-modal-card .primary-button {
  width: 100%;

  margin-top: 13px;
}

.premium-modal-card small {
  display: block;

  margin-top: 13px;

  color: var(--text-muted);
}

.toast-container {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 200;

  display: grid;
  gap: 9px;
}

.toast {
  min-width: 260px;
  max-width: 380px;
  padding:
    13px 15px;

  border:
    1px solid var(--border);

  border-radius: 14px;

  background:
    rgba(11, 16, 37, 0.95);

  box-shadow:
    var(--shadow);

  color: white;

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

  animation:
    toastAppear 0.25s ease both;
}

@keyframes toastAppear {
  from {
    opacity: 0;
    transform:
      translateX(15px);
  }
}

@media (max-width: 1120px) {
  :root {
    --sidebar-width: 220px;
  }

  .levels-grid {
    grid-template-columns:
      repeat(4, 1fr);
  }

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

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

  .cosmetics-grid {
    grid-template-columns:
      repeat(4, 1fr);
  }

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

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

  .main-content {
    margin-left: 0;
    padding-bottom: 90px;
  }

  .topbar {
    padding:
      12px 16px;

    justify-content: space-between;
  }

  .mobile-brand {
    display: block;
  }

  .page {
    padding:
      18px 17px 40px;
  }

  .hero-card {
    grid-template-columns:
      1fr;

    padding:
      34px 28px;
  }

  .hero-planet {
    min-height: 190px;
  }

  .avatar-editor {
    grid-template-columns:
      1fr;
  }

  .shop-toolbar {
    grid-template-columns:
      1fr 1fr;
  }

  .search-box {
    grid-column:
      1 / -1;
  }

  .cosmetics-grid {
    grid-template-columns:
      repeat(3, 1fr);
  }

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

  .mobile-navigation {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 9px;
    z-index: 60;

    padding: 7px;

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

    border:
      1px solid var(--border);

    border-radius: 20px;

    background:
      rgba(7, 11, 28, 0.92);

    backdrop-filter:
      blur(17px);

    box-shadow:
      0 15px 40px rgba(0, 0, 0, 0.34);
  }

  .mobile-navigation button {
    padding: 7px 2px;

    border: 0;

    background: transparent;

    color: var(--text-muted);

    font-size: 19px;
  }

  .mobile-navigation button.active {
    color: white;
  }

  .mobile-navigation span {
    display: block;

    margin-top: 3px;

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

@media (max-width: 620px) {
  .resource-item {
    padding:
      9px 10px;
  }

  .resource-xp,
  .topbar-sound-button {
    display: none;
  }

  .hero-content h1 {
    font-size: 43px;
  }

  .levels-grid {
    grid-template-columns:
      repeat(3, 1fr);
  }

  .subjects-grid,
  .chests-grid,
  .probability-grid {
    grid-template-columns:
      1fr;
  }

  .shop-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .shop-toolbar {
    grid-template-columns:
      1fr;
  }

  .search-box {
    grid-column: auto;
  }

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

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

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

  .profile-main-card {
    grid-template-columns:
      1fr;

    text-align: center;
  }

  .profile-avatar,
  .global-level {
    margin: auto;
  }

  .lesson-question-area {
    padding:
      28px 21px;
  }

  .lesson-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .lesson-footer .primary-button {
    width: 100%;
  }
}

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

  .resource-item {
    font-size: 11px;
  }
}