/* ========================================================
   theme-friendly.css — やわらかいトーンへの上書き

   style.css のあとに読み込む。この1行を外せば元の
   ソリッドなデザインにそのまま戻る。
   ======================================================== */

:root {
  /* --- Surfaces: 冷たいグレー → あたたかいクリーム --- */
  --bg: #faf6f0;
  --card-bg: #fffdfa;
  --surface-alt: #f5efe6;
  --fill-subtle: rgba(140,110,80,0.07);
  --fill-press: rgba(140,110,80,0.16);
  --track: rgba(140,110,80,0.13);
  --segment-thumb: #fffdfa;

  /* --- Text: 純黒 → 焦茶 --- */
  --text: #3b2f28;
  --text-secondary: #7d6a5c;
  --text-tertiary: #a3907f;
  --border: #e6dbcc;
  --separator: #ece3d7;

  /* --- Accent: 沈んだ緑 → 明るい若草 --- */
  --primary: #2f9e5f;
  --primary-dark: #24784a;
  --primary-light: #e9f7ee;
  --danger: #e0544b;
  --danger-light: #fdeeec;
  --gold: #d9a441;
  --silver: #a9a29a;
  --bronze: #c08457;

  /* --- 角を丸く、影をふんわり --- */
  --r-xs: 10px;
  --r-sm: 14px;
  --r-md: 20px;
  --radius: 26px;
  --shadow: 0 2px 10px rgba(120,90,60,0.07);

  --focus-ring: rgba(47,158,95,0.22);
  --focus: #2f9e5f;

  --tabbar-bg: rgba(255,252,247,0.9);
  --tabbar-border: rgba(120,90,60,0.14);
  --dialog-bg: rgba(255,252,247,0.96);
  --dialog-sep: rgba(120,90,60,0.2);
  --scrim: rgba(60,45,35,0.38);

  --chart-grid: #ece3d7;
  --chart-label: #a3907f;
  --chart-zero: #c9b8a5;
  --chart-dot-ring: #fffdfa;

  --p1: #2f9e5f;
  --p2: #3d8fd6;
  --p3: #e8873c;
  --p4: #a56bc4;

  /* 牌の色も少しやわらかく */
  --tile-man: #c14a41;
  --tile-pin: #2f7fc9;
  --tile-sou: #2f9e5f;
  --tile-honor: #7d6350;
  --tile-honor-bg: #fdf7ea;
  --tile-man-bg: #fdf2f0;
  --tile-pin-bg: #eff6fd;
  --tile-sou-bg: #eef9f2;
}

:root[data-theme="dark"] {
  --bg: #17130f;
  --card-bg: #241d18;
  --surface-alt: #2e251e;
  --fill-subtle: rgba(215,185,155,0.09);
  --fill-press: rgba(215,185,155,0.2);
  --track: rgba(215,185,155,0.16);
  --segment-thumb: #4a3c31;

  --text: #f5ece2;
  --text-secondary: #bfa992;
  --text-tertiary: #97836f;
  --border: #3a2f26;
  --separator: #3a2f26;

  --primary: #4cc47c;
  --primary-dark: #2f9e5f;
  --primary-light: rgba(76,196,124,0.17);
  --danger: #ff6b60;
  --danger-light: rgba(255,107,96,0.17);

  --shadow: 0 2px 10px rgba(0,0,0,0.35);
  --focus-ring: rgba(76,196,124,0.3);

  --tabbar-bg: rgba(30,25,20,0.88);
  --tabbar-border: rgba(215,185,155,0.16);
  --dialog-bg: rgba(46,37,30,0.96);
  --dialog-sep: rgba(215,185,155,0.22);
  --scrim: rgba(0,0,0,0.6);

  --chart-grid: #3a2f26;
  --chart-label: #97836f;
  --chart-zero: #5a4a3c;
  --chart-dot-ring: #241d18;

  --p1: #4cc47c;
  --p2: #5aa9e6;
  --p3: #f0a35c;
  --p4: #bd8ad6;

  --tile-honor-bg: #3a2f26;
  --tile-man-bg: #33231f;
  --tile-pin-bg: #1e2a35;
  --tile-sou-bg: #1e2f24;
}

/* --- 丸ゴシック寄りのフォント --- */
body {
  font-family: "Hiragino Maru Gothic ProN", "Quicksand", "Zen Maru Gothic",
               -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans",
               "Noto Sans JP", sans-serif;
}

/* --- カードに影を戻す（元はフラット） --- */
.card {
  box-shadow: var(--shadow);
  border-color: transparent;
}

/* --- ボタンを少しふっくら --- */
.btn {
  border-radius: var(--r-sm);
  font-weight: 600;
}

.btn:active { transform: scale(0.98); }

/* --- 牌もやわらかく --- */
.calc-tile { border-radius: var(--r-xs); }

/* --- ヘッダーのマスコット --- */
.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.brand-mark svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

/* --- アプリバーにブランドを置くため両端揃えにする --- */
#app-bar { justify-content: space-between; }

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: var(--text);
}

.brand-mark img { display: block; border-radius: 50%; }

.brand-name {
  font-size: var(--t-body);
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* --- 静的ページのヘッダーにもマスコットを --- */
.page-header .brand-mark { margin-left: auto; }