/* ./variables.css */
:root {
    /* ── Pub Light Theme ── */
    --c-bg:            #f5e8c8;
    --c-surface:       #fffbf0;
    --c-surface-raised:#ffffff;
    --c-border:        #9a7840;
    --c-text:          #2c1810;
    --c-text-muted:    #5c3d28;
    --c-text-on-dark:  #f5e8c8;

    --c-accent:        #8b1a1a;
    --c-accent-hover:  #a52020;
    --c-success:       #2e6b2e;
    --c-success-hover: #3a853a;
    --c-danger:        #8b1a1a;

    /* Dartboard */
    --c-dart-bg:       #1a1a1a;
    --c-dart-black:    #1a1a1a;
    --c-dart-white:    #f0e8d0;
    --c-dart-red:      #c0392b;
    --c-dart-green:    #27ae60;
    --c-dart-bull:     #27ae60;
    --c-dart-bullseye: #c0392b;
    --c-dart-wire:     #888;
    --c-dart-number:   #f0e8d0;

    /* Game states */
    --c-killer:        #e74c3c;
    --c-killer-glow:   rgba(231, 76, 60, 0.4);
    --c-eliminated:    #9e9e9e;

    /* Spacing */
    --space-xs:   4px;
    --space-sm:   8px;
    --space-md:  16px;
    --space-lg:  24px;
    --space-xl:  40px;

    /* Typography */
    --font-body: 'Inter', system-ui, sans-serif;
    --font-display: 'Bebas Neue', 'Oswald', sans-serif;
    --fs-sm:   0.8125rem;
    --fs-base:    1rem;
    --fs-md:   1.125rem;
    --fs-lg:   1.375rem;
    --fs-xl:   1.75rem;
    --fs-2xl:  2.25rem;
    --fs-3xl:  3rem;

    /* Radius / shadow */
    --radius-sm:  6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --shadow-sm:  0 1px 4px rgba(44, 24, 16, 0.15);
    --shadow-md:  0 4px 16px rgba(44, 24, 16, 0.2);
    --shadow-lg:  0 8px 32px rgba(44, 24, 16, 0.25);

    /* Transitions */
    --transition: 150ms ease;
}

/* ── Pub Dark Theme ── */
[data-theme="dark"], .dark-theme {
    --c-bg:            #120d05;
    --c-surface:       #1e1508;
    --c-surface-raised:#2c1e0f;
    --c-border:        #7a5c3e;
    --c-text:          #f0d9a8;
    --c-text-muted:    #c09870;
    --c-text-on-dark:  #f0d9a8;

    --c-accent:        #e8a030;
    --c-accent-hover:  #f5b848;
    --c-success:       #4caf50;
    --c-success-hover: #66bb6a;
    --c-danger:        #ef5350;

    --c-dart-wire:     #555;
    --c-dart-number:   #e8d090;

    --shadow-sm:  0 1px 4px rgba(0, 0, 0, 0.4);
    --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.6);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --c-bg:            #120d05;
        --c-surface:       #1e1508;
        --c-surface-raised:#2c1e0f;
        --c-border:        #7a5c3e;
        --c-text:          #f0d9a8;
        --c-text-muted:    #c09870;
        --c-text-on-dark:  #f0d9a8;

        --c-accent:        #e8a030;
        --c-accent-hover:  #f5b848;
        --c-success:       #4caf50;
        --c-success-hover: #66bb6a;
        --c-danger:        #ef5350;

        --c-dart-wire:     #555;
        --c-dart-number:   #e8d090;

        --shadow-sm:  0 1px 4px rgba(0, 0, 0, 0.4);
        --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.5);
        --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.6);
    }
}

/* ./base.css */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── Accessibility ── */


/* Visible focus ring for keyboard navigation — hidden for mouse/touch */
:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 3px;
    border-radius: 3px;
}

:focus:not(:focus-visible) {
    outline: none;
}

/* Visually hidden but readable by screen readers */
.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;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    background-color: var(--c-bg);
    color: var(--c-text);
    line-height: 1.5;
    min-height: 100dvh;
    transition: background-color var(--transition), color var(--transition);
}

a {
    color: var(--c-accent);
    text-decoration: none;

    &:hover {
        text-decoration: underline;
    }
}

ul {
    list-style: none;
}

button {
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    border: none;
    background: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;

    &:disabled {
        cursor: not-allowed;
        opacity: 0.4;
    }
}

input {
    font-family: inherit;
    font-size: inherit;
}

h1, h2, h3 {
    font-family: var(--font-display);
    line-height: 1.2;
}

.input {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    border: 2px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface-raised);
    color: var(--c-text);
    font-size: var(--fs-md);
    transition: border-color var(--transition);

    &:focus {
        border-color: var(--c-accent);
    }

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

    &::placeholder {
        color: var(--c-text-muted);
    }
}

.input-group {
    display: flex;
    gap: var(--space-sm);

    & .input {
        flex: 1;
        min-width: 0;
    }
}

.page-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-md) 0;
}

.page-title {
    font-size: var(--fs-xl);
    color: var(--c-text);
}

/* ./layout.css */
.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    background: var(--c-surface);
    border-bottom: 2px solid var(--c-border);
    position: sticky;
    top: 0;
    z-index: 100;

    & .app-logo {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        text-decoration: none;
        color: var(--c-text);

        &:hover {
            text-decoration: none;
        }
    }

    & .app-logo__icon {
        display: block;
        width: 2rem;
        height: 2rem;
        border-radius: 22%;
    }

    & .app-logo__name {
        font-family: var(--font-display);
        font-size: var(--fs-lg);
        font-weight: bold;
    }

    & .app-header__nav {
        display: flex;
        align-items: center;
        gap: var(--space-md);
    }
}

.locale-switcher {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--fs-sm);

    & .locale-switcher__btn {
        color: var(--c-text-muted);
        text-decoration: none;
        font-weight: 500;
        padding: 2px 4px;
        border-radius: 3px;
        transition: color var(--transition);

        &:hover {
            color: var(--c-text);
            text-decoration: none;
        }

        &.locale-switcher__btn--active {
            color: var(--c-accent);
            font-weight: 700;
        }
    }

    & .locale-switcher__sep {
        color: var(--c-border);
    }
}

.header-btn {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    padding: var(--space-xs);
    border-radius: var(--radius-sm);
    transition: transform var(--transition);
    line-height: 1;

    &:hover {
        transform: scale(1.15);
    }
}

/* ── Rules modal ── */
.rules-modal {
    border: 2px solid var(--c-border);
    border-radius: var(--radius-lg);
    background: var(--c-surface);
    color: var(--c-text);
    padding: 0;
    max-width: min(480px, calc(100vw - 2rem));
    width: 100%;
    max-height: 85dvh;
    margin: auto;

    &::backdrop {
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(2px);
    }

    & .rules-modal__box {
        display: flex;
        flex-direction: column;
        max-height: 85dvh;
    }

    & .rules-modal__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-md) var(--space-lg);
        border-bottom: 1px solid var(--c-border);
        position: sticky;
        top: 0;
        background: var(--c-surface);
    }

    & .rules-modal__title {
        font-size: var(--fs-lg);
        font-family: var(--font-display);
    }

    & .rules-modal__body {
        overflow-y: auto;
        padding: var(--space-md) var(--space-lg) var(--space-lg);
        display: flex;
        flex-direction: column;
        gap: var(--space-lg);
    }

    & .rules-modal__full-page-link {
        font-size: var(--fs-sm);
        color: var(--c-text-muted);
        text-decoration: none;
        text-align: center;
        padding-top: var(--space-sm);
        border-top: 1px solid var(--c-border);

        &:hover {
            color: var(--c-accent);
            text-decoration: none;
        }
    }
}

