:root {
    color-scheme: dark;
}

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

body {
    font-family: 'Space Grotesk', sans-serif;
    background: #111;
    color: #f5f5f5;
    display: flex;
    justify-content: center;
    padding-top: 4rem;
}

.landing-body {
    background: #101312;
    color: #f4f0e7;
    display: block;
    min-height: 100vh;
    padding: 0;
    font-family: 'Space Grotesk', sans-serif;
}

.landing-shell {
    max-width: 1180px;
    margin: 0 auto;
    padding: 1.4rem 2rem 3rem;
}

.landing-nav,
.landing-actions,
.landing-section-heading,
.landing-show-card {
    display: flex;
    align-items: center;
}

.landing-nav {
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1.7rem;
}

.landing-wordmark {
    color: #f4f0e7;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0;
    text-decoration: none;
}

.landing-wordmark span,
.landing-kicker,
.landing-score-chip span {
    color: #ff5a36;
}

.landing-account-menu .account-dropdown { top: 2.8rem; }

/* Shared account header alignment for platform-facing pages. */
.site-account .twitch-login-button {
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
}

.landing-hero {
    display: grid;
    grid-template-columns: minmax(0, 0.94fr) minmax(360px, 1.06fr);
    align-items: center;
    gap: 3.5rem;
    min-height: 530px;
    padding: 2.5rem 0 4.5rem;
}

.landing-kicker {
    margin: 0 0 0.9rem;
    font-family: 'DM Mono', monospace;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.landing-copy h1 {
    max-width: 620px;
    margin: 0;
    font-size: clamp(3rem, 6vw, 5.4rem);
    font-weight: 700;
    line-height: 0.94;
    letter-spacing: 0;
}

.landing-intro {
    max-width: 510px;
    margin: 1.5rem 0 2rem;
    color: #bdc4b9;
    font-size: 1.06rem;
    line-height: 1.6;
}

.landing-actions { gap: 0.75rem; flex-wrap: wrap; }

.landing-primary-action,
.landing-secondary-action {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    padding: 0 1.1rem;
    border-radius: 5px;
    font-weight: 600;
    text-decoration: none;
}

.landing-primary-action { background: #ff5a36; color: #19120f; }
.landing-primary-action:hover { background: #ff7354; }
.landing-secondary-action { border: 1px solid #536057; color: #f4f0e7; }
.landing-secondary-action:hover { background: #202622; }

.landing-visual {
    position: relative;
    min-height: 430px;
    overflow: hidden;
    border: 1px solid #384039;
    border-radius: 7px;
    background: #1d2921;
}

.landing-visual::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(9, 15, 12, 0.15), rgba(9, 15, 12, 0.7));
    content: '';
}

.landing-visual img {
    width: 100%;
    height: 430px;
    object-fit: cover;
    filter: saturate(0.7) contrast(1.06);
}

.landing-score-chip,
.landing-buzzer-mark {
    position: absolute;
    z-index: 1;
}

.landing-score-chip {
    right: 1.1rem;
    bottom: 1.1rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid rgba(244, 240, 231, 0.25);
    background: rgba(16, 19, 18, 0.84);
    color: #f4f0e7;
    font-family: 'DM Mono', monospace;
    font-size: 0.72rem;
}

.landing-score-chip span { margin-right: 0.45rem; font-weight: 500; }

.landing-buzzer-mark {
    top: 1.1rem;
    left: 1.1rem;
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border: 1px solid rgba(244, 240, 231, 0.38);
    border-radius: 50%;
    background: #ff5a36;
    color: #17110e;
    font-family: 'DM Mono', monospace;
    font-size: 1.3rem;
    font-weight: 500;
}

.landing-shows {
    padding: 1.8rem 0 3rem;
    border-top: 1px solid #384039;
}

.landing-section-heading {
    justify-content: space-between;
    margin-bottom: 1rem;
}

.landing-section-heading .landing-kicker { margin: 0; }
.landing-section-heading h2 { margin: 0; font-size: 1.35rem; }

.landing-show-list { display: grid; gap: 0.65rem; }

.landing-show-card {
    gap: 1rem;
    padding: 1rem;
    border: 1px solid #384039;
    border-radius: 6px;
    color: #f4f0e7;
    text-decoration: none;
}

.landing-show-card:hover { border-color: #ff5a36; background: #171b18; }
.landing-show-card strong,
.landing-show-card small { display: block; }
.landing-show-card small { margin-top: 0.2rem; color: #afb6ad; }

.landing-show-slot {
    display: grid;
    width: 2.1rem;
    height: 2.1rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: #28322c;
    color: #ffad72;
    font-family: 'DM Mono', monospace;
    font-size: 0.8rem;
}

.landing-show-arrow { margin-left: auto; color: #ff5a36; font-size: 1.3rem; }

.landing-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid #384039;
}

.landing-features article { padding: 0.65rem 0.9rem 0.4rem 0; }
.landing-features span { color: #ff5a36; font-family: 'DM Mono', monospace; font-size: 0.75rem; }
.landing-features h2 { margin: 0.7rem 0 0.45rem; font-size: 1rem; }
.landing-features p { margin: 0; color: #afb6ad; font-size: 0.88rem; line-height: 1.5; }

@media (max-width: 760px) {
    .landing-shell { padding: 1rem 1.15rem 2.5rem; }
    .landing-nav { padding-bottom: 0.8rem; }
    .landing-hero { grid-template-columns: 1fr; gap: 2rem; min-height: 0; padding: 2.2rem 0 3rem; }
    .landing-copy h1 { font-size: clamp(2.8rem, 15vw, 4.1rem); }
    .landing-visual, .landing-visual img { min-height: 285px; height: 285px; }
    .landing-features { grid-template-columns: 1fr; gap: 0.35rem; }
    .landing-features article { padding: 0.8rem 0; border-bottom: 1px solid #293029; }
}

.container {
    text-align: center;
    max-width: 480px;
    width: 100%;
}

input {
    font-size: 1.1rem;
    padding: 0.5rem;
    margin-right: 0.5rem;
}

button {
    font-size: 1.1rem;
    padding: 0.6rem 1.2rem;
    cursor: pointer;
    border: none;
    border-radius: 6px;
}

#join-btn {
    background: #1976d2;
    color: white;
}

#reset-btn {
    background: #444;
    color: white;
}

#status {
    font-size: 1.3rem;
    min-height: 2rem;
}

/* Host control panel: setup vs. live pane layout */
.host-body {
    display: block;
    min-height: 100vh;
    padding-top: 0.8rem;
    background: #101312;
    color: #f4f0e7;
}

.host-container {
    max-width: 1180px;
    width: 100%;
    margin: 0 auto;
    padding: 0 2rem 3rem;
    text-align: left;
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.7rem 0 1.4rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #384039;
}

.topbar-back {
    color: #f4f0e7;
    text-decoration: none;
    font-size: 1rem;
}

.topbar-back:hover {
    color: #ffad72;
}

.topbar-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    color: #9ba69b;
    font-family: 'DM Mono', monospace;
    font-size: 0.72rem;
}

.topbar-breadcrumbs a {
    color: #f4f0e7;
    text-decoration: none;
}

.topbar-breadcrumbs a:hover { color: #ffad72; }

.topbar-breadcrumbs strong {
    overflow: hidden;
    color: #ffad72;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-menu {
    position: relative;
}

.account-icon {
    background: #28322c;
    border: 1px solid #536057;
    border-radius: 50%;
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1.1rem;
    padding: 0;
    line-height: 1;
    overflow: hidden;
}

.account-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.account-dropdown {
    position: absolute;
    right: 0;
    top: 2.75rem;
    background: #171b18;
    border: 1px solid #536057;
    border-radius: 6px;
    min-width: 180px;
    overflow: hidden;
    z-index: 10;
}

.account-dropdown-item {
    display: block;
    padding: 0.6rem 1rem;
    color: #f4f0e7;
    text-decoration: none;
    font-size: 0.95rem;
}

.account-dropdown-item:not(.disabled):hover {
    background: #28322c;
}

.account-dropdown-item.disabled {
    color: #9ba69b;
    cursor: default;
}

.pane {
    background: #171b18;
    border: 1px solid #384039;
    border-radius: 6px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12);
}

.pane h2 {
    margin-top: 0;
    color: #f4f0e7;
    font-size: 1.25rem;
}

.host-container > h1 {
    margin: 0 0 1.4rem;
    color: #f4f0e7;
    font-size: 2.2rem;
    line-height: 1;
}

.title-edit-btn {
    display: inline-grid;
    width: 1.6rem;
    height: 1.6rem;
    place-items: center;
    padding: 0 !important;
    color: #ffad72 !important;
    background: none !important;
    border: none !important;
    vertical-align: middle;
    pointer-events: auto;
}

.show-owner {
    margin: -0.8rem 0 1.4rem;
}

.debug-mode-banner {
    margin: -0.8rem 0 1.4rem;
    padding: 0.5rem 0.8rem;
    border: 1px solid #ffad72;
    border-radius: 5px;
    background: #3a2a1a;
    color: #ffad72;
    font-size: 0.85rem;
}

.contestant-limit-control {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 430px;
}

.contestant-limit-control input[type="range"] {
    flex: 1;
    accent-color: #ff5a36;
}

.contestant-limit-control output {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border: 1px solid #536057;
    border-radius: 50%;
    background: #28322c;
    color: #ffad72;
    font-family: 'DM Mono', monospace;
    font-size: 0.85rem;
}

.host-container h3 { color: #ffad72; }

.host-container a { color: #ffad72; }

.host-container .meta { color: #afb6ad; }

.host-container input,
.host-container textarea,
.host-container select {
    border: 1px solid #536057;
    border-radius: 4px;
    background: #101312;
    color: #f4f0e7;
}

.host-container input[type="color"] {
    width: 2.4rem;
    height: 2rem;
    padding: 2px;
    background: transparent;
    cursor: pointer;
}

.host-container input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.host-container input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 3px;
}

.host-container input[type="color"]::-moz-color-swatch {
    border: none;
    border-radius: 3px;
}

.host-container select {
    font-size: 1.1rem;
    padding: 0.5rem;
    font-family: inherit;
}

.host-container input:focus,
.host-container textarea:focus,
.host-container select:focus {
    outline: 2px solid #ff5a36;
    outline-offset: 1px;
}

.host-container button {
    background: #28322c;
    color: #f4f0e7;
    border: 1px solid #536057;
    border-radius: 5px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
}

.host-container button:hover:not(:disabled) {
    border-color: #ff5a36;
    background: #354238;
}

.host-container button:disabled { opacity: 0.5; }

.host-container button.beta-locked {
    background: #4b5563 !important;
    border-color: #6b7280 !important;
    color: #d1d5db !important;
    cursor: not-allowed;
    opacity: 0.65;
}

.host-container .account-icon,
.host-container .account-icon:hover:not(:disabled) {
    border-color: transparent;
    background: transparent;
}

.default-settings {
    display: grid;
    gap: 0.65rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #384039;
}

.default-settings h3,
.default-settings p { margin: 0; }

.default-settings label,
.default-settings-column,
.default-settings-full-width {
    min-width: 0;
}

.default-settings-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem 1.5rem;
    align-items: start;
}

.default-settings-column,
.default-settings-full-width {
    display: grid;
    gap: 0.65rem;
}

.default-settings label {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 2rem;
}

.default-settings .compact-number {
    width: 3rem !important;
}

.help-icon {
    display: inline-grid;
    position: relative;
    width: 1.15rem;
    height: 1.15rem;
    place-items: center;
    border: 1px solid #536057;
    border-radius: 50%;
    color: #ffad72;
    font-family: 'DM Mono', monospace;
    font-size: 0.75rem;
    line-height: 1;
    cursor: help;
}

.help-icon:focus {
    outline: 2px solid #ff5a36;
    outline-offset: 2px;
}

.help-anchor {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.field-help {
    display: none;
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    z-index: 2;
    width: max-content;
    max-width: 32rem;
    margin: 0;
    padding: 0.5rem 0.65rem;
    border: 1px solid #536057;
    border-radius: 4px;
    background: #202820;
    color: #c9d0c9;
    font-size: 0.85rem;
    line-height: 1.4;
    white-space: normal;
    box-shadow: 0 3px 10px rgb(0 0 0 / 35%);
}

.help-anchor:hover .field-help,
.help-icon:focus + .field-help {
    display: block;
}

.start-show-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.75rem;
}

#round-name-modal form {
    display: grid;
    gap: 0.8rem;
    min-width: min(26rem, 80vw);
}

#round-name-modal h2 {
    margin: 0;
}

#round-name-input {
    width: 100%;
    box-sizing: border-box;
}

#unplayable-reasons {
    margin: 0;
    padding-left: 1.25rem;
    color: #ffad72;
    font-size: 0.9rem;
}

@media (max-width: 680px) {
    .default-settings-grid {
        grid-template-columns: 1fr;
    }
}

.compact-number {
    width: 5.5rem !important;
    margin-right: 0 !important;
    padding: 0.35rem 0.45rem !important;
    font-family: 'DM Mono', monospace;
    font-size: 0.9rem !important;
}

.pane ol,
.pane ul {
    max-height: 260px;
    overflow-y: auto;
    padding-left: 1.25rem;
}

.asset-pane {
    text-align: center;
}

.asset-pane .question-text {
    font-size: 1.8rem;
}

.live-asset {
    display: flex;
    justify-content: center;
    align-items: center;
    /* Without an explicit width, this flex item shrinks to fit and its
       width:100% children (the video crop) collapse to zero width. */
    width: 100%;
    margin: 1rem 0;
}

/* The video and non-video slots stack in the same spot; the unused one is
   hidden rather than removed so the YouTube iframe survives every question. */
.live-asset-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.live-asset-slot[hidden] {
    display: none;
}

/* Contestant stage: identity top-left, score top-right, timer bottom-left,
   asset centred in between. */
.play-body {
    display: block;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: #101312;
    color: #f4f0e7;
}

.play-stage {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 1rem;
    box-sizing: border-box;
    width: 100%;
    min-height: 100vh;
    padding: 1rem 1.5rem 1.25rem;
}

.play-hud {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.play-identity {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.play-avatar {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #536057;
}

.play-avatar-fallback {
    display: grid;
    place-items: center;
    background: #28322c;
    font-size: 1.3rem;
}

.play-name {
    font-size: 1.1rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.play-score-box {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
}

.play-score-label {
    color: #afb6ad;
    font-family: 'DM Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.play-score {
    color: #ffad72;
    font-size: 1.9rem;
    font-weight: 700;
}

.play-asset-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 0;
}

/* Wraps the asset and its tap-for-sound gate so the gate can sit directly
   on top of the video - Firefox only grants the resulting unmute if the
   activating click geometrically lands on the video, not just anywhere
   on the page (Chrome isn't as strict about this). */
.play-asset-stage {
    position: relative;
    width: 100%;
}

#playback-gate {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 !important;
    border: none !important;
    border-radius: 6px;
    background: rgba(16, 19, 18, 0.55) !important;
    /* Beats .playback-gate's dark-on-orange text, which vanishes on this dim overlay. */
    color: #f4f0e7 !important;
    font-size: 1.6rem !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* Our own cover while the YouTube frame can't safely be shown: opaque, so
   nothing of YouTube's title or thumbnail card shows through. */
#playback-gate.opaque {
    background: #101312 !important;
}

/* Quiet, compact prompt for a contestant who refreshed mid-game. */
.ready-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    padding: 0.9rem 1rem;
    border: 0;
    border-bottom: 3px solid #fff;
    background: #ff5a36;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    animation: ready-bar-pulse 1.4s ease-in-out infinite;
}

@keyframes ready-bar-pulse {
    50% { background: #d6411f; }
}

.ready-bar[hidden] {
    display: none;
}

/* Frozen and "blank when frozen": hide the picture but keep the space. */
#question-asset.blanked {
    position: relative;
    min-height: 200px;
    background: #000;
}

#question-asset.blanked .live-asset-slot {
    visibility: hidden !important;
}

