* { box-sizing: border-box; }
html { font-family: Goldplay, system-ui, sans-serif; background: #521206; color: white; }
body { margin: 0; }
[hidden] { display: none !important; }
.visually-hidden, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link:focus { position: fixed; z-index: 4; top: .5rem; left: .5rem; background: white; color: #521206; padding: .75rem; }
:focus-visible { outline: 3px solid #f58e7d; outline-offset: 3px; }
.participant-main { width: min(100%, 28rem); margin-inline: auto; min-height: 100dvh; display: flex; flex-direction: column; }
.participant-main h1, .participant-main h2, .participant-main p, .answer-text, footer { overflow-wrap: anywhere; }
.utility { position: relative; z-index: 2; text-align: center; font-size: .75rem; }
.utility:has(#connection-status[data-tone="ready"]):has(#preview-notice[hidden]) { position: absolute; right: .5rem; top: .5rem; }
#connection-status { display: inline-block; background: #521206; border-radius: .5rem; padding: .3rem .5rem; }
#preview-notice { margin: 0; padding: .45rem; background: #fed1b3; color: #521206; font-weight: 700; }
.stage-image { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.title-card { position: relative; margin: -1.1875rem 1rem 0; min-height: 7.8125rem; border-radius: 1.25rem; background: #f58e7d; color: #521206; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 1rem; }
.participant-header:has(.stage-image[hidden]) .title-card { margin-top: 2rem; }
.title-card h1, .title-card p { margin: 0; }
.title-card h1 { max-width: 18rem; font-size: 1.5rem; line-height: 1.05; font-weight: 900; }
.title-card p { font-weight: 700; font-size: 1.25rem; }
.title-card #welcome-subtitle { max-width: 17rem; margin-top: .5rem; font-size: 1rem; line-height: 1.25; font-weight: 500; }
.stage-copy strong { display: block; font-size: 1.25rem; font-weight: 900; }
.stage-copy strong + span { display: block; margin-top: 1.25rem; }
.stage-copy { max-width: 22rem; margin: 2rem auto; padding: 0 1rem; text-align: center; font-size: 1.125rem; line-height: 1.3; }
.question-card { margin-top: auto; text-align: center; }
.question-card h2 { margin: 0; font-size: 1rem; line-height: 1.35; font-weight: 500; }
.question-meta { display: flex; justify-content: center; gap: 1rem; color: #fce8e5; font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.participant-main:not(.question-view) .question-card h2 { background: #fed1b3; color: #521206; font-weight: 700; padding: 1.25rem 1rem; }
.participant-main:not(.question-view) .question-meta { display: none; }
.participant-main.question-view .participant-header { display: none; }
.question-view .question-card { margin: 0 auto; width: 100%; max-width: 32rem; padding: 3.5rem 1rem 0; }
.question-view .question-meta { margin-bottom: 1.25rem; }
.question-view h2 { max-width: 22rem; margin: 0 auto 2.5rem; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.answer-list { display: grid; gap: .5rem; }
.answer-option { display: flex; align-items: center; gap: .65rem; position: relative; min-height: 6.125rem; padding: .7rem; border: 2px solid #d4d4d4; border-radius: .625rem; background: #f5f5f5; color: #171717; text-align: left; line-height: 1.3; cursor: pointer; }
.answer-option:has(input:checked) { border: 3px solid #f58e7d; padding: calc(.7rem - 1px); }
.answer-option:has(input:focus-visible) { outline: 3px solid #f58e7d; outline-offset: 3px; }
.answer-option input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.badge { flex: 0 0 2.5625rem; width: 2.5625rem; height: 2.5625rem; display: grid; place-items: center; background: url('/assets/figma/celular/option-badge.svg') center / contain no-repeat; color: #521206; font-size: 1.5rem; font-weight: 700; }
.answer-text { flex: 1; min-width: 0; }
.answer-result { display: block; font-weight: 700; margin-top: .25rem; }
.answer-option.correct { background: #08a900; border-color: #08a900; color: #102510; }
.answer-option.incorrect { background: #f20000; border-color: #f20000; color: #070707; }
.answer-list .answer-option.correct, .answer-list .answer-option.incorrect { border: 3px solid white; padding: calc(.7rem - 1px); }
.answer-option.correct .badge { background-image: url('/assets/figma/celular/feedback-badge.svg'); }
#submit-answer { display: block; width: min(100%, 13rem); min-height: 3.125rem; margin: 2.5rem auto 0; border: 0; border-radius: .625rem; background: #f58e7d; color: #521206; font: 700 1rem Goldplay, system-ui, sans-serif; cursor: pointer; }
#submit-answer:disabled { opacity: .7; cursor: default; }
#feedback { margin: 1rem auto; max-width: 32rem; padding: 0 1rem; line-height: 1.35; }
#feedback:empty { display: none; }
footer { margin-top: auto; padding: 1.125rem 1rem; text-align: center; font-size: .65rem; line-height: 1.3; }