/* /Components/Layout/AICodingAssistant.razor.rz.scp.css */
/* AI Assistant Box */

#ai-assistant[b-kcecxn6hoy] {
    position: absolute;
    bottom: 64px;
    left: 9px;
    width: 188px;
    border: 1px solid transparent;
    border-radius: 11px;
    padding: 5px 16px;
    background: linear-gradient(var(--kendo-color-surface), var(--kendo-color-surface)) padding-box, linear-gradient(114deg, #4b5ffa 0%, #c158e4 93%) border-box;
}

    #ai-assistant[b-kcecxn6hoy]::before {
        content: "";
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: .18;
        background: url(ai-circle.png) center center no-repeat;
        background-size: cover;
    }

    #ai-assistant h4[b-kcecxn6hoy],
    #ai-assistant > p[b-kcecxn6hoy],
    #ai-assistant > a[b-kcecxn6hoy] {
        position: relative;
        padding-left: 41px;
        z-index: 2;
    }

    #ai-assistant h4[b-kcecxn6hoy] {
        position: relative;
        margin: 0 0 .3em;
        font-size: 20px;
        line-height: 1.4;
        font-weight: 500;
    }

    #ai-assistant .k-icon[b-kcecxn6hoy] {
        position: absolute;
        left: 0;
        top: 0;
        color: #4b5ffa;
    }

    #ai-assistant > a[b-kcecxn6hoy] {
        color: #a75ae9;
        text-decoration: none;
    }

        #ai-assistant > a:hover[b-kcecxn6hoy] {
            text-decoration: underline;
        }
/* /Components/Layout/JoinLayout.razor.rz.scp.css */
.join-main[b-di01xlfh61] {
    max-width: 560px;
    margin: 0 auto;
    padding: 14px 16px 40px;
    box-sizing: border-box;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* /Components/Pages/Accounts.razor.rz.scp.css */
.accounts[b-nbvvnarlg4] {
    display: grid;
    gap: 14px;
}

.accounts-head[b-nbvvnarlg4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.accounts-title[b-nbvvnarlg4] {
    margin: 0;
    font-family: var(--hz-font-display);
    font-size: 30px;
}

.accounts-intro[b-nbvvnarlg4] {
    font-size: 13px;
}

.accounts-message[b-nbvvnarlg4] {
    justify-self: start;
    white-space: normal;
}

.accounts-list[b-nbvvnarlg4] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

.account-row[b-nbvvnarlg4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--hz-border);
    border-radius: 14px;
    background: var(--hz-surface);
}

.account-text[b-nbvvnarlg4] {
    flex: 1;
    min-width: 160px;
}

.account-name[b-nbvvnarlg4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

.account-meta[b-nbvvnarlg4] {
    font-size: 12px;
}

.account-actions[b-nbvvnarlg4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.accounts-spacer[b-nbvvnarlg4] {
    flex: 1;
}

.account-password[b-nbvvnarlg4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.account-password input[b-nbvvnarlg4] {
    width: 170px;
    padding: 7px 10px;
    border: 1px solid var(--hz-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: inherit;
    font: inherit;
}
/* /Components/Pages/Favorites.razor.rz.scp.css */
.favorites-page[b-vr0fu7k0wv] {
    display: grid;
    gap: 16px;
    max-width: 760px;
}

.favorites-page-title[b-vr0fu7k0wv] {
    margin: 0;
    font-family: var(--hz-font-display);
    font-size: 30px;
}

.favorites-head[b-vr0fu7k0wv] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
/* /Components/Pages/Game.razor.rz.scp.css */
/* ---------- Setup ---------- */

.setup[b-qkcfrm9set] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
}

/* Both boxes are the same height; the start button sits at the bottom */
.setup-panel[b-qkcfrm9set] {
    display: flex;
    flex-direction: column;
}

.setup-panel .setup-fields[b-qkcfrm9set] {
    flex: 1;
}

@media (max-width: 960px) {
    .setup[b-qkcfrm9set] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.setup-fields[b-qkcfrm9set] {
    display: grid;
    gap: 16px;
}

.setup-field[b-qkcfrm9set] {
    display: grid;
    gap: 6px;
}

.setup-field > span[b-qkcfrm9set] {
    color: var(--hz-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.setup-inline[b-qkcfrm9set] {
    display: flex;
    gap: 8px;
}

.setup-row[b-qkcfrm9set] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.setup-row-3[b-qkcfrm9set] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.setup-points[b-qkcfrm9set] {
    display: grid;
    gap: 4px;
    margin: 0;
}

.setup-points > span[b-qkcfrm9set] {
    color: var(--hz-muted);
    font-size: 13px;
}

.setup[b-qkcfrm9set]  .spotify-btn {
    justify-self: start;
    border: none;
    background: #1db954;
    color: #04130a;
}

.setup[b-qkcfrm9set]  .spotify-btn:hover {
    background: #1ed760;
}

.setup[b-qkcfrm9set]  .setup-start {
    width: 100%;
    margin-top: 22px;
    font-size: 18px;
}

.setup-hint[b-qkcfrm9set] {
    margin-top: 8px;
    font-size: 13px;
    text-align: center;
}

.join-box[b-qkcfrm9set] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.2);
}

.qr-tile[b-qkcfrm9set] {
    flex: none;
    padding: 10px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.35), 0 12px 32px rgba(0, 0, 0, 0.4);
}

.qr-tile img[b-qkcfrm9set] {
    display: block;
    width: 170px;
    height: 170px;
}

.join-box-text[b-qkcfrm9set] {
    display: grid;
    flex: 1;
    gap: 4px;
    min-width: 0;
}

/* Only stack QR code and text when there's really no room */
@media (max-width: 520px) {
    .join-box[b-qkcfrm9set] {
        flex-wrap: wrap;
    }
}

.join-url[b-qkcfrm9set] {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.join-code[b-qkcfrm9set] {
    font-family: var(--hz-font-display);
    font-size: clamp(36px, 4vw, 56px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.12em;
}

.join-warning[b-qkcfrm9set] {
    max-width: 280px;
    margin-top: 8px;
    font-size: 12px;
}

.team-list[b-qkcfrm9set] {
    display: grid;
    gap: 8px;
    margin-top: 18px;
}

.team-empty[b-qkcfrm9set] {
    padding: 14px;
    border: 2px dashed var(--hz-border);
    border-radius: 12px;
    color: var(--hz-muted);
    text-align: center;
}

.team-row[b-qkcfrm9set] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--hz-border);
    border-radius: 14px;
    background: var(--hz-surface);
    animation: pop-in-b-qkcfrm9set 0.25s ease-out;
}

.team-row[b-qkcfrm9set]  .k-textbox {
    flex: 1;
    min-width: 0;
}

.team-device[b-qkcfrm9set] {
    font-size: 18px;
}

.team-add[b-qkcfrm9set] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@keyframes pop-in-b-qkcfrm9set {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

/* ---------- Game ---------- */

.stagebar[b-qkcfrm9set] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.stagebar-spacer[b-qkcfrm9set] {
    flex: 1;
}

.scoreboard[b-qkcfrm9set] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.score-tile[b-qkcfrm9set] {
    display: grid;
    gap: 10px;
    padding: 16px;
    border: 1px solid var(--hz-border);
    border-radius: var(--hz-radius);
    background: var(--hz-surface);
    transition: transform 0.2s, box-shadow 0.2s;
}

.score-head[b-qkcfrm9set] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.score-name[b-qkcfrm9set] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.score-points b[b-qkcfrm9set] {
    font-family: var(--hz-font-display);
    font-size: 40px;
    line-height: 1;
}

.score-cards[b-qkcfrm9set] {
    font-size: 13px;
}

.winner[b-qkcfrm9set] {
    display: grid;
    justify-items: center;
    gap: 8px;
    margin-bottom: 20px;
    text-align: center;
}

.winner-trophy[b-qkcfrm9set] {
    font-size: 64px;
    animation: pop-in-b-qkcfrm9set 0.4s ease-out;
}

.winner-name[b-qkcfrm9set] {
    margin-bottom: 10px;
    font-family: var(--hz-font-display);
    font-size: 48px;
    font-weight: 700;
}

/* ---------- Turn (shared) ---------- */

.turn-stage-text[b-qkcfrm9set] {
    display: grid;
    justify-items: start;
    gap: 10px;
}

.turn-state[b-qkcfrm9set] {
    font-family: var(--hz-font-display);
    font-size: 24px;
    font-weight: 600;
}

.turn-section-head[b-qkcfrm9set] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.turn-hint[b-qkcfrm9set] {
    font-size: 13px;
    text-align: center;
}

.answer[b-qkcfrm9set] {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 18px;
    padding: 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--card-color) 30%, transparent), rgba(255, 255, 255, 0.03));
    border: 1px solid color-mix(in srgb, var(--card-color) 60%, transparent);
    animation: pop-in-b-qkcfrm9set 0.3s ease-out;
}

.answer-head[b-qkcfrm9set] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.answer-year[b-qkcfrm9set] {
    display: grid;
    place-items: center;
    align-self: stretch;
    min-width: 130px;
    padding: 10px;
    border-radius: 14px;
    background: linear-gradient(150deg, var(--card-color), color-mix(in srgb, var(--card-color) 55%, #000));
    font-family: var(--hz-font-display);
    font-size: 44px;
    font-weight: 700;
}

.answer-rows[b-qkcfrm9set] {
    flex: 1;
    display: grid;
    gap: 6px;
    min-width: 260px;
}

.answer-row[b-qkcfrm9set] {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr) auto 44px;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.answer-label[b-qkcfrm9set] {
    color: var(--hz-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.answer-value[b-qkcfrm9set] {
    font-size: 17px;
    font-weight: 700;
}

.answer-points[b-qkcfrm9set] {
    font-family: var(--hz-font-display);
    font-size: 18px;
    text-align: right;
}

.turn-actions-spacer[b-qkcfrm9set] {
    flex: 1;
}

/* Segmented switch: game ends at score / after rounds */
.end-mode[b-qkcfrm9set] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 3px;
    border: 1px solid var(--hz-border);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.25);
}

.end-mode-option[b-qkcfrm9set] {
    padding: 5px 8px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--hz-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.end-mode-option:hover[b-qkcfrm9set] {
    color: var(--hz-text, #fff);
}

.end-mode-option.active[b-qkcfrm9set] {
    background: var(--hz-gradient);
    color: #fff;
}

.setup-links[b-qkcfrm9set] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.preview-length[b-qkcfrm9set] {
    gap: 4px;
}

.volume[b-qkcfrm9set] {
    gap: 8px;
    margin: 0;
}

.volume input[type="range"][b-qkcfrm9set] {
    width: 110px;
    margin: 0;
    accent-color: var(--hz-accent);
    cursor: pointer;
}

.volume b[b-qkcfrm9set] {
    min-width: 3.2em;
    text-align: right;
}

.volume-off[b-qkcfrm9set] {
    color: var(--hz-muted);
}

.preview-step[b-qkcfrm9set] {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--hz-border);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.25);
    color: inherit;
    font: inherit;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.preview-step:hover:not(:disabled)[b-qkcfrm9set] {
    border-color: var(--hz-accent);
    background: color-mix(in srgb, var(--hz-accent) 30%, transparent);
}

.preview-step:disabled[b-qkcfrm9set] {
    opacity: 0.35;
    cursor: default;
}

.setup-skip[b-qkcfrm9set] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.setup-skip[b-qkcfrm9set]  .k-numerictextbox {
    width: 110px;
    flex: none;
}

.setup-skip > span[b-qkcfrm9set] {
    font-size: 13px;
}


.answer-note[b-qkcfrm9set] {
    padding: 4px 10px;
    font-size: 13px;
    font-weight: 600;
}

.played-info[b-qkcfrm9set] {
    font-size: 12px;
}

.played-reset[b-qkcfrm9set] {
    padding: 0;
    border: 0;
    background: none;
    color: var(--hz-accent-2);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.device-hint[b-qkcfrm9set] {
    font-size: 12px;
}

/* ---------- Play view (host, tablet-first) ---------- */

.play[b-qkcfrm9set] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

.play-head[b-qkcfrm9set] {
    display: grid;
    gap: 10px;
}

.play-stage[b-qkcfrm9set] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    padding: 16px 20px;
    background:
        radial-gradient(circle at 15% 50%, rgba(139, 92, 246, 0.22), transparent 60%),
        var(--hz-surface);
}

.play-timeline[b-qkcfrm9set] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 14px 0;
}

/* The panel's inner parts keep the side padding, the timeline itself scrolls edge to edge */
.play-timeline > .turn-section-head[b-qkcfrm9set],
.play-timeline > .turn-hint[b-qkcfrm9set] {
    padding: 0 16px;
}

.play-actions[b-qkcfrm9set] {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: grid;
    gap: 6px;
    margin: 0 -8px;
    padding: 10px 8px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--hz-border);
    background: color-mix(in srgb, var(--hz-bg) 88%, transparent);
    backdrop-filter: blur(10px);
}

.play-actions-row[b-qkcfrm9set] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.play-actions-hint[b-qkcfrm9set] {
    font-size: 13px;
    text-align: center;
}

.play-actions[b-qkcfrm9set]  .turn-advance {
    min-width: 200px;
    min-height: 52px;
    font-size: 19px;
}

/* Touch-friendly answer rows: the whole row toggles the checkbox */
.answer-row[b-qkcfrm9set] {
    min-height: 48px;
}

.turn-log[b-qkcfrm9set] {
    margin-top: 18px;
}

.turn-log > summary[b-qkcfrm9set] {
    margin: 0;
    cursor: pointer;
}

.turn-log[open] > summary[b-qkcfrm9set] {
    margin-bottom: 12px;
}

/* iPad portrait / small screens: stack the controls, keep the main button full width */
@media (max-width: 860px) {
    .play-actions-row[b-qkcfrm9set] {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .play-actions-row .turn-actions-spacer[b-qkcfrm9set] {
        display: none;
    }

    .play-actions[b-qkcfrm9set]  .turn-advance {
        grid-column: 1 / -1;
        order: -1;
        width: 100%;
    }

    .play-stage[b-qkcfrm9set] {
        justify-content: center;
    }
}

.cancel-confirm[b-qkcfrm9set] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 4px 4px 4px 12px;
    border: 1px solid color-mix(in srgb, var(--hz-error) 60%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--hz-error) 14%, transparent);
    font-size: 14px;
    font-weight: 600;
}

/* Playlist search results */
.playlist-results[b-qkcfrm9set] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    max-height: 320px;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--hz-border);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.25);
}

