/* ===== Report tables / sections (reused leaf components) ===== */
.report h1 { font-size: 1.5rem; margin: 20px 0 10px; text-align: left; }
.report h2 { font-size: 1.3125rem; color: var(--accent); margin: 25px 0 10px; }
.report h3 { font-size: 1.0625rem; color: var(--accent-2); margin: 16px 0 8px; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.report table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 0.875rem; white-space: nowrap; -webkit-text-size-adjust: 100%; }
.report th, .report td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.report th { color: var(--accent); font-weight: 600; }
.report tbody tr { transition: background 0.15s; }
.report tbody tr:hover { background: var(--panel-2); }
td.num, th.num { text-align: right; }
/* レンズ表は列幅を固定し、全体/勝利時/敗北時で値の位置がずれないようにする */
.report .lens-table table { table-layout: fixed; }
.report hr { border: none; border-top: 1px solid var(--line); margin: 16px 0; }
.report ul, .report ol { padding-left: 20px; }
.report ul.facts { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 6px; }
.report ul.facts > li { position: relative; padding-left: 16px; font-size: 0.9375rem; }
.report ul.facts > li::before { content: ''; position: absolute; left: 2px; top: 0.7em; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.report ul.advice-details { margin-top: 6px; padding-left: 24px; list-style: disc; font-size: 0.9375rem; opacity: 0.9; }
.val-great { color: var(--great); font-weight: bold; }
.val-good { color: var(--good); }
.val-bad { color: var(--bad); }
.val-terrible { color: var(--terrible); }
.report strong { color: var(--accent); }
.report .ms-name { color: var(--text); }
.report .tip-bold { color: var(--text); }
.report a { color: var(--accent); text-decoration: none; }
.report a:hover { text-decoration: underline; }
@keyframes fadeSlideIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.report details[open] > :not(summary) { animation: fadeSlideIn 0.25s ease-out; }
.report details { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; background: var(--panel-2); padding: 0 14px; }
.report details > summary { padding: 12px 0; }
.report details details { margin: 8px 0; margin-left: 0; padding: 0 12px; border-left: 1px solid var(--line); }
.report summary { cursor: pointer; font-weight: bold; color: var(--accent); transition: color 0.15s; }
.report summary:hover { color: var(--accent-2); }
.report details details > summary { font-size: 0.9375rem; color: var(--accent-2); }
.report th.sortable { cursor: pointer; user-select: none; }
.report th.sortable:hover { color: var(--accent-2); }
.show-more-wrap { text-align: center; margin: 8px 0; }
.show-more-btn { padding: 6px 16px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-sub); color: var(--accent); font-size: 0.875rem; cursor: pointer; transition: all 0.2s; width: auto; }
.show-more-btn:hover { border-color: var(--accent); background: var(--panel-2); }

/* ===== Heatmap (被撃墜と勝率) ===== */
.heatmap-wrap { margin: 10px 0; }
.heatmap th, .heatmap td { text-align: center; white-space: nowrap; }
.heatmap thead th:first-child, .heatmap tbody th { text-align: right; }
.heatmap tbody th { color: var(--accent); font-weight: 600; }
.heatmap-cell { min-width: 72px; }
.heatmap-cell-empty { background: var(--heat-empty); color: var(--text-faint); }
.heatmap tbody tr:hover th { background: transparent; } /* 各セルが独立色のため行hoverハイライトは無効化 */
.heatmap-wr { font-size: 1.0625rem; font-weight: 600; color: var(--heat-text); }
.heatmap-matches { font-size: 0.875rem; color: var(--heat-text); margin-top: 2px; }
.heatmap-legend { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; font-size: 0.875rem; color: var(--text-dim); }
.heatmap-legend-bar { display: inline-block; width: 120px; height: 10px; border-radius: 5px; background: linear-gradient(to right, var(--terrible-a85), var(--heat-mid), var(--win-a85)); }

/* ===== Charts ===== */
.chart-container { position: relative; height: 300px; margin: 12px 0; }
.chart-radar { max-width: 400px; margin: 0 auto; }