/* Reference layout: theme, clock, then full-width answer controls.
   These rules only affect the three screens shown in the supplied captures. */
body:is([data-screen=question],[data-screen=timer],[data-screen=paused],[data-screen=judge]) .play-screen{max-width:620px}
body:is([data-screen=question],[data-screen=timer],[data-screen=paused],[data-screen=judge]) .screen-top{display:flex;margin-bottom:18px;min-height:36px}
body:is([data-screen=question],[data-screen=timer],[data-screen=paused],[data-screen=judge]) .back-button{min-height:36px;padding:6px 0}
.question-layout,.timer-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;max-width:none;margin:0;align-items:stretch}
.question-layout .topic,.timer-layout .topic{min-width:0;text-align:left}
.question-layout .topic h1,.timer-layout .topic h1{font-size:clamp(26px,3.2vw,34px);line-height:1.18;margin:14px 0 6px}
.question-layout .topic-tags,.timer-layout .topic-tags{justify-content:flex-start;gap:5px 16px}
.question-layout .category-badge,.timer-layout .category-badge{border:0;padding-bottom:0}
.question-layout .difficulty-badge,.timer-layout .difficulty-badge{padding-bottom:0}
.question-layout .topic-links{justify-content:space-between;gap:8px}
.question-layout .announcement{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;padding:20px 0 0}
.announcement-heading .eyebrow{display:block;margin-bottom:8px}
.announcement-heading label{font-size:23px}
.target-stepper{margin-top:14px;gap:clamp(24px,8vw,56px)}
.target-stepper input{width:128px;height:88px;font-size:78px}
.question-layout .step-button{width:48px;height:48px;border-radius:14px}
.question-layout #target-caption{margin:4px 0 20px;font-size:14px}
.announcement>.button{justify-content:space-between;min-height:54px}
.timer-layout .topic-compact{position:relative;grid-column:auto;padding-top:0}
.topic-compact .topic-tags{padding-right:40px}
.topic-compact .topic-links{position:absolute;right:-6px;top:-7px}
.topic-compact [data-action=card-info]{width:36px;min-height:36px;padding:8px}
.topic-compact .topic-info-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.timer-zone{gap:6px}
.timer-layout .clock-wrap{width:clamp(140px,24dvh,210px);height:clamp(140px,24dvh,210px)}
.timer-layout .clock-digits{font-size:clamp(60px,10dvh,84px);color:var(--gold)}
.timer-layout .urgent .clock-digits{color:var(--coral)}
.timer-layout .clock-label>span:last-child{font-size:12px;margin-top:6px}
.timer-layout .pause-button{min-height:36px;font-size:14px;padding:6px 0}
.answer-controls{border-top:1px solid var(--line);padding-top:16px}
.answer-tracker{padding-bottom:14px}
.answer-tracker>span{max-width:none;font-size:16px}
.answer-tracker strong{font-size:34px}
.answer-tracker small{font-size:23px}
.count-buttons{gap:12px}
.count-buttons .step-button{width:54px;height:54px;border-radius:14px}
.count-buttons .button{min-height:54px;font-size:17px;gap:12px;padding:12px 16px}
.count-buttons .button svg{display:block}
.finish-button{font-size:14px;min-height:36px;margin-top:6px;padding:6px 0}
.judge-screen{display:flex;max-width:none;gap:16px}
.judge-screen .status-mark{display:inline-flex;width:60px;height:60px;margin:0}
.judge-screen h1{font-size:40px}
.judge-screen .recap-question{margin:0;padding:20px;font-size:25px}
.judge-screen .judge-count{font-size:15px}
.judge-screen .verdict-buttons{margin:2px 0 0;gap:14px}
.judge-screen>.text-button{min-height:38px;padding:6px 0}

