/* ============================================================
   aichamp - Console Theme
   Tokenized from the Pencil design kit
   ============================================================ */

/* --- Reset & Base --- */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Use one icon treatment for every native disclosure control. */
details > summary {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    list-style: none;
}

details > summary::-webkit-details-marker {
    display: none;
}

details > summary::before {
    content: "";
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    flex: 0 0 auto;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.2s;
}

details[open] > summary::before {
    transform: translateY(-0.08rem) rotate(45deg);
}

/* --- Open Challenges --- */

.challenge-page-header {
    align-items: flex-start;
    gap: 1.5rem;
}

.challenge-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.7fr);
    gap: 1.5rem;
    overflow: hidden;
    margin-bottom: 1rem;
    padding: clamp(1.2rem, 3vw, 2.2rem);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at top right, rgba(var(--accent-rgb), 0.16), transparent 42%),
        linear-gradient(145deg, var(--bg-tertiary), var(--bg-secondary));
    box-shadow: var(--shadow);
}

.challenge-hero::after {
    position: absolute;
    right: -3rem;
    bottom: -4rem;
    width: 13rem;
    height: 13rem;
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.challenge-hero-main {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.challenge-hero-main .challenge-badges {
    justify-content: flex-start;
    margin: 1.2rem 0 0.8rem;
}

.challenge-hero-title {
    max-width: 18ch;
    font-size: clamp(1.7rem, 4vw, 3rem);
    line-height: 1.08;
}

.challenge-lead {
    max-width: 72ch;
    margin-top: 0.55rem;
    color: var(--text-secondary);
    line-height: 1.65;
}

.challenge-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1.25rem;
}

.challenge-hero-stats {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: center;
    gap: 0.6rem;
}

.challenge-hero-stats > div {
    min-width: 0;
    padding: 0.8rem;
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-md);
    background: rgba(var(--color-surface-flat-rgb), 0.62);
}

.challenge-hero-stats span,
.challenge-publication-defaults span {
    display: block;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.challenge-hero-stats strong,
.challenge-publication-defaults strong {
    display: block;
    overflow: hidden;
    margin-top: 0.2rem;
    color: var(--text-primary);
    font-size: 0.85rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.challenge-notice,
.challenge-admin-panel,
.challenge-section,
.challenge-card {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
}

.challenge-section {
    background:
        linear-gradient(145deg, rgba(var(--accent-rgb), 0.025), transparent 42%),
        var(--bg-secondary);
}

.challenge-notice {
    margin-bottom: 1.25rem;
    padding: 0.9rem 1rem;
    color: var(--color-warning);
}

.challenge-admin-panel {
    margin-bottom: 1.25rem;
    padding: 1rem;
}

.challenge-admin-panel > summary {
    cursor: pointer;
    color: var(--text-label);
    font-weight: 700;
}

.challenge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 22rem));
    gap: 1rem;
    justify-content: start;
    align-items: stretch;
}

.challenge-grid-compact {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 22rem));
    gap: 0.85rem;
    justify-content: start;
}

.challenge-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1rem;
    padding: 1.15rem;
}

.challenge-card-compact {
    gap: 0.75rem;
    padding: 0.95rem;
}

.challenge-card-compact p {
    margin: 0;
}

.challenge-card > .btn {
    align-self: flex-start;
    margin-top: auto;
}

.challenge-card-header,
.challenge-section-heading,
.challenge-version-bar,
.challenge-inline-form,
.challenge-filter-form,
.challenge-score-row,
.challenge-badges {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.challenge-card-header,
.challenge-section-heading {
    justify-content: space-between;
    align-items: flex-start;
}

.challenge-card h2,
.challenge-section h2 {
    font-size: 1rem;
    color: var(--text-primary);
}

.challenge-card p,
.challenge-section p {
    color: var(--text-secondary);
    line-height: 1.55;
}

.challenge-badges {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.challenge-card-meta,
.challenge-contract {
    display: grid;
    gap: 0.55rem;
}

.challenge-card-meta > div,
.challenge-contract > div {
    display: grid;
    grid-template-columns: minmax(105px, 0.8fr) 1.4fr;
    gap: 0.65rem;
}

.challenge-card-meta dt,
.challenge-contract dt {
    color: var(--text-muted);
}

.challenge-card-meta dd,
.challenge-contract dd {
    min-width: 0;
    color: var(--text-primary);
}

.challenge-runtime-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.challenge-version-bar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto;
    justify-content: stretch;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-md);
    background: var(--bg-flat);
    color: var(--text-secondary);
}

.challenge-section-nav {
    position: sticky;
    top: 48px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    overflow-x: auto;
    margin-bottom: 1rem;
    padding: 0.45rem;
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-md);
    background: rgba(var(--color-surface-flat-rgb), 0.94);
    box-shadow: var(--shadow);
    scrollbar-width: thin;
}

.challenge-section-nav a {
    display: inline-flex;
    min-height: 2.35rem;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.7rem;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
}

.challenge-section-nav a:hover,
.challenge-section-nav a:focus-visible {
    background: var(--accent-dim);
    color: var(--text-primary);
}

.challenge-section-nav .icon {
    color: var(--accent);
}

.challenge-version-control,
.challenge-fingerprint {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.challenge-fingerprint {
    min-width: 0;
    padding-left: 1rem;
    border-left: 1px solid var(--border-flat);
}

.challenge-fingerprint code {
    color: var(--text-primary);
}

.challenge-meta-label,
.challenge-section-kicker {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.challenge-section-kicker {
    display: block;
    margin-bottom: 0.28rem;
    color: var(--accent);
}

.challenge-inline-form .form-select {
    width: auto;
}

.challenge-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 0.85fr);
    gap: 1rem;
    align-items: start;
}

.challenge-leaderboard-section {
    margin-bottom: 1rem;
    scroll-margin-top: 7rem;
}

.challenge-draft-layout {
    max-width: 820px;
    margin: 0 auto;
}

.challenge-main-column,
.challenge-side-column {
    display: grid;
    min-width: 0;
    gap: 1rem;
}

.challenge-section {
    min-width: 0;
    padding: clamp(1rem, 2vw, 1.25rem);
    box-shadow: 0 1px 0 rgba(var(--color-border-panel-rgb), 0.12);
}

#challenge-task,
#challenge-submit,
#attempts,
#admin-attempts {
    scroll-margin-top: 7rem;
}

.challenge-section > h2,
.challenge-section-heading {
    margin-bottom: 0.85rem;
}

.challenge-carry-form {
    margin-bottom: 0.85rem;
}

.challenge-sidebar-disclosure > summary {
    min-height: 1.6rem;
    cursor: pointer;
    color: var(--text-primary);
    transition: color 0.18s;
}

.challenge-sidebar-disclosure > summary:hover {
    color: var(--accent);
}

.challenge-sidebar-disclosure > summary:focus-visible {
    border-radius: var(--radius-sm);
    outline: 2px solid var(--accent);
    outline-offset: 0.3rem;
}

.challenge-sidebar-disclosure > summary h2 {
    margin: 0;
}

.challenge-sidebar-heading {
    display: block;
}

.challenge-sidebar-heading .challenge-section-kicker {
    margin-bottom: 0.2rem;
}

.challenge-sidebar-disclosure-body {
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border-flat);
}

.challenge-sidebar-section.challenge-admin-panel {
    margin-bottom: 0;
}

.challenge-offline-steps {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
    list-style: none;
    counter-reset: challenge-offline-step;
}

.challenge-offline-steps > li {
    position: relative;
    min-width: 0;
    padding-left: 2rem;
    counter-increment: challenge-offline-step;
}

.challenge-offline-steps > li::before {
    position: absolute;
    top: -0.05rem;
    left: 0;
    display: grid;
    width: 1.35rem;
    height: 1.35rem;
    place-items: center;
    border: 1px solid rgba(var(--accent-rgb), 0.45);
    border-radius: 50%;
    background: var(--accent-dim);
    color: var(--accent);
    content: counter(challenge-offline-step);
    font-size: 0.68rem;
    font-weight: 800;
}

.challenge-offline-steps strong,
.challenge-offline-steps span {
    display: block;
}

.challenge-offline-steps strong {
    color: var(--text-primary);
    font-size: 0.82rem;
}

.challenge-offline-steps span {
    margin-top: 0.25rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1.45;
}

.challenge-offline-command {
    margin-top: 0.55rem;
}

.challenge-client-callout {
    padding: 0.7rem 0.75rem;
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: var(--radius-md);
    background: rgba(var(--accent-rgb), 0.05);
}

.challenge-client-callout a {
    font-weight: 700;
}

.challenge-proxy-guide {
    margin-top: 1.25rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--border-flat);
}

.challenge-proxy-guide h3 {
    margin-bottom: 0.55rem;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.challenge-proxy-guide > p {
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.55;
}

.challenge-proxy-guide .challenge-client-callout {
    margin-top: 1rem;
}

.challenge-task-rendered {
    max-height: min(70vh, 52rem);
    overflow: auto;
    overflow-wrap: anywhere;
    margin: 0;
    padding: 1rem;
    border-top: 1px solid var(--border-flat);
    scrollbar-color: var(--border-light) var(--bg-flat);
    scrollbar-width: thin;
}

.challenge-task-disclosure {
    overflow: hidden;
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-md);
    background: var(--bg-flat);
}

.challenge-task-disclosure > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.25rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    list-style: none;
    color: var(--text-primary);
    font-size: 0.84rem;
    font-weight: 700;
    transition: background-color 0.18s, color 0.18s;
}

.challenge-task-disclosure > summary::-webkit-details-marker {
    display: none;
}

.challenge-task-disclosure > summary::marker {
    content: "";
}

.challenge-task-disclosure > summary::before {
    display: none;
}

.challenge-task-disclosure > summary:hover {
    color: var(--text-primary);
    background: var(--accent-dim);
}

.challenge-task-disclosure > summary:focus-visible {
    color: var(--text-primary);
    background: var(--accent-dim);
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.challenge-task-disclosure > summary:hover .challenge-form-hint,
.challenge-task-disclosure > summary:focus-visible .challenge-form-hint {
    color: var(--text-secondary);
}

.challenge-task-disclosure > summary:hover .challenge-task-disclosure-icon,
.challenge-task-disclosure > summary:focus-visible .challenge-task-disclosure-icon {
    color: var(--accent);
}

.challenge-task-disclosure-label {
    display: grid;
    gap: 0.1rem;
}

.challenge-task-disclosure-label .challenge-form-hint {
    font-weight: 500;
}

.challenge-task-label-open {
    display: none;
}

.challenge-task-disclosure[open] .challenge-task-label-closed {
    display: none;
}

.challenge-task-disclosure[open] .challenge-task-label-open {
    display: inline;
}

.challenge-task-disclosure-icon {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--text-secondary);
    transition: transform 0.18s;
}

.challenge-task-disclosure[open] .challenge-task-disclosure-icon {
    transform: rotate(180deg);
}

.challenge-command {
    overflow-wrap: anywhere;
    margin-top: 0.8rem;
    padding: 0.8rem;
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-sm);
    background: var(--terminal-bg);
    color: var(--text-primary);
    box-shadow: inset 3px 0 0 rgba(var(--accent-rgb), 0.55);
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.challenge-participant-link {
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: rgba(var(--accent-rgb), 0.45);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

.challenge-participant-link:hover,
.challenge-participant-link:focus-visible {
    text-decoration-color: currentColor;
}

.challenge-filter-form {
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
}

.challenge-filter-form label {
    display: grid;
    gap: 0.45rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.challenge-filter-form .btn {
    align-self: end;
    min-height: 2.5rem;
}

.challenge-table-wrap {
    overflow-x: auto;
}

.challenge-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
}

.challenge-table th,
.challenge-table td {
    padding: 0.62rem 0.55rem;
    border-bottom: 1px solid var(--border-flat);
    text-align: left;
    white-space: nowrap;
}

.challenge-table th {
    color: var(--text-muted);
    font-weight: 600;
}

.challenge-table tbody tr {
    transition: background-color 0.18s;
}

.challenge-table tbody tr:hover {
    background: var(--accent-dim);
}

.challenge-failure-cell {
    width: 11rem;
    max-width: 11rem;
    white-space: normal !important;
}

.challenge-failure-code {
    display: block;
    max-width: 100%;
    overflow: hidden;
    margin-bottom: 0.45rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.challenge-failure-action {
    width: max-content;
}

.challenge-mode-label {
    display: inline-flex;
    padding: 0.12rem 0.38rem;
    border: 1px solid var(--border-flat);
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.challenge-model-tags,
.challenge-attempt-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.challenge-evidence-stack {
    display: inline-grid;
    justify-items: start;
    gap: 0.35rem;
}

.challenge-evidence-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 100%;
    white-space: normal;
}

.challenge-evidence-badge .challenge-evidence-check {
    width: 0.85em;
    height: 0.85em;
}

.challenge-attempt-actions {
    margin-top: 0.15rem;
    gap: 0.65rem;
}

.challenge-preview-action {
    white-space: nowrap;
}

.challenge-like-action {
    white-space: nowrap;
}

.challenge-like-action.is-active {
    border-color: var(--accent);
    background: var(--accent-dim);
    color: var(--accent);
}

.challenge-like-action:disabled {
    cursor: progress;
}

.challenge-like-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.2em;
    font-variant-numeric: tabular-nums;
}

.challenge-like-count-static {
    gap: 0.3rem;
    min-height: 2rem;
    padding: 0 0.35rem;
    color: var(--text-muted);
}

.challenge-like-count-static .icon {
    width: 1rem;
    height: 1rem;
}

.challenge-attempt-list,
.challenge-form {
    display: grid;
    gap: 0.8rem;
}

.challenge-attempt {
    display: grid;
    gap: 0.45rem;
    padding: 0.8rem;
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-md);
    background: var(--bg-flat);
}

.challenge-attempt-meta,
.challenge-form-hint,
.challenge-form-status {
    color: var(--text-muted);
    font-size: 0.82rem;
}

.challenge-score-row {
    flex-wrap: wrap;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.challenge-review-summary {
    display: grid;
    gap: 0.7rem;
    margin-top: 0.25rem;
    padding: 0.8rem;
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
}

.challenge-review-heading,
.challenge-review-scores {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
}

.challenge-review-heading {
    justify-content: space-between;
}

.challenge-review-heading h3 {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.challenge-review-scores {
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.challenge-review-scores small {
    display: block;
    margin-top: 0.2rem;
    color: var(--text-muted);
}

.challenge-result-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.challenge-model-cell-content {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.4rem;
}

.challenge-note-badge {
    position: static;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.45rem;
    height: 1.45rem;
    padding: 0;
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-sm);
    background: var(--color-warning);
    color: var(--bg-primary);
    cursor: help;
    line-height: 0;
}

.challenge-note-badge:hover,
.challenge-note-badge:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.challenge-note-badge svg {
    display: block;
    width: 0.85rem;
    height: 0.85rem;
    transform: translate(0.125px, 0.6px);
    vertical-align: middle;
}

.challenge-note-tooltip {
    position: fixed;
    z-index: 350;
    width: max-content;
    max-width: min(28rem, calc(100vw - 24px));
    max-height: min(18rem, calc(100vh - 24px));
    overflow: auto;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    box-shadow: var(--shadow-lg);
    color: var(--text-primary);
    font-size: 0.78rem;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    pointer-events: none;
}

.challenge-note-tooltip.hidden {
    display: none;
}

.challenge-note-warning {
    color: var(--color-warning);
}

.challenge-note-input {
    min-height: 6.5rem;
    resize: vertical;
    line-height: 1.45;
}

.challenge-inline-delete-form {
    display: inline-flex;
    margin: 0;
}

.challenge-delete-confirm-body {
    display: grid;
    gap: 0.8rem;
    padding: 1.5rem;
}

.challenge-delete-confirm-body p {
    margin: 0;
}

.challenge-delete-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
    margin-top: 0.4rem;
}

.challenge-pagination {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.challenge-pagination > :last-child {
    justify-self: end;
}

.challenge-pagination-summary {
    margin: 0.75rem 0 0;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.challenge-review-feedback {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.challenge-attempt-note {
    margin-top: 0.55rem;
    padding-left: 0.65rem;
    border-left: 2px solid var(--color-warning);
}

.challenge-attempt-note p {
    margin: 0.2rem 0 0;
    color: var(--text-primary);
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.challenge-error {
    color: var(--text-error) !important;
}

.challenge-form label {
    display: grid;
    gap: 0.35rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.challenge-form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 1rem;
}

.modal.challenge-create-modal {
    max-width: 680px;
}

.challenge-create-modal .challenge-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0;
}

.challenge-create-modal-body {
    display: grid;
    justify-items: start;
    gap: 1rem;
    padding: 1.5rem;
}

.challenge-form-wide {
    grid-column: 1 / -1;
}

.challenge-check {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center;
    gap: 0.5rem !important;
}

.challenge-check input {
    width: auto;
}

.challenge-draft-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1.4rem 0;
    list-style: none;
}

.challenge-draft-steps li {
    display: flex;
    min-width: 0;
    gap: 0.65rem;
    padding: 0.85rem;
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-md);
    background: var(--bg-flat);
}

.challenge-draft-steps li > span {
    display: inline-flex;
    width: 1.7rem;
    height: 1.7rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-light);
    border-radius: 50%;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 800;
}

.challenge-draft-steps li.is-complete,
.challenge-draft-steps li.is-current {
    border-color: rgba(var(--accent-rgb), 0.35);
}

.challenge-draft-steps li.is-complete > span,
.challenge-draft-steps li.is-current > span {
    border-color: var(--accent);
    color: var(--accent);
}

.challenge-draft-steps strong,
.challenge-draft-steps small {
    display: block;
}

.challenge-draft-steps strong {
    color: var(--text-primary);
    font-size: 0.78rem;
}

.challenge-draft-steps small {
    margin-top: 0.3rem;
    color: var(--text-muted);
    font-size: 0.7rem;
    line-height: 1.45;
}

.challenge-draft-form {
    padding-top: 1rem;
    border-top: 1px solid var(--border-flat);
}

.challenge-submit-section {
    border-color: rgba(var(--accent-rgb), 0.38);
    background:
        linear-gradient(145deg, rgba(var(--accent-rgb), 0.08), transparent 55%),
        var(--bg-secondary);
}

.challenge-publication-defaults {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    margin: 0.85rem 0;
}

.challenge-publication-defaults > div {
    min-width: 0;
    padding: 0.65rem;
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-sm);
    background: var(--bg-flat);
}

.challenge-publication-advanced {
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-md);
    background: var(--bg-flat);
}

.challenge-publication-advanced > summary {
    min-height: 2.5rem;
    padding: 0.65rem 0.75rem;
    cursor: pointer;
    color: var(--text-label);
    font-size: 0.82rem;
    font-weight: 700;
}

.challenge-publication-advanced-body {
    display: grid;
    gap: 0.65rem;
    padding: 0 0.75rem 0.75rem;
}

.challenge-version-warning {
    padding: 0.65rem;
    border-left: 2px solid var(--color-warning);
    background: rgba(var(--color-warning-rgb), 0.08);
    color: var(--color-warning) !important;
    font-size: 0.78rem;
}

@media (min-width: 901px) {
    .challenge-side-column {
        position: sticky;
        top: 7rem;
        max-height: calc(100vh - 8rem);
        overflow-y: auto;
        padding-right: 0.2rem;
        scrollbar-color: var(--border-light) transparent;
        scrollbar-width: thin;
    }
}

@media (max-width: 900px) {
    .challenge-hero {
        grid-template-columns: 1fr;
    }

    .challenge-detail-layout {
        grid-template-columns: 1fr;
    }

    .challenge-form-grid {
        grid-template-columns: 1fr;
    }

    .challenge-create-modal .challenge-form-grid {
        grid-template-columns: 1fr;
    }

    .challenge-form-wide {
        grid-column: auto;
    }

    .challenge-version-bar,
    .challenge-draft-steps {
        grid-template-columns: 1fr;
    }

    .challenge-fingerprint {
        padding-top: 0.7rem;
        padding-left: 0;
        border-top: 1px solid var(--border-flat);
        border-left: 0;
    }

    .challenge-pagination {
        grid-template-columns: 1fr 1fr;
    }

    .challenge-pagination > :first-child {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
    }

    .challenge-pagination > :nth-child(2) {
        grid-column: 1 / -1;
        grid-row: 1;
        text-align: center;
    }

    .challenge-pagination > :last-child {
        grid-column: 2;
        grid-row: 2;
    }
}

@media (max-width: 600px) {
    .challenge-grid,
    .challenge-grid-compact {
        grid-template-columns: minmax(0, 1fr);
    }

    .challenge-hero {
        padding: 1rem;
    }

    .challenge-hero-stats,
    .challenge-publication-defaults {
        grid-template-columns: 1fr;
    }

    .challenge-hero-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .challenge-section-nav {
        margin-right: -0.5rem;
        margin-left: -0.5rem;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
    }

    .challenge-version-control {
        align-items: stretch;
        flex-direction: column;
    }

    .challenge-inline-form .form-select {
        width: 100%;
    }

    .challenge-section-heading {
        gap: 0.85rem;
        flex-direction: column;
    }
}

