/* SV.LEAGUE WOMEN 分析。B.PREMIER 分析 (apps/bleague-analytics) と同じ見た目: 黒背景・蛍光緑の固定テーマ (ライト表示は無し)。
   系列の3色 (蛍光緑・青・オレンジ) は暗い背景で色覚の違いがあっても見分けられることを確認済み (validate_palette) */
:root {
  color-scheme: dark;
  --bg: #07090b;
  --surface: #0f1316;
  --surface-2: #151b1f;
  --border: #1f282e;
  --grid: #1a2227;
  --text-primary: #e8f0ec;
  --text-secondary: #a6b3ad;
  --text-muted: #6f7d77;
  --accent: #39ff88;      /* 蛍光緑: 琉球・選んだ選手・強調 */
  --series-1: #39ff88;
  --series-2: #2e9bff;    /* 青: ふつうの棒・2本目 */
  --series-3: #ff7a2e;    /* オレンジ: 3本目 */
  --bar: #2e9bff;
  --context: #253038;     /* 推移のグラフのほかのチーム */
  --good: #39ff88;
  --bad: #ff5c5c;
  --glow: 0 0 12px rgba(57, 255, 136, 0.35);
  --grid-strong: #26333a;
  /* 能力値のランク (S〜D)。文字のランクと一緒に出すので色だけには頼らない */
  --g-S: #ffd23f;
  --g-A: #39ff88;
  --g-B: #2e9bff;
  --g-C: #a6b3ad;
  --g-D: #6f7d77;
  --num: "Orbitron", system-ui, sans-serif;
}

