/* ═══════════════════════════════════════════
   gamification.css — Quiz · Widget · Badges · Leaderboard
   ═══════════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes modalIn { from { transform: scale(.92) translateY(10px); opacity: 0 } to { transform: scale(1) translateY(0); opacity: 1 } }
@keyframes scoreFloat { 0% { opacity: 1; transform: translateY(0) } 100% { opacity: 0; transform: translateY(-60px) } }
@keyframes pulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.15) } }
@keyframes slideUp { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: translateY(0) } }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-20px) } to { opacity: 1; transform: translateX(0) } }
@keyframes badge-unlock { 0% { transform: scale(0) rotate(-180deg); opacity: 0 } 50% { transform: scale(1.2) rotate(10deg); opacity: 1 } 70% { transform: scale(.9) rotate(-5deg) } 100% { transform: scale(1) rotate(0) } }
@keyframes badge-glow { 0%,100% { box-shadow: 0 0 20px rgba(253,161,0,.3) } 50% { box-shadow: 0 0 40px rgba(253,161,0,.8) } }
@keyframes confetti { 0% { transform: translateY(0) rotate(0); opacity: 1 } 100% { transform: translateY(-200px) rotate(720deg); opacity: 0 } }
@keyframes streakPop { 0% { transform: scale(.5) rotate(-5deg); opacity: 0 } 40% { transform: scale(1.2) rotate(3deg); opacity: 1 } 100% { transform: scale(1) rotate(0); opacity: 1 } }

/* ══════════════════════════════════════
   1. REGISTRATION MODAL (FPD)
   ══════════════════════════════════════ */
.quiz-reg-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  z-index: 10000;
  animation: fadeIn .25s ease;
}
.quiz-reg-modal {
  background: var(--bg-card);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  max-width: 400px; width: 92%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  animation: modalIn .35s cubic-bezier(.34,1.56,.64,1);
  border-top: 4px solid var(--an-teal);
}
.quiz-reg-modal h3 {
  color: var(--text-heading);
  font-family: var(--font-heading);
  font-size: 1.4rem;
  margin: 0 0 .25rem;
}
.quiz-reg-fields {
  display: flex; flex-direction: column; gap: .15rem;
  text-align: left; margin-top: .5rem;
}
.quiz-reg-fields label {
  display: flex; flex-direction: column; gap: .3rem;
  font-size: .88rem; font-weight: 500;
  color: var(--text); margin-bottom: .6rem;
}
.quiz-reg-modal input,
.quiz-reg-modal select {
  width: 100%; padding: .7rem .9rem;
  border: 2px solid var(--border); border-radius: var(--radius-sm);
  font-size: .95rem;
  background: var(--bg-input, var(--bg-body));
  color: var(--text); font-family: inherit;
  transition: border-color var(--transition);
  box-sizing: border-box;
}
.quiz-reg-modal input:focus,
.quiz-reg-modal select:focus {
  border-color: var(--an-teal); outline: none;
  box-shadow: 0 0 0 3px var(--an-teal-soft);
}
.quiz-reg-actions { margin-top: 1.2rem; }
.quiz-reg-actions .btn-primary {
  display: block; width: 100%; padding: .85rem;
  background: linear-gradient(135deg, var(--an-teal), var(--an-navy));
  color: #fff; border: none; border-radius: var(--radius-sm);
  font-size: 1.05rem; font-weight: 600; cursor: pointer;
  font-family: var(--font-heading);
  transition: transform .2s, box-shadow .2s;
}
.quiz-reg-actions .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(36,148,122,.4);
}
.quiz-reg-note {
  color: #ef4444; font-size: .85rem;
  margin-top: .75rem; min-height: 1.2em;
}

/* ══════════════════════════════════════
   2. QUIZ CONTAINER
   ══════════════════════════════════════ */
.quiz-container {
  border: 2px solid var(--an-teal);
  border-radius: 16px; padding: 2rem;
  margin: 2rem 0;
  background: var(--bg-card);
  position: relative; overflow: visible;
  box-shadow: var(--shadow);
}
.quiz-intro {
  text-align: center; padding: 1rem 0;
}
.quiz-intro-icon {
  font-size: 2.5rem; margin-bottom: .5rem;
}
.quiz-info {
  font-size: 1.05rem; color: var(--text-heading);
  margin-bottom: 1.25rem; line-height: 1.5;
}
.quiz-start-btn {
  display: inline-block; padding: .9rem 2.5rem;
  background: linear-gradient(135deg, var(--an-teal), var(--an-navy));
  color: #fff; border: none; border-radius: var(--radius);
  font-size: 1.1rem; font-weight: 600; cursor: pointer;
  font-family: var(--font-heading);
  transition: transform .2s, box-shadow .2s;
}
.quiz-start-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(36,148,122,.4);
}

