/* Mobile conversation pages stay at the bottom; the full text remains reachable. */
html[data-mobile-client=true] #screen :is(#dialog,#battle,#campaign-scene,#cinematic).mobile-dialogue {
  position:fixed!important;inset:auto!important;left:50%!important;bottom:var(--md-bottom,8px)!important;
  translate:-50% 0!important;width:var(--md-width,calc(100vw - 16px))!important;height:auto!important;
  min-height:0!important;max-width:none!important;max-height:var(--md-height,calc(100dvh - 16px))!important;
  display:flex!important;flex-direction:column;gap:7px;margin:0!important;padding:12px!important;overflow:hidden!important;
  border:2px solid #769d78!important;border-radius:12px!important;background:#f5efdaeF!important;
  color:#213f35!important;font:13px/1.4 system-ui,sans-serif!important;z-index:2147483640!important;
  box-shadow:0 8px 28px #001b1f66!important;transform:none!important;
}
html[data-mobile-client=true] #screen :is(#dialog,#battle,#campaign-scene,#cinematic).mobile-dialogue[hidden] {display:none!important}
html[data-mobile-client=true] #screen .mobile-dialogue .md-title {font:700 13px/1.3 system-ui!important;margin:0!important;flex:none}
html[data-mobile-client=true] #screen .mobile-dialogue .md-text {font:13px/1.4 system-ui!important;margin:0!important;white-space:pre-wrap;overflow-wrap:anywhere;flex:none;color:inherit}
html[data-mobile-client=true] #screen .mobile-dialogue .md-choices {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
html[data-mobile-client=true] #screen .mobile-dialogue .md-choices:empty {display:none}
html[data-mobile-client=true] #screen .mobile-dialogue .md-navigation {display:flex;gap:6px;align-items:center;justify-content:flex-end}
html[data-mobile-client=true] #screen .mobile-dialogue button {min-width:0;min-height:40px;max-width:100%;margin:0;padding:6px 11px;font:600 12px/1.2 system-ui;white-space:normal;overflow-wrap:anywhere;border:1px solid #64896a;border-radius:7px;background:#315b48;color:#fff6d9}
html[data-mobile-client=true] #screen .mobile-dialogue .md-counter {margin-right:auto;font:11px system-ui;color:#506351}
html[data-mobile-client=true] #screen .mobile-dialogue .md-input {grid-column:1/-1;min-height:40px;width:100%;box-sizing:border-box;font:16px system-ui;padding:7px}
html[data-mobile-client=true] #screen .mobile-dialogue .md-hero {position:static!important;display:flex;justify-content:center;height:58px!important;min-height:0!important;background:none!important}
html[data-mobile-client=true] #screen .mobile-dialogue .md-hero img {position:static!important;height:100%!important;width:auto!important;transform:none!important;object-fit:contain}
html[data-mobile-client=true] body:has(#campaign-scene.starter-selection:not([hidden])) #touch-controls {display:none!important}
html[data-mobile-client=true] #screen #campaign-scene.starter-selection {
  position:fixed;inset:50% auto auto 50%;translate:-50% -50%;width:min(900px,calc(100vw - 20px));height:auto;max-height:calc(100dvh - 20px);
  padding:12px;gap:8px;overflow:hidden;border-width:2px;
}
html[data-mobile-client=true] #screen #campaign-scene.starter-selection>h3 {font:700 16px/1.2 system-ui;margin:0}
html[data-mobile-client=true] #screen #campaign-scene.starter-selection .campaign-starters {grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;overflow:hidden;padding:2px}
html[data-mobile-client=true] #screen #campaign-scene.starter-selection .campaign-starters>button {min-height:0!important;padding:7px 3px;gap:4px;font:12px/1.2 system-ui;overflow:hidden}
html[data-mobile-client=true] #screen #campaign-scene.starter-selection .campaign-starters canvas {width:clamp(46px,15vw,76px)!important;height:auto!important;aspect-ratio:1}
html[data-mobile-client=true] #screen #campaign-scene.starter-selection .campaign-starters small {font:9px/1.2 system-ui}
html[data-mobile-client=true] #screen #campaign-scene.starter-selection>button {min-height:42px;padding:8px;font:700 13px/1.2 system-ui}
@media(orientation:landscape) and (max-height:600px){
  html[data-mobile-client=true] #screen #campaign-scene.starter-selection .campaign-starters {grid-template-columns:repeat(6,minmax(0,1fr))}
  html[data-mobile-client=true] #screen #campaign-scene.starter-selection .campaign-starters canvas {width:clamp(44px,10vw,76px)!important}
  html[data-mobile-client=true] #characters[data-character-view=create] .station-header .station-eyebrow {display:none}
  html[data-mobile-client=true] #characters .wizard-look .trainer-choice {height:44px;min-height:44px}
  html[data-mobile-client=true] #characters .wizard-look {padding-block:6px}
}

/* NPC conversations keep touch controls available beside/under the dialogue. */
html[data-mobile-client=true] body:has(.mobile-dialogue:not([hidden])) main #touch-controls{display:flex!important;visibility:visible!important;z-index:2147483641!important;pointer-events:none!important}
html[data-mobile-client=true] body:has(.mobile-dialogue:not([hidden])) main #touch-controls :is(.touch-stick,.touch-actions button){visibility:visible!important;pointer-events:auto!important}