.challenge-launch,
.challenge-btn {
    border: 1px solid var(--color-social-line, rgba(255, 79, 216, .44));
    border-radius: 12px;
    color: var(--color-text-primary, #F5F4FA);
    background: var(--color-bg-surface-raised, #21172B);
    padding: 10px 14px;
    font: 600 13px var(--font-family-interface, system-ui, sans-serif);
    cursor: pointer;
}

.challenge-btn:disabled { opacity: .5; cursor: wait; }
.challenge-launch { display: block; width: 100%; margin: 10px 0; text-align: left; background: linear-gradient(110deg, var(--color-social-soft, rgba(255, 79, 216, .14)), var(--color-bg-canvas, #0E0A14)); font-size: 14px; }
.challenge-launch small { display: block; margin-top: 5px; color: var(--color-text-secondary, #D8D2E2); font-weight: 400; line-height: 1.4; }

.challenge-dialog {
    position: fixed;
    inset: 0;
    z-index: 2000000;
    box-sizing: border-box;
    width: min(740px, calc(100vw - 28px));
    max-height: 88dvh;
    margin: auto;
    padding: 22px;
    border: 1px solid var(--color-social-line, rgba(255, 79, 216, .44));
    border-radius: 22px;
    color: var(--color-text-primary, #F5F4FA);
    background: var(--color-bg-surface, #17111F);
    box-shadow: var(--effect-shadow-lg, 0 28px 90px rgba(0, 0, 0, .42));
    font: 15px/1.5 var(--font-family-interface, system-ui, sans-serif);
}

.challenge-dialog::backdrop { background: var(--color-bg-scrim, rgba(6, 3, 10, .78)); backdrop-filter: blur(6px); }
.challenge-dialog h2 { margin: 0; font: 800 22px/1.2 var(--font-family-display, 'Montserrat', sans-serif); }
.challenge-dialog h3 { margin: 0; font-size: 17px; }
.challenge-dialog p { margin: 8px 0; }
.challenge-dialog input:not([type=checkbox]),
.challenge-dialog textarea,
.challenge-dialog select {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 10px 0;
    padding: 12px;
    border: 1px solid var(--color-border-strong, rgba(245, 244, 250, .22));
    border-radius: 10px;
    color: var(--color-text-primary, #F5F4FA);
    background: var(--color-bg-surface-raised, #21172B);
    font: inherit;
}
.challenge-dialog input:focus,
.challenge-dialog textarea:focus,
.challenge-dialog select:focus { border-color: var(--color-focus, #8A3FFC); outline: none; box-shadow: var(--effect-focus-ring, 0 0 0 3px rgba(138, 63, 252, .28)); }
.challenge-dialog label { display: block; margin: 10px 0; }
.challenge-dialog input[type=checkbox] { margin-right: 10px; accent-color: var(--color-navigation, #8A3FFC); }
.challenge-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.challenge-card { margin: 14px 0; padding: 17px; overflow-wrap: anywhere; border: 1px solid var(--color-border-default, rgba(245, 244, 250, .12)); border-radius: 15px; background: rgba(245, 244, 250, .025); }
.challenge-muted { color: var(--color-text-muted, #A49BAD); font-size: 13px; }
.challenge-feedback { color: var(--color-state-warning, #FFBF47); white-space: pre-wrap; }
.challenge-results { max-height: 250px; overflow: auto; }
.challenge-results button { display: block; width: 100%; margin: 6px 0; text-align: left; }
.challenge-close { float: right; }
.challenge-announcement { margin: 8px 0; padding: 10px; border: 1px solid var(--color-social-line, rgba(255, 79, 216, .44)); border-radius: 12px; color: var(--color-text-primary, #F5F4FA); background: var(--color-social-soft, rgba(255, 79, 216, .14)); font-size: 13px; line-height: 1.4; }
.challenge-host-dock { max-width: 100%; flex-shrink: 0; }
.challenge-host-dock .challenge-launch { padding: 9px; font-size: 12px; }
.challenge-dialog .challenge-counter { color: var(--color-social, #FF4FD8); }
.challenge-dialog .challenge-hero { color: var(--color-text-primary, #F5F4FA); font-size: 20px; font-weight: 700; }
.challenge-note { padding-left: 10px; border-left: 3px solid var(--color-social, #FF4FD8); }
.challenge-invite { border-color: var(--color-state-warning, #FFBF47); }
.challenge-directed { border-color: rgba(255, 184, 61, .36); background: linear-gradient(145deg, rgba(255,122,0,.07), rgba(245,244,250,.025)); }
.challenge-directed-badge { display: inline-flex; margin: 8px 0 2px; padding: 5px 8px; border: 1px solid rgba(255,184,61,.38); border-radius: 999px; color: #ffd98d; background: rgba(255,122,0,.1); font: 800 10px/1 'Montserrat',sans-serif; letter-spacing: .08em; }
.challenge-hidden { display: none !important; }

@media (min-width: 1025px) and (pointer: fine) {
    html:has(#main_wrapper) .challenge-dialog { zoom: 1.25; }
}

@media (max-width: 600px) {
    .challenge-dialog { padding: 20px 16px calc(18px + env(safe-area-inset-bottom)); }
    .challenge-dialog h2 { font-size: 19px; }
    .challenge-btn { min-height: 46px; }
    .challenge-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .challenge-actions .challenge-btn { width: 100%; margin: 0; }
    .challenge-results { max-height: 34dvh; }
}

body.mobile-body .challenge-dialog { overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(156,91,255,.42) transparent; }
body.mobile-body .challenge-dialog > div { clear: both; }
body.mobile-body .challenge-dialog :is(input:not([type=checkbox]), textarea, select) { min-height: 48px; padding: 12px 14px; }
body.mobile-body .challenge-dialog textarea { min-height: 82px; resize: vertical; }
body.mobile-body .challenge-dialog label { color: var(--color-text-secondary, #D8D2E2); font-size: .84rem; line-height: 1.45; }
body.mobile-body .challenge-dialog label:has(input[type=checkbox]) {
    display: flex; align-items: flex-start; gap: 10px; padding: 12px;
    border: 1px solid var(--color-border-default, rgba(245,244,250,.12)); border-radius: 13px; background: rgba(255,255,255,.025);
}
body.mobile-body .challenge-dialog input[type=checkbox] { flex: 0 0 20px; width: 20px; height: 20px; margin: 1px 0 0; }
body.mobile-body .challenge-results { margin: 8px 0; padding-right: 3px; }
body.mobile-body .challenge-results .challenge-btn {
    min-height: 48px; margin: 7px 0; padding: 10px 13px;
    border-color: var(--color-border-default, rgba(245,244,250,.12)); border-radius: 12px; background: rgba(255,255,255,.035);
}
body.mobile-body .challenge-card { margin: 10px 0; padding: 15px; border-radius: 16px; }
body.mobile-body .challenge-card h3 { line-height: 1.35; }
body.mobile-body .challenge-card .challenge-actions .challenge-btn { min-height: 44px; padding: 9px 10px; font-size: .76rem; }
body.mobile-body .challenge-directed-badge { margin-bottom: 7px; }
@media (max-width: 380px) { body.mobile-body .challenge-actions { grid-template-columns: 1fr; } }

.challenge-screen-bar { display: none; }
#playerContainer:fullscreen { box-sizing: border-box; padding-bottom: 44px !important; }
#playerContainer:fullscreen #player { max-height: calc(100dvh - 48px) !important; }
#playerContainer:fullscreen .challenge-screen-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10000;
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    padding: 6px 16px;
    overflow: hidden;
    border: 0;
    border-top: 1px solid var(--color-social-line, rgba(255, 79, 216, .44));
    color: var(--color-text-primary, #F5F4FA);
    background: var(--color-bg-surface-raised, #21172B);
    font-size: 15px;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
}