.combat-actions{position:fixed;right:40px;bottom:40px;width:250px;height:250px;pointer-events:none}
.combat-joystick{position:fixed;left:0;top:0;width:82px;height:82px;display:grid;place-items:center;pointer-events:none;opacity:0;z-index:4;transform:translate(-50%,-50%);--combat-angle:0deg;transition:opacity .08s ease}
.combat-joystick img{width:100%;height:100%;display:block;filter:brightness(0) invert(1);opacity:.65;transform:rotate(var(--combat-angle));transition:transform .03s linear}
.combat-joystick.is-combat-active{opacity:1}

.skill-button{position:fixed;width:64px;height:64px;border:0;border-radius:0;background:transparent;color:#b8c1c6;font-size:11px;font-weight:900;opacity:1;box-shadow:none;padding:0;display:grid;place-items:center;pointer-events:auto;touch-action:manipulation;z-index:3}
.skill-button img{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;filter:brightness(0) saturate(0) invert(.78)}
.skill-button span{position:relative;z-index:1;font-size:10px;font-weight:900;text-shadow:0 0 7px #000,0 0 5px currentColor}

.skill-4{right:6px;bottom:76px}
.skill-3{right:6px;bottom:148px}
.skill-2{right:76px;bottom:220px}
.skill-1{right:76px;bottom:148px}

.skill-button:active,.skill-button.is-active{color:var(--cyan)}
.skill-button:active img,.skill-button.is-active img{filter:brightness(0) saturate(100%) invert(83%) sepia(32%) saturate(1384%) hue-rotate(152deg) brightness(103%) contrast(103%)}
.skill-button:active{transform:scale(.94)}

@media(max-height:450px) and (orientation:landscape){
  .combat-actions{right:40px;bottom:40px;width:230px;height:230px}
  .combat-actions .action-button{width:72px;height:72px}
  .action-button span{font-size:24px}
  .skill-button{width:64px;height:64px}
}
@media(max-width:760px) and (orientation:landscape){
  .combat-actions{right:40px;bottom:40px}
}

.dash-button{position:fixed;right:calc(12px + 140px + 10px);top:calc(8px + env(safe-area-inset-top) + 8px);width:60px;height:60px;border:0;border-radius:0;background:transparent;padding:0;display:grid;place-items:center;pointer-events:auto;touch-action:manipulation;z-index:3}
.dash-button img{width:100%;height:100%;display:block;filter:brightness(0) saturate(0) invert(.78);pointer-events:none}
.dash-button span{position:absolute;font-size:10px;font-weight:900;color:#b8c1c6;text-shadow:0 0 7px #000,0 0 5px currentColor;pointer-events:none}
.dash-button:active,.dash-button.is-active{color:var(--cyan)}
.dash-button:active img,.dash-button.is-active img{filter:brightness(0) saturate(100%) invert(83%) sepia(32%) saturate(1384%) hue-rotate(152deg) brightness(103%) contrast(103%)}
.dash-button:active{transform:scale(.94)}

.run-button{position:fixed;right:12px;top:calc(8px + env(safe-area-inset-top) + 120px + 10px);width:60px;height:60px;border:0;border-radius:0;background:transparent;color:#b8c1c6;padding:0;display:grid;place-items:center;pointer-events:auto;touch-action:manipulation;z-index:3;font-size:10px;font-weight:900;text-shadow:0 0 7px #000,0 0 5px currentColor}
.run-button:active,.run-button.is-active{color:var(--cyan)}
.run-button.is-active{filter:drop-shadow(0 0 5px rgba(85,234,255,.5))}
.run-button img,.jump-button img{position:absolute;inset:0;width:100%;height:100%;display:block;filter:brightness(0) saturate(0) invert(.78);pointer-events:none}
.run-button span,.jump-button span{position:relative;z-index:1}
.run-button.is-active img,.run-button:active img,.jump-button.is-active img,.jump-button:active img{filter:brightness(0) saturate(100%) invert(83%) sepia(32%) saturate(1384%) hue-rotate(152deg) brightness(103%) contrast(103%)}

.jump-button{position:fixed;right:12px;bottom:12px;width:60px;height:60px;border:0;border-radius:0;background:transparent;color:#b8c1c6;padding:0;display:grid;place-items:center;pointer-events:auto;touch-action:manipulation;z-index:4;font-size:10px;font-weight:900;text-shadow:0 0 7px #000,0 0 5px currentColor}
.jump-button:active,.jump-button.is-active{color:var(--cyan)}
.jump-button:active{transform:scale(.94)}

@media(max-height:450px) and (orientation:landscape){
  .dash-button{right:calc(8px + 140px + 10px);top:calc(6px + env(safe-area-inset-top) + 8px);width:60px;height:60px}
  .run-button{right:8px;top:calc(6px + env(safe-area-inset-top) + 140px + 10px);width:60px;height:60px}
  .jump-button{right:8px;bottom:8px;width:60px;height:60px}
}