/* Header bar */
.quiz-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1.25rem; flex-wrap: wrap; gap: .75rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--border);
}
.quiz-left { display: flex; align-items: center; gap: 1rem; flex: 1; }
.quiz-right { display: flex; align-items: center; gap: 1rem; }
.quiz-counter {
  font-family: var(--font-mono); font-size: .95rem;
  color: var(--text-muted); font-weight: 500;
}
.quiz-counter .counter-current {
  font-weight: 700; color: var(--an-teal); font-size: 1.1rem;
}
.quiz-timer {
  font-family: var(--font-mono); font-size: 1rem;
  color: var(--an-orange); white-space: nowrap;
}
.quiz-timer .timer-icon { font-size: 1.1rem; }
.quiz-score {
  font-family: var(--font-mono); font-size: 1rem;
  color: var(--an-teal); font-weight: 700; white-space: nowrap;
}
.quiz-streak {
  background: linear-gradient(135deg, var(--an-orange), #f97316);
  color: #fff; padding: .25rem .75rem;
  border-radius: 20px; font-weight: 700; font-size: .9rem;
  animation: pulse .5s ease-in-out;
  white-space: nowrap;
}
.quiz-progress {
  height: 4px; background: var(--border);
  border-radius: 2px; overflow: hidden;
  flex: 1; min-width: 60px;
}
.quiz-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--an-teal), var(--an-orange));
  transition: width .4s ease;
  border-radius: 2px;
}

