.mz-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.mz-canvas {
  width: 100%;
  max-width: 340px;
  height: auto;
  aspect-ratio: 340 / 420;
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 3px var(--color-border);
  background: #0b0e1a;
  touch-action: none;
}

.mz-dpad {
  display: grid;
  grid-template-columns: 56px 56px 56px;
  grid-template-rows: 48px 48px;
  grid-template-areas:
    ".    up    ."
    "left down right";
  gap: 8px;
  justify-content: center;
}
.mz-btn {
  border-radius: 12px;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 1.2rem;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mz-btn:active, .mz-btn:hover { border-color: #4fd8e0; }
.mz-btn--up { grid-area: up; }
.mz-btn--left { grid-area: left; }
.mz-btn--right { grid-area: right; }
.mz-btn--down { grid-area: down; }