/* ==========================================================================
   features.css — Goals 43-64 wave
   New question types (timeline / fill-blank / map), alternate play modes,
   the era campaign, social play, collectibles, ranks, and teacher tools.
   All colors use the theme tokens from style.css so light/dark both work.
   ========================================================================== */

/* --- Goal 44: timeline ordering --- */
.timeline-list {
    list-style: none;
    margin: 20px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.timeline-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-primary);
    cursor: grab;
    box-shadow: 0 2px 6px var(--shadow-light);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.timeline-item:hover { transform: translateX(3px); box-shadow: 0 4px 12px var(--shadow); }
.timeline-item.dragging { opacity: 0.55; cursor: grabbing; }
.timeline-handle { color: var(--text-tertiary); font-size: 18px; }
.timeline-rank {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--accent-blue);
    min-width: 26px;
}
.timeline-text { flex: 1; text-align: left; font-size: 15px; }
.timeline-moves { display: flex; flex-direction: column; gap: 3px; }
.timeline-move {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 6px;
    width: 34px;
    min-height: 24px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
}
.timeline-move:disabled { opacity: 0.3; cursor: default; }
.timeline-move:not(:disabled):hover { background: var(--accent-blue); color: #fff; }
.timeline-submit { margin-top: 6px; }

/* --- Goal 44: fill in the blank --- */
.fill-blank-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    align-items: center;
    margin: 20px 0 8px;
}
.fill-blank-input {
    flex: 1 1 260px;
    max-width: 420px;
    padding: 14px 18px;
    font-size: 18px;
    font-family: var(--font-display);
    text-align: center;
    border: 3px solid var(--border-color);
    border-radius: 12px;
    background: var(--input-bg);
    color: var(--text-primary);
}
.fill-blank-input:focus { outline: 3px solid var(--accent-blue); outline-offset: 2px; }
.fill-blank-hint {
    text-align: center;
    color: var(--text-tertiary);
    font-size: 13px;
    margin-bottom: 8px;
}

/* --- Goal 44: map region picker --- */
.map-choices { border: none; padding: 0; margin: 16px 0; }
.world-map {
    width: 100%;
    max-width: 560px;
    height: auto;
    margin: 0 auto 14px;
    display: block;
}
/* Non-answer regions are drawn muted so the clickable ones have world context */
.map-base {
    fill: var(--progress-bg);
    stroke: var(--text-tertiary);
    stroke-width: 1.5;
    opacity: 0.45;
}
.map-region { cursor: pointer; }
.map-region use {
    fill: var(--bg-accent);
    stroke: var(--accent-blue);
    stroke-width: 3;
    transition: fill 0.15s ease;
}
.map-region:hover use,
.map-region:focus use { fill: var(--accent-blue); outline: none; }
.map-region:focus-visible use { stroke: var(--accent-orange); stroke-width: 5; }
.map-caption {
    text-align: center;
    font-size: 13px;
    color: var(--text-tertiary);
    margin: 0 0 10px;
}
.map-buttons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.map-btn {
    padding: 12px 20px;
    min-height: 44px;
    font-family: var(--font-display);
    font-size: 15px;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    background: var(--card-bg);
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}
.map-btn:hover, .map-btn.map-btn-hover {
    background: var(--accent-blue);
    color: #fff;
    transform: translateY(-2px);
}

