html.touch-controls, .touch-controls body, .touch-controls canvas { touch-action:none; overscroll-behavior:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
#mic-toggle { position:fixed;top:calc(14px + env(safe-area-inset-top));left:calc(14px + env(safe-area-inset-left));z-index:25;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 11px;border:1px solid #fffae84d;border-radius:999px;background:#132a35cf;color:#fff8de;font:600 12px/1 system-ui,sans-serif;letter-spacing:.3px;cursor:pointer;pointer-events:auto;touch-action:manipulation;user-select:none;-webkit-user-select:none;box-shadow:0 2px 10px #0004;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .15s,border-color .15s,color .15s,box-shadow .15s; }
#mic-toggle:hover { background:#1a3846e6;border-color:#fffae880; }
#mic-toggle svg { width:14px;height:14px;fill:currentColor;flex-shrink:0; }
#mic-toggle.muted { background:#2a1d24cc;border-color:#ff9b9b59;color:#ffd2d2; }
#mic-toggle.speaking { border-color:#7de4bc;box-shadow:0 0 0 2px #7de4bc44,0 2px 10px #0004;color:#abffd6; }
#mobile-controls { position:fixed;inset:0;z-index:10;pointer-events:none;color:#fff8de;font:13px system-ui,sans-serif;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.mobile-hud { position:absolute;top:calc(12px + env(safe-area-inset-top));left:14px;right:14px;padding:12px 14px;background:#132a35c9;border-radius:14px;line-height:1.4; }
.mobile-hud strong { letter-spacing:2px;font-size:16px; }.mobile-hud p { margin:7px 0 0;font-size:12px;max-width:90%; }#mobile-score { float:right;font-size:19px;font-weight:700; }
.touch-stick { position:absolute;width:140px;height:140px;bottom:calc(36px + env(safe-area-inset-bottom));border:2px solid #fffae845;border-radius:50%;background:#152d392b;box-shadow:0 3px 20px #0002;pointer-events:auto;touch-action:none;color:#fff8de;display:grid;place-items:center;padding:0; }
#mobile-move {left:40px;}#mobile-look {right:40px;}.stick-knob { width:57px;height:57px;border-radius:50%;background:#faf4dd3d;border:1px solid #ffffff45;pointer-events:none; }
.touch-stick b {position:absolute;bottom:12px;font-size:10px;letter-spacing:1px;pointer-events:none;}.touch-stick.engaged {border-color:#abffd67a;background:#1a3b4345;}.touch-stick.engaged .stick-knob {background:#acffd766;}
#mobile-action {right:28px;bottom:calc(196px + env(safe-area-inset-bottom));width:96px;height:96px;background:#e6bd654d;color:#21313a;border-color:#fff1bc70;}
#mobile-action .stick-knob {width:38px;height:38px;background:#fff1bc3d;border-color:#ffffff45;}
#mobile-action b {font-size:10px;letter-spacing:0;bottom:14px;}#mobile-action.charging {background:#7de4bc55;border-color:#d5ffeb80;}
#mobile-punch {left:34px;bottom:calc(196px + env(safe-area-inset-bottom));width:68px;height:68px;background:#d9434366;color:#ffe5e5;border-color:#ff949488;}
#mobile-punch .stick-knob {width:28px;height:28px;background:#ff8a8a52;border-color:#ffd0d066;}
#mobile-punch.engaged {background:#f0484888;border-color:#ffc2c2aa;}
#mobile-punch.engaged .stick-knob {background:#ffb3b388;}
.mobile-crosshair {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:24px;text-shadow:0 1px 4px #000;}
#mobile-power {position:absolute;left:22px;right:150px;bottom:calc(183px + env(safe-area-inset-bottom));font-size:10px;letter-spacing:.4px;text-shadow:0 1px 3px #000;}
#mobile-power>div {height:10px;margin-top:7px;background:#132a35cc;border:1px solid #fffae86b;border-radius:8px;overflow:hidden;}#mobile-power i {display:block;width:0;height:100%;background:#9bffd4;}
#mobile-recover {position:absolute;top:calc(128px + env(safe-area-inset-top));right:14px;background:#fff0be;color:#21313a;padding:12px 20px;border:0;border-radius:12px;font-weight:bold;pointer-events:auto;}
[hidden] {display:none!important;}
@media(max-height:520px) { .touch-stick {width:117px;height:117px;bottom:18px;}#mobile-action {bottom:150px;width:80px;height:80px;}#mobile-punch {bottom:150px;width:62px;height:62px;}#mobile-power {bottom:132px;} .mobile-hud{max-width:350px;} }

/* Keep gameplay feedback minimal; input buttons remain available. */
.mobile-hud, .mobile-crosshair, #mobile-power-label {display:none;}

html.touch-controls, .touch-controls body {width:100%;height:100%;height:100dvh;margin:0;}
:fullscreen {width:100%;height:100%;background:#172b34;}
#landscape-hint {position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#172b34;color:#faf5dd;font:16px system-ui;text-align:center;touch-action:none;}
#fullscreen-open {padding:18px 30px;border:1px solid #ffffff65;border-radius:14px;background:#faf5dd;color:#172b34;font:600 18px system-ui;touch-action:manipulation;}
@media(orientation:landscape) {
  #mobile-move {left:calc(40px + env(safe-area-inset-left));}
  #mobile-look {right:calc(40px + env(safe-area-inset-right));}
  #mobile-action {right:calc(172px + env(safe-area-inset-right));bottom:calc(26px + env(safe-area-inset-bottom));width:80px;height:80px;}
  #mobile-punch {left:calc(172px + env(safe-area-inset-left));bottom:calc(26px + env(safe-area-inset-bottom));width:62px;height:62px;}
  #mobile-power {left:35%;right:35%;bottom:calc(30px + env(safe-area-inset-bottom));}
  #mobile-recover {top:calc(18px + env(safe-area-inset-top));right:calc(18px + env(safe-area-inset-right));}
}

#action-modes {position:fixed;top:calc(14px + env(safe-area-inset-top));right:calc(14px + env(safe-area-inset-right));z-index:25;display:flex;gap:8px;}
#action-modes button {width:48px;height:50px;position:relative;display:grid;place-items:center;border:1px solid #fffae84d;border-radius:12px;background:#132a35cf;color:#fff8de;cursor:pointer;touch-action:manipulation;}
#action-modes svg {width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
#action-modes button[aria-pressed="true"] {background:#35634fe8;color:#d5ffeb;border-color:#9bffd4;box-shadow:0 0 0 1px #9bffd444;}
.mode-key {position:absolute;right:4px;bottom:2px;font:600 10px system-ui;}
.touch-modes .mode-key {display:none;}
@media(orientation:landscape) {#mobile-recover {top:calc(76px + env(safe-area-inset-top));}}