[data-platform-mobile-controls] .mobile-dpad {
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  grid-template-columns: repeat(3, minmax(44px, calc(54px * var(--ult-control-scale, 1))));
  grid-template-rows: repeat(3, minmax(44px, calc(54px * var(--ult-control-scale, 1))));
  gap: 4px;
}
[data-platform-mobile-controls] .mobile-dpad button,
[data-platform-mobile-controls] .mobile-action-grid button {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid rgba(143, 156, 172, .56);
  border-radius: 7px;
  background: #0b111a;
  color: #f4f5f6;
  font-family: inherit;
  font-weight: 650;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
[data-platform-mobile-controls] .mobile-dpad button {
  font-size: 1.35rem;
  touch-action: none;
}
[data-platform-mobile-controls] .mobile-dpad button[data-move="north"] { grid-area: 1 / 2; }
[data-platform-mobile-controls] .mobile-dpad button[data-move="west"] { grid-area: 2 / 1; }
[data-platform-mobile-controls] .mobile-dpad button[data-move="south"] { grid-area: 3 / 2; }
[data-platform-mobile-controls] .mobile-dpad button[data-move="east"] { grid-area: 2 / 3; }
[data-platform-mobile-controls] .mobile-dpad::before {
  content: "";
  grid-area: 2 / 2;
  border: 1px solid rgba(143, 156, 172, .25);
  border-radius: 5px;
  background: #080d14;
}
[data-platform-mobile-controls] .mobile-dpad:has(.mobile-dpad-center:not([hidden]))::before { display: none; }
[data-platform-mobile-controls] .mobile-dpad .mobile-dpad-center {
  grid-column: 2;
  grid-row: 2;
  padding: 3px;
  font-size: clamp(.61rem, 2.7vw, .72rem);
  line-height: 1.02;
}
[data-platform-mobile-controls] .mobile-action-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(44px, 1fr));
  gap: 5px;
}
[data-platform-mobile-controls] .mobile-action-grid button {
  min-width: 0;
  padding: 5px 4px;
  font-size: clamp(.72rem, 3.35vw, .94rem);
  line-height: 1.08;
}
[data-platform-mobile-controls] .mobile-action-grid button:disabled,
[data-platform-mobile-controls] .mobile-dpad button:disabled { opacity: .3; }
[data-platform-mobile-controls] .mobile-action-grid button[data-control-tone="primary"]:not(:disabled) {
  border-color: rgba(213, 168, 77, .72);
}
[data-platform-mobile-controls] .mobile-action-grid button:not(:disabled):active,
[data-platform-mobile-controls] .mobile-dpad button:not(:disabled):active {
  border-color: #e2bd68;
  background: #172235;
  transform: scale(.97);
}