/* What shows over the hidden video: "Paused", or the name of the contestant who
   buzzed in (as large as fits, never outside the picture). The text comes from
   data-label, set by the page. */
#question-asset.blanked,
#host-live-asset.blanked {
    container-type: inline-size;
}

#question-asset.blanked::after,
#host-live-asset.blanked::after {
    content: attr(data-label);
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    padding: 4% 6%;
    overflow: hidden;
    text-align: center;
    overflow-wrap: anywhere;
    line-height: 1.1;
    color: #6f7a71;
    font-size: 1.4rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

#question-asset.blanked[data-kind="name"]::after,
#host-live-asset.blanked[data-kind="name"]::after {
    color: #f4f0e7;
    font-size: clamp(1.5rem, 11cqw, 6rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: none;
}

#host-live-asset.blanked {
    position: relative;
    min-height: 200px;
    background: #000;
    border-radius: 6px;
}

#host-live-asset.blanked > * {
    visibility: hidden;
}

.warmup-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 640px;
}

.warmup-panel[hidden] {
    display: none;
}

.warmup-media:empty {
    display: none;
}

.warmup-media .live-video-frame {
    width: 100%;
    aspect-ratio: 16 / 9;
}

.warmup-media iframe,
.warmup-media video {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 6px;
}

.volume-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    width: 100%;
    max-width: 640px;
}

.player-problem {
    margin: 0.5rem 0 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid #ff5a36;
    border-radius: 6px;
    background: #3a2520;
    color: #ff977d;
    font-size: 0.95rem;
}

.player-problem[hidden] {
    display: none;
}

/* A small speaker icon that mutes, and a short thin level bar beside it. */
.volume-controls .volume-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50%;
    background: transparent !important;
    color: #c9d0c9;
    opacity: 0.8;
    cursor: pointer;
}

.volume-controls .volume-icon-btn:hover,
.volume-controls .volume-icon-btn:focus-visible {
    opacity: 1;
    background: rgba(255, 255, 255, 0.08) !important;
}

.volume-icon-btn .vol-low,
.volume-icon-btn .vol-high,
.volume-icon-btn .vol-off {
    display: none;
}

.volume-icon-btn[data-state="high"] .vol-low,
.volume-icon-btn[data-state="high"] .vol-high,
.volume-icon-btn[data-state="low"] .vol-low,
.volume-icon-btn[data-state="off"] .vol-off {
    display: inline;
}

