/* ==========================================================================
   La Bagarre — Design tokens
   ========================================================================== */
:root {
    /* Brand: slate dark backgrounds, lime accent (the back-office swaps the accent for amber) */
    --color-bg: #14171d;
    --color-bg-soft: #1b1f27;
    --color-surface: #232833;
    --color-surface-elevated: #2c3340;
    --color-surface-light: #f7f6f2;

    --color-accent: #b9e769;
    --color-accent-strong: #a3d94a;
    --color-accent-soft: rgba(185, 231, 105, 0.14);
    --color-on-accent: #182312;

    --color-text: #eef1f5;
    --color-text-muted: #9aa3b2;
    --color-text-on-light: #1b1f27;
    --color-text-muted-on-light: #5d6573;

    --color-border: rgba(238, 241, 245, 0.08);
    --color-border-strong: rgba(238, 241, 245, 0.16);

    --color-success: #6fcf97;
    --color-warning: #f2c94c;
    --color-danger: #ef7671;
    --color-info: #64c4ef;

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 18px;
    --radius-full: 999px;

    /* Shadow */
    --shadow-sm: 0 1px 2px rgba(5, 7, 10, 0.35);
    --shadow-md: 0 12px 28px -12px rgba(5, 7, 10, 0.55);
    --shadow-lg: 0 24px 56px -20px rgba(5, 7, 10, 0.65);

    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --space-16: 64px;

    /* Motion */
    --transition-fast: 150ms ease;
    --transition-base: 220ms ease;

    /* Type */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    color-scheme: dark;
}

body {
    margin: 0;
    min-height: 100vh;
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--space-2);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.1rem; }

p { margin: 0 0 var(--space-3); }

ul, ol { margin: 0; padding: 0; list-style: none; }

button { font-family: inherit; }

:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* ==========================================================================
   Layout
   ========================================================================== */
.app-shell {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.main-content {
    flex: 1;
    padding: var(--space-8) 0 var(--space-16);
}

@media (max-width: 640px) {
    .main-content { padding: var(--space-6) 0 var(--space-12); }
}

/* Division format builder */
.format-empty,
.format-form {
    max-width: 760px;
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-soft);
}

.format-empty h2 { margin-top: var(--space-2); }
.format-empty .btn { margin-top: var(--space-3); }
.format-copy {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}
.format-copy .btn { margin-top: 0; }

.format-timeline {
    width: 100%;
    max-width: 820px;
}

.format-phase {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: var(--space-4);
}

.format-phase:not(:last-child)::before {
    position: absolute;
    top: 40px;
    bottom: -8px;
    left: 19px;
    width: 2px;
    background: var(--color-border-strong);
    content: '';
}

.format-phase-marker {
    z-index: 1;
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid var(--color-border-strong);
    border-radius: 50%;
    background: var(--color-surface-elevated);
    color: var(--color-accent);
    font-weight: 800;
}

.format-phase-card {
    min-width: 0;
    margin-bottom: var(--space-6);
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.format-phase-heading,
.format-qualification {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.format-phase-heading { align-items: flex-start; margin-bottom: var(--space-3); }
.format-phase-heading .page-eyebrow { display: block; }
.format-phase-heading h2 { margin: 0; overflow-wrap: anywhere; }
.format-phase-type { margin-bottom: var(--space-1); font-weight: 700; }
.format-phase-summary { margin-bottom: var(--space-2); color: var(--color-text-muted); }
.format-phase-card .text-muted { margin-bottom: 0; font-size: 0.9rem; }
.format-qualification {
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: var(--space-6) 0 var(--space-4);
    padding: var(--space-4) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-accent);
    font-weight: 700;
}

.format-action-note { margin: 0 0 var(--space-3); font-weight: 700; }
.format-action-note + .btn { margin-bottom: var(--space-2); }
.format-phase-actions { margin-top: var(--space-6); }
.format-qualification ~ .format-phase-actions,
.format-action-note ~ .format-phase-actions { margin-top: var(--space-4); }
.format-add { margin-left: 56px; }
.format-terminal { margin-left: 56px; }
.format-scoring { grid-column: 1 / -1; }
.format-scoring h2 { font-size: 1.1rem; }
.format-advanced { margin-top: var(--space-3); }
.format-advanced summary { width: fit-content; color: var(--color-info); cursor: pointer; }
.format-advanced .form-grid { margin-top: var(--space-3); }
.format-qualification-preview { grid-column: 1 / -1; }
.format-type-form { max-width: 760px; }
.format-type-form fieldset { margin: 0 0 var(--space-6); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.format-type-form legend { padding: 0 var(--space-2); color: var(--color-text-muted); font-size: 0.78rem; font-weight: 800; }
.format-choice { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); border-bottom: 1px solid var(--color-border); cursor: pointer; }
.format-choice:last-child { border-bottom: 0; }
.format-choice input { width: auto; margin-top: 5px; accent-color: var(--color-accent); }
.format-choice > span { display: grid; gap: var(--space-1); }
.format-choice-description,
.format-choice small { color: var(--color-text-muted); }
.format-choice small { font-size: 0.72rem; }
.format-type-form .btn-group { margin-top: var(--space-4); }

@media (max-width: 640px) {
    .format-phase { grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-2); }
    .format-phase-marker { width: 32px; height: 32px; }
    .format-phase:not(:last-child)::before { top: 32px; left: 15px; }
    .format-phase-card { padding: var(--space-4); }
    .format-phase-heading { align-items: flex-start; }
    .format-phase-heading .badge { flex: none; }
    .format-add,
    .format-terminal { margin-left: 40px; }
    .format-phase-actions .btn { white-space: normal; }
}

/* ==========================================================================
   Navbar
   ========================================================================== */
.navbar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(27, 31, 39, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
}

.navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
}

.brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    color: var(--color-text);
}

.brand-symbol {
    width: 32px;
    height: 32px;
    flex: none;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.nav-link {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: 0.92rem;
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

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

/* The current page: a short accent bar under the label, rather than a filled block. */
.nav-link { position: relative; }
.nav-link.is-active { color: var(--color-text); }
.nav-link.is-active::after {
    content: '';
    position: absolute;
    right: var(--space-3);
    bottom: -2px;
    left: var(--space-3);
    height: 2px;
    border-radius: var(--radius-full);
    background: var(--color-accent);
}

.nav-primary {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Account menu: a pill (avatar, name, chevron) opening a small panel. */
.user-menu { position: relative; }
.user-menu-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 3px var(--space-3) 3px 3px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.user-menu-button:hover,
.user-menu.is-open .user-menu-button { border-color: var(--color-accent); background: var(--color-surface-elevated); }
.user-menu-button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.user-menu-chevron { width: 14px; height: 14px; color: var(--color-text-muted); transition: transform var(--transition-fast); }
.user-menu.is-open .user-menu-chevron { transform: rotate(180deg); }
.user-menu-panel {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    display: none;
    min-width: 240px;
    padding: var(--space-2);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-bg-soft);
    box-shadow: var(--shadow-lg);
}
.user-menu.is-open .user-menu-panel { display: grid; gap: 2px; }
.user-menu-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-1); padding: var(--space-2) var(--space-3) var(--space-3); border-bottom: 1px solid var(--color-border); }
.user-menu-head .nav-avatar { width: 36px; height: 36px; font-size: 0.95rem; }
.user-menu-head span { display: grid; min-width: 0; }
.user-menu-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-head small { color: var(--color-text-muted); font-size: 0.8rem; }
.user-menu-item { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--color-text); font-size: 0.9rem; font-weight: 600; }
.user-menu-item:hover { background: var(--color-surface); color: var(--color-text); }
.user-menu-item.is-danger { color: var(--color-danger); }
.user-menu-item.is-danger:hover { background: rgba(239, 118, 113, 0.1); color: var(--color-danger); }
.user-menu-logout { display: contents; }
button.user-menu-item { width: 100%; border: 0; background: none; font: inherit; font-size: 0.9rem; font-weight: 600; text-align: left; cursor: pointer; }
.nav-avatar {
    display: inline-grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid var(--color-border-strong);
    border-radius: 50%;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-size: 0.8rem;
    font-weight: 800;
    object-fit: cover;
}

.nav-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
}

.nav-burger svg { width: 20px; height: 20px; }

@media (max-width: 860px) {
    .nav-primary { display: none; }

    .nav-burger { display: inline-flex; }

    .navbar.is-open .nav-primary {
        display: flex;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-1);
        padding: var(--space-3) var(--space-4) var(--space-4);
        background: var(--color-bg-soft);
        border-bottom: 1px solid var(--color-border);
    }

    .navbar.is-open .nav-links,
    .navbar.is-open .nav-actions {
        flex-direction: column;
        align-items: stretch;
    }

    /* In the burger panel, the account block is laid out directly: no dropdown inside a dropdown. */
    .navbar.is-open .nav-actions { padding-top: var(--space-2); border-top: 1px solid var(--color-border); }
    .user-menu-button { display: none; }
    .user-menu-panel,
    .user-menu.is-open .user-menu-panel { position: static; display: grid; gap: 2px; min-width: 0; padding: 0; border: 0; background: none; box-shadow: none; }
    .nav-link.is-active { background: var(--color-surface); }
    .nav-link.is-active::after { display: none; }
}

/* ==========================================================================
   Admin area — distinct palette so the back-office never looks like the public site
   ========================================================================== */
.admin-area {
    /* Same dark backgrounds as the public site; the amber accent and the top border mark the back-office. */
    --color-accent: #f5b54a;
    --color-accent-strong: #eaa42c;
    --color-accent-soft: rgba(245, 181, 74, 0.14);
    --color-on-accent: #231704;
}

.admin-area .navbar {
    background: rgba(27, 31, 39, 0.92);
    border-top: 3px solid var(--color-accent);
}

.admin-badge {
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-accent);
    color: var(--color-on-accent);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ==========================================================================
   Competition status timeline (cockpit)
   ========================================================================== */
.status-timeline {
    display: grid;
    /* One column per step: four when a competition has no registration step. */
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.status-step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-right: var(--space-4);
}

/* connector line towards the next step */
.status-step:not(:last-child)::after {
    position: absolute;
    top: 17px;
    left: 44px;
    right: 8px;
    height: 2px;
    background: var(--color-border-strong);
    content: '';
}

.status-step.is-done:not(:last-child)::after { background: var(--color-accent); }