.rules-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);

    & h3 {
        font-size: var(--fs-base);
        font-weight: 700;
        color: var(--c-accent);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-family: var(--font-body);
    }

    & p {
        font-size: var(--fs-base);
        color: var(--c-text);
        line-height: 1.6;
    }
}

.app-main {
    max-width: 480px;
    margin: 0 auto;
    min-height: calc(100dvh - 57px - 68px); /* header + footer */
}

/* ── Footer ── */
.app-footer {
    border-top: 1px solid var(--c-border);
    padding: var(--space-md) var(--space-md);
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
}

.app-footer__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm) var(--space-lg);
    flex-wrap: wrap;

    /* The Stimulus modal wrapper div must not create its own flex item */
    & > div {
        display: contents;
    }
}

.app-footer__legal {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
    font-size: var(--fs-xs, 0.75rem);
    color: var(--c-text-muted);
}

.app-footer__legal-link {
    color: var(--c-text-muted);
    text-decoration: none;
    transition: color var(--transition);

    &:hover {
        color: var(--c-text);
        text-decoration: none;
    }
}

.app-footer__contact {
    background: none;
    border: none;
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    cursor: pointer;
    padding: 0;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color var(--transition);

    & span:not(.app-footer__emoji) {
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    &:hover {
        color: var(--c-accent);
        text-decoration: none;

        & .app-footer__emoji {
            animation: footer-emoji-jump 0.4s ease;
        }
    }

    & .app-footer__emoji {
        text-decoration: none;
    }
}

@keyframes footer-emoji-jump {
    0%   { transform: translateY(0); }
    35%  { transform: translateY(-5px); }
    65%  { transform: translateY(-3px); }
    85%  { transform: translateY(-5px); }
    100% { transform: translateY(0); }
}

/* ── Contact modal ── */
.contact-modal {
    border: 2px solid var(--c-border);
    border-radius: var(--radius-lg);
    background: var(--c-surface);
    color: var(--c-text);
    padding: 0;
    max-width: min(480px, calc(100vw - 2rem));
    width: 100%;
    margin: auto;

    &::backdrop {
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(2px);
    }

    & .contact-modal__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-md) var(--space-lg);
        border-bottom: 1px solid var(--c-border);
    }

    & .contact-modal__title {
        font-size: var(--fs-lg);
        font-family: var(--font-display);
    }

    & .contact-modal__body {
        padding: var(--space-lg);
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
    }
}

.contact-flash {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: 600;

    &.contact-flash--success {
        background: color-mix(in srgb, var(--c-success) 15%, transparent);
        border: 1px solid var(--c-success);
        color: var(--c-success);
    }

    &.contact-flash--error {
        background: color-mix(in srgb, var(--c-danger) 15%, transparent);
        border: 1px solid var(--c-danger);
        color: var(--c-danger);
    }
}

.contact-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);

    & label {
        font-size: var(--fs-sm);
        font-weight: 600;
        color: var(--c-text-muted);

        & .contact-field__optional {
            font-weight: 400;
            font-style: italic;
        }
    }

    & input,
    & textarea {
        background: var(--c-bg);
        border: 2px solid var(--c-border);
        border-radius: var(--radius-sm);
        color: var(--c-text);
        font-size: var(--fs-base);
        font-family: var(--font-body);
        padding: var(--space-sm) var(--space-md);
        width: 100%;
        outline: none;
        transition: border-color var(--transition);

        &:focus {
            border-color: var(--c-accent);
        }
    }

    & textarea {
        resize: vertical;
        min-height: 100px;
    }
}

/* ── Share modal ── */
.share-modal {
    border: 2px solid var(--c-border);
    border-radius: var(--radius-lg);
    background: var(--c-surface);
    color: var(--c-text);
    padding: 0;
    max-width: min(340px, calc(100vw - 2rem));
    width: 100%;
    margin: auto;

    &::backdrop {
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(2px);
    }

    & .share-modal__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-md) var(--space-lg);
        border-bottom: 1px solid var(--c-border);
    }

    & .share-modal__title {
        font-size: var(--fs-lg);
        font-family: var(--font-display);
    }

    & .share-modal__body {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-md);
        padding: var(--space-lg);
    }

    & .share-modal__qr {
        border-radius: var(--radius-sm);
        display: block;
    }

    & .share-modal__hint {
        font-size: var(--fs-sm);
        color: var(--c-text-muted);
        text-align: center;
    }
}

/* Native share button: touch devices only */
.btn.share-modal__native {
    display: none;
}

@media (pointer: coarse) {
    .btn.share-modal__native {
        display: revert;
    }
}

/* ── iOS install prompt ── */
.install-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--c-surface);
    border-top: 2px solid var(--c-accent);
    padding: var(--space-sm) var(--space-md);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    z-index: 150;

    &:not([hidden]) {
        display: flex;
    }

    & .install-banner__text {
        font-size: var(--fs-sm);
        color: var(--c-text);
        line-height: 1.4;
        margin-right: auto;

        &[hidden] {
            display: none;
        }
    }

    & .install-banner__install {
        flex-shrink: 0;
        width: auto;

        &[hidden] {
            display: none;
        }
    }

    & .install-banner__dismiss {
        background: none;
        border: none;
        color: var(--c-text-muted);
        font-size: 1rem;
        cursor: pointer;
        padding: var(--space-xs);
        flex-shrink: 0;
        line-height: 1;

        &:hover {
            color: var(--c-text);
        }
    }
}

