/* Touch controls have their own layout; the uncluttered desktop HUD stays intact. */
.mobile-controls, .mobile-guide { display: none; }
.mobile-controls[hidden], .mobile-controls [hidden] { display: none !important; }
body.touch-mode { overscroll-behavior: none; touch-action: none; }
body.touch-mode #game, body.touch-mode #game canvas { height: 100dvh; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
body.touch-mode .mobile-controls { display: block; position: fixed; inset: 0; z-index: 14; pointer-events: none; user-select: none; -webkit-user-select: none; }
.mobile-controls button, .mobile-stick { pointer-events: auto; touch-action: none; -webkit-user-select: none; user-select: none; }
.mobile-controls button { min-width: 44px; min-height: 44px; padding: 7px 8px; border: 1px solid #9a7254a0; border-radius: 12px; background: #f1e8cfed; color: #334c55; font: 600 13px system-ui,sans-serif; box-shadow: 0 3px 0 #76553f60; }
.mobile-controls button:disabled { opacity: .44; }
.mobile-controls button.is-down, .mobile-controls button[aria-pressed="true"] { background: #456d4f; color: #fff6df; box-shadow: inset 0 2px 5px #203f3940; }
.mobile-topbar { position: absolute; top: max(12px,env(safe-area-inset-top)); right: max(72px,calc(env(safe-area-inset-right) + 68px)); display: flex; gap: 6px; }
.mobile-topbar button { font-size: 12px; }
.mobile-loadout { position: absolute; top: max(66px,calc(env(safe-area-inset-top) + 54px)); right: max(12px,env(safe-area-inset-right)); width: 230px; padding: 10px; border: 1px solid #9a7254; border-radius: 14px; background: #f1e8cff5; box-shadow: 0 8px 28px #203f3940; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; pointer-events: auto; z-index: 2; }
.mobile-stick { position: absolute; left: max(16px,env(safe-area-inset-left)); bottom: max(20px,calc(env(safe-area-inset-bottom) + 12px)); width: 116px; height: 116px; border: 2px solid #f1e8cfbb; border-radius: 50%; background: #334c5559; box-shadow: inset 0 0 0 12px #f1e8cf12,0 3px 14px #203f3920; }
.stick-knob { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; transform: translate(-50%,-50%); border-radius: 50%; background: #f1e8cfdd; border: 1px solid #fff8; box-shadow: 0 3px 8px #203f3950; }
.stick-mark { position: absolute; color: #fff6dfaa; font: 11px system-ui; }
.stick-mark.north { top: 5px; left: 50%; transform: translateX(-50%); }
.stick-mark.south { bottom: 5px; left: 50%; transform: translateX(-50%); }
.stick-mark.west { left: 5px; top: 50%; transform: translateY(-50%); }
.stick-mark.east { right: 5px; top: 50%; transform: translateY(-50%); }
.stick-label { position: absolute; top: 43px; left: 0; right: 0; text-align: center; color: #334c55; font: 600 12px system-ui; pointer-events: none; }
.mobile-sprint { position: absolute; left: max(45px,calc(env(safe-area-inset-left) + 29px)); bottom: max(148px,calc(env(safe-area-inset-bottom) + 140px)); }
.mobile-actions { position: absolute; right: max(12px,env(safe-area-inset-right)); bottom: max(16px,calc(env(safe-area-inset-bottom) + 8px)); display: grid; grid-template-columns: repeat(2,56px); gap: 8px; }
.mobile-actions button { height: 48px; padding: 4px; font-size: 12px; }
.mobile-fire { position: absolute; right: max(12px,env(safe-area-inset-right)); bottom: max(188px,calc(env(safe-area-inset-bottom) + 180px)); width: 66px; height: 66px; border-radius: 50% !important; background: #d76645ed !important; color: #fff6df !important; font-size: 16px !important; }
.mobile-fire.is-down { background: #a8442c !important; }
.mobile-ride { position: absolute; right: max(86px,calc(env(safe-area-inset-right) + 74px)); bottom: max(198px,calc(env(safe-area-inset-bottom) + 190px)); width: 46px; }
.mobile-crosshair { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: #fffce8; text-shadow: 0 1px 3px #243936,0 -1px 3px #243936; font: 22px system-ui; }
.mobile-activity { position: absolute; right: max(12px,env(safe-area-inset-right)); top: max(66px,calc(env(safe-area-inset-top) + 54px)); display: flex; gap: 8px; }
.mobile-controls[data-activity="piano"] > *, .mobile-controls[data-activity="billiards"] > :not(.mobile-activity) { display: none !important; }
body.touch-mode header { position: fixed; z-index: 15; top: max(12px,env(safe-area-inset-top)); right: max(12px,env(safe-area-inset-right)); left: auto; }
body.touch-mode #settings-open { width: 48px; height: 44px; min-width: 44px; padding: 4px; touch-action: manipulation; }
body.touch-mode .vitals { top: max(12px,env(safe-area-inset-top)); left: max(12px,env(safe-area-inset-left)); width: 144px; padding: 9px 10px; border-radius: 12px; }
body.touch-mode .vital-label, body.touch-mode .vital-label output { font-size: 10px; margin-bottom: 4px; }
body.touch-mode .vital + .vital { margin-top: 7px; }
body.touch-mode .vital-track { height: 6px; }
body.touch-mode .mapbox { position: fixed; top: max(98px,calc(env(safe-area-inset-top) + 86px)); left: max(12px,env(safe-area-inset-left)); bottom: auto; width: 102px; padding: 6px; border-radius: 9px; opacity: .90; }
body.touch-mode .maphead, body.touch-mode .maphead span { font-size: 9px; margin-bottom: 4px; }
body.touch-mode #map { width: 88px; height: auto; }
body.touch-mode #rifle-ammo { right: max(12px,env(safe-area-inset-right)) !important; bottom: max(266px,calc(env(safe-area-inset-bottom) + 258px)) !important; padding: 7px 9px !important; font-size: 12px !important; border-radius: 9px !important; }
body.touch-mode #resident-interact { display: none !important; }
body.touch-mode #resident-voice-panel { bottom: max(276px,calc(env(safe-area-inset-bottom) + 268px)); max-width: calc(100vw - 28px); width: max-content; }
body.touch-mode #resident-voice-caption { font-size: 12px; padding: 8px 12px; }
body.touch-mode #toast { z-index: 16; top: 32%; max-width: min(340px,calc(100vw - 30px)); font-size: 12px; }
body.touch-mode #modal { z-index: 60; padding: max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); touch-action: pan-y; }
body.touch-mode .settings-card { width: min(480px,100%); max-height: calc(100dvh - max(20px,env(safe-area-inset-top)) - max(20px,env(safe-area-inset-bottom))); padding: 22px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
body.touch-mode .settings-card button { min-height: 44px; touch-action: manipulation; }
body.touch-mode .settings-card .secondary { padding: 10px; }
body.touch-mode .mobile-guide { display: block; }
body.touch-mode .mobile-guide p { line-height: 1.7; font-size: 13px; }
body.touch-mode .guide { display: none; }
body.touch-mode .mobile-guide + h3 { display: none; }
body.touch-mode .piano-tools button { min-width: 44px; height: 44px; touch-action: manipulation; }
body.touch-mode .piano-hud { bottom: max(12px,env(safe-area-inset-bottom)); padding: 12px; }
body.touch-mode .piano-title small { display: none; }
body.touch-mode .piano-status { font-size: 11px; }
body.touch-mode .billiards-hud { padding: 10px 14px; bottom: max(12px,env(safe-area-inset-bottom)); width: min(320px,calc(100vw - 24px)); }
body.touch-mode .pool-score { margin-top: 4px; }
body.touch-mode .pool-score strong { font-size: 22px; }
body.touch-mode .pool-status { font-size: 11px; margin: 4px 0 6px; }
@media (orientation: landscape) {
 body.touch-mode #resident-voice-panel { bottom: max(16px,env(safe-area-inset-bottom)); max-width: calc(100vw - 350px); }
 body.touch-mode .piano-hud { width: min(810px,calc(100vw - 120px)); }
}
@media (max-height: 500px) and (orientation: landscape) {
 body.touch-mode .mapbox { width: 86px; padding: 4px; }
 body.touch-mode #map { width: 76px; }
 body.touch-mode .maphead { display: none; }
 body.touch-mode .mobile-stick { width: 106px; height: 106px; }
 body.touch-mode .mobile-sprint { bottom: max(136px,calc(env(safe-area-inset-bottom) + 128px)); }
 body.touch-mode .piano-keyboard, body.touch-mode .piano-key.white { height: 86px; }
 body.touch-mode .piano-key.is-pressed.white { height: 82px; }
 body.touch-mode .piano-key.black { height: 55px; }
 body.touch-mode .piano-key.is-pressed.black { height: 52px; }
 body.touch-mode .piano-head { margin-bottom: 8px; }
}
@media (max-width: 380px) and (orientation: portrait) {
 body.touch-mode .vitals { width: 126px; }
 body.touch-mode .mobile-topbar { gap: 4px; right: max(66px,calc(env(safe-area-inset-right) + 62px)); }
 body.touch-mode .mobile-topbar button { padding: 5px 6px; font-size: 11px; }
 body.touch-mode .piano-title { max-width: 90px; }
 body.touch-mode .piano-tools { gap: 3px; }
 body.touch-mode .piano-octave { min-width: 28px; }
}