/* Original MOBA-inspired controls. Positions are in the landscape stage. */
.cockpit{--u:clamp(.78px,.24cqh,1.5px);--gold:#e0c38a;--pale:#f9e4b2;--blue:#8bcaed}
.cockpit .video-shade{background:linear-gradient(#07182c66,transparent 25%,transparent 55%,#07162d88)}
.cockpit .screen-corners{border-color:#c7ba8a22}
.cockpit .hud-top .session-name,.cockpit .telemetry{background:#0c1d36b3;border-color:#d0bd873d}
.cockpit .tool-button{border-color:#c8b78a73;background:linear-gradient(#283f58bb,#0c1a31d4);box-shadow:inset 0 1px 0 #f5e2ad22,0 2px 4px #0005;color:#d8cfad}
.cockpit .mini-model{border:1px solid #d6c39375;border-radius:3px 13px 3px 13px;background:linear-gradient(140deg,#192e47c2,#0b1b30a3);box-shadow:inset 0 0 0 3px #17283a55,0 2px 14px #0003}
.cockpit .mini-title,.cockpit .mini-footer{color:#ddcfa9}.cockpit .notice{border-color:#cbbb8544;background:#101f36a3;color:#e6dfc9}
.cockpit .control-cluster{position:absolute;bottom:calc(42 * var(--u));width:calc(120 * var(--u))}
.cockpit .left-cluster{left:5.8%}.cockpit .right-cluster{right:4%}
.cockpit .stick-caption{position:absolute;left:0;right:0;bottom:calc(-25 * var(--u));margin:0;font-size:calc(11 * var(--u));color:#e2dcc7;text-shadow:0 1px 3px #000,0 0 7px #081322}
.cockpit .stick-caption span{display:none}
.cockpit .stick-hint{position:absolute;bottom:calc(-11 * var(--u));width:100%;font-size:calc(7 * var(--u));opacity:.65;margin:0;pointer-events:none;letter-spacing:1px}
.cockpit .left-cluster .stick-hint{display:none}
.cockpit .joystick{border:1px solid #a9c3d85c;background:radial-gradient(circle,#2c608642 0 44%,#7aa3c436 45%,#16345355 47%,transparent 49% 59%,#c5bd8b36 60% 61%,#1b3b6044 62% 68%,#7caac038 69% 70%,#0c223c33 71%);box-shadow:inset 0 0 15px #88b4d50d,0 0 0 calc(5 * var(--u)) #0d263333,0 0 0 calc(6 * var(--u)) #a2b8ba1c;backdrop-filter:blur(1px)}
.cockpit .joystick::before{content:"";position:absolute;inset:-8%;border:1px solid #a5bdcf24;border-radius:50%;clip-path:polygon(0 0,43% 0,50% 12%,57% 0,100% 0,100% 100%,57% 100%,50% 88%,43% 100%,0 100%);pointer-events:none}
.cockpit .stick-cross{inset:20%;border-color:#88b7d72b}.cockpit .stick-cross::after,.cockpit .stick-cross::before{background:#9fcbeb21}
.cockpit .joystick>span{color:#d7d4af73;font-size:calc(7 * var(--u))}
.cockpit .stick-knob{width:48%;height:48%;left:26%;top:26%;background:radial-gradient(ellipse at 40% 30%,#7ea8c6a8,#244767a1 49%,#112942ca 75%);border:1px solid #d4d2ab9c;box-shadow:inset 0 1px 5px #e5f4ed55,inset 0 -2px 7px #061c33bb,0 3px 12px #0005,0 0 0 calc(3 * var(--u)) #09284488}
.cockpit .stick-knob i{inset:15%;border-color:#97b9c26b;background:radial-gradient(circle,#badbed1a,transparent 65%);box-shadow:inset 0 0 6px #e0f4ff11}
.cockpit .stick-knob i::before{content:"";position:absolute;inset:33%;border:1px solid #e4d6a9b3;transform:rotate(45deg);box-shadow:0 0 5px #d0e9ff44}
.cockpit .joystick.engaged{border-color:#d0c18cbf;box-shadow:inset 0 0 20px #7dc5ff33,0 0 0 calc(5 * var(--u)) #83b4df17,0 0 23px #83c8fc33}
.cockpit .right-cluster .joystick{border:2px solid #d0bc83a6;background:radial-gradient(circle at 40% 35%,#5c96c367,#1b4d7882 42%,#112c49aa 60%,#152f48aa 65%,#d1bd8299 66%,#715d3caa 68%,#0d223d88 70%);box-shadow:inset 0 0 0 calc(4 * var(--u)) #10263bc2,inset 0 0 25px #6dbff43b,0 0 0 calc(3 * var(--u)) #12283ea3,0 0 0 calc(4 * var(--u)) #a79c715c,0 4px 12px #0005}
.cockpit .right-cluster .joystick::before{inset:-8%;border-color:#c3b58466;clip-path:polygon(0 0,100% 0,100% 40%,88% 50%,100% 60%,100% 100%,0 100%,0 60%,12% 50%,0 40%)}
.cockpit .right-cluster .stick-knob{width:65%;height:65%;left:17.5%;top:17.5%;background:radial-gradient(circle at 40% 30%,#67a0cd4d,#16395a7a 75%);border-color:#d9d6ae66;box-shadow:inset 0 0 0 2px #131f3155,0 0 14px #9acbf21a}
.cockpit .right-cluster .stick-knob i{inset:-7%;background:url('./assets/aim-crest.svg') center/contain no-repeat;border:0;box-shadow:none}.cockpit .right-cluster .stick-knob i::before{display:none}
.cockpit .right-cluster .stick-cross{opacity:.3}.cockpit .right-cluster .joystick>span{opacity:.25}
.cockpit .right-cluster .stick-caption{bottom:17%;font-size:calc(10 * var(--u));color:#e6d6ab;z-index:1;pointer-events:none}
.cockpit .right-cluster .stick-hint{bottom:calc(-26 * var(--u));opacity:1;pointer-events:auto;align-items:center;gap:4px}
.cockpit .right-cluster .stick-hint button{font-size:calc(8 * var(--u));padding:4px 5px;color:#d7c8a2;background:#0b1c35aa;border:1px solid #c4b17e4a;border-radius:3px}.cockpit .right-cluster .stick-hint>span{font-size:calc(7 * var(--u));color:#90c2e8}
.cockpit .action-pad{position:absolute;right:calc(4% + 60 * var(--u));bottom:calc(102 * var(--u));width:0;height:0;transform:none;overflow:visible}
.skill-orbit{position:absolute;left:calc(-158 * var(--u));top:calc(-158 * var(--u));width:calc(316 * var(--u));height:calc(316 * var(--u));border:1px solid #e3d4ab19;border-radius:50%;clip-path:polygon(0 0,50% 0,50% 45%,0 100%);pointer-events:none}
.cockpit .game-button{position:absolute;width:calc(72 * var(--u));height:calc(72 * var(--u));border-radius:50%;padding:calc(5 * var(--u));border:0;background:conic-gradient(from 30deg,#685736,#eee0ad 12%,#9b8c61 22%,#3a4254 35%,#ac9663 49%,#fae6a6 58%,#69624f 73%,#dfcd96 86%,#6d6044);box-shadow:inset 0 0 0 1px #f8e7b06b,0 2px 4px #030b1a99,0 0 0 calc(2 * var(--u)) #0d243ac2,0 0 0 calc(3 * var(--u)) #d4bd6e3d,0 0 15px #07244255;touch-action:manipulation;backdrop-filter:none;isolation:isolate;transition:filter .16s,scale .12s;overflow:visible}
.cockpit .game-button img{position:relative;display:block;width:100%;height:100%;border-radius:50%;box-shadow:inset 0 0 5px #000;pointer-events:none;opacity:.94;filter:saturate(.9)}
.skill-frame{position:absolute;inset:calc(4 * var(--u));border:1px solid #f8e7b052;border-radius:50%;box-shadow:inset 0 0 9px #0009;z-index:2;pointer-events:none}
.skill-frame::after{content:"";position:absolute;inset:3px;border-radius:50%;background:linear-gradient(135deg,#fff7d11c,transparent 42% 70%,#020b2444);pointer-events:none}
.cockpit .game-button::before{content:"";position:absolute;inset:calc(-5 * var(--u));border:1px solid #c8b77a54;border-radius:50%;clip-path:polygon(0 0,100% 0,100% 30%,82% 50%,100% 70%,100% 100%,0 100%,0 70%,18% 50%,0 30%);pointer-events:none}
.cockpit .game-button::after{content:"";position:absolute;top:calc(-6 * var(--u));left:calc(50% - 3 * var(--u));width:calc(6 * var(--u));height:calc(6 * var(--u));background:linear-gradient(135deg,#fff0bd,#ad8e4a);border:1px solid #3a4656;transform:rotate(45deg);z-index:3;pointer-events:none}
.cockpit .game-button small{position:absolute;left:0;bottom:calc(4 * var(--u));width:100%;font-size:calc(10 * var(--u));font-weight:600;line-height:1.4;letter-spacing:calc(2 * var(--u));color:#f7e8bd;text-shadow:0 1px 3px #000,0 0 7px #031126,1px 0 3px #000,-1px 0 3px #000;z-index:3;pointer-events:none}
.skill-index{position:absolute;left:calc(50% - 8 * var(--u));bottom:calc(-13 * var(--u));width:calc(16 * var(--u));font:calc(8 * var(--u)) Georgia,serif;color:#d7c99f;text-align:center;text-shadow:0 1px 3px #000;pointer-events:none}
.cockpit .skill-one{left:calc(-169 * var(--u));top:calc(-21 * var(--u))}
.cockpit .skill-two{left:calc(-137 * var(--u));top:calc(-116 * var(--u))}
.cockpit .skill-three{left:calc(-36 * var(--u));top:calc(-159 * var(--u))}
.cockpit .game-button:active,.cockpit .game-button.pressed{transform:none;scale:.92;filter:brightness(1.3);box-shadow:inset 0 0 0 1px #ffe5ac,0 0 18px #b7e4ff88,0 0 35px #468af544}
.cockpit .game-button:disabled{opacity:.38;filter:saturate(.3);cursor:wait}
.cockpit .game-button.casting{opacity:1;filter:brightness(1.12)}
.cast-ring{position:absolute;inset:calc(-8 * var(--u));border:2px solid transparent;border-top-color:#fcdf9b;border-right-color:#94cdfb;border-radius:50%;opacity:0;z-index:4;pointer-events:none}
.casting .cast-ring{opacity:1;animation:spin 1.1s linear infinite}.cast-success .cast-ring{opacity:1;border-color:#f6df9ba6;animation:skill-burst .65s ease-out forwards}
.utility-actions{position:absolute;bottom:calc(27 * var(--u));left:50%;transform:translateX(-50%);display:flex;gap:calc(26 * var(--u));align-items:center}
.cockpit .utility-button{position:relative;left:auto;bottom:auto;top:auto;right:auto;width:calc(49 * var(--u));height:calc(49 * var(--u));min-width:42px;min-height:42px;padding:calc(3 * var(--u));transform:none;font-size:inherit;letter-spacing:normal}
.cockpit .utility-button small{font-size:calc(9 * var(--u));bottom:calc(-16 * var(--u));font-weight:400;letter-spacing:1px}.cockpit .utility-button::after{width:4px;height:4px;left:calc(50% - 2px);top:-4px}
.cockpit .flight-status{top:auto;bottom:calc(102 * var(--u));right:auto;left:50%;transform:translateX(-50%);gap:5px}.cockpit .flight-status>span{background:#0a2035a8;border-color:#d0bc8155;color:#e6d7ac}.cockpit .flight-status b{font-size:calc(17 * var(--u));font-weight:400;color:#dfdcc8}.cockpit .flight-status small{font-size:calc(8 * var(--u))}
.cockpit .bottom-bar{font-size:6px;bottom:7px;pointer-events:none;color:#afc2cf}.cockpit .bottom-bar .tiny-square{background:#d4bd83}.cockpit .key-hint{font-size:7px;color:#b1c1ce}
@keyframes skill-burst{from{scale:.9;opacity:1;box-shadow:0 0 10px #e7c87588}to{scale:1.5;opacity:0;box-shadow:0 0 25px #a9d6ff00}}
@media(prefers-reduced-motion:reduce){.casting .cast-ring{animation-duration:3s}.cast-success .cast-ring{animation:none}}

.cockpit .stop-button span{margin:0}