.playlist-results-head[b-qkcfrm9set] {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 0 4px 4px;
    font-size: 12px;
}

.playlist-result[b-qkcfrm9set] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px;
    border-radius: 10px;
}

.playlist-result:hover[b-qkcfrm9set] {
    background: var(--hz-surface);
}

.playlist-result-text[b-qkcfrm9set] {
    flex: 1;
    min-width: 0;
}

.playlist-result-name[b-qkcfrm9set],
.playlist-result-meta[b-qkcfrm9set] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.playlist-result-name[b-qkcfrm9set] {
    font-weight: 600;
}

.playlist-result-meta[b-qkcfrm9set] {
    font-size: 12px;
}

/* ---------- iPhone / phones ---------- */

@media (max-width: 600px) {
    .setup[b-qkcfrm9set] {
        gap: 12px;
    }

    .setup-links[b-qkcfrm9set] {
        margin-bottom: 8px;
    }

    .setup-row[b-qkcfrm9set] {
        gap: 8px;
    }

    .join-box[b-qkcfrm9set] {
        gap: 12px;
        padding: 12px;
    }

    .qr-tile[b-qkcfrm9set] {
        padding: 6px;
    }

    .qr-tile img[b-qkcfrm9set] {
        width: 120px;
        height: 120px;
    }

    .join-warning[b-qkcfrm9set],
    .join-warning code[b-qkcfrm9set] {
        overflow-wrap: anywhere;
    }

    /* Smaller pills so round, code, preview and the cancel button take two rows at most */
    .stagebar[b-qkcfrm9set] {
        gap: 6px;
        margin-bottom: 10px;
    }

    .stagebar .hz-pill[b-qkcfrm9set] {
        padding: 4px 9px;
        font-size: 12px;
    }

    .stagebar .hz-pill b[b-qkcfrm9set] {
        font-size: 14px;
    }

    .play[b-qkcfrm9set] {
        gap: 10px;
    }

    /* Countdown next to the text instead of above it */
    .play-stage[b-qkcfrm9set] {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 14px;
        padding: 12px 14px;
    }

    .play-stage[b-qkcfrm9set]  .ring {
        width: 84px !important;
        height: 84px !important;
    }

    .play-stage[b-qkcfrm9set]  .ring-seconds {
        font-size: 26px !important;
    }

    .turn-stage-text[b-qkcfrm9set] {
        gap: 6px;
        min-width: 0;
    }

    .turn-state[b-qkcfrm9set] {
        font-size: 18px;
    }

    .answer[b-qkcfrm9set] {
        gap: 12px;
        padding: 12px;
    }

    .answer-head[b-qkcfrm9set] {
        width: 100%;
    }

    .answer-head[b-qkcfrm9set]  .cover {
        --cover-size: 84px !important;
    }

    .answer-year[b-qkcfrm9set] {
        flex: 1;
        min-width: 0;
        font-size: 38px;
    }

    .answer-rows[b-qkcfrm9set] {
        min-width: 0;
    }

    .answer-row[b-qkcfrm9set] {
        grid-template-columns: 70px minmax(0, 1fr) auto 30px;
        gap: 8px;
        padding: 8px;
    }

    .answer-label[b-qkcfrm9set] {
        font-size: 11px;
    }

    .answer-value[b-qkcfrm9set] {
        font-size: 15px;
    }

    .answer-points[b-qkcfrm9set] {
        font-size: 16px;
    }

    .turn-section-head[b-qkcfrm9set] {
        font-size: 14px;
    }

    .play-actions[b-qkcfrm9set] {
        margin: 0 -12px;
        padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    }

    .play-actions-row[b-qkcfrm9set] {
        gap: 6px;
    }

    /* Stop / Play again / Skip: small secondary buttons in one row, icon and text side by side */
    .play-actions-row[b-qkcfrm9set]  .play-control {
        min-width: 0;
        min-height: 38px;
        padding: 4px 6px;
        gap: 4px;
        font-size: 13px;
        white-space: nowrap;
    }

    .play-actions-row[b-qkcfrm9set]  .play-control .k-svg-icon {
        flex: none;
        width: 14px;
        height: 14px;
    }

    .play-actions-row[b-qkcfrm9set]  .play-control .k-button-text {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .play-actions[b-qkcfrm9set]  .turn-advance {
        min-height: 50px;
        font-size: 18px;
    }

    .winner-name[b-qkcfrm9set] {
        font-size: 36px;
    }

    /* Turn log: small text, tight cells, long names wrap instead of being cut off */
    .turn-log[b-qkcfrm9set] {
        padding: 12px 10px;
    }

    .turn-log[b-qkcfrm9set]  .turn-log-compact {
        font-size: 11px;
    }

    .turn-log[b-qkcfrm9set]  .turn-log-compact .k-table-th,
    .turn-log[b-qkcfrm9set]  .turn-log-compact .k-table-td {
        padding: 5px 4px;
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.3;
    }

    .turn-log[b-qkcfrm9set]  .turn-log-compact .k-pager {
        flex-wrap: wrap;
        gap: 4px;
        padding: 6px 4px;
        font-size: 12px;
    }

    .turn-log[b-qkcfrm9set]  .turn-log-compact .k-pager-info {
        display: none;
    }
}

/* "Modify last move": correct the judgement of the last scored turn */
.edit-last-open[b-qkcfrm9set] {
    color: inherit;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.edit-last-open:hover[b-qkcfrm9set] {
    border-color: rgba(139, 92, 246, 0.7);
    background: rgba(139, 92, 246, 0.18);
}

.edit-last[b-qkcfrm9set] {
    display: grid;
    gap: 12px;
    margin-bottom: 18px;
    border-color: color-mix(in srgb, var(--hz-accent) 70%, transparent);
}

.edit-last-head[b-qkcfrm9set] {
    display: grid;
    gap: 2px;
}

.edit-last-actions[b-qkcfrm9set] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.edit-last[b-qkcfrm9set]  .edit-last-year input {
    font-family: var(--hz-font-display);
    font-size: 18px;
    font-weight: 700;
}

.answer-extras[b-qkcfrm9set] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* "± Scores": the host corrects scores by hand */
.score-edit-row[b-qkcfrm9set] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 12px;
    background: linear-gradient(100deg, color-mix(in srgb, var(--team-color) 22%, transparent), transparent 70%), rgba(0, 0, 0, 0.2);
}

.score-edit-name[b-qkcfrm9set] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.score-edit-step[b-qkcfrm9set] {
    flex: none;
    min-width: 44px;
    height: 40px;
    border: 1px solid var(--hz-border);
    border-radius: 10px;
    background: var(--hz-surface);
    color: inherit;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.score-edit-step:hover:not(:disabled)[b-qkcfrm9set] {
    background: var(--hz-surface-strong);
}

.score-edit-step:disabled[b-qkcfrm9set] {
    opacity: 0.4;
    cursor: default;
}

.score-edit-score[b-qkcfrm9set] {
    min-width: 44px;
    font-family: var(--hz-font-display);
    font-size: 24px;
    text-align: center;
}

/* Three end modes: score, cards, rounds */
.end-mode.end-mode-3[b-qkcfrm9set] {
    grid-template-columns: repeat(3, 1fr);
}

/* A checkbox with its label (e.g. "Exact year bonus") */
.setup-toggle[b-qkcfrm9set] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.variant-hint[b-qkcfrm9set] {
    font-size: 13px;
}

/* "All at once": choose the team without a phone to place for */
.placing-for[b-qkcfrm9set] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 12px 0 8px;
}

.placing-for .placing-active[b-qkcfrm9set] {
    border-color: var(--hz-accent);
    background: color-mix(in srgb, var(--hz-accent) 28%, transparent);
}

/* Mid-game device change (stagebar "🔊 <device>") */
.device-edit-row[b-qkcfrm9set] {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* The host's own favorite in the answer view */
.answer-extras .host-fav-saved[b-qkcfrm9set] {
    border-color: var(--hz-error);
    color: var(--hz-error);
}
/* /Components/Pages/History.razor.rz.scp.css */
.history-page[b-2e2w70c0ym] {
    display: grid;
    gap: 16px;
}

.history-title[b-2e2w70c0ym] {
    margin: 0;
    font-family: var(--hz-font-display);
    font-size: 30px;
}

.history-head[b-2e2w70c0ym] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
/* /Components/Pages/Join.razor.rz.scp.css */
.join[b-mnxsuiu9a6] {
    display: grid;
    gap: 18px;
    font-size: 15px;
}

.join-top[b-mnxsuiu9a6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.join-card[b-mnxsuiu9a6] {
    display: grid;
    gap: 12px;
}

.join-card h2[b-mnxsuiu9a6] {
    font-size: 24px;
}

/* ---------- My team ---------- */

.me[b-mnxsuiu9a6] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.me-text[b-mnxsuiu9a6] {
    flex: 1;
    display: grid;
    gap: 6px;
    min-width: 0;
}

.me-name[b-mnxsuiu9a6] {
    overflow: hidden;
    font-family: var(--hz-font-display);
    font-size: 22px;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.me-score b[b-mnxsuiu9a6] {
    font-family: var(--hz-font-display);
    font-size: 30px;
}

/* ---------- Status ---------- */

.status[b-mnxsuiu9a6] {
    display: grid;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--hz-border);
    border-radius: var(--hz-radius);
    background: var(--hz-surface);
}

.status.my-turn[b-mnxsuiu9a6] {
    border: 2px solid transparent;
    background:
        linear-gradient(#1a1636, #1a1636) padding-box,
        var(--hz-gradient) border-box;
    box-shadow: 0 0 28px rgba(139, 92, 246, 0.35);
}

.status.placing[b-mnxsuiu9a6] {
    animation: glow-b-mnxsuiu9a6 1.8s ease-in-out infinite;
}

.status-big[b-mnxsuiu9a6] {
    font-family: var(--hz-font-display);
    font-size: 22px;
    font-weight: 700;
}

.status-row[b-mnxsuiu9a6] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.status-teams[b-mnxsuiu9a6] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.status-choice[b-mnxsuiu9a6] {
    margin-top: 4px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.25);
}

.status-result[b-mnxsuiu9a6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-weight: 600;
}

.status-points[b-mnxsuiu9a6] {
    font-family: var(--hz-font-display);
    font-size: 26px;
}

.status-trophy[b-mnxsuiu9a6] {
    font-size: 48px;
}

.answer[b-mnxsuiu9a6] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--card-color) 22%, transparent);
}

