/* Quiz engine – audio (guess the sound) and future types */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: auto; font-family: system-ui, -apple-system, Segoe UI, sans-serif; }
body {
    background: #2a2a2a;
    color: #111;
}

.quiz-engine {
    padding-top: 50px;
    padding-bottom: 50px;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
   
}

.quiz-engine__stage {
    width: 100%;
    max-width: 1610px;
    height: auto;
    position: relative;
}

.quiz-engine__content-area {
    position: relative;
    background: #fff;
    border: 1.6px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 2vw, 28px);
}

.quiz-engine__card {
    position: relative;
    width: min(1206px, 100%);
    height: auto;
    min-height: 400px;
    min-height: 80vh;

    background: #fff;
    border: 2.6px solid #000;
    overflow: visible;
    /* padding: clamp(20px, 3vw, 44px) clamp(20px, 3vw, 44px) clamp(28px, 4vw, 56px); */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.quiz-engine__progress {
    --progress-size: 80px;
    flex-shrink: 0;
    /* width: var(--progress-size);
    height: var(--progress-size);
    border-radius: 50%; */
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--progress-size) * 0.392); /* 31.373/80 */
    font-weight: 700;
    letter-spacing: 0.02em;
    background: #000;
    color: #fff;
    /* Normal flow: keep progress at the top, below it render question/results. */
    position: static;
    transform: none;
    margin: 0 0 8px;
}

@media (max-width: 1000px) {
    .quiz-engine {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .quiz-engine__choices {
        padding: 0 !important;
    }

    .quiz-engine__prompt {
        padding: 5px !important;
    }

    .quiz-engine__choice {
        font-size: 18px !important;
    }
}

@media (max-width: 640px) {
    .quiz-engine__progress {
        --progress-size: 60px;
    }

    .quiz-engine__next {
        width: 120px !important;
    }
}

.quiz-engine__question {
    width: 100%;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: clamp(18px, 3vw, 34px);
    padding-top: 0;
}
.quiz-engine__question.is-active {
    display: flex;
}

.quiz-engine__prompt {
   padding: 20px;

}

.quiz-engine__choices {
    position: static;
    width: min(var(--qa-width, 266px), 100%);
    margin: 0 auto;
}

.quiz-engine__wave {
    position: static;
    margin: 0 auto;
}

.quiz-engine__top {
    /* Figma prompt block is ~535px wide, centered */
    width: min(535px, calc(100% - 48px));
    margin: 0 auto;
    text-align: center;
}

.quiz-engine__prompt {
    text-align: center;
    font-size: clamp(20px, 2.2vw, 30px);
    line-height: 1.35;
    font-weight: 500;
    margin: 0;
}

.quiz-engine__image-wrap {
    flex-shrink: 0;
    width: 100%;
    display: none; /* enabled per-question when q.image exists */
    align-items: center;
    justify-content: center;
    margin-bottom: clamp(12px, 2.5vw, 24px);
    padding: 0 8px;
}

.quiz-engine__image {
    width: 100%;
    max-height: min(420px, 40vh);
    object-fit: contain;
    background: #fff;
}

.quiz-engine__play-wrap {
    margin: clamp(18px, 3vw, 34px) auto 0;
    width: fit-content;
}

.quiz-engine__play {
    width: 95px;
    height: 95px;
    border-radius: 50%;
    border: 2.6px solid #000;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, transform 0.12s;
    box-shadow: 4px 4px 0 #2d7224;
}
.quiz-engine__play:hover {
    background: #eaeaea;
}
.quiz-engine__play:active {
    transform: scale(0.97);
}
.quiz-engine__play:focus {
    outline: 2px solid #000;
    outline-offset: 3px;
}
.quiz-engine__play.is-playing {
    background: #333;
    color: #fff;
    border-color: #333;
}
.quiz-engine__play svg {
    width: 46px;
    height: 46px;
    display: block;
    margin-left: 4px;
    transform: none;
}
.quiz-engine__play.is-playing svg {
    margin-left: 0;
}

.quiz-engine__choices {
    display: flex;
   
    margin: clamp(18px, 4vw, 34px) auto 0;
    justify-content: center;
    padding: 50px;
   
}

.quiz-engine__card--wide-choices .quiz-engine__choices {
    width: min(var(--qa-width), calc(100% - 48px));
}

.quiz-engine__choice-grid {
    display: grid;
    grid-template-columns: repeat(2, 110px);
    gap: 40px;
    width: 100%;
    justify-content: space-between;
    padding-bottom: 20px;
}
.quiz-engine__card--wide-choices .quiz-engine__choice-grid {
    grid-template-columns: repeat(2, 223px);
    width: 100%;
}

.quiz-engine__choice {
    padding: 20px;
  min-height: 80px;
    border: 2.6px solid #000;
    background: #fff;
    font-size: 30px;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s, box-shadow 0.15s;
    font-family: inherit;
    color: #111;

 
    display: grid;
    place-items: center;
    box-shadow: 4px 4px 0 #2d7224;
}

.quiz-engine__card--wide-choices .quiz-engine__choice {
    width: 223px;
}

/* Responsive: avoid overflow on narrow screens (mobile/portrait). */
@media (max-width: 640px) {
    .quiz-engine__choices {
        width: 100%;
        display: flex;
        justify-content: center;
        padding: 0;
        margin: 0 auto;
    }

    .quiz-engine__choice-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 18px;
    }

    .quiz-engine__choice {
        width: calc(50% - 9px);
        min-width: 140px;
        max-width: 223px;
        height: auto;
        min-height: 86px;
        padding: 14px 12px;
        line-height: 1.1;
        word-break: break-word;
    }

    .quiz-engine__card--wide-choices .quiz-engine__choice {
        width: calc(50% - 9px);
        max-width: none;
    }
}
.quiz-engine__choice:hover:not(:disabled) {
    background: #f8f8f8;
    box-shadow: 0 4px 0 #000;
}
.quiz-engine__choice:disabled {
    cursor: default;
    opacity: 0.55;
}
.quiz-engine__choice.is-selected:not(.is-correct):not(.is-wrong) {
    box-shadow: inset 0 0 0 3px #000;
}
.quiz-engine__choice.is-correct {
    background: #befca3;
    border-color: #000;
}
.quiz-engine__choice.is-wrong {
    background: #ffa87f;
    border-color: #000;
}

