/* =========================================================
   台湾プロ野球 観戦ガイド  ―  本番スタイル（黄色背景版）
   見出し＝明朝 / 本文＝ゴシック / カードを使わず罫線と余白で区切る
   ========================================================= */

:root{
  --yellow:#FBC81C;          /* 巧虎＝ブラザーズの黄（背景）。濃さはここで調整 */
  --yellow-deep:#E3AE08;
  --ink:#15233f;             /* ブラザーズの紺（文字） */
  --ink-soft:#4a5874;
  --rule:rgba(21,35,63,.22);
  --rule-soft:rgba(21,35,63,.11);
  --cream:#fffdf5;           /* ロゴタイル・写真の下地 */
  --maxw:460px;
  --solid:#15233f;           /* テーマに依らず常に紺（チップ等） */
  --accent:#FBC81C;          /* テーマに依らず常に黄 */
  --mark:rgba(21,35,63,.14); /* 勝率バーのトラック・マーカー */
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--yellow);
  color:var(--ink);
  font-family:"Noto Sans JP",sans-serif;
  font-weight:400;
  font-size:15.5px;
  line-height:1.95;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
.min{font-family:"Shippori Mincho",serif}

.wrap{max-width:var(--maxw);margin:0 auto;background:var(--yellow);min-height:100vh;position:relative;overflow:hidden}
.pad{padding-left:26px;padding-right:26px}

/* ---------- ナビ ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 22px;background:var(--yellow);
  backdrop-filter:saturate(1.1) blur(4px);
  border-bottom:1px solid var(--rule);
}
.brand{font-family:"Shippori Mincho";font-weight:800;font-size:16px;letter-spacing:.04em;text-decoration:none}
.navlinks{display:flex;gap:15px}
.navlinks a{font-size:12px;letter-spacing:.04em;color:var(--ink);text-decoration:none;opacity:.85}
.navlinks a:hover{opacity:1;text-decoration:underline}

/* ---------- ヒーロー ---------- */
.hero{position:relative;height:540px;overflow:hidden;background:#15233f}
.hero img{width:100%;height:100%;object-fit:cover;filter:saturate(.95) contrast(1.02);
  transform-origin:60% 40%;animation:kenburns 26s ease-out forwards}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.12)}}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(10,15,28,.12) 0%,rgba(10,15,28,.04) 34%,rgba(10,15,28,.84) 100%)}
.hero__in{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 26px 36px;color:#fff}
.hero__kick{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.hero h1{font-weight:800;font-size:34px;line-height:1.42;letter-spacing:.01em;text-shadow:0 1px 22px rgba(0,0,0,.4)}
.hero__match{margin-top:20px;font-size:13px;display:flex;align-items:center;gap:11px}
.hero__match b{font-weight:500;font-size:15px}
.hero__match span{color:var(--accent);font-size:11px}
.hero__date{margin-top:9px;font-size:12px;letter-spacing:.08em;opacity:.92}

/* ---------- リード ---------- */
.lead{padding:36px 26px 6px}
.lead p{font-size:15.5px;line-height:2.1}

/* ---------- セクション共通 ---------- */
section{padding-top:50px}
.shead{padding:0 26px;margin-bottom:24px}
.shead__no{font-size:13px;letter-spacing:.3em;font-weight:700;margin-bottom:11px}
.shead h2{font-weight:800;font-size:25px;line-height:1.5;letter-spacing:.01em}
.shead .en{display:block;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft);margin-top:11px;font-weight:400}

.prose p{padding:0 26px;margin-bottom:20px;line-height:2.05}
.prose p.soft{color:var(--ink-soft)}
.prose h3{padding:0 26px;margin:30px 0 12px;font-family:"Shippori Mincho";font-weight:700;font-size:18px;line-height:1.6}

/* ---------- 大きな数字 ---------- */
.stat{padding:8px 26px 4px;border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);margin:6px 26px 30px}
.stat__n{font-family:"Shippori Mincho";font-weight:800;font-size:62px;line-height:1.25}
.stat__n small{font-size:20px;font-weight:600;margin-left:4px}
.stat__c{font-size:12.5px;color:var(--ink-soft);padding-bottom:18px;line-height:1.7}

