/* This file owns the touch controls only. Game panels adapt to .touch-enabled. */
.touch-enabled #game{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.touch-controls{--touch-stick-size:176px;--touch-arrow-reach:65px;--touch-edge:24px;--touch-floor:18px;position:fixed;inset:0;z-index:12;pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;color:#e6e6c9;font-family:"Trebuchet MS",Arial,sans-serif}
.touch-controls[hidden]{display:none!important}
.touch-controls button,.touch-stick{touch-action:none;pointer-events:auto;-webkit-tap-highlight-color:transparent}
.touch-controls button{min-height:44px;border:1px solid #91ada77a;border-radius:8px;background:#142b30e8;color:#e9e6ca;box-shadow:0 3px 13px #0003;transition:background .1s,border-color .1s;line-height:1.2}
.touch-controls button:active{transform:none}
.touch-controls button.is-pressed,.touch-controls button:active{border-color:#d9eabe;background:#436153ef}
.touch-stick-group{position:absolute;bottom:calc(var(--touch-floor) + env(safe-area-inset-bottom,0px));width:var(--touch-stick-size);display:flex;flex-direction:column;align-items:center;gap:12px}
.touch-drive-hint{font-size:9px;line-height:11px;letter-spacing:.5px;color:#c0d6b8;pointer-events:none}
.touch-drive-group{left:calc(var(--touch-edge) + env(safe-area-inset-left,0px))}
.touch-aim-group{right:calc(var(--touch-edge) + env(safe-area-inset-right,0px))}
.touch-stick{--stick-x:0px;--stick-y:0px;position:relative;flex:none;width:var(--touch-stick-size);height:var(--touch-stick-size);border:1px solid #acd2bc80;border-radius:50%;background:radial-gradient(circle,#739f8636 0 24%,#29483b52 25% 48%,#0d27258c 49% 100%);box-shadow:inset 0 0 0 7px #8caf9120,0 4px 25px #0617155e}
.touch-stick.is-pressed{border-color:#cae8ba;background:radial-gradient(circle,#84bc9559 0 24%,#4c765252 25% 48%,#17372ad1 49% 100%)}
.touch-stick-knob{position:absolute;left:50%;top:50%;width:43%;height:43%;border-radius:50%;border:1px solid #a6cbb0bb;background:radial-gradient(circle at 40% 30%,#789c7acf,#365c4ce8);box-shadow:0 3px 14px #0005;transform:translate(calc(-50% + var(--stick-x)),calc(-50% + var(--stick-y)));pointer-events:none}
.touch-stick-caption{position:absolute;left:50%;top:10px;transform:translateX(-50%);font-size:10px;font-weight:bold;letter-spacing:1px;white-space:nowrap;color:#e0e8bc;pointer-events:none;z-index:3;padding:2px 5px;border-radius:4px;background:#102625c9;text-shadow:0 1px 3px #061b17}
.touch-range-hint{position:absolute;bottom:11px;left:0;right:0;text-align:center;font-size:8px;letter-spacing:.5px;color:#e0d4ad;pointer-events:none;z-index:3;text-shadow:0 1px 3px #061b17,0 0 4px #061b17}
.touch-direction{position:absolute;font-size:17px;color:#b0cfa1;pointer-events:none}
.touch-up{top:23px;left:calc(50% - 5px)}.touch-down{bottom:10px;left:calc(50% - 5px)}.touch-left{left:11px;top:calc(50% - 10px)}.touch-right{right:11px;top:calc(50% - 10px)}
.touch-aim{border-color:#d9bd907d;background:radial-gradient(circle,#bda57324 0 24%,#6a5b3a42 25% 48%,#302917a6 49% 100%)}
.touch-aim .touch-stick-knob{border-color:#e4cdaaac;background:radial-gradient(circle at 40% 30%,#b7a174de,#726047e8)}
.touch-aim.is-firing{border-color:#ffe2a1;box-shadow:inset 0 0 0 7px #d9b97d24,0 0 26px #e3c49133}
.touch-aim-arrow,.touch-drive-arrow{position:absolute;left:50%;top:50%;font-size:28px;color:#f8dda4;line-height:1;opacity:0;transform:translate(-50%,-50%) rotate(var(--aim-angle,0rad)) translateX(var(--touch-arrow-reach));pointer-events:none;z-index:2}
.touch-drive-arrow{color:#dcf8bb;transform:translate(-50%,-50%) rotate(var(--drive-angle,0rad)) translateX(var(--touch-arrow-reach))}
.touch-aim.is-firing .touch-aim-arrow,.touch-drive.is-moving .touch-drive-arrow{opacity:1}
.touch-drive.is-moving .touch-direction{opacity:.25}
.touch-fire-modes{display:grid;grid-template-columns:repeat(3,minmax(44px,1fr));gap:6px;width:100%}
.touch-fire-modes button{position:relative;min-height:50px;min-width:44px;padding:5px 2px 10px;font-size:11px;font-weight:bold;letter-spacing:.3px;border:1px solid #91ada799;color:#bfd0c9}
.touch-fire-modes button[data-weapon-mode=flame]{--mode-color:#ffc18f;--mode-bg:#67422c}
.touch-fire-modes button[data-weapon-mode=ice]{--mode-color:#b4edff;--mode-bg:#255367}
.touch-fire-modes button[data-weapon-mode=both]{--mode-color:#ecebc0;--mode-bg:#485744}
.touch-fire-modes button[aria-pressed=true]{color:var(--mode-color);border:2px solid var(--mode-color);background:var(--mode-bg);box-shadow:0 0 0 2px #14272dc9,0 3px 13px #0005}
.touch-fire-modes button[aria-pressed=true]::after{content:"";position:absolute;bottom:5px;left:calc(50% - 9px);width:18px;height:3px;border-radius:3px;background:currentColor}
.touch-fire-modes button:focus-visible{outline:3px solid #fff;outline-offset:3px}
.touch-controls[data-weapon-mode=flame] .touch-aim{border-color:#ffc18fab;background:radial-gradient(circle,#c88a5140,#392617ba)}
.touch-controls[data-weapon-mode=flame] .touch-aim .touch-stick-knob{background:radial-gradient(circle at 40% 30%,#d9a274df,#825331e8);border-color:#f2c29e}
.touch-controls[data-weapon-mode=ice] .touch-aim{border-color:#9bddefbb;background:radial-gradient(circle,#97d5ed40,#173748b5)}
.touch-controls[data-weapon-mode=ice] .touch-aim .touch-stick-knob{background:radial-gradient(circle at 40% 30%,#96c9d5df,#426c85e8);border-color:#c2eff5}
.touch-controls[data-weapon-mode=ice] .touch-aim-arrow{color:#caf4ff}
.touch-controls[data-weapon-mode=both] .touch-aim{border-color:#c5dec0bb;background:radial-gradient(circle,#bfc59b3c,#26362db5)}
.touch-zoom{display:flex;align-items:center;justify-content:space-between;width:144px;gap:6px}
.touch-zoom button{width:44px;padding:0;font-size:22px}
.touch-zoom span{font-size:8px;letter-spacing:1px;color:#cad9bd}
.touch-actions{position:absolute;left:50%;bottom:calc(var(--touch-floor) + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;width:clamp(280px,38vw,380px)}
.touch-actions button{padding:9px 4px;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.touch-actions b{font-weight:600;font-size:11px}.touch-actions small{font-size:8px;color:#b6cbb7;white-space:nowrap}
.touch-actions [data-touch=detach]{border-color:#dfbe78aa}.touch-actions [data-touch=detach] b{color:#f6d795}
.touch-actions [data-touch=arm]{border-color:#bd9e967a}.touch-actions [data-touch=arm] b{color:#ebbaa1}
.touch-actions [data-touch=brake]{border-color:#e1c39482}.touch-actions [data-touch=brake] b{color:#e9cc9a}
.touch-aim-reticle{position:absolute;left:0;top:0;will-change:transform;width:25px;height:25px;border:1px solid #efd3a4b5;border-radius:50%;box-shadow:0 0 0 2px #1426299c,0 0 18px #d6b17e38;pointer-events:none;color:#f9d99a}
.touch-aim-reticle::before,.touch-aim-reticle::after{content:"";position:absolute;background:currentColor;box-shadow:0 0 2px #092125}
.touch-aim-reticle::before{width:1px;height:9px;left:11px;top:7px}.touch-aim-reticle::after{width:9px;height:1px;left:7px;top:11px}
.touch-aim-reticle span{position:absolute;top:30px;left:50%;transform:translateX(-50%);font-size:8px;line-height:1;letter-spacing:.8px;white-space:nowrap;color:inherit;text-shadow:0 1px 3px #000,0 1px 4px #000}
.touch-aim-reticle.is-left-edge span{left:0;transform:none}.touch-aim-reticle.is-right-edge span{left:auto;right:0;transform:none}
.touch-aim-reticle.is-offscreen{border-style:dashed}
.touch-aim-reticle.is-offscreen i{position:absolute;top:50%;left:50%;width:7px;height:7px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:translate(-50%,-50%) rotate(var(--edge-angle,0rad)) translateX(18px) rotate(45deg)}
.touch-controls[data-weapon-mode=ice] .touch-aim-reticle{border-color:#b0eafa;color:#b0eafa}
@media(orientation:portrait){.touch-controls{--touch-stick-size:164px;--touch-arrow-reach:60px;--touch-edge:18px;--touch-floor:22px}.touch-actions{width:clamp(280px,45vw,340px)}}
@media(max-width:700px){.touch-controls{--touch-edge:12px;--touch-stick-size:144px;--touch-arrow-reach:51px}.touch-actions{width:calc(100vw - 340px);min-width:244px;gap:5px}.touch-actions button{min-height:48px;padding:7px 2px}.touch-actions b{font-size:10px}.touch-actions small{font-size:7px}.touch-fire-modes{gap:4px}.touch-zoom{width:138px}.touch-zoom span{font-size:7px}.touch-range-hint{font-size:7px}}
@media(max-width:620px){.touch-actions{bottom:calc(254px + env(safe-area-inset-bottom,0px));width:min(340px,calc(100vw - 24px))}.touch-controls{--touch-floor:14px}}
@media(max-height:540px) and (min-width:621px){.touch-controls{--touch-floor:10px;--touch-edge:14px;--touch-stick-size:144px;--touch-arrow-reach:51px}.touch-stick-group{gap:7px}.touch-actions{width:clamp(264px,40vw,350px)}}
@media(prefers-reduced-motion:reduce){.touch-controls *{transition:none!important}}

.touch-jet{pointer-events:auto;position:absolute;bottom:calc(100% + 54px);left:0;min-width:130px;min-height:42px;padding:8px 12px;border:1px solid #8edeea;border-radius:10px;background:#13353eef;color:#c6f7ff;font-size:11px;font-weight:bold;touch-action:none}.touch-jet[hidden]{display:none}.touch-jet.is-pressed{background:#276277}