.answer-year[b-mnxsuiu9a6] {
    flex: none;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--card-color);
    font-family: var(--hz-font-display);
    font-size: 26px;
    font-weight: 700;
}

.answer-text[b-mnxsuiu9a6] {
    min-width: 0;
}

.answer-artist[b-mnxsuiu9a6] {
    font-weight: 700;
}

@keyframes glow-b-mnxsuiu9a6 {
    50% { box-shadow: 0 0 44px rgba(34, 211, 238, 0.45); }
}

/* ---------- Lists ---------- */

.section-title[b-mnxsuiu9a6] {
    margin-bottom: 8px;
    font-size: 17px;
}

.section-title .text-muted[b-mnxsuiu9a6] {
    font-family: var(--hz-font-body);
    font-size: 13px;
    font-weight: 400;
}

.history[b-mnxsuiu9a6] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
}

.history-row[b-mnxsuiu9a6] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px 6px 6px;
    border-radius: 10px;
    /* Light tint in the song's decade color */
    background: linear-gradient(100deg, color-mix(in srgb, var(--card-color, transparent) 26%, transparent), color-mix(in srgb, var(--card-color, transparent) 6%, transparent) 65%, transparent), var(--hz-surface);
}

.history-year[b-mnxsuiu9a6] {
    flex: none;
    width: 52px;
    padding: 5px 0;
    border-radius: 8px;
    background: var(--card-color);
    font-family: var(--hz-font-display);
    font-weight: 700;
    text-align: center;
}

