/* Departure is a fixed viewport layout. Changing a destination changes ink,
   not a screen scale, track height, or the size of neighbouring controls. */
html,body { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
#game-viewport[data-layout][data-title-lobby-v12] {
  height:100vh;
  height:100svh;
  --launch17-card-h:72px;
  --launch17-target-h:64px;
}
#game-viewport[data-layout][data-ui-scale="large"] { --launch17-card-h:76px; }
#game-viewport[data-layout][data-ui-scale="max"] { --launch17-card-h:80px; }
body #game-viewport[data-layout][data-title-lobby-v12] .command-panel {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:calc(2 * var(--launch17-card-h) + 8px) 24px var(--launch17-target-h) var(--oa-primary-h);
  gap:8px;
  align-content:end;
  min-height:0;
  overflow:visible;
}
body #game-viewport[data-layout][data-title-lobby-v12] .mode-options[data-launch-modes="four"] {
  display:grid;
  grid-column:1;
  grid-row:1;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,var(--launch17-card-h));
  gap:8px;
  height:calc(2 * var(--launch17-card-h) + 8px);
  min-height:0;
}
body #game-viewport[data-layout][data-title-lobby-v12] .mode-options .mode-card,
body #game-viewport[data-layout][data-title-lobby-v12] #test-mode-link {
  display:grid;
  grid-template-columns:26px minmax(0,1fr);
  grid-template-rows:auto auto;
  align-content:center;
  gap:2px 6px;
  width:100%;
  height:var(--launch17-card-h);
  min-height:var(--launch17-card-h);
  min-width:48px;
  padding:4px 8px;
  text-align:start;
  overflow:hidden;
}
body #game-viewport[data-layout][data-title-lobby-v12] .mode-options .mode-card>.icon {
  display:block;
  grid-column:1;
  grid-row:1/3;
  width:26px;
  height:26px;
  align-self:center;
}
body #game-viewport[data-layout][data-title-lobby-v12] .mode-options .mode-card strong {
  grid-column:2;
  min-width:0;
  align-self:end;
  font-size:max(16px,var(--oa-fs-caption));
  line-height:1.15;
  font-weight:800;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  overflow-wrap:anywhere;
}
body #game-viewport[data-layout][data-title-lobby-v12] .mode-options .mode-card small {
  grid-column:2;
  min-width:0;
  align-self:start;
  font-size:13px;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
body #game-viewport[data-layout][data-title-lobby-v12] .mode-detail {
  display:flex;
  flex-wrap:nowrap;
  grid-column:1;
  grid-row:2;
  min-height:24px;
  height:24px;
  padding:0;
  overflow:hidden;
}
body #game-viewport[data-layout][data-title-lobby-v12] .mode-detail :is(strong,span) {
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
body #game-viewport[data-layout][data-title-lobby-v12] .compact-mode-toggle { display:none; }
body #game-viewport[data-layout][data-title-lobby-v12] .quick-target {
  grid-column:1;
  grid-row:3;
  grid-template-columns:minmax(0,1fr) minmax(72px,34%);
  grid-template-rows:var(--launch17-target-h);
  gap:8px;
  min-height:0;
  height:var(--launch17-target-h);
}
body #game-viewport[data-layout][data-title-lobby-v12] .quick-target :is(#target-choice,.compact-difficulty-toggle) {
  display:block;
  grid-row:1;
  min-width:48px;
  min-height:var(--launch17-target-h);
  height:var(--launch17-target-h);
  padding:4px 8px;
  font-size:max(16px,var(--oa-fs-caption));
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body #game-viewport[data-layout][data-title-lobby-v12] #target-choice { grid-column:1; }
body #game-viewport[data-layout][data-title-lobby-v12] .compact-difficulty-toggle { grid-column:2; }
body #game-viewport[data-layout][data-title-lobby-v12] .departure-actions {
  grid-column:1;
  grid-row:4;
  height:var(--oa-primary-h);
  min-height:0;
}
body #game-viewport[data-layout][data-title-lobby-v12] .departure-actions>button {
  height:100%;
  min-height:48px;
  min-width:48px;
}
/* Native target/departure presses must also stay on their fixed grid tracks.
   Shared skin box-shadow/filter still provides the pressed response. */
