/* Game Hub 공통 반응형 보정 — 화면 잘림 방지 (2026-10-17) */

html, body { overflow-x: clip; }

canvas {
  max-width: 100vw !important;
  max-height: 100vh !important;
  height: auto;
}

/* snake: 고정 720px 카드 / 1080px 플레이그라운드 */
@media (max-width: 900px) {
  .card { width: auto !important; max-width: 100% !important; box-sizing: border-box; }
  .playground { width: auto !important; max-width: 100vw !important; height: auto !important; }
  .scoreboard { padding: 2rem 1rem !important; }
}

/* racer: 고정 640px #racer + margin-left 20em + 절대배치 canvas/hud */
@media (max-width: 900px) {
  #racer { width: 100vw !important; max-width: 100vw !important; margin-left: 0 !important; height: auto !important; aspect-ratio: 4 / 3; }
  #racer #canvas { position: absolute !important; left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; }
  #hud { width: 100% !important; box-sizing: border-box; }
  #controls, #instructions { float: none !important; width: auto !important; box-sizing: border-box; }
  #mute { position: static !important; margin-left: 0 !important; display: block; margin: 8px auto; }
}

/* bounceit / brickit: JS가 래퍼 div에 고정 px 폭을 주입 */
#BounceItDiv, #BrickItDiv { max-width: 100vw !important; }