html, body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    margin: 0;
    background: #111;
    color: #f5f5f5;
}

main {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 2rem;
    text-align: center;
}

h1 {
    font-size: 3rem;
    margin: 0;
}

.lead {
    font-size: 1.5rem;
    margin: 0;
}

.join-code {
    font-size: 8rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    margin: 0;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.qr {
    background: #fff;
    padding: 1rem;
    border-radius: 1rem;
}

.qr svg {
    display: block;
    width: min(50vh, 80vw);
    height: auto;
}

.button {
    display: inline-block;
    font-size: 1.5rem;
    padding: 1rem 2rem;
    border: none;
    border-radius: 0.75rem;
    background: #1db954;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
}

.button:hover {
    background: #1ed760;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.button:disabled {
    background: #555;
    cursor: not-allowed;
}

.button-secondary {
    background: #333;
}

.button-secondary:hover {
    background: #444;
}

.actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.muted {
    color: #999;
    margin: 0;
}

/* Organizer: on a big display, a rail of Join Code and Roster on the left
   and the Round as a stage on the right, with the Scoreboard and Awards
   ledger side by side beneath it. The rail can be put away, and then the
   stage takes the whole width. Below 60rem the screen is one centred
   column, as on a phone, and the rail stays. */

.organizer-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: start;
    width: 100%;
    max-width: 90rem;
}

.organizer-columns section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.organizer-columns .join-code {
    font-size: 6rem;
}

.organizer-columns .qr {
    cursor: zoom-in;
}

.organizer-columns .qr:hover,
.organizer-columns .qr:focus-visible {
    outline: 3px solid #1ed760;
}

.organizer-columns .qr svg {
    width: min(45vh, 40vw);
}

.rail-toggle {
    display: none;
}

/* The QR code filling the screen, for a room to scan. */

.qr-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 2rem;
    background: #111;
    cursor: zoom-out;
}

.qr-fullscreen:focus-visible {
    outline: 3px solid #1ed760;
    outline-offset: -3px;
}

.qr-fullscreen .qr svg {
    width: min(70vh, 80vw);
}

@media (min-width: 60rem) {
    main.organizer {
        justify-content: flex-start;
    }

    .organizer-columns {
        grid-template-columns: 22rem minmax(0, 1fr);
        grid-template-areas:
            "join   round"
            "roster round"
            "roster score";
        gap: 1.5rem;
        max-width: 100rem;
    }

    .organizer-columns.rail-hidden {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "round"
            "score";
        max-width: 80rem;
    }

    .organizer-columns section {
        align-items: stretch;
        gap: 1rem;
        padding: 1.25rem 1.5rem;
        border: 1px solid #2a2a2a;
        border-radius: 1rem;
        background: #171717;
        box-sizing: border-box;
        min-width: 0;
        text-align: left;
    }

    .organizer-columns section > h1,
    .organizer-columns .score-panel > h2 {
        margin: 0;
        font-size: 1rem;
        text-transform: uppercase;
        letter-spacing: 0.15em;
        color: #999;
    }

    .organizer-columns .status {
        align-self: flex-start;
    }

    .organizer-columns .roster,
    .organizer-columns .scoreboard,
    .organizer-columns .ledger,
    .organizer-columns .manual-award {
        max-width: none;
    }

    .organizer-columns .roster li {
        justify-content: flex-start;
    }

    .organizer-columns .join-panel {
        grid-area: join;
        align-items: center;
    }

    .organizer-columns .roster-panel {
        grid-area: roster;
        position: sticky;
        top: 1rem;
    }

    .organizer-columns .join-panel .lead {
        font-size: 0.95rem;
        text-align: center;
    }

    .organizer-columns .join-code {
        font-size: 3rem;
        letter-spacing: 0.15em;
    }

    .organizer-columns .qr svg {
        width: 9rem;
    }

    /* Putting the rail away and bringing it back. */

    .rail-toggle {
        display: inline-block;
        align-self: flex-end;
        font-size: 0.85rem;
        padding: 0.3rem 0.7rem;
        border: 1px solid #555;
        border-radius: 999px;
        background: transparent;
        color: #bbb;
        cursor: pointer;
    }

    .rail-toggle:hover {
        border-color: #1ed760;
        color: #1ed760;
    }

    .organizer-columns > .rail-toggle {
        position: fixed;
        top: 1rem;
        left: 1rem;
        z-index: 10;
        background: #171717;
    }
}

.status {
    font-size: 1.25rem;
    margin: 0;
    padding: 0.25rem 1rem;
    border-radius: 999px;
}

.status-open {
    background: #1db95433;
    color: #1ed760;
}

.status-closed {
    background: #ffffff1a;
    color: #bbb;
}

.roster {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 30rem;
    text-align: left;
}

