/* ── スマホ対応 ──────────────────────────────────────── */
@media (max-width: 768px) {
  html, body { overflow: auto; }
  #app { height: auto; min-height: 100vh; }

  .app-header {
    flex-wrap: nowrap; height: auto; padding: 6px 8px; gap: 4px;
  }
  .header-actions {
    flex-wrap: nowrap; gap: 4px; width: 100%;
  }
  .header-actions .btn { font-size: 11px; padding: 5px 8px; }
  .header-actions > span { display: none; }

  .app-body { flex-direction: column; overflow: visible; }

  .player-panel {
    width: 100% !important; max-width: 100%; min-width: 0;
    max-height: 40vh; border-bottom: 1px solid var(--border);
  }

  .panel-resizer { display: none; }

  .canvas-wrap { min-height: auto; overflow-y: auto; }

  #canvas {
    min-width: 0; min-height: 0;
    display: flex; flex-wrap: wrap; gap: 10px;
    padding: 10px; position: relative;
    background-size: 0; /* ドットパターン非表示 */
  }

  .table-card {
    position: relative !important; left: auto !important; top: auto !important;
    width: calc(50% - 5px); min-width: 150px;
  }
  .table-player { font-size: 13px; }
  .table-label { font-size: 14px; }

  .room-obj { display: none; } /* スマホではオブジェクト非表示 */

  .matching-bar {
    height: auto; position: fixed; bottom: 0; left: 0; right: 0;
    z-index: 100; box-shadow: 0 -2px 12px var(--shadow-strong);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .matching-bar-inner { padding: 8px 10px; flex-wrap: wrap; gap: 6px; }
  .matching-bar .btn { min-height: 44px; padding: 8px 14px; white-space: nowrap; }
  .player-group-sep { font-size: 11px; }
  .score-unit { font-size: 12px; }
  /* マッチングバー分の下余白 + safe area */
  .app-body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }

  .player-item { padding: 8px 8px; }
  .group-badge, .bracket-badge { min-width: 20px; text-align: center; }
  .status-btn { min-height: 44px; padding: 8px 14px; font-size: 12px; }
  .delete-btn { width: 44px; height: 44px; font-size: 16px; }
  .panel-tool-btn { min-width: 44px; min-height: 44px; }
  .table-actions button { min-width: 44px; min-height: 44px; }
  .dlg-close-btn { min-width: 44px; min-height: 44px; }
  .dlg-footer .btn { min-height: 44px; padding: 8px 16px; }
  .panel-add-btn { min-height: 44px; min-width: 44px; padding: 8px 12px; font-size: 13px; }
  .btn-icon { min-width: 44px; min-height: 44px; padding: 10px; }

  .dlg-box { width: 96vw; }
  .paste-box { width: 96vw !important; }

  #toast { bottom: 10px; font-size: 12px; }
}

@media (max-width: 480px) {
  .header-actions .btn { font-size: 10px; padding: 4px 6px; }
  .player-name { font-size: 13px; }
  .player-item { padding: 6px 5px; gap: 3px; }
  .table-card { width: 100% !important; min-width: 0; }
}