/* Thumb controls frame the abbey on phones; desktop keeps its existing layout. */
.phone-only, .phone-label, .phone-icon, .touch-joystick { display: none; }
.actions .action-button > .phone-icon { display: none; }
.touch-layout {
  --app-safe-top: env(safe-area-inset-top, 0px);
  --app-safe-right: env(safe-area-inset-right, 0px);
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-safe-left: env(safe-area-inset-left, 0px);
  --thumb-main: 92px;
  --thumb-small: 68px;
  --thumb-stick: 132px;
  overscroll-behavior: none;
}
.touch-layout body { height: 100dvh; overflow: hidden; padding: var(--app-safe-top) var(--app-safe-right) var(--app-safe-bottom) var(--app-safe-left); }
.touch-layout #app { position: relative; width: 100%; max-width: none; height: calc(100dvh - var(--app-safe-top) - var(--app-safe-bottom)); padding: 0; overflow: hidden; }
.touch-layout #app { touch-action: none; }
.touch-layout .actions .action-button, .touch-layout .actions .action-button * { touch-action: none; }
.touch-layout .actions .action-button > * { pointer-events: none; }
.touch-layout .game-layout, .touch-layout .game-column, .touch-layout .world-frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-height: 0; padding: 0; margin: 0; border: 0; }
.touch-layout .world-frame { background: #171c1c; }
.touch-layout .quick-duties, .touch-layout footer, .touch-layout .brand, .touch-layout .movement-hint, .touch-layout .map-corner, .touch-layout .zoom-control { display: none !important; }
.touch-layout .masthead { position: absolute; inset: 12px 12px auto; height: 50px; min-height: 50px; display: flex; padding: 0; border: 0; z-index: 5; pointer-events: none; }
.touch-layout .calling { position: absolute; left: 0; top: 39px; margin: 0; padding: 4px 7px; max-width: calc(100% - 176px); gap: 6px; justify-content: flex-start; background: #17231edb; }
.touch-layout .calling strong { font: 13px var(--serif); white-space: nowrap; }
.touch-layout .calling .role-symbol { width: 17px; height: 21px; }
.touch-layout .calling #day-label { font-size: 9px; border: 0; padding: 0; white-space: nowrap; }
.touch-layout .header-actions { display: flex; align-items: flex-start; gap: 7px; margin-left: auto; pointer-events: auto; }
.touch-layout .header-actions #records-button, .touch-layout .header-actions #sound-button, .touch-layout .header-actions #help-button { display: none; }
.touch-layout .header-actions #mobile-duties, .touch-layout .header-actions #phone-map, .touch-layout .header-actions #pause-button {
  position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px;
  width: 49px; height: 50px; min-width: 49px; min-height: 50px; padding: 5px; margin: 0;
  border: 1px solid #87957a; border-radius: 9px; background: #1b2a23ed; color: #eee1bf; font-size: 9px;
}
.touch-layout .header-actions svg { width: 23px; height: 23px; }
.touch-layout .header-actions .phone-icon { height: 23px; }
.touch-layout #phone-duty-count { position: absolute; right: -4px; top: -5px; font: bold 9px Arial; background: #cdb07a; color: #1d281f; border-radius: 4px; padding: 2px 4px; }
.touch-layout #phone-map[aria-pressed="true"] { background: #526047; border-color: #e0c88f; }
.touch-layout .phone-only, .touch-layout .phone-icon, .touch-layout .phone-label { display: block; }
.touch-layout .desktop-label { display: none; }
.touch-layout .statusbar { position: absolute; top: 12px; left: 12px; width: min(340px, calc(100% - 190px)); height: 27px; min-height: 27px; display: block; padding: 4px 7px; margin: 0; z-index: 4; background: #17231eeb; border: 1px solid #819078; }
.touch-layout .faith-title { position: relative; display: flex; justify-content: space-between; align-items: center; height: 17px; gap: 5px; font-size: 9px; z-index: 1; }
.touch-layout .faith-title strong { font-size: 10px; }
.touch-layout .faith-track { position: absolute; inset: 3px; max-width: none; height: auto; opacity: .35; }
.touch-layout .brother-count { display: none; }
.touch-layout .map-heading { top: auto; left: 50%; bottom: 18px; transform: translateX(-50%); padding: 5px 9px; max-width: calc(100% - 410px); text-align: center; font: 16px var(--serif); letter-spacing: .3px; background: #17231edb; }
.touch-layout .map-heading .map-mark { display: none; }
.touch-layout .world-hint { left: 175px; right: 205px; bottom: 56px; max-width: none; width: auto; text-align: center; font-size: 11px; line-height: 1.45; padding: 5px 8px; background: #17231edb; pointer-events: none; }
.touch-layout .journey-bar { position: absolute; top: 86px; left: 12px; width: min(370px, calc(100% - 190px)); display: flex; gap: 5px; z-index: 4; pointer-events: none; }
.touch-layout .route-status, .touch-layout .alert-banner { margin: 0; padding: 5px 7px; min-height: 44px; font-size: 11px; line-height: 1.4; border: 1px solid #8d825e; pointer-events: auto; }
.touch-layout .route-status button, .touch-layout .alert-banner button { min-height: 36px; min-width: 48px; padding: 5px; font-size: 10px; }
.touch-layout .toast { bottom: 164px; padding: 10px 14px; font-size: 12px; max-width: min(400px, calc(100% - 36px)); }
.touch-joystick, .touch-joystick * { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.touch-layout .touch-joystick { display: block; position: absolute; left: 18px; bottom: 18px; width: var(--thumb-stick); height: var(--thumb-stick); padding: 0; border: 1px solid #aeb59b; border-radius: 50%; background: #233429ba; z-index: 5; transform: none; transition: border-color .12s, background .12s; }
.touch-layout .touch-joystick:active { transform: none; }
.touch-layout .touch-joystick.is-held { border-color: #e9ca8b; background: #354937d9; }
.joystick-stick { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; border: 1px solid #ebdbb7; border-radius: 50%; background: #bfbda1; transform: translate(calc(-50% + var(--stick-x, 0px)), calc(-50% + var(--stick-y, 0px))); pointer-events: none; }
.touch-layout .actionbar, .touch-layout .actions { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; min-height: 0; pointer-events: none; z-index: 4; }
.touch-layout .actions .action-button {
  position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: var(--thumb-small); height: var(--thumb-small); min-width: 0; min-height: 0; max-width: none; padding: 7px;
  border: 1px solid #a7b294; border-radius: 18px; background: #213228ed; color: #eee3c9;
  font: bold 10px/1.15 Arial; text-align: center; pointer-events: auto; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
.touch-layout .actions .action-button svg { width: 27px; height: 27px; stroke-width: 1.65; }
.touch-layout .actions .action-button > span:first-child { display: flex; }
.touch-layout .actions .action-button:disabled { opacity: .57; background: #1b2822ed; border-color: #78876d; }
.touch-layout .actions .action-button:active:not(:disabled) { transform: none; border-color: #fff0c8; }
.touch-layout .actions .action-button kbd { display: none; }
.touch-layout .actions #interact-button { right: 18px; bottom: 18px; width: var(--thumb-main); height: var(--thumb-main); border-radius: 24px; }
.touch-layout .actions #interact-button:enabled { color: #fff0c8; background: #596343; border-color: #e4ca8c; }
.touch-layout #app[data-role="heretic"] #interact-button:enabled { background: #6d4230; border-color: #e6b393; }
.touch-layout .actions #interact-button svg { width: 34px; height: 34px; }
.touch-layout .actions #interact-label { font: bold 13px/1.1 Arial; }
.touch-layout .actions #interact-detail { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 10px/1.2 Arial; color: inherit; }
.touch-layout .actions #report-button { right: 125px; bottom: 18px; }
.touch-layout .actions #report-button:enabled { background: #634b35; border-color: #e4c38f; }
.touch-layout .actions #ability-button { right: 30px; bottom: 125px; }
.touch-layout .actions #passage-button, .touch-layout .actions #ledger-button, .touch-layout .actions #council-button { right: 125px; bottom: 101px; }
.touch-layout .actions #council-button { display: none; }
.touch-layout #app[data-near-bell="true"] #council-button { display: flex; }
.touch-layout #app[data-alive="false"] #report-button, .touch-layout #app[data-alive="false"] #ability-button { display: none; }
.touch-layout #app[data-map-open="true"] .actions, .touch-layout #app[data-map-open="true"] .touch-joystick, .touch-layout #app[data-map-open="true"] .world-hint { display: none; }
.touch-layout #app[data-map-open="true"] .map-heading { max-width: 80%; }
.touch-layout .overlay { top: var(--app-safe-top); right: var(--app-safe-right); bottom: var(--app-safe-bottom); left: var(--app-safe-left); padding: 12px; }
.touch-layout .dialog { max-height: 100%; overscroll-behavior: contain; }
.touch-layout .dialog input, .touch-layout .dialog select, .touch-layout .dialog textarea { font-size: 16px; }
.touch-layout .dialog .close { width: 44px; height: 44px; }
.phone-menu-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 20px; }
.phone-menu-tools button { min-height: 48px; padding: 10px; }
.phone-view-controls { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 16px 0; color: #c5cab5; font-size: 12px; }
.phone-view-controls button { min-width: 48px; min-height: 44px; padding: 8px; }
@media (orientation: portrait) {
  .touch-layout { --thumb-main: 90px; --thumb-small: 62px; --thumb-stick: 124px; }
  .touch-layout .calling { top: 38px; flex-wrap: wrap; gap: 2px 5px; }
  .touch-layout .calling #day-label { display: none; }
  .touch-layout .journey-bar { width: calc(100% - 24px); }
  .touch-layout .map-heading { bottom: 24px; max-width: calc(100% - 274px); padding: 4px; font-size: 12px; }
  .touch-layout .world-hint { bottom: 160px; left: 15px; right: 100px; font-size: 11px; text-align: left; }
  .touch-layout .actions #report-button { right: 32px; bottom: 122px; }
  .touch-layout .actions #ability-button { right: 122px; bottom: 24px; }
  .touch-layout .actions #passage-button, .touch-layout .actions #ledger-button, .touch-layout .actions #council-button { right: 32px; bottom: 196px; }
  .touch-layout #app[data-role="heretic"][data-alive="true"] .map-heading { bottom: 110px; }
  .touch-layout .toast { bottom: 276px; }
}
@media (max-width: 360px) and (orientation: portrait) {
  .touch-layout { --thumb-stick: 112px; --thumb-main: 84px; --thumb-small: 58px; }
  .touch-layout .header-actions { gap: 5px; }
  .touch-layout .header-actions #mobile-duties, .touch-layout .header-actions #phone-map, .touch-layout .header-actions #pause-button { width: 45px; min-width: 45px; }
  .touch-layout .statusbar { width: calc(100% - 177px); }
  .touch-layout .faith-title { font-size: 8px; }
  .touch-layout .touch-joystick { left: 12px; }
  .touch-layout .actions #interact-button { right: 12px; }
  .touch-layout .actions #ability-button { right: 110px; }
  .touch-layout .map-heading { max-width: calc(100% - 230px); }
}
@media (max-height: 430px) and (orientation: landscape) {
  .touch-layout { --thumb-stick: 112px; --thumb-main: 82px; --thumb-small: 60px; }
  .touch-layout .masthead { inset: 9px 12px auto; }
  .touch-layout .statusbar { top: 9px; }
  .touch-layout .touch-joystick { bottom: 12px; }
  .touch-layout .actions #interact-button { bottom: 12px; }
  .touch-layout .actions #report-button { right: 114px; bottom: 12px; }
  .touch-layout .actions #ability-button { right: 29px; bottom: 106px; }
  .touch-layout .actions #passage-button, .touch-layout .actions #ledger-button, .touch-layout .actions #council-button { right: 114px; bottom: 84px; }
  .touch-layout .world-hint { left: 150px; right: 190px; bottom: 44px; }
  .touch-layout .map-heading { bottom: 12px; font-size: 13px; }
  .touch-layout .toast { bottom: 126px; }
}
/* Sabotage shows its cooldown under the label, as Influence does. */
.touch-layout .actions #ability-label small { display: block; font: 10px/1.2 Arial; opacity: .85; }
.touch-layout .actions #ability-button.cooling { background: #1b2822ed; border-color: #78876d; color: #c9c3ad; }