/* Touch HUD review, 2026-10-14. Keep the existing game theme and scale preference. */
body.touch {
  --ui-touch-target: 44px;
  --ui-touch-compact: 32px;
  --ui-rail-base: 1;
}
@media (max-height: 520px) { body.touch { --ui-rail-base: .8; } }
@media (max-height: 420px) { body.touch { --ui-rail-base: .85; } }

/* Six primary controls stay in one row. Extras wrap inside the playfield. */
body.touch .rail.left:not(.folded) {
  flex-flow: row wrap;
  width: calc(300px * var(--ui-inv, 1) / var(--ui-rail-base));
  max-width: calc(100vw * var(--ui-inv, 1) - 28px);
  gap: calc(4px * var(--ui-inv, 1) / var(--ui-rail-base));
  padding: calc(4px * var(--ui-inv, 1) / var(--ui-rail-base));
}
body.touch .rail.left:not(.less):not(.folded) {
  pointer-events: auto;
  max-height: calc((100dvh - 150px) * var(--ui-inv, 1));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--glass-soft, rgba(12, 18, 34, .94));
  z-index: 9;
}
body.touch .rail.left .round,
body.touch .rail.left .rail-more {
  flex: 0 0 auto;
  width: calc(var(--ui-touch-target) * var(--ui-inv, 1) / var(--ui-rail-base));
  height: calc(var(--ui-touch-target) * var(--ui-inv, 1) / var(--ui-rail-base));
  min-width: 0;
  margin: 0;
  align-self: auto;
}
body.touch .rail.left .round .rail-label {
  font-size: calc(11px * var(--ui-inv, 1) / var(--ui-rail-base));
  line-height: 1.1;
}
body.touch.hud-slim .rail.left:not(.folded) {
  flex-flow: row wrap;
  max-height: calc((100dvh - 150px) * var(--ui-inv, 1));
}
body.touch.hud-slim .rail.left:not(.less) .rail-extra .rail-label { display: block; }
body.touch .rail.left .round .ico {
  width: calc(22px * var(--ui-inv, 1) / var(--ui-rail-base));
  height: calc(22px * var(--ui-inv, 1) / var(--ui-rail-base));
  background-size: contain;
}

/* Tabs scroll instead of compressing Thai words into narrow slivers. */
body.touch .chat-panel:not(.gone) { position: absolute; }
body.touch .chat-tabs {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  scrollbar-width: thin;
  padding-right: 0;
  width: calc(100% - 88px * var(--ui-inv, 1));
  gap: calc(3px * var(--ui-inv, 1));
}
body.touch .chat-tabs > button {
  flex: 0 0 auto;
  min-width: calc(var(--ui-touch-target) * var(--ui-inv, 1));
  min-height: calc(var(--ui-touch-target) * var(--ui-inv, 1));
  font-size: calc(12px * var(--ui-inv, 1));
  padding: 0 calc(7px * var(--ui-inv, 1));
  white-space: nowrap;
}
body.touch .ui-chat-tools {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  width: calc(88px * var(--ui-inv, 1));
  z-index: 2;
}
body.touch .ui-chat-tools > button {
  position: static;
  flex: 0 0 calc(var(--ui-touch-target) * var(--ui-inv, 1));
  min-width: calc(var(--ui-touch-target) * var(--ui-inv, 1));
  height: calc(var(--ui-touch-target) * var(--ui-inv, 1));
  min-height: calc(var(--ui-touch-target) * var(--ui-inv, 1));
  background: #18233b;
  font-size: calc(15px * var(--ui-inv, 1));
}
body.touch .chat-panel.gone .chat-tabs { display: none; }
body.touch .chat-panel.gone .ui-chat-tools { top: auto; bottom: 0; right: 0; width: auto; }
body.touch .chat-panel.gone .ui-chat-tools .chat-say { display: none; }
body:not(.touch) .ui-chat-tools { display: none; }
body.touch .chat-log { font-size: calc(12px * var(--ui-inv, 1)); }