:root {
    --color-bg-top: #111827;
    --color-bg-bottom: #080B12;
    --color-surface-base: #101722;
    --color-surface-panel: #1A2230;
    --color-surface-flat: #0C111A;
    --color-surface-flat-rgb: 12, 17, 26;
    --color-surface-input: #171F2C;
    --color-surface-danger: #190C11;
    --color-button-primary: #BDFC63;
    --color-button-hover: #D3FF91;
    --color-button-disabled: #252C37;
    --color-text-primary: #F4F7FB;
    --color-text-secondary: #A8B1C0;
    --color-text-muted: #737D8E;
    --color-text-dim: #606A7B;
    --color-text-dimmer: #4F5969;
    --color-text-label: #DCE3EC;
    --color-text-link: #BDFC63;
    --color-on-accent: #10151D;
    --color-text-error: #FB7185;
    --color-text-error-muted: #B56B76;
    --color-border-default: #293244;
    --color-border-panel: #374256;
    --color-border-panel-rgb: 55, 66, 86;
    --color-border-flat: #222A39;
    --color-border-input: #3B465A;
    --color-border-error: #BE475D;
    --color-border-disabled: #244233;
    --color-border-accent: #BDFC63;
    --color-border-accent-hover: #D8FF9D;
    --color-logo-accent-start: #BDFC63;
    --color-logo-accent-start-rgb: 189, 252, 99;
    --color-logo-accent-end: #78E94B;
    --color-logo-accent-end-rgb: 120, 233, 75;
    --color-preview-frame-bg: #ffffff;

    --bg-top: var(--color-bg-top);
    --bg-primary: var(--color-bg-bottom);
    --bg-secondary: var(--color-surface-base);
    --bg-tertiary: var(--color-surface-panel);
    --bg-flat: var(--color-surface-flat);
    --bg-input: var(--color-surface-input);
    --bg-danger: var(--color-surface-danger);
    --bg-hover: var(--color-button-hover);
    --text-primary: var(--color-text-primary);
    --text-secondary: var(--color-text-secondary);
    --text-muted: var(--color-text-muted);
    --text-dim: var(--color-text-dim);
    --text-dimmer: var(--color-text-dimmer);
    --text-label: var(--color-text-label);
    --text-link: var(--color-text-link);
    --text-error: var(--color-text-error);
    --text-error-muted: var(--color-text-error-muted);
    --accent-rgb: 189, 252, 99;
    --accent: var(--color-border-accent);
    --accent-hover: var(--color-border-accent-hover);
    --accent-dim: rgba(var(--accent-rgb), 0.12);
    --surface-inner-glow: linear-gradient(145deg, rgba(var(--accent-rgb), 0.06), transparent 48%);
    --border: var(--color-border-default);
    --border-light: var(--color-border-panel);
    --border-flat: var(--color-border-flat);
    --border-input: var(--color-border-input);
    --border-error: var(--color-border-error);
    --border-disabled: var(--color-border-disabled);
    --button-primary: var(--color-button-primary);
    --button-hover: var(--color-button-hover);
    --button-disabled: var(--color-button-disabled);
    --logo-accent-start: var(--color-logo-accent-start);
    --logo-accent-end: var(--color-logo-accent-end);

    /* Status colors */
    --status-connected: var(--color-success);
    --status-working: var(--accent);
    --status-submitted: var(--kind-user-message);
    --status-disconnected: #555555;
    --color-gray-rgb: 107, 114, 128;
    --color-slate-rgb: 148, 163, 184;

    /* Event kind colors */
    --kind-user-message: #38bdf8;
    --kind-user-message-rgb: 56, 189, 248;
    --kind-user-message-light: #7dd3fc;

    --kind-assistant-message: #34d399;
    --kind-assistant-message-rgb: 52, 211, 153;
    --kind-assistant-message-light: #6ee7b7;

    --kind-tool-use: #facc15;
    --kind-tool-use-rgb: 250, 204, 21;

    --kind-mcp: #f97316;
    --kind-mcp-rgb: 249, 115, 22;

    --kind-tool-result: #888888;
    --kind-tool-result-rgb: 136, 136, 136;

    --kind-skill: #a78bfa;
    --kind-skill-rgb: 139, 92, 246;
    --kind-subagent: #14b8a6;
    --kind-subagent-rgb: 20, 184, 166;

    --kind-error: #ef4444;
    --kind-error-rgb: 239, 68, 68;
    --kind-error-light: #f87171;

    --kind-system: #8b5cf6;
    --kind-system-rgb: 139, 92, 246;

    /* Rank colors */
    --rank-gold: #FACC15;
    --rank-gold-rgb: 250, 204, 21;
    --rank-silver: #CBD5E1;
    --rank-silver-rgb: 203, 213, 225;
    --rank-bronze: #F59E0B;
    --rank-bronze-rgb: 245, 158, 11;

    /* Semantic status colors */
    --color-success: #34D399;
    --color-success-rgb: 52, 211, 153;
    --color-warning: #FACC15;
    --color-warning-rgb: 250, 204, 21;
    --color-info: #38BDF8;
    --color-info-rgb: 56, 189, 248;
    --color-ready: #2DD4BF;
    --color-ready-rgb: 45, 212, 191;
    --color-evaluated: #A78BFA;
    --color-evaluated-rgb: 167, 139, 250;
    --color-live: #FB7185;
    --color-live-rgb: 251, 113, 133;

    /* Danger button colors */
    --danger-bg: #1a0808;
    --danger-bg-hover: #2a0a0a;
    --danger-border: #7f1d1d;
    --danger-border-hover: #991b1b;

    /* Breakdown chart colors */
    --breakdown-perf: #a855f7;
    --breakdown-efficiency: #f59e0b;

    /* Terminal / code block colors */
    --terminal-bg: #050505;
    --terminal-bg-alt: #080808;
    --terminal-bg-header: #0a0a0a;
    --terminal-border: #1a1a1a;
    --terminal-border-row: #111111;
    --terminal-text: #ccc;
    --terminal-text-dim: #999;
    --terminal-text-muted: #777;
    --terminal-text-heading: #888;
    --terminal-green: #4ade80;
    --terminal-green-dim: #5a9;
    --terminal-red: #e66;
    --terminal-red-bg-rgb: 239, 68, 68;

    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;

    --shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);

    --font-sans: "Play", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", "Courier New", monospace;
}

/* --- B&W Theme Override --- */
[data-theme="bw"] {
    --color-bg-top: #0a0a0a;
    --color-bg-bottom: #050505;
    --color-surface-base: #111111;
    --color-surface-panel: #181818;
    --color-surface-flat: #0e0e0e;
    --color-surface-flat-rgb: 14, 14, 14;
    --color-surface-input: #0c0c0c;
    --color-surface-danger: #1a0a0a;
    --color-button-primary: #333333;
    --color-button-hover: #444444;
    --color-button-disabled: #222222;
    --color-text-primary: #e0e0e0;
    --color-text-secondary: #999999;
    --color-text-muted: #777777;
    --color-text-dim: #666666;
    --color-text-dimmer: #555555;
    --color-text-label: #bbbbbb;
    --color-text-link: #ffffff;
    --color-text-error: #ff6666;
    --color-text-error-muted: #aa6666;
    --color-border-default: #444444;
    --color-border-panel: #3a3a3a;
    --color-border-panel-rgb: 58, 58, 58;
    --color-border-flat: #333333;
    --color-border-input: #3a3a3a;
    --color-border-error: #cc4444;
    --color-border-disabled: #2a2a2a;
    --color-border-accent: #cccccc;
    --color-border-accent-hover: #ffffff;
    --color-logo-accent-start: #ffffff;
    --color-logo-accent-start-rgb: 255, 255, 255;
    --color-logo-accent-end: #cccccc;
    --color-logo-accent-end-rgb: 204, 204, 204;
    --color-preview-frame-bg: #ffffff;
    --accent-rgb: 204, 204, 204;

    --kind-user-message: #8888cc;
    --kind-user-message-rgb: 136, 136, 204;
    --kind-user-message-light: #aaaadd;
    --kind-assistant-message: #aaaaaa;
    --kind-assistant-message-rgb: 170, 170, 170;
    --kind-assistant-message-light: #cccccc;
    --kind-tool-use: #bbbb88;
    --kind-tool-use-rgb: 187, 187, 136;
    --kind-mcp: #aa9988;
    --kind-mcp-rgb: 170, 153, 136;
    --kind-tool-result: #888888;
    --kind-tool-result-rgb: 136, 136, 136;
    --kind-skill: #9999bb;
    --kind-skill-rgb: 153, 153, 187;
    --kind-subagent: #88bbaa;
    --kind-subagent-rgb: 136, 187, 170;
    --kind-error: #cc5555;
    --kind-error-rgb: 204, 85, 85;
    --kind-error-light: #dd7777;
    --kind-system: #9999bb;
    --kind-system-rgb: 153, 153, 187;

    --rank-gold: #dddddd;
    --rank-gold-rgb: 221, 221, 221;
    --rank-silver: #aaaaaa;
    --rank-silver-rgb: 170, 170, 170;
    --rank-bronze: #888888;
    --rank-bronze-rgb: 136, 136, 136;

    --color-success: #aaaaaa;
    --color-success-rgb: 170, 170, 170;
    --color-warning: #bbbb88;
    --color-warning-rgb: 187, 187, 136;
    --color-info: #8888bb;
    --color-info-rgb: 136, 136, 187;
    --color-ready: #999999;
    --color-ready-rgb: 153, 153, 153;
    --color-evaluated: #9999bb;
    --color-evaluated-rgb: 153, 153, 187;
    --color-live: #cc5555;
    --color-live-rgb: 204, 85, 85;

    --danger-bg: #1a0808;
    --danger-bg-hover: #2a0a0a;
    --danger-border: #663333;
    --danger-border-hover: #884444;

    --breakdown-perf: #9999bb;
    --breakdown-efficiency: #bbbb88;

    --terminal-bg: #080808;
    --terminal-bg-alt: #0c0c0c;
    --terminal-bg-header: #101010;
    --terminal-border: #2a2a2a;
    --terminal-border-row: #1a1a1a;
    --terminal-text: #cccccc;
    --terminal-text-dim: #999999;
    --terminal-text-muted: #777777;
    --terminal-text-heading: #888888;
    --terminal-green: #cccccc;
    --terminal-green-dim: #999999;
    --terminal-red: #cc5555;
    --terminal-red-bg-rgb: 204, 85, 85;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-sans);
    background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-primary) 100%);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    color: var(--text-link);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: var(--accent-hover);
}

pre, code {
    font-family: var(--font-mono);
    font-size: 0.875rem;
}

.brand-mark {
    display: inline-block;
    vertical-align: middle;
    width: auto;
    flex-shrink: 0;
    opacity: 0.98;
    user-select: none;
    filter:
        drop-shadow(-1px 0 2px rgba(var(--color-logo-accent-start-rgb), 0.55))
        drop-shadow(1px 0 2px rgba(var(--color-logo-accent-end-rgb), 0.45))
        drop-shadow(0 0 8px rgba(var(--color-logo-accent-start-rgb), 0.28));
}

.brand-mark-nav {
    height: 27px;
}

.brand-mark-auth {
    height: 53px;
}

.brand-mark-promo {
    height: 32px;
}

/* --- Navbar --- */

.navbar {
    background-color: var(--bg-flat);
    border-bottom: 1px solid var(--border-light);
    position: sticky;
    top: 0;
    z-index: 100;
}

.navbar-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.navbar-brand:hover {
    color: var(--text-primary);
}

.brand-icon {
    font-size: 1.25rem;
    color: var(--accent);
}

.brand-logo {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    object-fit: contain;
    margin: 0;
}

.navbar-links {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.navbar-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
}

.navbar-menu-toggle .icon {
    width: 1.25rem;
    height: 1.25rem;
}

.nav-link {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: var(--radius-sm);
    transition: color 0.2s, background-color 0.2s;
}

.nav-link:hover {
    color: var(--accent);
}

.nav-link.is-active {
    color: var(--text-primary);
    background-color: rgba(var(--accent-rgb), 0.12);
    box-shadow: inset 0 -1px 0 var(--accent);
}

.nav-user {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.nav-logout {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.125em;
}

.btn .icon,
.back-link .icon {
    width: 1rem;
    height: 1rem;
}

.nav-link {
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 700;
    padding: 0.25rem 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.2s;
}

.nav-link:hover {
    color: var(--text-primary);
}

/* --- Main Content --- */

.main-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem;
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* --- Footer --- */

.footer {
    border-top: 1px solid var(--border);
    padding: 0.75rem 0;
    margin-top: auto;
}

.footer-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
    text-align: center;
}

.footer-text {
    color: var(--text-muted);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* --- Page Header --- */

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}

/* --- Buttons --- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.25rem;
    font-size: 0.8125rem;
    font-weight: 700;
    font-family: var(--font-mono);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1.5;
    gap: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.btn-primary {
    background-color: var(--button-primary);
    color: var(--text-primary);
    border-color: var(--accent);
}

.btn-primary:hover {
    background-color: var(--button-hover);
    border-color: var(--accent-hover);
    color: var(--text-primary);
    box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.22);
}

.btn-secondary {
    background-color: var(--bg-input);
    color: var(--text-link);
    border-color: var(--border-light);
}

.btn-secondary:hover {
    background-color: rgba(var(--accent-rgb), 0.1);
    border-color: var(--accent-hover);
    color: var(--accent-hover);
}

.btn-danger {
    background-color: transparent;
    color: var(--text-muted);
    border-color: var(--border-light);
}

.btn-danger:hover {
    background-color: var(--danger-bg-hover);
    border-color: var(--danger-border-hover);
    color: var(--kind-error-light);
}

.btn-info {
    background-color: rgba(var(--color-info-rgb), 0.12);
    color: var(--color-info);
    border-color: rgba(var(--color-info-rgb), 0.4);
}
.btn-info:hover {
    background-color: rgba(var(--color-info-rgb), 0.2);
    border-color: rgba(var(--color-info-rgb), 0.6);
    box-shadow: 0 0 16px rgba(var(--color-info-rgb), 0.15);
}

.btn-warning {
    background-color: rgba(var(--color-warning-rgb), 0.12);
    color: var(--color-warning);
    border-color: rgba(var(--color-warning-rgb), 0.4);
}
.btn-warning:hover {
    background-color: rgba(var(--color-warning-rgb), 0.2);
    border-color: rgba(var(--color-warning-rgb), 0.6);
    box-shadow: 0 0 16px rgba(var(--color-warning-rgb), 0.15);
}

.btn-evaluate {
    background-color: rgba(var(--color-evaluated-rgb), 0.12);
    color: var(--color-evaluated);
    border-color: rgba(var(--color-evaluated-rgb), 0.4);
}
.btn-evaluate:hover {
    background-color: rgba(var(--color-evaluated-rgb), 0.2);
    border-color: rgba(var(--color-evaluated-rgb), 0.6);
    box-shadow: 0 0 16px rgba(var(--color-evaluated-rgb), 0.15);
}

.btn-sm {
    padding: 0.25rem 0.75rem;
    font-size: 0.6875rem;
}

.btn-filter-active {
    background-color: var(--button-primary);
    color: var(--color-on-accent);
    border-color: var(--accent);
}

.btn-filter-active:hover {
    background-color: var(--button-hover);
    border-color: var(--accent-hover);
}

.page-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-outline {
    background-color: transparent;
    color: var(--text-secondary);
    border-color: var(--border);
}

.btn-outline:hover {
    color: var(--text-label);
    border-color: var(--border-light);
    background-color: var(--bg-tertiary);
}

/* --- Modal --- */

.modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(var(--color-surface-flat-rgb), 0.84);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    backdrop-filter: blur(4px);
    padding: 1rem;
}

.modal-overlay.hidden {
    display: none;
}

.modal {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 480px;
    max-height: min(760px, calc(100vh - 2rem));
    overflow: auto;
    box-shadow: var(--shadow-lg);
}

.modal-header {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 1.5rem 1rem;
    margin-bottom: 0;
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-flat);
}

.modal-title {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
}

.modal-close .icon {
    width: 1.25rem;
    height: 1.25rem;
}

.modal-close:hover {
    color: var(--text-primary);
}

.quick-start-overlay {
    overscroll-behavior: contain;
}

.quick-start-modal {
    max-width: 760px;
    max-height: min(800px, calc(100vh - 2rem));
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
}

.quick-start-modal [hidden] {
    display: none;
}

.quick-start-header {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 1.25rem 1.5rem 1rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-flat);
}

.quick-start-header h2,
.quick-start-header p,
.quick-start-panel h3,
.quick-start-panel h4,
.quick-start-panel p {
    margin: 0;
}

.quick-start-header h2 {
    margin-top: 0.15rem;
    font-size: 1.25rem;
}

.quick-start-header #quick-start-description {
    margin-top: 0.35rem;
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.45;
}

.quick-start-progress,
.quick-start-kicker {
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.quick-start-close {
    min-width: 44px;
    min-height: 44px;
    flex: 0 0 auto;
}

.quick-start-body {
    min-height: 0;
    padding: 1.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.quick-start-panel {
    display: grid;
    gap: 1rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

.quick-start-panel[hidden] {
    display: none;
}

.quick-start-panel h3,
.quick-start-panel h4,
.quick-start-panel strong {
    color: var(--text-primary);
}

.quick-start-panel h3 {
    font-size: clamp(1.35rem, 3vw, 1.8rem);
    line-height: 1.15;
}

.quick-start-panel ol {
    margin: 0;
    padding-left: 1.25rem;
    display: grid;
    gap: 0.65rem;
}

.quick-start-panel code {
    color: var(--accent);
    font-family: var(--font-mono);
}

.quick-start-primary {
    width: fit-content;
}

.quick-start-command,
.quick-start-signal,
.quick-start-fallback,
.quick-start-panel details,
.quick-start-score-grid article {
    padding: 0.85rem 1rem;
    background: var(--bg-flat);
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-md);
}

.quick-start-command {
    display: block;
    overflow-x: auto;
}

.quick-start-signal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.quick-start-panel details summary {
    color: var(--text-primary);
    cursor: pointer;
    font-weight: 700;
}

.quick-start-panel details p {
    margin-top: 0.75rem;
}

.quick-start-choices,
.quick-start-score-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.quick-start-choice {
    min-height: 44px;
    padding: 1rem;
    display: grid;
    align-content: start;
    gap: 0.5rem;
    color: var(--text-secondary);
    text-align: left;
    background: var(--bg-flat);
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.quick-start-choice:hover,
.quick-start-choice.is-selected {
    color: var(--text-primary);
    border-color: var(--accent);
    background: var(--bg-tertiary);
}

.quick-start-choice strong,
.quick-start-choice span {
    display: block;
}

.quick-start-choice strong {
    font-size: 1.1rem;
}

.quick-start-choice span {
    font-size: 1rem;
    line-height: 1.5;
}

.quick-start-score-grid article {
    display: grid;
    gap: 0.75rem;
}

.quick-start-destinations {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.quick-start-footer {
    position: sticky;
    bottom: 0;
    z-index: 1;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-flat);
}

.quick-start-trigger:focus-visible,
.quick-start-close:focus-visible,
.quick-start-choice:focus-visible,
.quick-start-panel a:focus-visible,
.quick-start-panel summary:focus-visible,
.quick-start-footer .btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.modal form {
    padding: 1.5rem;
}

/* --- Forms --- */

.form-group {
    margin-bottom: 1.25rem;
}

.form-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-label);
    margin-bottom: 0.375rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.form-input,
.form-select {
    width: 100%;
    min-height: 2.5rem;
    padding: 0.625rem 0.875rem;
    line-height: 1.25rem;
    font-size: 0.875rem;
    font-family: var(--font-sans);
    color: var(--text-primary);
    background-color: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color 0.2s;
}

.form-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='m1 1.5 5 5 5-5' stroke='%239AB6B5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
    background-size: 12px 8px;
    cursor: pointer;
}

.form-select:hover {
    border-color: var(--border-light);
}

.form-input:focus,
.form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

.language-select {
    width: auto;
    min-width: 4.5rem;
    min-height: 2.5rem;
    padding-left: 0.75rem;
}

.language-select-auth {
    position: fixed;
    z-index: 10;
    top: 1rem;
    right: 1rem;
}

.form-input::placeholder {
    color: var(--text-muted);
}

.form-help {
    color: var(--text-secondary);
    display: block;
    font-size: 0.75rem;
    line-height: 1.45;
    margin-top: 0.35rem;
}

.match-advanced-options {
    margin-bottom: 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
}

.match-advanced-options > summary {
    min-height: 2.5rem;
    padding: 0.65rem 0.75rem;
    cursor: pointer;
    color: var(--text-label);
    font-size: 0.82rem;
    font-weight: 700;
}

.match-advanced-options-body {
    padding: 0 0.75rem 0.75rem;
}

.match-advanced-options-body .form-group:last-child {
    margin-bottom: 0;
}

/* Field-level validation error state */
.form-group.has-error .form-label {
    color: var(--color-text-error);
}
.form-group.has-error .form-input {
    color: var(--color-text-error);
    background-color: var(--color-surface-danger);
    border-color: var(--color-border-error);
    box-shadow: 0 0 8px rgba(var(--kind-error-rgb), 0.22);
}
.form-group.has-error .form-input::placeholder {
    color: var(--color-text-error-muted);
}
.field-error {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-error);
    margin-top: 0.375rem;
    display: none;
}
.form-group.has-error .field-error {
    display: block;
}

.form-select option {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    padding: 0.5rem;
}

.checkbox-group {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

.checkbox-label:hover {
    border-color: var(--border-light);
    color: var(--text-primary);
}

.checkbox-label:has(input:checked) {
    border-color: var(--accent);
    background-color: var(--accent-dim);
    color: var(--accent);
}

.checkbox-label input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--border-light);
    border-radius: 3px;
    background-color: var(--bg-tertiary);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}

.checkbox-label input[type="checkbox"]:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}

.checkbox-label input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 0px;
    width: 5px;
    height: 9px;
    border: solid var(--bg-primary);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.form-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding: 1rem 0 0.75rem;
    background: linear-gradient(180deg, transparent 0%, var(--bg-secondary) 24%);
}

/* --- Matches Grid --- */

.matches-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.1rem;
}

.match-card {
    display: block;
    background:
        var(--surface-inner-glow),
        linear-gradient(180deg, rgba(var(--color-border-panel-rgb), 0.13), transparent 46%),
        var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
    color: var(--text-primary);
    position: relative;
}

.match-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: transparent;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    transition: background-color 0.25s;
}

.match-card:hover {
    border-color: var(--accent);
    box-shadow: 0 12px 32px rgba(var(--accent-rgb), 0.1);
    transform: translateY(-2px);
    color: var(--text-primary);
}

.match-card:hover::before {
    display: none;
}

.match-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0.875rem;
}

.match-card-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    overflow-wrap: anywhere;
}

.match-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 0.75rem;
}

.meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.meta-label {
    font-size: 0.6875rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.meta-value {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 700;
}

.match-card-participants {
    border-top: 1px solid var(--border);
    padding-top: 0.75rem;
    margin-top: 0.5rem;
}

.player-dots {
    display: flex;
    gap: 0.375rem;
    margin-top: 0.375rem;
    flex-wrap: wrap;
}

/* --- Status Badge --- */

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 700;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: 1px solid transparent;
    white-space: nowrap;
}

.status-badge-active {
    background-color: rgba(var(--accent-rgb), 0.15);
    color: var(--accent);
    border-color: rgba(var(--accent-rgb), 0.28);
}

.status-badge-closed {
    background-color: rgba(var(--color-gray-rgb), 0.15);
    color: var(--kind-tool-result);
}

.status-badge-connected {
    background-color: rgba(var(--kind-assistant-message-rgb), 0.15);
    color: var(--kind-assistant-message-light);
    border-color: rgba(var(--kind-assistant-message-rgb), 0.3);
}

.status-badge-working {
    background-color: rgba(var(--accent-rgb), 0.15);
    color: var(--accent);
}

.status-badge-submitted {
    background-color: rgba(var(--kind-user-message-rgb), 0.15);
    color: var(--kind-user-message-light);
    border-color: rgba(var(--kind-user-message-rgb), 0.32);
}

.status-badge-disconnected {
    background-color: rgba(var(--color-gray-rgb), 0.15);
    color: var(--kind-tool-result);
}

.status-badge-dim {
    background-color: rgba(var(--color-slate-rgb), 0.1);
    color: var(--text-muted);
    font-weight: 600;
    text-transform: none;
    border-color: rgba(var(--color-slate-rgb), 0.14);
}

/* --- Status Dots --- */

.status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-connected {
    background-color: var(--status-connected);
    box-shadow: 0 0 8px var(--status-connected);
}

.status-working {
    background-color: var(--status-working);
    box-shadow: 0 0 8px var(--status-working);
    animation: pulse-orange 1.5s ease-in-out infinite;
}

.status-submitted {
    background-color: var(--status-submitted);
    box-shadow: 0 0 8px var(--status-submitted);
}

.status-disconnected {
    background-color: var(--status-disconnected);
}

@keyframes pulse-orange {
    0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--status-working); }
    50% { opacity: 0.5; box-shadow: 0 0 16px var(--status-working); }
}

/* --- Empty State --- */

.empty-state {
    text-align: center;
    max-width: 42rem;
    margin: 1.5rem auto;
    padding: 2rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.empty-state-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    letter-spacing: 0.01em;
}

.empty-state-text {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.empty-state-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.dashboard-empty-state {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    max-width: 54rem;
    padding: 2rem;
    overflow: hidden;
    text-align: left;
    background:
        linear-gradient(120deg, rgba(var(--accent-rgb), 0.08), transparent 58%),
        var(--bg-secondary);
}

.dashboard-empty-state .empty-state-actions {
    justify-content: flex-start;
}

@media (max-width: 600px) {
    .dashboard-empty-state {
        grid-template-columns: 1fr;
        padding: 0 1.25rem 1.5rem;
        text-align: center;
    }

    .dashboard-empty-state .empty-state-actions {
        justify-content: center;
    }
}

/* --- Not Found Page --- */

.not-found-page {
    min-height: min(620px, calc(100vh - 190px));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
}

.not-found-panel {
    width: min(100%, 680px);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, rgba(var(--accent-rgb), 0.08), transparent 38%),
        var(--bg-secondary);
    box-shadow: var(--shadow-lg);
    padding: 2rem;
    text-align: center;
}

.not-found-code {
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    margin-bottom: 0.75rem;
}

.not-found-title {
    color: var(--text-primary);
    font-size: 2rem;
    line-height: 1.15;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
}

.not-found-copy {
    color: var(--text-muted);
    font-size: 0.9375rem;
    line-height: 1.7;
    margin: 0 auto 1.25rem;
    max-width: 520px;
}

.not-found-id {
    display: grid;
    gap: 0.45rem;
    margin: 1rem auto 1.5rem;
    max-width: 560px;
    padding: 0.875rem;
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-md);
    background: var(--bg-flat);
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-align: left;
}

.not-found-id code {
    color: var(--text-label);
    overflow-wrap: anywhere;
}

.not-found-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

/* === MATCH PAGE — MATCH ROOM === */

.match-page {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* --- Match Room Header Bar --- */

.match-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.25rem;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 0.75rem;
    gap: 1rem;
}

.match-header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.back-link:hover {
    color: var(--text-primary);
}

.match-title {
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.match-header-center {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.match-header-right {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
    margin-left: auto;
}

.match-id-compact {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

/* --- Info Strip --- */

.info-strip {
    display: grid;
    grid-template-columns: minmax(190px, 0.85fr) minmax(320px, 1.65fr) minmax(170px, 0.8fr) minmax(240px, 1.1fr);
    align-items: start;
    padding: 0.75rem;
    background:
        linear-gradient(180deg, rgba(var(--accent-rgb), 0.045), transparent 55%),
        var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 0.75rem;
    gap: 0.625rem;
}

.info-strip-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.35rem;
    min-height: 58px;
    padding: 0.7rem 0.8rem;
    background-color: rgba(var(--color-surface-flat-rgb), 0.74);
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-md);
    min-width: 0;
    max-width: 100%;
}

.info-strip-wave {
    border-color: rgba(var(--accent-rgb), 0.45);
    background:
        linear-gradient(90deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.035)),
        rgba(var(--color-surface-flat-rgb), 0.82);
}

.info-strip-next {
    --wave-progress: 0%;
    position: relative;
    overflow: hidden;
    border-color: rgba(var(--color-info-rgb), 0.32);
    background:
        linear-gradient(90deg, rgba(var(--color-info-rgb), 0.08), rgba(var(--color-info-rgb), 0.025)),
        rgba(var(--color-surface-flat-rgb), 0.82);
}

.wave-progress-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--wave-progress);
    min-width: 0;
    background:
        linear-gradient(90deg, rgba(var(--color-info-rgb), 0.3), rgba(var(--accent-rgb), 0.16));
    border-right: 1px solid rgba(var(--color-info-rgb), 0.45);
    pointer-events: none;
    transition: width 0.45s ease, opacity 0.25s ease;
    opacity: 0.62;
}

.info-strip-next::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(var(--color-surface-flat-rgb), 0), rgba(var(--color-surface-flat-rgb), 0.2));
    pointer-events: none;
}

.info-strip-next.is-ready {
    border-color: rgba(var(--color-ready-rgb), 0.42);
}

.info-strip-next.is-ready .wave-progress-fill {
    background:
        linear-gradient(90deg, rgba(var(--color-ready-rgb), 0.28), rgba(var(--color-success-rgb), 0.18));
    border-right-color: rgba(var(--color-ready-rgb), 0.5);
}

.info-strip-meta {
    min-height: 0;
    justify-content: flex-start;
    gap: 0.3rem;
    padding: 0.55rem 0.65rem;
}

.info-strip-meta .info-strip-value {
    font-size: 0.78rem;
    line-height: 1.25;
}

.info-strip-profile-values {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.info-strip-profile-values > span {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    max-width: 100%;
    padding: 0.18rem 0.4rem;
    color: var(--text-label);
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.25;
    background-color: rgba(var(--color-surface-flat-rgb), 0.62);
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-sm);
    overflow-wrap: normal;
    word-break: normal;
}

.info-strip-mini-label {
    flex: 0 0 auto;
    color: var(--text-dimmer);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.info-strip-languages {
    min-width: min(100%, 13rem);
}

.info-strip-language-values {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-width: 0;
}

.info-strip-language-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.16rem 0.45rem;
    color: var(--text-label);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 650;
    line-height: 1.2;
    background-color: rgba(var(--color-info-rgb), 0.08);
    border: 1px solid rgba(var(--color-info-rgb), 0.24);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.info-strip-label {
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--text-dimmer);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.info-strip-value {
    min-width: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-label);
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: normal;
}

.info-strip-wave .info-strip-value {
    color: var(--text-primary);
    font-size: 0.875rem;
}

.info-strip-next .info-strip-value {
    align-self: flex-start;
    color: var(--text-primary);
    background-color: rgba(var(--color-surface-flat-rgb), 0.72);
    border: 1px solid rgba(var(--color-info-rgb), 0.2);
    border-radius: var(--radius-sm);
    padding: 0.12rem 0.42rem;
    text-shadow: 0 1px 2px var(--bg-primary);
}

.info-strip-next.is-ready .info-strip-value {
    color: var(--text-primary);
    border-color: rgba(var(--color-ready-rgb), 0.24);
}

.info-strip-next .info-strip-label,
.info-strip-next .info-strip-value {
    position: relative;
    z-index: 1;
}

.info-strip-next .info-strip-label {
    color: var(--text-label);
    text-shadow: 0 1px 2px var(--bg-primary);
}

a.info-strip-link {
    color: var(--text-link);
    text-decoration: none;
    cursor: pointer;
}

a.info-strip-link:hover {
    text-decoration: underline;
}

.copy-btn {
    padding: 0.2rem 0.5rem;
    font-size: 0.625rem;
}

/* --- Match Timer --- */

.match-timer {
    font-family: var(--font-mono);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.match-timer.timer-running {
    color: var(--text-primary);
}

.match-timer.timer-stopped {
    color: var(--text-muted);
}

@keyframes timer-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* --- Match Header Actions --- */

.match-header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-shrink: 0;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.match-control-bar {
    padding: 0.75rem;
    background: rgba(var(--accent-rgb), 0.06);
    border: 1px solid rgba(var(--accent-rgb), 0.24);
    border-radius: var(--radius-lg);
}

.match-evaluation-error {
    display: grid;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
    padding: 0.75rem 0.9rem;
    color: var(--kind-error-light);
    background: rgba(var(--kind-error-rgb), 0.1);
    border: 1px solid rgba(var(--kind-error-rgb), 0.35);
    border-radius: var(--radius-lg);
    overflow-wrap: anywhere;
}

/* Push destructive Close Match to the far right, away from safe actions. */
.match-header-actions .btn-danger {
    margin-left: auto;
}

.collection-waiting-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    margin-bottom: 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.collection-waiting-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.collection-waiting-summary strong {
    color: var(--text-primary);
}

.collection-missing-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-muted);
    font-size: 0.8rem;
}


/* --- Match Layout (sidebar + events) --- */

.match-layout {
    display: flex;
    gap: 1rem;
    flex: 1;
    min-height: 0;
}

/* --- Players Sidebar --- */

.players-sidebar {
    width: 220px;
    flex-shrink: 0;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem;
    overflow-y: auto;
}

.sidebar-title {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.875rem;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid var(--border);
}

.players-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.player-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-md);
    border-left: 3px solid transparent;
    transition: all 0.2s;
}

.player-item:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--border-light);
}

.player-item.is-working {
    border-left-color: var(--accent);
}

.player-item.is-selected {
    background-color: var(--bg-tertiary);
    border-left-color: var(--border-light);
    box-shadow: inset 0 0 0 1px var(--border-light);
}

.player-item.is-kicked {
    opacity: 0.5;
}

.player-item {
    position: relative;
}

.kick-btn {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-muted);
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    opacity: 0;
    transition: all 0.15s;
}

.kick-btn .icon {
    width: 1rem;
    height: 1rem;
}

.player-item:hover .kick-btn {
    opacity: 1;
}

.kick-btn:hover {
    color: var(--kind-error-light);
    background-color: rgba(var(--kind-error-rgb), 0.15);
}

.status-kicked {
    background-color: var(--kind-error);
}

.player-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--accent);
    border: 1px solid var(--accent-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 900;
    color: var(--bg-primary);
    flex-shrink: 0;
    text-transform: uppercase;
    line-height: 1;
}

.player-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.player-name {
    align-self: flex-start;
    display: inline-block;
    max-width: 100%;
    font-size: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-status-row {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.125rem;
    min-width: 0;
}

.player-status-text {
    min-width: 0;
    font-size: 0.6875rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-trust-badge {
    align-self: flex-start;
    max-width: 100%;
    margin-top: 0.25rem;
    font-size: 0.5625rem;
    line-height: 1.2;
    white-space: normal;
}

.player-rank-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.125rem;
    flex: 0 0 2rem;
    margin-left: auto;
}

.player-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 20px;
    padding: 0 0.25rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 700;
    background-color: var(--bg-secondary);
    color: var(--text-muted);
}

.player-rank-badge.rank-gold {
    background-color: rgba(var(--rank-gold-rgb), 0.15);
    color: var(--rank-gold);
}

.player-rank-badge.rank-silver {
    background-color: rgba(var(--rank-silver-rgb), 0.15);
    color: var(--rank-silver);
}

.player-rank-badge.rank-bronze {
    background-color: rgba(var(--rank-bronze-rgb), 0.15);
    color: var(--rank-bronze);
}

.player-score-val {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--text-muted);
}

.empty-sidebar {
    text-align: center;
    padding: 1.5rem 0.5rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* --- Events Feed --- */

.events-area {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.events-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 0.625rem;
    background-color: var(--bg-tertiary);
}

.events-tabs {
    display: flex;
    gap: 0.25rem;
}

.tab-btn {
    padding: 0.375rem 1rem;
    font-size: 0.6875rem;
    font-weight: 700;
    font-family: var(--font-sans);
    color: var(--text-muted);
    background-color: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.tab-btn:hover {
    color: var(--text-primary);
    border-color: var(--border-light);
}

.tab-btn.active {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-light);
}

.events-title {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.events-filter {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.events-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-left: auto;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 0.25rem 0.625rem;
    font-size: 0.625rem;
    font-weight: 700;
    font-family: var(--font-sans);
    color: var(--text-muted);
    background-color: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.filter-btn:hover {
    color: var(--text-primary);
    border-color: var(--border-light);
}

.filter-btn.active {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-light);
}

/* --- Filter buttons: default = colored text/border, active = filled bg --- */

.filter-btn[data-filter="user_message"] {
    color: var(--kind-user-message);
    border-color: rgba(var(--kind-user-message-rgb), 0.35);
}
.filter-btn.active[data-filter="user_message"] {
    background-color: rgba(var(--kind-user-message-rgb), 0.15);
    border-color: var(--kind-user-message);
}

.filter-btn[data-filter="assistant_message"] {
    color: var(--kind-assistant-message);
    border-color: rgba(var(--kind-assistant-message-rgb), 0.35);
}
.filter-btn.active[data-filter="assistant_message"] {
    background-color: rgba(var(--kind-assistant-message-rgb), 0.15);
    border-color: var(--kind-assistant-message);
}

.filter-btn[data-filter="tool_use"],
.filter-btn[data-filter="tool_use:builtin"] {
    color: var(--kind-tool-use);
    border-color: rgba(var(--kind-tool-use-rgb), 0.35);
}
.filter-btn.active[data-filter="tool_use"],
.filter-btn.active[data-filter="tool_use:builtin"] {
    background-color: rgba(var(--kind-tool-use-rgb), 0.15);
    border-color: var(--kind-tool-use);
}

.filter-btn[data-filter="tool_use:mcp"] {
    color: var(--kind-mcp);
    border-color: rgba(var(--kind-mcp-rgb), 0.35);
}
.filter-btn.active[data-filter="tool_use:mcp"] {
    background-color: rgba(var(--kind-mcp-rgb), 0.15);
    border-color: var(--kind-mcp);
}

.filter-btn[data-filter="tool_use:subagent"] {
    color: var(--kind-subagent);
    border-color: rgba(var(--kind-subagent-rgb), 0.35);
}
.filter-btn.active[data-filter="tool_use:subagent"] {
    background-color: rgba(var(--kind-subagent-rgb), 0.15);
    border-color: var(--kind-subagent);
}

.filter-btn[data-filter="skill"] {
    color: var(--kind-skill);
    border-color: rgba(var(--kind-skill-rgb), 0.35);
}
.filter-btn.active[data-filter="skill"] {
    background-color: rgba(var(--kind-skill-rgb), 0.15);
    border-color: var(--kind-skill);
}

.filter-btn[data-filter="tool_result"] {
    color: var(--kind-tool-result);
    border-color: rgba(var(--kind-tool-result-rgb), 0.35);
}
.filter-btn.active[data-filter="tool_result"] {
    background-color: rgba(var(--kind-tool-result-rgb), 0.15);
    border-color: var(--kind-tool-result);
}

.filter-btn[data-filter="error"] {
    color: var(--kind-error);
    border-color: rgba(var(--kind-error-rgb), 0.35);
}
.filter-btn.active[data-filter="error"] {
    background-color: rgba(var(--kind-error-rgb), 0.15);
    border-color: var(--kind-error);
}

.live-controls-bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.5rem 0.75rem 0.375rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background-color: var(--bg-secondary);
    flex-shrink: 0;
}

.events-connection-status {
    margin-left: auto;
    color: var(--text-secondary);
    font-size: 0.75rem;
    white-space: nowrap;
}

.events-connection-status.is-live {
    color: var(--status-connected);
}

.events-connection-status.is-disconnected,
.events-connection-status.is-unauthorized {
    color: var(--text-error);
}

#events-retry {
    margin-left: 0.5rem;
}

.events-visibility-toggle {
    white-space: nowrap;
}

.events-visibility-toggle.is-active {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-light);
}

.events-feed {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* Grow feed with the viewport instead of a fixed 600px cap, so the page
       fills the screen and content sits higher. */
    max-height: calc(100vh - 340px);
    min-height: 360px;
}

.empty-feed {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
}

.empty-feed p {
    margin-bottom: 0.25rem;
}

.empty-feed-sub {
    font-size: 0.8125rem;
}

.events-empty-action {
    margin-top: 0.75rem;
}

/* --- Event Items --- */

.event-item {
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 0.625rem 0.875rem;
    border-left: 3px solid var(--border);
    animation: event-appear 0.3s ease-out;
}

.event-item.event-new {
    animation: event-appear 0.4s ease-out;
}

@keyframes event-appear {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.event-user_message {
    border-left-color: var(--kind-user-message);
    background-image: linear-gradient(90deg, rgba(var(--kind-user-message-rgb), 0.06), transparent 60%);
}
.event-assistant_message {
    border-left-color: var(--kind-assistant-message);
    background-image: linear-gradient(90deg, rgba(var(--kind-assistant-message-rgb), 0.06), transparent 60%);
}
.event-tool_use        { border-left-color: var(--kind-tool-use); }
.event-tool_result     { border-left-color: var(--kind-tool-result); }
.event-skill_use       { border-left-color: var(--kind-skill); }
.event-subagent_use    { border-left-color: var(--kind-subagent); }
.event-error           { border-left-color: var(--kind-error); }
.event-client_error    { border-left-color: var(--kind-error); background-color: rgba(var(--kind-error-rgb), 0.06); }
.event-system          { border-left-color: var(--kind-system); }

.event-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
}

.event-player {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.event-timestamp {
    font-size: 0.625rem;
    color: var(--text-secondary);
    margin-left: auto;
    font-family: var(--font-mono);
}

.event-content {
    overflow: hidden;
}

.event-text {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    max-height: 200px;
    overflow-y: auto;
}

/* --- Event Kind Badges --- */

.event-kind-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.0625rem 0.4375rem;
    font-size: 0.625rem;
    font-weight: 700;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
}

.kind-user_message {
    background-color: rgba(var(--kind-user-message-rgb), 0.15);
    color: var(--kind-user-message-light);
}

.kind-assistant_message {
    background-color: rgba(var(--kind-assistant-message-rgb), 0.15);
    color: var(--kind-assistant-message-light);
}

.kind-tool_use {
    background-color: rgba(var(--kind-tool-use-rgb), 0.15);
    color: var(--kind-tool-use);
}

.kind-tool_result {
    background-color: rgba(var(--kind-tool-result-rgb), 0.15);
    color: var(--kind-tool-result);
}

.kind-skill_use {
    background-color: rgba(var(--kind-skill-rgb), 0.15);
    color: var(--kind-skill);
}

.kind-subagent_use {
    background-color: rgba(var(--kind-subagent-rgb), 0.15);
    color: var(--kind-subagent);
}

.kind-error, .kind-client_error {
    background-color: rgba(var(--kind-error-rgb), 0.15);
    color: var(--kind-error-light);
}

.kind-system {
    background-color: rgba(var(--kind-skill-rgb), 0.15);
    color: var(--kind-skill);
}

.filter-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* --- Tool Category Badges --- */

.tool-category-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.0625rem 0.375rem;
    font-size: 0.5625rem;
    font-weight: 700;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
}

.cat-builtin {
    background-color: rgba(var(--kind-user-message-rgb), 0.12);
    color: var(--kind-user-message-light);
}

.cat-skill {
    background-color: rgba(var(--kind-skill-rgb), 0.12);
    color: var(--kind-skill);
}

.cat-mcp {
    background-color: rgba(var(--kind-assistant-message-rgb), 0.12);
    color: var(--kind-assistant-message-light);
}

.cat-subagent {
    background-color: rgba(var(--kind-subagent-rgb), 0.12);
    color: var(--kind-subagent);
}

.cat-unknown {
    background-color: rgba(var(--kind-tool-result-rgb), 0.12);
    color: var(--kind-tool-result);
}

/* --- Event Summary Line --- */

.event-summary {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-secondary);
    padding: 0.25rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Event Details (Collapsible in live feed) --- */

.event-details {
    cursor: pointer;
    margin-top: 0.25rem;
}

.event-details-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem 0;
    list-style: none;
    user-select: none;
}

.event-details-toggle::-webkit-details-marker {
    display: none;
}

.event-details-toggle::before {
    content: "";
    flex: 0 0 auto;
    width: 0.42rem;
    height: 0.42rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transition: transform 0.2s;
    display: inline-block;
    transform: rotate(-45deg);
}

.event-details[open] .event-details-toggle::before {
    transform: translateY(-0.08rem) rotate(45deg);
}

.event-details .event-text {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    background-color: var(--bg-primary);
    border-radius: var(--radius-md);
}

/* --- Agent Type Badge --- */

