/* Touch controls are opt-in. A coarse pointer on a desktop monitor never changes the desktop HUD. */
#touch { display: none !important; }
.phone-ui #touch { display: block !important; position: fixed; inset: 0; z-index: 20; pointer-events: none; touch-action: none; }
.phone-ui #touch button, .phone-ui #stick { pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.phone-ui button, .phone-ui [role="button"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.phone-ui #slots, .phone-ui #slots * { pointer-events: auto; }
.phone-ui #stick { position: absolute; left: clamp(92px, 15vw, 190px); bottom: clamp(16px, 5vh, 42px); width: clamp(104px, 24vh, 142px); height: clamp(104px, 24vh, 142px); border: 2px solid #ffffff45; border-radius: 50%; background: radial-gradient(circle, #9de9d325 0 34%, #182b32a8 36% 100%); }
.phone-ui #stick i { position: absolute; width: 38%; height: 38%; left: 31%; top: 31%; border-radius: 50%; background: #e9f4e9bb; box-shadow: 0 3px 12px #0009; }
.phone-ui #fire { position: absolute; right: clamp(18px, 4vw, 60px); bottom: clamp(20px, 6vh, 48px); width: clamp(74px, 18vh, 110px); height: clamp(74px, 18vh, 110px); padding: 0; border-radius: 50%; border: 3px solid #ffdf7799; background: radial-gradient(circle, #ef7050dd, #9d2c3dcc); font-size: clamp(9px, 2.2vh, 14px); }
.phone-ui #touchActions { position: absolute; right: calc(clamp(18px, 4vw, 60px) + clamp(74px, 18vh, 110px) + 12px); bottom: clamp(20px, 6vh, 48px); display: grid; grid-template-columns: repeat(2, clamp(40px, 10vh, 58px)); gap: clamp(7px, 1.7vh, 12px); }
.phone-ui #touchActions button { width: clamp(40px, 10vh, 58px); height: clamp(40px, 10vh, 58px); padding: 0; border-radius: 50%; border: 2px solid #9ce8c188; background: #152a35dd; font-size: clamp(8px, 1.8vh, 12px); }
.phone-ui #touchJump { grid-column: 2; }
.phone-ui #touchInteract { grid-column: 2; }
.phone-ui #touchReload {grid-column:1;grid-row:2}
.phone-ui #touchAim {grid-column:1;grid-row:3}
.phone-ui #touchJump {grid-column:2;grid-row:3}
.phone-ui #vitals { left: 12px; bottom: clamp(16px, 5vh, 42px); gap: 6px; transform: none; transform-origin: bottom left; }
.phone-ui .meter { height: calc(4 * clamp(38px, 10vh, 52px) + 15px); width: 10px; }
.phone-ui #slots { margin-left: 5px; gap: 5px; }
.phone-ui .weapon-slot { width: clamp(38px, 10vh, 52px); height: clamp(38px, 10vh, 52px); }
.phone-ui #teamScores { top: clamp(56px, 13vh, 100px); left: 12px; transform: scale(var(--phone-score-scale, .39)); transform-origin: top left; }
.phone-ui #hud header { left: clamp(12px, 3vw, 30px); top: 10px; }
.phone-ui #hud header b { font-size: clamp(8px, 2vh, 12px); }
.phone-ui .time { font-size: clamp(18px, 5vh, 30px); }
.phone-ui #clock img { width: clamp(28px, 7vh, 45px) !important; height: clamp(28px, 7vh, 45px) !important; }
.phone-ui #interactHint { bottom: 31%; transform: translateX(-50%) scale(var(--phone-prompt-scale, .65)); transform-origin: bottom center; }
.phone-ui #flagTimer { top: 14%; transform: translate(-50%, -100%) scale(var(--phone-prompt-scale, .65)); }
.phone-ui #orientationLock { display: grid; place-content: center; gap: 12px; position: fixed; inset: 0; z-index: 10000; background: #071116; color: #f4f4e8; text-align: center; padding: 24px; pointer-events: all; }
#orientationLock strong { font: 900 28px 'Trebuchet MS', sans-serif; letter-spacing: .08em; }
#orientationLock span { font: 16px 'Trebuchet MS', sans-serif; color: #a8c8be; }
.phone-portrait #world, .phone-portrait #hud { visibility: hidden !important; }
.phone-ui #tabMenu { width: min(700px, 92vw); max-height: 86vh; }
.phone-ui #menu { overflow-y: auto; touch-action: pan-y; }
.phone-ui #hud #touch{pointer-events:none}
.phone-ui #touchAim.active{background:#3c8e65;border-color:#e3ffb4}
.phone-ui .weapon-slot .slot-num{font-size:11px;left:2px;top:0}
.phone-ui .weapon-slot .slot-ammo{font-size:10px;right:2px;bottom:1px}
.phone-ui .weapon-slot img{padding:5px 2px 10px}
.phone-ui #hud .toolbar{top:10px;right:max(12px,env(safe-area-inset-right));z-index:25}
.phone-ui #tabMenu,.phone-ui #adminPanel{z-index:50;touch-action:pan-y;max-height:90dvh}
.phone-ui #tabMenu:before{content:'Tap MENU again to close';display:block;text-align:center;font:11px Arial;padding:8px;color:#a9c3cc}
.phone-ui #capturePrompt{font-size:14px;bottom:33%;max-width:45vw;text-align:center}
.phone-ui #menu{place-items:start center;padding:16px 20px 65px!important;touch-action:pan-y}
.phone-ui #menu *{touch-action:pan-y}
.phone-ui #menu .login-panel{width:min(480px,86vw);padding:18px 24px}
.phone-ui #menu h1{font-size:30px;margin-bottom:14px}
.phone-ui #menu .mode-card{height:clamp(145px,44vh,280px)}
.phone-ui #menu .mode-cards{gap:10px}
.phone-ui #menu .card-copy{left:12px;bottom:12px;right:8px}
.phone-ui #menu .card-copy p{display:none}
.phone-ui #menu .card-copy strong{font-size:clamp(18px,5vh,28px)}
.phone-ui #menu .card-copy small{font-size:8px}
.phone-ui #menu .mode-top{margin-bottom:12px}
.phone-ui #menu .mode-top h2{font-size:26px}
.phone-ui #menu .mode-options{margin-top:12px;padding:10px;gap:8px}
.phone-ui #menu .choice{min-width:100px;padding:8px;font-size:12px}
.phone-ui #menu #start{min-width:100px;padding:10px;font-size:16px}
.phone-ui #menu .back-to-website{font-size:11px;padding:9px;bottom:8px;left:12px}
.phone-ui #matchBanner{top:8px;font-size:12px;padding:6px 10px;max-width:40vw}
.phone-ui #matchBanner small{font-size:10px}
.phone-ui #leaveMatch{bottom:auto;top:50px;right:12px;font-size:9px;padding:8px;z-index:25}
.phone-ui #spectatorPanel{bottom:12px;font-size:11px;padding:8px;max-width:45vw}
.phone-ui .loading-card{padding:16px;max-height:90dvh;overflow:auto}
.phone-ui .loading-card h2{font-size:24px;margin:10px 0}
.phone-ui .loading-card p{font-size:12px}