.status-step-marker {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 2px solid var(--color-border-strong);
    border-radius: 50%;
    background: var(--color-bg-soft);
    color: var(--color-text-muted);
    font-weight: 800;
}

.status-step.is-done .status-step-marker {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--color-on-accent);
}

.status-step.is-current .status-step-marker {
    border-color: var(--color-accent);
    color: var(--color-accent);
    box-shadow: 0 0 0 4px var(--color-accent-soft);
}

.status-step-body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.status-step-label { font-weight: 700; color: var(--color-text-muted); }
.status-step.is-done .status-step-label,
.status-step.is-current .status-step-label { color: var(--color-text); }
.status-step.is-current .status-step-label { color: var(--color-accent); }
.status-step-meta { color: var(--color-text-muted); font-size: 0.82rem; }
.status-step-body form { margin-top: var(--space-2); }
.status-step-body .btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.next-step-blockers {
    display: grid;
    gap: var(--space-3);
    justify-items: start;
    margin-top: var(--space-4);
    padding: var(--space-4) var(--space-6);
    border: 1px solid rgba(242, 201, 76, 0.3);
    border-left: 4px solid var(--color-warning);
    border-radius: var(--radius-md);
    background: rgba(242, 201, 76, 0.06);
}

.next-step-blockers-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    color: var(--color-warning);
    font-weight: 700;
}

.next-step-blockers-list { display: grid; gap: var(--space-2); width: 100%; }
.next-step-blocker-action { display: flex; align-items: center; gap: var(--space-3); }
.next-step-blocker-action .text-muted { font-size: 0.85rem; }

.next-step-blockers-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--color-bg-soft);
    color: var(--color-text);
}

@media (max-width: 900px) {
    .status-timeline { grid-auto-flow: row; grid-template-columns: 1fr; gap: var(--space-4); padding: var(--space-4); }
    .status-step { flex-direction: row; padding-right: 0; }
    .status-step:not(:last-child)::after { top: 40px; bottom: calc(-1 * var(--space-4) + 4px); left: 17px; right: auto; width: 2px; height: auto; }
    .status-step-body { padding-top: 6px; }
}

/* ==========================================================================
   Division progress (cockpit): every phase of a division and where it stands
   ========================================================================== */
.division-progress-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.division-progress { display: flex; flex-direction: column; gap: var(--space-4); }
.division-progress > .btn { align-self: flex-start; }
.division-progress-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.division-progress-heading h3 { margin: 0; }
.division-progress-heading .text-muted { font-size: 0.88rem; }

.stage-progress { display: grid; gap: var(--space-4); }

.stage-progress-step {
    position: relative;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: var(--space-3);
}

.stage-progress-step:not(:last-child)::before {
    position: absolute;
    top: 30px;
    bottom: calc(-1 * var(--space-4) + 2px);
    left: 13px;
    width: 2px;
    background: var(--color-border-strong);
    content: '';
}

.stage-progress-step.is-done:not(:last-child)::before { background: var(--color-accent); }

.stage-progress-marker {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 2px solid var(--color-border-strong);
    border-radius: 50%;
    background: var(--color-bg-soft);
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 800;
}

.stage-progress-step.is-done .stage-progress-marker { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-on-accent); }
.stage-progress-step.is-current .stage-progress-marker { border-color: var(--color-accent); color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.stage-progress-step.is-upcoming .stage-progress-body strong { color: var(--color-text-muted); }

.stage-progress-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 3px; }
.stage-progress-body .text-muted { font-size: 0.85rem; }
.stage-progress-title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.stage-progress-qualification { margin-top: var(--space-1); color: var(--color-accent); font-size: 0.82rem; font-weight: 700; }

/* ==========================================================================
   Stage setup (choose participants, check settings, mark ready)
   ========================================================================== */
.stage-setup { display: grid; gap: var(--space-4); max-width: 820px; }
.stage-setup-intro { max-width: 820px; color: var(--color-text-muted); }
.stage-setup-step { display: grid; gap: var(--space-4); max-width: 820px; }
.stage-setup-step p { margin: 0; }
.stage-setup-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.stage-setup-heading h2 { display: flex; align-items: center; gap: var(--space-3); margin: 0; font-size: 1.15rem; }

.stage-setup-number {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 50%;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-size: 0.85rem;
    font-weight: 800;
}

.stage-setup-participants {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-2);
}

.stage-setup-participant {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-soft);
    font-weight: 600;
    cursor: pointer;
}

.stage-setup-participant:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent-soft); }
.stage-setup-participant input { accent-color: var(--color-accent); }
.stage-setup-participant.is-awaiting { border-style: dashed; background: transparent; color: var(--color-text-muted); }
.stage-setup-participant-note { color: var(--color-warning); font-size: 0.8rem; font-weight: 600; }
.stage-setup-participant.is-absent { border-color: rgba(239, 118, 113, 0.35); background: rgba(239, 118, 113, 0.08); color: var(--color-text-muted); text-decoration: line-through; text-decoration-color: rgba(239, 118, 113, 0.6); }

/* Group stage: groups side by side, with their members (and a move control while the phase is a draft). */
.group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-3);
}
.group-card h3 { font-size: 1rem; }
.group-members { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.group-members li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.group-move { display: flex; gap: var(--space-1); }
.group-move select { width: auto; padding: 2px var(--space-2); font-size: 0.85rem; }
.group-unassigned { margin-top: var(--space-3); }
.group-qualified { margin: 0; padding-left: var(--space-6); }
.group-standings { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-4); }
.format-group-summary { margin: var(--space-2) 0 0; color: var(--color-accent); font-weight: 700; }

.stage-setup-absents {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid rgba(239, 118, 113, 0.3);
    border-left: 4px solid var(--color-danger);
    border-radius: var(--radius-md);
    background: rgba(239, 118, 113, 0.05);
}
.stage-setup-absents strong { color: var(--color-danger); }
.stage-setup-absents p { color: var(--color-text-muted); font-size: 0.9rem; }

.stage-setup-settings { display: grid; gap: var(--space-2); }
.stage-setup-settings li { display: flex; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); }
.stage-setup-settings li:last-child { border-bottom: 0; padding-bottom: 0; }

/* ==========================================================================
   Live stage (cockpit): current round, its matches and the next action
   ========================================================================== */
turbo-frame { display: block; }
.live-stage { display: grid; gap: var(--space-4); }
.round-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.round-nav-item {
    display: grid;
    min-width: 32px;
    height: 32px;
    padding: 0 var(--space-2);
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-weight: 700;
    text-decoration: none;
}
.round-nav-item:hover { border-color: var(--color-accent); color: var(--color-text); }
.round-nav-item.is-completed { color: var(--color-success); }
.round-nav-item.is-selected { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-accent); }
.round-nav.is-labelled .round-nav-item { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); font-size: 0.85rem; }
.round-nav-count { display: inline-grid; min-width: 18px; height: 18px; padding: 0 4px; place-items: center; border-radius: var(--radius-full); background: var(--color-accent); color: var(--color-on-accent); font-size: 0.72rem; }
.live-stage-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.live-stage-heading h3 { margin: 0; }
.live-stage-meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.live-stage-meta .text-muted { font-size: 0.88rem; }

.live-stage-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-sm);
    background: var(--color-accent-soft);
}
.live-stage-action p { margin: 0; }

/* Rows share the list's columns (subgrid) so "vs" and the actions line up from one match to the next. */
.live-matches {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
    gap: var(--space-2) 0;
}

.live-match-group {
    grid-column: 1 / -1;
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.live-match {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-soft);
}
.live-match.is-completed { opacity: 0.8; }
.live-match-player { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.live-match-player.is-right { text-align: right; }
.live-match-player.is-winner { color: var(--color-accent); }
.live-match-score { min-width: 56px; color: var(--color-text-muted); font-weight: 800; text-align: center; }
.live-match-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); }
/* A line that leads somewhere is a link as a whole: the result form of the player's own match, the detail of a played one. */
.live-match.is-linked { position: relative; }
.live-match.is-linked:hover { border-color: var(--color-border-strong); }
.live-match.is-reportable { border-color: var(--color-accent); }
.live-match.is-reportable:hover { border-color: var(--color-accent); background: var(--color-accent-soft); }
.live-match-link { color: inherit; text-decoration: none; }
.live-match-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
/* The quick report sits above the link of the whole line. */
.live-match-quick { position: relative; z-index: 1; white-space: nowrap; text-decoration: none; }

@media (max-width: 640px) {
    .live-matches { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
    .live-match-actions { grid-column: 1 / -1; justify-content: space-between; }
}

/* ==========================================================================
   Match result form: "Player A [2] – [1] Player B"
   ========================================================================== */
.match-result { max-width: 720px; }
.match-result form { display: grid; gap: var(--space-6); }
.match-result [hidden] { display: none !important; }

.match-result-types { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; border: 0; }

.match-result-type {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    background: var(--color-bg-soft);
    font-weight: 600;
    cursor: pointer;
}
.match-result-type input { accent-color: var(--color-accent); }
.match-result-type:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-accent); }

.match-score {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-bg-soft);
}

.match-score-player { margin: 0; overflow-wrap: anywhere; font-size: 1.15rem; font-weight: 800; }
.match-score-player.is-a { text-align: right; }
.match-score-player.is-b { text-align: left; }

.match-score .match-score-input {
    width: 4.5rem;
    padding: var(--space-3) var(--space-2);
    font-size: 1.6rem;
    font-weight: 800;
    text-align: center;
}

.match-score-separator { color: var(--color-text-muted); font-size: 1.6rem; font-weight: 800; }

.match-result-winner { margin: 0; padding: 0; border: 0; }
.match-result-winner legend { margin-bottom: var(--space-3); font-weight: 700; }
.match-result-actions { display: flex; justify-content: flex-end; }

