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

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

  /* canvas-empty-state: mobile では絶対配置を解除して全幅表示。
     player-panel 側の empty-hint と二重になるが、こちらの整形済みの方を優先。 */
  .canvas-empty-state {
    position: relative; left: auto; top: auto; transform: none;
    width: 100%; max-width: 100%;
    padding: 20px 16px;
    margin: 0 auto;
  }
  .canvas-empty-state__title { font-size: 22px; }
  .canvas-empty-state__steps li { padding: 8px 0; gap: 10px; }
  .canvas-empty-state__step { font-size: 14px; line-height: 1.6; }

  .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; /* ドットパターン非表示 */
  }

  .timer-widget {
    position: relative !important; left: auto !important; top: auto !important;
    width: 100% !important; height: auto !important; min-height: 84px; max-width: 100%;
  }
  .timer-widget.minimized { position: fixed; width: 140px; }
  .timer-widget.maximized { position: fixed; inset: 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 内の参加コード表示と参加者URLボタンを非表示
     （設定ダイアログから引き続きアクセス可能、領域節約優先） */
  #code-display, #btn-share-url { display: none !important; }

  /* スマホでは順位表（🏆）/ Excel 一括入力（📋）/ テーマ切替（◐）も非表示。
     主催者は PC で操作する想定、スマホは主に閲覧用 + マッチング進行のみ。
     テーマは prefers-color-scheme で自動追従するため、手動切替は PC でのみ提供。 */
  #btn-standings, #btn-open-paste, #btn-theme-header { display: none !important; }
  .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; }
}