/* ── Offline banner ── */
.offline-banner {
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    background: color-mix(in srgb, var(--c-warning, #c8840a) 15%, transparent);
    border-bottom: 2px solid var(--c-warning, #c8840a);
    color: var(--c-warning, #c8840a);
    font-size: var(--fs-sm);
    font-weight: 600;
    padding: var(--space-sm) var(--space-md);
    text-align: center;

    &:not([hidden]) {
        display: flex;
    }
}



/* ./components/dartboard.css */
/* Segment fills — kept flat; no shared parent to nest under */
.dartboard__segment--segment-black { fill: #1a1a1a; }
.dartboard__segment--segment-white { fill: #f0e8d0; }
.dartboard__segment--segment-red   { fill: #c0392b; }
.dartboard__segment--segment-green { fill: #27ae60; }

/* Static board layer: lives in the page-level <symbol>, so it cannot be nested under .dartboard */
.dartboard-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.dartboard__bg     { fill: #111; }
.dartboard__border { fill: none; stroke: #444; stroke-width: 2; }
.dartboard__wire   { stroke: #888; stroke-width: 1; fill: none; }
.dartboard__bull-outer { fill: #27ae60; }
.dartboard__bull-inner { fill: #c0392b; }
.dartboard__number-label {
    fill: #f0e8d0;
    font-size: 13px;
    font-weight: 700;
    font-family: var(--font-body);
    pointer-events: none;
}

.dartboard-wrap {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    padding: var(--space-sm);
}

.dartboard {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.5));

    /* Interactive hit zones */
    & .dartboard__hit-zone {
        fill: transparent;
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        transition: fill 150ms;

        &:hover:not(.dartboard__hit-zone--taken),
        &:focus-visible:not(.dartboard__hit-zone--taken) {
            fill: rgba(255, 200, 50, 0.45);
        }

        &.dartboard__hit-zone--taken {
            fill: rgba(0, 0, 0, 0.35);
            cursor: not-allowed;
        }
    }

    /* Player name overlays — paint-order trick: dark stroke behind white fill = readable on any segment */
    & .dartboard__player-label {
        fill: #fff;
        stroke: #000;
        stroke-width: 4;
        stroke-linejoin: round;
        paint-order: stroke fill;
        font-size: 11px;
        font-weight: 900;
        font-family: var(--font-body);
        pointer-events: none;

        &.dartboard__player-label--killer {
            fill: #ffe566;
        }

        &.dartboard__player-label--eliminated {
            fill: #bbb;
            opacity: 0.5;
        }
    }
}

/* ./components/player.css */
/* ── Player row (game board) ── */
.player-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--c-surface);
    border: 2px solid var(--c-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition), background var(--transition),
                box-shadow var(--transition);

    & .player-row__info {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        min-width: 0;
    }

    & .player-row__number {
        font-size: var(--fs-sm);
        color: var(--c-text-muted);
        font-weight: 700;
        min-width: 2rem;
    }

    & .player-row__name {
        font-size: var(--fs-md);
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    & .player-row__badge {
        font-size: 1rem;
        line-height: 1;

        &.player-row__badge--killer {
            animation: pulse 1.5s ease-in-out infinite;
        }
    }

    & .player-row__score {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
    }

    & .player-row__controls {
        display: flex;
        gap: var(--space-xs);
    }

    & .player-row__eliminated-badge {
        font-size: var(--fs-sm);
        color: var(--c-eliminated);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 0 var(--space-xs);
    }

    /* States */
    &.player-row--killer {
        border-color: var(--c-killer);
        background: var(--c-surface-raised);
        box-shadow: 0 0 12px var(--c-killer-glow);

        & .player-row__name {
            color: var(--c-killer);
        }
    }

    &.player-row--eliminated {
        opacity: 0.5;
        border-color: var(--c-eliminated);

        & .player-row__name {
            text-decoration: line-through;
            color: var(--c-eliminated);
        }
    }
}

/* More than 3 dots do not fit next to the name: the dots get a line of their own, smaller when there are many */
.player-row--wide {
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "info controls"
        "score score";

    & .player-row__info { grid-area: info; }
    & .player-row__controls { grid-area: controls; }

    & .player-row__score {
        grid-area: score;
        justify-content: space-between;
    }
}

/* ── Score dots ── */
.score-dots {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;

    &.score-dots--many {
        gap: 4px;
    }
}

.score-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--c-border);
    background: transparent;
    transition: background var(--transition), border-color var(--transition);

    &.score-dot--filled {
        background: var(--c-accent);
        border-color: var(--c-accent);
    }

    .score-dots--many & {
        width: 11px;
        height: 11px;
    }

    .player-row--killer & {
        border-color: var(--c-killer);

        &.score-dot--filled {
            background: var(--c-killer);
            border-color: var(--c-killer);
        }
    }
}

.score-value {
    font-size: var(--fs-md);
    font-weight: 700;
    min-width: 1.25rem;
    text-align: center;
}

/* ── Score buttons ── */
.score-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition), color var(--transition), transform 80ms;

    &:active:not(:disabled) {
        transform: scale(0.9);
    }

    &.score-btn--plus {
        border-color: var(--c-success);
        color: var(--c-success);

        &:hover:not(:disabled) {
            background: var(--c-success);
            color: #fff;
        }
    }

    &.score-btn--minus {
        border-color: var(--c-danger);
        color: var(--c-danger);

        &:hover:not(:disabled) {
            background: var(--c-danger);
            color: #fff;
        }
    }

    &.score-btn--restore {
        border-color: var(--c-text-muted);
        color: var(--c-text-muted);
        font-size: 1rem;

        &:hover:not(:disabled) {
            border-color: var(--c-accent);
            color: var(--c-accent);
        }
    }
}

/* ── Player list (setup screen) ── */
.player-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);

    & .player-list__item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-sm) var(--space-md);
        background: var(--c-surface);
        border: 2px solid var(--c-border);
        border-radius: var(--radius-sm);

        & .player-list__name {
            font-size: var(--fs-md);
            font-weight: 600;
        }
    }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.6; }
}

/* ./components/button.css */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    font-size: var(--fs-base);
    font-weight: 600;
    border: 2px solid transparent;
    transition: background-color var(--transition), color var(--transition),
                border-color var(--transition), transform 80ms;
    text-decoration: none;
    white-space: nowrap;

    &:active {
        transform: scale(0.97);
    }

    &:hover {
        text-decoration: none;
    }

    /* Sizes */
    &.btn--sm {
        padding: var(--space-xs) var(--space-sm);
        font-size: var(--fs-sm);
    }

    &.btn--large {
        padding: var(--space-md) var(--space-lg);
        font-size: var(--fs-md);
    }

    &.btn--full {
        width: 100%;
        /* Full-width buttons wrap instead of overflowing when a translation is long */
        white-space: normal;
        text-align: center;
    }

    &.btn--icon {
        width: 2rem;
        height: 2rem;
        padding: 0;
        border-radius: 50%;
    }

    /* Variants */
    &.btn--primary {
        background: var(--c-accent);
        color: var(--c-text-on-dark);
        border-color: var(--c-accent);

        &:hover:not(:disabled) {
            background: var(--c-accent-hover);
            border-color: var(--c-accent-hover);
        }
    }

    &.btn--success {
        background: var(--c-success);
        color: #fff;
        border-color: var(--c-success);

        &:hover:not(:disabled) {
            background: var(--c-success-hover);
            border-color: var(--c-success-hover);
        }
    }

    &.btn--danger {
        background: transparent;
        color: var(--c-danger);
        border-color: var(--c-danger);

        &:hover:not(:disabled) {
            background: var(--c-danger);
            color: #fff;
        }
    }

    &.btn--outline {
        background: transparent;
        color: var(--c-accent);
        border-color: var(--c-accent);

        &:hover:not(:disabled) {
            background: var(--c-accent);
            color: var(--c-text-on-dark);
        }
    }

    &.btn--ghost {
        background: transparent;
        color: var(--c-text-muted);
        border-color: var(--c-border);

        &:hover:not(:disabled) {
            color: var(--c-text);
            border-color: var(--c-text);
        }
    }
}

/* A button with a label and, under it, a small line of explanation: no taller than the others next to it */
.btn.btn--two-lines {
    flex-direction: column;
    gap: 0;
    padding-block: 6px 3px;
    line-height: 1.2;
    text-align: center;

    & .btn__line {
        display: inline-flex;
        align-items: center;
        gap: var(--space-xs);
        font-size: var(--fs-base);
        white-space: nowrap;
    }

    & .btn__sub {
        font-size: 0.7rem;
        font-weight: 400;
        opacity: 0.85;
    }
}

/* ./components/leaderboard.css */
/* ── Shared leaderboard rows — winner page & history modal ── */

.hdm-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.hdm-row {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: var(--space-sm);
    padding: 8px var(--space-sm);
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-border);
    background: var(--c-surface-raised);

    &.hdm-row--winner {
        background: color-mix(in srgb, var(--c-accent) 12%, var(--c-surface-raised));
        border-color: var(--c-accent);
    }
}

