html, body, canvas { touch-action: none; overscroll-behavior: none; }
#touch-ui { display: none; font-family: system-ui, sans-serif; color: #fff3d0; user-select: none; -webkit-user-select: none; }
@media (any-pointer: coarse) { #touch-ui { display: block; } }
html.touch-device #touch-ui { display: block; }
#touch-ui button { color: inherit; font: 700 clamp(9px, 1.4vw, 11px) system-ui, sans-serif; padding: 0 2px; border: 1px solid #e7d9a477; background: #182724b8; border-radius: 14px; touch-action: none; -webkit-tap-highlight-color: transparent; min-height: 44px; cursor: pointer; }
#touch-ui button.held { background: #e6b657df; color: #172522; border-color: #fff2c4; }
#touch-ui .pad { position: fixed; z-index: 20; bottom: max(12px, env(safe-area-inset-bottom)); display: grid; gap: 6px; pointer-events: none; }
#touch-ui .pad button { pointer-events: auto; }
#direction-pad { left: max(12px, env(safe-area-inset-left)); grid-template-columns: repeat(3, clamp(44px, 8vw, 62px)); grid-template-rows: repeat(3, clamp(44px, 8vw, 54px)); }
#direction-pad button { font-size: 22px; }
#direction-pad [data-bit="2"] { grid-column: 2; }
#direction-pad [data-bit="0"] { grid-column: 1; grid-row: 2; }
#direction-pad [data-bit="1"] { grid-column: 3; grid-row: 2; }
#direction-pad [data-bit="3"] { grid-column: 2; grid-row: 3; }
#action-pad { right: max(12px, env(safe-area-inset-right)); grid-template-columns: repeat(3, clamp(48px, 9vw, 70px)); grid-template-rows: repeat(2, 52px); }
#action-pad .fire { background: #a54532c9; grid-column: 3; grid-row: 1 / 3; font-size: 15px; }
#action-pad .jump { grid-column: 2; grid-row: 2; }
#mobile-toolbar { position: fixed; z-index: 21; top: max(6px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); display: flex; gap: 6px; }
#mobile-toolbar button { padding: 0 10px; }
html[data-game-state="playing"] #touch-play { display: none; }
#mobile-tip { position: fixed; z-index: 22; top: max(58px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: min(340px, calc(100vw - 32px)); box-sizing: border-box; padding: 12px 40px 12px 14px; background: #172521f2; border: 1px solid #d9b76c; border-radius: 12px; font-size: 13px; box-shadow: 0 4px 24px #0008; }
#mobile-tip strong { display: block; margin-bottom: 4px; color: #ffda84; }
#mobile-tip button { position: absolute; top: 0; right: 0; width: 38px; border: 0; background: transparent; font-size: 20px; }
#mobile-tip[hidden] { display: none; }
@media (max-height: 380px) { #direction-pad { grid-template-rows: repeat(3, 44px); } #action-pad { grid-template-rows: repeat(2, 46px); } }

@media (max-width: 360px) { #action-pad { grid-template-columns: repeat(3, 44px); } #action-pad button { font-size: 8px; } #action-pad .fire { font-size: 12px; } }

/* Menus have large canvas buttons; keep the combat pads out of their way. */
html:not([data-game-state="playing"]) #touch-ui .pad { display: none; }
#touch-play { display: none; }

html:not([data-game-state="playing"]) #mobile-tip { top: auto; bottom: max(12px, env(safe-area-inset-bottom)); right: max(12px, env(safe-area-inset-right)); left: auto; transform: none; width: min(280px, calc(100vw - 32px)); }