.history-text[b-mnxsuiu9a6] {
    flex: 1;
    min-width: 0;
}

.history-artist[b-mnxsuiu9a6],
.history-title[b-mnxsuiu9a6] {
    overflow: hidden;
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.history-artist[b-mnxsuiu9a6] {
    font-weight: 700;
}

.history-title[b-mnxsuiu9a6] {
    color: var(--hz-muted);
}

.history-marks[b-mnxsuiu9a6] {
    display: flex;
    gap: 10px;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 600;
}

.history-points[b-mnxsuiu9a6] {
    font-family: var(--hz-font-display);
    font-size: 18px;
}

.join-card[b-mnxsuiu9a6]  .code-input input {
    font-family: var(--hz-font-display);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-align: center;
    text-transform: uppercase;
}


.skip[b-mnxsuiu9a6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.skip-hint[b-mnxsuiu9a6] {
    font-size: 12px;
}

.history-skipped[b-mnxsuiu9a6] {
    color: #f59e0b;
}

.history-points.minus[b-mnxsuiu9a6] {
    color: var(--hz-error);
}

.favorite[b-mnxsuiu9a6] {
    display: flex;
    margin-top: 6px;
}

.history-info[b-mnxsuiu9a6] {
    flex: none;
    width: 32px;
    height: 32px;
    border: 1px solid var(--hz-border);
    border-radius: 50%;
    background: transparent;
    color: var(--hz-muted);
    font-size: 15px;
    cursor: pointer;
}

.reveal[b-mnxsuiu9a6] {
    display: grid;
    margin-top: 6px;
}

/* ---------- Timeline frames: the team on turn and your own, in the team colors ---------- */

.tl-frame[b-mnxsuiu9a6] {
    padding: 12px;
    border: 2px solid color-mix(in srgb, var(--frame-color) 55%, transparent);
    border-radius: var(--hz-radius);
}

/* Your own timeline: soft wash from the bottom right */
.tl-frame.mine[b-mnxsuiu9a6] {
    background: linear-gradient(320deg, color-mix(in srgb, var(--frame-color) 22%, transparent), color-mix(in srgb, var(--frame-color) 4%, transparent) 70%);
}

/* The team on turn: stronger wash from the top left and a glow */
.tl-frame.on-turn[b-mnxsuiu9a6] {
    border-color: color-mix(in srgb, var(--frame-color) 85%, transparent);
    background: linear-gradient(150deg, color-mix(in srgb, var(--frame-color) 34%, transparent), color-mix(in srgb, var(--frame-color) 8%, transparent) 60%, transparent);
    box-shadow: 0 0 24px color-mix(in srgb, var(--frame-color) 30%, transparent);
}

.tl-frame .section-title[b-mnxsuiu9a6] {
    margin-top: 0;
}

/* Favorites, history, user and log out side by side (also on an iPhone) */
.join-nav[b-mnxsuiu9a6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.join-nav-spacer[b-mnxsuiu9a6] {
    flex: 1;
}

.join-nav .hz-pill[b-mnxsuiu9a6] {
    font-size: 13px;
    white-space: nowrap;
}
/* /Components/Pages/JoinFavorites.razor.rz.scp.css */
.join-favorites[b-x53vthrx2a] {
    display: grid;
    gap: 16px;
    font-size: 15px;
}

.join-favorites-top[b-x53vthrx2a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
/* /Components/Pages/JoinHistory.razor.rz.scp.css */
.join-history[b-pjxt1wi5ye] {
    display: grid;
    gap: 16px;
    font-size: 15px;
}

.join-history-top[b-pjxt1wi5ye] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.join-history-title[b-pjxt1wi5ye] {
    margin: 0;
    font-family: var(--hz-font-display);
    font-size: 24px;
}
/* /Components/Pages/Login.razor.rz.scp.css */
.login[b-jumb3xg0e2] {
    display: grid;
    gap: 18px;
    max-width: 420px;
    margin: 0 auto;
    padding-top: 10px;
}

.login-logo[b-jumb3xg0e2] {
    display: flex;
    justify-content: center;
}

.login-card[b-jumb3xg0e2] {
    display: grid;
    gap: 14px;
}

.login-tabs[b-jumb3xg0e2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 3px;
    border: 1px solid var(--hz-border);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.25);
}

.login-tab[b-jumb3xg0e2] {
    padding: 8px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--hz-muted);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.login-tab.active[b-jumb3xg0e2] {
    background: var(--hz-gradient);
    color: #fff;
}

.login-intro[b-jumb3xg0e2],
.login-hint[b-jumb3xg0e2] {
    font-size: 13px;
}

.login-form[b-jumb3xg0e2] {
    display: grid;
    gap: 12px;
}

.login-field[b-jumb3xg0e2] {
    display: grid;
    gap: 6px;
}

.login-field > span[b-jumb3xg0e2] {
    color: var(--hz-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.login-title[b-jumb3xg0e2] {
    margin: 0;
    font-family: var(--hz-font-display);
    font-size: 24px;
}
/* /Components/Ui/AlbumCover.razor.rz.scp.css */
.cover[b-htb6e3brj4] {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: var(--cover-size);
    height: var(--cover-size);
    overflow: hidden;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.cover img[b-htb6e3brj4] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cover-placeholder[b-htb6e3brj4] {
    color: rgba(255, 255, 255, 0.6);
    font-size: calc(var(--cover-size) * 0.45);
    line-height: 1;
}
/* /Components/Ui/CoopStatus.razor.rz.scp.css */
.coop-status[b-gakxw43se2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    padding: 10px 14px;
    border: 1px solid var(--hz-border);
    border-radius: var(--hz-radius);
    background: linear-gradient(110deg, rgba(244, 63, 94, 0.16), rgba(34, 211, 238, 0.1));
}

.coop-lives[b-gakxw43se2] {
    display: flex;
    gap: 4px;
    font-size: 24px;
    line-height: 1;
}

.coop-heart.lost[b-gakxw43se2] {
    opacity: 0.45;
}

.coop-progress[b-gakxw43se2] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
    font-size: 15px;
}

.coop-progress .hz-progress[b-gakxw43se2] {
    flex: 1;
}

.coop-progress b[b-gakxw43se2] {
    font-family: var(--hz-font-display);
    font-size: 22px;
}

.compact[b-gakxw43se2] {
    padding: 8px 10px;
}

.compact .coop-lives[b-gakxw43se2] {
    font-size: 20px;
}
/* /Components/Ui/CountdownRing.razor.rz.scp.css */
.ring[b-xag9xc9fzl] {
    position: relative;
    flex: none;
}

.ring svg[b-xag9xc9fzl] {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.ring-track[b-xag9xc9fzl] {
    fill: none;
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 8;
}

.ring-value[b-xag9xc9fzl] {
    fill: none;
    stroke: url(#ringGradient);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.9s linear;
}

.ring-label[b-xag9xc9fzl] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.ring-seconds[b-xag9xc9fzl] {
    font-family: var(--hz-font-display);
    font-weight: 700;
}

.ring-unit[b-xag9xc9fzl] {
    color: var(--hz-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
/* /Components/Ui/Equalizer.razor.rz.scp.css */
.eq[b-mq4ogci8ur] {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    height: 36px;
}

.eq span[b-mq4ogci8ur] {
    width: 7px;
    height: 100%;
    border-radius: 3px;
    background: var(--bar-color);
    transform-origin: bottom;
    transform: scaleY(0.25);
    opacity: 0.55;
}

.eq.on span[b-mq4ogci8ur] {
    opacity: 1;
    animation: eq-bounce-b-mq4ogci8ur 0.9s ease-in-out var(--bar-delay) infinite alternate;
}

@keyframes eq-bounce-b-mq4ogci8ur {
    0% { transform: scaleY(0.2); }
    50% { transform: scaleY(1); }
    100% { transform: scaleY(0.45); }
}

@media (prefers-reduced-motion: reduce) {
    .eq.on span[b-mq4ogci8ur] {
        animation: none;
        transform: scaleY(0.7);
    }
}
/* /Components/Ui/FavoritesList.razor.rz.scp.css */
.favorites-list[b-hehbd0oiom] {
    display: grid;
    gap: 16px;
    font-size: 15px;
}

.favorites-title[b-hehbd0oiom] {
    margin: 0;
    font-family: var(--hz-font-display);
    font-size: 24px;
}

.favorites-title .text-muted[b-hehbd0oiom] {
    font-family: var(--hz-font-body);
    font-size: 14px;
    font-weight: 400;
}

.favorites[b-hehbd0oiom] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
}

.favorite-row[b-hehbd0oiom] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px;
    border-radius: 10px;
    /* Light tint in the song's decade color */
    background: linear-gradient(100deg, color-mix(in srgb, var(--card-color, transparent) 26%, transparent), color-mix(in srgb, var(--card-color, transparent) 6%, transparent) 65%, transparent), var(--hz-surface);
}

.favorite-row.secret[b-hehbd0oiom] {
    opacity: 0.7;
}

.favorite-year[b-hehbd0oiom] {
    flex: none;
    width: 52px;
    padding: 5px 0;
    border-radius: 8px;
    background: var(--card-color, var(--hz-border));
    font-family: var(--hz-font-display);
    font-weight: 700;
    text-align: center;
}

.favorite-text[b-hehbd0oiom] {
    flex: 1;
    min-width: 0;
}

.favorite-artist[b-hehbd0oiom],
.favorite-title[b-hehbd0oiom] {
    overflow: hidden;
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.favorite-artist[b-hehbd0oiom] {
    font-weight: 700;
}

.favorite-title[b-hehbd0oiom] {
    color: var(--hz-muted);
}

.favorite-remove[b-hehbd0oiom] {
    flex: none;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--hz-muted);
    font-size: 14px;
    cursor: pointer;
}

.favorite-remove:hover[b-hehbd0oiom] {
    color: var(--hz-error);
}

.favorite-info[b-hehbd0oiom] {
    flex: none;
    width: 32px;
    height: 32px;
    border: 1px solid var(--hz-border);
    border-radius: 50%;
    background: transparent;
    color: var(--hz-muted);
    font-size: 15px;
    cursor: pointer;
}
/* /Components/Ui/GameHistoryView.razor.rz.scp.css */
.gh[b-7gq5qzkz45] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

.gh-toolbar[b-7gq5qzkz45] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.gh-toolbar[b-7gq5qzkz45]  .gh-filter {
    width: 240px;
    max-width: 100%;
}

.gh-count[b-7gq5qzkz45] {
    font-size: 13px;
}

.gh-empty[b-7gq5qzkz45] {
    padding: 24px;
    border: 2px dashed var(--hz-border);
    border-radius: 14px;
    color: var(--hz-muted);
    text-align: center;
}

.gh-list[b-7gq5qzkz45] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
}

.compact .gh-list[b-7gq5qzkz45] {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

.gh-game[b-7gq5qzkz45] {
    display: grid;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--hz-border);
    border-radius: var(--hz-radius);
    background: var(--hz-surface);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s;
}

.gh-game:hover[b-7gq5qzkz45] {
    border-color: color-mix(in srgb, var(--hz-accent) 70%, transparent);
    transform: translateY(-2px);
}

.gh-game-head[b-7gq5qzkz45] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.gh-date[b-7gq5qzkz45] {
    font-family: var(--hz-font-display);
    font-size: 17px;
    font-weight: 600;
}

.gh-rank.won[b-7gq5qzkz45] {
    background: var(--hz-gradient);
    color: #fff;
}

.gh-meta[b-7gq5qzkz45] {
    font-size: 13px;
}

.gh-teams[b-7gq5qzkz45] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.gh-team[b-7gq5qzkz45] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 3px 10px;
    border: 1px solid color-mix(in srgb, var(--team-color) 55%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--team-color) 18%, var(--hz-surface));
    font-size: 13px;
}

.gh-team.me[b-7gq5qzkz45] {
    border-width: 2px;
    border-color: var(--team-color);
    background: color-mix(in srgb, var(--team-color) 40%, var(--hz-surface));
}

.gh-team-name[b-7gq5qzkz45] {
    min-width: 0;
    max-width: 140px;
    overflow: hidden;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.gh-team b[b-7gq5qzkz45] {
    font-family: var(--hz-font-display);
    font-size: 15px;
}

/* ---------- Details ---------- */

.gh-detail[b-7gq5qzkz45] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    gap: 12px;
}

.gh-detail-head[b-7gq5qzkz45] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 6px;
}

.gh-trophy[b-7gq5qzkz45] {
    font-size: 48px;
}

.gh-winner[b-7gq5qzkz45] {
    font-family: var(--hz-font-display);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
}

.gh-result[b-7gq5qzkz45] {
    min-width: 0;
    border: 1px solid var(--hz-border);
    border-radius: 14px;
    background: var(--hz-surface);
}

.gh-result.me[b-7gq5qzkz45] {
    border-color: var(--team-color);
    box-shadow: 0 0 18px color-mix(in srgb, var(--team-color) 35%, transparent);
}

.gh-result summary[b-7gq5qzkz45] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    list-style: none;
}

.gh-result summary[b-7gq5qzkz45]::-webkit-details-marker {
    display: none;
}

.gh-result summary[b-7gq5qzkz45]::after {
    content: "▾";
    color: var(--hz-muted);
    transition: transform 0.15s;
}

.gh-result[open] summary[b-7gq5qzkz45]::after {
    transform: rotate(180deg);
}

.gh-place[b-7gq5qzkz45] {
    width: 26px;
    font-family: var(--hz-font-display);
    font-size: 18px;
    color: var(--hz-muted);
}

.gh-result-name[b-7gq5qzkz45] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.gh-result-cards[b-7gq5qzkz45] {
    font-size: 13px;
}

.gh-result-score[b-7gq5qzkz45] {
    min-width: 36px;
    font-family: var(--hz-font-display);
    font-size: 24px;
    text-align: right;
}

.gh-result-body[b-7gq5qzkz45] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 0 12px 12px;
}

.gh-turns[b-7gq5qzkz45] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
}