/* ---------- 番号つきの読みポイント（盛り上がりの理由など） ---------- */
.reasons{padding:0 26px}
.reason{display:flex;gap:16px;padding:18px 0;border-top:1px solid var(--rule-soft)}
.reason:first-child{border-top:none}
.reason__n{font-family:"Shippori Mincho";font-weight:800;font-size:22px;color:var(--yellow-deep);flex:0 0 auto;line-height:1.5;min-width:24px}
.reason__b strong{display:block;font-weight:700;font-size:15.5px;margin-bottom:4px}
.reason__b p{font-size:13.5px;color:var(--ink-soft);line-height:1.9}

/* ---------- 巧虎ギャラリー ---------- */
.figure-wide{margin:0 0 22px}
.figure-wide img{width:100%;height:auto}
.figure-wide figcaption,.gallery figcaption{font-size:11.5px;color:var(--ink-soft);padding:7px 26px 0;line-height:1.6}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:0 0 4px}
.gallery figure{margin:0}
.gallery img{width:100%;height:160px;object-fit:cover}
.gallery figcaption{padding:6px 4px 0}
.video-link{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 26px 0;
  padding:15px 18px;background:var(--solid);color:#fff;text-decoration:none}
.video-link span{font-size:11px;letter-spacing:.1em;color:var(--accent)}
.video-link strong{font-weight:500;font-size:14px}

/* ---------- 折り畳み読み物 ---------- */
.fold{margin:8px 26px 0;border-top:1px solid var(--rule)}
.fold summary{cursor:pointer;list-style:none;padding:15px 0;font-weight:500;font-size:14px;display:flex;align-items:center;justify-content:space-between}
.fold summary::-webkit-details-marker{display:none}
.fold summary::after{content:"＋";font-family:"Shippori Mincho";font-size:18px;color:var(--yellow-deep)}
.fold[open] summary::after{content:"－"}
.fold__body{padding:0 0 18px}
.fold__body p{font-size:13.5px;color:var(--ink);line-height:1.95;margin-bottom:12px}

/* ---------- 本日のカード ---------- */
.match{padding:0 26px}
.match__team{border-top:2px solid var(--ink);padding:18px 0}
.match__head{display:flex;align-items:center;gap:14px}
.logo-tile{width:56px;height:56px;flex:0 0 56px;background:var(--cream);display:flex;align-items:center;justify-content:center;overflow:hidden}
.logo-tile img{width:100%;height:100%;object-fit:contain;padding:5px}
.match__label{font-size:11px;letter-spacing:.1em;color:var(--ink-soft)}
.match__name{font-family:"Shippori Mincho";font-weight:700;font-size:21px;line-height:1.3}
.match__team>p{font-size:13.5px;line-height:1.95;margin:13px 0 10px}
.match__team ul{list-style:none;font-size:12.5px;color:var(--ink-soft)}
.match__team li{padding:3px 0 3px 16px;position:relative}
.match__team li::before{content:"";position:absolute;left:0;top:13px;width:6px;height:1px;background:var(--ink-soft)}
.vs{text-align:center;font-family:"Shippori Mincho";font-weight:800;font-size:15px;letter-spacing:.2em;color:var(--ink-soft);padding:14px 0}

/* ---------- 6球団リスト ---------- */
.teams{border-top:2px solid var(--ink);margin:0 26px}
.team{display:flex;align-items:center;gap:15px;padding:13px 2px;border-bottom:1px solid var(--rule-soft)}
.team .logo-tile{width:50px;height:50px;flex-basis:50px}
.team__name{font-weight:500;font-size:15.5px;line-height:1.35}
.team__meta{font-size:11.5px;color:var(--ink-soft);margin-top:2px;letter-spacing:.02em}

/* ---------- 順位表 ---------- */
.standings{margin:0 26px;border-top:2px solid var(--ink)}
.standing{display:grid;grid-template-columns:30px 1fr auto;gap:5px 12px;align-items:baseline;padding:11px 2px;border-bottom:1px solid var(--rule-soft)}
.standing__rank{font-family:"Shippori Mincho";font-weight:700;font-size:18px}
.standing__team{font-weight:500;font-size:15px}
.standing__rec{font-size:12px;color:var(--ink-soft);white-space:nowrap}
.standing__note{grid-column:2 / -1;font-size:11.5px;color:var(--ink-soft);line-height:1.6}
.standing--head{border-bottom:1px solid var(--rule)}
.standing--head span{font-size:11px;letter-spacing:.06em;color:var(--ink-soft)}
.standing--focus{background:rgba(21,35,63,.06)}
.standing--focus .standing__team{font-weight:700}

/* ---------- 見どころ（読み物＋写真） ---------- */
.feature-img{margin:24px 0 6px}
.feature-img img{width:100%;height:240px;object-fit:cover}
.feature-img figcaption{font-size:11.5px;color:var(--ink-soft);padding:7px 26px 0}

/* ---------- 選手 ---------- */
.player-tools{padding:0 26px;margin-bottom:8px}
.player-tools label{display:block;font-size:11px;letter-spacing:.08em;color:var(--ink-soft);margin-bottom:7px}
#playerSearch{width:100%;padding:11px 14px;font-size:14px;font-family:inherit;color:var(--ink);
  background:var(--cream);border:1px solid var(--rule);border-radius:0;outline:none}