/* Match Figma's selected (pre-feedback) color */
.quiz-engine__choice.is-selected:not(.is-correct):not(.is-wrong) {
    background: #ffa87f;
}

.quiz-engine__feedback {
    display: none;
    position: absolute;
    top: 7.0192308%;   /* 73 / 1040 */
    left: 19.4850746%; /* 235 / 1206-ish frame alignment within card; close enough in % space */
    transform: none;
    width: 61.0%;
    height: auto;
    overflow: visible;
    background: #fff;
    border: 2.6px solid #000;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 24px;
    z-index: 5;
    text-align: center;
    border-radius: 0;
}
.quiz-engine__feedback.is-open {
    display: flex;
}
.quiz-engine__feedback-text {
    font-size: clamp(15px, 2vw, 20px);
    line-height: 1.45;
    max-width: 560px;
    margin-bottom: clamp(20px, 3vw, 32px);
}
.quiz-engine__feedback-text strong {
    font-weight: 700;
}

.quiz-engine__next {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 75px;
    padding: 0 28px 0 32px;
    border: 1.6px solid #000;
    background: #fff;
    font-size: 30px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
    box-shadow: 4px 4px 0 #2d7224;
}
.quiz-engine__next:hover {
    background: #f0f0f0;
}
.quiz-engine__next svg {
    width: 14px;
    height: 30px;
    flex-shrink: 0;
}

.quiz-engine__results {
    padding: 20px;
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    flex: 1;
    inset: 0;
}
.quiz-engine__results.is-open {
    display: flex;
}
.quiz-engine__results-title {
    font-size: clamp(20px, 3vw, 28px);
    font-weight: 700;
}
.quiz-engine__results-score {
    font-size: 30px;
    font-weight: 700;
}

.quiz-engine__restart {
    margin: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 75px;
    padding: 0 32px;
    border: 1.6px solid #000;
    background: #fff;
    font-size: 30px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 4px 4px 0 #2d7224;
}

