/* The redesign (academy.css) carried to the site's other pages: the frame pieces every page shares (toasts, the
   seated banner, the reconnecting overlay, the message boxes, spinners), the sign-in forms and Contact, the reading
   pages (Help, Duplicate rules, errors), the profile and the admin page. Tokens and buttons come from academy.css. */

:root {
    /* Errors and success, for forms, alerts and toasts */
    --ac-bad: #ff8787;
    --ac-bad-fill: #e03131;
    --ac-bad-wash: rgba(255, 107, 107, 0.12);
    --ac-bad-line: rgba(255, 107, 107, 0.5);
    --ac-go-wash: rgba(107, 214, 43, 0.12);
    --ac-go-line: rgba(107, 214, 43, 0.45);
    /* Replay Analysis grades, as round badges with their symbol */
    --ac-g-brilliant: #9a4dff;
    --ac-g-excellent: #1c7ed6;
    --ac-g-good: #2f9e44;
    --ac-g-deceptive: #e8a400;
    --ac-g-neutral: #5c636e;
    --ac-g-weak: #f76707;
    --ac-g-mistake: #e03131;
}

/* Any page built in the redesign under the sign-in layout: no felt behind it */
body:has(> #app > header + main > .ac) {
    background-image: none !important;
}

.ac-btn-block {
    width: 100%;
}

.ac-btn:disabled,
.ac-btn[aria-disabled="true"] {
    cursor: progress;
    opacity: 0.75;
    transform: none;
    box-shadow: 0 4px 0 var(--btn-edge);
}

.ac-btn-danger {
    --btn-bg: var(--ac-bad-fill);
    --btn-hover: #f03e3e;
    --btn-edge: #a51d1d;
    --btn-ink: #fff;
}

.ac-btn .spinner-border {
    width: 1.125rem;
    height: 1.125rem;
    border-width: 0.15em;
}

.ac-link {
    color: var(--ac-go) !important;
    font-weight: 600;
    text-decoration: underline !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    text-decoration-color: rgba(107, 214, 43, 0.45) !important;
    transition: text-decoration-color 0.15s;
}

    .ac-link:hover {
        text-decoration-color: currentColor !important;
    }

/* ---------------------------------------------------------------------------------------------------------------
   Frame pieces on every page
   --------------------------------------------------------------------------------------------------------------- */

/* Spinners: a ring in the Play green */
.content-load-spinner {
    width: 3.5rem;
    height: 3.5rem;
    border: 5px solid rgba(255, 255, 255, 0.16);
    border-top-color: var(--ac-go);
    animation-duration: 0.9s;
    animation-timing-function: linear;
}

.ac .content-load-spinner {
    margin-top: 4rem;
}

#toasts {
    font-family: var(--ac-font);
    bottom: 1.25rem;
}

.site-toast {
    gap: 0.875rem;
    padding: 0.75rem 0.75rem 0.75rem 0.875rem;
    border: 1px solid var(--ac-line-strong);
    border-radius: var(--ac-radius-sm);
    background-color: var(--ac-raised);
    color: var(--ac-text);
    font-weight: 600;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.45);
}

    .site-toast::before {
        content: "!";
        flex: none;
        display: grid;
        place-items: center;
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 50%;
        background-color: var(--ac-bad-fill);
        color: #fff;
        font-weight: 800;
        font-size: 0.875rem;
    }

    .site-toast .btn-close {
        flex: none;
        filter: invert(1) grayscale(1) brightness(1.6);
        opacity: 0.6;
    }

        .site-toast .btn-close:hover {
            opacity: 1;
        }

#seated-banner {
    gap: 0.375rem 1rem;
    padding: 0.5rem 1.25rem;
    border-bottom: 1px solid var(--ac-go-line);
    background-color: #1d2a14;
    color: var(--ac-text);
    font-family: var(--ac-font);
    font-weight: 600;
}

    #seated-banner::before {
        content: "";
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        background-color: var(--ac-go);
        box-shadow: 0 0 0 4px rgba(107, 214, 43, 0.2);
    }

#hub-reconnecting-overlay {
    background: rgba(10, 11, 13, 0.45);
}

.hub-reconnecting-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    border: 1px solid var(--ac-line-strong);
    border-radius: var(--ac-radius-sm);
    background-color: var(--ac-raised);
    color: var(--ac-text);
    font-family: var(--ac-font);
    font-weight: 700;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.45);
}

    .hub-reconnecting-banner::before {
        content: "";
        flex: none;
        width: 1.125rem;
        height: 1.125rem;
        border: 3px solid rgba(255, 255, 255, 0.18);
        border-top-color: var(--ac-go);
        border-radius: 50%;
        animation: spin 0.9s linear infinite;
    }

/* The message boxes: a floating dark panel, its title, its text, and its buttons as 3D buttons */
:is(#error-box, #game-notification-box, #confirmation-box) {
    overflow: hidden;
    border: 1px solid var(--ac-line-strong) !important;
    border-radius: var(--ac-radius) !important;
    background-color: var(--ac-surface) !important;
    color: var(--ac-text);
    font-family: var(--ac-font);
    box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.55);
}

