/* app-pages.css. The app pages (Leaderboard, Profile, Puzzles list, Tournaments, tournament detail, play, appeal and rules).
   Sits on top of each page's own stylesheet and puts its status colors and small texts on the theme tokens, so every theme
   (light included) keeps readable contrast. Status pills: Registration open, Coming soon, Live, Results pending, Finished. */

:root { --warn-text: #f2c14e; --warn-bg: rgba(242, 193, 78, .16); --info-text: #8fbcff; }
:root[data-theme="light"] { --warn-text: #7a4e00; --warn-bg: rgba(245, 158, 11, .18); --info-text: #1f55b8; }

/* ── Status pills ── */
.tournament-status-badge.is-draft, .tournament-status-badge.is-closed { background: var(--surface-2); color: var(--muted); }
.tournament-status-badge.is-registration { background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); }
.tournament-status-badge.is-upcoming { background: color-mix(in srgb, var(--info-text) 16%, transparent); color: var(--info-text); }
.tournament-status-badge.is-live { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent-text); }
.tournament-status-badge.is-review, .tournament-status-badge.is-ended { background: var(--warn-bg); color: var(--warn-text); }
.tournament-status-badge.is-canceled { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.tournament-card-prize strong, .tournament-prize-label { color: var(--warn-text); }
.tournament-card-enter { color: var(--on-action); background: var(--action); }

/* ── Small texts ── */
.leaderboard-note, .leaderboard-side p, .leaderboard-empty { color: var(--muted); }
.leaderboard-note strong, .period-caption strong { color: var(--accent-text); }
.profile-status.is-warning { color: var(--warn-text); background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn-text) 35%, transparent); }
.puzzle-chip-locked { color: var(--accent-text); }

.leaderboard-note, .leaderboard-note.period-caption { color: color-mix(in srgb, var(--muted) 65%, var(--text)); }
main a:not([class]), .js-rules-link { color: var(--accent-text); }
.puzzle-status.is-warning { color: var(--warn-text); background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn-text) 35%, transparent); }
.puzzle-status.is-error { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.puzzle-status.is-success { color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); border-color: color-mix(in srgb, var(--good) 35%, transparent); }
.leaderboard-note, .leaderboard-note.period-caption { color: var(--text) !important; opacity: .9; }
main a:not([class]), .js-rules-link { color: var(--accent-text) !important; }
.leaderboard-ai-badge { color: var(--accent-text) !important; background: var(--surface-2) !important; }
.puzzle-intro .stage-header { display: block; }
.puzzle-intro { min-height: 0; background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), var(--surface); }
.puzzles-page-heading { max-width: none; margin: 0; text-align: left; }
.puzzles-page-heading h1 { font-family: var(--font-display); font-size: clamp(1.7rem, 3.6vw, 2.5rem); letter-spacing: -0.02em; background: linear-gradient(100deg, var(--text) 20%, var(--accent-text) 60%, var(--action)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.puzzles-page-heading > p { margin: 0; font-size: var(--text-sm); line-height: 1.55; }
.pz-hero-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.pz-hero-chips li { padding: 6px 14px; color: var(--text); font-size: var(--text-sm); font-weight: 600; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; }
.puzzle-intro .puzzle-stage-actions { display: flex; justify-content: center; margin-top: var(--space-4); }
.puzzle-intro .hm-streak { text-align: left; margin: 0; }
.puzzles-hero-row { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(200px, 260px); gap: var(--space-5); align-items: center; }
.puzzles-hero-row h1 { margin: 0 0 var(--space-2); }
.puzzles-hero-card { display: grid; gap: var(--space-2); justify-items: start; padding: var(--space-3); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-md); }
.puzzles-hero-card .ghost-button { min-height: 36px; padding: 0 14px; font-size: var(--text-sm); }
@media (max-width: 760px) { .puzzles-hero-row { grid-template-columns: minmax(0, 1fr) !important; gap: var(--space-3); } }

/* The tournaments header: a slim band, the title and one line on the left, the player's tournament rank on the right. */
.tournaments-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: var(--space-5); align-items: center; padding-block: var(--space-4); background: radial-gradient(ellipse at 20% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), var(--surface); }
.tournaments-hero h1 { margin: 0 0 var(--space-2); font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.1rem); letter-spacing: -0.02em; background: linear-gradient(100deg, var(--text) 20%, var(--accent-text) 60%, var(--action)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.tournaments-hero p { margin: 0; font-size: var(--text-sm); line-height: 1.55; }
.tournaments-hero .tournament-rating { display: grid; gap: 6px; padding: var(--space-3); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-md); }
.tournaments-hero .tournament-rating[hidden] { display: none; }
.tournaments-hero .profile-rating-rank, .tournaments-hero .profile-rating-points strong { font-size: 1.15rem; }
.tournaments-hero .profile-rating-bar { height: 6px; }
.tournaments-hero .profile-side-copy { margin: 0; font-size: var(--text-xs); }
.tournaments-hero .sg-medals { grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 4px; justify-content: start; }
.tournaments-hero .sg-medal { padding: 0; }
.tournaments-hero .sg-medal-art { width: 34px; height: 40px; }
.tournaments-hero .sg-medal-name, .tournaments-hero .sg-medal-tag { display: none; }
@media (max-width: 760px) { .tournaments-hero { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); } }

