/* The same focused play area as the character games, for every quiz topic.
   Explanations remain available in the final review. Enlarged text may flow. */
@media (max-width:760px), (max-width:1000px) and (max-height:500px) {
  #mha-familienkarte[data-entry=false][data-cover=open]:has(.mha-quiz-round){--quiz-nav-space:84px;--quiz-inset:calc(8px + env(safe-area-inset-top));padding:var(--quiz-inset) 4px calc(4px + var(--quiz-nav-space) + env(safe-area-inset-bottom));min-height:100dvh}
  #mha-familienkarte:has(.mha-quiz-round) .mha-ink-defs{position:absolute}
  #mha-familienkarte:has(.mha-quiz-round) :is(.mha-masthead,.mha-sidebar,.mha-heading-row,.mha-footnote){display:none}
  #mha-familienkarte:has(.mha-quiz-round) .mha-frame{display:block;min-height:0}
  #mha-familienkarte:has(.mha-quiz-round) .mha-main{padding:0 8px;min-height:0;overflow-anchor:none}
  #mha-familienkarte .mha-quiz-round{display:flex;flex-direction:column;gap:6px;height:calc(100dvh - var(--quiz-nav-space) - var(--quiz-inset) - env(safe-area-inset-bottom) - 8px);min-height:440px;max-height:none;overflow:visible;overflow-anchor:none}
  #mha-familienkarte .mha-quiz-top{flex:none;flex-wrap:nowrap;gap:8px;font-size:12px;line-height:1.3;min-height:22px}
  #mha-familienkarte .mha-quiz-top>span{min-width:0}
  #mha-familienkarte .mha-quiz-round progress{flex:none;height:4px;margin:0}
  #mha-familienkarte .mha-quiz-round-meta{flex:none;font-size:10px;line-height:1.3;gap:5px}
  #mha-familienkarte .mha-quiz-round-meta>span:last-child{white-space:nowrap}
  #mha-familienkarte .mha-quiz-level{padding:3px 7px}
  #mha-familienkarte .mha-quiz-round .mha-quiz-scene{display:flex;flex:1;flex-direction:column;justify-content:center;gap:0;min-height:90px;max-height:none;height:auto;margin:0;padding:8px;border-radius:10px}
  #mha-familienkarte .mha-quiz-round .mha-quiz-scene.has-map{position:relative;min-height:140px;padding:6px 6px 44px}
  #mha-familienkarte .mha-quiz-round .mha-quiz-scene>div{position:relative;flex:1;width:100%;height:100%;min-height:0;max-height:none}
  #mha-familienkarte .mha-quiz-round .mha-quiz-scene :is(.mha-quiz-flag,.mha-quiz-map){position:absolute;inset:0;width:100%;height:100%;max-height:100%;object-fit:contain}
  #mha-familienkarte .mha-quiz-round .mha-quiz-scene:not(.has-map):not(.has-flag),
  #mha-familienkarte .mha-quiz-round .mha-quiz-scene p{display:none}
  #mha-familienkarte .mha-quiz-map-zoom{position:absolute;bottom:0;align-self:center;min-height:44px;padding:8px 12px}
  #mha-familienkarte .mha-quiz-round h2{flex:none;margin:4px 0;font-size:clamp(20px,5.6vw,26px);line-height:1.2}
  #mha-familienkarte .mha-quiz-round.is-text-question h2{flex:1;display:flex;align-items:center}
  #mha-familienkarte .mha-quiz-answers{flex:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  #mha-familienkarte .mha-quiz-answers button{position:relative;flex-wrap:nowrap;min-height:64px;gap:0;padding:10px 22px 10px 10px;border-width:2px;font-size:14px;line-height:1.3}
  #mha-familienkarte .mha-quiz-answers.has-long-answers{grid-template-columns:1fr}
  #mha-familienkarte .mha-quiz-answers.has-long-answers button{min-height:44px;padding-block:6px}
  #mha-familienkarte .mha-quiz-answers button>.mha-quiz-letter{display:none}
  #mha-familienkarte .mha-quiz-answers button:disabled{opacity:1}
  #mha-familienkarte .mha-quiz-answers button b{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  #mha-familienkarte .mha-quiz-answers :is(.is-correct,.is-wrong)::after{position:absolute;right:5px;font-size:16px;font-weight:700;content:'✓'}
  #mha-familienkarte .mha-quiz-answers .is-wrong::after{content:'×'}
  #mha-familienkarte .mha-quiz-answers.has-image-choices button{min-height:82px}
  #mha-familienkarte .mha-quiz-answers.has-image-choices img{width:100%;height:60px;object-fit:contain}
  #mha-familienkarte .mha-quiz-order{flex:none;gap:4px;margin:0;grid-template-rows:repeat(5,minmax(46px,auto))}
  #mha-familienkarte .mha-quiz-order>li{grid-template-columns:18px minmax(0,1fr) auto;gap:5px;min-height:46px;padding:0 4px;font-size:12px;line-height:1.25}
  #mha-familienkarte .mha-quiz-order>li>div{flex-direction:row;gap:3px}
  #mha-familienkarte .mha-quiz-order .mha-button{width:44px;height:44px;min-height:44px;padding:3px}
  #mha-familienkarte .mha-quiz-round [data-quiz-submit-order]{flex:none;min-height:44px;padding:6px 10px;font-size:12px}
  #mha-familienkarte .mha-quiz-footer{display:flex;flex:none;align-items:center;gap:8px;min-height:44px}
  #mha-familienkarte .mha-quiz-footer>.mha-small-note{flex:1;min-width:0;margin:0;font-size:10px;line-height:1.3}
  #mha-familienkarte .mha-quiz-round.is-order{gap:4px}
  #mha-familienkarte .is-order .mha-quiz-footer{display:grid;grid-template-columns:1fr 1fr;gap:4px 6px}
  #mha-familienkarte .is-order .mha-quiz-footer>.mha-small-note{grid-row:1;grid-column:1/-1;min-height:26px;display:flex;align-items:center}
  #mha-familienkarte .is-order .mha-quiz-footer>[data-quiz-submit-order]{grid-row:2;grid-column:1}
  #mha-familienkarte .is-order .mha-quiz-exit{grid-row:2;grid-column:2}
  #mha-familienkarte .is-order .mha-quiz-exit>.mha-button{width:100%}
  #mha-familienkarte .mha-quiz-explanation{display:none}
  #mha-familienkarte .mha-quiz-exit{flex-shrink:0;margin:0;padding:0;border:0;gap:0}
  #mha-familienkarte .mha-quiz-exit>.mha-button{min-height:44px;padding:8px;font-size:10px}
  #mha-familienkarte .mha-quiz-exit small{display:none}
}
@media (max-width:1000px) and (max-height:500px) {
  #mha-familienkarte[data-entry=false][data-cover=open]:has(.mha-quiz-round){--quiz-nav-space:0px}
  #mha-familienkarte[data-entry=false][data-cover=open]:has(.mha-quiz-round) .mha-mobile-nav{display:none}
}
@media (max-width:1000px) and (max-height:500px) and (orientation:landscape) {
  #mha-familienkarte .mha-quiz-round{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:auto 4px auto minmax(0,1fr) auto;gap:6px 16px;min-height:284px}
  #mha-familienkarte .mha-quiz-top{grid-column:1;grid-row:1}
  #mha-familienkarte .mha-quiz-round progress{grid-column:1;grid-row:2}
  #mha-familienkarte .mha-quiz-round-meta{grid-column:1;grid-row:3}
  #mha-familienkarte .mha-quiz-round h2{grid-column:1;grid-row:5;font-size:20px;align-self:center}
  #mha-familienkarte .mha-quiz-round.is-text-question h2{grid-row:4/6}
  #mha-familienkarte .mha-quiz-round .mha-quiz-scene{grid-column:1;grid-row:4;min-height:0}
  #mha-familienkarte .mha-quiz-round .mha-quiz-scene.has-map{min-height:100px}
  #mha-familienkarte .mha-quiz-answers{grid-column:2;grid-row:1/5;align-self:stretch}
  #mha-familienkarte .mha-quiz-order{grid-column:2;grid-row:1/5;align-self:stretch;gap:3px}
  #mha-familienkarte .mha-quiz-round [data-quiz-submit-order]{grid-column:2;grid-row:5;align-self:end}
  #mha-familienkarte .mha-quiz-footer{grid-column:2;grid-row:5;align-self:end}
  #mha-familienkarte .is-order .mha-quiz-footer{grid-column:1;grid-row:5}
  #mha-familienkarte .is-order h2{align-self:start}
}
@media (max-width:300px) {
  #mha-familienkarte .mha-quiz-round{height:auto}
  #mha-familienkarte .mha-quiz-answers{grid-template-columns:1fr}
  #mha-familienkarte .mha-quiz-round .mha-quiz-scene{flex:none;height:160px}
}