/* --- Goal 46: mode badges, survival lives, mode picker --- */
.mode-badge {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    background: linear-gradient(135deg, #607D8B, #90A4AE);
    white-space: nowrap;
}
.mode-badge-review     { background: linear-gradient(135deg, #9C27B0, #E040FB); }
.mode-badge-blitz      { background: linear-gradient(135deg, #F57C00, #FFB300); }
.mode-badge-survival   { background: linear-gradient(135deg, #B71C1C, #E53935); }
.mode-badge-daily      { background: linear-gradient(135deg, #00695C, #26A69A); }
.mode-badge-campaign   { background: linear-gradient(135deg, #4527A0, #7E57C2); }
.mode-badge-live       { background: linear-gradient(135deg, #AD1457, #EC407A); }
.mode-badge-challenge  { background: linear-gradient(135deg, #1565C0, #42A5F5); }
.mode-badge-assignment { background: linear-gradient(135deg, #37474F, #78909C); }

.survival-lives { font-size: 16px; letter-spacing: 2px; }
.survival-lives-banner {
    margin: 14px auto;
    padding: 10px 20px;
    border-radius: 30px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    display: inline-block;
    font-weight: bold;
}

.mode-picker { margin: 0 0 16px; }
.mode-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}
.mode-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 12px;
    border-radius: 14px;
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    color: var(--text-primary);
    text-decoration: none;
    text-align: center;
    box-shadow: 0 3px 10px var(--shadow-light);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    min-height: 44px;
}
.mode-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px var(--shadow); }
.mode-card-icon { font-size: 26px; }
.mode-card-name { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.mode-card-desc { font-size: 12px; line-height: 1.35; color: var(--text-secondary); }
.mode-card-daily    { border-color: #26A69A; }
.mode-card-blitz    { border-color: var(--accent-orange); }
.mode-card-survival { border-color: #E53935; }
.mode-card-campaign { border-color: #7E57C2; }
.mode-card-quest { border-color: #00897B; }
.mode-card-minigame { border-color: #5C6BC0; }

/* --- Goals 50/51: join-code forms --- */
.join-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin: 0;
}
.join-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 12px;
}
.join-form label {
    font-family: var(--font-display);
    font-size: 14px;
    color: var(--text-primary);
}
.join-form input {
    padding: 10px 12px;
    min-height: 44px;
    width: 130px;
    font-size: 15px;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 1px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--text-primary);
}
.btn-join {
    padding: 10px 20px;
    min-height: 44px;
    font-family: var(--font-display);
    font-size: 15px;
    border: none;
    border-radius: 8px;
    background: var(--accent-blue);
    color: #fff;
    cursor: pointer;
}
.btn-join:hover { filter: brightness(1.12); }

/* --- Goal 51: friend challenge --- */
.challenge-code-box {
    text-align: center;
    padding: 22px;
    margin: 20px auto;
    max-width: 420px;
    background: var(--card-bg);
    border: 3px dashed var(--border-color);
    border-radius: 16px;
}
.challenge-code-label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-tertiary);
}
.challenge-code {
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 700;
    letter-spacing: 5px;
    color: var(--accent-blue);
    margin: 8px 0 14px;
}
.challenge-code-xl { font-size: 64px; }
.challenge-scores { max-width: 460px; margin: 20px auto; }
.challenge-score-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    margin-bottom: 8px;
    border-radius: 12px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
.challenge-score-row.challenger { border-left: 5px solid var(--accent-gold); }
.challenge-score-row.winner { border-left: 5px solid var(--accent-green); }
.challenge-player { font-weight: 600; text-align: left; }
.challenge-points { font-family: var(--font-display); font-size: 20px; font-weight: 700; }
.challenge-verdict {
    max-width: 460px;
    margin: 18px auto;
    padding: 16px 20px;
    border-radius: 14px;
    background: var(--bg-accent);
    color: var(--text-primary);
    text-align: center;
    font-size: 17px;
}
.challenge-waiting, .live-waiting {
    text-align: center;
    color: var(--text-secondary);
    font-size: 16px;
    margin: 18px 0;
}
.challenge-cta {
    margin: 22px auto;
    padding: 18px;
    max-width: 460px;
    text-align: center;
    background: var(--bg-accent);
    border-radius: 14px;
    color: var(--text-primary);
}
.btn-challenge { background: linear-gradient(135deg, #1565C0, #42A5F5); color: #fff; }
.challenge-record {
    display: flex;
    gap: 16px;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 22px;
    margin-bottom: 14px;
}
.record-win  { color: var(--accent-green); }
.record-loss { color: #C62828; }
.record-tie  { color: var(--text-secondary); }
[data-theme="dark"] .record-loss { color: #EF9A9A; }
.challenge-history-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    padding: 12px 16px;
    margin-bottom: 8px;
    border-radius: 10px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    text-decoration: none;
}
.challenge-history-row:hover { background: var(--bg-accent); }
.challenge-history-code {
    font-family: var(--font-display);
    letter-spacing: 2px;
    color: var(--accent-blue);
}

/* --- Goal 50: live class scoreboard --- */
.live-participants { text-align: center; margin: 16px 0; }
.live-chip {
    display: inline-block;
    margin: 4px;
    padding: 8px 14px;
    border-radius: 20px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 14px;
}
.live-board { max-width: 620px; margin: 0 auto; }
.live-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 8px;
    border-radius: 12px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
.live-row-top { background: var(--bg-accent); font-weight: 600; }
.live-rank { font-size: 20px; min-width: 36px; }
.live-name { flex: 1; text-align: left; }
.live-progress {
    flex: 1 1 120px;
    height: 10px;
    border-radius: 6px;
    background: var(--progress-bg);
    overflow: hidden;
}
.live-progress-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-green));
    transition: width 0.4s ease;
}
.live-score { font-family: var(--font-display); font-size: 20px; min-width: 44px; }
.live-done { color: var(--accent-green); font-weight: bold; }
.live-host-code { max-width: 520px; }

/* --- Goal 47: Time Traveler rank --- */
.rank-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin: 14px 0 4px;
}
.rank-badge {
    padding: 6px 16px;
    border-radius: 20px;
    font-family: var(--font-display);
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #455A64, #78909C);
}
.rank-apprentice   { background: linear-gradient(135deg, #6D4C41, #A1887F); }
.rank-field_scout  { background: linear-gradient(135deg, #2E7D32, #66BB6A); }
.rank-curator      { background: linear-gradient(135deg, #0277BD, #4FC3F7); }
.rank-codex_keeper { background: linear-gradient(135deg, #6A1B9A, #AB47BC); }
.rank-time_lord    { background: linear-gradient(135deg, #B8860B, #FFD54F); color: #3E2723; }
.rank-track {
    flex: 1 1 160px;
    max-width: 260px;
    height: 10px;
    border-radius: 6px;
    background: var(--progress-bg);
    overflow: hidden;
}
.rank-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-gold));
    transition: width 0.6s ease;
}
.rank-next { font-size: 13px; color: var(--text-secondary); }
.rank-ladder {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 14px 0;
}
.rank-step {
    flex: 1 1 110px;
    max-width: 150px;
    padding: 12px 8px;
    border-radius: 12px;
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
    text-align: center;
    opacity: 0.55;
    border: 2px solid transparent;
}
.rank-step.reached { opacity: 1; color: var(--text-primary); }
.rank-step.current { border-color: var(--accent-gold); background: var(--bg-accent); }
.rank-step-icon { display: block; font-size: 26px; }
.rank-step-title { display: block; font-family: var(--font-display); font-size: 14px; }
.rank-step-xp { display: block; font-size: 12px; color: var(--text-tertiary); }
.board-rank, .board-artifact { margin-left: 4px; font-size: 15px; }
/* G18: one board at a time — the minigame table is gone from this page */
.leaderboard-grid-single { grid-template-columns: minmax(0, 1fr); max-width: 720px; margin-inline: auto; }
.leaderboard-board-tabs, .leaderboard-period-tabs { margin-bottom: 12px; }
.board-blurb { margin: -10px 0 18px; color: var(--text-secondary); font-size: 14px; }
.leaderboard-table .col-detail, .leaderboard-table .detail-cell {
    text-align: right; white-space: nowrap; color: var(--text-secondary);
}
.leaderboard-table .col-value { text-align: right; }
/* Your own row is findable at a glance, in the table and pinned below it. */
.leaderboard-table tr.is-you { background: var(--bg-accent); }
.leaderboard-table tr.is-you:hover { background: var(--bg-accent); }
.leaderboard-table tr.is-you .player-name { font-weight: 700; }
.leaderboard-table tr.you-pinned td { border-top: 2px dashed var(--border-color); }
/* .personal-stats is a saturated gradient: the shared grey stat text vanishes on it. */
.personal-stats .stat-label { color: rgba(255, 255, 255, 0.92); opacity: 1; margin-top: 0; font-size: 14px; }
.personal-stats .stat-value { color: #fff; font-size: 30px; }
.personal-stats .stat-rank { margin-top: 4px; font-size: 13px; color: rgba(255, 255, 255, 0.92); font-weight: 600; }
@media (max-width: 640px) {
    /* Three tab rows at full size pushed the board itself below the fold on a
       phone. Shrink rather than side-scroll: a hidden tab is a dead tab. */
    .leaderboard-scope-tabs { gap: 6px; margin-bottom: 8px; }
    .leaderboard-scope-tabs .scope-tab { padding: 9px 12px; font-size: 13px; min-height: 40px; }
    .leaderboard-container .personal-stats { grid-template-columns: 1fr 1fr; padding: 14px; gap: 10px; }
    .leaderboard-container .personal-stats .stat-value { font-size: 24px; }
    .leaderboard-container .personal-stats .stat-box { padding: 10px 8px; }
}
@media (max-width: 480px) {
    .leaderboard-table th, .leaderboard-table td { padding: 10px 4px; font-size: 0.85em; }
    .leaderboard-table .rank-cell { width: 34px; }
    .board-rank, .board-artifact { font-size: 13px; }
}

/* --- Goal 48: collectible artifacts --- */
.artifact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin: 14px 0;
}
.artifact-card {
    padding: 14px 10px;
    border-radius: 14px;
    text-align: center;
    background: var(--card-bg);
    color: var(--text-primary);
    border: 3px solid var(--border-color);
    box-shadow: 0 3px 10px var(--shadow-light);
}
.artifact-common    { border-color: #8D6E63; }
.artifact-rare      { border-color: #0288D1; box-shadow: 0 0 14px rgba(2, 136, 209, 0.35); }
.artifact-legendary {
    border-color: var(--accent-gold);
    box-shadow: 0 0 18px rgba(184, 134, 11, 0.45);
}
.artifact-locked { opacity: 0.42; filter: grayscale(1); }
.artifact-icon { font-size: 36px; }
.artifact-name { font-family: var(--font-display); font-weight: 700; font-size: 15px; margin-top: 4px; }
.artifact-rarity {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-tertiary);
}
.artifact-desc { font-size: 12px; color: var(--text-secondary); margin-top: 5px; }

/* --- Goal 63: campaign era map --- */
.campaign-screen { max-width: 860px; margin: 0 auto; }
.campaign-intro { text-align: center; color: var(--text-secondary); margin-bottom: 16px; }
/* Reuse the leaderboard pill-tab look; pages.css scopes it to its own parent */
.campaign-grade-tabs {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.campaign-grade-tabs .scope-tab {
    padding: 10px 22px;
    min-height: 44px;
    border-radius: 999px;
    background: var(--card-bg);
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 600;
    font-family: var(--font-display);
    border: 2px solid var(--border-color);
    display: inline-flex;
    align-items: center;
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.campaign-grade-tabs .scope-tab:hover { transform: translateY(-1px); }
.campaign-grade-tabs .scope-tab.active {
    background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-orange) 100%);
    color: #fff;
    border-color: transparent;
}
.campaign-path { list-style: none; padding: 0; margin: 0; }
.campaign-chapter {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 20px 0;
    position: relative;
}
.campaign-chapter:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 27px;
    top: 68px;
    bottom: -8px;
    width: 4px;
    border-radius: 2px;
    background: var(--progress-bg);
}
.chapter-marker {
    /* Both axes are pinned: the ≤600px rule below flips .campaign-chapter to
       flex-direction: column, where a `flex: 0 0 56px` basis lands on the
       HEIGHT and the width collapses to the digit — a thin vertical oval. */
    flex: 0 0 auto;  /* = grow 0, shrink 0, basis auto → the width/height below */
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--accent-blue), #42A5F5);
    box-shadow: 0 3px 10px var(--shadow);
    z-index: 1;
}
.campaign-chapter.locked .chapter-marker {
    background: var(--progress-bg);
    color: var(--text-tertiary);
}
.campaign-chapter.chapter-complete .chapter-marker {
    background: linear-gradient(135deg, #B8860B, #FFD54F);
    color: #3E2723;
}
.chapter-body {
    flex: 1;
    padding: 18px 20px;
    border-radius: 16px;
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    text-align: left;
    color: var(--text-primary);
}
.campaign-chapter.locked .chapter-body { opacity: 0.6; border-style: dashed; }
.chapter-title { font-family: var(--font-display); margin: 0 0 6px; color: var(--accent-blue); }
.chapter-line { font-style: italic; color: var(--text-secondary); margin: 0 0 12px; }
.chapter-locked-note { color: var(--text-tertiary); margin: 0; }
.chapter-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.chapter-progress-bar {
    flex: 1;
    height: 12px;
    border-radius: 6px;
    background: var(--progress-bg);
    overflow: hidden;
}
.chapter-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-green), var(--accent-blue));
    transition: width 0.6s ease;
}
.chapter-progress-text { font-size: 13px; color: var(--text-secondary); white-space: nowrap; }
.chapter-stones { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.stone {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 14px;
    min-height: 44px;
    justify-content: center;
    border-radius: 10px;
    background: var(--bg-tertiary);
    border: 2px solid transparent;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 13px;
    transition: transform 0.15s ease;
}
.stone:hover { transform: translateY(-2px); border-color: var(--accent-blue); }
.stone-started { border-color: var(--accent-orange); }
.stone-done { border-color: var(--accent-green); background: var(--bg-accent); }
.stone-name { font-family: var(--font-display); }
.stone-count { font-size: 11px; color: var(--text-tertiary); }
.chapter-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.boss-link { border-color: var(--accent-gold); }
.boss-beaten { opacity: 0.75; }

/* --- G15: era-tinted chapter cards --- */
/* Every <li class="campaign-chapter"> already carried data-era, and style.css
   defines --era-accent / --era-secondary / --era-glow there (plus
   --era-title-dark under [data-theme="dark"]). Nothing on this page consumed
   them, so the palette resolved and produced no visible change at all. The
   locked and complete markers keep their own colours — hence the :not()s. */
.campaign-chapter[data-era] .chapter-body {
    border-color: var(--era-accent, var(--border-color));
    box-shadow: inset 5px 0 0 var(--era-accent, transparent),
                0 3px 12px var(--era-glow, transparent);
}
.campaign-chapter[data-era] .chapter-title {
    color: var(--era-accent, var(--accent-blue));
}
[data-theme="dark"] .campaign-chapter[data-era] .chapter-title {
    color: var(--era-title-dark, var(--accent-blue));
}
.campaign-chapter[data-era]:not(.locked):not(.chapter-complete) .chapter-marker {
    background: linear-gradient(135deg, var(--era-accent), var(--era-secondary));
}

/* --- Goals 43/54: why-wrong feedback --- */
.correct-answer-callout {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    margin: 12px auto;
    padding: 12px 22px;
    border-radius: 12px;
    background: var(--bg-accent);
    border-left: 5px solid var(--accent-green);
    color: var(--text-primary);
}
.correct-answer-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-tertiary);
}
.correct-answer-value { font-family: var(--font-display); font-size: 17px; }

/* --- Goal 56: assignments on the home page --- */
.assignment-list { margin: 22px 0; }
.assignment-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    margin-bottom: 10px;
    border-radius: 12px;
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-left: 6px solid var(--accent-orange);
    color: var(--text-primary);
    text-decoration: none;
    min-height: 44px;
}
.assignment-card:hover { background: var(--bg-accent); }
.assignment-overdue { border-left-color: #C62828; }
.assignment-title { flex: 1 1 200px; font-family: var(--font-display); text-align: left; }
.assignment-meta { font-size: 13px; color: var(--text-secondary); }
.assignment-cta { font-weight: bold; color: var(--accent-blue); }

/* --- Goals 53/55/57: admin tooling --- */
.admin-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin: 18px 0 24px;
}
.analytics-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
    color: var(--text-primary);
    border-radius: 12px;
    overflow: hidden;
}
.analytics-table th, .analytics-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--progress-bg);
    font-size: 14px;
}
.analytics-table th { background: var(--bg-tertiary); font-family: var(--font-display); }
.analytics-flag { background: rgba(198, 40, 40, 0.12); }
.pending-approval { border: 2px dashed var(--accent-orange); }
.pending-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    background: var(--bg-accent);
    color: var(--text-primary);
}
.pending-tag { background: var(--accent-orange); color: #fff; }
.choice-group input[type="text"] { display: block; width: 100%; margin-top: 6px; }
.checkbox-row { display: block; margin: 5px 0; font-size: 14px; }
.btn-danger { background: #C62828; color: #fff; }

@media (max-width: 600px) {
    .campaign-chapter { flex-direction: column; }
    .campaign-chapter:not(:last-child)::before { display: none; }
    .challenge-code { font-size: 32px; }
    .challenge-code-xl { font-size: 44px; }
    .analytics-table th, .analytics-table td { font-size: 12px; padding: 7px 6px; }
}

@media (prefers-reduced-motion: reduce) {
    .mode-card, .stone, .timeline-item, .map-btn,
    .rank-fill, .chapter-progress-fill, .live-progress-fill { transition: none; }
}