/* With a Map Pool: the score first, then the optional detail, one vertical block per map. */
.match-result-heading { margin: 0 0 calc(-1 * var(--space-3)); padding: 0; font-size: 1rem; font-weight: 700; }
.match-maps { display: grid; gap: var(--space-3); margin: 0; padding: 0; border: 0; }
.match-maps legend:not(.sr-only) { float: left; width: 100%; margin-bottom: var(--space-3); }
.match-maps legend .text-muted { font-weight: 400; }
.match-maps > .btn { justify-self: start; }
.match-maps-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.match-map {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-bg-soft);
}
.match-map-number { margin: 0; color: var(--color-text-muted); font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.match-map-winner { display: flex; grid-column: 2; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.match-map-winner .text-muted { font-size: 0.85rem; }
.match-map-winner .match-result-type { padding: var(--space-1) var(--space-3); }

/* The Map Pool on the public overview of a competition. */
.map-pool-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.map-pool h2 { margin: 0; font-size: 1.1rem; }
.map-pool-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
/* A card per map, as in the veto: its minimap, then its abbreviation and name. */
.map-pool-list li {
    display: grid;
    align-content: start;
    gap: var(--space-2);
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-soft);
    font-weight: 600;
}
.map-pool-name { overflow-wrap: anywhere; }
.map-pool-list strong { color: var(--color-accent); font-weight: 800; letter-spacing: 0.03em; }
.map-pool-list .text-muted { font-size: 0.85rem; font-weight: 500; }

/* The result of a match: score line, then the maps played. */
.match-detail { display: grid; gap: var(--space-4); }

/* The maps played as a scoreboard: one line per map, a check in the winner's column. */
.match-detail-maps { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.match-detail-maps th,
.match-detail-maps td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); }
.match-detail-maps tbody tr:last-child > * { border-bottom: 0; }
.match-detail-maps thead th { color: var(--color-text-muted); font-size: 0.75rem; font-weight: 700; text-align: center; }
.match-detail-maps thead th:first-child,
.match-detail-maps tbody th { text-align: left; }
.match-detail-maps tbody th { font-weight: 500; }
.match-detail-maps td { width: 6.5rem; text-align: center; }
.match-detail-maps td.is-won span {
    display: inline-grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: var(--radius-full);
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-weight: 800;
}
.match-detail-map-short { display: inline-block; min-width: 2.6rem; margin-right: var(--space-2); color: var(--color-accent); font-weight: 800; }

@media (max-width: 560px) {
    .match-detail-maps th,
    .match-detail-maps td { padding: var(--space-2); }
    .match-detail-maps td { width: 4.5rem; }
    .match-detail-map-short { min-width: 0; }
}

/* ==========================================================================
   Dialog: content loaded into its "modal" Turbo Frame (see base.html.twig)
   ========================================================================== */
.modal {
    width: min(560px, calc(100vw - 2 * var(--space-4)));
    max-height: calc(100dvh - 2 * var(--space-4));
    padding: var(--space-6);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: inherit;
    box-shadow: var(--shadow-lg);
}
.modal::backdrop { background: rgba(5, 7, 10, 0.7); backdrop-filter: blur(2px); }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.modal-header h2 { margin: var(--space-1) 0; }
.modal-header p { margin: 0; font-size: 0.9rem; }
.modal-close {
    display: inline-flex;
    flex: none;
    padding: var(--space-2);
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
}
.modal-close:hover { background: var(--color-bg-soft); color: inherit; }
.modal-close svg { width: 20px; height: 20px; }

@media (max-width: 560px) {
    .modal { padding: var(--space-4); }
    .match-map { grid-template-columns: minmax(0, 1fr); }
    .match-map-winner { grid-column: 1; }
    .match-score { grid-template-columns: 1fr auto 1fr; row-gap: var(--space-2); }
    .match-score-player.is-a { grid-column: 1; grid-row: 1; text-align: left; }
    .match-score-player.is-b { grid-column: 3; grid-row: 1; text-align: right; }
    .match-score .match-score-input { width: 100%; }
}

/* ==========================================================================
   Swiss round pairings editor
   ========================================================================== */
.pairings { display: grid; gap: var(--space-4); max-width: 760px; }
.pairings [hidden] { display: none !important; }
.pairings-list { display: grid; gap: var(--space-2); }

.pairings-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-soft);
}

.pairings-number { color: var(--color-text-muted); font-weight: 800; text-align: center; }
.pairings-versus { color: var(--color-text-muted); font-weight: 800; text-transform: uppercase; font-size: 0.8rem; }
.pairings-bye { color: var(--color-info); font-size: 0.88rem; font-weight: 600; }
.pairings-status { min-height: 1.4em; margin: 0; color: var(--color-text-muted); font-size: 0.88rem; }

.pairings-slot {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: grab;
    transition: border-color var(--transition-fast), background-color var(--transition-fast), opacity var(--transition-fast);
}
.pairings-slot:hover { border-color: var(--color-accent); }
.pairings-slot:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.pairings-slot.is-dragging { opacity: 0.4; }
.pairings-slot.is-drop-target { border-style: dashed; border-color: var(--color-accent); background: var(--color-accent-soft); }
.pairings-slot.is-picked { border-color: var(--color-accent); background: var(--color-accent-soft); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.pairings-slot.is-swapped { animation: pairings-swapped 900ms ease; }
.pairings-handle { color: var(--color-text-muted); }
.pairings-player { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; }
.pairings-seed { color: var(--color-text-muted); font-size: 0.8rem; }
.pairings-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@keyframes pairings-swapped {
    from { background: var(--color-accent-soft); border-color: var(--color-accent); }
    to { background: var(--color-surface); }
}

@media (max-width: 560px) {
    .pairings-row { grid-template-columns: 28px minmax(0, 1fr); }
    .pairings-versus { grid-column: 2; }
    .pairings-row > .pairings-slot:last-child,
    .pairings-bye { grid-column: 2; }
}

/* ==========================================================================
   Public competition pages: header, my participation, course, overview blocks
   ========================================================================== */
.competition-header h1 { margin: var(--space-2) 0; }
.competition-header-status { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
.competition-header-summary { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; color: var(--color-text); font-weight: 600; }
.competition-header-summary > span + span::before { content: '·'; margin-right: var(--space-4); color: var(--color-text-muted); }

.my-participation { display: grid; gap: var(--space-4); border-color: rgba(185, 231, 105, 0.25); }
.my-participation h2 { margin: 0; }
.my-participation-heading { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); }
.my-next-match {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-sm);
    background: var(--color-accent-soft);
}
.my-next-match > div { display: grid; gap: 2px; }
.my-next-match .badge { justify-self: start; }
.my-next-match strong { font-size: 1.1rem; }
.my-next-match.is-warning { border-left-color: var(--color-warning); background: rgba(242, 201, 76, 0.08); }

.overview-division > h2 { margin-bottom: var(--space-4); }

.phase-track {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}
.phase-track-step {
    display: flex;
    flex: 1 1 220px;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}
.phase-track-step.is-current { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.phase-track-step.is-upcoming { opacity: 0.75; }
.phase-track-marker {
    display: grid;
    flex: none;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 2px solid var(--color-border-strong);
    border-radius: 50%;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    font-weight: 800;
}
.phase-track-step.is-current .phase-track-marker { border-color: var(--color-accent); color: var(--color-accent); }
.phase-track-step.is-done .phase-track-marker { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-on-accent); }
.phase-track-body { display: grid; gap: 2px; min-width: 0; }
.phase-track-body .text-muted { font-size: 0.85rem; }
.phase-track-state { font-size: 0.85rem; font-weight: 600; }
.phase-track-step.is-current .phase-track-state { color: var(--color-accent); }
.phase-track-link-area { display: flex; flex: 1; align-items: flex-start; gap: var(--space-3); margin: calc(-1 * var(--space-4)); padding: var(--space-4); border-radius: var(--radius-md); color: inherit; text-decoration: none; }
.phase-track-link-area:hover { background: var(--color-surface-elevated); }
.phase-track-link-area:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.phase-track-cta { margin-top: var(--space-1); color: var(--color-accent); font-size: 0.82rem; font-weight: 700; }
.phase-track-link { display: flex; align-items: center; color: var(--color-accent); font-size: 0.85rem; font-weight: 700; white-space: nowrap; }
/* The arrow follows the track: sideways while the steps sit in a row, downwards once they stack. */
.phase-track-link::before { content: '→'; margin-right: var(--space-1); }

.public-matches { display: grid; gap: var(--space-4); }
.public-matches > h2 { margin: 0; }
.phase-switch { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.phase-switch-item {
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    color: var(--color-text);
    font-weight: 700;
    text-decoration: none;
}
.phase-switch-item:hover { border-color: var(--color-accent); }
.phase-switch-item.is-selected { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-accent); }
.phase-switch-item .text-muted { font-weight: 500; }
.view-switch { display: inline-flex; align-self: start; padding: 3px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); background: var(--color-bg-soft); }
.view-switch-item { padding: var(--space-1) var(--space-4); border-radius: var(--radius-full); color: var(--color-text-muted); font-size: 0.88rem; font-weight: 700; text-decoration: none; }
.view-switch-item:hover { color: var(--color-text); }
.view-switch-item.is-selected { background: var(--color-accent); color: var(--color-on-accent); }
.round-nav-caption { display: inline-flex; align-items: center; margin-right: var(--space-1); color: var(--color-text-muted); font-size: 0.85rem; font-weight: 700; }

.overview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--space-4); align-items: start; }
.overview-block { display: grid; gap: var(--space-4); justify-items: stretch; }
/* The ghost link lines up with the content above it, not with its own invisible padding. */
.overview-block > .btn { justify-self: start; }
.overview-block > .btn-ghost { margin-left: -0.8rem; }
.overview-block-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); }
.overview-block-heading h3 { margin: 0; }
.overview-block-heading .text-muted { font-size: 0.88rem; }
.overview-note { margin: 0; font-size: 0.85rem; }
.overview-standings-link { margin-bottom: var(--space-4); color: var(--color-text-muted); }
.overview-bracket { margin-top: var(--space-4); }
.overview-bracket-tree { overflow-x: auto; }
.overview-bracket-tree > .section:last-child { margin-bottom: 0; }