/* Question area */
.quiz-body { animation: slideUp .3s ease; }
.quiz-question {
  font-size: 1.1rem; font-weight: 500;
  color: var(--text-heading);
  margin-bottom: 1rem; line-height: 1.55;
}
.quiz-question .q-number {
  display: inline-block;
  background: var(--an-teal-soft);
  color: var(--an-teal);
  font-weight: 700; font-size: .85rem;
  padding: .15rem .55rem; border-radius: 6px;
  margin-right: .4rem;
}
.quiz-options {
  display: flex; flex-direction: column; gap: .5rem;
  transition: opacity .25s ease;
}
.quiz-option {
  display: flex; align-items: center; gap: .75rem;
  width: 100%; padding: .9rem 1.25rem;
  border: 2px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card); cursor: pointer;
  transition: all .2s; font-size: .95rem;
  text-align: left; font-family: inherit;
  color: var(--text); line-height: 1.4;
}
.quiz-option .opt-letter {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; min-width: 28px;
  border-radius: 50%;
  background: var(--bg-input, #f0f2f5);
  font-weight: 700; font-size: .85rem;
  color: var(--text-muted);
  transition: all .2s;
}
.quiz-option:hover {
  border-color: var(--an-teal);
  transform: translateX(4px);
  background: var(--bg-card-hover);
}
.quiz-option:hover .opt-letter {
  background: var(--an-teal-soft);
  color: var(--an-teal);
}
.quiz-option.correct {
  border-color: #22c55e;
  background: rgba(34,197,94,.08);
}
.quiz-option.correct .opt-letter {
  background: #22c55e; color: #fff;
}
.quiz-option.incorrect {
  border-color: #ef4444;
  background: rgba(239,68,68,.08);
}
.quiz-option.incorrect .opt-letter {
  background: #ef4444; color: #fff;
}
.quiz-option.selected {
  border-color: var(--an-purple);
  background: var(--an-purple-soft);
}
.quiz-option.disabled,
.quiz-option:disabled {
  pointer-events: none; opacity: .7;
}
.quiz-explanation {
  margin-top: .75rem; padding: .75rem 1rem;
  border-left: 3px solid var(--an-teal);
  background: var(--an-teal-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text); font-size: .9rem;
  font-style: italic; animation: slideUp .3s ease;
}

/* Score popup */
.quiz-score-popup {
  position: absolute; top: 30%; left: 50%;
  transform: translateX(-50%);
  font-weight: 800; font-size: 1.4rem;
  pointer-events: none; z-index: 10;
  animation: scoreFloat 1s ease-out forwards;
  text-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.quiz-score-popup.correct { color: var(--an-teal); }
.quiz-score-popup.wrong { color: #ef4444; }

/* Streak toast */
.quiz-streak-anim {
  position: fixed; top: 15%; right: 8%;
  font-size: 1.8rem; font-weight: 800;
  font-family: var(--font-heading);
  background: linear-gradient(135deg, var(--an-purple), var(--an-orange));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  padding: .5rem 1rem; z-index: 10001;
  animation: streakPop .5s cubic-bezier(.34,1.56,.64,1);
  transition: opacity .4s ease;
  pointer-events: none;
}

/* ══════════════════════════════════════
   3. QUIZ RESULTS
   ══════════════════════════════════════ */
.quiz-results {
  text-align: center; padding: 2rem 1rem;
  animation: slideUp .4s ease;
}
.quiz-results .results-grade {
  font-family: var(--font-heading);
  font-size: 1.2rem; font-weight: 600;
  color: var(--an-teal);
  margin-bottom: .25rem;
  text-transform: uppercase; letter-spacing: .5px;
}
.quiz-results .total-score {
  font-size: 3.2rem; font-weight: 800;
  color: var(--an-teal);
  font-family: var(--font-heading);
  line-height: 1.1;
}
.quiz-results .total-score .pts-label {
  font-size: 1.2rem; font-weight: 500;
  color: var(--text-muted);
}
.quiz-results .results-summary {
  font-size: .95rem; color: var(--text-muted);
  margin: .25rem 0 1.25rem;
  font-family: var(--font-mono);
}
.quiz-results .score-breakdown {
  display: flex; justify-content: center; gap: .75rem;
  margin-bottom: 1.5rem; flex-wrap: wrap;
}
.quiz-results .breakdown-card {
  background: var(--bg-section, var(--bg-body));
  border: 1px solid var(--border);
  border-radius: var(--radius); padding: .75rem 1.25rem;
  min-width: 100px;
  animation: slideUp .4s ease backwards;
}
.quiz-results .breakdown-card:nth-child(1) { animation-delay: .1s }
.quiz-results .breakdown-card:nth-child(2) { animation-delay: .2s }
.quiz-results .breakdown-card:nth-child(3) { animation-delay: .3s }
.quiz-results .breakdown-card:nth-child(4) { animation-delay: .4s }
.quiz-results .breakdown-card .bd-value {
  font-size: 1.3rem; font-weight: 700;
  font-family: var(--font-mono);
  color: var(--an-teal);
}
.quiz-results .breakdown-card .bd-label {
  font-size: .78rem; color: var(--text-muted);
  margin-top: .15rem;
}
.quiz-results .rank-display {
  display: flex; justify-content: center; gap: .75rem;
  margin: 1rem 0 1.25rem; flex-wrap: wrap;
}
.quiz-results .rank-pill {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .45rem 1rem;
  border: 2px solid var(--an-teal);
  border-radius: 20px;
  font-size: .9rem; font-weight: 600;
  color: var(--an-teal);
  background: var(--an-teal-soft);
}
.quiz-results .quiz-actions {
  display: flex; gap: .75rem;
  justify-content: center; margin-top: 1.25rem;
  flex-wrap: wrap;
}
.quiz-results .btn-primary,
.quiz-results .btn-outline {
  padding: .7rem 1.5rem; border-radius: var(--radius-sm);
  font-weight: 600; text-decoration: none;
  cursor: pointer; font-family: inherit; font-size: .92rem;
  transition: transform .2s, box-shadow .2s;
  display: inline-flex; align-items: center; gap: .4rem;
}
.quiz-results .btn-primary {
  background: linear-gradient(135deg, var(--an-teal), var(--an-navy));
  color: #fff; border: none;
}
.quiz-results .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(36,148,122,.4);
}
.quiz-results .btn-outline {
  background: transparent; color: var(--an-teal);
  border: 2px solid var(--an-teal);
}
.quiz-results .btn-outline:hover {
  background: var(--an-teal-soft);
}
.quiz-results .offline-note {
  color: var(--text-muted); font-size: .85rem;
  margin-top: .75rem; font-style: italic;
}

/* ══════════════════════════════════════
   4. WIDGET LEADERBOARD
   ══════════════════════════════════════ */
.gamification-widget {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem;
  margin-top: 1.5rem;
  font-family: var(--font-body);
}
.widget-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: .75rem; padding-bottom: .5rem;
  border-bottom: 2px solid var(--an-teal);
}
.widget-header h4 {
  margin: 0; color: var(--text-heading);
  font-size: .9rem; font-family: var(--font-heading);
}
.widget-module {
  background: var(--an-orange); color: #fff;
  padding: .15rem .5rem; border-radius: 10px;
  font-size: .75rem; font-weight: 600;
}
.widget-player {
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem .25rem; border-radius: var(--radius-sm);
  transition: background .2s;
}
.widget-player:hover { background: var(--an-teal-soft); }
.widget-player.rank-1 { background: rgba(253,161,0,.08); border-left: 3px solid gold; }
.widget-player.rank-2 { border-left: 3px solid silver; }
.widget-player.rank-3 { border-left: 3px solid #cd7f32; }
.widget-rank {
  width: 1.5rem; text-align: center;
  font-weight: 700; font-size: .85rem;
}
.widget-avatar {
  width: 1.8rem; height: 1.8rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .75rem; color: #fff;
  background: var(--avatar-color, var(--an-teal));
}
.widget-name {
  flex: 1; font-size: .85rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.widget-score {
  font-family: var(--font-mono); font-size: .85rem;
  font-weight: 600; color: var(--an-teal);
}
.widget-me {
  margin-top: .5rem; padding: .5rem;
  border-top: 1px dashed var(--border);
  display: flex; align-items: center; gap: .5rem;
  background: var(--an-teal-soft); border-radius: var(--radius-sm);
}
.widget-link {
  display: block; text-align: center; margin-top: .75rem;
  color: var(--an-teal); font-size: .8rem;
  text-decoration: none; font-weight: 500;
}
.widget-link:hover { text-decoration: underline; }
.score-change { animation: pulse .6s ease-in-out; }

/* Mobile FAB */
.widget-fab {
  display: none; position: fixed; bottom: 1.5rem; right: 1.5rem;
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--an-teal), var(--an-navy));
  color: #fff; border: none; font-size: 1.5rem;
  box-shadow: 0 4px 15px rgba(36,148,122,.4);
  cursor: pointer; z-index: 100;
  transition: transform .2s;
}
.widget-fab:active { transform: scale(.9); }
@media (max-width: 768px) {
  .gamification-widget { display: none; }
  .widget-fab { display: flex; align-items: center; justify-content: center; }
  .gamification-widget.mobile-open {
    display: block; position: fixed;
    bottom: 5rem; right: 1rem; left: 1rem;
    z-index: 99;
    box-shadow: 0 8px 30px rgba(0,0,0,.3);
  }
}

/* ══════════════════════════════════════
   5. BADGE STYLES
   ══════════════════════════════════════ */
.badge-unlock-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 100000; animation: fadeIn .3s ease;
}
.badge-unlock-card {
  background: var(--bg-card);
  border: 3px solid var(--an-orange);
  border-radius: 20px; padding: 2rem 3rem;
  text-align: center;
  animation: badge-unlock .6s cubic-bezier(.34,1.56,.64,1);
  max-width: 360px;
}
.badge-unlock-header {
  font-family: var(--font-heading);
  font-size: 1.1rem; color: var(--an-orange);
  font-weight: 600; margin-bottom: .5rem;
}
.badge-unlock-icon { font-size: 4rem; margin: .5rem 0; }
.badge-unlock-name {
  font-size: 1.15rem; color: var(--text-heading);
  font-weight: 700;
}
.badge-unlock-desc {
  font-size: .9rem; color: var(--text-muted);
  margin-top: .25rem;
}
.badge-unlock-points, .badge-points {
  color: var(--an-teal); font-size: 1.2rem;
  font-weight: 700; margin-top: .5rem;
  font-family: var(--font-mono);
}
.confetti {
  position: absolute; width: 8px; height: 8px;
  border-radius: 50%;
}
.badge-collection {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 1rem;
}
.badge-item {
  text-align: center; padding: 1rem;
  border-radius: var(--radius); background: var(--bg-card);
  border: 1px solid var(--border); transition: transform .2s;
}
.badge-item:hover { transform: translateY(-3px); }
.badge-item-icon { font-size: 2.5rem; display: block; margin-bottom: .5rem; }
.badge-item-name {
  font-size: .8rem; font-weight: 600;
  color: var(--text-heading);
}
.badge-item.locked { opacity: .3; filter: grayscale(1); }
.badge-item.locked .badge-item-name { color: var(--text-muted); }
.badge-item-date { font-size: .7rem; color: var(--text-muted); margin-top: .2rem; }
.badge-preview { display: flex; gap: .25rem; }
.badge-mini { font-size: 1.2rem; }
.badge-more { font-size: .75rem; color: var(--text-muted); opacity: .6; align-self: center; }
.badge-progress { margin: 1rem 0; }
.badge-progress-bar {
  height: 8px; background: var(--border);
  border-radius: 4px; overflow: hidden;
}
.badge-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--an-teal), var(--an-orange));
  transition: width .5s ease; border-radius: 4px;
}
.badge-progress-text { font-size: .8rem; color: var(--text-muted); margin-top: .25rem; }
.badge-progress-next { font-size: .8rem; color: var(--an-orange); margin-top: .25rem; }