#game-notification-box,
#confirmation-box {
    min-width: 16rem !important;
    max-width: min(22rem, calc(100vw - 2rem)) !important;
}

#error-box {
    width: min(22rem, calc(100vw - 2rem));
}

    :is(#error-box, #game-notification-box, #confirmation-box) > .card-header {
        padding: 1.125rem 1.25rem 0.25rem;
        border: 0;
        background: none !important;
        color: var(--ac-text) !important;
        font-size: 1.25rem;
        font-weight: 800;
        letter-spacing: -0.01em;
    }

    #error-box > .card-header {
        color: var(--ac-bad) !important;
    }

    :is(#error-box, #game-notification-box, #confirmation-box) :is(.card-body, .card-footer) {
        border: 0;
        background: none !important;
    }

    :is(#error-box, #game-notification-box, #confirmation-box) .card-body {
        padding: 0.5rem 1.25rem 0.25rem;
    }

        :is(#error-box, #game-notification-box, #confirmation-box) .card-body p {
            margin: 0;
            color: var(--ac-text-2) !important;
            font-size: 1rem;
            line-height: 1.5;
            text-align: center;
        }

        :is(#error-box, #game-notification-box, #confirmation-box) .card-body .fw-bold {
            font-weight: 500 !important;
        }

    :is(#error-box, #game-notification-box, #confirmation-box) .card-footer {
        padding: 1rem 1.25rem 1.375rem;
    }

    :is(#error-box, #game-notification-box, #confirmation-box) .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 2.75rem;
        min-width: 6rem;
        padding: 0.5rem 1.25rem;
        border: 0;
        border-radius: var(--ac-radius-sm);
        background-color: var(--ac-go);
        color: var(--ac-go-ink) !important;
        font-family: var(--ac-font);
        font-weight: 700;
        box-shadow: 0 4px 0 var(--ac-go-edge);
        transition: background-color 0.15s, transform 0.08s, box-shadow 0.08s;
    }

        :is(#error-box, #game-notification-box, #confirmation-box) .btn:hover {
            background-color: var(--ac-go-hover);
        }

        :is(#error-box, #game-notification-box, #confirmation-box) .btn:active {
            transform: translateY(4px);
            box-shadow: 0 0 0 var(--ac-go-edge);
        }

    #confirmation-box .btn-danger {
        background-color: var(--ac-raised);
        color: var(--ac-text) !important;
        box-shadow: 0 4px 0 var(--ac-edge);
    }

        #confirmation-box .btn-danger:hover {
            background-color: var(--ac-raised-hover);
        }

        #confirmation-box .btn-danger:active {
            box-shadow: 0 0 0 var(--ac-edge);
        }

    #confirmation-box .card-footer .row {
        --bs-gutter-x: 0.75rem;
    }

/* ---------------------------------------------------------------------------------------------------------------
   Forms: the sign-in pages and Contact
   --------------------------------------------------------------------------------------------------------------- */

.ac-auth {
    display: flex;
    justify-content: center;
    padding: 2.5rem 1.25rem 4rem !important;
}

@media (min-width: 768px) {
    .ac-auth {
        padding-top: 4.5rem !important;
    }
}

.ac-auth-col {
    width: 100%;
    max-width: 28rem;
}

.ac-auth-col-wide {
    max-width: 36rem;
}

.ac-auth-head {
    margin-bottom: 1.5rem;
}

    .ac-auth-head .ac-lede a {
        white-space: nowrap;
    }

/* Register / Log In: a two-way switch over the form */
.ac-seg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem;
    padding: 0.25rem;
    margin-bottom: 1.5rem;
    border-radius: var(--ac-radius-sm);
    background-color: var(--ac-bg);
    box-shadow: inset 0 0 0 1px var(--ac-line);
}

.ac-seg-item {
    display: grid;
    place-items: center;
    min-height: 2.5rem;
    border-radius: 9px;
    color: var(--ac-text-2) !important;
    font-weight: 700;
    font-size: 0.9375rem;
    transition: color 0.15s, background-color 0.15s;
}

    .ac-seg-item:hover {
        color: var(--ac-text) !important;
    }

    .ac-seg-item[aria-current="page"] {
        background-color: var(--ac-raised);
        color: var(--ac-text) !important;
        box-shadow: 0 2px 0 var(--ac-edge);
    }

.ac-form {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
    padding: 1.5rem;
}

@media (min-width: 576px) {
    .ac-form {
        padding: 2rem;
    }
}

.ac-form-title {
    font-size: 1.125rem !important;
    font-weight: 700;
}

.ac-form-note {
    margin: -0.75rem 0 0 !important;
    color: var(--ac-text-2);
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.5;
}

.ac-field {
    display: flex;
    flex-direction: column;
    gap: 0.4375rem;
}

    .ac-field label {
        color: var(--ac-text);
        font-size: 0.9375rem;
        font-weight: 600;
    }

.ac-field-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

    .ac-field-head a {
        color: var(--ac-text-2) !important;
        font-size: 0.875rem;
        font-weight: 600;
        transition: color 0.15s;
    }

        .ac-field-head a:hover {
            color: var(--ac-go) !important;
        }