/* The minimap is deliberately scaled down; its controls keep useful hit areas. */
body.touch .mm-dock { --ui-mm-base: 1; }
@media (max-height: 520px) {
  body.touch .mm-dock { --ui-mm-base: .72; }
}
body.touch .mm-world,
body.touch .mm-big-btn {
  min-height: calc(38px * var(--ui-inv, 1) / var(--ui-mm-base) / var(--mm-fit, 1));
  height: calc(38px * var(--ui-inv, 1) / var(--ui-mm-base) / var(--mm-fit, 1));
  font-size: calc(12px * var(--ui-inv, 1) / var(--ui-mm-base) / var(--mm-fit, 1));
}
body.touch .mm-big-btn {
  width: calc(38px * var(--ui-inv, 1) / var(--ui-mm-base) / var(--mm-fit, 1));
  flex: none;
}
body.touch .mm-toggle {
  width: calc(var(--ui-touch-compact) * var(--ui-inv, 1) / var(--ui-mm-base) / var(--mm-fit, 1));
  height: calc(var(--ui-touch-compact) * var(--ui-inv, 1) / var(--ui-mm-base) / var(--mm-fit, 1));
}
body.touch .mm-head { padding-right: calc(34px * var(--ui-inv, 1) / var(--ui-mm-base) / var(--mm-fit, 1)); }
body.touch .ch-menu {
  box-sizing: border-box;
  min-width: var(--ui-channel-min-w, calc(160px * var(--ui-inv, 1) / var(--ui-mm-base, 1) / var(--mm-fit, 1)));
  max-height: var(--ui-channel-max-h, calc(180px * var(--ui-inv, 1) / var(--ui-mm-base, 1) / var(--mm-fit, 1)));
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
body.touch .ch-menu button {
  flex: none;
  min-height: var(--ui-channel-target, calc(44px * var(--ui-inv, 1) / var(--ui-mm-base, 1) / var(--mm-fit, 1)));
  font-size: var(--ui-channel-font, calc(12px * var(--ui-inv, 1) / var(--ui-mm-base, 1) / var(--mm-fit, 1)));
}
body.touch .ch-menu-head,
body.touch .ch-menu button small { font-size: var(--ui-channel-font, 12px); }
body.touch .ch-chip {
  min-width: calc(44px * var(--ui-inv, 1) / var(--ui-mm-base, 1) / var(--mm-fit, 1));
  min-height: calc(32px * var(--ui-inv, 1) / var(--ui-mm-base, 1) / var(--mm-fit, 1));
  font-size: calc(12px * var(--ui-inv, 1) / var(--ui-mm-base, 1) / var(--mm-fit, 1));
}

/* On short phones quest progress occupies the gap above the tools, not combat controls. */
body.touch.ui-tight-hud #questTracker.ui-quest-compact {
  left: calc(12px * var(--ui-inv, 1) + var(--safe-l, 0px)) !important;
  right: auto !important;
  top: var(--ui-compact-quest-top) !important;
  width: calc(292px * var(--ui-inv, 1)) !important;
  max-height: none !important;
  overflow: hidden !important;
}
body.touch.ui-tight-hud .rail.left { top: var(--ui-compact-menu-top) !important; }
body.touch.ui-tight-hud .chat-log { max-height: min(72px, var(--ui-short-chat-log-max, 72px)); }
body.touch.ui-tight-hud #questTracker.ui-quest-compact .qt-body { display: none; }
body.touch.ui-tight-hud #questTracker.ui-quest-compact .qt-head > button {
  min-height: calc(32px * var(--ui-inv, 1));
  font-size: calc(12px * var(--ui-inv, 1));
}
body.touch.ui-tight-hud #questTracker.ui-quest-compact .qt-fold {
  min-width: calc(32px * var(--ui-inv, 1));
}