.compact-standings { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.compact-standings th { color: var(--color-text-muted); font-size: 0.75rem; font-weight: 700; text-align: left; text-transform: uppercase; }
.compact-standings th, .compact-standings td { padding: var(--space-2); border-bottom: 1px solid var(--color-border); }
.compact-standings th:nth-child(n+3), .compact-standings td:nth-child(n+3) { text-align: right; }
.compact-standings td:first-child { width: 2.5rem; color: var(--color-text-muted); font-weight: 800; }
.compact-standings tr.is-qualified td:first-child { color: var(--color-accent); }
.compact-standings tr.is-cutoff td { border-bottom: 2px solid var(--color-accent); }
.compact-standings tr.is-me td { background: var(--color-accent-soft); }

@media (max-width: 640px) {
    .competition-header-summary { flex-direction: column; }
    .competition-header-summary > span + span::before { content: none; }
    .phase-track { flex-direction: column; }
    .phase-track-link::before { content: '↓'; }
    .phase-track-step { flex-basis: auto; }
}

/* ==========================================================================
   Seeding (drag & drop)
   ========================================================================== */
.seeding { max-width: 640px; }

.seeding-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.seeding-toolbar .text-muted { font-size: 0.85rem; }

.seeding-list {
    display: grid;
    gap: var(--space-2);
}

.seeding-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.seeding-item[draggable="true"] { cursor: grab; }
.seeding-item.is-dragging { opacity: 0.5; border-style: dashed; border-color: var(--color-accent); }

.seeding-handle { color: var(--color-text-muted); font-size: 1.1rem; line-height: 1; }

.seeding-seed {
    display: grid;
    flex: none;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 50%;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-weight: 800;
}

.seeding-division {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding: var(--space-2) var(--space-1);
    border-bottom: 2px solid var(--color-accent);
    font-size: 1.05rem;
}
.seeding-division:first-child { margin-top: 0; }
.seeding-division.is-unassigned { border-bottom-color: var(--color-border); }

.seeding-distribute { margin-bottom: var(--space-6); }
.seeding-distribute-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.seeding-distribute-fields label { display: grid; gap: var(--space-1); }
.seeding-distribute-fields input { width: 6rem; }

.seeding-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); flex: 1; min-width: 0; }
.seeding-moves { flex: none; }

.seeding-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
    border-top: 1px solid var(--color-border);
    padding: var(--space-6) 0;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.site-footer .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.6rem 1.1rem;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.1;
    cursor: pointer;
    transition: transform var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
}

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

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

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

.btn-secondary {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border-strong);
}

.btn-secondary:hover { background: var(--color-surface-elevated); }

.btn-ghost {
    background: transparent;
    color: var(--color-text-muted);
}

.btn-ghost:hover {
    color: var(--color-text);
    background: var(--color-surface);
}

.btn-danger {
    background: transparent;
    color: var(--color-danger);
    border-color: rgba(239, 118, 113, 0.4);
}

.btn-danger:hover {
    background: rgba(239, 118, 113, 0.12);
}

.btn-sm { padding: 0.4rem 0.8rem; font-size: 0.82rem; }
.btn-lg { padding: 0.85rem 1.4rem; font-size: 1.02rem; }

.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-group { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ==========================================================================
   Badges & status
   ========================================================================== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-full);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: var(--color-surface);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border-strong);
    white-space: nowrap;
}

.badge-accent { background: var(--color-accent-soft); color: var(--color-accent); border-color: transparent; }
.badge-success { background: rgba(111, 207, 151, 0.14); color: var(--color-success); border-color: transparent; }
.badge-warning { background: rgba(242, 201, 76, 0.14); color: var(--color-warning); border-color: transparent; }
.badge-danger { background: rgba(239, 118, 113, 0.14); color: var(--color-danger); border-color: transparent; }
.badge-info { background: rgba(100, 196, 239, 0.14); color: var(--color-info); border-color: transparent; }
.badge-neutral { background: var(--color-surface); color: var(--color-text-muted); }

/* ==========================================================================
   Cards
   ========================================================================== */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
}

.competition-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.competition-card:hover {
    transform: translateY(-3px);
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
}

.competition-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
}

.competition-card h3 { font-size: 1.05rem; margin: 0; }

.competition-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.competition-card-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
}

/* ==========================================================================
   Page header / hero / sections
   ========================================================================== */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.page-header h1 { margin-bottom: var(--space-1); }

.page-eyebrow {
    color: var(--color-accent);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-1);
}

.page-subtitle {
    color: var(--color-text-muted);
    max-width: 60ch;
}

.section { margin-bottom: var(--space-8); }

.section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.hero {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-12) 0 var(--space-8);
}

.hero h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    max-width: 18ch;
}

.hero-lede {
    color: var(--color-text-muted);
    font-size: 1.1rem;
    max-width: 55ch;
}

.hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* ==========================================================================
   Landing page
   ========================================================================== */
.landing-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    min-height: 360px;
    margin: var(--space-4) 0 var(--space-8);
    padding: clamp(2rem, 4vw, 4rem);
    border: 1px solid rgba(185, 231, 105, 0.2);
    border-radius: 2rem;
    background: linear-gradient(135deg, rgba(35, 40, 51, 0.96), rgba(20, 23, 29, 0.98));
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.landing-hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    max-width: 680px;
}

.landing-hero h1 {
    font-size: clamp(2.4rem, 4vw, 4.25rem);
    letter-spacing: -0.06em;
    margin-bottom: 0;
}

.landing-hero__lede {
    max-width: 30rem;
    margin: 0;
    color: var(--color-text-muted);
    font-size: 1.08rem;
}

/* The brand symbol is the visual of the hero, on a soft lime glow. */
.landing-hero__symbol {
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    margin-right: clamp(0px, 4vw, var(--space-12));
}
.landing-hero__symbol::before {
    content: "";
    position: absolute;
    inset: -30%;
    background: radial-gradient(circle, rgba(193, 245, 99, 0.2), transparent 62%);
}
.landing-hero__symbol img { position: relative; width: clamp(160px, 20vw, 240px); height: auto; filter: drop-shadow(0 18px 30px rgba(5, 7, 10, 0.55)); }

.landing-hero__note { margin: 0; color: var(--color-text-muted); font-size: 0.85rem; }

/* The competitions under the hero: the ones open for registration, then the ones under way (tiles shared with the player home). */
.landing-live + .landing-live { margin-top: var(--space-8); }
.landing-live h2 { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.landing-live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-soft); animation: landing-live-pulse 2s ease-in-out infinite; }
@keyframes landing-live-pulse { 50% { box-shadow: 0 0 0 8px transparent; } }
@media (prefers-reduced-motion: reduce) { .landing-live-dot { animation: none; } }
.competition-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--space-3); }
.competition-tile {
    display: grid;
    align-content: start;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.9rem;
    text-decoration: none;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.competition-tile:hover { border-color: var(--color-accent); background: var(--color-surface-elevated); }
.competition-tile .competition-banner { border-radius: 0; }
.competition-tile-body { display: grid; gap: var(--space-1); padding: var(--space-4); }
.competition-tile strong { font-size: 1.05rem; }
.competition-tile-accent { color: var(--color-accent); font-weight: 700; }

.empty-state {
    text-align: center;
    padding: var(--space-12) var(--space-6);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    color: var(--color-text-muted);
}

.empty-state h3 { color: var(--color-text); }

@media (max-width: 760px) {
    .landing-hero {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: var(--space-6);
        padding: var(--space-6);
    }
    .landing-hero__symbol img { width: 96px; }
}

/* ==========================================================================
   Tabs (sub navigation)
   ========================================================================== */
/* One scrollable row: wrapped tabs would leave the active underline floating mid-list. */
.tabs {
    display: flex;
    gap: var(--space-1);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    /* The base line is drawn inside: nothing sticks out, so no browser adds a vertical scrollbar. */
    box-shadow: inset 0 -1px 0 var(--color-border);
    margin-bottom: var(--space-6);
}

.tab {
    flex: none;
    padding: var(--space-2) var(--space-3);
    white-space: nowrap;
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: 0.9rem;
    border-bottom: 2px solid transparent;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.tab:hover { color: var(--color-text); }

.tab.is-active {
    color: var(--color-text);
    border-color: var(--color-accent);
}

/* ==========================================================================
   Tables
   ========================================================================== */
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

thead th {
    text-align: left;
    padding: var(--space-3) var(--space-4);
    color: var(--color-text-muted);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

tbody td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

tbody tr:last-child td { border-bottom: none; }

tbody tr:hover { background: var(--color-surface-elevated); }

tbody tr.is-highlighted { background: var(--color-accent-soft); }

/* ==========================================================================
   Forms
   ========================================================================== */
form { display: block; }

.form-grid {
    display: grid;
    gap: var(--space-6);
    max-width: 640px;
}

/* form_widget(form) wraps every row in one <div id="form_name">: space those rows too */
.form-grid > div[id] {
    display: grid;
    gap: var(--space-4);
}

.form-grid div:has(> input[type="checkbox"]) {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-2);
}

.form-grid div:has(> input[type="checkbox"]) > label { margin-bottom: 0; cursor: pointer; }

.form-grid textarea { min-height: 7rem; resize: vertical; }

/* A group of fields inside a form (the extra registration fields): spaced like the rows around it. */
.form-fields { display: grid; gap: var(--space-4); }
.form-fields label.required::after { content: ' *'; color: var(--color-accent); }

/* Expanded single choice (Oui / Non): options side by side, each radio before its label. */
.form-radios { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
/* The question carries the asterisk of a required answer, not each of its choices. */
.form-fields .form-radios label.required::after { content: none; }
.form-radios label { display: inline; margin: 0 0 0 var(--space-1); font-weight: 500; cursor: pointer; }
.form-radios input[type="radio"] { accent-color: var(--color-accent); cursor: pointer; }

.card + .section { margin-top: var(--space-6); }

label {
    display: block;
    font-weight: 600;
    font-size: 0.88rem;
    margin-bottom: var(--space-1);
    color: var(--color-text);
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    width: 100%;
    padding: 0.6rem 0.8rem;
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-family: inherit;
    font-size: 0.92rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input:focus, select:focus, textarea:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-soft);
    outline: none;
}

/* .help-text is what Symfony renders for a field "help". */
.form-help,
.help-text {
    color: var(--color-text-muted);
    font-size: 0.82rem;
    margin-top: var(--space-1);
}

.form-errors {
    color: var(--color-danger);
    font-size: 0.82rem;
    margin: var(--space-1) 0 0;
    padding: 0;
    list-style: none;
    font-weight: 600;
}

/* An error of the whole form: an alert at its top (see templates/form/errors.html.twig). */
.form-errors-global { margin-bottom: var(--space-3); font-weight: 600; scroll-margin: var(--space-6); }
.form-errors-global p { margin: 0; }

.form-row { margin-bottom: var(--space-4); }

/* ==========================================================================
   Flash messages
   ========================================================================== */
.flash-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    /* Top and bottom only: the sides stay those of .container, which centres it with the content. */
    margin-top: var(--space-4);
    margin-bottom: var(--space-4);
}

.flash {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    font-weight: 600;
    font-size: 0.9rem;
}

.flash-success { background: rgba(111, 207, 151, 0.12); color: var(--color-success); border-color: rgba(111, 207, 151, 0.3); }
.flash-error { background: rgba(239, 118, 113, 0.12); color: var(--color-danger); border-color: rgba(239, 118, 113, 0.3); }
.flash-warning { background: rgba(242, 201, 76, 0.12); color: var(--color-warning); border-color: rgba(242, 201, 76, 0.3); }
.flash-info { background: rgba(100, 196, 239, 0.12); color: var(--color-info); border-color: rgba(100, 196, 239, 0.3); }

.flash-close {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    opacity: 0.7;
}

.flash-close:hover { opacity: 1; }

/* ==========================================================================
   Callouts / alerts (checklist warnings, blockers…)
   ========================================================================== */
.callout {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface);
}