.roster li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #333;
    font-size: 1.5rem;
}

.roster li.offline .name {
    color: #888;
}

.roster .presence {
    margin-right: auto;
    font-size: 0.9rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: #ffffff1a;
    color: #bbb;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.roster .remove {
    font-size: 1rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid #666;
    border-radius: 0.5rem;
    background: transparent;
    color: #ddd;
    cursor: pointer;
}

.roster .remove:hover {
    border-color: #e55;
    color: #e55;
}

/* Buzzer: phone screens */

.buzzer h1 {
    font-size: 2rem;
}

.entry {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 24rem;
}

.entry label {
    font-size: 1.25rem;
}

.entry input {
    font-size: 2rem;
    padding: 0.75rem 1rem;
    border: 2px solid #444;
    border-radius: 0.75rem;
    background: #222;
    color: #f5f5f5;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.entry input:focus {
    outline: none;
    border-color: #1db954;
}

.code-input {
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.error {
    color: #ff7b7b;
    margin: 0;
    font-size: 1.1rem;
}

/* Buzzer: the QR scanner. A phone aimed at the Organizer's screen across a
   room needs the whole viewport to aim with, so while it is open the camera
   takes the page and the Join Code entry stands down. */

.scanner {
    /* Out of the page's padded column and over the whole viewport: aiming a
       phone at a monitor across a room wants every pixel, and installed
       fullscreen there is no browser chrome to share them with. */
    position: fixed;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    background: #000;
    padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right))
        max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
}

.scanner-view {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #000;
}

.scanner-view video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scanner .lead,
.scanner .button {
    /* Above the camera, which fills the whole overlay behind them. */
    position: relative;
    z-index: 1;
}

.scanner .lead {
    margin: 0;
    text-align: center;
    text-shadow: 0 1px 4px #000;
}

/* The reason the camera would not open, read next to the Join Code entry the
   Participant now has to use instead. */
.scan-error {
    color: #ff7b7b;
    margin: 0;
    max-width: 24rem;
    text-align: center;
    font-size: 1.1rem;
}

/* Buzzer: the button itself, painted by Buzzer.razor.js. Once the
   Participant is in, the page is the button: tight padding, the name on one
   line, and the button takes every remaining pixel. */

.buzzer:has(.buzz-root) {
    /* Installed fullscreen the page runs under the notch and the home bar,
       so keep the name and the button clear of them. */
    padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right))
        max(0.75rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
    gap: 0.5rem;
    min-height: 100dvh;
}

.buzzer:has(.buzz-root) .lead {
    font-size: 1.1rem;
    color: #bbb;
}

.buzz-root {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    flex: 1;
}

.buzz-button {
    flex: 1;
    width: 100%;
    /* Never smaller than a hand on a small phone, even in landscape. */
    min-height: max(60vh, 10rem);
    border: none;
    border-radius: 2rem;
    font-size: 4rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #fff;
    background: #444;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: none;
}

.buzz-button:disabled {
    cursor: default;
}

.buzz-button.connecting,
.buzz-button.offline {
    background: #333;
    color: #999;
    font-size: 2rem;
}

.buzz-button.idle {
    background: #2a2a2a;
    color: #777;
}

.buzz-button.armed {
    background: #e0202b;
    box-shadow: 0 0 4rem #e0202b88, inset 0 -1rem 2rem #0004;
}

.buzz-button.armed:active {
    background: #ff3b45;
}

.buzz-button.buzzing {
    background: #ffcc00;
    color: #111;
    box-shadow: 0 0 5rem #ffcc00aa;
}

.buzz-button.won {
    background: #1db954;
    box-shadow: 0 0 5rem #1db95488;
}

.buzz-button.lost {
    background: #2a2a2a;
    color: #bbb;
    font-size: 2.5rem;
}

.buzz-hint {
    font-size: 1.25rem;
    margin: 0;
    min-height: 1.5em;
}

.buzz-timing {
    font-size: 0.9rem;
    color: #777;
    margin: 0;
    min-height: 1.2em;
    font-variant-numeric: tabular-nums;
}

/* Organizer: the Round and the player */

@media (min-width: 60rem) {
    .organizer-columns .round-panel {
        grid-area: round;
        align-items: center;
        text-align: center;
        padding: 2rem;
    }

    .organizer-columns .round-panel .status,
    .organizer-columns .round-panel .judgment-actions {
        align-self: center;
        justify-content: center;
    }
}

.player {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    border-radius: 1rem;
    border: 2px solid #333;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.player p {
    margin: 0;
}

.player-status {
    display: flex;
    align-items: baseline;
    gap: 1rem;
}

.player-notice {
    color: #ffcc00;
    max-width: 40rem;
    text-align: center;
}

.player-control {
    font-size: 1rem;
}

.player-account {
    font-size: 0.9rem;
}

