/* Challenge module styles.
   Page structure, cards, navigation, modal, breakpoints, and themes come from
   the existing ReversePlay styles. Only challenge-specific content lives here. */

.challenge-stage {
    min-height: 100%;
}

.challenge-page[data-focus-input="pointer"] .menu-btn:focus,
.challenge-page[data-focus-input="pointer"] .close-icon-btn:focus {
    outline: none;
}

.challenge-view {
    display: none;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    gap: var(--spacing-3);
    animation: fadeIn 0.2s ease;
}

.challenge-view.active {
    display: flex;
}

.challenge-view[hidden] {
    display: none;
}

.challenge-page[data-challenge-page-id] .challenge-stage:has(
    .challenge-view[data-challenge-view="playing"].active
) {
    flex: 0 0 auto;
}

.challenge-page[data-challenge-page-id]
    .challenge-view[data-challenge-view="playing"].active {
    min-height: auto;
}

.challenge-view:focus {
    outline: none;
}

.challenge-card {
    width: 100%;
    cursor: default;
    color: var(--color-text-primary);
}

.challenge-card:active {
    transform: none;
}

.challenge-rules-card {
    justify-content: flex-start;
    background: var(--color-bg-white);
}

.challenge-rules-content,
.challenge-result-content {
    width: 100%;
    height: 100%;
}

.challenge-rules-content {
    padding: var(--spacing-6) var(--spacing-4);
}

.challenge-rules-content h2 {
    margin: 0;
    color: var(--color-text-primary);
    font-size: var(--text-xl);
    line-height: var(--leading-tight);
    font-weight: var(--font-semibold);
    text-align: center;
}

.challenge-divider {
    width: 100%;
    margin: var(--spacing-4) 0;
    border-top: 1px dashed var(--color-border-light);
}

.challenge-rules-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
}

.challenge-rules-list li {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    color: var(--color-text-secondary);
    font-size: var(--text-base);
    line-height: var(--leading-snug);
    font-weight: var(--font-medium);
}

.challenge-rule-icon {
    width: var(--spacing-10);
    height: var(--spacing-10);
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: var(--color-bg-base);
    font-size: var(--text-xl);
}

.challenge-single-action {
    width: 100%;
    height: 140px;
    flex: 0 0 auto;
}

.challenge-primary-btn,
.challenge-secondary-btn {
    width: 100%;
    min-height: 56px;
    padding: var(--spacing-4);
    border: none;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    font-size: var(--text-base);
    line-height: var(--leading-snug);
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: var(--transition-base);
}

.challenge-single-action .challenge-primary-btn,
.challenge-result-actions .challenge-secondary-btn {
    min-height: 52px;
    padding-block: var(--spacing-3);
}

.challenge-primary-btn {
    background: var(--color-primary-orange);
    color: var(--color-text-white);
}

.challenge-secondary-btn {
    background: var(--color-bg-white);
    color: var(--color-text-primary);
}

.challenge-primary-btn:active,
.challenge-secondary-btn:active {
    transform: scale(0.98);
}

.challenge-primary-btn i,
.challenge-secondary-btn i {
    font-size: var(--text-2xl);
}

.challenge-primary-btn:disabled,
.challenge-secondary-btn:disabled,
.challenge-list-action:disabled,
.challenge-option:disabled {
    cursor: default;
}

.challenge-music-card {
    --challenge-cover-reveal-progress: 0;
    background: var(--color-primary-blue);
    color: var(--color-text-white);
}

.challenge-music-card.is-pause-enabled {
    cursor: pointer;
}

.challenge-music-card.is-pause-enabled:focus-visible {
    outline: 3px solid var(--color-white-30);
    outline-offset: 2px;
}

.challenge-music-backdrop {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.challenge-music-backdrop-blurred {
    z-index: -3;
    filter: blur(20px);
    transform: scale(1.5);
    opacity: 0.8;
}

.challenge-music-backdrop-clear {
    z-index: -2;
    transform: scale(1.03);
    opacity: var(--challenge-cover-reveal-progress);
}

.challenge-music-card.is-cover-transitioning .challenge-music-backdrop-clear {
    will-change: opacity;
}

.challenge-music-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--color-overlay-dark);
    opacity: 0.4;
}

.challenge-apple-attribution {
    position: absolute;
    top: var(--spacing-4);
    right: var(--spacing-4);
    z-index: 4;
    display: none;
    align-items: center;
    padding: var(--spacing-1);
    text-decoration: none;
    transition: var(--transition-base);
}

.challenge-music-card.is-revealing .challenge-apple-attribution[href] {
    display: inline-flex;
}

