/* ---------- 友だちに教える ----------
 * まちの様子の下、フッターの手前に置く小さなカード。電車くんが一言添えて、
 * 押すと共有シート（LINEなど）が開く。割り込みではないので、閉じるボタンも
 * 「何回回したら出す」の条件もいらない（出しっぱなしで画面をふさがない）。
 *
 * 声の大きさは「回す」より一段下に置く。緑の塗りは回すボタンだけの色なので、
 * ここは枠つきの薄い緑まで。ことばも太字にせず 600 で置く。
 * 見せ方を決めるまでの検討は docs/友だちに教えるの見せ方.html
 */
.share-card {
  width: min(92vw, 440px);
  margin-top: 20px;
  background: var(--card);
  border-radius: 20px;
  padding: 14px 16px;
  box-shadow: 0 12px 30px rgba(20, 20, 15, 0.08), 0 2px 6px rgba(20, 20, 15, 0.04);
}
.share-card[hidden] { display: none; }
.share-card .sc-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.share-card .sc-tk { width: 38px; height: 38px; flex: none; }
.share-card .sc-tk svg { width: 100%; height: auto; display: block; }
/* 顔と色は css/train.css の小さい版（#tkFaceSmall）と共通。回すボタンのうしろで
   待っている子と同じ顔にしてある。ここで足すのは、小さく置くための輪郭の太さだけ
   （3のままだと 38px で 0.3px になって消える） */
.share-card .tk-shell { stroke-width: 7; }
/* ことばは太字にしない。まちの様子の行と同じくらいの重さで、そっと置く */
.share-card .sc-title {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: #55554F;
}
/* 狭い画面で「教えて／あげてね」と切れないように、文のかたまりごとに折り返す */
.share-card .sc-title span { display: inline-block; }
.share-card .sc-btn {
  margin-top: 12px;
  width: 100%;
  padding: 10px;
  /* 固定の緑をやめて路線の色に合わせる。color-mix未対応ブラウザ向けに、
     この緑をそのままフォールバックとして残す（下の行が上書きする） */
  border: 1.5px solid #C9DA9C;
  border: 1.5px solid color-mix(in srgb, var(--line-color) 42%, white);
  border-radius: 999px;
  background: #F4F8EA;
  background: color-mix(in srgb, var(--line-color) 9%, white);
  color: #5C7629;
  color: color-mix(in srgb, var(--line-color) 73%, black);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-indent: 0.06em;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.share-card .sc-btn:hover { background: #EEF4E0; }
.share-card .sc-btn:hover { background: color-mix(in srgb, var(--line-color) 15%, white); }
.share-card .sc-btn:active { transform: scale(0.98); }