/* Solo landscape: the controls own the full height, the stage owns the rest.
   The quick bank never scrolls; portrait and the other game modes keep their layout. */
@media (orientation:landscape) and (max-height:460px) and (max-width:1000px) {
  body[data-control-bank=loadout]:is([data-screen=playing],[data-screen=paused]) .app {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(280px,42%);
    grid-template-rows:44px minmax(0,1fr) 38px;
    gap:6px 12px;
    height:100dvh;
    padding:max(6px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
    overflow:hidden;
  }
  body[data-control-bank=loadout]:is([data-screen=playing],[data-screen=paused]) .app main {
    display:contents;
  }
  body[data-control-bank=loadout] .app header {
    grid-column:1;grid-row:1;height:44px;min-width:0;border:0;
    justify-content:flex-end;gap:0;
  }
  body[data-control-bank=loadout] .app header .brand,
  body[data-control-bank=loadout] .app header .edition,
  body[data-control-bank=loadout] .app header nav>a,
  body[data-control-bank=loadout] .app header #musicChoice,
  body[data-control-bank=loadout] .app header #catalogToggle {display:none!important}
  body[data-control-bank=loadout] .app header nav {gap:4px}
  body[data-control-bank=loadout] .app header nav button {min-height:44px;min-width:44px;padding:6px;font-size:12px}
  body[data-control-bank=loadout] .app header .music-quick-button {width:44px;font-size:0}
  body[data-control-bank=loadout] .app header .music-quick-button:before {content:'♫';font-size:18px}
  body[data-control-bank=loadout] .app .hud {
    grid-column:1;grid-row:1;align-self:center;
    height:44px;width:calc(100% - 146px);min-width:0;gap:6px;
    pointer-events:none;position:relative;z-index:1;
  }
  body[data-control-bank=loadout] .app .hud>div:first-child {min-width:0}
  body[data-control-bank=loadout] .app .hud small {display:none}
  body[data-control-bank=loadout] .app .hud strong {font-size:23px;line-height:1.1}
  body[data-control-bank=loadout] .app .hud #combo {display:none}
  body[data-control-bank=loadout] .app .hud #multiplier {font-size:10px;margin-left:4px}
  body[data-control-bank=loadout] .app .hud .clock {display:block;flex:none}
  body[data-control-bank=loadout] .app .hud .clock strong {font-size:16px}
  body[data-control-bank=loadout] .app .beat-box,
  body[data-control-bank=loadout] .app #roundProgress,
  body[data-control-bank=loadout] .app #coach,
  body[data-control-bank=loadout] .app .flow-choices,
  body[data-control-bank=loadout] .app footer {display:none!important}
  body[data-control-bank=loadout] .app .arena {
    grid-column:1;grid-row:2;min-height:0;height:auto;min-width:0;
    border-radius:12px;
  }
  body[data-control-bank=loadout] .app .arena-top {top:8px;left:10px;right:10px}
  body[data-control-bank=loadout] .app .arena-top>span:first-child,
  body[data-control-bank=loadout] .app .dancer-label {display:none}
  body[data-control-bank=loadout] .app .mobile-timing {
    display:flex;flex-direction:column;justify-content:center;
    grid-column:1;grid-row:3;min-width:0;min-height:0;
    margin:0;padding:5px 8px;
  }
  body[data-control-bank=loadout] .app .mobile-timing>div:first-child {gap:6px}
  body[data-control-bank=loadout] .app .mobile-timing b {font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body[data-control-bank=loadout] .app .mobile-timing span {font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body[data-control-bank=loadout] .app .timing-track {margin-top:6px;height:3px;flex:none}
  body[data-control-bank=loadout] .app .deck {
    grid-column:2;grid-row:1/4!important;display:flex;flex-direction:column;
    min-width:0;min-height:0;max-height:none;padding:0;gap:6px;
  }
  body[data-control-bank=loadout] .app .deck-heading,
  body[data-control-bank=loadout] .app #movePages,
  body[data-control-bank=loadout] .app .acro-families {display:none!important}
  body[data-control-bank=loadout] .app .keyboard[data-quick=true] {
    display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(4,minmax(0,1fr));
    gap:5px;flex:1;min-height:0;max-height:none;padding:2px;
    overflow:visible;
  }
  body[data-control-bank=loadout] .app .keyboard[data-quick=true] .key-row {
    display:flex;flex-direction:column;align-items:stretch;gap:0;min-height:0;
  }
  body[data-control-bank=loadout] .app .keyboard[data-quick=true] .row-label {
    display:flex!important;justify-content:flex-start;flex:none;width:auto;height:10px;margin:0 0 3px;padding:0;
  }
  body[data-control-bank=loadout] .app .keyboard[data-quick=true] .row-label strong {font-size:9px;line-height:10px}
  body[data-control-bank=loadout] .app .keyboard[data-quick=true] .row-pads {
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;min-height:0;width:100%;
  }
  body[data-control-bank=loadout] .app .keyboard[data-quick=true] .pad {
    height:100%;min-height:44px;min-width:0;padding:5px;display:flex;align-items:center;
  }
  body[data-control-bank=loadout] .app .keyboard[data-quick=true] .pad kbd {display:none}
  body[data-control-bank=loadout] .app .keyboard[data-quick=true] .pad strong {
    font-size:11px;line-height:1.15;margin:0;white-space:normal;overflow-wrap:normal;
  }
  body[data-control-bank=loadout] .app .deck-footer {flex:none;padding:0;min-height:44px}
  body[data-control-bank=loadout] .app .deck-footer #status {display:none}
  body[data-control-bank=loadout] .app #release {width:100%;height:44px;min-height:44px;font-size:12px}
  body[data-control-bank=loadout] .app #release span {display:none}
  body[data-control-bank=loadout] .app .comic {top:30px;right:8px;width:105px;padding:6px;pointer-events:none}
  body[data-control-bank=loadout] .app .comic-title {font-size:13px}
  body[data-control-bank=loadout] .app .modal {
    position:fixed;inset:0;z-index:60;
    padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  }
  body[data-control-bank=loadout] .app .modal>div {
    max-height:calc(100dvh - max(10px,env(safe-area-inset-top)) - max(10px,env(safe-area-inset-bottom)));
    overflow-y:auto;
  }

  /* Casting keeps its preview, all three heroes and Next in the same viewport. */
  #home.club-lobby {padding:0;overflow:hidden}
  #home .hero-shell {
    width:100%;height:100dvh;min-height:0;max-width:none;
    display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,.8fr);
    grid-template-rows:44px minmax(0,1fr) 48px;gap:8px 16px;
    padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
    border-radius:0;
  }
  #home .hero-heading {grid-column:1/-1;flex-wrap:nowrap;justify-content:space-between}
  #home .hero-heading h1 {flex-basis:auto;font-size:22px;margin:0}
  #home .hero-body,#home .solo-casting {display:contents}
  #home .solo-casting .lobby-preview {grid-column:1;grid-row:2/4;height:auto;min-height:0}
  #home .character-choices {grid-column:2;grid-row:2;grid-template-columns:1fr;grid-template-rows:repeat(3,minmax(44px,1fr));margin:0;gap:6px}
  #home .character-choice {flex-direction:row;justify-content:flex-start;min-height:44px;gap:12px;padding:4px 10px!important}
  #home .character-choice img {width:44px;height:38px;margin:0}
  #home #characterStatus {display:none}
  #home .home-actions {grid-column:2;grid-row:3;position:static;padding:0;background:none;border:0}
  #home .home-actions #startRound {height:48px;min-height:48px;font-size:15px}

  .ribbon-setup.loadout-screen {
    padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  }
  .ribbon-setup .loadout-shell {height:100%;min-height:0;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .ribbon-setup .loadout-head {min-height:44px;padding:0}
  .ribbon-setup .loadout-actions {min-width:0}
  .ribbon-setup #loadoutConfirm {min-height:44px}
  .ribbon-setup .preview-caption button {min-height:44px}
}

/* Browser bars can leave less than 310 CSS pixels in landscape. */
@media (orientation:landscape) and (max-height:310px) and (max-width:1000px) {
  body[data-control-bank=loadout] .app .keyboard[data-quick=true] .row-label {display:none!important}
  body[data-control-bank=loadout] .app .comic {display:none}
}