/* ══════════════════════════════════════
   6. LEADERBOARD PAGE
   ══════════════════════════════════════ */
.leaderboard-tabs {
  display: flex; gap: 0;
  border-bottom: 2px solid var(--border); margin-bottom: 1.5rem;
}
.leaderboard-tab {
  padding: .75rem 1.5rem; border: none; background: none;
  cursor: pointer; font-weight: 600; color: var(--text); opacity: .6;
  transition: all .2s; font-family: inherit; font-size: .95rem;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.leaderboard-tab.active { opacity: 1; color: var(--an-teal); border-bottom-color: var(--an-teal); }
.leaderboard-tab:hover { opacity: 1; }
.leaderboard-filters {
  display: flex; gap: .75rem; margin-bottom: 1.5rem; flex-wrap: wrap;
}
.leaderboard-filter-btn {
  padding: .5rem 1rem; border: 2px solid var(--border);
  border-radius: 20px; background: var(--bg-card);
  cursor: pointer; font-weight: 500; color: var(--text);
  transition: all .2s; font-family: inherit;
}
.leaderboard-filter-btn.active {
  border-color: var(--an-teal);
  background: var(--an-teal-soft);
  color: var(--an-teal);
}
.leaderboard-table {
  width: 100%; border-collapse: separate; border-spacing: 0 .5rem;
}
.leaderboard-row {
  background: var(--bg-card); border-radius: var(--radius);
  transition: transform .2s, box-shadow .2s;
  animation: slideInLeft .3s ease backwards;
}
.leaderboard-row:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 15px rgba(0,0,0,.1);
}
.leaderboard-row td { padding: .75rem 1rem; }
.leaderboard-row td:first-child { border-radius: 12px 0 0 12px; }
.leaderboard-row td:last-child { border-radius: 0 12px 12px 0; }
.leaderboard-row.rank-1 { border-left: 4px solid gold; background: rgba(253,161,0,.05); }
.leaderboard-row.rank-2 { border-left: 4px solid silver; }
.leaderboard-row.rank-3 { border-left: 4px solid #cd7f32; }
.leaderboard-row.is-me { background: var(--an-teal-soft); }
.rank-medal { font-size: 1.3rem; }
.rank-number { font-weight: 700; color: var(--text); font-size: 1rem; }
.player-avatar {
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; font-size: 1rem;
  background: var(--avatar-color, var(--an-teal));
}
.player-name { font-weight: 600; color: var(--text-heading); }
.player-score {
  font-family: var(--font-mono); font-weight: 700;
  color: var(--an-teal); font-size: 1.1rem;
}
.score-bar {
  height: 6px; background: var(--border);
  border-radius: 3px; min-width: 100px; overflow: hidden;
}
.score-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--an-teal), var(--an-orange));
  border-radius: 3px; transition: width .5s ease;
}
.profile-section {
  background: var(--bg-card);
  border: 2px solid var(--an-teal);
  border-radius: 16px; padding: 1.5rem; margin: 1.5rem 0;
}
.profile-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.profile-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1rem;
}
.profile-stat { text-align: center; }
.profile-stat .stat-value {
  font-size: 1.8rem; font-weight: 800;
  color: var(--an-teal); font-family: var(--font-mono);
}
.profile-stat .stat-label { font-size: .8rem; color: var(--text-muted); }
.stats-section { margin-top: 2rem; }
.activity-chart {
  display: flex; align-items: flex-end; gap: .5rem;
  height: 80px; padding: .5rem 0;
}
.activity-bar {
  flex: 1; background: var(--an-teal);
  border-radius: 4px 4px 0 0; min-width: 20px;
  transition: height .3s ease; opacity: .8;
}
.activity-bar:hover { opacity: 1; }
.activity-label {
  font-size: .65rem; text-align: center;
  color: var(--text-muted); margin-top: .25rem;
}

