:root {
  --mobile-safe-top: env(safe-area-inset-top, 0px);
  --mobile-safe-right: env(safe-area-inset-right, 0px);
  --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-safe-left: env(safe-area-inset-left, 0px);

  --mobile-control-gap: clamp(4px, 1.1vmin, 10px);
  --mobile-move-button: clamp(44px, 9.2vmin, 82px);
  --mobile-action-button: clamp(50px, 10.5vmin, 92px);
  --mobile-punch-button: clamp(60px, 12.5vmin, 108px);
}

/*
  The controls are hidden by default.

  mobile-controls.js adds body.touch-input only after a real touch input.
  Keyboard or mouse input removes that class again.
*/
#mobileTouchControls {
  position: absolute;
  inset: 0;
  z-index: 7;

  display: none;
  overflow: hidden;

  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}

/*
  The start/menu overlay must be closed before the controls appear.
  The script appends this element after #overlay inside #stage.
*/
body.touch-input #overlay.hidden ~ #mobileTouchControls {
  display: block;
}

.mobilePlayerControls {
  position: absolute;
  bottom: calc(8px + var(--mobile-safe-bottom));

  display: flex;
  align-items: flex-end;
  gap: clamp(8px, 1.7vw, 22px);

  max-width: calc(50% - 8px);

  pointer-events: none;
}

.mobilePlayerControls.playerOne {
  left: calc(8px + var(--mobile-safe-left));
  justify-content: flex-start;
}

.mobilePlayerControls.playerTwo {
  right: calc(8px + var(--mobile-safe-right));
  justify-content: flex-end;
}

/*
  P1 has movement on the outside-left and actions toward the middle.
  P2 mirrors that arrangement.
*/
.mobileMovementCluster,
.mobileActionCluster {
  position: relative;
  flex: 0 0 auto;
  pointer-events: none;
}

.mobileMovementCluster {
  display: grid;
  grid-template-columns: repeat(3, var(--mobile-move-button));
  grid-template-rows: repeat(3, var(--mobile-move-button));
  gap: var(--mobile-control-gap);
}

.mobileActionCluster {
  display: grid;
  grid-template-columns:
    var(--mobile-action-button)
    var(--mobile-punch-button);
  grid-template-rows:
    var(--mobile-action-button)
    var(--mobile-action-button);
  gap: var(--mobile-control-gap);
  align-items: center;
}

.playerTwo .mobileActionCluster {
  grid-template-columns:
    var(--mobile-punch-button)
    var(--mobile-action-button);
}

/* Movement-pad placement */

.mobileMoveJump {
  grid-column: 2;
  grid-row: 1;
}

.mobileMoveLeft {
  grid-column: 1;
  grid-row: 2;
}

.mobileMoveRight {
  grid-column: 3;
  grid-row: 2;
}

.mobileMoveBlock {
  grid-column: 2;
  grid-row: 3;
}

/* P1 action placement */

.playerOne .mobileActionProjectile {
  grid-column: 1;
  grid-row: 1;
}

