/* ── リセット & デザイントークン ─────────────────────────
   Light = P3a Kinari (default)  /  Dark = P2a Velvet Plum
   ハンドオフ `_/design_handoff_matching_refresh/tokens.css` に準拠。
   旧変数名(--text, --border, --surface2, --accent2, --success 等)は
   移行期の互換エイリアスとして保持。各コンポーネントの改修完了後、
   旧変数参照がゼロになった時点でエイリアス行を削除すること。
   ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Light (P3a Kinari) ── */
  --bg:           #f2ead8;
  --surface:      #faf5e8;
  --ink:          #1f1a1a;
  --accent:       #d88095;
  --accent-strong:#b4607a;
  --muted:        #7d6f60;
  --rule:         #d8cdb5;
  --weak:         #efe5cd;

  /* 意味論的な状態色（エディトリアル調に馴染ませた実値） */
  --positive:     #5f7a4f;
  --cautionary:   #a67a2c;
  --negative:     #a53a3a;

  /* ── Typography ── */
  --font-sans:  "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  --font-serif: "Shippori Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --font-mono:  "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* ── Type scale (2025 Web標準: iOS zoom回避閾値16px / WCAG AA準拠) ── */
  --t-hero:  96px;
  --t-h1:    36px;
  --t-h2:    28px;
  --t-h3:    22px;
  --t-body:  16px;   /* iOS で auto-zoom が発生する下限 */
  --t-small: 14px;
  --t-label: 12px;
  --t-micro: 11px;   /* WCAG AA の最低実用サイズ */

  /* ── Spacing ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-8: 60px;

  /* ── Rules & radius ── */
  --rule-w: 1px;
  --rule-w-strong: 2px;
  --radius: 0;

  /* ── 互換エイリアス層（旧変数 → 新トークン） ──
     各コンポーネント改修完了後に参照=0を確認し、削除する。 */
  --text:       var(--ink);
  --text-dim:   var(--muted);
  --border:     var(--rule);
  --surface2:   var(--weak);
  --accent2:    var(--accent-strong);
  --success:    var(--positive);
  --warning:    var(--cautionary);
  --danger:     var(--negative);
  --shadow:          none;
  --shadow-overlay:  rgba(31, 26, 26, 0.40);
  --shadow-strong:   rgba(31, 26, 26, 0.15);
}

[data-theme="dark"] {
  /* ── Dark (P2a Velvet Plum) ── */
  --bg:           #140f20;
  --surface:      #1e1830;
  --ink:          #f2e8f5;
  --accent:       #c89de0;
  --accent-strong:#b07ed0;
  --muted:        #8680a8;
  --rule:         #2d2745;
  --weak:         #18122a;

  --positive:     #8fc481;
  --cautionary:   #e0b65a;
  --negative:     #e07474;

  --shadow-overlay: rgba(0, 0, 0, 0.60);
  --shadow-strong:  rgba(0, 0, 0, 0.40);
}

/* 旧共有URLに `data-theme="light"` が残る可能性があるため、
   light 指定はデフォルト(:root)と同義にしておく */
[data-theme="light"] { /* alias to default (P3a Kinari) */ }

[data-theme="dark"] .room-obj { border-color: rgba(255,255,255,0.18); }
[data-theme="dark"] .room-obj:hover { border-color: rgba(255,255,255,0.4); }

html, body { height: 100%; overflow: hidden; }
.lucide { display: inline-block; vertical-align: -0.125em; flex-shrink: 0; }
.panel-tool-btn .lucide, .btn-monitor .lucide { width: 16px; height: 16px; }
.btn .lucide, .paste-tab .lucide { width: 14px; height: 14px; }
.delete-btn .lucide { width: 13px; height: 13px; }
.table-actions .lucide { width: 14px; height: 14px; }
.room-obj-bar .lucide { width: 13px; height: 13px; }
.dlg-pill .lucide { width: 13px; height: 13px; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  font-size: var(--t-body);
  line-height: 1.75;
  font-weight: 500;
}

/* ── Typography helpers (editorial) ──────────────────── */
.t-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-label);
  color: var(--muted);
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 700;
}
.t-eyebrow--accent { color: var(--accent); }