/* ══════════════════════════════════════
   7. ACHIEVEMENTS PAGE
   ══════════════════════════════════════ */

/* Rarity Colors */
.ach-r-common    { --r-color: #24947a; --r-glow: rgba(36,148,122,.25); }
.ach-r-rare      { --r-color: #3498db; --r-glow: rgba(52,152,219,.25); }
.ach-r-epic       { --r-color: #9b51e0; --r-glow: rgba(155,81,224,.3); }
.ach-r-legendary { --r-color: #fda100; --r-glow: rgba(253,161,0,.3); }
.ach-r-mythic    { --r-color: #e74c3c; --r-glow: rgba(231,76,60,.3); }

@keyframes achShine {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes achFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Guest Card */
.ach-guest-card {
  text-align: center; padding: 3.5rem 2rem;
  background: var(--bg-card); border-radius: 24px;
  border: 2px dashed var(--border);
  box-shadow: var(--shadow);
}
.ach-guest-trophies { font-size: 3rem; margin-bottom: 1.5rem; letter-spacing: .5rem; }
.ach-guest-card h2 { color: var(--text-heading); margin-bottom: .75rem; font-family: var(--font-heading); }
.ach-guest-card p { color: var(--text-muted); margin-bottom: 2rem; max-width: 400px; margin-inline: auto; line-height: 1.6; }
.ach-cta-btn {
  display: inline-block; padding: .85rem 2.5rem;
  background: linear-gradient(135deg, var(--an-teal), var(--an-navy));
  color: #fff; border-radius: 14px; text-decoration: none;
  font-weight: 700; font-family: var(--font-heading);
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 4px 15px rgba(36,148,122,.3);
}
.ach-cta-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(36,148,122,.4); }

/* Profile Hero */
.ach-hero {
  background: var(--hero-gradient);
  padding: 3rem 1.5rem 2rem;
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
}
.ach-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(36,148,122,.2) 0%, transparent 60%);
}
.ach-hero-inner {
  max-width: 1060px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 2rem;
  position: relative; z-index: 1;
}
.ach-hero-left { display: flex; align-items: center; gap: 1.5rem; }

/* Avatar with XP Ring */
.ach-avatar-ring { position: relative; width: 90px; height: 90px; flex-shrink: 0; }
.ach-avatar-lg {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 68px; height: 68px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.4rem; color: #fff;
  background: var(--an-teal);
}
.ach-level-ring {
  width: 90px; height: 90px;
  transform: rotate(-90deg);
}
.ach-level-badge {
  position: absolute; bottom: -2px; right: -2px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--an-orange);
  color: #fff; font-weight: 800; font-size: .75rem;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid var(--an-navy);
  font-family: var(--font-mono);
}

.ach-hero-name { color: #fff; font-size: 1.6rem; margin: 0; font-family: var(--font-heading); }
.ach-hero-formation {
  display: inline-block; margin-top: .3rem;
  font-size: .8rem; font-weight: 700; color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.12); padding: .2rem .7rem;
  border-radius: 8px; backdrop-filter: blur(4px);
}

/* Hero Stats */
.ach-hero-stats {
  display: flex; align-items: center; gap: 1.25rem;
  background: rgba(255,255,255,.08); backdrop-filter: blur(8px);
  padding: .85rem 1.5rem; border-radius: 16px;
  border: 1px solid rgba(255,255,255,.1);
}
.ach-hstat { text-align: center; min-width: 55px; }
.ach-hstat-val {
  font-size: 1.4rem; font-weight: 800; color: #fff;
  font-family: var(--font-mono);
}
.ach-hstat-total { font-size: .8rem; font-weight: 500; opacity: .6; }
.ach-hstat-lbl { font-size: .65rem; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.ach-hstat-sep { width: 1px; height: 30px; background: rgba(255,255,255,.15); }

/* XP Bar */
.ach-xp-bar-wrap {
  max-width: 1060px; margin: 1.25rem auto 0;
  position: relative; z-index: 1;
}
.ach-xp-bar {
  height: 8px; background: rgba(255,255,255,.1);
  border-radius: 4px; overflow: hidden;
}
.ach-xp-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--an-teal-light), var(--an-orange));
  transition: width 1s ease;
  position: relative;
}
.ach-xp-fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  background-size: 200% 100%;
  animation: achShine 2s ease-in-out infinite;
}
.ach-xp-text {
  font-size: .75rem; color: rgba(255,255,255,.5);
  text-align: right; margin-top: .35rem;
  font-family: var(--font-mono); font-weight: 500;
}