.callout-warning { border-color: rgba(242, 201, 76, 0.35); background: rgba(242, 201, 76, 0.08); color: var(--color-warning); }
.callout-danger { border-color: rgba(239, 118, 113, 0.3); background: rgba(239, 118, 113, 0.12); color: var(--color-danger); }

/* ==========================================================================
   Stat chips (cockpit / dashboard numbers)
   ========================================================================== */
.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-3);
}

.stat {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-bg-soft);
    border: 1px solid var(--color-border);
}

.stat-value { font-size: 1.5rem; font-weight: 800; color: var(--color-text); }
.stat-label { color: var(--color-text-muted); font-size: 0.8rem; }

/* ==========================================================================
   Bracket
   ========================================================================== */
.bracket {
    display: flex;
    align-items: stretch;
    gap: var(--space-8);
    overflow-x: auto;
    padding: var(--space-4) var(--space-1) var(--space-6);
}

.bracket-round {
    display: flex;
    flex: 0 0 15rem;
    flex-direction: column;
}

/* Round names share one band at the top, whatever the number of matches below them. */
.bracket-round h2 {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 2.2rem;
    margin: 0 0 var(--space-3);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    text-align: center;
}

.bracket-slots {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-around;
    gap: var(--space-4);
}

/* Tree layout: every column is as tall as the first one and splits it in equal slots, so a match sits exactly
   between the two matches that feed it. Lines: the match goes right (::after), then up or down to its pair's middle
   (.bracket-link), and the next match comes in from the left (::before). */
.bracket.has-links { --bracket-gap: 2rem; --bracket-line: 2px solid var(--color-border-strong); gap: var(--bracket-gap); }
.bracket.has-links .bracket-slots { gap: 0; justify-content: stretch; }
.bracket-slot { --span: 1; position: relative; display: flex; flex: var(--span) var(--span) 0; align-items: center; min-height: calc(var(--span) * 4.6rem); padding: var(--space-1) 0; }
.bracket-slot > .bracket-match { width: 100%; }
.bracket-slot.has-next::after,
.bracket-slot.has-previous::before { content: ''; position: absolute; top: 50%; width: calc(var(--bracket-gap) / 2); border-top: var(--bracket-line); }
.bracket-slot.has-next::after { left: 100%; }
.bracket-slot.has-previous::before { right: 100%; }
.bracket-link { position: absolute; left: calc(100% + var(--bracket-gap) / 2); border-left: var(--bracket-line); }
.bracket-slot.link-top .bracket-link { top: 50%; bottom: 0; }
.bracket-slot.link-bottom .bracket-link { top: 0; bottom: 50%; }
/* A round skipped by a feeder: the line simply crosses the empty column. */
.bracket-through { position: absolute; top: 50%; right: 0; left: 0; border-top: var(--bracket-line); }

.bracket-match {
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    overflow: hidden;
}

.bracket-match div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: 1.9rem;
    padding: 0.2rem 0.65rem;
    font-size: 0.85rem;
}

.bracket-match div + div {
    border-top: 1px solid var(--color-border);
}

/* A match to play: a thin accent bar on the left is enough, the rest of the card stays calm. */
.bracket-match.is-playable { border-left: 3px solid var(--color-accent); }
.bracket-match.is-completed { opacity: 0.85; }
.bracket-match.is-waiting { border-style: dashed; }
.bracket-match.is-linked { position: relative; }
.bracket-match.is-linked:hover { border-color: var(--color-text-muted); }
.bracket-match.is-reportable { border-color: var(--color-accent); }
.bracket-match.is-reportable:hover { border-color: var(--color-accent); background: var(--color-accent-soft); }
.bracket-match-link { position: absolute; inset: 0; }
.bracket-match div strong { font-variant-numeric: tabular-nums; }
.bracket-match div span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bracket-match-tag { flex: none; color: var(--color-accent); font-size: 0.68rem; font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; opacity: 0.8; }
.bracket-round.is-current h2 { color: var(--color-accent); }

.bracket-match .winner {
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-weight: 700;
}

.bracket-match small {
    display: block;
    padding: 0.3rem 0.75rem;
    text-align: right;
    color: var(--color-text-muted);
}

@media (max-width: 640px) {
    .bracket-round { flex: 0 0 13rem; }
}

/* ==========================================================================
   Utilities
   ========================================================================== */
.text-muted { color: var(--color-text-muted); }
.mt-0 { margin-top: 0; }
.flow > * + * { margin-top: var(--space-4); }
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.text-warning { color: var(--color-warning); }

/* A slot whose player is not known yet ("To Be Determined"): present but in the background. */
.is-tbd { color: var(--color-text-muted); font-style: italic; font-weight: 500; opacity: 0.6; }

/* ==========================================================================
   Podium (public overview, once the last phase is over)
   ========================================================================== */
.podium { display: flex; align-items: flex-end; justify-content: center; gap: var(--space-3); margin: 0 auto var(--space-6); max-width: 640px; }
.podium-step { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; gap: var(--space-2); min-width: 0; text-align: center; }
.podium-medal { font-size: 1.8rem; line-height: 1; }
.podium-names { display: grid; gap: 2px; max-width: 100%; }
.podium-names strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium-names strong.is-me { color: var(--color-accent); }
.podium-block {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    padding-top: var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-bottom: 0;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 1.4rem;
    font-weight: 800;
}
.podium-block small { margin-left: var(--space-1); font-size: 0.7rem; font-weight: 600; align-self: center; }
.podium-step.is-rank-1 .podium-block { height: 7rem; border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-accent); }
.podium-step.is-rank-2 .podium-block { height: 5rem; }
.podium-step.is-rank-3 .podium-block { height: 3.75rem; }
.podium-step.is-rank-1 .podium-names strong { font-size: 1.15rem; }

/* A phase tab whose phase has not started yet: visible so visitors know what comes next, but not clickable. */
.tab.is-upcoming { color: var(--color-text-muted); opacity: 0.55; cursor: default; }
.tab.is-upcoming small { margin-left: var(--space-1); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }

/* Division picker of public pages (competitions with several divisions). */
.division-switch { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-6); }
.division-switch-caption { margin-right: var(--space-1); color: var(--color-text-muted); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }

/* Content reloaded in place (Turbo frame), e.g. when switching division: dim it while it loads. */
turbo-frame#competition-content { display: block; transition: opacity var(--transition-fast); }
turbo-frame#competition-content[aria-busy="true"] { opacity: 0.55; pointer-events: none; }

/* Activity feed: one line per event, grouped by day on the public page, the latest ones on the cockpit. */
.activity-day + .activity-day { margin-top: var(--space-6); }
.activity-day-label { margin-bottom: var(--space-2); color: var(--color-text-muted); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.activity-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.activity-item { display: flex; align-items: baseline; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.activity-item + .activity-item { border-top: 1px solid var(--color-border); }
.activity-time { flex: none; min-width: 3rem; color: var(--color-text-muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.activity-icon { flex: none; width: 1.5rem; text-align: center; }
.activity-message { min-width: 0; overflow-wrap: anywhere; }
.activity-item.is-champion .activity-message { color: var(--color-accent); font-weight: 700; }
.activity-pagination { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-6); }

/* ==========================================================================
   Player home: what to do, my competitions, recent activity
   ========================================================================== */
.home-todo {
    margin-bottom: var(--space-8);
    padding: var(--space-6);
    border: 1px solid rgba(185, 231, 105, 0.35);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(185, 231, 105, 0.1), transparent 55%), var(--color-surface);
    box-shadow: var(--shadow-md);
}
.home-todo h2 { margin-bottom: var(--space-4); }

.home-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.home-action {
    display: grid;
    align-content: start;
    gap: var(--space-1);
    padding: var(--space-4);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-md);
    background: var(--color-bg-soft);
}
.home-action.is-check_in { border-left-color: var(--color-info); }
.home-action-kicker { color: var(--color-accent); font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.home-action.is-check_in .home-action-kicker { color: var(--color-info); }
.home-action-title { margin: 0; font-size: 1.15rem; }
.home-action-meta { margin: 0; color: var(--color-text-muted); font-size: 0.88rem; }
.home-action-buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0 0; }

.home-columns { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-8); align-items: start; }
.home-columns h2 { margin-bottom: var(--space-4); }
.home-competitions { display: grid; gap: var(--space-3); }
.home-competitions.is-wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.home-competition {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.9rem;
    text-decoration: none;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.home-competition:hover { border-color: var(--color-accent); background: var(--color-surface-elevated); }
.home-competition.is-completed { opacity: 0.75; }
.home-competition-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.home-competition-head strong { font-size: 1.05rem; }
.home-competition-rank { color: var(--color-accent); font-weight: 800; }
.home-more { margin-top: var(--space-3); margin-left: -0.8rem; }

.home-activity { display: grid; margin: 0; padding: 0; list-style: none; }
.home-activity li { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); font-size: 0.9rem; }
.home-activity li:last-child { border-bottom: 0; }
.home-activity time { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.home-activity a { display: block; color: var(--color-text-muted); font-size: 0.82rem; }
.home-activity a:hover { color: var(--color-accent); }

.home-open { margin-top: var(--space-8); }
.home-open h2 { margin-bottom: var(--space-4); }
.home-welcome { max-width: 560px; padding: var(--space-8); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg); }
.home-welcome p:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
    .home-columns { grid-template-columns: 1fr; }
    .home-todo { padding: var(--space-4); }
}

/* ==========================================================================
   Competition banner: the uploaded visual (cropped to fit), or the La Bagarre default one
   ========================================================================== */
