/* 휴대폰 폭(375px 기준) 대응. index.html 의 기본 스타일 뒤에 <link> 로 불러 덮어쓴다.
   기본 레이아웃은 건드리지 않고 480px 이하에서만 적용한다. */
@media (max-width: 480px) {
  html, body { overflow-x: hidden; }
  body { margin: 8px; }
  h1 { font-size: 1.4rem; margin: 8px 0; }

  /* 로비: 입력·버튼을 한 줄에 한 개씩, 손가락으로 누를 수 있는 높이 */
  #lobby fieldset { min-width: 0; padding: 8px; }
  #lobby button, #tutorial button, #game button { min-height: 44px; padding: 8px 12px; }
  #lobby input { box-sizing: border-box; width: 100%; max-width: 100%; min-height: 40px; font-size: 16px; }
  #lobby label { display: block; }
  #btn-join { margin-top: 6px; }

  /* 보드 + 사이드: 세로로 쌓고 보드는 화면 폭에 맞춘다 */
  .layout { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px; }
  #board, #tut-board { width: 100%; max-width: 100%; }
  #board svg, #tut-board svg { display: block; width: 100%; max-width: 100%; height: auto; }
  #side { min-width: 0; width: 100%; }
  #actions button, #tut-actions button { width: 100%; min-height: 44px; }
  #side > button { width: 100%; }

  /* 튜토리얼 말풍선·안내 */
  #tut-goal { font-size: 1rem; }
  #tut-hint, #tut-error, #tut-hud, #hud, #room-info, #arrows { overflow-wrap: anywhere; }
  #tut-clear, #tut-done { box-sizing: border-box; max-width: 100%; }
  #tut-done button, #tut-clear button { width: 100%; margin: 4px 0; }
  #tut-practice button { width: 100%; margin: 4px 0; }

  /* 종료 패널 */
  #result { box-sizing: border-box; max-width: 100%; overflow-wrap: anywhere; }
  #result button { width: 100%; margin-top: 6px; }

  /* 요약표 패널: 전폭 오버레이, 닫기 버튼은 위에 고정 */
  #quickref-panel { box-sizing: border-box; inset: 0; top: 0; right: 0; width: 100%; max-width: 100%; max-height: none; height: 100%; border-width: 0; overflow-wrap: anywhere; }
  #quickref-bar { position: sticky; top: 0; background: #fff; padding-bottom: 8px; }
  #quickref-close { width: 100%; }
}