/* Browser chrome and the permanent ad reserve reduce the usable height. */
@media(min-height:601px) and (max-height:850px){
  body:is([data-screen=question],[data-screen=timer],[data-screen=paused],[data-screen=judge]) #app{padding:10px 0}
  body:is([data-screen=question],[data-screen=timer],[data-screen=paused],[data-screen=judge]) .screen-top{margin-bottom:10px}
  .question-layout,.timer-layout{gap:12px}
  .question-layout .announcement{padding-top:14px}
  .target-stepper{margin-top:8px}
  .target-stepper input{height:72px;font-size:66px}
  .question-layout #target-caption{margin:2px 0 14px}
  .timer-layout .clock-wrap{width:clamp(122px,23dvh,182px);height:clamp(122px,23dvh,182px)}
  .timer-layout .clock-digits{font-size:clamp(52px,9.5dvh,74px)}
  .answer-controls{padding-top:12px}
  .answer-tracker{padding-bottom:10px}
  .judge-screen{gap:10px}
  .judge-screen .status-mark{width:48px;height:48px}
  .judge-screen .status-mark svg{width:26px;height:26px}
  .judge-screen h1{font-size:34px}
  .judge-screen .recap-question{padding:14px;font-size:22px}
}
@media(max-width:559px) and (max-height:700px){
  body:is([data-screen=question],[data-screen=timer],[data-screen=paused],[data-screen=judge]) #app{padding:6px 0}
  body:is([data-screen=question],[data-screen=timer],[data-screen=paused],[data-screen=judge]) .screen-top{margin-bottom:6px;min-height:30px}
  body:is([data-screen=question],[data-screen=timer],[data-screen=paused],[data-screen=judge]) .back-button{min-height:30px;padding:3px 0}
  .question-layout,.timer-layout{gap:8px}
  .question-layout .topic h1,.timer-layout .topic h1{font-size:24px;margin:8px 0 2px;line-height:1.14}
  .question-layout .topic-links .text-button{min-height:32px;padding:5px 0}
  .question-layout .announcement{padding-top:10px}
  .announcement-heading .eyebrow{font-size:11px;margin-bottom:4px}
  .announcement-heading label{font-size:19px}
  .target-stepper{margin-top:4px;gap:26px}
  .target-stepper input{height:56px;font-size:52px}
  .question-layout .step-button{width:42px;height:42px}
  .question-layout #target-caption{font-size:13px;margin:0 0 10px}
  .announcement>.button{min-height:44px}
  .timer-layout .clock-wrap{width:126px;height:126px}
  .timer-layout .clock-digits{font-size:56px}
  .timer-layout .clock-label>span:last-child{font-size:11px;margin-top:3px}
  .timer-zone{gap:0}
  .timer-layout .pause-button{min-height:30px;font-size:13px;padding:4px 0}
  .answer-controls{padding-top:8px}
  .answer-tracker{padding-bottom:8px}
  .answer-tracker>span{font-size:14px}
  .answer-tracker strong{font-size:28px}
  .answer-tracker small{font-size:20px}
  .count-buttons .step-button{width:44px;height:44px}
  .count-buttons .button{min-height:44px;font-size:16px;padding:10px 12px}
  .finish-button{min-height:30px;margin-top:4px;padding:4px 0}
  .judge-screen{gap:8px}
  .judge-screen .status-mark{width:38px;height:38px}
  .judge-screen .status-mark svg{width:22px;height:22px}
  .judge-screen h1{font-size:30px}
  .judge-screen .recap-question{font-size:20px;padding:12px}
  .judge-screen .judge-count{font-size:14px;line-height:1.35}
  .judge-screen>.text-button{min-height:30px;padding:4px 0}
}
@media(max-width:559px) and (max-height:590px){
  .question-layout .topic h1,.timer-layout .topic h1{font-size:22px}
  .question-layout .topic-tags,.timer-layout .topic-tags{gap:2px 10px}
  .question-layout .announcement{padding-top:8px}
  .target-stepper input{height:48px;font-size:46px}
  .question-layout #target-caption{margin-bottom:8px}
  .timer-layout{gap:4px}
  .timer-layout .topic h1{font-size:21px;line-height:1.1;margin:6px 0 0}
  .timer-layout .clock-wrap{width:96px;height:96px}
  .timer-layout .timer-zone{display:grid;grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr);align-items:center;gap:8px}
  .timer-layout .clock-wrap{grid-column:2}
  .timer-layout .pause-button{grid-column:3;flex-direction:column;gap:2px;line-height:1.25;min-width:0}
  .timer-layout .clock-digits{font-size:42px}
  .timer-layout .clock-label>span:last-child{font-size:10px}
  .timer-layout .answer-controls{padding-top:6px}
  .timer-layout .answer-tracker{padding-bottom:6px}
  .timer-layout .answer-tracker strong{font-size:24px}
  .timer-layout .finish-button{min-height:28px;padding:3px 0}
  .judge-screen{gap:6px}
  .judge-screen .status-mark{display:none}
  .judge-screen h1{font-size:28px}
  .judge-screen .recap-question{font-size:18px;padding:10px}
}
@media(min-width:560px) and (min-height:601px) and (max-height:850px){
  .timer-layout{gap:10px}
  .timer-layout .clock-wrap{width:146px;height:146px}
  .timer-layout .clock-digits{font-size:64px}
  .timer-layout .topic h1{font-size:32px}
}

