.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

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

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

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}:root {
    font-family: system-ui, sans-serif;
    color: #1e293b;
    background: #f8fafc;
    line-height: 1.6;
}

body { margin: 0; }
main { max-width: 44rem; margin: 12vh auto; padding: 1.5rem; }
h1 { font-size: 2.5rem; margin-bottom: 0.75rem; }
a { color: #2457a7; }

.team-page { max-width: 36rem; margin: 1rem auto; }
label { display: block; margin: 1rem 0; }
input, button { font: inherit; border: 1px solid #94a3b8; border-radius: .5rem; padding: .8rem; box-sizing: border-box; }
input { display: block; width: 100%; }
button { display: block; width: 100%; margin: .75rem 0; background: #fff; color: #1e293b; cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
button.selected { border: 3px solid #64748b; background: #e2e8f0; }
fieldset { border: 0; margin: 0; padding: 0; }
.closing-countdown { display: grid; justify-items: center; gap: .4rem; margin: 1rem 0; color: #334155; }
.countdown-circle { position: relative; width: 7.5rem; height: 7.5rem; display: grid; place-items: center; }
.countdown-circle svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.countdown-circle circle { fill: none; stroke-width: 8; }
.countdown-track { stroke: #e2e8f0; }
.countdown-progress { stroke: #2563eb; stroke-linecap: round; }
.countdown-circle strong { font-size: 2.5rem; font-variant-numeric: tabular-nums; }
.screen-page { max-width: 80rem; margin: 2rem auto; text-align: center; }
.screen-question { font-size: clamp(2rem, 4vw, 4rem); }
.screen-choice, .screen-solution { font-size: clamp(1.25rem, 3vw, 2.5rem); }
table { margin: 2rem auto; width: 100%; border-collapse: collapse; font-size: clamp(1rem, 2.5vw, 2rem); }
th, td { padding: .75rem; text-align: left; border-bottom: 1px solid #cbd5e1; }
/* Compact team layout with a reserved countdown row in either orientation. */
.team-page { box-sizing: border-box; width: 100%; max-width: 36rem; margin: 0 auto; padding: .75rem 1rem; }
.team-page h1 { font-size: 1.4rem; margin: 0 0 .25rem; }
.team-page h2 { font-size: 1.1rem; margin: 0 0 .5rem; overflow-wrap: anywhere; }
.team-page p { margin: .5rem 0; line-height: 1.35; }
.team-page label { margin: .5rem 0; }
.team-page input, .team-page button { min-height: 44px; padding: .55rem .75rem; }
.team-page button { margin: .5rem 0; }
.countdown-slot { height: 2rem; margin: .25rem 0 .5rem; }
.countdown-hidden { visibility: hidden; }
.closing-countdown { display: flex; align-items: center; gap: .75rem; margin: 0; height: 100%; color: #334155; }
.closing-countdown strong { min-width: 2.5rem; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.countdown-unit { font-size: .8rem; margin-left: .15rem; }
.countdown-track { height: .6rem; flex: 1; overflow: hidden; border-radius: 1rem; background: #e2e8f0; }
.countdown-progress { height: 100%; background: #2563eb; border-radius: inherit; }
@media (orientation: landscape) and (max-height: 500px) {
    .team-page { max-width: 52rem; padding: .5rem 1rem; }
    .team-page h1, .team-page h2 { display: inline-block; margin-right: 1rem; }
    .team-page fieldset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem .75rem; }
    .team-page fieldset > button:last-child:not(:first-child):nth-child(odd) { grid-column: 1 / -1; }
    .team-page p { font-size: .9rem; }
}
.screen-controls { max-width: 22rem; margin: 1.5rem auto; font-size: .9rem; }
.screen-controls summary { cursor: pointer; padding: .5rem; }

/* Keep operator controls discreet and separate from projected quiz content. */
.screen-page { box-sizing: border-box; min-height: 100dvh; margin: 0 auto; padding-bottom: 4rem; }
.screen-footer { position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: 1rem; padding: .3rem .75rem; background: #f8fafc; font-size: .75rem; }
.screen-footer .screen-footer-link { display: inline-block; width: auto; margin: 0; padding: .25rem; border: 0; background: transparent; color: #64748b; text-decoration: underline; }
.screen-footer .screen-footer-link:hover, .screen-footer .screen-footer-link:focus-visible { color: #1e293b; }
.screen-connection-options { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); width: min(22rem, calc(100vw - 2rem)); padding: 1rem; border: 1px solid #cbd5e1; border-radius: .5rem; background: #fff; box-shadow: 0 .25rem 1rem #0002; font-size: .85rem; }
.screen-fullscreen-error:empty { display: none; }

.screen-page { padding-bottom: 7rem; }
.screen-countdown-slot { position: fixed; bottom: 3rem; left: 50%; transform: translateX(-50%); width: min(40rem, calc(100vw - 3rem)); height: 2.5rem; }
.screen-countdown-slot .closing-countdown strong { font-size: 1.75rem; min-width: 4rem; }
.screen-countdown-slot .countdown-track { height: .9rem; }

/* Projected quiz presentation; team answer controls remain independent. */
.screen-page:has(.display-header) { max-width: none; background: linear-gradient(160deg, #fffaf4 0%, #ffeedb 55%, #ffc077 100%); }
.display-header { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin: 0 auto 1.25rem; max-width: 80rem; }
.display-header img { width: clamp(5rem, 9vw, 8rem); height: auto; background: #fff; border-radius: .75rem; }
.display-header h1 { margin: 0; font-size: clamp(1.5rem, 3vw, 3rem); overflow-wrap: anywhere; }
.display-stage { box-sizing: border-box; max-width: 80rem; margin: 0 auto; padding: clamp(1.25rem, 3vw, 3rem); background: #fff; border: 1px solid #e8d8c5; border-radius: 1.25rem; box-shadow: 0 1rem 3rem #733f1510; min-height: min(32rem, 60dvh); }
.display-task-context { margin: 0 0 1.5rem; text-align: left; color: #64748b; font-size: clamp(.85rem, 1.2vw, 1.15rem); }
.display-stage .screen-question { font-weight: 600; font-size: clamp(1.5rem, 3.5vw, 3.25rem); line-height: 1.3; margin: 0 0 2rem; overflow-wrap: anywhere; }
.display-choices { display: grid; grid-template-columns: repeat(var(--choice-columns, 1), minmax(0, 1fr)); gap: 1.25rem; padding: 0; margin: 2rem 0 1rem; list-style: none; text-align: left; }
.display-choice { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; padding: 1.15rem 1.5rem; min-height: 4rem; border: 2px solid #334155; border-radius: 1.2rem; background: linear-gradient(120deg, #f8fafc, #fff); color: #1e293b; font-size: clamp(1.1rem, 2.3vw, 2rem); transition: background .3s, border-color .3s; }
.display-choice-letter { color: #c2690d; font-weight: 800; padding-right: .8rem; border-right: 1px solid #cbd5e1; }
.display-choice-text { overflow-wrap: anywhere; line-height: 1.3; }
.display-choice-correct { background: linear-gradient(120deg, #d9f99d, #ecfccb); border-color: #65a30d; color: #14532d; box-shadow: 0 0 0 3px #84cc1626; }
.display-choice-correct .display-choice-letter { color: #14532d; border-color: #84cc16; }
.display-choice-verdict { position: absolute; right: 1rem; top: -.7rem; padding: .1rem .6rem; border-radius: 1rem; color: #fff; background: #3f6212; font-size: .85rem; font-weight: 700; }
.display-stage .screen-solution { display: flex; flex-direction: column; margin: 1.5rem 0; overflow-wrap: anywhere; }
.display-solution-label { font-size: .55em; color: #64748b; }
.estimate-reveal { max-width: min(30rem, 52dvh); margin: 0 auto; }
.estimate-dial { display: block; width: 100%; height: auto; overflow: visible; }
.estimate-dial-track { fill: none; stroke: #e2e8f0; stroke-width: 20; stroke-linecap: round; }
.estimate-dial-accent { fill: none; stroke: #fb923c; stroke-width: 20; stroke-linecap: round; }
.estimate-dial-tick { stroke: #64748b; stroke-width: 3; }
.estimate-needle { fill: #ea580c; }
.estimate-dial-hub { fill: #1e293b; }
.estimate-readout { margin-top: -.75rem; display: flex; flex-direction: column; align-items: center; }
.estimate-reveal-label { color: #64748b; font-size: clamp(.9rem, 1.5vw, 1.25rem); }
.estimate-number { font-size: clamp(1.5rem, 5vw, 4.5rem); font-variant-numeric: tabular-nums; line-height: 1.2; overflow-wrap: anywhere; max-width: 100%; color: #1e293b; }
.estimate-settled .estimate-number { color: #166534; }
@media (max-width: 640px) {
    .display-header { gap: .75rem; }
    .display-stage { padding: 1rem; border-radius: .75rem; }
    .display-choices { grid-template-columns: 1fr; gap: 1rem; }
    .display-choice { padding: .85rem 1rem; min-height: 3rem; }
}
@media (prefers-reduced-motion: reduce) { .display-choice { transition: none; } }

.screen-page:has(.display-header) { padding-bottom: 4rem; }
.screen-page:has(.screen-countdown-slot:not(.countdown-hidden)) { padding-bottom: 7rem; }
.display-choices { font-size: clamp(1.1rem, 2.3vw, 2rem); }
.display-choices-stacked .display-choice { font-size: clamp(1.05rem, 1.6vw, 1.5rem); padding: .8rem 1.25rem; min-height: 0; }
@media (min-width: 641px) and (max-height: 750px) {
    .display-stage { padding: 1.5rem; }
    .display-task-context { margin-bottom: 1rem; }
    .display-stage .screen-question { margin-bottom: 1.5rem; }
    .display-choices { margin-top: 1.5rem; }
}

/* Fixed digit slots keep the reveal width stable, including one-digit answers. */
.estimate-reveal { max-width: 100%; min-height: 12rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; margin: 2rem auto; }
.estimate-number { display: flex; justify-content: center; font-size: min(var(--counter-size, 8rem), 12vw, calc(85vw / var(--counter-length, 1))); font-weight: 750; line-height: 1; white-space: nowrap; overflow-wrap: normal; }
.estimate-digit { display: inline-block; width: .66em; height: 1em; overflow: hidden; }
.estimate-digit-strip { display: flex; flex-direction: column; will-change: transform; }
.estimate-digit-strip > span { display: block; flex: 0 0 1em; height: 1em; text-align: center; }
.estimate-separator { display: inline-block; }
.estimate-settled .estimate-digit-strip { will-change: auto; }


.display-join { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 1rem; border-radius: 1rem; background: white; box-shadow: 0 .5rem 2rem #733f1520; }
.display-join img { display: block; width: 100%; height: auto; }
.display-join-lobby { width: min(23rem, 65vw); margin: 2rem auto; font-size: clamp(1rem, 2vw, 1.6rem); }
.display-join-lobby strong { font-size: 1.35em; }
.display-join-details { display: flex; flex-direction: column; gap: .4rem; }
.display-join strong { font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive; font-weight: 700; transform: rotate(-3deg); }
.display-join-practice { position: static; flex-direction: row; justify-content: center; gap: 1.5rem; width: fit-content; max-width: 100%; box-sizing: border-box; margin: 1.25rem auto 0; padding: .5rem 1.5rem; font-size: clamp(.9rem, 1.4vw, 1.25rem); }
.display-join-practice strong { font-size: clamp(1.3rem, 2.3vw, 2rem); }
.display-join-practice img { width: clamp(6rem, 10vw, 9rem); flex-shrink: 0; }
.display-join-practice .display-join-details { text-align: left; }
.screen-page:has(.display-join-practice) .display-stage { margin-left: auto; margin-right: auto; min-height: min(26rem, 44dvh); }
.display-join-code { font-variant-numeric: tabular-nums; font-weight: 600; }
@media (max-width: 640px) {
    .display-join-practice { gap: .6rem; padding: .5rem; flex-wrap: wrap; }
    .display-join-practice strong { font-size: 1.2rem; }
    .display-join-practice img { width: 6rem; }
}

/* Lightweight team presentation using the same choice order as the display. */
.team-page { min-height: 100dvh; background: linear-gradient(160deg, #fffaf4, #fff 55%, #ffeedb); }
.team-header { display: flex; align-items: center; gap: .75rem; padding: .25rem 0 .65rem; margin-bottom: .65rem; border-bottom: 1px solid #e8d8c5; }
.team-header img { width: 4rem; height: 4rem; object-fit: contain; background: #fff; border-radius: .65rem; }
.team-header h1 { margin: 0; font-size: 1.35rem; line-height: 1.25; }
.team-header h1 span { display: block; margin-top: .15rem; font-size: .75rem; font-weight: 400; color: #64748b; }
.team-page h2 { font-size: 1.15rem; }
.team-page input { border-color: #cbd5e1; background: #fff; }
.team-page button { border-color: #cbd5e1; box-shadow: 0 .15rem .5rem #33415508; }
.team-page button:focus-visible, .team-page input:focus-visible { outline: 3px solid #fb923c; outline-offset: 2px; }
.team-page button.team-choice { display: flex; align-items: center; gap: .75rem; text-align: left; border: 2px solid #cbd5e1; border-radius: .8rem; background: #fff; padding: .75rem; min-height: 3.5rem; }
.team-choice-letter { display: grid; place-items: center; flex: 0 0 2rem; height: 2rem; border-radius: .5rem; background: #fff1df; color: #a35209; }
.team-choice > span:nth-child(2) { flex: 1; overflow-wrap: anywhere; }
.team-page button.team-choice.selected { border-color: #64748b; background: #e2e8f0; }
.team-choice.selected .team-choice-letter { background: #cbd5e1; color: #334155; }
.team-choice-selected { color: #334155; font-weight: 700; }
@media (orientation: landscape) and (max-height: 500px) {
    .team-header { padding: 0 0 .3rem; margin-bottom: .3rem; }
    .team-header img { width: 2.5rem; height: 2.5rem; }
    .team-header h1 { font-size: 1.1rem; }
    .team-header h1 span { display: none; }
    .team-page button.team-choice { min-height: 2.75rem; padding: .4rem .6rem; }
}

.wake-lock-control { margin: .75rem 0; padding-top: .5rem; border-top: 1px solid #e8d8c5; font-size: .85rem; color: #475569; }
.team-page .wake-lock-control label { display: flex; align-items: center; gap: .5rem; }
.team-page .wake-lock-control input { display: inline-block; width: 1.1rem; height: 1.1rem; min-height: 0; margin: 0; padding: 0; accent-color: #c2690d; }
.wake-lock-status { display: block; font-size: .75rem; }

.team-result { margin: 1rem 0; padding: 1.25rem; background: #fff; border: 1px solid #cbd5e1; border-radius: 1rem; }
.team-result > strong { font-size: 1.75rem; color: #334155; }
.ranking-placeholder { color: #94a3b8; background: #ffffff60; }
.ranking-skeleton { display: inline-block; height: .7em; max-width: 90%; vertical-align: middle; border-radius: .3em; background: linear-gradient(90deg, #94a3b850, #cbd5e180, #94a3b850); filter: blur(4px); }
.ranking-skeleton-name { width: 10em; }
.ranking-skeleton-points { width: 2.5em; }
.ranking-skeleton-time { width: 4em; }
.display-finished-message { margin: 1.5rem 0; text-align: center; font-size: clamp(1.5rem, 2.5vw, 2.5rem); font-weight: 600; }
.ranking-viewport { width: 100%; margin: 1rem auto; }
.ranking-viewport table { margin: 0; }
.ranking-compact { overflow-y: auto; }
.ranking-compact table { font-size: var(--ranking-font-size, 1.25rem); line-height: 1.35; }
.ranking-compact td, .ranking-compact th { padding: 5px 12px; }
.ranking-compact th { position: sticky; top: 0; background: #fff3e5; z-index: 1; }

/* Keep the practice join panel in the same bottom slot before and during questions. */
.screen-page:has(.display-join-practice) { display: flex; flex-direction: column; gap: 1.25rem; }
.screen-page:has(.display-join-practice) .display-header { margin-bottom: 0; }
.screen-page:has(.display-join-practice) .display-stage { width: calc(100% - 3rem); flex-shrink: 0; }
.screen-page .display-join-practice { margin-top: auto; flex-shrink: 0; }
@media (max-width: 600px) { .screen-page:has(.display-join-practice) .display-stage { width: calc(100% - 2rem); } }

/* Compact display chrome keeps the question and its media in the foreground. */
.screen-page:has(.display-header) { padding: 1rem 1.25rem; }
.screen-page:has(.screen-countdown-slot:not(.countdown-hidden)) { padding-bottom: 7rem; }
.display-header { padding: 0 100px; box-sizing: border-box; }
.display-header img { width: clamp(3.5rem, 5vw, 5rem); }
.display-header h1 { font-size: clamp(1.5rem, 2.6vw, 2.6rem); }
.display-header .display-task-context { margin: .25rem 0 0; text-align: center; font-size: clamp(.8rem, 1vw, 1rem); }
.display-tools { position: fixed; top: .75rem; right: .75rem; z-index: 30; display: flex; gap: .5rem; }
.display-tool { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid #d7dfe8; border-radius: .5rem; background: #ffffffdd; color: #24364b; cursor: pointer; }
.display-tool svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.display-tools .screen-fullscreen-error:not(:empty) { position: absolute; top: 48px; right: 0; width: min(320px, 80vw); padding: .75rem; background: white; font-size: .9rem; border-radius: .5rem; }
.display-stage { padding: clamp(1rem, 2vw, 2rem); }
.display-stage .screen-question { margin-bottom: 1rem; }
.display-stage .screen-solution { flex-direction: row; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: .4em; margin: 1rem 0 0; }
.display-stage .display-solution-label { font-size: inherit; }
@media(max-width:600px) { .display-header { padding: 48px 0 0; } }
.display-activation { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:1.5rem; background:rgba(22,34,50,.6); backdrop-filter:blur(5px); }
.display-activation[hidden] { display:none; }
.display-activation section { width:min(100%,540px); box-sizing:border-box; padding:2rem; border-radius:20px; background:white; text-align:center; box-shadow:0 20px 70px #0004; }
.display-activation h2 { font-size:1.6rem; margin:0 0 1rem; }
.display-activation button { width:auto; padding:.9rem 1.3rem; }
.activation-error:empty { display:none; }

.fun-badge { display:inline-block; padding:.4rem .7rem; color:#a34d00; background:#ffe5c4; border-radius:8px; font-weight:600; }
.fun-answer-card { padding:2rem; background:#fff; border-radius:20px; text-align:center; } .fun-answer-card blockquote { font-size:clamp(1.6rem,4vw,4rem); font-weight:700; margin:1rem 0; white-space:pre-wrap; overflow-wrap:anywhere; } .fun-correct-participants { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; } .fun-correct-participants span { padding:.5rem 1rem; background:#e7edf3; border-radius:10px; }

.screen-additional-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.4; text-align: left; margin: 0 auto 1rem; max-width: 65ch; font-size: clamp(1rem, 2.5vw, 2.5rem); }

.display-stage-fun { position: relative; border-color: #edbb82; }
.display-fun-label { position: absolute; top: 0; right: 1.5rem; transform: translateY(-50%); padding: .15rem .6rem; border: 1px solid #edbb82; border-radius: .4rem; background: #fff5e8; color: #934700; font-size: clamp(.75rem, 1vw, 1rem); line-height: 1.3; white-space: nowrap; }
@media(max-width:600px) { .display-fun-label { right: .75rem; } }

.display-stage { position:relative; }
.display-points-label { position:absolute; top:0; right:1.5rem; transform:translateY(-50%); display:flex; align-items:center; gap:.7rem; padding:.25rem .6rem; border:1px solid #e8d8c5; border-radius:.4rem; background:#fff5e8; color:#934700; font-size:clamp(.8rem,1.1vw,1.1rem); }
.display-bonus { display:inline-flex; align-items:center; gap:.2rem; }
.display-bonus svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.hint-points { display:inline-block; margin-left:.7em; color:#934700; font-size:.7em; white-space:nowrap; }

.display-bonus .bonus-comic { width:72px; height:46px; overflow:visible; filter:drop-shadow(1px 2px 1px #55300030); }
.bonus-comic .bonus-burst { fill:#ffdc67; stroke:#aa6100; stroke-width:1.5; }
.bonus-comic .bonus-watch { fill:#318bd0; stroke:#164970; stroke-width:2.5; }
.bonus-comic .bonus-face { fill:#eaf8ff; }
.bonus-comic .bonus-number { fill:#fff; stroke:#9a5400; stroke-width:3; paint-order:stroke fill; font:bold italic 32px system-ui,sans-serif; }