.gh-turn[b-7gq5qzkz45] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px 6px 6px;
    border-radius: 10px;
    /* Light tint in the song's decade color */
    background: linear-gradient(100deg, color-mix(in srgb, var(--card-color, transparent) 26%, transparent), color-mix(in srgb, var(--card-color, transparent) 6%, transparent) 65%, transparent), rgba(0, 0, 0, 0.2);
}

.gh-turn-year[b-7gq5qzkz45] {
    flex: none;
    width: 52px;
    padding: 5px 0;
    border-radius: 8px;
    background: var(--card-color);
    font-family: var(--hz-font-display);
    font-weight: 700;
    text-align: center;
}

.gh-turn-text[b-7gq5qzkz45] {
    flex: 1;
    min-width: 0;
}

.gh-turn-artist[b-7gq5qzkz45],
.gh-turn-title[b-7gq5qzkz45] {
    overflow: hidden;
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.gh-turn-artist[b-7gq5qzkz45] {
    font-weight: 700;
}

.gh-turn-title[b-7gq5qzkz45] {
    color: var(--hz-muted);
}

.gh-turn-marks[b-7gq5qzkz45] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 600;
}

.gh-turn-points[b-7gq5qzkz45] {
    font-family: var(--hz-font-display);
    font-size: 18px;
}

.compact .gh-winner[b-7gq5qzkz45] {
    font-size: 24px;
}

.compact .gh-trophy[b-7gq5qzkz45] {
    font-size: 36px;
}

.gh-turn-marks span[b-7gq5qzkz45] {
    white-space: nowrap;
}

.compact .gh-detail[b-7gq5qzkz45] {
    padding: 12px;
}

.compact .gh-result summary[b-7gq5qzkz45] {
    padding: 8px 10px;
}

.compact .gh-result-body[b-7gq5qzkz45] {
    padding: 0 8px 8px;
}