.ac-input {
    display: block;
    width: 100%;
    min-height: 3rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--ac-line-strong);
    border-radius: var(--ac-radius-sm);
    background-color: var(--ac-bg);
    color: var(--ac-text);
    font-family: var(--ac-font);
    font-size: 1rem;
    line-height: 1.5;
    caret-color: var(--ac-go);
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .ac-input::placeholder {
        color: var(--ac-text-3);
    }

    .ac-input:hover {
        border-color: rgba(255, 255, 255, 0.24);
    }

    .ac-input:focus,
    .ac-input:focus-visible {
        outline: none;
        border-color: var(--ac-go);
        box-shadow: 0 0 0 3px rgba(107, 214, 43, 0.22);
    }

    .ac-input.input-validation-error {
        border-color: var(--ac-bad-line);
        background-color: rgba(255, 107, 107, 0.05);
    }

        .ac-input.input-validation-error:focus {
            border-color: var(--ac-bad);
            box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.22);
        }

textarea.ac-input {
    min-height: 9rem;
    resize: vertical;
}

    /* The browser's autofill keeps the dark field */
    .ac-input:-webkit-autofill {
        -webkit-text-fill-color: var(--ac-text);
        -webkit-box-shadow: 0 0 0 100px var(--ac-bg) inset;
        caret-color: var(--ac-go);
    }

/* A checkbox in the site's green */
.ac-check {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--ac-text-2);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
}

    .ac-check input,
    .ac input[type="checkbox"] {
        width: 1.125rem;
        height: 1.125rem;
        margin: 0;
        accent-color: var(--ac-go);
        cursor: pointer;
    }

/* Alerts: errors (the form's summary) and good news */
.ac-alert {
    padding: 0.875rem 1rem;
    border: 1px solid var(--ac-line-strong);
    border-radius: var(--ac-radius-sm);
    background-color: var(--ac-raised);
    color: var(--ac-text);
    font-size: 0.9375rem;
    line-height: 1.5;
}

    .ac-alert p {
        margin: 0;
    }

        .ac-alert p + p {
            margin-top: 0.25rem;
        }

.ac-alert-go {
    border-color: var(--ac-go-line);
    background-color: var(--ac-go-wash);
}

.ac-alert-bad {
    border-color: var(--ac-bad-line);
    background-color: var(--ac-bad-wash);
    color: var(--ac-text);
}

.ac .validation-summary-valid {
    display: none;
}

.ac .validation-summary-errors {
    color: var(--ac-text) !important;
}

    .ac .validation-summary-errors ul {
        margin: 0;
        padding-left: 1.125rem;
    }

    .ac .validation-summary-errors li::marker {
        color: var(--ac-bad);
    }

/* The reCAPTCHA widget keeps its own size */
.ac .g-recaptcha {
    min-height: 78px;
}

/* ---------------------------------------------------------------------------------------------------------------
   Reading pages: Help, Duplicate rules
   --------------------------------------------------------------------------------------------------------------- */

.ac-read {
    max-width: 52rem;
}

.ac-read-section + .ac-read-section {
    margin-top: 2.5rem;
}

.ac-read-section > .ac-h2 {
    margin-bottom: 1rem;
}

.ac-qa {
    padding: 1.5rem;
}

    .ac-qa + .ac-qa {
        margin-top: 1rem;
    }

    .ac-qa h3 {
        margin-bottom: 0.75rem !important;
        font-size: 1.1875rem;
        font-weight: 700;
        letter-spacing: -0.01em;
    }

.ac-prose {
    color: var(--ac-text-2);
    font-size: 1.0625rem;
    line-height: 1.65;
}

    .ac-prose > * + * {
        margin-top: 0.875rem !important;
    }

    .ac-prose b,
    .ac-prose strong {
        color: var(--ac-text);
        font-weight: 700;
    }

    .ac-prose ul {
        margin: 0;
        padding-left: 1.25rem;
    }

        .ac-prose ul li + li {
            margin-top: 0.375rem;
        }

        .ac-prose ul li::marker {
            color: var(--ac-go);
        }

/* A numbered list as round step numbers */
.ac-numbered {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: n;
}

    .ac-numbered li {
        display: flex;
        align-items: baseline;
        gap: 0.75rem;
        counter-increment: n;
    }

        .ac-numbered li + li {
            margin-top: 0.5rem;
        }

        .ac-numbered li::before {
            content: counter(n);
            flex: none;
            display: grid;
            place-items: center;
            width: 1.625rem;
            height: 1.625rem;
            border-radius: 50%;
            background-color: var(--ac-raised);
            color: var(--ac-text);
            font-size: 0.8125rem;
            font-weight: 700;
            transform: translateY(-0.0625rem);
        }

/* A table of figures */
.ac-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--ac-line);
    border-radius: var(--ac-radius-sm);
    background-color: var(--ac-bg);
}

