/* Own touch HUD composition. Full text and the original buttons are retained. */
#questText,#questDirection,#prompt{word-break:keep-all;overflow-wrap:anywhere}
#prompt{width:max-content;max-width:min(720px,calc(100% - 28px));text-align:center}
body.touch-mode{--hud-edge:12px;--hud-unit:40px;--hud-step:46px;--hud-prompt-top:170px;--hud-note-top:228px}
body.touch-mode #touchUI #tcNote{left:calc(var(--hud-edge) + env(safe-area-inset-left));right:auto;top:calc(12px + env(safe-area-inset-top));width:112px;height:40px;border-radius:12px}
body.touch-mode #touchUI #tcMap,body.touch-mode #touchUI #tcFull,body.touch-mode #mute,body.touch-mode #gfx{top:calc(12px + env(safe-area-inset-top));width:var(--hud-unit);height:var(--hud-unit)}
body.touch-mode #gfx{right:calc(var(--hud-edge) + env(safe-area-inset-right))}
body.touch-mode #touchUI #tcFull{right:calc(var(--hud-edge) + var(--hud-step) + env(safe-area-inset-right))}
body.touch-mode #mute{right:calc(var(--hud-edge) + var(--hud-step)*2 + env(safe-area-inset-right))}
body.touch-mode #touchUI #tcMap{right:calc(var(--hud-edge) + var(--hud-step)*3 + env(safe-area-inset-right))}
body.touch-mode #questGuide{top:calc(64px + env(safe-area-inset-top));left:12px;transform:none;width:calc(100% - 24px);font-size:14px;line-height:1.45}
body.touch-mode #questGuide button{padding:7px 12px;min-height:48px}
body.touch-mode #questDirection{margin:6px auto 0;font-size:12px;line-height:1.45}
body.touch-mode #prompt{top:var(--hud-prompt-top);bottom:auto;left:12px;transform:translateY(6px);width:calc(100% - 24px);max-width:none;border-radius:12px;font-size:14px;line-height:1.45;letter-spacing:.2px;padding:8px 12px}
body.touch-mode #prompt.show{transform:none}
body.touch-mode #note{top:var(--hud-note-top);bottom:auto;left:12px;transform:translateY(6px);width:calc(100% - 24px);max-width:none;border-radius:12px;font-size:12px;line-height:1.4;letter-spacing:.2px;padding:7px 12px}
body.touch-mode #note.show{transform:none}
body.touch-mode #hint{left:12px;bottom:calc(12px + env(safe-area-inset-bottom));transform:none;width:max-content;max-width:calc(100% - 124px);font-size:11px;line-height:1.4;letter-spacing:.1px;padding:6px 10px;white-space:normal;text-align:left}
body.touch-mode #shipViewButton{left:12px;top:auto;bottom:calc(82px + env(safe-area-inset-bottom));padding:10px 12px;font-size:13px;max-width:134px}
body.touch-mode #save-status{top:auto;left:12px;bottom:calc(64px + env(safe-area-inset-bottom));max-width:calc(100% - 124px);word-break:keep-all}
@media(max-width:350px){body.touch-mode #touchUI #tcNote{width:96px;font-size:16px}body.touch-mode #touchUI #tcNote span:first-child{font-size:21px}}
@media(min-width:651px){body.touch-mode #questGuide{top:calc(12px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:min(380px,calc(100% - 420px))}body.touch-mode #prompt{left:50%;width:min(420px,calc(100% - 240px));transform:translateX(-50%) translateY(6px)}body.touch-mode #prompt.show{transform:translateX(-50%)}body.touch-mode #note{left:12px;top:calc(64px + env(safe-area-inset-top));width:190px}}
@media(any-pointer:coarse) and (min-width:820px) and (min-height:620px){body.touch-mode{--hud-unit:48px;--hud-step:54px}body.touch-mode #touchUI #tcNote{height:48px}}

/* Touch water tools occupy a side strip, preserving the central traveller. */
body.touch-mode{--water-hud-width:108px;--hud-note-bottom:260px;--hud-water-top:124px}
body.touch-mode #waterBracelet button{min-height:40px}
body.touch-mode.water-hud #hint{display:none}
body.touch-mode.water-hud #save-status{left:calc(var(--water-hud-width) + 24px);top:auto;bottom:calc(12px + env(safe-area-inset-bottom));width:96px;max-width:96px;line-height:1.35}
@media(max-width:650px){
  body.touch-mode #waterBracelet{left:12px;bottom:calc(12px + env(safe-area-inset-bottom));width:var(--water-hud-width);max-height:calc(100% - var(--hud-note-bottom) - 24px);overflow-y:auto;padding:8px;font-size:12px;line-height:1.35;word-break:keep-all;overflow-wrap:anywhere}
  body.touch-mode #waterBracelet strong{font-size:13px}
  body.touch-mode #waterBracelet .water-target{font-size:11px;line-height:1.35;margin:4px 0 7px}
  body.touch-mode #waterBracelet .water-actions,body.touch-mode #waterBracelet .water-tools{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
  body.touch-mode #waterBracelet button{min-height:40px;padding:8px 3px;font-size:12px}
  body.touch-mode #waterBracelet .water-tools{margin-top:6px}
  body.touch-mode #waterBracelet .water-tools button{font-size:11px;min-height:40px}
  body.touch-mode #waterBracelet output{font-size:11px;max-height:74px;overflow-y:auto;word-break:keep-all}
}
@media(max-width:350px){body.touch-mode{--water-hud-width:96px}}
@media(max-width:650px) and (max-height:650px){
  body.touch-mode #questGuide{font-size:13px;line-height:1.4}
  body.touch-mode #questGuide button{padding:5px 10px;min-height:44px}
  body.touch-mode #questGuide small{font-size:10px;line-height:1.2;margin-bottom:2px}
  body.touch-mode #questDirection{margin-top:4px;padding:3px 8px;font-size:11px;line-height:1.3}
  body.touch-mode #questArrow{font-size:18px;line-height:1;margin-right:6px}
  body.touch-mode #prompt{font-size:13px;line-height:1.4;padding:6px 10px}
  body.touch-mode #note{font-size:11px;line-height:1.4;padding:5px 10px}
}
@media(min-width:651px) and (max-height:520px){
  body.touch-mode{--water-hud-width:184px}
  body.touch-mode #waterBracelet{left:12px;top:var(--hud-water-top);bottom:auto;width:184px;max-height:calc(100% - var(--hud-water-top) - 12px);overflow-y:auto;padding:8px}
}

@media(max-width:650px),(max-height:520px){body.touch-mode.water-hud #save-status{left:auto;right:12px;bottom:calc(188px + env(safe-area-inset-bottom))}}

/* Keep the central guardian visible while explicitly surveying the court. */
@media(min-width:651px) and (max-height:520px){
 body.touch-mode.chronicle-overview #questGuide{top:64px;left:12px;transform:none;width:220px}
 body.touch-mode.chronicle-overview #note{top:var(--hud-note-top);width:220px}
 body.touch-mode.chronicle-overview #prompt{top:auto;bottom:14px;width:min(360px,calc(100% - 300px))}
 body.touch-mode.chronicle-overview #hint{max-width:220px}
 body.touch-mode.chronicle-overview #save-status{top:12px;bottom:auto;left:132px;max-width:90px}
}