/* The admin pages: links to the other admin pages under the shared header. */
.admin-subnav { display: flex; flex-wrap: wrap; gap: var(--space-2); width: min(calc(100% - 2 * var(--space-4)), 1200px); margin: var(--space-4) auto var(--space-3); }

/* ── Profile: rating, streaks and badges ── */
.profile-rating { display: grid; gap: var(--space-3); margin: 0 0 var(--space-5); padding: var(--space-4); background: var(--surface-2); border: 1px solid var(--line); border-radius: 18px; }
.profile-rating[hidden] { display: none; }
.profile-rating-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-3); }
.profile-rating-rank { display: block; margin-top: 2px; font-family: var(--font-display); font-size: 1.6rem; color: var(--text); }
.profile-rating-points { text-align: right; }
.profile-rating-points strong { display: block; font-size: 1.6rem; color: var(--accent-text); }
.profile-rating-points span { color: var(--muted); font-size: var(--text-sm); }
.profile-rating-scale { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); margin-bottom: -6px; color: var(--muted); font-size: var(--text-sm); }
.profile-rating-scale strong { color: var(--text); font-size: var(--text-sm); }
.profile-rating-streaks .sg-flames { --flame: 30px; gap: 5px; margin-bottom: 8px; }
.profile-rating-bar { height: 10px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; }
.profile-rating-bar span { display: block; height: 100%; width: 0; background: var(--action); border-radius: 999px; transition: width .6s; }
.profile-rating .profile-side-copy { margin: 0; color: var(--muted); font-size: var(--text-sm); }
.profile-rating-streaks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.profile-rating-streaks div { padding: var(--space-3); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-md); }
.profile-rating-streaks strong { display: block; font-size: 1.4rem; color: var(--text); }
.profile-rating-streaks span { color: var(--muted); font-size: var(--text-sm); }
.profile-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.profile-badges li { padding: 5px 10px; color: var(--text); font-size: var(--text-xs); font-weight: 700; background: var(--bg); border: 1px solid var(--accent); border-radius: 999px; }
.profile-badges li.profile-badges-empty { color: var(--muted); font-weight: 400; border-style: dashed; border-color: var(--line); }

/* Admin stats: the monthly challenge form */
.mc-form, .mc-goal, .mc-actions { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); margin: var(--space-2) 0; }
.mc-form label, .mc-goal label { display: grid; gap: 4px; color: var(--muted); font-size: var(--text-sm); }
.mc-form input, .mc-goal input, .mc-goal select { min-height: 40px; padding: 6px 10px; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-md); }
.mc-goal input[type="number"] { width: 90px; }

/* The tournament rating card on the tournaments page (assets/tournament-rating.js). */
.tournament-rating { display: grid; gap: var(--space-3); margin-top: var(--space-4); padding: var(--space-4); background: var(--surface-2); border: 1px solid var(--line); border-radius: 18px; }
.tournament-rating[hidden] { display: none; }
.tournament-rating .profile-side-copy { margin: 0; color: var(--muted); font-size: var(--text-sm); }
.tournament-rating .sg-medals-small { justify-content: start; }
.tournament-rating .profile-label { color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-size: .76rem; }
.mc-goal label[hidden] { display: none; }

.mc-table { width: 100%; margin: var(--space-2) 0 var(--space-3); border-collapse: collapse; font-size: var(--text-sm); }
.mc-table th, .mc-table td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--line); color: var(--text); }
.mc-table th { color: var(--muted); font-weight: 600; }

/* ── Badges sorted by type, one collapsible group each ── */
.sg-badge-groups { display: grid; gap: var(--space-2); }
.sg-badge-group { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-md); }
.sg-badge-group > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 10px 14px; font-weight: 700; cursor: pointer; list-style: none; }
.sg-badge-group > summary::-webkit-details-marker { display: none; }
.sg-badge-group > summary small { margin-left: auto; color: var(--muted); font-weight: 500; }
.sg-badge-group > summary::after { content: "+"; color: var(--accent-text); font-size: 1.3rem; line-height: 1; }
.sg-badge-group[open] > summary::after { content: "\2212"; }
.sg-badge-group > .sg-medals { padding: 0 var(--space-3) var(--space-3); }
p.sg-medals-empty { color: var(--muted); }