.challenge-apple-attribution:hover {
    opacity: 0.8;
}

.challenge-apple-attribution:focus-visible {
    outline: 2px solid var(--color-text-white);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.challenge-apple-attribution img {
    width: auto;
    height: 18px;
    opacity: 0.3;
}

.challenge-round-label,
.challenge-feedback {
    position: absolute;
    margin: 0;
    color: var(--color-text-white);
    text-align: center;
}

.challenge-round-label {
    left: var(--spacing-4);
    right: var(--spacing-4);
    top: var(--spacing-5);
    font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    font-weight: var(--font-medium);
}

.challenge-feedback {
    left: 50%;
    bottom: var(--spacing-4);
    z-index: 2;
    width: max-content;
    max-width: calc(100% - var(--spacing-8));
    padding: var(--spacing-2) var(--spacing-4);
    border: 1px solid var(--color-white-20);
    border-radius: var(--radius-full);
    transform: translate(-50%, calc(100% + var(--spacing-5)));
    background: var(--color-overlay-dark);
    box-shadow: 0 4px 16px var(--color-overlay-medium);
    opacity: 0;
    overflow: hidden;
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    font-weight: var(--font-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}

.challenge-feedback.is-animating {
    animation: challenge-feedback-bubble 1.4s both;
    will-change: transform, opacity;
}

.challenge-feedback.is-status {
    padding: 0;
    border: none;
    transform: translate(-50%, 0);
    background: transparent;
    box-shadow: none;
    opacity: 1;
    overflow: visible;
}

.challenge-answer-details {
    position: absolute;
    top: 50%;
    left: var(--spacing-5);
    right: var(--spacing-5);
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-1);
    transform: translateY(-50%);
    color: var(--color-text-white);
    text-align: center;
    text-shadow: 0 1px 8px var(--color-overlay-dark);
}

.challenge-answer-details[hidden] {
    display: none;
}

.challenge-answer-details strong {
    max-width: 100%;
    overflow: hidden;
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
    font-weight: var(--font-bold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.challenge-answer-details span {
    max-width: 100%;
    overflow: hidden;
    font-size: var(--text-base);
    line-height: var(--leading-snug);
    font-weight: var(--font-medium);
    opacity: 0.9;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.challenge-countdown {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 96px;
    height: 96px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    background: var(--color-overlay-dark);
    color: var(--color-text-white);
    font-size: 44px;
    line-height: 48px;
    font-weight: var(--font-bold);
    font-variant-numeric: tabular-nums;
}

.challenge-countdown[hidden] {
    display: none;
}

.challenge-music-card.is-loading .challenge-countdown {
    animation: challenge-loading-pulse 1s ease-in-out infinite;
}

.challenge-status-card {
    width: 100%;
    padding: var(--spacing-4) var(--spacing-5);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-pill);
    background: var(--color-bg-white);
}

.challenge-status-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-1);
    color: var(--color-text-tertiary);
    font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.challenge-status-copy strong {
    font-weight: inherit;
}

.challenge-progress {
    display: grid;
    grid-template-columns: repeat(var(--challenge-progress-count, 10), minmax(0, 1fr));
    gap: var(--spacing-1);
}

.challenge-progress-segment {
    height: var(--spacing-1);
    border-radius: var(--radius-full);
    background: var(--color-overlay-medium);
}

.challenge-progress-segment.correct {
    background: var(--color-primary-green);
}

.challenge-progress-segment.incorrect {
    background: var(--color-primary-orange);
}

.challenge-options {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-2);
}

.challenge-option {
    min-width: 0;
    min-height: 54px;
    padding: var(--spacing-3);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-bg-white);
    color: var(--color-text-primary);
    font-size: var(--text-base);
    line-height: 1.25;
    font-weight: var(--font-medium);
    transition: var(--transition-base);
}

.challenge-option-label {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    text-overflow: ellipsis;
    overflow-wrap: anywhere;
}

.challenge-option:not(:disabled) {
    cursor: pointer;
}

.challenge-option:not(:disabled):active {
    transform: scale(0.98);
}

.challenge-option.correct {
    border-color: var(--color-primary-green);
    background: var(--color-primary-green);
    color: var(--color-text-white);
}

.challenge-option.incorrect {
    border-color: var(--color-primary-orange);
    background: var(--color-primary-orange);
    color: var(--color-text-white);
}

.challenge-error-panel {
    width: 100%;
    padding: var(--spacing-4);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background: var(--color-bg-white);
    text-align: center;
}

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

.challenge-error-panel p {
    margin: 0 0 var(--spacing-3);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
}

.challenge-error-panel .challenge-secondary-btn {
    min-height: 48px;
    background: var(--color-primary-orange);
    color: var(--color-text-white);
}