/* 数字の書体 (ゲームの表示風)。英数字だけ */
@font-face { font-family: "Orbitron"; font-weight: 500; font-display: swap; src: url("/vendor/orbitron/orbitron-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Orbitron"; font-weight: 700; font-display: swap; src: url("/vendor/orbitron/orbitron-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Orbitron"; font-weight: 900; font-display: swap; src: url("/vendor/orbitron/orbitron-latin-900-normal.woff2") format("woff2"); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg) linear-gradient(rgba(57, 255, 136, 0.025) 1px, transparent 1px) 0 0 / 100% 28px; color: var(--text-primary); font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif; font-size: 13px; line-height: 1.45; }

/* ---- 見出し・タブ ---- */
.top { display: flex; align-items: center; gap: 0.55rem; padding: calc(0.5rem + env(safe-area-inset-top)) 14px 0.5rem; background: var(--bg); border-bottom: 1px solid var(--border); }
.logo { width: 22px; height: 22px; }
.top h1 { margin: 0; font-family: var(--num); font-size: 0.9rem; letter-spacing: 0.12em; font-weight: 700; }
.top h1 b { color: var(--accent); text-shadow: var(--glow); }
.fresh { margin-left: auto; font-size: 0.72rem; color: var(--text-muted); text-align: right; }
.tabs { position: sticky; top: 0; z-index: 10; display: flex; gap: 0.2rem; padding: 0.35rem 14px; background: rgba(7, 9, 11, 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); overflow-x: auto; }
.tabs button { flex: 0 0 auto; border: 1px solid transparent; background: none; padding: 0.35rem 0.75rem; border-radius: 999px; font: inherit; font-weight: 600; color: var(--text-secondary); cursor: pointer; }
.tabs button.active { color: var(--accent); border-color: var(--accent); box-shadow: var(--glow); }

/* ---- 配置: スマホ1列、タブレット2列 (横向きの iPad も)、PC (1400px 以上) 4列 ---- */
main { max-width: 1500px; margin: 0 auto; padding: 10px 12px calc(2rem + env(safe-area-inset-bottom)); }
.view { display: none; }
.view.active { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) {
  .view.active { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .span-2, .span-3, .span-all { grid-column: 1 / -1; }
}
@media (min-width: 1400px) {
  .view.active { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .span-2 { grid-column: span 2; }
  .span-3 { grid-column: span 3; }
  .span-all { grid-column: 1 / -1; }
}

/* ---- カード ---- */
/* 角に蛍光緑のかぎ (ゲームの HUD 風) */
.card {
  --corner: rgba(57, 255, 136, 0.55);
  background:
    linear-gradient(var(--corner), var(--corner)) top left / 12px 2px,
    linear-gradient(var(--corner), var(--corner)) top left / 2px 12px,
    linear-gradient(var(--corner), var(--corner)) bottom right / 12px 2px,
    linear-gradient(var(--corner), var(--corner)) bottom right / 2px 12px,
    var(--surface);
  background-repeat: no-repeat;
  border: 1px solid var(--border); border-radius: 4px; padding: 10px 12px; min-width: 0;
}
.card-head { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.4rem; }
.card h2 { margin: 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; color: var(--text-primary); text-transform: uppercase; }
.card h2::before { content: ""; display: inline-block; width: 3px; height: 0.9em; margin-right: 0.45rem; vertical-align: -0.1em; background: var(--accent); box-shadow: var(--glow); }
.sub { color: var(--text-muted); font-size: 0.7rem; }
.toggle { margin-left: auto; border: 1px solid var(--border); background: none; color: var(--text-secondary); border-radius: 999px; padding: 0.1rem 0.6rem; font: inherit; font-size: 0.7rem; cursor: pointer; }

/* ---- KPI のタイル ---- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 8px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-left: 2px solid var(--grid-strong); border-radius: 4px; padding: 8px 10px; min-width: 0; }
.card .kpi { background: var(--surface-2); }
.kpi .k { font-size: 0.66rem; color: var(--text-muted); letter-spacing: 0.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .v { font-family: var(--num); font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .v.hl { color: var(--accent); text-shadow: var(--glow); }
.kpi .s { font-size: 0.68rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- グラフ ---- */
.chart { position: relative; height: 240px; }
.chart.rank { height: 400px; }
.chart.square { height: 340px; }
.chart.trend { height: 300px; }
/* 横に並んだカードの高さいっぱいにグラフを伸ばす (順位表の横の推移グラフ) */
.card.fill { display: flex; flex-direction: column; }
.card.fill .chart { flex: 1 1 auto; height: auto; min-height: 300px; }

/* ---- 表 ---- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: 0.76rem; font-variant-numeric: tabular-nums; }
th, td { padding: 0.28rem 0.45rem; border-bottom: 1px solid var(--grid); text-align: right; white-space: nowrap; }
th { color: var(--text-muted); font-weight: 600; font-size: 0.68rem; position: sticky; top: 0; background: var(--surface); cursor: pointer; user-select: none; }
th:first-child, td:first-child, th.l, td.l { text-align: left; }
th.sorted { color: var(--accent); }
th.sorted::after { content: " ▾"; } th.sorted.asc::after { content: " ▴"; }
tr.fav td { color: var(--accent); font-weight: 700; }
tr.click { cursor: pointer; } tr.click:hover td { background: var(--surface-2); }
td.w { color: var(--good); font-weight: 700; } td.lose { color: var(--bad); font-weight: 700; }
td.best { color: var(--accent); font-weight: 700; }

/* ---- 操作 ---- */
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; margin-bottom: 0.5rem; }
.lbl { color: var(--text-muted); font-size: 0.75rem; }
select, textarea, input[type="search"] { font: inherit; color: var(--text-primary); background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 0.3rem 0.5rem; }
select:focus, textarea:focus, input:focus { outline: none; border-color: var(--accent); }
textarea { width: 100%; resize: vertical; font-size: 16px; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.seg button { border: none; background: none; color: var(--text-secondary); padding: 0.28rem 0.7rem; font: inherit; font-size: 0.75rem; cursor: pointer; }
.seg button.active { background: var(--accent); color: #04140a; font-weight: 700; }
.legend { display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; font-size: 0.72rem; color: var(--text-secondary); margin-bottom: 0.2rem; }
.legend span::before { content: ""; display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 0.35rem; vertical-align: middle; background: var(--c); }

/* ---- 選手の選び方 (キングスは選択、ほかのチームは前方一致の検索) ---- */
.pickers { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.picker { border: 1px solid var(--border); border-radius: 10px; padding: 8px; background: var(--surface-2); position: relative; }
.picker .who { font-size: 0.68rem; color: var(--text-muted); margin-bottom: 0.3rem; }
.picker .who i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-right: 0.3rem; vertical-align: middle; background: var(--c); }
.picker .row { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.picker select, .picker input { flex: 1 1 140px; min-width: 0; }
.results { position: absolute; left: 8px; right: 8px; top: 100%; z-index: 20; margin: 2px 0 0; padding: 0.2rem; list-style: none; background: var(--surface-2); border: 1px solid var(--accent); border-radius: 8px; max-height: 260px; overflow-y: auto; }
.results li { padding: 0.35rem 0.5rem; border-radius: 6px; cursor: pointer; }
.results li:hover, .results li.on { background: var(--surface); color: var(--accent); }
.results li small { color: var(--text-muted); margin-left: 0.4rem; }

/* ---- 選手のプロフィール ---- */
.profiles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.profile { border-top: 3px solid var(--c); }
.profile .name { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.profile .name b { font-size: 1.15rem; }
.profile .no { font-family: var(--num); font-size: 1.3rem; font-weight: 900; color: var(--c); }
.profile .meta { color: var(--text-secondary); font-size: 0.75rem; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 2px 10px; margin: 0.5rem 0; font-size: 0.75rem; }
.facts div { display: flex; justify-content: space-between; gap: 0.4rem; border-bottom: 1px dashed var(--grid); padding: 0.15rem 0; }
.facts span { color: var(--text-muted); }
.profile details { font-size: 0.72rem; color: var(--text-secondary); margin-bottom: 0.5rem; }
.profile .kpis { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 6px; }
.profile .kpi { padding: 6px 8px; }
.profile .kpi .v { font-size: 1.1rem; }

/* ---- 地区ごとの順位 ---- */
.district + .district { margin-top: 0.7rem; }
/* タブレット (2列のとき): 順位のカードを横いっぱいにして、東地区と西地区を横に並べる */
@media (min-width: 700px) and (max-width: 1399px) {
  .standings { grid-column: 1 / -1; }
  .standings .districts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .standings .district + .district { margin-top: 0; }
}
.district h3 { margin: 0 0 0.2rem; font-size: 0.72rem; letter-spacing: 0.08em; color: var(--accent); }

/* ---- 直近の試合・個人部門 ---- */
.games-mini { display: grid; gap: 4px; }
.games-mini div { display: grid; grid-template-columns: 3.2em 1.5em 1fr auto; gap: 0.4rem; align-items: center; font-size: 0.76rem; padding: 0.2rem 0.3rem; border-radius: 6px; background: var(--surface-2); }
.games-mini .w { color: var(--good); font-weight: 800; } .games-mini .lose { color: var(--bad); font-weight: 800; }
.leader { display: grid; grid-template-columns: 5.5em 1fr auto; gap: 0.4rem; font-size: 0.76rem; padding: 0.22rem 0; border-bottom: 1px solid var(--grid); }
.leader span:first-child { color: var(--text-muted); }
.leader b { color: var(--accent); font-variant-numeric: tabular-nums; }

/* ---- 質問 ---- */
.ask-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.3rem; flex: 1; }
.chips button { border: 1px solid var(--border); background: var(--surface-2); color: var(--text-secondary); border-radius: 999px; padding: 0.25rem 0.65rem; font: inherit; font-size: 0.72rem; cursor: pointer; text-align: left; }
.primary { border: 1px solid var(--accent); background: var(--accent); color: #04140a; border-radius: 8px; padding: 0.5rem 1.1rem; font: inherit; font-weight: 800; cursor: pointer; box-shadow: var(--glow); }
.primary:disabled { opacity: 0.5; }
.answer h2 { font-size: 0.95rem; text-transform: none; }
.answer .summary { margin: 0.3rem 0 0.7rem; white-space: pre-wrap; font-size: 0.85rem; }
.answer details { margin-top: 0.5rem; font-size: 0.72rem; color: var(--text-muted); }
.answer pre { white-space: pre-wrap; word-break: break-word; background: var(--surface-2); padding: 0.5rem; border-radius: 6px; }
.error { color: var(--bad); }
.loading { color: var(--text-muted); }
.history { list-style: none; margin: 0; padding: 0; }
.history li { padding: 0.35rem 0; border-bottom: 1px solid var(--grid); cursor: pointer; }
.history li small { color: var(--text-muted); margin-left: 0.4rem; }

/* ---- ステータス画面 (総合 | レーダー | 能力値のゲージ) ---- */
.status { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); align-items: center; margin: 0.4rem 0 0.6rem; }
@media (min-width: 560px) { .status { grid-template-columns: 150px minmax(0, 1fr); } .status .stats { grid-column: 1 / -1; } }
@media (min-width: 900px) { .status { grid-template-columns: 150px 260px minmax(0, 1fr); } .status .stats { grid-column: auto; } }
/* 2人を並べるときは縦に詰める */
.profiles .status { grid-template-columns: 130px minmax(0, 1fr); }
.profiles .status .stats { grid-column: 1 / -1; }
.ovr-box { display: grid; justify-items: center; gap: 4px; text-align: center; }
.ovr-hex { --gc: var(--g-C); width: 108px; height: 96px; display: grid; place-content: center; text-align: center; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); background: linear-gradient(160deg, color-mix(in srgb, var(--gc) 28%, transparent), transparent 70%), var(--surface-2); position: relative; }
.ovr-hex::before { content: ""; position: absolute; inset: 0; clip-path: inherit; background: var(--gc); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); padding: 2px; }
.ovr-hex small { font-family: var(--num); font-size: 0.62rem; letter-spacing: 0.2em; color: var(--text-secondary); }
.ovr-hex b { font-family: var(--num); font-size: 2.3rem; font-weight: 900; line-height: 1; color: var(--text-primary); text-shadow: 0 0 14px var(--gc); }
.ovr-hex.g-S { --gc: var(--g-S); } .ovr-hex.g-A { --gc: var(--g-A); } .ovr-hex.g-B { --gc: var(--g-B); } .ovr-hex.g-D { --gc: var(--g-D); }
.rank-big { font-family: var(--num); font-weight: 900; font-size: 0.8rem; letter-spacing: 0.2em; }
.lv { font-family: var(--num); font-size: 0.72rem; color: var(--text-secondary); white-space: nowrap; }
.lv small { font-family: system-ui, sans-serif; font-size: 0.6rem; color: var(--text-muted); }
.type { font-weight: 800; font-size: 0.95rem; color: var(--text-primary); }
.type small { display: block; font-family: var(--num); font-size: 0.58rem; letter-spacing: 0.2em; color: var(--text-muted); font-weight: 500; }
.good { font-size: 0.7rem; color: var(--text-secondary); }
.status .radar { position: relative; height: 230px; }
.stats { display: grid; gap: 7px; }
.stat { display: grid; grid-template-columns: 8.5em minmax(0, 1fr) 2.2em 1.4em; align-items: center; gap: 0.5rem; }
.sk { font-size: 0.76rem; font-weight: 700; line-height: 1.15; }
.sk small { display: block; font-weight: 400; font-size: 0.64rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sv { font-family: var(--num); font-size: 0.95rem; text-align: right; }
/* 20 個に区切ったゲージ (HP バー風) */
.gauge { position: relative; height: 10px; background: var(--surface-2); border: 1px solid var(--grid-strong); }
.gauge i { display: block; height: 100%; width: calc(var(--v) * 1%); background: var(--gc); box-shadow: 0 0 8px color-mix(in srgb, var(--gc) 60%, transparent); animation: fill 0.7s ease-out; }
.gauge::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(5% - 2px), var(--surface) calc(5% - 2px) 5%); }
@keyframes fill { from { width: 0; } }
@media (prefers-reduced-motion: reduce) { .gauge i, .vbar i { animation: none; } }
.gr { font-family: var(--num); font-weight: 900; font-size: 0.85rem; text-align: center; }
.g-S { color: var(--g-S); } .g-A { color: var(--g-A); } .g-B { color: var(--g-B); } .g-C { color: var(--g-C); } .g-D { color: var(--g-D); }
.rank-big.g-S, .gr.g-S { text-shadow: 0 0 10px rgba(255, 210, 63, 0.6); }
.note { margin: 0.2rem 0 0; font-size: 0.64rem; color: var(--text-muted); }

/* ---- 選手: 基本情報と自己ベスト ---- */
.info-row { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.info-row .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .profiles > .profile:only-child .info-row { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.records { background: var(--surface-2); border: 1px solid var(--grid-strong); padding: 6px 8px; margin: 0.5rem 0; }
.records h3 { margin: 0 0 0.2rem; font-family: var(--num); font-size: 0.62rem; letter-spacing: 0.2em; color: var(--g-S); }
.records > div:not(.badges) { display: grid; grid-template-columns: 5.5em 3.5em 1fr; gap: 0.4rem; align-items: baseline; font-size: 0.74rem; padding: 0.12rem 0; border-bottom: 1px dashed var(--grid); }
.records span { color: var(--text-muted); }
.records b { font-family: var(--num); }
.records small { color: var(--text-secondary); font-size: 0.66rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 0.35rem; }
.badges span { font-size: 0.66rem; color: var(--g-S); border: 1px solid rgba(255, 210, 63, 0.5); padding: 0.05rem 0.45rem; }

/* ---- VS (2選手の比較。格闘ゲームの体力バー風) ---- */
.vs-wrap { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 700px) { .vs-wrap { grid-template-columns: 260px minmax(0, 1fr); } }
.vs-wrap .radar { position: relative; height: 240px; }
.vs-head { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.6rem; align-items: center; margin-bottom: 0.4rem; font-size: 0.9rem; }
.vs-head b:last-child { text-align: right; }
.vs-head span { font-family: var(--num); font-weight: 900; font-size: 1.1rem; font-style: italic; color: var(--g-S); text-shadow: 0 0 10px rgba(255, 210, 63, 0.6); }
.vs-row { display: grid; grid-template-columns: 2.2em minmax(0, 1fr) 5.5em minmax(0, 1fr) 2.2em; gap: 0.4rem; align-items: center; margin: 5px 0; font-size: 0.74rem; }
.vs-row > span { text-align: center; color: var(--text-secondary); font-weight: 700; }
.vs-row > b { font-family: var(--num); color: var(--text-muted); }
.vs-row > b:last-child { text-align: right; }
.vs-row > b.win { color: var(--text-primary); }
.vbar { height: 10px; background: var(--surface-2); border: 1px solid var(--grid-strong); display: flex; }
.vbar.l { justify-content: flex-end; }
.vbar i { display: block; width: calc(var(--v) * 1%); animation: fill 0.7s ease-out; }
.vbar.l i { background: var(--series-1); box-shadow: 0 0 8px rgba(57, 255, 136, 0.5); }
.vbar.r i { background: var(--series-2); box-shadow: 0 0 8px rgba(46, 155, 255, 0.5); }

/* ---- 小さい OVR (一覧用) ---- */
.mini-hex { --gc: var(--g-C); display: inline-grid; place-content: center; width: 34px; height: 30px; flex: 0 0 auto; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); background: color-mix(in srgb, var(--gc) 22%, var(--surface-2)); vertical-align: middle; }
.mini-hex b { font-family: var(--num); font-size: 0.78rem; font-weight: 900; color: var(--text-primary); }
.mini-hex.g-S { --gc: var(--g-S); } .mini-hex.g-A { --gc: var(--g-A); } .mini-hex.g-B { --gc: var(--g-B); } .mini-hex.g-D { --gc: var(--g-D); }

/* ---- 調子 (矢印と文字。色だけに頼らない) ・ レベルアップ ---- */
.form { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.7rem; font-weight: 700; padding: 0.05rem 0.45rem; border: 1px solid currentColor; border-radius: 3px; white-space: nowrap; }
.form i { font-style: normal; font-size: 0.85rem; }
.form.f5 { color: #ff7a2e; background: rgba(255, 122, 46, 0.12); }
.form.f4 { color: #ffd23f; }
.form.f3 { color: var(--text-secondary); }
.form.f2 { color: #7fb2ff; }
.form.f1 { color: #2e9bff; background: rgba(46, 155, 255, 0.12); }
.form.f0 { color: var(--text-muted); border-color: transparent; }
.lvup, .lvdown { display: inline-block; margin-left: 0.3rem; font-family: var(--num); font-size: 0.62rem; font-weight: 900; letter-spacing: 0.06em; padding: 0.1rem 0.4rem; border-radius: 3px; white-space: nowrap; }
.lvup { color: #04140a; background: var(--accent); box-shadow: var(--glow); animation: blink 1.6s ease-in-out infinite; }
.lvdown { color: var(--text-muted); border: 1px solid var(--grid-strong); }
@keyframes blink { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .lvup { animation: none; } }
.chips-r { margin-left: auto; display: inline-flex; align-items: center; }
.lv-detail { font-size: 0.7rem; color: var(--text-secondary); margin-top: 0.15rem; }
.lv-detail .up, .pv-note .up { color: var(--good); } .lv-detail .down, .pv-note .down { color: var(--bad); }

/* ---- 称号 ---- */
.sub-head { font-family: var(--num); font-size: 0.62rem; letter-spacing: 0.2em; color: var(--text-muted); margin: 0.5rem 0 0.3rem; }
.titles { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.title-badge { display: flex; gap: 0.45rem; align-items: center; background: var(--surface-2); border: 1px solid var(--grid-strong); border-left: 3px solid var(--accent); padding: 5px 8px; }
.title-badge.gold { border-left-color: var(--g-S); background: linear-gradient(90deg, rgba(255, 210, 63, 0.12), var(--surface-2)); }
.title-badge > i { font-style: normal; font-size: 1.15rem; }
.title-badge b { font-size: 0.78rem; }
.title-badge.gold b { color: var(--g-S); }
.title-badge small { display: block; font-size: 0.64rem; color: var(--text-muted); }
.title-badge em { margin-left: 0.35rem; font-style: normal; font-family: var(--num); font-size: 0.56rem; font-weight: 900; color: #04140a; background: var(--g-S); padding: 0 0.3rem; border-radius: 2px; }

/* ---- スタミナ ---- */
.stamina { background: var(--surface-2); border: 1px solid var(--grid-strong); padding: 8px 10px; margin: 0.6rem 0; }
.st-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem; }
.st-head small { font-family: var(--num); font-size: 0.6rem; letter-spacing: 0.2em; color: var(--text-muted); }
.st-head b { font-size: 0.9rem; }
.st-head span { font-size: 0.66rem; color: var(--g-S); border: 1px solid rgba(255, 210, 63, 0.5); padding: 0 0.4rem; }
.st-name { font-size: 0.72rem; font-weight: 700; margin-top: 0.2rem; }
.st-bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 0.4rem; }
.st-q { display: grid; justify-items: center; gap: 3px; text-align: center; }
.st-q > b { font-family: var(--num); font-size: 0.85rem; }
.st-q > b.up { color: var(--good); } .st-q > b.down { color: var(--bad); }
.st-q > span { font-family: var(--num); font-size: 0.7rem; color: var(--text-secondary); }
.st-q small { font-size: 0.62rem; color: var(--text-muted); white-space: nowrap; }
.st-col { position: relative; width: 26px; height: 70px; background: var(--surface); border: 1px solid var(--grid-strong); }
.st-col i { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--h) * 1%); background: var(--accent); box-shadow: var(--glow); animation: rise 0.7s ease-out; }
.st-col::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 calc(10% - 2px), var(--surface) calc(10% - 2px) 10%); }
.diverge .st-col::before { content: ""; position: absolute; left: -3px; right: -3px; top: 50%; border-top: 1px solid var(--text-muted); z-index: 1; }
.diverge .st-col i.pos { bottom: 50%; }
.diverge .st-col i.neg { top: 50%; bottom: auto; background: var(--bad); box-shadow: 0 0 8px rgba(255, 92, 92, 0.5); }
@keyframes rise { from { height: 0; } }
@media (prefers-reduced-motion: reduce) { .st-col i { animation: none; } }

/* ---- 次の試合 (対戦予告) ---- */
.pv-when { font-size: 0.76rem; color: var(--text-secondary); margin-bottom: 0.4rem; }
.pv-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.6rem; }
.pv-team { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.pv-head .pv-team:last-child { flex-direction: row-reverse; text-align: right; }
.pv-team .mini-hex { width: 52px; height: 46px; }
.pv-team .mini-hex b { font-size: 1.15rem; }
.pv-team b { font-size: 1.15rem; display: block; }
.pv-team small { display: block; font-size: 0.68rem; color: var(--text-muted); }
.pv-team .ha { font-family: var(--num); font-size: 0.58rem; letter-spacing: 0.2em; color: var(--text-secondary); }
.pv-vs { font-family: var(--num); font-weight: 900; font-style: italic; font-size: 1.6rem; color: var(--g-S); text-shadow: 0 0 12px rgba(255, 210, 63, 0.6); }
.pv-prob { margin: 0.7rem 0 0.4rem; }
.pv-bar { height: 12px; display: flex; background: var(--series-2); border: 1px solid var(--grid-strong); }
.pv-bar i { width: calc(var(--v) * 1%); background: var(--series-1); box-shadow: 0 0 10px rgba(57, 255, 136, 0.5); border-right: 2px solid var(--surface); animation: fill 0.9s ease-out; }
.pv-nums { display: grid; grid-template-columns: auto 1fr auto; gap: 0.5rem; align-items: baseline; margin-top: 0.2rem; }
.pv-nums b { font-family: var(--num); font-size: 1.2rem; }
.pv-nums b:first-child { color: var(--series-1); } .pv-nums b:last-child { color: var(--series-2); }
.pv-nums span { text-align: center; font-size: 0.7rem; color: var(--text-secondary); }
.pv-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); margin-top: 0.4rem; }
@media (min-width: 700px) { .pv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pv-grid > div:last-child { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .pv-grid { grid-template-columns: 1.1fr 1fr 1fr; } .pv-grid > div:last-child { grid-column: auto; } }
.pv-grid h3 { margin: 0.2rem 0 0.35rem; font-size: 0.7rem; letter-spacing: 0.06em; color: var(--accent); }
.pv-grid h3.opp { color: var(--series-2); margin-top: 0.6rem; }
.pv-note { font-size: 0.72rem; color: var(--text-secondary); margin: 0.3rem 0 0; }
.pv-keys { display: grid; gap: 4px; }
.pv-key { display: flex; align-items: center; gap: 0.45rem; padding: 3px 4px; background: var(--surface-2); cursor: pointer; }
.pv-key .pk-info { flex: 1; min-width: 0; }
.pv-key b { font-size: 0.76rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-key small { font-size: 0.64rem; color: var(--text-muted); }
.pv-st { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pv-st .stamina { margin: 0; padding: 6px; }
.pv-st .st-bars { gap: 4px; }
.pv-st .st-col { width: 18px; height: 54px; }
.pv-st .note { display: none; }
.pv-h2h { display: flex; flex-wrap: wrap; gap: 4px; font-size: 0.74rem; color: var(--text-secondary); }
.pv-h2h span { padding: 0.15rem 0.5rem; background: var(--surface-2); cursor: pointer; font-variant-numeric: tabular-nums; }
.pv-h2h .w { color: var(--good); } .pv-h2h .lose { color: var(--bad); }

/* ---- 琉球のコンディション ---- */
.roster { display: grid; gap: 4px; }
.ro { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "hex name chips" "hex badges badges"; gap: 0 0.5rem; align-items: center; padding: 4px 6px; background: var(--surface-2); cursor: pointer; }
.ro:hover { outline: 1px solid var(--accent); }
.ro .mini-hex { grid-area: hex; }
.ro-name { grid-area: name; min-width: 0; }
.ro-name b { font-size: 0.78rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ro-name small { font-size: 0.64rem; color: var(--text-muted); }
.ro-chips { grid-area: chips; display: inline-flex; align-items: center; }
.ro-badges { grid-area: badges; font-size: 0.8rem; letter-spacing: 0.1em; min-height: 0; }
.ro-badges em { font-style: normal; font-family: var(--num); font-size: 0.55rem; font-weight: 900; color: #04140a; background: var(--g-S); padding: 0 0.3rem; margin-left: 0.3rem; border-radius: 2px; vertical-align: middle; }

/* ---- ボス一覧 ---- */
.boss { padding: 6px 8px; background: var(--surface-2); border-left: 3px solid var(--bad); margin-bottom: 5px; }
.boss.ours { border-left-color: var(--g-S); }
.boss-top { display: grid; grid-template-columns: 5.5em minmax(0, 1fr) auto; gap: 0.4rem; align-items: baseline; }
.boss-cat { font-size: 0.7rem; color: var(--text-muted); }
.boss-name { cursor: pointer; font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boss-name small { color: var(--text-muted); }
.boss-v { font-family: var(--num); font-size: 0.9rem; }
.hp { height: 8px; margin: 4px 0 2px; background: var(--surface); border: 1px solid var(--grid-strong); }
.hp i { display: block; height: 100%; width: calc(var(--v) * 1%); background: var(--accent); box-shadow: var(--glow); animation: fill 0.8s ease-out; }
.boss-ch { display: flex; justify-content: space-between; gap: 0.4rem; font-size: 0.68rem; color: var(--text-secondary); cursor: pointer; }
.boss-ch b { font-family: var(--num); color: var(--text-primary); }
.boss-msg { font-size: 0.7rem; color: var(--g-S); margin-top: 2px; }

/* ---- 押せる行 (バトルログ) ---- */
.games-mini .click { cursor: pointer; } .games-mini .click:hover { outline: 1px solid var(--accent); }

/* ---- バトルログ (RPG のメッセージ枠: 黒地に白い二重線) ---- */
.battle { padding: 0; border: none; background: transparent; color: var(--text-primary); width: min(560px, calc(100% - 24px)); max-height: 86vh; }
.battle::backdrop { background: rgba(0, 0, 0, 0.75); }
.bw { background: #000; border: 3px double #e8f0ec; border-radius: 6px; padding: 12px 14px; box-shadow: 0 0 0 2px #000, 0 0 24px rgba(57, 255, 136, 0.25); }
.bt { display: flex; align-items: baseline; gap: 0.6rem; border-bottom: 1px solid var(--grid-strong); padding-bottom: 0.4rem; margin-bottom: 0.5rem; font-weight: 700; }
.bt small { font-family: var(--num); font-size: 0.62rem; letter-spacing: 0.2em; color: var(--accent); }
.bl { max-height: 60vh; overflow-y: auto; font-size: 0.92rem; line-height: 1.7; }
.bl p { margin: 0; padding-left: 1.1em; text-indent: -1.1em; animation: appear 0.25s ease-out; }
.bl p::before { content: "▶ "; color: var(--accent); font-size: 0.7em; }
.bl p.last { margin-top: 0.4rem; color: var(--g-S); font-weight: 800; }
.bw form { text-align: right; margin-top: 0.6rem; }
@keyframes appear { from { opacity: 0; transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .bl p { animation: none; } }
/* スマホでは対戦予告のスタミナの細かい数字 (得点-失点) を出さない (幅が足りない) */
@media (max-width: 599px) { .pv-st .st-q small { display: none; } .pv-st .st-q > b { font-size: 0.72rem; } }

/* ---- 対戦カード: 試合の選び方・結果 ---- */
.nav-btn { border: 1px solid var(--border); background: var(--surface-2); color: var(--accent); border-radius: 8px; padding: 0.3rem 0.65rem; font: inherit; cursor: pointer; }
.nav-btn:disabled { color: var(--text-muted); opacity: 0.5; cursor: default; }
#mu-game { min-width: 0; flex: 1 1 200px; max-width: 320px; }
.pv-score { display: grid; justify-items: center; }
.pv-score b { font-family: var(--num); font-size: 1.7rem; font-weight: 900; white-space: nowrap; }
.pv-score small { font-family: var(--num); font-size: 0.7rem; font-weight: 900; letter-spacing: 0.25em; }
.pv-score.win small { color: var(--good); text-shadow: var(--glow); } .pv-score.lose small { color: var(--bad); }
.pv-nums em { font-style: normal; font-weight: 800; padding: 0 0.35rem; border-radius: 3px; }
.pv-nums em.hit { color: #04140a; background: var(--accent); } .pv-nums em.miss { color: var(--text-primary); border: 1px solid var(--text-muted); }
.hero-no { flex: 0 0 34px; text-align: center; font-family: var(--num); font-size: 0.72rem; font-weight: 900; color: var(--text-muted); }
.pv-key:first-child .hero-no { color: var(--g-S); text-shadow: 0 0 8px rgba(255, 210, 63, 0.6); }
.hero-eff { font-family: var(--num); font-size: 0.72rem; color: var(--text-secondary); white-space: nowrap; }
.battle-btn { width: 100%; margin: 0.6rem 0 0.2rem; }
.pv-h2h span.now { outline: 1px solid var(--accent); }
.st-bars.ot { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
@media (max-width: 599px) { .pv-score b { font-size: 1.3rem; } }

/* ---- 予想の的中率 ---- */
.acc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0.2rem 0 0.6rem; padding: 6px 8px; background: var(--surface-2); border: 1px solid var(--grid-strong); }
.acc-title { font-size: 0.7rem; font-weight: 700; color: var(--accent); margin-right: 0.2rem; }
.acc-item { display: inline-flex; align-items: baseline; gap: 0.3rem; padding-right: 0.6rem; border-right: 1px solid var(--grid-strong); }
.acc-item:last-child { border-right: none; }
.acc-item small { font-size: 0.66rem; color: var(--text-muted); }
.acc-item b { font-family: var(--num); font-size: 0.9rem; }
.acc-item.main b { font-size: 1.1rem; color: var(--accent); text-shadow: var(--glow); }
.acc-item i { font-style: normal; font-size: 0.62rem; color: var(--text-muted); }
@media (max-width: 599px) {
  .acc { display: grid; grid-template-columns: 1fr 1fr; }
  .acc-title { grid-column: 1 / -1; }
  .acc-item { border-right: none; padding-right: 0; flex-wrap: wrap; }
}

/* 予想の内訳・振り返り・予想の学習 */
.pv-parts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0.1rem 0 0.5rem; font-size: 0.7rem; }
.pv-parts small { color: var(--text-muted); width: 100%; }
.pv-parts span { display: inline-flex; gap: 0.3rem; align-items: baseline; }
.pv-parts i { font-style: normal; color: var(--text-secondary); }
.pv-parts b, .rv-row > b { font-family: var(--num); font-variant-numeric: tabular-nums; }
.pv-parts .up, .review .up, .rv-row .up { color: var(--good); } .pv-parts .down, .review .down, .rv-row .down { color: var(--bad); }
.review { margin: 0.2rem 0 0.6rem; padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--grid-strong); border-left: 2px solid var(--accent); }
.rv-head { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; align-items: baseline; font-size: 0.78rem; margin-bottom: 0.4rem; }
.rv-head > b { color: var(--accent); font-size: 0.72rem; }
.rv-row { display: grid; grid-template-columns: 10em minmax(60px, 1fr) 3.4em; grid-template-areas: "l bar v" "s s s"; align-items: center; gap: 2px 8px; margin: 0.35rem 0; font-size: 0.74rem; }
.rv-row .rv-l { grid-area: l; color: var(--text-secondary); }
.rv-row > b { grid-area: v; text-align: right; }
.rv-row small { grid-area: s; font-size: 0.64rem; color: var(--text-muted); line-height: 1.4; }
.rv-bar { grid-area: bar; position: relative; height: 8px; background: var(--grid); }
.rv-bar::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--text-muted); }
.rv-bar i { position: absolute; top: 0; bottom: 0; width: calc(var(--w) * 1%); border-radius: 2px; }
.rv-bar i.pos { left: 50%; background: var(--good); } .rv-bar i.neg { right: 50%; background: var(--bad); }
.rv-bar.one::after { display: none; }
.rv-bar.one i.neg { left: 0; right: auto; background: var(--series-3); }
.rv-row.cause { grid-template-columns: 10em minmax(60px, 1fr) 2em; }
.learn-notes { margin: 0 0 0.7rem; padding-left: 1.1rem; font-size: 0.78rem; color: var(--text-secondary); line-height: 1.6; }
.learn-kpis { margin-bottom: 0.8rem; }
.learn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.learn-grid h3 { margin: 0 0 0.4rem; font-size: 0.78rem; color: var(--accent); }
.learn-grid .span2 { grid-column: 1 / -1; }
.learn-grid > div { min-width: 0; }
.learn-grid td small { display: block; font-size: 0.62rem; }
.learn-grid .muted { color: var(--text-muted); }
.lj { display: inline-block; padding: 1px 6px; border-radius: 999px; font-size: 0.64rem; border: 1px solid var(--grid-strong); white-space: nowrap; }
.lj.on { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.lj.mid { color: var(--series-2); border-color: var(--series-2); }
.lj.wait { color: var(--text-muted); }
.lj.off { color: var(--text-secondary); }
.learn-miss { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; }
.learn-miss button { display: grid; grid-template-columns: 1fr auto; gap: 2px 6px; text-align: left; font: inherit; font-size: 0.74rem; color: var(--text-primary); background: var(--surface-2); border: 1px solid var(--border); border-left: 2px solid var(--bad); padding: 6px 8px; cursor: pointer; }
.learn-miss button:hover { border-color: var(--accent); }
.learn-miss b { font-family: var(--num); font-size: 0.74rem; }
.learn-miss small { grid-column: 1 / -1; font-size: 0.64rem; color: var(--text-muted); }
.learn-hist { display: grid; gap: 4px; font-size: 0.72rem; }
.learn-hist div { display: grid; grid-template-columns: 3.5em 11em 1fr; gap: 8px; align-items: baseline; }
.learn-hist small { color: var(--text-muted); }
@media (max-width: 700px) {
  .learn-grid { grid-template-columns: 1fr; }
  .learn-hist div { grid-template-columns: 3.5em 1fr; }
  .learn-hist small { grid-column: 1 / -1; }
  .rv-row, .rv-row.cause { grid-template-columns: 9.5em minmax(40px, 1fr) 3em; }
  .learn-grid td.desc, .learn-grid th.desc, .learn-grid td small { display: none; }
  .learn-miss { grid-template-columns: 1fr; }
}
.injuries { margin-top: 0.7rem; }
.injuries h3 { margin: 0 0 0.35rem; font-size: 0.78rem; color: var(--bad); }
.inj-list { display: flex; flex-wrap: wrap; gap: 6px; }
.inj { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.4rem; padding: 4px 8px; font-size: 0.74rem; background: var(--surface-2); border: 1px solid var(--border); border-left: 2px solid var(--bad); }
.inj[data-id] { cursor: pointer; }
.inj i { font-style: normal; color: var(--text-secondary); }
.inj small { width: 100%; font-size: 0.62rem; color: var(--text-muted); }

/* ---- SV.LEAGUE だけの部品 ---- */
.season { margin-left: 0.3rem; background: var(--surface-2); color: var(--text-secondary); border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 0.72rem; padding: 0.15rem 0.3rem; }
.last5 { display: inline-flex; gap: 2px; }
.last5 i { font-style: normal; font-family: var(--num); font-size: 0.6rem; font-weight: 700; width: 1.25em; text-align: center; border-radius: 2px; }
.last5 i.w { color: #04140a; background: var(--good); } .last5 i.lose { color: var(--text-primary); background: color-mix(in srgb, var(--bad) 45%, var(--surface-2)); }
td .w, .set-scores .w, .flow-h .w { color: var(--good); } td .lose, .set-scores .lose, .flow-h .lose { color: var(--bad); }
/* セットカウントの起こりやすさ */
.dist { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 0.5rem 0 0.1rem; }
.dist-col { display: grid; justify-items: center; gap: 2px; font-size: 0.7rem; padding: 2px 0; border: 1px solid transparent; }
.dist-col.actual { border-color: var(--g-S); box-shadow: 0 0 8px rgba(255, 210, 63, 0.4); }
.dist-col b { font-family: var(--num); font-size: 0.78rem; }
.dist-col span { font-family: var(--num); font-size: 0.68rem; color: var(--text-secondary); }
.dist-bar { width: 70%; height: 54px; display: flex; align-items: flex-end; background: var(--surface-2); border: 1px solid var(--grid-strong); }
.dist-bar i { display: block; width: 100%; height: calc(var(--h) * 1%); }
.dist-bar i.win { background: var(--series-1); box-shadow: 0 0 8px rgba(57, 255, 136, 0.4); } .dist-bar i.lose { background: var(--series-2); }
/* セットの点数 */
.set-scores { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 0.5rem 0 0.2rem; }
.set-scores span { font-family: var(--num); font-size: 0.82rem; padding: 0.15rem 0.55rem; background: var(--surface-2); border: 1px solid var(--grid-strong); }
.set-scores small { font-size: 0.58rem; color: var(--text-muted); margin-right: 0.35rem; }
/* 点差の流れ */
.flows { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.flow { background: var(--surface-2); padding: 4px 6px; }
.flow-h { display: flex; justify-content: space-between; font-family: var(--num); font-size: 0.66rem; }
.flow svg { display: block; width: 100%; height: 56px; }
.flow polyline { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.flow line.zero { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
/* 試合の記録の比べ合い */
.vs-tbl { display: grid; gap: 3px; }
.vs-tbl div { display: grid; grid-template-columns: 4.2em 1fr 4.2em; gap: 0.4rem; align-items: center; font-size: 0.74rem; padding: 2px 4px; background: var(--surface-2); }
.vs-tbl span { text-align: center; color: var(--text-secondary); }
.vs-tbl b { font-family: var(--num); font-size: 0.74rem; color: var(--text-muted); font-weight: 500; }
.vs-tbl b:last-child { text-align: right; }
.vs-tbl b.win { color: var(--text-primary); font-weight: 700; }
/* 個人部門 */
.leaders-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 16px; }
.board h3 { margin: 0 0 0.2rem; font-size: 0.74rem; color: var(--accent); }
.board h3 small { font-size: 0.62rem; color: var(--text-muted); font-weight: 400; }
.board .leader { grid-template-columns: 1.2em 1fr auto; cursor: pointer; }
.board .leader b small { font-size: 0.62rem; color: var(--text-muted); font-weight: 400; }
/* セットごとの取った割合 */
.set-win { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.set-win div { display: grid; justify-items: center; padding: 6px 0; background: var(--surface-2); }
.set-win small { font-family: var(--num); font-size: 0.6rem; color: var(--text-muted); }
.set-win b { font-family: var(--num); font-size: 1rem; }
.set-win i { font-style: normal; font-size: 0.64rem; color: var(--text-muted); }
.pl-nums { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 0.4rem; }
.ovr-box .form, .ovr-box .lvup, .ovr-box .lvdown { margin-top: 2px; }
@media (max-width: 599px) {
  .dist { gap: 3px; }
  .dist-bar { height: 42px; }
  .vs-tbl div { grid-template-columns: 3.8em 1fr 3.8em; }
}
.vs-row { grid-template-columns: 2.2em minmax(0, 1fr) 6.5em minmax(0, 1fr) 2.2em; }
.rv-bar.one i.pos { left: 0; right: auto; background: var(--series-1); }
@media (max-width: 599px) {
  .pv-team b { font-size: 0.95rem; }
  .top h1 { font-size: 0.8rem; }
}