#playerSearch:focus{border-color:var(--ink)}

.player{margin:0 26px 28px;border-top:2px solid var(--ink);padding-top:16px}
.player--sub{border-top:1px solid var(--rule)}
.player--sub .player__name{font-size:19px}
.player__head{display:flex;gap:15px;align-items:flex-start}
.player__photo{width:84px;height:104px;flex:0 0 84px;background:var(--solid);position:relative;overflow:hidden}
.player__photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.player__photo-ph{display:none;position:absolute;inset:0;align-items:center;justify-content:center;color:rgba(255,255,255,.5);font-size:10px;letter-spacing:.08em}
.player__id{flex:1;min-width:0}
.player__top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.player__name{font-family:"Shippori Mincho";font-weight:700;font-size:22px;line-height:1.3}
.player__pos{display:block;font-size:12px;color:var(--ink-soft);margin-top:4px;letter-spacing:.03em}
.player__bio{font-size:11.5px;color:var(--ink-soft);letter-spacing:.02em;margin-top:8px}
.player__no{font-family:"Shippori Mincho";font-weight:800;font-size:32px;line-height:1}
.player__desc{font-size:13px;line-height:1.9;margin:12px 0 14px}
.stats{display:flex;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.stats div{flex:1;text-align:center;padding:10px 4px;border-right:1px solid var(--rule-soft)}
.stats div:last-child{border-right:none}
.stats .k{font-size:10px;color:var(--ink-soft);letter-spacing:.05em;margin-bottom:5px}
.stats .v{font-family:"Shippori Mincho";font-weight:700;font-size:20px}
.empty-note{padding:0 26px;color:var(--ink-soft);font-size:13px}

/* ---------- 企業（ビジネス文脈・全文） ---------- */
.owner{margin:0 26px;border-top:1px solid var(--rule);padding:20px 0}
.owner:first-of-type{border-top:2px solid var(--ink)}
.owner__label{font-size:11px;letter-spacing:.1em;color:var(--ink-soft);margin-bottom:5px}
.owner__name{font-family:"Shippori Mincho";font-weight:700;font-size:19px;margin-bottom:3px}
.owner__sub{font-size:12px;color:var(--ink-soft);margin-bottom:11px}
.owner>p{font-size:13.5px;line-height:1.95}
.owner__fig{font-family:"Shippori Mincho";font-weight:700;font-size:15px;margin:10px 0 6px;line-height:1.6}

.pull{margin:8px 26px 0;padding:22px 0 6px;border-top:2px solid var(--ink)}
.pull p{font-family:"Shippori Mincho";font-weight:500;font-size:19px;line-height:1.95}
.pull .accent{background:linear-gradient(transparent 62%,rgba(21,35,63,.16) 62%)}

.note{padding:0 26px;margin-top:14px;font-size:11.5px;color:var(--ink-soft);line-height:1.7}

/* ---------- 出典 ---------- */
.source-list{list-style:none;padding:0 26px;border-top:2px solid var(--ink)}
.source-list li{padding:11px 0;border-bottom:1px solid var(--rule-soft);font-size:12.5px;line-height:1.6}
.source-list a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}