.ac-data {
    width: 100%;
    border-collapse: collapse;
    color: var(--ac-text-2);
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;
}

    .ac-data th {
        padding: 0.625rem 0.875rem;
        border-bottom: 1px solid var(--ac-line-strong);
        color: var(--ac-text);
        font-size: 0.8125rem;
        font-weight: 700;
        white-space: nowrap;
        text-align: left;
    }

    .ac-data td {
        padding: 0.625rem 0.875rem;
        border-bottom: 1px solid var(--ac-line);
        vertical-align: top;
    }

    .ac-data tbody tr:last-child td {
        border-bottom: 0;
    }

    .ac-data td:first-child {
        color: var(--ac-text);
        font-weight: 600;
        white-space: nowrap;
    }

    .ac-data .ac-num {
        text-align: right;
        white-space: nowrap;
    }

.ac-prose .ac-table-wrap {
    margin-top: 1rem !important;
}

/* ---------------------------------------------------------------------------------------------------------------
   Message pages: errors, a confirmed email
   --------------------------------------------------------------------------------------------------------------- */

.ac-message {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    max-width: 36rem;
    margin: 2rem auto 0;
    padding: 2rem;
}

@media (min-width: 768px) {
    .ac-message {
        margin-top: 4rem;
        padding: 2.5rem;
    }
}

.ac-message h1 {
    font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.ac-message h2 {
    color: var(--ac-text-2) !important;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.55;
}

.ac-message .ac-actions {
    margin-top: 0.5rem;
}

/* ---------------------------------------------------------------------------------------------------------------
   Profile
   --------------------------------------------------------------------------------------------------------------- */

.ac-profile-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.ac-avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    border-radius: var(--ac-radius);
    background-color: var(--ac-go);
    box-shadow: 0 4px 0 var(--ac-go-edge);
    color: var(--ac-go-ink);
    font-size: 1.875rem;
    font-weight: 800;
    text-transform: uppercase;
}

.ac-profile {
    display: grid;
    gap: 2.5rem;
}

@media (min-width: 992px) {
    .ac-profile {
        grid-template-columns: minmax(0, 1fr) 22rem;
        align-items: start;
    }
}

.ac-profile-main .ac-games {
    margin-bottom: 1.5rem;
}

/* The game chips here are buttons (the menus' are links) */
button.ac-game {
    font-family: var(--ac-font);
    cursor: pointer;
}