.gh-turn-skipped[b-7gq5qzkz45] {
    color: #f59e0b;
}

.gh-turn-points.minus[b-7gq5qzkz45] {
    color: var(--hz-error);
}

/* Narrow screens (e.g. the host page on an iPhone): same tight layout as on the phone page */
@media (max-width: 520px) {
    .gh-detail[b-7gq5qzkz45] {
        padding: 12px;
    }

    .gh-result summary[b-7gq5qzkz45] {
        padding: 8px 10px;
    }

    .gh-result-body[b-7gq5qzkz45] {
        padding: 0 8px 8px;
    }

    /* The song list below shows the same songs */
    .gh-result-body[b-7gq5qzkz45]  .timeline-scroll {
        display: none;
    }

    .gh-winner[b-7gq5qzkz45] {
        font-size: 24px;
    }

    .gh-trophy[b-7gq5qzkz45] {
        font-size: 36px;
    }
}

.gh-turn-info[b-7gq5qzkz45] {
    flex: none;
    width: 30px;
    height: 30px;
    border: 1px solid var(--hz-border);
    border-radius: 50%;
    background: transparent;
    color: var(--hz-muted);
    font-size: 14px;
    cursor: pointer;
}

/* ♡/♥: save a song of a finished game to the favorites */
.gh-turn-fav[b-7gq5qzkz45] {
    flex: none;
    width: 30px;
    height: 30px;
    border: 1px solid var(--hz-border);
    border-radius: 50%;
    background: transparent;
    color: var(--hz-muted);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.gh-turn-fav:hover[b-7gq5qzkz45],
.gh-turn-fav.saved[b-7gq5qzkz45] {
    border-color: var(--hz-error);
    color: var(--hz-error);
}

.gh-turn-unsave[b-7gq5qzkz45] {
    flex: none;
    font-size: 12px;
}

/* Host: "Delete game" sits at the right end of the detail toolbar */
.gh-toolbar-spacer[b-7gq5qzkz45] {
    flex: 1;
}
/* /Components/Ui/GuessResults.razor.rz.scp.css */
.guess-results[b-5kvcijdier] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
}

.guess-row[b-5kvcijdier] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px 6px 6px;
    border-radius: 10px;
    background: linear-gradient(100deg, color-mix(in srgb, var(--team-color) 20%, transparent), transparent 70%), rgba(0, 0, 0, 0.2);
}

.guess-row.me[b-5kvcijdier] {
    outline: 2px solid color-mix(in srgb, var(--team-color) 70%, transparent);
    outline-offset: -2px;
}

.guess-row.ok[b-5kvcijdier] {
    background: linear-gradient(100deg, color-mix(in srgb, var(--hz-success) 26%, transparent), transparent 70%), rgba(0, 0, 0, 0.2);
}

.guess-avatar[b-5kvcijdier] {
    display: grid;
    flex: none;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--team-color);
    color: #fff;
    font-family: var(--hz-font-display);
    font-weight: 700;
}

.guess-name[b-5kvcijdier] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.guess-state[b-5kvcijdier],
.guess-placement[b-5kvcijdier] {
    font-size: 13px;
    white-space: nowrap;
}

.guess-points[b-5kvcijdier] {
    min-width: 32px;
    font-family: var(--hz-font-display);
    font-size: 18px;
    text-align: right;
}
/* /Components/Ui/Logo.razor.rz.scp.css */
.logo[b-gdtlqbqwxs] {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    color: #fff;
}

.logo-mark[b-gdtlqbqwxs] {
    width: 84px;
    height: 84px;
    flex: none;
    filter: drop-shadow(0 8px 24px rgba(139, 92, 246, 0.45));
}

.logo-record[b-gdtlqbqwxs] {
    transform-origin: 50px 50px;
    animation: logo-spin-b-gdtlqbqwxs 12s linear infinite;
}

.logo-q[b-gdtlqbqwxs] {
    fill: #fff;
    font-family: var(--hz-font-display);
    font-size: 30px;
    font-weight: 700;
}

.logo-word[b-gdtlqbqwxs] {
    display: grid;
    gap: 6px;
}

.logo-name[b-gdtlqbqwxs] {
    font-family: var(--hz-font-display);
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
}

.logo-dash[b-gdtlqbqwxs] {
    color: var(--hz-muted);
}