/* ---------- フッター / トップへ ---------- */
footer{margin-top:54px;padding:28px 26px 70px;border-top:1px solid var(--rule)}
footer p{font-size:11.5px;color:var(--ink-soft);line-height:1.85}
.float-top{position:fixed;right:calc(50% - var(--maxw)/2 + 16px);bottom:18px;z-index:60;
  width:42px;height:42px;background:var(--solid);color:var(--accent);border-radius:50%;
  display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:18px}
@media(max-width:480px){.float-top{right:16px}}

/* ---------- アクセント帯（未使用素材を各セクションに散りばめる） ---------- */
.band{margin:18px 0 4px;overflow:hidden}
.band img{width:100%;height:auto;display:block;transition:transform 1.1s ease}
.band:hover img{transform:scale(1.035)}
.band figcaption{font-size:11.5px;color:var(--ink-soft);padding:8px 26px 8px;line-height:1.6}
.band--inset{margin-left:26px;margin-right:26px}

/* ---------- ギミック：スクロールで浮き上がる ---------- */
.js-ready .reveal{opacity:0;transform:translateY(20px);transition:opacity .75s ease,transform .75s ease}
.js-ready .reveal.is-in{opacity:1;transform:none}

/* ---------- ギミック：カウントアップ ---------- */
.stat__n .count{font-variant-numeric:tabular-nums}

body{transition:background-color .45s ease,color .45s ease}

/* ---------- 読書進捗バー ---------- */
#progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--solid);z-index:100;transition:width .1s linear}
#progress::after{content:"";position:absolute;right:-3px;top:50%;width:7px;height:7px;border-radius:50%;background:var(--accent);transform:translateY(-50%)}

/* ---------- ヒーロー：カウントダウン ---------- */
.hero__count{margin-top:14px;display:inline-block;font-size:11.5px;letter-spacing:.03em;font-weight:500;color:#15233f;background:var(--accent);padding:6px 12px}

/* ---------- ナビ：ナイター切替 ---------- */
.night-toggle{font-family:inherit;font-size:11px;letter-spacing:.03em;padding:5px 10px;border:1px solid var(--rule);background:transparent;color:var(--ink);cursor:pointer;white-space:nowrap}
#langToggle{font-weight:700}
.navlinks{flex-wrap:wrap;justify-content:flex-end}
.brand{cursor:pointer}

/* ---------- 観客動員ミニ折れ線 ---------- */
.linechart{margin:6px 26px 26px}
.linechart svg{width:100%;height:auto;overflow:visible}
.linechart .ln{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.5s ease}
.linechart.is-in .ln{stroke-dashoffset:0}
.linechart .dot{fill:var(--yellow-deep);r:0;transition:r .45s ease .9s}
.linechart.is-in .dot{r:4.5}
.linechart .lc-x{fill:var(--ink-soft);font-size:11px;font-family:"Noto Sans JP"}
.linechart .lc-v{fill:var(--ink);font-family:"Shippori Mincho";font-weight:700;font-size:12px;opacity:0;transition:opacity .5s ease 1.1s}
.linechart.is-in .lc-v{opacity:1}

/* ---------- 選手：検索チップ・ガチャ・詳細展開 ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:12px 26px 0}
.chip{font-size:12px;padding:6px 12px;border:1px solid var(--rule);background:transparent;color:var(--ink);cursor:pointer;font-family:inherit}
.chip.is-active{background:var(--solid);color:#fff;border-color:var(--solid)}
.gacha{display:flex;align-items:center;gap:13px;flex-wrap:wrap;padding:16px 26px 0}
#gachaBtn{font-family:inherit;font-size:13px;padding:9px 16px;background:var(--solid);color:var(--accent);border:none;cursor:pointer}
#gachaOut{font-size:13px;color:var(--ink)}
#gachaOut strong{font-family:"Shippori Mincho";font-size:17px}
#gachaOut.pop{animation:pop .5s ease}
@keyframes pop{0%{transform:scale(.85);opacity:0}100%{transform:scale(1);opacity:1}}

.player__toggle{display:block;width:100%;text-align:left;background:none;border:none;color:inherit;font:inherit;cursor:pointer;padding:0 0 18px;position:relative}
.player__toggle::after{content:"タップで詳しく ＋";position:absolute;right:0;bottom:0;font-size:10.5px;letter-spacing:.03em;color:var(--ink-soft)}
.player.is-open .player__toggle::after{content:"閉じる －"}
.player__more{max-height:0;overflow:hidden;opacity:0;transition:max-height .4s ease,opacity .3s ease}
.player.is-open .player__more{max-height:220px;opacity:1;margin-top:14px}
.tagchips{display:flex;flex-wrap:wrap;gap:7px}
.tagchip{font-size:11px;padding:3px 9px;border:1px solid var(--rule);color:var(--ink-soft)}
.more-link{display:inline-block;margin-top:12px;font-size:12.5px;text-decoration:underline;text-underline-offset:2px}

/* ---------- 順位：勝率バー ---------- */
.winbar{grid-column:1 / -1;height:3px;background:var(--mark);margin-top:8px;position:relative}
.winbar i{display:block;height:100%;width:0;background:var(--solid);transition:width 1.1s ease}
.standings.is-in .winbar i{width:var(--w)}
.standing--focus .winbar i{background:var(--yellow-deep)}

/* ---------- VS：左右スライドイン ---------- */
.js-ready .slide-l{opacity:0;transform:translateX(-26px);transition:opacity .7s ease,transform .7s ease}
.js-ready .slide-r{opacity:0;transform:translateX(26px);transition:opacity .7s ease,transform .7s ease}
.js-ready .slide-l.is-in,.js-ready .slide-r.is-in{opacity:1;transform:none}
.js-ready .vs{opacity:0;transform:scale(.6);transition:opacity .5s ease,transform .5s ease}
.js-ready .vs.is-in{opacity:1;transform:scale(1)}

/* ---------- 黄色いタオル演出 ---------- */
.towel{display:block;width:42px;height:34px;margin:38px auto 0;color:var(--yellow-deep);transform-origin:top center;animation:sway 3s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}

/* ---------- 中国語ミニ辞書 ---------- */
.term{font:inherit;color:inherit;background:linear-gradient(transparent 60%,rgba(21,35,63,.18) 60%);border:none;padding:0 1px;cursor:pointer}

/* ---------- トースト ---------- */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(16px);max-width:300px;
  background:var(--solid);color:#fff;padding:13px 18px;font-size:13px;line-height:1.65;text-align:center;
  opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease;z-index:120}