.challenge-result-card {
    justify-content: flex-start;
    border: 1px solid var(--color-border-light);
    background:
        radial-gradient(circle at 50% 0, var(--color-bg-orange-light), transparent 72%),
        var(--color-bg-white);
}

.challenge-result-content {
    padding: var(--spacing-4);
    display: flex;
    flex-direction: column;
}

.challenge-result-heading {
    margin: var(--spacing-2) 0 var(--spacing-3);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.challenge-result-heading h2 {
    margin: 0;
    color: var(--color-text-primary);
    font-size: var(--text-base);
    line-height: var(--leading-snug);
    font-weight: var(--font-extrabold);
}

.challenge-result-heading span {
    width: 92px;
    height: 6px;
    margin-top: -2px;
    border-top: 3px solid var(--color-primary-orange);
    border-radius: 50%;
    transform: rotate(-4deg);
}

.challenge-result-heading p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-base);
    line-height: var(--leading-snug);
    font-weight: var(--font-medium);
}

.challenge-result-score {
    display: grid;
    grid-template-columns: 40px auto 40px;
    align-items: center;
    align-content: center;
    justify-content: center;
    column-gap: var(--spacing-6);
    flex: 1;
    margin: 0;
    text-align: center;
}

.challenge-result-score p {
    margin: 0;
    color: var(--color-primary-orange);
    line-height: 1;
}

.challenge-result-score strong {
    font-size: 72px;
    font-weight: var(--font-semibold);
}

.challenge-result-score p span {
    font-size: var(--text-2xl);
}

.challenge-result-score small {
    grid-column: 1 / -1;
    color: var(--color-text-secondary);
    font-size: var(--text-base);
    line-height: var(--leading-snug);
    font-weight: var(--font-medium);
}

.challenge-laurel {
    width: 40px;
    height: 90px;
    object-fit: contain;
}

.challenge-result-score .challenge-laurel:last-of-type {
    transform: scaleX(-1);
}

[data-theme="dark"] .challenge-laurel {
    filter: invert(1);
}

.challenge-result-content > .challenge-divider {
    margin: 0 0 var(--spacing-4);
}

.challenge-result-stats {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    text-align: center;
}

.challenge-result-stats div {
    display: flex;
    flex-direction: column;
}

.challenge-result-stats dt {
    color: var(--color-text-tertiary);
    font-size: var(--text-base);
    line-height: var(--leading-snug);
    font-weight: var(--font-medium);
}

.challenge-result-stats dd {
    margin: 0;
    color: var(--color-text-primary);
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
    font-weight: var(--font-semibold);
    order: -1;
}

.challenge-result-actions {
    width: 100%;
    height: 140px;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    flex: 0 0 auto;
}

.challenge-library-sheet {
    height: 70vh;
}

.challenge-sheet-header-spacer {
    width: var(--spacing-10);
    height: var(--spacing-10);
}

.challenge-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.challenge-list-card {
    position: relative;
    padding: var(--spacing-4);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-bg-beige);
    transition: var(--transition-base);
}

.challenge-list-summary {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: var(--spacing-4);
    color: inherit;
    text-decoration: none;
}

.challenge-card-link::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-md);
}

.challenge-card-link:focus-visible {
    outline: none;
}

.challenge-card-link:focus-visible::after {
    outline: 3px solid var(--color-primary-orange);
    outline-offset: 3px;
}

.challenge-cover-stack {
    height: 72px;
    display: flex;
    align-items: center;
}

.challenge-cover-stack img {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-base);
    object-fit: cover;
    box-shadow: 0 0 8px var(--color-overlay-medium);
}

.challenge-cover-stack img + img {
    margin-left: -48px;
}

.challenge-list-copy {
    min-width: 0;
}

