/* Active rounds keep the portrait and every choice in one mobile play area.
   Natural overflow remains available for zoomed text and very small viewports. */
@media (max-width:760px), (max-width:1000px) and (max-height:500px) {
  #mha-familienkarte[data-page=game-characters]:has([data-character-session]){--character-nav-space:84px;--character-portrait-height:clamp(96px,calc(100dvh - 510px),156px);--character-inset:calc(8px + env(safe-area-inset-top));padding:var(--character-inset) 4px calc(4px + var(--character-nav-space) + env(safe-area-inset-bottom));min-height:100dvh}
  #mha-familienkarte:has([data-character-session]) .mha-ink-defs{position:absolute}
  #mha-familienkarte:has([data-character-session]) :is(.mha-masthead,.mha-sidebar,.mha-heading-row,.mha-footnote){display:none}
  #mha-familienkarte:has([data-character-session]) .mha-frame{display:block;min-height:0}
  #mha-familienkarte:has([data-character-session]) .mha-main{padding:0 8px;min-height:0;overflow-anchor:none}
  #mha-familienkarte [data-character-session]{display:grid;grid-template-rows:24px minmax(0,1fr) auto;gap:6px;height:calc(100dvh - var(--character-nav-space) - var(--character-inset) - env(safe-area-inset-bottom) - 8px);min-height:440px;overflow-anchor:none}
  #mha-familienkarte [data-character-session] :is(.mha-character-play-title,.mha-wizard-play-heading){margin:0;padding:0;border:0;align-items:center;gap:8px;min-width:0}
  #mha-familienkarte [data-character-session] :is(.mha-character-play-title,.mha-wizard-play-heading)>div{min-width:0}
  #mha-familienkarte [data-character-session] :is(.mha-character-play-title,.mha-wizard-play-heading) h2{font-size:19px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
  #mha-familienkarte [data-character-session] :is(.mha-character-play-title,.mha-wizard-play-heading) p,
  #mha-familienkarte [data-character-session] .mha-character-progress small{display:none}
  #mha-familienkarte [data-character-session] .mha-character-progress{font-size:19px;padding:0;border:0}
  #mha-familienkarte [data-character-session] :is(.mha-character-table,.mha-wizard-table){display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:var(--character-portrait-height) minmax(0,1fr);align-items:stretch;gap:6px;min-height:0}
  #mha-familienkarte [data-character-session] :is(.mha-character-draw,.mha-wizard-draw){position:static;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;text-align:left;padding:0;min-height:0;height:100%;width:100%}
  #mha-familienkarte [data-character-session] :is(.mha-character-drawn-frame,.mha-wizard-current-art){box-sizing:border-box;height:var(--character-portrait-height);max-height:156px;width:calc(var(--character-portrait-height) * .8);aspect-ratio:4/5;margin:0;padding:3px;border-width:3px;box-shadow:none}
  #mha-familienkarte [data-character-session] [data-reel-picture]>.mha-character-photo{height:100%;width:100%;aspect-ratio:auto}
  #mha-familienkarte [data-character-session] :is(.mha-character-draw,.mha-wizard-current-copy) h3{font-size:20px;line-height:1.15;min-height:50px;padding-block:2px;margin:0 0 2px;overflow-wrap:anywhere}
  #mha-familienkarte [data-character-session] .mha-character-draw>div:not([data-reel-picture]){min-width:0}
  #mha-familienkarte [data-character-session] .mha-character-draw>div>p,
  #mha-familienkarte [data-character-session] .mha-character-draw>div:not([data-reel-picture])>span,
  #mha-familienkarte [data-character-session] :is(.mha-character-skip small,.mha-wizard-active-attribute,.mha-wizard-hidden-value,.mha-wizard-composition>.mha-small-note){display:none}
  #mha-familienkarte [data-character-session] :is(.mha-character-skip,.mha-wizard-draw-actions){margin:0;gap:0}
  #mha-familienkarte [data-character-session] :is(.mha-character-skip,.mha-wizard-draw-actions) button{min-height:44px;padding:7px 10px;font-size:12px}
  #mha-familienkarte [data-character-session] :is(.mha-character-board,.mha-wizard-composition){display:flex;flex-direction:column;min-height:0;gap:4px;width:100%}
  #mha-familienkarte [data-character-session] .mha-wizard-composition>h3{font-size:18px;line-height:1.2;margin:0 0 3px}
  #mha-familienkarte [data-character-session] .mha-wizard-ledger{flex:1;display:grid;grid-template-rows:repeat(5,minmax(44px,1fr));gap:2px;min-height:0}
  #mha-familienkarte [data-character-session] .mha-wizard-ledger li{min-height:0}
  #mha-familienkarte [data-character-session] .mha-wizard-slot{height:100%;min-height:44px;grid-template-columns:28px minmax(0,1fr) 18px;gap:8px;padding:4px 7px}
  #mha-familienkarte [data-character-session] .mha-wizard-ledger-portrait>span:not(.mha-character-photo){width:28px;height:32px;font-size:20px}
  #mha-familienkarte [data-character-session] .mha-wizard-ledger-portrait .mha-character-photo{width:26px}
  #mha-familienkarte [data-character-session] .mha-wizard-slot>div{gap:1px}
  #mha-familienkarte [data-character-session] .mha-wizard-slot strong{font-size:18px;line-height:1.1}
  #mha-familienkarte [data-character-session] .mha-wizard-slot>div>span{font-size:10px;line-height:1.2}
  #mha-familienkarte [data-character-session] .mha-character-ranking{flex:1;grid-template-rows:repeat(5,minmax(44px,1fr));gap:5px;min-height:0}
  #mha-familienkarte [data-character-session] .mha-character-slot{min-height:44px;padding:4px;gap:4px;font-size:10px;line-height:1.2}
  #mha-familienkarte [data-character-session] .mha-character-rank{width:19px;font-size:20px}
  #mha-familienkarte [data-character-session] .mha-character-slot .mha-character-photo{width:25px}
  #mha-familienkarte [data-character-session] .mha-character-pyramid{flex:1;grid-template-rows:repeat(4,minmax(61px,1fr));gap:4px;min-height:0}
  #mha-familienkarte [data-character-session] .mha-pyramid-row{display:grid;grid-template-rows:auto minmax(44px,1fr);gap:1px;min-height:0}
  #mha-familienkarte [data-character-session] .mha-pyramid-row h3{margin:0;font-size:15px;line-height:1.1}
  #mha-familienkarte [data-character-session] .mha-pyramid-row>div{grid-template-columns:repeat(var(--row-size),minmax(0,74px));gap:5px}
  #mha-familienkarte [data-character-session] .mha-pyramid-row .mha-character-slot{flex-direction:row;min-height:44px;padding:3px;gap:3px}
  #mha-familienkarte [data-character-session] .mha-pyramid-row .mha-character-photo{width:28px}
  #mha-familienkarte [data-character-session] .mha-pyramid-row .is-placed .mha-character-slot-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  #mha-familienkarte [data-character-session] .mha-character-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0}
  #mha-familienkarte [data-character-session] .mha-character-actions .mha-button{min-height:44px;padding:7px;font-size:11px}
  #mha-familienkarte [data-character-session] .mha-character-message{flex:none;min-height:0;margin:0;font-size:10px;line-height:1.2}
  #mha-familienkarte [data-character-session] .mha-character-message:empty{display:none}
  #mha-familienkarte [data-character-session] .mha-character-board{gap:2px}
  #mha-familienkarte [data-character-session] .mha-character-board>.mha-character-message{min-height:24px}
  #mha-familienkarte [data-character-session] [data-character-hint]{visibility:hidden}
  #mha-familienkarte [data-character-session]>.mha-character-message:not(:empty){grid-row:3}
}
@media (max-width:1000px) and (max-height:500px) {
  #mha-familienkarte[data-page=game-characters]:has([data-character-session]){--character-nav-space:0px}
  #mha-familienkarte[data-entry=false][data-cover=open]:has([data-character-session]) .mha-mobile-nav{display:none}
}
@media (max-width:1000px) and (max-height:500px) and (orientation:landscape) {
  #mha-familienkarte [data-character-session]{grid-template-columns:minmax(185px,.8fr) minmax(0,1.5fr);grid-template-rows:24px minmax(0,1fr) auto;gap:8px 18px;min-height:284px}
  #mha-familienkarte [data-character-session] :is(.mha-character-table,.mha-wizard-table){display:contents}
  #mha-familienkarte [data-character-session] :is(.mha-character-board,.mha-wizard-composition){grid-column:2;grid-row:1/4}
  #mha-familienkarte [data-character-session] :is(.mha-character-draw,.mha-wizard-draw){grid-template-columns:1fr;grid-template-rows:minmax(60px,1fr) auto;gap:5px;text-align:center}
  #mha-familienkarte [data-character-session] :is(.mha-character-drawn-frame,.mha-wizard-current-art){justify-self:center;max-height:100%;height:100%;width:auto}
  #mha-familienkarte [data-character-session] :is(.mha-character-draw,.mha-wizard-current-copy) h3{font-size:18px;min-height:46px;margin-bottom:2px}
  #mha-familienkarte [data-character-session] .mha-character-actions{grid-column:1;grid-row:3;gap:5px}
  #mha-familienkarte [data-character-session] .mha-character-actions .mha-button{font-size:10px}
}

@media (max-width:300px) {
  #mha-familienkarte [data-character-session]{height:auto;grid-template-rows:auto auto auto}
  #mha-familienkarte [data-character-session] :is(.mha-character-table,.mha-wizard-table){grid-template-rows:auto auto}
  #mha-familienkarte [data-character-session] :is(.mha-character-draw,.mha-wizard-draw){height:auto}
  #mha-familienkarte [data-character-session] :is(.mha-character-ranking,.mha-wizard-ledger){grid-template-rows:repeat(5,minmax(44px,auto))}
  #mha-familienkarte [data-character-session] .mha-character-pyramid{grid-template-rows:repeat(4,auto)}
  #mha-familienkarte [data-character-session] .mha-wizard-slot{height:auto}
}