/* Scoped layout scaffolding. Questions enter only after individual review. */
main.layout-rollout[data-layout]{display:flex;flex-direction:column;width:min(100%,1480px);padding:22px 24px 28px;min-height:100svh}
main.layout-rollout[data-layout]>.round-stats{order:-10;flex:0 0 auto;margin:0 0 18px auto}
main.layout-rollout[data-layout]>.rollout-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.22fr);align-items:center;align-content:center;gap:22px 36px;flex:1;min-width:0;width:100%}
main.layout-rollout[data-layout]:has(>.feedback:not([hidden])){min-height:0}
main.layout-rollout[data-layout]>.rollout-stage>.rollout-question{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-width:0;width:100%}
main.layout-rollout[data-layout] .rollout-question>.reference{width:100%;max-width:var(--rollout-reference-width,500px);height:auto;max-height:var(--rollout-reference-height,min(52svh,390px));object-fit:contain;margin:0}
main.layout-rollout[data-layout] .rollout-question>.asker{grid-template-columns:74px minmax(0,1fr);gap:10px;max-width:690px;width:100%;margin:0;order:var(--rollout-asker-order,0)}
main.layout-rollout[data-layout] .rollout-question .pati{width:74px;height:86px}
main.layout-rollout[data-layout] .rollout-question h1{font-size:23px;line-height:1.4;padding:14px 17px}
main.layout-rollout[data-layout] .rollout-stage>fieldset{width:100%;min-width:0;margin:0}
main.layout-rollout[data-layout] fieldset .choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;max-width:var(--rollout-choices-width,900px);margin:auto}
main.layout-rollout[data-layout] fieldset .choices>.choice{grid-column:auto;width:100%;min-width:0;justify-self:stretch;padding:8px}
main.layout-rollout[data-layout] fieldset .choices>.choice:last-child:nth-child(odd){grid-column:1/-1;width:calc(50% - 6px);justify-self:center}
main.layout-rollout[data-layout] fieldset .choice>img{display:block;width:100%;height:auto;min-height:0;max-height:var(--rollout-choice-height,min(24svh,200px));object-fit:contain;margin-top:5px}
main.layout-rollout[data-layout] .word-answer,main.layout-rollout[data-layout] .answer-text{display:block;font-size:24px;line-height:1.5;font-weight:600;padding:12px 2px;text-align:center;letter-spacing:normal;overflow-wrap:break-word}
main.layout-rollout[data-choice-kind=number] .word-answer,main.layout-rollout[data-choice-kind=number] .answer-text{font-size:30px}
main.layout-rollout[data-layout] .rollout-question>.visual-sequence{width:100%;max-width:900px;margin:0}
main.layout-rollout[data-layout] .rollout-question>.question-context{width:100%;max-width:650px;margin:0;font-size:25px;padding:14px;line-height:1.6}
main.layout-rollout[data-layout] .rollout-question>.cipher-puzzle{width:100%;margin:0;max-width:520px}
main.layout-rollout[data-layout] .rollout-question>.shopping-reference{width:200px;max-width:100%;margin:0}
main.layout-rollout[data-layout] .choices .atlas-frame{width:100%;max-width:260px;margin:5px auto 0}
main.layout-rollout[data-layout]>.feedback{width:min(100%,760px);margin:22px auto 0}
main.layout-rollout[data-layout=solo]>.rollout-stage,main.layout-rollout[data-layout=wide]>.rollout-stage{grid-template-columns:minmax(0,1fr);gap:16px}
main.layout-rollout[data-layout=solo] .rollout-stage>fieldset,main.layout-rollout[data-layout=wide] .rollout-stage>fieldset{max-width:1100px;justify-self:center}
main.layout-rollout[data-layout=wide] .rollout-question>.asker{max-width:800px}
@media(min-width:1100px){
 main.layout-rollout[data-layout]:not([data-choice-kind=text]) fieldset .choices:has(>.choice:nth-child(5)){grid-template-columns:repeat(6,minmax(0,1fr))}
 main.layout-rollout[data-layout]:not([data-choice-kind=text]) fieldset .choices:has(>.choice:nth-child(5))>.choice{grid-column:span 2;width:100%}
 main.layout-rollout[data-layout]:not([data-choice-kind=text]) fieldset .choices:has(>.choice:nth-child(5))>.choice:nth-child(4){grid-column:2/span 2}
 main.layout-rollout[data-layout]:not([data-choice-kind=text]) fieldset .choices:has(>.choice:nth-child(5))>.choice:last-child{grid-column:4/span 2}
}
@media(min-width:700px) and (orientation:landscape){
 main.layout-rollout[data-layout=solo] fieldset .choices,main.layout-rollout[data-layout=wide] fieldset .choices{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1100px}
 main.layout-rollout[data-layout=wide] .rollout-question>.visual-sequence{max-width:800px}
 main.layout-rollout[data-layout=wide] fieldset .choice>img{max-height:150px}
 main.layout-rollout[data-layout=solo] .story-frame{max-width:230px;margin:5px auto 0}
}
@media(min-width:700px) and (max-width:1099px) and (orientation:landscape){
 main.layout-rollout[data-layout] fieldset .choice>img{max-height:var(--rollout-choice-height,min(21svh,calc((100svh - 260px)/3)))}
}
@media(min-width:700px) and (max-width:1099px) and (orientation:portrait){
 main.layout-rollout[data-layout]{padding:16px 24px 28px;min-height:0}
 main.layout-rollout[data-layout]>.rollout-stage{grid-template-columns:minmax(0,1fr);gap:14px;flex:0 0 auto}
 main.layout-rollout[data-layout] .rollout-question>.reference{max-width:var(--rollout-portrait-reference-width,400px);max-height:var(--rollout-portrait-reference-height,300px)}
 main.layout-rollout[data-layout] .rollout-question{gap:12px}
 main.layout-rollout[data-layout] fieldset .choice>img{max-height:var(--rollout-portrait-choice-height,160px)}
 main.layout-rollout[data-layout] fieldset .choices:has(>.choice:nth-child(5)){grid-template-columns:repeat(6,minmax(0,1fr));max-width:850px}
 main.layout-rollout[data-layout] fieldset .choices:has(>.choice:nth-child(5))>.choice{grid-column:span 2;width:100%}
 main.layout-rollout[data-layout] fieldset .choices:has(>.choice:nth-child(5))>.choice:nth-child(4){grid-column:2/span 2}
 main.layout-rollout[data-layout] fieldset .choices:has(>.choice:nth-child(5))>.choice:last-child{grid-column:4/span 2}
 main.layout-rollout[data-layout=solo] fieldset .choices{max-width:620px}
}
@media(max-width:699px){
 main.layout-rollout[data-layout]{padding:16px 14px 24px;min-height:0;width:100%}
 main.layout-rollout[data-layout]>.rollout-stage{display:flex;flex-direction:column;gap:16px;flex:0 0 auto}
 main.layout-rollout[data-layout]>.round-stats{margin-bottom:14px}
 main.layout-rollout[data-layout] .rollout-stage>.rollout-question{gap:12px}
 main.layout-rollout[data-layout] .rollout-question>.reference{max-width:var(--rollout-phone-reference-width,360px);max-height:var(--rollout-phone-reference-height,280px)}
 main.layout-rollout[data-layout] .rollout-question>.asker{grid-template-columns:60px minmax(0,1fr);gap:9px;max-width:440px}
 main.layout-rollout[data-layout] .rollout-question .pati{width:60px;height:74px}
 main.layout-rollout[data-layout] .rollout-question h1{font-size:20px;line-height:1.4;padding:12px 13px}
 main.layout-rollout[data-layout] fieldset .choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;max-width:440px}
 main.layout-rollout[data-layout] fieldset .choices>.choice:last-child:nth-child(odd){width:calc(50% - 5.5px)}
 main.layout-rollout[data-layout] fieldset .choice>img{max-height:var(--rollout-phone-choice-height,190px)}
 main.layout-rollout[data-layout] .word-answer,main.layout-rollout[data-layout] .answer-text{font-size:22px}
 main.layout-rollout[data-choice-kind=number] .word-answer,main.layout-rollout[data-choice-kind=number] .answer-text{font-size:28px}
 main.layout-rollout[data-layout] .rollout-question>.question-context{font-size:22px;padding:12px}
 /* Q18 has sentence-length answers. Keep words intact on narrow screens. */
 main.layout-rollout[data-question="18"] fieldset .choices{grid-template-columns:minmax(0,1fr)}
 main.layout-rollout[data-question="18"] fieldset .choices>.choice{width:100%;grid-column:1}
 main.layout-rollout[data-question="18"] .word-answer,main.layout-rollout[data-question="18"] .answer-text{overflow-wrap:normal;word-break:normal}
}