/* Touch play: four-way thumb controls, no text selection or long-press callouts while playing,
   and compact phone rails. Loaded after mobile-battle-v13.css. */
button,.touch-controls,.touch-controls *,.core-stick,.core-stick *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.is-playing,body.is-playing *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.is-playing input,body.is-playing textarea,body.is-playing [contenteditable],body.is-playing dialog,body.is-playing dialog *{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
.touch-controls,.touch-controls *{-webkit-tap-highlight-color:transparent}
.touch-actions [data-control]{transition:background .1s,opacity .14s,filter .08s}
.touch-actions [data-control][data-pressed=false]{transform:none}
.touch-actions [data-control][data-pressed=true]{transform:translateY(3px);filter:brightness(1.16);box-shadow:inset 0 0 0 2px #e2fff5,0 1px 0 #135367}
.touch-stick{position:relative;width:132px;height:132px;flex:none;border-radius:50%;border:3px solid #4f7c8b;background:radial-gradient(circle at 50% 40%,#2a6274 0%,#173f50 58%,#0f2f3e 100%);box-shadow:inset 0 0 0 4px #0b2a37,inset 0 8px 14px #0006,0 6px 0 #061d2b;touch-action:none;pointer-events:auto;color:#9fd9d0}
.touch-stick i{position:absolute;left:50%;top:50%;width:46%;height:46%;border-radius:50%;background:radial-gradient(circle at 38% 32%,#b9fff4 0%,#6be0d4 45%,#2fa8a5 100%);border:2px solid #d8fff6;box-shadow:0 6px 10px #0009,inset 0 -7px 0 #1f8082;transform:translate(-50%,-50%);pointer-events:none;transition:none}
.touch-stick .tick{position:absolute;width:0;height:0;border:6px solid transparent;opacity:.45;pointer-events:none;transition:opacity .1s}
.touch-stick .tick.up{top:7px;left:50%;transform:translateX(-50%);border-bottom-color:currentColor;border-top:0}
.touch-stick .tick.down{bottom:7px;left:50%;transform:translateX(-50%);border-top-color:currentColor;border-bottom:0}
.touch-stick .tick.left{left:7px;top:50%;transform:translateY(-50%);border-right-color:currentColor;border-left:0}
.touch-stick .tick.right{right:7px;top:50%;transform:translateY(-50%);border-left-color:currentColor;border-right:0}
.touch-stick[data-direction=up] .tick.up,.touch-stick[data-direction=down] .tick.down,.touch-stick[data-direction=left] .tick.left,.touch-stick[data-direction=right] .tick.right{opacity:1;color:#fff}
@media(prefers-reduced-motion:reduce){.touch-stick i{transition:none}}
/* Square travel tracks mirror the four legal directions. Transform updates stay immediate:
   animating right-to-up would draw a diagonal path between cardinal endpoints. */
.touch-stick,#core-ui .core-stick{border-radius:22%;background:linear-gradient(90deg,transparent 35%,#397a845e 35%,#397a845e 65%,transparent 65%),linear-gradient(transparent 35%,#397a845e 35%,#397a845e 65%,transparent 65%),linear-gradient(145deg,#22566a,#102f40);overscroll-behavior:contain}
.touch-stick i,#core-ui .core-stick i{border-radius:26%;transition:none}
#core-ui .core-stick span{opacity:.5;transition:opacity .1s,color .1s}
#core-ui .core-stick[data-direction=up] span:nth-of-type(1),#core-ui .core-stick[data-direction=left] span:nth-of-type(2),#core-ui .core-stick[data-direction=right] span:nth-of-type(3),#core-ui .core-stick[data-direction=down] span:nth-of-type(4){opacity:1;color:#fff}
.music-title{display:none}
.arena-status{display:none}
@media (orientation:landscape) and (max-height:600px), (orientation:landscape) and (pointer:coarse) and (hover:none){
 body.is-playing .touch-stick{position:absolute;left:calc(var(--rail-left) + 6px);top:57%;width:calc(var(--battle-rail) - 28px);height:calc(var(--battle-rail) - 28px);transform:translateY(-50%);border-width:2px}
 body.is-playing .touch-stick .tick{border-width:5px}
 body.is-playing .match-bar .round-clock{display:none}
 body.is-playing .compact-loadout{display:none}
 /* Names sit above actors, including the top spawn. Use the lower scenic edge
    for match status so the short landscape layout keeps those names visible. */
 body.is-playing .arena-status{display:block;position:absolute;top:auto;bottom:5px;left:50%;transform:translateX(-50%);z-index:4;max-width:calc(100% - 24px);padding:3px 10px;border:1px solid #77c8c7;border-radius:999px;background:#0b3242d9;color:#e8fff4;font-size:9px;font-weight:800;letter-spacing:.3px;line-height:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
 body.is-playing .arena-status:empty{display:none}
 body.is-playing #exit-button{position:fixed;top:52px;right:var(--rail-right);left:auto;width:calc(var(--battle-rail) - 16px);min-height:30px;padding:5px 4px;font-size:10px;z-index:3}
 body.is-playing .music-bar[data-context=battle]{top:90px;display:block;padding:0;gap:0;background:none;border:0;box-shadow:none;min-height:0;height:auto}
 body.is-playing .music-bar[data-context=battle]>button:not(.music-title),body.is-playing .music-bar[data-context=battle] .music-info,body.is-playing .music-bar[data-context=battle] input,body.is-playing .music-bar[data-context=battle] .music-status{display:none}
 body.is-playing .music-bar[data-context=battle] .music-title{display:block;width:100%;margin:0;padding:4px 6px;border:1px solid #2f6373;border-radius:8px;background:#103d4fcc;color:#c7f6ee;font-size:8px;font-weight:800;line-height:12px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
 body.is-playing .music-title::before{content:'♪ ';color:#72e4d4}
 body.is-playing .music-title[data-state=paused]::before{content:'▶ ';color:#ffd27b}
 body.is-playing .music-title[data-state=muted]::before{content:'🔇 '}
}
/* Keep tablet controls within thumb reach and outside the arena; their size is
   independent of the phone breakpoint. Ranked supplies its own side-rail controls. */
@media (orientation:landscape) and (min-height:601px) and (pointer:coarse) and (hover:none){
 body.is-playing:not(.is-core-conflict){--battle-rail:clamp(148px,15vw,192px)}
 body.is-playing:not(.is-core-conflict) .touch-stick{left:calc(var(--rail-left) + 8px);width:calc(var(--battle-rail) - 32px);height:calc(var(--battle-rail) - 32px);top:57%}
 body.is-playing:not(.is-core-conflict) .touch-actions{top:calc(57% - 88px);gap:22px}
 body.is-playing:not(.is-core-conflict) .touch-bomb{width:88px;height:88px;font-size:13px}
 body.is-playing:not(.is-core-conflict) .touch-skill{width:88px;height:72px;font-size:13px}
 body.is-playing:not(.is-core-conflict) .touch-skill small{font-size:12px;line-height:15px}
}
@media (orientation:landscape) and (max-height:340px){body.is-playing .touch-stick{top:59%}body.is-playing .arena-status{font-size:8px;padding:2px 8px}}

/* Mobile handedness: movement belongs to the right thumb. Keep the existing
   arena gutters and target sizes; desktop pointer layouts remain unchanged. */
@media (orientation:landscape) and (pointer:coarse) and (hover:none){
 body.is-playing:not(.is-core-conflict) .touch-stick{left:auto;right:calc(var(--rail-right) + 6px)}
 body.is-playing:not(.is-core-conflict) .dpad{left:auto;right:var(--rail-right)}
 body.is-playing:not(.is-core-conflict) .touch-actions{right:auto;left:var(--rail-left)}
}
@media (orientation:landscape) and (min-height:601px) and (pointer:coarse) and (hover:none){
 body.is-playing:not(.is-core-conflict) .touch-stick{right:calc(var(--rail-right) + 8px)}
}
/* Suppress double-tap zoom on buttons, not on the page. Manipulation retains
   pinch zoom; only active thumb controls reserve the complete gesture. */
@media (any-pointer:coarse){
 button,[role=button]{touch-action:manipulation}
 body.is-playing,body.is-core-conflict,body.is-playing #arena,body.is-core-conflict #core-ui #arena{touch-action:manipulation}
 body.is-playing .touch-controls{touch-action:auto}
 .touch-stick,.core-stick,.touch-actions [data-control]{touch-action:none}
}

/* HUD cleanup is touch-input only; pointer-driven PCs retain the preceding layout. */
@media (pointer:coarse) and (hover:none){
/* Active battle only. The brand is the exit; retain #exit-button for the app's
   existing direct queries while removing its visible/focusable control. */
body.is-playing #exit-button{display:none!important}
body.is-playing:not(.is-core-conflict) .topbar>.brand{position:fixed;top:max(12px,env(safe-area-inset-top));left:max(24px,env(safe-area-inset-left));z-index:5}
body.is-playing:not(.is-core-conflict) .top-actions{position:fixed;top:max(16px,env(safe-area-inset-top));right:max(24px,env(safe-area-inset-right));width:auto;display:flex;align-items:center;gap:6px;z-index:5}
body.is-playing:not(.is-core-conflict) .top-actions>.connection-badge{display:none}
body.is-playing:not(.is-core-conflict) .top-actions>.fullscreen{display:flex}
body.is-playing:not(.is-core-conflict) .top-actions>.team-voice{position:fixed;left:calc(max(24px,env(safe-area-inset-left)) + 220px);top:max(20px,env(safe-area-inset-top))}
body.is-playing:not(.is-core-conflict) .top-actions>.sound-toggle{position:fixed;left:calc(max(24px,env(safe-area-inset-left)) + 262px);top:max(20px,env(safe-area-inset-top))}
body.is-playing:not(.is-core-conflict) .top-actions>.team-voice>.voice-toggle,body.is-playing:not(.is-core-conflict) .top-actions>.sound-toggle{width:36px;height:36px;min-height:36px}
body.is-playing:not(.is-core-conflict) #music-bar[data-context=battle]{position:fixed;top:auto;right:max(24px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));width:220px;max-width:calc(100vw - 32px);display:block;height:auto;min-height:0;margin:0;padding:0;background:none;border:0;box-shadow:none;z-index:5}
body.is-playing:not(.is-core-conflict) #music-bar[data-context=battle]>button:not(.music-title),body.is-playing:not(.is-core-conflict) #music-bar[data-context=battle] .music-info,body.is-playing:not(.is-core-conflict) #music-bar[data-context=battle] input,body.is-playing:not(.is-core-conflict) #music-bar[data-context=battle] .music-status{display:none}
body.is-playing:not(.is-core-conflict) #music-bar[data-context=battle]>.music-title{display:block;width:100%;height:auto;min-height:28px;margin:0;padding:5px 6px;border:1px solid #4b8992;border-radius:8px;background:#103d4fe8;color:#d6f6ee;font-size:10px;line-height:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
@media (orientation:landscape) and (max-height:600px), (orientation:landscape) and (pointer:coarse) and (hover:none){
 body.is-playing:not(.is-core-conflict){--battle-audio-top:calc(42% - 44px)}
 body.is-playing:not(.is-core-conflict) .topbar>.brand{top:max(8px,env(safe-area-inset-top));left:var(--rail-left);min-height:44px}
 body.is-playing:not(.is-core-conflict) .top-actions{top:max(8px,env(safe-area-inset-top));right:var(--rail-right);width:calc(var(--battle-rail) - 16px);justify-content:center}
 body.is-playing:not(.is-core-conflict) .top-actions>.team-voice{top:var(--battle-audio-top);left:calc(var(--rail-left) + (var(--battle-rail) - 16px)*.5 - 38px)}
 body.is-playing:not(.is-core-conflict) .top-actions>.sound-toggle{top:var(--battle-audio-top);left:calc(var(--rail-left) + (var(--battle-rail) - 16px)*.5 + 2px)}
 body.is-playing:not(.is-core-conflict) .top-actions>.team-voice>.voice-toggle,body.is-playing:not(.is-core-conflict) .top-actions>.sound-toggle{width:36px;height:36px}
 body.is-playing:not(.is-core-conflict) .top-actions>[data-action=help],body.is-playing:not(.is-core-conflict) .top-actions>[data-action=fullscreen]{width:32px;height:36px}
 body.is-playing:not(.is-core-conflict) .match-bar .round-label{display:none}
 body.is-playing:not(.is-core-conflict) #music-bar[data-context=battle]{right:var(--rail-right);bottom:max(8px,env(safe-area-inset-bottom));width:calc(var(--battle-rail) - 16px)}
}
@media (orientation:landscape) and (min-height:601px) and (pointer:coarse) and (hover:none){body.is-playing:not(.is-core-conflict){--battle-audio-top:calc(57% - 132px)}}
}