.volume-controls .volume-level {
    --level: 100%;
    flex: none;
    width: 5.5rem;
    height: 0.9rem;
    margin: 0;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    opacity: 0.8;
}

.volume-controls .volume-level:hover,
.volume-controls .volume-level:focus-visible {
    opacity: 1;
}

.volume-level::-webkit-slider-runnable-track {
    height: 0.25rem;
    border-radius: 0.125rem;
    background: linear-gradient(to right, #c9d0c9 var(--level), rgba(255, 255, 255, 0.2) var(--level));
}

.volume-level::-moz-range-track {
    height: 0.25rem;
    border-radius: 0.125rem;
    background: rgba(255, 255, 255, 0.2);
}

.volume-level::-moz-range-progress {
    height: 0.25rem;
    border-radius: 0.125rem;
    background: #c9d0c9;
}

.volume-level::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 0.7rem;
    height: 0.7rem;
    margin-top: -0.225rem;
    border-radius: 50%;
    border: 0;
    background: #f4f0e7;
}

.volume-level::-moz-range-thumb {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    border: 0;
    background: #f4f0e7;
}

.warmup-field input {
    width: 100%;
    box-sizing: border-box;
    margin-top: 0.35rem;
}

.playback-gate {
    padding: 0.9rem 1.6rem !important;
    border: 1px solid #ff5a36 !important;
    border-radius: 6px;
    background: #ff5a36 !important;
    color: #101312 !important;
    font-size: 1.1rem !important;
    font-weight: 700;
    cursor: pointer;
}

.playback-gate[hidden] {
    display: none;
}

.play-placeholder {
    margin: 0;
    color: #f4f0e7;
    font-size: 2rem;
    text-align: center;
}

.play-placeholder[hidden] {
    display: none;
}

.play-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.play-timer {
    color: #f4f0e7;
    font-family: 'DM Mono', monospace;
    font-size: 2.4rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.play-timer-low {
    color: #ff5a36;
}

.play-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-align: center;
}

.play-actions p {
    margin: 0;
}

.live-asset-text {
    font-size: 1.8rem;
    text-align: center;
    margin: 0;
}

.live-asset-image {
    max-width: 100%;
    max-height: 60vh;
    object-fit: contain;
    border-radius: 6px;
}

.live-asset-video {
    width: 100%;
    max-width: 640px;
    aspect-ratio: 16 / 9;
    border-radius: 6px;
}

.live-video-frame {
    width: 100%;
    max-width: 640px;
}

.scoreboard {
    margin-top: 1.5rem;
    padding: 1rem;
    border: 1px solid #536057;
    border-radius: 6px;
}

.scoreboard h2 { margin-top: 0; }

.panes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

#setup-view {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(420px, 1.25fr);
    gap: 1.25rem;
    align-items: start;
}

.setup-left-column,
.setup-right-column,
.setup-rounds-column {
    min-width: 0;
}

.setup-rounds-column {
    grid-column: 1 / -1;
}

@media (max-width: 860px) {
    #setup-view {
        grid-template-columns: 1fr;
    }

    .setup-rounds-column {
        grid-column: auto;
    }
}

.chat-answers li.clickable {
    cursor: pointer;
}

#chat-answers li.clickable:hover {
    background: #2a2a2a;
}

#users-table,
#shows-table {
    width: 100%;
    border-collapse: collapse;
}

#users-table th,
#users-table td,
#shows-table th,
#shows-table td {
    text-align: left;
    padding: 0.5rem;
    border-bottom: 1px solid #384039;
}

#users-table th,
#shows-table th,
#question-detail-settings th {
    color: #ffad72;
    font-family: 'DM Mono', monospace;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

#users-table button {
    margin-right: 0.4rem;
    margin-bottom: 0.3rem;
}

.pane-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.pane-header h2 {
    margin: 0;
}

.pane-header-actions {
    display: flex;
    gap: 0.5rem;
}

.button-link {
    display: inline-block;
    padding: 0.5rem 0.75rem;
    border: 1px solid #536057;
    border-radius: 5px;
    background: #28322c;
    color: #f4f0e7 !important;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.button-link:hover {
    border-color: #ff5a36;
    background: #354238;
}

.fab {
    border-radius: 50%;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    font-size: 1.3rem;
    line-height: 1;
    background: #ff5a36 !important;
    border-color: #ff5a36 !important;
    color: #19120f !important;
}

.pane-header-actions #add-round-btn.fab.icon-button {
    width: 2.5rem;
    height: 2.5rem;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #c9d0c9 !important;
}

.pane-header-actions #add-round-btn.fab.icon-button:hover:not(:disabled) {
    border: 0 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #f4f0e7 !important;
}

.pane-header-actions #add-round-btn svg {
    width: 1.8rem;
    height: 1.8rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 5px;
    background: #28322c;
    border: 1px solid #536057;
    color: #f4f0e7;
    text-decoration: none;
    font-size: 1.1rem;
}

.host-container a.copy-link {
    display: inline-grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: #c9d0c9 !important;
}

.host-container a.copy-link:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #f4f0e7 !important;
}

.share-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.share-row input[readonly] {
    flex: 1;
    min-width: 0;
}

.share-row output {
    font-family: monospace;
    font-size: 1.2rem;
    letter-spacing: 0.15em;
}

.copy-link svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.rounds-board {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 300px));
    gap: 1rem;
    margin-bottom: 1rem;
}

.round-column {
    background: #101312;
    border: 1px solid #384039;
    border-radius: 6px;
    padding: 0.75rem;
    min-width: 0;
}

.round-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.round-column h3 {
    margin: 0;
}

.round-column-actions { display: flex; gap: 0.3rem; }

.round-action-btn,
.question-action-btn {
    display: inline-grid;
    width: 1.8rem;
    height: 1.8rem;
    place-items: center;
    padding: 0 !important;
    font-size: 0.9rem !important;
    line-height: 1;
}

#rounds-board .round-column-actions button.round-action-btn.icon-button {
    appearance: none !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    color: #c9d0c9 !important;
}

#rounds-board .round-column-actions button.round-action-btn.icon-button:hover:not(:disabled) {
    border: 0 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #f4f0e7 !important;
}

.round-action-btn.icon-button svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.round-action-btn.icon-button circle {
    fill: none;
}

.round-question-list {
    list-style: none;
    padding: 0;
    margin: 0;
    min-height: 40px;
}

.round-question-card {
    background: #202722;
    border: 1px solid #384039;
    border-radius: 5px;
    padding: 0.5rem 0.6rem;
    margin-bottom: 0.5rem;
    cursor: grab;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.round-question-card .question-action-btn { flex: 0 0 auto; }

.destructive-action { color: #ff977d !important; }
.destructive-action:hover:not(:disabled) { border-color: #ff5a36 !important; background: #3a2520 !important; }

.pause-status {
    display: inline-block;
    margin: 0 0.5rem 0.5rem 0;
    padding: 0.25rem 0.6rem;
    border: 1px solid #ffad72;
    border-radius: 5px;
    color: #ffad72;
    font-size: 0.85rem;
}

.script-pane {
    margin-top: 1rem;
}

.modal-script-pane {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #384039;
}

.modal-script-pane h3 {
    margin: 0;
}

.script-pane .pane-header {
    margin-bottom: 0.75rem;
}

.script-pane h4 {
    margin: 0;
    color: #ffad72;
}

.script-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.55fr);
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 860px) {
    .script-layout { grid-template-columns: 1fr; }
}

.script-palette-col {
    display: grid;
    gap: 0.5rem;
}

.host-live-asset {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    width: 100%;
}

.host-live-asset[hidden] {
    display: none;
}

.host-live-asset .live-asset-image {
    max-width: 100%;
    max-height: 40vh;
    object-fit: contain;
    border-radius: 6px;
}

.host-live-asset .asset-preview-text {
    font-size: 1.5rem;
}

.live-question-layout {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr);
    gap: 1.25rem;
    align-items: start;
}

.live-question-controls,
.live-question-preview {
    min-width: 0;
}

.live-question-preview {
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}

.live-question-preview .video-crop,
.live-question-preview iframe,
.live-question-preview video,
.live-question-preview audio {
    width: 100%;
}

.live-question-preview .video-crop {
    aspect-ratio: 16 / 9;
}

.script-step-hint {
    flex-basis: 100%;
    color: #afb6ad;
    font-size: 0.9rem;
}

/* Buzz-in cards under the host preview. Pending cards are neutral, the
   fastest undecided one is highlighted and carries the decision buttons. */
.buzz-cards-pane {
    margin-top: 1rem;
}

