/*
Theme Name: BASEBALL ミルナラ
Theme URI: https://baseballmirunara.com
Author: Oda Shinji
Description: MLB・NPBの今日の試合、順位表、個人成績ランキング、放送・配信サービス比較をまとめたオリジナル野球サイトテーマ。
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: baseballmirunara
*/

:root{
--bg:#0a0c10;--card:#141821;--panel:#1c212c;--text:#e8eaed;--sub:#8b93a3;--line:#262c38;
--mlb:#e0384f;--mlbd:#3b6fd6;--npb:#16a34a;--live:#f43f5e;--accent:#5b9bf7;
--cta:#f59e0b;--ctad:#d97706;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",Meiryo,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;font-size:14px}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 12px}

/* header */
header{background:#05060a;color:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;box-shadow:0 2px 8px rgba(0,0,0,.4);overflow:hidden}
.hd{display:flex;align-items:center;justify-content:space-between;height:112px;overflow:hidden}
.logo{font-weight:900;font-size:19px;letter-spacing:.5px;display:flex;align-items:center;gap:8px;min-width:0;flex-shrink:1;white-space:nowrap}
.logo span{color:var(--cta)}
.logo-img{width:auto;height:96px;object-fit:contain;border-radius:6px;flex-shrink:0}
nav a{color:#cbd5e1;margin-left:16px;font-weight:600;font-size:13px}
nav a:hover{color:#fff}
.hd-cta{background:var(--cta);color:#111;font-weight:800;padding:7px 12px;border-radius:6px;font-size:12px;flex-shrink:0}
.mobile-nav{display:none}
@media(max-width:760px){
	nav{display:none}
	.hd{height:52px}
	.logo-img{height:32px}
	.logo{font-size:14px;gap:6px}
	.hd-cta{display:none}
	.mobile-nav{display:flex;background:#0b0d14;border-top:1px solid var(--line);white-space:nowrap}
	.mobile-nav a{color:#cbd5e1;font-weight:700;font-size:10.5px;padding:10px 2px;flex:1 1 0;text-align:center;display:inline-block}
	.mobile-nav a:active{color:#fff}
	@media(max-width:360px){
	.mobile-nav a{font-size:9.5px;padding:10px 1px}
	}
}

/* ticker */
.ticker{background:linear-gradient(180deg,#11162a,#05060a);color:#e6edf7;font-size:14px;font-weight:600;overflow:hidden;white-space:nowrap;padding:10px 0;border-bottom:1px solid var(--line);position:relative}
.ticker-in{display:inline-block;animation:scroll 55s linear infinite}
.ticker-in span{margin-right:20px;padding:5px 14px 5px 10px;background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.25);border-radius:20px;display:inline-flex;align-items:center;gap:6px}
.ticker-in b{color:#fbbf24;font-weight:800}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* layout */
.grid{display:grid;grid-template-columns:1fr 320px;gap:18px;margin-top:16px}
@media(max-width:900px){.grid{grid-template-columns:1fr}}
.card{background:var(--card);border-radius:10px;border:1px solid var(--line);padding:14px}
h2{font-size:16px;font-weight:800;display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
h2 .bar{width:4px;height:18px;border-radius:2px;background:var(--accent);display:inline-block}
h2 small{color:var(--sub);font-weight:400;font-size:11px}

/* hero */
.otani-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:linear-gradient(120deg,#7c2d12,#b45309 45%,#f59e0b);border:1px solid rgba(245,158,11,.5);border-radius:12px;padding:12px 16px;margin-top:14px;position:relative;box-shadow:0 4px 14px rgba(180,83,9,.35)}
.otani-banner:empty{display:none}
.ob-badge{flex-shrink:0;background:rgba(0,0,0,.35);color:#fff;font-weight:900;font-size:12px;padding:6px 10px;border-radius:8px;white-space:nowrap;letter-spacing:.02em}
.ob-text{flex:1;min-width:200px}
.ob-title{color:#fff;font-weight:800;font-size:14.5px;line-height:1.35}
.ob-sub{color:rgba(255,255,255,.85);font-size:12px;margin-top:2px}
.ob-btns{display:flex;gap:8px;flex-shrink:0}
.ob-btn{display:inline-block;padding:9px 14px;border-radius:8px;font-weight:800;font-size:12.5px;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.ob-btn.amazon{background:#111;color:#fff}
.ob-btn.rakuten{background:#bf0000;color:#fff}
.jp-highlights{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;margin-bottom:12px}
.jp-highlights:empty{display:none;margin:0}
.jph-item{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.jph-icon{font-size:16px;flex-shrink:0}
.jph-label{font-size:11px;color:var(--sub);font-weight:700;flex-shrink:0}
.jph-val{font-size:12.5px;font-weight:800;color:var(--text);margin-left:auto;text-align:right}
.ob-pr{position:absolute;top:6px;right:8px;font-size:9px;color:rgba(255,255,255,.55);letter-spacing:.05em}
@media(max-width:600px){.otani-banner{padding:10px 12px}.ob-title{font-size:13px}.ob-btns{width:100%}.ob-btn{flex:1;text-align:center}}

.hero{background:linear-gradient(135deg,#0f172a,#1e3a8a);color:#fff;border-radius:12px;padding:18px;display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;margin-top:14px}
.hero small{color:#93c5fd;font-weight:700;letter-spacing:1px;font-size:11px}
.hero h1{font-size:22px;margin:4px 0 6px}
.hero p{color:#cbd5e1;font-size:13px}
.hero .btn{background:var(--cta);color:#111;font-weight:800;padding:12px 18px;border-radius:8px;white-space:nowrap;display:inline-block;box-shadow:0 4px 12px rgba(245,158,11,.4)}
.hero .btn small{display:block;color:#7c2d12;font-size:10px;letter-spacing:0}
@media(max-width:600px){.hero{grid-template-columns:1fr}}

/* controls */
.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin:14px 0 10px}
.tabs{display:flex;gap:4px;background:var(--panel);padding:3px;border-radius:8px;flex-wrap:wrap}
.tabs button{border:0;background:transparent;padding:6px 14px;border-radius:6px;font-weight:700;cursor:pointer;color:var(--sub);font-size:13px}
.tabs button.on{background:var(--card);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.4)}
.tabs button.on.nl{color:#fff;background:var(--mlbd)} .tabs button.on.al{color:#fff;background:var(--mlb)}
.tabs button.on.ce{color:#fff;background:var(--npb)} .tabs button.on.pa{color:#fff;background:#0ea5e9}
.dates{display:flex;gap:4px}
.dates button{border:1px solid var(--line);background:var(--card);color:var(--text);padding:6px 12px;border-radius:6px;cursor:pointer;font-weight:700;font-size:13px}
.dates button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.filters label{font-size:12px;color:var(--sub);margin-left:10px;cursor:pointer}

/* game card */
.lg-head{display:flex;align-items:center;gap:8px;margin:14px 0 8px;font-weight:800;font-size:15px}
.lg-head .pill{font-size:11px;padding:2px 8px;border-radius:99px;color:#fff}
.pill.mlb{background:var(--mlb)} .pill.npb{background:var(--npb)}
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:10px}
.g{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:8px;position:relative;transition:.15s}
.g:hover{box-shadow:0 4px 14px rgba(0,0,0,.35);transform:translateY(-1px)}
.g.live{border-color:var(--live);border-width:2px}
.g-top{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--sub)}
.status{font-weight:800;color:var(--text)}
.status.live{color:var(--live);display:flex;align-items:center;gap:4px}
.dot{width:7px;height:7px;background:var(--live);border-radius:50%;animation:pulse 1.2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.team{display:flex;justify-content:space-between;align-items:center}
.team .nm{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px}
.ab{position:relative;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;font-weight:900;font-size:10.5px;letter-spacing:.02em;text-shadow:0 1px 2px rgba(0,0,0,.45);box-shadow:0 2px 6px rgba(0,0,0,.4),inset 0 0 0 1.5px rgba(255,255,255,.22);overflow:hidden;flex-shrink:0;vertical-align:middle}
.ab::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.32),rgba(255,255,255,0) 55%);pointer-events:none}
.ab.ab-sm{width:21px;height:21px;font-size:8.5px;box-shadow:0 1px 3px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.22)}
.pico{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;flex-shrink:0;vertical-align:middle;box-shadow:0 2px 6px rgba(0,0,0,.4),inset 0 0 0 1.5px rgba(255,255,255,.22);overflow:hidden}
.pico svg{width:65%;height:65%;fill:rgba(255,255,255,.92)}
.pico-sm{width:18px;height:18px}
.pico-sm svg{width:62%;height:62%}
.team .ab{width:38px;height:38px;font-size:12px}
.tm-name{margin-left:7px;vertical-align:middle}
td.tm{white-space:nowrap}
.team .rec{font-size:11px;color:var(--sub);font-weight:400;margin-left:4px}
.team .sc{font-size:22px;font-weight:900;min-width:30px;text-align:right}
.team.lose .sc{color:#9ca3af}
.sp{display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:11.5px;background:var(--panel);border-radius:6px;padding:6px 8px}
.sp b{display:block;font-size:12.5px}
.sp .jp{color:var(--mlb);font-weight:800}
.sp .era{color:var(--sub)}
.featured{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.35);color:#fbbf24;padding:5px 9px;border-radius:8px;margin:2px 0}
.featured .ico{font-size:13px}
.featured b{color:var(--text)}
.featured b.jp{color:#f87171}
.featured .sub{color:#d3a441;font-weight:400}
.jpb{display:flex;flex-wrap:wrap;gap:4px}
.jpb span{font-size:11px;background:rgba(244,63,94,.12);color:#fca5a5;border:1px solid rgba(244,63,94,.35);padding:1px 7px;border-radius:99px;font-weight:700}
.watch{border-top:1px dashed var(--line);padding-top:8px}
.watch .lb{font-size:11px;color:var(--sub);margin-bottom:5px;font-weight:700}
.bc{display:flex;flex-wrap:wrap;gap:5px}
.bc a{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;padding:4px 9px;border-radius:6px;font-weight:700;color:#fff;transition:.15s}
.bc a:hover{filter:brightness(1.15);transform:scale(1.03)}
.bc a.free{background:var(--panel);color:var(--text);border:1px solid var(--line)}
.bc a .tag{font-size:9px;background:rgba(255,255,255,.25);padding:0 4px;border-radius:3px}
.bc a.free .tag{background:rgba(255,255,255,.1)}

/* ===== ranking ===== */
.rk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.rk{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--card)}
.rk-h{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;color:#fff;font-weight:800;font-size:13px}
.rk-h small{font-weight:400;font-size:10px;opacity:.85}
.rk-more{display:block;width:100%;background:var(--panel);border:none;border-top:1px solid var(--line);color:var(--accent);font-weight:700;font-size:11.5px;padding:7px;cursor:pointer}
.rk-more:hover{background:var(--line)}
.rk table{font-size:12.5px}
.rk td{padding:6px 8px}
.rk td.pl{font-weight:700}
.rk td.tm{color:var(--sub);font-size:11px}
.rk td.v{text-align:right;font-weight:900;font-variant-numeric:tabular-nums;font-size:14px;white-space:nowrap}
.rk tr:first-child td{background:rgba(245,158,11,.12)}
.rk td.jp{color:var(--mlb)}
.rk tr:last-child td{border-bottom:0}

/* sidebar */
.side{display:flex;flex-direction:column;gap:14px}
.rank1{border:2px solid var(--cta);position:relative}
.rank1::before{content:"人気No.1";position:absolute;top:-10px;left:12px;background:var(--cta);color:#111;font-size:10px;font-weight:900;padding:1px 8px;border-radius:99px}
html[lang^="en"] .rank1::before{content:"No.1 Pick"}
.pf{display:flex;flex-direction:column;gap:6px;padding:10px;border:1px solid var(--line);border-radius:8px;margin-bottom:8px;background:var(--card)}
.pf-h{display:flex;justify-content:space-between;align-items:center}
.pf-h b{font-size:14px;display:flex;align-items:center;gap:6px}
.pf-h .lg{width:26px;height:26px;border-radius:6px;color:#fff;display:grid;place-items:center;font-size:9px;font-weight:900}
.pf .pr{font-size:13px;font-weight:900}
.pf .pr small{font-size:10px;color:var(--sub);font-weight:400}
.pf ul{list-style:none;font-size:11.5px;color:#cbd5e1}
.pf ul li::before{content:"✓ ";color:#34d399;font-weight:900}
.pf ul li.x::before{content:"✕ ";color:#f87171}
.pf .go{display:block;text-align:center;background:var(--cta);color:#111;font-weight:800;padding:8px;border-radius:6px;font-size:13px}
.pf .go:hover{background:var(--ctad)}
.pf .go.sub{background:#334155;color:#fff}
.stars{color:#f59e0b;font-size:11px}
.gear-box{font-size:12.5px}
.gear-box p{margin:0 0 10px;line-height:1.6;color:var(--text)}
.gear-box .go{display:block;text-align:center;background:var(--cta);color:#111;font-weight:800;padding:8px;border-radius:6px;font-size:13px}
.gear-box .go:hover{background:var(--ctad)}

/* diagnosis */
.diag .q{font-size:12px;font-weight:700;margin:6px 0 4px}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chips button{border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:99px;padding:4px 10px;font-size:12px;cursor:pointer}
.chips button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.diag .res{margin-top:10px;background:rgba(91,155,247,.12);border:1px solid rgba(91,155,247,.35);border-radius:8px;padding:10px;font-size:12.5px}
.diag .res b{color:var(--accent);font-size:14px}

/* tables */
table{width:100%;border-collapse:collapse;font-size:12px}
th{font-weight:700;color:var(--sub);text-align:left;padding:4px 4px;border-bottom:1px solid var(--line);font-size:11px}
td{padding:5px 4px;border-bottom:1px solid var(--line)}
td.n{text-align:right;font-variant-numeric:tabular-nums}
.jp-row td:first-child{font-weight:700}
.mini-tabs{display:flex;gap:4px;margin-bottom:8px;flex-wrap:wrap}
.mini-tabs button{border:1px solid var(--line);background:var(--card);color:var(--text);padding:3px 10px;border-radius:6px;font-size:11px;cursor:pointer;font-weight:700}
.mini-tabs button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.mini-tabs .sep{width:1px;background:var(--line);margin:0 3px}
.pos{display:inline-block;width:16px;height:16px;border-radius:4px;background:var(--panel);color:var(--text);font-size:10px;text-align:center;line-height:16px;font-weight:900}
.pos.p1{background:#fbbf24;color:#111} .pos.p2{background:#94a3b8;color:#111} .pos.p3{background:#c2895a;color:#111}
.st-title{font-size:11px;color:var(--sub);margin-bottom:4px;font-weight:700}

/* page/single content */
.page-content{font-size:14px;line-height:1.9}
.page-content p{margin-bottom:1em}
.page-content a{color:var(--accent);text-decoration:underline}

/* footer */
footer{margin:30px 0 20px;color:var(--sub);font-size:11.5px;text-align:center}
footer .disc{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:10px;margin-bottom:10px;text-align:left}
.sticky-cta{position:fixed;bottom:0;left:0;right:0;background:#05060a;border-top:1px solid var(--line);color:#fff;padding:10px 14px;display:none;align-items:center;justify-content:space-between;gap:10px;z-index:60;font-size:12px}
.sticky-cta a{background:var(--cta);color:#111;font-weight:800;padding:8px 14px;border-radius:6px;white-space:nowrap}
@media(max-width:700px){.sticky-cta{display:flex}body{padding-bottom:60px}}

/* 試合詳細（クリックで開くカード・モーダル） */
.g.has-detail{cursor:pointer}
.g.has-detail:hover{border-color:var(--accent);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.detail-hint{text-align:right;font-size:11px;font-weight:700;color:var(--accent)}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:200;display:flex;align-items:flex-start;justify-content:center;padding:24px 12px;overflow-y:auto}
.modal-bg[hidden]{display:none}
.modal{background:var(--card);border:1px solid var(--line);color:var(--text);border-radius:12px;max-width:640px;width:100%;padding:20px;position:relative;margin-top:20px}
.modal-close{position:absolute;top:10px;right:10px;background:var(--panel);color:var(--text);border:none;border-radius:99px;width:30px;height:30px;font-size:14px;cursor:pointer;line-height:1}
.gd-dec{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 14px;font-size:12.5px}
.gd-dec span{background:var(--panel);border-radius:6px;padding:4px 10px;font-weight:700}
.gd-dec .w{background:rgba(34,197,94,.15);color:#4ade80}
.gd-dec .l{background:rgba(244,63,94,.15);color:#f87171}
.gd-dec .s{background:rgba(99,102,241,.15);color:#a5b4fc}
.gd-live{background:rgba(245,158,11,.15);color:#fbbf24;border-radius:6px;padding:6px 10px;font-size:12px;font-weight:700;margin-bottom:10px}
table.gd-ls{margin-bottom:16px;font-size:11.5px}
table.gd-ls th,table.gd-ls td{text-align:center;padding:4px 5px}
table.gd-ls td:first-child,table.gd-ls th:first-child{text-align:left;font-weight:700}
.gd-sec{margin-top:16px}
.gd-sec h4{font-size:13px;margin-bottom:8px;border-left:3px solid var(--accent);padding-left:8px}
.gd-scoring{list-style:none;display:flex;flex-direction:column;gap:6px;font-size:12.5px}
.gd-scoring li{background:var(--panel);border-radius:6px;padding:6px 10px;display:flex;justify-content:space-between;gap:8px}
.gd-scoring b{color:var(--accent);margin-right:4px}
.gd-sc-score{color:var(--sub);font-variant-numeric:tabular-nums;white-space:nowrap}
.gd-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.gd-cols>div{min-width:0} /* グリッド内の表がはみ出さないよう、子要素の暗黙の最小幅を無効化 */
.gd-col-h{font-size:11px;font-weight:700;color:var(--sub);margin-bottom:4px}
.gd-stat-wrap{overflow-x:auto;max-width:100%}
table.gd-stat{font-size:11px;width:100%;border-collapse:collapse}
table.gd-stat th,table.gd-stat td{white-space:nowrap;padding:3px 4px;text-align:center}
table.gd-stat td:nth-child(3),table.gd-stat th:nth-child(3){text-align:left;font-weight:700}
table.gd-stat td:first-child,table.gd-stat th:first-child{color:var(--sub)}
@media(min-width:701px){.modal{max-width:960px}}
@media(max-width:700px){.gd-cols{grid-template-columns:1fr}.modal{padding:16px}}

.jp-aff-banner{margin-top:10px;padding:12px;border-radius:10px;background:linear-gradient(135deg,#1a2035,#12172a);border:1px solid var(--line);position:relative}
.jp-aff-label{position:absolute;top:8px;right:10px;font-size:9px;color:var(--sub);letter-spacing:.05em;border:1px solid var(--line);border-radius:4px;padding:1px 5px}
.jp-aff-items{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.jp-aff-item{flex:1 1 140px;display:flex;flex-direction:column;gap:4px;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.04);transition:background .15s}
.jp-aff-item:hover{background:rgba(255,255,255,.09)}
.jp-aff-name{font-size:12px;font-weight:700;color:#fff}
.jp-aff-links{display:flex;gap:10px}
.jp-aff-links a{font-size:11px;color:var(--mlb,#4fc3f7);text-decoration:none}
.jp-aff-links a:hover{text-decoration:underline}
.jp-aff-more-row{display:flex;gap:14px;flex-wrap:wrap}
.jp-aff-more{display:inline-block;font-size:11.5px;color:var(--sub);text-decoration:none}
.jp-aff-more:hover{color:#fff}
@media(max-width:480px){
.jp-aff-item{flex:1 1 100%}
}

.filters label{display:inline-flex;align-items:center;gap:4px}
.fav-select{background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:5px 8px;font-size:12px;font-weight:700;margin-left:6px;cursor:pointer;max-width:160px}
.g.fav-game{border-color:var(--cta);box-shadow:0 0 0 1px var(--cta)}
.g.fav-game::before{content:"★";position:absolute;top:-9px;left:10px;background:var(--cta);color:#111;font-size:11px;font-weight:900;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;box-shadow:0 2px 4px rgba(0,0,0,.4)}
@media(max-width:480px){
.fav-select{max-width:120px}
}