/* Short landscape keeps the same reading order across two/three columns. */
@media(min-width:560px) and (max-height:600px){
  body:is([data-screen=question],[data-screen=timer],[data-screen=paused],[data-screen=judge]) .play-screen{max-width:960px}
  body:is([data-screen=question],[data-screen=timer],[data-screen=paused],[data-screen=judge]) .screen-top{margin-bottom:4px;min-height:28px}
  body:is([data-screen=question],[data-screen=timer],[data-screen=paused],[data-screen=judge]) .back-button{min-height:28px;padding:2px 0}
  .question-layout{grid-template-columns:1.1fr 1fr;gap:24px;align-items:center}
  .question-layout .topic h1,.timer-layout .topic h1{font-size:23px;line-height:1.12;margin:8px 0 2px}
  .question-layout .topic-links{gap:4px}
  .question-layout .topic-links .text-button{min-height:30px;padding:4px 0}
  .question-layout .announcement{border-top:0;border-left:1px solid var(--line);padding:0 0 0 20px}
  .announcement-heading .eyebrow{font-size:11px;margin-bottom:3px}
  .announcement-heading label{font-size:18px}
  .target-stepper{margin-top:2px;gap:12px}
  .target-stepper input{height:46px;font-size:42px;width:80px}
  .question-layout .step-button{width:36px;height:36px}
  .question-layout #target-caption{margin:0 0 7px;font-size:13px}
  .announcement>.button{min-height:40px;font-size:15px;padding:8px 12px}
  .timer-layout{grid-template-columns:minmax(0,1.15fr) 116px minmax(0,1fr);gap:18px;align-items:center}
  .timer-layout .topic-compact{grid-column:auto}
  .timer-layout .topic-tags{padding-right:0}
  .topic-compact .topic-links{position:static;justify-content:flex-start}
  .topic-compact [data-action=card-info]{width:auto;min-height:28px;padding:3px 0}
  .topic-compact .topic-info-label{position:static;width:auto;height:auto;margin:0;clip-path:none;white-space:normal}
  .timer-layout .clock-wrap{width:112px;height:112px}
  .timer-layout .clock-digits{font-size:48px}
  .timer-layout .clock-label>span:last-child{font-size:10px;margin-top:4px}
  .timer-zone{gap:2px}
  .timer-layout .pause-button{min-height:30px;font-size:13px;padding:3px 0}
  .answer-controls{border-top:0;border-left:1px solid var(--line);padding:0 0 0 16px}
  .answer-tracker{padding-bottom:10px;gap:6px}
  .answer-tracker>span{font-size:14px;max-width:100px}
  .answer-tracker strong{font-size:28px}
  .answer-tracker small{font-size:18px}
  .count-buttons{gap:8px}
  .count-buttons .step-button{width:38px;height:42px;border-radius:12px}
  .count-buttons .button{min-height:42px;font-size:15px;padding:8px;gap:6px}
  .finish-button{min-height:30px;margin-top:6px;padding:3px 0;font-size:13px}
  .judge-screen{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto auto;gap:6px 26px;align-items:center}
  .judge-screen .status-mark{display:none}
  .judge-screen>.eyebrow{grid-column:1;grid-row:1}
  .judge-screen>h1{grid-column:1;grid-row:2;font-size:30px}
  .judge-screen>.judge-target{grid-column:1;grid-row:3}
  .judge-screen>.recap-question{grid-column:1;grid-row:4;font-size:19px;padding:10px}
  .judge-screen>.judge-count{grid-column:2;grid-row:1/3;font-size:14px}
  .judge-screen>.verdict-buttons{grid-column:2;grid-row:3;gap:10px;margin:0}
  .judge-screen>.text-button{grid-column:2;grid-row:4;min-height:30px;padding:3px 0}
}
@media(min-width:560px) and (max-height:360px){
  body:is([data-screen=question],[data-screen=timer],[data-screen=paused],[data-screen=judge]) .screen-top{min-height:24px;margin-bottom:3px}
  body:is([data-screen=question],[data-screen=timer],[data-screen=paused],[data-screen=judge]) .back-button{min-height:24px;padding:0}
  .question-layout{gap:16px}
  .question-layout .topic h1,.timer-layout .topic h1{font-size:20px}
  .question-layout .announcement{padding-left:14px}
  .announcement-heading .eyebrow{display:none}
  .announcement-heading label{font-size:16px}
  .target-stepper input{height:40px;font-size:36px}
  .question-layout #target-caption{font-size:12px;margin-bottom:5px}
  .announcement>.button{min-height:34px;font-size:14px;padding:6px 10px}
  .timer-layout{grid-template-columns:minmax(0,1fr) 90px minmax(0,1fr);gap:12px}
  .timer-layout .clock-wrap{width:90px;height:90px}
  .timer-layout .clock-digits{font-size:38px}
  .timer-layout .pause-button{font-size:12px}
  .answer-controls{padding-left:10px}
  .count-buttons{gap:6px}
  .count-buttons .step-button{width:32px;height:38px}
  .count-buttons .button{min-height:38px;font-size:14px;padding:7px;gap:4px}
  .count-buttons .button svg{width:16px;height:16px}
  .answer-tracker{padding-bottom:8px}
  .answer-tracker>span{font-size:13px}
  .judge-screen{gap:4px 18px}
  .judge-screen>h1{font-size:26px}
  .judge-screen>.recap-question{font-size:16px;padding:7px}
}