.event-agent {
    display: inline-flex;
    align-items: center;
    padding: 0.0625rem 0.375rem;
    font-size: 0.5625rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    background-color: rgba(var(--color-slate-rgb), 0.08);
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

/* --- Model Badge --- */

.event-model {
    display: inline-flex;
    align-items: center;
    padding: 0.0625rem 0.375rem;
    font-size: 0.5625rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    background-color: rgba(var(--color-slate-rgb), 0.08);
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}

/* --- Rendered Markdown --- */

.md-content {
    font-size: 0.8125rem;
    line-height: 1.7;
    color: var(--text-secondary);
    word-break: break-word;
}

.md-content p {
    margin: 0 0 0.5em 0;
}

.md-content p:last-child {
    margin-bottom: 0;
}

.md-content h1, .md-content h2, .md-content h3,
.md-content h4, .md-content h5, .md-content h6 {
    margin: 0.75em 0 0.375em 0;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
}

.md-content h1 { font-size: 1.125rem; }
.md-content h2 { font-size: 1rem; }
.md-content h3 { font-size: 0.9375rem; }
.md-content h4, .md-content h5, .md-content h6 { font-size: 0.875rem; }

.md-content h1:first-child, .md-content h2:first-child,
.md-content h3:first-child { margin-top: 0; }

.md-content ul, .md-content ol {
    margin: 0.375em 0;
    padding-left: 1.5em;
}

.md-content li {
    margin: 0.125em 0;
}

.md-content code {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    background-color: var(--bg-primary);
    padding: 0.125em 0.375em;
    border-radius: var(--radius-sm);
    color: var(--text-label);
}

.md-content pre {
    margin: 0.5em 0;
    padding: 0.75em 1em;
    background-color: var(--bg-primary);
    border-radius: var(--radius-md);
    overflow-x: auto;
}

.md-content pre code {
    background: none;
    padding: 0;
    color: var(--text-primary);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.md-content blockquote {
    margin: 0.5em 0;
    padding: 0.375em 0.75em;
    border-left: 3px solid var(--border-light);
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
}

.md-content table {
    border-collapse: collapse;
    margin: 0.5em 0;
    width: 100%;
    font-size: 0.8125rem;
}

.md-content th, .md-content td {
    border: 1px solid var(--border);
    padding: 0.375em 0.625em;
    text-align: left;
}

.md-content th {
    background-color: var(--bg-tertiary);
    font-weight: 700;
}

.md-content hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 0.75em 0;
}

.md-content a {
    color: var(--text-link);
}

.md-content strong {
    font-weight: 700;
    color: var(--text-primary);
}

.md-content img {
    max-width: 100%;
    border-radius: var(--radius-md);
}

/* --- Token & Status Badges --- */

.event-tokens {
    display: inline-flex;
    align-items: center;
    padding: 0.0625rem 0.375rem;
    font-size: 0.5625rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    background-color: rgba(var(--color-slate-rgb), 0.08);
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}

.event-status-code {
    display: inline-flex;
    align-items: center;
    padding: 0.0625rem 0.375rem;
    font-size: 0.5625rem;
    font-weight: 700;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    background-color: rgba(var(--kind-error-rgb), 0.12);
    color: var(--kind-error-light);
}

/* --- Meta Tags (legacy compat) --- */

.meta-tag {
    display: inline-flex;
    align-items: center;
    min-height: 1.55rem;
    padding: 0.18rem 0.5rem;
    color: var(--text-secondary);
    background: rgba(var(--color-surface-flat-rgb), 0.72);
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1.15;
}

/* --- Preset Task Catalog --- */

.preset-catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}

.preset-catalog-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.preset-detail-link {
    align-self: flex-start;
}

.preset-catalog-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
}

.preset-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
    gap: 1rem;
    align-items: start;
}

.preset-detail-main,
.preset-detail-side {
    display: grid;
    gap: 1rem;
}

.preset-detail-section {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.preset-detail-section h2 {
    color: var(--text-primary);
    font-size: 1rem;
}

.preset-catalog-title {
    font-size: 1rem;
    line-height: 1.25;
    color: var(--text-primary);
}

.preset-catalog-slug {
    margin-top: 0.25rem;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.preset-catalog-badges,
.preset-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.preset-catalog-badges {
    justify-content: flex-end;
}

.preset-catalog-description,
.preset-catalog-muted {
    color: var(--text-secondary);
    line-height: 1.5;
    font-size: 0.92rem;
}

.preset-catalog-muted {
    color: var(--text-muted);
}

.preset-run-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1.2;
}

.preset-run-stats span {
    display: inline-flex;
    align-items: center;
    min-height: 1.45rem;
    padding: 0.12rem 0.4rem;
    background: var(--bg-flat);
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.preset-catalog-section {
    display: grid;
    gap: 0.45rem;
}

.preset-catalog-label {
    color: var(--text-label);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
}

.preset-contract-summary,
.preset-endpoint-list {
    display: grid;
    gap: 0.45rem;
}

.preset-contract-summary {
    color: var(--text-secondary);
    font-size: 0.86rem;
    line-height: 1.45;
}

.preset-contract-summary code,
.preset-endpoint-row code {
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.preset-endpoint-list {
    margin-top: 0.25rem;
}

.preset-endpoint-row {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.35rem 0.55rem;
    align-items: baseline;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--border-flat);
    border-radius: 8px;
    background: var(--bg-flat);
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.preset-endpoint-row span:last-child {
    grid-column: 1 / -1;
}

.preset-endpoint-method {
    color: var(--accent);
    font-weight: 800;
}

.preset-detail-panel {
    border-top: 1px solid var(--border-flat);
    padding-top: 0.75rem;
}

.preset-detail-panel summary {
    cursor: pointer;
    color: var(--text-link);
    font-weight: 700;
}

.preset-task-preview {
    margin-top: 0.75rem;
    max-height: 28rem;
    overflow: auto;
    padding: 0.85rem;
    background: var(--bg-flat);
    border: 1px solid var(--border-flat);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.preset-task-rendered {
    max-height: 34rem;
    overflow: auto;
}

.preset-raw-task-panel {
    margin-top: 0.6rem;
}

.preset-raw-task-panel summary {
    color: var(--text-muted);
    font-size: 0.82rem;
}

.preset-match-list {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.preset-match-link {
    display: grid;
    gap: 0.2rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border-flat);
    border-radius: 8px;
    background: var(--bg-flat);
    color: var(--text-primary);
    text-decoration: none;
}

.preset-match-link:hover {
    border-color: var(--border-light);
    background: var(--bg-secondary);
}

.preset-match-name {
    font-weight: 700;
}

.preset-match-meta {
    color: var(--text-muted);
    font-size: 0.78rem;
}

/* --- Result Gallery --- */

.gallery-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1rem;
}

.gallery-result-card {
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.gallery-result-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.gallery-result-title {
    font-size: 1rem;
    line-height: 1.25;
}

.gallery-result-title a {
    color: var(--text-primary);
    text-decoration: none;
}

.gallery-result-title a:hover {
    color: var(--text-link);
}

.gallery-result-meta,
.gallery-result-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.75rem;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.gallery-result-meta a {
    color: var(--text-link);
    text-decoration: none;
}

.gallery-result-summary {
    padding-top: 0.15rem;
}

.gallery-result-scoreline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 0.75rem;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.gallery-result-scoreline .gallery-run-score {
    font-size: 1.25rem;
}

.gallery-run-list {
    display: grid;
    gap: 0.45rem;
}

.gallery-run-row {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) max-content;
    align-items: center;
    gap: 0.7rem;
    min-height: 2.35rem;
    padding: 0.5rem 0.65rem;
    color: var(--text-primary);
    text-decoration: none;
    background: var(--bg-flat);
    border: 1px solid var(--border-flat);
    border-radius: 8px;
}

a.gallery-run-row:hover {
    border-color: var(--border-light);
    background: var(--bg-secondary);
}

.gallery-run-rank {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.82rem;
}

.gallery-run-player {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

.gallery-run-score {
    color: var(--accent);
    font-family: var(--font-mono);
}

.gallery-result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (max-width: 900px) {
    .preset-detail-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .gallery-results-grid {
        grid-template-columns: 1fr;
    }

    .gallery-result-header {
        display: grid;
    }

    .gallery-run-row {
        grid-template-columns: 2.5rem minmax(0, 1fr);
    }

    .gallery-run-score {
        grid-column: 2;
    }
}

/* --- AceGG application shell --- */

.app-shell {
    min-height: 100vh;
    background:
        radial-gradient(circle at 72% 0%, rgba(var(--accent-rgb), 0.08), transparent 30rem),
        linear-gradient(150deg, var(--bg-top), var(--bg-primary) 52%);
}

.app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 120;
    width: 248px;
    height: 100vh;
    background: rgba(var(--color-surface-flat-rgb), 0.96);
    border: 0;
    border-right: 1px solid var(--border-flat);
    backdrop-filter: blur(18px);
}

.app-sidebar .navbar-inner {
    width: 100%;
    height: 100%;
    max-width: none;
    padding: 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 1.75rem;
}

.app-sidebar .navbar-brand {
    min-height: 44px;
    gap: 0.75rem;
    padding: 0 0.65rem;
    color: var(--text-primary);
    font-size: 1.1rem;
    letter-spacing: 0.03em;
}

.brand-mark-nav {
    width: 30px;
    height: 30px;
    color: var(--accent);
    filter: drop-shadow(0 0 12px rgba(var(--accent-rgb), 0.24));
}

.brand-wordmark {
    font-weight: 700;
}

.app-sidebar .navbar-links {
    min-height: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 1.5rem;
}

.app-nav-group,
.app-sidebar-actions {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.app-sidebar .nav-link,
.app-sidebar .theme-toggle,
.app-sidebar .nav-logout {
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 0.65rem 0.8rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.8rem;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    background: transparent;
    box-shadow: none;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.app-sidebar .nav-link .icon,
.app-sidebar .theme-toggle .icon,
.app-sidebar .nav-logout .icon {
    width: 1.3rem;
    height: 1.3rem;
    flex: 0 0 auto;
    stroke: currentColor;
}

.app-sidebar .nav-link:hover,
.app-sidebar .theme-toggle:hover,
.app-sidebar .nav-logout:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
    border-color: var(--border-flat);
}

.app-sidebar .nav-link.is-active {
    color: var(--color-on-accent);
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 10px 26px rgba(var(--accent-rgb), 0.16);
}

.app-stage {
    min-height: 100vh;
    margin-left: 248px;
    display: flex;
    flex-direction: column;
}

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 90;
    min-height: 68px;
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(var(--color-surface-flat-rgb), 0.82);
    border-bottom: 1px solid var(--border-flat);
    backdrop-filter: blur(18px);
}

.app-topbar-copy {
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
    color: var(--text-muted);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.app-topbar-copy strong {
    color: var(--text-primary);
    font-size: 0.82rem;
}

.app-topbar-actions {
    min-width: 0;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.quick-start-trigger .icon {
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 auto;
    stroke: currentColor;
}

.app-user-chip {
    min-height: 40px;
    padding: 0.3rem 0.75rem 0.3rem 0.35rem;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--text-primary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-flat);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
}

.app-user-chip-mark {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-on-accent);
    background: var(--accent);
    border-radius: 50%;
}

.app-stage .main-content {
    width: 100%;
    max-width: 1560px;
    padding: 1.4rem;
}

.app-stage .footer {
    border-color: var(--border-flat);
}

.card,
.panel,
.modal,
.table-container {
    border-color: var(--border-flat);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.btn {
    min-height: 40px;
    border-radius: var(--radius-md);
}

.btn-primary {
    color: var(--color-on-accent);
    background: var(--accent);
    border-color: var(--accent);
}

.btn-primary:hover {
    color: var(--color-on-accent);
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.form-input,
.form-select,
textarea.form-input {
    min-height: 44px;
    border-radius: var(--radius-md);
}

.form-select.language-select {
    height: 2.5rem;
    min-height: 2.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

@media (max-width: 900px) {
    .app-sidebar {
        width: min(82vw, 280px);
        transform: translateX(-105%);
        transition: transform 0.22s ease;
        box-shadow: var(--shadow-lg);
    }

    .app-sidebar.is-open {
        transform: translateX(0);
    }

    .app-sidebar .navbar-links {
        display: flex;
    }

    .app-stage {
        margin-left: 0;
    }

    .app-topbar {
        padding-inline: 1rem;
    }

    .navbar-menu-toggle {
        display: inline-flex;
        flex: 0 0 auto;
    }

    .app-stage .main-content {
        padding: 1rem;
    }
}

@media (max-width: 560px) {
    .app-topbar-copy {
        display: none;
    }

    .app-user-chip > span:last-child {
        display: none;
    }

    .quick-start-trigger-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .quick-start-trigger {
        width: 44px;
        min-width: 44px;
        min-height: 44px;
        padding: 0;
    }

    .form-select.language-select {
        height: 44px;
        min-height: 44px;
    }

    .app-user-chip {
        padding-right: 0.35rem;
    }

    .app-stage .main-content {
        padding: 0.8rem;
    }
}

@media (max-width: 680px) {
    .quick-start-overlay {
        padding: 0;
        align-items: stretch;
    }

    .quick-start-modal {
        max-width: none;
        max-height: none;
        height: 100vh;
        height: 100dvh;
        border-width: 0;
        border-radius: 0;
    }

    .quick-start-header,
    .quick-start-body,
    .quick-start-footer {
        padding-inline: 1rem;
    }

    .quick-start-body {
        padding-block: 1rem;
    }

    .quick-start-footer {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
        flex-wrap: wrap;
    }

    .quick-start-footer .btn {
        min-height: 44px;
        flex: 1 1 8rem;
    }

    .quick-start-choices,
    .quick-start-score-grid {
        grid-template-columns: 1fr;
    }

    .quick-start-primary,
    .quick-start-destinations .btn {
        width: 100%;
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .quick-start-overlay,
    .quick-start-modal,
    .quick-start-trigger,
    .quick-start-choice {
        animation: none;
        transition: none;
    }
}

/* --- Wave Timeline --- */

.wave-timeline-panel {
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.living-status-panel {
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.living-chip-list,
.living-event-list {
    display: grid;
    gap: 0.6rem;
}

.living-chip-list {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin-bottom: 0.75rem;
}

.living-chip,
.living-event-row {
    background: var(--bg-flat);
    border: 1px solid var(--border-flat);
    border-radius: 8px;
}

.living-chip {
    padding: 0.55rem 0.7rem;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.78rem;
}

.living-event-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: center;
    padding: 0.65rem 0.75rem;
    color: var(--text-secondary);
    font-size: 0.84rem;
}

.living-event-row strong {
    color: var(--text-primary);
}

.wave-timeline-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    margin-bottom: 0.85rem;
}

.wave-timeline-header h2 {
    font-size: 1rem;
    color: var(--text-primary);
}

.wave-timeline-header span {
    color: var(--text-muted);
    font-size: 0.82rem;
}

.wave-timeline-list {
    display: grid;
    gap: 0.75rem;
}

.wave-timeline-item {
    display: grid;
    gap: 0.75rem;
    padding: 0.85rem;
    background: var(--bg-flat);
    border: 1px solid var(--border-flat);
    border-radius: 8px;
}

.wave-timeline-item.is-released {
    border-color: var(--border-light);
}

.wave-timeline-item.is-current {
    border-color: var(--accent);
    background: var(--bg-secondary);
}

.wave-timeline-main {
    display: grid;
    grid-template-columns: minmax(72px, max-content) minmax(0, 1fr) max-content;
    gap: 0.75rem;
    align-items: start;
}

.wave-timeline-step {
    color: var(--text-label);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 700;
}

.wave-timeline-main h3 {
    font-size: 0.92rem;
    color: var(--text-primary);
}

.wave-timeline-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.75rem;
    margin-top: 0.25rem;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.wave-completion-list {
    display: grid;
    gap: 0.4rem;
}

.wave-completion-row {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(0, max-content) minmax(56px, max-content);
    gap: 0.75rem;
    align-items: center;
    padding: 0.45rem 0.55rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-flat);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.wave-completion-player {
    color: var(--text-primary);
    font-weight: 700;
}

.wave-completion-empty {
    color: var(--text-muted);
    font-size: 0.78rem;
}

/* --- Replay Page --- */

.replay-page {
    display: grid;
    gap: 1rem;
}

.replay-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}

.replay-summary-card,
.replay-context-card,
.replay-score-card,
.replay-event {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.replay-summary-card {
    display: grid;
    gap: 0.35rem;
    padding: 0.85rem;
}

.replay-summary-card span,
.replay-score-card p,
.replay-event-summary {
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.replay-summary-card strong {
    color: var(--text-primary);
    font-size: 1.2rem;
}

.run-metadata-panel {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.run-metadata-heading,
.run-metadata-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 0.9rem;
}

.run-metadata-heading h2,
.run-metadata-heading h4 {
    color: var(--text-primary);
    font-size: 1rem;
}

.run-metadata-summary span,
.run-metadata-grid span,
.run-metadata-admin span {
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.run-metadata-summary b,
.run-metadata-grid b,
.run-metadata-admin b {
    color: var(--text-primary);
    font-family: var(--font-mono);
    overflow-wrap: anywhere;
}

.run-metadata-grid,
.run-metadata-admin {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.55rem;
    padding-top: 0.65rem;
}

.run-metadata-admin {
    margin-top: 0.65rem;
    border-top: 1px solid var(--border-flat);
}

.run-metadata-capabilities {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.7rem;
}

.run-metadata-capabilities > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.run-metadata-assisted {
    display: inline-flex;
    padding: 0.12rem 0.4rem;
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-pill);
    color: var(--color-warning);
    background: rgba(var(--color-warning-rgb), 0.1);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.replay-context-card {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    padding: 0.85rem;
}

.replay-context-card span {
    display: block;
    color: var(--text-secondary);
    font-size: 0.78rem;
    margin-bottom: 0.25rem;
}

.replay-context-card strong {
    color: var(--text-primary);
}

.replay-context-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.replay-score-card {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem;
}

.replay-score-card h2 {
    color: var(--text-primary);
    font-size: 1rem;
}

.replay-score-metrics,
.replay-models-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.replay-score-metrics span {
    padding: 0.25rem 0.5rem;
    background: var(--bg-flat);
    border: 1px solid var(--border-flat);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.replay-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    padding: 0.85rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.replay-control-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.replay-filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    margin-left: auto;
}

.replay-filter-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.replay-timeline-panel {
    padding: 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.replay-timeline-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

.replay-timeline-header h2 {
    color: var(--text-primary);
    font-size: 1rem;
}

.replay-timeline-counts,
.replay-token-curve {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.replay-token-curve {
    margin-bottom: 0.85rem;
}

.replay-token-point {
    display: grid;
    gap: 0.1rem;
    min-width: 7.5rem;
    padding: 0.55rem 0.65rem;
    background: var(--bg-flat);
    border: 1px solid var(--border-flat);
    border-radius: 8px;
}

.replay-token-point span,
.replay-token-point small,
.replay-timeline-offset,
.replay-timeline-index {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.replay-token-point strong {
    color: var(--text-primary);
}

.replay-timeline-list {
    display: grid;
    gap: 0.45rem;
}

.replay-timeline-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.6rem;
    background: var(--bg-flat);
    border: 1px solid var(--border-flat);
    border-radius: 8px;
}

.replay-event-list {
    display: grid;
    gap: 0.75rem;
}

.replay-window-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.replay-event {
    padding: 0.85rem;
}

.replay-event.is-focused {
    border-color: var(--accent);
    background: var(--bg-secondary);
}

.replay-event-header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    margin-bottom: 0.65rem;
}

.replay-event-summary {
    margin-bottom: 0.65rem;
}

.replay-pagination {
    margin-top: 0;
}

/* --- Run Comparison Page --- */

.run-compare-page {
    display: grid;
    gap: 1rem;
}

.compare-selector {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.compare-selector-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.compare-option {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.55rem;
    background: var(--bg-flat);
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.compare-option small {
    color: var(--text-muted);
}

.compare-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}

.compare-run-card {
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.compare-run-header {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: flex-start;
}

.compare-run-header h2 {
    color: var(--text-primary);
    font-size: 1rem;
}

.compare-run-header p {
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.compare-metric-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

.compare-metric-grid div {
    display: grid;
    gap: 0.15rem;
    padding: 0.5rem;
    background: var(--bg-flat);
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-sm);
}

.compare-metric-grid span,
.compare-timeline-mini span {
    color: var(--text-muted);
    font-size: 0.76rem;
}

.compare-metric-grid strong {
    color: var(--text-primary);
}

.compare-environment-grid {
    display: grid;
    gap: 0.35rem;
}

.compare-environment-row {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr) auto;
    gap: 0.45rem;
    align-items: center;
    padding: 0.42rem 0.5rem;
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-sm);
    background: var(--bg-flat);
}

.compare-environment-row span,
.compare-environment-row small {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.compare-environment-row strong {
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.76rem;
    overflow-wrap: anywhere;
}

.compare-environment-row.state-different {
    border-color: var(--color-warning);
    background: rgba(var(--color-warning-rgb), 0.08);
}

.compare-environment-row.state-unknown {
    border-color: var(--border-disabled);
}

.compare-chip-row,
.compare-token-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.compare-token-strip span {
    min-width: 3.5rem;
    padding: 0.25rem 0.4rem;
    background: var(--bg-flat);
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-align: center;
}

.compare-timeline-mini {
    display: grid;
    gap: 0.35rem;
    max-height: 24rem;
    overflow: auto;
}

.compare-timeline-mini div {
    display: grid;
    grid-template-columns: 3rem 4rem minmax(0, 1fr) 5rem;
    gap: 0.45rem;
    align-items: center;
    padding: 0.4rem 0.5rem;
    background: var(--bg-flat);
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-sm);
}

.compare-timeline-mini span:nth-child(3) {
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.compare-transcript-list,
.compare-diff-list {
    display: grid;
    gap: 0.5rem;
}

.compare-transcript-row,
.compare-diff-row {
    display: grid;
    gap: 0.35rem;
    padding: 0.55rem;
    background: var(--bg-flat);
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-sm);
}

.compare-transcript-row > div,
.compare-diff-row {
    align-items: center;
}

.compare-transcript-row > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.compare-transcript-row p {
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.compare-diff-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.compare-diff-row .preset-match-name {
    overflow-wrap: anywhere;
}

@media (max-width: 720px) {
    .replay-controls,
    .compare-selector,
    .leaderboard-drilldown-card header,
    .compare-run-header,
    .section-heading-row {
        align-items: stretch;
        flex-direction: column;
    }

    .replay-filter-form {
        width: 100%;
        margin-left: 0;
    }

    .replay-filter-label,
    .replay-filter-label .form-select,
    .replay-filter-form .btn,
    .compare-selector .btn {
        width: 100%;
    }

    .compare-grid,
    .leaderboard-drilldown-grid {
        grid-template-columns: 1fr;
    }

    .compare-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .compare-timeline-mini div {
        grid-template-columns: 2.5rem 3.5rem minmax(0, 1fr);
    }

    .compare-timeline-mini span:nth-child(4) {
        grid-column: 3;
    }

    .compare-token-strip span {
        flex: 1 1 7rem;
    }

    .compare-diff-row {
        grid-template-columns: 1fr;
    }
}

/* --- Scrollbar Styling --- */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--border-light);
}

/* --- Responsive --- */

@media (max-width: 768px) {
    .navbar-inner {
        position: relative;
        padding: 0 1rem;
        gap: 0.75rem;
    }

    .navbar-menu-toggle {
        display: inline-flex;
        flex: 0 0 auto;
        margin-left: auto;
    }

    .navbar-links {
        position: absolute;
        top: calc(100% + 0.5rem);
        right: 1rem;
        z-index: 1001;
        display: none;
        width: min(20rem, calc(100vw - 2rem));
        max-height: calc(100vh - 5rem);
        flex-direction: column;
        align-items: stretch;
        gap: 0.35rem;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 0.65rem;
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
    }

    .navbar-links.is-open {
        display: flex;
    }

    .nav-link {
        display: flex;
        min-height: 44px;
        align-items: center;
        font-size: 0.8rem;
        padding: 0.65rem 0.75rem;
        letter-spacing: 0.02em;
    }

    .nav-user {
        max-width: none;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .nav-logout {
        min-height: 44px;
        margin-left: 0;
        padding-inline: 0.75rem;
    }

    .modal-overlay {
        align-items: stretch;
        padding: 0;
    }

    .modal {
        max-width: none;
        max-height: 100vh;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }

    .modal-header {
        padding: 1rem;
    }

    .modal form {
        padding: 1rem;
    }

    .form-actions {
        gap: 0.5rem;
    }

    .form-actions .btn {
        flex: 1;
        padding-inline: 0.75rem;
    }

    .scores-table th {
        position: static;
    }

    .main-content {
        padding: 1rem;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .matches-grid {
        grid-template-columns: 1fr;
    }

    .matches-grid-lobby {
        grid-template-columns: 1fr;
    }

    .match-card {
        padding: 1rem;
    }

    .match-card-header {
        gap: 0.75rem;
    }

    .archive-card-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.5rem;
    }

    .archive-card-meta {
        justify-content: flex-start;
        gap: 0.45rem;
    }

    .match-layout {
        flex-direction: column;
    }

    .players-sidebar {
        width: 100%;
        max-height: 200px;
    }

    .match-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .match-header-center {
        flex-wrap: wrap;
    }

    .match-header-right {
        flex-wrap: wrap;
    }

    .info-strip {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        padding: 0.625rem;
    }

    .info-strip-item {
        min-height: auto;
        padding: 0.65rem 0.75rem;
    }

    .match-header-actions {
        flex-wrap: wrap;
    }

    .events-feed {
        max-height: 400px;
    }

}

@media (max-width: 480px) {
    .navbar-inner {
        padding: 0 0.75rem;
    }

    .events-filter {
        display: none;
    }

    .info-strip {
        display: none;
    }
}

/* --- Player Stats --- */

.player-stats {
    padding: 1.25rem;
}

.player-stats-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.875rem 0.5rem;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    text-align: center;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1.2;
}

.stat-label {
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 0.25rem;
}

.stat-section {
    margin-bottom: 1rem;
}

.stat-section-label {
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
}

.stat-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.stat-badge {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-secondary);
    background-color: rgba(var(--color-surface-flat-rgb), 0.72);
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-sm);
}

.stat-badge.badge-mcp {
    border-color: var(--accent);
    color: var(--accent);
}

.stat-badge.badge-skill {
    border-color: rgba(var(--kind-skill-rgb), 0.22);
    color: var(--kind-skill);
    background-color: rgba(var(--kind-skill-rgb), 0.1);
}

/* --- Scores / Leaderboard Table --- */

.leaderboard-filter-disclosure > summary {
    display: none;
}

.leaderboard-filter-disclosure:not([open]) > .leaderboard-filter-panel {
    display: grid;
}

.leaderboard-filter-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.65rem;
    align-items: end;
    margin-bottom: 1rem;
    padding: 0.85rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.leaderboard-filter-panel label {
    display: grid;
    gap: 0.3rem;
}

.leaderboard-filter-panel label > span {
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.leaderboard-filter-actions {
    display: flex;
    gap: 0.4rem;
}

.scores-table-wrap {
    overflow-x: auto;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, rgba(var(--color-border-panel-rgb), 0.16), transparent 34%),
        var(--bg-secondary);
}

.scores-table {
    width: 100%;
    min-width: 680px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
}

.scores-table th {
    position: static;
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.625rem 0.75rem;
    border-bottom: 2px solid var(--border);
    background-color: var(--bg-tertiary);
}

.scores-table td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-label);
}

.scores-table .col-rank {
    width: 50px;
    text-align: center;
}

.scores-table .col-human-rank {
    width: 78px;
    text-align: center;
}

.scores-table .col-player {
    font-weight: 700;
    color: var(--text-primary);
    min-width: 220px;
}

.run-metadata-compact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.45rem;
    margin-top: 0.3rem;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 400;
}

.run-metadata-compact b {
    color: var(--text-secondary);
    font-weight: 700;
}

@media (max-width: 768px) {
    .leaderboard-filter-disclosure {
        margin-bottom: 1rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: var(--bg-tertiary);
    }

    .leaderboard-filter-disclosure > summary {
        display: flex;
        min-height: 44px;
        padding: 0.65rem 0.85rem;
        cursor: pointer;
        font-weight: 700;
    }

    .leaderboard-filter-disclosure:not([open]) > .leaderboard-filter-panel {
        display: none;
    }

    .leaderboard-filter-panel,
    .run-metadata-grid,
    .run-metadata-admin {
        grid-template-columns: 1fr;
    }

    .leaderboard-filter-panel {
        margin-bottom: 0;
        border: 0;
        border-top: 1px solid var(--border);
        border-radius: 0 0 var(--radius-md) var(--radius-md);
    }

    .leaderboard-filter-actions .btn {
        flex: 1;
        min-height: 2.5rem;
    }

    .compare-environment-row {
        grid-template-columns: 4.5rem minmax(0, 1fr);
    }

    .compare-environment-row small {
        grid-column: 2;
    }

    .run-metadata-heading,
    .run-metadata-summary {
        align-items: flex-start;
    }
}

.scores-table .col-total {
    color: var(--accent);
    font-size: 1rem;
    text-align: right;
    font-family: var(--font-mono);
}

.scores-table .col-score {
    text-align: right;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
}

.scores-table .col-human-note {
    width: 56px;
    text-align: center;
}

.scores-table .col-actions {
    min-width: 150px;
    text-align: right;
    white-space: nowrap;
}

.scores-table .col-actions .btn + .btn {
    margin-left: 0.375rem;
}

.score-row:hover {
    background-color: rgba(var(--accent-rgb), 0.07);
}
.score-row:hover td {
    color: var(--text-primary);
}

.score-row.rank-first {
    background-color: rgba(var(--rank-gold-rgb), 0.07);
    border-left: 3px solid var(--rank-gold);
}

.score-row.rank-second {
    background-color: rgba(var(--rank-silver-rgb), 0.055);
    border-left: 3px solid var(--rank-silver);
}

.score-rank-meta {
    margin-top: 0.25rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
}

.human-judge-view-state {
    margin-bottom: 0.75rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
    font-size: 0.75rem;
}

.human-judge-view-state.is-final {
    border-color: rgba(var(--color-success-rgb), 0.35);
    color: var(--color-success);
    background-color: rgba(var(--color-success-rgb), 0.08);
}

.human-judge-view-state.is-pending {
    border-color: rgba(var(--color-warning-rgb), 0.3);
    color: var(--color-warning);
    background-color: rgba(var(--color-warning-rgb), 0.08);
}

.human-judge-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background-color: var(--bg-secondary);
}

.human-judge-title {
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 700;
}

.human-judge-status {
    margin-top: 0.25rem;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.human-rank-input {
    width: 100%;
    min-height: 30px;
    border: 1px solid var(--border-input);
    border-radius: var(--radius-sm);
    background-color: var(--bg-input);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

.human-rank-input {
    max-width: 54px;
    padding: 0.25rem 0.375rem;
    text-align: center;
}

.human-note-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-input);
    border-radius: var(--radius-sm);
    background-color: var(--bg-input);
    color: var(--text-muted);
    cursor: pointer;
}

.human-note-button:hover,
.human-note-button:focus-visible,
.human-note-button.has-note {
    border-color: var(--accent);
    color: var(--accent);
    outline: none;
}

.human-note-button .icon {
    width: 1rem;
    height: 1rem;
}

.human-note-modal {
    max-width: 560px;
}

.human-note-modal-body {
    padding: 1.5rem;
}

.human-note-modal-input {
    width: 100%;
    min-height: 160px;
    resize: vertical;
    border: 1px solid var(--border-input);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    background-color: var(--bg-input);
    color: var(--text-primary);
    font: inherit;
    line-height: 1.5;
}

.preview-panel {
    margin-bottom: 0.75rem;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    background-color: var(--bg-secondary);
    overflow: hidden;
}

.preview-panel.hidden {
    display: none;
}

.preview-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem;
    border-bottom: 1px solid var(--border);
    background-color: var(--bg-tertiary);
}

.preview-panel-title {
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 700;
}

.preview-panel-meta {
    margin-top: 0.25rem;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.preview-frame {
    display: block;
    width: 100%;
    height: min(70vh, 760px);
    min-height: 420px;
    border: 0;
    background-color: var(--color-preview-frame-bg);
}

.preview-shell-page {
    min-height: 100vh;
    overflow: hidden;
    background: var(--bg-primary);
}

.preview-shell-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 56px;
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
}

.preview-shell-title {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.preview-shell-title strong {
    color: var(--text-primary);
    font-size: 0.92rem;
}

.preview-shell-title span {
    color: var(--text-muted);
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preview-shell-actions {
    display: flex;
    flex-shrink: 0;
    gap: 0.5rem;
}

.preview-shell-frame {
    display: block;
    width: 100%;
    height: calc(100vh - 56px);
    border: 0;
    background: var(--color-preview-frame-bg);
}

.score-row.rank-third {
    background-color: rgba(var(--rank-bronze-rgb), 0.055);
    border-left: 3px solid var(--rank-bronze);
}

.rank-medal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
}

.rank-gold {
    background-color: rgba(var(--rank-gold-rgb), 0.15);
    color: var(--rank-gold);
    border: 2px solid var(--rank-gold);
}

.rank-silver {
    background-color: rgba(var(--rank-silver-rgb), 0.15);
    color: var(--rank-silver);
    border: 2px solid var(--rank-silver);
}

.rank-bronze {
    background-color: rgba(var(--rank-bronze-rgb), 0.15);
    color: var(--rank-bronze);
    border: 2px solid var(--rank-bronze);
}

/* --- Status Badge - Error --- */

.status-badge-error {
    background-color: rgba(var(--kind-error-rgb), 0.15);
    color: var(--kind-error-light);
}

/* --- Generation Spinner --- */

.gen-spinner::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 2px solid var(--accent);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-right: 0.375rem;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* --- Toast Notifications --- */

#toast-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 300;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}

.toast {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-md);
    padding: 0.75rem 1.25rem;
    box-shadow: var(--shadow-lg);
    animation: toast-in 0.3s ease-out;
    pointer-events: auto;
}

.toast-hide {
    animation: toast-out 0.3s ease-in forwards;
}

@keyframes toast-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes toast-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(12px); }
}

