/* Levels page specific styles — scoped and minimal to avoid overlaps with base.css */
:root {
  --steel-900: #0c0f13;
  --steel-800: #11161c;
  --steel-700: #1a2330;
  --neon-cyan: #00e5ff;
  --hazard-yellow: #ffd400;
  --accent-pink: #ff2d95;
  --text: #d7e3ff;
  --muted: #9fb3c8;
}

.levels-hero {
  color: var(--text);
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.75)), url('/assets/images/hero-industrial.webp') center/cover no-repeat fixed;
  padding: 6rem 0 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.levels-hero .lead { color: var(--muted); max-width: 60ch; }
.quick-nav ul { display: flex; flex-wrap: wrap; gap: .75rem 1rem; padding: 0; list-style: none; }
.quick-nav a { color: var(--neon-cyan); text-decoration: none; border-bottom: 1px dashed rgba(0,229,255,.4); }
.quick-nav a:hover { color: #7ff6ff; border-color: #7ff6ff; }

.section { padding: 3rem 0; background: var(--steel-900); color: var(--text); }
.section:nth-of-type(odd) { background: var(--steel-800); }
.section-header h2 { margin-bottom: .25rem; }
.section-header p { color: var(--muted); margin: 0 0 1rem 0; }

.levels-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
.level-card { grid-column: span 12; background: linear-gradient(180deg, var(--steel-800), var(--steel-700)); border: 1px solid rgba(0,229,255,.15); border-radius: .75rem; padding: 1rem; box-shadow: 0 0 0 1px rgba(0,229,255,.03) inset; }
.level-card__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.level-card__title { font-weight: 700; }
.level-card__desc { color: var(--muted); margin: .25rem 0 0; }

.badge { display: inline-block; padding: .25rem .6rem; border-radius: 999px; font-size: .8125rem; font-weight: 700; letter-spacing: .02em; border: 1px solid currentColor; }
.badge--easy { color: #7cffc4; background: rgba(124,255,196,.08); }
.badge--medium { color: var(--hazard-yellow); background: rgba(255,212,0,.08); }
.badge--hard { color: #ff6b6b; background: rgba(255,107,107,.08); }
.badge--extreme { color: var(--accent-pink); background: rgba(255,45,149,.1); }

@media (min-width: 700px) {
  .level-card { grid-column: span 6; }
}
@media (min-width: 1100px) {
  .level-card { grid-column: span 4; }
}

/* Tracker */
.tracker { display: grid; gap: 1rem; }
.progress { background: rgba(0,229,255,.1); height: .75rem; border-radius: 999px; overflow: hidden; }
.progress__bar { background: linear-gradient(90deg, var(--neon-cyan), #7ff6ff); height: 100%; transition: width .3s ease; }
.tracker__controls { display: grid; grid-template-columns: 1fr auto; gap: .5rem .75rem; align-items: end; }
.tracker__controls label { grid-column: 1 / -1; }
.tracker__list { display: grid; gap: .75rem; }
.tracker-list { columns: 1; column-gap: 2rem; list-style: none; padding: 0; margin: 0; }
.tracker-list li { break-inside: avoid; padding: .15rem 0; }
.tracker__actions { margin-top: .5rem; }

@media (min-width: 900px) {
  .tracker-list { columns: 3; }
}

/* Accordion */
.accordion details { background: linear-gradient(180deg, var(--steel-800), var(--steel-700)); border: 1px solid rgba(255,255,255,.06); border-radius: .5rem; padding: .75rem 1rem; margin-bottom: .5rem; }
.accordion summary { cursor: pointer; color: #e6f7ff; }
.accordion p { color: var(--muted); margin: .5rem 0 0; }

/* Secrets */
.secrets-list { list-style: none; padding: 0; margin: 0; }
.secrets-list li { padding: .5rem .75rem; border-left: 3px solid rgba(0,229,255,.5); background: rgba(255,255,255,.02); border-radius: .25rem; }
.secrets-list li + li { margin-top: .5rem; }

/* Unlockables */
.unlockables-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
.unlock-card { grid-column: span 12; background: linear-gradient(180deg, var(--steel-800), var(--steel-700)); border: 1px solid rgba(0,229,255,.12); border-radius: .75rem; padding: 1rem; }
.unlock-card h3 { margin: 0 0 .25rem; }
.unlock-card p { color: var(--muted); }
@media (min-width: 900px) {
  .unlock-card { grid-column: span 4; }
}

/* Community */
.community-list { list-style: none; padding: 0; margin: 0 0 1rem 0; }
.community-list li { padding: .4rem .6rem; background: rgba(255,255,255,.02); border-radius: .35rem; }

/* Maps */
.map-preview { margin: 0; border: 1px solid rgba(0,229,255,.15); border-radius: .75rem; overflow: hidden; background: #0b0f14; }
.map-preview img { display: block; width: 100%; height: auto; }
.map-preview figcaption { padding: .5rem .75rem; color: var(--muted); font-size: .9rem; }

/* Leaderboard */
.leaderboard-visual { margin: 0 0 1rem 0; }
.leaderboard-visual img { display: block; width: 100%; height: auto; border-radius: .5rem; }
.table-wrap { overflow-x: auto; border: 1px solid rgba(255,255,255,.06); border-radius: .5rem; }
.table { width: 100%; border-collapse: collapse; background: linear-gradient(180deg, var(--steel-800), var(--steel-700)); }
.table th, .table td { padding: .75rem; text-align: left; border-bottom: 1px solid rgba(255,255,255,.06); }
.table thead th { position: sticky; top: 0; background: var(--steel-700); z-index: 1; }
.table-note { color: var(--muted); margin: .5rem 0 0; }
.sort-button { background: transparent; border: none; color: var(--neon-cyan); cursor: pointer; font: inherit; text-decoration: underline dotted; }
.leaderboard-form { display: grid; gap: .75rem; grid-template-columns: repeat(12, 1fr); margin-top: 1rem; }
.leaderboard-form .form-row { grid-column: span 12; display: grid; gap: .25rem; }
.leaderboard-form input, .leaderboard-form select { background: #0b1016; color: var(--text); border: 1px solid rgba(255,255,255,.12); border-radius: .35rem; padding: .5rem .6rem; }
.leaderboard-form button { grid-column: span 12; }
@media (min-width: 800px) {
  .leaderboard-form .form-row { grid-column: span 4; }
  .leaderboard-form button { grid-column: span 12; }
}

/* Videos */
.video-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
.video-card { grid-column: span 12; background: linear-gradient(180deg, var(--steel-800), var(--steel-700)); border: 1px solid rgba(0,229,255,.12); border-radius: .75rem; padding: 1rem; }
.video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: .5rem; overflow: hidden; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (min-width: 1000px) {
  .video-card { grid-column: span 4; }
}

/* Buttons and links */
.btn--primary { background: linear-gradient(180deg, #00e5ff, #00b3cc); color: #041017; border: none; padding: .6rem 1rem; border-radius: .4rem; font-weight: 700; box-shadow: 0 0 0 1px rgba(0,229,255,.3) inset; }
.btn--primary:hover { filter: brightness(1.05); }
.btn--secondary { background: linear-gradient(180deg, #2a3340, #1b2430); color: var(--text); border: 1px solid rgba(255,255,255,.12); padding: .6rem 1rem; border-radius: .4rem; }
.btn--link { color: var(--neon-cyan); text-decoration: none; border-bottom: 1px dashed rgba(0,229,255,.4); }
.btn--link:hover { color: #7ff6ff; border-color: #7ff6ff; }

.noscript-note { margin: 1rem; padding: .75rem 1rem; border: 1px dashed rgba(255,255,255,.25); color: var(--hazard-yellow); background: rgba(255,212,0,.06); border-radius: .5rem; }