/* Under the video: contestants' buzzers on the left, chat's answers on the right. */
.live-responses {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.live-responses-col {
    min-width: 0;
    margin-top: 1rem;
}

.live-responses-col[hidden] {
    display: none;
}

.live-responses-col h3 {
    margin: 0 0 0.5rem;
}

.response-empty {
    color: #afb6ad;
    list-style: none;
}

.pane .chat-answers,
.chat-answers {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    padding: 0 0.25rem 0 0;
    list-style: none;
    max-height: 22rem;
    overflow-y: auto;
}

.chat-answer {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #f4f0e7;
}

.chat-answer.wrong {
    background: #5a2323;
    border-color: #8f3a3a;
}

.chat-answer.right {
    background: #1f4d2c;
    border-color: #3b8a52;
}

.chat-answer.won {
    background: linear-gradient(180deg, #c89a22, #8e6a12);
    border-color: #f2c14e;
    color: #fff8e1;
    font-weight: 700;
}

.chat-answer.clickable {
    cursor: pointer;
}

.chat-answer-who {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.chat-answer-text {
    overflow-wrap: anywhere;
}

.chat-answer-meta {
    flex: none;
    font-family: 'DM Mono', monospace;
    font-size: 0.85rem;
    white-space: nowrap;
}

.buzz-cards-pane[hidden] {
    display: none;
}

.buzz-cards-pane h3 {
    margin: 0 0 0.5rem;
}

/* Beats the generic `.pane ol` cap so every card is visible. */
.pane .buzz-cards {
    max-height: none;
    overflow-y: visible;
    padding-left: 0;
}

.buzz-cards {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.buzz-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.9rem;
    padding: 0.45rem 0.8rem;
    border: 1px solid #536057;
    border-radius: 8px;
    background: #1d2420;
}

.buzz-card.active {
    border-color: #ffad72;
    box-shadow: 0 0 0 1px #ffad72;
}

.buzz-card.correct {
    border-color: #2f8f4e;
    background: #1c4a2c;
}

.buzz-card.incorrect {
    border-color: #a64040;
    background: #4a1f1f;
}

.buzz-card-who {
    display: flex;
    flex: 1 1 7rem;
    flex-direction: column;
    min-width: 0;
}

.buzz-card-who strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.buzz-card-meta {
    color: #c9d0c9;
    font-size: 0.85rem;
}

.buzz-card-points {
    font-family: 'DM Mono', monospace;
    font-weight: 600;
}

.buzz-card-actions {
    display: flex;
    gap: 0.4rem;
    margin-left: auto; /* Correct/Incorrect/Undo sit at the right end of the line */
}

.buzz-card-actions .buzz-correct-btn {
    background: #2f8f4e;
    border-color: #2f8f4e;
}

.buzz-card-actions .buzz-incorrect-btn {
    background: #a64040;
    border-color: #a64040;
}

.buzz-card-empty {
    color: #afb6ad;
}

.buzz-card-choice {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.7rem 0.9rem;
    border: 1px dashed #ffad72;
    border-radius: 8px;
    color: #f4f0e7;
}

.blank-option {
    display: block;
    margin-top: 0.75rem;
}

.blank-option .meta {
    display: block;
    margin-left: 1.6rem;
}

.contestant-row.disconnected {
    color: #ff977d;
}

.contestant-row.not-ready {
    color: #ffad72;
}

.contestant-remove-btn {
    margin-left: 0.6rem;
    padding: 0.1rem 0.5rem;
    font-size: 0.8rem;
}

#unplayable-reasons .warning {
    color: #ffad72;
}

@media (max-width: 860px) {
    .live-question-layout {
        grid-template-columns: 1fr;
    }
}

.script-step-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    list-style: none;
    margin: 0 0 0.5rem 0;
    padding: 0.5rem;
    border: 1px solid #444;
    border-radius: 5px;
    min-height: 6rem;
}

/* Beats the generic `.pane ol` cap so the whole script is visible. */
.pane .script-step-list,
dialog .script-step-list {
    max-height: none;
    overflow-y: visible;
    padding: 0.5rem;
}

.script-step-list.script-drop-active {
    border-color: #9fcf57;
    background: #17201a;
}

.script-step-list.script-drop-blocked {
    border-color: #ff5a36;
    cursor: not-allowed;
}

.script-step-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid #536057;
    border-radius: 6px;
    background: #1d2420;
    cursor: grab;
}

.script-step-item:active { cursor: grabbing; }

.script-step-label {
    font-weight: 600;
    flex: 1 1 auto;
}

.script-step-handle {
    flex: 0 0 auto;
    color: #9ba69b;
    cursor: grab;
    font-size: 1rem;
    line-height: 1;
}

.script-step-handle:active { cursor: grabbing; }

.script-step-item.script-step-fixed {
    cursor: default;
    opacity: 0.6;
    font-style: italic;
    border-style: dashed;
    background: transparent;
}

.script-step-remove-btn {
    background: none;
    border: none;
    color: #ff977d;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.script-step-palette {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.script-step-palette-btn {
    padding: 0.55rem 0.7rem !important;
    font-size: 0.9rem !important;
    text-align: left;
    cursor: grab;
}

.script-step-palette-btn:active { cursor: grabbing; }

.script-step-palette-btn-used {
    opacity: 0.4;
    cursor: not-allowed;
    text-decoration: line-through;
}

.script-step-list.live .script-step-item {
    cursor: default;
    justify-content: flex-start;
    position: relative;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

.script-step-list.live .script-step-item.done {
    opacity: 0.45;
}
.script-step-list.live .script-step-item.done span:first-child::before {
    content: '✓ ';
    color: #7dff9e;
}
.script-step-list.live .script-step-item.pending { opacity: 0.6; }
.script-step-list.live .script-step-item.active {
    border-left: 3px solid #7dc4ff;
    padding-left: calc(0.75rem - 3px);
    background: rgba(125, 196, 255, 0.08);
    font-weight: 600;
}
.script-step-list.live .script-step-item.active button {
    animation: script-step-pulse 1.6s ease-in-out infinite;
}

@keyframes script-step-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(125, 196, 255, 0.35); }
    50% { box-shadow: 0 0 0 4px rgba(125, 196, 255, 0); }
}
.script-step-list.live .script-step-item.active button { margin-left: 0.5rem; }

.preload-status-item.active { color: #ffad72; }

.shows-filters {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.create-show-pane,
#create-show-form {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.create-show-pane h2 {
    flex: 0 0 auto;
    margin: 0;
}

#create-show-form { flex: 1 1 auto; }

#new-show-title {
    flex: 1 1 220px;
    min-width: 0;
    margin-right: 0;
}

.shows-filters input[type="search"] {
    width: min(100%, 340px);
    margin-right: 0;
}

.shows-filters label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #bdc4b9;
    font-size: 0.9rem;
    white-space: nowrap;
}

.show-directory-tile {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
    min-width: 0;
    padding: 0.6rem;
    margin: 0;
    border: 1px solid #384039;
    border-radius: 5px;
    color: #f4f0e7 !important;
    text-decoration: none;
}

.show-directory-tile[href]:hover { border-color: #ff5a36; color: #ffad72 !important; }
.shows-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}
.shows-list > .meta { grid-column: 1 / -1; }
.show-directory-tile strong,
.show-directory-tile small { display: block; }
.show-directory-tile small { margin-top: 0.2rem; color: #9ba69b; font-size: 0.82rem; }
.show-directory-arrow { display: none; }

.show-tile-art {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 4px;
    background: #28322c;
}

.show-tile-art img { width: 100%; height: 100%; object-fit: cover; }

.default-show-tile-art::before {
    position: absolute;
    width: 46px;
    height: 46px;
    border: 7px solid #f4f0e7;
    border-radius: 50%;
    background: #ff5a36;
    box-shadow: 0 0 0 5px #6a2b20;
    content: '';
}

.default-show-tile-art::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 9px;
    transform: translate(-50%, -50%);
    border-radius: 50% 50% 2px 2px;
    background: #19120f;
    content: '';
}

.deleted-shows-section { margin-top: 1.25rem; }
.deleted-shows-section hr { border: 0; border-top: 1px solid #536057; }
.deleted-shows-section h3 { margin: 1rem 0 0.65rem; }

.show-header-divider {
    border: none;
    border-top: 1px solid #3a423c;
    margin: 1rem 0;
}

.show-tile-hero {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0 0 1rem;
    overflow: hidden;
    border: 1px solid #536057;
    border-radius: 8px;
    background: #101312;
}

.show-tile-hero img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.show-tile-title-overlay {
    position: absolute;
    left: 0.9rem;
    bottom: 0.7rem;
    max-width: calc(100% - 1.8rem);
    font-size: 32px;
    color: #f4f0e7;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 12px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    word-break: break-word;
}

.show-tile-title-overlay #show-title-text {
    pointer-events: auto;
    cursor: text;
}

.inline-editing {
    outline: 2px solid #ffad72;
    outline-offset: 2px;
}

.tile-icon-btn {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(16, 19, 18, 0.55);
    color: #f4f0e7;
    transition: background-color 0.15s ease;
}
.tile-icon-btn svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}
.tile-icon-btn:hover { background: rgba(16, 19, 18, 0.85); }
.tile-icon-btn-secondary { top: 0.6rem; right: 2.9rem; }
.tile-icon-btn[hidden] { display: none; }

.uploaded-asset-preview {
    position: relative;
    width: min(320px, 100%);
    margin-top: 0.75rem;
    overflow: hidden;
    border: 1px solid #536057;
    border-radius: 5px;
    background: #101312;
}

.uploaded-asset-preview img,
.uploaded-asset-preview audio {
    display: block;
    width: 100%;
    max-height: 240px;
    object-fit: contain;
}

.media-delete-btn {
    position: absolute;
    top: 0.45rem;
    right: 0.45rem;
    z-index: 1;
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    padding: 0 !important;
    border: 1px solid #f4f0e7 !important;
    border-radius: 4px !important;
    background: rgba(16, 19, 18, 0.9) !important;
    color: #f4f0e7 !important;
}