/* --- Match Card Badges --- */

.match-card-badges {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* === DASHBOARD — Three-Section Layout === */

.dashboard-section {
    margin-bottom: 2rem;
}

.section-challenges {
    padding: 1rem;
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
}

.section-challenges .section-header {
    padding: 0 0 0.8rem;
    border-radius: 0;
    background: transparent;
}

.section-challenges .section-icon,
.section-challenges .section-title {
    color: var(--accent);
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(90deg, rgba(var(--color-border-panel-rgb), 0.2), transparent);
    border-radius: var(--radius-md);
    padding: 0.55rem 0.65rem;
}

.section-header-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.section-title {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
    margin: 0;
}

.section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 0.375rem;
    font-size: 0.6875rem;
    font-weight: 700;
    border-radius: 9999px;
    background-color: rgba(var(--color-slate-rgb), 0.12);
    color: var(--text-secondary);
}

/* --- Section: Lobby (Ready to Join) --- */

.section-lobby .section-header {
    border-bottom-color: rgba(var(--accent-rgb), 0.3);
}

.section-lobby .section-icon {
    color: var(--accent);
}

.section-lobby .section-title {
    color: var(--accent);
}

.section-lobby .section-count {
    background-color: rgba(var(--accent-rgb), 0.15);
    color: var(--accent);
}

.matches-grid-lobby {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 1rem;
}

.match-card-lobby {
    border-color: rgba(var(--accent-rgb), 0.2);
    box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.04);
}

.match-card-lobby::before {
    background-color: var(--accent);
}

.match-card-lobby:hover {
    box-shadow: 0 0 28px rgba(var(--accent-rgb), 0.12);
}

.match-card-cta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.375rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    color: var(--accent);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: gap 0.2s;
}

.match-card-lobby:hover .match-card-cta {
    gap: 0.625rem;
}

.cta-arrow {
    transition: transform 0.2s;
}

.match-card-lobby:hover .cta-arrow {
    transform: translateX(3px);
}

.meta-value-players {
    color: var(--accent);
    font-weight: 700;
}

.player-count-current {
    font-size: 1rem;
}

.player-count-max {
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-weight: 400;
}

.pulse-badge {
    animation: pulse-badge 2s ease-in-out infinite;
}

@keyframes pulse-badge {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.status-badge-waiting {
    background-color: rgba(var(--color-warning-rgb), 0.15);
    color: var(--color-warning);
    border-color: rgba(var(--color-warning-rgb), 0.28);
}

.status-badge-live {
    background-color: rgba(var(--color-live-rgb), 0.15);
    color: var(--color-live);
    border-color: rgba(var(--color-live-rgb), 0.3);
}

.status-badge-processing {
    background-color: rgba(var(--color-info-rgb), 0.15);
    color: var(--color-info);
    border-color: rgba(var(--color-info-rgb), 0.28);
}

.status-badge-ready {
    background-color: rgba(var(--color-ready-rgb), 0.15);
    color: var(--color-ready);
    border-color: rgba(var(--color-ready-rgb), 0.28);
}

.status-badge-evaluated {
    background-color: rgba(var(--color-evaluated-rgb), 0.15);
    color: var(--color-evaluated);
    border-color: rgba(var(--color-evaluated-rgb), 0.28);
}

/* --- Section: Live (Running Now) --- */

.section-live .section-header {
    border-bottom-color: rgba(var(--color-live-rgb), 0.3);
    background: linear-gradient(90deg, rgba(var(--color-live-rgb), 0.1), transparent);
}

.section-live .section-title {
    color: var(--color-live);
}

.section-live .section-count {
    background-color: rgba(var(--color-live-rgb), 0.15);
    color: var(--color-live);
}

.live-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color-live);
    box-shadow: 0 0 8px var(--color-live);
    animation: live-pulse 1.5s ease-in-out infinite;
    flex-shrink: 0;
}

.live-dot-sm {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-live);
    box-shadow: 0 0 6px var(--color-live);
    animation: live-pulse 1.5s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes live-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--color-live); }
    50% { opacity: 0.6; box-shadow: 0 0 16px var(--color-live); }
}

.live-indicator {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
}

.live-label {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--color-live);
    letter-spacing: 0.08em;
}

.live-timer {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    font-family: 'SF Mono', 'Fira Code', 'Roboto Mono', monospace;
    background-color: rgba(var(--color-live-rgb), 0.09);
    padding: 0.0625rem 0.375rem;
    border-radius: var(--radius-sm);
}

.match-card-live {
    border-color: rgba(var(--color-live-rgb), 0.22);
}

.match-card-live::before {
    background-color: var(--color-live);
}

.match-card-live:hover {
    border-color: var(--color-live);
    box-shadow: 0 12px 32px rgba(var(--color-live-rgb), 0.12);
}

.match-card-live:hover::before {
    background-color: var(--color-live);
}

/* --- Section: Archive (Completed Matches) --- */

.section-archive {
    margin-top: 1rem;
}

.archive-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--border);
    background: rgba(var(--color-surface-flat-rgb), 0.55);
    cursor: pointer;
    border-radius: var(--radius-md);
    color: var(--text-muted);
    transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

.archive-toggle:hover {
    color: var(--text-secondary);
    border-color: var(--border-light);
    background-color: var(--bg-secondary);
}

.archive-toggle .section-icon {
    color: inherit;
}

.archive-toggle .section-title {
    color: inherit;
    font-size: 0.8125rem;
}

.archive-toggle .section-count {
    background-color: rgba(var(--color-slate-rgb), 0.1);
    color: var(--text-muted);
}

.archive-chevron {
    transition: transform 0.25s;
    flex-shrink: 0;
}

.section-archive.is-expanded .archive-chevron {
    transform: rotate(180deg);
}

.archive-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.section-archive.is-expanded .archive-content {
    max-height: 2000px;
}

.archive-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding-top: 0.75rem;
}

.match-card-archive {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    background-color: rgba(var(--color-surface-flat-rgb), 0.55);
    border-color: var(--border-flat);
}

.match-card-archive::before {
    display: none;
}

.match-card-archive:hover {
    border-color: var(--border-light);
    box-shadow: none;
    transform: none;
    background-color: var(--bg-tertiary);
}

.archive-card-link {
    flex: 1;
    min-width: 0;
}

.match-card-archive .match-card-title {
    font-size: 0.875rem;
    text-transform: none;
    color: var(--text-secondary);
}

.match-card-archive:hover .match-card-title {
    color: var(--text-primary);
}