.quiz-engine__question {
    --qa-width: 266px;
    display: none;
    width: 100%;
    height: 100%;
    position: relative;
    padding-top: 0;
}
.quiz-engine__question.is-active {
    display: block;
}

.quiz-engine__card--wide-choices .quiz-engine__question {
    --qa-width: 499px;
}

.quiz-engine__wave {
    display: block;
    width: min(994px, calc(100% - 48px));
    height: 38px;
    margin: clamp(18px, 3vw, 34px) auto 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    /* Exact Figma Vector 205 path, recolored to black */
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='0 0 997 41' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.50027 22.1476C68.0003 34.6734 57.951 3.26864 99.0003 1.57105C142 -0.207216 131.5 31.9776 184 31.9776C223.951 31.9776 246.412 2.69532 294 1.57105C348 0.295293 374 30.5275 425.105 31.9776C490.5 33.8332 513.469 5.63504 557 8.36784C613.358 11.9058 599.5 33.8332 660.108 31.9776C688.883 31.0966 727.267 6.37239 769.385 8.36784C797.5 9.69988 807.5 18.0829 840 33.8332C869.759 48.2551 870.2 33.3097 912.5 9.69988C954.801 -13.9099 986.688 29.5146 995.5 29.5146' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

.quiz-engine__card--answered-correct .quiz-engine__wave {
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='0 0 997 41' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.50027 22.1476C68.0003 34.6734 57.951 3.26864 99.0003 1.57105C142 -0.207216 131.5 31.9776 184 31.9776C223.951 31.9776 246.412 2.69532 294 1.57105C348 0.295293 374 30.5275 425.105 31.9776C490.5 33.8332 513.469 5.63504 557 8.36784C613.358 11.9058 599.5 33.8332 660.108 31.9776C688.883 31.0966 727.267 6.37239 769.385 8.36784C797.5 9.69988 807.5 18.0829 840 33.8332C869.759 48.2551 870.2 33.3097 912.5 9.69988C954.801 -13.9099 986.688 29.5146 995.5 29.5146' stroke='%232D7224' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

.quiz-engine__card--answered-wrong .quiz-engine__wave {
    background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='0 0 997 41' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.50027 22.1476C68.0003 34.6734 57.951 3.26864 99.0003 1.57105C142 -0.207216 131.5 31.9776 184 31.9776C223.951 31.9776 246.412 2.69532 294 1.57105C348 0.295293 374 30.5275 425.105 31.9776C490.5 33.8332 513.469 5.63504 557 8.36784C613.358 11.9058 599.5 33.8332 660.108 31.9776C688.883 31.0966 727.267 6.37239 769.385 8.36784C797.5 9.69988 807.5 18.0829 840 33.8332C869.759 48.2551 870.2 33.3097 912.5 9.69988C954.801 -13.9099 986.688 29.5146 995.5 29.5146' stroke='%23FFA87F' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Debug (X) – aligned with hotspot-engine */
#quiz-debug-panel {
    display: none;
    position: fixed;
    top: 10px;
    left: 10px;
    width: min(720px, calc(100vw - 20px));
    max-height: 38vh;
    min-width: 260px;
    overflow: auto;
    z-index: 500;
    background: rgba(0, 0, 0, 0.92);
    color: #9d9;
    padding: 12px;
    font-size: 11px;
    font-family: monospace;
    border: 1px solid #363;
    border-radius: 6px;
}
body.quiz-debug-mode #quiz-debug-panel {
    display: block;
}
#quiz-debug-panel h3 {
    margin: 0 0 8px;
    font-size: 11px;
    text-transform: uppercase;
    color: #afa;
    user-select: none;
    cursor: move;
}
#quiz-debug-panel pre {
    margin: 8px 0 0;
    white-space: pre-wrap;
    word-break: break-all;
    font-size: 10px;
    max-height: 22vh;
    overflow: auto;
    background: #111;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #333;
    color: #ccc;
}
.quiz-debug-copy-btn {
    margin-top: 8px;
    padding: 6px 10px;
    border: 1px solid rgba(160, 255, 160, 0.45);
    background: rgba(0, 60, 30, 0.35);
    color: #9df;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
}