/* Showcase */
.ach-showcase { margin-bottom: 2.5rem; }
.ach-stitle {
  font-family: var(--font-heading); font-size: 1.15rem;
  color: var(--text-heading); margin: 0 0 1rem;
  font-weight: 700;
}
.ach-showcase-row {
  display: flex; gap: 1rem; overflow-x: auto;
  padding-bottom: .5rem;
  -webkit-overflow-scrolling: touch;
}
.ach-show-card {
  flex: 0 0 130px; text-align: center;
  background: var(--bg-card); border-radius: 16px;
  padding: 1.25rem .75rem;
  border: 2px solid var(--an-teal);
  box-shadow: 0 4px 20px rgba(36,148,122,.12);
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  animation: slideUp .5s ease backwards;
}
.ach-show-card:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 8px 30px rgba(36,148,122,.2);
}
.ach-show-icon { font-size: 2.5rem; margin-bottom: .4rem; animation: achFloat 3s ease-in-out infinite; }
.ach-show-name { font-size: .8rem; font-weight: 700; color: var(--text-heading); }
.ach-show-ago { font-size: .65rem; color: var(--text-muted); margin-top: .2rem; }

/* Collection */
.ach-collection { margin-bottom: 2.5rem; }
.ach-collection-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .75rem; margin-bottom: 1.25rem;
}
.ach-filter-pills {
  display: flex; gap: .4rem; overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ach-pill {
  padding: .4rem .85rem; border: 2px solid var(--border);
  border-radius: 20px; background: var(--bg-card);
  cursor: pointer; font-weight: 600; color: var(--text);
  transition: all .2s; font-family: inherit; font-size: .8rem;
  white-space: nowrap;
}
.ach-pill.active { border-color: var(--an-teal); background: var(--an-teal-soft); color: var(--an-teal); }
.ach-pill:hover { border-color: var(--an-teal); }

/* Badge Grid */
.ach-badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 1rem;
}
.ach-card {
  background: var(--bg-card); border-radius: 18px;
  padding: 1.2rem 1rem; text-align: center;
  border: 2px solid var(--border);
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform .25s, box-shadow .25s, border-color .25s;
  animation: slideUp .4s ease backwards;
}
.ach-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 28px var(--r-glow, rgba(0,0,0,.1));
  border-color: var(--r-color, var(--border));
}
.ach-card.ach-unlocked {
  border-color: var(--r-color);
  box-shadow: 0 2px 15px var(--r-glow);
}
.ach-card.ach-locked {
  opacity: .4;
}
.ach-card.ach-locked .ach-card-icon { filter: grayscale(1) brightness(.7); }