.archive-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.archive-card-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.archive-meta-text {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.archive-delete-btn {
    flex-shrink: 0;
    margin-left: 0.75rem;
}

/* --- Dashboard Responsive --- */

@media (max-width: 768px) {
    .matches-grid-lobby {
        grid-template-columns: 1fr;
    }

    .archive-card-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .match-card-archive {
        flex-direction: column;
        align-items: stretch;
    }

    .archive-card-meta {
        flex-wrap: wrap;
    }

    .archive-delete-btn {
        align-self: flex-start;
        margin-left: 0;
    }
}

/* --- Score Detail Modal --- */

.score-detail-modal {
    max-width: 720px;
    max-height: 85vh;
    overflow-y: auto;
}

.challenge-failure-modal {
    max-width: 760px;
    max-height: 85vh;
    overflow: hidden;
}

.challenge-failure-body {
    max-height: calc(85vh - 80px);
    overflow: auto;
    margin: 0;
    padding: 1rem;
    border: 0;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    background: var(--terminal-bg);
    color: var(--text-error);
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.score-detail-body {
    max-height: calc(85vh - 80px);
    overflow-y: auto;
    padding: 1rem;
    box-sizing: border-box;
}

.score-detail-section {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
}

.score-detail-section:last-child {
    margin-bottom: 0;
}

.score-detail-section h4 {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.score-detail-evidence .score-detail-section-header h4 {
    margin-bottom: 0;
}

.challenge-evidence-note {
    margin-top: 0.35rem;
}

.score-detail-evidence-groups {
    display: grid;
    gap: 0.9rem;
    margin-top: 0.9rem;
}

.score-detail-weight {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.6875rem;
}

.score-detail-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.score-detail-section-header h3 {
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.score-detail-rank-num {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-muted);
}

.score-detail-total {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.score-detail-total strong {
    color: var(--accent);
    font-size: 1.125rem;
}

/* Score bars */
.score-detail-bar-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.375rem;
}

.score-detail-bar-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    min-width: 100px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.score-detail-bar-track {
    flex: 1;
    height: 8px;
    background-color: var(--bg-primary);
    border-radius: 4px;
    overflow: hidden;
}

.score-detail-bar-fill {
    height: 100%;
    background-color: var(--accent);
    border-radius: 4px;
    transition: width 0.4s ease;
    min-width: 2px;
}

.score-detail-bar-fill.bar-sub {
    background-color: var(--text-muted);
}

.score-detail-bar-value {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-mono);
    min-width: 28px;
    text-align: right;
}

.score-detail-sub-scores {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}

.score-detail-meta {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

.score-detail-participant-note-text {
    margin-top: 0.75rem;
    color: var(--text-primary);
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.score-detail-fail {
    color: var(--kind-error-light);
}

/* Test output */
.score-detail-collapse {
    margin-top: 0.625rem;
    cursor: pointer;
}

.score-detail-collapse summary {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem 0;
    list-style: none;
    user-select: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.score-detail-collapse summary::-webkit-details-marker {
    display: none;
}

.score-detail-collapse summary::before {
    content: "";
    flex: 0 0 auto;
    width: 0.42rem;
    height: 0.42rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transition: transform 0.2s;
    display: inline-block;
    transform: rotate(-45deg);
}

.score-detail-collapse[open] summary::before {
    transform: translateY(-0.08rem) rotate(45deg);
}

.test-output {
    margin-top: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: var(--bg-primary);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 300px;
    overflow-y: auto;
}

/* Test result summary badges */
.test-summary-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.test-summary-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
}
.badge-ok {
    background-color: rgba(var(--color-success-rgb), 0.12);
    color: var(--color-success);
}
.badge-warn {
    background-color: rgba(var(--color-warning-rgb), 0.12);
    color: var(--color-warning);
}

/* Go test results table */
.test-results-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
    margin-top: 0.5rem;
    background-color: var(--terminal-bg);
    border: 1px solid var(--terminal-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.test-results-table th {
    text-align: left;
    padding: 0.375rem 0.5rem;
    border-bottom: 1px solid var(--terminal-border);
    color: var(--terminal-text-heading);
    font-weight: 600;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background-color: var(--terminal-bg-header);
}
.test-results-table td {
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid var(--terminal-border-row);
}
.test-results-table tbody tr:nth-child(even) {
    background-color: var(--terminal-bg-alt);
}
.test-row-fail td {
    background-color: rgba(var(--kind-error-rgb), 0.05) !important;
}
.test-name {
    font-family: var(--font-mono);
    color: var(--terminal-text);
}
.test-duration {
    color: var(--terminal-text-muted);
    font-family: var(--font-mono);
    white-space: nowrap;
}
.status-pass {
    color: var(--color-success);
    font-weight: 600;
    font-size: 0.6875rem;
}
.status-fail {
    color: var(--color-live);
    font-weight: 600;
    font-size: 0.6875rem;
}
.status-skip {
    color: var(--terminal-text-muted);
    font-weight: 600;
    font-size: 0.6875rem;
}
.test-row-message td {
    padding: 0;
}
.test-fail-msg {
    margin: 0;
    padding: 0.375rem 0.5rem 0.375rem 1.5rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    line-height: 1.4;
    color: var(--terminal-text-dim);
    background-color: transparent;
    white-space: pre-wrap;
    word-break: break-word;
}

/* K6 metrics grid */
.k6-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.k6-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
    background-color: var(--bg-primary);
    border-radius: var(--radius-sm);
}
.k6-metric-value {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-mono);
}
.k6-metric-label {
    font-size: 0.625rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.125rem;
}

/* K6 scenarios */
.k6-scenarios {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.k6-scenario-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    background-color: var(--bg-primary);
    border-radius: var(--radius-sm);
}
.k6-scenario-name {
    font-weight: 600;
    color: var(--text-primary);
    min-width: 6rem;
}
.k6-scenario-metric {
    font-family: var(--font-mono);
    color: var(--text-secondary);
    font-size: 0.6875rem;
}

.k6-th-badge {
    margin-left: 0.5rem;
    padding: 0.125rem 0.375rem;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.k6-th-passed,
.k6-th-pass {
    background-color: rgba(var(--color-success-rgb), 0.12);
    color: var(--color-success);
}

.k6-th-near {
    background-color: rgba(var(--color-warning-rgb), 0.12);
    color: var(--color-warning);
}

.k6-th-mid {
    background-color: rgba(var(--kind-mcp-rgb), 0.12);
    color: var(--kind-mcp);
}

.k6-th-far,
.k6-th-fail {
    background-color: rgba(var(--kind-error-rgb), 0.12);
    color: var(--color-live);
}

.k6-thresholds {
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.k6-th-item {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    line-height: 1.2;
}

.score-detail-feedback {
    margin-top: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: var(--bg-primary);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
}

/* Agent stats grid */
.score-detail-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 0.5rem;
}

.score-detail-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding: 0.625rem 0.875rem;
    box-sizing: border-box;
    background-color: var(--bg-primary);
    border-radius: var(--radius-sm);
}

.score-detail-stat-value {
    max-width: 100%;
    font-size: clamp(0.875rem, 2.8vw, 1.125rem);
    font-weight: 700;
    color: var(--accent);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.score-detail-stat-label {
    font-size: 0.5625rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 0.125rem;
}

.score-detail-tags {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
    min-width: 0;
}

.score-detail-tags-label {
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.score-detail-tag {
    display: inline-flex;
    max-width: 100%;
    padding: 0.125rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-secondary);
    background-color: rgba(var(--color-surface-flat-rgb), 0.72);
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    overflow-wrap: anywhere;
    white-space: normal;
}

.score-detail-tag.tag-skill {
    border-color: rgba(var(--kind-skill-rgb), 0.22);
    color: var(--kind-skill);
    background-color: rgba(var(--kind-skill-rgb), 0.1);
}

.score-detail-tag.tag-mcp {
    border-color: var(--accent);
    color: var(--accent);
}

.score-detail-tag.tag-subagent {
    border-color: var(--kind-subagent);
    color: var(--kind-subagent);
}

@media (max-width: 768px) {
    .score-detail-modal,
    .challenge-failure-modal {
        max-width: 95vw;
    }
    .score-detail-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .score-detail-section-header {
        align-items: flex-start;
        gap: 0.5rem;
        flex-wrap: wrap;
    }
}

/* --- Task Files Modal --- */

.task-files-modal {
    max-width: 800px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 0;
}

.task-files-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0;
    overflow-x: auto;
    flex-shrink: 0;
}

.task-file-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: var(--font-mono);
    padding: 0.5rem 1rem;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}

.task-file-tab:hover {
    color: var(--text-primary);
}

.task-file-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.task-files-body {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding: 0 2rem 1.5rem;
}

.task-file-content {
    display: none;
}

.task-file-content.active {
    display: block;
}

.task-file-pre {
    background-color: rgba(var(--color-surface-flat-rgb), 0.78);
    border: 1px solid rgba(var(--color-info-rgb), 0.18);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    margin: 0.75rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-x: auto;
    color: var(--text-primary);
}

.task-file-markdown {
    background-color: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    margin: 0.75rem 0 0;
    color: var(--text-primary);
    font-size: 0.8125rem;
    line-height: 1.58;
}

.task-file-markdown h1,
.task-file-markdown h2,
.task-file-markdown h3 {
    color: var(--text-label);
    margin: 1rem 0 0.5rem;
    line-height: 1.25;
}

.task-file-markdown h1 {
    font-size: 1.05rem;
}

.task-file-markdown h2 {
    font-size: 0.95rem;
}

.task-file-markdown h3 {
    font-size: 0.875rem;
}

.task-file-markdown h1:first-child,
.task-file-markdown h2:first-child,
.task-file-markdown h3:first-child {
    margin-top: 0;
}

.task-file-markdown p,
.task-file-markdown ul,
.task-file-markdown ol,
.task-file-markdown pre,
.task-file-markdown blockquote {
    margin: 0.5rem 0;
}

.task-file-markdown ul,
.task-file-markdown ol {
    padding-left: 1.35rem;
    list-style-position: outside;
}

.task-file-markdown li {
    margin: 0.22rem 0;
    padding-left: 0.1rem;
}

.task-file-markdown li::marker {
    color: var(--text-muted);
}

.task-file-markdown code {
    color: var(--text-primary);
    background-color: rgba(var(--color-surface-flat-rgb), 0.78);
    border: 1px solid rgba(var(--color-info-rgb), 0.18);
    border-radius: var(--radius-sm);
    padding: 0.08rem 0.25rem;
}

.task-file-markdown pre {
    overflow-x: auto;
    padding: 0.75rem 1rem;
    background-color: rgba(var(--color-surface-flat-rgb), 0.78);
    border: 1px solid rgba(var(--color-info-rgb), 0.18);
    border-radius: var(--radius-sm);
}

.task-file-markdown pre code {
    padding: 0;
    background: none;
    border: 0;
}

@media (max-width: 768px) {
    .task-files-modal {
        max-width: 95vw;
    }
}

/* --- Leaderboard Page --- */

.leaderboard-page {
    width: 100%;
    display: grid;
    gap: 1rem;
}

.leaderboard-scope-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.page-subtitle {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.wins-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--rank-gold-rgb), 0.15);
    color: var(--rank-gold);
    border: 1px solid rgba(var(--rank-gold-rgb), 0.3);
    border-radius: var(--radius-sm);
    padding: 0.1rem 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
}

.player-link {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--text-primary);
    transition: color 0.2s;
}

.player-link:hover {
    color: var(--accent);
}

.leaderboard-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-md);
    background-color: rgba(var(--accent-rgb), 0.13);
    border: 1px solid rgba(var(--accent-rgb), 0.28);
    color: var(--accent-hover);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
}

.player-name {
    overflow-wrap: anywhere;
}

.leaderboard-drilldowns {
    display: grid;
    gap: 0.75rem;
}

.section-heading-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.leaderboard-drilldown-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 380px));
    justify-content: start;
    gap: 0.75rem;
}

.leaderboard-drilldown-card {
    display: grid;
    align-content: start;
    gap: 0.75rem;
    padding: 0.9rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.leaderboard-drilldown-card header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.leaderboard-drilldown-card h3 {
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.3;
}

@media (max-width: 720px) {
    .leaderboard-drilldown-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Profile Page --- */

.profile-page {
    width: 100%;
}

.profile-joined {
    color: var(--text-muted);
    margin-left: 0.5rem;
}

.role-badge {
    display: inline-block;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
    font-weight: 700;
}

.role-admin {
    background: rgba(var(--accent-rgb), 0.15);
    color: var(--accent);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
}

.profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin: 1.5rem 0;
}

.profile-stat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1rem;
    text-align: center;
}

.profile-stat-card.stat-highlight {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb), 0.06);
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.stat-highlight .stat-value {
    color: var(--accent);
}

.stat-extra {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--text-muted);
}

.stat-label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-top: 0.35rem;
}

.profile-section {
    margin-top: 2rem;
}

.profile-section .section-title {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.profile-account-settings > .section-title {
    margin-bottom: 0;
    cursor: pointer;
    user-select: none;
}

.profile-account-settings[open] > .section-title {
    margin-bottom: 1rem;
}

.profile-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.profile-section-heading .section-title {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.profile-account-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.profile-account-form {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
}

.profile-account-form h3 {
    color: var(--text-primary);
    font-size: 0.95rem;
}

.profile-account-form > .form-group:first-of-type {
    margin-top: 1rem;
}

.profile-account-form .form-actions {
    position: static;
    margin-top: auto;
    padding: 0;
    background: none;
}

.account-settings-error {
    min-height: 1.1rem;
    margin: 0 0 0.75rem;
    color: var(--color-text-error);
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

.account-settings-error:empty {
    visibility: hidden;
}

.profile-challenge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 20rem));
    gap: 0.85rem;
    justify-content: start;
    margin-top: 1rem;
}

.profile-challenge-card {
    display: grid;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
}

.profile-challenge-card-header,
.profile-challenge-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
}

.profile-challenge-card h3 {
    overflow-wrap: anywhere;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.profile-challenge-slug,
.profile-challenge-version,
.profile-challenge-meta {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.72rem;
}

.profile-challenge-meta {
    align-items: flex-start;
    flex-wrap: wrap;
}

.profile-radar {
    padding: 1rem;
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
}

.profile-radar-heading,
.profile-radar-layout,
.profile-radar-axes > div,
.profile-radar-axes dd {
    display: flex;
}

.profile-radar-heading {
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.profile-radar-heading .section-title {
    margin-bottom: 0.35rem;
}

.profile-radar-heading p,
.profile-radar-message,
.profile-radar-note,
.profile-radar-sources {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.profile-radar-status {
    padding: 0.25rem 0.55rem;
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    border-radius: var(--radius-sm);
    color: var(--accent);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.profile-radar-layout {
    align-items: center;
    gap: 1.5rem;
    margin-top: 1rem;
}

.profile-radar-chart {
    flex: 0 1 22rem;
    min-width: 0;
    text-align: center;
}

.profile-radar-chart svg {
    display: block;
    width: 100%;
    max-height: 22rem;
}

.profile-radar-grid {
    fill: none;
    stroke: var(--border-flat);
    stroke-width: 1;
}

.profile-radar-shape {
    fill: rgba(var(--accent-rgb), 0.2);
    stroke: var(--accent);
    stroke-linejoin: round;
    stroke-width: 2;
}

.profile-radar-labels {
    fill: var(--text-secondary);
    stroke: none;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    dominant-baseline: middle;
}

.profile-radar-details {
    flex: 1 1 22rem;
    min-width: 0;
}

.profile-radar-axes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 1rem;
}

.profile-radar-axes > div {
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--border-flat);
}

.profile-radar-axes dt {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.profile-radar-axes dd {
    align-items: baseline;
    gap: 0.35rem;
    margin: 0;
    color: var(--text-muted);
    font-size: 0.68rem;
}

.profile-radar-axes strong {
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.9rem;
}

.profile-radar-sources {
    margin-top: 0.8rem;
    color: var(--text-secondary);
}

.profile-radar-note,
.profile-radar-message {
    margin-top: 0.35rem;
}

/* Score Breakdown Bars */

.breakdown-bars {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.breakdown-item {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.breakdown-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.breakdown-label {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.breakdown-value {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-label);
    font-family: var(--font-mono);
}

.breakdown-bar {
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
}

.breakdown-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease-out;
}

.breakdown-fill-functional { background: rgba(var(--kind-assistant-message-rgb), 0.35); }
.breakdown-fill-quality    { background: rgba(var(--kind-user-message-rgb), 0.35); }
.breakdown-fill-perf       { background: rgba(var(--kind-skill-rgb), 0.35); }
.breakdown-fill-efficiency { background: rgba(var(--color-warning-rgb), 0.35); }
.breakdown-fill-speed      { background: rgba(var(--accent-rgb), 0.35); }

@media (max-width: 768px) {
    .profile-account-grid {
        grid-template-columns: 1fr;
    }
    .profile-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .profile-stats-grid > :last-child {
        grid-column: span 2;
    }
    .profile-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }
    .profile-challenge-grid {
        grid-template-columns: 1fr;
    }
    .profile-radar-layout {
        align-items: stretch;
        flex-direction: column;
    }
    .profile-radar-chart,
    .profile-radar-details {
        flex-basis: auto;
        width: 100%;
    }
    .profile-radar-chart svg {
        max-height: 18rem;
    }
    .profile-radar-axes {
        grid-template-columns: 1fr;
    }
}

/* ---- Submissions Tab ---- */
.submission-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
}
.submission-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.submission-player {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
}
.submission-meta {
    color: var(--text-secondary);
    font-size: 12px;
}
.submission-files {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.submission-file {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    background: var(--bg-surface);
    border-radius: 4px;
    font-size: 13px;
    font-family: var(--font-mono);
}
.submission-file-path {
    color: var(--text-primary);
}
.submission-file-size {
    color: var(--text-secondary);
    font-size: 12px;
    white-space: nowrap;
    margin-left: 12px;
}

/* --- Pagination --- */
.pagination-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    margin-top: 0.5rem;
    border-top: 1px solid var(--border-light);
    flex-shrink: 0;
}

.pagination-controls .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.pagination-info {
    color: var(--text-secondary);
    font-size: 0.8125rem;
}
.pagination-info-bar {
    padding: 0.5rem 1rem;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    text-align: center;
    border-bottom: 1px solid var(--border-light);
}
.btn-disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
}
.events-mode-indicator {
    font-size: 0.75rem;
    padding: 0.25rem 0.625rem;
    border-radius: 4px;
    margin-left: 0.75rem;
}
.events-mode-live,
.events-mode-paginated {
    color: var(--text-secondary);
    background: var(--bg-tertiary);
}

/* --- Rules Page --- */

.rules-page {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 1180px;
    margin: 0 auto;
}

.rules-hero,
.rules-section,
.rules-mode-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.rules-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
    gap: 1.5rem;
    align-items: stretch;
    padding: 1.5rem;
    overflow: hidden;
}

.rules-hero-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.rules-kicker {
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.rules-title {
    max-width: 760px;
}

.rules-lede {
    max-width: 680px;
    margin-top: 0.75rem;
    color: var(--text-label);
    font-size: 1rem;
    line-height: 1.6;
}

.rules-scoreboard {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--bg-flat);
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-md);
}

.scoreboard-row {
    display: grid;
    grid-template-columns: minmax(80px, 1fr) minmax(92px, auto) 48px;
    gap: 0.75rem;
    align-items: center;
    min-width: 0;
    padding: 0.625rem 0.75rem;
    color: var(--text-label);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    background: rgba(var(--accent-rgb), 0.04);
    border: 1px solid rgba(var(--accent-rgb), 0.12);
    border-radius: var(--radius-sm);
    animation: rules-score-pulse 4.8s ease-in-out infinite;
}

.scoreboard-row:nth-child(3) {
    animation-delay: 0.7s;
}

.scoreboard-row:nth-child(4) {
    animation-delay: 1.4s;
}

.scoreboard-row-head {
    color: var(--text-muted);
    background: transparent;
    border-color: transparent;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    animation: none;
}

.status-pill {
    justify-self: start;
    padding: 0.18rem 0.45rem;
    border-radius: var(--radius-sm);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

.status-pill-work {
    color: var(--color-warning);
    background: rgba(var(--color-warning-rgb), 0.1);
}

.status-pill-submit {
    color: var(--kind-assistant-message);
    background: rgba(var(--kind-assistant-message-rgb), 0.1);
}

.status-pill-eval {
    color: var(--kind-skill);
    background: rgba(var(--kind-skill-rgb), 0.12);
}

.rules-section {
    padding: 1.5rem;
    overflow: hidden;
}

.rules-section-header {
    margin-bottom: 1.25rem;
}

.rules-section-header-split {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.rules-section-header-split > div {
    max-width: 760px;
}

.rules-challenge-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.rules-challenge-flow > div {
    display: grid;
    align-content: start;
    gap: 0.35rem;
    padding: 0.85rem;
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-md);
    background: var(--bg-flat);
}

.rules-challenge-flow span {
    display: grid;
    width: 1.7rem;
    height: 1.7rem;
    place-items: center;
    color: var(--bg-primary);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 800;
    border-radius: 50%;
    background: var(--accent);
}

.rules-challenge-flow strong {
    color: var(--text-primary);
}

.rules-challenge-flow p {
    font-size: 0.82rem;
}

.rules-challenge-grid {
    margin-top: 1rem;
}

.rules-challenge-grid .challenge-card h3 {
    font-size: 0.95rem;
}

.rules-client-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.8fr);
    gap: 1.25rem;
    align-items: center;
}

.rules-client-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1rem;
}

.rules-section h2,
.rules-mode-card h2 {
    color: var(--text-primary);
    font-size: 1.25rem;
    line-height: 1.25;
    margin-bottom: 0.625rem;
}

.rules-section p,
.rules-mode-card p {
    color: var(--text-label);
    line-height: 1.6;
}

.rules-flow {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.rules-flow-line {
    position: absolute;
    top: 1rem;
    left: 8%;
    right: 8%;
    height: 2px;
    background: var(--border-flat);
    overflow: hidden;
}

.rules-flow-line::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -40%;
    width: 40%;
    background: var(--accent);
    animation: rules-flow-scan 5s linear infinite;
}

.rules-flow-step {
    position: relative;
    min-width: 0;
    padding-top: 2.25rem;
}

.rules-flow-dot {
    position: absolute;
    top: 0.625rem;
    left: 0;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 5px rgba(var(--accent-rgb), 0.08);
}

.rules-flow-step h3 {
    color: var(--text-primary);
    font-size: 0.95rem;
    margin-bottom: 0.35rem;
}

.rules-flow-step p {
    font-size: 0.875rem;
}

.rules-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.rules-mode-card {
    min-width: 0;
    padding: 1.25rem;
    overflow: hidden;
}

.rules-mode-card code,
.rules-terminal code {
    color: var(--text-primary);
    background: rgba(var(--accent-rgb), 0.08);
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    border-radius: var(--radius-sm);
    padding: 0.05rem 0.25rem;
}

.rules-card-icon {
    position: relative;
    width: 54px;
    height: 54px;
    margin-bottom: 1rem;
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-md);
    background: var(--bg-flat);
}

.rules-card-icon-classic span {
    position: absolute;
    inset: 14px 10px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
}

.rules-card-icon-classic span::after {
    content: "";
    position: absolute;
    left: 7px;
    right: 7px;
    top: 12px;
    height: 2px;
    background: var(--accent);
}

.rules-card-icon-waves span {
    position: absolute;
    bottom: 12px;
    width: 8px;
    border-radius: 999px 999px 0 0;
    background: var(--accent);
    animation: wave-bars 1.8s ease-in-out infinite;
}

.rules-card-icon-waves span:nth-child(1) {
    left: 13px;
    height: 16px;
}

.rules-card-icon-waves span:nth-child(2) {
    left: 23px;
    height: 26px;
    animation-delay: 0.2s;
}

.rules-card-icon-waves span:nth-child(3) {
    left: 33px;
    height: 34px;
    animation-delay: 0.4s;
}

.rules-card-icon-ai span,
.rules-card-icon-preset span {
    position: absolute;
    inset: 13px;
    border-radius: 50%;
    border: 2px solid var(--accent);
}

.rules-card-icon-ai span::before,
.rules-card-icon-ai span::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: var(--kind-user-message);
}

.rules-card-icon-ai span::before {
    width: 7px;
    height: 7px;
    left: 4px;
    top: 4px;
}

.rules-card-icon-ai span::after {
    width: 5px;
    height: 5px;
    right: 5px;
    bottom: 6px;
}

.rules-card-icon-preset span {
    border-radius: var(--radius-sm);
    border-color: var(--color-warning);
}

.rules-card-icon-preset span::before,
.rules-card-icon-preset span::after {
    content: "";
    position: absolute;
    left: 5px;
    right: 5px;
    height: 2px;
    background: var(--color-warning);
}

.rules-card-icon-preset span::before {
    top: 8px;
}

.rules-card-icon-preset span::after {
    top: 16px;
}

.rules-mini-track,
.rules-pipeline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.mini-node,
.rules-pipeline span,
.preset-stack span,
.wave-base,
.wave-pulse {
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-sm);
    background: var(--bg-flat);
}

.mini-node,
.rules-pipeline span {
    padding: 0.4rem 0.55rem;
}

.mini-node.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.08);
}

