/* Sprint 14 touch controls. Responsive window layout is kept in responsive.css. */
#mobileControls14[hidden], #mobileHelp14, #mobileResume14 { display: none !important; }

.enotTouch14 #game {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.enotTouch14 #mobileHelp14 { display: block !important; }
.enotTouch14 #mobileResume14 { display: inline-block !important; }
.enotTouch14 #title .keys:not(#mobileHelp14) { display: none; }

#mobileControls14 {
  --touch-safe-bottom: max(12px, env(safe-area-inset-bottom));
  position: fixed;
  inset: 0;
  z-index: 78;
  pointer-events: none;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

#mobileControls14 button,
#mobileControls14 .mobilePad14 {
  pointer-events: auto;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.mobilePad14 {
  position: absolute;
  bottom: var(--touch-safe-bottom);
  width: 116px;
  height: 116px;
  border: 2px solid rgba(255, 238, 188, .68);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(72, 83, 50, .42) 0 42%, rgba(25, 31, 18, .76) 44% 100%);
  box-shadow: 0 5px 20px rgba(0, 0, 0, .35), inset 0 0 18px rgba(255, 246, 208, .12);
}

.mobilePad14::after {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  color: rgba(255, 244, 211, .72);
  font: 10px/1 system-ui, sans-serif;
  letter-spacing: .06em;
  white-space: nowrap;
}

#mobileMove14 { left: max(12px, env(safe-area-inset-left)); }
#mobileMove14::after { content: 'ДВИЖЕНИЕ'; }
#mobileAim14 { right: max(12px, env(safe-area-inset-right)); }
#mobileAim14::after { content: 'НАВЕДЕНИЕ'; }
#mobileAim14.hasTarget14 { border-color: #f0c867; box-shadow: 0 0 0 3px rgba(240, 200, 103, .25), 0 5px 20px rgba(0, 0, 0, .35); }

.mobileKnob14 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border: 2px solid #f5e9c7;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(242, 227, 182, .95), rgba(159, 171, 113, .95));
  box-shadow: 0 3px 9px rgba(0, 0, 0, .45);
  pointer-events: none;
  will-change: transform;
}

#mobileControls14 button {
  position: absolute;
  display: grid;
  place-items: center;
  margin: 0;
  border: 2px solid #e7d39d;
  color: #fff6d9;
  background: rgba(39, 47, 27, .92);
  font-family: Neucha, system-ui, sans-serif;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .38);
}

#mobileControls14 button:active {
  transform: scale(.94);
  background: rgba(83, 100, 54, .96);
}

.mobileRound14 { border-radius: 50%; }
.mobileAction14 {
  right: max(24px, env(safe-area-inset-right));
  bottom: calc(var(--touch-safe-bottom) + 128px);
  width: 76px;
  height: 76px;
  font-size: 18px;
  background: rgba(80, 102, 52, .96) !important;
}
.mobileAttack14 {
  right: max(28px, env(safe-area-inset-right));
  bottom: calc(var(--touch-safe-bottom) + 210px);
  width: 58px;
  height: 58px;
  font: 29px/1 system-ui, sans-serif !important;
}
.mobileSmall14 {
  top: max(12px, env(safe-area-inset-top));
  width: 48px;
  height: 48px;
  border-radius: 12px;
  font-size: 20px;
}
#mobilePause14 { right: max(12px, env(safe-area-inset-right)); }
#mobileMore14 { right: calc(max(12px, env(safe-area-inset-right)) + 56px); }

.enotTouch14.hudCompact #s4InventoryDock {
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + 124px);
}

@media (orientation: landscape) and (max-height: 500px) {
  .mobilePad14 { width: 94px; height: 94px; }
  .mobileKnob14 { width: 42px; height: 42px; margin: -21px 0 0 -21px; }
  .mobilePad14::after { bottom: 7px; font-size: 8px; }
  .mobileAction14 { right: calc(max(10px, env(safe-area-inset-right)) + 108px); bottom: calc(var(--touch-safe-bottom) + 12px); width: 62px; height: 62px; font-size: 15px; }
  .mobileAttack14 { right: calc(max(10px, env(safe-area-inset-right)) + 176px); bottom: calc(var(--touch-safe-bottom) + 17px); width: 52px; height: 52px; }
  .mobileSmall14 { top: max(8px, env(safe-area-inset-top)); width: 44px; height: 44px; }
  .enotTouch14.hudCompact #s4InventoryDock { bottom: calc(max(8px, env(safe-area-inset-bottom)) + 96px); }
}

@media (min-width: 700px) and (pointer: coarse) {
  .mobilePad14 { width: 132px; height: 132px; }
  .mobileAction14 { bottom: calc(var(--touch-safe-bottom) + 146px); width: 82px; height: 82px; }
  .mobileAttack14 { right: max(30px, env(safe-area-inset-right)); bottom: calc(var(--touch-safe-bottom) + 236px); width: 64px; height: 64px; }
  .enotTouch14.hudCompact #s4InventoryDock { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 142px); }
}

@media (prefers-reduced-motion: reduce) {
  #mobileControls14 button { transition: none; }
}