/* Give the mascots their own side space on desktop and landscape tablets. */
@media(min-width:1000px) and (orientation:landscape){
  .game{--mascot-lane:clamp(180px,22vw,460px);width:100%;max-width:none;padding-left:var(--mascot-lane);padding-right:var(--mascot-lane);position:relative;grid-template-rows:48px minmax(74px,14%) minmax(0,1fr) 64px}
  .battle-team>svg{position:absolute;top:16%;width:calc(var(--mascot-lane) - 8px);height:72%;max-height:none;pointer-events:none;filter:drop-shadow(0 10px 7px #558f9820)}
  .mint-team>svg{left:4px}.gold-team>svg{right:4px}
  .battle-team{gap:0}.battle-teams{gap:20px;padding:0 8px}
  .game .question-panel{padding-left:16px;padding-right:16px}
}
@media(min-width:1000px) and (orientation:landscape) and (max-height:680px){
  .game{grid-template-rows:44px 64px minmax(0,1fr) 54px;gap:6px}
}
/* Answer ownership stays beside the corresponding mascot throughout the turn. */
.team-turn{position:absolute;z-index:4;background:#fffef0;border:3px solid #76cdb0;border-radius:22px;padding:12px 10px;text-align:center;box-shadow:0 5px 0 #67aa9026;color:#2f7960;pointer-events:none;overflow-wrap:anywhere}.team-turn strong{display:block;font-size:clamp(19px,2vw,29px);line-height:1.25}.team-turn span{display:block;font-size:clamp(12px,1.2vw,16px);line-height:1.45;margin-top:6px}.team-turn:after{content:'';position:absolute;bottom:-11px;left:45%;width:16px;height:16px;background:#fffef0;border-right:3px solid #76cdb0;border-bottom:3px solid #76cdb0;transform:rotate(45deg)}.gold-team .team-turn{border-color:#eac16b;color:#94681e}.gold-team .team-turn:after{border-color:#eac16b}.team-turn.is-waiting{background:#f3f8fb;border-color:#c7dce5;color:#708a95;box-shadow:none}.team-turn.is-waiting:after{background:#f3f8fb;border-color:#c7dce5}.team-turn.is-waiting strong{font-size:clamp(16px,1.5vw,22px)}.battle-team.is-answering>svg{filter:drop-shadow(0 0 15px #ffdb69aa)}
@media(min-width:1000px) and (orientation:landscape){.team-turn{top:13%;width:calc(var(--mascot-lane) - 26px)}.mint-team .team-turn{left:13px}.gold-team .team-turn{right:13px}}
@media(max-width:999px),(orientation:portrait){.battle-team{position:relative}.team-turn{left:0;bottom:-6px;padding:5px 8px;max-width:100%;border-width:2px;border-radius:12px}.gold-team .team-turn{left:auto;right:0}.team-turn strong,.team-turn.is-waiting strong{font-size:14px}.team-turn span,.team-turn:after{display:none}.team-turn.is-waiting{display:none}}
@media(min-width:1000px) and (orientation:landscape) and (max-height:680px){.team-turn{top:12%;padding:8px}.team-turn strong{font-size:20px}.team-turn span{font-size:12px;margin-top:3px}}

/* The locked buzzer remains vivid so answer ownership is immediately visible. */
.buzz-controls .buzz.is-answering:disabled{opacity:1;border:3px solid #fffdf0;background:linear-gradient(135deg,#baffdd,#65d9ad);color:#174d3b;box-shadow:inset 0 0 0 2px #239669,0 4px 0 #29976f,0 0 0 3px #52cba4,0 0 22px #58dba780;text-shadow:0 1px 0 #ffffff80}
.buzz-controls .gold-buzz.is-answering:disabled{background:linear-gradient(135deg,#fff0ab,#ffc44f);color:#70450d;box-shadow:inset 0 0 0 2px #cb8a1e,0 4px 0 #cb8a1e,0 0 0 3px #ffc653,0 0 22px #ffc65380}
.buzz-controls .buzz.is-waiting:disabled{opacity:.48;box-shadow:none}
@media(max-width:700px){.buzz-controls .buzz.is-answering,.buzz-controls .buzz.is-waiting{font-size:clamp(13px,2.7vw,19px)}}

/* A dedicated header row keeps the answer clock clear of the word and choices. */
.question-status-row{display:flex;justify-content:center;align-items:center;gap:22px;min-width:0;height:100%}
.question-panel.has-answer-clock{grid-template-rows:76px minmax(38px,auto) minmax(100px,1fr) auto 48px}
.has-answer-clock .game-status{font-size:clamp(16px,1.5vw,22px);font-weight:800;color:var(--ink);line-height:1.3}
.answer-clock{position:relative;flex:0 0 auto;display:flex;align-items:baseline;justify-content:center;gap:3px;width:88px;height:62px;margin-top:7px;padding:3px 6px;background:linear-gradient(#fff7a8,#ffe25b);border:4px solid #eaa324;border-radius:26px;box-shadow:0 4px 0 #d4881d;color:#683707;font-variant-numeric:tabular-nums;isolation:isolate}
.clock-number{font-family:system-ui,sans-serif;font-size:38px;font-weight:950;line-height:1.15}.clock-unit{font-size:14px;font-weight:800}
.clock-bell{position:absolute;top:-12px;width:25px;height:13px;border-radius:18px 18px 5px 5px;background:#ffca3c;border:2px solid #d78a1b;z-index:-1}.clock-bell-left{left:-3px;transform:rotate(-28deg)}.clock-bell-right{right:-3px;transform:rotate(28deg)}
.answer-clock.is-urgent{background:linear-gradient(#ffe7a0,#ffad67);border-color:#ea652c;box-shadow:0 4px 0 #c44a20,0 0 0 4px #ff9c4733;color:#942808;animation:clock-nudge .65s ease-in-out infinite}
.answer-clock.is-urgent .clock-bell{background:#ffad50;border-color:#e56429}.answer-clock.is-paused{filter:grayscale(.7);animation:none}
@keyframes clock-nudge{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.reduced .answer-clock{animation:none}
@media(prefers-reduced-motion:reduce){.answer-clock{animation:none!important}}
@media(max-height:680px){.question-panel.has-answer-clock{grid-template-rows:62px minmax(30px,auto) minmax(82px,1fr) auto 40px}.answer-clock{height:50px;width:76px;border-radius:21px}.clock-number{font-size:30px}.clock-unit{font-size:12px}}
@media(max-width:600px){.question-status-row{gap:12px}.has-answer-clock .game-status{font-size:15px;max-width:60%}}

/* Correct answers keep a bright, readable success color across every theme. */
.question-panel .answer-option.correct,.question-panel .answer-option.correct:disabled{background:linear-gradient(135deg,#fff59a 0%,#dbf776 48%,#a4ed85 100%);border-color:#369b43;color:#194d28;opacity:1;font-weight:850;box-shadow:inset 0 0 0 2px #ffffffb3,0 0 0 2px #77ce4a,0 3px 12px #83c93638}
.question-panel .answer-option.correct .answer-badge{width:fit-content;max-width:100%;margin:6px auto 0;padding:3px 12px;border-radius:999px;background:#fffde6;color:#226330;border:1px solid #7bbe54;font-weight:900}
@media(max-height:680px){.question-panel .answer-option.correct .answer-badge{margin-top:2px;padding:1px 8px}}

/* Compact tablet layouts reserve room for answers and controls. */
.question-panel .answer-option{min-width:0;overflow-wrap:anywhere;line-height:1.25}
.question-panel .answer-feedback{margin:0;line-height:1.25}
@media(max-height:760px){.question-panel.has-answer-clock{grid-template-rows:58px minmax(30px,auto) minmax(82px,1fr) auto 42px;gap:4px}.answer-clock{height:48px;width:74px;border-radius:20px}.clock-number{font-size:29px}.clock-unit{font-size:12px}.question-panel .review-answer{font-size:18px}.question-panel .answer-option{font-size:clamp(16px,2.8vh,21px)}}
@media(max-width:1100px) and (orientation:portrait){.game{width:100%;padding-left:16px;padding-right:16px}.buzz-controls{gap:12px}.question-panel .answer-option{font-size:clamp(17px,2.6vw,23px)}}

.sound-tests{flex-wrap:wrap}.sound-tests .soft-button{min-width:120px}