.toast.is-on{opacity:1;transform:translateX(-50%) translateY(0)}
.toast b{font-family:"Shippori Mincho";font-size:15px}
.toast span{color:var(--accent);font-size:12px}

/* ---------- ライトボックス ---------- */
.lightbox{position:fixed;inset:0;background:rgba(8,12,20,.93);display:none;align-items:center;justify-content:center;z-index:200}
.lightbox.is-on{display:flex}
.lightbox img{max-width:92%;max-height:82%;object-fit:contain}
.lb-close,.lb-prev,.lb-next{position:absolute;background:none;border:none;color:#fff;cursor:pointer;padding:10px;line-height:1}
.lb-close{top:10px;right:14px;font-size:30px}
.lb-prev{left:4px;top:50%;transform:translateY(-50%);font-size:44px}
.lb-next{right:4px;top:50%;transform:translateY(-50%);font-size:44px}

/* ---------- ナイター版テーマ ---------- */
body.night{--yellow:#101b30;--yellow-deep:#FBC81C;--ink:#f3ead0;--ink-soft:#aeb8cf;
  --rule:rgba(243,234,208,.24);--rule-soft:rgba(243,234,208,.12);--mark:rgba(243,234,208,.16)}
body.night .video-link,body.night .float-top{border:1px solid var(--rule)}
body.night .standing--focus{background:rgba(251,200,28,.12)}
body.night .pull .accent,body.night .term{background:linear-gradient(transparent 60%,rgba(251,200,28,.30) 60%)}
body.night #progress{background:var(--accent)}
body.night #progress::after{background:#fff}
body.night .chip.is-active{background:var(--accent);color:#15233f;border-color:var(--accent)}
body.night #gachaBtn{background:var(--accent);color:#15233f}