/* ── Profile: both ratings side by side, statistics cards on the full width, notes and the page text at the end ── */
.profile-rating-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.profile-rating-col { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-3); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-md); }
.profile-rating-col .profile-rating-rank { font-size: 1.3rem; }
.profile-rating-col .profile-rating-points strong { font-size: 1.3rem; }
@media (max-width: 700px) { .profile-rating-pair { grid-template-columns: minmax(0, 1fr); } }
.profile-stats-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.profile-stats-grid .profile-subcard { padding: var(--space-4) var(--space-5); }
.profile-stats-grid .profile-subcard h3 { margin-bottom: 0; }
.profile-stats-grid .profile-game-grid { margin-top: var(--space-3); }
.profile-mark { color: var(--muted); font-size: .7em; font-weight: 500; }
.profile-notes { margin-top: var(--space-5); padding: var(--space-4) var(--space-5); color: var(--muted); font-size: var(--text-sm); border: 1px dashed var(--line); border-radius: var(--radius-md); }
.profile-notes h3 { margin: 0 0 var(--space-2); font-size: var(--text-md); color: var(--text); }
.profile-notes p { margin: 4px 0; line-height: 1.6; }
.profile-about { margin-top: var(--space-5); padding: var(--space-4) var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: 24px; }
.profile-about h2 { margin: 0 0 var(--space-2); font-size: var(--text-lg); }
.profile-about .profile-side-copy { margin: 0 0 var(--space-2); }

/* Phones: the section list is one scrolling row of short buttons instead of a tall stack with a line of text under each. */
@media (max-width: 960px) {
    .profile-tabs { display: flex; gap: var(--space-2); margin-top: var(--space-3); overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
    .profile-tab { flex: 0 0 auto; width: auto; padding: 10px 14px; border-radius: 999px; white-space: nowrap; }
    .profile-tab strong { margin: 0; font-size: .92rem; }
    .profile-tab span { display: none; }
    .profile-side { padding: 18px; }
}

/* ── Leaderboard: notes and the page text at the end, the board list as one scrolling row on phones ── */
.leaderboard-your-rank { margin: var(--space-3) 0 var(--space-1); color: var(--accent-text); font-weight: 700; }
.leaderboard-marks { margin: 0 0 var(--space-4); color: var(--muted); font-size: var(--text-sm); }
.leaderboard-notes { margin-top: var(--space-5); padding: var(--space-4) var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: 24px; }
.leaderboard-notes h2 { margin: 0 0 var(--space-2); font-size: var(--text-lg); }
.leaderboard-notes p { margin: 0 0 var(--space-2); color: var(--muted); font-size: var(--text-sm); line-height: 1.7; }
.leaderboard-notes .lb-foot { margin: 4px 0; }
.leaderboard-notes .lb-mark { color: var(--accent-text); font-weight: 700; }
@media (max-width: 960px) {
    .leaderboard-tabs { display: flex; gap: var(--space-2); margin-top: var(--space-3); overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
    .leaderboard-tab { flex: 0 0 auto; width: auto; padding: 10px 14px; border-radius: 999px; white-space: nowrap; }
    .leaderboard-side { padding: 18px; }
}
.tournaments-hero .profile-rating-head { flex-wrap: nowrap; align-items: flex-end; }
.tournaments-hero .profile-rating-points span { white-space: nowrap; font-size: var(--text-xs); }
@media (max-width: 760px) { .puzzles-hero-card { padding: 0; background: none; border: 0; grid-auto-flow: column; justify-content: start; align-items: center; gap: var(--space-3); } .puzzle-intro { padding: var(--space-4); } }
.leaderboard-layout > *, .profile-layout > * { min-width: 0; }
@media (max-width: 960px) { .leaderboard-side h1, .profile-side h1 { margin: 6px 0 0; font-size: 1.7rem; } .leaderboard-side .eyebrow, .profile-side .eyebrow { margin: 0; } }

/* ── Profile: the theme fold shows the colors in use, points by game as small cards ── */
.profile-theme-summary { display: flex; align-items: center; gap: var(--space-3); cursor: pointer; padding: 8px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-md); list-style: none; }
.profile-theme-summary::-webkit-details-marker { display: none; }
.profile-theme-summary .sg-swatch { width: 28px; height: 28px; }
.profile-theme-summary::after { content: "\25BE"; margin-left: auto; color: var(--accent-text); font-size: 1.1rem; }
.profile-theme-fold[open] .profile-theme-summary::after { content: "\25B4"; }
.profile-game-points { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); margin: 6px 0 0; padding: 0; list-style: none; }
.profile-game-points li { display: grid; gap: 2px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-md); }
.profile-game-points li strong { font-size: var(--text-sm); color: var(--text); }
.profile-game-points li span { color: var(--accent-text); font-size: var(--text-sm); font-weight: 700; }
.profile-game-points li small { color: var(--muted); font-size: var(--text-xs); }
.profile-game-points li.profile-game-points-empty { grid-column: 1 / -1; color: var(--muted); border-style: dashed; }

/* Links inside a line of text are underlined, so they do not rely on color alone. */
main p a:not([class]), .leaderboard-note a, .leaderboard-marks a, .profile-side-copy a, .legal-section p a { text-decoration: underline; text-underline-offset: 2px; }