.show-tile-upload-label input { max-width: 210px; }

@media (max-width: 620px) {
    .shows-filters { align-items: flex-start; flex-direction: column; gap: 0.6rem; }
    .create-show-pane { align-items: stretch; flex-direction: column; }
    #create-show-form { width: 100%; }
    .shows-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rounds-board { grid-template-columns: 1fr; }
}

@media (min-width: 621px) and (max-width: 920px) {
    .rounds-board { grid-template-columns: repeat(2, minmax(220px, 300px)); }
    .shows-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.round-question-card .tile-icon {
    flex: 0 0 auto;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.round-question-card .tile-icon.tile-thumb {
    width: 1.6rem;
    height: 1.6rem;
    object-fit: cover;
    border-radius: 3px;
}

.round-question-card .tile-title {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.round-question-card.selected {
    border-color: #ff5a36;
}

.round-question-card.is-current {
    border-color: #9fcf57;
}

.floating-preview {
    position: fixed;
    z-index: 1000;
    background: #1b1b1b;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 0.75rem;
    max-width: 420px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.floating-preview img {
    max-width: 100%;
    max-height: 320px;
    display: block;
}

.floating-preview-close {
    position: absolute;
    top: 0.25rem;
    right: 0.4rem;
    cursor: pointer;
    background: none;
    border: none;
    color: #aaa;
    font-size: 1rem;
    padding: 0.1rem 0.3rem;
}

.field-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.field-row > span {
    flex: 0 0 auto;
    min-width: 90px;
}

.field-row > select,
.field-row > input {
    flex: 1 1 auto;
    width: auto;
    margin-top: 0;
}

.host-container select {
    -webkit-appearance: none;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #f4f0e7 50%), linear-gradient(135deg, #f4f0e7 50%, transparent 50%);
    background-position: calc(100% - 16px) calc(50% - 2px), calc(100% - 11px) calc(50% - 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 2rem;
}

.url-input-small {
    font-size: 0.85rem;
    max-width: 320px;
}

.segmented-control {
    display: inline-flex;
    border: 1px solid #536057;
    border-radius: 5px;
    overflow: hidden;
}

.segmented-btn {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0.5rem 0.9rem !important;
    font-size: 0.95rem !important;
}
.segmented-btn:not(:last-child) { border-right: 1px solid #536057 !important; }
#modal-asset-type-group .segmented-btn.active,
#modal-asset-type-group .segmented-btn.active:hover {
    background: #ff5a36 !important;
    color: #101312 !important;
    font-weight: 700 !important;
    border-color: #ff5a36 !important;
}

.scoring-overrides-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem 1.5rem;
    margin-bottom: 0.6rem;
}
.scoring-field-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.scoring-field-group[hidden] { display: none; }
.scoring-field-group label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.scoring-field-group .checkbox-sublabel {
    padding-left: 1.2rem;
    font-size: 0.9rem;
    color: #bdc4b9;
}

.asset-box {
    position: relative;
    display: inline-block;
    min-width: 140px;
    min-height: 40px;
    padding-top: 2.6rem;
}

.asset-box .asset-preview:empty {
    display: block;
    width: 220px;
    height: 100px;
    border: 2px dashed #536057;
    border-radius: 6px;
}

.asset-box .tile-icon-btn {
    background: rgba(16, 19, 18, 0.75);
    border: 1px solid #536057;
}

.asset-box .tile-icon-btn { top: 0; }

#question-modal {
    max-width: 1040px;
}

.question-modal-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 760px) {
    .question-modal-layout { grid-template-columns: 1fr; }
}

.question-modal-preview-col {
    position: sticky;
    top: 0;
}

.question-modal-preview-col .asset-box-large {
    width: 100%;
}

.question-modal-preview-col .asset-box-large .asset-preview {
    width: 100%;
}

.asset-preview-text-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    max-height: 320px;
    overflow: hidden;
}

.asset-preview-text {
    margin: 0;
    max-width: 100%;
    text-align: center;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    transform-origin: center;
}

.question-modal-preview-col .asset-box-large .asset-preview:empty {
    width: 100%;
    height: 220px;
}

.question-modal-preview-col .asset-preview img,
.question-modal-preview-col .asset-preview video {
    width: 100%;
    max-width: 100%;
    max-height: none;
    height: auto;
    object-fit: contain;
}

.question-modal-preview-col .asset-preview iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

.clip-time-fields {
    margin-top: 0.75rem;
}

.clip-time-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.4rem;
}

.clip-time-row > span:first-child {
    min-width: 80px;
}

.clip-time-input {
    width: 3.2rem !important;
    text-align: center;
    padding: 0.35rem 0.3rem !important;
    font-family: 'DM Mono', monospace;
    margin: 0 !important;
}

.clip-time-sep {
    font-weight: 600;
}

.scoring-number-input {
    width: 8rem !important;
}

#modal-settings-table {
    width: 100%;
    margin-bottom: 0.75rem;
    border-collapse: collapse;
}

#modal-settings-table th,
#modal-settings-table td {
    padding: 0.35rem 0.5rem;
    text-align: left;
    vertical-align: middle;
}

#modal-settings-table th:first-child,
#modal-settings-table td:first-child {
    width: 2rem;
    text-align: center;
}

.file-upload-dropzone {
    border: 2px dashed #536057;
    border-radius: 6px;
    padding: 1rem;
    text-align: center;
    margin-bottom: 0.5rem;
}
.file-upload-dropzone.dragover {
    border-color: #ff5a36;
    background: #1d2420;
}

.answer-pattern-rows {
    margin-bottom: 0.6rem;
}

.answer-pattern-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
}

.answer-pattern-label {
    flex: 0 0 7.5rem;
    color: #ffad72;
    font-family: 'DM Mono', monospace;
    font-size: 0.78rem;
    text-transform: uppercase;
}

.answer-pattern-row input[type="text"] {
    flex: 1 1 auto;
    margin-top: 0;
}

.answer-pattern-row label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0;
    white-space: nowrap;
}

.answer-pattern-row button {
    padding: 0.3rem 0.5rem;
    font-size: 0.9rem;
}

.font-picker-list {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #333;
    border-radius: 6px;
    margin-bottom: 0.6rem;
}

.font-picker-list-item {
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    border-bottom: 1px solid #262626;
}

.font-picker-list-item:hover,
.font-picker-list-item.selected {
    background: #1976d2;
}

.font-picker-preview {
    border: 1px solid #333;
    border-radius: 6px;
    padding: 0.75rem;
    margin-bottom: 0.6rem;
    min-height: 60px;
}

.font-picker-row {
    display: flex;
    gap: 0.75rem;
}

.font-picker-row > label {
    flex: 1 1 0;
}

.question-detail .asset-preview {
    margin-bottom: 0.75rem;
}

.question-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr);
    gap: 1.25rem;
    align-items: start;
}

.question-detail-preview-col,
.question-detail-settings-col {
    min-width: 0;
}

.question-detail-asset-box {
    display: block;
    width: 100%;
}

.question-detail-preview-col .asset-preview { min-height: 260px; }

#question-detail-text-fields {
    display: grid;
    gap: 0.65rem;
    margin-bottom: 0.8rem;
}

.media-preview-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.question-detail-preview-col .asset-preview {
    position: relative;
}

/* The embed is cropped and click-blocked so YouTube's title bar, control
   chrome and end-screen links stay outside the visible frame. */
.video-crop {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 6px;
    background: #000;
}

/* The iframe is made taller than the visible frame so YouTube letterboxes
   the video; its title/chrome then sit on those black bars, which the crop
   hides. The picture itself is never cropped. */
.video-crop iframe {
    position: absolute;
    top: -60px;
    left: 0;
    width: 100%;
    height: calc(100% + 120px);
    border: 0;
    pointer-events: none;
}

.host-container .video-cover,
.question-modal-preview-col .video-cover {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: #000;
    cursor: pointer;
}

.host-container .video-cover[hidden],
.question-modal-preview-col .video-cover[hidden] {
    display: none;
}

.video-cover-play {
    display: grid;
    width: 3.2rem;
    height: 3.2rem;
    place-items: center;
    border-radius: 50%;
    background: rgba(16, 19, 18, 0.72);
    color: #f4f0e7;
    font-size: 1.4rem;
    padding-left: 0.2rem;
}

.video-cover:hover .video-cover-play {
    background: rgba(255, 90, 54, 0.9);
}

.media-preview-controls[hidden] {
    display: none;
}

.media-preview-controls button {
    padding: 0.35rem 0.6rem;
    font-size: 0.9rem;
}

.media-volume-control {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
}

.media-volume-control input {
    width: 7rem;
}

#question-detail-url-fields label {
    display: block;
}

#question-detail-asset-url {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 0.35rem;
}

#question-detail-text-fields label {
    display: block;
}

#question-detail-text-content {
    display: block;
    width: 100%;
    min-height: 8rem;
    box-sizing: border-box;
    margin-top: 0.35rem;
    resize: vertical;
    white-space: pre-wrap;
}

#question-detail-text-fields[hidden] {
    display: none;
}

@media (max-width: 860px) {
    .question-detail-layout {
        grid-template-columns: 1fr;
    }

}

.question-detail-answers {
    margin-top: 1rem;
}

