.joystick {
  --knob-x: 0px;
  --knob-y: 0px;
  position: absolute;
  z-index: 4;
  left: max(30px, env(safe-area-inset-left));
  bottom: max(30px, env(safe-area-inset-bottom));
  width: clamp(106px, 16vw, 136px);
  aspect-ratio: 1;
  border: 3px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
  background: rgba(24, 27, 33, 0.58);
  box-shadow: inset 0 0 0 10px rgba(0, 0, 0, 0.18), 0 7px 0 rgba(0, 0, 0, 0.28);
  touch-action: none;
}

.joystick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44%;
  aspect-ratio: 1;
  border: 3px solid rgba(0, 0, 0, 0.36);
  border-radius: 50%;
  background: #d8e1d5;
  transform: translate(calc(-50% + var(--knob-x)), calc(-50% + var(--knob-y)));
}

.action-cluster {
  position: absolute;
  z-index: 4;
  right: max(48px, env(safe-area-inset-right));
  bottom: max(30px, env(safe-area-inset-bottom));
  width: clamp(250px, 32vw, 304px);
  height: clamp(148px, 21vw, 180px);
  pointer-events: none;
}

.round-button {
  --aim-x: 0px;
  --aim-y: 0px;
  --aim-opacity: 0;
  position: absolute;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
  background: rgba(31, 32, 32, 0.5);
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.24), inset 0 0 0 2px rgba(0, 0, 0, 0.18);
  color: #f8f4df;
  font-weight: 1000;
  pointer-events: auto;
  backdrop-filter: blur(2px);
}

.round-button > span {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.round-button > .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.round-button.aiming::before {
  content: "";
  position: absolute;
  inset: 15%;
  border: 2px solid rgba(255, 255, 255, 0.38);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.13);
  pointer-events: none;
}

.button-aim-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 18px;
  aspect-ratio: 1;
  border: 3px solid rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  background: #ffffff;
  opacity: var(--aim-opacity);
  transform: translate(calc(-50% + var(--aim-x)), calc(-50% + var(--aim-y)));
}

.round-button > .button-aim-dot {
  position: absolute;
  z-index: 3;
}

.round-button.aiming {
  outline: 3px solid rgba(255, 255, 255, 0.45);
}

.attack-button {
  right: 2px;
  bottom: 0;
  width: clamp(76px, 11vw, 92px);
  aspect-ratio: 1;
  background: rgba(128, 81, 74, 0.58);
}

.attack-button.pickup-ready {
  background: rgba(243, 240, 220, 0.76);
  color: #161616;
}

.attack-button.dialogue-ready {
  background: rgba(255, 211, 77, 0.76);
  color: #161616;
}

.attack-button.buy-ready {
  background: rgba(197, 156, 62, 0.82);
  color: #161616;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.24), 0 0 18px rgba(255, 204, 77, 0.42);
}

.attack-button.buy-ready .attack-icon {
  width: 30px;
  height: 30px;
  border: 3px solid #171717;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff4bf, #e0b03f 58%, #835a19);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.2);
}

.attack-button.buy-ready .attack-icon::before,
.attack-button.buy-ready .attack-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: #171717;
  transform: translate(-50%, -50%);
}

.attack-button.buy-ready .attack-icon::before {
  width: 16px;
  height: 3px;
}

.attack-button.buy-ready .attack-icon::after {
  width: 3px;
  height: 16px;
  opacity: 0.42;
}

.skill-button {
  right: clamp(102px, 13.2vw, 124px);
  bottom: clamp(28px, 3.6vw, 40px);
  width: clamp(58px, 8vw, 72px);
  aspect-ratio: 1;
  overflow: hidden;
  background: rgba(78, 91, 118, 0.56);
}

.dodge-button {
  --charge-percent: 0%;
  right: clamp(178px, 22vw, 214px);
  bottom: clamp(8px, 1.5vw, 15px);
  width: clamp(50px, 6.7vw, 60px);
  aspect-ratio: 1;
  background: rgba(86, 89, 89, 0.52);
}

.dodge-button.pressed,
.dodge-button.charging {
  outline: 3px solid rgba(255, 255, 255, 0.42);
}

.dodge-button.charging {
  background:
    conic-gradient(rgba(235, 231, 213, 0.46) var(--charge-percent), rgba(86, 89, 89, 0.4) 0),
    rgba(86, 89, 89, 0.52);
}

.dodge-button.disabled {
  filter: grayscale(0.8) brightness(0.66);
}

.button-icon {
  display: block;
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.parry-button {
  --energy-percent: 0%;
  --energy-charge-percent: 0%;
  right: clamp(88px, 11.2vw, 106px);
  bottom: clamp(92px, 12.5vw, 114px);
  width: clamp(50px, 6.7vw, 60px);
  aspect-ratio: 1;
  overflow: hidden;
  background: rgba(183, 188, 188, 0.58);
  color: #18202b;
}

.parry-button::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(rgba(82, 191, 255, 0.95) var(--energy-percent), rgba(82, 191, 255, 0.08) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  pointer-events: none;
}

.parry-button::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 5px;
  border-radius: 50%;
  background: conic-gradient(rgba(255, 255, 255, 0.7) var(--energy-charge-percent), rgba(255, 255, 255, 0.03) 0);
  opacity: 0;
  pointer-events: none;
}