.ac-ratings {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

.ac-rating {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 0.875rem;
    row-gap: 1rem;
    align-items: center;
    padding: 1.125rem;
}

    .ac-rating > .ac-btn,
    .ac-rating > .ac-pill {
        grid-column: 1 / -1;
    }

    .ac-rating .ac-btn {
        width: 100%;
    }

.ac-rating-label {
    color: var(--ac-text-2) !important;
    font-size: 0.9375rem !important;
    font-weight: 600;
}

.ac-rating-value {
    color: var(--ac-text);
    font-size: 1.875rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.ac-rating-soon {
    border-style: dashed;
    border-color: var(--ac-line-strong);
    background-color: transparent;
}

    .ac-rating-soon .ac-rating-value {
        color: var(--ac-text-3);
    }

    .ac-rating-soon .ac-rating-label {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

.ac-profile-section {
    margin-top: 2.5rem;
}

.ac-show-more {
    width: 100%;
}

/* Recent hands: the bids round a table, South's cards by suit, and the hand's tools */
.ac-replays {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ac-replay {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem 1.5rem;
    padding: 1rem 1.125rem;
    align-items: center;
}

    .ac-replay .ac-actions {
        grid-column: 1 / -1;
    }

@media (min-width: 1200px) {
    .ac-replay {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

        .ac-replay .ac-actions {
            grid-column: auto;
        }
}

.ac-replay .ac-actions {
    gap: 0.5rem;
}

.ac-bids {
    display: grid;
    grid-template-columns: repeat(3, 1.75rem);
    grid-template-rows: repeat(3, 1.75rem);
    padding: 0.25rem;
    border-radius: var(--ac-radius-sm);
    background-color: var(--ac-felt);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

    .ac-bids .cell {
        display: grid;
        place-items: center;
        color: #fff;
        font-size: 0.9375rem;
        font-weight: 700;
    }

        .ac-bids .cell:nth-child(8) {
            border-radius: 6px;
            background-color: rgba(255, 255, 255, 0.16);
        }

.ac-hand-suits {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.25rem 0.625rem;
    align-items: center;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

    .ac-hand-suits > :nth-child(odd) {
        display: grid;
        place-items: center;
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 6px;
        background-color: #fff;
    }

        .ac-hand-suits > :nth-child(odd) svg {
            width: 1rem;
            height: 1rem;
            fill: var(--ac-bg);
        }

        .ac-hand-suits > :nth-child(4n + 1) svg {
            fill: #d62828;
        }

    .ac-hand-suits > :nth-child(even) {
        min-width: 0;
        overflow-wrap: anywhere;
    }

.ac-empty {
    padding: 1.25rem;
    color: var(--ac-text-2);
    text-align: center;
}

/* Settings: the gameplay switches */
.ac-settings {
    padding: 1.5rem;
}

@media (min-width: 992px) {
    .ac-settings {
        position: sticky;
        top: 1.5rem;
    }
}

.ac-settings > .ac-h2 {
    margin-bottom: 1.25rem;
}

.ac-settings-group + .ac-settings-group {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--ac-line);
}

.ac-settings h3 {
    margin-bottom: 0.875rem !important;
    color: var(--ac-text-2) !important;
    font-size: 0.9375rem;
    font-weight: 700;
}

.ac-setting-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    padding: 0.5rem 0;
    color: var(--ac-text);
    font-weight: 500;
    cursor: pointer;
}

    .ac-setting-row > span:first-of-type {
        flex: 1;
    }

.ac-switch-state {
    flex: none !important;
    min-width: 1.75rem;
    color: var(--ac-text-3);
    font-size: 0.875rem;
    font-weight: 700;
    text-align: right;
}

.ac-switch-on {
    color: var(--ac-go);
}

.ac input.ac-switch {
    flex: none;
    position: relative;
    width: 2.75rem;
    height: 1.5rem;
    margin: 0;
    border-radius: 999px;
    background-color: var(--ac-bg);
    box-shadow: inset 0 0 0 1px var(--ac-line-strong);
    appearance: none;
    cursor: pointer;
    transition: background-color 0.15s, box-shadow 0.15s;
}

    .ac input.ac-switch::after {
        content: "";
        position: absolute;
        top: 0.1875rem;
        left: 0.1875rem;
        width: 1.125rem;
        height: 1.125rem;
        border-radius: 50%;
        background-color: var(--ac-text-2);
        transition: transform 0.18s var(--ac-ease-out), background-color 0.15s;
    }

    .ac input.ac-switch:checked {
        background-color: var(--ac-go);
        box-shadow: none;
    }

        .ac input.ac-switch:checked::after {
            transform: translateX(1.25rem);
            background-color: var(--ac-go-ink);
        }

/* Sound effects: its name with Play a sample (a small icon-only Secondary button) beside it, then the On/Off and the
   switch at the row's end like two-click play's. Its name and On/Off are both the switch's labels. */
.ac-sound-setting {
    padding: 0.25rem 0;
    cursor: default;
}

    .ac-sound-setting > label {
        margin: 0;
        font-weight: inherit;
        cursor: pointer;
    }

    .ac-sound-setting > .ac-switch-state {
        margin-left: auto;
        font-weight: 700;
    }

.ac-sound-sample svg {
    width: 1.125rem;
    height: 1.125rem;
}

.ac-grade-badge {
    flex: none;
    display: grid;
    place-items: center;
    min-width: 2.25rem;
    height: 1.625rem;
    padding: 0 0.375rem;
    border-radius: 999px;
    background-color: var(--grade);
    color: #fff;
    /* Verdana's "!" keeps a clear dot at this size (Rubik's reads as "I") */
    font-family: Verdana, "Segoe UI", system-ui, sans-serif;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.ac-g-brilliant { --grade: var(--ac-g-brilliant); }
.ac-g-excellent { --grade: var(--ac-g-excellent); }
.ac-g-good { --grade: var(--ac-g-good); }
.ac-g-deceptive { --grade: var(--ac-g-deceptive); color: #1f1600; }
.ac-g-neutral { --grade: var(--ac-g-neutral); }
.ac-g-weak { --grade: var(--ac-g-weak); }
.ac-g-mistake { --grade: var(--ac-g-mistake); }

/* ---------------------------------------------------------------------------------------------------------------
   Admin
   --------------------------------------------------------------------------------------------------------------- */

.ac-tabbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--ac-line);
}

.ac-tabbar-item {
    position: relative;
    padding: 0.75rem 1rem 0.875rem;
    border: 0;
    background: none;
    color: var(--ac-text-2);
    font-family: var(--ac-font);
    font-weight: 700;
    cursor: pointer;
    transition: color 0.15s;
}

    .ac-tabbar-item:hover {
        color: var(--ac-text);
    }

    .ac-tabbar-item[aria-selected="true"] {
        color: var(--ac-text);
    }

        .ac-tabbar-item[aria-selected="true"]::after {
            content: "";
            position: absolute;
            left: 0.5rem;
            right: 0.5rem;
            bottom: -1px;
            height: 3px;
            border-radius: 3px 3px 0 0;
            background-color: var(--ac-go);
        }

.ac-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1rem;
}

    .ac-toolbar label {
        color: var(--ac-text-2);
        font-weight: 600;
        font-size: 0.9375rem;
    }

/* A section that folds away under its heading (the admin tools): the heading is the button, its chevron pointing right
   while folded and down while open. The button is as tall as the controls beside it, so folding doesn't nudge it. */
.ac-fold-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    margin-left: -0.25rem;
    padding: 0.125rem 0.5rem 0.125rem 0.25rem;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: start;
    cursor: pointer;
}

    .ac-fold-toggle .ac-chevron {
        width: 0.75em;
        height: 0.75em;
        color: var(--ac-text-2);
        transition: color 0.15s;
    }

    .ac-fold-toggle:hover .ac-chevron {
        color: var(--ac-go);
    }

    .ac-fold-toggle[aria-expanded="true"] .ac-chevron {
        transform: rotate(90deg);
    }

@media (prefers-reduced-motion: no-preference) {
    .ac-fold-toggle .ac-chevron {
        transition: color 0.15s, transform 0.2s var(--ac-ease-out);
    }
}

/* The section's controls beside its heading, each a label and its control */
.ac-fold-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
}

select.ac-input {
    display: inline-block;
    width: auto;
    min-height: 2.5rem;
    padding: 0.375rem 2rem 0.375rem 0.75rem;
}

.ac-input-sm {
    min-height: 2.5rem;
    padding: 0.375rem 0.5rem;
}

/* The admin lists' pager (pager.tsx): the caption, First / Previous / page numbers / Next / Last, and the page box */
.ac-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-top: 1rem;
}

.ac-pager-caption {
    flex-basis: 100%;
    min-height: 1.5em;
    margin: 0;
    color: var(--ac-text-2);
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;
}

.ac-pager-pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.375rem;
}

    .ac-pager-pages .ac-btn:disabled {
        cursor: default;
        opacity: 0.4;
    }

