/* =====================================================
   responsive.css - レスポンシブ対応（スマホ/タブレット）
   ===================================================== */

/* ---------------------------------------------------
   タブレット（〜900px）
   --------------------------------------------------- */
@media (max-width: 900px) {
  .lobby-main { padding: 16px 12px 36px; }

  .qx-window {
    max-width: calc(100vw - 8px);
    max-height: calc(100vh  - 42px - 42px - 12px);
    max-height: calc(100dvh - 42px - 42px - 12px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  }

  /* カードは2列固定にしてコンパクトに */
  .player-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------------------------------------------------
   スマホ（〜700px）
   PC と同じ操作感：ウィンドウはドラッグ・リサイズ可能
   --------------------------------------------------- */
@media (max-width: 700px) {
  /* ロビー ヒーロー */
  .lobby-hero { padding: 22px 16px 26px; }
  .lobby-hero-inner { flex-direction: column; align-items: stretch; gap: 16px; }
  .hero-logo { font-size: 32px !important; }
  .hero-name-area input { width: 100%; font-size: 16px; padding: 13px 14px; }
  .room-table th, .room-table td { padding: 9px 8px; }
  .room-table .col-no { width: 38px; }
  .room-table .col-count { width: 44px; }
  .room-table .col-join { width: 54px; }
  /* リンクバーはコンパクトに */
  .lobby-links-bar { gap: 6px; padding: 8px 12px; }
  .lobby-link-item { font-size: 12px; padding: 4px 10px; }

  /* タッチで掴みやすいリサイズハンドル */
  .qx-resize { width: 30px; height: 30px; }

  #menubar { gap: 7px; }
  .room-title { max-width: 28vw; }
  .self-info { display: none; }

  /* タイトルバーはタッチで掴みやすく少し高く */
  .qx-titlebar { flex: 0 0 40px; }
  .qx-controls button { width: 34px; height: 32px; font-size: 15px; }

  .taskbar-btn { height: 34px; font-size: 11px; padding: 0 8px; }

  /* カードは2列 */
  .player-cards { grid-template-columns: repeat(2, 1fr); gap: 5px; }
  .pc-pts { font-size: 22px; }

  /* 押しボタンはウィンドウ幅に合わせてパーセント指定 */
  .push-button { width: 80%; max-width: 160px; font-size: 26px; }

  .host-judge-row { flex-direction: row; }
  .btn-big { font-size: 15px; padding: 10px 6px; }
}

/* ---------------------------------------------------
   タッチデバイス（スマートフォン・タブレット）
   キーボード・ゲームパッドは不要なため非表示
   --------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
  .setting-group--keys,
  .setting-group--gamepad { display: none; }
}

/* ---------------------------------------------------
   高さが低い端末（横持ちスマホ等）
   --------------------------------------------------- */
@media (max-height: 480px) {
  .push-button { width: 110px; font-size: 18px; margin: 5px auto; }
  #menubar { min-height: 36px; height: calc(36px + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); }
  #taskbar { min-height: 36px; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .qx-window.maximized {
    top: calc(36px + env(safe-area-inset-top, 0px)) !important;
    height: calc(100vh  - 72px) !important;
    height: calc(100dvh - 72px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
  }
  .pc-pts { font-size: 20px; }
}