.quiz-body { min-height: 100svh; background: var(--bg-light); }
.quiz-app { min-height: 100svh; }
.quiz-welcome { position: relative; display: grid; min-height: 100svh; place-items: center; overflow: hidden; padding: 100px 24px 84px; background: var(--dark-blue) url('../images/concurso-da-marinha-rm2.webp') center / cover no-repeat; color: var(--white); }
.quiz-welcome-backdrop { position: absolute; inset: 0; background: linear-gradient(100deg, rgb(5 15 65 / 86%), rgb(10 25 47 / 58%) 65%, rgb(10 25 47 / 48%)); }
.quiz-welcome-brand { display: grid; width: 152px; height: 152px; place-items: center; margin: 0 auto 17px; }
.quiz-welcome-brand img { width: 100%; height: 100%; object-fit: contain; }
.quiz-welcome-content { position: relative; z-index: 1; width: min(100%, 800px); text-align: center; animation: quiz-appear .45s ease both; }
.quiz-kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 17px; color: var(--accent-yellow); font-size: .76rem; font-weight: 800; letter-spacing: .14em; }
.quiz-kicker::before, .quiz-kicker::after { width: 25px; height: 1px; background: currentColor; content: ''; opacity: .8; }
.quiz-welcome h1 { margin: 0 auto 32px; color: var(--white); font-size: clamp(2.45rem, 6.2vw, 4.8rem); font-weight: 800; line-height: 1.05; letter-spacing: -.055em; text-wrap: balance; }
.quiz-welcome-mark { position: absolute; right: max(24px, calc((100vw - 1160px) / 2)); bottom: 24px; display: grid; width: 56px; height: 56px; place-items: center; border: 1px solid rgb(255 255 255 / 32%); border-radius: 50%; background: rgb(255 255 255 / 12%); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.quiz-welcome-mark img { width: 38px; height: 38px; }
.quiz-flow { min-height: 100svh; background: var(--bg-light); }
.quiz-flow[hidden], .quiz-welcome[hidden] { display: none; }
.quiz-topbar { display: flex; height: 72px; align-items: center; justify-content: space-between; gap: 16px; padding-inline: max(20px, calc((100vw - 1060px) / 2)); border-bottom: 1px solid #E5E9EF; background: var(--white); }
.quiz-mini-brand { display: flex; width: 92px; height: 46px; align-items: center; padding: 3px 5px; border-radius: 6px; }
.quiz-mini-brand img { width: 100%; height: 100%; object-fit: contain; }
.quiz-score { display: inline-flex; min-width: 103px; align-items: center; justify-content: center; gap: 8px; padding: 7px 12px; border: 1px solid rgb(251 169 51 / 38%); border-radius: 999px; background: #FFF8EC; color: var(--dark-blue); font-size: .94rem; }
.quiz-score strong { font-weight: 800; }
.quiz-score small { color: var(--text-muted); font-size: .78rem; }
.quiz-score-icon { color: #C27A0C; }
.quiz-score-icon svg { width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.quiz-progress-area { width: min(100% - 40px, 930px); margin: 24px auto 0; }
.quiz-progress-copy { display: flex; justify-content: space-between; color: var(--text-muted); font-size: .76rem; font-weight: 700; }
.quiz-progress-track { position: relative; height: 5px; margin: 37px 16px 0; border-radius: 999px; background: #DCE2E8; }
.quiz-progress-fill { width: var(--quiz-progress, 0%); height: 100%; border-radius: inherit; background: var(--accent-green); transition: width .45s cubic-bezier(.22,.7,.25,1); }
.quiz-progress-avatar { position: absolute; z-index: 2; top: -38px; left: var(--quiz-avatar-position, 6%); width: 46px; height: 46px; transition: left .45s cubic-bezier(.22,.7,.25,1); transform: translateX(-50%); }
.quiz-progress-avatar[hidden] { display: none; }
.quiz-avatar-photo { width: 42px; height: 42px; border: 2px solid var(--white); border-radius: 50%; background: #DCE2E8; object-fit: cover; box-shadow: 0 2px 9px rgb(10 25 47 / 20%); }
.quiz-avatar-badge { position: absolute; right: -4px; bottom: -3px; display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid var(--white); border-radius: 50%; background: var(--white); box-shadow: 0 2px 5px rgb(10 25 47 / 20%); }
.quiz-avatar-badge img { width: 24px; height: 24px; object-fit: contain; }
.quiz-content-wrap { width: min(100% - 40px, 720px); margin: 25px auto 0; padding-bottom: 52px; }
.quiz-back { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; font: inherit; font-size: .84rem; font-weight: 600; }
.quiz-back:hover { color: var(--primary-blue); }
.quiz-back svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.quiz-screen { padding-top: 22px; animation: quiz-appear .3s ease both; }
.quiz-screen[hidden] { display: none; }
.quiz-screen > .quiz-kicker { margin-bottom: 11px; color: var(--accent-green); font-size: .68rem; }
.quiz-question { margin-bottom: 25px; color: var(--dark-blue); font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; line-height: 1.12; letter-spacing: -.045em; text-wrap: balance; }
.quiz-options { display: grid; gap: 12px; }
.quiz-option { display: flex; min-height: 74px; align-items: center; gap: 15px; padding: 13px 17px; border: 1px solid #DDE3E9; border-radius: 11px; background: var(--white); color: var(--text-main); cursor: pointer; font: inherit; font-size: .97rem; font-weight: 600; line-height: 1.45; text-align: left; transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.quiz-option:hover { border-color: rgb(65 154 80 / 65%); box-shadow: 0 5px 15px rgb(10 25 47 / 6%); transform: translateY(-1px); }
.quiz-option[aria-pressed="true"] { border-color: var(--accent-green); background: #F0F7F1; box-shadow: 0 0 0 2px rgb(65 154 80 / 13%); }
.quiz-option:focus-visible, .quiz-back:focus-visible { outline: 3px solid var(--accent-yellow); outline-offset: 3px; }
.quiz-option-icon { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; border-radius: 12px; background: rgb(65 154 80 / 11%); color: var(--accent-green); }
.quiz-option-icon svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.quiz-option > span:last-child { display: grid; gap: 2px; }
.quiz-option strong { color: var(--dark-blue); font-weight: 700; }
.quiz-option small { color: var(--text-muted); font-size: .8rem; font-weight: 500; }
.quiz-avatar-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quiz-avatar-option { position: relative; min-height: 184px; flex-direction: column; justify-content: center; gap: 8px; padding: 15px; text-align: center; }
.quiz-avatar-option-photo { display: grid; width: 90px; height: 90px; place-items: center; overflow: hidden; border: 3px solid #E5E9EF; border-radius: 50%; background: #EEF1F4; transition: border-color .18s ease; }
.quiz-avatar-option-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 24%; }
.quiz-avatar-option[aria-pressed="true"] .quiz-avatar-option-photo { border-color: var(--accent-green); }
.quiz-avatar-option .quiz-option-icon { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; flex-basis: 34px; border-radius: 10px; }
.quiz-avatar-option .quiz-option-icon svg { width: 19px; height: 19px; }
.quiz-controls, [data-controls-story] { display: grid; gap: 10px; margin-top: 23px; }
.quiz-controls[hidden], [data-controls-story][hidden] { display: none; }
.quiz-button { display: inline-flex; min-height: 54px; align-items: center; justify-content: center; padding: 13px 24px; border: 0; border-radius: 7px; cursor: pointer; font: inherit; font-size: .91rem; font-weight: 800; letter-spacing: .025em; text-align: center; text-decoration: none; text-transform: uppercase; transition: filter .2s ease, transform .2s ease, box-shadow .2s ease; }
.quiz-button:hover:not(:disabled) { filter: brightness(.84); transform: translateY(-1px); box-shadow: 0 8px 22px rgb(0 0 0 / 18%); }
.quiz-button:focus-visible { outline: 3px solid var(--accent-yellow); outline-offset: 3px; }
.quiz-button:disabled { cursor: not-allowed; opacity: .48; }
.quiz-button-primary { background: var(--accent-green); color: var(--white); }
.quiz-button-secondary { border: 1px solid #DDE3E9; background: var(--white); color: var(--dark-blue); }
.quiz-controls .quiz-button, [data-controls-story] .quiz-button { width: 100%; }
.quiz-validation { min-height: 17px; color: #A84A2B; font-size: .78rem; text-align: center; }
.quiz-validation:empty { display: none; }
.quiz-story-screen { display: grid; justify-items: center; padding-top: 10px; text-align: center; }
.quiz-story-screen .quiz-question { margin-bottom: 15px; }
.quiz-story-icon { display: grid; width: 72px; height: 72px; place-items: center; margin-bottom: 18px; border: 1px solid rgb(251 169 51 / 28%); border-radius: 22px; background: #FFF7EA; color: #B86B09; }
.quiz-story-icon svg { width: 37px; height: 37px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.quiz-story-icon-success { border-color: rgb(65 154 80 / 24%); background: #EEF6EF; color: var(--accent-green); }
.quiz-story-copy { max-width: 580px; color: var(--text-muted); font-size: clamp(1rem, 2.2vw, 1.2rem); line-height: 1.7; text-wrap: balance; }
.quiz-story-copy strong, .quiz-result-copy strong { color: var(--primary-blue); font-weight: 800; }
.quiz-result-screen { display: grid; justify-items: center; text-align: center; }
.quiz-result-medal { display: grid; width: 80px; height: 80px; place-items: center; margin-bottom: 12px; border: 4px solid rgb(251 169 51 / 45%); border-radius: 50%; background: #FFF8EC; box-shadow: 0 0 0 7px rgb(251 169 51 / 10%); }
.quiz-result-medal img { width: 53px; height: 53px; }
.quiz-result-score { display: flex; align-items: baseline; gap: 8px; color: var(--accent-green); font-size: 3rem; font-weight: 800; letter-spacing: -.06em; line-height: 1; }
.quiz-result-score small { color: var(--text-muted); font-size: .75rem; font-weight: 800; letter-spacing: .08em; }
.quiz-result-screen .quiz-question { margin: 12px 0 10px; color: var(--accent-green); }
.quiz-result-copy { max-width: 500px; margin-bottom: 25px; color: var(--text-muted); font-size: 1rem; line-height: 1.65; }
.quiz-result-actions { display: grid; width: min(100%, 460px); gap: 11px; }
.quiz-result-actions .quiz-button { width: 100%; }
@keyframes quiz-appear { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }

@media (min-width: 700px) {
    .quiz-content-wrap { margin-top: 33px; }
    .quiz-options:not(.quiz-avatar-options) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .quiz-screen[data-step="3"] .quiz-options { grid-template-columns: 1fr; }
    .quiz-screen[data-step="3"] .quiz-option { min-height: 66px; }
}
@media (min-width: 900px) {
    .quiz-content-wrap { width: min(100% - 48px, 760px); }
    .quiz-options:not(.quiz-avatar-options) { gap: 14px; }
    .quiz-avatar-options { max-width: 560px; margin-inline: auto; }
    .quiz-result-actions { grid-template-columns: 1.15fr .85fr; }
}
@media (max-width: 560px) {
    .quiz-welcome { position: relative; display: grid; min-height: 100svh; place-items: center; overflow: hidden; padding: 100px 24px 84px; background: var(--dark-blue) url('../images/concurso-da-marinharm2-invictus.webp') center / cover no-repeat; color: var(--white); }
    .quiz-welcome { padding: 100px 20px 80px; background-position: 55% center; }
    .quiz-welcome-backdrop { background: linear-gradient(180deg, rgb(5 15 65 / 66%), rgb(5 15 65 / 82%) 45%, rgb(10 25 47 / 89%)); }
    .quiz-welcome-brand { width: 132px; height: 132px; margin-bottom: 15px; }
    .quiz-welcome h1 { margin-bottom: 26px; font-size: clamp(2.2rem, 10vw, 3.1rem); }
    .quiz-welcome-mark { right: 18px; bottom: 18px; width: 48px; height: 48px; }
    .quiz-welcome-mark img { width: 32px; height: 32px; }
    .quiz-topbar { height: 62px; padding-inline: 16px; }
    .quiz-mini-brand { width: 82px; height: 42px; }
    .quiz-progress-area { width: calc(100% - 36px); margin-top: 20px; }
    .quiz-content-wrap { width: calc(100% - 36px); margin-top: 20px; padding-bottom: 34px; }
    .quiz-screen { padding-top: 18px; }
    .quiz-question { margin-bottom: 21px; font-size: clamp(1.7rem, 8vw, 2.25rem); }
    .quiz-option { min-height: 68px; gap: 12px; padding: 12px 14px; font-size: .9rem; }
    .quiz-avatar-option { min-height: 158px; gap: 8px; padding: 13px 8px; font-size: .86rem; }
    .quiz-avatar-option-photo { width: 78px; height: 78px; }
    .quiz-avatar-option .quiz-option-icon { top: 9px; right: 9px; width: 30px; height: 30px; }
    .quiz-option-icon { width: 40px; height: 40px; flex-basis: 40px; }
    .quiz-option-icon svg { width: 22px; height: 22px; }
    .quiz-controls, [data-controls-story] { margin-top: 19px; }
    .quiz-button { min-height: 52px; font-size: .87rem; }
}
@media (prefers-reduced-motion: reduce) {
    .quiz-progress-fill, .quiz-progress-avatar, .quiz-option, .quiz-button, .quiz-avatar-option-photo { transition: none; }
    .quiz-welcome-content, .quiz-screen { animation: none; }
}