.ac-pager-number {
    min-width: 2.5rem;
    padding-inline: 0.625rem;
    font-variant-numeric: tabular-nums;
}

    .ac-pager-number[aria-current="page"] {
        --btn-bg: var(--ac-go);
        --btn-hover: var(--ac-go-hover);
        --btn-edge: var(--ac-go-edge);
        --btn-ink: var(--ac-go-ink);
    }

.ac-pager-gap {
    padding: 0 0.25rem;
    color: var(--ac-text-3);
    font-weight: 700;
}

.ac-pager-jump {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ac-text-2);
    font-weight: 600;
}

/* A table whose rows are being read: a bar along its top edge, a note on it, and the rows it replaces dimmed */
.ac-table-frame {
    position: relative;
}

.ac-load-bar {
    position: absolute;
    z-index: 1;
    top: 0;
    left: var(--ac-radius-sm);
    right: var(--ac-radius-sm);
    height: 3px;
    overflow: hidden;
    border-radius: 3px;
    background-color: var(--ac-go-wash);
}

    .ac-load-bar::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background-color: var(--ac-go);
        opacity: 0.6;
    }

@media (prefers-reduced-motion: no-preference) {
    .ac-load-bar::before {
        right: auto;
        width: 35%;
        opacity: 1;
        animation: ac-load-slide 1.1s ease-in-out infinite;
    }
}

@keyframes ac-load-slide {
    from { transform: translateX(-100%); }
    to { transform: translateX(290%); }
}

.ac-load-note {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 1.5rem;
    margin: 0;
    padding: 0.125rem 0.625rem;
    border: 1px solid var(--ac-line-strong);
    border-radius: 999px;
    background-color: var(--ac-raised);
    color: var(--ac-text);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    transform: translateY(-50%);
}

    .ac-load-note:empty {
        display: none;
    }

/* (A row on its way out, e.g. a puzzle being deleted, looks the same) */
.ac-data tbody.ac-stale,
.ac-data tr.ac-stale {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 0.15s;
}

/* Something being done: a small ring in the text's colour (on a button, its ink), turning unless motion is reduced,
   next to words that say what */
.ac-spinner {
    display: inline-block;
    flex: none;
    width: 0.9em;
    height: 0.9em;
    border: 0.15em solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    vertical-align: -0.125em;
    opacity: 0.85;
}

@media (prefers-reduced-motion: no-preference) {
    .ac-spinner {
        animation: spin 0.8s linear infinite;
    }
}

.ac-admin-table td {
    vertical-align: middle;
}

/* Wide enough for "Validating…" and its spinner, so the column holds still while a button's words change */
.ac-admin-actions {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-width: 9.5rem;
}

.ac-validity .ac-spinner {
    color: var(--ac-go);
}

.ac-validity {
    font-weight: 700;
}

/* The solver's reason under a nil exercise's ✅ or ❌, kept to a narrow column (but not a word a line, where a phone
   squeezes the table) */
.ac-validity-reason {
    min-width: 9rem;
    max-width: 13rem;
    margin: 0.375rem auto 0;
    color: var(--ac-text-3);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.4;
    text-wrap: pretty;
}

/* Words in place of an action that isn't there ("No replay"), as tall as the buttons */
.ac-admin-note {
    display: grid;
    place-items: center;
    min-height: 2.375rem;
    color: var(--ac-text-3);
    font-size: 0.875rem;
    font-weight: 600;
}

/* The duplicate tournament's section: each active tournament's date, id and entries in a row (wrapping on a phone),
   Reset tournament (or its question in its place), and under it how the rotation's going or went. The status is always
   there (it's read out as it changes), so an empty one takes no room. */
.ac-rotation {
    padding: 1.25rem;
}

    .ac-rotation > * {
        margin: 0;
    }

    .ac-rotation > * + * {
        margin-top: 1rem;
    }

    .ac-rotation > .ac-rotation-status:empty {
        margin-top: 0;
    }

    .ac-rotation > .ac-rotation-elapsed {
        margin-top: 0.375rem;
    }

.ac-rotation-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2.5rem;
}

    .ac-rotation-facts dt {
        color: var(--ac-text-3);
        font-size: 0.8125rem;
        font-weight: 700;
    }

    .ac-rotation-facts dd {
        margin: 0;
        color: var(--ac-text);
        font-size: 1.125rem;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }

.ac-rotation-none {
    color: var(--ac-text-2);
}