.hdm-rank {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    flex-shrink: 0;
    background: var(--c-surface-raised);
    color: var(--c-text-muted);
    border: 1px solid var(--c-border);

    &.hdm-rank--1 { background: #f59e0b; color: #fff; border-color: #d97706; }
    &.hdm-rank--2 { background: #94a3b8; color: #fff; border-color: #64748b; }
    &.hdm-rank--3 { background: #a07040; color: #fff; border-color: #7a5530; }
}

.hdm-player {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.hdm-name {
    font-weight: 600;
    font-size: var(--fs-sm);
    color: var(--c-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    .hdm-row--winner & {
        font-family: var(--font-display);
        font-size: var(--fs-md);
        color: var(--c-accent);
        letter-spacing: 0.02em;
    }
}

.hdm-bar-wrap {
    height: 3px;
    background: color-mix(in srgb, var(--c-border) 50%, transparent);
    border-radius: 2px;
    overflow: hidden;
}

.hdm-bar {
    height: 100%;
    border-radius: 2px;
    background: var(--c-accent);
    /* JS-driven: starts at width:0, RAF sets to data-pct% to trigger this */
    transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Server-rendered bars: animate via CSS, width set as custom property */
@keyframes hdm-bar-in {
    from { width: 0 }
    to   { width: var(--hdm-w, 100%) }
}

.hdm-bar--server {
    animation: hdm-bar-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.3s;
}

.hdm-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.hdm-dart-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 20px;
    padding: 0 6px;
    background: var(--c-dart-bg, #1a1a1a);
    color: var(--c-dart-number, #f0e8d0);
    font-family: var(--font-display);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    border-radius: 4px;
}

.hdm-time {
    font-size: 0.7rem;
    color: var(--c-text-muted);
    white-space: nowrap;
}

.hdm-time--winner {
    color: var(--c-accent);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    letter-spacing: 0.06em;
}

.hdm-duration {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    font-size: var(--fs-xs, 0.75rem);
    color: var(--c-text-muted);
    padding: var(--space-xs) var(--space-md);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    background: var(--c-surface-raised);
    align-self: center;
}

/* ./pages/home.css */
.home {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    padding: var(--space-xl) var(--space-md);

    & .home__hero {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-lg);
        text-align: center;
    }

    & .home__actions {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        width: 100%;
        max-width: 280px;
    }

    & .home__title {
        font-size: var(--fs-3xl);
        color: var(--c-text);
    }

    /* Keywords of the H1 ("Darts Scoreboard"): smaller than the app name, on their own line */
    & .home__title-keywords {
        display: block;
        font-size: var(--fs-md);
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--c-text-muted);
    }

    & .home__subtitle {
        font-size: var(--fs-md);
        color: var(--c-text-muted);
        max-width: 340px;
    }

    & .home__benefits {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-sm);
        max-width: 520px;
        margin-top: calc(var(--space-sm) * -1);
        list-style: none;

        & li {
            padding: 6px 10px;
            border: 1px solid color-mix(in srgb, var(--c-border) 70%, transparent);
            border-radius: var(--radius-sm);
            background: color-mix(in srgb, var(--c-surface) 82%, transparent);
            color: var(--c-text-muted);
            font-size: var(--fs-sm);
            font-weight: 600;
            box-shadow: var(--shadow-sm);
        }
    }

    & .home__section-title {
        font-size: var(--fs-lg);
        margin-bottom: var(--space-md);
    }

    & .home__active-games {
        width: 100%;
    }

    & .home__about {
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: var(--space-xl);
    }

    & .home__share {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-md);
        padding: var(--space-xl) var(--space-md);
        border-top: 1px solid var(--c-border);
        text-align: center;
    }

    & .home__share-title {
        font-size: var(--fs-md);
        color: var(--c-text-muted);
    }

    & .home__flyer {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-md);
        padding: var(--space-xl) var(--space-md);
        border-top: 1px solid var(--c-border);
        text-align: center;
    }

    /* A long label (French, Spanish) wraps inside the button instead of sticking out of a 360px screen */
    & .home__flyer .btn {
        white-space: normal;
        max-width: 100%;
    }

    & .home__flyer-title {
        font-size: var(--fs-md);
        color: var(--c-text-muted);
    }

    & .home__flyer-hint {
        font-size: var(--fs-sm);
        color: var(--c-text-muted);
        margin: 0;
    }

    & .home__donate {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-md);
        padding: var(--space-xl) var(--space-md);
        border-top: 1px solid var(--c-border);
        text-align: center;
    }

    & .home__donate-title {
        font-size: var(--fs-md);
        color: var(--c-text-muted);
    }
}

/* ── About: what is killer darts ── */
.about-what {
    border: 2px solid var(--c-border);
    border-left: 4px solid var(--c-accent);
    border-radius: var(--radius-md);
    background: var(--c-surface);
    padding: var(--space-lg);

    & .about-what__title {
        font-family: var(--font-display);
        font-size: var(--fs-lg);
        color: var(--c-text);
        margin-bottom: var(--space-sm);
    }

    & .about-what__body {
        font-size: var(--fs-sm);
        color: var(--c-text-muted);
        line-height: 1.7;

        & strong {
            color: var(--c-text);
            font-weight: 600;
        }
    }
}

/* ── About: how it works ── */
.about-how {
    & .about-how__title {
        font-family: var(--font-display);
        font-size: var(--fs-md);
        color: var(--c-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-size: var(--fs-xs, 0.75rem);
        margin-bottom: var(--space-md);
        text-align: center;
    }

    & .about-how__steps {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-sm);
        list-style: none;
        padding: 0;
        margin: 0;
        counter-reset: steps;

        @media (max-width: 480px) {
            grid-template-columns: 1fr;
        }
    }
}

.about-step {
    counter-increment: steps;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-sm);
    background: var(--c-surface);
    border: 2px solid var(--c-border);
    border-radius: var(--radius-md);
    transition: border-color 0.2s, transform 0.2s;

    &::before {
        content: counter(steps);
        position: absolute;
        top: var(--space-xs);
        right: var(--space-sm);
        font-size: var(--fs-xs, 0.7rem);
        font-family: var(--font-display);
        font-weight: 700;
        color: var(--c-accent);
        opacity: 0.8;
        line-height: 1;
    }

    &:hover {
        border-color: var(--c-accent);
        transform: translateY(-2px);
    }

    & .about-step__icon {
        font-size: 2rem;
        line-height: 1;
    }

    & .about-step__title {
        font-family: var(--font-display);
        font-size: var(--fs-sm);
        color: var(--c-text);
        font-weight: 700;
        line-height: 1.2;
    }

    & .about-step__body {
        font-size: var(--fs-xs, 0.75rem);
        color: var(--c-text-muted);
        line-height: 1.5;
    }
}

/* ── Recent games history ── */
.home__history {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;

    & .home__section-title {
        font-family: var(--font-display);
        font-size: var(--fs-md);
        color: var(--c-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-size: var(--fs-xs, 0.75rem);
        margin-bottom: var(--space-md);
        text-align: center;
    }
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.history-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    width: 100%;
    text-align: left;
    cursor: pointer;
    color: var(--c-text);
    transition: border-color var(--transition), transform var(--transition);

    &:hover {
        border-color: var(--c-accent);
        transform: translateY(-1px);
    }

    & .history-card__top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-sm);
    }

    & .history-card__winner {
        font-weight: 700;
        font-size: var(--fs-sm);
        color: var(--c-accent);
    }

    & .history-card__date {
        font-size: var(--fs-xs, 0.75rem);
        color: var(--c-text-muted);
        white-space: nowrap;
    }

    & .history-card__players {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-xs);
    }
}

