.levels-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 6%, rgba(52, 168, 83, .17), transparent 28%),
    radial-gradient(circle at 10% 85%, rgba(52, 168, 83, .08), transparent 30%),
    #101210;
  color: #fff;
}

.levels-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .2;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 80%, transparent);
}

.levels-section .shell { position: relative; z-index: 1; }
.levels-section .kicker { color: #8f968e; }
.levels-section .kicker::before { color: #34a853; }
.levels-section .circle-link { border-color: #4a5049; color: #dfe3dd; }
.levels-section .circle-link:hover { border-color: #34a853; color: #34a853; }

.level-grid {
  gap: 12px;
  border: 0;
  perspective: 1200px;
}

.levels-section .level-card {
  --accent: #8b938c;
  min-height: 560px;
  padding: 22px 22px 74px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid #303530;
  border-radius: 2px;
  background: linear-gradient(155deg, #191c19 0%, #111311 62%, #0b0d0b 100%);
  color: #fff;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), border-color .35s ease, box-shadow .35s ease, background .35s ease;
}

.levels-section .level-card:first-child { border-left: 1px solid #303530; }

.levels-section .level-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -30%;
  opacity: 0;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 45%);
  transform: scale(.65);
  transition: opacity .45s ease, transform .7s cubic-bezier(.16, 1, .3, 1);
}

.levels-section .level-card::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: -120%;
  left: -55%;
  width: 45%;
  height: 300%;
  pointer-events: none;
  opacity: .3;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform: rotate(22deg);
  transition: left .85s cubic-bezier(.16, 1, .3, 1);
}

.levels-section .level-card:hover {
  color: #fff;
  background: linear-gradient(155deg, #1b201c 0%, #111511 62%, #0a0c0a 100%);
  border-color: color-mix(in srgb, var(--accent) 70%, #303530);
  box-shadow: 0 28px 60px rgba(0,0,0,.35), 0 0 30px color-mix(in srgb, var(--accent) 12%, transparent);
  transform: translateY(-12px) rotateX(1.5deg);
}

.levels-section .level-card:hover::before { opacity: 1; transform: scale(1); }
.levels-section .level-card:hover::after { left: 125%; }

.level-beginner { --accent: #aeb5af !important; }
.level-intermediate { --accent: #77bd89 !important; }
.level-advanced { --accent: #34a853 !important; }
.level-pro { --accent: #b7ffca !important; }

.level-meta {
  display: flex;
  justify-content: space-between;
  color: #697069;
  font: 600 9px var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.level-meta span:last-child { color: var(--accent); }

.level-badge {
  position: relative;
  width: 174px;
  height: 218px;
  margin: 34px auto 23px;
  color: var(--accent);
  filter: drop-shadow(0 15px 20px rgba(0,0,0,.38));
  animation: badge-float 5s ease-in-out infinite;
  transition: transform .65s cubic-bezier(.16, 1, .3, 1), filter .4s ease;
}

.level-intermediate .level-badge { animation-delay: -.8s; }
.level-advanced .level-badge { animation-delay: -1.6s; }
.level-pro .level-badge { animation-delay: -2.4s; }

.level-card:hover .level-badge {
  transform: translateY(-8px) scale(1.065);
  filter: drop-shadow(0 20px 25px color-mix(in srgb, var(--accent) 20%, rgba(0,0,0,.4)));
}

.level-badge svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.badge-shadow { fill: #050605; stroke: #252a25; stroke-width: 2; }
.badge-frame { fill: #171a17; stroke: currentColor; stroke-width: 2; }
.badge-inset { fill: #0c0e0c; stroke: color-mix(in srgb, currentColor 48%, #222); stroke-width: 1; }

.badge-symbol {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.badge-symbol circle { fill: #0c0e0c; }
.badge-beginner .badge-frame { stroke-dasharray: 5 5; }
.badge-intermediate .badge-frame { stroke-width: 3; }
.badge-advanced .badge-inset { fill: rgba(52, 168, 83, .07); }
.badge-pro .badge-frame { fill: #102016; stroke-width: 3; }
.badge-pro .badge-inset { fill: rgba(52, 168, 83, .1); }
.badge-pro .pro-star { fill: #34a853; stroke: #b7ffca; stroke-width: 1.5; }

.badge-rank {
  position: absolute;
  left: 50%;
  bottom: 17px;
  min-width: 108px;
  padding: 7px 12px 6px;
  border: 1px solid currentColor;
  background: #0b0d0b;
  color: var(--accent);
  transform: translateX(-50%);
  text-align: center;
  font: 700 8px var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  box-shadow: 0 5px 12px rgba(0,0,0,.25);
}

.levels-section .level-card h3 {
  margin: 0 0 10px;
  color: #fff;
  font-size: clamp(24px, 2vw, 31px);
}

.levels-section .level-card p {
  max-width: 260px;
  margin-bottom: 0;
  color: #8f968e;
}

.levels-section .level-card:hover p { color: #c2c8c1; }

.levels-section .level-card > a {
  right: 22px;
  bottom: 23px;
  left: 22px;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #303530;
  padding-top: 15px;
  color: #899088;
  font: 650 9px var(--font-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  transition: color .25s ease, border-color .25s ease;
}

.levels-section .level-card > a b { color: var(--accent); font-size: 15px; }
.levels-section .level-card:hover > a { color: #fff; border-color: var(--accent); }

.motion-ready .level-card:nth-child(2) { transition-delay: .07s; }
.motion-ready .level-card:nth-child(3) { transition-delay: .14s; }
.motion-ready .level-card:nth-child(4) { transition-delay: .21s; }

@keyframes badge-float {
  0%, 100% { transform: translateY(0) rotate(-.6deg); }
  50% { transform: translateY(-7px) rotate(.6deg); }
}

@media (max-width: 1000px) and (min-width: 801px) {
  .level-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 800px) {
  .levels-section .level-card {
    min-height: 460px;
    border: 1px solid #303530;
  }
  .level-badge {
    width: 145px;
    height: 181px;
    margin: 24px auto 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .level-badge { animation: none; }
  .level-card:hover .level-badge { transform: none; }
}