/* 휴대폰(폭 560px 이하): 대기실·방·게임을 한 손 화면에 맞춘다. 넓은 화면 규칙은 건드리지 않는다(맨 마지막에 읽는다).
   게임 중에는 판과 터치 버튼이 스크롤 없이 한 화면에 들어오게 — 판 높이 = 화면 높이 − 나머지(--chrome) */
@media (max-width: 560px) {
  body { padding-inline: 8px; padding-block: calc(6px + env(safe-area-inset-top, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)); }
  body.in-stage .top { display: none; }   /* 위 KLIN 로고 줄 — 창 안 머리말과 겹친다 */
  .hg { padding: 6px; border-width: 2px; }

  /* 머리말: 방 제목 한 줄 + 접속 수·톱니(이름·계급·내공은 대기실 내 정보 칸과 내 명패에 있다) */
  .hg-title { grid-template-columns: minmax(0, 1fr) auto; gap: 6px; margin-bottom: 6px; }
  .hg-title .hg-logo { display: none; }
  .hg-title .hg-room { min-width: 0; max-width: none; padding: 3px 10px; font-size: 16px; gap: 6px; }
  .hg-title .hg-room .tags { display: none; }
  .hg-who #whoRank, .hg-who #whoName, .hg-who #whoNaegong, .hg-who #whoRecord { display: none; }
  .hg-who .who { gap: 6px; font-size: 13px; }

  /* ---------- 대기실 ---------- */
  .lb-body { display: flex; flex-direction: column; gap: 8px; }
  .lb-side { display: contents; }          /* 내 정보 → 방 목록 → 대화 → 접속자·친구 순서로 */
  .lb-me { order: 1; grid-template-columns: 64px 1fr; padding: 10px; }
  .lb-avatar { width: 64px; height: 64px; }
  .lb-avatar .char { width: 50px; height: 52px; }
  .lb-chat .chat-log { min-height: 110px; }
  #lbWho #online { display: none; }        /* 대기실은 제목 줄에 이미 '접속 N명'이 있다 */
  .lb-rooms { order: 2; padding: 8px; }
  .lb-chat { order: 3; }
  .lb-users { order: 4; display: flex !important; max-height: 300px; min-height: 200px; }
  .lb-bar { flex-direction: column; align-items: stretch; gap: 6px; }
  .lb-sort { display: grid; grid-template-columns: repeat(3, 1fr); }
  .lb-sort button { white-space: nowrap; padding: 6px 0; font-size: 14px; }
  .lb-bar .row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .lb-bar .row .btn { padding: 8px 2px; font-size: 13px; white-space: nowrap; min-width: 0; }
  .lb-no { grid-column: 1 / -1; order: -1; }
  .lb-no input { flex: 1; width: auto; min-width: 0; }

  /* ---------- 방·게임 ---------- */
  .hg-body { gap: 6px; }
  .foes { grid-template-columns: repeat(5, 46px); justify-content: center; gap: 6px; }   /* 상대 판 46×92 */
  .foe .foot { padding: 2px 0 0; }
  .foe .foot .nm { font-size: 11px; }
  .foe .no { font-size: 12px; height: 17px; min-width: 15px; padding: 0 3px; }
  .foe .state { font-size: 13px; }
  .foe .team-tag { font-size: 10px; padding: 0 3px; top: -3px; left: -2px; border-width: 1px; }
  .foe.empty .blank, .foe.closed .blank { font-size: 11px; }
  .foe.teamed.team-A canvas { background: #0d3a24; }   /* 폰은 칸 테두리가 얇아 판 바탕까지 팀 색(대기 중에도) — render.js TEAM_WELL과 같은 색 */
  .foe.teamed.team-B canvas { background: #10226a; }
  .foe.teamed.team-C canvas { background: #2e1660; }   /* 빈 자리 'KLIN' 글자가 좁은 칸 밖으로 넘쳤다 */
  .hg-left .kind { display: none; }
  .hg { --chrome: 300px; }                 /* 머리말·상대 판·간격·터치 버튼 높이 합(노템전) */
  .hg.item-on { --chrome: 340px; }         /* 아이템 칸 한 줄만큼 더 */
  #cvBoard { height: min(calc(100svh - var(--chrome)), calc((100vw - 16px - 12px - 2 * 58px - 2 * 5px - 40px) * 2)); }
  body:not([data-playing]) #cvBoard { height: min(34svh, calc((100vw - 16px - 12px - 2 * 58px - 2 * 5px - 40px) * 2)); }   /* 대기 중엔 맵 미리 보기만 — 준비 버튼이 위로 오게 */

  /* 게임 중: 명패는 숨기고(머리말·판 위에 다 있다) 아이템 칸은 이름만 한 줄 */
  body[data-playing] .hg-bottom .me-card { display: none; }
  .hg-bottom .item-bar { padding: 4px; gap: 2px; }
  .hg-bottom .inv-info { min-height: 0; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  body[data-playing] #invDesc { display: none; }

  /* 터치 버튼은 게임 중에만(대기 중엔 준비·팀 버튼이 그 자리에) */
  body:not([data-playing]) .pad { display: none !important; }
  .pad { gap: 10px; }

  /* 대기 중: 팀·준비·방 버튼을 판 바로 아래로, 대화·팁은 그 밑으로 */
  .hg-side .team-pick { order: 1; }
  body[data-playing] .hg-side .team-pick { display: none; }   /* 게임 중엔 팀을 못 바꾼다 — 터치 버튼 아래 자리만 차지했다 */
  .hg-side #btnReady { order: 2; }
  .hg-side .room-hint { order: 3; }
  .hg-side .side-buttons { order: 4; }
  .hg-side .game-chat { order: 5; }
  .hg-side .tabs { order: 6; }
  .hg-side .tab-body { order: 7; }

  /* 결과창: 순위·아이디·등급·내공·증감만(평속·공격 줄 같은 기록 칸은 넓은 화면에서) */
  .result { inset: 8% 2% auto; padding: 10px 8px 12px; }
  .result h3 { font-size: 46px; margin-top: -36px; }
  .result th:nth-child(n+6), .result td:nth-child(n+6) { display: none; }
  .result table { font-size: 14px; }

  /* 첫 화면: 데모 판을 줄여 로그인 칸이 빨리 보이게 */
  .en-scene { min-height: 150px; max-height: 170px; }
  .en-hero { min-height: 0; gap: 14px; }
  .en-points { gap: 6px; }
}