/* ── Player chips inside history cards ── */
.history-player {
    font-size: var(--fs-xs, 0.75rem);
    color: var(--c-text);
    background: var(--c-surface-raised);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    padding: 1px 6px;
}

.history-player.history-player--eliminated {
    opacity: 0.45;
    text-decoration: line-through;
}

/* ── History detail modal ── */
.history-detail-modal {
    border: 2px solid var(--c-border);
    border-radius: var(--radius-lg);
    background: var(--c-surface);
    color: var(--c-text);
    padding: 0;
    max-width: min(420px, calc(100vw - 2rem));
    width: 100%;
    margin: auto;

    &::backdrop {
        background: rgba(0, 0, 0, 0.65);
        backdrop-filter: blur(3px);
    }

    & .history-detail-modal__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-md) var(--space-lg);
        border-bottom: 1px solid var(--c-border);
        gap: var(--space-md);
        background: color-mix(in srgb, var(--c-accent) 8%, var(--c-surface));
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    & .history-detail__header-winner {
        font-family: var(--font-display);
        font-size: var(--fs-xl);
        color: var(--c-accent);
        letter-spacing: 0.03em;
    }

    & .history-detail__header-date {
        font-size: var(--fs-xs, 0.75rem);
        color: var(--c-text-muted);
        margin-top: 2px;
    }

    & .history-detail-modal__body {
        padding: var(--space-md) var(--space-lg) var(--space-lg);
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
    }
}

.game-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.game-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-md);
    background: var(--c-surface);
    border: 2px solid var(--c-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--c-text);
    transition: border-color var(--transition), box-shadow var(--transition);

    &:hover {
        border-color: var(--c-accent);
        box-shadow: var(--shadow-sm);
        text-decoration: none;
    }

    & .game-card__players {
        font-weight: 600;
        font-size: var(--fs-md);
    }

    & .game-card__meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: var(--fs-sm);
        color: var(--c-text-muted);
    }

    & .game-card__status {
        text-transform: capitalize;
        font-weight: 500;

        &.game-card__status--active          { color: var(--c-success); }
        &.game-card__status--setup           { color: var(--c-text-muted); }
        &.game-card__status--number_assignment { color: var(--c-accent); }
    }
}

/* Recorded demo game */
.demo {
    width: 100%;
    max-width: 560px;
    margin: 0 auto var(--space-xl);
    text-align: center;

    /* On a large screen the video leaves the narrow column: the two phones need the width to be readable */
    @media (min-width: 900px) {
        width: min(880px, calc(100vw - 4rem));
        max-width: none;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }

    & .demo__title {
        font-size: var(--fs-lg);
        margin-bottom: var(--space-xs);
    }

    & .demo__lead {
        color: var(--c-text-muted);
        margin: 0 auto var(--space-md);
    }

    & .demo__video {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        background: #120b05;
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
    }
}

/* ./pages/setup.css */
.page-setup {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding-bottom: var(--space-xl);
}

.game-setup {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding: var(--space-md);

    & .game-setup__roster {
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
    }

    & .game-setup__empty {
        text-align: center;
        color: var(--c-text-muted);
        padding: var(--space-lg);
        border: 2px dashed var(--c-border);
        border-radius: var(--radius-md);
    }

    /* The shuffle button acts on the list above it, so it sits with the count of that list */
    & .game-setup__roster-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-sm);
        min-height: 2.5rem;
    }

    & .game-setup__shuffle {
        min-height: 2.5rem;
        display: inline-flex;
        align-items: center;
        gap: var(--space-xs);
    }

    & .game-setup__shuffle[hidden] {
        display: none;
    }

    & .game-setup__count {
        margin-left: auto;
        font-size: var(--fs-sm);
        color: var(--c-text-muted);
        text-align: right;
    }

    & .game-setup__add-form {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
    }

    & .game-setup__actions {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-sm);
    }

    & .game-setup__start-row {
        display: flex;
        gap: var(--space-sm);
        width: 100%;

        & .btn--success {
            flex: 1;
        }
    }

    & .game-setup__rule {
        border: 0;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        min-width: 0;
    }

    & .game-setup__rule-title {
        font-weight: 600;
        padding: 0;
        margin-bottom: var(--space-sm);
    }

    /* Three pills; the radio itself is hidden, the pill shows the choice */
    & .game-setup__rule-options {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-sm);
    }

    & .rule-option {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: var(--space-xs);
        min-height: 2.75rem;
        padding: 0 var(--space-md);
        border: 2px solid var(--c-border);
        border-radius: 999px;
        background: var(--c-surface);
        font-weight: 600;
        cursor: pointer;
        transition: background var(--transition), border-color var(--transition), color var(--transition);

        & > input[type="radio"] {
            position: absolute;
            inset: 0;
            opacity: 0;
            margin: 0;
            cursor: pointer;
        }

        & small {
            font-weight: 400;
            color: var(--c-text-muted);
        }

        &:has(> input[type="radio"]:checked) {
            background: var(--c-accent);
            border-color: var(--c-accent);
            color: var(--c-surface);

            & small {
                color: inherit;
                opacity: 0.85;
            }
        }

        &:has(> input[type="radio"]:focus-visible) {
            outline: 3px solid var(--c-accent);
            outline-offset: 2px;
        }
    }

    /* The number of "Other" only shows when it is chosen, and stays small */
    & .input--number {
        display: none;
        width: 3.25rem;
        padding: 2px var(--space-xs);
        margin-right: calc(var(--space-sm) * -1 + 2px);
        border-radius: 999px;
        text-align: center;
        font-weight: 700;
        position: relative;
        z-index: 1;
    }

    & .rule-option:has(> input[type="radio"]:checked) .input--number {
        display: inline-block;
    }

    & .game-setup__error {
        margin: 0;
        color: var(--c-danger);
        font-size: var(--fs-sm);
        font-weight: 600;
        text-align: center;
    }

    & .input--number.is-invalid {
        border-color: var(--c-danger);
        outline: 2px solid var(--c-danger);
    }

    & .game-setup__hint {
        color: var(--c-text-muted);
        font-size: var(--fs-sm);
        text-align: center;
    }

    /* The button that opens the camera, under the field where names are typed */
    & .game-setup__scan {
        display: flex;
        justify-content: center;
    }

    /* A player who was found by scanning a code: the game will be in their history */
    & .player-list__linked {
        margin-left: auto;
        margin-right: var(--space-sm);
        padding: 2px var(--space-sm);
        border: 1px solid var(--c-border);
        border-radius: 999px;
        font-size: var(--fs-sm);
        color: var(--c-text-muted);
    }
}

