[data-touch-control] { touch-action: manipulation; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
#hp-fill, #heat-fill, #charge-fill, #enemy-health-fill, #intent-fill { width: 100%; transform-origin: left center; will-change: transform; }
.combat-timeline { display: flex; gap: .5rem; list-style: none; margin: .4rem 0 0; padding: 0; overflow: auto; scrollbar-width: thin; font: 9px/1.4 monospace; color: #8d9b9d; }
.combat-timeline li { flex: 0 0 auto; padding: .25rem .35rem; border-left: 2px solid #444c4e; }
.combat-timeline li[aria-current] { color: #eabc64; border-color: #eabc64; }
.node.hazard { outline: 1px solid #f4804b; outline-offset: -4px; }
.node.hazard::after { content: '⚠'; position: absolute; right: 4px; top: 2px; color: #f4804b; font-size: 10px; }
.battery-low #system-state::after { content: ' · LOW BATTERY'; color: #eabc64; }
@media (pointer: coarse) {
  .icon-button { min-width: 44px; min-height: 44px; }
  .primary-button, .secondary-button { min-height: 48px; }
  .system-dialog input { font-size: 16px; }
}
@media (max-width: 420px) {
  .combat-timeline { font-size: 8px; gap: .2rem; }
  .combat-timeline li { max-width: 48%; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  #hp-fill, #heat-fill, #charge-fill, #enemy-health-fill, #intent-fill { transition: none; }
}