body #game-viewport[data-layout][data-title-lobby-v12] .command-panel button,
body #game-viewport[data-layout][data-title-lobby-v12] .command-panel button:active:not(:disabled) {
  transform:none;
  transition:filter 120ms linear,box-shadow 120ms linear,color 120ms linear;
}
/* Mode selection and pointer feedback are paint-only. */
body #game-viewport[data-layout][data-title-lobby-v12] .mode-options .mode-card {
  transform:none;
  transition:filter 120ms linear,box-shadow 120ms linear,color 120ms linear;
}
body #game-viewport[data-layout][data-title-lobby-v12] .mode-options .mode-card:is(:active,.selected) {
  transform:none;
}
/* The four choices remain visible on short phones. The full destination name
   stays in the button's accessible label; concise visual copy is localized. */
@media (orientation:portrait) and (max-height:699px), (orientation:landscape) and (max-height:429px) {
  #game-viewport[data-layout][data-title-lobby-v12] { --launch17-card-h:56px; --launch17-target-h:48px; }
  body #game-viewport[data-layout][data-title-lobby-v12] .command-panel {
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:var(--launch17-card-h) var(--launch17-target-h) var(--oa-primary-h);
    gap:8px;
  }
  body #game-viewport[data-layout][data-title-lobby-v12] .mode-options[data-launch-modes="four"] {
    grid-template-columns:repeat(4,minmax(48px,1fr));
    grid-template-rows:var(--launch17-card-h);
    height:var(--launch17-card-h);
    gap:6px;
  }
  body #game-viewport[data-layout][data-title-lobby-v12] .mode-options .mode-card,
  body #game-viewport[data-layout][data-title-lobby-v12] #test-mode-link {
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(0,1fr);
    padding:4px;
    text-align:center;
  }
  body #game-viewport[data-layout][data-title-lobby-v12] .mode-options .mode-card :is(.icon,small),
  body #game-viewport[data-layout][data-title-lobby-v12] .mode-detail { display:none; }
  body #game-viewport[data-layout][data-title-lobby-v12] .mode-options .mode-card strong {
    grid-column:1;
    align-self:center;
    font-size:16px;
    line-height:1.15;
    -webkit-line-clamp:2;
  }
  body #game-viewport[data-layout][data-title-lobby-v12] .mode-options .mode-card[data-mode] strong {
    display:block;
    font-size:0;
    max-height:36.8px;
    -webkit-line-clamp:unset;
  }
  body #game-viewport[data-layout][data-title-lobby-v12] .mode-options .mode-card[data-mode] strong::after {
    content:attr(data-compact-label);
    display:block;
    font-size:16px;
    line-height:1.15;
  }
  body #game-viewport[data-layout][data-title-lobby-v12] .mode-options .raid-mode {
    grid-template-rows:minmax(0,1fr) 15px;
    gap:0;
  }
  body #game-viewport[data-layout][data-title-lobby-v12] .mode-options .raid-mode strong {
    align-self:center;
  }
  body #game-viewport[data-layout][data-title-lobby-v12] .mode-options .mode-card.raid-mode small {
    display:block;
    grid-column:1;
    align-self:start;
    font-size:13px;
    text-align:center;
  }
  body #game-viewport[data-layout][data-title-lobby-v12] .quick-target { grid-row:2; }
  body #game-viewport[data-layout][data-title-lobby-v12] .departure-actions { grid-row:3; }
}
@media (orientation:landscape) and (max-height:429px) {
  #game-viewport[data-layout][data-title-lobby-v12] { --launch17-card-h:48px; }
  body #game-viewport[data-layout][data-title-lobby-v12] .command-panel {
    grid-template-rows:48px 48px 64px;
    gap:6px;
  }
  body #game-viewport[data-layout][data-title-lobby-v12] .departure-actions { height:64px; }
  body #game-viewport[data-layout][data-title-lobby-v12] .departure-actions .icon { display:none; }
}
@media (orientation:landscape) and (max-height:340px) {
  body #game-viewport[data-layout][data-title-lobby-v12] .command-panel {
    grid-template-rows:48px 48px 52px;
    gap:5px;
  }
  body #game-viewport[data-layout][data-title-lobby-v12] .departure-actions { height:52px; }
  body #game-viewport[data-layout][data-title-lobby-v12] .departure-actions button small { display:none; }
  body #game-viewport[data-layout][data-title-lobby-v12] .departure-actions button strong { font-size:16px; }
}