/* ── The camera dialog ── */
.scan-dialog {
    /* the site resets margins to 0, which also removes the automatic centring of a modal dialog */
    margin: auto;
    width: min(92vw, 28rem);
    max-height: 94vh;
    overflow: auto;
    padding: var(--space-md);
    border: 2px solid var(--c-border);
    border-radius: var(--radius-md);
    background: var(--c-surface);
    color: var(--c-text);

    &::backdrop {
        background: rgb(0 0 0 / 0.7);
    }

    &[open] {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
    }

    & .scan-dialog__title {
        margin: 0;
        font-size: var(--fs-lg, 1.25rem);
    }

    & .scan-dialog__video {
        width: 100%;
        aspect-ratio: 1;
        object-fit: cover;
        border-radius: var(--radius-sm);
        background: #000;
    }

    & .scan-dialog__status {
        margin: 0;
        min-height: 2.5em;
        text-align: center;
        font-size: var(--fs-sm);
        color: var(--c-text-muted);

        &[data-kind="ok"] {
            color: var(--c-success, #2e7d32);
            font-weight: 700;
        }

        &[data-kind="error"] {
            color: var(--c-danger);
            font-weight: 700;
        }
    }

    & .scan-dialog__list {
        margin: 0;
        padding-left: 1.25rem;
        font-weight: 600;
    }
}

/* ── The players met before, proposed while a name is typed ── */
.game-setup .suggest {
    list-style: none;
    margin: var(--space-xs) 0 0;
    padding: 0;
    max-height: 16rem;
    overflow-y: auto;
    border: 2px solid var(--c-border);
    border-radius: var(--radius-md);
    background: var(--c-surface);

    & .suggest__item {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        min-height: 2.75rem;
        padding: 0 var(--space-md);
        cursor: pointer;

        &:not(:last-child) {
            border-bottom: 1px solid var(--c-border);
        }

        &.suggest__item--active,
        &:hover {
            background: var(--c-surface-raised);
        }
    }

    & .suggest__name {
        font-weight: 600;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    & .suggest__meta {
        margin-left: auto;
        font-size: var(--fs-sm);
        color: var(--c-text-muted);
        white-space: nowrap;
    }

    & .player-list__linked {
        margin: 0;
    }
}

/* ./pages/game.css */
.page-assign {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding-bottom: var(--space-xl);

    & .page-header {
        justify-content: center;
    }
}

.game-assign {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);

    & .game-assign__prompt {
        text-align: center;
        padding: var(--space-md) var(--space-md) 0;
    }

    & .game-assign__instruction {
        font-size: var(--fs-sm);
        color: var(--c-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-weight: 600;
    }

    & .game-assign__player-name {
        font-size: var(--fs-2xl);
        font-family: var(--font-display);
        font-weight: bold;
        color: var(--c-accent);
        margin: var(--space-xs) 0;
    }

    & .game-assign__hint {
        font-size: var(--fs-sm);
        color: var(--c-text-muted);
    }

    & .game-assign__board {
        padding: 0 var(--space-sm);
    }

    & .game-assign__progress {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-sm);
        padding: 0 var(--space-md);
    }

    & .game-assign__undo {
        display: flex;
        justify-content: center;
        padding: 0 var(--space-md);
    }

    & .game-assign__confirm {
        text-align: center;
        padding: var(--space-md) var(--space-md) 0;
    }

    & .game-assign__confirm-title {
        font-size: var(--fs-xl);
        font-family: var(--font-display);
        color: var(--c-success);
        font-weight: bold;
    }

    & .game-assign__confirm-hint {
        font-size: var(--fs-sm);
        color: var(--c-text-muted);
        margin-top: var(--space-xs);
    }

    & .game-assign__confirm-actions {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-sm);
        padding: 0 var(--space-md);
    }
}

.assign-badge {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    border: 2px solid var(--c-border);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    background: var(--c-surface);
    transition: border-color var(--transition), background var(--transition);

    & .assign-badge__name {
        font-weight: 600;
    }

    & .assign-badge__number {
        font-weight: 700;
        color: var(--c-accent);
    }

    & .assign-badge__pending {
        color: var(--c-text-muted);
    }

    &.assign-badge--done {
        border-color: var(--c-success);
        background: var(--c-surface-raised);

        & .assign-badge__number {
            color: var(--c-success);
        }
    }
}

/* ── Winner bottom sheet ── */
.winner-sheet {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: flex-end;
    animation: winner-backdrop-in 0.2s ease-out both;

    & .winner-sheet__panel {
        background: var(--c-surface);
        border-top: 3px solid var(--c-success);
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        width: 100%;
        padding: var(--space-xl) var(--space-lg) calc(var(--space-xl) + env(safe-area-inset-bottom, 0px));
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-md);
        text-align: center;
        animation: winner-sheet-up 0.25s ease-out both;
    }

    & .winner-sheet__crown {
        font-size: 3rem;
        line-height: 1;
    }

    & .winner-sheet__name {
        font-size: var(--fs-2xl);
        font-family: var(--font-display);
        font-weight: bold;
        color: var(--c-success);
    }

    & .winner-sheet__hint {
        font-size: var(--fs-sm);
        color: var(--c-text-muted);
    }
}

@keyframes winner-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes winner-sheet-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* ── Cancel bottom sheet ── */
.cancel-sheet {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: flex-end;
    animation: winner-backdrop-in 0.2s ease-out both;

    & .cancel-sheet__panel {
        background: var(--c-surface);
        border-top: 3px solid var(--c-danger);
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
        padding: var(--space-lg);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-md);
        text-align: center;
        animation: winner-sheet-up 0.25s ease-out both;
    }

    & .cancel-sheet__icon {
        font-size: 2.5rem;
        line-height: 1;
    }

    & .cancel-sheet__title {
        font-size: var(--fs-lg);
        font-weight: 700;
        font-family: var(--font-display);
        color: var(--c-danger);
    }

    & .cancel-sheet__hint {
        font-size: var(--fs-sm);
        color: var(--c-text-muted);
    }
}

/* ── Cancel button + footer ── */
.game-board__footer {
    display: flex;
    justify-content: center;
    padding: var(--space-lg) var(--space-md) var(--space-md);
}

.game-board__cancel-btn {
    color: var(--c-text-muted);
    font-size: var(--fs-sm);

    &:hover {
        color: var(--c-danger);
    }
}

/* ── Cancelled page ── */
.page-cancelled {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-xl) var(--space-md);
    min-height: 60dvh;
}

.cancelled-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
    text-align: center;
    max-width: 360px;
    width: 100%;

    & .cancelled-card__icon {
        font-size: 4rem;
        line-height: 1;
    }

    & .cancelled-card__title {
        font-size: var(--fs-2xl);
        font-family: var(--font-display);
        font-weight: bold;
    }

    & .cancelled-card__subtitle {
        color: var(--c-text-muted);
        font-size: var(--fs-base);
    }
}

/* ── Share FAB inside sticky dartboard ── */
.share-fab {
    position: absolute;
    bottom: var(--space-sm);
    right: var(--space-md);
    background: var(--c-surface-raised);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    color: var(--c-text);
    font-size: var(--fs-sm);
    font-weight: 600;
    padding: var(--space-xs) var(--space-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color var(--transition), color var(--transition);

    &:hover {
        border-color: var(--c-accent);
        color: var(--c-accent);
    }
}

/* ── Game board ── */
.page-play {
    padding-bottom: var(--space-xl);
    overscroll-behavior: none;
}

.game-board {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);

    & .game-board__dartboard {
        position: sticky;
        top: 57px;
        z-index: 10;
        background: var(--c-bg);
        padding: var(--space-sm) 0;
        border-bottom: 1px solid var(--c-border);
        display: flex;
        align-items: center;
    }

    & .game-board__rule {
        margin: 0;
        color: var(--c-text-muted);
        font-size: var(--fs-sm);
        text-align: center;
    }

    & .game-board__players {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        padding: var(--space-sm) var(--space-md);
    }
}