.mini-line {
    width: 22px;
    height: 1px;
    background: var(--border);
}

.wave-visual {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 84px;
    margin-top: 1rem;
    overflow: hidden;
}

.wave-base,
.wave-pulse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    height: 34px;
    padding: 0 0.45rem;
}

.wave-base {
    border-color: var(--accent);
}

.wave-pulse {
    opacity: 0.35;
    transform: translateY(8px);
    animation: wave-release 4.5s ease-in-out infinite;
}

.wave-pulse-two {
    animation-delay: 1.1s;
}

.wave-pulse-three {
    animation-delay: 2.2s;
}

.rules-pipeline span {
    position: relative;
}

.rules-pipeline span:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -0.55rem;
    width: 0.55rem;
    height: 1px;
    background: var(--border);
}

.preset-stack {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    max-width: 190px;
    margin-top: 1rem;
}

.preset-stack span {
    padding: 0.45rem 0.6rem;
    animation: preset-file-lift 4s ease-in-out infinite;
}

.preset-stack span:nth-child(2) {
    margin-left: 1rem;
    animation-delay: 0.4s;
}

.preset-stack span:nth-child(3) {
    margin-left: 2rem;
    color: var(--color-warning);
    animation-delay: 0.8s;
}

.rules-two-column {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
    gap: 1.5rem;
    align-items: center;
}

.rules-terminal {
    min-width: 0;
    overflow: hidden;
    background: var(--bg-flat);
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-md);
}

.terminal-bar {
    display: flex;
    gap: 0.35rem;
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--border-flat);
}

.terminal-bar span {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--border);
}

.terminal-bar span:nth-child(2) {
    background: var(--color-warning);
}

.terminal-bar span:nth-child(3) {
    background: var(--accent);
}

.rules-terminal pre {
    margin: 0;
    padding: 1rem;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 1.7;
    overflow-x: auto;
}

.rules-decision {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.decision-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
    padding: 0.75rem 0.9rem;
    background: var(--bg-flat);
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-sm);
}

.decision-label {
    min-width: 0;
    color: var(--text-label);
}

.decision-row strong {
    color: var(--text-primary);
    white-space: nowrap;
}

@keyframes rules-score-pulse {
    0%, 100% {
        border-color: rgba(var(--accent-rgb), 0.12);
        transform: translateX(0);
    }
    45% {
        border-color: rgba(var(--accent-rgb), 0.55);
        transform: translateX(4px);
    }
}

@keyframes rules-flow-scan {
    0% {
        left: -40%;
    }
    100% {
        left: 100%;
    }
}

@keyframes wave-bars {
    0%, 100% {
        transform: scaleY(0.65);
        opacity: 0.55;
    }
    50% {
        transform: scaleY(1);
        opacity: 1;
    }
}

@keyframes wave-release {
    0%, 18%, 100% {
        opacity: 0.35;
        transform: translateY(8px);
        border-color: var(--border-flat);
    }
    32%, 58% {
        opacity: 1;
        transform: translateY(0);
        border-color: var(--accent);
    }
}

