/* A readable transcript without an opaque panel over the world. */
#screen .chat #chat-log {font-family:Arial,sans-serif;font-size:20px;line-height:1.4;}
#screen #chat-form button {pointer-events:auto;position:relative;z-index:999;}
body.touch-enabled #screen .chat {bottom:var(--dialog-controls-bottom,176px);left:8px;}
body.touch-enabled:has(.chat.chat-editing) #touch-controls,
body.touch-enabled:has(.chat.chat-editing) #touch-controls * {visibility:hidden!important;pointer-events:none!important;}
body.touch-enabled #screen .chat.chat-editing {bottom:8px;left:8px;right:8px;width:auto;z-index:999;}
#screen .chat { background:transparent!important; background-image:none!important; border:0!important; box-shadow:none!important; padding:0; width:min(65%,390px); max-height:34%; pointer-events:none; opacity:.76; font:13px/1.4 system-ui,sans-serif; color:#fff!important; text-shadow:0 1px 2px #000,1px 0 2px #000,-1px 0 2px #000; }
#screen .chat #chat-log { background:transparent!important; border:0!important; box-shadow:none!important; color:#fff; height:72px; max-height:15cqw; overflow:hidden; }
#screen .chat #chat-log p { margin:2px 0; overflow-wrap:anywhere; }
#screen .chat #chat-form { display:none; }
#screen .chat .chat-write { pointer-events:auto; background:#12342b66!important; color:#fff; border:0!important; box-shadow:none!important; font:12px system-ui; min-height:30px; padding:4px 9px; }
#screen .chat.chat-editing { opacity:1; width:min(95%,520px); max-height:75%; pointer-events:auto; }
#screen .chat.chat-editing #chat-log { overflow:auto; }
#screen .chat.chat-editing .chat-write { display:none; }
#screen .chat.chat-editing #chat-form { display:flex; padding:6px; background:#10352b99; border-radius:5px; gap:5px; }
#screen #chat-form :is(input,select,button) { font:14px/1.3 system-ui; min-height:36px; }
#screen #chat-form input[name=message] { flex:1 1 160px; }
#screen:has(#battle:not([hidden]),#overlay:not([hidden]),#dialog:not([hidden]),#cinematic:not([hidden]),#campaign-scene:not([hidden])) .chat { display:none; }
#screen #dialog { overflow-wrap:anywhere; line-height:1.45; }
#screen #detail :is(input,select,textarea) { box-sizing:border-box; max-width:100%; }
#screen #detail :is(form,.form-grid,.trade-columns,.market-filters) { min-width:0; }
#screen #detail button { overflow-wrap:anywhere; }
@media (pointer:coarse),(max-width:760px),(orientation:landscape) and (max-height:600px) and (max-width:1100px) {
  main.game-shell { padding-top:max(6px,env(safe-area-inset-top)); }
  main.game-shell .toolbar { gap:4px; max-width:100%; overflow-x:auto; scrollbar-width:thin; }
  main.game-shell .toolbar button { font:12px/1.2 system-ui; min-height:40px; flex:none; }
  main.game-shell #world-graphics { display:none; }
  #screen #overlay { font:14px/1.4 system-ui,sans-serif; padding:0; }
  #screen #menu { width:56%; max-width:65%; min-width:155px; padding:3px; }
  #screen #menu button { font:600 13px/1.25 system-ui,sans-serif; min-height:40px; padding:9px 6px 9px 22px; }
  #screen #detail { inset:5px 5px 49px; padding:8px; font:14px/1.4 system-ui,sans-serif; overscroll-behavior:contain; scrollbar-width:thin; }
  #screen #detail :is(h2,h3) { font-size:17px; line-height:1.3; margin:6px 0 10px; }
  #screen #detail :is(button,input,select,textarea) { min-height:42px; font:14px/1.25 system-ui,sans-serif; }
  #screen #detail :is(input,select,textarea),#screen #chat-form :is(input,select) { font-size:16px; }
  #screen #detail :is(form,.market-filters) { max-width:100%; flex-wrap:wrap; gap:6px; }
  #screen .panel-back { min-height:40px; bottom:4px; font:14px system-ui; padding:8px 12px; }
  #screen #dialog { font:14px/1.45 system-ui,sans-serif; padding:10px; max-height:70%; overflow:auto; }
  #screen #dialog button { min-height:42px; font:14px system-ui; }
  #screen #detail .party-row { grid-template-columns:32px minmax(0,1fr); padding:7px; }
  #screen #detail .party-row button { grid-column:2; }
  #screen #detail.emerald-summary { font:13px/1.35 system-ui,sans-serif; grid-template-columns:30% minmax(0,1fr); grid-template-rows:auto minmax(120px,1fr) auto; }
  #screen .summary-tabs { flex-wrap:wrap; gap:4px; }
  #screen .summary-tabs button { flex:1; padding:5px; min-width:60px; }
  #screen .summary-line { font-size:13px; }
  #screen #battle.emerald-battle { font:14px/1.3 system-ui,sans-serif; grid-template-rows:minmax(0,64%) minmax(108px,36%); }
  #screen #battle.emerald-battle .battle-actions { align-content:stretch; gap:2px; padding:2px; }
  #screen #battle.emerald-battle .battle-actions button { min-height:42px; font:600 13px/1.2 system-ui,sans-serif; padding:4px 2px; }
  #screen .battle-log { font:13px/1.35 system-ui; }
  #screen .chat { width:70%; font-size:12px; }
  #screen #chat-toggle { min-height:36px; min-width:46px; font:12px system-ui; background:#163d3977; }
  #screen .chat .chat-write { min-height:36px; }
  #screen #chat-form :is(button,input,select) { min-height:40px; }
  #touch-controls .touch-actions button { min-height:46px; }
  #touch-controls .touch-stick { touch-action:none; }
  body.mobile-typing #touch-controls { visibility:hidden; pointer-events:none; }
  body.mobile-typing main.game-shell { padding-bottom:8px!important; }
  #auth { max-width:100%; overflow:auto; padding:12px; }
  #auth :is(input,select) { font-size:16px; min-height:44px; }
  #auth button { min-height:44px; }
}