/* ./pages/winner.css */
.page-winner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100dvh - 57px);
    padding: var(--space-md);
}

.winner-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
    text-align: center;
    background: var(--c-surface);
    border: 2px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl) var(--space-lg);
    width: 100%;
    max-width: 380px;
    box-shadow: var(--shadow-lg);

    & .winner-card__trophy {
        font-size: 4rem;
        animation: bounce 1s ease-in-out infinite alternate;
    }

    & .winner-card__title {
        font-size: var(--fs-xl);
        color: var(--c-text-muted);
    }

    & .winner-card__name {
        font-family: var(--font-display);
        font-size: var(--fs-3xl);
        color: var(--c-accent);
        font-weight: bold;
    }

    & .winner-card__subtitle {
        font-size: var(--fs-sm);
        color: var(--c-text-muted);
    }

    & .winner-card__donate-hint {
        margin: var(--space-sm) 0 0;
        text-align: center;
        font-size: 0.875rem;
        color: var(--c-text-muted);
    }

    & .winner-card__actions {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        width: 100%;
    }
}


@keyframes bounce {
    from { transform: translateY(0); }
    to   { transform: translateY(-10px); }
}

/* ./pages/static.css */
.static-page {
    padding: var(--space-xl) var(--space-md) var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.static-page__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.static-page__title {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    color: var(--c-text);
    line-height: 1.1;
    letter-spacing: 0.02em;
}

.static-page__lead {
    font-size: var(--fs-base);
    color: var(--c-text-muted);
    line-height: 1.7;
}

/* ── Content sections ── */
.static-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.static-section__title {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    color: var(--c-text);
    letter-spacing: 0.03em;
    border-left: 3px solid var(--c-accent);
    padding-left: var(--space-sm);
}

.static-section__body {
    font-size: var(--fs-base);
    color: var(--c-text);
    line-height: 1.7;

    & strong {
        color: var(--c-accent);
        font-weight: 700;
    }

    & em {
        font-style: italic;
    }
}

/* ── Numbered steps ── */
.static-steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    counter-reset: steps;
}

.static-step {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
    counter-increment: steps;

    &::before {
        content: counter(steps);
        flex-shrink: 0;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: var(--c-accent);
        color: var(--c-text-on-dark);
        font-family: var(--font-display);
        font-size: var(--fs-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 2px;
    }
}

.static-step__title {
    font-weight: 700;
    color: var(--c-text);
    display: block;
    margin-bottom: 2px;
}

.static-step__body {
    font-size: var(--fs-base);
    color: var(--c-text);
    line-height: 1.6;
}

/* ── Tip cards ── */
.static-tips {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.static-tip {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-left: 3px solid var(--c-accent);
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-md);
}

.static-tip__title {
    font-weight: 700;
    font-size: var(--fs-sm);
    color: var(--c-text);
    margin-bottom: 2px;
}

.static-tip__body {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    line-height: 1.6;
}

/* ── FAQ ── */
.static-faq {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.static-faq__item {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    background: var(--c-surface);
    padding: var(--space-md);
}

.static-faq__q {
    font-weight: 700;
    font-size: var(--fs-sm);
    color: var(--c-text);
    margin-bottom: var(--space-xs);
}

.static-faq__a {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    line-height: 1.6;
}

/* ── CTA ── */
.static-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-md);
    text-align: center;
    border-top: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    background: var(--c-surface);
}

.static-cta__title {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    color: var(--c-text);
}

.static-cta__sub {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}

/* ── About: feature grid ── */
.static-features {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.static-feature {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
}

.static-feature__icon {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
}

.static-feature__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.static-feature__title {
    font-weight: 700;
    font-size: var(--fs-sm);
    color: var(--c-text);
}

.static-feature__body {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    line-height: 1.5;
}

/* Screenshots of the demo game: wider than the text column on a large screen, so the phones are readable */
.static-section:has(> .demo-stills) {
    @media (min-width: 900px) {
        width: min(1000px, calc(100vw - 4rem));
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
}

.demo-stills {
    list-style: none;
    padding: 0;
    margin: var(--space-md) 0 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);

    @media (min-width: 720px) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    & figure {
        margin: 0;
        text-align: center;
    }

    & img {
        display: block;
        width: 100%;
        height: auto;
        border-radius: var(--radius-md);
        border: 2px solid var(--c-border);
        box-shadow: var(--shadow-sm);
    }

    & figcaption {
        margin-top: var(--space-xs);
        font-size: var(--fs-sm);
        color: var(--c-text-muted);
    }
}

/* The screenshot of the current theme (the JS sets data-theme; without it the system preference decides) */
.demo-stills img.demo-stills__dark { display: none; }

[data-theme="dark"] .demo-stills img.demo-stills__light { display: none; }
[data-theme="dark"] .demo-stills img.demo-stills__dark { display: block; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .demo-stills img.demo-stills__light { display: none; }
    :root:not([data-theme="light"]) .demo-stills img.demo-stills__dark { display: block; }
}

/* A game turn by turn */
.rules-example__scroll {
    overflow-x: auto;
    margin-top: var(--space-md);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
}

.rules-example {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: var(--fs-sm);

    /* Fits a phone: the three scores stay in view, the text wraps */
    & thead th:nth-child(1) { width: 27%; }
    & thead th:nth-child(2) { width: 33%; }
    & thead th:nth-child(n+3) { width: 13.3%; }

    @media (max-width: 520px) {
        font-size: 0.75rem;

        & th,
        & td { padding: var(--space-xs); }

        & thead th small { display: block; font-weight: 400; }
    }

    & th,
    & td {
        padding: var(--space-xs) var(--space-sm);
        text-align: left;
        vertical-align: top;
        border-bottom: 1px solid var(--c-border);
    }

    & thead th {
        background: var(--c-surface-raised);
        font-size: var(--fs-sm);
    }

    & tbody th {
        font-weight: 700;
    }

    & .rules-example__score {
        text-align: center;
        font-variant-numeric: tabular-nums;
    }

    & .rules-example__score--killer { color: var(--c-accent); font-weight: 700; }
    & .rules-example__score--out { color: var(--c-text-muted); text-decoration: line-through; }

    & .rules-example__start th,
    & .rules-example__start td { background: color-mix(in srgb, var(--c-surface-raised) 60%, transparent); font-style: italic; }

    & tbody tr:last-child th,
    & tbody tr:last-child td { border-bottom: 0; }
}

/* Optional player profile */
.account {
    & .account__form {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        max-width: 26rem;
    }

    & .account__note,
    & .game-setup__role-hint {
        font-size: var(--fs-sm);
        color: var(--c-text-muted);
    }

    & .account__ok { color: var(--c-success); font-weight: 600; }
    /* The confirmation of a deletion: a box in the colour of the danger button, not the browser's own */
    & .account__check {
        display: flex;
        gap: var(--space-sm);
        align-items: center;
        min-height: 2.75rem;
        font-size: var(--fs-sm);
        cursor: pointer;

        & input[type="checkbox"] {
            appearance: none;
            flex: none;
            display: grid;
            place-content: center;
            width: 1.5rem;
            height: 1.5rem;
            margin: 0;
            border: 2px solid var(--check-color, var(--c-danger));
            border-radius: 6px;
            background: var(--c-surface);
            cursor: pointer;
            transition: background var(--transition);

            &::after {
                content: '';
                width: 0.8rem;
                height: 0.8rem;
                background: var(--c-surface);
                clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
                transform: scale(0);
                transition: transform var(--transition);
            }

            &:checked {
                background: var(--check-color, var(--c-danger));
            }

            &:checked::after {
                transform: scale(1);
            }

            &:focus-visible {
                outline: 3px solid var(--check-color, var(--c-danger));
                outline-offset: 2px;
            }
        }

        &.account__check--neutral {
            --check-color: var(--c-accent);
        }
    }
}

.account-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: var(--space-sm);
    list-style: none;
    padding: 0;
    margin: var(--space-sm) 0 0;

    & li {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: var(--space-sm);
        border: 2px solid var(--c-border);
        border-radius: var(--radius-md);
        background: var(--c-surface);
        text-align: center;
    }

    & strong { font-size: var(--fs-xl); font-family: var(--font-display); color: var(--c-accent); }
    & span { font-size: var(--fs-sm); color: var(--c-text-muted); }
}

