/* Achievements page — minimal, modular additions. Avoid duplicating base.css rules. */
:root {
  --achv-bg: #0f1216;
  --achv-panel: #151a22;
  --achv-line: #222a35;
  --achv-cyan: #00e5ff;
  --achv-yellow: #ffd200;
  --achv-text: #e6f0f2;
  --achv-muted: #9fb3c8;
  --achv-danger: #ff5572;
}

.achv-main { background: linear-gradient(180deg, rgba(15,18,22,0.9), rgba(15,18,22,1)); color: var(--achv-text); }
.container { max-width: 1200px; margin-inline: auto; padding-inline: 1rem; }

/* Hero */
.achv-hero { padding: 3rem 0 1rem; background: radial-gradient(1200px 400px at 50% -10%, rgba(0,229,255,0.15), transparent), radial-gradient(900px 300px at 100% 0%, rgba(255,210,0,0.08), transparent); border-bottom: 1px solid var(--achv-line); }
.achv-hero__title { font-size: clamp(2rem, 2.5vw, 3rem); letter-spacing: 0.5px; }
.achv-hero__subtitle { color: var(--achv-muted); margin-top: 0.5rem; }
.achv-hero__cta { display: flex; gap: .75rem; margin-top: 1rem; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: .5rem; padding: .65rem 1rem; border: 1px solid transparent; cursor: pointer; text-decoration: none; color: var(--achv-text); }
.btn-primary { background: linear-gradient(90deg, var(--achv-cyan), #2af6ff); color: #001016!important; font-weight: 700; }
.btn-ghost { background: transparent; border-color: var(--achv-line); color: var(--achv-text); }
.btn-small { padding: .4rem .7rem; font-size: .9rem; border-radius: .4rem; border: 1px solid var(--achv-line); background: #12161c; color: var(--achv-text); }

.achv-hero__figure { margin: 1.25rem auto 0; border: 1px solid var(--achv-line); background: #0b0f14; border-radius: .6rem; overflow: hidden; }
.achv-hero__figure img { display: block; width: 100%; height: auto; }
.achv-hero__figure figcaption { font-size: .9rem; color: var(--achv-muted); padding: .5rem .75rem; }

/* Subnav */
.achv-subnav { position: sticky; top: 0; z-index: 10; background: rgba(15,18,22,0.9); backdrop-filter: saturate(140%) blur(6px); border-bottom: 1px solid var(--achv-line); }
.achv-subnav__list { display: flex; gap: .75rem; padding: .5rem 0; overflow: auto; list-style: none; margin: 0; }
.achv-subnav a { white-space: nowrap; color: var(--achv-muted); padding: .4rem .6rem; border-radius: .4rem; border: 1px solid transparent; }
.achv-subnav a:hover { color: var(--achv-text); border-color: var(--achv-line); }

/* Sections */
.section { padding: 2.5rem 0; }
.section--alt { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0)); }
.section--highlight { background: linear-gradient(180deg, rgba(0,229,255,0.06), rgba(0,0,0,0)); }
.section__header h2 { font-size: clamp(1.5rem, 2vw, 2.25rem); }
.section__header p { color: var(--achv-muted); margin-top: .25rem; }

/* Grid and cards */
.achv-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
.achv-card, .achv-player, .achv-profile { grid-column: span 12; background: var(--achv-panel); border: 1px solid var(--achv-line); border-radius: .6rem; padding: 1rem; }
@media (min-width: 720px) {
  .achv-card, .achv-profile { grid-column: span 6; }
  .achv-player { grid-column: span 12; }
}
@media (min-width: 1024px) {
  .achv-card { grid-column: span 4; }
  .achv-profile { grid-column: span 4; }
}

.achv-badge { display: inline-block; background: #121720; color: var(--achv-text); border: 1px solid var(--achv-line); border-radius: .4rem; padding: .15rem .5rem; font-size: .85rem; }
.achv-badge--hardcore { background: #1c0f13; border-color: #3b1a22; color: #ff9cae; }
.achv-badge--hard { background: #161c12; border-color: #2e3a25; color: #b7f07a; }
.achv-badge--insane { background: #1a1421; border-color: #3a2a4d; color: #d7b6ff; }

.achv-tips { margin: .5rem 0 0; padding-left: 1.2rem; color: var(--achv-muted); }

/* Filters and list */
.achv-filters { display: grid; gap: .75rem; grid-template-columns: repeat(12, 1fr); align-items: end; margin-bottom: 1rem; }
.achv-filters__group { grid-column: span 12; display: grid; gap: .25rem; }
.achv-filters__meta { grid-column: span 12; color: var(--achv-muted); }
@media (min-width: 720px) {
  .achv-filters__group { grid-column: span 4; }
  .achv-filters__meta { grid-column: span 12; text-align: right; }
}
.achv-filters input[type="search"], .achv-filters select { background: #0d1218; color: var(--achv-text); border: 1px solid var(--achv-line); border-radius: .4rem; padding: .55rem .6rem; }

.achv-list { display: grid; gap: .75rem; padding: 0; margin: 0; list-style: none; }
.achv-list__item { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: start; background: var(--achv-panel); border: 1px solid var(--achv-line); border-radius: .6rem; padding: .75rem; }
.achv-list__main h3 { margin: 0 0 .25rem; font-size: 1.05rem; }
.achv-meta { color: var(--achv-muted); margin: 0 0 .25rem; }
.achv-desc { color: var(--achv-muted); margin: 0; }
.achv-list__actions { display: flex; align-items: center; gap: .5rem; }
.achv-list__item.is-unlocked { border-color: rgba(0,229,255,0.5); box-shadow: 0 0 0 1px rgba(0,229,255,0.25) inset; }
.achv-list__item.is-unlocked .btn-small { border-color: rgba(0,229,255,0.4); color: #001016; background: linear-gradient(90deg, var(--achv-cyan), #8cf7ff); font-weight: 700; }

/* Progress */
.achv-progress { display: grid; gap: .75rem; }
.achv-progress__bar { width: 100%; height: 14px; background: #0b0f14; border: 1px solid var(--achv-line); border-radius: 999px; overflow: hidden; }
.achv-progress__fill { height: 100%; background: linear-gradient(90deg, #006d77, var(--achv-cyan)); box-shadow: 0 0 16px rgba(0,229,255,0.35) inset; transition: width .3s ease; }
.achv-progress__meta { color: var(--achv-muted); display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.achv-progress__actions { display: flex; gap: .75rem; flex-wrap: wrap; }

/* Players, stories, competitive */
.achv-grid--players .achv-player + .achv-player { margin-top: 1rem; }
.achv-stories { display: grid; gap: 1rem; grid-template-columns: repeat(12, 1fr); }
.achv-story { grid-column: span 12; background: var(--achv-panel); border: 1px solid var(--achv-line); border-radius: .6rem; padding: 1rem; }
@media (min-width: 900px) { .achv-story { grid-column: span 4; } }

.achv-competitive { display: grid; gap: .75rem; padding: 0; margin: 0; list-style: none; }
.achv-competitive li { background: var(--achv-panel); border: 1px solid var(--achv-line); border-radius: .6rem; padding: .9rem; }

/* Rewards */
.achv-media { border: 1px solid var(--achv-line); border-radius: .6rem; overflow: hidden; background: #0b0f14; margin-bottom: .75rem; }
.achv-media img { display: block; width: 100%; height: auto; }
.achv-rewards { display: grid; gap: .75rem; padding: 0; margin: 0 0 1rem; list-style: none; }
.achv-rewards li { background: var(--achv-panel); border: 1px solid var(--achv-line); border-radius: .6rem; padding: .9rem; }
.achv-rewards__cta { display: flex; gap: .75rem; flex-wrap: wrap; }

/* Utilities */
[hidden] { display: none !important; }