.parry-button.pressed,
.parry-button.guarding {
  outline: 3px solid rgba(255, 255, 255, 0.5);
}

.parry-button.energy-charging::after {
  opacity: 0.75;
}

.parry-button.energy-ready {
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.24), 0 0 18px rgba(82, 191, 255, 0.54);
}

.parry-button.guarding {
  background: rgba(225, 225, 213, 0.76);
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.24), 0 0 14px rgba(255, 255, 255, 0.28);
}

.parry-button.guarding.energy-ready {
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.24), 0 0 22px rgba(82, 191, 255, 0.64);
}

.parry-button.disabled {
  filter: grayscale(0.85) brightness(0.68);
}

.shield-icon {
  width: 25px;
  height: 29px;
  background: linear-gradient(180deg, #ffffff, #a9c4da);
  border: 3px solid #18202b;
  clip-path: polygon(50% 0%, 88% 14%, 82% 70%, 50% 100%, 18% 70%, 12% 14%);
}

.dodge-icon {
  width: 27px;
  height: 21px;
  border-top: 5px solid #f5f5ef;
  border-right: 5px solid #f5f5ef;
  transform: skewX(-18deg) rotate(18deg);
}

.skill-icon {
  width: 27px;
  height: 27px;
  background: #f6fbff;
  clip-path: polygon(48% 0, 60% 32%, 94% 18%, 70% 48%, 100% 58%, 64% 66%, 72% 100%, 48% 73%, 24% 100%, 32% 66%, 0 58%, 29% 48%, 6% 18%, 39% 32%);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.45);
}

.attack-icon {
  width: 32px;
  height: 32px;
  border: 3px solid #fff1d6;
  border-radius: 50%;
}

.attack-icon::before,
.attack-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: #fff1d6;
  transform: translate(-50%, -50%);
}

.attack-icon::before {
  width: 24px;
  height: 3px;
}

.attack-icon::after {
  width: 3px;
  height: 24px;
}

.attack-button.pickup-ready .attack-icon {
  width: 34px;
  height: 34px;
  border: 0;
}

.attack-button.pickup-ready .attack-icon::before {
  width: 22px;
  height: 22px;
  background: transparent;
  border-right: 6px solid #171717;
  border-bottom: 6px solid #171717;
  transform: translate(-50%, -65%) rotate(45deg);
}

.attack-button.pickup-ready .attack-icon::after {
  width: 32px;
  height: 6px;
  top: 78%;
  background: #171717;
}

.attack-button.dialogue-ready .attack-icon {
  width: 40px;
  height: 30px;
  border: 4px solid #171717;
  border-radius: 8px;
}

.attack-button.dialogue-ready .attack-icon::before {
  width: 8px;
  height: 8px;
  left: 30%;
  top: 50%;
  border-radius: 50%;
  background: #171717;
  box-shadow: 10px 0 0 #171717, 20px 0 0 #171717;
}

.attack-button.dialogue-ready .attack-icon::after {
  width: 12px;
  height: 12px;
  left: 22%;
  top: 86%;
  background: #ffd34d;
  border-left: 4px solid #171717;
  border-bottom: 4px solid #171717;
  transform: translate(-50%, -50%) rotate(-35deg);
}

.mode-button {
  position: absolute;
  right: clamp(28px, 3.9vw, 42px);
  bottom: clamp(102px, 14vw, 126px);
  display: grid;
  place-items: center;
  width: clamp(46px, 6.2vw, 54px);
  aspect-ratio: 1;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
  background: rgba(58, 63, 63, 0.52);
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.24), inset 0 0 0 2px rgba(0, 0, 0, 0.18);
  color: #f8f4df;
  pointer-events: auto;
  backdrop-filter: blur(2px);
}

.mode-button.active {
  background: rgba(76, 103, 86, 0.58);
}

.mode-icon {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff2cf;
  box-shadow: 0 0 0 3px rgba(255, 242, 207, 0.12);
}

.mode-button.active .mode-icon {
  box-shadow: -14px 8px 0 #fff2cf, 14px -8px 0 #fff2cf, 0 0 0 3px rgba(255, 242, 207, 0.12);
}

.cooldown-fill {
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  height: 0%;
  background: rgba(0, 0, 0, 0.56);
  pointer-events: none;
}

.cooldown-text {
  position: absolute;
  z-index: 2;
  bottom: 8px;
  color: #ffffff;
  font-size: 0.78rem;
  text-shadow: 0 2px 0 #111;
}

.skill-button.cooling {
  color: #aeb5c6;
}