.logo-tipp[b-gdtlqbqwxs] {
    background: var(--hz-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.logo-timeline[b-gdtlqbqwxs] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.logo-timeline span[b-gdtlqbqwxs] {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 20px;
    border-radius: 5px;
    background: var(--c);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.logo-timeline .logo-slot[b-gdtlqbqwxs] {
    border: 1.5px dashed rgba(255, 255, 255, 0.7);
    background: transparent;
    animation: logo-blink-b-gdtlqbqwxs 1.6s ease-in-out infinite;
}

.logo.compact[b-gdtlqbqwxs] {
    gap: 10px;
}

.logo.compact .logo-mark[b-gdtlqbqwxs] {
    width: 40px;
    height: 40px;
}

.logo.compact .logo-name[b-gdtlqbqwxs] {
    font-size: 24px;
}

/* Tablets in landscape (e.g. iPad): smaller logo so the game fits on one screen */
@media (max-height: 900px) {
    .logo:not(.compact) .logo-mark[b-gdtlqbqwxs] {
        width: 56px;
        height: 56px;
    }

    .logo:not(.compact) .logo-name[b-gdtlqbqwxs] {
        font-size: 32px;
    }
}

@keyframes logo-spin-b-gdtlqbqwxs {
    to { transform: rotate(360deg); }
}

@keyframes logo-blink-b-gdtlqbqwxs {
    50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
    .logo-record[b-gdtlqbqwxs],
    .logo-timeline .logo-slot[b-gdtlqbqwxs] {
        animation: none;
    }
}

@media (max-width: 600px) {
    .logo-mark[b-gdtlqbqwxs],
    .logo:not(.compact) .logo-mark[b-gdtlqbqwxs] {
        width: 40px;
        height: 40px;
    }

    .logo-name[b-gdtlqbqwxs],
    .logo:not(.compact) .logo-name[b-gdtlqbqwxs] {
        font-size: 24px;
        white-space: nowrap;
    }

    /* The mini timeline needs a second row – leave it out on phones */
    .logo-timeline[b-gdtlqbqwxs] {
        display: none;
    }
}
/* /Components/Ui/ScoreStrip.razor.rz.scp.css */
.score-strip[b-jwhokoipvc] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.score-chip[b-jwhokoipvc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 3px 10px 3px 3px;
    border: 1px solid color-mix(in srgb, var(--team-color) 55%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--team-color) 18%, var(--hz-surface));
    font-size: 13px;
}

.score-chip.current[b-jwhokoipvc] {
    border-width: 2px;
    border-color: var(--team-color);
    box-shadow: 0 0 14px color-mix(in srgb, var(--team-color) 55%, transparent);
}

.score-chip.me[b-jwhokoipvc] {
    background: color-mix(in srgb, var(--team-color) 40%, var(--hz-surface));
}

.score-chip-avatar[b-jwhokoipvc] {
    display: grid;
    flex: none;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--team-color);
    color: #fff;
    font-family: var(--hz-font-display);
    font-size: 12px;
    font-weight: 700;
}

.score-chip-name[b-jwhokoipvc] {
    min-width: 0;
    max-width: 140px;
    overflow: hidden;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.score-chip-points[b-jwhokoipvc] {
    font-family: var(--hz-font-display);
    font-size: 16px;
}

.score-chip-crown[b-jwhokoipvc] {
    font-size: 12px;
}
/* /Components/Ui/SongInfoDialog.razor.rz.scp.css */
.song-info-backdrop[b-w3sz359rwq] {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 5vh 16px;
    overflow-y: auto;
    background: rgba(5, 4, 15, 0.72);
    backdrop-filter: blur(4px);
    animation: song-info-fade-b-w3sz359rwq 0.15s ease-out;
}

.song-info[b-w3sz359rwq] {
    display: grid;
    gap: 16px;
    width: 100%;
    max-width: 640px;
    background: var(--hz-bg-2);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.song-info-head[b-w3sz359rwq] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.song-info-title[b-w3sz359rwq] {
    flex: 1;
    display: grid;
    gap: 4px;
    min-width: 0;
}

.song-info-name[b-w3sz359rwq] {
    font-family: var(--hz-font-display);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;
}

.song-info-artists[b-w3sz359rwq] {
    color: var(--hz-muted);
    font-weight: 600;
}

.song-info-year[b-w3sz359rwq] {
    justify-self: start;
    padding: 2px 10px;
    border-radius: 8px;
    background: var(--card-color);
    font-family: var(--hz-font-display);
    font-weight: 700;
}

.song-info-close[b-w3sz359rwq] {
    flex: none;
    align-self: flex-start;
    width: 40px;
    height: 40px;
    border: 1px solid var(--hz-border);
    border-radius: 50%;
    background: var(--hz-surface);
    color: inherit;
    font-size: 16px;
    cursor: pointer;
}

.song-info-close:hover[b-w3sz359rwq] {
    background: var(--hz-surface-strong);
}

.song-info-loading[b-w3sz359rwq] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.song-info-facts[b-w3sz359rwq] {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 6px 16px;
    margin: 0;
}

.song-info-facts dt[b-w3sz359rwq] {
    color: var(--hz-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.7;
    text-transform: uppercase;
}

.song-info-facts dd[b-w3sz359rwq] {
    margin: 0;
    overflow-wrap: anywhere;
}

.song-info-mono[b-w3sz359rwq] {
    font-family: ui-monospace, Consolas, monospace;
}

.song-info-genres[b-w3sz359rwq] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.song-info-section[b-w3sz359rwq] {
    display: grid;
    gap: 6px;
}

.song-info-section h3[b-w3sz359rwq] {
    margin: 0;
    font-size: 17px;
}

.song-info-section p[b-w3sz359rwq] {
    margin: 0;
    line-height: 1.5;
}

.song-info-link[b-w3sz359rwq] {
    color: var(--hz-accent-2);
    font-weight: 600;
    text-decoration: none;
}

.song-info-lyrics summary[b-w3sz359rwq] {
    cursor: pointer;
    font-weight: 600;
}

/* Lyrics like a song sheet: the rounded display font in a soft cyan, centered on a light accent wash */
.song-info-lyrics pre[b-w3sz359rwq] {
    margin: 10px 0 0;
    padding: 18px 16px;
    border: 1px solid color-mix(in srgb, var(--hz-accent-2) 25%, transparent);
    border-radius: 14px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--hz-accent) 18%, transparent), color-mix(in srgb, var(--hz-accent-2) 10%, transparent));
    color: color-mix(in srgb, var(--hz-accent-2) 55%, #fff);
    font-family: var(--hz-font-display);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.7;
    text-align: center;
    white-space: pre-wrap;
}

.song-info-copyright[b-w3sz359rwq] {
    font-size: 12px;
}

.song-info-links[b-w3sz359rwq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

@keyframes song-info-fade-b-w3sz359rwq {
    from { opacity: 0; }
}

@media (max-width: 600px) {
    .song-info-backdrop[b-w3sz359rwq] {
        padding: 12px 10px;
    }

    .song-info-name[b-w3sz359rwq] {
        font-size: 20px;
    }

    .song-info-facts[b-w3sz359rwq] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .song-info-facts dd[b-w3sz359rwq] {
        margin-bottom: 8px;
    }
}

/* Album name and pill open the album in Spotify */
.song-info-album-link[b-w3sz359rwq] {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, #1db954 70%, transparent);
    text-underline-offset: 3px;
}

.song-info-album-link:hover[b-w3sz359rwq] {
    color: #1ed760;
}

.song-info-spotify:hover[b-w3sz359rwq] {
    border-color: color-mix(in srgb, #1db954 70%, transparent);
    background: color-mix(in srgb, #1db954 18%, transparent);
}
/* /Components/Ui/SpotifyLink.razor.rz.scp.css */
.spotify-link[b-4oifcx1vxu] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #1db954;
    color: #04130a;
    line-height: 0;
    transition: transform 0.15s, background 0.15s;
}

.spotify-link:hover[b-4oifcx1vxu] {
    background: #1ed760;
    transform: scale(1.08);
}

/* Size set in CSS and as attributes, so no browser falls back to the SVG default size */
.spotify-link svg[b-4oifcx1vxu] {
    display: block;
    width: 14px;
    height: 14px;
    margin-left: 2px;
    fill: currentColor;
}

@media (max-width: 520px) {
    .spotify-link[b-4oifcx1vxu] {
        width: 26px;
        height: 26px;
    }

    .spotify-link svg[b-4oifcx1vxu] {
        width: 12px;
        height: 12px;
    }
}
/* /Components/Ui/Timeline.razor.rz.scp.css */
.timeline[b-elzmp9t3ti] {
    display: flex;
    gap: 8px;
}

/* ---------- Host: horizontal tiles ---------- */

/* One row that is swiped sideways; centered while it fits */
.timeline-scroll.horizontal[b-elzmp9t3ti] {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding: 6px 16px 12px;
    /* Soft edges hint that there is more to swipe */
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}

.timeline-horizontal[b-elzmp9t3ti] {
    flex-wrap: nowrap;
    align-items: stretch;
    width: max-content;
    margin: 0 auto;
}

.timeline-horizontal > *[b-elzmp9t3ti] {
    flex: none;
    scroll-snap-align: center;
}

.timeline-horizontal .timeline-card[b-elzmp9t3ti] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 128px;
    min-height: 112px;
    padding: 20px 8px 10px;
    text-align: center;
}

.timeline-horizontal .timeline-year[b-elzmp9t3ti] {
    font-size: 28px;
}

.timeline-horizontal .timeline-slot[b-elzmp9t3ti] {
    width: 46px;
    min-height: 112px;
    flex-direction: column;
}

/* ---------- Phones: compact rows ---------- */

.timeline-vertical[b-elzmp9t3ti] {
    flex-direction: column;
    gap: 4px;
}

.timeline-vertical .timeline-card[b-elzmp9t3ti] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 10px 5px 5px;
    min-height: 0;
}

.timeline-vertical .timeline-year[b-elzmp9t3ti] {
    flex: none;
    width: 52px;
    padding: 5px 0;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.25);
    font-size: 16px;
    text-align: center;
}

.timeline-vertical .timeline-text[b-elzmp9t3ti] {
    min-width: 0;
}

.timeline-vertical .timeline-artist[b-elzmp9t3ti],
.timeline-vertical .timeline-title[b-elzmp9t3ti] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.timeline-vertical .timeline-slot[b-elzmp9t3ti] {
    min-height: 30px;
    padding: 2px 10px;
    justify-content: flex-start;
    gap: 10px;
}

.timeline-vertical .slot-mark[b-elzmp9t3ti] {
    width: 52px;
    text-align: center;
}

/* ---------- Shared ---------- */

.timeline-card[b-elzmp9t3ti] {
    position: relative;
    border-radius: 12px;
    background: linear-gradient(150deg, var(--card-color), color-mix(in srgb, var(--card-color) 55%, #000));
    box-shadow: 0 4px 14px color-mix(in srgb, var(--card-color) 35%, transparent);
    color: #fff;
}

.timeline-card.start[b-elzmp9t3ti] {
    outline: 2px dashed rgba(255, 255, 255, 0.55);
    outline-offset: -4px;
}

.timeline-year[b-elzmp9t3ti] {
    font-family: var(--hz-font-display);
    font-weight: 700;
    line-height: 1;
}

.timeline-artist[b-elzmp9t3ti] {
    font-size: 12px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.timeline-title[b-elzmp9t3ti] {
    font-size: 12px;
    opacity: 0.85;
    overflow-wrap: anywhere;
}

.timeline-slot[b-elzmp9t3ti] {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--hz-muted);
    font: inherit;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}

.slot-mark[b-elzmp9t3ti] {
    font-family: var(--hz-font-display);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

.slot-text[b-elzmp9t3ti] {
    font-size: 12px;
}

.timeline-slot:hover[b-elzmp9t3ti],
.timeline-slot:focus-visible[b-elzmp9t3ti] {
    border-color: var(--hz-accent-2);
    color: var(--hz-accent-2);
    outline: none;
}

.timeline-slot.selected[b-elzmp9t3ti] {
    border-style: solid;
    border-color: transparent;
    background: var(--hz-gradient);
    color: #fff;
    box-shadow: 0 0 18px rgba(139, 92, 246, 0.55);
}

.timeline-slot.locked[b-elzmp9t3ti] {
    cursor: default;
}

.timeline-edge[b-elzmp9t3ti] {
    align-self: center;
    color: var(--hz-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.timeline-vertical .timeline-edge[b-elzmp9t3ti] {
    align-self: flex-start;
    padding: 2px 0 2px 4px;
}

.timeline-vertical .timeline-slot .slot-text[b-elzmp9t3ti] {
    font-size: 13px;
    font-weight: 600;
}

/* Points the team got for the song: corner badge on tiles, at the end of a row on phones */
.timeline-points[b-elzmp9t3ti] {
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-family: var(--hz-font-display);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
}

.timeline-horizontal .timeline-points[b-elzmp9t3ti] {
    position: absolute;
    top: 6px;
    right: 6px;
}

.timeline-vertical .timeline-points[b-elzmp9t3ti] {
    flex: none;
    margin-left: auto;
}

/* A year with several guessed songs: the last one is shown, the rest as a counter below it */
.timeline-group[b-elzmp9t3ti] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.timeline-horizontal .timeline-group[b-elzmp9t3ti] {
    align-items: center;
}

.timeline-horizontal .timeline-group > .timeline-card[b-elzmp9t3ti] {
    flex: 1;
}

.timeline-more[b-elzmp9t3ti] {
    align-self: center;
    padding: 2px 10px;
    border: 1px solid var(--hz-border);
    border-radius: 999px;
    background: var(--hz-surface);
    color: var(--hz-muted);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    cursor: help;
}

.timeline-vertical .timeline-more[b-elzmp9t3ti] {
    align-self: flex-start;
    margin-left: 62px;
}

/* Phones: slightly smaller tiles so more of the timeline is visible */
@media (max-width: 600px) {
    .timeline-horizontal .timeline-card[b-elzmp9t3ti] {
        width: 108px;
        min-height: 100px;
        padding: 18px 6px 8px;
    }

    .timeline-horizontal .timeline-year[b-elzmp9t3ti] {
        font-size: 24px;
    }

    .timeline-horizontal .timeline-slot[b-elzmp9t3ti] {
        width: 40px;
        min-height: 100px;
    }
}

/* Song info: corner button on tiles, at the end of a row on phones */
.timeline-info[b-elzmp9t3ti] {
    flex: none;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 13px;
    line-height: 26px;
    cursor: pointer;
}

.timeline-info:hover[b-elzmp9t3ti] {
    background: rgba(0, 0, 0, 0.65);
}

.timeline-horizontal .timeline-info[b-elzmp9t3ti] {
    position: absolute;
    top: 6px;
    left: 6px;
}

.timeline-vertical .timeline-points + .timeline-info[b-elzmp9t3ti] {
    margin-left: 0;
}

.timeline-vertical .timeline-info[b-elzmp9t3ti] {
    margin-left: auto;
}
/* /Components/Ui/UpNow.razor.rz.scp.css */
.upnow[b-8iwypmf04n] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 24px;
    overflow: hidden;
    border: 2px solid var(--team-color);
    border-radius: var(--hz-radius);
    background:
        linear-gradient(100deg, color-mix(in srgb, var(--team-color) 55%, transparent), color-mix(in srgb, var(--team-color) 12%, transparent) 70%),
        var(--hz-surface);
    box-shadow: 0 0 36px color-mix(in srgb, var(--team-color) 45%, transparent);
    animation: upnow-in-b-8iwypmf04n 0.35s ease-out;
}

.upnow.pulse[b-8iwypmf04n] {
    animation: upnow-in-b-8iwypmf04n 0.35s ease-out, upnow-pulse-b-8iwypmf04n 1.6s ease-in-out infinite;
}

.upnow-avatar[b-8iwypmf04n] {
    display: grid;
    flex: none;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--team-color);
    color: #fff;
    font-family: var(--hz-font-display);
    font-size: 36px;
    font-weight: 700;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18);
}

.upnow-text[b-8iwypmf04n] {
    flex: 1;
    min-width: 0;
}

.upnow-label[b-8iwypmf04n] {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.85;
}

.upnow-name[b-8iwypmf04n] {
    overflow: hidden;
    font-family: var(--hz-font-display);
    font-size: 44px;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.upnow-status[b-8iwypmf04n] {
    margin-top: 2px;
    font-weight: 600;
    opacity: 0.9;
}

.upnow-next[b-8iwypmf04n] {
    display: grid;
    flex: none;
    justify-items: end;
    font-size: 13px;
    opacity: 0.75;
}

.upnow-next span[b-8iwypmf04n] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Phones and the turn window */
.upnow.compact[b-8iwypmf04n] {
    gap: 14px;
    padding: 12px 14px;
}

.upnow.compact .upnow-avatar[b-8iwypmf04n] {
    width: 48px;
    height: 48px;
    font-size: 24px;
}

.upnow.compact .upnow-name[b-8iwypmf04n] {
    font-size: 26px;
}

.upnow.compact .upnow-label[b-8iwypmf04n] {
    font-size: 11px;
}

@media (max-width: 600px) {
    .upnow-next[b-8iwypmf04n] {
        display: none;
    }
}

@keyframes upnow-in-b-8iwypmf04n {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

@keyframes upnow-pulse-b-8iwypmf04n {
    50% { box-shadow: 0 0 60px color-mix(in srgb, var(--team-color) 75%, transparent); }
}

@media (max-width: 600px) {
    .upnow.compact[b-8iwypmf04n] {
        gap: 12px;
        padding: 10px 12px;
    }

    .upnow.compact .upnow-avatar[b-8iwypmf04n] {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .upnow.compact .upnow-name[b-8iwypmf04n] {
        font-size: 22px;
    }

    .upnow-status[b-8iwypmf04n] {
        font-size: 13px;
    }
}
/* /Components/Ui/UserMenu.razor.rz.scp.css */
.user-menu[b-8ypuyt8ymb] {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.user-name b[b-8ypuyt8ymb] {
    max-width: 120px;
    overflow: hidden;
    font-family: inherit;
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.user-logout[b-8ypuyt8ymb] {
    color: inherit;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.user-logout:hover[b-8ypuyt8ymb] {
    border-color: color-mix(in srgb, var(--hz-error) 70%, transparent);
    background: color-mix(in srgb, var(--hz-error) 18%, transparent);
}

/* Phones: icons only, so logo and menu fit in one row */
@media (max-width: 600px) {
    .user-menu[b-8ypuyt8ymb] {
        flex-wrap: nowrap;
        gap: 4px;
    }

    .user-name b[b-8ypuyt8ymb],
    .user-menu-text[b-8ypuyt8ymb] {
        display: none;
    }

    .user-menu .hz-pill[b-8ypuyt8ymb] {
        padding: 5px 9px;
    }
}

/* Tablets: everything in one row next to the logo */
@media (max-width: 1180px) {
    .user-menu[b-8ypuyt8ymb] {
        flex-wrap: nowrap;
    }

    .user-menu .hz-pill[b-8ypuyt8ymb] {
        white-space: nowrap;
    }
}

/* The user name opens "Change password" */
.user-name[b-8ypuyt8ymb] {
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.user-password[b-8ypuyt8ymb] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 950;
    display: grid;
    gap: 10px;
    width: min(300px, calc(100vw - 32px));
    padding: 16px;
    background: var(--hz-bg-2);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
    text-align: left;
}

.user-password-title[b-8ypuyt8ymb] {
    font-family: var(--hz-font-display);
    font-size: 18px;
    font-weight: 700;
}

.user-password label[b-8ypuyt8ymb] {
    display: grid;
    gap: 4px;
    font-size: 13px;
    color: var(--hz-muted);
}

/* 16 px: iOS does not zoom into the field */
.user-password input[b-8ypuyt8ymb] {
    padding: 8px 10px;
    border: 1px solid var(--hz-border);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.3);
    color: var(--hz-text);
    font: inherit;
    font-size: 16px;
}

.user-password-message[b-8ypuyt8ymb] {
    font-size: 13px;
    font-weight: 600;
}

.user-password-actions[b-8ypuyt8ymb] {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

.user-password-actions .hz-pill[b-8ypuyt8ymb] {
    color: inherit;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.user-password-actions .user-password-save[b-8ypuyt8ymb] {
    border-color: transparent;
    background: var(--hz-gradient);
    color: #fff;
    font-weight: 700;
}
/* /Components/Ui/YearGuessInput.razor.rz.scp.css */
.year-guess[b-s2t1v1ivix] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.year-guess-label[b-s2t1v1ivix] {
    font-weight: 700;
}

.year-guess[b-s2t1v1ivix]  .year-guess-input input {
    font-family: var(--hz-font-display);
    font-size: 18px;
    font-weight: 700;
}

/* iOS zooms into inputs with smaller text */
@media (max-width: 600px) {
    .year-guess[b-s2t1v1ivix]  .year-guess-input input {
        font-size: 16px;
    }
}