/* Organizer: signing in and picking a Playlist */

.signout {
    color: #999;
    font-size: 0.9rem;
    margin-left: 1rem;
}

/* Organizer: the way back out of the Restart picker, quieter than a choice */

.back {
    color: #999;
    font-size: 1rem;
}

.playlist-link {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 40rem;
}

.playlist-input {
    flex: 1 1 20rem;
    font-size: 1.1rem;
    padding: 0.6rem 0.9rem;
    border-radius: 0.75rem;
    border: 2px solid #333;
    background: #1a1a1a;
    color: #eee;
}

.playlists {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 0.75rem;
    width: 100%;
    max-width: 60rem;
}

.playlist {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: 2px solid #333;
    background: #1a1a1a;
    color: #eee;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.playlist:hover:not(:disabled) {
    border-color: #1db954;
}

.playlist.selected {
    border-color: #1db954;
    background: #16281c;
}

.playlist-name {
    font-weight: 700;
}

.playlist-meta {
    color: #999;
    font-size: 0.9rem;
}

.player-state {
    font-size: 1.5rem;
    font-weight: 700;
}

.player-detail {
    color: #999;
}

.player.playing {
    border-color: #1db954;
}

.player.playing .player-state {
    color: #1ed760;
}

.player.paused {
    border-color: #ffcc00;
}

.player.paused .player-state {
    color: #ffcc00;
}

.round-number {
    font-size: 1.25rem;
    color: #999;
    margin: 0;
}