/* Rotate now's question: what it does, then Rotate and Cancel */
.ac-rotation-confirm {
    max-width: 44rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--ac-bad-line);
    border-radius: var(--ac-radius-sm);
    background-color: var(--ac-bad-wash);
}

    .ac-rotation-confirm p {
        margin: 0 0 0.75rem;
        line-height: 1.5;
    }

.ac-rotation-status > p {
    margin: 0;
    color: var(--ac-text-2);
    line-height: 1.5;
}

.ac-rotation-status > .ac-alert {
    max-width: 44rem;
}

.ac-rotation-elapsed {
    color: var(--ac-text-3);
    font-size: 0.875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* A nil exercise's deal: the bids from the dealer's left beside the player's hand, each under a small heading. The
   bids' rows are as tall and as far apart as the hand's suit rows, so the two line up. */
.ac-nil-preview {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 1rem 2rem;
}

.ac-nil-preview-h {
    margin: 0 0 0.5rem;
    color: var(--ac-text-3);
    font-size: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
}

.ac-nil-bids {
    display: grid;
    gap: 0.125rem;
    min-width: 9.5rem;
    margin: 0;
}

    .ac-nil-bids > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        min-height: 1.5rem;
    }

    .ac-nil-bids dt {
        font-weight: 600;
        white-space: nowrap;
    }

    .ac-nil-bids dd {
        margin: 0;
        color: var(--ac-text);
        font-weight: 800;
    }

    .ac-nil-bids .ac-nil-player dt {
        color: var(--ac-text);
    }

.ac-nil-mark {
    color: var(--ac-text-3);
    font-weight: 600;
}

/* A puzzle's position: each seat's cards and tricks taken / bid round the trick */
.ac .grid-container {
    gap: 0.75rem;
    color: var(--ac-text);
}

.ac .grid-item {
    border: 0;
}

.ac .puzzle-position-card-grid {
    gap: 0.125rem 0.5rem;
}

.ac .trick-center {
    border-radius: var(--ac-radius-sm);
    background-color: var(--ac-felt);
    color: #fff;
}

.ac .bid {
    color: var(--ac-text-2);
    font-weight: 700;
}

/* The profile's game chips are buttons */
button.ac-game:hover {
    background-color: var(--ac-raised);
    color: var(--ac-text) !important;
}

button.ac-game[aria-pressed="true"] {
    background-color: var(--ac-raised);
    border-color: var(--ac-line-strong);
    color: var(--ac-text) !important;
}

/* A card played to a puzzle's trick: a small white card face */
.ac-played {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0.125rem 0.375rem;
    border-radius: 6px;
    background-color: #fff;
    color: var(--ac-bg);
    font-weight: 800;
}

    .ac-played svg {
        width: 0.875rem;
        height: 0.875rem;
        fill: currentColor;
    }

.ac-played-hearts,
.ac-played-diamonds {
    color: #d62828;
}

.ac .trick-center {
    min-height: 7rem;
}

.ac .bid {
    padding: 0.125rem 0.5rem;
    border: 1px solid var(--ac-line-strong);
    border-radius: 999px;
}

