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

.ad-canvas {
  width: 100%;
  max-width: 360px;
  height: auto;
  aspect-ratio: 360 / 480;
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 3px var(--color-border);
  background: #1a0805;
  cursor: crosshair;
  touch-action: none;
}

.ad-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: 360px;
  flex-wrap: wrap;
}

.ad-rot-col {
  display: flex;
  gap: 10px;
}

.ad-btn {
  min-width: 54px;
  height: 46px;
  padding: 0 14px;
  border-radius: 12px;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 1.1rem;
  cursor: pointer;
  user-select: none;
}
.ad-btn:active, .ad-btn:hover { border-color: #ffb84f; }

.ad-btn--rot {
  font-size: 1.3rem;
  font-weight: 700;
}

.ad-btn--thrust {
  background: linear-gradient(135deg, #ffb84f, #a85a2f);
  color: #1a0805;
  font-weight: 700;
  border-color: transparent;
  font-size: 0.9rem;
  min-width: 110px;
}

.ad-btn--fire {
  background: linear-gradient(135deg, #ff5a3a, #ffe27a);
  color: #1a0805;
  font-weight: 700;
  border-color: transparent;
  font-size: 0.95rem;
  min-width: 110px;
}