.challenge-list-heading {
    min-width: 0;
    margin-bottom: var(--spacing-2);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.challenge-list-copy h2 {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--color-text-primary);
    font-size: var(--text-lg);
    line-height: var(--leading-tight);
    font-weight: var(--font-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.challenge-new-badge {
    flex: 0 0 auto;
    padding: 3px var(--spacing-2);
    border-radius: var(--radius-pill);
    background: var(--color-bg-orange-light);
    color: var(--color-primary-orange);
    font-size: var(--text-xs);
    line-height: var(--leading-none);
    font-weight: var(--font-bold);
}

.challenge-list-copy p {
    margin: 0;
    color: var(--color-text-tertiary);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    font-weight: var(--font-medium);
}

.challenge-list-actions {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-2);
    margin-top: var(--spacing-3);
}

.challenge-list-action {
    min-height: 44px;
    padding: var(--spacing-2) var(--spacing-3);
    border: none;
    border-radius: var(--radius-base);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    background: var(--color-bg-white);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: var(--transition-base);
}

.challenge-list-action:active {
    transform: scale(0.98);
}

.challenge-list-action i {
    font-size: var(--text-xl);
}

.challenge-request {
    padding: var(--spacing-3) 0 var(--spacing-1);
    border-top: 1px solid var(--color-border-light);
    text-align: center;
}

.challenge-request p {
    margin: 0;
    color: var(--color-text-tertiary);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    font-weight: var(--font-normal);
}

.challenge-request-link {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.challenge-detail-content {
    display: block;
    padding: var(--spacing-4) 0 calc(var(--spacing-8) + env(safe-area-inset-bottom));
}

.challenge-detail-content .info-card {
    padding: var(--spacing-4);
}

.challenge-detail-content .help-title {
    margin-bottom: var(--spacing-2);
}

.challenge-detail-content .help-subtitle {
    margin: 0;
}

.challenge-detail-content .section-toggle {
    padding: var(--spacing-1) 0;
}

.challenge-detail-content .section-body {
    padding-top: var(--spacing-1);
}

.challenge-related-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    margin-top: var(--spacing-3);
}

.challenge-related-heading {
    margin: 0 0 var(--spacing-2);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--color-text-primary);
    font-size: var(--text-xl);
    line-height: var(--leading-tight);
    font-weight: var(--font-semibold);
}

.challenge-related-heading i {
    color: var(--color-primary-orange);
    font-size: var(--text-2xl);
}

.challenge-related-link {
    display: grid;
    color: inherit;
    text-decoration: none;
}

.challenge-related-link:focus-visible {
    outline: none;
}

.challenge-related-card:active {
    transform: scale(0.99);
}

.challenge-related-action {
    grid-template-columns: minmax(0, 1fr);
}

.challenge-spoiler-label {
    color: var(--color-text-tertiary);
    font-size: var(--text-sm);
    font-weight: var(--font-normal);
}

.challenge-toast {
    position: fixed;
    left: 50%;
    bottom: calc(92px + env(safe-area-inset-bottom));
    z-index: var(--z-popover);
    max-width: min(320px, calc(100vw - var(--spacing-8)));
    padding: var(--spacing-3) var(--spacing-5);
    border-radius: var(--radius-pill);
    transform: translate(-50%, var(--spacing-3));
    background: var(--color-text-primary);
    color: var(--color-bg-white);
    box-shadow: 0 8px 24px var(--color-overlay-medium);
    opacity: 0;
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    font-weight: var(--font-semibold);
    text-align: center;
    transition: var(--transition-base);
    pointer-events: none;
}

.challenge-toast[hidden] {
    display: none;
}

.challenge-toast.visible {
    transform: translate(-50%, 0);
    opacity: 1;
}

@keyframes challenge-loading-pulse {
    0%,
    100% {
        opacity: 0.65;
    }

    50% {
        opacity: 1;
    }
}

@keyframes challenge-feedback-bubble {
    0% {
        transform: translate(-50%, calc(100% + var(--spacing-5)));
        opacity: 0;
        animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    13% {
        transform: translate(-50%, 0);
        opacity: 1;
        animation-timing-function: linear;
    }

    84% {
        transform: translate(-50%, 0);
        opacity: 1;
        animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
    }

    100% {
        transform: translate(-50%, calc(100% + var(--spacing-5)));
        opacity: 0;
    }
}

@media (max-width: 480px) {
    .challenge-result-score {
        column-gap: var(--spacing-4);
    }

    .challenge-result-score strong {
        font-size: 64px;
    }
}

@media (min-width: 769px) {
    .challenge-rules-content {
        padding: var(--spacing-8) var(--spacing-6);
    }

    .challenge-rules-list {
        gap: var(--spacing-8);
    }

    .challenge-detail-content {
        padding: var(--spacing-6) 0 var(--spacing-8);
    }

    .challenge-detail-content .info-card {
        padding: var(--spacing-5);
    }
}

@media (prefers-reduced-motion: reduce) {
    .challenge-view {
        animation: none;
    }

    .challenge-music-card.is-loading .challenge-countdown {
        animation: none;
    }

    .challenge-toast {
        transition: none;
    }

    .challenge-feedback.is-animating {
        animation-name: challenge-feedback-fade;
    }

    @keyframes challenge-feedback-fade {
        0%,
        100% {
            transform: translate(-50%, 0);
            opacity: 0;
        }

        1%,
        84% {
            transform: translate(-50%, 0);
            opacity: 1;
        }
    }
}