.question-detail table {
    width: 100%;
    margin-bottom: 0.75rem;
}

.question-detail table td,
.question-detail table th {
    padding: 0.3rem 0.5rem;
    text-align: left;
}

#question-detail-settings input.uses-default,
#modal-settings-table input.uses-default {
    opacity: 0.52;
    filter: saturate(0.65);
}

#question-detail-settings input.uses-default:hover,
#question-detail-settings input.uses-default:focus,
#modal-settings-table input.uses-default:hover,
#modal-settings-table input.uses-default:focus {
    opacity: 0.8;
    filter: none;
}

#question-detail-settings,
#modal-settings-table {
    width: 100%;
    table-layout: fixed;
}

#question-detail-settings th:first-child,
#question-detail-settings td:first-child,
#modal-settings-table th:first-child,
#modal-settings-table td:first-child {
    width: 62%;
    white-space: nowrap;
}

#question-detail-settings th:last-child,
#question-detail-settings td:last-child,
#modal-settings-table th:last-child,
#modal-settings-table td:last-child {
    width: 38%;
}

.script-step-option {
    display: flex;
    flex-basis: 100%;
    align-items: center;
    gap: 0.4rem;
    margin: 0.35rem 0 0;
    color: #afb6ad;
    font-size: 0.85rem;
    font-weight: 400;
}

.script-step-prompt-input {
    display: block;
    width: 100%;
    margin: 0.45rem 0 0;
    resize: vertical;
}

.script-step-prompt-text {
    flex-basis: 100%;
    margin-top: 0.45rem;
    padding: 0.55rem 0.7rem;
    border-left: 3px solid #ffad72;
    border-radius: 4px;
    background: #101312;
    color: #f4f0e7;
    white-space: pre-wrap;
}

.asset-preview img {
    max-width: 100%;
    max-height: 260px;
}

.catalog-round {
    margin-bottom: 1rem;
}

.catalog-round ul {
    list-style: none;
    padding-left: 1.5rem;
}

dialog {
    background: #171b18;
    color: #f4f0e7;
    border: 1px solid #536057;
    border-radius: 6px;
    max-width: 600px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0.6);
}

dialog label {
    display: block;
    margin-bottom: 0.6rem;
}

dialog textarea,
dialog input[type="text"],
dialog input[type="number"],
dialog select {
    width: 100%;
    box-sizing: border-box;
    margin-top: 0.25rem;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

#debug-info {
    font-size: 0.85rem;
    color: #999;
    border: 1px dashed #555;
    padding: 0.4rem 0.6rem;
    display: inline-block;
    margin-bottom: 1rem;
}

#wait-section {
    font-size: 1.3rem;
}

/* Safety net: an element's own `display` rule (e.g. flex/grid for layout)
   otherwise wins over the browser's default `[hidden] { display: none }`
   UA style by source order, silently un-hiding things toggled via the
   `hidden` attribute/property. This guarantees `hidden` always wins. */
[hidden] {
    display: none !important;
}

/* While a YouTube player needs unlocking its frame covers the window, invisibly,
   so the contestant's click lands inside it. */
body.unlock-catching #question-asset {
    display: block !important;
}

body.unlock-catching .live-asset-slot.yt-slot {
    display: block !important;
    visibility: visible !important;
    position: fixed;
    inset: 0;
    z-index: 15;
    opacity: 0;
}

body.unlock-catching .yt-slot .video-crop {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
}

body.unlock-catching .yt-slot .video-crop iframe {
    top: 0;
    height: 100%;
    pointer-events: auto;
}

body.unlock-catching .ready-bar,
body.unlock-catching #playback-gate,
body.yt-click-through #playback-gate {
    pointer-events: none;
}

body.unlock-catching .ready-bar {
    z-index: 30;
}

/* "Tap to enable the video": the hidden YouTube frame sits invisibly on top of
   the cover so the tap lands inside it. */
body.yt-cover-tap .live-asset-slot.yt-slot {
    visibility: visible !important;
    position: relative;
    z-index: 3;
    opacity: 0;
}

body.yt-cover-tap #playback-gate {
    pointer-events: none;
}

body.yt-cover-tap .video-crop iframe {
    pointer-events: auto;
}

body.yt-click-through .video-crop iframe {
    pointer-events: auto;
}

/* Revealed answer (contestant and audience views). */
.answer-reveal {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid #6a8f6f;
    border-radius: 6px;
    background: rgba(106, 143, 111, 0.18);
    text-align: center;
}

.answer-reveal-label {
    display: block;
    color: #c9d0c9;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.answer-reveal-text {
    display: block;
    color: #f4f0e7;
    font-size: 2rem;
    font-weight: 700;
}

/* Audience view for the stream: the stage only, no controls. */
.stage-body .play-hud,
.stage-body .play-actions > :not(#buzz-btn),
.stage-body #volume-controls,
.stage-body #warmup-panel,
.stage-body #ready-bar {
    display: none !important;
}

/* Nothing on the audience view can be clicked or tapped, the video included
   (it plays on its own, and no prompt is ever shown). */
.stage-body,
.stage-body * {
    pointer-events: none !important;
    cursor: none;
    user-select: none;
}

.stage-body #playback-gate:not(.opaque) {
    display: none !important;
}

/* The audience view is a fluid OBS browser source: it fills the viewport
   exactly and every size derives from the viewport (vmin/vw/vh), so it scales
   from 1280x720 to 3840x2160 (1920x1080 recommended). Left column: the video
   box (16:9, as large as fits) with the buzzer centred below it and the answer
   layered over the buzzer. Right column: timer, chat, standings.
   --stage-font is the one place the audience font family is set. */
.stage-body {
    --stage-font: 'Space Grotesk', sans-serif;
    --stage-pad: 1.6vmin;
    --stage-gap: 1.6vmin;
    --stage-panel-w: 22vw;
    --stage-radius: 0.8vmin;
    --stage-buzzer: 12vmin; /* the buzzer's diameter */
    --stage-buzzer-gap: var(--stage-gap); /* video box to buzzer */
    --stage-col-w: calc(100vw - 2 * var(--stage-pad) - var(--stage-gap) - var(--stage-panel-w));
    /* The video box: the column's width, unless the viewport is not tall enough
       for box + gap + buzzer, then as wide as that height allows. */
    --stage-box-w: min(
        var(--stage-col-w),
        calc((100vh - 2 * var(--stage-pad) - var(--stage-buzzer) - var(--stage-buzzer-gap)) * 16 / 9)
    );
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    min-height: 0;
    overflow: hidden;
    font-family: var(--stage-font);
}

/* Chat-only shows have no buzzers (stage.js sets this when the button is hidden). */
.stage-body.stage-no-buzzer {
    --stage-buzzer: 0px;
    --stage-buzzer-gap: 0px;
}

/* Rows: spare space, video box, buzzer, spare space - so the left column's
   content is centred vertically; the right column spans all four. */
.stage-body .play-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--stage-panel-w);
    grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr);
    column-gap: var(--stage-gap);
    row-gap: 0;
    width: 100vw;
    height: 100vh;
    min-height: 0;
    padding: var(--stage-pad);
    overflow: hidden;
}

.stage-body #scoreboard {
    display: none !important;
}

/* Left column: the asset's place is always a 16:9 box, whether or not anything
   is showing in it; every kind of asset is fitted inside it. */
.stage-body .play-asset-area {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    justify-content: center;
    gap: 0;
    min-width: 0;
    min-height: 0;
}

.stage-body .play-asset-stage {
    flex: none;
    width: var(--stage-box-w);
    aspect-ratio: 16 / 9;
    box-sizing: border-box;
    border-radius: var(--stage-radius);
    background: #0b0e0d;
    box-shadow: inset 0 0 0 1px #232b26;
}

.stage-body #question-asset {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    min-height: 0;
}

/* Under the box: the buzzer, centred. The answer is layered over it. */
.stage-body .play-footer {
    grid-column: 1;
    grid-row: 3;
    position: relative;
    display: flex;
    justify-content: center;
    height: var(--stage-buzzer);
    margin-top: var(--stage-buzzer-gap);
}

.stage-body .play-actions {
    display: flex;
    justify-content: center;
    margin: 0;
}

.stage-body .buzzer {
    --size: var(--stage-buzzer);
}

.stage-body #question-asset .live-asset-slot {
    height: 100%;
    min-width: 0;
    min-height: 0;
}

/* The video fills its 16:9 box. Never cropped. */
.stage-body .video-crop,
.stage-body video.live-asset-video {
    width: 100%;
    max-width: none;
    aspect-ratio: 16 / 9;
    border-radius: var(--stage-radius);
}

.stage-body video.live-asset-video {
    height: auto;
    object-fit: contain;
}

/* The YouTube frame carries the same class; its 640px cap must not apply. */
.stage-body .video-crop iframe.live-asset-video {
    width: 100%;
    max-width: none;
}

.stage-body .live-asset-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--stage-radius);
}

.stage-body .live-asset-text {
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.stage-body .play-placeholder {
    white-space: pre-line;
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 2vmin;
    text-align: center;
    color: #6f7a71;
    font-size: 3.4vmin;
}

.stage-body .player-problem {
    position: absolute;
    left: 1vmin;
    right: 1vmin;
    bottom: 1vmin;
    margin: 0;
    z-index: 2;
    font-size: 2vmin;
}

.stage-body #playback-gate {
    border-radius: var(--stage-radius);
}

