/* Easy touch HUD: the movement and fire controls stay in opposite lower
   corners, leaving the upper HUD and cockpit instruments clear. */
.battle-hud[data-control-mode="easy"] .facing-panel,
.battle-hud[data-control-mode="easy"] #practice-nudge {
  display: none !important;
}
.battle-hud[data-control-mode="easy"]:has(.touch-deck) .battle-bottom,
.battle-hud[data-control-mode="easy"] .touch-deck,
.battle-hud[data-control-mode="easy"] .touch-stick-group {
  display: contents;
}

.battle-hud[data-control-mode="easy"] #stick {
  position: absolute;
  z-index: 21;
  left: max(16px, env(safe-area-inset-left, 0px));
  bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 10px);
  width: clamp(140px, 35vw, 174px);
  height: clamp(140px, 35vw, 174px);
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid rgba(95, 230, 242, .78);
  background:
    radial-gradient(circle, rgba(95, 230, 242, .12) 0 2px, transparent 3px),
    rgba(7, 15, 22, .78);
  box-shadow: inset 0 0 0 7px rgba(95, 230, 242, .055);
  touch-action: none;
}

.battle-hud[data-control-mode="easy"] #stick::before,
.battle-hud[data-control-mode="easy"] #stick::after {
  content: "";
  position: absolute;
  pointer-events: none;
  background: rgba(95, 230, 242, .22);
}

.battle-hud[data-control-mode="easy"] #stick::before {
  width: 1px;
  height: 72%;
}

.battle-hud[data-control-mode="easy"] #stick::after {
  width: 72%;
  height: 1px;
}

.battle-hud[data-control-mode="easy"] #stick .stick-axis {
  position: relative;
  z-index: 1;
  color: rgba(201, 211, 222, .78);
  font-size: 12px;
  letter-spacing: .16em;
}

.battle-hud[data-control-mode="easy"] #stick .knob {
  z-index: 2;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  background: rgba(95, 230, 242, .44);
  border: 2px solid var(--cyan, #5FE6F2);
  box-shadow: inset 0 0 0 5px rgba(7, 15, 22, .18);
}

.battle-hud[data-control-mode="easy"] .touch-stick-group:not(.aim-group) > .touch-label {
  position: absolute;
  z-index: 22;
  left: max(16px, env(safe-area-inset-left, 0px));
  bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 190px);
  min-width: 140px;
  color: var(--cyan, #5FE6F2);
  font-size: 11px;
  letter-spacing: .18em;
}

.battle-hud[data-control-mode="easy"] .touch-stick-group:not(.aim-group) > .touch-label::after {
  content: "MOVE";
  font-size: 11px;
}

.battle-hud[data-control-mode="easy"] .touch-stick-group:not(.aim-group) > .touch-label {
  font-size: 0;
}

