@layer reset, base, layout, components, modifiers, utilities;

:root {
    /* Sticky offset for time bar under header chrome */
    --header-sticky-offset: 0px;

    --color-primary: #3270f5;
    --color-success: #10b981;
    --color-danger: #ef4444;
    --color-warning: #f59e0b;
    --color-text-dark: #000;
    --color-gray: #e2e2e2;
    --color-player-white-chart: var(--color-gray);
    --color-bg: #F2F0EF;
    --alpha: 0.8;

    --color-gold: #d2a123;
    --color-silver: #94a3b8;
    --color-bronze: #a55110;

    --gradient-gold: linear-gradient(to bottom right, #fbbf24, #f59e0b, #d97706);
    --gradient-silver: linear-gradient(to bottom right, #f1f5f9, #94a3b8, #64748b);
    --gradient-bronze: linear-gradient(to bottom right, #fcd34d, #b45309, #78350f);


    --color-opt-0: #e11d48;
    --color-opt-1: #2563eb;
    --color-opt-2: #04a52c;
    --color-opt-3: #f1730b;
    --color-opt-4: #6c47f3;
    --color-opt-5: #1CDBD7;
    --color-opt-6: #FF69B4;
    --color-opt-7: #FFD700;

    --color-opt-0-light: #fa9194;
    --color-opt-1-light: #91c0f5;
    --color-opt-2-light: #a8dea2;
    --color-opt-3-light: #ffc086;
    --color-opt-4-light: #ceb7ff;
    --color-opt-5-light: #97e7eb;
    --color-opt-6-light: #ffceea;
    --color-opt-7-light: #FFEA96;

    --btn-padding: 1rem 3rem;
    --btn-radius: 0px;
    --btn-font-size: var(--fs-xl);

    --border-width: 4px;
    --overlap-half: calc(var(--border-width) / -2);
    --overlap-full: calc(var(--border-width) * -1);

    /* Typography Scale */
    --fs-sm: 0.9rem;
    --fs-base: 1rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.5rem;
    --fs-2xl: 2rem;
    --fs-4xl: 4rem;
}

@layer components {
    .qmaker-body {
        align-items: stretch;
    }

    .qmaker-auth {
        max-width: 48rem;
        margin-inline: auto;
        padding-block: 4rem;
    }

    .admin-page {
        align-items: stretch;
        justify-content: flex-start;
        gap: 1rem;
        margin-inline: auto;
        padding-block: 2rem;
        text-align: left;
    }

    .admin-section {
        width: 100%;
        box-sizing: border-box;
    }

    .admin-section h1,
    .admin-section h2 {
        flex: 1;
        margin: 0;
    }

    .admin-section .b-panel-row {
        align-items: center;
        gap: 0.75rem;
    }

    .admin-meta {
        font-size: var(--fs-sm);
        font-weight: normal;
        overflow-wrap: anywhere;
    }

    .admin-row-status {
        font-weight: normal;
    }

    .admin-empty {
        font-weight: normal;
        opacity: 0.65;
    }

    .admin-nav-link {
        text-decoration: none;
    }

    .qmaker-app {
        display: flex;
        height: 100vh;
        width: 100%;
        min-height: 0;
        flex-direction: column;
        overflow: hidden;
        background: var(--color-bg);
    }

    .qmaker-topbar {
        align-items: stretch;
    }

    .qmaker-topbar > .qmaker-title-input {
        flex: 4;
        min-width: min(12rem, 100%);
        text-align: left;
    }

    .qmaker-save-status {
        white-space: nowrap;
    }

    .settings-link {
        text-decoration: none;
    }

    .qmaker-library {
        min-height: 0;
        margin-inline: auto;
        padding-block: 2rem;
        flex: 1 1 auto;
        align-items: center;
        justify-content: center;
        overflow-y: auto;
    }

    .qmaker-library-heading,
    .qmaker-dialog-heading,
    .qmaker-editor-heading,
    .qmaker-actions,
    .qmaker-toggle-row {
        align-items: center;
    }

    .qmaker-library-heading h1,
    .qmaker-dialog-heading h2 {
        flex: 1;
        margin: 0;
    }

    .qmaker-quiz-grid {
        width: 100%;
        padding-inline: calc(var(--border-width) / 2);
        box-sizing: border-box;
        justify-content: center;
    }

    .qmaker-quiz-card {
        display: flex;
        flex: 1 1 18rem;
        max-width: 28rem;
        min-height: 8rem;
        padding: 1.25rem;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        text-align: left;
        font-size: var(--fs-lg);
    }

    .qmaker-editor-layout {
        display: grid;
        grid-template-columns: minmax(20rem, 24rem) minmax(0, 1fr);
        height: auto;
        min-height: 0;
        width: 100%;
        flex: 1 1 auto;
        align-items: stretch;
        overflow: hidden;
        background: var(--color-bg);
        border-block-end: var(--border-width) solid #000;
    }

    .qmaker-question-rail {
        display: flex;
        height: 100%;
        min-height: 0;
        padding: 1rem 0 1rem 1rem;
        box-sizing: border-box;
        flex-direction: column;
        overflow-y: auto;
        background: var(--color-bg);
    }

    .qmaker-rail-item {
        flex-wrap: nowrap;
        align-items: stretch;
    }

    .qmaker-question-select {
        flex: 1 1 0;
        min-width: 0;
        padding: 0.65rem;
        text-align: left;
        font-size: var(--fs-sm);
    }

    :is(.qmaker-question-select, .qmaker-type-choice)[data-question-type] {
        background-color: #fff;
        background-image: radial-gradient(
            circle at bottom left,
            color-mix(in srgb, var(--qmaker-type-color) 35%, #fff),
            #fff 40%
        );
    }

    :is(.qmaker-question-select, .qmaker-type-choice)[data-question-type="qSlider"] {
        --qmaker-type-color: var(--color-opt-2);
    }

    :is(.qmaker-question-select, .qmaker-type-choice)[data-question-type="slide"] {
        --qmaker-type-color: var(--color-opt-1);
    }

    :is(.qmaker-question-select, .qmaker-type-choice)[data-question-type="qSelectText"] {
        --qmaker-type-color: var(--color-opt-3);
    }

    :is(.qmaker-question-select, .qmaker-type-choice)[data-question-type="qVote"] {
        --qmaker-type-color: var(--color-opt-5);
    }

    :is(.qmaker-question-select, .qmaker-type-choice)[data-question-type="qList"] {
        --qmaker-type-color: var(--color-opt-4);
    }

    :is(.qmaker-question-select, .qmaker-type-choice)[data-question-type="qPair"] {
        --qmaker-type-color: var(--color-opt-0);
    }

    :is(.qmaker-question-select, .qmaker-type-choice)[data-question-type="qOrder"] {
        --qmaker-type-color: var(--color-opt-6);
    }

    .qmaker-rail-item.is-selected .qmaker-question-select {
        background-color: #fff;
        background-image: radial-gradient(
            circle at bottom left,
            color-mix(in srgb, var(--qmaker-type-color) 35%, #fff),
            #fff 75%
        );
        color: var(--color-text-dark);
    }

    .qmaker-question-summary,
    .qmaker-question-meta {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .qmaker-question-summary {
        font-weight: 800;
    }

    .qmaker-question-meta {
        margin-block-start: 0;
        font-size: var(--fs-sm);
    }

    .qmaker-question-meta.is-error,
    .qmaker-status.is-error,
    .qmaker-save-status.is-error {
        color: var(--color-danger);
    }

    .b-grid.qmaker-rail-controls {
        flex: 0 0 5rem;
        width: 5rem;
        margin-inline-start: calc(2 * var(--overlap-half));
    }

    .qmaker-rail-controls .qmaker-rail-action {
        width: 2.5rem;
        min-width: 2.5rem;
        height: 2.5rem;
        padding: 0;
        font-size: var(--fs-sm);
    }

    .qmaker-question-group .qmaker-add-question {
        width: auto;
        min-height: 2.5rem;
        padding: 0.35rem;
        margin-inline-end: calc(-1 * var(--overlap-half));
    }

    .qmaker-question-editor {
        height: 100%;
        min-height: 0;
        width: min(100%, 70rem);
        padding: 1rem;
        box-sizing: border-box;
        margin-inline: auto;
        overflow-y: auto;
        background: var(--color-bg);
    }

    .qmaker-common-fields {
        margin-block-end: 0.5rem;
    }

    .qmaker-common-fields .qmaker-title-field {
        width: 100%;
        height: 3.25rem;
        min-height: 3.25rem;
        padding: 0.7rem;
        resize: vertical;
        font: inherit;
        font-weight: 800;
    }

    .qmaker-title-field::placeholder {
        color: #777;
    }

    .qmaker-image-preview {
        display: block;
        width: 100%;
        height: clamp(15rem, 42vh, 28rem);
        max-height: none;
        object-fit: cover;
        cursor: zoom-in;
    }

    .qmaker-image-preview:focus-visible {
        outline: var(--border-width) solid var(--color-primary);
        outline-offset: 0.25rem;
    }

    .qmaker-image-actions {
        display: flex;
        align-items: stretch;
        margin-block-end: 0.5rem;
    }

    .qmaker-image-actions .qmaker-small-btn {
        width: auto;
        min-width: 0;
        min-height: 2.5rem;
        padding: 0.55rem 0.75rem;
        font-size: var(--fs-base);
    }

    .qmaker-image-status {
        display: flex;
        padding-inline: 0.5rem;
        align-items: center;
        color: #555;
        font-size: var(--fs-sm);
    }

    .b-grid.qmaker-field-grid {
        flex-wrap: nowrap;
    }

    .qmaker-field-label,
    .qmaker-answer-heading {
        display: flex;
        min-width: 0;
        padding-block-start: 0.4rem;
        padding-block-end: 0.5rem;
        align-items: end;
        font-size: var(--fs-sm);
        font-weight: 800;
        line-height: 1.1;
    }

    .qmaker-field-label {
        flex: 1 1 0;
    }

    .qmaker-list-settings .qmaker-answer-heading {
        padding-block-start: 1rem;
    }

    .qmaker-list-answer-groups > .qmaker-answer-group {
        flex: 1 1 15rem;
        min-width: 0;
    }

    .qmaker-field-grid .qmaker-input {
        flex: 1 1 0;
        width: 100%;
        min-width: 0;
        min-height: 3rem;
        padding: 0.65rem;
        font: inherit;
        font-weight: 800;
    }

    .qmaker-toggle-row {
        min-height: 2rem;
        padding: 0;
        align-items: center;
        font-size: var(--fs-sm);
        font-weight: 800;
    }

    .b-box.qmaker-checkbox {
        display: grid;
        width: 1.35rem;
        height: 1.35rem;
        padding: 0;
        margin: var(--overlap-half);
        margin-right: 0.5rem;
        place-content: center;
        cursor: pointer;
    }

    .qmaker-checkbox::before {
        content: "✓";
        color: white;
        font-size: var(--fs-sm);
        font-weight: 800;
        line-height: 1;
        transform: scale(0);
    }

    .b-box.qmaker-checkbox:checked {
        background-color: var(--color-success);
    }

    .qmaker-checkbox:checked::before {
        transform: scale(1);
    }

    .qmaker-select-option-row {
        flex-wrap: nowrap;
        align-items: center;
    }

    .qmaker-select-option-row .qmaker-input,
    .qmaker-answer-row .qmaker-input {
        flex: 1 1 0;
        width: 100%;
        min-width: 0;
        height: 3rem;
        padding: 0.65rem;
        font: inherit;
        font-weight: 800;
    }

    .qmaker-select-option-row .qmaker-small-btn {
        flex: 0 0 3rem;
        width: 3rem;
        min-width: 3rem;
        height: 3rem;
        padding: 0;
        font-size: var(--fs-base);
    }

    .qmaker-correct-btn {
        background: white;
        color: var(--color-success);
        font-size: var(--fs-xl);
    }

    .qmaker-correct-btn.is-correct {
        background: var(--color-success);
        color: white;
    }

    .qmaker-add-row-btn {
        width: 100%;
        min-height: 2.5rem;
        padding: 0.45rem;
        font-size: var(--fs-base);
    }

    .qmaker-answer-row {
        flex-wrap: nowrap;
    }

    .qmaker-answer-row .qmaker-answer-delete {
        flex: 0 0 3rem;
        width: 3rem;
        min-width: 3rem;
        height: 3rem;
        padding: 0;
    }

    .qmaker-hint {
        margin-block-start: 0.25rem;
        font-size: var(--fs-sm);
        font-weight: normal;
    }

    .qmaker-empty {
        padding: 1.25rem;
    }

    .qmaker-editor-empty {
        margin-block-start: 2rem;
    }

    .qmaker-dialog {
        width: min(92vw, 58rem);
        max-height: 90vh;
        padding: 1.25rem;
        overflow: auto;
        background: var(--color-bg);
    }

    .qmaker-dialog::backdrop {
        background: rgb(0 0 0 / 65%);
    }

    .qmaker-type-grid > * {
        flex: 1 1 12rem;
        min-height: 6rem;
    }

    .qmaker-add-dialog {
        width: min(90vw, 42rem);
        max-height: none;
    }

    .qmaker-add-dialog .qmaker-type-grid > * {
        flex: 1 1 8rem;
        min-height: 4rem;
        padding: 0.5rem;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: var(--fs-base);
    }

    .qmaker-upload-panel {
        padding: 1rem;
    }

    .qmaker-image-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    }

    .qmaker-asset {
        display: flex;
        min-width: 0;
        padding: 0.6rem;
        flex-direction: column;
        text-align: left;
    }

    .qmaker-asset img {
        width: 100%;
        aspect-ratio: 16 / 10;
        object-fit: cover;
        border-block-end: var(--border-width) solid #000;
    }

    .qmaker-asset-name {
        overflow: hidden;
        margin-block-start: 0.5rem;
        font-weight: 800;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    @media (max-width: 760px) {
        .qmaker-editor-layout {
            grid-template-columns: 1fr;
            grid-template-rows: minmax(10rem, 35vh) minmax(0, 1fr);
        }

        .qmaker-question-rail {
            border-inline: 0;
        }

        .qmaker-question-editor {
            padding: 1rem;
        }

        .qmaker-image-status {
            display: none;
        }

        .qmaker-select-option-row {
            grid-template-columns: minmax(0, 1fr) repeat(4, 3rem);
        }

        .qmaker-topbar > * {
            min-width: 8rem;
        }

        .qmaker-topbar > .qmaker-title-input {
            flex-basis: 100%;
        }
    }
}

/*local font*/
@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("fonts/PlusJakartaSans-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("fonts/PlusJakartaSans-MediumItalic.woff2") format("woff2");
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("fonts/PlusJakartaSans-ExtraBold.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
}

@layer reset {

    [hidden] {
        display: none !important;
    }

    body,
    button,
    input,
    select {
        font-family: "Plus Jakarta Sans", sans-serif;
        font-feature-settings: 'ss01', 'case' 1;
        font-optical-sizing: auto;
        font-style: normal;
    }
}

/* On when player header is visible (toggled in app.js) */
body.has-player-header {
    --header-sticky-offset: 3.5rem;
}

/* Host panel already has a permanent top-header strip */
body:has(> header.top-header) {
    --header-sticky-offset: 3.5rem;
}

@layer base {

    html,
    body {
        /* clip avoids the sticky-breaking side-effect of overflow-x: hidden */
        overflow-x: clip;
    }

    body {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        min-height: 100vh;
        margin: 0;
        background-color: var(--color-bg);
        box-sizing: border-box;
        position: relative;
        overflow-x: clip;
    }
}

@layer components {

    /* Base Box */
    .b-box {
        border: var(--border-width) solid #000;
        border-radius: 0;
        -webkit-border-radius: 0;
        background-color: #fff;
        color: var(--color-text-dark);
        font-family: inherit;
        box-sizing: border-box;
        margin: var(--overlap-half);
        -webkit-appearance: none;
        appearance: none;
    }

    .b-box:focus,
    .b-box:focus-visible {
        outline: none;
    }

    /* Layout: Vertical Stack */
    .b-stack {
        display: flex;
        flex-direction: column;
    }

    /* Layout: Horizontal Row */
    .b-row {
        display: flex;
        flex-wrap: wrap;
    }

    /* Layout: Wrap Grid for brutalist items */
    .b-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 0;
        justify-content: center;
        align-content: stretch;
        width: 100%;
    }

}

@layer utilities {

    /* Snappy reveal from bottom to top (for questions) */
    @keyframes reveal-up {
        0% {
            opacity: 0;
            transform: translateY(15px);
            clip-path: inset(0 0 100% 0);
        }

        100% {
            opacity: 1;
            transform: translateY(0);
            clip-path: inset(-10px);
        }
    }

    /* Hard pop-in from the center (for reveals/answers) */
    @keyframes pop-center {
        0% {
            opacity: 0;
            transform: scale(1.2);
            clip-path: inset(50% 50% 50% 50%);
        }

        60% {
            opacity: 1;
            transform: scale(0.95);
            clip-path: inset(0 0 0 0);
        }

        100% {
            transform: scale(1);
        }
    }

    .anim-question {
        animation: reveal-up 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    }

    .anim-reveal {
        animation: pop-center 0.35s cubic-bezier(0.5, 0.1, 0.3, 1) forwards;
    }

    /* Correct-value line on lollipop chart: snap down */
    @keyframes snap-in-y {
        0% {
            transform: scaleY(0);
            opacity: 0;
        }

        100% {
            transform: scaleY(1);
            opacity: 1;
        }
    }

    .anim-snap-line {
        transform-origin: top;
        animation: snap-in-y 0.3s cubic-bezier(0.5, 0.1, 0.3, 1) forwards;
    }

    /* Respect reduced motion preferences */
    @media (prefers-reduced-motion: reduce) {

        .anim-question,
        .anim-reveal,
        .anim-snap-line {
            animation: none;
            opacity: 1;
            transform: none;
            clip-path: none;
        }

    }

    /* Size Utilities */
    .h-full {
        height: 100%;
    }



    /* Spacing Utilities */
    .b-mt-sm {
        margin-block-start: 1rem;
    }

    .b-mt-lg {
        margin-block-start: 2rem;
    }

    .b-mb-sm {
        margin-block-end: 1rem;
    }

    .b-mb-lg {
        margin-block-end: 2rem;
    }

    .b-my-sm {
        margin-block-start: 1rem;
        margin-block-end: 1rem;
    }

    .b-my-md {
        margin-block-start: 1.5rem;
        margin-block-end: 1.5rem;
    }

    .b-my-lg {
        margin-block-start: 2rem;
        margin-block-end: 2rem;
    }

    .b-p-md {
        padding: 1.5rem;
    }

}

@layer components {

    /* Interactive Elements (Buttons, Selects, Inputs) */
    .b-interactive {
        cursor: pointer;
        position: relative;
        transition: background-color 0.1s, color 0.1s;
    }

    /* Base Inputs/Buttons text styling */
    .b-input,
    .b-btn {
        padding: 1rem;
        font-size: var(--fs-lg);
        display: block;
        width: auto;
        font-weight: bold;
    }
}

@layer layout {
    .container {
        width: 90%;
        max-width: 1200px;
        text-align: center;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-block-end: 3rem;
    }

    /* View Containers */
    .view-container {
        display: none;
    }

    .view-container.active {
        display: block;
    }
}

@layer components {

    .lobby-title {
        font-size: var(--fs-4xl);
        text-align: center;
    }

    .qhoot-logo-frame {
        display: block;
        width: min(70%, 20rem);
        height: clamp(8rem, 15vw, 10rem);
        margin-inline: auto;
        margin-block-end: 3rem;
    }

    .qhoot-logo {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .qhoot-logo-frame.is-player-qr {
        width: min(70vw, 20rem);
        height: min(70vw, 20rem);
    }

    .qhoot-logo-frame.is-player-qr [data-qhoot-logo],
    .qhoot-logo-frame.is-player-qr .qhoot-logo-fallback {
        display: none;
    }

    .qhoot-logo-fallback {
        display: flex;
        height: 100%;
        align-items: center;
        justify-content: center;
        font-size: var(--fs-4xl);
        text-align: center;
    }

    /* Player Panel specific */
    .player-header {
        font-weight: bold;
        color: var(--color-text-dark);
    }

    .error-msg {
        color: var(--color-danger);
    }

    .question-text {
        font-size: var(--fs-2xl);
        font-weight: bold;
    }

    .player-question-text {
        display: inline-block;
        width: auto;
        max-width: 100%;
        margin-inline: auto;
        padding: 0;
        border: 0;
        background: transparent;
        color: inherit;
        font-family: inherit;
    }

    .player-question-text:disabled {
        opacity: 1;
    }

    .player-question-text.is-media-trigger {
        cursor: pointer;
    }

    .player-question-text.is-media-trigger:focus-visible {
        outline: var(--border-width) solid var(--color-primary);
        outline-offset: 0.25rem;
    }

    .question-content {
        flex-grow: 1;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .reveal-text {
        font-size: var(--fs-lg);
    }

    .results-placement {
        font-size: var(--fs-xl);
    }

    .results-score {
        font-size: var(--fs-lg);
    }

    .score-display {
        color: var(--color-primary);
    }

    .gained-display {
        color: var(--color-success);
        font-size: var(--fs-base);
    }


    /* Components reusing brutalist utilities */

    .option-btn {
        min-height: 80px;
        min-width: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        word-break: break-word;
        width: auto;
        flex: 1 1 45%;
    }


    /* Host Panel */

    .top-header {
        width: calc(100% + var(--border-width) * 2);
        display: flex;
        flex-wrap: wrap;
        background-color: var(--color-bg);
        margin-block-start: calc(var(--border-width) * -1);
        margin-inline-start: calc(var(--border-width) * -1);
        margin-inline-end: calc(var(--border-width) * -1);
        position: sticky;
        inset-block-start: calc(var(--border-width) * -1);
        z-index: 100;
    }

    .top-header>* {
        flex: 1;
        min-width: 160px;
        text-align: center;
        padding: 0.75rem 1rem;
        font-size: var(--fs-base);
        font-weight: bold;
    }

    .active-question {
        padding: 2rem;
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 400px;
        text-align: center;
        width: auto;
        box-sizing: border-box;
    }

    .active-question.is-visible {
        display: flex;
    }

    #activeQuestionContent .option-btn,
    #activeQuestionContent .q-slider-input {
        cursor: default;
    }

    #qText {
        margin-block-start: 0.5rem;
        margin-block-end: 0.5rem;
        font-weight: bold;
        font-size: var(--fs-xl);
    }

    .host-question-prompt {
        width: 100%;
    }

    .host-question-media-button {
        display: block;
        max-width: 100%;
        margin-inline: auto;
        padding: 0;
        border: 0;
        background: transparent;
        line-height: 0;
        cursor: zoom-in;
    }

    .host-question-media-button:focus-visible {
        outline: var(--border-width) solid var(--color-primary);
        outline-offset: 0.25rem;
    }

    .host-question-media {
        display: block;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: min(65vh, 720px);
        object-fit: contain;
        box-sizing: border-box;
    }

    #qText.host-question-media-trigger {
        display: inline-block;
        border: 0;
        padding: 0;
        background: transparent;
        color: inherit;
        font-family: inherit;
        cursor: pointer;
    }

    #qText.host-question-media-trigger:focus-visible {
        outline: var(--border-width) solid var(--color-primary);
        outline-offset: 0.25rem;
    }

    .question-progress {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--fs-lg);
        font-weight: bold;
    }

    #questionRevealContent {
        width: 100%;
        display: none;
        font-size: var(--fs-xl);
        font-weight: bold;
        color: var(--color-success);
    }

    #questionRevealContent.is-visible {
        display: block;
    }

    #questionRevealText {
        margin: 1rem 0;
    }

    body.has-reveal-media-open {
        overflow: hidden;
    }

    body.has-settings-open {
        overflow: hidden;
    }

    .settings-overlay {
        position: fixed;
        inset: 0;
        z-index: 900;
        display: grid;
        place-items: center;
        padding: 2rem;
        background: color-mix(in srgb, var(--color-bg) 80%, transparent);
        box-sizing: border-box;
    }

    .settings-overlay[hidden] {
        display: none;
    }

    .settings-dialog {
        width: min(26rem, calc(100vw - 4rem));
    }

    .settings-dialog > * {
        width: 100%;
        min-height: 3.75rem;
    }

    .settings-back {
        text-align: center;
    }

    .settings-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: start;
    }

    .settings-row[aria-pressed="true"] {
        background-color: #fff;
        background-image: radial-gradient(
            circle at bottom right,
            color-mix(in srgb, var(--color-primary) 35%, #fff),
            #fff 40%
        );
    }

    .settings-state {
        font-size: var(--fs-base);
        font-weight: normal;
    }

    .host-reveal-media-overlay {
        position: fixed;
        inset: 0;
        z-index: 1000;
        display: grid;
        place-items: center;
        padding: 2rem;
        background: color-mix(in srgb, var(--color-bg) 80%, transparent);
        box-sizing: border-box;
    }

    .host-reveal-media-overlay[hidden] {
        display: none;
    }

    .host-reveal-media-dialog {
        position: relative;
        display: inline-block;
        max-width: calc(100vw - 4rem);
        max-height: calc(100vh - 4rem);
        line-height: 0;
    }

    .host-reveal-media-close {
        position: absolute;
        inset-block-start: 0.5rem;
        inset-inline-end: 0.5rem;
        border: 0;
        background: transparent;
        color: #000;
        font: bold 2.5rem/1 sans-serif;
        cursor: pointer;
        box-shadow: none;
        text-shadow: none;
        appearance: none;
    }

    .host-reveal-media-close:is(:hover, :focus-visible) {
        color: var(--color-danger);
    }

    .host-reveal-media-image {
        display: block;
        width: auto;
        height: auto;
        max-width: calc(100vw - 4rem);
        max-height: calc(100vh - 4rem);
        object-fit: contain;
        background: #000;
        box-sizing: border-box;
    }

    .qmaker-pair-labels,
    .qmaker-pair-row {
        flex-wrap: nowrap;
        align-items: center;
    }

    .qmaker-pair-labels > span:nth-child(-n + 2) {
        flex: 1 1 0;
        padding: 0.4rem 0.65rem 0.5rem;
        font-size: var(--fs-sm);
        font-weight: 800;
    }

    .qmaker-pair-labels > span:last-child,
    .qmaker-pair-controls {
        /* Three 3rem buttons share negative b-box margins, so their flex
           track must account for the three collapsed 4px border overlaps. */
        flex: 0 0 calc(9rem - 12px);
    }

    .qmaker-pair-row .qmaker-input {
        flex: 1 1 0;
        width: 100%;
        min-width: 0;
        height: 3rem;
        padding: 0.65rem;
        font: inherit;
        font-weight: 800;
    }

    .qmaker-pair-controls {
        flex-wrap: nowrap;
    }

    .qmaker-pair-controls .qmaker-small-btn {
        flex: 0 0 3rem;
        width: 3rem;
        min-width: 3rem;
        height: 3rem;
        padding: 0;
    }

    .qmaker-order-row {
        flex-wrap: nowrap;
        align-items: center;
    }

    .qmaker-order-rank {
        flex: 0 0 2.5rem;
        padding-inline: 0.5rem;
        font-size: var(--fs-sm);
        font-weight: 800;
        text-align: center;
        box-sizing: border-box;
    }

    .qmaker-order-row .qmaker-input {
        flex: 1 1 0;
        width: 100%;
        min-width: 0;
        height: 3rem;
        padding: 0.65rem;
        font: inherit;
        font-weight: 800;
    }

    .qmaker-order-controls {
        flex: 0 0 calc(9rem - 12px);
        flex-wrap: nowrap;
    }

    .qmaker-order-controls .qmaker-small-btn {
        flex: 0 0 3rem;
        width: 3rem;
        min-width: 3rem;
        height: 3rem;
        padding: 0;
    }

    .host-reveal-media-image.is-toggleable {
        cursor: pointer;
    }

    .host-reveal-media-image.is-toggleable:focus-visible {
        outline: 0.25rem solid var(--color-warning);
        outline-offset: 0.25rem;
    }

    .b-panel {
        padding: 1rem;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        min-width: 160px;
        flex-grow: 1;
        font-weight: bold;
    }

    .b-panel.summary {
        padding: 1.5rem;
        justify-content: center;
        align-items: center;
        font-size: var(--fs-lg);
        font-weight: bold;
    }

    .b-panel.placeholder {
        opacity: 0.6;
        justify-content: center;
        align-items: center;
    }

    .q-vote-host-option {
        background-color: #fff;
    }

    .b-panel-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    /* Leaderboard Components */
    .leaderboard-row {
        display: flex;
        align-items: stretch;
        padding: 0;
    }

    .leaderboard-row>* {
        margin-inline-start: var(--overlap-full);
        margin-inline-end: 0;
    }

    .leaderboard-row>*:first-child {
        margin-inline-start: 0;
    }

    .leaderboard-rank {
        font-weight: bold;
        font-size: var(--fs-lg);
        min-width: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .leaderboard-rank-text {
        display: inline-block;
    }

    .leaderboard-info {
        display: flex;
        flex-grow: 1;
        align-items: stretch;
    }

    .leaderboard-name {
        flex-grow: 1;
        font-size: var(--fs-lg);
        font-weight: bold;
        padding: 0.75rem 1rem;
        text-align: left;
    }

    .leaderboard-streak {
        color: #ff3511;
        display: inline-flex;
        align-items: center;
        gap: 0.2rem;
        flex-shrink: 0;
        margin-inline-end: 0.5rem;
        white-space: nowrap;
    }

    .leaderboard-streak-icon {
        font-size: var(--fs-sm);
        line-height: 1;
    }

    .leaderboard-streak-count {
        font-size: var(--fs-lg);
        line-height: 1;
    }

    .leaderboard-score {
        font-size: var(--fs-lg);
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 0.75rem 1rem;
    }

    .leaderboard-score.streak-fire-3 {
        background: radial-gradient(
            circle at bottom right,
            #ff8f22 0%,
            #ffc13bd2 11%,
            #ffe344bd 20%,
            rgba(255, 255, 255, 0) 44%
        );
    }

    .leaderboard-score.streak-fire-4 {
        background: radial-gradient(
            circle at bottom right,
            #f45d2f 0%,
            #f9991b 15%,
            #fbce3c 25%,
            rgba(255, 255, 255, 0) 50%
        );
    }

    .leaderboard-score.streak-fire-5 {
        background: radial-gradient(
            circle at bottom right,
            #e41818 0%,
            #f45b32 15%,
            #fbb724 32%,
            rgba(255, 255, 255, 0) 62%
        );
    }

    .leaderboard-score.streak-fire-6 {
        background: radial-gradient(
            circle at bottom right,
            #df0d0d 8%,
            #eb3712 20%,
            #ffa733ec 48%,
            rgba(255, 255, 255, 0) 78%
        );
    }

    .leaderboard-score.streak-fire-7 {
        background: radial-gradient(
            circle at bottom right,
            #5b66e3 5%,
            #df0d0dde 38%,
            #fb7d34bb 58%,
            rgba(255, 255, 255, 0) 82%
        );
    }

    .leaderboard-score.streak-fire-8 {
        background: radial-gradient(
            circle at bottom right,
            #059bff 0%,
            #1f5cf4 18%,
            #5d4dcd 36%,
            #eb2626a6 60%,
            rgba(255, 255, 255, 0) 85%
        );
    }

    .leaderboard-score.streak-fire-9 {
        background: radial-gradient(
            circle at bottom right,
            #97ecff 0%,
            #1fb5ff 18%,
            #1267dd 42%,
            #b66cbdda 60%,
            rgba(255, 255, 255, 0) 85%
        );
    }

    .leaderboard-score.streak-fire-10 {
        background: radial-gradient(
            circle at bottom right,
            #fff 0%,
            #63d8ff 18%,
            #069bff 35%,
            #0687ffe5 48%,
            #006eff48 65%,
            rgba(255, 255, 255, 0) 86%
        );
    }

    .leaderboard-score .kick-btn {
        margin-inline-start: 0.75rem;
    }

    .leaderboard-gained {
        color: var(--color-success);
        font-size: var(--fs-sm);
        margin-inline-start: 0.5rem;
    }

    .score-evolution {
        width: 100%;
        padding: 1rem;
        background: #fff;
        box-sizing: border-box;
        margin-top: 1rem;
    }

    .score-evolution-title {
        margin: 0 0 1rem;
        font-size: var(--fs-2xl);
    }

    .score-evolution-plot {
        width: 100%;
        overflow-x: auto;
    }

    .score-evolution-canvas {
        position: relative;
        width: 100%;
        min-width: 400px;
    }

    .score-evolution-canvas::before {
        content: '';
        position: absolute;
        inset:
            var(--score-chart-top, 4.6154%)
            var(--score-chart-right, 3.2%)
            var(--score-chart-bottom, 12.3077%)
            var(--score-chart-left, 9.6%);
        border-inline-start: var(--border-width) solid #000;
        border-block-end: var(--border-width) solid #000;
        margin-inline-start: var(--overlap-half);
        margin-block-end: var(--overlap-half);
        box-sizing: border-box;
        pointer-events: none;
        z-index: 1;
    }

    .score-evolution-svg {
        display: block;
        position: relative;
        width: 100%;
        height: auto;
        z-index: 0;
    }

    .score-evolution-series {
        display: block;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
    }

    .score-evolution-grid-line {
        stroke: var(--color-gray);
        stroke-width: 2;
    }

    .score-evolution-axis-label {
        fill: #000;
        font-family: "Plus Jakarta Sans", sans-serif;
        font-size: 18px;
        font-weight: 800;
    }

    .score-evolution-line {
        fill: none;
        stroke-width: 4;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: stroke 0.12s ease-out;
    }

    .score-evolution-line.is-highlighted {
        stroke: #000;
    }

    @keyframes score-evolution-line-enter {
        to {
            stroke-dashoffset: 0;
        }
    }

    .score-evolution-line.is-entering {
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
        animation: score-evolution-line-enter 1200ms ease-out var(--score-line-delay, 0ms) forwards;
    }

    .score-evolution-point {
        stroke: none;
        cursor: pointer;
        transform-box: fill-box;
        transform-origin: center;
        transition: fill 0.12s ease-out, transform 0.12s ease-out;
    }

    .score-evolution-point:hover {
        transform: scale(1.6);
    }

    .score-evolution-point.is-highlighted,
    .score-evolution-points.is-highlighted .score-evolution-point {
        fill: #000;
    }

    @keyframes score-evolution-point-enter {
        to {
            opacity: 1;
        }
    }

    .score-evolution-point.is-entering,
    .score-evolution-points.is-entering {
        opacity: 0;
        animation: score-evolution-point-enter 100ms ease-out var(--score-point-delay, 0ms) forwards;
    }

    @media (prefers-reduced-motion: reduce) {

        .score-evolution-line,
        .score-evolution-point {
            transition: none;
        }

        .score-evolution-line.is-entering,
        .score-evolution-point.is-entering,
        .score-evolution-points.is-entering {
            animation: none;
            opacity: 1;
            stroke-dasharray: none;
            stroke-dashoffset: 0;
        }
    }

    @keyframes final-leaderboard-enter {
        from {
            opacity: 0;
            transform: translateY(0.75rem);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .final-leaderboard {
        width: 100%;
        margin-inline: var(--overlap-half);
    }

    .final-leaderboard.is-entering {
        animation: final-leaderboard-enter 220ms ease-out both;
    }

    .leaderboard-row.is-chart-highlight-control:focus-visible {
        outline: var(--border-width) solid var(--color-primary);
        outline-offset: 0.25rem;
    }

    @media (prefers-reduced-motion: reduce) {
        .final-leaderboard.is-entering {
            animation: none;
        }
    }

    .kick-btn {
        background: none;
        border: none;
        color: #000;
        font-size: var(--fs-lg);
        font-weight: 900;
        line-height: 1;
        cursor: pointer;
        padding: 0;
        margin-inline-start: 1rem;
        transition: color 0.1s;
    }

    /* Time Bar Widget */
    .time-bar {
        width: auto;
        margin-inline-start: var(--overlap-half);
        margin-inline-end: var(--overlap-half);
        margin-block-end: calc(var(--border-width) * -1);
        height: 1rem;
        background: var(--color-bg);
        border: var(--border-width) solid #000;
        box-sizing: border-box;
        position: sticky;
        /* 0 when no header sticky stack; under header when player-header is on */
        inset-block-start: var(--header-sticky-offset, 0px);
        z-index: 99;
    }

    .time-fill {
        height: calc(100% + var(--border-width) * 2);
        margin-block-start: calc(var(--border-width) * -1);
        margin-inline-start: calc(var(--border-width) * -1);
        background: var(--color-success);
        border: var(--border-width) solid #000;
        box-sizing: border-box;
    }


    /* Question Slider Widget */
    .q-slider-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        gap: 2rem;
        color: var(--color-text-dark);
    }

    /* Pair matching */
    .qpair-player-wrapper,
    .qpair-host-reveal {
        width: min(100%, 70rem);
        margin-inline: auto;
        color: var(--color-text-dark);
    }

    .qpair-board {
        --qpair-gap: clamp(4rem, 14vw, 8rem);
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--qpair-gap);
        width: 100%;
        isolation: isolate;
    }

    .qpair-lines {
        position: absolute;
        inset: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        overflow: visible;
        pointer-events: none;
    }

    .qpair-column {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-rows: repeat(var(--qpair-count, 4), minmax(4.5rem, 1fr));
        min-width: 0;
    }

    .qpair-card.b-panel {
        --pair-color: #fff;
        position: relative;
        min-width: 0;
        min-height: 4.5rem;
        margin-block: var(--overlap-half);
        align-items: center;
        justify-content: center;
        background: var(--pair-color);
        color: var(--color-text-dark);
        font-size: clamp(0.85rem, 2.2vw, 1.1rem);
        text-align: center;
        touch-action: none;
        user-select: none;
    }

    .qpair-card:not(:disabled) {
        cursor: pointer;
    }

    .qpair-card.b-panel.qpair-left-card.is-connected,
    .qpair-card.b-panel.qpair-right-card {
        color: #fff;
    }

    .qpair-board.is-locked .qpair-card {
        pointer-events: none;
    }

    .qpair-socket {
        position: absolute;
        inset-block-start: 50%;
        z-index: 3;
        width: 1.15rem;
        height: 1.15rem;
        border: 3px solid #000;
        border-radius: 50%;
        background: #fff;
        box-sizing: border-box;
        transform: translateY(-50%);
    }

    .qpair-left-card .qpair-socket {
        inset-inline-end: -0.72rem;
    }

    .qpair-right-card .qpair-socket {
        inset-inline-start: -0.72rem;
    }

    .qpair-card.is-active .qpair-socket {
        background: #000;
    }

    .qpair-card.is-connected .qpair-socket,
    .qpair-card.is-used .qpair-socket {
        background: var(--pair-color);
    }

    .qpair-path {
        fill: none;
        stroke-width: 5;
        stroke-linecap: round;
    }

    .qpair-player-path {
        stroke: #000;
        opacity: 0.18;
    }

    .qpair-submit-row {
        display: flex;
        margin-block-start: 2rem;
        justify-content: center;
    }

    .qpair-submit:disabled {
        opacity: 0.5;
    }

    /* Order question */
    .qorder-player-wrapper {
        width: min(100%, 36rem);
        margin-inline: auto;
        color: var(--color-text-dark);
    }

    .qorder-list {
        display: flex;
        width: 100%;
        flex-direction: column;
        isolation: isolate;
    }

    .qorder-card.b-panel {
        --qorder-color: #fff;
        position: relative;
        min-width: 0;
        min-height: 4.75rem;
        padding: 1rem 4rem 1rem 1.25rem;
        flex: none;
        align-items: flex-start;
        justify-content: center;
        background: var(--qorder-color);
        color: #fff;
        font-size: clamp(1rem, 3vw, 1.2rem);
        line-height: 1.25;
        text-align: left;
        touch-action: none;
        user-select: none;
        cursor: grab;
    }

    .qorder-card:active {
        cursor: grabbing;
    }

    .qorder-card.is-placeholder {
        z-index: 0;
        background: #000;
        color: transparent;
        border-color: #000;
    }

    .qorder-card.is-placeholder .qorder-grip {
        opacity: 0;
    }

    .qorder-card.is-drag-clone {
        position: fixed;
        z-index: 1000;
        margin: 0;
        background: var(--qorder-color);
        color: #fff;
        pointer-events: none;
        cursor: grabbing;
        transform: rotate(var(--qorder-tilt, 0deg));
        transform-origin: var(--qorder-grab-x, 50%) 50%;
        box-shadow: 0.55rem 0.55rem 0 rgb(0 0 0 / 1);
    }

    .qorder-grip {
        position: absolute;
        inset-block-start: 50%;
        inset-inline-end: 1.25rem;
        display: grid;
        width: 1.5rem;
        gap: 0.3rem;
        transform: translateY(-50%);
    }

    .qorder-grip::before,
    .qorder-grip::after,
    .qorder-grip > span {
        display: block;
        height: 0.22rem;
        background: currentColor;
        content: "";
    }

    .qorder-submit-row {
        display: flex;
        margin-block-start: 2rem;
        justify-content: center;
    }

    .qorder-submit {
        min-width: 9rem;
    }

    .qorder-player-wrapper.is-locked .qorder-list,
    .qorder-player-wrapper.is-locked .qorder-card {
        pointer-events: none;
    }

    .qorder-status {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .qorder-host-reveal {
        width: min(100%, 78rem);
        margin-inline: auto;
        color: var(--color-text-dark);
    }

    .qorder-reveal-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(21rem, 0.8fr);
        gap: 2rem;
        width: 100%;
        align-items: start;
        text-align: left;
    }

    .qorder-reveal-section h2 {
        margin: 0 0 1rem;
        font-size: var(--fs-xl);
        text-align: center;
    }

    .qorder-correct-list {
        display: flex;
        flex-direction: column;
    }

    .qorder-reveal-card {
        display: grid;
        grid-template-columns: 2.25rem minmax(0, 1fr);
        min-height: 3.75rem;
        padding: 0.75rem 1rem;
        align-items: center;
        background: var(--qorder-color);
        color: #fff;
        font-size: var(--fs-lg);
        font-weight: 800;
        box-sizing: border-box;
    }

    .qorder-reveal-rank {
        font-size: var(--fs-sm);
        font-variant-numeric: tabular-nums;
    }

    .qorder-guess-list {
        max-height: 22rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: #fff;
        scrollbar-color: #000 var(--color-bg);
    }

    .qorder-guess-row {
        display: grid;
        grid-template-columns: repeat(var(--qorder-count), minmax(0, 1fr));
        gap: 0;
        height: 2.75rem;
        padding: 0;
        border-block-end: var(--border-width) solid #000;
        box-sizing: border-box;
    }

    .qorder-guess-row:last-child {
        border-block-end: 0;
    }

    .qorder-mini-item {
        display: block;
        min-width: 0;
        height: 100%;
        background: var(--qorder-color);
        border-inline-end: var(--border-width) solid #000;
        box-sizing: border-box;
    }

    .qorder-mini-item.is-correct-position {
        background: #fff;
    }

    .qorder-mini-item:last-child {
        border-inline-end: 0;
    }

    #questionRevealContent.question-visible-on-reveal .qorder-host-reveal {
        color: var(--color-text-dark);
    }

    #questionRevealContent.question-visible-on-reveal .qpair-host-reveal {
        color: var(--color-text-dark);
    }

    @media (max-width: 560px) {
        .qpair-board {
            --qpair-gap: 3.5rem;
        }

        .qpair-column {
            grid-template-rows: repeat(var(--qpair-count, 4), minmax(4rem, 1fr));
        }

        .qpair-card.b-panel {
            min-height: 4rem;
        }

        .qpair-submit-row {
            margin-block-start: 1.25rem;
        }

        .qorder-card.b-panel {
            min-height: 4.25rem;
        }

        .qorder-submit-row {
            margin-block-start: 1.25rem;
        }
    }

    @media (max-width: 780px) {
        .qorder-reveal-grid {
            grid-template-columns: 1fr;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .qorder-card.is-drag-clone {
            transform: none;
        }
    }

    /* Vote free-text */
    .q-vote-wrapper {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
        max-width: 520px;
        margin-inline: auto;
    }

    .q-list-guesses {
        min-height: 1.5em;
        margin: 0 0 1rem;
        color: var(--color-text-dark);
        font-size: var(--fs-lg);
        font-weight: 800;
        line-height: 1.5;
        text-align: center;
    }

    .q-list-guess--correct {
        color: var(--color-success);
    }

    .q-list-guess--close {
        color: var(--color-warning);
    }

    .q-list-guess--taboo {
        color: var(--color-danger);
    }

    .q-list-guess--neutral {
        color: var(--color-text-dark);
    }

    .q-vote-input {
        width: 100%;
        margin: 0;
        position: relative;
        z-index: 1;
        text-align: center;
        font-size: var(--fs-xl);
        font-weight: bold;
    }

    .q-vote-meta {
        font-size: var(--fs-sm);
        opacity: 0.7;
        margin-block-end: 0.5rem;
    }

    .q-vote-submit {
        margin: 0;
        margin-block-start: var(--overlap-full);
    }


    /* Reusable Brutalist Chart */
    .b-chart {
        --chart-label-space: 0px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        gap: 0;
        height: 300px;
        width: 100%;
        border-block-end: var(--border-width) solid #000;
        margin-block-end: var(--chart-label-space);
        position: relative;
    }

    .b-chart.horizontal {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        border-block-end: none;
        border-inline-start: var(--border-width) solid #000;
        height: auto;
        min-height: 200px;
    }

    .b-chart.horizontal .correct-line {
        position: absolute;
        inset-block-start: 0;
        inset-block-end: 0;
        width: 0;
        border-inline-start: var(--border-width) dashed var(--color-success);
        z-index: 0;
    }

    .b-chart-row-bar {
        height: 40px;
        min-width: var(--border-width);
        border: var(--border-width) solid #000;
        margin: var(--overlap-half) 0;
        margin-inline-start: var(--overlap-full);
        box-sizing: border-box;
        transition: width 0.5s ease-out;
        position: relative;
        z-index: 1;
    }

    /* Lollipop Chart Style Variation */
    .b-chart.lollipop .b-chart-row-bar {
        background-color: #000 !important;
        border: none;
        height: var(--border-width);
        margin: 18px 0;
        overflow: visible;
    }

    .b-chart.lollipop .b-chart-row-bar::after {
        content: '';
        position: absolute;
        inset-inline-end: 0;
        inset-block-start: 50%;
        transform: translate(calc(50% - 1.5*var(--border-width)), -50%);
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: var(--border-width) solid #000;
        background-color: var(--bar-bg);
        box-sizing: border-box;
        z-index: 2;
    }

    .b-chart-col {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        flex: 1;
        height: 100%;
        position: relative;
    }

    .b-chart-bar {
        width: calc(100% + var(--border-width));
        max-width: calc(200px + var(--border-width));
        min-height: 3rem;
        border: var(--border-width) solid #000;
        margin: 0;
        margin-block-end: var(--overlap-full);
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        padding-block-end: 0.2rem;
        line-height: 1.2;
        font-weight: bold;
        color: #fff;
        transition: height 0.5s ease-out;
    }

    .b-chart-label {
        position: absolute;
        inset-block-start: 100%;
        inset-inline-start: 50%;
        transform: translateX(-50%);
        font-weight: bold;
        font-size: var(--fs-base);
        text-align: center;
        word-break: break-word;
        white-space: nowrap;
        padding-top: 0.5rem;
    }

    .b-chart-top-label {
        font-size: var(--fs-base);
        text-align: center;
        word-break: break-word;
        max-width: 100%;
        padding-block-end: 0.35rem;
        color: var(--color-text-dark);
        line-height: 1.2;
    }

    .b-chart-top-label.is-winner {
        color: var(--color-text-dark);
    }

    #questionRevealContent.question-visible-on-reveal {
        color: var(--color-text-dark);
        font-weight: normal;
        font-size: inherit;
        width: 100%;
        box-sizing: border-box;
    }

    #questionRevealContent.question-visible-on-reveal .b-chart-label.q-vote-author-label {
        position: absolute;
        inset-block-start: 100%;
        inset-inline-start: 50%;
        transform: translateX(-50%);
        margin-block-start: 0.25rem;

        width: 100%;
        max-width: 200px;
        box-sizing: border-box;

        font-weight: bold;
        font-size: var(--fs-base);
        line-height: 1.25;
        text-align: center;
        color: var(--color-text-dark);

        /* WAS: white-space: nowrap — now allow multi-line */
        white-space: normal;
        overflow-wrap: break-word;
        word-break: break-word;
        hyphens: auto;

    }

    #questionRevealContent.question-visible-on-reveal .b-chart {
        --chart-label-space: 0px;
    }

    .q-slider-value-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1.5rem;
    }

    .q-slider-value {
        font-size: var(--fs-4xl);
        font-weight: bold;
        color: var(--color-text-dark);
    }

    .q-slider-adjust-btn {
        background: none;
        border: none;
        font-size: var(--fs-4xl);
        font-weight: bold;
        cursor: pointer;
        color: var(--color-text-dark);
        padding: 0 1rem;
        transition: transform 0.1s, color 0.1s;
        user-select: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    @media (hover: hover) {
        .q-slider-adjust-btn:hover {
            color: var(--color-success);
            transform: scale(1.15);
        }

        .q-slider-adjust-btn.touch-active {
            transform: scale(0.95);
        }
    }

    .q-slider-adjust-btn:disabled {
        opacity: 0.3;
        cursor: not-allowed;
        pointer-events: none;
    }

    .q-slider-container {
        width: 80%;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .q-slider-labels {
        display: flex;
        justify-content: space-between;
        width: 100%;
        font-size: var(--fs-base);
    }
}

@layer modifiers {

    /* Hover/Focus States */
    @media (hover: hover) {

        .settings-row[aria-pressed="true"]:is(:hover, :focus-visible) {
            background-image: none;
        }

        :is(.qmaker-question-select, .qmaker-type-choice)[data-question-type]:is(:hover, :focus-visible) {
            background-image: none;
        }

        .b-interactive:hover,
        .b-interactive:focus-visible {
            z-index: 2;
            border-radius: 0;
            outline: none;
        }

        .b-interactive:not(input):not(select):not(textarea):hover,
        .b-interactive:not(input):not(select):not(textarea):focus-visible {
            background-color: var(--color-success);
            color: var(--color-text-dark);
        }

        /* Hover/Focus States for colored boxes */
        .b-interactive.colored:hover,
        .b-interactive.colored:focus-visible {
            background-color: #fff;
            color: var(--color-text-dark);
        }
    }

    .b-interactive.touch-active {
        z-index: 2;
        border-radius: 0;
        outline: none;
    }

    .settings-row[aria-pressed="true"].touch-active {
        background-image: none;
    }

    :is(.qmaker-question-select, .qmaker-type-choice)[data-question-type].touch-active {
        background-image: none;
    }

    .b-interactive:not(input):not(select):not(textarea).touch-active {
        background-color: var(--color-success);
        color: var(--color-text-dark);
    }

    .b-interactive.colored.touch-active {
        background-color: #fff;
        color: var(--color-text-dark);
    }

    /* Disabled State */
    .b-interactive:disabled,
    .b-interactive.disabled {
        opacity: 0.6;
        cursor: not-allowed;
        background-color: var(--color-bg);
        color: #000;
        border-style: dashed;
        pointer-events: none;
    }

    /* Slider Specific Modifiers */
    .q-slider-input {
        width: 100%;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
        background: transparent;
        --thumb-bg: #fff;
        --thumb-size: 34px;
        --thumb-border: var(--border-width) solid #000;
        --thumb-radius: 50%;
        --thumb-mt: 0px;
    }

    .q-slider-input:focus {
        outline: none;
    }

    .q-slider-input::-webkit-slider-runnable-track {
        background:
            linear-gradient(to right, #000 var(--border-width), transparent var(--border-width), transparent calc(100% - var(--border-width)), #000 calc(100% - var(--border-width))),
            linear-gradient(to bottom, transparent calc(16px - var(--border-width)/2), #000 calc(16px - var(--border-width)/2), #000 calc(16px + var(--border-width)/2), transparent calc(16px + var(--border-width)/2));
        height: 32px;
        border: none;
    }

    .q-slider-input::-moz-range-track {
        background:
            linear-gradient(to right, #000 var(--border-width), transparent var(--border-width), transparent calc(100% - var(--border-width)), #000 calc(100% - var(--border-width))),
            linear-gradient(to bottom, transparent calc(16px - var(--border-width)/2), #000 calc(16px - var(--border-width)/2), #000 calc(16px + var(--border-width)/2), transparent calc(16px + var(--border-width)/2));
        height: 32px;
        border: none;
    }

    .q-slider-input::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        margin-block-start: var(--thumb-mt);
        background-color: var(--thumb-bg);
        height: var(--thumb-size);
        width: var(--thumb-size);
        border: var(--thumb-border);
        border-radius: var(--thumb-radius);
        box-sizing: border-box;
        transition: background-color 0.1s;
    }

    .q-slider-input::-moz-range-thumb {
        -webkit-appearance: none;
        appearance: none;
        margin-block-start: var(--thumb-mt);
        background-color: var(--thumb-bg);
        height: var(--thumb-size);
        width: var(--thumb-size);
        border: var(--thumb-border);
        border-radius: var(--thumb-radius);
        box-sizing: border-box;
        transition: background-color 0.1s;
    }

    @media (hover: hover) {
        .q-slider-input:hover::-webkit-slider-thumb {
            background-color: var(--color-success);
        }

        .q-slider-input:hover::-moz-range-thumb {
            background-color: var(--color-success);
        }
    }

    .q-slider-input.touch-active::-webkit-slider-thumb,
    .q-slider-input.thumb-active::-webkit-slider-thumb {
        background-color: var(--color-success);
    }

    .q-slider-input.touch-active::-moz-range-thumb,
    .q-slider-input.thumb-active::-moz-range-thumb {
        background-color: var(--color-success);
    }

    .q-slider-submit-disabled {
        opacity: 0.5;
    }

    button.option-btn.q-select-btn-selected {
        background-color: #fff;
        text-decoration: underline;
        color: #000;
    }

    .time-fill-success {
        background: var(--color-success);
    }

    .time-fill-warning {
        background: var(--color-warning);
    }

    .time-fill-danger {
        background: var(--color-danger);
    }

    .btn-primary,
    .btn-danger,
    .btn-success,
    .btn-warning {
        color: #fff;
    }

    .btn-primary,
    .btn-primary-rev {
        --button-accent: var(--color-primary);
    }

    .btn-danger,
    .btn-danger-rev {
        --button-accent: var(--color-danger);
    }

    .btn-success,
    .btn-success-rev {
        --button-accent: var(--color-success);
    }

    .btn-warning,
    .btn-warning-rev {
        --button-accent: var(--color-warning);
    }

    .btn-primary,
    .btn-danger,
    .btn-success,
    .btn-warning {
        background-color: var(--button-accent);
    }

    .btn-primary-rev,
    .btn-danger-rev,
    .btn-success-rev,
    .btn-warning-rev {
        background-color: #fff;
        color: var(--button-accent);
    }

    @media (hover: hover) {

        .b-interactive.btn-primary:is(:hover, :focus-visible),
        .b-interactive.btn-danger:is(:hover, :focus-visible),
        .b-interactive.btn-success:is(:hover, :focus-visible),
        .b-interactive.btn-warning:is(:hover, :focus-visible) {
            background-color: #fff;
            color: var(--button-accent);
        }

        .b-interactive.btn-primary-rev:is(:hover, :focus-visible),
        .b-interactive.btn-danger-rev:is(:hover, :focus-visible),
        .b-interactive.btn-success-rev:is(:hover, :focus-visible),
        .b-interactive.btn-warning-rev:is(:hover, :focus-visible) {
            background-color: var(--button-accent);
            color: #fff;
        }
    }

    .b-interactive.btn-primary.touch-active,
    .b-interactive.btn-danger.touch-active,
    .b-interactive.btn-success.touch-active,
    .b-interactive.btn-warning.touch-active {
        background-color: #fff;
        color: var(--button-accent);
    }

    .b-interactive.btn-primary-rev.touch-active,
    .b-interactive.btn-danger-rev.touch-active,
    .b-interactive.btn-success-rev.touch-active,
    .b-interactive.btn-warning-rev.touch-active {
        background-color: var(--button-accent);
        color: #fff;
    }

    /* Colors for answer boxes */
    button.opt-0 {
        background-color: var(--color-opt-0);
        color: white;
    }

    button.opt-1 {
        background-color: var(--color-opt-1);
        color: white;
    }

    button.opt-2 {
        background-color: var(--color-opt-2);
        color: white;
    }

    button.opt-3 {
        background-color: var(--color-opt-3);
        color: white;
    }

    button.opt-4 {
        background-color: var(--color-opt-4);
        color: white;
    }

    button.opt-5 {
        background-color: var(--color-opt-5);
        color: white;
    }

    button.opt-6 {
        background-color: var(--color-opt-6);
        color: white;
    }

    button.opt-7 {
        background-color: var(--color-opt-7);
        color: white;
    }

    .b-box.bg-opt-0 {
        background-color: var(--color-opt-0-light);
    }

    .b-box.bg-opt-1 {
        background-color: var(--color-opt-1-light);
    }

    .b-box.bg-opt-2 {
        background-color: var(--color-opt-2-light);
    }

    .b-box.bg-opt-3 {
        background-color: var(--color-opt-3-light);
    }

    .b-box.bg-opt-4 {
        background-color: var(--color-opt-4-light);
    }

    .b-box.bg-opt-5 {
        background-color: var(--color-opt-5-light);
    }

    .b-box.bg-opt-6 {
        background-color: var(--color-opt-6-light);
    }

    .b-box.bg-opt-7 {
        background-color: var(--color-opt-7-light);
    }

    .leaderboard-info.bg-opt-0 {
        background: radial-gradient(circle at bottom left, var(--color-opt-0-light), #fff 75%);
    }

    .leaderboard-info.bg-opt-1 {
        background: radial-gradient(circle at bottom left, var(--color-opt-1-light), #fff 75%);
    }

    .leaderboard-info.bg-opt-2 {
        background: radial-gradient(circle at bottom left, var(--color-opt-2-light), #fff 75%);
    }

    .leaderboard-info.bg-opt-3 {
        background: radial-gradient(circle at bottom left, var(--color-opt-3-light), #fff 75%);
    }

    .leaderboard-info.bg-opt-4 {
        background: radial-gradient(circle at bottom left, var(--color-opt-4-light), #fff 75%);
    }

    .leaderboard-info.bg-opt-5 {
        background: radial-gradient(circle at bottom left, var(--color-opt-5-light), #fff 75%);
    }

    .leaderboard-info.bg-opt-6 {
        background: radial-gradient(circle at bottom left, var(--color-opt-6-light), #fff 75%);
    }

    .leaderboard-info.bg-opt-7 {
        background: radial-gradient(circle at bottom left, var(--color-opt-7-light), #fff 75%);
    }

    .leaderboard-rank.rank-1 {
        --rank-color: var(--color-gold);
        --rank-gradient: var(--gradient-gold);
    }

    .leaderboard-rank.rank-2 {
        --rank-color: var(--color-silver);
        --rank-gradient: var(--gradient-silver);
    }

    .leaderboard-rank.rank-3 {
        --rank-color: var(--color-bronze);
        --rank-gradient: var(--gradient-bronze);
    }

    .leaderboard-rank:is(.rank-1, .rank-2, .rank-3) .leaderboard-rank-text {
        color: var(--rank-color);
    }

    @supports ((background-clip: text) or (-webkit-background-clip: text)) {
        .leaderboard-rank:is(.rank-1, .rank-2, .rank-3) .leaderboard-rank-text {
            background-image: var(--rank-gradient);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
            -webkit-text-fill-color: transparent;
        }
    }

    .b-panel.answered {
        background-color: var(--color-primary);
        color: white;
    }

    .kick-btn:hover {
        color: var(--color-danger);
    }

    .version-index {
        width: 100%;
        text-align: center;
        font-size: var(--fs-sm);
        padding: 1rem;
        opacity: 0.5;
    }
}

/* Qmaker overrides sit after the shared primitives so its compact editor
   controls retain their intended size while still using b-box/b-panel. */
@layer components {
    dialog.qmaker-dialog {
        margin: auto;
        background: var(--color-bg);
    }

    dialog.qmaker-add-dialog {
        padding: 0;
        border: 0;
        overflow: visible;
        background: transparent;
    }

    .b-btn.qmaker-small-btn {
        padding: 0.55rem 0.75rem;
        font-size: var(--fs-base);
    }

    .b-btn.qmaker-rail-action {
        padding: 0;
        font-size: var(--fs-sm);
    }

    .b-input.qmaker-input {
        font-size: var(--fs-base);
    }

    .b-btn.qmaker-square-btn,
    .b-btn.qmaker-correct-btn {
        width: 3rem;
        min-width: 3rem;
        height: 3rem;
        padding: 0;
    }

    .b-btn.qmaker-rail-action.qmaker-square-btn {
        width: 2.5rem;
        min-width: 2.5rem;
        height: 2.5rem;
        flex: 0 0 2.5rem;
    }

}

/* Keep semantic action colors intact above the generic green interaction
   treatment. These states live in the higher-priority modifiers layer. */
@layer modifiers {
    @media (hover: hover) {
        .b-interactive.btn-primary:is(:hover, :focus-visible),
        .b-interactive.btn-danger:is(:hover, :focus-visible),
        .b-interactive.btn-success:is(:hover, :focus-visible),
        .b-interactive.btn-warning:is(:hover, :focus-visible) {
            background-color: #fff;
            color: var(--button-accent);
        }

        .b-interactive.btn-primary-rev:is(:hover, :focus-visible),
        .b-interactive.btn-danger-rev:is(:hover, :focus-visible),
        .b-interactive.btn-success-rev:is(:hover, :focus-visible),
        .b-interactive.btn-warning-rev:is(:hover, :focus-visible) {
            background-color: var(--button-accent);
            color: #fff;
        }

        .b-interactive.qmaker-correct-btn:is(:hover, :focus-visible) {
            background-color: var(--color-success);
            color: #fff;
        }

        .b-interactive.qmaker-correct-btn.is-correct:is(:hover, :focus-visible) {
            background-color: #fff;
            color: var(--color-success);
        }

        .b-interactive.qpair-card:is(:hover, :focus-visible) {
            background-color: var(--pair-color);
        }

        .b-interactive.qpair-right-card:is(:hover, :focus-visible),
        .b-interactive.qpair-left-card.is-connected:is(:hover, :focus-visible) {
            color: #fff;
        }

        .b-interactive.qorder-card:not(.is-placeholder):is(:hover, :focus-visible) {
            background-color: var(--qorder-color);
            color: #fff;
        }

        .b-interactive.qorder-card.is-placeholder:is(:hover, :focus-visible) {
            background-color: #000;
            color: transparent;
            border-color: #000;
        }
    }

    .b-interactive.btn-primary.touch-active,
    .b-interactive.btn-danger.touch-active,
    .b-interactive.btn-success.touch-active,
    .b-interactive.btn-warning.touch-active {
        background-color: #fff;
        color: var(--button-accent);
    }

    .b-interactive.btn-primary-rev.touch-active,
    .b-interactive.btn-danger-rev.touch-active,
    .b-interactive.btn-success-rev.touch-active,
    .b-interactive.btn-warning-rev.touch-active {
        background-color: var(--button-accent);
        color: #fff;
    }

    .b-interactive.qpair-card.touch-active {
        background-color: var(--pair-color);
    }

    .b-interactive.qpair-right-card.touch-active,
    .b-interactive.qpair-left-card.is-connected.touch-active {
        color: #fff;
    }

    .b-interactive.qorder-card:not(.is-placeholder).touch-active {
        background-color: var(--qorder-color);
        color: #fff;
    }

    .b-interactive.qorder-card.is-placeholder.touch-active {
        background-color: #000;
        color: transparent;
        border-color: #000;
    }

}