.playerOne .mobileActionPunch {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.playerOne .mobileActionSuper {
  grid-column: 1;
  grid-row: 2;
}

/* P2 mirrored action placement */

.playerTwo .mobileActionPunch {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.playerTwo .mobileActionProjectile {
  grid-column: 2;
  grid-row: 1;
}

.playerTwo .mobileActionSuper {
  grid-column: 2;
  grid-row: 2;
}

/* Shared button appearance */

.mobileControlButton {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: clamp(3px, 0.7vmin, 7px);

  border: clamp(2px, 0.45vmin, 4px) solid rgba(39, 34, 29, 0.93);
  border-radius: clamp(13px, 2.8vmin, 25px);

  color: #27221e;
  background: rgba(255, 255, 255, 0.73);

  box-shadow:
    0 clamp(3px, 0.8vmin, 7px) 0 rgba(39, 34, 29, 0.33),
    0 6px 20px rgba(20, 15, 10, 0.14);

  font: inherit;
  font-size: clamp(9px, 1.75vmin, 15px);
  font-weight: 1000;
  line-height: 1;
  text-align: center;

  opacity: 0.78;
  cursor: pointer;

  pointer-events: auto;
  touch-action: none;

  transition:
    transform 70ms ease,
    opacity 70ms ease,
    filter 70ms ease,
    box-shadow 70ms ease;
}

.mobileControlButton::after {
  content: "";
  position: absolute;
  inset: 5px;

  border: 2px dashed rgba(39, 34, 29, 0.16);
  border-radius: inherit;

  pointer-events: none;
}

.mobileControlButton .controlIcon {
  position: relative;
  z-index: 1;

  font-size: clamp(18px, 4.2vmin, 38px);
  line-height: 0.85;
}

.mobileControlButton .controlText {
  position: relative;
  z-index: 1;

  margin-top: 4px;

  font-size: clamp(8px, 1.55vmin, 13px);
  letter-spacing: 0.02em;
}

.mobileControlButton.mobileActionPunch .controlText {
  font-size: clamp(10px, 1.85vmin, 16px);
}

.mobileControlButton.fireControl {
  background:
    linear-gradient(
      145deg,
      rgba(255, 248, 243, 0.92),
      rgba(255, 159, 124, 0.82)
    );
}

.mobileControlButton.iceControl {
  background:
    linear-gradient(
      145deg,
      rgba(248, 253, 255, 0.94),
      rgba(137, 202, 255, 0.84)
    );
}

.mobileControlButton.superControl {
  background:
    linear-gradient(
      145deg,
      rgba(255, 247, 178, 0.96),
      rgba(255, 202, 72, 0.9)
    );
}

.mobileControlButton.isPressed {
  opacity: 1;
  filter: brightness(0.9) saturate(1.12);

  transform:
    translateY(clamp(2px, 0.55vmin, 5px))
    scale(0.94);

  box-shadow:
    0 1px 0 rgba(39, 34, 29, 0.35),
    0 3px 10px rgba(20, 15, 10, 0.12);
}

.mobilePlayerLabel {
  position: absolute;
  bottom: calc(100% + 6px);

  padding: 4px 9px;

  border: 2px solid rgba(39, 34, 29, 0.9);
  border-radius: 999px;

  color: #27221e;
  background: rgba(250, 246, 232, 0.83);

  font-size: clamp(9px, 1.5vmin, 13px);
  font-weight: 1000;
  line-height: 1;
  white-space: nowrap;

  box-shadow: 0 2px 0 rgba(39, 34, 29, 0.22);
}

.playerOne .mobilePlayerLabel {
  left: 4px;
}

.playerTwo .mobilePlayerLabel {
  right: 4px;
}

/* Portrait orientation helper */

#mobileRotateHint {
  position: fixed;
  inset: 0;
  z-index: 40;

  display: none;
  place-items: center;

  padding:
    calc(24px + var(--mobile-safe-top))
    calc(24px + var(--mobile-safe-right))
    calc(24px + var(--mobile-safe-bottom))
    calc(24px + var(--mobile-safe-left));

  color: #28231e;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 27px,
      rgba(75, 111, 150, 0.13) 28px 29px
    ),
    #efe7d0;

  text-align: center;
}

.mobileRotateCard {
  width: min(92vw, 430px);
  padding: 24px;

  border: 4px solid #28231e;
  border-radius: 22px;

  background: rgba(255, 252, 239, 0.95);
  box-shadow: 0 10px 0 rgba(40, 35, 30, 0.22);

  font-size: clamp(18px, 5vw, 30px);
  font-weight: 1000;
}

.mobileRotateIcon {
  display: block;
  margin-bottom: 12px;

  font-size: clamp(52px, 18vw, 92px);
  line-height: 1;

  animation: mobileRotateAnimation 1.8s ease-in-out infinite;
}

@keyframes mobileRotateAnimation {
  0%,
  100% {
    transform: rotate(-18deg);
  }

  50% {
    transform: rotate(72deg);
  }
}

body.touch-input #mobileRotateHint {
  display: none;
}

@media (orientation: portrait) {
  body.touch-input #mobileRotateHint {
    display: grid;
  }
}

/*
  Short phones in landscape need slightly smaller controls so the arena
  remains visible above both players' thumbs.
*/
@media (orientation: landscape) and (max-height: 470px) {
  :root {
    --mobile-control-gap: clamp(3px, 0.8vmin, 6px);
    --mobile-move-button: clamp(38px, 9vmin, 54px);
    --mobile-action-button: clamp(42px, 10vmin, 59px);
    --mobile-punch-button: clamp(50px, 12vmin, 70px);
  }

  .mobilePlayerControls {
    bottom: calc(4px + var(--mobile-safe-bottom));
    gap: clamp(5px, 1.2vw, 10px);
  }

  .mobileControlButton {
    border-radius: 12px;
  }

  .mobilePlayerLabel {
    display: none;
  }
}

/*
  Very narrow landscape phones cannot afford the full three-column gap.
  Bring each player's inner action group closer to the screen center.
*/
@media (orientation: landscape) and (max-width: 760px) {
  .mobilePlayerControls {
    max-width: calc(50% - 3px);
  }

  .mobilePlayerControls.playerOne {
    left: calc(3px + var(--mobile-safe-left));
  }

  .mobilePlayerControls.playerTwo {
    right: calc(3px + var(--mobile-safe-right));
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobileControlButton,
  .mobileRotateIcon {
    animation: none !important;
    transition: none !important;
  }
}