.track {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.track-title {
    font-size: 2.5rem;
    font-weight: 700;
}

.track-artist {
    font-size: 1.5rem;
    color: #bbb;
}

.status-buzzed {
    background: #ffcc0033;
    color: #ffcc00;
}

/* Organizer: judging, lockouts and the reveal */

.player-position {
    font-variant-numeric: tabular-nums;
    color: #ddd;
}

.player.revealed {
    border-color: #6c8cff;
}

.player.revealed .player-state {
    color: #8fa8ff;
}

.judgment {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.award-label {
    font-size: 1.25rem;
}

.award-entry {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.award-step {
    font-size: 2rem;
    line-height: 1;
    padding: 0.25rem 1rem;
}

.award-input {
    width: 6rem;
    font-size: 3rem;
    font-weight: 700;
    text-align: center;
    background: #111;
    color: #fff;
    border: 2px solid #444;
    border-radius: 1rem;
    padding: 0.25rem;
    font-variant-numeric: tabular-nums;
}

.judgment-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.judgment-hint {
    min-height: 1.5em;
}

.status-revealed {
    background: #6c8cff33;
    color: #8fa8ff;
}

.status-locked {
    background: #e0202b33;
    color: #ff6b73;
}

.lockouts {
    margin: 0;
    color: #bbb;
}

.awards {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 1.5rem;
}

.awards li {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.awards .delta {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.rebuzz-rule {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #bbb;
    font-size: 1rem;
}

.rebuzz-rule input {
    width: 1.25rem;
    height: 1.25rem;
}

/* Buzzer: locked out and the reveal */

.buzz-button.locked-out {
    background: #2a2a2a;
    color: #ff6b73;
    font-size: 2.5rem;
}

.buzz-button.revealed {
    display: none;
}

.buzz-button.game-over {
    background: #2a2a2a;
    color: #9a9a9a;
    font-size: 2.5rem;
}

.reveal {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex: 1;
    width: 100%;
    min-height: 60vh;
    border-radius: 2rem;
    background: #6c8cff22;
}

.reveal[hidden] {
    display: none;
}

.reveal p {
    margin: 0;
}

.reveal-title {
    font-size: 2.5rem;
    font-weight: 700;
}

.reveal-artist {
    font-size: 1.5rem;
    color: #bbb;
}

.reveal-awards {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    font-size: 1.25rem;
    color: #bbb;
}

.reveal-awards .mine {
    color: #1ed760;
    font-weight: 700;
}

/* Organizer: scoreboard, manual Awards and the ledger */

.scoreboard,
.ledger {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 30rem;
    text-align: left;
}

.scoreboard li,
.ledger li {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #333;
}

.scoreboard li {
    font-size: 1.5rem;
    counter-increment: place;
}

.scoreboard li::before {
    content: counter(place) ".";
    color: #888;
    font-variant-numeric: tabular-nums;
    min-width: 2ch;
}

.scoreboard {
    counter-reset: place;
}

.scoreboard li.selected {
    background: #1db95422;
}

.scoreboard .score {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: #1ed760;
}

.scoreboard .award-by-hand,
.ledger .undo {
    font-size: 1rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid #666;
    border-radius: 0.5rem;
    background: transparent;
    color: #ddd;
    cursor: pointer;
}

.scoreboard .award-by-hand:hover {
    border-color: #1ed760;
    color: #1ed760;
}

.ledger .undo:hover {
    border-color: #e55;
    color: #e55;
}

.manual-award {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 30rem;
}

.manual-award .award-input {
    font-size: 2rem;
}

.manual-award .award-step {
    font-size: 1.5rem;
}

.manual-participant,
.manual-reason {
    width: 100%;
    font-size: 1.1rem;
    padding: 0.5rem 0.75rem;
    background: #111;
    color: #fff;
    border: 2px solid #444;
    border-radius: 0.5rem;
}

.manual-participant:focus,
.manual-reason:focus {
    outline: none;
    border-color: #1ed760;
}

@media (min-width: 60rem) {
    .organizer-columns .score-panel {
        grid-area: score;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
        grid-template-areas:
            "title  awards"
            "board  ledger"
            "manual ledger";
        column-gap: 2rem;
        row-gap: 1rem;
        align-items: start;
    }

    .organizer-columns .score-panel > h1 { grid-area: title; }
    .organizer-columns .score-panel > h2 { grid-area: awards; }
    .organizer-columns .score-panel > .scoreboard { grid-area: board; }
    .organizer-columns .score-panel > .manual-award { grid-area: manual; }
    .organizer-columns .score-panel > .ledger,
    .organizer-columns .score-panel > .muted:last-child { grid-area: ledger; }
}

.score-panel h2 {
    font-size: 1.25rem;
    margin: 1rem 0 0;
    color: #bbb;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.ledger {
    font-size: 1.1rem;
    max-height: 20rem;
    overflow-y: auto;
}

.ledger .round {
    color: #888;
    min-width: 5.5rem;
}

.ledger .delta {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

/* The Track an Award was won on: one line in the row, not the banner it is elsewhere. */

.ledger .track {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
}

.ledger .track-title,
.ledger .track-artist {
    font-size: 1rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ledger .reason {
    color: #bbb;
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ledger .undo {
    margin-left: auto;
}

/* Buzzer: the reveal's heading and a skipped Track */

.reveal-heading {
    font-size: 1.1rem;
    color: #bbb;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.reveal.skipped {
    background: #ffffff11;
}

.reveal-awards .none {
    color: #888;
    font-style: italic;
}

/* Buzzer: the Scoreboard and History under the button, and Game over */

.buzzer:has(.score-panel) {
    justify-content: flex-start;
}

.buzzer .score-panel {
    width: 100%;
    max-width: 30rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding-bottom: 2rem;
}

.buzzer .score-panel h2 {
    font-size: 1.1rem;
    color: #bbb;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 1.5rem 0 0.25rem;
    text-align: left;
}

.buzzer .score-panel .scoreboard li {
    font-size: 1.25rem;
}

.scoreboard li.mine {
    background: #1db95422;
}

.scoreboard li.mine .name {
    color: #1ed760;
    font-weight: 700;
}

.history {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    text-align: left;
}

/* Round number, Track, then the result pinned to its own column, so a Round
   with three Awards lines up with a Round with one instead of wrapping. */
.history li {
    display: grid;
    grid-template-columns: max-content 1fr minmax(6rem, max-content);
    align-items: baseline;
    gap: 0.25rem 1rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #333;
}

.history .round {
    color: #888;
    font-size: 0.9rem;
    white-space: nowrap;
}

.history .track {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.history .result {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    text-align: right;
}

.history .track-title {
    font-size: 1.1rem;
    font-weight: 700;
}

.history .track-artist {
    color: #bbb;
    font-size: 0.9rem;
}

.history .outcome {
    color: #888;
    font-style: italic;
}

.history li.skipped .track-title {
    color: #bbb;
}

.history .awards {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.history .awards li {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
    padding: 0;
    border: none;
    color: #bbb;
}

.history .awards li.mine {
    color: #1ed760;
    font-weight: 700;
}

.history .delta {
    font-variant-numeric: tabular-nums;
    min-width: 2.5ch;
    text-align: right;
}

/* The Awards with no Round behind them, which the History cannot account for. */
.hand-awards {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    text-align: left;
}

.hand-awards li {
    display: flex;
    align-items: baseline;
    gap: 0.25rem 1rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #333;
    color: #bbb;
}

.hand-awards .name {
    font-weight: 700;
}

.hand-awards .reason {
    color: #888;
    font-style: italic;
    flex: 1;
    min-width: 0;
}

.hand-awards .delta {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

.hand-awards li.mine {
    color: #1ed760;
}

.hand-awards li.mine .delta {
    font-weight: 700;
}

.game-over h1 {
    font-size: 3rem;
    margin: 1rem 0 0;
}

.buzzer .game-over {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
}

.status-ended {
    background: #6c8cff33;
    color: #9db3ff;
}