.competition-banner {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 1;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}
.competition-banner img { display: block; width: 100%; height: 100%; object-fit: cover; }
.competition-banner.is-default {
    background:
        radial-gradient(circle at 80% 50%, rgba(193, 245, 99, 0.12), transparent 40%),
        linear-gradient(135deg, #1f1836, var(--color-bg-soft) 70%);
}
/* The symbol only shows through: a watermark, not a second logo. */
.competition-banner.is-default::before {
    content: '';
    position: absolute;
    top: -25%;
    right: 6%;
    width: auto;
    height: 150%;
    aspect-ratio: 1;
    background: url("../images/logo-symbol-8rDBJKW.svg") no-repeat center / contain;
    opacity: 0.1;
    transform: rotate(-8deg);
}
/* Full width, a fixed band: the visual is cropped rather than shrunk. */
.competition-header-banner { aspect-ratio: auto; height: clamp(120px, 20vw, 240px); margin-bottom: var(--space-6); }
/* Without an uploaded visual, the band stays a slim accent rather than an empty poster. */
.competition-header-banner.is-default { height: clamp(72px, 9vw, 112px); }
.competition-banner-preview { max-width: 480px; margin-bottom: var(--space-4); }

/* Cockpit: the banner as a thumbnail in the top right corner, a shortcut to the edit form. */

.cockpit-banner { position: relative; display: block; flex: none; width: 168px; border-radius: var(--radius-md); text-decoration: none; }
.cockpit-banner .competition-banner { border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); transition: border-color var(--transition-fast); }
.cockpit-banner:hover .competition-banner { border-color: var(--color-accent); }
.cockpit-banner-hint { position: absolute; inset: 0; display: grid; place-items: center; color: var(--color-text-muted); font-size: 0.8rem; font-weight: 700; }
.cockpit-banner:hover .cockpit-banner-hint { color: var(--color-accent); }
@media (max-width: 560px) {
    .cockpit-banner { width: 120px; }
}

/* ==========================================================================
   Registration fields: the organizers' list, and the answers as people read them
   ========================================================================== */
.registration-fields { display: grid; gap: var(--space-2); margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.registration-field {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}
.registration-field-order { display: flex; flex-direction: column; }
.registration-field-order .btn { padding: 0 var(--space-2); line-height: 1.4; }
.registration-field-body { display: grid; flex: 1; gap: 2px; min-width: 0; }
.registration-field-body .text-muted { font-size: 0.85rem; }

.registration-summary h2,
.registration-summary h3 { margin: 0; }
.registration-summary .section-title { margin-bottom: var(--space-2); }
.registration-summary dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--space-3); margin: var(--space-3) 0 0; }
.registration-summary dt { color: var(--color-text-muted); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.registration-summary dd { margin: 2px 0 0; overflow-wrap: anywhere; }

.registration-field.is-disabled .registration-field-body strong { opacity: 0.6; }

@media (max-width: 560px) {
    .registration-field { flex-wrap: wrap; }
}

/* ==========================================================================
   Setup steps of a new competition: details, divisions, course, registration form, then launch
   ========================================================================== */
.setup-steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}
.setup-steps ol { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; padding: 0; list-style: none; }
.setup-step > a,
.setup-step > span { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); font-size: 0.88rem; font-weight: 600; text-decoration: none; }
.setup-step > a:hover { color: var(--color-text); }
.setup-step-number {
    display: inline-grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border: 1px solid var(--color-border-strong);
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 800;
}
.setup-step.is-done .setup-step-number { border-color: var(--color-accent); color: var(--color-accent); }
.setup-step.is-current > span { color: var(--color-text); }
.setup-step.is-current .setup-step-number { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-on-accent); }

/* ==========================================================================
   Map veto: configuration of a stage, and the veto of a match
   ========================================================================== */
.format-veto { display: grid; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-soft); }
.format-veto:has(.format-veto-switch input:checked) { border-color: var(--color-accent); }
.format-veto-switch { display: flex; align-items: flex-start; gap: var(--space-3); margin: 0; cursor: pointer; }
.format-veto-switch input { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; accent-color: var(--color-accent); }
.format-veto-switch > span { display: grid; gap: 2px; }
.format-veto-switch .text-muted { font-size: 0.85rem; font-weight: 400; }
.format-veto-sequence, .map-veto-sequence-input { font-family: ui-monospace, monospace; font-weight: 800; letter-spacing: 0.15em; }

.veto { display: grid; gap: var(--space-4); }
.veto h2, .veto h3 { margin: 0; }
.veto h3 { font-size: 0.95rem; }
.veto-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.veto-heading p { margin: var(--space-1) 0 0; font-size: 0.9rem; }
.veto .callout { margin: 0; }
.veto-actions { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; counter-reset: veto; }
.veto-actions li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--color-bg-soft); }
.veto-actions li.is-ban > span:last-child { color: var(--color-text-muted); }
.veto-action-verb { flex: none; width: 3rem; font-size: 0.72rem; font-weight: 800; text-align: center; text-transform: uppercase; letter-spacing: 0.05em; }
.veto-actions li.is-ban .veto-action-verb { color: var(--color-danger); }
.veto-actions li.is-pick .veto-action-verb { color: var(--color-accent); }
.veto-turn { margin: 0; font-weight: 700; }
.veto-turn .text-muted { font-weight: 500; }
.veto-turn-help { margin: calc(-1 * var(--space-2)) 0 0; font-size: 0.85rem; }
.veto-form { display: grid; gap: var(--space-3); }
.veto-form > .btn { justify-self: start; }
.veto-maps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.veto-map { display: block; margin: 0; }
.veto-map input { position: absolute; opacity: 0; pointer-events: none; }
.veto-map > span {
    display: grid;
    gap: 2px;
    height: 100%;
    padding: var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-bg-soft);
    font-weight: 600;
}
.veto-map strong { color: var(--color-accent); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.04em; }
.veto-form .veto-map > span { cursor: pointer; }
.veto-form .veto-map:hover > span { border-color: var(--color-text-muted); }
.veto-map input:checked + span { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-accent); }
.veto-map input:focus-visible + span { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.veto-maps.is-readonly .veto-map > span { color: var(--color-text-muted); }
.veto-remaining-title { color: var(--color-text-muted); font-size: 0.8rem !important; text-transform: uppercase; letter-spacing: 0.05em; }
.match-map-name { font-weight: 700; }
.map-veto { display: grid; gap: var(--space-3); }
.map-veto h2 { margin: 0; font-size: 1.1rem; }
.map-veto p { margin: 0; }
.map-veto .callout { margin: 0; }
.map-veto-form { display: grid; gap: var(--space-1); }
.map-veto-form label { font-weight: 700; }
.map-veto-field { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.map-veto-field input { flex: 1 1 12rem; max-width: 20rem; text-transform: uppercase; }
.map-veto-preview { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
.map-veto-preview div { display: flex; gap: var(--space-2); padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-bg-soft); }
.map-veto-preview dt { color: var(--color-accent); font-weight: 800; }
.map-veto-preview dd { margin: 0; font-family: ui-monospace, monospace; }
.map-pick { display: grid; gap: var(--space-3); }
.map-pick h2, .map-order-title { margin: 0; font-size: 1.1rem; }
.map-order-title { margin-bottom: var(--space-3); }
.map-pick-form { display: grid; gap: var(--space-3); }
.map-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: var(--space-2); }
.map-pick-option { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-bg-soft); font-weight: 600; cursor: pointer; }
.map-pick-option input { flex: none; accent-color: var(--color-accent); }
.map-pick-option > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.map-pick-option strong { color: var(--color-accent); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.04em; }
.map-pick-option:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent-soft); }
.map-pick-note { margin: 0; font-size: 0.85rem; }


/* A ban is red, a pick keeps the accent colour: the chosen map and the button say which. */
.veto-form.is-ban .veto-map input:checked + span { border-color: var(--color-danger); background: rgba(239, 118, 113, 0.12); color: var(--color-danger); }
.veto-form.is-ban .veto-map input:checked + span strong { color: var(--color-danger); }
.veto-form.is-ban .veto-map > span { position: relative; }
.veto-form.is-ban .veto-map input:checked + span::after { content: '✕'; position: absolute; top: var(--space-2); right: var(--space-3); font-weight: 800; }
.veto-form.is-ban .veto-map input:focus-visible + span { outline-color: var(--color-danger); }
.veto-form.is-ban .btn-danger:not(:disabled) { background: var(--color-danger); color: var(--color-bg); border-color: var(--color-danger); }

/* The maps of the match as tiles: short name big, then Map 1 or whose loser pick it is. */
.veto-match-maps { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.veto-match-maps li {
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: var(--space-3) var(--space-2);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-bg-soft);
    text-align: center;
}
.veto-match-maps strong { font-size: 1.35rem; font-weight: 800; letter-spacing: 0.04em; line-height: 1.2; overflow-wrap: anywhere; }
.veto-match-maps span { color: var(--color-text-muted); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }
.veto-match-maps small { max-width: 100%; overflow: hidden; color: var(--color-text-muted); font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; }
.veto-match-maps li.is-first { border-color: var(--color-accent); background: var(--color-accent-soft); }
.veto-match-maps li.is-first strong, .veto-match-maps li.is-first span { color: var(--color-accent); }

/* Reporting after a veto: map by map, its name and who won it; the score follows, it is not typed. */
.is-veto .match-map { grid-template-columns: minmax(0, 1fr) auto; }
.match-map-label { display: grid; gap: 2px; min-width: 0; }
.match-map-label .match-map-name { overflow-wrap: anywhere; }
.match-map-label small { font-size: 0.78rem; }
.is-veto .match-map-winner { grid-column: auto; }
.match-score.is-computed { padding: var(--space-4); }
.match-score.is-computed .match-score-input { border-color: transparent; background: transparent; pointer-events: none; }
.match-score.is-computed .match-score-input::-webkit-inner-spin-button, .match-score.is-computed .match-score-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.match-score.is-computed .match-score-input { -moz-appearance: textfield; appearance: textfield; }
@media (max-width: 560px) {
    .is-veto .match-map { grid-template-columns: minmax(0, 1fr); }
}