/* Ribbon */
.ach-card-ribbon {
  position: absolute; top: 10px; right: -30px;
  font-size: .55rem; font-weight: 800; color: #fff;
  padding: .15rem 2rem; transform: rotate(45deg);
  text-transform: uppercase; letter-spacing: .08em;
  background: var(--r-color);
}

/* Card Check */
.ach-card-check {
  position: absolute; top: .6rem; left: .6rem;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--an-teal); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 800;
}

.ach-card-icon-wrap { margin-bottom: .3rem; }
.ach-card-icon { font-size: 2.8rem; display: inline-block; transition: filter .3s; }
.ach-card.ach-unlocked .ach-card-icon { animation: achFloat 3s ease-in-out infinite; }
.ach-grayscale { filter: grayscale(1) brightness(.6); }

.ach-card-name {
  font-size: .85rem; font-weight: 700; color: var(--text-heading);
  margin-bottom: .2rem;
}
.ach-card-desc {
  font-size: .7rem; color: var(--text-muted); line-height: 1.35;
  min-height: 2em;
}
.ach-card-footer {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: .6rem; padding-top: .5rem;
  border-top: 1px solid var(--border);
}
.ach-card-pts {
  font-size: .75rem; font-weight: 800; color: var(--an-orange);
  font-family: var(--font-mono);
}
.ach-card-owners {
  font-size: .65rem; color: var(--text-muted); font-weight: 500;
}