.battle-hud[data-control-mode="easy"] #fp {
  position: absolute;
  z-index: 22;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 18px);
  width: clamp(116px, 31vw, 146px);
  height: clamp(116px, 31vw, 146px);
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 3px solid var(--amber, #F2B233);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 194, 74, .2), transparent 62%),
    rgba(32, 25, 12, .91);
  color: var(--amber-hot, #FFC24A);
  font: 800 clamp(17px, 4.5vw, 22px) var(--display, system-ui, sans-serif);
  letter-spacing: .16em;
  box-shadow: inset 0 0 0 7px rgba(242, 178, 51, .09);
  touch-action: none;
}

.battle-hud[data-control-mode="easy"] #fp.held,
.battle-hud[data-control-mode="easy"] #fp:active {
  background-color: rgba(242, 178, 51, .3);
  border-color: var(--amber-hot, #FFC24A);
}

.battle-hud[data-control-mode="easy"] #aim-stick,
.battle-hud[data-control-mode="easy"] #center-torso,
.battle-hud[data-control-mode="easy"] #fs,
.battle-hud[data-control-mode="easy"] .aim-group > .touch-label {
  display: none !important;
}

/* Co-op uses a separate touch HUD; keep just the same large move/fire pair. */
.coop-battle[data-control-mode="easy"] .coop-touch-move {
  position: absolute;
  z-index: 21;
  left: max(16px, env(safe-area-inset-left, 0px));
  right: auto;
  bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 10px);
  width: clamp(140px, 35vw, 174px);
  height: clamp(140px, 35vw, 174px);
  border: 2px solid rgba(95, 230, 242, .78);
  background:
    radial-gradient(circle, rgba(95, 230, 242, .12) 0 2px, transparent 3px),
    rgba(7, 15, 22, .78);
  box-shadow: inset 0 0 0 7px rgba(95, 230, 242, .055);
  color: rgba(201, 211, 222, .88);
  font: 800 14px var(--display, system-ui, sans-serif);
  letter-spacing: .18em;
}
.coop-battle[data-control-mode="easy"] .coop-touch-move::after {
  content: "";
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid var(--cyan, #5fe6f2);
  background: rgba(95, 230, 242, .32);
  transform: translate(var(--stick-x, 0px), var(--stick-y, 0px));
  pointer-events: none;
}

.coop-battle[data-control-mode="easy"] .coop-turn-buttons,
.coop-battle[data-control-mode="easy"] .coop-touch-aim,
.coop-battle[data-control-mode="easy"] .coop-fire-buttons [data-coop-hold="center"],
.coop-battle[data-control-mode="easy"] .coop-fire-buttons [data-coop-hold="secondary"] {
  display: none !important;
}

.coop-battle[data-control-mode="easy"] .coop-fire-buttons {
  display: contents;
}

.coop-battle[data-control-mode="easy"] .coop-fire-buttons [data-coop-hold="primary"] {
  position: absolute;
  z-index: 22;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 18px);
  width: clamp(116px, 31vw, 146px);
  height: clamp(116px, 31vw, 146px);
  min-height: 0;
  padding: 0;
  border: 3px solid var(--amber, #F2B233);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 194, 74, .2), transparent 62%),
    rgba(32, 25, 12, .91);
  color: var(--amber-hot, #FFC24A);
  font: 800 clamp(17px, 4.5vw, 22px) var(--display, system-ui, sans-serif);
  letter-spacing: .16em;
  box-shadow: inset 0 0 0 7px rgba(242, 178, 51, .09);
  touch-action: none;
}

.coop-battle[data-control-mode="easy"] .coop-fire-buttons [data-coop-hold="primary"]:active,
.coop-battle[data-control-mode="easy"] .coop-fire-buttons [data-coop-hold="primary"].held {
  background-color: rgba(242, 178, 51, .3);
  border-color: var(--amber-hot, #FFC24A);
}

/* Keep the controls clear of the radar, map instruments, and top HUD in both
   phone orientations. Landscape has room to grow without changing the layout. */
@media (orientation: landscape) {
  .battle-hud[data-control-mode="easy"] #stick,
  .coop-battle[data-control-mode="easy"] .coop-touch-move {
    width: clamp(140px, 23vh, 174px);
    height: clamp(140px, 23vh, 174px);
  }

  .battle-hud[data-control-mode="easy"] #fp,
  .coop-battle[data-control-mode="easy"] .coop-fire-buttons [data-coop-hold="primary"] {
    width: clamp(116px, 20vh, 146px);
    height: clamp(116px, 20vh, 146px);
  }
}

:is(.battle-hud[data-control-mode="easy"], .coop-battle[data-control-mode="easy"]) .easy-control-hint {
  position: absolute;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: min(176px, calc(50vw - 12px));
  min-height: 42px;
  padding: 8px 11px;
  border: 1px solid var(--cyan, #5FE6F2);
  background: rgba(7, 15, 22, .96);
  color: var(--text, #E8EDF2);
  font: 700 14px/1.2 var(--read, system-ui, sans-serif);
  text-align: center;
  clip-path: var(--cut, polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)));
  pointer-events: none;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .3s ease, transform .3s ease;
}

:is(.battle-hud[data-control-mode="easy"], .coop-battle[data-control-mode="easy"]) .easy-control-hint[data-visible="true"] {
  opacity: 1;
  transform: translateY(0);
}

:is(.battle-hud[data-control-mode="easy"], .coop-battle[data-control-mode="easy"]) .easy-control-hint[data-hint="fire"] {
  border-color: var(--amber, #F2B233);
}

:is(.battle-hud[data-control-mode="easy"], .coop-battle[data-control-mode="easy"]) .easy-control-hint__arrow {
  position: absolute;
  width: 20px;
  height: 22px;
  bottom: -18px;
  left: calc(50% - 10px);
  color: var(--cyan, #5FE6F2);
  --easy-arrow-rotation: 0deg;
  animation: easy-hint-arrow 1.1s ease-in-out infinite alternate;
}

:is(.battle-hud[data-control-mode="easy"], .coop-battle[data-control-mode="easy"]) .easy-control-hint[data-hint="fire"] .easy-control-hint__arrow {
  color: var(--amber, #F2B233);
}

:is(.battle-hud[data-control-mode="easy"], .coop-battle[data-control-mode="easy"]) .easy-control-hint__arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}

:is(.battle-hud[data-control-mode="easy"], .coop-battle[data-control-mode="easy"]) .easy-control-hint__arrow path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

:is(.battle-hud[data-control-mode="easy"], .coop-battle[data-control-mode="easy"]) .easy-control-hint[data-arrow="up"] .easy-control-hint__arrow {
  top: -18px;
  bottom: auto;
  --easy-arrow-rotation: 180deg;
}

@keyframes easy-hint-arrow {
  from { transform: translateY(-2px) rotate(var(--easy-arrow-rotation, 0deg)); opacity: .72; }
  to { transform: translateY(3px) rotate(var(--easy-arrow-rotation, 0deg)); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  :is(.battle-hud[data-control-mode="easy"], .coop-battle[data-control-mode="easy"]) .easy-control-hint,
  :is(.battle-hud[data-control-mode="easy"], .coop-battle[data-control-mode="easy"]) .easy-control-hint__arrow {
    animation: none !important;
    transition: none !important;
  }
}

:is(.battle-hud[data-control-mode="easy"], .coop-battle[data-control-mode="easy"]) .easy-control-hint[data-reduce-motion="true"] *,
:is(.battle-hud[data-control-mode="easy"], .coop-battle[data-control-mode="easy"]) .easy-control-hint[data-reduce-motion="true"] {
  animation: none !important;
  transition: none !important;
}