.t-micro {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: var(--muted);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.t-hero {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: var(--t-hero);
  line-height: 1.02;
  letter-spacing: -3px;
}

.t-h1 { font-family: var(--font-serif); font-weight: 900; font-size: var(--t-h1); line-height: 1.1; letter-spacing: -1px; }
.t-h2 { font-family: var(--font-serif); font-weight: 900; font-size: var(--t-h2); }
.t-h3 { font-family: var(--font-serif); font-weight: 900; font-size: var(--t-h3); }

/* 句点・読点をアクセント色にする一点豪華主義 */
.kuten { color: var(--accent); }

/* 見出し下の小さな罫線 */
.section-rule {
  width: 48px;
  border-top: var(--rule-w) solid var(--ink);
  margin: 14px 0;
}

/* ── Theme toggle (fixed top-right) ───────────────────── */
.theme-toggle {
  position: fixed;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: var(--rule-w) solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  cursor: pointer;
  z-index: 100;
  border-radius: var(--radius);
}

/* ── Editorial buttons ────────────────────────────────── */
.btn-primary-ed {
  padding: 10px 22px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 3px;
  border: none;
  cursor: pointer;
  border-radius: var(--radius);
}

.btn-secondary-ed {
  padding: 8px 16px;
  border: var(--rule-w) solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 2px;
  cursor: pointer;
  border-radius: var(--radius);
}

.btn-accent-ed {
  padding: 8px 16px;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 3px;
  border: none;
  cursor: pointer;
  border-radius: var(--radius);
}

/* ── Status pill (PENDING / WAITING 等) ───────────────── */
.pill {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: var(--accent);
  letter-spacing: 2px;
  border: var(--rule-w) solid var(--accent);
  padding: 2px 6px;
  text-transform: uppercase;
  border-radius: var(--radius);
}

#app { display: flex; flex-direction: column; height: 100vh; }

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 18px;
  background: var(--surface);
  border-bottom: var(--rule-w) solid var(--rule);
  flex-shrink: 0;
  z-index: 10;
}


.header-title {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 900;
  color: var(--ink);
  white-space: nowrap;
  letter-spacing: 0.04em;
  margin-right: 16px;
  text-decoration: none;
}
@media (max-width: 768px) { .header-title { display: none; } }

.header-actions { display: flex; gap: 8px; }

.app-footer {
  flex-shrink: 0; padding: 6px 18px;
  background: var(--surface);
  border-top: var(--rule-w) solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}
.app-footer a { color: var(--accent-strong); text-decoration: none; }
.app-footer a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 768px) { .app-footer { display: none; } }

.app-body { display: flex; flex: 1; overflow: hidden; }

/* ── Editorial リセット: 残存 border-radius を 0 に統一 ────────────────────
   「角丸は使わない」というハンドオフ方針の一括強制。個別の古いスタイル
   (admin-dialogs/admin-players/view) の border-radius: 4-20px を上書きする。
   意図的な円形(presence dot, loading spinner, dialog_switch) は `border-radius: 50%`
   なので下の selector に含めず、個別に維持される。
   ──────────────────────────────────────────────────────────────────── */
.btn, .btn-sm, .btn-monitor, .btn-icon, .btn-match, .btn-confirm, .btn-regen,
.btn-cancel-m, .btn-danger, .btn-ok-add, .btn-del, .btn-finish, .btn-disband,
.panel-add-btn, .panel-tool-btn, .paste-tab, .paste-tab:first-child, .paste-tab:last-child,
.group-badge, .bracket-badge, .score-badge, .report-badge, .report-badge.alert,
.pending-badge, .card-status, .card-status.playing, .card-status.empty,
.search-input, .history-player-select, .dlg-pill, .dlg-close-btn, .paste-area,
.dlg-box, .paste-box, #toast, #privacy-notice, .pn-close,
.btn-refresh, .btn-theme, .search-clear, .search-suggestions,
.room-obj, .room-obj-bar button, .room-obj-resize,
.seat-banner, .zoom-controls, .zoom-controls button,
.player-item, .step, .tab, .tab:first-child, .tab:last-child,
.table-card, .feature-card, .faq-item, .code-input,
.hero-actions .btn-hero, .btn-hero, .btn-create, .btn-join,
.btn-code-submit, .btn-code-back, .step-number,
input[type="text"], input[type="number"], input[type="search"], textarea, select {
  border-radius: 0;
}

/* 意図的に残す円形 (JS/CSSで `border-radius: 50%` を使用) は
   より詳細な selector で個別維持: loading spinner, presence dot, theme icon など */
.loading-spinner, .header-status.live::before,
.step-number /* 将来円形に戻したい場合は上書き */ {
  /* 必要に応じて個別指定 */
}

/* ── Reduced motion (視覚過敏・高齢・前庭障害への配慮) ───────
   OS設定「視差効果を減らす」が有効な場合、全アニメ/トランジションを
   ほぼ無効化。必須な spinner の回転も残さず、状態変化は瞬時に。 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}