/* D-pad, controles táctiles y acciones rápidas; especializa el estilo común de controles. */
.dpad {
  position: absolute;
  bottom: 12px;
  left: 12px;
  display: grid;
  grid-template-columns: repeat(3, 29px);
  gap: 3px;
}
.dpad button {
  border: 1px solid #d0e1f2;
  background: #ffffffda;
  border-radius: 8px;
  color: #6085a9;
  width: 29px;
  height: 27px;
  padding: 0;
  touch-action: none;
}
.dpad button:first-child {
  grid-column: 2;
}
.dpad button:nth-child(2) {
  grid-row: 2;
  grid-column: 1;
}
.dpad button:nth-child(3) {
  grid-row: 2;
  grid-column: 2;
}
.dpad button:nth-child(4) {
  grid-row: 2;
  grid-column: 3;
}
.mobile-controls {
  display: none;
}
.dpad button.is-held {
  background: #cce2ff;
  border-color: #7faee7;
  box-shadow: inset 0 2px 5px #5684b32b;
  transform: translateY(1px);
}
/* Keep desktop movement controls beside the activity panel. */
.playground > .dpad {
  left: auto;
  right: 12px;
}
/* Desktop directional buttons: ten percent larger. */
.playground > .dpad {
  grid-template-columns: repeat(3, 31.9px);
}
.playground > .dpad button {
  width: 31.9px;
  height: 29.7px;
}
@media (min-width: 851px) and (pointer: fine), (min-width: 1101px) {
  #desktop-center {
    grid-column: 1;
    grid-row: 1;
    width: 30px;
    height: 30px;
    font-size: calc(19px * var(--text-scale, 1));
  }

  #desktop-clean {
    grid-column: 3;
    grid-row: 1;
    width: 30px;
    height: 30px;
  }

  .playground > .dpad [data-direction="ArrowUp"] {
    grid-column: 2;
    grid-row: 1;
  }

  .playground > .dpad [data-direction="ArrowLeft"] {
    grid-column: 1;
    grid-row: 2;
  }

  .playground > .dpad [data-direction="ArrowDown"] {
    grid-column: 2;
    grid-row: 2;
  }

  .playground > .dpad [data-direction="ArrowRight"] {
    grid-column: 3;
    grid-row: 2;
  }
}
.mobile-tools .command,
.quick-action,
.mobile-dpad button {
  box-shadow: none;
}
@media (max-width: 850px), (pointer: coarse) and (max-width: 1100px) {
  .playground > .dpad {
    display: none;
  }
}
/* Both button groups share the same row below the movement instruction. */
@media (max-width: 850px), (pointer: coarse) and (max-width: 1100px) {
  .mobile-controls {
    display: grid;
    grid-row: 1;
    grid-column: 1;
    align-self: end;
    z-index: 5;
    margin: 0 8px 8px;
    width: calc(100% - 16px);
    height: 94px;
    min-height: 94px;
    padding: 4px 8px;
    grid-template-rows: 12px 70px;
    align-items: center;
    column-gap: 8px;
    row-gap: 2px;
    background: #ffffffd9;
    border: 1px solid #d4e6f4;
    border-radius: 18px;
    box-shadow: none;
    --control-row-height: 33px;
    --control-row-gap: 4px;
  }

  .movement-block {
    display: contents;
  }

  .touch-label {
    grid-column: 1;
    grid-row: 1;
    text-align: center;
    line-height: 12px;
    margin: 0;
    color: #6d8aa3;
  }

  .touch-label.action-controls-label {
    grid-column: 2;
  }

  .mobile-dpad {
    grid-column: 1;
    grid-row: 2;
    position: static;
    display: grid;
    grid-template-rows: repeat(2, var(--control-row-height));
    gap: var(--control-row-gap);
    padding: 0;
  }

  .mobile-dpad button {
    height: 33px;
    min-height: 33px;
    font-size: calc(20px * var(--text-scale, 1));
    border-radius: 10px;
    background: #f3f9ff;
    color: #377bb4;
    border: 1px solid #ccdfef;
    box-shadow: 0 2px 0 #dae7f1;
  }

  .dpad.mobile-dpad button[data-direction="ArrowUp"] {
    grid-column: 2;
    grid-row: 1;
  }

  .mobile-dpad #mobile-center {
    grid-column: 1;
    grid-row: 1;
  }

  .mobile-dpad #mobile-clean {
    grid-column: 3;
    grid-row: 1;
    font-size: calc(11px * var(--text-scale, 1));
  }

  .dpad.mobile-dpad button[data-direction="ArrowLeft"] {
    grid-column: 1;
    grid-row: 2;
  }

  .dpad.mobile-dpad button[data-direction="ArrowDown"] {
    grid-column: 2;
    grid-row: 2;
  }

  .dpad.mobile-dpad button[data-direction="ArrowRight"] {
    grid-column: 3;
    grid-row: 2;
  }

  .mobile-tools {
    grid-column: 2;
    grid-row: 2;
    display: grid;
    grid-template-rows: repeat(2, var(--control-row-height));
    gap: var(--control-row-gap);
    min-width: 0;
    width: 100%;
  }

  .quick-actions,
  .mobile-tools .pace-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    margin: 0;
  }

  .quick-action {
    height: 33px;
    min-height: 33px;
    padding: 2px 1px;
    border: 1px solid #ccdfef;
    border-radius: 10px;
    background: var(--color-surface);
    color: #3d658b;
    box-shadow: 0 2px 0 #dae7f1;
  }

  .quick-action strong {
    display: block;
    font-size: 0;
    line-height: 1.1;
  }

  .quick-action strong:after {
    content: attr(data-mobile-label);
    line-height: 1.15;
  }

  .mobile-tools strong:after {
    white-space: nowrap;
  }

  .quick-action[data-command="stop"] {
    background: #fff5f6;
    border-color: #e8cbd2;
    color: #976471;
  }

  .mobile-dpad button.is-held {
    background: #c9e4fc;
    border-color: #76aada;
    box-shadow: none;
    transform: translateY(1px);
  }
}
@media (max-width: 360px) {
  .mobile-tools strong:after {
    font-size: calc(10px * var(--text-scale, 1));
  }

  .mobile-controls {
    gap: 5px;
    padding: 4px 5px;
  }

  .mobile-dpad {
    grid-template-columns: repeat(3, 31px);
  }

  .mobile-dpad button {
    width: 31px;
  }
}
@media (max-width: 850px) and (orientation: portrait) and (max-height: 650px) {
  .mobile-controls {
    height: 80px;
    min-height: 80px;
    grid-template-rows: 70px;
    row-gap: 0;
  }

  .mobile-dpad,
  .mobile-tools {
    grid-row: 1;
  }

  .touch-label {
    display: none;
  }
}
@media (max-width: 850px) and (orientation: landscape) and (max-height: 500px),
  (pointer: coarse) and (max-width: 1100px) and (orientation: landscape) and (max-height: 500px) {
  .mobile-controls {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    width: 100%;
    margin: 0;
    height: 64px;
    min-height: 64px;
    padding: 3px 5px;
    grid-template-columns: 90px minmax(0, 1fr);
    grid-template-rows: 56px;
    column-gap: 5px;
    row-gap: 0;
    --control-row-height: 26px;
  }

  .mobile-dpad,
  .mobile-tools {
    grid-row: 1;
  }

  .touch-label {
    display: none;
  }

  .mobile-dpad {
    grid-template-columns: repeat(3, 28px);
  }

  .mobile-dpad button {
    width: 28px;
    height: 26px;
    min-height: 26px;
    font-size: calc(18px * var(--text-scale, 1));
  }

  .mobile-tools {
    gap: 4px;
  }

  .mobile-tools :is(.command, .quick-action) {
    height: 26px;
    min-height: 26px;
  }
}
@media (max-width: 850px), (pointer: coarse) and (max-width: 1100px) {
  .quick-action strong:after {
    font-size: calc(12px * var(--text-scale, 1));
  }

  .mobile-tools strong:after {
    font-size: calc(11px * var(--text-scale, 1));
  }

  .mobile-tools .activity-icon {
    display: none;
  }
}
/* Give movement a meaningful share of the controls instead of a fixed narrow strip. */
@media (max-width: 850px), (pointer: coarse) and (max-width: 1100px) {
  .mobile-controls {
    grid-template-columns: clamp(132px, 32%, 260px) minmax(0, 1fr);
  }

  .mobile-dpad {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mobile-dpad button {
    width: 100%;
  }
}
@media (max-width: 360px) {
  .mobile-controls {
    grid-template-columns: 114px minmax(0, 1fr);
  }

  .mobile-tools :is(.command, .quick-action) strong:after {
    font-size: calc(9px * var(--text-scale, 1));
  }
}
@media (max-width: 850px) and (orientation: landscape) and (max-height: 500px),
  (pointer: coarse) and (max-width: 1100px) and (orientation: landscape) and (max-height: 500px) {
  .mobile-tools :is(.command, .quick-action) strong:after {
    font-size: calc(9.5px * var(--text-scale, 1));
  }
}
@media (pointer: coarse) and (orientation: landscape) and (min-width: 900px) and (max-width: 1100px) and (min-height: 501px) {
  .mobile-controls {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    margin: 0;
    width: 100%;
  }
}
@media (min-width: 851px) and (pointer: fine), (min-width: 1101px) {
  .playground > .dpad {
    grid-template-rows: repeat(2, 40px);
    grid-template-columns: repeat(3, 40px);
  }

  .playground > .dpad button,
  #desktop-center,
  #desktop-clean {
    width: 40px;
    height: 40px;
    min-height: 40px;
  }

  #desktop-clean {
    font-size: calc(11px * var(--text-scale, 1));
  }
}
@media (max-width: 850px), (pointer: coarse) and (max-width: 1100px) {
  .touch-label {
    font-size: calc(11px * var(--text-scale, 1));
  }
}
@media (max-width: 850px) and (orientation: portrait) and (min-height: 800px),
  (pointer: coarse) and (max-width: 1100px) and (orientation: portrait) and (min-height: 800px) {
  .mobile-controls {
    height: 108px;
    min-height: 108px;
    grid-template-rows: 12px 84px;
    --control-row-height: 40px;
  }

  .mobile-dpad {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mobile-dpad button,
  .mobile-tools :is(.command, .quick-action) {
    height: 40px;
    min-height: 40px;
  }
}
/* Stage tools without duplicates: pace + Stop beside the pad (Jumping lives in the Movement cards,
   centering in the pad). Center and Clean are words, like the rest of the tools. */
.mobile-tools .quick-actions {
  grid-template-columns: minmax(0, 1fr);
}
.mobile-dpad #mobile-center {
  font-size: calc(11px * var(--text-scale, 1));
}
.playground > .dpad #desktop-center {
  font-size: calc(11px * var(--text-scale, 1));
  font-weight: 600;
}
.mobile-controls {
  border-color: var(--ad-line);
  background: var(--ad-paper);
  box-shadow:
    0 3px 0 var(--ad-base),
    inset 0 2px 0 #fff9;
}
.mobile-controls .touch-label {
  color: #48668c;
  font-weight: 800;
}
:is(#mobile-clean, #desktop-clean) {
  --tile-top: var(--ad-mint-top);
  --tile-face: var(--ad-mint-face);
  --tile-edge: var(--ad-mint-edge);
  --tile-base: var(--ad-mint-base);
  --tile-ink: var(--ad-mint-ink);
}
:is(.mobile-tools .command[data-pace="walk"], .panel .command[data-speed-card][data-pace="walk"]) {
  --tile-top: var(--ad-purple-top);
  --tile-face: var(--ad-purple-face);
  --tile-edge: var(--ad-purple-edge);
  --tile-base: var(--ad-purple-base);
  --tile-ink: var(--ad-purple-ink);
}
:is(.mobile-tools .command[data-pace="jog"], .panel .command[data-speed-card][data-pace="jog"]) {
  --tile-top: var(--ad-mint-top);
  --tile-face: var(--ad-mint-face);
  --tile-edge: var(--ad-mint-edge);
  --tile-base: var(--ad-mint-base);
  --tile-ink: var(--ad-mint-ink);
}
:is(.mobile-tools .command[data-pace="run"], .panel .command[data-speed-card][data-pace="run"]) {
  --tile-top: var(--ad-orange-top);
  --tile-face: var(--ad-orange-face);
  --tile-edge: var(--ad-orange-edge);
  --tile-base: var(--ad-orange-base);
  --tile-ink: var(--ad-orange-ink);
}
.mobile-tools .command[data-command="stop"] {
  --tile-top: var(--ad-coral-top);
  --tile-face: var(--ad-coral-face);
  --tile-edge: var(--ad-coral-edge);
  --tile-base: var(--ad-coral-base);
  --tile-ink: var(--ad-coral-ink);
}
/* A press lowers the bevel, without moving surrounding controls or the stage. */
.mobile-dpad button.is-held,
.playground > .dpad button.is-held,
#movement-menu-drawer > .dpad button.is-held {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 0 #ffffff60,
    0 1px 0 var(--tile-base);
}
@media (min-width: 601px) {
  .mobile-tools .pace-buttons .command {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
  }

  .mobile-tools .pace-buttons .activity-icon {
    display: block;
    flex: none;
    width: 22px;
    height: 22px;
    font-size: 20px;
    line-height: 22px;
  }

  .mobile-tools .quick-action[data-command="stop"] .activity-icon {
    display: block;
    width: 23px;
    height: 23px;
    flex: none;
    font-size: 21px;
    line-height: 23px;
  }

  .mobile-tools .quick-action[data-command="stop"] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  .mobile-tools .quick-action[data-command="stop"] strong:after {
    content: "Stopping";
  }
}
@media (max-width: 600px) {
  .mobile-tools .command[aria-pressed="true"]::after {
    display: none;
  }

  .mobile-controls {
    box-shadow:
      0 2px 0 var(--ad-base),
      inset 0 1px 0 #fff9;
  }

  .mobile-controls .touch-label {
    font-weight: 750;
  }
}
@media (orientation: landscape) and (max-height: 500px) {
  .mobile-tools .pace-buttons .activity-icon {
    display: none;
  }
}
html[data-appearance="dark"] .mobile-controls .touch-label {
  color: #bfd3ef;
}
.mobile-tools .quick-action[data-command="stop"] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
@media (max-width: 600px) {
  .mobile-controls .mobile-tools .command[aria-pressed="true"]::after {
    display: none;
  }
}