/* Right column. */
.stage-body .stage-panels {
    grid-column: 2;
    grid-row: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: var(--stage-gap);
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.stage-body .stage-panels > * {
    flex: 0 0 auto;
    min-width: 0;
    box-sizing: border-box;
}

.stage-body .stage-panels > .stage-panel {
    flex: 0 1 auto;
    min-height: 0;
    overflow: hidden;
}

.stage-body .play-timer {
    padding: 0.12em 0.25em;
    border: 1px solid #536057;
    border-radius: var(--stage-radius);
    background: var(--stage-timer-bg, rgba(16, 19, 18, 0.7));
    font-family: var(--stage-timer-font, var(--stage-font));
    color: var(--stage-timer-color, #f4f0e7);
    text-shadow: var(--stage-timer-outline, none);
    /* The width cap is not scaled, so the digits never outgrow the column. */
    font-size: min(calc(8.5vmin * var(--stage-timer-scale, 1)), 6.5vw);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}

.stage-body .play-timer.play-timer-low {
    border-color: #ff5a36;
    color: #ff5a36;
}

/* The answer: big, centred over the middle of the asset box, lightly transparent. */
.stage-body .play-asset-stage .answer-reveal {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    box-sizing: border-box;
    width: fit-content;
    min-width: 60%;
    max-width: 88%;
    max-height: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.4vmin 3vmin;
    border: 1px solid #6a8f6f;
    border-radius: var(--stage-radius);
    overflow: hidden;
    background: var(--stage-answer-bg, rgba(24, 34, 27, 0.6));
    font-family: var(--stage-answer-font, var(--stage-font));
    color: var(--stage-answer-color, #f4f0e7);
    text-shadow: var(--stage-answer-outline, none);
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
    text-align: center;
}

.stage-body .play-asset-stage .answer-reveal[hidden] {
    display: none;
}

.stage-body .answer-reveal-label {
    color: var(--stage-answer-color, #c9d0c9);
    font-size: calc(2.4vmin * var(--stage-answer-scale, 1));
    line-height: 1.2;
}

/* A long answer wraps, shrinks (stage.js sets data-size) and stops at three
   lines, so it can never outgrow the video column. */
.stage-body .answer-reveal-text {
    color: var(--stage-answer-color, #f4f0e7);
    font-size: calc(7vmin * var(--stage-answer-scale, 1));
    line-height: 1.12;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.stage-body .answer-reveal-text[data-size="s"] {
    font-size: calc(5.4vmin * var(--stage-answer-scale, 1));
}

.stage-body .answer-reveal-text[data-size="xs"] {
    font-size: calc(4vmin * var(--stage-answer-scale, 1));
}

/* Per-panel styling comes from the host's settings (custom properties set on
   <body>); each panel reads its own set through --w-*, unset ones fall back. */
#stage-chat {
    --w-font: var(--stage-chat-font);
    --w-color: var(--stage-chat-color);
    --w-scale: var(--stage-chat-scale, 1);
    --w-outline: var(--stage-chat-outline);
    --w-bg: var(--stage-chat-bg);
}

#stage-contestants {
    --w-font: var(--stage-contestants-font);
    --w-color: var(--stage-contestants-color);
    --w-scale: var(--stage-contestants-scale, 1);
    --w-outline: var(--stage-contestants-outline);
    --w-bg: var(--stage-contestants-bg);
}

.stage-panel {
    padding: 1.3vmin 1.6vmin;
    border: 1px solid #536057;
    border-radius: var(--stage-radius);
    background: var(--w-bg, rgba(16, 19, 18, 0.7));
    font-family: var(--w-font, var(--stage-font));
    color: var(--w-color, #f4f0e7);
    text-shadow: var(--w-outline, none);
    display: flex;
    flex-direction: column;
}

.stage-panel > * {
    flex: none;
}

.stage-panel h2 {
    display: flex;
    align-items: baseline;
    gap: 1vmin;
    margin: 0 0 0.6vmin;
    white-space: nowrap;
    overflow: hidden;
    font-size: calc(2.3vmin * var(--w-scale, 1));
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.stage-panel ol {
    margin: 0;
    padding-left: 0;
    list-style-position: inside;
    font-size: calc(2.7vmin * var(--w-scale, 1));
    line-height: 1.25;
    /* When the column is short, rows that do not fit wrap out of view whole
       rather than being cut in half. */
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    overflow: hidden;
}

.stage-panel li {
    flex: none;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stage-chat-status {
    margin: 0 0 0.6vmin;
    color: var(--w-color, #c9d0c9);
    font-size: calc(2vmin * var(--w-scale, 1));
}

.stage-more {
    flex: none;
    margin-left: auto;
    white-space: nowrap;
    color: var(--w-color, #c9d0c9);
    font-size: calc(2vmin * var(--w-scale, 1));
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.stage-chat-winner {
    margin: 0 0 0.6vmin;
    font-size: calc(2.6vmin * var(--w-scale, 1));
    font-weight: 700;
    line-height: 1.2;
    color: var(--w-color, #f2c14e);
    display: flex;
    white-space: nowrap;
}

.stage-chat-winner > span:first-child {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stage-chat-winner > span:last-child {
    flex: none;
    white-space: pre;
}

/* Chat health (host page). */
.chat-health-banner {
    margin: 0 0 1.2rem;
    padding: 0.7rem 1rem;
    border: 1px solid #e06c6c;
    border-radius: 6px;
    background: #3a1f1f;
    color: #f4f0e7;
}

.chat-health-banner.chat-health-ok {
    border-color: #6a8f6f;
    background: #1f3224;
}

.chat-health-title {
    margin: 0 0 0.4rem;
    font-weight: 700;
}

.chat-health-banner ul {
    margin: 0 0 0.5rem;
    padding-left: 1.2rem;
    list-style: none;
}

.chat-health-banner li.problem {
    color: #ffb4a8;
}

.chat-health-actions {
    display: flex;
    gap: 0.5rem;
}

.stage-chat-hint {
    margin: 0 0 0.6vmin;
    color: var(--w-color, #f4f0e7);
    font-size: calc(2.1vmin * var(--w-scale, 1));
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.host-toolbar {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 0.75rem;
}

/* ===== Contestant screen: fits the window, buzzer under the video ============== */
.play-hud-right {
    display: flex;
    align-items: center;
    gap: 1.1rem;
}

.play-body:not(.stage-body) {
    --play-chrome: 18.25rem; /* header, buzzer and status; the video takes the rest of the height */
}

.play-body:not(.stage-body) .play-stage {
    grid-template-rows: auto auto auto;
    align-content: start;
    gap: 0.6rem;
}

.play-body:not(.stage-body) .play-asset-area {
    gap: 0.5rem;
    justify-content: flex-start;
}

.play-media-row {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
}

.play-body:not(.stage-body) .live-asset {
    margin: 0; /* so the video's bottom edge is the stage's, and the volume lines up with it */
}

/* The asset's place: a standard landscape (16:9) box that is there whether or not
   anything is showing in it, so nothing moves when a video appears or goes. Every
   kind of asset is fitted inside it. */
.play-body:not(.stage-body) .play-asset-stage {
    flex: 0 1 auto;
    width: min(100%, calc((100vh - var(--play-chrome)) * 16 / 9));
    aspect-ratio: 16 / 9;
    box-sizing: border-box;
    border-radius: 6px;
    background: #0b0e0d;
    box-shadow: inset 0 0 0 1px #232b26;
}

/* While the video can't be shown yet the anti-spoiler cover is up: make it look like
   the empty box rather than a hole in the page. */
.play-body:not(.stage-body) #playback-gate.opaque {
    background: #0b0e0d !important;
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px #232b26;
}

.play-body:not(.stage-body) #question-asset {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
}

.play-body:not(.stage-body) #question-asset.blanked {
    min-height: 0;
}

.play-body:not(.stage-body) .live-asset-slot {
    height: 100%;
}

.play-body:not(.stage-body) .live-asset-image,
.play-body:not(.stage-body) .live-asset-video {
    max-width: 100%;
    max-height: 100%;
}

.play-body:not(.stage-body) .play-placeholder {
    white-space: pre-line;
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 1rem;
    text-align: center;
    color: #6f7a71;
    font-size: clamp(1rem, 2.4vw, 1.7rem);
    pointer-events: none;
}

.play-body:not(.stage-body) .player-problem {
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0.5rem;
    margin: 0;
    z-index: 2;
}

.play-body:not(.stage-body) .live-asset-image {
    max-height: calc(100vh - var(--play-chrome));
}

/* The clock, in a box at the top right (as on the audience view). */
.play-body:not(.stage-body) .play-timer {
    min-width: 5.6rem;
    padding: 0.35rem 0.75rem;
    box-sizing: border-box;
    text-align: center;
    border: 1px solid #536057;
    border-radius: 6px;
    background: rgba(16, 19, 18, 0.7);
    font-size: 2rem;
}

.play-body:not(.stage-body) .play-timer.play-timer-low {
    border-color: #ff5a36;
}

/* The audience view has no volume column: the row must not affect its layout at all. */
.stage-body .play-media-row {
    display: contents;
}

.stage-body .volume-slot {
    display: none;
}

/* Volume: a column to the left of the video, its bottom flush with the video's. */
.volume-slot {
    flex: none;
    width: 2rem;
    align-self: flex-end;
    display: flex;
    justify-content: center;
}

.volume-slot .volume-controls {
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: auto;
    max-width: none;
    gap: 0.35rem;
}

.volume-slot .volume-level {
    writing-mode: vertical-lr;
    direction: rtl; /* quiet at the bottom, loud at the top */
    width: 0.9rem;
    height: 6rem;
}

.volume-slot .volume-level::-webkit-slider-runnable-track {
    width: 0.25rem;
    height: 100%;
    background: linear-gradient(to top, #c9d0c9 var(--level), rgba(255, 255, 255, 0.2) var(--level));
}

.volume-slot .volume-level::-webkit-slider-thumb {
    margin-top: 0;
    margin-left: -0.225rem;
}

/* ===== The buzzer: a glossy dome in a static gray bezel ========================== */
/* One component for the contestants' button and the audience view's. Only the dome
   changes: off (gray), ready (warm white, lit), flash (warm white/gray), correct
   (green), incorrect (red). */
.buzzer {
    --size: clamp(4.5rem, 13vh, 7.5rem);
    position: relative;
    z-index: 3; /* its glow may reach over the video cover */
    display: block;
    width: var(--size);
    height: var(--size);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    font-size: 0;
    color: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    background: radial-gradient(circle at 34% 24%, #f4f6f8 0%, #c6cbd0 26%, #8d9399 62%, #596066 100%);
    box-shadow:
        0 0.4rem 0.9rem rgba(0, 0, 0, 0.6),
        inset 0 0.12rem 0.25rem rgba(255, 255, 255, 0.75),
        inset 0 -0.25rem 0.45rem rgba(0, 0, 0, 0.5);
    transition: transform 0.06s ease, filter 0.2s ease;

    /* the dome (ready by default: warm white, lit) */
    --dome: radial-gradient(circle at 50% 62%, #fffaf0 0%, #ffe8bd 40%, #f5c777 78%, #c58f3a 100%);
    --dome-shadow:
        0 0 1.3rem 0.25rem rgba(255, 224, 160, 0.6),
        0 0 0 0.12rem rgba(0, 0, 0, 0.35),
        inset 0 -0.3rem 0.6rem rgba(120, 70, 10, 0.35),
        inset 0 0.15rem 0.35rem rgba(255, 255, 255, 0.5);
}

.buzzer::before {
    content: '';
    position: absolute;
    inset: 11%;
    border-radius: 50%;
    background: var(--dome);
    box-shadow: var(--dome-shadow);
}

/* The reflection of a light source above and to the left. */
.buzzer::after {
    content: '';
    position: absolute;
    left: 24%;
    top: 17%;
    width: 40%;
    height: 25%;
    border-radius: 50%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.06));
    transform: rotate(-24deg);
    filter: blur(0.5px);
    pointer-events: none;
}

.buzzer[data-state="ready"]:hover {
    filter: brightness(1.06);
}

.buzzer[data-state="ready"]:active {
    transform: translateY(0.12rem) scale(0.97);
}

.buzzer[data-state="off"] {
    cursor: not-allowed;
    --dome: radial-gradient(circle at 50% 64%, #b7bcc1 0%, #8c9298 48%, #60666c 82%, #43484d 100%);
    --dome-shadow:
        0 0 0 0.12rem rgba(0, 0, 0, 0.35),
        inset 0 -0.3rem 0.6rem rgba(0, 0, 0, 0.4),
        inset 0 0.15rem 0.35rem rgba(255, 255, 255, 0.2);
}

.buzzer[data-state="off"]::after {
    opacity: 0.5;
}

.buzzer[data-state="correct"] {
    cursor: default;
    --dome: radial-gradient(circle at 50% 60%, #c9ffd9 0%, #45e07a 40%, #17a049 80%, #0b6a2d 100%);
    --dome-shadow:
        0 0 1.6rem 0.4rem rgba(70, 230, 120, 0.7),
        0 0 0 0.12rem rgba(0, 0, 0, 0.35),
        inset 0 0.15rem 0.35rem rgba(255, 255, 255, 0.45);
}

.buzzer[data-state="incorrect"] {
    cursor: default;
    --dome: radial-gradient(circle at 50% 60%, #ffb3a8 0%, #ff4a3d 40%, #c3150f 80%, #7a0a08 100%);
    --dome-shadow:
        0 0 1.6rem 0.4rem rgba(255, 70, 55, 0.7),
        0 0 0 0.12rem rgba(0, 0, 0, 0.35),
        inset 0 0.15rem 0.35rem rgba(255, 255, 255, 0.4);
}

/* Flashing: half a second lit, half a second gray. */
.buzzer[data-state="flash"] {
    cursor: default;
}

.buzzer[data-state="flash"]::before {
    animation: buzzer-flash 1s linear infinite;
}

@keyframes buzzer-flash {
    0%, 49.9% {
        background: radial-gradient(circle at 50% 62%, #fffaf0 0%, #ffe8bd 40%, #f5c777 78%, #c58f3a 100%);
        box-shadow:
            0 0 1.3rem 0.25rem rgba(255, 224, 160, 0.6),
            0 0 0 0.12rem rgba(0, 0, 0, 0.35),
            inset 0 -0.3rem 0.6rem rgba(120, 70, 10, 0.35),
            inset 0 0.15rem 0.35rem rgba(255, 255, 255, 0.5);
    }
    50%, 100% {
        background: radial-gradient(circle at 50% 64%, #b7bcc1 0%, #8c9298 48%, #60666c 82%, #43484d 100%);
        box-shadow:
            0 0 0 0.12rem rgba(0, 0, 0, 0.35),
            inset 0 -0.3rem 0.6rem rgba(0, 0, 0, 0.4),
            inset 0 0.15rem 0.35rem rgba(255, 255, 255, 0.2);
    }
}

.play-body:not(.stage-body) .play-footer {
    justify-content: center;
}

.play-body:not(.stage-body) .play-actions {
    gap: 0.3rem;
}

.play-body:not(.stage-body) #status {
    min-height: 1.3rem;
    font-size: 1rem;
}

/* ===== Host: audience view style ============================================ */
.stage-style-panel {
    margin: 0.75rem 0;
}

.stage-style-panel summary {
    cursor: pointer;
    font-weight: 600;
}

.stage-style-rows {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.5rem 0;
}

.stage-style-row {
    display: grid;
    grid-template-columns: 7rem minmax(10rem, 1fr) auto minmax(10rem, 14rem);
    gap: 0.75rem;
    align-items: center;
}

.stage-style-row label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.stage-style-row input[type="range"] {
    flex: 1;
    min-width: 0;
}

.stage-style-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ===== Host: Chat Status button ============================================== */
/* The shared header injects an !important theme for every <button>; the extra
   :not()s below only exist to out-rank it so this one can be green or red. */
.host-container .host-toolbar button.chat-status-btn:not(.pos-account-toggle):not(.pos-connect):not(.join-submit):not(.twitch-login-button):not(.pos-menu-action) {
    display: inline-flex !important;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.9rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    color: #fff !important;
    border: 1px solid transparent !important;
}

.host-container .host-toolbar button.chat-status-btn[hidden]:not(.pos-account-toggle):not(.pos-connect):not(.join-submit):not(.twitch-login-button):not(.pos-menu-action) {
    display: none !important;
}

.host-container .host-toolbar button.chat-status-btn.status-ok:not(.pos-account-toggle):not(.pos-connect):not(.join-submit):not(.twitch-login-button):not(.pos-menu-action) {
    background: #1f7a3a !important;
    border-color: #38a85a !important;
}

.host-container .host-toolbar button.chat-status-btn.status-bad:not(.pos-account-toggle):not(.pos-connect):not(.join-submit):not(.twitch-login-button):not(.pos-menu-action) {
    background: #a32828 !important;
    border-color: #e06c6c !important;
}

/* The yellow warning triangle appears only when something is wrong. */
.chat-status-btn .chat-status-warning {
    display: none;
}

.chat-status-btn.status-bad .chat-status-warning {
    display: block;
}

.chat-status-modal {
    min-width: min(36rem, 92vw);
}

/* Sound has nothing to look at: a note in the asset's place while it plays. */
#question-asset[data-asset-type="audio"]:not(.blanked)::before {
    content: '\266A';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #34443a;
    font-size: 38vmin;
    line-height: 1;
    pointer-events: none;
}

/* ===== Host: dragging rounds ================================================= */
.round-drag-handle {
    flex: none;
    padding: 0 0.35rem;
    color: #8a948c;
    font-size: 1.2rem;
    line-height: 1;
    cursor: grab;
    user-select: none;
}

.round-drag-handle:hover {
    color: #f4f0e7;
}

.round-column-header h3 {
    flex: 1;
    min-width: 0;
}

.round-column.dragging-round {
    opacity: 0.45;
}

.chat-test {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.chat-test p {
    margin: 0;
}

.chat-test .chat-test-good {
    color: #7fe08a;
}

.chat-test .chat-test-bad {
    color: #ffb4a8;
}

.play-body:not(.stage-body) .play-placeholder[hidden],
.stage-body .play-placeholder[hidden] {
    display: none;
}