/* The dark hub's chrome on the board pages' table (every board is in the board frame, academy-frame.css): the loading
   cover, the seats (whose turn, disconnected, the dealer, the solver's counts, the analysis grades), the card back, the
   card chosen with two-click play, Play, and the bidding tray. The page code places and shows these by their ids and
   classes; lesson.css still gives their base geometry, which the frame resizes from the table. Tokens come from
   academy.css and academy-pages.css. (The older board frame's sidebar, round buttons and boxes went with BoardPage.) */

/* The cover while the page loads */
#page-load-spinner-container {
    background-color: var(--ac-bg);
    color: var(--ac-text-2);
    font-family: var(--ac-font);
}

    #page-load-spinner-container h3 {
        margin-bottom: 1.25rem;
        font-size: 1.125rem;
        font-weight: 600;
    }

#page-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;
}

.content-load-spinner-container .dependent-color {
    margin-top: 1rem;
    color: var(--ac-text);
    font-family: var(--ac-font);
    font-size: 1.125rem;
    font-weight: 600;
    mix-blend-mode: normal;
}

/* ---------------------------------------------------------------------------------------------------------------
   Seats: names, the turn, the dealer, trick counts and grades (the clocks are the frame's, academy-frame.css)
   --------------------------------------------------------------------------------------------------------------- */

:is(#north-name, #east-name, #south-name, #west-name) {
    color: #fff;
    font-family: var(--ac-font);
    font-weight: 600;
    letter-spacing: -0.01em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Whose turn it is: a Play green pill with a ring that breathes */
.player-with-turn:not(.disconnected-indicator) {
    padding: 0.05em 0.55em;
    border-radius: 999px;
    background: var(--ac-go);
    color: var(--ac-go-ink) !important;
    font-weight: 700;
    text-shadow: none;
    animation: none;
}

    .player-with-turn::after {
        border: 2px solid rgba(107, 214, 43, 0.65);
        border-radius: 999px;
    }

.disconnected-indicator {
    padding: 0.05em 0.55em;
    border-radius: 999px;
    background-color: var(--ac-bad-fill) !important;
    color: #fff;
}

    .disconnected-indicator.player-with-turn {
        background: var(--ac-bad-fill);
        animation: none;
    }

.dealer-button::before {
    background-color: #fff;
    color: var(--ac-bg);
    font-family: var(--ac-font);
    font-weight: 800;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
}

/* Tricks taken, as round counters on the seat */
.number-bubble::before {
    border: 0;
    background: var(--ac-bg);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
    font-family: var(--ac-font);
    font-weight: 800;
}

.number-bubble[data-bubble-color="green"]::before {
    background: var(--ac-go);
    color: var(--ac-go-ink);
}

.number-bubble[data-bubble-color="red"]::before {
    background: var(--ac-bad-fill);
}

.number-bubble[data-bubble-color="yellow"]::before {
    background: var(--ac-yellow);
    color: #1f1600;
}

/* Replay Analysis' grades on the cards: the profile's grade badges */
:is(.brilliant-move-marker, .good-move-marker, .excellent-move-marker, .neutral-move-marker, .weak-move-marker, .mistake-move-marker, .deceptive-move-marker)::before {
    border: 2px solid #fff;
    /* A face whose "!" keeps its dot (Rubik's reads as "I") */
    font-family: Verdana, "Segoe UI", system-ui, sans-serif;
    font-size: 1.25em;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.6;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.35);
}

.brilliant-move-marker::before,
.bg-brilliant {
    background-color: var(--ac-g-brilliant);
}

.excellent-move-marker::before,
.bg-excellent {
    background-color: var(--ac-g-excellent);
}

.good-move-marker::before,
.bg-good {
    background-color: var(--ac-g-good);
}

.deceptive-move-marker::before,
.bg-deceptive {
    background-color: var(--ac-g-deceptive);
}

.deceptive-move-marker::before {
    color: #1f1600;
}

.neutral-move-marker::before,
.bg-neutral {
    background-color: var(--ac-g-neutral);
}

.weak-move-marker::before,
.bg-weak {
    background-color: var(--ac-g-weak);
}

.mistake-move-marker::before,
.bg-mistake {
    background-color: var(--ac-g-mistake);
}

/* ---------------------------------------------------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------------------------------------------------- */

/* The back: the site's slate with a fine lattice and the logo's two cards in the middle */
.playing-card .back {
    background-color: #2a2e35;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect x='6' y='5' width='20' height='28' rx='4' transform='rotate(-12 16 19)' fill='%236bd62b'/%3E%3Crect x='13' y='7' width='21' height='29' rx='4' fill='%23ffffff' fill-opacity='.92'/%3E%3C/svg%3E"),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 0.55em),
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 0.55em),
        radial-gradient(circle at 50% 50%, #343943, #22252b);
    background-position: center, 0 0, 0 0, 0 0;
    background-repeat: no-repeat, repeat, repeat, no-repeat;
    background-size: 46% auto, auto, auto, 100% 100%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* A card chosen, waiting for Confirm */
#south-hand .card-selected .playing-card,
.card-selected .playing-card {
    box-shadow: 0 0 0 3px var(--ac-go), 0 0.75rem 1.5rem rgba(0, 0, 0, 0.45);
}

/* Confirm the card picked (two-click play): the primary action, in green */
#confirm-card-button {
    border: 0;
    border-radius: var(--ac-radius-sm);
    background-color: var(--ac-go);
    color: var(--ac-go-ink);
    font-family: var(--ac-font);
    font-weight: 800;
    box-shadow: 0 6px 0 var(--ac-go-edge);
    transition: background-color 0.15s, box-shadow 0.08s;
}

    #confirm-card-button:hover {
        top: 70%;
        border: 0;
        background-color: var(--ac-go-hover);
    }

    #confirm-card-button:active {
        top: calc(70% + 6px);
        border: 0;
        background-color: var(--ac-go);
        box-shadow: 0 0 0 var(--ac-go-edge);
    }

/* Bidding: the numbers as chunky keys on a dark tray */
#bidding-button-container {
    padding: 1.25rem 1rem 1.375rem;
    border: 1px solid var(--ac-line-strong);
    border-radius: var(--ac-radius);
    background: var(--ac-surface);
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.45);
}

#bidding-button-prompt {
    margin-bottom: 0.625rem;
    color: var(--ac-text);
    font-family: var(--ac-font);
    font-weight: 700;
}

.bidding-button {
    margin: 4px;
    border: 0;
    border-radius: var(--ac-radius-sm);
    background-color: var(--ac-raised);
    color: var(--ac-text);
    font-family: var(--ac-font);
    font-weight: 800;
    box-shadow: 0 4px 0 var(--ac-edge);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, transform 0.08s, box-shadow 0.08s;
}

    .bidding-button:hover {
        background-color: var(--ac-go);
        color: var(--ac-go-ink);
        box-shadow: 0 4px 0 var(--ac-go-edge);
        transition: background-color 0.15s, color 0.15s, transform 0.08s, box-shadow 0.08s;
    }

    .bidding-button:active {
        transform: translateY(4px);
        box-shadow: 0 0 0 transparent;
    }


/* The old felt tokens, for what still reads them (lesson.css) */
:root {
    --felt-color: #1f5a3f;
    --felt-hover: #2f7a55;
    --felt-light-color: #2f7a55;
    --felt-light-hover: #3a8a62;
}