/* Modal */
.ach-modal-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,.6); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .25s ease;
  padding: 1rem;
}
.ach-modal-overlay.ach-modal-visible { opacity: 1; }
.ach-modal-card {
  background: var(--bg-card); border-radius: 24px;
  padding: 2.5rem 2rem; text-align: center;
  max-width: 420px; width: 100%;
  border-top: 4px solid var(--r-color);
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  transform: scale(.92); transition: transform .3s cubic-bezier(.34,1.56,.64,1);
  position: relative;
}
.ach-modal-visible .ach-modal-card { transform: scale(1); }
.ach-modal-close {
  position: absolute; top: 1rem; right: 1rem;
  background: none; border: none; font-size: 1.5rem;
  color: var(--text-muted); cursor: pointer;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.ach-modal-close:hover { background: var(--bg-input); }
.ach-modal-icon { font-size: 4rem; margin-bottom: .5rem; }
.ach-modal-name { font-size: 1.4rem; font-weight: 800; color: var(--text-heading); font-family: var(--font-heading); }
.ach-modal-cat { font-size: .8rem; font-weight: 600; margin: .3rem 0 .75rem; }
.ach-modal-desc { font-size: .9rem; color: var(--text); line-height: 1.5; margin-bottom: 1.25rem; }
.ach-modal-rarity {
  display: inline-block; font-size: .7rem; font-weight: 800;
  color: var(--r-color); text-transform: uppercase;
  letter-spacing: .08em; margin-bottom: .75rem;
}
.ach-modal-bar {
  height: 8px; background: var(--border);
  border-radius: 4px; overflow: hidden; margin-bottom: .4rem;
}
.ach-modal-bar-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--r-color), var(--an-orange));
  transition: width .6s ease;
}
.ach-modal-owners { font-size: .8rem; color: var(--text-muted); margin-bottom: .75rem; }
.ach-modal-pts {
  font-size: 1.1rem; font-weight: 800; color: var(--an-orange);
  font-family: var(--font-mono); margin-bottom: 1rem;
}
.ach-modal-status {
  padding: .6rem 1.2rem; border-radius: 12px;
  font-size: .85rem; font-weight: 700;
  display: inline-block;
}
.ach-modal-got { background: var(--an-teal-soft); color: var(--an-teal); }
.ach-modal-missing { background: var(--bg-input); color: var(--text-muted); }

/* Activity */
.ach-activity { margin-bottom: 2rem; }
.ach-feed { display: flex; flex-direction: column; gap: .6rem; }
.ach-feed-empty {
  text-align: center; color: var(--text-muted);
  padding: 2.5rem; font-size: .9rem; display: none;
}
.ach-feed-item {
  display: flex; align-items: center; gap: 1rem;
  background: var(--bg-card); border-radius: 14px;
  padding: .85rem 1.25rem;
  border: 1px solid var(--border);
  transition: transform .15s, box-shadow .15s;
  animation: slideUp .3s ease backwards;
}
.ach-feed-item:hover {
  transform: translateX(4px);
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.ach-feed-av {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 800; color: #fff; flex-shrink: 0;
}
.ach-feed-text { flex: 1; min-width: 0; }
.ach-feed-line { font-size: .88rem; color: var(--text); }
.ach-feed-badge { color: var(--an-teal); font-weight: 700; }
.ach-feed-meta { font-size: .72rem; color: var(--text-muted); margin-top: .15rem; }

/* ══════════════════════════════════════
   8. RESPONSIVE
   ══════════════════════════════════════ */
@media (max-width: 768px) {
  .quiz-container { padding: 1.25rem; margin: 1rem 0; }
  .quiz-header { gap: .5rem; }
  .quiz-left { flex-direction: column; gap: .25rem; align-items: flex-start; }
  .quiz-right { gap: .5rem; }
  .quiz-option { padding: .75rem 1rem; font-size: .9rem; }
  .quiz-option .opt-letter { width: 24px; height: 24px; min-width: 24px; font-size: .8rem; }
  .quiz-results .total-score { font-size: 2.5rem; }
  .quiz-results .score-breakdown { gap: .5rem; }
  .quiz-results .breakdown-card { padding: .6rem .9rem; min-width: 80px; }
  .quiz-results .breakdown-card .bd-value { font-size: 1.1rem; }
  .quiz-reg-modal { padding: 1.5rem 1.25rem; }
  .leaderboard-table { font-size: .85rem; }
  .leaderboard-row td { padding: .5rem; }
  .player-avatar { width: 2rem; height: 2rem; font-size: .8rem; }
  .profile-stats { grid-template-columns: repeat(2, 1fr); }
  .leaderboard-filters { overflow-x: auto; flex-wrap: nowrap; }
  .ach-hero-inner { flex-direction: column; text-align: center; }
  .ach-hero-left { flex-direction: column; align-items: center; }
  .ach-hero-stats { flex-wrap: wrap; justify-content: center; }
  .ach-badge-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .ach-showcase-row { gap: .75rem; }
  .ach-show-card { flex: 0 0 110px; padding: 1rem .5rem; }
  .ach-filter-pills { overflow-x: auto; }
  .ach-collection-head { flex-direction: column; align-items: flex-start; }
  .ach-modal-card { padding: 1.5rem 1.25rem; }
  .ach-card-ribbon { font-size: .5rem; }
}