/* The page of a match: the players head it; its main part follows its state, the veto over goes aside. */
.match-page-header h1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); }
.match-page-versus { color: var(--color-text-muted); font-size: 0.8em; font-variant-numeric: tabular-nums; }
/* The score of a match played: the figure of the page, as large as the players, in white between their colours. */
.match-page-versus.is-score { margin: 0 var(--space-3); color: var(--color-text); font-size: 1em; font-weight: 800; white-space: nowrap; }
.match-page-score-separator { color: var(--color-text-muted); font-weight: 400; }
.match-page-header .page-eyebrow abbr { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
.match-page-header .page-subtitle { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.match-page { display: grid; gap: var(--space-4); align-items: start; }
.match-page.has-aside { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.match-page-main, .match-page-aside { display: grid; gap: var(--space-4); min-width: 0; }
.match-page-title { margin: 0 0 var(--space-2); font-size: 1.1rem; }
.match-page-help { margin: calc(-1 * var(--space-1)) 0 var(--space-4); font-size: 0.9rem; }
.report-modal-page { margin: var(--space-4) 0 0; font-size: 0.9rem; text-align: right; }
@media (max-width: 860px) {
    .match-page.has-aside { grid-template-columns: minmax(0, 1fr); }
}
/* Banned: muted red, struck through, after the maps to play. */
.veto-match-maps li.is-banned { border-color: rgba(239, 118, 113, 0.3); background: rgba(239, 118, 113, 0.06); }
.veto-match-maps li.is-banned strong { color: var(--color-danger); text-decoration: line-through; text-decoration-thickness: 2px; opacity: 0.85; }
.veto-match-maps li.is-banned span { color: var(--color-danger); opacity: 0.85; }
.match-result-actions .btn[hidden] { display: none; }

/* The timeline of a match (veto, match, result): the steps share the width, the last one takes only its own, so that
   the line runs to the end. */
.match-timeline { display: flex; padding: var(--space-4) var(--space-6); }
.match-timeline .status-step { flex: 1 1 0; min-width: 0; }
.match-timeline .status-step:last-child { flex: 0 0 auto; padding-right: 0; }
/* Label and its info on one line, to stay low. */
.match-timeline .status-step-body { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-2); row-gap: 0; }
.status-step.is-skipped .status-step-marker { border-style: dashed; }
@media (max-width: 900px) {
    .match-timeline { flex-direction: column; gap: var(--space-4); padding: var(--space-4); }
    .match-timeline .status-step { flex: none; }
}

/* The factions of a match: each player and where their choice stands (blind until both chose). */
.match-page-faction { color: var(--color-text-muted); font-size: 0.55em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.factions { display: grid; gap: var(--space-4); }
.factions h2 { margin: 0; }
.factions .veto-heading p { margin: var(--space-1) 0 0; font-size: 0.9rem; }
.factions .callout { margin: 0; }
.factions-players { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.factions-players li { display: grid; gap: 2px; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-soft); }
.factions-players li.is-chosen { border-color: var(--color-accent); }
.factions-players li.is-chosen > span { color: var(--color-accent); font-weight: 700; }
.factions-players li.is-waiting > span { color: var(--color-text-muted); }
.veto-form .btn[hidden] { display: none; }

/* An option of the result form (an administrator's way out of the veto): the box, then what it does. */
.match-result-option { display: flex; align-items: flex-start; gap: var(--space-3); margin: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-soft); cursor: pointer; }
.match-result-option input { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; accent-color: var(--color-accent); }
.match-result-option > span { display: grid; gap: 2px; }
.match-result-option .text-muted { font-size: 0.85rem; font-weight: 400; }
.match-result-option:has(input:checked) { border-color: var(--color-accent); }
.match-maps > .btn[hidden] { display: none; }

/* The users, for the administrators. */
.user-search { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.user-search input { flex: 1 1 16rem; max-width: 24rem; }
.user-list .nav-avatar { flex: none; width: 36px; height: 36px; }

/* The administrators of a competition: who, then of which divisions. */
.competition-admins { display: grid; gap: var(--space-3); }
.competition-admins > .btn { justify-self: start; }
.competition-admin { flex-wrap: wrap; }
.competition-admin-pick { display: flex; flex: 1 1 16rem; align-items: center; gap: var(--space-3); margin: 0; cursor: pointer; }
.competition-admin-pick input { flex: none; width: 1.1rem; height: 1.1rem; accent-color: var(--color-accent); }
.competition-admin-pick .nav-avatar { flex: none; width: 32px; height: 32px; }
.competition-admin-divisions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.competition-admin:not(:has(.competition-admin-pick input:checked)) .competition-admin-divisions { display: none; }
.competition-admins-title { margin: 0 0 var(--space-3); font-size: 1.1rem; }
.competition-admins-list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.competition-admins-list li { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-bg-soft); }
.competition-admins-list li > span { display: grid; line-height: 1.2; }
.competition-admins-list .nav-avatar { flex: none; width: 32px; height: 32px; }
.discord-link { flex: none; margin-left: var(--space-1); padding: 2px var(--space-2); border-radius: var(--radius-full); background: rgba(88, 101, 242, 0.15); color: #8a95f7; font-size: 0.75rem; font-weight: 700; text-decoration: none; }
.discord-link:hover { background: rgba(88, 101, 242, 0.28); }

/* A choice among a few options, each with what it means (e.g. who enters the players of a competition). */
.option-cards-field { display: grid; gap: var(--space-2); margin: 0; padding: 0; border: 0; }
.option-cards-field legend { margin-bottom: var(--space-2); padding: 0; font-weight: 700; }
.option-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--space-2); }
.option-card { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; padding: var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-bg-soft); cursor: pointer; }
.option-card input { flex: none; margin-top: 0.2rem; accent-color: var(--color-accent); }
.option-card > span { display: grid; gap: 2px; }
.option-card .text-muted { font-size: 0.85rem; font-weight: 400; line-height: 1.35; }
.option-card:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent-soft); }
.option-card:has(input:checked) strong { color: var(--color-accent); }
.option-card:has(input:disabled) { cursor: default; opacity: 0.75; }
.option-cards-note { margin: 0; font-size: 0.85rem; }

/* Picking an account by searching it. */
.user-picker { display: grid; gap: var(--space-2); }
.user-picker > label { font-weight: 700; }
.user-picker-search { position: relative; }
.user-picker-search input { width: 100%; }
.user-picker-results { position: absolute; z-index: 10; top: calc(100% + 4px); left: 0; right: 0; display: grid; margin: 0; padding: var(--space-1); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-lg); list-style: none; }
.user-picker-results li.text-muted { padding: var(--space-2) var(--space-3); font-size: 0.9rem; }
.user-picker-results button { width: 100%; padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-sm); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.user-picker-results button:hover, .user-picker-results button:focus-visible { background: var(--color-accent-soft); color: var(--color-accent); }
.user-picker-chosen { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-accent); border-radius: var(--radius-md); background: var(--color-accent-soft); font-weight: 600; }
.user-picker-results[hidden], .user-picker-chosen[hidden], .user-picker-search[hidden] { display: none; }

/* The BO by round of a cup: a row of small selects per bracket. */
.cup-format { display: grid; gap: var(--space-2); margin: 0; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-soft); }
.cup-format legend { padding: 0 var(--space-2); font-weight: 700; }
.cup-format-scroll { overflow-x: auto; }
.cup-format-table { border-collapse: collapse; }
.cup-format-table th { padding: 0 var(--space-2) var(--space-1); color: var(--color-text-muted); font-size: 0.8rem; font-weight: 600; text-align: left; white-space: nowrap; }
.cup-format-table tbody th { padding-left: 0; color: var(--color-text); font-weight: 700; }
.cup-format-table td { padding: var(--space-1) var(--space-2); }
.cup-format-table td:first-child, .cup-format-table thead th:first-child { padding-left: 0; }
.cup-format-table td[rowspan] { border-left: 1px solid var(--color-border); vertical-align: middle; }
.cup-format-table select { width: auto; min-width: 5.5em; padding-block: var(--space-1); }
.bracket-round-bo { margin-left: var(--space-1); color: var(--color-text-muted); font-size: 0.7em; font-weight: 700; letter-spacing: 0.04em; }