.ac-qa-title {
    margin-bottom: 0.875rem !important;
    font-family: var(--ac-font);
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.ac-message h2 {
    text-wrap: pretty;
}

/* On phones a rating lies flat: icon, name and number, then its button */
@media (max-width: 575.98px) {
    .ac-rating {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-rows: auto;
    }

        .ac-rating > .ac-btn {
            grid-column: auto;
            width: auto;
        }
}

.ac-bids,
.ac-hand-suits {
    width: auto;
    height: auto;
    margin: 0;
}

/* ---------------------------------------------------------------------------------------------------------------
   Duplicate results
   --------------------------------------------------------------------------------------------------------------- */

.ac-date-field {
    min-width: 12rem;
}

    .ac-date-field .ac-input {
        color-scheme: dark;
    }

/* The date input with the Yesterday / Today switch beside it (under it when there's no room), level with the input */
.ac-results-day {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}

    .ac-results-day .ac-seg {
        grid-template-columns: none;
        grid-auto-columns: 1fr;
        grid-auto-flow: column;
        margin-bottom: 0;
    }

        .ac-results-day .ac-seg-item {
            padding: 0 1rem;
            white-space: nowrap;
        }

/* Today's tournament to play, over the results: a slimmer callout */
.ac-play-today {
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.ac-tabbar-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
}

    .ac-tabbar-scroll .ac-tabbar-item {
        flex: none;
        white-space: nowrap;
    }

.ac-results {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ac-standing {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.625rem;
    margin: 0;
    color: var(--ac-text-2);
    font-size: 0.9375rem;
}

.ac-pill-bad {
    background-color: var(--ac-bad-wash);
    color: var(--ac-bad);
}

.ac-data tbody tr:hover td {
    background-color: rgba(255, 255, 255, 0.025);
}

.ac-results-table td {
    vertical-align: middle;
}

.ac .ac-data td.ac-empty-cell {
    padding: 1.5rem 1rem;
    color: var(--ac-text-2);
    font-weight: 400;
    white-space: normal;
    text-align: center;
}

/* A hand's cards (South's; North's too on the team results), suit by suit, in a row of chips */
.ac-hand-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ac-hand-group {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.25rem;
    padding: 0.25rem 0.875rem 0.25rem 0.25rem;
    border: 1px solid var(--ac-line);
    border-radius: 999px;
    background-color: var(--ac-surface);
    font-weight: 700;
    letter-spacing: 0.04em;
}

    .ac-hand-group svg {
        width: 1.75rem;
        height: 1.75rem;
        padding: 0.3125rem;
        border-radius: 50%;
        background-color: #fff;
        fill: var(--ac-bg);
    }

.ac-hand-hearts svg,
.ac-hand-diamonds svg {
    fill: #d62828;
}

/* The team results' deal: the pair's two hands, North's row over South's, each after its seat's name. The names are
   one column, so the rows of chips line up; a row too long for a phone wraps under its own first chips. */
.ac-hand-seats {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.5rem 0.875rem;
}

.ac-hand-seat {
    display: flex;
    align-items: center;
    /* a suit chip's height, so the name sits level with its row's first chips */
    min-height: 2.375rem;
    color: var(--ac-text-2);
    font-size: 0.8125rem;
    font-weight: 700;
}

/* ---------------------------------------------------------------------------------------------------------------
   Casual lobby
   --------------------------------------------------------------------------------------------------------------- */

.ac-lobby {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 1180px !important;
    min-height: 0 !important;
    margin: 0 auto;
    padding: 1.25rem 1.25rem 1rem !important;
}

@media (min-width: 768px) {
    .ac-lobby {
        padding: 1.75rem 2rem 1.25rem !important;
    }
}

.ac-lobby-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
}

    .ac-lobby-head .ac-actions {
        align-items: center;
    }

.ac-lobby-list {
    flex: 1;
    min-height: 0;
}

.ac-lobby-cols {
    min-height: 2.75rem;
    border-bottom: 1px solid var(--ac-line-strong);
    background-color: var(--ac-surface);
    color: var(--ac-text-2);
    font-size: 0.875rem;
}

    .ac-lobby-cols > div {
        border: 0 !important;
    }

    .ac-lobby-cols img {
        opacity: 0.7;
    }

.ac-lobby-row {
    padding: 1rem 0;
    border-bottom: 1px solid var(--ac-line);
}

/* A table: four seats round the felt */
.ac .ac-lobby-table {
    grid-template-columns: 1fr minmax(4.5rem, auto) 1fr;
    grid-template-rows: auto minmax(4.5rem, auto) auto;
    gap: 0.375rem;
    width: min(100%, 17rem);
    height: auto;
}

    .ac .ac-lobby-table > .cell:nth-child(5) {
        border-radius: var(--ac-radius-sm);
        background-color: var(--ac-felt);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    }

    .ac .ac-lobby-table > .cell:nth-child(even) {
        flex-direction: column;
        gap: 0.25rem;
        font-size: 0.9375rem;
        line-height: 1.2;
    }

        .ac .ac-lobby-table > .cell:nth-child(even) .fw-bold {
            color: var(--ac-text);
            font-weight: 600 !important;
        }

        .ac .ac-lobby-table > .cell:nth-child(even) .fst-italic {
            color: var(--ac-text-3);
        }

.ac-time-control {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: var(--ac-radius-sm);
    background-color: var(--ac-raised);
    color: var(--ac-text);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.3;
}

.ac-yes,
.ac-no {
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
}

    .ac-yes svg,
    .ac-no svg {
        width: 1rem;
        height: 1rem;
    }

.ac-yes {
    background-color: var(--ac-go-wash);
    color: var(--ac-go);
}

.ac-no {
    background-color: var(--ac-raised);
    color: var(--ac-text-3);
}

.ac-btn-icon {
    min-width: 2.375rem;
    padding: 0.375rem;
}

    .ac-btn-icon img {
        width: 1.25rem;
        height: 1.25rem;
    }

/* Host a Table: a dialog over the list */
.ac #host-table-box-container {
    background: rgba(10, 11, 13, 0.7);
    border-radius: 0;
}

.ac-dialog {
    width: min(22rem, calc(100vw - 2rem));
    box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.55);
    overflow: hidden;
}

.ac-dialog-title {
    padding: 1.25rem 1.5rem 0;
    font-size: 1.25rem !important;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.ac-dialog-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
}

    .ac-dialog-body h3 {
        margin-top: 0.5rem !important;
        color: var(--ac-text-2) !important;
        font-size: 0.875rem;
        font-weight: 700;
    }

    .ac-dialog-body .ac-check {
        color: var(--ac-text);
    }

.ac-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 0.5rem 1.5rem 1.5rem;
}

.ac select.ac-input {
    width: 100%;
}

.ac .ac-toolbar select.ac-input {
    width: auto;
}

.ac-tabbar-scroll {
    overflow-y: hidden;
    scrollbar-width: none;
}

    .ac-tabbar-scroll::-webkit-scrollbar {
        display: none;
    }

    .ac-tabbar-scroll .ac-tabbar-item[aria-selected="true"]::after {
        bottom: 0;
    }

        .ac .ac-lobby-table > .cell:nth-child(even) .fw-bold + .d-block {
            color: var(--ac-text-2);
            font-size: 0.875rem;
        }