/* Append after launch-layout-v17.css. Narrow portrait phones give the existing
   illustration its own full-body lane. No new art, node, action, or frame loop. */
@media (orientation:portrait) and (max-width:480px) {
  #game-viewport[data-layout][data-title-lobby-v12] { --launch17-card-h:64px; }
  body #game-viewport[data-layout][data-title-lobby-v12] .mode-options[data-launch-modes="four"] {
    grid-template-columns:repeat(4,minmax(48px,1fr));
    grid-template-rows:var(--launch17-card-h);
    height:var(--launch17-card-h);
    gap:6px;
  }
  body #game-viewport[data-layout][data-title-lobby-v12] .mode-options .mode-card,
  body #game-viewport[data-layout][data-title-lobby-v12] #test-mode-link {
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(0,1fr);
    padding:4px;
    text-align:center;
  }
  body #game-viewport[data-layout][data-title-lobby-v12] .mode-options .mode-card :is(.icon,small) { display:none; }
  body #game-viewport[data-layout][data-title-lobby-v12] .mode-options .mode-card strong {
    grid-column:1;
    align-self:center;
    font-size:16px;
    line-height:1.15;
    -webkit-line-clamp:2;
  }
  body #game-viewport[data-layout][data-title-lobby-v12] .mode-options .mode-card[data-mode] strong {
    display:block;
    font-size:0;
    max-height:36.8px;
    -webkit-line-clamp:unset;
  }
  body #game-viewport[data-layout][data-title-lobby-v12] .mode-options .mode-card[data-mode] strong::after {
    content:attr(data-compact-label);
    display:block;
    font-size:16px;
    line-height:1.15;
  }
  body #game-viewport[data-layout][data-title-lobby-v12] .mode-options .mode-card.raid-mode {
    grid-template-rows:minmax(0,1fr) 15px;
    gap:0;
  }
  body #game-viewport[data-layout][data-title-lobby-v12] .mode-options .mode-card.raid-mode small {
    display:block;
    grid-column:1;
    align-self:start;
    font-size:13px;
    text-align:center;
  }
  body #game-viewport[data-layout][data-title-lobby-v12] #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] #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] #lobby-screen .character-caption-text h2 {
    font-size:max(18px,var(--oa-fs-emph));
    line-height:1.1;
    overflow-wrap:anywhere;
  }
  body #game-viewport[data-layout][data-title-lobby-v12] #lobby-screen .character-caption-text :is(.hero-profession,.character-meta) {
    font-size:16px;
    line-height:1.1;
  }
  body #game-viewport[data-layout][data-title-lobby-v12] #lobby-screen .character-caption-text .character-meta {
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
  }
  /* The native detail overlay still occupies this entire >=48px card. These
     decorative role markers and duplicate shrine cannot cover its hit area. */
  body #game-viewport[data-layout][data-title-lobby-v12] #lobby-screen .character-caption .role-markers,
  body #game-viewport[data-layout][data-title-lobby-v12] #lobby-screen .shrine-monument { display:none; }
  body #game-viewport[data-layout][data-title-lobby-v12] #lobby-screen .stage-hero-backlight-v17,
  body #game-viewport[data-layout][data-title-lobby-v12] #lobby-screen .stage-hero-ground-v17 {
    left:5%;
    width:54%;
  }
  body #game-viewport[data-layout][data-title-lobby-v12] #lobby-screen .stage-hero-floor-v17 {
    left:8%;
    width:48%;
  }
}
/* A tall phone keeps its existing detail/target/CTA tracks; only the first
   mode track changes from two card rows to one. Compact phones retain their
   already-tested three-track command layout and 48px target. */
@media (orientation:portrait) and (max-width:480px) and (min-height:700px) {
  body #game-viewport[data-layout][data-title-lobby-v12] .command-panel {
    grid-template-rows:var(--launch17-card-h) 24px var(--launch17-target-h) var(--oa-primary-h);
  }
}
@media (orientation:portrait) and (max-width:480px) and (max-height:699px) {
  #game-viewport[data-layout][data-title-lobby-v12] { --launch17-card-h:56px; }
  body #game-viewport[data-layout][data-title-lobby-v12] #lobby-screen .character-caption-text .character-meta {
    display:block;
    white-space:nowrap;
    text-overflow:ellipsis;
    -webkit-line-clamp:unset;
  }
}