/* US 036: the replays of a match (in its scoreboard, or joined to it) and the dispute of its result. */
.match-played { display: grid; gap: var(--space-4); }
.match-detail-maps td.match-detail-replay { width: auto; text-align: right; white-space: nowrap; }
.match-replays { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.match-replay { display: inline-flex; align-items: center; gap: var(--space-1); }
.match-replay-link { font-size: 0.9rem; font-weight: 600; }
.match-replay-delete,
.match-replay-upload { display: inline; margin: 0; }
.match-replay-delete button { padding: 0 var(--space-1); border: 0; background: none; color: var(--color-text-muted); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.match-replay-delete button:hover { color: var(--color-danger); }
.match-replay-upload label { position: relative; cursor: pointer; }
/* The hidden file field stays inside its button: left where it falls, it widened the page on a phone. */
.match-replay-upload label .sr-only { top: 0; left: 0; }
.match-dispute { flex-direction: column; gap: var(--space-2); }
.match-dispute p { margin: 0; color: var(--color-text); }
.match-dispute .text-muted { color: var(--color-text-muted); }
.match-dispute-form { display: grid; gap: var(--space-2); width: 100%; }
.match-dispute-toggle summary { width: fit-content; color: var(--color-text-muted); font-size: 0.85rem; cursor: pointer; }
.match-dispute-toggle[open] summary { margin-bottom: var(--space-2); }
.cockpit-disputes { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.cockpit-dispute { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.cockpit-dispute p { margin: 0; }

/* US 036: the replays sent with the result, one per map or joined to the match. */
.match-map-replay { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: 0.85rem; }
.match-result-replays { display: grid; gap: var(--space-2); }
.match-replay-input { max-width: 100%; color: var(--color-text-muted); font-size: 0.85rem; }
.match-replay-input::file-selector-button { margin-right: var(--space-2); padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font: inherit; cursor: pointer; }

/* US 037: the minimap of a map (a square tile, cropped to the centre, or its short name without one) and the image
   of a faction (US 052: a small square, cropped to the centre, next to its name). */
.map-thumb { display: inline-grid; flex: none; place-items: center; aspect-ratio: 1; border-radius: var(--radius-sm, 6px); object-fit: cover; vertical-align: middle; }
.map-thumb.is-sm { width: 1.75rem; margin-right: var(--space-2); }
.map-thumb.is-md { width: 3.5rem; }
.map-thumb.is-lg { width: 100%; }
.map-thumb.is-empty { border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text-muted); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; }
.map-thumb.is-sm.is-empty { font-size: 0.55rem; }
.map-thumb.is-lg.is-empty { aspect-ratio: 2 / 1; font-size: 1.4rem; background: linear-gradient(135deg, var(--color-surface), var(--color-bg-soft)); }
.faction-icon { display: inline-block; flex: none; border-radius: var(--radius-sm, 6px); object-fit: cover; vertical-align: -0.2em; margin-right: 0.3em; }
.faction-choice { display: grid; justify-items: center; gap: var(--space-1); text-align: center; }
.faction-choice .faction-icon { margin: 0; }
.map-form-preview { display: flex; align-items: center; gap: var(--space-3); }
.map-form-preview .map-thumb { width: 6rem; }

/* The veto as cards: the minimap above the name; a ban greys its map out. */
.veto-map > span:has(> .map-thumb) { align-content: start; gap: var(--space-2); padding: var(--space-2); }
.veto-map-name { overflow-wrap: anywhere; }
.veto-match-maps .map-thumb { margin-bottom: var(--space-1); }
.veto-match-maps .map-thumb.is-lg.is-empty { font-size: 1.1rem; }
.veto-match-maps li:has(.map-thumb) { padding: var(--space-2); }
.veto-match-maps li:has(.map-thumb) strong { font-size: 1.1rem; }
.veto-match-maps li.is-banned .map-thumb { filter: grayscale(1); opacity: 0.45; }
.veto-actions .map-thumb { margin-right: var(--space-1); }
.match-detail-maps th.match-detail-map { white-space: nowrap; }
/* Drawn by CSS: the tile adds no text to its map's name. */
.map-thumb.is-empty::before { content: attr(data-label); }

/* The picks & bans explained under the Map Pool of a competition, with the order of the turns BO by BO. */
.map-pool-veto { display: grid; gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.map-pool-veto h3 { margin: 0; font-size: 1rem; }
.map-pool-veto p { margin: 0; font-size: 0.9rem; }
.map-pool-veto-steps { display: grid; gap: var(--space-1); margin: 0; padding-left: 1.25rem; font-size: 0.9rem; }
.map-pool-veto-orders { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.map-pool-veto-orders li { padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-bg-soft); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em; }
.map-pool-veto-bo { margin-right: var(--space-1); color: var(--color-accent); font-weight: 800; }

/* The maps played of a match: a card each, its minimap, its winner. */
.match-played-maps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.match-played-map {
    display: grid;
    align-content: start;
    gap: 2px;
    padding: var(--space-2);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-bg-soft);
    text-align: center;
}
.match-played-map-visual { position: relative; display: block; margin-bottom: var(--space-2); }
.match-played-map-visual .map-thumb { display: grid; margin: 0; }
.match-played-map-number {
    position: absolute;
    top: var(--space-1);
    left: var(--space-1);
    display: grid;
    place-items: center;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 var(--space-1);
    border-radius: var(--radius-full);
    background: rgba(5, 7, 10, 0.75);
    color: var(--color-text);
    font-size: 0.8rem;
    font-weight: 800;
}
.match-played-map-name { font-size: 1.1rem; font-weight: 800; letter-spacing: 0.04em; overflow-wrap: anywhere; }
.match-played-map-winner { overflow: hidden; font-size: 0.85rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.match-played-map-winner span[aria-label] { color: var(--color-accent); }
.match-played-map-replay { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--color-border); }
.match-played-map-replay .btn { width: 100%; }
.match-played-map-replay .match-replay-upload { display: block; }


/* A finished veto, beside the result: one short line per ban and pick. */
.veto-actions li.is-compact { gap: var(--space-2); padding: var(--space-1) var(--space-2); font-size: 0.88rem; }
.veto-actions li.is-compact > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-page-aside { display: grid; align-content: start; gap: var(--space-4); }

/* Taking a participant out of a competition under way (US 038). */
.withdrawal-form { display: grid; gap: var(--space-5, 20px); }
.withdrawal-choice { display: grid; gap: var(--space-2); margin: 0; padding: 0; border: 0; }
.withdrawal-choice legend, .withdrawal-effects h2 { margin-bottom: var(--space-2); font-size: 1rem; font-weight: 700; }
.withdrawal-effects { display: grid; gap: var(--space-2); }
.withdrawal-effects p { margin: 0; }
.withdrawal-matches { display: grid; gap: var(--space-1); margin: 0; padding-left: 1.25rem; }
.participant-out { display: inline-block; margin-left: var(--space-1); padding: 0 0.45em; border: 1px solid rgba(239, 118, 113, 0.35); border-radius: var(--radius-full); color: var(--color-danger); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; line-height: 1.6; text-transform: uppercase; vertical-align: middle; }
.match-page-header h1 .participant-out { font-size: 0.35em; }
.participant-out.is-replaced { border-color: var(--color-border-strong); color: var(--color-text-muted); text-transform: none; letter-spacing: 0; }
.match-page-status { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0 0; }
@media (max-width: 640px) {
    .match-page-header h1:has(.is-score, .match-page-faction) { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
    .match-page-header h1:has(.is-score, .match-page-faction) .match-page-versus { margin: 0; }
}

/* The calendar of a phase (US 040). */
.stage-calendar { display: grid; gap: var(--space-4); }
.stage-calendar-fill { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.stage-calendar-fill input, .stage-calendar-fill select { width: auto; }
.stage-calendar-rounds { width: 100%; border-collapse: collapse; }
.stage-calendar-rounds th, .stage-calendar-rounds td { padding: var(--space-2); border-bottom: 1px solid var(--color-border); text-align: left; }
.stage-calendar-rounds thead th { color: var(--color-text-muted); font-size: 0.75rem; text-transform: uppercase; }
.stage-calendar-rounds input { width: auto; }
.round-period { color: var(--color-text-muted); font-size: 0.85rem; font-weight: 500; }
.match-plan { margin-top: var(--space-2); }
.match-plan summary { width: fit-content; color: var(--color-text-muted); font-size: 0.85rem; cursor: pointer; }
.match-plan-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.match-plan-form input { width: auto; }

/* The calendar of a competition (US 041): the matches still to plan, then the matches planned day by day. */
.agenda-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.agenda-heading h2 { margin: 0; }
.agenda-groups { display: grid; gap: var(--space-3); }
.agenda-group h3 { margin: 0 0 var(--space-2); font-size: 1rem; }
.agenda-day { margin-bottom: var(--space-4); }
.agenda-matches { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.card.agenda-matches { padding: var(--space-1) var(--space-3); }
.agenda-match { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.agenda-match:last-child { border-bottom: 0; }
.agenda-match:not(:has(.agenda-time)) { grid-template-columns: minmax(0, 1fr) auto; }
.agenda-time { color: var(--color-accent); font-weight: 800; font-variant-numeric: tabular-nums; }
.agenda-players { color: var(--color-text); font-weight: 700; }
.agenda-versus { margin: 0 var(--space-1); color: var(--color-text-muted); font-weight: 500; }
.agenda-context { grid-column: -2 / -1; grid-row: 1; justify-self: end; color: var(--color-text-muted); font-size: 0.82rem; text-align: right; }
.agenda-state { grid-column: 1 / -1; justify-self: start; }
.agenda-match.is-mine .agenda-players { color: var(--color-accent); }

/* Where a competition speaks on Discord (US 043). */
.discord-bot, .discord-channels { display: grid; gap: var(--space-2); margin: 0; padding: 0; border: 0; }
.discord-bot legend, .discord-channels legend { margin-bottom: var(--space-2); font-weight: 700; }
.discord-bot p { margin: 0; }
.discord-channel { display: grid; gap: var(--space-1); }
.discord-channel .help-text { margin: 0; }
.discord-site-bot { display: flex; align-items: center; gap: var(--space-2); font-weight: 500; }
.my-notifications { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin: 0 0 var(--space-3); color: var(--color-text-muted); font-size: 0.88rem; }

/* The navigation of the administration of a competition: its four sections, the public page aside, and the bar of
   its settings. */
.admin-nav { margin-bottom: var(--space-3); }
.admin-nav .admin-nav-public { margin-left: auto; color: var(--color-text-muted); }
.admin-subnav { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0 0 var(--space-5, 20px); }
.admin-subnav-item { padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-full); color: var(--color-text-muted); font-size: 0.85rem; font-weight: 600; }
.admin-subnav-item:hover { border-color: var(--color-border-strong); color: var(--color-text); }
.admin-subnav-item.is-active { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-accent); }

/* The language switcher of the menu (US 046). */
.locale-switch { padding: var(--space-1) var(--space-2); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); color: var(--color-text-muted); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.05em; }
.locale-switch:hover { border-color: var(--color-text-muted); color: var(--color-text); }

/* US 050: the hours of the page are not those of the competition. */
.time-zone-notice { margin: var(--space-2) 0 0; color: var(--color-text-muted); font-size: 0.85rem; }

/* US 051: the cash prize on Matcherino, flat on the right of the competition header, in the green of the site. */
.competition-header-side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-3); }
.competition-cash-prize { display: flex; flex-direction: column; align-items: flex-end; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-accent-soft); text-align: right; transition: background-color 0.15s ease, transform 0.15s ease; }
.competition-cash-prize:hover { background: color-mix(in srgb, var(--color-accent) 22%, transparent); transform: translateY(-1px); }
.competition-cash-prize-label { color: var(--color-text-muted); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.competition-cash-prize-amount { margin-top: 2px; color: var(--color-accent); font-size: 2rem; line-height: 1.1; letter-spacing: -0.02em; }
.competition-cash-prize-cta { color: var(--color-accent); font-size: 0.85rem; font-weight: 600; }
.competition-header-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2) var(--space-4); }
.competition-liquipedia { display: inline-flex; align-items: center; gap: 0.4em; color: var(--color-text); font-size: 0.85rem; font-weight: 600; }
.competition-liquipedia:hover { color: var(--color-accent); }
/* US 053: the mark of Liquipedia, in the colour of the text around it. */
.liquipedia-icon { flex: none; display: inline-block; width: 1.5em; height: 1.2em; background: currentColor; -webkit-mask: url("../images/liquipedia-u52kWc3.png") no-repeat center / contain; mask: url("../images/liquipedia-u52kWc3.png") no-repeat center / contain; }
.competition-tile-prize, .home-competition-prize { font-weight: 700; color: var(--color-accent); font-size: 0.9rem; }
@media (max-width: 640px) {
    .competition-header-side, .competition-cash-prize { align-items: flex-start; text-align: left; }
    .competition-header-side { width: 100%; }
    .competition-header-actions { justify-content: flex-start; }
}