/* games/breakout/style.css */

.difficulty-bar {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

/* Canvas 容器 */
#canvas-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}

#breakout-canvas {
  border-radius: var(--border-radius);
  display: block;
  touch-action: none;
  box-shadow: var(--shadow-card);
  border: 2px solid var(--color-border);
  /* 寬度填滿但不超過邏輯寬 720px；
     高度由 JS resizeCanvas 依視窗高度動態設定 */
  max-width: 720px;
  width: 100%;
  /* aspect-ratio 作為 fallback（JS 會直接設定 style.height） */
  aspect-ratio: 720 / 580;
}

/* 操作提示文字 */
.game-hint {
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-top: 12px;
  line-height: 1.8;
}

/* 手機觸控暫停按鈕：桌機隱藏，手機顯示 */
.breakout-touch-controls {
  display: none;
  justify-content: center;
  margin: 10px 0 4px;
}
.breakout-touch-controls .btn {
  min-width: 160px;
  font-size: 1rem;
}

@media (hover: none) and (pointer: coarse) {
  /* 觸控裝置才顯示暫停按鈕 */
  .breakout-touch-controls {
    display: flex;
  }
}