@keyframes preset-file-lift {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(6px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .scoreboard-row,
    .rules-flow-line::after,
    .rules-card-icon-waves span,
    .wave-pulse,
    .preset-stack span {
        animation: none;
    }
}

@media (max-width: 900px) {
    .rules-hero,
    .rules-two-column,
    .rules-client-section {
        grid-template-columns: 1fr;
    }

    .rules-grid,
    .rules-flow,
    .rules-challenge-flow {
        grid-template-columns: 1fr;
    }

    .rules-section-header-split {
        align-items: flex-start;
        flex-direction: column;
    }

    .rules-flow-line {
        top: 0;
        bottom: 0;
        left: 0.42rem;
        right: auto;
        width: 2px;
        height: auto;
    }

    .rules-flow-line::after {
        left: 0;
        top: -40%;
        width: 100%;
        height: 40%;
        animation-name: rules-flow-scan-vertical;
    }

    .rules-flow-step {
        padding-top: 0;
        padding-left: 2rem;
    }

    .rules-flow-dot {
        top: 0.25rem;
        left: 0;
    }
}

@keyframes rules-flow-scan-vertical {
    0% {
        top: -40%;
    }
    100% {
        top: 100%;
    }
}

.form-group.is-disabled {
    opacity: 0.65;
}

@media (max-width: 560px) {
    .rules-page {
        gap: 1rem;
    }

    .rules-hero,
    .rules-section,
    .rules-mode-card {
        padding: 1rem;
    }

    .scoreboard-row {
        grid-template-columns: minmax(68px, 1fr) minmax(82px, auto) 36px;
        gap: 0.45rem;
        padding: 0.55rem;
        font-size: 0.72rem;
    }

    .status-pill {
        font-size: 0.62rem;
        padding: 0.15rem 0.32rem;
    }

    .decision-row {
        flex-direction: column;
        gap: 0.25rem;
    }
}

@media (max-width: 900px) {
    .app-sidebar .navbar-inner {
        position: static;
        padding: 1.25rem 1rem;
        gap: 1.75rem;
    }

    .app-sidebar .navbar-links {
        position: static;
        width: auto;
        max-height: none;
        padding: 0;
        overflow: visible;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .app-topbar .navbar-menu-toggle {
        margin-left: 0;
    }
}

/* --- AceGG dashboard --- */

.dashboard-hero {
    position: relative;
    min-height: 360px;
    margin-bottom: 1rem;
    padding: clamp(1.5rem, 4vw, 3.5rem);
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    background: var(--bg-flat);
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.dashboard-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        var(--surface-inner-glow),
        linear-gradient(90deg, var(--bg-flat) 0%, rgba(var(--color-surface-flat-rgb), 0.94) 35%, rgba(var(--color-surface-flat-rgb), 0.08) 76%);
}

.dashboard-hero-copy {
    position: relative;
    z-index: 1;
    width: min(50%, 620px);
}

.dashboard-eyebrow {
    display: inline-flex;
    margin-bottom: 0.9rem;
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.dashboard-hero h1 {
    max-width: 12ch;
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(2.1rem, 4vw, 4.6rem);
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.dashboard-hero p {
    max-width: 48ch;
    margin: 1.2rem 0 1.5rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

.dashboard-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.dashboard-hero-art {
    position: absolute;
    inset: 0 0 0 auto;
    z-index: -2;
    width: 68%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.dashboard-feature-grid {
    margin-bottom: 1.5rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}

.dashboard-feature-card {
    position: relative;
    min-height: 150px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    color: var(--text-primary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-lg);
}

.dashboard-feature-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(var(--color-surface-flat-rgb), 0.96), transparent 70%);
}

.dashboard-feature-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease;
}

.dashboard-feature-card > span {
    position: relative;
    z-index: 1;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.dashboard-feature-card strong {
    font-size: 1rem;
}

.dashboard-feature-card small {
    color: var(--text-secondary);
    font-size: 0.72rem;
}

.dashboard-feature-card:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.dashboard-feature-card:hover img {
    transform: scale(1.035);
}

.match-card-player {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.player-avatar,
.avatar-image-fallback {
    position: relative;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--color-on-accent);
    background: var(--accent);
    border: 2px solid var(--border-panel);
    border-radius: 50%;
    font-weight: 700;
}

.avatar-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-picker-fieldset {
    min-width: 0;
    padding: 0;
    border: 0;
}

.avatar-picker-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
}

.avatar-choice {
    min-width: 0;
    display: grid;
    gap: 0.25rem;
    justify-items: center;
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    cursor: pointer;
}

.avatar-choice input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.avatar-choice img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border: 2px solid var(--border-flat);
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.avatar-choice:hover img,
.avatar-choice input:checked + img {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.avatar-choice input:focus-visible + img {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.matches-grid .match-card {
    background:
        var(--surface-inner-glow),
        linear-gradient(145deg, var(--bg-tertiary), var(--bg-secondary));
    border-color: var(--border-flat);
    border-radius: var(--radius-lg);
}

.matches-grid .match-card:hover {
    border-color: var(--accent);
    box-shadow: 0 14px 34px rgba(var(--accent-rgb), 0.09);
}

.matches-grid .match-card::before {
    display: none;
}

@media (max-width: 900px) {
    .dashboard-hero {
        min-height: 330px;
    }

    .dashboard-hero-copy {
        width: 64%;
    }

    .dashboard-hero-art {
        width: 75%;
        opacity: 0.8;
    }
}

@media (max-width: 680px) {
    .dashboard-hero {
        min-height: 440px;
        padding: 1.25rem;
        align-items: flex-end;
    }

    .dashboard-hero::after {
        background:
            var(--surface-inner-glow),
            linear-gradient(0deg, var(--bg-flat) 8%, rgba(var(--color-surface-flat-rgb), 0.92) 46%, rgba(var(--color-surface-flat-rgb), 0.05) 88%);
    }

    .dashboard-hero-copy {
        width: 100%;
    }

    .dashboard-hero h1 {
        font-size: clamp(2rem, 10vw, 3.1rem);
    }

    .dashboard-hero-art {
        inset: 0 0 auto;
        width: 100%;
        height: 66%;
        object-position: 64% center;
    }

    .dashboard-feature-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-feature-card {
        min-height: 128px;
    }
}

/* --- Preset-owned artwork --- */

.preset-card-art,
.challenge-card-art,
.match-card-art {
    display: block;
    overflow: hidden;
    background: var(--bg-flat);
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-md);
}

.preset-card-art,
.challenge-card-art {
    aspect-ratio: 16 / 7;
}

.preset-card-art img,
.challenge-card-art img,
.match-card-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease;
}

.preset-card-art:hover img,
.challenge-card-art:hover img,
.match-card:hover .match-card-art img {
    transform: scale(1.035);
}

.preset-catalog-card {
    overflow: hidden;
    background: linear-gradient(145deg, var(--bg-tertiary), var(--bg-secondary));
    border-color: var(--border-flat);
    border-radius: var(--radius-lg);
}

.preset-catalog-card:hover {
    border-color: var(--accent);
}

.challenge-card-art {
    margin: -0.95rem -0.95rem 0;
    border-width: 0 0 1px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.challenge-grid .challenge-card {
    overflow: hidden;
    background:
        var(--surface-inner-glow),
        linear-gradient(145deg, var(--bg-tertiary), var(--bg-secondary));
    border-color: var(--border-flat);
    border-radius: var(--radius-lg);
}

.match-card-art {
    height: 132px;
    margin: -1.25rem -1.25rem 1rem;
    border-width: 0 0 1px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.matches-grid .match-card {
    overflow: hidden;
}

@media (max-width: 680px) {
    .preset-card-art,
    .challenge-card-art {
        aspect-ratio: 16 / 8;
    }

    .match-card-art {
        height: 112px;
    }
}

/* --- Layered player profile --- */

.profile-hero {
    position: relative;
    min-height: 680px;
    margin-bottom: 0;
    display: grid;
    grid-template-columns: minmax(300px, 42%) minmax(0, 1fr);
    align-items: stretch;
    overflow: hidden;
    isolation: isolate;
    background:
        var(--surface-inner-glow),
        linear-gradient(145deg, var(--bg-tertiary), var(--bg-flat));
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.profile-character-panel {
    min-width: 0;
    display: flex;
    align-self: start;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    background: radial-gradient(circle at 50% 35%, rgba(var(--color-info-rgb), 0.18), transparent 58%);
    border-right: 1px solid var(--border-flat);
}

@media (min-width: 761px) {
    .profile-hero {
        overflow: clip;
    }

    .profile-character-panel {
        position: sticky;
        top: 4rem;
    }
}

.profile-hero-content {
    min-width: 0;
    padding: clamp(1.25rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
}

.profile-hero-copy {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 0;
}

.profile-hero-copy .back-link {
    margin-bottom: clamp(1.25rem, 3vh, 2.25rem);
}

.profile-identity-label {
    display: block;
    width: fit-content;
    margin-bottom: 0.85rem;
}

.profile-hero-copy h1 {
    max-width: 14ch;
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(2.75rem, 5vw, 5.5rem);
    line-height: 0.96;
    letter-spacing: -0.05em;
    overflow-wrap: anywhere;
}

.profile-hero-meta {
    margin-top: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 0.8rem;
    color: var(--text-secondary);
}

.profile-character {
    width: min(100%, 520px);
    height: min(90vh, 720px);
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 22px 34px rgba(var(--color-surface-flat-rgb), 0.62));
}

.profile-hero .profile-stats-grid {
    position: relative;
    z-index: 1;
    inset: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin: 0;
}

.profile-hero .profile-stat-card {
    min-width: 0;
    padding: 0.9rem 0.8rem;
    text-align: left;
    background: var(--bg-secondary);
    border-color: var(--border-flat);
    backdrop-filter: blur(14px);
}

.profile-hero .profile-stat-card > img,
.profile-hero .profile-stat-card > picture > img {
    display: block;
}

picture {
    display: contents;
}

.profile-hero .profile-stat-card:last-child {
    grid-column: 1 / -1;
}

.profile-hero .profile-account-settings {
    margin: 0;
}

.profile-hero .profile-account-grid {
    grid-template-columns: 1fr;
}

@media (max-width: 900px) {
    .profile-hero {
        grid-template-columns: minmax(250px, 38%) minmax(0, 1fr);
    }

    .profile-character {
        width: 112%;
    }
}

@media (max-width: 760px) {
    .profile-hero {
        min-height: 0;
        grid-template-columns: 1fr;
    }

    .profile-character-panel {
        min-height: 410px;
        border-right: 0;
        border-bottom: 1px solid var(--border-flat);
    }

    .profile-hero-content {
        padding: 1.25rem;
    }

    .profile-hero-copy h1 {
        font-size: clamp(2.5rem, 13vw, 4.25rem);
    }

    .profile-character {
        width: min(100%, 360px);
        height: 400px;
    }

    .profile-hero .profile-stats-grid {
        position: relative;
        inset: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: 0;
    }

    .profile-hero .profile-stat-card {
        padding: 0.7rem;
    }

    .profile-hero .profile-stat-card:nth-child(5) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 680px) {
    .profile-hero .profile-stats-grid {
        position: relative;
        inset: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --- Discovery and ranking surfaces --- */

.discovery-hero {
    position: relative;
    min-height: 220px;
    margin-bottom: 1.25rem;
    padding: clamp(1.35rem, 3vw, 2.5rem);
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    background: var(--bg-flat);
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
}

.discovery-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        var(--surface-inner-glow),
        linear-gradient(90deg, var(--bg-flat) 0%, rgba(var(--color-surface-flat-rgb), 0.94) 42%, transparent 82%);
}

.discovery-hero-copy {
    position: relative;
    z-index: 1;
    width: min(58%, 700px);
}

.discovery-hero .page-title {
    font-size: clamp(2rem, 4vw, 3.8rem);
    line-height: 1;
    letter-spacing: -0.04em;
}

.discovery-hero .page-subtitle {
    max-width: 54ch;
    margin-top: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.discovery-hero > img,
.discovery-hero > picture > img {
    position: absolute;
    inset: 0 0 0 auto;
    z-index: -2;
    width: 48%;
    height: 100%;
    object-fit: cover;
}

.discovery-hero > .page-header-actions {
    position: relative;
    z-index: 2;
    margin-left: auto;
    align-self: flex-end;
}

.leaderboard-hero > img,
.leaderboard-hero > picture > img {
    width: 34%;
    object-fit: contain;
}

.leaderboard-avatar {
    position: relative;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
}

.score-player-identity,
.gallery-player-identity {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.gallery-player-identity > div {
    min-width: 0;
}

.leaderboard-drilldown-card {
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.leaderboard-drilldown-card > .preset-card-art {
    margin: -1rem -1rem 0;
    border-width: 0 0 1px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.profile-stat-card {
    position: relative;
    min-height: 112px;
    padding: 1rem 5.25rem 1rem 1.1rem;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--border-flat);
    border-radius: 0;
}

.profile-stats-grid {
    position: relative;
    z-index: 4;
    gap: 0;
    margin: -4.75rem 1rem 1.5rem;
    padding: 0.45rem;
    overflow: hidden;
    background: rgba(var(--color-surface-flat-rgb), 0.9);
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(18px);
}

.profile-stats-panel {
    display: grid;
    gap: 0.5rem;
}

.profile-stat-card:last-child {
    border-right: 0;
}

.profile-stat-card.stat-highlight {
    background: rgba(var(--accent-rgb), 0.08);
    border-color: var(--border-flat);
    border-radius: var(--radius-md);
}

.profile-stat-card > img,
.profile-stat-card > picture > img {
    position: absolute;
    z-index: 0;
    top: 50%;
    right: 0.75rem;
    width: 68px;
    height: 68px;
    object-fit: contain;
    opacity: 0.82;
    transform: translateY(-50%);
    filter: drop-shadow(0 8px 16px rgba(var(--color-surface-flat-rgb), 0.55));
}

.profile-trophies {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.profile-trophy {
    position: relative;
    display: grid;
    flex: 0 1 12rem;
    justify-items: center;
    gap: 0.65rem;
    min-width: 9rem;
    padding: 1rem;
    color: var(--text-primary);
    text-align: center;
    background: linear-gradient(145deg, var(--bg-tertiary), var(--bg-secondary));
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.profile-trophy:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.profile-trophy > img,
.profile-trophy > picture > img {
    width: clamp(5.5rem, 10vw, 7.5rem);
    aspect-ratio: 1;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(var(--color-surface-flat-rgb), 0.5));
}

.profile-trophy-tooltip {
    position: absolute;
    z-index: 10;
    bottom: calc(100% + 0.65rem);
    left: 0;
    width: max-content;
    max-width: min(18rem, calc(100vw - 2rem));
    padding: 0.65rem 0.8rem;
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    background: var(--bg-flat);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    pointer-events: none;
    transform: translate(0, 0.35rem);
    transition: opacity 0.15s, transform 0.15s;
}

.profile-trophy:hover .profile-trophy-tooltip,
.profile-trophy:focus-visible .profile-trophy-tooltip {
    opacity: 1;
    transform: translate(0, 0);
}

.status-tooltip {
    position: relative;
    display: inline-flex;
    outline: none;
}

.status-tooltip-content {
    position: absolute;
    z-index: 20;
    bottom: calc(100% + 0.2rem);
    left: 50%;
    width: min(28rem, calc(100vw - 2rem));
    padding: 0.6rem 0.75rem;
    color: var(--text-primary);
    background: var(--bg-flat);
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-size: 0.75rem;
    line-height: 1.4;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 0.3rem);
    transition: opacity 0.15s, transform 0.15s;
}

.status-tooltip:hover .status-tooltip-content,
.status-tooltip:focus .status-tooltip-content {
    opacity: 1;
    transform: translate(-50%, 0);
}

.status-tooltip:focus-visible {
    border-radius: var(--radius-sm);
    box-shadow: var(--focus-ring);
}

.profile-stat-card .stat-value,
.profile-stat-card .stat-label {
    position: relative;
    z-index: 1;
}

.profile-stat-card .stat-value {
    font-size: clamp(1.55rem, 2.2vw, 2.1rem);
}

@media (max-width: 1080px) {
    .profile-stat-card {
        padding-right: 3.8rem;
    }

    .profile-stat-card > img,
    .profile-stat-card > picture > img {
        right: 0.35rem;
        width: 52px;
        height: 52px;
        opacity: 0.68;
    }
}

@media (max-width: 760px) {
    .profile-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        margin: 0 0 1.25rem;
    }

    .profile-stat-card,
    .profile-stat-card:last-child {
        min-height: 104px;
        border-right: 1px solid var(--border-flat);
        border-bottom: 1px solid var(--border-flat);
    }

    .profile-stat-card:nth-child(2n),
    .profile-stat-card:last-child {
        border-right: 0;
    }

    .profile-stat-card:nth-last-child(-n + 2) {
        border-bottom: 0;
    }

    .profile-stat-card:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 680px) {
    .discovery-hero {
        min-height: 260px;
        padding: 1.1rem;
        align-items: flex-end;
    }

    .discovery-hero::after {
        background:
            var(--surface-inner-glow),
            linear-gradient(0deg, var(--bg-flat) 12%, rgba(var(--color-surface-flat-rgb), 0.9) 52%, transparent 92%);
    }

    .discovery-hero-copy {
        width: 100%;
    }

    .discovery-hero > img,
    .leaderboard-hero > img {
        inset: 0 0 auto;
        width: 100%;
        height: 72%;
        opacity: 0.72;
    }

    .discovery-hero > .page-header-actions {
        position: absolute;
        top: 0.8rem;
        right: 0.8rem;
    }
}

/* --- Dense competition surfaces --- */

.match-header {
    position: relative;
    min-height: 96px;
    overflow: visible;
    isolation: isolate;
    padding: 1rem 1.25rem;
    background: linear-gradient(120deg, var(--bg-tertiary), var(--bg-secondary));
    border-color: var(--border-flat);
    border-radius: var(--radius-lg);
}

.match-header::after,
.match-header-art {
    overflow: hidden;
    border-radius: inherit;
}

.match-runtime-details {
    margin-bottom: 0.75rem;
}

.match-runtime-details > summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
}

.match-runtime-details > summary .status-badge {
    margin-left: auto;
}

.match-runtime-details[open] > summary {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.match-header::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        var(--surface-inner-glow),
        linear-gradient(90deg, var(--bg-tertiary) 0%, rgba(var(--color-surface-flat-rgb), 0.88) 68%, transparent);
}

.match-header-left,
.match-header-center,
.match-header-right {
    position: relative;
    z-index: 1;
}

.match-header-art {
    position: absolute;
    inset: 0 0 0 auto;
    z-index: -2;
    width: 34%;
}

.match-header-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.7;
}

.info-strip,
.run-metadata-panel,
.replay-context-card,
.replay-score-card,
.compare-run-card,
.rules-hero,
.rules-section,
.rules-mode-card {
    background: linear-gradient(145deg, var(--bg-tertiary), var(--bg-secondary));
    border-color: var(--border-flat);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.rules-hero {
    background:
        var(--surface-inner-glow),
        linear-gradient(145deg, var(--bg-tertiary), var(--bg-secondary));
}

.replay-summary-card,
.compare-metric-grid > div,
.replay-context-card > div {
    background: rgba(var(--color-surface-flat-rgb), 0.72);
    border-color: var(--border-flat);
    border-radius: var(--radius-md);
}

.replay-context-card > div {
    padding: 0.75rem;
}

.replay-player-title {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.challenge-hero {
    isolation: isolate;
    border-color: var(--border-flat);
}

.challenge-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        var(--surface-inner-glow),
        linear-gradient(90deg, var(--bg-tertiary) 0%, rgba(var(--color-surface-flat-rgb), 0.9) 64%, transparent);
}

.challenge-hero-art {
    position: absolute;
    inset: 0 0 0 auto;
    z-index: -2;
    width: 44%;
    height: 100%;
    object-fit: cover;
    opacity: 0.62;
}

.challenge-section-nav {
    background: rgba(var(--color-surface-flat-rgb), 0.92);
    border-color: var(--border-flat);
    backdrop-filter: blur(14px);
}

.challenge-table th,
.scores-table th {
    background: var(--bg-flat);
}

.challenge-table tbody tr:hover,
.scores-table tbody tr:hover {
    background: rgba(var(--accent-rgb), 0.06);
}

.challenge-participant,
.compare-run-identity {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
}

.compare-run-header {
    justify-content: flex-start;
}

.compare-run-header .btn {
    margin-left: auto;
}

@media (max-width: 900px) {
    .match-header {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .match-header-art {
        width: 54%;
        opacity: 0.45;
    }

    .challenge-hero-art {
        width: 62%;
        opacity: 0.4;
    }
}

@media (max-width: 680px) {
    .match-header {
        min-height: 150px;
    }

    .match-header-left,
    .match-header-center,
    .match-header-right {
        width: 100%;
    }

    .match-header-right {
        margin-left: 0;
    }

    .match-header-art {
        width: 100%;
        opacity: 0.26;
    }

    .challenge-hero-art {
        width: 100%;
        opacity: 0.24;
    }

    .info-strip {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 0.55rem;
    }

    .info-strip-item {
        padding: 0.6rem;
    }

    .events-filter {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.2rem;
    }
}

/* --- Shared shell finishing --- */

.app-sidebar .nav-link,
.app-sidebar .theme-toggle,
.app-sidebar .nav-logout {
    font-size: 0.84rem;
    letter-spacing: 0.01em;
    text-transform: none;
}

.app-sidebar .nav-link .icon,
.app-sidebar .nav-logout .icon {
    width: 1.4rem;
    height: 1.4rem;
}

.app-shell .btn {
    font-family: var(--font-sans);
    letter-spacing: 0.01em;
    text-transform: none;
}

.app-user-chip .app-user-chip-mark {
    width: 30px;
    height: 30px;
    border-width: 1px;
}

.app-mobile-nav {
    display: none;
}

@media (max-width: 680px) {
    .app-stage {
        padding-bottom: 72px;
    }

    .app-sidebar .navbar-inner {
        padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
        overflow-y: auto;
    }

    .app-mobile-nav {
        position: fixed;
        z-index: 130;
        right: 0.6rem;
        bottom: max(0.6rem, env(safe-area-inset-bottom));
        left: 0.6rem;
        min-height: 62px;
        padding: 0.35rem;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0.2rem;
        background: rgba(var(--color-surface-flat-rgb), 0.94);
        border: 1px solid var(--border-panel);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        backdrop-filter: blur(18px);
    }

    .app-mobile-nav-link {
        min-width: 0;
        padding: 0.35rem 0.15rem;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 0.15rem;
        color: var(--text-muted);
        border-radius: var(--radius-md);
        font-size: 0.62rem;
        font-weight: 700;
    }

    .app-mobile-nav-link .icon {
        width: 1.25rem;
        height: 1.25rem;
        stroke: currentColor;
    }

    .app-mobile-nav-link.is-active {
        color: var(--color-on-accent);
        background: var(--accent);
    }

    .app-mobile-nav-link:hover {
        color: var(--text-primary);
        background: var(--bg-tertiary);
    }

.app-mobile-nav-link.is-active:hover {
        color: var(--color-on-accent);
        background: var(--accent-hover);
    }
}

/* --- Compact discovery surfaces --- */

.preset-catalog-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    align-items: start;
}

.preset-catalog-card {
    gap: 0.75rem;
}

.preset-contract-panel {
    margin-top: 0;
}

.preset-detail-panel > summary {
    min-height: 2rem;
    display: flex;
    align-items: center;
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.preset-detail-panel[open] > summary,
.preset-detail-panel > summary:hover {
    color: var(--accent);
}

.preset-contract-panel .preset-contract-summary {
    margin-top: 0.65rem;
}

.challenge-grid,
.challenge-grid-compact,
.profile-challenge-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 22rem));
    gap: 0.85rem;
    justify-content: start;
}

.challenge-mini-card {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.7rem;
    overflow: hidden;
    padding: 0.95rem;
    color: var(--text-primary);
    background:
        var(--surface-inner-glow),
        linear-gradient(145deg, var(--bg-tertiary), var(--bg-secondary));
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.challenge-mini-card:hover {
    border-color: var(--accent);
    box-shadow: 0 12px 28px rgba(var(--accent-rgb), 0.08);
    transform: translateY(-2px);
}

.challenge-mini-card .challenge-mini-art {
    height: 7rem;
    margin: -0.95rem -0.95rem 0;
    aspect-ratio: auto;
}

.challenge-mini-card .challenge-mini-art img {
    object-position: center 42%;
}

.challenge-mini-card .challenge-card-header,
.challenge-mini-card .profile-challenge-card-header {
    margin: 0;
}

.challenge-mini-card h2,
.challenge-mini-card h3 {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.3;
    text-transform: none;
}

.challenge-mini-description {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.challenge-mini-meta,
.challenge-mini-card .profile-challenge-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.7rem;
}

.challenge-mini-meta > span:not(.meta-tag),
.challenge-mini-card .profile-challenge-meta > span {
    padding: 0.18rem 0.42rem;
    background: var(--bg-flat);
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-sm);
}

.challenge-card-leaders {
    display: grid;
    gap: 0.4rem;
    font-size: 0.78rem;
}

.challenge-card-leaders ol {
    display: grid;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.challenge-card-leaders li,
.challenge-card-leader-player {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.challenge-card-leaders li {
    color: var(--text-secondary);
}

.challenge-card-leader-rank {
    width: 1.5rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.challenge-card-leader-player {
    flex: 1;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
}

.challenge-card-leader-player > :last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.challenge-card-leader-score {
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.challenge-mini-card .challenge-mini-action {
    align-self: flex-start;
    margin-top: auto;
}

.challenge-table-wrap,
.scores-table-wrap {
    overflow-x: auto;
    padding: 0.65rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.challenge-table,
.scores-table {
    border-collapse: separate;
    border-spacing: 0 0.35rem;
}

.challenge-table th,
.scores-table th {
    padding: 0.45rem 0.7rem;
    color: var(--text-muted);
    background: transparent;
    border: 0;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.challenge-table tbody td,
.scores-table tbody td {
    padding: 0.68rem 0.7rem;
    background: var(--bg-flat);
    border-top: 1px solid var(--border-flat);
    border-bottom: 1px solid var(--border-flat);
}

.challenge-table tbody td:first-child,
.scores-table tbody td:first-child {
    border-left: 1px solid var(--border-flat);
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.challenge-table tbody td:last-child,
.scores-table tbody td:last-child {
    border-right: 1px solid var(--border-flat);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.challenge-table tbody tr:hover td,
.scores-table tbody tr:hover td {
    color: var(--text-primary);
    background: rgba(var(--accent-rgb), 0.07);
}

.empty-state {
    width: 100%;
    max-width: none;
    margin: 0.75rem 0;
    padding: 1.1rem 1.2rem;
    text-align: left;
    background: rgba(var(--color-surface-flat-rgb), 0.45);
    border-color: var(--border-flat);
    border-radius: var(--radius-md);
    box-shadow: none;
}

.empty-state-actions {
    justify-content: flex-start;
    margin-top: 0.8rem;
}

.dashboard-empty-state {
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
    padding: 1.1rem;
    background: rgba(var(--color-surface-flat-rgb), 0.45);
}

@media (prefers-reduced-motion: reduce) {
    .challenge-mini-card {
        transition: none;
    }
}

@media (max-width: 600px) {
    .dashboard-empty-state {
        grid-template-columns: 1fr;
        padding: 0.75rem;
        text-align: left;
    }

    .dashboard-empty-state .empty-state-actions {
        grid-column: auto;
        justify-content: flex-start;
    }
}

/* --- Match room composition --- */

.info-strip {
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}

.match-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 17rem);
    align-items: start;
}

.events-area {
    min-height: 32rem;
    background: linear-gradient(145deg, var(--bg-tertiary), var(--bg-secondary));
    border-color: var(--border-flat);
    box-shadow: var(--shadow);
}

.players-sidebar {
    position: sticky;
    top: 4rem;
    width: auto;
    max-height: calc(100vh - 5rem);
    background: linear-gradient(145deg, var(--bg-tertiary), var(--bg-secondary));
    border-color: var(--border-flat);
    box-shadow: var(--shadow);
}

.player-item {
    border: 1px solid var(--border-flat);
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.player-item.is-working,
.player-item.is-selected {
    border-color: var(--accent);
}

.match-card .player-avatar,
.challenge-table .leaderboard-avatar {
    border: 0;
    box-shadow: none;
}

.tab-btn,
.filter-btn {
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

@media (max-width: 900px) {
    .match-layout {
        display: flex;
        flex-direction: column;
    }

    .events-area,
    .players-sidebar {
        width: 100%;
    }

    .players-sidebar {
        position: static;
        max-height: none;
    }
}

@media (max-width: 680px) {
    .info-strip {
        display: flex;
        overflow-x: auto;
        padding: 0.5rem;
        scroll-snap-type: x proximity;
    }

    .info-strip-item {
        min-width: min(78vw, 16rem);
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .events-header {
        align-items: stretch;
    }

    .events-tabs,
    .events-controls,
    .events-filter {
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .tab-btn,
    .filter-btn {
        min-height: 2.25rem;
        flex: 0 0 auto;
    }
}

@media (max-width: 480px) {
    .info-strip,
    .events-filter {
        display: flex;
    }
}

/* --- Current competition guide --- */

.rules-guide {
    gap: 1rem;
    width: 100%;
    min-width: 0;
}

.rules-guide-hero {
    position: relative;
    min-height: 390px;
    display: flex;
    align-items: center;
    isolation: isolate;
    padding: clamp(1.5rem, 4vw, 3.5rem);
    background: var(--bg-flat);
    border-color: var(--border-flat);
    box-shadow: var(--shadow-lg);
}

.rules-guide-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, var(--bg-flat) 0%, rgba(var(--color-surface-flat-rgb), 0.96) 44%, rgba(var(--color-surface-flat-rgb), 0.18) 78%);
}

.rules-guide-hero .rules-hero-copy {
    position: relative;
    z-index: 2;
    width: min(58%, 650px);
}

.rules-guide-hero .rules-title {
    max-width: 13ch;
    font-size: clamp(2.25rem, 4.4vw, 4.7rem);
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.rules-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1.25rem;
}

.rules-guide-hero-art {
    position: absolute;
    inset: 0 0 0 auto;
    z-index: -2;
    width: 57%;
    height: 100%;
    object-fit: contain;
    object-position: right center;
}

.rules-arena-switch {
    position: absolute;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 2;
    width: min(38%, 28rem);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    padding: 0.45rem;
    background: rgba(var(--color-surface-flat-rgb), 0.9);
    border: 1px solid var(--border-panel);
    border-radius: var(--radius-md);
    backdrop-filter: blur(14px);
}

.rules-arena-switch span {
    display: grid;
    gap: 0.2rem;
    padding: 0.65rem;
    border-radius: var(--radius-sm);
}

.rules-arena-switch span:first-child {
    background: rgba(var(--accent-rgb), 0.1);
}

.rules-arena-switch small {
    color: var(--text-muted);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.rules-arena-switch strong {
    color: var(--text-primary);
    font-size: 0.76rem;
}

.rules-jump-nav {
    position: sticky;
    top: 3.5rem;
    z-index: 20;
    display: flex;
    gap: 0.35rem;
    overflow-x: auto;
    padding: 0.45rem;
    background: rgba(var(--color-surface-flat-rgb), 0.94);
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px);
    max-width: 100%;
}

.rules-jump-nav a {
    min-height: 2.3rem;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    padding: 0.45rem 0.72rem;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    font-size: 0.76rem;
    font-weight: 700;
}

.rules-jump-nav a:hover,
.rules-jump-nav a:focus-visible {
    color: var(--text-primary);
    background: var(--accent-dim);
}

.rules-guide .rules-section,
.rules-guide .rules-mode-card {
    border-color: var(--border-flat);
    box-shadow: var(--shadow);
}

.rules-lifecycle {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
}

.rules-lifecycle article,
.rules-principles article {
    min-width: 0;
    padding: 0.9rem;
    background: var(--bg-flat);
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-md);
}

.rules-lifecycle article > span {
    display: inline-flex;
    margin-bottom: 0.75rem;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 800;
}

.rules-lifecycle h3 {
    margin-bottom: 0.35rem;
    color: var(--text-primary);
    font-size: 0.92rem;
}

.rules-lifecycle p,
.rules-principles p {
    font-size: 0.82rem;
    line-height: 1.5;
}

.rules-format-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
    scroll-margin-top: 7rem;
}

.rules-format-card {
    position: relative;
    min-height: 230px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(145deg, var(--bg-tertiary), var(--bg-secondary));
}

.rules-format-card::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 38%;
    height: 3px;
    background: var(--accent);
}

.format-waves::after {
    background: var(--color-info);
}

.format-source::after {
    background: var(--color-warning);
}

.rules-format-card .btn {
    align-self: flex-start;
    margin-top: auto;
}

.rules-format-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: auto;
    padding-top: 1rem;
}

.rules-format-tags span {
    padding: 0.2rem 0.45rem;
    color: var(--text-secondary);
    background: var(--bg-flat);
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.68rem;
}

.rules-open-guide {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
    gap: 1rem;
    scroll-margin-top: 7rem;
}

.rules-open-guide .rules-challenge-grid {
    grid-column: 1 / -1;
}

.rules-open-copy > p {
    max-width: 70ch;
}

.rules-score-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
}

.rules-score-card {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--bg-flat);
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-md);
}

.rules-score-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.rules-score-card-head strong {
    color: var(--text-primary);
}

.rules-score-card-head span {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.7rem;
}

.rules-score-bars {
    display: grid;
    gap: 0.45rem;
}

.rules-score-bars > span {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.3rem;
    color: var(--text-secondary);
    font-size: 0.76rem;
}

.rules-score-bars > span::after {
    content: "";
    grid-column: 1 / -1;
    width: var(--score-weight);
    height: 4px;
    background: var(--accent);
    border-radius: 999px;
}

.score-challenge-card .rules-score-bars > span::after {
    background: var(--color-info);
}

.rules-score-bars b {
    color: var(--text-primary);
    font-weight: 700;
}

.rules-score-bars em {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-style: normal;
}

.rules-score-card > p {
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.5;
}

.rules-principles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.rules-principles strong {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--text-primary);
}

#live-matches,
#scoring,
#fair-play,
#client-setup {
    scroll-margin-top: 7rem;
}

@media (max-width: 900px) {
    .rules-guide-hero .rules-hero-copy {
        width: 68%;
    }

    .rules-arena-switch {
        width: 46%;
    }

    .rules-lifecycle,
    .rules-format-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rules-open-guide,
    .rules-score-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .rules-guide-hero {
        min-height: 600px;
        align-items: flex-end;
    }

    .rules-guide-hero::after {
        background: linear-gradient(0deg, var(--bg-flat) 15%, rgba(var(--color-surface-flat-rgb), 0.96) 58%, rgba(var(--color-surface-flat-rgb), 0.08) 92%);
    }

    .rules-guide-hero .rules-hero-copy {
        width: 100%;
        padding-bottom: 7.5rem;
    }

    .rules-guide-hero-art {
        inset: 0 0 auto;
        width: 100%;
        height: 45%;
        object-position: center top;
    }

    .rules-arena-switch {
        right: 1rem;
        bottom: 1rem;
        left: 1rem;
        width: auto;
    }

    .rules-jump-nav {
        top: 0.5rem;
    }

    .rules-lifecycle,
    .rules-format-grid,
    .rules-principles {
        grid-template-columns: 1fr;
    }

    .rules-format-card {
        min-height: 200px;
    }

    .rules-challenge-flow {
        grid-template-columns: 1fr 1fr;
    }
}

/* --- Challenge results and score details --- */

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.preset-metadata-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

.preset-metadata-item {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 0.35rem;
    padding: 0.7rem;
    background: var(--bg-flat);
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-md);
}

.preset-metadata-item > span {
    color: var(--text-muted);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.preset-metadata-item > strong,
.preset-metadata-item > code {
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.preset-metadata-wide {
    grid-column: 1 / -1;
}

[data-effective-runtime] .compare-environment-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}

[data-effective-runtime] .compare-environment-row > span {
    overflow-wrap: anywhere;
}

.challenge-version-bar {
    grid-template-columns: minmax(14rem, 24rem);
}

.challenge-technical-identity {
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-flat);
}

.challenge-technical-identity > summary {
    min-height: 2.25rem;
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 700;
}

.challenge-technical-identity > summary:hover,
.challenge-technical-identity > summary:focus-visible {
    color: var(--text-primary);
}

.challenge-technical-identity-list {
    margin-top: 0.65rem;
}

.challenge-rank-cell {
    width: 4rem;
    text-align: center !important;
    font-family: var(--font-mono);
    font-weight: 700;
}

.challenge-rank-cell .rank-medal {
    margin-inline: auto;
}

.challenge-attempt {
    gap: 0.9rem;
    padding: 1rem;
    background: linear-gradient(145deg, var(--bg-tertiary), var(--bg-secondary));
    border-color: var(--border-flat);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.challenge-attempt-header,
.challenge-attempt-badges {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
}

.challenge-attempt-header {
    justify-content: space-between;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-flat);
}

.challenge-attempt-header h3 {
    color: var(--text-primary);
    font-size: 1rem;
}

.challenge-attempt-badges {
    justify-content: flex-end;
    flex-wrap: wrap;
}

.challenge-attempt-context {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

.challenge-attempt-context > span {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 0.25rem;
    padding: 0.6rem;
    color: var(--text-secondary);
    background: var(--bg-flat);
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-sm);
    font-size: 0.76rem;
    overflow-wrap: anywhere;
}

.challenge-attempt-context small,
.challenge-attempt-total small,
.score-detail-overview small {
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.challenge-attempt-scoreboard {
    display: grid;
    grid-template-columns: minmax(7rem, 0.35fr) minmax(0, 1fr);
    gap: 0.55rem;
}

.challenge-attempt-total,
.challenge-attempt-metrics > div {
    display: grid;
    align-content: center;
    gap: 0.2rem;
    padding: 0.7rem;
    background: var(--bg-flat);
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-md);
}

.challenge-attempt-total {
    border-color: rgba(var(--accent-rgb), 0.35);
}

.challenge-attempt-total > strong {
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 1.7rem;
    line-height: 1;
}

.challenge-attempt-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
}

.challenge-attempt-metrics dt {
    color: var(--text-muted);
    font-size: 0.66rem;
}

.challenge-attempt-metrics dd {
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 700;
}

.challenge-attempt .challenge-review-scores {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.challenge-attempt .challenge-review-scores > span {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0.55rem;
    background: var(--bg-flat);
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-sm);
}

.challenge-attempt-actions {
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-flat);
}

.score-detail-modal {
    width: min(94vw, 920px);
    max-width: 920px;
    overflow: hidden;
    background: var(--bg-secondary);
    border-color: var(--border-panel);
}

.score-detail-body {
    background: var(--bg-flat);
}

.score-detail-section {
    padding: 1rem;
    background: linear-gradient(145deg, var(--bg-tertiary), var(--bg-secondary));
    border-color: var(--border-flat);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.score-detail-overview {
    display: grid;
    grid-template-columns: minmax(8.5rem, 0.32fr) minmax(0, 1fr);
    gap: 0.55rem;
    margin-top: 0.75rem;
}

.score-detail-overview-total,
.score-detail-overview-metrics > span {
    display: grid;
    align-content: center;
    gap: 0.22rem;
    padding: 0.75rem;
    background: var(--bg-flat);
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-md);
}

.score-detail-overview-total {
    border-color: rgba(var(--accent-rgb), 0.4);
}

.score-detail-overview-total strong {
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 2rem;
    line-height: 1;
}

.score-detail-overview-total > span {
    color: var(--text-muted);
    font-size: 0.68rem;
}

.score-detail-overview-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
    gap: 0.45rem;
}

.score-detail-overview-metrics strong {
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 1.1rem;
}

.score-detail .challenge-review-scores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 0.45rem;
}

.score-detail .challenge-review-scores > span {
    display: grid;
    gap: 0.25rem;
    padding: 0.65rem;
    background: var(--bg-flat);
    border: 1px solid var(--border-flat);
    border-radius: var(--radius-sm);
}

.score-detail .challenge-review-scores strong {
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 1rem;
}

@media (max-width: 600px) {
    .preset-metadata-grid {
        grid-template-columns: 1fr;
    }

    .preset-metadata-wide {
        grid-column: auto;
    }

    [data-effective-runtime] .compare-environment-row {
        grid-template-columns: 1fr;
    }

    [data-effective-runtime] .compare-environment-row small {
        grid-column: 1;
    }

    .challenge-attempt-header {
        flex-direction: column;
    }

    .challenge-attempt-badges {
        justify-content: flex-start;
    }

    .challenge-attempt-context,
    .challenge-attempt-scoreboard,
    .score-detail-overview {
        grid-template-columns: 1fr;
    }

    .challenge-attempt-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .score-detail-modal {
        width: calc(100vw - 1rem);
    }
}