/* V17 hero composition follow-up. Reserve real layout space for the existing
 * whole illustration; never scale the UI, crop the hero, or animate a control.
 * Load after launch-layout-v17 and presentation-stage-v17. Root owns adoption. */
@media (orientation:portrait) {
  body #game-viewport[data-layout][data-title-lobby-v12][data-presentation-stage-v17] #start-screen {
    row-gap:6px;
  }
  body #game-viewport[data-layout][data-title-lobby-v12][data-presentation-stage-v17] #start-screen .start-brand {
    margin-top:4px;
  }
  body #game-viewport[data-layout][data-title-lobby-v12][data-presentation-stage-v17] #start-screen .brand-crest {
    width:clamp(40px,6.6svh,56px);
    height:clamp(40px,6.6svh,56px);
    margin-bottom:4px;
  }
  body #game-viewport[data-layout][data-title-lobby-v12][data-presentation-stage-v17] #start-screen .start-brand p {
    margin-top:6px;
  }
  body #game-viewport[data-layout][data-title-lobby-v12][data-presentation-stage-v17] #start-screen .start-brand::after {
    margin-top:6px;
  }
}
/* Short phones use a deliberate 72px primary row. Full labels remain in the
 * native DOM; the repeated destination summary paints one line. All actions,
 * six tabs and five formation hit targets remain >=48px. */
@media (orientation:portrait) and (max-width:480px) and (max-height:699px) {
  body #game-viewport[data-layout][data-title-lobby-v12][data-presentation-stage-v17] #start-screen {
    row-gap:4px;
  }
  body #game-viewport[data-layout][data-title-lobby-v12][data-presentation-stage-v17] #start-screen .start-brand {
    margin-top:2px;
  }
  body #game-viewport[data-layout][data-title-lobby-v12][data-presentation-stage-v17] #start-screen .brand-crest {
    width:38px;
    height:38px;
  }
  body #game-viewport[data-layout][data-title-lobby-v12][data-presentation-stage-v17] #start-screen .start-brand p {
    margin-top:4px;
  }
  body #game-viewport[data-layout][data-title-lobby-v12][data-presentation-stage-v17] #lobby-screen {
    --oa-primary-h:72px;
    --oa-bubble-h:48px;
    --oa-chip-h:48px;
    row-gap:6px;
  }
  body #game-viewport[data-layout][data-title-lobby-v12][data-presentation-stage-v17] #lobby-screen .lobby-content {
    row-gap:6px;
  }
  body #game-viewport[data-layout][data-title-lobby-v12][data-presentation-stage-v17] #lobby-screen .command-panel {
    row-gap:6px;
  }
  body #game-viewport[data-layout][data-title-lobby-v12][data-presentation-stage-v17] #lobby-screen .departure-actions {
    height:72px;
  }
  body #game-viewport[data-layout][data-title-lobby-v12][data-presentation-stage-v17] #lobby-screen .departure-actions>button {
    min-height:72px;
    height:72px;
    padding:4px 8px;
    font-size:max(18px,var(--oa-fs-emph));
    line-height:1.1;
  }
  body #game-viewport[data-layout][data-title-lobby-v12][data-presentation-stage-v17] #lobby-screen .departure-actions .icon {
    display:none;
  }
  body #game-viewport[data-layout][data-title-lobby-v12][data-presentation-stage-v17] #lobby-screen .departure-actions button strong {
    font-size:max(18px,var(--oa-fs-emph));
    line-height:1.1;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
  }
  body #game-viewport[data-layout][data-title-lobby-v12][data-presentation-stage-v17] #lobby-screen .departure-actions button small {
    display:block;
    font-size:13px;
    line-height:1.2;
    max-height:1.2em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    -webkit-line-clamp:unset;
  }
  body #game-viewport[data-layout][data-title-lobby-v12][data-presentation-stage-v17] #lobby-screen .lobby-advice {
    height:48px;
    gap:4px;
  }
  body #game-viewport[data-layout][data-title-lobby-v12][data-presentation-stage-v17] #lobby-screen .lobby-advice>button {
    min-height:48px;
    padding-block:4px;
  }
  body #game-viewport[data-layout][data-title-lobby-v12][data-presentation-stage-v17] #lobby-screen #advice-text {
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
    line-height:1.2;
  }
  body #game-viewport[data-layout][data-title-lobby-v12][data-presentation-stage-v17] #lobby-screen .support-dock {
    --oa-chip-h:48px;
  }
}
/* A side caption keeps the complete hero readable on tablets/desktops too.
 * The tall-phone portrait lane already landed in launch-layout is preserved.
 * Low landscape uses its real stage height rather than the old 260px crop. */
@media (orientation:landscape), (orientation:portrait) and (min-width:481px) {
  body #game-viewport[data-layout][data-title-lobby-v12][data-presentation-stage-v17] #lobby-screen .lobby-character {
    left:32%;
    width:54%;
    height:calc(100% - var(--oa-chip-h) - 8px);
    top:auto;
    bottom:calc(var(--oa-chip-h) + 8px);
    max-height:none;
    object-fit:contain;
    object-position:center bottom;
    transform:translateX(-50%);
  }
  body #game-viewport[data-layout][data-title-lobby-v12][data-presentation-stage-v17] #lobby-screen .character-caption {
    position:absolute;
    left:auto;
    right:0;
    top:8px;
    bottom:auto;
    width:40%;
    max-width:40%;
    min-height:48px;
    max-height:calc(100% - var(--oa-chip-h) - 12px);
    margin:0;
    padding:4px 6px;
    transform:none;
    text-align:start;
    overflow:hidden;
  }
  body #game-viewport[data-layout][data-title-lobby-v12][data-presentation-stage-v17] #lobby-screen .character-caption .role-markers,
  body #game-viewport[data-layout][data-title-lobby-v12][data-presentation-stage-v17] #lobby-screen .shrine-monument {
    display:none;
  }
  body #game-viewport[data-layout][data-title-lobby-v12][data-presentation-stage-v17] #lobby-screen .stage-hero-backlight-v17,
  body #game-viewport[data-layout][data-title-lobby-v12][data-presentation-stage-v17] #lobby-screen .stage-hero-ground-v17 {
    left:5%;
    width:54%;
  }
  body #game-viewport[data-layout][data-title-lobby-v12][data-presentation-stage-v17] #lobby-screen .stage-hero-floor-v17 {
    left:8%;
    width:48%;
  }
}