.account-list {
    list-style: none;
    padding: 0;
    margin: var(--space-sm) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);

    & li { display: flex; justify-content: space-between; gap: var(--space-sm); padding: var(--space-xs) 0; border-bottom: 1px solid var(--c-border); }
    & .account-list__meta { color: var(--c-text-muted); font-size: var(--fs-sm); }
}

.account-table-wrap {
    overflow-x: auto;
    margin-top: var(--space-sm);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
}

.account-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);

    & th,
    & td { padding: var(--space-xs) var(--space-sm); text-align: left; border-bottom: 1px solid var(--c-border); }
    & thead th { background: var(--c-surface-raised); }
    & tbody tr:last-child th,
    & tbody tr:last-child td { border-bottom: 0; }
}

.account-code canvas {
    width: 200px;
    height: 200px;
    background: #fff;
    padding: 6px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-border);
}

/* ./desktop.css */
/*
 * Large screens (the app is designed for a phone held in one hand, so everything below 1000px is untouched).
 * Kept in one file on purpose: it is the part to iterate on, or to remove.
 */
/* Header links are for large screens only (on a phone they are in the footer) */
.app-header__link {
    display: none;
}

@media (min-width: 1000px) {
    /* Header and footer line up with the content */
    .app-header,
    .app-footer {
        padding-inline: max(var(--space-lg), calc((100vw - 1120px) / 2 + var(--space-lg)));
    }

    .app-header {
        padding-block: var(--space-md);

        & .app-logo__name {
            font-size: var(--fs-xl);
        }
    }

    .app-header__link {
        display: inline-flex;
        align-items: center;
        padding: var(--space-xs) var(--space-sm);
        border-radius: var(--radius-sm);
        color: var(--c-text);
        font-weight: 600;
        text-decoration: none;
        margin-right: var(--space-sm);

        &:hover {
            color: var(--c-accent);
            background: color-mix(in srgb, var(--c-accent) 12%, transparent);
        }
    }

    .app-footer {
        flex-direction: row;
        justify-content: space-between;
        padding-block: var(--space-lg);
    }

    .app-main {
        max-width: 1120px;
    }

    /* Text pages and forms stay in a comfortable column */
    .page-setup,
    .page-cancelled {
        max-width: 640px;
        margin-inline: auto;
    }

    .page-assign {
        max-width: 760px;
        margin-inline: auto;
    }

    .static-page {
        max-width: 760px;
        margin-inline: auto;
    }

    /* Winner: the result on the left, the standings on the right, the buttons in a row below */
    .winner-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
        column-gap: var(--space-xl);
        row-gap: var(--space-sm);
        align-items: center;
        max-width: 920px;
        padding: var(--space-xl);

        & > :not(.hdm-rows):not(.winner-card__actions) {
            grid-column: 1;
        }

        & .hdm-rows {
            grid-column: 2;
            grid-row: 1 / span 6;
        }

        & .winner-card__actions {
            grid-column: 1 / -1;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            gap: var(--space-md);
            margin-top: var(--space-md);

            & .btn {
                width: auto;
                min-width: 12rem;
            }

            & form {
                display: contents;
            }

            & .winner-card__donate-hint {
                flex-basis: 100%;
                order: -1;
            }
        }
    }

    /* The confirmation sheets are bottom sheets on a phone: on a large screen they are cards in the middle */
    .winner-sheet,
    .cancel-sheet {
        align-items: center;
        justify-content: center;

        & .winner-sheet__panel,
        & .cancel-sheet__panel {
            width: 100%;
            max-width: 30rem;
            border: 3px solid var(--c-success);
            border-radius: var(--radius-lg);
            padding-bottom: var(--space-xl);
            animation: winner-backdrop-in 0.2s ease-out both;
        }

        & .cancel-sheet__panel {
            border-color: var(--c-danger);
        }
    }

    /* A little larger text on text pages */
    .static-section__body,
    .static-page__lead {
        font-size: 1.0625rem;
        line-height: 1.7;
    }

    /* ── Home: the pitch on the left, the demo next to it, then the rest across the page ── */
    .home {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: var(--space-xl) var(--space-xl);
        align-items: center;
        padding: var(--space-2xl, 3rem) var(--space-lg);

        /* Explicit rows: the recent games (only for returning visitors) sit between the hero and the demo in the
           page, and without a row of their own the demo was pushed below them */
        & .home__hero {
            grid-row: 1;
            grid-column: 1 / 4;
            align-items: flex-start;
            text-align: left;
        }

        & .home__title {
            font-size: 4rem;
            line-height: 1.05;
        }

        & .home__title-keywords {
            font-size: var(--fs-lg);
        }

        & .home__subtitle {
            font-size: var(--fs-lg);
            max-width: 26rem;
        }

        & .home__benefits {
            justify-content: flex-start;
            max-width: none;
        }

        & .home__actions {
            max-width: 22rem;
        }

        & .demo {
            grid-row: 1;
            grid-column: 4 / 7;
            width: 100%;
            max-width: none;
            margin: 0;
            position: static;
            transform: none;
        }

        & .home__history {
            grid-row: 2;
            grid-column: 1 / -1;
            max-width: none;
        }

        & .home__about {
            grid-column: 1 / -1;
            max-width: none;
        }

        & .about-how__steps {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        & .home__share,
        & .home__flyer,
        & .home__donate {
            grid-column: span 2;
            height: 100%;
            justify-content: center;
            border-top: 1px solid var(--c-border);
        }
    }

    /* ── Game: the board on the left (it stays in view), the players on the right ── */
    .page-play .game-board {
        display: grid;
        grid-template-columns: minmax(0, 36rem) minmax(0, 26rem);
        grid-template-rows: auto 1fr;
        justify-content: center;
        gap: var(--space-lg) var(--space-xl);
        align-items: start;
        padding: var(--space-md) var(--space-lg);

        & .game-board__dartboard {
            grid-column: 1;
            grid-row: 1 / span 2;
            top: 73px;
            border-bottom: 0;
            background: transparent;
            justify-content: center;

            & > :not(.share-fab) {
                max-width: min(100%, calc(100dvh - 11rem));
            }
        }

        & .game-board__players {
            grid-column: 2;
            padding: 0;
        }

        & .game-board__footer {
            grid-column: 2;
        }
    }
}

/* Tablets: the phone layout, a little wider */
@media (min-width: 700px) and (max-width: 999px) {
    .app-main {
        max-width: 640px;
    }
}