/* =========================================================
   fighters.css — 北海道日本ハム ファイターズ風 共通スタイル
   ・既存 styles.css の色・部品（timeline / roster-grid / results-table /
     info-list / staff / vision-card など）はそのまま流用する。
   ・このファイルは「見出し・ヒーロー・タイル・丸SNS・カード枠」など
     ファイターズ風の“見た目の層”だけを追加する。色は既存テーマのまま。
   ========================================================= */

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 18px; }

/* --- セクション見出し（英字大＋和文小、左アクセント） --- */
.sec-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 20px; gap: 12px; flex-wrap: wrap; }
.sec-head .ttl { display: flex; align-items: baseline; gap: 12px; }
.sec-head .en { font-size: 1.5rem; font-weight: 900; letter-spacing: 0.04em; position: relative; padding-left: 16px; }
.sec-head .en::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 6px; height: 1em; background: linear-gradient(180deg, var(--purple), var(--purple-light)); border-radius: 2px; }
.sec-head .jp { font-size: 0.82rem; color: var(--text-dim); letter-spacing: 0.1em; }
.sec-head .more { color: var(--purple-light); font-size: 0.78rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.sec-head .more:hover { color: var(--purple); }

/* --- ファイターズ風 ページヒーロー（黒看板＋英字大見出し） --- */
.f-hero {
  position: relative; text-align: left; overflow: hidden;
  padding: 54px 18px 48px;
  background:
    radial-gradient(circle at 14% 22%, rgba(139,92,246,0.30), transparent 55%),
    radial-gradient(circle at 86% 82%, rgba(245,208,99,0.10), transparent 55%),
    var(--dark-bg);
  border-bottom: 1px solid var(--dark-border);
}
.f-hero-inner { max-width: 1180px; margin: 0 auto; position: relative; z-index: 2; }
.f-hero .eyebrow { display: inline-block; font-size: 0.7rem; letter-spacing: 0.28em; font-weight: 800; color: var(--purple-light-on-dark); border: 1px solid var(--purple-on-dark); background: rgba(139,92,246,0.08); padding: 6px 14px; margin-bottom: 16px; }
.f-hero h1 { font-size: clamp(2rem, 6vw, 3.4rem); font-weight: 900; line-height: 1.02; letter-spacing: -0.01em; color: #fff; }
.f-hero h1 .accent { background: linear-gradient(135deg, var(--purple-light-on-dark), #e6e6ee); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.f-hero .jp-title { font-size: clamp(1rem, 3vw, 1.4rem); font-weight: 800; color: #fff; margin-top: 6px; }
.f-hero .sub { color: var(--dark-text-dim); font-size: clamp(0.9rem, 2.4vw, 1.02rem); margin-top: 14px; max-width: 640px; }

/* --- カード枠（黒ヘッダー＋本文） --- */
.f-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 4px 18px rgba(29,29,43,0.06); overflow: hidden; }
.f-card-head { background: var(--dark-bg); color: #fff; padding: 11px 18px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.16em; display: flex; justify-content: space-between; align-items: center; }
.f-card-head .jp { color: var(--purple-light-on-dark); font-weight: 600; font-size: 0.66rem; letter-spacing: 0.08em; }
.f-card-body { padding: 20px; }

/* --- クイックリンク・タイル --- */
.tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.tile { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 20px 14px; text-decoration: none; color: var(--text); text-align: center; transition: transform .25s, border-color .25s; box-shadow: 0 4px 18px rgba(29,29,43,0.06); }
.tile:hover { transform: translateY(-3px); border-color: var(--purple); }
.tile-ico { width: 44px; height: 44px; margin: 0 auto 10px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #fff; background: linear-gradient(135deg, var(--purple), var(--purple-deep)); }
.tile:nth-child(even) .tile-ico { background: linear-gradient(135deg, var(--silver), var(--steel)); }
.tile-name { font-size: 0.92rem; font-weight: 700; }
.tile-en { font-size: 0.58rem; letter-spacing: 0.18em; color: var(--text-dim); margin-top: 3px; }

/* --- SNS 丸ボタン --- */
.social-round { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.social-round.center { justify-content: center; }
.cta-section .social-round { justify-content: center; margin-top: 18px; }
.s-round { width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; transition: transform .25s, box-shadow .25s; }
.s-round.ig { background: linear-gradient(135deg, #feda75 0%, #fa7e1e 25%, #d62976 55%, #962fbf 80%, #4f5bd5 100%); box-shadow: 0 8px 22px rgba(214,41,118,0.4); }
.s-round.yt { background: #ff0000; box-shadow: 0 8px 22px rgba(255,0,0,0.35); }
.s-round:hover { transform: translateY(-3px) scale(1.05); }
.s-round:focus-visible { outline: 2px solid var(--purple-light); outline-offset: 3px; }

/* 理念カード：意味の合う絵文字＋カードごとの色アクセントで目立たせる */
.vision-band .vision-card { padding: 24px 20px; position: relative; }
.vision-band .vision-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--purple), var(--purple-light));
}
.vision-band .vision-card:nth-child(1)::before { background: linear-gradient(90deg, var(--purple), var(--purple-light)); }
.vision-band .vision-card:nth-child(2)::before { background: linear-gradient(90deg, #f5d063, #e3b94f); }
.vision-band .vision-card:nth-child(3)::before { background: linear-gradient(90deg, var(--silver), var(--steel)); }
.vision-band .vision-card:nth-child(4)::before { background: linear-gradient(90deg, var(--purple-light), #6fae8a); }
.vision-band .vision-card .v-emoji {
  font-size: 2rem; line-height: 1; margin-bottom: 12px; display: inline-block;
  filter: drop-shadow(0 3px 6px rgba(29,29,43,0.18));
}
@media (max-width: 600px) {
  .vision-band .vision-cards { gap: 12px; }
  .vision-band .vision-card { padding: 20px 16px; }
  .vision-band .vision-card .v-emoji { font-size: 1.7rem; margin-bottom: 8px; }
}

/* --- 薄色セクション帯 --- */
.f-band { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 50px 0; }
.f-section { max-width: 1180px; margin: 0 auto; padding: 48px 18px; }

/* --- 暗い背景の上の白抜き(ghost)ボタンは明色で（文字が背景に埋もれないように） --- */
.slide .btn-ghost, .f-hero .btn-ghost, .game .btn-ghost, .carousel .btn-ghost {
  border-color: #3d3d4c; color: #fff;
}
.slide .btn-ghost:hover, .f-hero .btn-ghost:hover, .game .btn-ghost:hover, .carousel .btn-ghost:hover {
  border-color: var(--purple-on-dark); background: rgba(139,92,246,0.08);
}

/* --- ロゴを丸にぴったり合わせるための共通指定 --- */
.logo-round { border-radius: 50%; overflow: hidden; background: var(--dark-bg); display: flex; align-items: center; justify-content: center; }
.logo-round img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* =========================================================
   試合結果・スタメン（2ページ目以降で使う。コンパクト＆スマホ最適化）
   ========================================================= */
/* 直近の試合結果（スコアボード） */
.game { background:
    radial-gradient(circle at 12% 20%, rgba(139,92,246,0.22), transparent 55%),
    radial-gradient(circle at 88% 85%, rgba(245,208,99,0.10), transparent 55%),
    var(--dark-bg);
  border: 1px solid var(--dark-border); border-radius: 14px; padding: 22px 18px 26px; }
.game-kicker { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.game-kicker .lab { font-size: 0.72rem; letter-spacing: 0.1em; font-weight: 800; color: var(--purple-light-on-dark); }
.game-kicker .meta { font-size: 0.8rem; color: var(--dark-text-dim); }
.game-kicker .meta b { color: #fff; font-weight: 700; }
.scorebug { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.sb-team { text-align: center; min-width: 0; }
.sb-team .badge { width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--dark-bg); color: #fff; font-weight: 900; font-size: 1.1rem; }
.sb-team .badge img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sb-team .nm { font-size: 0.88rem; font-weight: 800; color: #fff; line-height: 1.3; word-break: break-word; }
.sb-team .score { font-size: clamp(2.6rem, 11vw, 4.4rem); font-weight: 900; line-height: 0.9; margin-top: 4px; color: #fff; letter-spacing: -0.03em; }
.sb-team.win .score { background: linear-gradient(135deg, var(--purple-light-on-dark), #fff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sb-mid { text-align: center; padding: 0 4px; }
.sb-mid .vs { font-size: 0.82rem; font-weight: 800; color: var(--dark-text-dim); letter-spacing: 0.16em; }
.sb-result { display: inline-block; margin-top: 10px; padding: 6px 16px; border-radius: 999px; font-size: 1rem; font-weight: 900; letter-spacing: 0.08em; }
.sb-result.win { background: linear-gradient(135deg, var(--purple), var(--purple-deep)); color: #fff; box-shadow: 0 8px 22px rgba(124,58,237,0.4); }
.sb-result.loss { background: rgba(255,255,255,0.08); color: #d6d6e0; border: 1px solid var(--dark-border); }
.sb-result.draw { background: rgba(245,208,99,0.16); color: #f5d063; border: 1px solid rgba(245,208,99,0.4); }
.sb-final { display: block; font-size: 0.62rem; letter-spacing: 0.16em; color: var(--dark-text-dim); margin-top: 8px; }
.linescore { margin-top: 16px; overflow-x: auto; }
.linescore table { width: 100%; min-width: 360px; border-collapse: collapse; color: #fff; }
.linescore th, .linescore td { padding: 7px 5px; text-align: center; font-size: 0.82rem; border-bottom: 1px solid var(--dark-border); }
.linescore th { color: var(--dark-text-dim); font-size: 0.68rem; font-weight: 600; }
.linescore td.tm { text-align: left; font-weight: 700; white-space: nowrap; padding-left: 4px; }
.linescore td.tot { font-weight: 900; color: var(--purple-light-on-dark); font-size: 0.95rem; }
.linescore .rhd { color: var(--purple-light-on-dark); }

/* スタメン（打順＋打席結果）ぎゅっとコンパクト */
.lineup-list { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; box-shadow: 0 4px 18px rgba(29,29,43,0.06); background: var(--bg-card); }
.lu-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--border); border-left: 4px solid var(--purple); }
.lu-row:last-child { border-bottom: none; }
.lu-row.sub { border-left-color: var(--gray-light); background: var(--bg-alt); }
.lu-order { font-size: 1.25rem; font-weight: 900; color: var(--purple); line-height: 1; min-width: 22px; text-align: center; }
.lu-row.sub .lu-order { font-size: 0.62rem; font-weight: 800; color: var(--text-dim); }
.lu-pos { width: 26px; height: 26px; flex-shrink: 0; border-radius: 6px; background: var(--dark-bg); color: #fff; font-size: 0.75rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.lu-id { min-width: 0; width: 120px; flex-shrink: 0; }
.lu-name { font-size: 0.92rem; font-weight: 800; line-height: 1.2; word-break: break-word; }
.lu-name .lu-no { font-size: 0.62rem; color: var(--text-dim); font-weight: 600; margin-left: 5px; }
.lu-abs { display: flex; gap: 5px; flex-wrap: wrap; flex: 1; min-width: 0; }
.ab { font-size: 0.66rem; font-weight: 700; padding: 2px 7px; border-radius: 5px; white-space: nowrap; background: var(--bg-alt); color: var(--text-dim); border: 1px solid var(--border); }
.ab.hit { background: rgba(124,58,237,0.12); color: var(--purple); border-color: rgba(124,58,237,0.4); }
.ab.hr  { background: rgba(245,208,99,0.18); color: #a9821f; border-color: rgba(245,208,99,0.6); }
.ab.onbase { background: rgba(110,110,132,0.12); color: var(--steel); border-color: var(--gray-light); }
.lu-rbi { flex-shrink: 0; font-size: 0.64rem; font-weight: 800; color: #fff; background: var(--purple); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.lineup-note { color: var(--text-dim); font-size: 0.84rem; padding: 16px; }
.lineup-legend { margin-top: 12px; font-size: 0.72rem; color: var(--text-dim); line-height: 1.7; }
.lineup-legend b { color: var(--text); }

@media (max-width: 900px) {
  .tiles { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  /* スマホ: スタメンをさらにぎゅっと小さく */
  .lu-row { gap: 6px 8px; padding: 7px 10px; flex-wrap: wrap; }
  .lu-order { font-size: 1.05rem; min-width: 18px; }
  .lu-pos { width: 22px; height: 22px; font-size: 0.68rem; border-radius: 5px; }
  /* 名前は内容幅だけ取り、打席結果はその右の空きに詰める（無駄な改行を減らす） */
  .lu-id { width: auto; flex: 0 0 auto; }
  .lu-name { font-size: 0.85rem; }
  .lu-abs { flex: 1 1 0; min-width: 0; gap: 4px; }
  .ab { font-size: 0.6rem; padding: 1px 6px; }
  .lu-rbi { font-size: 0.6rem; padding: 1px 7px; }
  .sb-team .badge { width: 44px; height: 44px; }
  .game { padding: 18px 12px 22px; }
}
@media (max-width: 540px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
}

/* ===== 余白・空白の圧縮（スマホで縦の無駄を減らして見やすく） ===== */
@media (max-width: 600px) {
  .f-hero { padding: 30px 16px 26px; }
  .f-section { padding: 30px 16px; }
  .vision-band { padding: 30px 0; }
  .main-cols { padding: 26px 0; gap: 16px; }
  .sec-head { margin-bottom: 13px; }
  /* styles.css の .section(70px) / .cta-section(80px) をスマホで圧縮 */
  .section { padding: 32px 16px; }
  .cta-section { padding: 40px 16px; }
  .countdown-wrap { padding: 36px 16px; }
  /* スケジュールの「今後の予定」カードをギュッと詰める */
  .timeline { padding-left: 20px; }
  .timeline-item { padding: 10px 13px; margin-bottom: 6px; }
  .timeline-item::before { top: 14px; left: -24px; width: 10px; height: 10px; }
  .timeline-date { margin-bottom: 2px; }
  .timeline-title { margin-bottom: 2px; line-height: 1.3; }
  .timeline-desc { line-height: 1.5; }
  .timeline-badge { margin-top: 5px; }
  /* 直近の試合結果カードの上下を詰める */
  .game { margin-bottom: 0; }
  .lineup { padding: 30px 0; }
  /* 監督・スタッフのカードを3列・小さめにして選手リストと揃える */
  .staff-row { grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .staff-card { padding: 11px 5px; }
  .staff-role { font-size: 0.54rem; letter-spacing: 0.1em; margin-bottom: 4px; }
  .staff-num { font-size: 1.5rem; margin-bottom: 2px; }
  .staff-name { font-size: 0.76rem; }
  /* 選手名簿: 役職タグ付きでも名前を1行に収める（折り返し防止＋余白/タグを圧縮） */
  .roster-card { gap: 6px; padding: 9px 10px; }
  .rn { font-size: 1rem; min-width: 16px; }
  .rname { font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: normal; }
  .rtag { font-size: 0.52rem; padding: 1px 5px; letter-spacing: 0.02em; }
}