/* =========================================
   TOP 10 TRIVIA
   Page-specific styles. Shared tokens, buttons, chips and inputs
   live in assets/global/global.css.
   ========================================= */


/* =========================================
   1. SETUP
   ========================================= */

.setup {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.intro {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 16px;
}

.intro-title {
    font-size: clamp(56px, 14vw, 96px);
}

.intro-link {
    align-self: flex-start;
    font-size: 15px;
}

/* Rooms */
.room {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.room-join,
.room-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.room-label {
    color: var(--muted);
    font-size: 15px;
}

.join-form {
    display: flex;
    align-items: center;
    gap: 8px 12px;
}

.join-input {
    width: 104px;
    min-height: 44px;
    text-align: center;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.join-form .btn {
    min-height: 44px;
}

.room-code {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 900;
    letter-spacing: 0.14em;
    line-height: 1;
    color: var(--accent);
}

.room-status:empty {
    display: none;
}

/* Game options: label on the left, choices on the right */
.picker {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pick-row {
    display: grid;
    grid-template-columns: 96px 1fr;
    align-items: start;
    gap: 16px;
}

.pick-label {
    padding-top: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.pick-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.stat-hint:empty,
.best-hint:empty {
    display: none;
}

.best-hint {
    color: var(--accent);
}

/* Random picks: amber outline so they read as actions, not choices */
.chip-random {
    color: var(--accent);
    border-color: rgba(255, 176, 32, 0.45);
}

.chip-random:hover:not(:disabled) {
    border-color: var(--accent);
    background: var(--accent-soft);
}

@media (max-width: 480px) {
    .pick-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .pick-label {
        padding-top: 0;
    }
}

/* Player names as editable pills */
.player-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.player-pill {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 6px 0 16px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pill);
    background: var(--bg-raise);
    transition: border-color 0.15s;
}

.player-pill:focus-within {
    border-color: var(--accent);
}

.player-pill.me {
    border-color: rgba(255, 176, 32, 0.5);
}

.player-pill input {
    width: 9ch;
    min-width: 5ch;
    max-width: 16ch;
    border: none;
    background: none;
    font-weight: 600;
    font-size: 15px;
    field-sizing: content;
}

.player-pill input:focus {
    outline: none;
}

.player-pill input:read-only {
    cursor: default;
}

.pill-tag {
    margin: 0 8px 0 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}

.pill-remove {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.pill-remove:hover {
    color: var(--text);
    background: var(--line);
}

.pill-add {
    min-height: 40px;
    padding: 0 16px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-pill);
    background: none;
    color: var(--muted);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
}

.pill-add:hover {
    color: var(--text);
    border-color: var(--muted);
}


/* =========================================
   2. PLAYING
   ========================================= */

.play {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.play-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 8px;
}

.play-stat {
    font-size: clamp(40px, 9vw, 64px);
}

/* Scoreboard: one entry per player, current turn lit up */
.scoreboard {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    padding: 16px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.score {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding-bottom: 6px;
    color: var(--muted);
    transition: color 0.2s;
}

.score::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--ease);
}

.score.is-turn {
    color: var(--text);
}

.score.is-turn::after {
    transform: scaleX(1);
}

.score-name {
    font-weight: 600;
}

.score-num {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
}

.score.is-turn .score-num {
    color: var(--accent);
}

/* Solo strikes, pushed to the right of the score */
.score.strikes {
    margin-left: auto;
}

.strike-marks {
    display: flex;
    gap: 6px;
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
}

.strike {
    color: var(--line-strong);
    transition: color 0.2s;
}

.strike.used {
    color: var(--bad);
}

/* Whose turn, with the countdown on the right when a timer is on */
.turn-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: -12px;
}

.turn-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.turn {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.turn-clock {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    transition: color 0.2s;
}

.turn-bar {
    height: 3px;
    border-radius: 2px;
    background: var(--line);
    overflow: hidden;
}

.turn-bar-fill {
    display: block;
    height: 100%;
    background: var(--accent);
    transform-origin: left;
    transition: transform 0.25s linear;
}

/* Last 10 seconds */
.turn-clock.low {
    color: var(--bad);
}

.turn-bar.low .turn-bar-fill {
    background: var(--bad);
}

.turn .waiting {
    color: var(--muted);
}

/* Guess box, with the players matching what's typed listed under it */
.guess-form {
    display: flex;
    flex-direction: column;
}

.guess-input {
    flex: 1;
    min-height: 60px;
    font-size: 19px;
    border-radius: var(--radius-pill);
    padding: 0 24px;
}

.guess-results {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.guess-option {
    display: flex;
    align-items: baseline;
    gap: 12px;
    width: 100%;
    min-height: 54px;
    padding: 0 24px;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: none;
    color: var(--text);
    font: inherit;
    font-size: 18px;
    text-align: left;
    cursor: pointer;
}

.guess-option:hover,
.guess-option.active {
    background: var(--accent-soft);
}

.guess-option-name {
    font-weight: 600;
}

.guess-option-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    color: var(--muted);
    font-size: 15px;
    white-space: nowrap;
}

.guess-option-meta .team-tag {
    font-size: 14px;
}

.guess-option-pos {
    min-width: 2.2em;
    font-weight: 600;
}

/* Already guessed this game: tinted, labelled, can't be picked */
.guess-option:disabled {
    cursor: default;
}

.guess-option:disabled .guess-option-name {
    color: var(--muted);
}

.guess-option.correct {
    background: var(--good-soft);
}

.guess-option.wrong {
    background: var(--bad-soft);
}

.guess-status {
    font-size: 14px;
    font-weight: 600;
}

.guess-option.correct .guess-status {
    color: var(--good);
}

.guess-option.wrong .guess-status {
    color: var(--bad);
}

.guess-more,
.guess-none {
    padding: 12px 24px 0;
    color: var(--faint);
    font-size: 14px;
}

.guess-form.shake {
    animation: shake 0.4s var(--ease);
}

@keyframes shake {
    20% { transform: translateX(-8px); }
    40% { transform: translateX(7px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(3px); }
}

/* Result of the last guess: who guessed (small), then the guess (big) */
.feedback {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 52px;
    margin-top: -8px;
    padding-left: 24px;
    color: var(--muted);
}

.feedback-who {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.feedback-main {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
}

.feedback-note {
    font-size: 15px;
    font-weight: 500;
    color: var(--muted);
}

.feedback.correct .feedback-main { color: var(--good); }
.feedback.wrong .feedback-main,
.feedback.timeout .feedback-main { color: var(--bad); }
.feedback.repeat .feedback-main { color: var(--accent); }

.feedback.fresh {
    animation: rise 0.35s var(--ease);
}

@keyframes rise {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

/* Hints: the button above the board, and what they say on blank slots */
.hint-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 12px;
    margin-bottom: 10px;
}

.hint-btn:disabled {
    color: var(--faint);
    text-decoration: none;
    cursor: default;
}

.hint-btn.voted {
    text-decoration-style: dashed;
}

.hint-bar .hint:empty {
    display: none;
}

.slot-hint {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--muted);
}

.slot-hint-initials {
    font-size: 18px;
    color: var(--text);
    letter-spacing: 0.04em;
}

.slot-hint.fresh {
    animation: hint-in 1.2s var(--ease);
}

@keyframes hint-in {
    0% { color: var(--accent); opacity: 0; transform: translateX(-6px); }
    30% { opacity: 1; transform: none; }
    100% { color: var(--muted); }
}

.guess-option-years {
    font-size: 13px;
    color: var(--faint);
}

/* End game */
.end-game {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}

.end-game .btn.voted {
    border-color: var(--accent);
    color: var(--accent);
}


/* =========================================
   3. THE BOARD (top 10 list)
   ========================================= */

.board {
    list-style: none;
    counter-reset: none;
}

.slot {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    column-gap: 12px;
    min-height: 56px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--line);
}

.slot:first-child {
    border-top: 1px solid var(--line);
}

.slot-rank {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    color: var(--faint);
    text-align: right;
}

.slot-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.slot-line {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.slot-team {
    flex-shrink: 0;
    font-size: 12px;
}

/* Team code in the team's color (set as --team by teamTag) */
.team-tag {
    padding: 2px 7px;
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.team-tag.has-color {
    color: var(--team);
    background: color-mix(in srgb, var(--team) 16%, transparent);
}

.slot-name {
    font-size: 18px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.slot-by {
    font-size: 13px;
    color: var(--muted);
}

.slot-value {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    color: var(--muted);
}

/* Unrevealed: a quiet placeholder bar */
.slot-blank {
    display: block;
    width: 55%;
    height: 10px;
    border-radius: 5px;
    background: var(--line);
}

.slot.filled .slot-rank {
    color: var(--accent);
}

.slot.filled .slot-value {
    color: var(--text);
}

.slot.fresh {
    animation: reveal 0.9s var(--ease);
}

@keyframes reveal {
    0% { background: var(--accent-soft); transform: translateX(-6px); opacity: 0.4; }
    30% { transform: none; opacity: 1; }
    100% { background: transparent; }
}

/* "+5 more tied at 16": ties the source didn't list */
.slot-note {
    list-style: none;
    padding: 12px 4px 0 60px;
}

/* Results screen: answers nobody got */
.slot.missed .slot-rank,
.slot.missed .slot-team,
.slot.missed .slot-name,
.slot.missed .slot-value {
    color: var(--faint);
}

.slot.missed .team-tag {
    background: none;
}


/* =========================================
   4. RESULTS
   ========================================= */

.results {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.results-head {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 16px;
}

.results-title {
    font-size: clamp(56px, 14vw, 96px);
    color: var(--accent);
    text-shadow: 0 0 40px rgba(255, 176, 32, 0.25);
    animation: rise 0.5s var(--ease);
}

.standings {
    list-style: none;
}

.standing {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    align-items: baseline;
    gap: 12px;
    padding: 12px 4px;
    border-bottom: 1px solid var(--line);
}

.standing:first-child {
    border-top: 1px solid var(--line);
}

.standing-place {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    color: var(--faint);
}

.standing-name {
    font-size: 18px;
    font-weight: 600;
}

.standing-score {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 800;
}

.standing.leader .standing-place,
.standing.leader .standing-score {
    color: var(--accent);
}

.section-label {
    margin-top: 16px;
    margin-bottom: -12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Results: wrong guesses this game */
.misses {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.misses-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.miss {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.miss-name {
    color: var(--muted);
    text-decoration: line-through;
    text-decoration-color: var(--bad);
}

.miss-by {
    color: var(--faint);
    font-size: 13px;
}


/* =========================================
   5. SMALL SCREENS
   ========================================= */

@media (max-width: 480px) {
    .guess-option {
        padding: 0 16px;
    }

    .slot {
        grid-template-columns: 34px 1fr auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}


/* =========================================
   6. SESSION ("TONIGHT") LEADERBOARD
   ========================================= */

.session {
    display: flex;
    flex-direction: column;
}

.session-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.session-head .section-label {
    margin: 0;
}

.session-cols,
.session-row {
    display: grid;
    grid-template-columns: 32px 1fr 56px 56px;
    align-items: baseline;
    gap: 12px;
    padding: 0 4px;
}

.session-cols {
    padding-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--faint);
}

.session-cols span,
.session-wins,
.session-points {
    text-align: right;
}

.session-list {
    list-style: none;
}

.session-row {
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 1px solid var(--line);
}

.session-row:last-child {
    border-bottom: 1px solid var(--line);
}

.session-place {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    color: var(--faint);
}

.session-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.session-wins {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
}

.session-points {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--muted);
}

.session-row.leader .session-place,
.session-row.leader .session-wins {
    color: var(--accent);
}


/* =========================================
   7. STATS PAGE (top10-stats.html)
   ========================================= */

.stats-page,
.stats-body,
.stats-empty {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.stats-empty {
    gap: 24px;
}

/* Big numbers: two across on phones, four on wider screens */
.stats-totals {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px 16px;
    padding: 20px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.stats-total {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.stats-total-num {
    font-family: var(--font-display);
    font-size: 48px;
    font-weight: 800;
    line-height: 1;
    color: var(--accent);
}

.stats-total-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

@media (max-width: 480px) {
    .stats-totals {
        grid-template-columns: repeat(2, 1fr);
    }
}

.stats-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.stats-section .section-label {
    margin: 0;
}

/* By sport */
.stats-cols,
.stats-row {
    display: grid;
    grid-template-columns: 1fr 64px 56px 64px;
    align-items: baseline;
    gap: 12px;
    padding: 0 4px;
}

.stats-cols {
    padding-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--faint);
}

.stats-cols span,
.stats-num {
    text-align: right;
}

.stats-list,
.stats-boards {
    list-style: none;
}

.stats-row {
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 1px solid var(--line);
}

.stats-row:last-child,
.stats-board:last-child {
    border-bottom: 1px solid var(--line);
}

.stats-sport {
    font-weight: 700;
}

.stats-num {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 800;
}

/* Boards */
.stats-board {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 4px;
    border-top: 1px solid var(--line);
}

.stats-board-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.stats-board-stat {
    font-weight: 600;
}

.stats-board-context {
    font-size: 13px;
    color: var(--muted);
}

.stats-board-best {
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.stats-board-total {
    font-size: 18px;
    color: var(--faint);
}

.stats-board.perfect .stats-board-best {
    color: var(--good);
}

.stats-page > .stats-solo-label {
    margin: 0 0 -28px;
}

.stats-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}


/* =========================================
   8. DAILY CHALLENGE (top10-daily.html)
   ========================================= */

.daily,
.daily-game,
.daily-play,
.daily-done {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.daily-done {
    gap: 16px;
}

.daily-status:empty {
    display: none;
}

/* One box per guess */
.daily-marks {
    display: flex;
    gap: 8px;
}

.daily-mark {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    font-size: 22px;
}

.daily-mark.miss { border-color: var(--bad); background: var(--bad-soft); }
.daily-mark.hint { border-color: var(--accent); background: var(--accent-soft); }
.daily-mark.correct { border-color: var(--good); background: var(--good-soft); }

/* Hints: label on the left, value on the right */
.daily-hints {
    list-style: none;
}

.daily-hint {
    display: grid;
    grid-template-columns: 132px 1fr;
    align-items: baseline;
    gap: 12px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--line);
}

.daily-hint:first-child {
    border-top: 1px solid var(--line);
}

.daily-hint-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.daily-hint-value {
    font-weight: 700;
    font-size: 17px;
}

.daily-hint-value .team-tag {
    font-size: 14px;
}

.daily-hint-pos {
    margin-left: 6px;
    color: var(--muted);
}

.daily-hint.locked .daily-hint-label,
.daily-hint.locked .daily-hint-value {
    color: var(--faint);
    font-weight: 500;
    font-size: 14px;
}

.daily-hint-btn {
    align-self: flex-start;
    margin: -12px 0 0 20px;
}

.daily-hint-btn:disabled {
    color: var(--faint);
    text-decoration: none;
    cursor: default;
}

/* The board: the hidden player's slot stands out */
.slot.daily-answer {
    border: 1px dashed var(--accent);
    border-radius: var(--radius);
    background: var(--accent-soft);
}

.slot.daily-answer .slot-rank,
.slot.daily-answer .slot-value {
    color: var(--accent);
}

.daily-unknown {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--accent);
}

.slot.daily-answer.solved {
    border: 1px solid var(--good);
    background: var(--good-soft);
}

.slot.daily-answer.solved .slot-rank,
.slot.daily-answer.solved .slot-value,
.slot.daily-answer.solved .slot-name {
    color: var(--good);
}

.slot.daily-answer.failed {
    border: 1px solid var(--bad);
    background: var(--bad-soft);
}

.slot.daily-answer.failed .slot-rank,
.slot.daily-answer.failed .slot-value,
.slot.daily-answer.failed .slot-name {
    color: var(--bad);
}

/* Finished */
.daily-done-title {
    font-size: clamp(48px, 12vw, 80px);
    color: var(--accent);
    animation: rise 0.5s var(--ease);
}

/* How many guesses each solve took */
.daily-dist {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 16px;
}

.daily-dist-row {
    display: grid;
    grid-template-columns: 20px 1fr;
    align-items: center;
    gap: 10px;
}

.daily-dist-label {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;
    color: var(--muted);
}

.daily-dist-bar {
    min-width: 28px;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--line-strong);
    font-weight: 700;
    font-size: 14px;
    text-align: right;
}

.daily-dist-row.today .daily-dist-bar {
    background: var(--accent);
    color: var(--accent-ink);
}

/* Entry points on the trivia setup screen */
.daily-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.daily-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: linear-gradient(90deg, var(--accent-soft), transparent 80%);
    text-decoration: none;
}

.daily-link-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.daily-link-title {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1;
}

.daily-link-cta {
    font-weight: 700;
    color: var(--accent);
    white-space: nowrap;
}

/* Today's is finished: green, with the result */
.daily-link.done {
    border-left-color: var(--good);
    background: linear-gradient(90deg, var(--good-soft), transparent 80%);
}

.daily-link.done .eyebrow,
.daily-link.done .daily-link-cta {
    color: var(--good);
}

.daily-link.done .hint {
    font-weight: 600;
    color: var(--text);
}

@media (max-width: 480px) {
    .daily-hint {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

.stat-qualifier:empty {
    display: none;
}

.feedback.hinted .feedback-main {
    color: var(--accent);
}

/* The hint a miss unlocked, under the guess box */
.daily-new-hint {
    margin-top: 4px;
    font-size: 16px;
    color: var(--muted);
}

.daily-new-hint strong {
    color: var(--text);
}

.daily-new-hint .team-tag {
    font-size: 13px;
}

.daily-hint.fresh {
    animation: reveal 1.2s var(--ease);
}

/* Test mode bar */
.daily-test {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 10px 14px;
    border: 1px dashed var(--bad);
    border-radius: var(--radius);
}

.daily-test-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bad);
}

.daily-test-btn {
    min-height: 36px;
    padding: 0 14px;
    font-size: 20px;
}

.daily-test-day {
    min-width: 92px;
    text-align: center;
    font-weight: 700;
}

#dailyEyebrow {
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
}

/* No room saved for feedback until there's a miss to show */
.daily-play .feedback:empty {
    display: none;
}


/* =========================================
   9. TOP SHELF (top10-topshelf.html)
   ========================================= */

/* The three rounds */
.shelf-rounds {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.shelf-round {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--faint);
}

.shelf-round-num {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
}

.shelf-round-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.shelf-round-result {
    min-height: 1.5em;
    font-weight: 700;
    color: var(--text);
}

.shelf-round.now {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
}

.shelf-round.done {
    color: var(--muted);
}

/* Finished: points by round */
.shelf-breakdown {
    list-style: none;
    display: flex;
    flex-direction: column;
}

.shelf-breakdown-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}

.shelf-breakdown-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.shelf-breakdown-detail {
    grid-column: 1;
}

.shelf-breakdown-points {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 800;
    color: var(--text);
}

.shelf-breakdown-row.full .shelf-breakdown-points {
    color: var(--good);
}

.shelf-prompt {
    font-size: 19px;
    font-weight: 600;
}

.shelf-prompt strong {
    color: var(--accent);
}

/* Hidden top rows */
.slot.shelf-hidden {
    border: 1px dashed var(--accent);
    border-radius: var(--radius);
    background: var(--accent-soft);
}

.slot.shelf-hidden + .slot.shelf-hidden {
    margin-top: 4px;
}

.slot.shelf-hidden .slot-rank {
    color: var(--accent);
}

.slot.shelf-hidden.solved {
    border: 1px solid var(--good);
    background: var(--good-soft);
}

.slot.shelf-hidden.solved .slot-rank,
.slot.shelf-hidden.solved .slot-name {
    color: var(--good);
}

.slot.shelf-hidden.failed {
    border: 1px solid var(--bad);
    background: var(--bad-soft);
}

.slot.shelf-hidden.failed .slot-rank,
.slot.shelf-hidden.failed .slot-name {
    color: var(--bad);
}

.slot.tier-exact .slot-value,
.slot.tier-close .slot-value { color: var(--good); }
.slot.tier-near .slot-value { color: var(--accent); }
.slot.tier-far .slot-value { color: var(--bad); }

/* Round 2: found names and hints, in no particular order */
.shelf-tray {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.shelf-tray:empty {
    display: none;
}

.shelf-tray-found {
    font-weight: 700;
    color: var(--good);
}

.shelf-tray-found .team-tag,
.shelf-tray-hint .team-tag {
    font-size: 13px;
}

.shelf-tray-hint .daily-hint-label {
    margin-right: 8px;
}

/* Round 3: tap the names into order */
.shelf-order-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.shelf-order-choice:disabled {
    opacity: 0.3;
}

.shelf-order-picked {
    list-style: none;
}

.shelf-order-slot {
    display: grid;
    grid-template-columns: 44px 1fr;
    align-items: center;
    column-gap: 12px;
    min-height: 52px;
    padding: 6px 4px;
    border-bottom: 1px solid var(--line);
    font-size: 18px;
    font-weight: 600;
}

.shelf-order-slot:first-child {
    border-top: 1px solid var(--line);
}

.shelf-order-slot.filled .slot-rank {
    color: var(--accent);
}

.shelf-order-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* Rounds 1 and 4: a field and a button side by side */
.shelf-value-form {
    display: flex;
    gap: 10px;
}

.shelf-value-form .guess-input,
.shelf-value-form .select {
    flex: 1;
    min-width: 0;
}

.shelf-value-form .select {
    min-height: 60px;
    font-size: 18px;
}

.shelf-value-form .btn {
    min-height: 60px;
    font-size: 18px;
    white-space: nowrap;
}